/*
Theme Name: Tsonami Ediciones — Liberacoop
Theme URI: https://tsonamiediciones.cl
Author: Liberacoop
Description: Tema propio para tsonamiediciones.cl. Reproduce el diseño encargado por Tsonami (identidad, retícula y tipografía) sobre HTML y CSS escritos acá, sin Henrik, sin henrik-core, sin Elementor y sin jQuery. Ver README.md para qué se descartó y por qué.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tsonamiediciones-lc
Tags: editorial, tienda, accesible
*/

/* ------------------------------------------------------------------ *
 * Sistema de diseño.
 *
 * Los valores NO son inventados: se midieron sobre https://tsonamiediciones.cl
 * el 2026-08-25 con `getComputedStyle` (ver trabajo/inspeccion/ediciones-original).
 *   - acento  rgb(218,255,1)  -> #DAFF01, en 16 elementos
 *   - texto   rgb(0,0,0) sobre rgb(255,255,255)
 *   - fuente  Inter, peso 500 dominante (180 nodos), títulos en versalitas
 *   - cuerpo  18px / 27px  (razón 1.5)
 * ------------------------------------------------------------------ */

:root {
	--papel:      #ffffff;
	--tinta:      #000000;
	--acento:     #daff01;
	/* EL AMARILLO DEL SEPARADOR «/».
	 * El original teclea `#d1f200` ahí, y sólo ahí: una declaración en las 94
	 * reglas de su `wp-custom-css`, sin variable ni reutilización. Y a un
	 * carácter de distancia tiene un tercer amarillo, `#daff00`, en el hover
	 * del copyright. Contra las 12 apariciones de `#daff01`, el dictamen del
	 * peritaje del 2026-09-02 es DERIVA, no sistema: dos hexadecimales
	 * tecleados a mano en el personalizador. Los dos tonos son
	 * perceptualmente el mismo a 11px, y en el hero conviven a 4px de
	 * distancia sin que se note.
	 * Se adopta UNO. Si el cliente insiste en el matiz, es esta línea. */
	--acento-separador: var(--acento);
	--tenue:      #7a7a7a;   /* metadatos: fecha, autor */
	--linea:      #d8d8d8;   /* reglas horizontales del original */
	--velo:       rgba(0,0,0,.55);

	--tipo: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
	        Roboto, "Helvetica Neue", Arial, sans-serif;

	/* ---- Escala tipográfica -------------------------------------------
	 * TODO medido sobre https://tsonamiediciones.cl con getComputedStyle a
	 * 1440 px, el 2026-08-26. Los `clamp()` conservan el valor del original
	 * como MÁXIMO y sólo bajan en pantallas angostas.
	 *
	 *   cuerpo            18px / 27px, tracking -0.36px
	 *   título de ficha   24px / 32px, peso 500, versalitas, tracking normal
	 *   rótulo de sección 19px / 25px, tracking 0        (h5.qodef-widget-title)
	 *   título de ficha   19px / 25px, peso 500, versalitas   (h5)
	 *   pastilla          11px / 11px, tracking 1.1px, radio 55px
	 *   banda             100px / 100px, tracking -0.36px
	 *
	 * Las dos primeras líneas decían «15px / 26px, tracking -0.3px» y
	 * «24px / 32px». Eran los valores viejos, y se quedaron acá contradiciendo
	 * a los tokens corregidos que vienen justo debajo. Un comentario que miente
	 * al lado de un valor arreglado es la vía más corta para que alguien
	 * reintroduzca el error «restaurando la coherencia».
	 */
	--t-micro:    11px;      /* pastilla */
	--t-meta:     12px;
	--t-cuerpo:   18px;
	/* 19px por omisión, 24 en la portada. Y las dos cifras son correctas: el
	   original tiene DOS familias de parrilla, medidas el 2026-09-02.

	     portada    contenedor 1300 · calle 30 · imagen 413 · título H4 24/32
	     secciones  contenedor 1080 · calle 40 · imagen 333 · título H5 19/25
	                (`/leer/`, `/escuchar/`, `/ver/`, `/actividades/`)

	   El tamaño del título va con el tamaño de la tarjeta, no con el de la
	   ventana. El `clamp(19px, 1.7vw, 24px)` que había acá acertaba los dos
	   extremos por casualidad --interpolando por viewport una diferencia que
	   es de contexto--, y ponerlo en 19px fijo arregló las secciones y rompió
	   la portada. `.parrilla--portada` declara el 24. */
	--t-ficha:    19px;
	/* 19px, no 15. Los rótulos de sección del original son
	   `h5.qodef-widget-title`, no `h6`. Los 15px con tracking -0.3px que había
	   acá son, literalmente, la cuaterna DEL MENÚ reusada en otro rol --y por
	   eso no cuadraba ninguno de los dos--. El tema además resetea a 0 el
	   tracking heredado en este rol. */
	--t-seccion:  19px;
	/* 37px fijos: es el `h3` del original, que no se mueve hasta 680px. Con
	   `clamp(26,2.6vw,37)` coincidía sólo por encima de 1423px de ventana y se
	   quedaba corto en todo el resto --31px a 1200, 26px a 900--. */
	--t-titular:  37px;
	--t-cartel:   clamp(44px, 7vw, 100px);

	/* ---- Retícula ------------------------------------------------------
	 * El original tiene DOS anchos, y confundirlos es lo que hacía que nada
	 * cuadrara:
	 *   - MARCO   x=71  w=1298  -> pórtico y banda
	 *   - COLUMNA x=170 w=1100  -> fichas, secciones, prosa
	 * Las tres columnas de fichas miden 347 px con 30 px de calle:
	 *   347*3 + 30*2 = 1101. Cuadra con la columna medida.
	 *
	 * ---- CORRECCIÓN del 2026-09-02 -------------------------------------
	 * Los dos números eran correctos Y estaban mal, y vale la pena entender
	 * por qué antes de tocarlos: **se midieron a 1440 px, donde los dos dan
	 * exactamente eso, y se escribieron como constantes. Ninguno de los dos
	 * es constante en el original.**
	 *
	 *   1298 = 1440 − 4.9% × 2. No es un ancho: es el MARGEN PORCENTUAL de la
	 *          cabecera (`#qodef-page-header-inner{margin:0 4.9%}`) congelado
	 *          en un viewport. A 1920 el original abre a 1731.8.
	 *   1100 = el escalón de `.qodef-content-grid` que rige ENTRE 1201 y 1440.
	 *          El <body> del original lleva `qodef-content-grid-1300`, así que
	 *          a partir de 1441 salta a 1300 y nosotros nos quedábamos en 1100.
	 *
	 * A 1920 px eso son 316 px de contenedor de menos, que es de donde salían
	 * los 275 px de corrimiento del menú que reclamó el cliente (316 menos los
	 * ~41 px que el menú del original ocupa de más por ir a 15px y 36px de
	 * calle). El original no usa `clamp()` en ninguna parte: son SALTOS.
	 *
	 * `--marco` desaparece: lo que el original dice es `margin-inline: 4.9%`,
	 * y eso vive ahora en la propia regla `.marco`.
	 *
	 * Regla de método que deja este error: **un valor no se vuelve token hasta
	 * haberse medido en tres viewports** (1920 / 1366 / 900). Medir a uno solo
	 * y escribirlo como constante es lo que pasó acá dos veces.
	 */
	--reticula:   1300px;
	--calle:      30px;
	--aire:       clamp(16px, 3vw, 34px);
	--salto:      clamp(46px, 6vw, 92px);
	--cabecera:   97px;
	/* La cabecera móvil del original mide 70, no 97. Ver la consulta de
	   medios de 900 px. */
	--cabecera-movil: 70px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--tipo);
	font-size: var(--t-cuerpo);
	font-weight: 400;
	line-height: 1.5;
	/* -0.36px sobre 18px = -0.02em. Inter con tracking negativo es la mitad
	   del carácter del sitio; sin esto el texto se ve más suelto y más ancho
	   que el original aunque el cuerpo mida lo mismo. */
	letter-spacing: -0.02em;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }

h1, h2, h3, h4 {
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.12;
	text-wrap: balance;
	margin: 0;
}

/* El foco del teclado tiene que verse: el original lo suprimía con
   `outline:none` en `main.min.css` y dejaba el sitio inoperable sin ratón. */
:focus-visible {
	outline: 3px solid var(--tinta);
	outline-offset: 2px;
}
.saltar {
	position: absolute; left: -9999px;
	background: var(--acento); color: var(--tinta);
	padding: .7em 1.2em; z-index: 100; font-weight: 500;
}
.saltar:focus { left: .6rem; top: .6rem; }

.reticula {
	width: min(100% - var(--aire) * 2, var(--reticula));
	margin-inline: auto;
}
/* LA SECCIÓN ENTERA MIDE 1080, NO SÓLO SU PARRILLA.
 *
 * El original tiene dos familias de retícula --están medidas en el comentario
 * de `--t-ficha`-- y los tokens globales son los de la PORTADA: 1300 de
 * contenedor, 30 de calle. En una sección lo único que bajaba a 1080 era el
 * `<ul>` (`.parrilla--seccion`), así que el título, la descripción y la
 * paginación seguían saliendo a 1300 y sobresalían 110 px por lado respecto
 * de las fichas.
 *
 * Es lo que la revisión del cliente del 2026-09-14 describe como
 * «desproporción al interior de todas las secciones», y por qué lo ve en
 * ESCUCHAR, VER y BITÁCORAS igual que en LEER: son la misma plantilla.
 *
 * VA COMO TOPE, NO COMO VALOR. La primera versión de esta regla ponía
 * `--reticula: 1080px` y estaba mal: `:root` tiene una escalera de escalones
 * --1300 / 1100 / 960 / 768 / 86% / 82%-- y un 1080 plano la pisa justo donde
 * la escalera es MENOR. Entre 1025 y 1200 px la retícula general vale 960 y la
 * sección habría salido más ancha que el resto del sitio: el mismo defecto,
 * del otro lado. Con un tercer argumento en el `min()` la sección nunca pasa
 * de 1080 y por debajo sigue la escalera tal cual.
 *
 * Y sí: 1080 está medido a UN viewport. Los escalones propios de la sección
 * estrecha en el original no se conocen --el sitio está en 429--, así que el
 * tope es lo máximo que se puede afirmar sin inventar. Ver la regla de método
 * del comentario de `--reticula`: tres viewports antes de que un valor sea
 * token. Éste todavía no lo es.
 *
 * POR QUÉ `:has()` Y NO UNA CLASE EN LA PLANTILLA. Se probaron las dos. La
 * clase hay que acordarse de ponerla en cuatro plantillas --`archive`,
 * `index`, `search` y la `<section>` de `inc-seccion`-- y en `page.php` NO SE
 * PUEDE: ahí la parrilla se calcula dentro del loop, después de que el
 * `<main>` ya se emitió, y `page.php` es justamente por donde entran /leer/ y
 * sus hermanas. Con `:has()` la condición es la que de verdad importa
 * --«este contenedor tiene una parrilla de sección adentro»--, cubre las
 * cinco y no se olvida en la sexta.
 *
 * El tema ya depende de `:has()` para el megamenú (`li:has(> .mega)`). Si un
 * navegador no lo soporta, el selector se invalida entero y queda el 1300 de
 * hoy: se degrada a lo que ya había, no a algo roto.
 *
 * El mismo defecto sigue abierto en la portada: el cartel sale a `.marco`
 * (4.9%) y la grilla a `.reticula`. Es el punto 12 de la segunda tanda, y no
 * se toca acá porque falta la medida del original. */
/* CORRECCION DEL MISMO DIA: `.seccion:has(…)` y NO `.reticula:has(…)`.
 *
 * La primera version colgaba de `.reticula`, y en `page.php` --por donde entran
 * /leer/, /ver/ y sus hermanas-- eso estrechaba el `<main>` ENTERO a 1080,
 * incluida la cabecera del titulo de pagina, que no va ahi.
 *
 * El original la pone en `.qodef-page-title .qodef-m-content`, un bloque de 199
 * px de alto con `border-bottom: 1px solid #000` y `padding-bottom: 28px`, y
 * ese bloque vive dentro del `.qodef-content-grid` --la RETICULA, 1100 a 1440 y
 * 1300 desde 1441--, no dentro de la columna estrecha de la seccion. Leido en
 * `respaldos/Tsonami-Ediciones/henrik/henrik/assets/css/main.min.css`.
 *
 * Es el punto 42 del cliente: «la linea horizontal tiene una posicion y
 * extension distintas a la original». Lo era antes por otra razon, y lo seguia
 * siendo despues por esta.
 *
 * Colgando de `.seccion` la regla alcanza las dos formas sin tocar nada mas:
 * en `archive`/`index`/`search` el `<main>` YA lleva `.seccion`, y en
 * `page.php` la lleva el `<section>` que emite `inc-seccion.php` --que es justo
 * lo que debe estrecharse, dejando la cabecera del titulo en la reticula--. La
 * portada no entra: sus parrillas son `--portada` y `--cuatro`. */
/* `max-width` y no `width: min(…)`: la version con `min()` repetia el
   `100% - aire*2` de `.reticula`, y ANIDADA ese 100% ya es el del padre, asi
   que restaba el aire dos veces --a 1440 la seccion daba 1032 en vez de 1080,
   y a 1200, 892 en vez de 960--. Un tope no necesita recalcular el ancho:
   solo acotarlo. Medido en las dos estructuras antes y despues. */
.seccion:has(.parrilla--seccion) {
	max-width: 900px;
	margin-inline: auto;
}

/* Los escalones de `.qodef-content-grid`, que es lo que el original hace de
   verdad. No son `clamp()`: el original salta, y saltar es lo que hace que a
   1441 px la columna se ensanche de golpe igual que allá. */
@media (max-width: 1440px) { :root { --reticula: 1100px; } }
@media (max-width: 1200px) { :root { --reticula:  960px; } }
@media (max-width: 1024px) { :root { --reticula:  768px; } }
@media (max-width:  800px) { :root { --reticula:   86%;  } }
@media (max-width:  480px) { :root { --reticula:   82%;  } }
/* El único salto del `h3` del original. */
@media (max-width:  680px) { :root { --t-titular:  29px;  } }

/* El marco exterior: cabecera, pórtico y banda.
   `4.9%` por lado, que es lo que declara el original
   (`#qodef-page-header-inner{margin-left:4.9%;margin-right:4.9%}`, y el mismo
   valor como `padding` en la cabecera móvil). Antes acá decía 1298px, que es
   ese mismo 4.9% medido a 1440 y escrito como si fuera fijo. */
.marco {
	margin-inline: 4.9%;
}

/* ---------------------------------------------------------- cabecera */

.cabecera {
	position: sticky; top: 0; z-index: 40;
	background: var(--papel);
	border-bottom: 1px solid transparent;
}
.cabecera--posada { border-bottom-color: var(--linea); }

/* ---- LA CABECERA A SANGRE, sobre la portada de una entrada --------------
 *
 * La clase la pone `tsed_cabecera_a_sangre()` en `functions.php`, y sólo
 * cuando hay imagen destacada: sin foto, un menú blanco quedaría sobre papel
 * blanco. El original hace exactamente esto y sólo en esta plantilla --en la
 * portada y en las categorías su cabecera es blanca y opaca--:
 *
 *     #qodef-page-outer { margin-top: -97px }
 *     #qodef-page-header { height:97px; background-color: rgba(255,255,255,0) }
 *     #qodef-page-header-inner.qodef-skin--light nav a { color: #fff }
 *
 * `absolute` y no `sticky`: el original tampoco deja la cabecera pegada al
 * subir (`qodef-header-appearance--none`, y no existe `.qodef-header-sticky`
 * en su DOM). Se va con el documento, y por eso nunca enfrenta el problema de
 * un menú blanco sobre la prosa. Sacándola del flujo, la portada arranca en
 * y=0 sin necesidad de un margen negativo que compensar.
 *
 * El logotipo se blanquea solo: es un SVG en línea con `fill: currentColor`.
 * Por eso el `color` va en `.cabecera` y no en `.nav a`. */
.tsed-tras-cabecera .cabecera {
	position: absolute; top: 0; left: 0; right: 0;
	background: transparent;
	border-bottom-color: transparent;
	color: #fff;
}
/* EL VELO DE LA CABECERA A SANGRE: DESVIACION DELIBERADA DEL ORIGINAL.
 *
 * Con la cabecera sobre la foto, el menu y el logotipo van en blanco. Sobre una
 * portada CLARA eso deja de leerse: medido en `/topografias-del-silencio/`,
 * cuya portada es una captura de pantalla de cielo palido, el menu entero
 * desaparecia contra el fondo. No es una impresion: se miro la captura.
 *
 * El comentario de `.portada` ya habia previsto este caso y lo habia dejado sin
 * resolver --«si alguna portada clara deja el titulo ilegible… no se pone hoy
 * porque el original no la tiene»--. El original efectivamente NO lo resuelve:
 * no hay velo ni degradado en `main.min.css` para esta zona. O sea que alla el
 * problema existe igual, y aqui se corrige a peticion explicita.
 *
 * SE ELIGE UN DEGRADADO Y NO UNA SOMBRA EN EL TEXTO. Una sombra sobre un fondo
 * casi blanco apenas rinde --el halo oscuro se pierde contra el claro--; el
 * degradado garantiza contraste sea cual sea la foto. Y no altera la imagen:
 * cubre 180 px, se desvanece a transparente, y de la mitad del hero para abajo
 * la foto esta intacta.
 *
 * `z-index: -1` para que quede DETRAS del contenido de la propia cabecera, y
 * `pointer-events: none` para que no se coma ni un clic del menu. */
.tsed-tras-cabecera .cabecera::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 180px;
	background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
	pointer-events: none;
	z-index: -1;
}
/* La separación de siempre sobraría: la portada ES el principio de la página. */
.tsed-tras-cabecera .entrada { margin-top: 0; }
/* El subrayado del menú sobre foto: el acento sigue leyéndose, pero el hover
   no debe subrayar dos veces. */
.tsed-tras-cabecera .cabecera a:hover { text-decoration: none; }
.cabecera__fila {
	display: flex; align-items: center; gap: var(--aire);
	min-height: var(--cabecera);
}
.cabecera__marca img, .cabecera__marca svg { max-height: 40px; width: auto; }
.cabecera__marca--texto {
	font-weight: 700; font-size: 20px; text-transform: uppercase;
	letter-spacing: .06em;
}

.nav { margin-left: auto; }
/* 36 px de calle, fijos. En el original no es `gap` ni `padding` del enlace:
   es `li{margin:0 18px}` con los extremos a cero. La distinción importa —con
   padding, el subrayado de 3 px sobresaldría del texto; con margen queda
   exactamente del ancho de la palabra, que es como se ve allá. */
.nav ul { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
/* `:not(.pastilla)` porque el PANEL del megamenú vive dentro de `.nav`, y
   `.nav a` --que gana por especificidad-- le borraba el padding horizontal a
   la pastilla de su encabezado: quedaba en `5.2px 0`, con el texto saliéndose
   del óvalo por los dos lados. Se acota la regla en vez de subirle la
   especificidad a la pastilla, que es lo que había que corregir. */
/* La cuaterna del original, medida el 2026-09-02:
   15px / 500 / -.02em / 26px / versalitas. Acá decía 13px y `.04em`, o sea dos
   píxeles más chico Y con el interletrado del signo contrario —el original
   APRIETA (-0.3px) y nosotros ABRÍAMOS (+0.52px)—. En una palabra de nueve
   letras eso son 7 px de diferencia de ancho, y es lo primero que el cliente
   nombró. */
.nav a:not(.pastilla) {
	font-size: 15px; font-weight: 500; text-transform: uppercase;
	letter-spacing: -.02em; line-height: 26px;
	padding: .4em 0; display: inline-block;
	position: relative;
}

/* EL MARCADOR es un subrayado de 3 px que crece de izquierda a derecha, no un
   resaltador detrás del texto.
   Acá había `box-shadow: inset 0 -.55em 0` = un bloque de ~7 px por detrás de
   las letras. Es otro objeto gráfico, y de lejos era la diferencia más visible
   de toda la cabecera. El original anima `scaleX` de 0 a 1 en .3s, y eso es
   CSS puro: no obliga a volver a jQuery. */
/* SÓLO EL PRIMER NIVEL, y a la altura del texto.
 *
 * Dos correcciones sobre la versión anterior de esta regla:
 *
 * 1. `.nav a:not(.pastilla)` alcanzaba también a los enlaces del submenú, que
 *    en el original NO llevan esta barra: llevan un subrayado de 1px del color
 *    del propio texto (`height:1px; background:currentColor`), que es otro
 *    objeto. Una barra amarilla de 3px bajo cada ítem del desplegable no
 *    existe en ninguna parte del sitio original.
 * 2. `bottom: 0` es el borde de la CAJA, y el enlace lleva `padding: .4em 0`
 *    --que añadimos por accesibilidad, ver arriba--, así que la barra caía
 *    unos 6px por debajo de la palabra. En el original el enlace no tiene
 *    relleno y la barra va pegada al texto. `bottom: .4em` le descuenta
 *    exactamente el relleno que le habíamos puesto. */
.nav > ul > li > a:not(.pastilla)::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: .4em; height: 3px;
	background: var(--acento);
	transform: scaleX(0); transform-origin: left center;
	transition: transform .3s ease;
}
.nav > ul > li.current-menu-item > a::after,
.nav > ul > li.current_page_item > a::after,
.nav > ul > li.current-menu-ancestor > a::after,
.nav > ul > li > a:not(.pastilla):hover::after,
.nav > ul > li > a:not(.pastilla):focus-visible::after { transform: scaleX(1); }
.nav a:hover { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.nav > ul > li > a:not(.pastilla)::after { transition: none; }
}

/* Submenú: el original lo abría con jQuery. Acá es CSS y, para el teclado,
   `:focus-within` — sin eso un submenú solo existe para quien usa ratón. */
.nav li { position: relative; }
.nav .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 210px;
	background: var(--papel); border: 1px solid var(--linea);
	flex-direction: column; gap: 0; padding: .5em 0;
	display: none;
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu { display: flex; }
/* El submenú NO es el menú en pequeño: en el original va a peso 400, con
   interlineado 1.5em y SIN versalitas. Acá heredaba el 500 y el `uppercase`
   del primer nivel, que es lo que hacía que un desplegable de siete palabras
   se leyera como siete titulares. También le sobra el subrayado animado, que
   es marcador de sección y no de ítem de lista. */
.nav .sub-menu a { padding: .5em 1em; display: block;
                   font-weight: 400; line-height: 1.5em; text-transform: none; }
.nav .sub-menu a::after { content: none; }

.utiles { display: flex; align-items: center; gap: 14px; }
.utiles button, .utiles a.util {
	background: none; border: 0; padding: 4px; cursor: pointer;
	color: inherit; display: inline-flex; align-items: center; gap: 5px;
	font: inherit; font-size: 13px; font-weight: 500;
}
.utiles .redondel {
	background: var(--acento); border-radius: 50%;
	width: 30px; height: 30px; justify-content: center;
}
.carro__cuenta { font-size: 12px; font-weight: 500; }

/* Menú de móvil: <dialog> nativo, sin librería y con Esc y foco gratis. */
/* `.utiles .hamburguesa` y NO `.hamburguesa` a secas, por lo mismo que se
   explica en el `@media` de más abajo -- y aquí costó más caro.
   `.utiles button` de arriba declara `display:inline-flex` con una clase y un
   tipo (0,1,1); `.hamburguesa` sola es una clase (0,1,0) y PIERDE. O sea que
   este `display:none` no se aplicaba nunca: «MENU» y el disco de acento se
   veían en ESCRITORIO, a cualquier ancho, junto al menú completo.
   Medido el 2026-09-14 a 1440 px con Playwright sobre la página desplegada:
   el opener estaba visible en x=1274. Es el punto 9 de la revisión del
   cliente --«sobran MENU y el círculo verde del extremo derecho»--, y era un
   defecto de verdad, no el comportamiento móvil visto en una ventana angosta.
   Con `.utiles .hamburguesa` (0,2,0) la regla gana, y dentro del `@media` la
   suya --misma especificidad, declarada después-- sigue ganándole a ésta. */
.utiles .hamburguesa { display: none; }
/* **Los selectores llevan `dialog` a propósito.** `.panel` a secas también
   casa con el panel de pestañas de WooCommerce, que usa esa misma clase para
   la descripción del producto (`<div class="panel entry-content wc-tab">`).
   Con `.panel` sin acotar, la descripción heredaba `width:min(92vw,380px)` y
   `height:100dvh`: una columna de 380 px con ALTO FIJO de 1.200, cuyo
   contenido se salía 333 px por abajo y quedaba pisado por «Productos
   relacionados». El síntoma parecía un problema de floats y era una colisión
   de nombres de este mismo archivo. */
dialog.panel { border: 0; padding: 0; width: min(92vw, 380px); max-width: none;
         margin: 0 0 0 auto; height: 100dvh; max-height: none; background: var(--papel); }
dialog.panel::backdrop { background: var(--velo); }
.panel__cuerpo { padding: 22px; display: flex; flex-direction: column; gap: 4px; }
dialog.panel ul { list-style: none; margin: 0; padding: 0; }
/* `:not(.panel--lado)`: esta regla existe para la LISTA del menu movil --de ahi
   los 20px y el `padding: .6em 0`, que le dan a cada item su altura de toque--
   y sin acotarla alcanzaba tambien a los enlaces del panel lateral. Ahi dejaba
   la pastilla de categoria en 46 px de alto en vez de 21, y el titulo en 98 en
   vez de 50: el bloque entero bajaba 87 px respecto del original. Un selector
   escrito para una lista, aplicado a todo lo que sea un ancla. */
/* 16px/26 con `letter-spacing: -.36px` y el aire en el <li>, no en el <a>.
   Medido en el original con el menú abierto: cada `li` mide 38 de alto con un
   enlace de 26 dentro, o sea 6 arriba y 6 abajo. Acá iba 20px con `.6em` de
   padding, que daba 48 por ítem: ocho ítems, 80 px de más. */
dialog.panel:not(.panel--lado) a { display: block; padding: 0; font-size: 16px;
           line-height: 26px; letter-spacing: -.36px;
           text-transform: uppercase; font-weight: 500; }
dialog.panel:not(.panel--lado) li { padding-block: 6px; }
dialog.panel:not(.panel--lado) .sub-menu a { font-size: 15px; padding-left: 1em; color: var(--tenue); }
.panel__cerrar { align-self: flex-end; background: none; border: 0;
                 font-size: 26px; cursor: pointer; line-height: 1; padding: 4px 8px; }

/* ---- EL MENÚ MÓVIL ES UN DESPLEGABLE, NO UN MODAL ----------------------
 *
 * Medido en el original el 2026-09-07 a 390 px, con el menú abierto:
 *
 *   panel     `.qodef-mobile-header-navigation` · absolute · top 70 --que es
 *             exactamente el alto de la cabecera-- · left/right 0 · 390 de
 *             ancho · fondo #fff · z-index 10 · overflow-y scroll
 *             SIN sombra, SIN borde y SIN velo detrás
 *   apertura  `transition-duration: 0s`: abre de golpe. No anima.
 *   lista     ul · padding 34px 0 · margen lateral 33.4 px (8.57%)
 *   cierre    NO hay botón dentro del panel. La única salida es la ✕ de la
 *             cabecera, que es el disco de acento cambiado.
 *
 * Acá era un modal de 380 px pegado a la derecha, a toda la altura, con velo
 * oscuro y su propia ✕ adentro: cuatro decisiones, ninguna del original.
 *
 * Y de ahí sale una consecuencia que no es de estilo: **este panel no puede
 * abrirse con `showModal()`**. Un modal vuelve inerte todo lo que queda fuera
 * del <dialog> --la cabecera incluida--, y la ✕ vive justamente ahí: se vería
 * y no se podría pulsar. Va con `show()`. Ver `js/ediciones.js`. */
dialog.panel.panel--menu {
	position: fixed; top: var(--cabecera-movil); left: 0; right: 0;
	width: 100%; max-width: none; margin: 0;
	height: auto; max-height: calc(100dvh - var(--cabecera-movil));
	overflow-y: auto;
	/* HACE FALTA, y es la contrapartida de no ser modal. `showModal()` sube el
	   <dialog> a la capa superior y ahí no hay `z-index` que valga; `show()`
	   lo deja apilando como cualquier elemento. Sin esto el panel salía blanco
	   y opaco en su caja --el `background` estaba puesto-- y la portada se
	   pintaba ENCIMA: el hero tapaba los tres primeros ítems y la marquesina
	   cruzaba el resto. 35 va sobre el contenido y sobre `.mega` (30), y
	   debajo de `.cabecera` (40), que es donde vive la ✕ que lo cierra. */
	z-index: 35;
}
/* Con `show()` no se pinta, pero queda escrito: el original no tiene velo. */
dialog.panel.panel--menu::backdrop { background: transparent; }
.panel--menu .panel__cuerpo { padding: 34px 0; gap: 0; }
/* 8.57% = los 33.4 px que mide el original a 390. No coincide con el 82% de
   la retícula de contenido (que da 35): el menú lleva su propio margen.

   `dialog.panel.panel--menu ul` y no `.panel--menu ul`. Arriba hay un
   `dialog.panel ul { margin: 0 }` que suma un tipo más y gana. Es la TERCERA
   regla de esta tanda que se escribía bien y no llegaba a la página --las
   otras dos: el `padding` del opener contra `.utiles button`, y el alto del
   logotipo contra una línea 600 más abajo--. Las tres se veían igual desde el
   editor: valor correcto, efecto nulo. La comprobación barata es mirar el
   valor calculado en el navegador, no releer el archivo. */
dialog.panel.panel--menu ul { margin-inline: 8.57%; }
/* La ✕ está en la cabecera. Acá dentro el original no pone nada. */
.panel--menu .panel__cerrar { display: none; }

/* El buscador, subrayado y con lupa, como el original. Vive fuera del panel
   porque lo usan también la página de resultados y el 404. */
/* La lupa va SUPERPUESTA, no en el flujo. Con `margin-left` negativo el campo
   se estiraba hasta 291 px --5 mas que el ancho util-- porque flexbox le
   devolvia al campo el hueco que el boton se descontaba. Con `absolute` el
   campo mide los 286 exactos del original y el subrayado termina donde debe.
   `line-height: 25px` y no el 1.5 heredado: 19x1.5=28.5 dejaba el campo en 35
   px de alto contra los 31 del original, y esos 4 px corrian TODO el panel
   hacia abajo. */
.busca { position: relative; }
.busca__campo {
	display: block; width: 100%;
	background: none; border: 0; border-bottom: 1px solid currentColor;
	border-radius: 0; padding: 0 0 5px; color: inherit;
	font: inherit; font-size: 19px; line-height: 25px; font-weight: 500;
	text-transform: uppercase;
}
.busca__campo::placeholder { color: inherit; opacity: 1; }
.busca__enviar {
	position: absolute; right: 0; bottom: 6px;
	background: none; border: 0; color: inherit; cursor: pointer;
	padding: 0; line-height: 0;
}

/* ---- EL PANEL LATERAL AMARILLO -------------------------------------------
 *
 * Medido sobre `#qodef-side-area` del original el 2026-09-02, a 1920 px:
 *
 *   panel      432px · fixed a la derecha · fondo #daff01 · padding 78/73/35
 *   logotipo   x=73 y=78 · 110×32, el mismo de la cabecera
 *   buscador   x=73 y=159 · 286×31 · 19px/500 versales
 *              subrayado: border-bottom 1px #000 · padding 0 0 5px
 *   rótulos    19px/500 versales, en «Último lanzamiento:» (y=229) y
 *              «Síguenos:» (y=420)
 *   foto       x=73 y=269 · 79×110
 *   redes      y=460 · iconos de 16px de alto, separados ~29px
 *
 * Es la única superficie grande de acento en todo el sitio: el amarillo que en
 * el resto es una pastilla de 11px, acá ocupa 432 px de ancho por toda la
 * altura. Por eso todo lo de dentro va en NEGRO, incluido el contorno de la
 * pastilla, que sobre lima no se leería en amarillo. */
dialog.panel--lado {
	width: min(96vw, 432px);
	background: var(--acento);
	color: var(--tinta);
}
.panel--lado .panel__cuerpo { padding: 78px 73px 35px; gap: 0; }
.panel--lado .panel__cerrar { position: absolute; top: 26px; right: 26px; align-self: auto; }
.panel--lado .panel__marca a { display: block; }
.panel--lado .panel__marca svg { height: 32px; width: auto; fill: currentColor; }

.panel--lado .busca { margin-top: 49px; width: 286px; max-width: 100%; }

/* «ÚLTIMO LANZAMIENTO», al píxel. Medido en el original el 2026-09-02, en
   coordenadas relativas al panel (el ancho útil va de x=73 a x=359, 286 px):

     rótulo    y=229 · 19px/500/25 versales
     imagen    x=73  y=269 · 79×110
     pastilla  x=168 y=282 · columna de 191 de ancho
     título    x=168 y=316 · 19px/500/25 versales, SIN tracking
     rótulo 2  y=420  («Síguenos:»)
     iconos    y=460 · 16 px de alto

   De ahí sale todo: 79 + 16 + 191 = 286, o sea que la calle entre la foto y el
   texto mide 16 px exactos y las dos columnas llenan el ancho útil. El texto
   arranca 13 px más abajo que la foto, y el título 13 px bajo la pastilla. */
.panel--lado .panel__rotulo {
	font-size: 19px; font-weight: 500; text-transform: uppercase;
	letter-spacing: normal; line-height: 25px; margin: 39px 0 0;
}
.panel--lado .panel__ficha {
	display: grid; grid-template-columns: 79px 191px; column-gap: 16px;
	align-items: start; margin-top: 15px;
}
.panel--lado .panel__ficha-foto { display: block; }
.panel--lado .panel__ficha-foto img { width: 79px; height: 110px; object-fit: cover;
                                      display: block; }
.panel--lado .panel__ficha-texto {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 13px; padding-top: 13px;
}
.panel--lado .panel__ficha-titulo {
	font-size: 19px; font-weight: 500; line-height: 25px;
	text-transform: uppercase; letter-spacing: normal;
}
.panel--lado .panel__ficha-titulo:hover { text-decoration: underline;
                                          text-underline-offset: .18em; }
/* Tras la ficha el rótulo se separa 41 px, no 39: la foto de 110 px termina
   antes que la caja del widget del original, que llega hasta y=399. */
.panel--lado .panel__ficha + .panel__rotulo { margin-top: 41px; }
.panel--lado .panel__redes { display: flex; gap: 29px; margin-top: 15px; }
.panel--lado .panel__redes a { padding: 0; display: inline-flex; }
.panel--lado .panel__redes svg { height: 16px; width: auto; }

/* El rótulo del opener móvil. Fuera de la consulta de medios porque el botón
   ya está oculto en escritorio: la regla de tamaño vive junto al componente. */
.hamburguesa__rotulo {
	font-size: 19px; font-weight: 500; line-height: 25px;
	text-transform: uppercase; letter-spacing: normal;
}
.hamburguesa__disco { fill: var(--acento); }
.hamburguesa__equis { display: none; stroke: var(--tinta); stroke-width: 5; fill: none; }
/* Abierto: el disco se va y queda la ✕, en el mismo sitio y con «MENU» al lado.
   El estado lo lleva `aria-expanded`, así que no hay una clase que mantener
   en sincronía con lo que oye un lector de pantalla: es el mismo atributo. */
.hamburguesa[aria-expanded="true"] .hamburguesa__disco { display: none; }
.hamburguesa[aria-expanded="true"] .hamburguesa__equis { display: block; }

/* ---- LA CABECERA EN MÓVIL, medida en el original el 2026-09-07 a 390 px ----
 *
 * Tres cosas que estaban mal y son una sola: la barra de la derecha.
 *
 * 1. `.utiles` no llegaba al borde. El `margin-left:auto` vivía en `.nav`, y
 *    `.nav` es justo lo que se oculta acá — al irse, se fue también el empuje,
 *    y carrito, lupa y menú quedaban apelotonados contra el logotipo con 190 px
 *    de blanco a la derecha. El auto tiene que ir en quien queda, no en quien
 *    se va.
 * 2. Sobraba la lupa. En el original `.qodef-search-opener` NO EXISTE en la
 *    cabecera móvil: el buscador vive dentro del panel, que es donde el propio
 *    panel lo pone. Acá se dibujaba el redondel amarillo en la barra Y otra vez
 *    dentro del panel.
 * 3. La barra medía 97 px. Los 97 son la cabecera de ESCRITORIO
 *    (`#qodef-page-header{height:97px}`); la móvil del original mide **70**, con
 *    el logotipo de 34 px a y=17. 27 px de más empujaban toda la portada.
 */
@media (max-width: 900px) {
	.nav { display: none; }
	.cabecera__fila { min-height: var(--cabecera-movil); }
	.utiles { margin-left: auto; }
	.utiles .redondel { display: none; }
	/* `.utiles .hamburguesa` y NO `.hamburguesa` a secas. El `padding: 4px` de
	   más arriba lo pone `.utiles button` --una clase y un tipo--, y contra eso
	   una clase sola pierde: la regla se escribía, se leía bien en el archivo y
	   no llegaba a la página. Medido con ella dentro y fuera: con `.hamburguesa`
	   la caja daba 96 px y el disco caía en x=341; con `.utiles .hamburguesa`
	   da 88 y el disco en x=345, que es donde lo pone el original. */
	.utiles .hamburguesa {
		display: inline-flex; align-items: center; gap: 7px;
		padding-inline: 0;
	}
}

/* ------------------------------------------------ desplegable visual
 *
 * Panel a todo el ancho de la ventana, colgado del borde inferior de la
 * cabecera, con la parrilla dentro de la misma columna de 1100 px que el
 * resto del sitio. Medido en el original: cuatro tarjetas de 204 px con 29
 * de calle, desde x=185.
 *
 * Se abre con `:hover` Y con `:focus-within`. Sólo con hover, el desplegable
 * no existe para quien navega con teclado -- que es como estaba el original,
 * donde además lo abría jQuery.
 */

/* El <li> que lleva panel NO puede ser `position:relative`.
   `.nav li { position:relative }` existe para el submenú normal, pero con eso
   el bloque contenedor del panel pasa a ser el propio <li> --33 px de ancho--
   y `left:0;right:0` lo encogen a nada. Con `static`, el contenedor pasa a ser
   `.cabecera`, que es `sticky` y por lo tanto posicionado. */
.nav > ul > li:has(> .mega) { position: static; }

/* SIN REGLA ARRIBA: era la «franja gris en el extremo superior» que levantó la
   revisión del cliente del 2026-09-14. El panel cuelga del borde de la
   cabecera, así que esa línea quedaba pegada a la de la propia cabecera y se
   leían como una banda de dos. La de abajo sí se queda: es la que cierra el
   panel contra la página, y el cliente no la objetó. */
.mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--papel);
	border-bottom: 1px solid var(--linea);
	padding-block: 26px 34px;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 30;
}
.nav > ul > li:hover > .mega,
.nav > ul > li:focus-within > .mega {
	opacity: 1; visibility: visible; transform: none;
}
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } }

/* LA CAJA DEL PANEL: A LA MEDIDA DE LAS CUATRO TARJETAS, Y CENTRADA.
 *
 * Antes esto era `.reticula` --1100 px--, y la revisión del cliente del
 * 2026-09-14 lo describe como «demasiado ancho y desplazado», contra una
 * grilla «más compacta y centrada» en el original. 1100 no salía de medir el
 * panel: salía de reusar la columna del resto del sitio porque estaba a mano.
 *
 * La medida propia del panel se deduce de sus propias piezas, que sí están
 * medidas: cuatro tarjetas de 204 con tres calles de 29 dan
 * 4×204 + 3×29 = 903. O sea que a 1100 sobraban ~197 px que las tarjetas
 * estiraban sin motivo, y es exactamente el síntoma que describe el cliente.
 *
 * `margin-inline: auto` lo centra en la ventana --el panel es `left:0;right:0`
 * a todo el ancho--, que es la otra mitad de la observación. */
.mega__caja {
	width: min(100% - var(--aire) * 2, 903px);
	margin-inline: auto;
}
.mega__parrilla {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 29px; list-style: none; margin: 0; padding: 0;
	align-items: start;
}

/* IMÁGENES DEL PANEL, TODAS IGUALES.
 *
 * `.ficha__figura` ya trae `aspect-ratio: 3/2` para todo el sitio, pero el
 * panel del original usa 204×135 --que es 1.5111, no 1.5-- y sobre una caja de
 * 204 px la diferencia es un píxel de alto. Se fija aquí con los números del
 * original en vez de heredar la aproximación, y así el borde inferior de las
 * cuatro fotos cae en la misma línea sea cual sea el recorte de origen.
 *
 * Esto es lo que sostiene el punto 6 de la revisión --«los títulos cambiaron
 * de posición y distribución»--: con las fotos desparejas, cada título
 * arrancaba a una altura distinta. Igualada la foto y quitada la meta que iba
 * en medio, el título queda inmediatamente debajo y a la misma altura en las
 * cuatro. */
.ficha--mega .ficha__figura { aspect-ratio: 204 / 135; }
.ficha--mega .ficha__titulo { line-height: 1.316em; margin-top: 11px; }

/* «VER MÁS» — la salida del panel hacia el archivo de la categoría.
   Reemplaza al rótulo que estaba arriba de la parrilla; mismo destino, otro
   sitio, que es como lo describe el cliente. */
.mega__mas { margin: 26px 0 0; }
.vermas {
	display: inline-block;
	font-size: 11px; font-weight: 500; line-height: 1;
	text-transform: uppercase; letter-spacing: .08em;
	padding: 11px 22px;
	border: 1px solid var(--tinta);
	color: var(--tinta);
	transition: background-color .18s ease, color .18s ease;
}
.vermas:hover, .vermas:focus-visible {
	background: var(--tinta); color: var(--papel); text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .vermas { transition: none; } }
/* En el panel la ficha es más chica: 204 px contra los 347 de la portada.
   Pero el original NO achica su tipografía dentro del panel: usa los mismos
   19px de título y 11px de meta y pastilla que en cualquier lista. Acá estaban
   en 15/9/9, y como el panel es lo primero que ve quien pulsa LEER, era de las
   diferencias más visibles del sitio. */
/* Sin `font-size` propio: el panel del megamenú del original usa la MISMA
   tarjeta que los listados --mismo shortcode, mismo `title_tag:h5`--, así que
   le sirve `--t-ficha` tal cual. */
.ficha--mega .ficha__titulo { line-height: 1.316em; }

/* El panel se sale de la cabecera, así que la cabecera no puede recortarlo. */
.cabecera { overflow: visible; }

/* ------------------------------------------------------------ pórtico */

.portico { margin-top: var(--aire); }
/* `display:block` NO es decorativo: `.portico__figura` es un <a>, y sobre un
   elemento en línea `aspect-ratio` no hace nada. Sin esto la imagen imponía su
   propia altura --1100x720 en vez de 1100x406-- y el bloque de texto, que es
   `position:absolute`, terminaba fuera de la foto. */
.portico__figura {
	display: block; position: relative;
	aspect-ratio: 2.71;              /* medido en el original */
	overflow: hidden; background: var(--linea);
}
.portico__figura img { width: 100%; height: 100%; object-fit: cover; }
.portico__texto {
	position: absolute; inset: auto 0 0 0; padding: clamp(18px, 3vw, 40px);
	z-index: 1;
	background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
	color: #fff;
}
.portico__titulo { font-size: var(--t-titular); color: #fff; }
/* El enlace del título cubre toda la foto: se puede pinchar en cualquier
   parte, como en el original, sin anidar un <a> dentro de otro. */
.portico__titulo a { position: static; }
.portico__titulo a::after { content: ""; position: absolute; inset: 0; }
.portico__texto .pastilla { position: relative; z-index: 1; }
/* El pórtico es el equivalente de `.banner-principal` del original, y allá la
   pastilla va en el acento, no en blanco translúcido:
   `.banner-principal … .qodef-e-info-category a{border:1px solid #daff01;
   color:#daff01}`. Mismo mecanismo que en `.portada__texto`: el contexto
   declara la intención, el componente la lee. */
.portico__texto {
	--meta-color: #fff;
	--pastilla-tinta: var(--acento);
	--pastilla-borde: var(--acento);
}

/* --------------------------------------------- banda que se desplaza */

.cartel {
	border-top: 1px solid var(--linea);
	/* DOS REGLAS, NO UNA, Y LA CAJA MIDE 183. Medido en `home.png` del original
	   (1440 real): las lineas caen en y=594 y y=777 --183 px de caja-- y las dos
	   van al MARCO, x=72..1368, ancho 1297. Aqui habia solo `border-bottom` y
	   una caja de 160 (100 de linea + 22 + 38).
	   El glifo del original ocupa 75 px con 55 de aire arriba y 54 abajo; con
	   `font-size: 100` y `line-height: 1` la caja de linea da 100 y las versales
	   de Inter ~73, asi que el padding que cuadra es (183-100)/2. */
	border-top: 1px solid var(--tinta);
	border-bottom: 1px solid var(--tinta);
	margin-block: var(--salto);
	padding-block: 41px 42px;
	overflow: hidden;
	--vel: 26s;
}
.cartel__pista { display: flex; width: max-content; animation: correr var(--vel) linear infinite; }
.cartel__grupo {
	display: flex; gap: .32em; padding-right: .32em;
	font-size: var(--t-cartel); font-weight: 500; text-transform: uppercase;
	line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
}
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.cartel__pista { animation: none; }
	.cartel { overflow-x: auto; }
}
.cartel:hover .cartel__pista { animation-play-state: paused; }

/* -------------------------------------------------------- secciones */

.seccion { margin-block: var(--salto); }
.seccion__barra {
	display: flex; align-items: flex-start; gap: var(--aire);
	flex-wrap: wrap; margin-bottom: 26px;
}
.seccion__titulo {
	/* `letter-spacing: 0` --no -0.3px--: el tema resetea el tracking heredado
	   del `body` en este rol. El -0.3px que había venía del menú, junto con el
	   tamaño de 15px. */
	font-size: var(--t-seccion); font-weight: 500; letter-spacing: 0;
	line-height: 25px; text-transform: uppercase;
	display: flex; align-items: center; gap: 9px;
}
.seccion__titulo::before {
	content: ""; width: 11px; height: 11px; background: var(--acento);
	border-radius: 50%; flex: none;
}
.seccion__titulo--cuadro::before { border-radius: 0; }
.seccion__todo { margin-left: auto; font-size: var(--t-meta); font-weight: 500;
                 text-transform: uppercase; text-decoration: underline;
                 text-underline-offset: .3em; }

/* pastillas de filtro */
/* 10px y no 7: las pastillas crecieron de lado al pasar el padding a `em`,
   y con el hueco viejo la fila quedaba apretada --el aire de dentro y el de
   fuera tienen que ir juntos o se ve peor que antes--. */
/* Los filtros son el uso CONTROL de `.pastilla`, no el uso etiqueta: acá el
   padding generoso en `em` sí es lo correcto (ver el comentario de la regla). */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
           --pastilla-pad: .42em 1em .36em; }
.filtros__rotulo { font-size: 9px; font-weight: 500; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--tenue); margin-right: 4px; }
.pastilla {
	font-size: var(--t-micro); font-weight: 500; letter-spacing: .1em;
	text-transform: uppercase;
	border: 1px solid var(--pastilla-borde, currentColor);
	color: var(--pastilla-tinta, inherit);
	border-radius: 55px; background: none;
	cursor: pointer; font-family: inherit; line-height: 1;
	white-space: nowrap;
	/* DOS COMPONENTES CON EL MISMO NOMBRE, y por fin separados.
	   `.pastilla` se usa como ETIQUETA (la categoría en la línea de meta) y
	   como CONTROL (los filtros de portada, el buscador, el 404, la tienda).
	   El razonamiento del `em` generoso --que un radio de 55px se come el
	   ancho útil por las curvas-- es correcto para el control y equivocado
	   para la etiqueta: el original le da `4px 6px 3px` a la etiqueta, y con
	   `.42em 1em .36em` la nuestra salía 12 px más ancha de lado.
	   El control conserva el suyo declarando `--pastilla-pad` en su contexto,
	   así que no hay que duplicar el componente. */
	padding: var(--pastilla-pad, 4px 6px 3px);
	display: inline-block;
	/* El `letter-spacing` mete un hueco DESPUÉS de la última letra, así que el
	   texto se ve corrido a la izquierda dentro del óvalo. Se le devuelve ese
	   mismo hueco por delante y queda ópticamente centrado. */
	text-indent: .1em;
	vertical-align: middle;
	transition: background-color .15s ease, border-color .15s ease;
}
@media (prefers-reduced-motion: reduce) { .pastilla { transition: none; } }
/* `color` explícito: con `--pastilla-tinta` valiendo el acento en los dos
   contextos sobre foto, sin esto el hover pintaba amarillo sobre amarillo. */
.pastilla[aria-pressed="true"],
.pastilla:hover { background: var(--acento); border-color: var(--acento);
                  color: var(--tinta); text-decoration: none; }

/* ------------------------------------------------------------ fichas */

.parrilla {
	display: grid;
	/* Tres columnas fijas como el original, no `auto-fill`: con auto-fill a
	   1440 px salían cuatro columnas de 255 y la página no se parecía. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(30px, 3.4vw, 48px) var(--calle);
	list-style: none; margin: 0; padding: 0;
	align-items: start;
}
/* Las dos familias del original (ver el comentario de `--t-ficha`).
   La portada es la ancha: se queda con la retícula de 1300 y la calle de 30,
   que ya dan los 413 px de imagen del original, y sólo sube el título.
   Las secciones son las estrechas: 1080 de contenedor y 40 de calle dan
   (1080−80)/3 = 333, la imagen exacta del original. */
.parrilla--portada { --t-ficha: 24px; }
.parrilla--seccion {
	width: min(100%, 1080px);
	margin-inline: auto;
	column-gap: 40px;
}
.parrilla--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.parrilla--fichas { row-gap: 11px; align-items: start; grid-auto-rows: auto auto auto auto clamp(28px, 3vw, 48px); }
ul.products { row-gap: 11px; grid-auto-rows: auto auto auto auto clamp(28px, 3vw, 48px); }
ul.products li.ficha {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
	height: auto;
	gap: 0;
}
.page-id-7308 .parrilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* LOS PRODUCTOS SON CUADRADOS. Medido en `tienda.png` del original a 1440: las
   columnas caen en x=170 y x=923 con 347 px de ancho, y el bloque de imagen de
   la primera mide 347 de alto. 347x347, o sea 1:1, con calle de 30
   --(923-170)/2 - 347 = 29.5--.
   Aca las 42 imagenes del catalogo salian con NUEVE tamanos distintos --347x347,
   241x376, 347x454, 287x376…-- porque no tenian proporcion declarada: cada una
   caia con la del archivo. Es el punto 65: «todos los productos tienen el tamano
   distinto y son mas grandes».
   `object-fit: cover` recorta en vez de deformar, igual que `.ficha__figura`. */
/* `.parrilla--fichas` es la del CATALOGO, y es la que faltaba: sus tarjetas son
   `li.ficha--recuperada` con la imagen dentro de un `<p><a>`, no `ul.products`
   de WooCommerce. La primera version de esta regla apuntaba a `.products` y a
   `--cuatro` y no llegaba a ninguna de las 42: se veia bien en el archivo y no
   cambiaba un pixel. Sexta vez. */
/* Subgrid: imagen, título y descripción se coordinan entre cards de la misma fila */
.parrilla--fichas .ficha--recuperada {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
	height: auto;
	gap: 0;
}
.ficha--recuperada p,
.ficha--recuperada figure { margin: 0; padding: 0; }
.ficha--recuperada > p:first-child,
.ficha--recuperada > figure { align-self: start; }
.ficha--recuperada > p:first-child img,
.ficha--recuperada > figure img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ficha--recuperada > p:first-child a { display: block; }
.ficha--recuperada h5 br,
.ficha--recuperada p br { display: none; }
.parrilla--cuatro img,
.parrilla--fichas .ficha img,
.parrilla.products img,
ul.products li img { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; }
@media (max-width: 1100px) { .parrilla--cuatro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .parrilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .parrilla { grid-template-columns: 1fr; } }

/* ---- LA LISTA DE BITÁCORAS ------------------------------------------------
 *
 * Una columna, y cada ítem partido en dos: foto a la IZQUIERDA, texto a la
 * DERECHA y alineado a la derecha. Es la única sección del sitio que se dibuja
 * así --se comprobó contra `/leer/`, que es parrilla de tres columnas-- y por
 * eso va en un modificador y no en `.parrilla`.
 *
 * Medido en el original a 1920 px:
 *   ítem     1120 de ancho, centrado en la retícula de 1300 (90 px por lado)
 *   foto     550 × 363, proporción 3:2, pegada al borde izquierdo del ítem
 *   texto    550 de ancho, arrancando en x=953
 *   título   37px / 45  · alineado a la derecha
 *   extracto 18px / 24  · alineado a la derecha
 *   meta     alineada a la derecha
 *
 * La regla horizontal entre ítems es la que da el ritmo de la página; sin ella
 * dos bitácoras seguidas se leen como una sola de cuatro párrafos. */
.parrilla--lista {
	grid-template-columns: 1fr;
	gap: 0;
	width: min(100%, 1120px);
	margin-inline: auto;
}
.parrilla--lista .ficha {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Gap CERO, y el aire va como relleno del ítem. Medido en el original: la
	   foto ocupa 403→953 y el texto arranca en 953 exacto, sin calle entre
	   medio; el ítem va de 393 a 1513, o sea 10 px de relleno a cada lado.
	   Con `var(--calle)` las dos columnas bajaban a 545 y no cuadraban. */
	column-gap: 0;
	padding-inline: 10px;
	align-items: start;
	text-align: right;
	padding-block: 46px;
	border-bottom: 1px solid var(--linea);
}
.parrilla--lista .ficha:first-child { padding-top: 0; }
/* La foto ocupa la columna izquierda y las tres filas de texto la derecha. */
.parrilla--lista .ficha__figura {
	grid-column: 1; grid-row: 1 / span 3;
	aspect-ratio: 3 / 2;
}
.parrilla--lista .ficha__meta     { grid-column: 2; justify-content: flex-end; margin: 0; }
.parrilla--lista .ficha__titulo   { grid-column: 2; font-size: 37px; line-height: 1.216;
                                    margin-top: 18px; }
.parrilla--lista .ficha__extracto { grid-column: 2; font-size: 18px; line-height: 24px;
                                    max-width: none; margin-top: 26px; }
/* Sin foto no hay dos columnas que repartir: el texto ocupa el ancho. */
.parrilla--lista .ficha--sinfoto { grid-template-columns: 1fr; }
.parrilla--lista .ficha--sinfoto > * { grid-column: 1; }

@media (max-width: 900px) {
	.parrilla--lista { grid-template-columns: 1fr; }
	.parrilla--lista .ficha { grid-template-columns: 1fr; text-align: left; row-gap: 11px; }
	/* UNA COLUMNA QUIERE DECIR QUE TODOS VUELVEN A LA COLUMNA 1.
	
	   Este bloque cambiaba `grid-row` de la foto y se olvidaba de
	   `grid-column`, que las reglas de escritorio ponen a mano: la foto en la
	   1, y meta, título y extracto en la 2. Con `grid-template-columns: 1fr`
	   la columna 2 ya no existe --así que el navegador la CREA implícita--,
	   le da el ancho al texto que la pide, y la columna 1 se queda en 0 px.
	
	   El síntoma era que la foto de bitácoras «no salía» en móvil. No estaba
	   oculta ni rota ni mal cargada: estaba en una columna de ancho cero, y
	   por eso `loading="lazy"` ni siquiera llegaba a pedir el archivo
	   --`img.complete` daba `false` y el natural, 0x0--. Buscar el fallo en
	   la imagen no llevaba a ninguna parte: estaba en la retícula. */
	.parrilla--lista .ficha > * { grid-column: 1; }
	.parrilla--lista .ficha__figura { grid-row: auto; }
	.parrilla--lista .ficha__meta { justify-content: flex-start; }
	.parrilla--lista .ficha__titulo { font-size: 29px; margin-top: 0; }
	.parrilla--lista .ficha__extracto { margin-top: 0; }
}

.ficha { display: flex; flex-direction: column; gap: 11px; height: 100%; }
/* El botón de compra al pie de la ficha: así los de una misma fila quedan
   alineados aunque los títulos tengan distinto largo. */
.ficha .button, .ficha .boton--agotado, .ficha__candado + .ficha__precio { margin-top: auto; }
/* `display:block` es obligatorio: `.ficha__figura` es un <a>, y sobre un
   elemento en línea `aspect-ratio` no hace nada. Sin esto cada imagen imponía
   su propio alto y las fichas de una misma fila quedaban desparejas. Es el
   mismo fallo que tuvo el pórtico. */
.ficha__figura { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--linea); }
.ficha__figura img { width: 100%; height: 100%; object-fit: cover;
                     transition: transform .45s ease; }
/* EL ZOOM SE QUEDA, Y ES UNA DESVIACIÓN DELIBERADA DEL ORIGINAL.
   El original vira la foto a blanco y negro al pasar el cursor; acá hace un
   zoom de 3.5%. La revisión del cliente del 2026-09-14 lo miró de frente y
   eligió el nuestro: «prefiero la nueva opción». Queda escrito porque es la
   única diferencia con el original que está aprobada en vez de pendiente, y
   sin esta nota el próximo cotejo la levanta como defecto y la «corrige». */
.ficha:hover .ficha__figura img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) { .ficha__figura img { transition: none; } }
.ficha--sinfoto .ficha__figura { display: none; }

/* LA LÍNEA DE META, parametrizada.
 *
 * Tres desviaciones en una sola regla, todas medidas contra el original el
 * 2026-09-02: 9.5px contra 11px, `.07em` contra `.1em`, y `var(--tenue)`
 * (#7a7a7a) contra #000. En listados eso hacía que la pastilla saliera GRIS,
 * porque hereda el color del contenedor.
 *
 * Y sobre todo: los tres contextos que van sobre foto --portada de entrada,
 * pórtico, y en el original también la bitácora destacada-- ya no atacan a los
 * descendientes con selectores. Declaran estas propiedades y el componente las
 * lee. Un selector como `.portada__texto .ficha__meta span` no puede distinguir
 * la autoría del separador «/», porque los dos son `<span>`; una propiedad
 * heredada no tiene ese problema. */
.ficha__meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	font-size: var(--meta-tam, 11px);
	font-weight: 500;
	letter-spacing: var(--meta-track, .1em);
	line-height: 11px;
	text-transform: uppercase;
	color: var(--meta-color, var(--tinta));
}
.ficha__meta .barra { color: var(--acento-separador); font-weight: 700; }
/* El `margin-right:7px` del original va SÓLO en la etiqueta de la línea de
   meta. En los filtros, que separan con `gap`, sumaría un hueco de más. */
.ficha__meta .pastilla { margin-right: 7px; }
.ficha__titulo { font-size: var(--t-ficha); line-height: 1.316em; }
.ficha__precio { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ficha__candado { font-size: 10px; letter-spacing: .08em; }

/* La ficha de producto pone el precio a la derecha del rótulo, como el
   original: la categoría a la izquierda y el precio alineado al borde. */
.ficha__fila { display: flex; align-items: baseline; gap: 10px; }
.ficha__fila .ficha__precio { margin-left: auto; }

.mas { display: flex; justify-content: flex-start; margin-top: 42px; }
.mas a, .mas button {
	/* El botón del original: 15px / 400 / -.02em / 26px, `padding:12px 40px`.
	   Acá iba a 12px con peso 500 y `.09em`, o sea más chico, más pesado y con
	   el interletrado del signo contrario. */
	border: 1px solid var(--tinta); background: none; font: inherit;
	font-size: 15px; font-weight: 400; text-transform: uppercase;
	letter-spacing: -.02em; line-height: 26px;
	padding: 12px 40px; cursor: pointer; color: inherit;
}
.mas a:hover, .mas button:hover { background: var(--acento); border-color: var(--acento);
                                  text-decoration: none; }

/* temas */
.temas { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-meta);
         text-transform: uppercase; letter-spacing: .06em; }
.temas a { text-decoration: underline; text-underline-offset: .28em; }
.temas .barra { color: var(--acento-separador); }

/* -------------------------------------------------------- contenido */

.entrada { margin-block: var(--salto); }
.entrada__cabeza { max-width: 62ch; margin-bottom: 30px; }
/* El título de las páginas de sección va CENTRADO y a todo el ancho, a
   diferencia del de una entrada. Va acá y no junto a `.parrilla--lista`
   --que es donde se escribió primero-- porque tiene la misma especificidad que
   `.entrada__cabeza` y allá perdía por orden: el `max-width: 62ch` seguía
   ganando y el título quedaba centrado dentro de una caja de 629 px, o sea a
   la izquierda de la página. Ver `page-full-width.php` para por qué la
   condición mira la parrilla y no el tipo de página. */
/* LAS DOS REGLAS FINAS de las páginas de sección.
 *
 * Medidas en el original el 2026-09-02 a 1920 px, y las dos son `1px solid
 * #000` --NEGRO, no el `--linea` gris que usamos para separar tarjetas--:
 *
 *   bajo el menú     sobre el MARCO (4.9%): x=93 w=1718
 *   bajo el título   sobre la RETÍCULA: x=303 w=1300
 *
 * Y sólo aquí: en la portada y en una entrada el original no dibuja ninguna
 * de las dos. Por eso cuelgan de `.tsed-con-rotulo` y no de `.cabecera`.
 *
 * El bloque del título mide 199 px de alto y arranca pegado al menú --y=97,
 * justo donde termina la cabecera--, con el título a 85 px del borde de
 * arriba y 29 px hasta la regla. De ahí salen el `padding-block` y el
 * `margin-top: 0` de `.entrada`. */
/* LA REGLA BAJO EL MENÚ: REPUESTA EL 2026-09-14, con la medida y la evidencia.
 *
 * Se habia retirado unas horas antes por el punto 10 del cliente --«sobra la
 * linea horizontal bajo el encabezado»-- contra una medicion propia del
 * 2026-09-02 que no se pudo repetir porque el origen no responde. Y despues el
 * punto 26 pidio lo contrario: «falta la linea fina bajo el logo y el menu».
 *
 * NINGUNO DE LOS DOS SE EQUIVOCABA: hablaban de paginas distintas. Medido en
 * las capturas del ORIGINAL que estaban en el repo desde el principio
 * --`trabajo/inspeccion/ediciones-original/`, a 1440 real--:
 *
 *     home.png    portada          NO hay linea
 *     blog.png    entrada          y=96, x=71..1368, ancho 1298, NEGRA
 *     tienda.png  tienda           y=96, x=71..1368, ancho 1298, NEGRA
 *
 * 1298 es el marco (4.9% por lado a 1440), que es exactamente donde la puso la
 * medicion del 2026-09-02. El cliente dijo «en ESTA pagina original no esta» y
 * tenia razon: en la portada no esta.
 *
 * El error no fue creerle ni no creerle: fue que la regla colgaba de
 * `.tsed-con-rotulo` --solo las secciones-- y se retiro ENTERA por una
 * observacion sobre la portada, que es justo donde no se aplicaba.
 *
 * Va en negro y no en blanco: el cliente la llamo «blanca» mirando una entrada
 * con la cabecera sobre la foto, y esa variante esta apagada a peticion suya.
 * Sobre cabecera opaca, la del original es negra. */
.cabecera .marco { border-bottom: 1px solid transparent; }

/* Lo que sigue es la nota de cuando se retiro, que se conserva porque explica
   de donde salio la medida:
 * LA REGLA BAJO EL MENÚ: RETIRADA EL 2026-09-14.
 *
 * Aquí vivía `.tsed-con-rotulo .cabecera .marco { border-bottom: 1px solid
 * var(--tinta) }`, puesta por la medición del 2026-09-02 que se describe
 * arriba. La revisión del cliente dice que en el original esa línea no está.
 *
 * No se pudo volver a medir para dirimirlo: `tsonamiediciones.cl` no responde
 * --TLS completa y después cero bytes; se probó por curl directo, por Wayback
 * y por WebFetch, y seis reintentos a lo largo de la sesión--. Entre una
 * medición de hace doce días que no se puede repetir y el cliente mirando el
 * original hoy, manda el cliente.
 *
 * SI SE QUIERE VOLVER ATRÁS es una sola línea, y está escrita en el párrafo de
 * arriba con su medida: `1px solid #000` sobre el MARCO, x=93 w=1718 a 1920.
 * La regla bajo el TÍTULO --`.entrada__cabeza--centrada`, justo debajo-- no se
 * tocó: el cliente habló de la línea «bajo el encabezado», que es ésta, y no
 * de aquélla. */
.tsed-con-rotulo .entrada { margin-top: 0; }
.entrada__cabeza--centrada {
	max-width: 1140px; margin-inline: auto; text-align: center;
	padding-block: 85px 29px;
	margin-bottom: 0;
	border-bottom: 1px solid var(--tinta);
}
/* El `margin-bottom: 14px` del h1 vive DENTRO de la caja, así que inflaba el
   bloque a 214 px contra los 199 del original. Acá el aire de abajo lo pone el
   `padding` del bloque, que es lo que la regla tiene que respetar. */
.entrada__cabeza--centrada h1 { margin-bottom: 0; }
/* Del filo de la regla a la primera tarjeta: 60 px en el original (regla en
   y=296, tarjeta en y=356). `.seccion` traía `var(--salto)` = 92. */
.tsed-con-rotulo .seccion { margin-top: 60px; }
@media (max-width: 1024px) {
	.entrada__cabeza--centrada { padding-block: 48px 24px; }
}
/* 77px, como el titular con portada. Acá decía `var(--t-titular)` = 37px: una
   entrada SIN imagen destacada salía con el título a menos de la mitad del
   tamaño que la misma entrada con imagen. */
.entrada__cabeza h1 { font-size: 77px; line-height: 1.104; letter-spacing: 0;
                      margin-bottom: 14px; }

/* LA COLUMNA DE PROSA: 74% de la retícula, centrada.
 *
 * El original declara `.qodef-e-text{max-width:74%;margin:0 auto}` sobre su
 * rejilla de 1300 → 962 px exactos, que es el ancho medido a 1920. Acá decía
 * `max-width:66ch` sin `margin-inline`, o sea dos defectos a la vez: la
 * columna quedaba PEGADA A LA IZQUIERDA (el «no está el texto centrado» del
 * cliente) y además 213 px más angosta.
 *
 * Y `ch` era mala unidad para esto: depende de la fuente que resuelva, así que
 * el ancho de la columna cambiaba según si Inter había cargado o no. */
.prosa { max-width: 74%; margin-inline: auto; font-size: var(--t-cuerpo); }
.prosa > * + * { margin-top: 1.15em; }
/* Los dos títulos que estaban rotos, no sólo desafinados. `--t-seccion` es
   15px --el rótulo de sección-- y se había usado para los encabezados de la
   prosa: h2 salía a 15px y h3 a 11.7px, MÁS CHICO QUE EL CUERPO (18px). El
   original: h2 50/58, h3 37/45, con escalones a 1024 y 680. */
.prosa h2 { font-size: 50px; line-height: 1.16; margin-top: 1.9em; }
.prosa h3 { font-size: 37px; line-height: 1.216; margin-top: 1.6em; }
@media (max-width: 1440px) { .entrada__cabeza h1 { font-size: 70px; } }
@media (max-width: 1024px) {
	.entrada__cabeza h1 { font-size: 60px; }
	.prosa h2 { font-size: 45px; }
}
@media (max-width: 680px) {
	.entrada__cabeza h1 { font-size: 39px; }
	.prosa h2 { font-size: 34px; }
	.prosa h3 { font-size: 29px; }
}
.prosa a { text-decoration: underline; text-underline-offset: .2em;
           text-decoration-thickness: 1px; }
.prosa blockquote { border-left: 3px solid var(--acento); padding-left: 1.1em;
                    margin-left: 0; font-size: 1.06em; }
.prosa figure { margin-inline: 0; }
.prosa figcaption { font-size: var(--t-meta); color: var(--tenue); margin-top: .5em; }
.prosa code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.prosa pre { overflow-x: auto; background: #f4f4f4; padding: 1em; }
.prosa table { border-collapse: collapse; width: 100%; }
.prosa td, .prosa th { border: 1px solid var(--linea); padding: .5em .7em; text-align: left; }
.prosa img { margin-inline: auto; }

/* Tabla o bloque ancho: se desplaza dentro de su caja, nunca el <body>. */
.desborda { overflow-x: auto; }

/* galería de formato (qodef_post_format_gallery_images) */
.galeria { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
           list-style: none; padding: 0; margin: 1.6em 0; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* audio y video de formato */
/* LA AUTORÍA AL PRINCIPIO DE LA ENTRADA.
 *
 * Medido en el original sobre `/ensayo-error-_-david-velez/` a 1920 px, en
 * coordenadas de página (la columna arranca en x=472):
 *
 *     «ARTISTA»      y=951   11px / 500 / ls 1px      / versales
 *     «David Vélez»  y=966   24px / 500 / ls -0.36px  / versales
 *     regla          y=1036  x=472  192 x 1 px, negra, al borde de la columna
 *     reproductor    y=1112  962 x 30
 *
 * La estructura la repone `tsed_autoria_de_entrada()`: el saneador entrega las
 * tres cosas aplastadas en un solo `<p>` con `<br>`, y desde ahí ningún
 * selector puede darle a cada línea lo suyo. Ver el comentario de esa función.
 *
 * Sin bordes ni cajas: en el original no hay ninguna. Lo único que dibuja una
 * línea es la regla corta, y es lo que separa este bloque del reproductor. */
.autoria { display: flex; flex-direction: column; margin: 0; }
.autoria__rotulo {
	font-size: 11px; font-weight: 500; line-height: 11px;
	letter-spacing: 1px; text-transform: uppercase;
}
.autoria__nombre {
	font-size: 24px; font-weight: 500; line-height: 24px;
	/* `-0.36px` literal, no `-.02em`. A 24px, `-.02em` da -0.48 y el original
	   mide -0.36: su nombre HEREDA el tracking calculado sobre el cuerpo de
	   18px en vez de recalcularlo a su propio tamaño. Es una herencia, no una
	   proporcion, y copiarla como proporcion la desafina. */
	letter-spacing: -0.36px; text-transform: uppercase; margin-top: 4px;
}
.autoria__regla {
	width: 192px; height: 1px; border: 0; background: var(--tinta);
	margin: 41px 0 0;
}
/* El párrafo que sigue a la regla no arrastra el `margin-top` de la prosa: el
   aire ya lo pone la regla. */
.autoria + .autoria__regla + .medio { margin-top: 76px; }

/* `medio--tira`: el reproductor compacto de Internet Archive, 30 px de alto.
   `sanear.py` emite `height="120"` para todos los proveedores por igual --ver
   `sanear.py:70`--, y a 120 px el reproductor de audio se ve como una caja
   negra en vez de la barra fina que usa el original. */
.medio--tira iframe { aspect-ratio: auto; height: 30px; }
/* Dentro de `.prosa` el `74%` de `.medio` se aplicaria DOS VECES --la columna
   ya mide 962-- y el reproductor quedaba en 712 centrado en vez de ocupar la
   columna entera como en el original. Cuando el medio viene del cuerpo, manda
   el ancho de la prosa. */
.prosa .medio { max-width: none; margin-inline: 0; }

/* EL REPRODUCTOR VA EN LA COLUMNA DE TEXTO, no a todo el ancho del articulo.
   `tsed_medios_de_entrada()` lo emite como HERMANO de `.prosa`, y sin ancho
   propio se estiraba a los 1300 de la reticula mientras el texto de abajo
   media 962. En el original el video y la prosa comparten borde izquierdo y
   derecho: el reproductor esta dentro del mismo bloque de contenido. Mismo
   `74%` centrado que `.prosa`, para que los dos se muevan juntos si ese numero
   cambia. */
.medio { margin: 1.6em auto; max-width: 74%; }
.medio iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.medio audio { width: 100%; }

/* aviso de entrada protegida */
.protegida { border: 2px solid var(--acento); padding: clamp(18px, 3vw, 32px);
             max-width: 52ch; }
.protegida h2 { font-size: var(--t-seccion); margin-bottom: .6em; }
.protegida label { display: block; font-size: var(--t-meta); text-transform: uppercase;
                   letter-spacing: .08em; margin-bottom: .5em; }
.protegida input[type=password] { font: inherit; padding: .6em; border: 1px solid var(--tinta);
                                  width: 100%; max-width: 280px; }
.protegida button { font: inherit; text-transform: uppercase; font-size: var(--t-meta);
                    letter-spacing: .08em; padding: .75em 1.8em; border: 1px solid var(--tinta);
                    background: var(--acento); cursor: pointer; margin-top: .8em; }

/* -------------------------------------------------------- pie */

/* La regla sobre el pie es NEGRA y de 1px, no el gris `--linea` que usamos
   para separar tarjetas. Sale del bloque del personalizador del original:
   `#qodef-page-footer-top-area-inner{padding-top:20px; border-top:1px solid
   #000000}`. Los 34px de relleno eran nuestros; el original pone 20. */
/* EL AIRE SOBRE EL PIE: 77px FIJOS, y del padding, no del margin.
   El original --`#qodef-page-footer-top-area-inner`, en `main.min.css` del tema
   `henrik`-- declara `padding: 77px 0 12px`. Aca habia `margin-top: var(--salto)`
   MAS `padding-top: 20px`, o sea ~112 px a 1533+ y creciendo con la ventana,
   porque `--salto` es un clamp() con vw y el original no interpola.
   Es el punto 19 del cliente: «la linea quedo demasiado abajo y el espacio
   blanco previo al footer aumento». Las dos mitades son el mismo numero.
   La LINEA no se toca: el tema la declara `border-top: 0 solid #000`, pero ese
   es su valor por omision y el sitio real la dibuja desde el personalizador,
   que no cruzo. El cliente la ve, asi que existe: lo que estaba mal era donde
   caia, no que estuviera. */
.pie { margin-top: 0; padding-top: 0; }
.pie__fila { border-top: 1px solid var(--tinta); padding-top: 28px; display: flex; align-items: flex-end; justify-content: space-between;
             padding-bottom: 23px; }
.pie__fondos { max-width: 300px; font-size: 8px; line-height: 1.35; color: var(--tenue);
               text-transform: uppercase; letter-spacing: .04em; }
/* TRES COLUMNAS, y las redes AL CENTRO.
 *
 * El pie del original es una rejilla de tres --`qodef-col-num--3` en su
 * marcado--: sello del Ministerio, iconos de redes, logos Tsonami. La primera
 * versión de acá metía los dos sellos en un solo contenedor y dejaba las redes
 * detrás, con lo que los logos quedaban pegados a la izquierda y los iconos
 * corridos al final.
 *
 * `flex: 1` en los tres y `justify-content` distinto en cada uno: así el
 * centro es el centro DE LA FILA y no el hueco que sobra entre dos bloques de
 * ancho desigual --y el sello del Ministerio es mucho más ancho que los logos
 * de la derecha, así que ese hueco nunca habría caído en el medio--. */
.pie__sellos--izq { flex: 1; display: flex; justify-content: flex-start; }
/* 16 y 16, medidos en el original: `.qodef-social-icons-group .qodef-icon-holder a`
   lleva `font-size:16px; margin-right:16px` y el ultimo sin margen. Aca eran
   discos de 26 con 15 de hueco: mas grandes Y, por serlo, mas separados a la
   vista. Es el punto 21. */
/* Afinado con `blog.png`: los tres iconos ocupan 97 px de ancho y 17 de alto.
   Con 17 de icono, el hueco que cuadra es (97 - 3*17) / 2 = 23. Antes 16 y 16,
   que salian del CSS del tema; la captura es mas precisa porque mide lo que el
   sitio de verdad dibujaba. */
.pie__redes       { flex: 1; display: flex; gap: 15px; justify-content: center; align-items: center; margin-bottom: 10px; }
.pie__sellos--der { flex: 1; display: flex; justify-content: flex-end; }

/* 19 y no 17: los 17 son el TRAZO en el original y estos svg tambien traen
   aire. Con caja de 17 el trazo daba 15. */
.pie__redes a { width: 18px; height: 18px; display: inline-flex; align-items: center;
                justify-content: center; }
.pie__sellos { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
/* UN SVG SIN `width`/`height` NO TIENE TAMAÑO INTRÍNSECO.
 *
 * Los dos sellos son SVG con `viewBox` y nada más --así los exportó quien los
 * hizo-- así que el navegador conoce su PROPORCIÓN pero no su medida. Con
 * `max-height` y `width:auto` dentro de un contenedor flex, eso se colapsa a
 * 0x0: la regla funcionaba con PNG, que sí traen medida, y fallaba en
 * silencio con estos. Medido el 2026-08-31: los dos sellos a 0x0 con el
 * archivo bajando 200 y 29 KB.
 *
 * `height` en vez de `max-height` le da una medida definida, y de ahí la
 * proporción resuelve el ancho. `flex: 0 0 auto` impide que el reparto del
 * flex los vuelva a encoger. */
/* SIN ALTURA FORZADA. El original no le pone ninguna a las imagenes de widget
   del pie: sus unicas reglas para `#qodef-page-footer .widget img` son de
   margen --`margin-right:auto` y compania-- y las de 80px son del carrito y de
   los productos, no de los sellos. Aca habia `height: 150px`, que estira
   cualquier logo a esa altura sea cual sea su original: es el punto 20 --«logo
   del Ministerio y texto del proyecto mucho mas grandes»-- y el 22.
   Cada sello sale a su tamano natural. NO se le pone un `max-height` en su
   lugar: seria cambiar un numero inventado por otro.

   SIN `width` NI `height` EN ESTA REGLA, y es el detalle que costo: los sellos
   son SVG, y un SVG sin tamano intrinseco se estira a su contenedor. Quien lo
   frena es el atributo `width="337" height="114"` que WordPress escribe en el
   `<img>` -- pero un atributo asi es un *presentational hint* de especificidad
   CERO, asi que CUALQUIER declaracion de autor lo pisa, `auto` incluido.
   Con `width: auto` aqui, el logo salia a 344 --el ancho exacto de su columna--
   en vez de a los 300 del archivo. Medido forzandolo a mano en el navegador:
   `el.style.width = el.naturalWidth` lo devolvia a 300.
   Quitando las dos declaraciones, el hint vuelve a mandar y el `height: auto`
   de la regla global calcula el alto por proporcion. */
.pie__sellos img { max-width: 100%; flex: 0 0 auto; }
/* SIN `max-width` PROPIO, y la medicion explica por que.
 *
 * Los dos SVG traen aire alrededor del dibujo: su caja es 337 y el trazo
 * visible ocupa menos. Medido comparando nuestra captura del pie contra
 * `blog.png` del original, los dos a 1440:
 *
 *                        caja 264 (acotada)   caja 337 (natural)   original
 *     institucional              298 x 91          317 x 97        317 x 97
 *     logos Tsonami              208 x 26          264 x 33        264 x 33
 *
 * O sea que el tamano natural del SVG YA daba las medidas del original, y los
 * `max-width: 317px` y `264px` que se pusieron aqui --leidos del original y
 * aplicados a la CAJA en vez de al trazo-- encogian el dibujo un 6% y un 21%.
 * Medir el original bien y aplicar el numero al elemento equivocado da un error
 * igual de grande que no medirlo. */

/* 114 px es la medida del ORIGINAL, medida en `tsonamiediciones.cl`, no un
 * valor elegido a ojo. El tema derivado los tenía a 34 y a esa altura el
 * sello del Ministerio --que es el que lleva texto -- queda ilegible: se lee
 * el logotipo pero no lo que dice, que es justamente lo que la institución
 * pide mostrar. En pantalla angosta bajan a 76, que sigue siendo legible. */
/* El menú del pie, con su clase propia: antes reusaba `.pie__sellos` y
   heredaba el `gap` de los logos. */
.pie__enlaces ul { display: flex; gap: 22px; flex-wrap: wrap;
                   list-style: none; margin: 0; padding: 0; }

/* En angosto no hay tres columnas que repartir: se apilan centradas, que es lo
   que hace el original en móvil. */
@media (max-width: 52rem) {
	.pie__fila { flex-direction: column; text-align: center; }
	.pie__sellos--izq,
	.pie__sellos--der,
	.pie__redes { flex: 0 0 auto; justify-content: center; }
	.pie__sellos     { flex-wrap: wrap; justify-content: center; }
	.pie__sellos img { height: 96px; }
}
/* 11px / .1em, como el `p.qodef-copyright` del original. Iba a 9px / .08em. */
/* 69 px de alto, medidos en `blog.png` del original (de y=966 a y=1035). Antes
   daba 53: el nuestro era mas BAJO que el original, no mas alto como decia el
   punto 23. La altura se fija con el padding, no con `height`, para que un
   credito que se parta en dos lineas no se corte. */
.pie__barra { min-height: 69px; display: block; width: 100%;
              background: var(--tinta); color: var(--papel); font-size: 11px;
              font-weight: 500; letter-spacing: .1em; line-height: 11px;
              text-transform: uppercase; }
/* `32px 0 10px`, como `#qodef-page-footer-bottom-area-inner` del original.
   Con los 13px parejos que habia, la banda medía 37px de alto contra los ~53
   de alla: se leia como un zocalo apretado en vez de una banda. */
.pie__barra .reticula { display: flex; gap: var(--aire); flex-wrap: wrap;
                        padding: 22px 0 18px; }
.pie__barra .derecha { margin-left: auto; }

/* ------------------------------------------------------------ varios */

.vacio { padding-block: var(--salto); font-size: var(--t-seccion); text-transform: uppercase; }
.paginacion { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
              margin-top: 48px; font-size: var(--t-meta); font-weight: 500; }
/* SIN RECUADRO: LA PAGINACIÓN SON NÚMEROS, NO BOTONES.
 *
 * El original pagina «1 2 3 >». Acá cada número llevaba `border: 1px solid` y
 * `padding: .6em .95em`, y el activo un fondo de acento entero: eso es lo que
 * el cliente describe el 2026-09-14 como «botones cuadrados, el primero en
 * color» (punto 18). Con las flechas de `paginacion.php`, quitar la caja es
 * lo que queda de ese punto.
 *
 * EL GAP: 18px y no los 8 de antes. No está medido -- sale de conservar la
 * separación óptica que tenían los números CON caja (8 de hueco más .95em de
 * padding por lado, o sea unos 30 px de eje a eje). Con `padding: 0` y el
 * hueco viejo los dígitos se tocaban.
 *
 * PENDIENTE, y es lo único que aquí no sale ni de la medición ni de la
 * descripción del cliente: CÓMO marca el original la página actual. Él dijo
 * qué NO es --un bloque de color-- y no qué es. Va subrayado de acento porque
 * es el vocabulario que el sitio ya usa para «estás acá»: el mismo recurso del
 * `::after` del menú, y el acento marcando estado es un hecho medido del
 * original (pastilla de filtro activo). Se confirma con la captura. */
.paginacion .page-numbers { padding: 0; }
.paginacion .current {
	text-decoration: underline;
	text-decoration-color: var(--acento);
	text-decoration-thickness: 2px;
	text-underline-offset: .35em;
}

.oculto-visual {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* El logo va como SVG en línea, no como <img>: hereda `currentColor` y no
   pide una petición más. 110.7x32 en el original -> 40px de alto. */
.cabecera__marca svg { height: 32px; width: auto; fill: currentColor; display: block; }
/* 34 px en móvil, no 32: el logotipo de la cabecera móvil del original mide
   115x34 y arranca en y=17. Los 32 son los de escritorio.

   VA ACA Y NO EN LA CONSULTA DE 900 px DE MAS ARRIBA. Ahi lo escribi primero y
   no llego a la pagina: misma especificidad que esta linea, y esta linea va
   despues, asi que gana por orden. Es el segundo caso hoy --el otro fue el
   `padding` del opener contra `.utiles button`-- de una regla que se lee bien
   en el archivo y no existe en el navegador. Cuando una medida no se mueve,
   mirar quien mas la escribe antes de tocar el valor. */
@media (max-width: 900px) {
	.cabecera__marca svg, .cabecera__marca img { height: 34px; max-height: 34px; }
}
.cabecera__marca a { display: inline-flex; align-items: center; }


/* El separador entre el nombre del sitio y los términos, como en el original.
   Va en el CSS y no en el HTML: como texto, un lector de pantalla leería
   «barra» en medio de la frase, y ahí es un separador dibujado, no una
   palabra. */
.pie__terminos::before { content: "|"; margin-right: .9em; color: inherit; opacity: .55; }

/* ---- entrada: la portada a sangre, como el original -----------------------
 *
 * Medido a 1920 px sobre `/murmullos_de_cemento/` en `tsonamiediciones.cl`:
 * título a 77 px, peso 500, BLANCO, sobre la portada a todo el ancho, y la
 * fecha y la autoría encima de la imagen también. El `clamp()` conserva ese 77
 * como máximo y baja en pantallas angostas.
 *
 * El velo existe porque el título es blanco y las portadas no: hay fotos claras
 * --la de «Impromptus para ascensores» es casi blanca-- donde sin él el texto
 * desaparece. Es un degradado desde abajo y no un tinte plano, para no apagar
 * la mitad de arriba de la foto. */
.portada{
	position:relative; display:flex; align-items:flex-end;
	/* `100vh`, no `clamp(20rem,52vh,34rem)`. El original declara
	   `.qodef-blog--info-on-image #qodef-media{height:100vh}` con dos escalones
	   (500px ≤1024, 571px ≤680). Nuestro clamp daba 482 px a 1920 contra los
	   927 de allá: la mitad de alto, y por eso la foto no se leía como la
	   pantalla completa que el cliente esperaba ver. */
	min-height:100vh;
	margin-bottom:var(--salto);
	background-size:cover; background-position:center; background-color:var(--tinta);
	/* A SANGRE sin trucos. Acá había `width:100vw` con márgenes negativos para
	   sacar la portada de `main.reticula`, que la encerraba en el ancho de
	   lectura. Funcionaba, pero `100vw` cuenta la barra de desplazamiento y
	   `100%` no: la portada quedaba 15 px más ancha que la ventana y corrida 7
	   px a la izquierda, y con el título pegado al borde eso se medía (x=80 en
	   vez de los 87 del original).
	   Desde el 2026-09-02 la portada ya no vive dentro de `main`: se emite
	   antes, como hermana, que es donde el original tiene la suya
	   (`#qodef-media` es hermano de `#qodef-page-inner`). Un bloque normal a
	   ancho completo, sin `vw` y sin barra que descontar. Ver `single.php`. */
}
/* Acá vivía el remiendo del remiendo: un `@supports (width:100dvw)` que
   repetía el mismo desbordamiento con `dvw` «para descontar la barra». No la
   descuenta —`100dvw` también la incluye—, y medido a 2560 px seguía dejando
   la portada en x=-10. Se fue con el `100vw` que lo motivaba: la portada ya no
   tiene que salirse de ningún contenedor, porque ya no está dentro de uno.

   `overflow-x: clip` se queda igual, pero por otra razón: es la red que atrapa
   cualquier bloque ancho del cuerpo de un artículo (una tabla, un `<pre>`, una
   imagen sin escalar) sin crear un contenedor de desplazamiento, que es lo que
   lo distingue de `hidden` —con `hidden`, una cabecera pegajosa deja de
   pegarse—. */
body{ overflow-x:clip; }
/* EL VELO SE FUE, y conviene que quede escrito por que estuvo.
 *
 * Era un degradado a negro sobre la portada --.72 abajo, .34 al 42%, cero al
 * 78%-- puesto porque el titulo es blanco y las portadas no: en una foto clara
 * el texto desaparece. El razonamiento era correcto y la premisa no: **el
 * original no tiene velo**. Medido el 2026-09-02 sobre `#qodef-media` de
 * `/ensayo-error-_-proyecto-temporal/`: ninguna capa con gradiente, ningun
 * pseudo-elemento, ningun tinte. La foto va cruda y el titulo blanco queda con
 * el contraste que la foto le de --que en esa entrada, de cielo gris claro, es
 * poco--.
 *
 * El cliente lo leyo como «la imagen principal es diferente», y tenia razon en
 * el sintoma aunque la causa no fuera la que parecia: el archivo es el mismo
 * --PNG integro de 2048x1353, comprobado byte a byte-- y lo que cambiaba era
 * nuestro velo encima.
 *
 * Si alguna portada clara deja el titulo ilegible, el remedio que NO altera la
 * foto es una sombra en el propio texto. No se pone hoy porque el original no
 * la tiene y lo que se pidio es que se vea igual. */
/* EL TEXTO DEL HERO NO VA EN NINGUNA RETÍCULA.
   Antes este elemento llevaba también la clase `reticula` y quedaba a x=403 a
   1920 px. El original no lo mete en la columna: lo pega al borde izquierdo
   con un margen literal de 87 px --`#qodef-media .qodef-e-content{position:
   absolute;bottom:0;margin-left:87px}`, con 35px ≤1024 y 37px ≤680--, y le da
   `max-width:80%` contra la VENTANA. El «x=87» que se midió es ese número,
   escrito tal cual en el CSS del original. */
.portada__texto{
	position:relative; z-index:1; padding-block:2.2rem; color:#fff;
	margin-left:87px; max-width:80%; margin-bottom:4rem;
}
.portada__texto h1{
	/* 77px con los escalones del original (70 ≤1440, 60 ≤1024, 39 ≤680) en vez
	   de un `clamp()`: el original salta, no interpola.
	   `letter-spacing:0` --NO `-.02em`--. El tema hereda -.02em del `body` pero
	   `henrik-core` lo resetea a 0 justamente para este título. A 77px, -.02em
	   son -1.54px por letra: en «MURMULLOS DE CEMENTO» eso apretaba el titular
	   32 px de más. */
	font-size:39px; line-height:1.104; font-weight:500;
	letter-spacing:0; margin:.15em 0 0; color:#fff;
}
@media (max-width:1440px){ .portada__texto h1{ font-size:35px; } }
@media (max-width:1024px){
	.portada{ min-height:500px; }
	.portada__texto{ margin-left:35px; }
	.portada__texto h1{ font-size:30px; }
}
@media (max-width:680px){
	.portada{ min-height:571px; }
	.portada__texto{ margin-left:37px; }
	.portada__texto h1{ font-size:20px; }
}
/* La línea de meta sobre la foto: se declara la INTENCIÓN del contexto y el
   componente la lee. Ver el bloque de propiedades de `.ficha__meta`: acá había
   `.portada__texto .ficha__meta span{color:#fff}`, y como la barra «/» TAMBIÉN
   es un `<span>`, esa regla se llevaba por delante el separador amarillo junto
   con la autoría, que era lo que se quería blanquear. Un selector no puede
   distinguir dos hijos que son la misma etiqueta; una propiedad heredada sí. */
.portada__texto{
	--meta-color: #fff;
	--pastilla-tinta: var(--acento);
	--pastilla-borde: var(--acento);
}
.portada__texto .pastilla:hover{ background:var(--acento); color:var(--tinta); border-color:var(--acento); }
/* Con portada, el cuerpo no repite la separación que ya puso la cabecera. */
.entrada--conportada > .prosa:first-child{ margin-top:0; }

/* ---- el extracto de las fichas ---- */
/* 18/24, que es lo que el `wp-custom-css` del original le fija al extracto en
   las listas (el tema por omisión lo pone en 22/30). Acá iba a 12px, la mitad
   larga de lo que corresponde, y el extracto es buena parte de lo que se lee
   en una lista. */
/* NEGRO, no gris. Medido en el original el 2026-09-07 sobre
   `/bitacoras/` a 390: `.qodef-e-excerpt` computa `rgb(0,0,0)`. El
   `--tenue` que había acá es el gris de la META --fecha y autor--, que sí
   es gris allá; se le aplicó también al extracto por vecindad, y en una
   lista donde el extracto es la mitad del texto la diferencia se ve. */
.ficha__extracto{
	font-size:18px; line-height:24px; color:var(--tinta);
	margin:.5em 0 0; max-width:46ch;
}

/* ---- franja-escuchar ---- */
.franja-escuchar { width: 100vw; height: 220px; margin-inline: calc(50% - 50vw); margin-block: var(--salto); overflow: hidden; }
.franja-escuchar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ---- compartir ---- */
/* SIN REGLA ARRIBA, y sin el titulo de la vecina en el bloque de abajo: son el
   punto 40 del cliente --«se agregaron lineas horizontales divisorias y cambio
   el espaciado, elementos que no corresponden al diseno original»--. Medidas
   antes de sacarlas: 1px rgb(216,216,216) sobre `.compartir` y sobre
   `.vecinas`, o sea DOS reglas en el pie de cada entrada.
   El espaciado que el cliente nombra en el mismo punto NO se toca: sale de
   `--salto` y `--aire`, que son clamp() con vw, y es la causa B --el original
   salta por escalones y no interpola--. Cambiarlo pide los valores del
   original, no una estimacion. */
.compartir{ display:flex; align-items:center; gap:.75rem; margin-top:2.4em;
            padding-top:1.2em; }
/* El rotulo, con los numeros del original: 11px / 500 / .1em / 11px de linea,
   NEGRO y en versales. Antes decia 12px, `.08em` y `var(--tenue)`: los tres
   distintos, y el gris era el de la meta prestado a otro rol.
   El original le pone ademas `margin-top:9px` para bajarlo a la altura del
   icono; aca no hace falta porque `.compartir` centra con `align-items`. */
.compartir__rotulo{ font-size:var(--t-micro); font-weight:500; line-height:11px;
                    letter-spacing:.1em; text-transform:uppercase;
                    color:var(--tinta); margin-right:.2rem; }

/* El opener y su lista. `dropdown_behavior: right` en el original, o sea que
   los iconos salen AL COSTADO del boton y no debajo: por eso la lista es flex
   en fila y no un panel. Sin JavaScript el boton no se dibuja --nace `hidden`--
   y la lista se ve entera, que es la degradacion util. */
.compartir__opener{ width:30px; height:30px; display:inline-flex; align-items:center;
                    justify-content:center; border:1px solid var(--linea); border-radius:50%;
                    color:var(--tinta); background:none; padding:0; cursor:pointer;
                    transition:background-color .15s ease, border-color .15s ease; }
.compartir__opener:hover, .compartir__opener:focus-visible{ background:var(--acento); border-color:var(--acento); }
.compartir__lista{ display:flex; align-items:center; gap:.75rem; }
/* HACE FALTA, y es la cuarta vez que este tema tropieza con lo mismo. El
   navegador oculta `[hidden]` con una regla de user-agent, `display:none`, y
   la linea de arriba --regla de autor-- le gana. Sin esto el JS ponia
   `lista.hidden = true`, `aria-expanded` cambiaba a `false`... y los cuatro
   iconos seguian a la vista: el atributo se escribia y no tenia efecto.
   Medido en el navegador antes y despues, que es la unica forma de verlo. */
.compartir__lista[hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){ .compartir__opener{ transition:none; } }
.compartir a{ width:30px; height:30px; display:inline-flex; align-items:center;
              justify-content:center; border:1px solid var(--linea); border-radius:50%;
              color:var(--tinta); transition:background-color .15s ease, border-color .15s ease; }
.compartir a:hover, .compartir a:focus-visible{ background:var(--acento); border-color:var(--acento); }
@media (prefers-reduced-motion: reduce){ .compartir a{ transition:none; } }

/* ---- anterior / siguiente ---- */
.vecinas{ display:grid; grid-template-columns:1fr 1fr; gap:var(--aire);
          margin-top:var(--salto); padding-top:1.4em; }
.vecinas a{ display:flex; flex-direction:column; gap:.3em; text-decoration:none; }
.vecinas__sig{ text-align:right; }
.vecinas__rotulo{ font-size:var(--t-meta); text-transform:uppercase;
                  letter-spacing:.08em; color:var(--tenue); }
.vecinas__titulo{ font-size:var(--t-seccion); font-weight:500; line-height:1.25; }
.vecinas a:hover .vecinas__titulo,
.vecinas a:focus-visible .vecinas__titulo{ box-shadow:inset 0 -.5em 0 var(--acento); }

/* ---- te puede interesar ---- */
.tambien{ margin-top:var(--salto); padding-top:1.4em; border-top:1px solid var(--linea); }
.tambien__rotulo{ font-size:var(--t-seccion); font-weight:500; text-transform:uppercase;
                  letter-spacing:.02em; margin:0 0 1.2em; }

@media (max-width: 52rem){
	.vecinas{ grid-template-columns:1fr; }
	.vecinas__sig{ text-align:left; }
}

/* ---- la cantidad, con − y + ----------------------------------------------
 *
 * El bloque del carrito ya trae este control; la ficha de producto emitía un
 * `<input type=number>` pelado, y era el único sitio del sitio donde la
 * cantidad se pedía distinto. Las flechitas nativas miden 8 px en escritorio
 * y en móvil no existen: para pedir dos ejemplares había que abrir el teclado.
 *
 * Los botones los construye `ediciones.js`. Sin él queda el `<input>` de
 * siempre, con su borde, y todo esto no aplica — por eso los estilos cuelgan
 * de `.quantity--pasos`, que sólo existe si el guion corrió. */
.quantity--pasos {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--tinta);
	/* El borde lo pone el contenedor, no cada pieza: si no, entre el botón y
	   el campo quedan dos líneas pegadas y se ve el doble de grueso. */
}
.woocommerce .quantity--pasos input,
.quantity--pasos input.qty {
	border: 0;
	width: 3.2em;
	text-align: center;
	padding: .5em .2em;
	/* Fuera las flechitas nativas: ya hay dos botones que hacen lo mismo y
	   más grande. */
	appearance: textfield;
	-moz-appearance: textfield;
}
.quantity--pasos input.qty::-webkit-outer-spin-button,
.quantity--pasos input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}
.qty__paso {
	font: inherit;
	font-size: 1.05em;
	line-height: 1;
	/* 2.4em de lado: por encima del mínimo de 44 px de blanco táctil en las
	   medidas de este tema, que es lo que hace que sirva en un teléfono. */
	min-width: 2.4em;
	background: transparent;
	color: var(--tinta);
	border: 0;
	cursor: pointer;
	padding: 0 .5em;
	transition: background-color .15s ease;
}
.qty__paso:hover:not(:disabled),
.qty__paso:focus-visible { background: var(--acento); }
.qty__paso:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.qty__paso:disabled { opacity: .3; cursor: default; }
@media (prefers-reduced-motion: reduce) { .qty__paso { transition: none; } }

/* Portada de «Topografías del silencio» (postid-21140): la imagen tiene más
   zoom que el original. background-position top muestra la parte superior
   reduciendo el recorte vertical. Ajustar si el cliente pide afinar. */
.postid-21140 .portada { background-position: center top; }