/
inside * a table on /glossary/estilos/ that was widening the whole table). Small * indents (30-90px) already fit and are kept as-is. Each known value is * matched with and without a space after the colon * ("padding-left: Npx" / "padding-left:Npx"); the "padding-left:" prefix on * every selector is required so e.g. "30px" can never accidentally match * inside "330px". The generic fallback below the value list has the same * attribute-selector specificity as every per-value rule, so it is placed * FIRST: any padding-left value not in the known list still gets a safe * cap, and every known value's own rule (later in the cascade) overrides it * with its exact min(). * ---------------------------------------------------------------------- */ @media (max-width: 780px) { /* Fallback for any padding-left value not covered by name below. */ :is(#content, #content-full) [style*="padding-left:"] { padding-left: min(60px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 30px"], :is(#content, #content-full) [style*="padding-left:30px"] { padding-left: min(30px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 40px"], :is(#content, #content-full) [style*="padding-left:40px"] { padding-left: min(40px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 60px"], :is(#content, #content-full) [style*="padding-left:60px"] { padding-left: min(60px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 90px"], :is(#content, #content-full) [style*="padding-left:90px"] { padding-left: min(90px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 120px"], :is(#content, #content-full) [style*="padding-left:120px"] { padding-left: min(120px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 150px"], :is(#content, #content-full) [style*="padding-left:150px"] { padding-left: min(150px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 180px"], :is(#content, #content-full) [style*="padding-left:180px"] { padding-left: min(180px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 210px"], :is(#content, #content-full) [style*="padding-left:210px"] { padding-left: min(210px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 240px"], :is(#content, #content-full) [style*="padding-left:240px"] { padding-left: min(240px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 270px"], :is(#content, #content-full) [style*="padding-left:270px"] { padding-left: min(270px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 330px"], :is(#content, #content-full) [style*="padding-left:330px"] { padding-left: min(330px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 360px"], :is(#content, #content-full) [style*="padding-left:360px"] { padding-left: min(360px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 390px"], :is(#content, #content-full) [style*="padding-left:390px"] { padding-left: min(390px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 420px"], :is(#content, #content-full) [style*="padding-left:420px"] { padding-left: min(420px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 450px"], :is(#content, #content-full) [style*="padding-left:450px"] { padding-left: min(450px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 480px"], :is(#content, #content-full) [style*="padding-left:480px"] { padding-left: min(480px, 25%) !important; } :is(#content, #content-full) [style*="padding-left: 520px"], :is(#content, #content-full) [style*="padding-left:520px"] { padding-left: min(520px, 25%) !important; } } /* ----------------------------------------------------------------------- * 8. Tap target height, footer menu, <= 1024px * * Root cause: #menu-menupie li > a has no padding/line-height of its own, * so its rendered height comes straight from the surrounding font-size * (measured 22px on phones, 19px on tablets - both below the WCAG 2.5.8 * 24x24px minimum). Only layout (height) changes; color/font are untouched. * ---------------------------------------------------------------------- */ @media (max-width: 1024px) { #menu-menupie li > a { display: inline-block; min-height: 24px; line-height: 24px; padding: 3px 0; } } /* ----------------------------------------------------------------------- * 9. Glossary A-Z index, <= 1024px * * Root cause: the glossary plugin gives .glossary-menu-atoz a fixed * height:25px (with its border-bottom) and floats 22px-high letters inside * it. Below ~1280px the 28 letters wrap onto 2-3 rows, so the rule is drawn * under the first row only and the other rows hang below it; each letter * link is only as wide as its glyph (4px for "I"). Let the list grow with * its rows and give each letter a 24x24px target. Colors/fonts untouched. * ---------------------------------------------------------------------- */ @media (max-width: 1024px) { .glossary-menu-atoz { display: flow-root; height: auto !important; } .glossary-menu-atoz .glossary-menu-item { height: auto !important; } .glossary-menu-atoz .glossary-menu-item a { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; text-align: center; } } /* ----------------------------------------------------------------------- * 10. Cookie-policy table, phone only, <= 780px * * Root cause: the 5-column cookie table (deploy/legal/cookie-policy.html) * sizes to its content (~530px), wider than every phone column, so the whole * page scrolled sideways and the "Duraci�n" / "Tipo" columns were clipped. * Make the table its own horizontal scroll box so only the table scrolls. * Scoped to the page that holds the cookie-consent reopen button (:has() is * supported by every evergreen browser; older ones keep today's behavior); * other content tables are left alone. * ---------------------------------------------------------------------- */ @media (max-width: 780px) { #content:has([data-cookie-consent-reopen]) table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ----------------------------------------------------------------------- * 11. Justified text around e-mail addresses and links, phone only, <= 780px * * Root cause: style.css sets `p{text-align:justify}`. On a ~380px column the * long unbreakable address alarifeglosario@gmail.com (privacy policy, section * 4) moves to the next line as a whole, and justification stretches the * previous line into wide word gaps (up to ~68px measured). The contact form * has the same problem in its privacy notice (the paragraph before the submit * button ends in a link). Left-align just those blocks; every other * paragraph stays justified. Desktop is untouched. * Captions and block-editor aligned paragraphs keep their own alignment * (the author caption on /alarife-2/ holds the e-mail and is centered). * ---------------------------------------------------------------------- */ @media (max-width: 780px) { /* The author caption on /alarife-2/ pads its e-mail with non-breaking * spaces. On desktop the narrow caption wraps them onto their own line; * the wider phone caption keeps them on the e-mail's line and pushes it * right. Put the e-mail on its own line, as desktop shows it. */ .wp-caption-text a[href^="mailto:"] { display: block; } :is(#content, #content-full) p:has(a[href^="mailto:"]):not(.wp-caption-text, .has-text-align-center, .has-text-align-right), .wpcf7-form p { text-align: left; } } /* ----------------------------------------------------------------------- * 12. /contacto/ form centered in its column, phones and small tablets, <= 780px * * Root cause: the form sits inside div#diccionario, the glossary wrapper that * style.css indents with `margin-left:71px` (and no right margin). On a ~390px * column that pinned the form to the right (74px left gap, ~4px right gap) and * squeezed the fields; on tablets the text/email inputs (size="40") were also * narrower than the full-width textarea. Only the wrapper that directly holds a * Contact Form 7 form is touched (:has(> .wpcf7)); glossary pages keep their * indent. The form gets equal side gutters, every field spans the same width, * the submit button and the reply notice below it are centered (the labels and * the privacy notice stay left-aligned so they read next to their fields), and * the button keeps a tap target >= 24px (WCAG 2.5.8). * ---------------------------------------------------------------------- */ @media (max-width: 780px) { #diccionario:has(> .wpcf7) { margin-left: 12px; margin-right: 12px; text-align: center; } #diccionario:has(> .wpcf7) .wpcf7-form-control-wrap { display: block; } #diccionario:has(> .wpcf7) .wpcf7-form :is(input.wpcf7-text, input.wpcf7-email, textarea) { width: 100% !important; } #diccionario:has(> .wpcf7) .wpcf7-form p:has(.wpcf7-submit) { text-align: center; } /* Simón's phone, 2026-10-09 evening (P3): the button was 40px tall and only as wide as its word (56px). Less tall, a bit wider; still a tap target >= 24px. */ #diccionario:has(> .wpcf7) .wpcf7-submit { min-height: 32px; padding: 4px 28px; } /* The (hidden) sending spinner must not take inline space next to the button, or the button is not centered; it shows to the right of it while sending. */ #diccionario:has(> .wpcf7) .wpcf7-spinner { position: absolute; margin: 0 0 0 12px; } } /* ----------------------------------------------------------------------- * 13. Page titles, phone and small tablet, <= 780px * * Root cause: style.css's <= 767px query sets every .page-title to 1.3em * (~20.8px), a Rouge Script face that is already light, so on a phone the * title under the header reads as a caption (the client's remark). Desktop * is 40px / line-height 1.5em. Phones get 32px with a tighter line-height so * a two-line title does not leave a big gap between its lines. Only * .page-title is touched; glossary term titles (.post-title) keep theirs. * ---------------------------------------------------------------------- */ @media (max-width: 780px) { .page-title { font-size: 32px; line-height: 1.2em; } } /* ----------------------------------------------------------------------- * 14. A-Z term list columns, phone and small tablet, <= 780px * * Root cause: customizations.css sets `.anckla{column-count:4}` with no media * query. The lists on /sillares/ (and every letter page of the index) open * when a letter is clicked; at 390px four columns are ~90px wide, so terms * wrap onto two or three lines and long ones are cut in the middle * ("alcazab-a"). Two columns up to 480px, three from 481px to 780px; desktop * keeps four. Same vendor-prefixed properties as the original rule. * ---------------------------------------------------------------------- */ @media (max-width: 480px) { .anckla { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; -o-column-count: 2; } } @media (min-width: 481px) and (max-width: 780px) { .anckla { column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; } } /* ----------------------------------------------------------------------- * 15. Left-aligned body text, phone and small tablet, <= 780px * * (Extended 2026-10-06 after the whole-site phone audit: see the rules below * the paragraph one for list items, other inline-justified blocks, the intro * box .cabecera3 and the cookie banner.) * * Root cause: style.css sets `p{text-align:justify}`. On a ~380px column a * justified line holds four or five words, and any long word that moves to * the next line stretches the gaps of the line before it (section 11 fixed * the two worst cases, the e-mail and contact-form paragraphs). Every * paragraph inside #content / #content-full is left-aligned instead; desktop * stays justified. :where() keeps the selector at the same specificity as * the global `p` rule (responsive.css loads later, so it wins), which means * anything centered or justified on purpose by a class or an inline style * (.cabecera p, .cabecera2 p, .cajita p, .wp-caption-text, * .has-text-align-*, style="text-align:center") keeps its own alignment * without a list of exclusions. Checked against the pre-change rendering. * ---------------------------------------------------------------------- */ @media (max-width: 780px) { :where(#content, #content-full) p { text-align: left; } /* Some blocks carry the editor's own inline `text-align: justify`, which * only !important can beat. That is not limited to paragraphs: the body * of 235 glossary entries (and the post /el-gotico-y-sus-acreedores/) is * a numbered list,
outside #content, so only * the global `p{text-align:justify}` reaches it: four lines of ~330px * with stretched gaps). Each gets a plain left alignment; they are still * justified on desktop. */ .cabecera3, .glosario-consent-text { text-align: left; } } /* ----------------------------------------------------------------------- * 16. Legal notice under the contact form, ALL widths (not in a media query) * * The client asked for the "Responsable: ..." privacy notice under the * /contacto/ form to be smaller than the field labels. This is the one * intended desktop change of this file, so it sits outside any media query. * The notice is the only form paragraph that links to the privacy policy. * An explicit unitless line-height keeps the lines at 1.5x of the new size: * body's `line-height:1.5em` is inherited as a fixed length, which would leave * the smaller text with loose lines. * ---------------------------------------------------------------------- */ .wpcf7-form p:has(a[href*="politica-de-privacidad"]) { font-size: .85em; line-height: 1.5; } /* ----------------------------------------------------------------------- * 17. Symmetric side margins, phones only, <= 767px * * Root cause (owner report of 2026-10-05, iPhone): three legacy rules left * blocks closer to one edge of the screen than to the other. * a) style.css's <= 767px query gives the search widget (#header-third) * `width:90%` plus `padding:0 3%` in the content-box model, so it is 96% * wide, and its desktop `float:right` pins it to the right edge: ~19px * gap on the left, ~4px on the right. It is centered at the same 92% * width as the intro boxes (.cabecera) below it, border-box so the * padding is part of the width. * b) style.css gives every li a 20px left margin (`li{margin:0 0 0 20px}`), * meant to make room for a list marker. The gallery tiles (li.marcas, * `list-style:none!important`) and the visit counter figure have no * marker, so the indent only pushed the images (which already carry a * symmetric 10px padding) and the centered counter number ~10px to the * right. Marker-less lists lose the indent; bulleted and numbered lists * keep it. * Desktop and tablet (>= 768px) are not touched. * ---------------------------------------------------------------------- */ @media (max-width: 767px) { #header-third { float: none; box-sizing: border-box; width: 92%; margin-left: auto; margin-right: auto; } .marcas, #wop-1 li li { margin-left: 0; } } /* ----------------------------------------------------------------------- * 18. More symmetric side margins, phones only, <= 767px * * Root cause (whole-site phone audit of 2026-10-06, 2,999 URLs at 360/390/430, * five blocks more than 4px off-centre; each narrowed to the pages that use it): * a) /canteria/ term list (ul.display-posts-listing): each
with an
* inline `padding-left: 240px`, which section 7 caps at 25% of the column
* (~95px on a 390px phone): a big empty band on the left and narrow lines.
* In the narrow lines the titles wrap, the wrapped part starts under the
* number instead of under the title, and a title glued with stored
* ("Cenador íntimo, deambulada pérgola") drops below its
* number. On this page only, the indent becomes a hanging indent the width
* of "10. " (1.65em): numbers sit at the left edge and wrapped lines start
* under the title (numbers 1-9 are padded with stored so their
* titles line up with 10-75). Item 19 ends with a holding only
* after its link, which wraps onto an empty line between 19 and 20;
* that (the only `h5 > a + strong` of the page) is hidden.
* Section 7's cap still applies to every other page. Desktop and tablet
* (>= 768px) are not touched.
* Simón's phone, 2026-10-09 (N7): with a larger phone font (Chrome scales
* the font size but not `em` lengths of other properties) the 1.65em indent
* stayed at its 16px width while "10. " grew, so wrapped lines started left of
* the title. The indent is now in `ch` (the width of a digit of the item's
* own font), which grows with the text: 2.9ch is "10. " (26.5px at 16px, as
* the 1.65em it replaces). inc/nbsp-titles.php turns the inside the
* titles into spaces, so long titles (item 75) wrap under the title too.
* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
.page-id-4643 #content :is([style*="padding-left: 240px"], [style*="padding-left:240px"]) {
padding-left: 2.9ch !important;
text-indent: -2.9ch;
}
.page-id-4643 #content h5 > a + strong:last-child {
display: none;
}
}
/* -----------------------------------------------------------------------
* 21. Ágora section boxes, phones only, <= 480px
*
* Root cause (Simón's phone review of 2026-10-08, M4): the two section boxes
* of /contacto-agora/ (page 2016, .cajita: "Tus comentarios y preguntas a
* este glosario", "No es lo que se dice") are 45% of the column on phones
* (customizations.css), so "TUS COMENTARIOS Y PREGUNTAS A ESTE GLOSARIO"
* wraps over three lines in a narrow box. They take the whole column, like
* the .cajita2 boxes of /alarife-2/ (width 100%, border-box), so each title
* takes one or two lines. Other widths keep their box widths.
* ---------------------------------------------------------------------- */
@media (max-width: 480px) {
.page-id-2016 .cajita {
box-sizing: border-box;
width: 100%;
}
}
/* Simón's phone, 2026-10-09 (N8): thinner boxes, like the .cajita2 boxes of
* /alarife-2/ (D1): 14px above and below the title. The title link had a
* 12px top margin on top of the box's 14px padding (customizations.css),
* and section 3's 66px minimum height kept the box tall. The stored
* of "NO ES
LO QUE SE DICE" is hidden (the newline after it keeps the
* space), so it takes one line when it fits; the trailing
of the other
* title adds no line. Phones only (<= 767px). */
@media (max-width: 767px) {
.page-id-2016 .cajita {
min-height: 0 !important;
}
.page-id-2016 .cajita a {
margin-top: 0;
}
.page-id-2016 .cajita a br {
display: none;
}
}
/* -----------------------------------------------------------------------
* 22. "(clica encima de las imágenes)" notes, phones only, <= 767px
*
* Simón's phone review of 2026-10-08 (M6): the hand-typed notes that ask the
* reader to click the images are hidden on phones. inc/click-notes.php gives
* the class to the blocks that hold nothing but such a note. 767px is
* style.css's own phone breakpoint (sections 17-19 use it too); tablets and
* desktop keep the note.
* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
.glosario-click-note {
display: none;
}
}
/* -----------------------------------------------------------------------
* 23. Header search box in two lines, <= 899px
*
* Simón's review of 2026-10-08 (D2): on phones the box took four lines
* (title, hint, search field, button) and the title was smaller than the
* hint. header.php now prints the title, the search form and the hint
* (under the form); css/customizations.css sizes them for desktop (title
* 28px, hint 18px, two lines).
* a) 768-899px: the title column (half of the box) is too narrow for the
* 28px title, so it is 24px there and stays on one line.
* b) Phones (<= 767px): style.css stacks the title and the form, each 100%
* wide. The box becomes a wrapping flex row: title (22px) and form side
* by side on the first line (the field takes the room left, the button
* is 24px instead of 32px), the hint (16px) on the second; 21px title
* under 375px. Below about 350px the form wraps under the title instead
* of shrinking the field.
* ---------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 899px) {
#header-third .search-title {
font-size: 24px;
}
}
@media (max-width: 767px) {
#header-third {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 8px;
}
#header-third::after {
display: none;
}
#header-third .search-title {
flex: 0 0 auto;
width: auto;
float: none;
font-size: 22px;
}
#header-third .search-form {
display: flex;
flex: 1 1 150px;
align-items: center;
gap: 5px;
width: auto;
min-width: 0;
float: none;
}
#header-third .search-form label {
flex: 1 1 auto;
min-width: 0;
}
#header-third .search-field {
box-sizing: border-box;
width: 100%;
margin: 0;
}
/* Two classes: style.css sets the 2em with #header-third input[type="submit"]. */
#header-third .search-form .search-submit {
flex: 0 0 auto;
font-size: 24px;
}
#header-third .search-hint {
flex: 0 0 100%;
font-size: 16px;
line-height: 22px;
padding-bottom: 6px;
}
}
/* Narrow phones (360px): 1px less title and tighter gaps, so the field's
* "Buscar ..." placeholder is not clipped. */
@media (max-width: 374px) {
#header-third {
column-gap: 6px;
}
#header-third .search-title {
font-size: 21px;
}
#header-third .search-form {
gap: 4px;
}
}
/* -----------------------------------------------------------------------
* 24. Update date under the intro box, <= 1024px
*
* D3 (Simón, 2026-10-08): div.glosario-update-date (inc/update-date.php,
* css/customizations.css) mirrors the intro box (.cabecera) so the date
* keeps starting at the box's text edge: border-box at <= 1024px
* (section 4) and 92% wide at <= 780px (section 3).
* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
.glosario-update-date {
box-sizing: border-box;
max-width: 100%;
}
}
@media (max-width: 780px) {
.glosario-update-date {
width: 92%;
}
}
/* -----------------------------------------------------------------------
* 25. Alarife links page (page 4049), phones only, <= 767px
*
* Mobile sweep of 2026-10-09 (A1): css/customizations.css gives
* `.page-id-4049 .wp-caption` (with page 2024 and .galeria-completa) a 30%
* width with !important and no breakpoint. Its two classes beat section 2's
* `.wp-caption { width: 100% !important }`, so on phones every logo + link
* block was a ~115px column and names and URLs broke mid-word. Here each
* block takes the whole column again; the logo keeps its own size (section 2
* caps it at 100%). The Galería selectors and wider screens are untouched.
* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
.page-id-4049 .wp-caption {
width: 100% !important;
}
}
/* -----------------------------------------------------------------------
* 26. Runs of empty paragraphs, phones only, <= 767px
*
* Mobile sweep of 2026-10-09 (A2): many posts and glossary entries were
* typed with dozens of " " lines in a row ( of the same classes, inserted next to it).
* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
.single #content .page-title {
padding-bottom: 0;
}
.single #content .post-title {
margin-top: 16px;
}
.single #content .page-title:empty + .post-title {
margin-top: 0;
}
}
/* -----------------------------------------------------------------------
* 32. Less white above the title of every #content view, phones only,
* <= 767px
*
* Simón's phone, 2026-10-09 evening (P8): /monumentos/ (2035),
* /localizacion/ (2029), /galeriaimagenes/ (2024), /contacto-agora/ (2016)
* and /como-se-llama/ (41316) opened with 59px of white between the header
* and the title (style.css's #content margin); this section listed those
* five pages. The phone audit of 2026-10-10 (F2) found the same 59px on
* every other view that prints into #content: pages (page.php), single
* entries and posts, search results, archives (categories, glossary groups)
* and the 404. One rule for all of them; it replaces the five page ids
* and section 31's own #content rule. Views in #content-full (page-full.php,
* the home) already have no margin there.
* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
#content {
margin-top: 15px;
}
}
/* -----------------------------------------------------------------------
* 33. Dictionary list at the left of the column, phones only, <= 767px
*
* Simón's phone, 2026-10-09 evening (P9): the 42 numbered links of
* /seleccion-de-diccionarios-y-glosarios-sobre-arte-arquitectonico/ (page
* 4045, #diccionario) are stored with padding-left: 120px, which section 7
* caps at a quarter of the column, and items 12 and 28 were typed without
* it and pushed right with non-breaking spaces instead. Every item starts
* at the left of the column, with a hanging indent so a wrapped title
* continues under its first word rather than under its number; the
* non-breaking spaces of 12 and 28 (wrapped by inc/tree-indents.php) are
* hidden. Same specificity as section 7's rules (id + class + element
* beats id + attribute), later in the cascade.
* 2026-10-10 (Q9): the indent was 2em, ~6px right of where the title
* starts after "N." on the first line. Measured in the page: the title
* starts 2.82ch after a one-digit number ("7." + nbsp, space, nbsp) and
* 2.92ch after a two-digit one ("10." + space); 2.87ch is within 0.6px of
* both. ch, not em: with Android's larger text (text-size-adjust) ch grows
* with the glyphs, em lengths do not.
* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
.page-id-4045 #diccionario > p {
padding-left: 2.87ch !important;
text-indent: -2.87ch;
}
.page-id-4045 #diccionario .glosario-lead-spaces {
display: none;
}
}
/* -----------------------------------------------------------------------
* 34. Style trees of /glossary/estilos/ and /glossary/romanico/, phones
* only, <= 767px
*
* Simón's phone, 2026-10-09 evening (P10): section 7 caps the stored pixel
* indents of the two trees (150/180/210px on estilos, post 1298; 60px on
* románico, post 2307) to a quarter of the column, so the levels flatten
* and a wrapped line returns under the bullet; the lines typed without an
* indent (pushed right with non-breaking spaces) fell to the left edge.
* inc/tree-indents.php gives each line glosario-tree-
* clone right before each element it compares, which must get the same
* margin. search.php shows one result, so ~ reaches that one title.
* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
.search #content > .page-title {
padding-bottom: 0;
}
.search #content > .page-title ~ .post-title {
margin-top: 16px;
}
}
/* -----------------------------------------------------------------------
* 36. Dictionary list and contact form closer to the title, phones only,
* <= 767px
*
* Phone audit of 2026-10-10 (F3): div#diccionario, the wrapper of the list
* of /seleccion-de-diccionarios-y-glosarios-sobre-arte-arquitectonico/
* (page 4045) and of the form of /contacto/ (page 4651), the only two pages
* that use it, has style.css's 30px top margin under the title: 41px of
* white on /contacto/, 69px on 4045, where the list also opens with a
* stored empty paragraph (28px). inc/diccionario-lead.php marks that
* paragraph (glosario-lead-empty-p) only when it is truly empty; it is
* hidden here. Desktop keeps both.
* 2026-10-10 (Q9): most posts and many glossary entries open their content
* with the same stored empty paragraph, ~45px of white between the title
* and the first text; inc/diccionario-lead.php marks it the same way on
* single views (only the first block of the main post's content) and it is
* hidden here too.
* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
#diccionario {
margin-top: 0;
}
.page-id-4045 #diccionario > p.glosario-lead-empty-p,
.single #content p.glosario-lead-empty-p {
display: none;
}
}
/* -----------------------------------------------------------------------
* 37. Separators right under the title of 4049 and Alarife, phones only,
* <= 767px
*
* Phone audit of 2026-10-10 (F4): /alarife/2-paginas-web-de-actualidad-
* sobre-arte-arquitectonico/ (page 4049) prints, right after its title, an
* empty
clone of the same classes right before each
it compares, and
* the clone and the
must get the same margin.
* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
.tax-wpglossarygroup #content > .post-title:not(.postmetadata ~ *) {
margin-top: 0;
}
}
/* -----------------------------------------------------------------------
* 39. Home "Última actualización", a little smaller on phones, <= 767px
*
* Simón's phone, 2026-10-10 (his item 4): the date line of the Pórtico
* (an
typed in page 17, printed as div.glosario-h4 by
* inc/headings.php, h4 look from customizations.css: 1.5em) is 24px on a
* phone, where the body text is 16px; on desktop it is 21.6px next to
* 14.4px text and reads fine. 22px on phones (line-height follows, 1.5em).
* The other div.glosario-h4 of #container are empty spacers (no box). The
* h4 selector covers the line if it is ever printed as the
it is
* stored as (and heading-outline-test's
clone, which must match).
* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
.home #container > :is(div.glosario-h4, h4) {
font-size: 22px;
}
}
/* -----------------------------------------------------------------------
* 40. Category archives, first post closer to the archive heading, phones
* only, <= 767px
*
* Phone audit of 2026-10-10: /category/