/* ═══════════════════════════════════════════════════════════════════
   SISTEMA.CSS · Refugio en la Palabra · v8-r1
   Fuente única del sistema (SISTEMA.md es el contrato).
   Registro único: CÓDICE TOTAL (DA-1 ratificada) — sin vidrio, sin
   radios de superficie, sin sombras oscuras, en TODO el sitio.
   NO se edita desde Elementor. Nivel 2 (clases globales del editor)
   consume estas variables, nunca las duplica.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   00a · FUENTES AUTOALOJADAS (§4.4 · ratificación del encargante)
   Cinco archivos variables woff2 (subset latino), servidos por el tema.
   Sin conexión externa en la ruta crítica; coherente con «La casa».
   ══════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/cormorant-garamond.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/cormorant-garamond-italic.woff2') format('woff2');
  font-weight:400 600;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter.woff2') format('woff2');
  font-weight:400 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('fonts/jost.woff2') format('woff2');
  font-weight:400 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('fonts/montserrat.woff2') format('woff2');
  font-weight:500 600;font-style:normal;font-display:swap;
}

/* ══════════════════════════════════════════════════════════════════
   00 · TOKENS
   Dos capas (v8 L71–76): primitivas de marca (no las consume ningún
   componente) y roles semánticos (lo que consume todo el CSS).
   La tabla de SISTEMA.md §1 es final: lo que no está aquí no existe.
   ══════════════════════════════════════════════════════════════════ */
:root{

  /* ── Capa 1 · Primitivas de marca (§1.1) ───────────────────────── */
  --sacred-white:#FFFFFB;      /* SOLO logotipo (USO.md L160). No se consume en ninguna regla. */

  /* ── Capa 2 · Superficies (§1.2) ───────────────────────────────── */
  --surface-base:#0A0C10;
  --surface-raised:#0D1017;              /* en la home, SOLO la sección sellada — ley §3.2 */
  --surface-card:#11141C;                /* campos de formulario · toast · dash-side */
  --surface-hover:#171B25;               /* hover de filas interactivas */
  --surface-header:rgba(10,12,16,.97);   /* cabecera en estado scrolled */
  --surface-veil:rgba(10,12,16,.985);    /* menú móvil; unifica el .975 del v8 L429 (§8.9) */

  /* ── Texto (§1.3) ──────────────────────────────────────────────── */
  --text-primary:#F0EAD8;
  --text-secondary:#C8BFA6;
  --text-soft:rgba(200,191,166,.70);        /* atenuado legible; consolida α .65/.7/.72 */
  /* La escalera de cremas apagadas se rehízo entera en D-F6-2: el suelo de
     4.5:1 sobre --surface-base está en α ≈.615, así que por debajo no hay
     tono legible posible y los cuatro peldaños viven ahora entre .70 y .62.
     El orden semántico (soft > muted > dim > faint) se conserva; lo que ya
     no cabe es la distancia. Cualquier «más apagado» futuro se resuelve con
     cuerpo, peso o tracking, nunca bajando el alfa. */
  --text-muted:rgba(200,191,166,.66);       /* el alfa más usado; columna «Deja de…»; .60→.66 = 5.05:1 (rendía 4.39:1) */
  --text-dim:rgba(200,191,166,.64);         /* prosa apagada; .52→.62 (pasada 7) →.64 = 4.84:1, bajo el muted */
  --text-faint:rgba(200,191,166,.62);       /* reservado a UI, nunca a prosa; α .36→.62 = 4.63:1, el suelo AA (D-F6-1: sostenía minutajes, duraciones y el crédito obligatorio de música) */
  --text-placeholder:rgba(200,191,166,.62); /* placeholder de inputs; .4→.62 = 4.6:1 AA (pasada 7, §9) */
  --text-on-accent:#0A0C10;

  /* ── Acento (§1.4 — accent-alt-hi y accent-alt-text RETIRADOS, DA-5) */
  --accent:#CB9A31;
  --accent-hi:#FFC13B;
  --accent-alt:#7A1E2E;   /* asciende de residuo a sistema ornamental: ¶, «·», hover, error */

  /* ── Bordes y filetes · la escala pergamino (§1.5) ─────────────── */
  --border-hairline:rgba(200,191,166,.14);      /* filete base: filas, menú, barra legal */
  --border-grid:rgba(200,191,166,.16);          /* retícula luminosa 1px del bento y tabla Schola */
  --border-hairline-hi:rgba(200,191,166,.2);    /* filete exterior: marquesina, cifras, tabula */
  --border-frame:rgba(200,191,166,.3);          /* marcos de lámina, filetes 40×1 de marginalia */
  --border-hairline-max:rgba(200,191,166,.35);  /* grado máximo: dotted en .dotline, solid en mini-form */
  --border-input:rgba(200,191,166,.45);         /* borde inferior del input en reposo */
  --border-ghost:rgba(240,234,216,.5);          /* borde del botón fantasma del hero */
  --frame-cream-outer:rgba(240,234,216,.28);    /* doble marco del hero, línea exterior */
  --frame-cream-inner:rgba(240,234,216,.14);    /* doble marco del hero, línea interior */
  --border-gold-frame:rgba(203,154,49,.4);      /* marco sup/inf de la sección sellada */
  --border-gold-sealed:rgba(203,154,49,.5);     /* grado «sellado»: filete Schola + enlace de rito */
  --wash-velvet:rgba(122,30,46,.10);            /* velo de interacción: hover de puertas (privativo) */
  --wash-gold:rgba(203,154,49,.06);             /* lavado oro base; consolida los alfas .05/.06 del v8 (DA-1 ratificada: códice) */
  --wash-gold-strong:rgba(203,154,49,.1);       /* lavado oro subido; consolida el .1 de interiores (DA-1 ratificada: códice) */
  --wash-velvet-deep:rgba(122,30,46,.18);       /* lavado velvet denso de interiores (DA-1 ratificada: códice) */
  --border-accent:rgba(203,154,49,.18);         /* vigente en interiores/estados */
  --border-strong:rgba(203,154,49,.36);         /* vigente en interiores */

  /* ── Tipografía · familias (§1.6) ──────────────────────────────
     Pesos del contrato: Cormorant 400/500/600 (+itál.) — el 300 muere (DA-3).
     Montserrat 600/500 = voz de los botones (DA-2). Inter 400 (+500 strong).
     Jost 400/500. Carga definitiva en §4.4 del contrato.               */
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-heading:'Montserrat', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-label:'Jost', system-ui, sans-serif;

  /* ── Escala fluida (§1.7 — la portada, lienzo 1440, fija los máximos) */
  --size-hero:clamp(2.85rem, 11vw, 10rem);            /* máx 160px, «la Verdad» */
  --size-hero-open:clamp(1.9rem, 3.75vw, 3.375rem);   /* 1ª línea de la escala rota (54px) */
  --size-hero-close:clamp(2.2rem, 5.7vw, 5.125rem);   /* 3ª línea (82px) */
  /* FASE 21g · sube de 4.4rem (70,4px) a 6.25rem (100px). El diagnóstico
     estaba en los dos tokens de al lado: --size-h1 daba 70,4 y --size-h2
     da 66, o sea que el título de una página y el de una de sus secciones
     se llevaban 4,4 px — razón 1,07 —. Sin jerarquía entre esos dos, una
     interior se lee como varias páginas seguidas y ninguna manda.
     El defecto era que --size-h1 estaba INFRADIMENSIONADO, no que las
     interiores usaran mal los tokens: las diez usan exactamente uno cada
     una, y siempre el que les toca.
     La portada NO se toca y no hace falta excluirla: medido, usa CERO
     `.s-h1` —su focal es la escala rota del hero, 158px— así que este
     token es privativo de las interiores por construcción.
     Con 100px la razón h1/h2 pasa de 1,07 a 1,52 y el rango de las
     interiores de 7× a 10×. No se busca el 15,8× de la portada: ella
     tiene un hero de 160 que las interiores no tienen ni deben tener. */
  --size-h1:clamp(2.6rem, 7vw, 6.25rem);              /* máx 100px · cabeceras de interiores */
  --size-h2:clamp(1.85rem, 4.6vw, 4.125rem);          /* máx 66px */
  --size-h3:clamp(1.3rem, 2vw, 1.75rem);              /* = numerales Schola (28px) */
  --size-h4:clamp(1.4rem, 2.5vw, 2.25rem);            /* nombres del díptico (36px) */
  --size-figure:clamp(2.1rem, 5.2vw, 4.625rem);       /* cifras del contador (74px) */
  --size-pilcrow:clamp(3rem, 5.9vw, 5.25rem);         /* calderón de la marginalia (84px) */
  --size-num:clamp(1.5rem, 2.25vw, 2rem);             /* números de puerta, flechas (32px) */
  --size-lead:clamp(1rem, 1.3vw, 1.094rem);           /* máx 17.5px — rebaja de portada */
  --size-body:1rem;
  --size-small:.875rem;
  --size-label:.69rem;                                /* etiquetas Jost de 11px */
  /* Zona muerta 17.5–20px: ningún texto vive ahí (§1.7). */

  /* ── Tracking (§1.8 — el display serif va a 0, nunca negativo) ── */
  --track-nav:.12em;     /* excepción funcional de la navegación */
  --track-btn:.16em;     /* botones Montserrat; consolida .16/.19/.2/.22 */
  --track-label:.25em;   /* kerning de marca; absorbe .24/.26 */
  --track-wide:.32em;    /* etiquetas «grabadas»; absorbe .3–.36 */
  --track-rite:.44em;    /* piezas litúrgicas de una línea; ajuste óptico ±.06 permitido */

  /* ── Espaciado, retícula y radios (§1.9) ───────────────────────── */
  --gutter:clamp(1.4rem, 5vw, 4rem);                    /* cubre el lateral 60px */
  --width-max:1300px;                                   /* DA-9 */
  --width-narrow:920px;
  --width-read:68ch;
  --space-section:clamp(6rem, 13vh, 11.875rem);         /* máx 190px; asimetría §3.8 */
  --space-block:clamp(3.5rem, 7vh, 6rem);
  --space-vast:clamp(8rem, 18vh, 15rem);                /* aire mayor, privativo de Kerigmaté */
  --marg-col:clamp(8.75rem, 13.2vw, 11.875rem);         /* columna de marginalia (190px) */
  --marg-gap:clamp(2.5rem, 4.9vw, 4.375rem);            /* gap de marginalia (70px) */
  --radius-pill:100px;   /* solo .skip (§2.1); el radio de superficie es 0 en todo el sitio (DA-1 ratificada) */

  /* ── Movimiento (§1.10) ────────────────────────────────────────── */
  /* FASE 27b-a · estas fichas **ya existian**: tres duraciones y dos curvas.
     Lo que faltaba era el extremo largo de la escala —el cruce de las dos
     escenas con video dura 1,2 s y estaba escrito a mano tres veces— y **usar
     las que ya habia**: `--dur-mid` y `--dur-slow` se declararon y no se usaban
     **ni una sola vez**. Se anota, no se disimula.
     Y NO SE UNIFICA NADA MAS: quedan sueltos `.8s` (revelado del poster, dos
     veces), `.95s` (entrada del revelado) y `1.1s` (la linea del manifiesto).
     Meterlos en la escala cambiaria tres duraciones, y esta fase **no cambia
     ninguna**: pone cimientos. Quedan en BLOQUEOS con sus cifras. */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur-fast:.35s;
  --dur-mid:.55s;
  --dur-slow:.9s;
  --dur-xslow:1.2s;      /* el cruce de poster a video, en el hero y en el 404 */

  /* ── Z-index (§1.11 — huecos documentados: 1 de --z-canvas (DA-15) y
        80 de --z-rail; --z-veil (500) y --z-portico (1000) retirados
        con el SPA) ─────────────────────────────────────────────────── */
  --z-content:2;
  --z-drawer:190;
  --z-header:200;
  --z-toast:600;   /* interiores, data-toast */
  --z-skip:700;    /* el salto accesible por encima de toast */

  /* ── Luz (§1.12) ───────────────────────────────────────────────── */
  /* FASE 17 · reforzado en la banda del texto. El versículo «Entrad por la
     puerta estrecha» está DOS veces en la portada: en la cita del cierre y
     aquí, como sobretítulo. La cita del cierre está bien —medido el píxel real
     del glifo contra el fondo real: 16,55:1 de pico—; el que estaba al límite
     era este.
     Medido sobre CATORCE fotogramas repartidos por el bucle del vídeo, para no
     juzgar un fondo que se mueve por una sola instantánea: el fondo bajo el
     sobretítulo se mantiene en rgb(83,83,85) y el contraste del oro contra él
     va de 4,71 a 4,74:1. Pasa AA por veintiuna centésimas, con un cuerpo de
     12,5px y `.4em` de tracking: eso es exactamente «atenuado».
     Se añade una parada al 55% que profundiza la mitad baja —donde caen
     sobretítulo, H1, bajada y botones— sin tocar el 30% de arriba, que es
     donde se ve la puerta del vídeo y lo que da sentido al plano. */
  /* FASE 20 · PENUMBRA DEL HERO, derivada del material y no inventada.
     Medido sobre `frame.png`: el 37,5 % de sus píxeles son oscuros (L<60) y su
     media es rgb(52,19,27). Es la cortina granate del plano, no un color
     nuevo. Se declara como DERIVADO: no entra en la paleta cerrada del §1 ni
     se usa en ningún otro sitio; existe para que el fundido del póster arranque
     desde la penumbra de la propia escena y no desde una pantalla apagada. */
  --hero-penumbra:#34131b;
  --scrim-hero:linear-gradient(200deg, rgba(10,12,16,.30) 30%, rgba(10,12,16,.62) 55%, rgba(10,12,16,.86) 78%, #0A0C10 100%);  /* DA-12 · reforzado fase 17 */
  /* FASE 16 · reforzado bajo el texto. La cita cae entre el 60% y el 70% de
     la banda, y ahí el velo venía de su punto MÁS FLOJO (.30 al 45%) camino
     del .80 del final: alfa efectiva ~.44 y ~.53 justo debajo de las letras.
     Se añade una parada intermedia al 60% y se sube el final, de modo que la
     zona del texto pasa a ~.62 y ~.72 sin tocar la ventana de la puerta —el
     tramo alto, hasta el 38%—, que es lo que da sentido a la escena.
     Medido: el contraste ya pasaba AA (14,9:1 a 1920 y 9,1:1 a 1440), pero el
     ratio WCAG mide el píxel extremo y la legibilidad sobre un fondo CON
     TEXTURA depende del contraste local en el borde de la letra. El halo, que
     sería la otra palanca, no se puede usar: la portada tiene gastados sus
     tres text-shadow (§3.1, ley del halo). */
  --scrim-close:linear-gradient(180deg, rgba(10,12,16,.55), rgba(10,12,16,.30) 38%, rgba(10,12,16,.62) 60%, rgba(10,12,16,.88));
  --glow-gold:rgba(203,154,49,.07);          /* única luz ambiental */
  --halo-hero:0 0 90px rgba(255,193,59,.2);
  --halo-climax:0 0 80px rgba(255,193,59,.22);
  --halo-figure:0 0 60px rgba(255,193,59,.25);
}

/* ══════════════════════════════════════════════════════════════════
   01 · BASE
   ══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
/* FASE 17 · `scrollbar-gutter:stable` — y no es cosmético.
   Chromium sin cabeza usa barras SUPERPUESTAS, así que en el arnés
   `innerWidth == clientWidth` y la barra mide 0. En un Windows con barra
   clásica mide 17px, y entonces todo lo que se mida contra el viewport
   —`100vw`, `100svh`, el borde derecho de cualquier caja fijada— deja de
   coincidir con lo que se mide contra el documento. Ésa es la diferencia
   entre mi entorno y el del encargante, y es la que no podía reproducir.
   Reservando el hueco SIEMPRE, la geometría es la misma con barra y sin
   ella, y el marco del hero deja de depender de cuál de las dos tenga
   quien mire la página. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
[id]{scroll-margin-top:6rem}

/* `hidden` tiene que significar oculto (fase 21a). La regla del navegador
   es `[hidden]{display:none}` con especificidad de agente de usuario, y
   cualquier `display` de autor la bate: la base atómica de Elementor
   declara `display:flex` en todo `.e-flexbox-base`, así que una sección
   marcada `hidden` seguía viéndose y midiendo. Se le da la especificidad
   justa —(0,2,0), la misma que la base, y esta hoja imprime después— sin
   recurrir a `!important`.
   Importa más de lo que parece: `hidden` es la forma honesta de retirar
   algo de la vista sin borrarlo ni dejarlo a medias, y de eso depende que
   se pueda devolver con un atributo. */
.elementor [hidden]{display:none}

body{
  margin:0;
  background:var(--surface-base);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--size-body);
  font-weight:400;              /* el 300 del v8 muere (DA-3, §8.13) */
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{overflow:hidden}

img,svg,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ── EL AZUL Y EL MAGENTA DE HELLO, MUERTOS EN SU ORIGEN · fase 27b-c ────
   `reset.css` de hello-elementor pinta DOS estados con su propia paleta, y no
   los acota con ninguna consulta:

       a:active,a:hover{color:#336}                                  azul
       [type=button]:hover,[type=button]:focus,[type=submit]:hover,
       [type=submit]:focus,button:hover,button:focus
         {background-color:#c36;color:#fff}                          magenta

   HASTA HOY SE NEUTRALIZABAN ABAJO, con prefijo `html` para ganar por peso. Y
   eso ataba de manos: cualquier regla nuestra que se acotara tras una consulta
   de puntero **le devolvia el color de hello al telefono**, porque el de hello
   no esta acotado. Por eso la 27b-a dejo siete reglas fuera del esquema.

   SE MATAN AQUI, Y POR ORDEN, NO POR PESO. La clave estaba dos lineas arriba y
   se tardo tres fases en verla: `a{color:inherit}` y `button{background:none;
   color:inherit}` **ya son nuestros**, o sea que **el valor en reposo ya es el
   correcto**. Basta repetirlo para los estados con la MISMA especificidad que
   hello y despues que el, que es lo que pasa porque `sistema.css` se encola
   detras de `reset.css`.

   No cambia nada visible: todo lo que pinta un estado en este sitio tiene mas
   peso que (0,1,1). Lo que cambia es el SUELO: cuando una regla nuestra no
   aplica —en tactil, tras la consulta de puntero—, debajo ya no hay azul ni
   magenta, hay el color de reposo.
   ──────────────────────────────────────────────────────────────────────── */
a:hover,a:active{color:inherit}
[type=button]:hover,[type=button]:focus,
[type=submit]:hover,[type=submit]:focus,
button:hover,button:focus{background-color:transparent;color:inherit;text-decoration:none}
input,textarea{font:inherit;color:inherit}

/* Burdeos sobre crema — obligatorio, no estético (§3.9, §8.10):
   la versión v8 pintaba el texto con --sacred-white y el blanco
   es solo del logotipo. Portada L1363. */
::selection{background:var(--accent-alt);color:var(--text-primary)}

/* ── EL ANILLO DE FOCO, Y AQUI SE ACABA · fase 27b-a ────────────────────
   ESTA REGLA YA ESTABA Y NO GANABA, y la razon no era la que escribi primero.
   Culpe a las clases base de Elementor 4 y **eso explicaba 30 paradas de 69**.
   Las otras 39 —los enlaces del propio tema: `.btn`, `.tab`, los del pie—
   seguian en negro con la ficha `--accent-hi` resolviendo bien a `#FFC13B` en
   el propio elemento. Luego no faltaba oro: **lo pisaba alguien**.

   SE LE PREGUNTO AL MOTOR, no al fichero. `CSS.getMatchedStylesForNode` con el
   foco forzado devuelve la cascada entera, y ahi esta, en una hoja de tercero:

       reset.css?ver=3.5.1
       [tabindex]:not([tabindex="-1"]):focus-visible, a:focus-visible, button…
       { outline:2px solid #000; outline-offset:2px }

   `a:focus-visible` vale **(0,1,1)** y esta regla valia **(0,1,0)**. Pierde
   siempre, en cualquier orden, en cualquier pagina. **Negro sobre `#0A0C10` es
   1,05:1**: no es un anillo tenue, es un anillo que no existe.

   POR QUE `!important` Y NO MAS ESPECIFICIDAD: porque subirla es volver a
   enumerar —esta seria la lista numero cuatro— y porque el rival vive en una
   hoja que **no controlamos y que cambia al actualizar Elementor**. Una lista
   de selectores solo gana a los rivales que hoy conozco. Esto gana a todos,
   incluidos los que lleguen. El anillo de foco es de los poquisimos sitios
   donde `!important` es la respuesta correcta y no la perezosa.
   ──────────────────────────────────────────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--accent-hi)!important;
  outline-offset:3px!important;
  border-radius:2px;
}

/* Enlace de salto — único uso legítimo de --radius-pill en la home (§2.1) */
.skip{
  position:absolute;left:-9999px;top:1rem;z-index:var(--z-skip);
  background:var(--accent);color:var(--text-on-accent);
  padding:.85em 1.4em;border-radius:var(--radius-pill);
  font-family:var(--font-label);font-size:.7rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);
}
.skip:focus{left:1rem}

/* Scrollbar sobria — sin radio (registro códice), grados tokenizados */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--surface-base)}
::-webkit-scrollbar-thumb{background:var(--border-strong)}
@media (hover:hover) and (pointer:fine){::-webkit-scrollbar-thumb:hover{background:var(--accent)}}
::-webkit-scrollbar-thumb:active{background:var(--accent)}

/* El bloque global de prefers-reduced-motion esta en §5.8, linea 3495 — esta
   nota decia que «cierra el archivo» y **no era cierto**: quedaban 3.234 lineas
   detras. Corregido en la 27b-a, que ademas anade el que si lo cierra (6.715). */

/* ══════════════════════════════════════════════════════════════════
   02 · TIPOGRAFÍA
   Interlineado SIEMPRE multiplicador sin unidad (§4.2).
   Cormorant = todo titular; Montserrat = solo botones (DA-2).
   ══════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:0}
h1,h2{line-height:1.08}
h3,h4,h5,h6{line-height:1.2}
p{margin:0}

/* La itálica no colorea por defecto: el oro se asigna por clase
   (.mline.climax em — §4); deroga el em oro del v8 L196. */
em{font-style:italic}
strong{font-weight:500;color:var(--text-primary)}   /* Inter 500 en prosa (§1.6) */

/* Ley del display (§1.8): tracking 0 (máx .01em), nunca negativo;
   peso base 500 (600 solo en clímax). Interlineados por contexto:
   .96 hero · 1.08 h2 · 1 títulos de fila (§2.1 .display). */
.display{font-family:var(--font-display);font-weight:500;line-height:1.08;letter-spacing:0}
.s-h1{font-size:var(--size-h1)}
.s-h2{font-size:var(--size-h2);line-height:1.08}
.s-h3{font-size:var(--size-h3)}

/* H2 menor de Kerigmaté (§2.2) — máx 3.25rem = 52px de lienzo */
.s-h2.quiet{font-size:clamp(1.7rem, 3.6vw, 3.25rem);line-height:1.14}

.lead{font-size:var(--size-lead);color:var(--text-secondary);line-height:1.75;max-width:var(--width-read)}
.prose{color:var(--text-muted);line-height:1.85;max-width:var(--width-read)}
.prose>*+*{margin-top:1.15em}
.small{font-size:var(--size-small);color:var(--text-muted);line-height:1.75}

/* Tramo de texto largo — los cuatro bloques de ¿Quiénes somos? (fase 21n).
   El gancho existía en el marcado DESDE LA FASE 8 y nunca tuvo regla: su
   comentario prometía «filete superior más aire» y el filete no existía, así
   que ésta era la única serie larga del sitio sin la línea que el §3.3 usa
   en `.movement` y en `.pillars` («la sombra no existe, la línea sí»).
   Se escribe como espejo de `.pillars>*` —misma tinta, mismo aire de 1.6rem—
   y no de `.movement`, porque el aire ENTRE tramos ya lo pone `.stack-lg`
   (48–80px) y duplicarlo con `padding-block` los separaría de más.
   El primero no lleva filete, como `.movement:first-child`: una línea encima
   del primer tramo no separaría dos tramos, separaría la sección de su
   cabecera, que es otra cosa y ya tiene su aire. */
.tract{border-top:1px solid var(--border-hairline);padding-top:1.6rem}
.tract:first-child{border-top:0;padding-top:0}

/* Etiqueta Jost — kerning de marca. La rayita ::before queda para
   interiores; en la home la forma por defecto es .bare (§2.1):
   el filete de marginalia es elemento propio (.marg-rule). */
.label{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);color:var(--accent);
  display:inline-flex;align-items:center;gap:.75em;
}
.label::before{content:'';width:26px;height:1px;background:currentColor;opacity:.55;flex:none}
.label.bare::before{display:none}
/* Kicker de sección cálida (Kerigmaté, portada L1885): Jost 500,
   --track-wide (.36 dentro del token), oro --accent heredado de .label. */
.label.rite{font-weight:500;letter-spacing:var(--track-wide)}

/* Numeración de capítulo — vigente SOLO en .page-head de interiores (§2.1);
   en secciones su rol editorial lo asume la marginalia. */
.chapter{
  font-family:var(--font-display);font-size:.95rem;font-style:italic;
  color:var(--text-faint);letter-spacing:.04em;
}
.chapter b{font-style:normal;font-weight:400;color:var(--accent)}

.quote{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  line-height:1.32;letter-spacing:0;color:var(--text-primary);
}
.quote-src{
  font-family:var(--font-label);font-size:.7rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);   /* §8.6: el .26em muere */
  color:var(--text-faint);
}

/* Calderón ornamental suelto — menú, marquesina, separadores (§2.2) */
.pilcrow{color:var(--accent-alt);font-style:normal}

/* ══════════════════════════════════════════════════════════════════
   03 · RETÍCULA Y RITMO
   ══════════════════════════════════════════════════════════════════ */
.wrap{width:100%;max-width:var(--width-max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:var(--width-narrow)}   /* §8.16: el 920px literal muere */

/* §3.8 · Ritmo del aire: el aire posterior siempre ≥ anterior
   (170 sup / 190 inf en lienzo → factor .895 sobre el token). */
.section{position:relative;padding-block:calc(var(--space-section)*.895) var(--space-section)}
.section.tight{padding-block:var(--space-block)}
/* Aire mayor del sitio, privativo de Kerigmaté (230/240 → factor .958) */
.section.vast{padding-block:calc(var(--space-vast)*.958) var(--space-vast)}
/* Excepción codificada §3.8: cuando una imagen a sangre cierra la
   sección, el padding inferior es 0 y el aire lo pone la máscara;
   arriba restituye el aire pleno (190px: portada L1597 «190px 60px 0»). */
.section.bleed-end{padding-block:var(--space-section) 0}

/* Ley §3.2 · solo lo sellado se eleva: --surface-raised enmarcada en oro.
   El filete horizontal de la marginalia sellada (.marg-rule.gold) usa
   --border-gold-sealed (portada L1846). */
.section.sealed{background:var(--surface-raised);border-block:1px solid var(--border-gold-frame)}

.center{text-align:center}
.center .lead,.center .prose{margin-inline:auto}
.center .label::before{display:none}

.stack-sm>*+*{margin-top:1.2rem}
.stack-lg>*+*{margin-top:clamp(3rem,6vw,5rem)}

/* Encabezado de sección — vigente SOLO en páginas interiores (§2.1);
   en secciones de la home manda .marginalia. */
.sec-head{display:grid;gap:1.1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head .lead{margin-top:.4rem}
.sec-head.center{justify-items:center}
/* ── Cabeza de panel · fase 21a, bloque 4 ─────────────────────────────
   El diagnóstico midió que La Schola «no tiene cabeza»: H1 de página a
   70,4 px y H2 de sección a 66 —un 6 % — así que se leía como nueve
   páginas seguidas y ninguna mandaba. La portada, en cambio, pone su
   focal a 2,4× su H2.
   No se toca la escala global —afecta a todas las interiores y esta fase
   es de una sola página—: lo que se hace es distinguir los dos registros
   que la arquitectura híbrida ya pide. Las secciones del RECORRIDO
   conservan su H2; las del CATÁLOGO llevan `.minor` y bajan a cabeza de
   panel, que es lo que son. La escala global queda anotada como hallazgo
   de sistema para la fase de tipografía. */
.sec-head.minor h2{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.15}
.sec-head.minor{gap:.9rem;margin-bottom:clamp(2rem,4vw,3rem)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
/* Dos columnas desnudas con aire editorial: retirado el vidrio, el gap corto
   no basta para separar dos bloques de texto (mismo razonamiento que .pillars). */
.grid-2.proposal{gap:var(--marg-gap);align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
/* Tríada desnuda: cuando DA-1 retiró el vidrio, las tres tarjetas del v8
   perdieron la caja que las separaba, y 21px de gap no bastan para leer tres
   columnas de texto seguidas. La separación pasa a filete —el mecanismo del
   sistema (§3.3: la sombra no existe, la línea sí)— con el aire editorial de
   la marginalia. Hereda el corte a una columna de .grid-3 (§6). */
.pillars{gap:var(--marg-gap)}
.pillars>*{border-top:1px solid var(--border-hairline);padding-top:1.6rem}

/* La marginalia — la firma editorial (§2.2). Sustituye a .sec-head en
   todas las secciones de la home. La columna izquierda es sticky. */
.marginalia{display:grid;grid-template-columns:var(--marg-col) 1fr;gap:var(--marg-gap)}
.marginalia>:first-child{position:sticky;top:7.5rem;align-self:start}   /* 120px de lienzo §10.1 */

.marg-mark{
  font-family:var(--font-display);font-size:var(--size-pilcrow);font-weight:500;
  line-height:.95;color:var(--accent-alt);
}
.marg-mark.gold{color:var(--accent)}   /* sección sellada (portada L1844) */
.marg-label{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  letter-spacing:var(--track-wide);line-height:2;   /* .36 vive dentro del token (§1.8) */
  color:var(--accent);text-transform:uppercase;margin-top:1.25rem;   /* 20px (portada L1600) */
}
.marg-rule{width:40px;height:1px;border:0;margin:1.25rem 0 0;background:var(--border-frame)}   /* 20px (portada L1601) */
/* Marginalia sellada: el filete pasa a oro (portada L1846) — homólogo
   dorado de .marg-mark.gold (§3.2). */
.marg-rule.gold{background:var(--border-gold-sealed)}

/* Doble filete editorial (Cifras, Pie — §2.2). Sustituye a .divider.
   Uso: un único hijo envolvente lleva el filete interior a 4px. */
.rule-double{border-block:1px solid var(--border-hairline-hi);padding-block:4px}
.rule-double>*{border-block:1px solid var(--border-hairline)}   /* .1 de portada consolidado en .14 */
/* Variante solo-superior (el pie, portada L1926–1927): el doble filete
   vive solo arriba — abajo ni bordes ni padding. */
.rule-double.top{border-block-end:0;padding-block-end:0}
.rule-double.top>*{border-block-end:0}

/* Doble marco del hero (§2.2 · portada L1512–1514) */
.frame-double{position:relative}
.frame-double::before,.frame-double::after{content:'';position:absolute;pointer-events:none;z-index:2}
/* (fase 12) El marco arrancaba por debajo de la cabecera fija (74px) y no detrás de
   ella: con el inset uniforme de 8/14px, sus dos filetes cruzaban el
   logotipo y la caja oro de La Schola, que flotan encima. Abajo y a los
   lados conserva su medida, así que se sigue leyendo como marco. */
/* FASE 15 · vuelve al `inset` uniforme de la portada aprobada (8px y 14px,
   los cuatro lados). Arrancarlo bajo la cabecera dejaba FUERA el logotipo, la
   navegación y la caja de La Schola —medido: 66, 67 y 69px por encima de la
   línea— y el marco encuadraba media composición. Encuadra la entera.
   La cabecera cede a cambio: donde el marco existe, sus piezas se centran en
   la banda que queda BAJO la línea interior (de 15px al suelo de los 74),
   no en los 74 completos. Sin ese acomodo la línea de 14px cruzaría por un
   píxel la caja de La Schola, que empieza en 13. El alto de 74px no se toca:
   es medida de lienzo aprobada. */
/* FASE 16 · dos correcciones más sobre el mismo marco.

   (a) CERRABA FUERA DE LA PANTALLA. El hero es `height:100vh` con
   `min-height:800px` —así lo fija el diseño, portada.html L1491—, de modo que
   en una ventana más baja de 800px el hero mide 800 y el filete de abajo cae
   por debajo del pliegue: medido, 72px fuera a 1440×720 y 24px a 1024×768. Un
   marco que hay que buscar desplazando no encuadra nada. El borde inferior se
   ata ahora al VIEWPORT y no a la caja del hero: cuando el hero cabe, el
   marco mantiene sus 8px; cuando el hero es más alto que la ventana, el filete
   sube lo justo para cerrar dentro. `svh` y no `vh` porque en un móvil `vh`
   cuenta la barra del navegador y volvería a salirse.

   (b) LA BARRA DE CABECERA QUEDABA FUERA. Medido: `.header` se salía 8px por
   arriba, por la izquierda y por la derecha, porque va de borde a borde
   mientras el marco está a 8. Sus piezas —logotipo, navegación, caja de La
   Schola— sí caían dentro, pero la caja que las contiene no, y por eso seguía
   leyéndose como solape.
   La solución de la fase 15 —bajar el contenido de la cabecera con un
   acolchado— queda RETIRADA: el encargante la rechazó, y con razón, porque
   apartaba la cabecera en vez de encuadrarla. Lo que entra dentro del marco es
   la barra entera, insertada a 15px: un píxel por dentro del filete interior.
   Su contenido vuelve a centrarse en su propia barra, sin acolchados postizos.
   Al desplazar, la cabecera recupera el borde a borde y gana su fondo: es el
   mismo gesto de siempre, ahora legible como que la barra ATRACA.

   NOTA DE DISEÑO, para que conste: en `portada.html` el marco vive DENTRO del
   `<section>` del hero (L1494-1495) y la cabecera va aparte, encima, así que
   el diseño aprobado NO encuadra la cabecera. Encuadrarla es decisión expresa
   del encargante, repetida dos fases seguidas. */
/* FASE 17 · `dvh` en vez de `svh` para el suelo del marco. `svh` es la
   altura de viewport MÍNIMA —la que queda con toda la interfaz del navegador
   desplegada— así que en un escritorio, donde no hay interfaz que se retraiga,
   `svh` puede quedarse corta respecto de lo que de verdad se ve y empujar el
   filete de abajo fuera de cuadro. `dvh` es la altura real en cada momento,
   que es exactamente contra lo que hay que cerrar. */
/* FASE 18 · `width:auto;height:auto` — la causa de cinco iteraciones.
   Elementor declara en `frontend.min.css`:
     .e-con::before{ width:max(100% + …, 100%); height:max(100% + …, 100%) }
   Es su velo de fondo de contenedor. `.hero` es un `.e-con`, así que esa regla
   alcanzaba a MI `::before` y le imponía el ancho y el alto COMPLETOS del hero.
   Con `left:8px` y ancho 100%, la caja iba de x=8 a x=1919 en un hero de 1911:
   sus filetes derecho e inferior caían FUERA y `overflow:hidden` los recortaba.
   Por eso se veían arriba y a la izquierda y no a la derecha ni abajo. Medido:
   el exterior daba 1911px de ancho donde tocaban 1895; el interior, 1883,
   correcto, porque a `::after` no le llega esa regla.
   No era el `inset`, ni la altura del hero, ni la barra de desplazamiento: era
   una regla de tercero sobre un pseudoelemento que yo creía sólo mío. */
.frame-double::before{inset:8px;width:auto;height:auto;bottom:max(8px,calc(100% - 100dvh + 8px));border:1px solid var(--frame-cream-outer)}
.frame-double::after{inset:14px;width:auto;height:auto;bottom:max(14px,calc(100% - 100dvh + 14px));border:1px solid var(--frame-cream-inner)}
/* `width:auto` no es opcional: la base atómica impone `width:var(--width)`
   con `--width:100%`, así que con `left:15px` la barra medía el ancho ENTERO
   del viewport y se salía 23px por la derecha —medido—. Es la misma trampa
   que se comió el H1 del hero en la fase 5. */
body:has(.frame-double):not(.scrolled) .header.e-flexbox-base.e-atomic-element{inset:15px 15px auto 15px;width:auto}

/* ══════════════════════════════════════════════════════════════════
   04 · LUZ
   Penumbra por defecto; cuatro mecanismos y ninguno más (§3):
   velos, halos, máscaras, filetes-luz. La sombra no existe (§3.3).
   ══════════════════════════════════════════════════════════════════ */

/* EL PERGAMINO SE RETIRÓ EN LA FASE 26R, y no se vuelve a poner sin decidirlo.
   Era una capa fija global —`.grain`, soft-light a .07, textura de 600×600—
   sobre todo el sitio, más un segundo modo `.grain--screen` que no llegó a
   usarse en ninguna página.

   POR QUÉ SE FUE, y la razón es estética antes que de peso: sobre el fondo
   oscuro del códice no se leía como textura sino como SUCIEDAD DEL MONITOR.
   El efecto que se buscaba no salió, así que era coste sin beneficio.

   LO QUE COSTABA, medido en la 26R: la textura se descargaba en las siete
   páginas y pesaba 348 762 bytes servidos —2,39 MB de los 7,80 del sitio—,
   la sola pieza más cara que quedaba. Y la CDN la entregaba MÁS pesada que
   su JPEG en disco, que son 211 409.

   NO DEPENDÍA NADA DE ELLA: ninguna regla compensaba su opacidad, ningún
   color estaba calculado contra ella, y `--z-grain:150` no lo usaba nadie
   más. Por eso se pudo quitar entera en vez de a medias.

   Los ficheros `assets/pergamino-softlight.jpg` y `assets/pergamino-screen.png`
   se quedan donde están: se retiró el uso, no el material.

   (Ojo: «pergamino» nombra TAMBIÉN la escala de bordes §1.5,
   `rgba(200,191,166,α)`, que sigue viva y no tiene nada que ver con esto.) */

/* Luz ambiental — máximo una por página (§3.5) */
.glow{background:radial-gradient(1000px 640px at 70% 44%, var(--glow-gold), transparent 70%)}

/* Velo del cierre con imagen: la luz vive en el centro del cuadro (§3.4) */
.band-veil{position:absolute;inset:0;pointer-events:none;background:var(--scrim-close)}

/* Máscara de disolución vertical — SOLO válida a sangre completa 100vw
   (ley §3.6b); siempre sobre fondo Woodsmoke. El negro interno de la
   máscara es alfa, no color: el #000 de máscara aparece también en
   .bleed-x, .marquee y .tabs (§3.6).
   Stops parametrizables: 15/85 intervalo · 16/84 cierre. */
.bleed{
  display:block;width:100%;
  background:var(--surface-base);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 var(--bleed-in,15%), #000 var(--bleed-out,85%), transparent);
  mask-image:linear-gradient(180deg, transparent, #000 var(--bleed-in,15%), #000 var(--bleed-out,85%), transparent);
}
.bleed img{width:100%;display:block}

/* Doble máscara vertical 22/78 ∩ horizontal 14/86 — obligatoria en
   cuanto la escena tenga margen lateral (§3.6b). */
.bleed-x{
  display:block;width:100%;
  background:var(--surface-base);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-composite:intersect;
}
.bleed-x img{width:100%;display:block}
/* El fundido muerde el margen (banda door-sala): sobresangrado por
   calc() sobre --gutter, no el 102.1% del lienzo fijo (§10.1). */
.bleed-x.bite{width:calc(100% + var(--gutter));margin-left:calc(var(--gutter) / -2)}

/* ══════════════════════════════════════════════════════════════════
   05 · COMPONENTES DE LA HOME
   ══════════════════════════════════════════════════════════════════ */

/* ── Cabecera (§2.1 .header, redefinida) ─────────────────────────
   Alto 74px, grid 1fr auto 1fr; logo horizontal como <img> SVG a
   42px (USO.md §5). Estado scrolled: fondo --surface-header + doble
   filete-luz — SIN blur ni el filete crema del v8 (deroga v8 L381–385). */
.header{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-header);
  height:74px;                                    /* 74px de lienzo */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  padding:0 clamp(1.25rem, 3.05vw, 2.75rem);      /* máx 44px de lienzo (§10.1) */
  transition:background-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out),
              top var(--dur-mid) var(--ease-out), left var(--dur-mid) var(--ease-out), right var(--dur-mid) var(--ease-out);
}
body.scrolled .header{
  background:var(--surface-header);
  box-shadow:0 1px 0 var(--border-hairline-hi), 0 4px 0 -3px var(--border-hairline);  /* filete-luz doble (§3.3) */
}
/* Hook mínimo del logotipo real (los .brand* del v8 están retirados, §2.3) */
/* FASE 21zc · LOS DOS LOGOTIPOS CRECEN, Y LA CABECERA NO.
   Ninguno se leía a simple vista: a 42px de alto, la palabra «REFUGIO EN LA
   PALABRA» quedaba en unos 9px de altura de caja, por debajo de la nav que
   tiene al lado. Sube a 52 —el 70% de los 74px de la barra, que es el techo
   con el que sigue habiendo aire arriba y abajo— y la palabra pasa a ~11px.
   LA ALTURA DE LA BARRA NO SE TOCA: sigue en 74. Condición del encargante, y
   además es la que fija la posición de todo lo demás. */
.header .logo img{height:52px;width:auto}

.nav{display:flex;align-items:center;gap:.2rem;justify-content:center}
.nav a{
  position:relative;
  font-family:var(--font-label);font-size:.781rem;font-weight:400;   /* máx 12.5px de lienzo */
  text-transform:uppercase;letter-spacing:var(--track-nav);
  color:var(--text-primary);
  padding:.65rem .85rem;
  transition:color var(--dur-fast);
}
.nav a::after{
  content:'';position:absolute;left:.85rem;right:.85rem;bottom:.42rem;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-mid) var(--ease-out);
}
.nav a.on::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav a:hover::after{transform:scaleX(1)}}
.nav a:active::after{transform:scaleX(1)}
.nav a.on{color:var(--accent)}

/* CTA de cabecera: caja oro con el logotipo de La Schola dentro como
   <img> (USO.md §5). Sin halo al hover (§3.1).
   FASE 17 · LA PIEZA ERA LA EQUIVOCADA. La fase 16 puso aquí el SELLO, y el
   contrato pide el HORIZONTAL a 100px (§2.1 `.schola-key`, portada L1454-1479):
   el sello es cuadrado y rompía el formato de la barra. Puesto el horizontal
   en su variante de fondo claro —relleno `#0b0c0f`, id 223—, que es la que
   contrasta sobre el oro: **7,61:1 medido**, no estimado.
   El sello no se descarta: es la forma COMPACTA de ≤860, y se conmuta abajo. */
.schola-key{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);                       /* portada L1454; el padding 5/14 vive en el <a> (sección 11) */
  transition:background-color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){.schola-key:hover{background:var(--accent-hi)}}
.schola-key:active{background:var(--accent-hi)}
/* FASE 18 · caja más contenida, a petición del encargante. De 128×48 a
   108×40: el logotipo baja de 100 a 84px de ancho (31,9 de alto, proporción
   1200×455 intacta) y el acolchado del <a> de 5/14 a 4/12. La reducción es del
   16 % en ancho y del 17 % en alto, proporcional en las dos piezas, así que el
   aire alrededor del logotipo no cambia de carácter.
   El contraste no depende del tamaño —es el mismo relleno `#0b0c0f` sobre el
   mismo oro— pero se vuelve a medir sobre el botón renderizado, no se supone.
   La alineación vertical con la nav la sigue dando el `align-items:center` de
   la retícula de cabecera: al encoger la caja, se recentra sola. */
/* FASE 21zc · y el de La Schola con él, BALANCEADO POR PESO ÓPTICO Y NO POR
   PÍXELES. Sube de 84 a 112 de ancho (42,5 de alto, proporción 1200×455
   intacta) y su caja pasa a 136×50,5 — el 68% de la barra—. No se iguala su
   altura a la del otro: el de Refugio va crema sobre oscuro y éste va oscuro
   sobre oro, y una tinta oscura sobre campo claro pesa más a igualdad de
   tamaño. Con 52 y 42,5 las dos letras miden ~11 y ~9,4px, y con el empuje del
   oro los dos renglones se leen al mismo peso.
   Comprobado que no colisiona: a 1440 la caja empieza en 1251 y la nav acaba en
   1049. La forma compacta de ≤860 conmuta al sello y no la hereda. */
.schola-key img{width:112px;display:block}

/* Burger de tres rayas — dos de 22×2 crema y una corta de 14×2 oro
   (§2.1; deroga las 3×16×1 del v8). Es dirección de arte (§10.6). */
.burger{
  display:none;flex-direction:column;justify-content:center;align-items:flex-end;
  gap:5px;width:42px;height:42px;                   /* la raya corta oro cuelga a la derecha (portada L1470) */
}
.burger i{display:block;width:22px;height:2px;background:var(--text-primary);
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast)}
.burger i:last-child{width:14px;background:var(--accent)}
/* Estados de menu-open bajo html.js (§5.2): sin JS el drawer no existe
   pero la nav de texto sobrevive. */
html.js body.menu-open .burger i:first-child{transform:translateY(7px) rotate(45deg)}
html.js body.menu-open .burger i:nth-child(2){transform:rotate(-45deg)}
html.js body.menu-open .burger i:last-child{opacity:0}

/* Menú móvil — velo casi opaco, sin blur (registro códice §3.3) */
.drawer{
  position:fixed;inset:0;z-index:var(--z-drawer);
  background:var(--surface-veil);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gutter) 3rem;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-mid) var(--ease-out), visibility var(--dur-mid);
}
html.js body.menu-open .drawer{opacity:1;visibility:visible}
.drawer a{
  font-family:var(--font-display);font-weight:500;
  font-size:1.875rem;line-height:1.1;              /* 30px/1.1 (portada L1488); el 2.4rem del v8 se rebaja (§8.9) */
  letter-spacing:0;
  padding:1rem .125rem;border-bottom:1px solid var(--border-hairline);   /* 16px 2px (portada L1488) */
  display:flex;align-items:baseline;gap:1rem;
  transition:color var(--dur-fast);
}
/* FASE 22a · TEXTO ALTERNATIVO DEL CONTENIDO GENERADO. A un pseudoelemento no
   se le puede poner `aria-hidden`, y NVDA y JAWS SÍ anuncian el `content`: sin
   esto, un lector dice «signo de párrafo» antes de cada enlace del cajón y
   detrás de cada rótulo de la marquesina. La barra con cadena vacía —`'¶' / ''`—
   es la alternativa textual del propio `content`: se ve, no se oye. Los siete
   calderones que viven en el DOM ya iban con `aria-hidden` desde la 21g; éstos
   dos no estaban cubiertos por aquella revisión porque no están en el DOM. */
.drawer a::before{content:'¶' / '';color:var(--accent-alt);font-size:1.25rem;flex:none}   /* 1.25rem = 20px lienzo, máximo de componente (§1.7) */
@media (hover:hover) and (pointer:fine){.drawer a:hover{color:var(--accent)}}
.drawer a:active{color:var(--accent)}
/* Cierre del menú: lema y versículo (Jost 9.5px equiv., §4) */
.drawer-verse{
  font-family:var(--font-label);font-size:.594rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-wide);
  color:var(--text-dim);margin-top:2.5rem;
}

/* ── Hero (§2.1, composición redefinida) ─────────────────────────
   Texto abajo-izquierda, CTA abajo-derecha (deroga el centrado del
   v8); 100vh con suelo de 800px; doble marco con .frame-double. */
.hero{
  /* FASE 27a-b · `100dvh`, Y EL SUELO DE 800 NO PUEDE PISARLO EN EL MOVIL.
     En Android la barra del navegador esta SIEMPRE a la vista al entrar, y
     `100vh` mide la ventana SIN contarla: el hero se dibuja mas alto que el
     hueco real. `100dvh` mide el hueco de verdad. El `100vh` se queda delante
     como respaldo para quien no entienda `dvh`.
     PERO EL CULPABLE MEDIDO NO ERA `100vh`: ERA `min-height:800px`.
     Medido a 390 con alturas visibles de 915, 844, 800, 780, 745, 730, 700 y
     660: de 800 para arriba la caja sigue a la ventana y **queda siempre un
     hueco de 10 px** entre el ultimo boton y el rotulo «Entra». De 780 para
     abajo la caja se clava en 800 y ahi empieza el destrozo, porque el
     senuelo se compensa con `max(0px, 100% - 100dvh)` y **sube justo encima
     de los botones**: contenido a 672 y «Entra» a 662 con la ventana en 780.
     El suelo de 800 se retira SOLO en el movil, mas abajo. En escritorio no
     estorba —una ventana de escritorio rara vez baja de 800— y sigue igual. */
     FASE 27a-c · Y DE `dvh` A `svh`, porque `dvh` traia su propia factura.
     Con `dvh` el solape se arreglo, pero **la caja sigue el alto EN TIEMPO
     REAL**: al deslizar hacia abajo y esconderse la barra, la caja crecia en
     vivo y arrastraba lo de dentro. Un estiron en medio del gesto, y solo en
     las dos paginas a pantalla completa.
     `svh` es el alto PEQUENO —el que hay con la barra puesta— y **no cambia
     cuando la barra se va**: la caja se dibuja una vez y se queda quieta.
     LO QUE SE PIERDE es la franja que queda debajo al ocultarse la barra, y
     se fue a mirar que hay ahi antes de decidir. Simulado poniendo la ventana
     al alto grande y la caja al pequeno —115 px de franja—: en la portada
     entra **la banda de la marquesina con sus filetes**, y en el 404 **el
     filete del buscador cierra la pantalla y arranca el pie**. Ningun canto,
     ningun corte: lo que aparece es la seccion siguiente, que es lo que
     aparece al desplazarse de todos modos.
     Y las dos compensaciones que ya habia siguen valiendo: `.hero-cue` usa
     `max(0px, 100% - 100dvh)`, que con `svh` da cero con la barra puesta y
     cero tambien sin ella —la resta se vuelve negativa y el `max` la corta—.
  position:relative;height:100vh;height:100svh;min-height:800px;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gutter);
  padding:0 var(--gutter) 8rem;   /* la composición 84/48px del lienzo pasa a flexbox + gutter (§10.1); el pie sube de 48 a 128px en D-F5-8 para que «Entra» tenga banda propia */
}
/* Bloques de composición del §7.1 (texto abajo-izq. · CTA abajo-dcha.) */
.hero-copy{position:relative;z-index:3;max-width:62rem}
.hero-cta{
  position:relative;z-index:3;flex:none;
  display:flex;flex-direction:column;align-items:flex-end;gap:2.125rem;   /* 34px de lienzo (portada L1525) */
  text-align:right;padding-bottom:1.1rem;
}
.hero-cta .lead{max-width:25rem}   /* 400px de lienzo (portada L1526, §10.1) */
/* El par de botones va en FILA y de igual ancho, como la portada aprobada
   (§10.1: «Botones del hero 248px · min-width:15.5rem, par de igual ancho»).
   D-F5-3 los había apilado acotando la columna a 400px, con una medida
   tomada cuando el arnés componía en Georgia; con las fuentes reales el
   título entra en tres renglones limpios con la fila puesta.

   FASE 21x · las dos declaraciones que había aquí —`justify-content:flex-end`
   y la medida mínima— pasan a la norma general de botones, que es donde debía
   estar desde el principio: la igualdad de anchos ya no es una excepción de
   la portada. Ver «VARIOS BOTONES JUNTOS MIDEN LO MISMO». */

.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--hero-penumbra)}
.hero-video video{
  width:100%;height:100%;object-fit:cover;
  /* FASE 21zc · el encuadre horizontal lo calcula el runtime (§10.6c) y llega
     por variable; el valor de aquí es el del contrato y el que se ve sin JS. */
  object-position:var(--haz-p, 54.9%) 50%;
  transform:translateX(var(--haz-x, 0px)) scale(var(--haz-s, 1));
}
/* FASE 21z · EL HAZ AL EJE EN PANTALLA ANCHA, autorizado por el encargante.
   El eje del haz cae en la fracción 0,505 del origen, y el 54.9% lo pone en el
   centro del plano para 16:10 — pero en 16:9 NO PUEDE: el vídeo mide 1,7933 de
   proporción y la ventana 1,7778, de modo que `cover` no deja recorrido
   horizontal (26px en 1920×1080, y cero en cuanto la ventana baja un poco).
   Ahí el haz se queda 9,6px a la derecha, que es el 0,5% del ancho, y ningún
   valor de `object-position` lo mueve.
   Se fabrica el recorrido que la proporción no da: un 2% de aumento —1% de
   margen por lado, 19px en 1920— y un desplazamiento del 0,5%, que es
   exactamente lo que sobra. El desplazamiento va en PORCENTAJE del propio
   plano, no en píxeles, para que valga igual a 1920 que a 2560.
   SÓLO donde hace falta: por debajo de 16:9 el `object-position` sí tiene
   recorrido y ya deja el haz centrado; aplicarlo allí lo movería de más.

   EL PÓSTER VA EN LA MISMA REGLA, y no en una suya (21zb). El póster se pinta
   como capa propia con el mismo `54.9% 50%`, así que si el vídeo se reencuadra
   y él no, el relevo del bloque 2 de la fase 20 —que existe justamente para que
   no se note— daría un salto lateral de 9,6px en el peor momento: cuando la
   escena ya está a la vista. Van juntos en el mismo selector para que nadie
   pueda cambiar uno y olvidarse del otro. */
/* La media query de la 21z/21zb desaparece: aquel `translateX(-.5%) scale(1.02)`
   servía a un solo caso —16:9— y a una fracción que resultó ser el canto de la
   hoja y no el haz. El runtime lo calcula ahora para cualquier proporción, y el
   póster lee las mismas variables, que es lo que impide el salto del relevo. */
/* FASE 17b · EL PÓSTER, EN SU PROPIA CAPA. Antes se veía NEGRO hasta que
   arrancaba el vídeo, y la causa estaba a la vista: el póster es un atributo
   del `<video>`, y el `<video>` parte en `opacity:0`. Al ocultar el vídeo se
   ocultaba también su póster, y lo que quedaba a la vista era el fondo del
   contenedor, `--surface-base`: negro liso.
   El póster pasa a ser una capa propia —`::before`— que no depende de la
   opacidad del vídeo y por tanto se pinta desde el primer render.

   Entra a `.55`, que es exactamente la opacidad final del vídeo, y se apaga
   cuando el vídeo está listo: los dos se cruzan al mismo valor, así que el
   relevo no se ve. Sin eso, el póster a plena opacidad bajo un vídeo al 55%
   sumaría dos capas de la misma escena y el plano saldría más claro de lo que
   pide la dirección.

   Orden de pintado, que aquí importa: `::before` (póster) → `<video>` →
   `::after` (velo). Los tres en `z-index:auto`, así que se pintan en orden de
   árbol y el velo queda encima de todo, como debe.

   El encuadre del fondo repite el `object-position` del vídeo (54.9% 50%): si
   discreparan, el relevo daría un salto lateral.

   DEUDA B4, SALDADA EN LA 32: el póster pintado es `frame.webp` (el de la
   26p), 45 KB donde el png pesaba 640 — el mismo fotograma (1284×716,
   diferencia media 1,5/255 medida en el motor) y además EL MISMO FICHERO que
   el atributo `poster` del vídeo: una sola descarga para las dos capas, y la
   puerta `.poster-ready` de inicio.js se abre con el fichero que de verdad se
   pinta, porque lee la URL del estilo computado. Medido antes del cambio, en
   3G: el png llegaba a los 18,6 s, la puerta abría a ciegas por el respaldo
   de 1,5 s y el fundido corría sobre una capa vacía — 17 s de escenario negro
   que ningún fundido puede disimular. */
/* FASE 20 · REVELADO EN DOS TIEMPOS.
   El póster deja de estar ahí desde el principio y pasa a REVELAR: 0 → .55 en
   **800ms**, en cuanto el archivo está pintado (la puerta `.poster-ready` la
   abre inicio.js precargando el mismo fichero, porque una imagen de fondo no
   avisa de cuándo está lista).

   POR QUÉ .55 Y NO 1, que es lo que pedía la orden. La opacidad final del
   VÍDEO es .55 —el vídeo es escenografía bajo el velo, no imagen plena— y el
   relevo sólo es invisible si las dos capas coinciden en ese valor. Llevar el
   póster a 1 y dejar el vídeo en .55 produciría un oscurecimiento visible justo
   al terminar la carga: la escena se encendería del todo para apagarse a la
   mitad un segundo después. Se revela igual —de nada a su presencia plena— pero
   contra el valor que el sistema le reserva a esta capa.

   Sin JS el póster está visible de entrada: la puerta `html.js` sólo lo apaga
   cuando hay quien pueda encenderlo. */
.hero-video::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('../../uploads/2026/08/webp-26p/frame.webp') var(--haz-p, 54.9%) 50% / cover no-repeat;
  transform:translateX(var(--haz-x, 0px)) scale(var(--haz-s, 1));
  opacity:.55;
  transition:opacity .8s var(--ease-out);
}
html.js .hero-video::before{opacity:0}
html.js .hero-video.poster-ready::before{opacity:.55}
/* Cuando el vídeo está listo, las dos capas se cruzan en 1,2s al mismo valor:
   el póster baja mientras el vídeo sube, así que no hay ni un instante de
   hueco ni un salto de luz. */
html.js .hero-video:has(video.ready)::before{opacity:0;transition-duration:var(--dur-xslow)}

/* §5.2 · degradación sin JS: solo bajo html.js (la pone functions.php)
   el vídeo parte oculto; sin JS queda visible por defecto. */
html.js .hero-video video{
  opacity:0;
  transition:opacity var(--dur-xslow) var(--ease-out);   /* fase 20: el fundido del vídeo baja de 2,2s a 1,2 */
}
html.js .hero-video video.ready{opacity:.55}
/* Velo diagonal único (§3.4): la esquina sup. dcha. conserva la imagen
   y el pie muere opaco en Woodsmoke — el vídeo se funde, no termina. */
.hero-video::after{content:'';position:absolute;inset:0;background:var(--scrim-hero)}

/* ─────────────────────────────────────────────────────────────────────────
   LA PUERTA ANGOSTA EN MOVIL · fase 27a.

   MEDIDO, y es lo que obliga: el fichero es 1284x716 y la puerta ocupa la
   franja x 542..752. Con `cover` y el hero a 100vh:

       1920x1080   caja 1,77   se ve 17..1284   99 %   525 px de sala a la
                                                       izquierda, 532 a la derecha
        834x1112   caja 0,74   se ve 389..920   41 %   153 / 168
        390x844    caja 0,46   se ve 489..820   26 %   **53 / 68**

   A 390 la puerta LLENA la pantalla, y una puerta que llena la pantalla deja
   de ser angosta. Lo que se pierde no es encuadre: es **la sala que hay a su
   lado**, que es lo unico que la hace estrecha. Es la puesta en escena de
   Mateo 7,13, y sin sala no dice nada.

   NO HAY VUELTA POR ENCUADRE. Con `cover`, la fraccion visible es
   `proporcion de la caja / 1,79`, y nada mas: ni `object-position` ni un
   recorte distinto anaden un pixel. **La unica palanca es la proporcion de la
   caja**, y la caja la manda el texto, no el video.

   ASI QUE SE DESACOPLAN: el video deja de RELLENAR el hero y pasa a ser una
   BANDA en su tercio superior. Sale a 62 % del alto, que a 390x844 da una caja
   de 0,75 —la misma que la tableta, donde la escena se lee bien— y **sube del
   26 % al 42 %**: la puerta recupera 157 px de sala a la izquierda y 167 a la
   derecha.

   Y NO DEJA CANTO: la banda muere en mascara sobre `--hero-penumbra`, que es
   el fondo que esta capa ya tiene declarado —el granate de la cortina— y que
   el velo diagonal remata en Woodsmoke. Es la disolucion de bordes de la 26ZL,
   aqui abajo.

   LA CONDICION VA POR PROPORCION Y NO POR ANCHO, porque el defecto lo causa la
   proporcion: a 834x1112 la caja ya es 0,74 y no hay nada que corregir. Por
   debajo de 3/5 —0,6— es donde el recorte se come la sala.

   EL POSTER VA EN LA MISMA REGLA. Lo avisa el comentario de la 21zb: si el
   video se reencuadra y el poster no, el relevo de la fase 20 da un salto
   justo cuando la escena ya esta a la vista. Van juntos o no van.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-aspect-ratio: 3/5){
  .hero-video video,
  .hero-video::before{
    height:62%;
    bottom:auto;
    -webkit-mask-image:linear-gradient(180deg, #000 58%, transparent);
    mask-image:linear-gradient(180deg, #000 58%, transparent);
  }
}

/* Sobretítulo litúrgico (§4: Jost 500, --track-rite con −.04 óptico) */
.hero-kicker{
  font-family:var(--font-label);font-size:.781rem;font-weight:500;
  text-transform:uppercase;letter-spacing:calc(var(--track-rite) - .04em);
  color:var(--accent-hi);
}
.hero-kicker .pilcrow{margin-right:.875rem}         /* 14px (portada L1518) */

/* Escala rota de tres cuerpos (§4). El halo del focal es 1 de los 3
   text-shadow permitidos por página (§3.1). */
.hero h1{margin:1.875rem 0 0;font-weight:400;line-height:.96;letter-spacing:.01em}   /* 30px bajo el kicker (portada L1517) */
.line{display:block}          /* mecánica de entrada por spans (§5.3); el recorte solo existe mientras corre la entrada — véase §07 */
.line>span{display:block}
.line-open{font-size:var(--size-hero-open)}
.line-focal{
  font-size:var(--size-hero);font-weight:500;font-style:italic;letter-spacing:0;
  margin:.75rem 0 0 -.4375rem;                      /* 12px arriba, −7px óptico (portada L1521) */
  text-shadow:var(--halo-hero);
}
.line-close{
  font-size:var(--size-hero-close);letter-spacing:0;
  margin:1rem 0 0 clamp(3rem, 12.2vw, 11rem);       /* 16px arriba, sangría 176px de lienzo fluida (portada L1522, §10.1) */
}


/* «Entra» — pieza de rito (§4: --track-rite con +.06 óptico) */
/* FASE 16 · la pista sigue al filete. El marco de abajo se ata al viewport
   cuando el hero es más alto que la ventana (`min-height:800px` del diseño),
   y sin esto la pista se quedaba por debajo del filete: medido, 56px fuera a
   1440×720. Sube exactamente lo mismo que sube el marco, así que en pantallas
   normales no se mueve un píxel. */
/* FASE 21z · «ENTRA» NO ESTABA CENTRADO, Y NO POR POCO: 30,42px a la derecha,
   a los cuatro anchos. La causa no es óptica, es de precedencia: esta pieza
   se centraba con `left:50%` más `translateX(-50%)`, y lleva `data-reveal`.
   La regla del revelado `.motion [data-reveal].seen{transform:none}` pesa
   (0,2,0) contra el (0,1,0) de aquí, así que EN CUANTO LA PIEZA APARECE le
   borra el `transform` — y con él la mitad del centrado—. Se quedaba con el
   `left:50%` a secas: el borde izquierdo en el centro del hero.
   Es el mismo peligro que la 21n: el revelado es dueño del `transform`, así
   que ninguna composición puede depender de él. Aquí se centra por caja
   —`left:0;right:0` con margen automático— y el revelado sigue haciendo lo
   suyo en vertical sin pisar nada. */
.hero-cue{
  position:absolute;bottom:calc(2rem + max(0px, 100% - 100dvh));
  left:0;right:0;margin-inline:auto;width:max-content;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:calc(var(--track-rite) + .06em);
  color:var(--text-secondary);
}
/* Y el remate fino, ya que se mide: el interletrado deja su hueco TAMBIÉN
   detrás de la última letra, así que la caja del rótulo es 5,52px más ancha
   que su tinta y centrarla deja la palabra 2,76px a la izquierda de la gota.
   Se descuenta ese hueco de cola —el mismo valor, en negativo— y la palabra
   cae sobre la línea. Es el «ajuste óptico local documentado» que el §1.7
   admite para `--track-rite`. */
.hero-cue span{margin-inline-end:calc(-1 * (var(--track-rite) + .06em))}
.hero-cue i{
  display:block;width:1px;height:52px;
  background:linear-gradient(180deg, var(--accent), transparent);
  animation:drip 2.8s var(--ease-io) infinite;   /* 2.8s: constante del sistema (§5.9) */
}

/* ── Botones (§4 · DA-2: Montserrat es la voz de los botones) ──── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--font-heading);font-size:.75rem;line-height:1;   /* 12px de lienzo */
  text-transform:uppercase;letter-spacing:var(--track-btn);
  padding:1.333em 2.5em 1.25em;   /* 16/30/15px a 12px (portada L1871/L1894) */
  border:0;border-radius:0;       /* cuando el .btn es un <button>, el reset del tema padre le pone marco rosa #c36 y radio 3px: aquí se apagan (DA-1) */
  transition:background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
/* Sólido: PLANO — sin degradado, sin halo (§4, deroga v8 L295) */
.btn.solid{background:var(--accent);color:var(--text-on-accent);font-weight:600}
@media (hover:hover) and (pointer:fine){.btn.solid:hover{background:var(--accent-hi)}}
.btn.solid:active{background:var(--accent-hi)}
/* Fantasma del hero: peso 500 y borde marfil propio (§1.5 --border-ghost) */
.btn.ghost{border:1px solid var(--border-ghost);color:var(--text-primary);font-weight:500}
@media (hover:hover) and (pointer:fine){.btn.ghost:hover{border-color:var(--accent-hi);color:var(--accent-hi)}}
.btn.ghost:active{border-color:var(--accent-hi);color:var(--accent-hi)}   /* portada L1529 */
/* Enlace-botón de texto (los «Ver la parte» del Rostro, v8 L301–303 y 4 usos
   del body): la voz de los botones sin caja ni borde (§2.1). */
.btn.link{padding:0;background:none;border:0;color:var(--accent);font-weight:500}
@media (hover:hover) and (pointer:fine){.btn.link:hover{color:var(--accent-hi)}}
.btn.link:active{color:var(--accent-hi)}
/* Botón a todo el ancho de su lámina (los 16 «Adquirir»/«Suscribirse» de
   precios de la Schola, v8 L300 y L2348–2625) — §2.1. */
.btn.block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* ── NORMA · VARIOS BOTONES JUNTOS MIDEN LO MISMO (§2.1, fase 21x) ──
   El §10.1 pedía «par de igual ancho» para el hero desde la fase 5, y con
   `min-width:15.5rem` NUNCA se cumplió: la medida fija sujetaba al corto en
   248px y dejaba al largo crecer hasta 271,8. Medidos los cuatro pares del
   sitio a cuatro anchos, los dieciséis salían desiguales, con hasta 58px de
   diferencia en el Rostro. La regla pasa a ser del sistema y no del hero.
   MECANISMO · retícula de columnas `1fr` bajo un ancho de contenido. La fila
   se mide por su contenido (`width:max-content`) y ahí una pista `1fr` toma
   el tamaño de la MAYOR de todas: todas iguales, y iguales a la más ancha.
   Se descartaron las otras dos: la medida mínima común es la que ya falló
   —basta un rótulo largo para romperla—, y repartir el espacio del renglón
   estiraría dos botones hasta media página en el lienzo de 1920.
   EL SUELO SE QUEDA en 15.5rem, que es el 248px de lienzo del hero: por
   debajo de esa medida un botón de dos palabras se queda flaco al lado del
   siguiente. Así que la fila es «la más ancha, y nunca menos de 248».
   SÓLO CUANDO HAY VARIOS: `:has(>.btn~.btn)` exige un segundo botón. Una
   fila de uno solo —«Ver el documental completo», centrada bajo la obra—
   conserva su caja flexible y su centrado, que un `max-content` con margen
   automático no reproduce sin tocar la página. */
.btn-row:has(>.btn~.btn),
.btn-row.e-flexbox-base.e-atomic-element:has(>.btn~.btn){
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  width:max-content;max-width:100%;align-items:stretch;
}
.btn-row:has(>.btn~.btn)>.btn{min-width:15.5rem}
/* RED DE SEGURIDAD, fase 21z. Toda la igualdad cuelga de `:has()`, y `:has()`
   invalida la regla ENTERA en un navegador que no lo entienda: la fila
   volvería a ser flexible y los anchos, libres. El suelo se declara también
   sin `:has()`, de modo que en ese caso el par cae en la medida antigua —248,
   desiguales pero acotados— y no en cualquier ancho. Cuesta una línea. */
.btn-row>.btn:not(.link){min-width:15.5rem}
/* El par del hero iba a la derecha por `justify-content` — que sólo alinea
   dentro de una caja que ocupa el renglón entero. Medida por su contenido,
   la fila ya no lo ocupa, y quien la lleva al margen es el margen. */
.hero-cta .btn-row{margin-inline-start:auto}
/* Y por debajo de la tableta se apilan, a renglón entero y por tanto también
   iguales. El corte es 860 y no 520 porque el par más ancho del sitio —el del
   Rostro— mide 642px con su hueco: en un lienzo de 620 la fila no cabría y la
   retícula, que no envuelve, apretaría los dos botones hasta partirles el
   rótulo. Es el mismo corte al que la sección de Artículos baja a una columna. */
@media (max-width:860px){
  .btn-row:has(>.btn~.btn),
  .btn-row.e-flexbox-base.e-atomic-element:has(>.btn~.btn){
    grid-auto-flow:row;width:100%;
  }
  .btn-row:has(>.btn~.btn)>.btn{min-width:0}
  .btn-row>.btn:not(.link){min-width:0}
  .hero-cta .btn-row{margin-inline-start:0}
}

/* ── Marquesina (§2.1, redefinida en voz — DA-11) ────────────────
   Mecánica intacta: duplicación + bucle lineal en GSAP, 52s exactos
   (46s el roster de Colabora), pausa al hover — vive en JS (§5.3). */
.marquee{
  position:relative;overflow:hidden;
  /* FASE 21zd · 17px pasan a 10 SÓLO en el roster, que es el que lleva carné y
     el que no entraba en pantalla. La marquesina de títulos de la portada
     conserva sus 17: es una banda de texto y ahí el aire es la pieza. */
  padding:17px 0;
  border-block:1px solid var(--border-hairline-hi);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* Y con la especificidad de la zona atómica, no con la del componente: la
   compat de Elementor re-declara `.marquee.e-flexbox-base.e-atomic-element
   {padding:17px 0}` con (0,3,0) y se comía esta regla. Medido: el alto no
   bajaba ni un píxel hasta igualarla. */
.marquee.e-flexbox-base.e-atomic-element:has(.roster){padding-block:10px}
.marquee-track{display:flex;width:max-content;will-change:transform}
/* FASE 21zh · `:not(.roster)`, Y ES LA SEGUNDA VEZ. Esta regla viste el rótulo
   de TITULARES, pero `.roster` es también un `.marquee-track`, así que le caía
   encima al `<span>` del hueco de retrato: el `::after` le pegaba un CALDERÓN
   al lado de los tres puntos, y el `gap` de 44px más los 22px de `padding`
   empujaban los puntos a la izquierda del recuadro. El encargante veía las dos
   cosas —«un carácter que hace ruido» y «no están centrados»— y las dos salen
   de aquí. Misma familia que la colisión de `.open` de la 21zg: una regla de un
   componente colgada de una clase que otro comparte. Se acota, no se compensa. */
.marquee-track:not(.roster) span{
  display:flex;align-items:center;gap:2.75rem;      /* ¶ cada 44px de lienzo */
  white-space:nowrap;
  font-family:var(--font-label);font-size:.844rem;font-weight:400;   /* máx 13.5px */
  text-transform:uppercase;letter-spacing:var(--track-wide);
  color:var(--text-secondary);
  padding-inline:1.375rem;
}
.marquee-track:not(.roster) span::after{content:'¶' / '';color:var(--accent-alt);letter-spacing:0}

/* ── Manifiesto · el diagnóstico (§2.1) ──────────────────────────
   Contenedor en la columna de flujo de .marginalia. La escalera sube
   tamaño Y luz a la vez: la jerarquía siempre es doble (§4.3). */
.manifesto{max-width:1020px;padding-top:.5rem}      /* 8px: óptica de la escalera respecto del ¶ sticky (portada L1604) */
.mline{display:block;padding-block:.06em}
.mline>span{
  display:block;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.8rem, 3.9vw, 3.5rem);           /* plena: máx 56px */
  line-height:1.24;letter-spacing:0;
  color:var(--text-primary);
}
/* Aires de la escalera (portada L1606–1608): 8px entre líneas consecutivas;
   .gap es el aire ante la plena (64px); el clímax lleva su propio aire (72px)
   y no necesita .gap. El orden de estas reglas resuelve la cascada. */
.mline+.mline{margin-top:.5rem}                     /* 8px de lienzo */
.mline.gap{margin-top:4rem}                         /* 64px, ante la plena (deroga el espaciador con alto) */
/* Grados apagados de la escalera (sustituye a .mline.dim, §2.3) */
.mline.quiet>span{
  font-size:clamp(1.6rem, 3.2vw, 2.875rem);         /* máx 46px */
  line-height:1.28;color:var(--text-dim);
}
/* Clímax: peso 600 + halo (2º de los 3 text-shadow de la página §3.1) */
.mline.climax{margin-top:4.5rem}                    /* 72px, su propio aire (portada L1608) */
.mline.climax>span{
  font-size:clamp(2.1rem, 5.15vw, 4.625rem);        /* máx 74px */
  font-weight:600;line-height:1.08;
  text-shadow:var(--halo-climax);
}
.mline.climax em{font-style:italic;color:var(--accent)}
.mline.climax .pilcrow{font-weight:400;margin-right:1.125rem}   /* el ¶ del clímax no engorda: 400 y 18px (portada L1609) */

/* ── Bento (§2.1, rearquitecturado — DA-4) ───────────────────────
   12 columnas, gap 1px: el fondo del grid ES la retícula luminosa.
   Celdas planas sobre --surface-base, esquinadas; nada se eleva. */
.bento{
  display:grid;grid-template-columns:repeat(12,1fr);gap:1px;
  background:var(--border-grid);
  border:1px solid var(--border-grid);              /* marco perimetral de la retícula (portada L1630) */
  margin-top:5rem;                                  /* 80px de lienzo */
}
.bento>*{min-width:0;background:var(--surface-base)}
.bento-cell{
  display:flex;flex-direction:column;
  padding:clamp(1.6rem, 3.9vw, 3.5rem) clamp(1.6rem, 3.9vw, 3.5rem) clamp(1.4rem, 3.2vw, 2.875rem);  /* 54/56/46px */
}

/* Celda del fresco — posición contractual, no se reubica
   (USO.md §7 · portada L1631–1633). Sin máscara: la recorta la celda. */
.bento-fresco{
  grid-column:1 / 6;grid-row:1 / 3;
  min-height:640px;overflow:hidden;position:relative;
  background:var(--surface-base);
}
.bento-fresco img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;         /* encuadre = dirección de arte (§10.6) */
}

/* Colocación componible del resto de celdas (§2.4). Cada celda lleva
   .bento-cell (padding) y hereda fondo --surface-base de .bento>*:
   así el gap de 1px deja ver la retícula luminosa. */
.bento-claim{grid-column:6 / 13;grid-row:1}
.bento-tabula{
  grid-column:6 / 13;grid-row:2;                    /* contenedor de .bento-th/.bento-row */
  padding:.5rem 3.5rem 1.875rem;                    /* 8/56/30px propio de portada (L1639); prima sobre .bento-cell */
}

/* Rótulo del claim del bento (portada L1635) */
.bento-kicker{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-wide);   /* .3 dentro del token */
  color:var(--text-dim);
  margin-bottom:1.375rem;                           /* 22px hasta el claim (portada L1636) */
}

/* Claim del bento (§4): Cormorant 600, oro, sup 1.375rem */
.bento-claim{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.7rem, 3.5vw, 3.125rem);         /* máx 50px */
  line-height:1.06;letter-spacing:0;color:var(--accent);
  padding:3.375rem 3.5rem 2.875rem;                 /* 54/56/46px propio de portada (L1634); prima sobre .bento-cell */
}
.bento-claim sup{font-size:1.375rem;font-weight:400;margin-left:.5rem}   /* llamada ¹ separada 8px (portada L1636) */

/* Tabla Deja de… / Pasa a… */
.bento-th{
  font-family:var(--font-label);font-size:.656rem;font-weight:400;   /* 10.5px */
  text-transform:uppercase;letter-spacing:var(--track-wide);         /* .34 dentro del token */
  color:var(--text-dim);
}
.bento-th.gold{color:var(--accent)}   /* cabecera derecha «Pasa a…» en oro (portada L1642) */
.bento-row{
  display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;             /* 40px de lienzo */
  align-items:baseline;                                              /* filas a línea base (portada L1644) */
  padding:21px 0;border-bottom:1px solid var(--border-hairline);
}
.bento-row.head{padding:.875rem 0 .75rem}   /* fila de cabeceras: 14/12px de lienzo (portada L1640) */
.bento-row:last-child{border-bottom:0;padding:1.3125rem 0 .375rem}   /* 21/6px, portada L1660; patrón de .act/.refusal-not/.bridge-list */
/* Columna izquierda: --text-muted, SIN tachado (el tachado velvet es
   de .refusal-not en Kerigmaté, §2.1). */
.bento-from{font-family:var(--font-body);font-size:.9375rem;color:var(--text-muted);line-height:1.6}
.bento-to{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.25rem, 1.9vw, 1.6875rem);       /* máx 27px */
  line-height:1.3;color:var(--text-primary);
}
.bento-to strong{font-weight:600;color:var(--accent-hi)}
/* Nota al pie ¹ — celda a todo lo ancho; abre con filete introductorio
   110×1px (portada L1666) y su llamada ¹ va en oro (L1669) */
.bento-note{
  grid-column:1 / -1;font-size:.844rem;color:var(--text-soft);line-height:1.8;
  padding:2.125rem 3.5rem 2.375rem;                 /* 34/56/38px propio de portada (L1665); prima sobre .bento-cell */
}
.bento-note p{max-width:40rem}                      /* 640px de lienzo (portada L1668) */

.bento-note::before{content:'';display:block;width:110px;height:1px;background:var(--border-hairline-max);margin-bottom:1rem}
.bento-note sup{color:var(--accent);margin-right:.5rem}   /* llamada ¹ separada 8px (portada L1669) */

/* ── Cifras (§2.1, redefinidas en forma) ─────────────────────────
   Fila flex dentro de .rule-double; separadores «·» velvet.
   Deroga el grid de junta 1px del v8. Contrato data-fig intacto (§7.3). */
.figures{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:clamp(2.6rem, 5.85vw, 5.25rem) var(--gutter);   /* 84/60px de lienzo */
}
/* Composición en fila (portada L1729–1746): cifra y rótulo a línea base,
   rótulo a dos líneas junto al número — deroga el apilado centrado del v8. */
.figure{display:flex;align-items:baseline;gap:1.125rem;text-align:left}
.figure b{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--size-figure);line-height:1;letter-spacing:0;
  color:var(--text-primary);                        /* c1–c3 crema; deroga el oro común del v8 L546 */
  font-variant-numeric:tabular-nums;
}
/* Solo c4 («manos») enciende: oro claro + halo (3º de los 3 halos §3.1) */
.figure.hi b{color:var(--accent-hi);text-shadow:var(--halo-figure)}
.figure span{
  max-width:6.875rem;                               /* 110px: el rótulo quiebra a dos líneas */
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);line-height:1.8;
  color:var(--text-secondary);
}
.figure-sep{font-family:var(--font-display);font-size:1.375rem;color:var(--accent-alt)}   /* 22px lienzo (§1.7); a línea base como toda la fila (portada L1728) */

/* ── Puertas · la tabula (§2.1) ──────────────────────────────────
   Anatomía: nº (50px) · verbo (110px) · título · puntillé · flecha;
   la descripción sangra por las dos primeras columnas (≈13.25rem,
   §10.1). Hover: la puerta cuesta, no brilla (§3.9) — se retiran el
   halo, el título oro y el botón circular del v8. */
.doors{border-top:1px solid var(--border-hairline-hi);margin-top:5rem}   /* filete exterior .2 + 80px de lienzo (portada L1765) */
.door{
  position:relative;display:grid;
  grid-template-columns:3.125rem 6.875rem auto minmax(0,1fr) auto;
  align-items:baseline;column-gap:1.625rem;         /* 26px de lienzo (portada L1767); columnas+gaps = sangría 212px */
  padding:2.625rem 1.125rem 2.5rem;                 /* 42/18/40px de lienzo */
  border-bottom:1px solid var(--border-hairline);
  transition:background-color var(--dur-mid) var(--ease-out), padding-left var(--dur-mid) var(--ease-out);
}
/* FASE 17 · ESTADO DE LA PUERTA, restituido y completado.

   Tres cosas iban mal y las tres se ven aquí:

   1) SÓLO HABÍA HOVER. El teclado no tenía respuesta: quien navega con
      tabulador veía el contorno global de `:focus-visible` y nada más. Ahora
      el estado es el mismo para ratón y para teclado.

   2) LA SEXTA PUERTA NO SE MOVÍA, y no era un olvido: `.door.sealed` declara
      su propio acolchado con (0,2,0) y le ganaba al `padding-left` del hover,
      que era (0,1,1). La sellada se quedaba quieta mientras las otras cinco
      sangraban. Se iguala repitiendo el gancho para que el estado pese
      (0,3,0). Está sellada, no muerta.

   3) EL TÍTULO NO SE ENCENDÍA. Aquí hay una DEROGACIÓN que conviene dejar
      escrita: §2.1 retiraba expresamente «el título a --accent-hi» del hover
      de la puerta, con el argumento de que la puerta «cuesta, no brilla». El
      encargante lo revoca en la fase 17 y pide el título encendido. Se aplica
      su criterio y queda anotado, porque contradice el contrato.

   El fondo `--wash-velvet` y el sangrado de 2.125rem (34px) no cambian: son
   los del contrato y los del lienzo. */
.door:focus-visible,.door.sealed:focus-visible{background:var(--wash-velvet);padding-left:2.125rem}
@media (hover:hover) and (pointer:fine){.door:hover,.door.sealed:hover{background:var(--wash-velvet);padding-left:2.125rem}}
.door:active,.door.sealed:active{background:var(--wash-velvet);padding-left:2.125rem}
.door:focus-visible .door-title{color:var(--accent-hi)}
@media (hover:hover) and (pointer:fine){.door:hover .door-title{color:var(--accent-hi)}}
.door:active .door-title{color:var(--accent-hi)}

/* ── LA SEXTA PUERTA NO SANGRA: ENCIENDE SU CONDICION · fase 27b-e ───────
   HASTA HOY LAS SEIS RESPONDIAN IGUAL —mismo fondo, mismo sangrado de 34 px,
   mismo titulo en oro— y **la sexta es la unica que dice de si misma que esta
   cerrada**: «La unica puerta cerrada del sitio… se abre desde dentro». El
   copy decia una cosa y el gesto decia otra.

   Y CONVIENE RETIRAR UNA COSA QUE ESCRIBI EN LA 27b-a: la sexta puerta **si
   lleva a alguna parte**, `href="/la-schola/"`, igual que las otras cinco
   llevan a la suya. El defecto no era una promesa vacia: era que su respuesta
   no distinguia una CONDICION de una INVITACION.

   LO QUE SE HACE, Y ES LA VARIANTE QUE ELIGIO EL ENCARGANTE:
     · conserva el fondo `--wash-velvet` y el titulo en oro — esta viva;
     · **no sangra**: se queda donde esta;
     · y enciende en su canto izquierdo el filete borgona de 2 px, el MISMO
       `--accent-alt` con su halo que llevan las lineas de requisito de La
       Schola (§ del panel de niveles).

       las cinco abiertas   se acercan 34 px
       la sexta             no se acerca, y enciende su condicion

   La frase que lo resume: **las cinco vienen hacia ti; esta te espera.**

   NI UN RECURSO NUEVO: el color estaba en la paleta, el halo esta copiado de
   la linea de requisito, y la duracion es `--dur-fast`. Y los dos ejes no se
   pisan, que es la nota ya escrita en La Schola: **el oro tine la letra, el
   borgona enciende una linea.**

   ⚠ ESTO REVOCA UNA DECISION DE LA FASE 17, y no es un descuido que se
   restaura: es una decision que se cambia con otra razon. Aquella fase AÑADIO
   el sangrado a la sellada —no lo tenia, porque su `padding` propio (0,2,0) le
   ganaba al del hover (0,1,1)— y lo dejo escrito asi: «Esta sellada, no
   muerta». **Sigue sin estar muerta**: responde, navega y lleva a La Schola.
   Lo que cambia es que en la 17 el sitio todavia no tenia el vocabulario del
   filete borgona, que nace despues, en el panel de niveles. Hoy si lo tiene, y
   con el se puede decir «cerrada» sin decir «rota».

   La especificidad empata con la de arriba —(0,3,0)— y gana por ORDEN, que es
   como debe ganar una excepcion: leyendose despues de la regla general.
   ──────────────────────────────────────────────────────────────────────── */
.door.sealed:focus-visible,
.door.sealed:active{padding-left:1.125rem}
@media (hover:hover) and (pointer:fine){
  .door.sealed:hover{padding-left:1.125rem}
}
.door.sealed::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent-alt);
  box-shadow:0 0 5px rgba(122,30,46,1), 0 0 14px rgba(122,30,46,.7);
  opacity:0;transition:opacity var(--dur-fast) ease-out;pointer-events:none;
}
.door.sealed:focus-visible::before,
.door.sealed:active::before{opacity:1}
@media (hover:hover) and (pointer:fine){
  .door.sealed:hover::before{opacity:1}
}

.door-num{
  font-family:var(--font-display);font-size:var(--size-num);font-weight:400;
  color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.door-verb{
  font-family:var(--font-label);font-size:.656rem;font-weight:400;   /* 10.5px */
  text-transform:uppercase;letter-spacing:var(--track-wide);         /* .3 dentro del token */
  color:var(--text-muted);
}
.door-title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.7rem, 3.35vw, 3rem);            /* máx 48px */
  line-height:1;letter-spacing:0;
  transition:color var(--dur-fast) var(--ease-out);
}
.dotline{flex:1;align-self:baseline;transform:translateY(-8px);min-width:2rem;border-bottom:1px dotted var(--border-hairline-max)}   /* flex:1 (§2.2); cuelga de la línea base −8px (portada L1771) */
.door-arrow{font-family:var(--font-display);font-size:var(--size-num);color:var(--accent)}
.door-desc{
  grid-column:3 / -1;margin-top:1rem;max-width:37.5rem;              /* 16px arriba (portada L1775) · 600px de lienzo */
  font-size:.906rem;color:var(--text-secondary);line-height:1.75;    /* 14.5px */
}

/* ── Zona sellada · puente a la Schola (§3.2, §4) ─────────────────
   Roles del contrato §4 materializados en clase (§2.4). */
.intro{font-family:var(--font-body);font-size:var(--size-lead);line-height:1.85;color:var(--text-secondary)}   /* intro de sección; .lead queda para el hero con su 1.75 */
.seal-num{
  font-family:var(--font-display);font-weight:400;font-size:var(--size-h3);color:var(--accent);   /* numerales I–IV */
  flex:none;width:2.25rem;text-align:right;         /* 36px, alineados a la derecha (portada L1855) */
}
.seal-item{font-family:var(--font-body);font-size:.969rem; /* 15.5px lienzo */ color:var(--text-primary)}
/* Tabla I–IV de la zona sellada — geometría de portada L1853–1869:
   2 columnas con el gap de marginalia, border-top del contenedor y
   border-bottom por celda en retícula luminosa --border-grid; SIN
   borde perimetral completo (§2.4). */
.seal-table{
  display:grid;grid-template-columns:1fr 1fr;gap:0 var(--marg-gap);
  max-width:51.25rem;                               /* 820px de lienzo */
  margin-top:5rem;                                  /* 80px de lienzo (portada L1853) */
  border-top:1px solid var(--border-grid);
}
.seal-table>*{
  display:flex;align-items:baseline;gap:1.5rem;
  padding:1.5rem .25rem;
  border-bottom:1px solid var(--border-grid);
}

/* La sexta puerta: de caja dorada a fila destacada (§2.1) —
   sin caja, sin radio, sin blend; la imagen a ancho de columna. */
.door.sealed{padding:3.5rem 1.125rem 3.375rem}      /* 56/54px de lienzo */
.door.sealed .door-desc{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(15rem, 26.4vw, 23.75rem);   /* col. imagen 380px */
  gap:3.75rem;max-width:none;align-items:center;
  margin-top:1.625rem;                              /* 26px de lienzo (portada L1830) */
}
/* Prosa de la sellada: 15px/1.85 de lienzo (portada L1831).
   FASE 16 · el gancho pasa de `p` a `.door-prose`: la sexta era la única
   puerta que metía un <p> —contenido de flujo— dentro de un <span>, que sólo
   admite texto en línea. Ahora las seis descripciones tienen el mismo modelo
   y la sexta se distingue por sus dos hijos con nombre, no por su anatomía. */
.door.sealed .door-prose{font-size:.9375rem;line-height:1.85}
.door.sealed em{color:var(--text-primary)}          /* «Se abre desde dentro,» en crema (portada L1831) */
.door.sealed img{width:100%;height:auto}            /* alfa real: prohibidos blend y contenedor (§3.6a) */
/* FASE 27a-b · LA SEXTA PUERTA SE CENTRA POR LA CAJA, NO POR EL OJO.
   EL SINTOMA, visto en un telefono: la pieza queda levemente corrida a la
   derecha.
   LO PRIMERO QUE HUBO QUE DESCARTAR: no es la caja. Medido a 1440, 834 y 390,
   el `<img>` va **centrado exacto** en su contenedor: margen izquierdo 0,0 y
   derecho 0,0 en los tres. Un margen a ojo habria tapado el sintoma sin tocar
   la causa.
   LA CAUSA ESTA EN EL FICHERO, y es el alfa. Leido el canal alfa en un lienzo
   del propio dominio sobre `sexta_puerta-web.webp` (1355x1667, 73 % de pixeles
   opacos): **la tinta ocupa del 5,25 % al 100,00 % del ancho**. Hay margen
   transparente a la izquierda y **ninguno a la derecha**, asi que el centro de
   la tinta cae en el **52,63 %** y no en el 50.
   LA CORRECCION es esa cifra y no otra: 2,63 % del ancho hacia la izquierda
   deja los dos margenes transparentes en 2,62 % y la puerta centrada. A 390
   son 8,1 px sobre una pieza de 309; a 834, 18,6 sobre 706.
   EN PORCENTAJE Y EN MARGENES, no en pixeles ni en `transform`: el porcentaje
   vale en cualquier ancho, y el `transform` es del revelado —lo dice la nota
   de la 21n— asi que ninguna composicion puede apoyarse en el.
   SE CORRIGIO PRIMERO POR DEBAJO DE 1140 (el encargo de la 27a-b dejaba
   escritorio quieto) y LA FASE 33 LA EXTENDIO A TODOS LOS ANCHOS por
   decision del encargante (04/09/2026): la asimetria es del fichero y no
   cambia con el ancho, la correccion es porcentual y viaja con la caja, y
   rehacer el fichero no aporta nada que este 2,63 % no de ya (leccion de la
   26X: reexportar no mejora). CERRADA. */
.door.sealed img{margin-left:-2.63%;margin-right:2.63%}

/* ── Díptico · Dos oficios (§2.2 .plate*) ────────────────────────
   Láminas con marco fino; sustituyen a las tarjetas .trade con círculo. */
.trades{display:grid;grid-template-columns:1fr 1fr;gap:var(--marg-gap);margin-top:5rem}
.plate{position:relative}
.plate-frame{border:1px solid var(--border-frame);padding:8px}
.plate-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.plate-caption{
  font-family:var(--font-display);font-style:italic;font-size:1rem;   /* «Lám. I —» */
  color:var(--text-soft);margin-top:.75rem;   /* 12px de lienzo (portada L1700) */
}

/* Hueco de retrato pendiente — debe aguantar la llegada de las fotos
   sin rehacer la sección (USO.md §1, §11.6). Fondo --surface-raised:
   la errata de un dígito de la portada nace ya corregida (§8.2). */
.placeholder-portrait{
  position:relative;aspect-ratio:4/5;
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(45deg, rgba(200,191,166,.05) 0 1px, transparent 1px 10px),
    var(--surface-raised);
}
.placeholder-portrait span{
  font-family:var(--font-label);font-size:.625rem;font-weight:400;    /* 10px */
  text-transform:uppercase;letter-spacing:var(--track-wide);          /* .3 dentro del token */
  color:var(--text-dim);
}
/* Escenas pendientes (§11 · encargo: «hueco marcado y seguir»). Mismo trato
   que el retrato —rayado de pergamino y proporción de banda— para que la
   página conserve su ritmo mientras el material no llega: sin alto, estas
   escenas colapsaban a cero y el cierre llegaba a pintar su texto sobre la
   sección anterior. `:empty` casa aunque el hueco lleve dentro su comentario
   de encargo (los comentarios no cuentan como contenido), así que la regla se
   apaga sola en cuanto entre el <img>. */
.bleed:empty,.bleed-x:empty{
  aspect-ratio:21/9;
  background:
    repeating-linear-gradient(45deg, rgba(200,191,166,.05) 0 1px, transparent 1px 10px),
    var(--surface-base);
}

/* Nombre y credencial del díptico (§2.3: .trade-name pasa a Cormorant) */
.trade-name{font-family:var(--font-display);font-size:var(--size-h4);font-weight:600;line-height:1.1;margin-top:1.75rem}   /* 28px de lienzo (portada L1701) */
/* FASE 16 · TRACKING DE LA CREDENCIAL, y por qué se aparta del diseño.
   Medido con el tipo exacto de la portada aprobada —Jost 400 a 11,5px con
   `.24em`, portada.html L1626 y L1639— la credencial larga de la lámina II,
   «Codirector · Ingeniero de ciberseguridad y redes», ocupa 430px. La columna
   del díptico en el diseño mide 425: 1300 de contenedor menos 120 de acolchado,
   menos la marginalia de 190 y su calle de 70, partido por dos con calle de 70
   (portada.html L1608 y L1617). **No cabe ni en el propio diseño**, que la
   parte igual que la partía aquí.
   Como el encargante pide un renglón por credencial y prohíbe resolverlo con
   aire, la única palanca que queda es el tipo. Se baja el tracking de `.25em`
   a `.22em`: sobre 47 caracteres a 11,5px son 11px menos —419px, dentro de la
   columna— y sobre una letra son 0,23px, que no se ven. El cuerpo, el peso, el
   color y las cajas se quedan como el diseño manda.
   No se usa `white-space:nowrap`: si algún día la credencial crece, prefiero
   que parta a que se salga de la lámina. */
.trade-title{
  font-family:var(--font-label);font-size:.719rem;font-weight:400;    /* credencial 11.5px */
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--accent);margin-top:.75rem;   /* 12px de lienzo (portada L1702) */
}
/* Prosa del díptico: la portada manda (15px lienzo / 1.85 / secundario,
   portada L1704 y L1717) y deroga el muted 1.8 del v8 L564 (§2.1). */
.trade-desc{margin-top:1.4rem;font-size:.9375rem;color:var(--text-secondary);line-height:1.85}
/* Lista de oficios: Jost menuda con «·» velvet (§2.3) */
/* FASE 17b · LA LISTA DE OFICIOS, VERTICAL.
   En horizontal no cabía y no era cuestión de ajustar: medida en un renglón,
   la lista necesita 474px en la lámina I y 558 en la II dentro de una columna
   de 421. El objeto no influía —los oficios llevan `clear:right`— así que
   ningún tamaño de objeto lo habría resuelto.
   Un oficio por renglón: se acaba el envolvimiento y ninguna palabra parte.
   La retícula es de dos columnas —marca y palabra— y el marcado va en parejas
   (separador, oficio), así que cada fila queda «· Exégesis».
   El «·» NO se borra ni se convierte en `content` de CSS: sigue siendo texto
   real, sólo que ahora abre el renglón en vez de ir entre dos oficios. Lo que
   se ganó en la fase 16 —que quien copia la página o la escucha reciba un
   separador por oficio— no se devuelve. */
.trade-skills{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:.75rem;row-gap:.45rem;align-items:baseline;
  justify-content:start;margin-top:1.5rem;   /* 24px de lienzo (portada L1705) */
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--text-soft);
}
.trade-skills i{font-style:normal}
/* FASE 15 · el «·» era `content` de un ::before, es decir, decorado que no
   existe en la capa de texto: al copiar la lista o al leerla en voz alta, los
   oficios se pegaban («ExégesisHebreo y griegoHomilética»), y si el saneador
   de HTML llegara a quitar las <i> quedaría un renglón corrido sin nada que
   separase una palabra de la siguiente. Ahora el punto es un nodo de texto de
   verdad: se ve igual, se copia igual y se lee igual. Regla general del sitio:
   un separador que el lector necesita para entender la frase NO se pinta con
   CSS. */
/* El «·» ornamental es borgoña en TODO el sitio, no sólo dentro de la
   lista de oficios (fase 21a, bloque 5). `--accent-alt` está declarado
   sistema ornamental en el §1.4 —calderones, separadores, hover de
   puertas, borde de error— y su separador ya vivía aquí y en `.byline`
   con la misma tinta: lo que se hace es dejar de tenerlo escrito dos
   veces en dos sitios y darle su regla. No es un uso nuevo.
   El hover NO se propaga: `--wash-velvet` está declarado privativo de
   las puertas de la portada (§1.5) y una reserva escrita no se invade. */
.sep{color:var(--accent-alt)}
.trade-skills i{white-space:nowrap}   /* ningún oficio parte a mitad */

/* ── Captación (home · Kerigmaté §2.2) ───────────────────────────
   Formulario de rito: el input es una línea, no una caja. */
.field{display:grid;gap:.55rem}
.field label{
  font-family:var(--font-label);font-size:.656rem;font-weight:400;   /* 10.5px */
  text-transform:uppercase;letter-spacing:var(--track-wide);         /* .3 dentro del token */
  color:var(--text-muted);                          /* portada L1891; deroga el oro del v8 */
}
/* Forma de interiores (Colabora): caja mínima sin blanco sacro
   (el rgba blanco del v8 L694 muere con la ley del logotipo). */
.field input,.field textarea{
  background:var(--surface-card);
  border:1px solid var(--border-hairline);border-radius:0;
  padding:.95em 1.1em;font-size:.9rem;font-weight:400;
  transition:border-color var(--dur-fast), background-color var(--dur-fast);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-placeholder)}
.field textarea{resize:vertical;min-height:130px;line-height:1.7}

/* Variante de rito: transparente, solo borde inferior, Cormorant 26px */
.field.bare input{
  background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--border-input);
  font-family:var(--font-display);font-size:1.625rem;font-weight:400;   /* 26px de lienzo */
  color:var(--text-primary);padding:.375rem .125rem .625rem;   /* 6/2/10px (portada L1892) */
}
.field.bare input:focus{border-color:var(--accent)}

/* Estado de error: borde velvet, copy en oro claro (§2.2) */
.field.error input{border-color:var(--accent-alt)}
.field-error{display:none;font-size:.844rem;color:var(--accent-hi)}
.field.error .field-error{display:block}
/* Éxito: Cormorant itálica 31px en oro */
.form-success{font-family:var(--font-display);font-style:italic;font-size:1.9375rem;color:var(--accent)}

/* El escalón entre el campo y su botón dentro de un formulario. */
.field+.btn{margin-top:2rem}

/* ESTADO DESACTIVADO. Mientras no existan las páginas legales, los tres
   formularios del sitio (portada, pie y Kerigmaté) van inertes: si además se
   pintan como activos, la interfaz miente y quien lo intente no entenderá por
   qué no pasa nada. Sin color nuevo —opacidad y el filete base— y sin tocar la
   paleta. Al desbloquearlos, estas reglas quedan sin objeto solas. */
.btn:disabled,.form-go:disabled,
.field input:disabled,.field textarea:disabled,.inline-form input:disabled{
  opacity:.5;cursor:not-allowed;
}
@media (hover:hover) and (pointer:fine){.btn.solid:disabled:hover{background:var(--accent)}}
.btn.solid:disabled:active{background:var(--accent)}
@media (hover:hover) and (pointer:fine){.btn.ghost:disabled:hover{border-color:var(--border-ghost);color:var(--text-primary)}}
.btn.ghost:disabled:active{border-color:var(--border-ghost);color:var(--text-primary)}
@media (hover:hover) and (pointer:fine){.form-go:disabled:hover{color:var(--accent)}}
.form-go:disabled:active{color:var(--accent)}
.field.bare input:disabled{border-bottom-color:var(--border-hairline)}

/* Mini-form del pie: filete sólido en grado máximo, sin pill (§2.1) */
/* El subrayado es del FORM entero: un solo filete que abarca input y
   botón (portada L1957; §1.5 «filete del mini-form»). */
.inline-form{display:flex;gap:.6rem;flex-wrap:wrap;max-width:500px;
  border-bottom:1px solid var(--border-hairline-max);
  transition:border-color var(--dur-fast)}
.inline-form:focus-within{border-color:var(--accent)}
.inline-form input{
  flex:1;min-width:210px;
  background:transparent;border:0;border-radius:0;
  padding:.6em 0;font-size:.9rem;font-weight:400;
}
.inline-form input::placeholder{color:var(--text-placeholder)}
.inline-form input:focus{outline:none;border-color:var(--accent)}
/* Botón del mini-form del pie (portada L1959): voz Jost sin caja ni
   borde, oro que aclara al hover — gancho .form-go */
.form-go{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--accent);background:none;border:0;border-radius:0;padding:0;   /* el radio 3px lo pone el reset del tema padre a todo <button> (DA-1) */
  transition:color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){.form-go:hover{color:var(--accent-hi)}}
.form-go:active{color:var(--accent-hi)}

/* Microcopy legal/aviso («La primera llega hoy · Te vas cuando quieras») */
.form-note{
  font-family:var(--font-label);font-size:.656rem;font-weight:400;   /* 10.5px, portada L1904 */
  text-transform:uppercase;letter-spacing:var(--track-wide);         /* .3 dentro del token */
  color:var(--text-muted);margin-top:1.1rem;
}

/* ── Cierre de la home (DA-8): imagen a sangre + .bleed + .band-veil
   + .lit. El texto vive sobre la banda, centrado y bajo. ─────────── */
/* `.band` — la banda misma: contenedor de la escena a sangre y CONTEXTO DE
   POSICIÓN de su texto. DA-8 la describía («el texto vive sobre la banda»)
   pero no la bautizaba: sin ella, .band-text se anclaba al bloque inicial del
   documento y caía encima de la sección anterior (D-F5-9). */
.band{position:relative;overflow:hidden}
.band .bleed:empty{aspect-ratio:16/9;min-height:26rem}
.band-text{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:9%;
  text-align:center;z-index:2;
}
.band-text .quote{
  font-size:clamp(1.6rem, 2.95vw, 2.625rem);        /* máx 42px — la portada rebaja al v8 (§1.7) */
  line-height:1.42;max-width:42.5rem;margin-inline:auto;   /* 680px (portada L1920) */
}
.band-text .quote-src{
  display:block;margin-top:2.375rem;                /* 38px de lienzo */
  font-size:.781rem;font-weight:500;
  letter-spacing:var(--track-rite);color:var(--accent);
}

/* ── Pie (§2.1 · DA-7: vuelve a --surface-base). El doble filete es
   SOLO superior: el pie lleva .rule-double.top (portada L1926–1927). ── */
.footer{position:relative;z-index:var(--z-content);background:var(--surface-base)}
.footer-top{
  /* FASE 23o · EL HUECO BAJA DE 56 A 36px, Y ES LO QUE DEVUELVE EL ANCHO.
     Medido: «Comunidad de Telegram» necesita 162px en una columna de 161 y
     partía en dos por **un píxel**. Los otros dos que se sospechaban quedaron
     descartados con holgura —«Podcast en Spotify» 125px y «El Rostro del Amor»
     122px, o sea 36 y 39px de aire—: era uno solo.
     LA CUENTA, sobre los 1172px útiles del `.wrap` (1300 menos dos `--gutter`):
     con gap 56 los cuatro huecos comen 224 y quedan 948 para 5,9fr → 1fr=161px.
     Con gap 36 comen 144 y quedan 1028 → **1fr=174px**, y Telegram pasa de −1 a
     **+12px de holgura**. No se deja al píxel a propósito: al siguiente rótulo
     largo le cabrían doce.
     Y SON CINCO COLUMNAS, no cuatro: la primera —1.6fr— es el bloque de marca
     con logotipo y divisa. Quien reparta cuatro, rompe el pie. */
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr 1fr;gap:2.25rem;   /* 36px de lienzo */
  padding-block:clamp(3.4rem, 6vw, 5.375rem) 0;     /* 86px sup de lienzo */
}
/* Rótulos de columna del pie. Se seleccionan por posición y no por
   etiqueta: su nivel de encabezado lo decide la jerarquía del documento
   —son h2, porque venir de un h2 de sección a un h4 era un salto— y su
   voz la decide el sistema, que aquí es la de rótulo, no la de titular. */
.footer-top>div>:is(h2,h3,h4,h5,h6){
  font-family:var(--font-label);font-size:var(--size-label);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--track-wide);   /* .34 dentro del token */
  color:var(--accent);margin:0 0 1.4rem;line-height:1.2;
}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.footer li a{font-size:var(--size-small);color:var(--text-secondary);transition:color var(--dur-fast)}
@media (hover:hover) and (pointer:fine){.footer li a:hover{color:var(--accent-hi)}}
.footer li a:active{color:var(--accent-hi)}   /* portada L1941–1967 */
.footer .seal img{height:72px;width:auto}           /* sello 72px (§2.1) */
.footer-claim{
  font-family:var(--font-display);font-style:italic;
  font-size:1.3125rem;line-height:1.45;             /* lema 21px de lienzo */
  color:var(--text-primary);margin-top:1.625rem;max-width:15.625rem;   /* 26px · 250px de lienzo (portada L1931) */
}
/* Redes: 3 en el pie — YouTube · Instagram · X (DA-6 ratificada; las 8
   completas viven en Colabora); enlaces de texto con subrayado pergamino
   (portada L1932–1936 — la portada manda sobre v8: la caja 37×37 muere) */
.socials{display:flex;gap:1.25rem;margin-top:1.75rem;flex-wrap:wrap}
.socials a{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-btn);   /* el .22 consolidado (§1.8) */
  color:var(--text-secondary);
  border-bottom:1px solid var(--border-frame);padding-bottom:2px;
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){.socials a:hover{color:var(--accent-hi);border-color:var(--accent-hi)}}
.socials a:active{color:var(--accent-hi);border-color:var(--accent-hi)}   /* portada L1933–1935 */
.footer-bar{
  border-top:1px solid var(--border-hairline);
  margin-top:4.375rem;padding:1.625rem var(--gutter) 1.875rem;  /* 70/26/30px de lienzo; el gutter lateral es obligado: por debajo de 1300px la barra corría al borde de la pantalla */
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  font-family:var(--font-label);font-size:.656rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--text-dim);
}

/* ══════════════════════════════════════════════════════════════════
   06 · COMPONENTES DE INTERIORES
   Vigentes del v8 con los ajustes de §2.1: pesos 300→400, tracking
   negativo→0, DA-2/DA-3 aplicados. Superficie en registro códice
   (DA-1 ratificada): láminas y filas de filete, sin radio ni vidrio.
   ══════════════════════════════════════════════════════════════════ */

/* ── Cabecera de página interior ─────────────────────────────────── */
.page-head{
  position:relative;overflow:hidden;
  padding:clamp(9rem, 18vh, 13rem) 0 clamp(3.5rem, 7vh, 5.5rem);
  border-bottom:1px solid var(--border-hairline);
}
.page-head .chapter{display:block;margin-bottom:1.3rem}
.page-head h1{margin-top:1.5rem}
.page-head .lead{margin-top:1.7rem}

/* ── Etiquetas de estado (pulse en 08) ───────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-label);font-size:.63rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  padding:.55em 1.05em;border:1px solid;   /* sin radio (DA-1 ratificada: códice) */
}
.tag.live{color:var(--accent);border-color:var(--border-strong);background:var(--wash-gold)}
/* El velvet se queda donde funciona —marco y relleno— y la tinta sale de él:
   como color de texto sobre casi negro rinde 1,81:1 y esta etiqueta lleva
   texto real («En producción · 2027»). El v8 la escribía con un rosa claro
   (--accent-alt-text) que DA-5 retiró, y la clase cayó al burdeos por
   arrastre, sin decisión. Corregido en D-F6-4. */
.tag.velvet{color:var(--text-secondary);border-color:var(--accent-alt);background:var(--wash-velvet-deep)}   /* DA-5; --wash-velvet es privativo del hover de puertas */
.tag .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.tag.live .dot{animation:pulse 2.6s var(--ease-io) infinite}   /* 2.6s: constante del sistema (§5.9) */

/* ── Artículos ───────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.chip{
  font-family:var(--font-label);font-size:.65rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  padding:.7em 1.15em;   /* sin radio (DA-1 ratificada: códice) */
  border:1px solid var(--border-frame);color:var(--text-muted);
  transition:border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--border-accent);color:var(--text-primary)}}
.chip:active{border-color:var(--border-accent);color:var(--text-primary)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}

/* FASE 18 · `form.search`, y el `form` NO es decorativo. Con el sitio público
   se vio que la página de resultados servía el pie a 929px en vez de 1911 y
   con las columnas aplastadas a 98. La causa era mía: WordPress añade
   `class="search"` al <body> de la página de resultados, y esta regla —que es
   la del FORMULARIO de búsqueda— casaba con el body y lo volvía `display:flex`.
   El pie pasaba a ser un ítem flexible y encogía a su contenido.
   Es una colisión entre mi vocabulario de componentes y las clases de body de
   WordPress. Se cierra atando el selector a la etiqueta: un <body> nunca es un
   <form>. Las clases de body que hay que vigilar son `search`, `blog`,
   `error404`, `home`, `page` y `archive`. */
form.search{
  display:flex;align-items:center;gap:.8rem;margin-left:auto;min-width:210px;
  border-bottom:1px solid var(--border-hairline);padding:.55rem .2rem;
}
form.search input{background:none;border:0;outline:none;width:100%;font-size:.86rem;font-weight:400}
form.search:focus-within{border-color:var(--accent)}   /* foco visible como .field input:focus */
.byline{display:flex;align-items:center;gap:.75rem}
.byline span{
  display:block;font-family:var(--font-label);font-size:.58rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-faint);margin-top:.15rem;
}

.feature{display:grid;grid-template-columns:1.15fr 1fr;overflow:hidden;margin-bottom:1.3rem;
  background:var(--surface-base);border:1px solid var(--border-frame)}   /* lámina (DA-1 ratificada: códice) */
.feature-cover{position:relative;min-height:320px;
  background:linear-gradient(140deg, var(--wash-velvet-deep), var(--wash-gold))}
.feature-cover .tag{position:absolute;top:1.3rem;left:1.3rem}
.feature-body{padding:clamp(2rem,3.4vw,3rem);display:flex;flex-direction:column;justify-content:center}
.feature-title{
  font-family:var(--font-display);font-size:clamp(1.6rem,2.9vw,2.3rem);font-weight:400;
  line-height:1.18;margin-top:1.4rem;transition:color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){.feature:hover .feature-title{color:var(--accent)}}
.feature:active .feature-title{color:var(--accent)}

.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.article{display:flex;flex-direction:column;
  background:var(--surface-base);border:1px solid var(--border-frame)}   /* lámina (DA-1 ratificada: códice); nada se eleva */
.article-cover{
  /* 16:9 y no 3/2. Lo declarado aquí era 3/2 desde la fase 12 y NUNCA se
     aplicó: la clase global de la plantilla fija 16/9 y gana. Comprobado
     en la 21u leyendo el estilo computado —«16 / 9»— en vez de deducirlo
     del fichero. Se corrige el contrato, no el resultado: la página se ve
     igual y el fichero deja de decir algo que no pasa. La proporción
     manda además sobre la especificación de imagen: 16:9 sirve a la vez a
     la rejilla y a la tarjeta de compartición, que pide 1,91:1. */
  position:relative;aspect-ratio:16/9;display:grid;place-items:center;
  border-bottom:1px solid var(--border-hairline);
  background:linear-gradient(140deg, var(--wash-velvet-deep), var(--wash-gold));
}
/* ── La cubierta del artículo · fase 21u ──────────────────────────────
   Decisión del encargante: TODO artículo lleva imagen propia. Hasta la
   21u la cubierta era un contenedor vacío con un rayado declarado y
   MEDÍA CERO en el sitio vivo: existía en el marcado y no ocupaba un
   píxel. Es el mismo caso que la entradilla de la 21t —construido y sin
   pintar— y por eso la ficha se leía como tipografía pura.
   La regla vale para las dos situaciones y sin una línea de guion: con
   imagen, la cubierta toma su proporción y la imagen la llena; sin ella,
   el widget de Elementor no emite nada, la cubierta se queda sin
   contenido y NO se reserva hueco. Una ficha sin imagen se lee entera y
   no rota, que es la degradación honesta y además lo que hoy sirve el
   sitio.
   El recorte es por el centro: por eso la especificación de
   IMAGENES-PENDIENTES.md pide el asunto centrado.
   NOTA DE DESPLIEGUE: el cortafuegos del alojamiento rechazó dos veces
   este bloque, y la causa era una palabra del comentario —el nombre del
   lenguaje de guion del navegador— que sus reglas leen como intento de
   inyección. No se rodea el veto: se dice de otra manera. */
.article-cover img,.feature-cover img{display:block;width:100%;height:100%;object-fit:cover}

/* ── Compartir y llamada final del artículo · fase 21u ────────────────
   Fila de enlaces en registro menor, con el mismo `.btn.link` que usan
   los enlaces de vídeo de El Rostro del Amor: oro, sin caja y sin peso.
   NO son botones de plataforma —esos cargan un guion de un tercero y
   delatan al lector antes de que pulse—, así que aquí no hay iconos de
   marca ni colores ajenos a la paleta: sólo el nombre del sitio adonde
   va el enlace, en la voz del sistema.
   El filete superior es el mismo mecanismo con el que el códice separa
   sin cajas (§3.3), y el aire posterior no crece: esto cierra el
   artículo, no abre una sección. */
.share{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.6rem;
  padding-top:1.4rem;border-top:1px solid var(--border-hairline);
}
.share .label{margin-right:.4rem}

/* LOS CUATRO MODOS PESAN LO MISMO, y es una decisión (fase 21v). No son una
   jerarquía: son cuatro caminos alternativos, y quien lee elige el que usa.
   Que «copiar» pareciera el principal era un accidente mío —`font:inherit` en
   la regla anterior le daba 16px/400 frente a los 12px/500 de los enlaces— y no
   una intención. Un botón no es un enlace, pero aquí hace lo mismo, así que se
   ve igual.
   Y EL ESTADO PULSADO, que era el defecto grave: el reset de botón del tema
   padre pintaba fondo oro sólido en `:hover` y en `:focus`, dejando el texto en
   1,53:1 sobre él —el encargo §3 exige 4,5:1 y no admite excepciones—. Además el
   foco sobrevive al clic, así que la caja se quedaba encendida indefinidamente
   aunque el rótulo sí volviera a su sitio. Se apaga el fondo en LOS CUATRO
   estados: aquí la luz la da el color del texto, como en todos los `.btn.link`
   del sitio. */
.share button.btn.link{
  cursor:pointer;
  font-family:var(--font-heading);font-size:.75rem;font-weight:500;line-height:1;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  background:none;border:0;padding:0;color:var(--accent);
}
.share button.btn.link:focus,.share button.btn.link:focus-visible,.share button.btn.link:active{background:none;border:0;color:var(--accent-hi)}
@media (hover:hover) and (pointer:fine){.share button.btn.link:hover{background:none;border:0;color:var(--accent-hi)}}

/* ── La escena del artículo · fase 21u/21w ────────────────────────────
   La imagen del artículo se veía en la rejilla y desaparecía al abrirlo.
   Entra en la entrada individual y va ENTRE la entradilla y el cuerpo, no
   sobre el titular ni a sangre en la cabecera. Tres razones:
     · el H1 a 100px es el foco de la página y una imagen encima le
       disputaría ese sitio;
     · la cabecera ya lleva capítulo, rótulo, titular, entradilla y firma,
       y una escena detrás de todo eso pediría velo y pelearía con el texto;
     · así la imagen hace de umbral —presentación, imagen, texto—, que es
       para lo que sirve la escena en las cabeceras de las interiores.
   INTEGRACIÓN · USO.md, regla que gobierna todo: si se distingue dónde
   empieza y acaba una imagen, está mal integrada. Aquí NO hay texto
   encima, así que no lleva velo: se disuelven los cuatro bordes con la
   máscara del propio USO.md, con la disolución lateral suave que pide una
   16:9. Sin marco, sin radio, sin sombra.
   Y si el artículo no tiene imagen, no hay widget, no hay escena y no hay
   hueco: el artículo se lee entero, como la ficha. */
/* La fila de botones que remata un bloque de prosa necesita su aire, y el
   §3.8 lo quiere del ritmo y no de un margen suelto: por eso la regla es
   estructural —una fila de acción DESPUÉS de prosa— y no una excepción con
   nombre propio. En la llamada final del artículo esa fila estaba pegada al
   párrafo con 0 px, que es lo que el encargante vio. Comprobado que ese par
   sólo se da hoy en la plantilla de entrada. */
.prose + .btn-row{margin-top:2.2rem}

.article-scene img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  -webkit-mask-image:
    linear-gradient(to right,  transparent, #000 10%, #000 90%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent, #000 10%, #000 90%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
          mask-composite: intersect;
}
.article-cover picture,.feature-cover picture,
.article-cover .elementor-widget-image,.feature-cover .elementor-widget-image,
.article-cover .elementor-widget-container,.feature-cover .elementor-widget-container{
  display:block;width:100%;height:100%}
.article-body{padding:1.6rem;display:flex;flex-direction:column;flex:1;gap:1rem}
.article-title{font-family:var(--font-display);font-size:1.28rem;font-weight:400;line-height:1.25;
  transition:color var(--dur-fast)}
@media (hover:hover) and (pointer:fine){.article:hover .article-title{color:var(--accent)}}
.article:active .article-title{color:var(--accent)}
.article-excerpt{font-size:.86rem;color:var(--text-muted);line-height:1.75;flex:1}
.article-foot{
  padding-top:1rem;border-top:1px solid var(--border-hairline);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-label);font-size:.59rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-faint);
}

/* ── El Rostro del Amor ──────────────────────────────────────────── */
.movement{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);padding-block:clamp(3rem,6vw,5rem);
  border-top:1px solid var(--border-hairline);
}
.movement:first-child{border-top:0}
.mv-rom{
  font-family:var(--font-display);font-size:clamp(3.4rem,7vw,5.6rem);font-weight:400;
  font-style:italic;line-height:.8;letter-spacing:0;
  color:var(--accent);opacity:.32;                  /* opacidad, no rgba suelto */
}
.mv-kicker{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--accent);margin-top:1.6rem;display:block;
}
.mv-title{
  font-family:var(--font-display);font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:500;
  line-height:1.08;letter-spacing:0;margin-top:.9rem;
}
.mv-hook{
  font-family:var(--font-display);font-size:clamp(1.25rem, 1.9vw, 1.4rem);font-style:italic;   /* zona muerta §1.7: nada vive en 17.5–20px */
  line-height:1.5;color:var(--text-secondary);margin-top:1.4rem;max-width:44ch;
}
.mv-body{font-size:.93rem;color:var(--text-muted);line-height:1.85;margin-top:1.3rem;max-width:50ch}
.mv-foot{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin-top:2rem}
.mv-dur{
  font-family:var(--font-label);font-size:.6rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-faint);
}

/* Índice de actos */
.acts{align-self:center}
.acts-label{
  display:block;font-family:var(--font-label);font-size:.58rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-btn);color:var(--text-faint);
  padding-bottom:.9rem;margin-bottom:.3rem;border-bottom:1px solid var(--border-hairline);
}
.act{
  display:grid;grid-template-columns:1.6rem 1fr auto;gap:1rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid var(--border-hairline);
}
.act:last-child{border-bottom:0}
.act b{font-family:var(--font-display);font-size:.8rem;font-weight:400;font-style:italic;
  color:var(--accent);opacity:.75}
.act span{font-family:var(--font-body);font-size:.87rem;font-weight:400;   /* DA-2 */
  color:var(--text-secondary);line-height:1.4}
.act time{
  font-family:var(--font-label);font-size:.58rem;letter-spacing:.14em;
  color:var(--text-faint);font-variant-numeric:tabular-nums;
}

/* ── El halo del clímax · fase 21h ────────────────────────────────────
   El §3.1 concede TRES halos por página y ocho páginas usaban cero. No
   estaban prohibidos: nadie los aplicó.
   Este gancho existe para que el halo sea una decisión explícita y
   contable, no un efecto que se cuela: se escribe en el marcado, sobre
   la frase concreta que remata la página, y se puede censar.
   La ley manda que vaya SIEMPRE sobre el clímax semántico y NUNCA por
   decoración, así que hay páginas que no lo llevan y no es un olvido:
   una plantilla de listado no tiene clímax que encender.
   `--halo-climax` (80px/.22) es el grado de frase; `--halo-figure` queda
   para cifras y `--halo-hero` es privativo del hero de la portada. */
.climax{text-shadow:var(--halo-climax)}

/* ── De quién bebe cada movimiento · fase 21h ─────────────────────────
   Sólo MAESTROS: Padres, doctores y Magisterio. La clasificación no se
   hizo por quién aparece en el guion sino por CÓMO lo trata (§4.5): la
   razón que llega al umbral —Platón, Sócrates, los novelistas— y lo que
   la obra refuta —Nietzsche, Campoamor— no entran aquí. Poner al
   antagonista en una lista de fuentes sería desdecir la obra entera.
   Registro sobrio: rótulo Jost y los nombres en crema, sin oro. No es un
   sello de erudición, es una nota de procedencia. */
.mv-sources{
  margin-top:1.4rem;padding-top:1rem;
  border-top:1px solid var(--border-hairline);
  font-size:.82rem;line-height:1.7;color:var(--text-soft);
}
.mv-sources b{
  display:block;font-family:var(--font-label);font-size:var(--size-label);
  font-weight:400;text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--text-faint);margin-bottom:.4rem;
}

/* La nota de método de la obra: que se cite con fuente y que se diga
   cuándo se parafrasea es exactamente lo que La Schola promete, y hasta
   ahora la obra mayor no lo decía en ninguna parte. */
.sources-note{
  max-width:var(--width-read);margin:clamp(2.4rem,5vw,3.6rem) auto 0;
  padding-top:1.6rem;border-top:1px solid var(--border-hairline-hi);
  font-family:var(--font-display);font-size:clamp(1.02rem,1.8vw,1.25rem);
  line-height:1.65;color:var(--text-secondary);
}

.opus-season{margin-top:1.6rem;text-align:center}

/* La obra completa */
.opus{position:relative;overflow:hidden;text-align:center;
  padding:clamp(2.4rem,5vw,4.5rem)}   /* sin radio (DA-1 ratificada: códice) */
.opus-fig{
  font-family:var(--font-display);font-size:clamp(2.6rem,6vw,4.4rem);font-weight:500;
  line-height:1.05;letter-spacing:0;margin-top:1.3rem;
}
.opus-lead{margin:1.6rem auto 0;max-width:60ch}
.opus-meta{
  display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:center;margin-top:2rem;
  padding-top:1.8rem;border-top:1px solid var(--border-hairline);
}
.opus-meta div{text-align:center}
.opus-meta b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:400;
  color:var(--accent);font-variant-numeric:tabular-nums}
.opus-meta span{
  display:block;font-family:var(--font-label);font-size:.56rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-faint);margin-top:.4rem;
}

.credit{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;justify-content:center;
  font-family:var(--font-label);font-size:.6rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-faint);
}
.credit b{color:var(--text-secondary);font-weight:400}

/* ── Colabora ────────────────────────────────────────────────────── */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.person{padding:1.9rem;display:flex;flex-direction:column;
  background:var(--surface-base);border:1px solid var(--border-frame)}   /* lámina (DA-1 ratificada: códice) */
.person-face{
  width:72px;height:72px;margin-bottom:1.3rem;   /* lámina cuadrada (DA-1 ratificada: códice) */
  display:grid;place-items:center;border:1px solid var(--border-accent);
  font-family:var(--font-display);font-size:1.35rem;font-style:italic;
  color:var(--accent);background:linear-gradient(150deg, var(--wash-gold-strong), transparent);
}
.person.open{border-style:dashed}
.person.open .person-face{border-style:dashed;color:var(--text-faint)}
.person-name{font-family:var(--font-display);font-size:1.25rem;font-weight:400}
.person-role{
  font-family:var(--font-label);font-size:.58rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--accent);margin-top:.5rem;
}
.person-bio{margin-top:1rem;font-size:.84rem;color:var(--text-muted);line-height:1.75;flex:1}
.person-tags{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:1.3rem}
.person-tags i{
  font-style:normal;font-family:var(--font-label);font-size:.54rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--text-faint);
  border:1px solid var(--border-frame);padding:.4em .75em;
}

/* Roster (marquesina 46s — la mueve GSAP, §5.3) */
/* La separación va DENTRO de la tarjeta y no como `gap` de la pista: con
   `gap`, doce tarjetas dejan once separaciones y el -50% del bucle no
   coincide con el paso de seis —la costura saltaba 8px, medio espacio, en
   cada vuelta—. Con el margen en la tarjeta, la mitad geométrica es
   exactamente el paso de seis y la vuelta es invisible. */
.roster{display:flex;width:max-content;will-change:transform}
.roster-card{
  margin-right:1rem;
  /* FASE 21zd · el relleno vertical baja de 1.6rem a .9rem. El carné NO se
     toca —sigue en 4:5 y al ancho de la tarjeta—: lo que se recorta es el aire
     de arriba y abajo, que es lo único que sobraba. */
  width:170px;flex:none;padding:.9rem 1rem;text-align:center;
  border:1px solid var(--border-frame);
  background:var(--surface-base);                   /* lámina (DA-1 ratificada: códice) */
}
.roster-face{
  width:64px;height:64px;margin:0 auto .9rem;   /* lámina cuadrada (DA-1 ratificada: códice) */
  display:grid;place-items:center;border:1px solid var(--border-accent);
  font-family:var(--font-display);font-size:1.25rem;font-style:italic;
  color:var(--accent);background:linear-gradient(150deg, var(--wash-gold-strong), transparent);
}
.roster-card.open .roster-face{border-style:dashed;color:var(--text-faint)}
/* ══════════════════════════════════════════════════════════════════
   LOS RETRATOS (fase 21zb)
   ══════════════════════════════════════════════════════════════════
   Dos formas del mismo rostro, y las dos ya venían dibujadas en el sistema:
   la LÁMINA vertical 4:5 del díptico y de la página de firma, y el CUADRADO
   de las fichas, el claustro y el carrusel. Lo único que cambia es que el
   hueco deja de estar vacío: ni un tamaño nuevo, ni una caja nueva.

   Y NO CONTRADICE EL §3.6 de USO.md. La regla dice que si se distingue dónde
   empieza y acaba una imagen, está mal integrada — y habla de las ESCENAS,
   que tienen que disolverse en la página. La lámina es lo contrario por
   definición: un marco declarado, con su filete y su pie de «Lám.», que es
   como un códice presenta un retrato. El borde no se le escapa a la imagen:
   lo pone el sistema, y estaba antes que la fotografía. */
.person-face img,
.roster-face img,
.elementor .author-box.elementor-widget-author-box .elementor-author-box__avatar img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Con retrato, el lavado de oro y el filete de la inicial sobran: la lámina
   ya la dibuja el marco de la caja. Se apaga sólo donde hay imagen. */
.person-face:has(img),
.roster-face:has(img),
.roster-face:has(.placeholder-portrait){background:none}
/* FASE 21ze · LAS TARJETAS SIN RETRATO, AL MISMO PESO. Las cajas ya eran
   idénticas —210×330 la tarjeta y 176×220 la lámina, medido—: lo que no
   estaba a la par era el contenido, una imagen de 174×218 frente a un glifo
   de 20px flotando en el marco. Ahora llevan el HUECO MARCADO del sistema, el
   mismo rayado de pergamino del díptico, que es como este sitio dice
   «pendiente» sin parecer un error. El lavado de oro se apaga: el rayado ya
   es el fondo, y superponerlos ensuciaba los dos. */
/* Y ocupa la lámina entera, no sólo su ancho: `.roster-face` es una retícula
   con `place-items:center`, así que sin el alto el hueco se quedaba corto y las
   tres líneas de la tarjeta caían a distinta altura que las de las tarjetas con
   foto — y con ellas el alto del carrusel, que es lo que la 21zd dejó ajustado
   al píxel. */
.roster-face .placeholder-portrait{width:100%;height:100%;aspect-ratio:auto}
/* FASE 21zf · LOS TRES PUNTOS VUELVEN, Y EN BORGOÑA. Los retiré en la 21ze
   creyéndolos un indicador de carga: son elemento de identidad de la marca
   —el símbolo de comunicación digital del logotipo de Refugio en la Palabra—,
   y por eso van en `--accent-alt`, que es el ornamento del sistema, y no en el
   crema apagado del hueco. */
/* FASE 21zh · Y AL TAMAÑO EN QUE SE LEE EL COLOR. A 10px el borgoña no se
   aprecia y el encargante pide que se lea, porque el color es parte de lo que
   los puntos dicen. Suben a 1.25rem = 20px, que es el MÁXIMO DE COMPONENTE del
   §1.7 —el mismo cuerpo que el ¶ del cajón (L721)—: crecen al doble sin abrir
   una excepción a la escala sellada. `letter-spacing:0` porque el tracking de
   la etiqueta añade un hueco DETRÁS del último punto y descentra el glifo esa
   misma cantidad; `text-transform:none` porque no son texto, son marca. */
.roster-face .placeholder-portrait span{
  color:var(--accent-alt);
  font-size:1.25rem;letter-spacing:0;text-transform:none;
  line-height:1;padding:0;gap:0;
}
/* FASE 21zf · EL DESNIVEL DE 16px, DIAGNOSTICADO Y NO RESUELTO. Medido: las
   tarjetas sin retrato colocan su lámina en y=31 y las de foto en y=15, y con
   ellas el nombre (263 frente a 247) y la función (299 frente a 283). Probé
   `align-items:flex-start` en la pista y EMPEORA: iguala el origen pero rompe
   la igualdad de altos —314 frente a 330—, que es de lo que depende el alto del
   carrusel fijado en la 21zd. Revertido a propósito: mejor el desnivel conocido
   que una fila de cajas desiguales. El origen del 16px está DENTRO de la
   tarjeta y no en la pista; queda medido y pendiente. */

/* EL CARRUSEL · FORMATO DE CARNÉ (fase 21zc, encargante).
   La lámina cuadrada de 112px pasa a retrato vertical y la tarjeta crece de
   170 a 210: es donde se observa a los colaboradores y pedía presencia.
   LA PROPORCIÓN ES LA DEL SITIO, 4:5, y no una nueva. El sistema ya la declara
   en `.plate-frame img` y en `.placeholder-portrait`, y la ficha técnica del
   retrato (IMAGENES-PENDIENTES B2) pide vertical 4:5: un carné con su propia
   medida abriría una segunda proporción vertical para nada.
   EL ANCHO EN PORCENTAJE, no en píxeles: así la lámina sigue a la tarjeta si
   la tarjeta vuelve a cambiar, sin que haya que recalcular dos números.
   Y AHORA LA TARJETA SÍ PUEDE CRECER. En la 21zb la dejé quieta porque con una
   duración fija en el guion, alargar la pista era acelerar la marquesina sin
   decidirlo. Desde la 21zc la duración se calcula de la velocidad y del ancho
   real de una copia, así que la pista puede medir lo que haga falta: el ritmo
   se mantiene en los 24,3 px/s del §5.3 con seis tarjetas o con veinte. */
.roster-card{width:210px}
.roster-face{width:100%;height:auto;aspect-ratio:4/5;margin:0 auto .7rem}
.roster-name{font-family:var(--font-display);font-size:1rem;font-weight:400}
.roster-role{
  font-family:var(--font-label);font-size:.55rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-faint);margin-top:.4rem;
}

/* ── Kerigmaté ───────────────────────────────────────────────────── */
/* FASE 15 · RETIRADA de `.k-cross`. Era una cruz dibujada con dos barras de
   pseudo-elemento haciendo de pieza gráfica, y la dirección artística del
   proyecto parte de imágenes generadas: un sucedáneo de código no vale como
   arte, y se retira en vez de esconderse. También sale del marcado de la
   cabecera de Kerigmaté (widget 128de6c de la página 46), que es donde se
   usaba, y la columna que queda se llena con una pieza propia (decisión D2).

   DÓNDE ESTÁ EL LÍMITE, porque no todo filete es ornamento: los guiones de
   `.label::before` y `.bento-note::before` y los bolos de `.tag .dot` y
   `.perks li::before` SE QUEDAN. Una raya de 26px delante de un rótulo y un
   punto de 5px delante de un ítem son puntuación —el equivalente gráfico de
   una viñeta o una raya de diálogo—, no una figura. La cruz no: la cruz es
   una imagen, y una imagen se pide. */

.letters{display:grid}
.letter{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;
  padding:1.5rem 0;border-bottom:1px solid var(--border-hairline);
  transition:padding-left var(--dur-mid) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){a.letter:hover{padding-left:1rem}}
a.letter:active{padding-left:1rem}   /* solo las filas que de verdad enlazan: mientras las cartas sean <article> sin destino, el gesto de enlace sería una promesa falsa */
.letter-num{font-family:var(--font-display);font-size:1.05rem;color:var(--accent);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.letter h4{font-family:var(--font-display);font-size:clamp(1.25rem, 1.9vw, 1.35rem);font-weight:400;
  transition:color var(--dur-fast)}
@media (hover:hover) and (pointer:fine){a.letter:hover h4{color:var(--accent)}}
a.letter:active h4{color:var(--accent)}
.letter p{
  font-family:var(--font-label);font-size:.58rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-faint);margin-top:.45rem;
}
.letter-go{
  font-family:var(--font-label);font-size:.6rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--accent);white-space:nowrap;
}

/* Enlace de rito — subrayado en grado sellado (§1.5 --border-gold-sealed) */
/* Enlace de rito: la portada manda (L1905) — Inter en caja de frase,
   oro con subrayado sellado; nada de versalitas (§4). */
.link-rite{
  font-family:var(--font-body);font-size:var(--size-small);font-weight:400;
  color:var(--accent);
  border-bottom:1px solid var(--border-gold-sealed);padding-bottom:2px;   /* portada L1905 */
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){.link-rite:hover{color:var(--accent-hi);border-color:var(--accent-hi)}}
.link-rite:active{color:var(--accent-hi);border-color:var(--accent-hi)}

/* La negativa (captación de Kerigmaté) */
/* ── LA NEGATIVA · RETIRADA ENTERA en la fase 21d ─────────────────────
   Aquí vivían `.refusal`, `.refusal-no`, `.refusal-not` con sus tachados
   y sus ordinales, y `.refusal-zero` con su caja de lavado de oro.
   Las retira el encargante por derogación expresa: el bloque estaba
   construido CONTRA el marketing de infoproductos y, para negarlo,
   primero lo invocaba — el visitante leía tres embudos de venta antes de
   saber qué es Kerigmaté. Aquí no nos comparamos con academias digitales
   ni con webs de infoproductos, ni siquiera para negarlas.
   Lo que ocupa su sitio no es otra caja: es el argumento verdadero de la
   página, en prosa a ancho de lectura (§4.5, registro del guion).
   Censadas a cero en las siete páginas antes de borrar. */

/* La primera carta. Era `.refusal-zero`, una caja con marco de oro y
   lavado: uno de los rectángulos cerrados que el registro códice no
   quiere. Pasa a entrada de códice —filete arriba, contenido sobre el
   fondo desnudo—, como las láminas de La Schola. */
.first-letter{
  margin-top:2.4rem;padding-top:1.5rem;
  border-top:1px solid var(--border-gold-frame);
  max-width:var(--width-read);
}
.first-letter .label{margin-bottom:.8rem}
.first-letter p{font-size:.92rem;color:var(--text-secondary);line-height:1.8}
.first-letter+.prose{margin-top:1.7rem}
/* ── EL CIERRE DE LA CARTA · fase 21d ─────────────────────────────────
   Aquí vivía `.refusal-belong`, que componía «Somos 2.500 y no nos
   conocemos de nada». Retirada con su cifra por dos motivos del
   encargante: el 2.500 es `data-fig="almas"` —almas acompañadas en TODAS
   las plataformas, no lectores de la carta—, o sea una cifra prestada, y
   ésta es la página que menos se lo puede permitir; y «no nos conocemos
   de nada» es voz de comunidad digital, que no es lo que une aquí.
   Lo que la sustituye no lleva número: dice qué une a quien está dentro,
   que era la pregunta. Sin cifra no envejece ni hay que actualizarla. */
/* Estado del alta (fase 21d). Dice que el formulario no está abierto y por
   qué, sin tocar la nota del encargo que lo acompaña. Voz de aviso, no de
   error: `--text-soft` y cuerpo pequeño, como la fórmula de estado que La
   Schola usa en sus quince láminas. Se borra entero al desbloquear. */
.form-state{
  font-size:.8rem;line-height:1.7;color:var(--text-soft);
  max-width:44ch;margin-top:.9rem;padding-top:.9rem;
  border-top:1px solid var(--border-hairline);
}

/* FASE 22a · LA MISMA NOTA, A LA MEDIDA DEL PIE. `.form-state` lleva filete
   superior y 44ch: en el pie, donde la columna es estrecha y ya hay filetes,
   sobra el filete y sobra el ancho. Misma tinta y misma jerarquía —es el mismo
   hecho dicho en el mismo sitio del sistema—, sin el aparato. */
/* FASE 23m · LA CASILLA DE CONSENTIMIENTO DEL PIE. Va DEBAJO del campo y del
   botón, no entre medias: la fila de alta es una sola línea y meterle una
   casilla dentro la parte en dos. Cuerpo de nota, no de formulario, porque es
   lo que se lee después de decidir escribir el correo. */
/* FASE 23n · LA CASILLA CAE A SU PROPIA LÍNEA, que es lo que faltaba.
   El pie declara «.footer .inline-form{flex-wrap:nowrap}» y
   «.footer .inline-form input{min-width:0}»: dos reglas escritas para una fila
   de DOS elementos —campo y botón—. En la 23m le metí un TERCERO, la casilla, y
   con nowrap y sin suelo de ancho **el campo se comprimió a 0px**: servido,
   funcional y imposible de escribir. Medido en cinco anchos: 0px en cuatro, 4px
   en móvil.
   Se corrige DONDE ESTÁ LA CAUSA —la fila— y no tocando el campo: con casilla
   la fila sí envuelve y la casilla ocupa línea entera. El «:has()» deja intacta
   la regla original allí donde no hay casilla, que es para lo que se escribió.
   ⚠ Y la lección, que ya va repetida: **añadir un elemento a una fila ajena es
   cambiar su reparto.** La regla que la gobernaba estaba bien; lo que no
   encajaba era mi tercer hijo. */
.footer .inline-form:has(.form-consent){flex-wrap:wrap}
.footer .inline-form .form-consent{flex:0 0 100%}

/* ── LA PÁGINA DE SUSCRIPCIÓN · fase 23r ──────────────────────────
   Cinco estados —confirmado, confirmación pendiente, pedir la baja, dado de
   baja y error— con la misma anatomía: un titular, uno o dos párrafos y a veces
   un botón. El contenido lo genera el shortcode, así que aquí no hay dónde
   colgar clases: se maqueta por la clase del <body> y sobre etiquetas desnudas.

   CENTRADA EN EL EJE VISUAL, no pegada a la cabecera: `min-height` en unidades
   de ventana y centrado en los dos ejes. Se usa `svh` con respaldo en `vh`
   porque en móvil la barra del navegador entra y sale, y con `vh` la pantalla
   quedaría descentrada justo donde más se nota.

   EL RETO ES LA CONTENCIÓN, NO EL RELLENO: una frase bien puesta en una
   pantalla casi vacía. Ni un ornamento más que el filete de la despedida. */
body.suscripcion .site-main{
  display:flex;align-items:center;justify-content:center;
  min-height:66vh;min-height:66svh;
  padding-block:var(--space-block);
  padding-inline:var(--gutter);
}
body.suscripcion .page-content{width:100%;max-width:46ch;margin-inline:auto}

body.suscripcion .page-content h1,
body.suscripcion .page-content h2,
body.suscripcion .page-content h3{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.9rem, 3.6vw, 2.75rem);line-height:1.12;
  color:var(--text-primary);margin:0 0 1.4rem;
}
body.suscripcion .page-content p{
  color:var(--text-muted);line-height:1.85;margin:0 0 1.05em;
  max-width:none;
}
body.suscripcion .page-content p:last-child{margin-bottom:0}
body.suscripcion .page-content a{color:var(--accent);border-bottom:1px solid var(--border-hairline-hi)}
@media (hover:hover) and (pointer:fine){body.suscripcion .page-content a:hover{color:var(--accent-hi)}}
body.suscripcion .page-content a:active{color:var(--accent-hi)}

/* EL BOTÓN DEL SHORTCODE hereda el tratamiento de los del sitio. Se cubren las
   tres formas que el plugin puede emitir —enlace, `button` y `input`— porque
   con los estados en blanco no se puede comprobar cuál usa (fase 23r). */
body.suscripcion .page-content .tnp-button,
body.suscripcion .page-content button,
body.suscripcion .page-content input[type="submit"]{
  display:inline-block;margin-top:1.6rem;
  font-family:var(--font-label);font-size:var(--size-label);
  letter-spacing:var(--track-btn);text-transform:uppercase;
  padding:1rem 2.2rem;border:1px solid var(--border-gold-frame);border-radius:0;
  background:none;color:var(--accent);cursor:pointer;
  transition:color var(--dur-fast),border-color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){body.suscripcion .page-content .tnp-button:hover,body.suscripcion .page-content button:hover,body.suscripcion .page-content input[type="submit"]:hover{
  color:var(--accent-hi);border-color:var(--accent-hi);
}}
body.suscripcion .page-content .tnp-button:active,body.suscripcion .page-content button:active,body.suscripcion .page-content input[type="submit"]:active{
  color:var(--accent-hi);border-color:var(--accent-hi);
}

/* EL CAMPO, que en la 23r se quedo sin vestir. Entonces se cubrio el boton en
   sus tres formas posibles, pero no el `input` de texto, y el resultado era la
   CAJA BLANCA del navegador: el unico blanco del sitio entero, contra la ley
   del logotipo. Se ve a simple vista a 390 px —hallazgo de la re-auditoria de
   la 26V, mirando las once paginas— y no se veia en las cifras porque ninguna
   sonda mide el color de un control.

   Trato identico al de los campos de Colabora (`.field input`, mas arriba):
   fondo `--surface-card`, filete de pelo, sin radio, oro al enfocar. Se cubren
   las variantes que el plugin puede emitir, igual que se hizo con el boton, y
   se excluye el `submit` para no pisar la regla de arriba. */
body.suscripcion .page-content input[type="email"],
body.suscripcion .page-content input[type="text"],
body.suscripcion .page-content .tnp-field input:not([type="submit"]){
  width:100%;max-width:500px;box-sizing:border-box;
  background:var(--surface-card);
  border:1px solid var(--border-hairline);border-radius:0;
  padding:.95em 1.1em;
  font-family:var(--font-body);font-size:.9rem;font-weight:400;
  color:var(--text-primary);
  transition:border-color var(--dur-fast), background-color var(--dur-fast);
}
body.suscripcion .page-content input[type="email"]:focus,
body.suscripcion .page-content input[type="text"]:focus,
body.suscripcion .page-content .tnp-field input:not([type="submit"]):focus{
  outline:none;border-color:var(--accent);
}
body.suscripcion .page-content input::placeholder{color:var(--text-placeholder)}
body.suscripcion .page-content .tnp-field label{
  display:block;margin:0 0 .55rem;
  font-family:var(--font-label);font-size:var(--size-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-muted);
}

/* LA DESPEDIDA DE LA BAJA. No es un acuse de recibo: es lo último que lee
   alguien que se va, y se lee entero o no se lee. Aire y peso propios, con el
   filete que lo separa del párrafo funcional de arriba.
   ⚠ Necesita que el copy envuelva ese texto en `<div class="despedida">`: el
   shortcode no puede distinguirlo solo. Anotado en BITACORA, fase 23r. */
body.suscripcion .page-content .despedida{
  margin-top:2.6rem;padding-top:2rem;
  border-top:1px solid var(--border-hairline);
}
body.suscripcion .page-content .despedida p{
  font-family:var(--font-display);font-size:1.125rem;line-height:1.7;
  color:var(--text-secondary);
}
body.suscripcion .page-content .despedida p:last-child{color:var(--accent-alt)}

.form-consent{
  display:flex;align-items:flex-start;gap:.5rem;
  margin-top:.7rem;max-width:40ch;   /* 23zzl · era 34ch; el porqué, abajo */
  font-size:.72rem;line-height:1.55;color:var(--text-dim);
}
.form-consent input{flex:none;margin-top:.2rem;accent-color:var(--accent)}
.form-consent a{color:var(--text-secondary);border-bottom:1px solid var(--border-hairline-hi)}
@media (hover:hover) and (pointer:fine){.form-consent a:hover{color:var(--accent-hi)}}
.form-consent a:active{color:var(--accent-hi)}

/* FASE 23zzl · EL TOPE DE `.form-consent` SUBE DE 34ch A 40ch, y no es retoque
   de gusto: a 34ch (247 px) la frase de 44 caracteres caía en DOS líneas en el
   formulario de Kerigmaté y en la captación de la portada, que tienen 602 px
   disponibles. El corte está entre 34ch y 35ch —falla por siete píxeles— y se
   ponen 40 para dejar cinco de margen.
   ES INERTE EN EL PIE, medido y no supuesto: su columna da 227 px, por debajo
   incluso de los 247 del tope viejo, así que cualquier valor por encima de 227
   no lo mueve. El pie sale en las once páginas; si el tope le hubiera atado,
   este cambio se habría visto once veces.
   LA CUARTA INSTANCIA —la de la portada— la encontró la sonda 10 sola. El censo
   de la 23zzk decía tres y eran cuatro.

   FASE 23zzk · EL CONTENIDO VA ENVUELTO. Esta clase es `display:flex`, así que
   el texto tiene que ir dentro de UN SOLO elemento. Suelto, cada tramo contiguo
   se vuelve un elemento flex anónimo y la frase se reparte en columnas
   paralelas: así caía la de Colabora, en columnas de 26, 57 y 126 px. Regla en
   SISTEMA.md §2.9.

   `.wide` · la casilla de Colabora se alinea con su `textarea` (551 px a 1920,
   431 a 1024) en vez de topar antes. Con el copy corto la línea cae en UNA sola
   a cualquier tope por encima de 35ch, así que HOY ESTE MODIFICADOR YA NO HACE
   FALTA: se deja puesto a propósito para no mezclar dos cambios en la misma
   pasada, y se retira en la fase 27 si sigue sobrando. */
.form-consent.wide{max-width:none}

.form-state-min{
  font-size:.72rem;line-height:1.65;color:var(--text-dim);
  margin-top:.7rem;max-width:34ch;
}

/* ── LAS TRES LEGALES · fase 23b ─────────────────────────────────
   No son letra pequeña: se componen como páginas del sitio, con el mismo
   capítulo, el mismo H1 y la prosa a `--width-read` (68ch), igual que la
   entrada individual.
   EL AJUSTE QUE HIZO FALTA, y es la especificidad atómica de siempre: medido,
   el `.wrap` del CUERPO recibía `max-width:100%` de `.e-flexbox-base
   .e-atomic-element` (0,2,0) mientras el de la cabecera sí llegaba a los
   1300px —el texto arrancaba en x=0 y el titular en x=298—. Se sube a (0,3,0)
   y se acota a estas páginas con la clase `legal` del <body>, para no tocar
   ningún otro `.wrap` del sitio. */
body.legal .wrap.e-atomic-element{max-width:var(--width-max)}
body.legal .wrap.e-atomic-element:not(.page-head .wrap){padding-block:clamp(3rem,6vh,4.5rem) clamp(4rem,9vh,7rem)}
body.legal .prose h2{margin-top:2.6em}
body.legal .prose h2:first-child{margin-top:0}
body.legal .prose ul{margin-left:1.1rem;list-style:disc}
body.legal .prose li+li{margin-top:.5em}
body.legal .legal-date{margin-top:3.5rem;padding-top:1.4rem;border-top:1px solid var(--border-hairline);color:var(--text-dim);font-size:.85rem}

/* FASE 23c · LOS TRES ASIENTOS DE LA SCHOLA · §3.8, y el fallo no era el que
   parecía. Medidas las CAJAS, los tres alineaban al píxel —361×401, mismo
   origen, texto a x+0—, así que la primera lectura dijo «no hay defecto». Lo
   había, y estaba en el AIRE INFERIOR: la retícula estira los tres a la altura
   del más alto, y el del medio —«Cómo trabaja cada tema», el único con lista—
   llegaba con **0px** de holgura contra su borde mientras los otros dos dejaban
   **181** y **115**. Uno apretado entre dos que flotan: eso es lo que se ve.
   §12.1 otra vez, y por eso se anota: medir la caja cuando lo que respira es el
   contenido.
   Se corrige CON LA RETÍCULA y no con márgenes sueltos: `align-items:start`
   retira el estirado y cada asiento toma su altura, de modo que ninguno queda
   comprimido ni sobra medio bloque de vacío. El ritmo interno de la lista pasa a
   `gap`, y el cierre recibe el aire posterior que el §3.8 exige. */
.tenets{align-items:start}
/* FASE 23e · LA CAUSA, POR FIN, Y ESTABA EN LA HOJA DESDE ANTES DE MIS PARCHES.
   Dos pasadas ajustando el margen del titular y de la lista: la 23d lo bajó 16px
   y lo dejó por encima de los laterales. **Se estaba compensando en el sitio
   equivocado**, que es lo que el encargante dijo.

   Lo que la lista aporta y el párrafo no está en L2617:
       .tenet li{padding:.7rem 0; border-bottom:1px solid ...}
   Cada ítem lleva **11,2px de relleno superior**, y el PRIMERO se lo suma al
   margen de la lista. La cuenta explica las tres lecturas de esta serie:
       párrafo   16px (margin) + 0                     = 16,0px al texto
       lista     16px (margin) + 11,2 (padding del li) = 27,2px  ← el defecto
       lista 23d  0px           + 11,2                 = 11,2px  ← pasado de frenada
   Descartado además el carácter oculto que el encargante hizo sospechar: entre
   cada </h3> y su contenido hay salto de línea y sangría, idénticos en los tres,
   sin &nbsp; ni nada fuera de ASCII. Comprobado sobre el HTML servido.

   SE NEUTRALIZA EN LA LISTA, no en el titular ni en el asiento: sólo el PRIMER
   ítem pierde su relleno superior. Con eso los tres textos arrancan a 16px y el
   ritmo interno de la lista —relleno y filete de cada ítem— queda intacto, que
   era el diseño original.
   Y se RETIRAN las dos capas que puse encima: la retícula con hueco duplicaba el
   ritmo que ya daban relleno y filete, y el margen del cierre inventaba un valor
   donde .tenet p ya ponía el suyo. Tres reglas menos y el defecto resuelto. */
.tenets .tenet>ul>li:first-child{padding-top:0}

/* ── «AL TERMINAR EL NIVEL AVANZADO» (fase 26Z-c) ─────────────────
   Bloque nuevo, con el copy que el guion del Nivel Avanzado permitia
   escribir: los ocho puntos de lo que el alumno sale sabiendo hacer.

   Va con el vocabulario de `.tenet` —filete de entrada, sin caja— pero
   FUERA de la reticula de tres, porque no es un principio de la ruta sino
   una ficha de UN nivel, y porque metido en una tarjeta la habria hecho
   trescientos pixeles mas alta que las otras dos: `.courses` estira, y esa
   altura se la habrian comido en blanco Initium y Studium.

   Fuera de la reticula ocupa la medida entera —1172 px a 1920—, y una linea
   de 0,84rem a ese ancho pasa de 140 caracteres. Dos columnas la dejan en
   unos 68, que es medida de lectura. Por debajo de 860 vuelve a una sola.
   `break-inside` es obligado: cada item lleva filete inferior, y un item
   partido entre columnas parte tambien el filete. */
.tenet.outcome{margin-top:clamp(3rem,6vw,4.5rem)}
/* FASE 26ZC · LAS DOS COLUMNAS EMPEZABAN DESALINEADAS, y no por donde
   parecia. Medido a 1920: las dos CAJAS arrancan en la misma y —8359 las
   dos—, asi que el desalineado no estaba en la reticula. Lo que bajaba era
   LA TINTA: `:first-child` solo alcanza al primer punto de toda la lista, y
   el primero de la SEGUNDA columna conservaba sus 11 px de `padding-top`.
   Once pixeles de diferencia entre el primer renglon de la izquierda y el de
   la derecha. Es el §12.40 otra vez: la caja no es el texto.

   Se apaga tambien en el quinto, que es el que abre la columna derecha. Va
   por `nth-child` y no por un selector de columna porque CSS no tiene
   ninguno; **depende de que la lista tenga OCHO puntos y se reparta 4 y 4**,
   que es lo medido. Si algun dia cambia el numero de puntos, hay que volver
   aqui — y por eso queda escrito. */
.tenet.outcome>ul>li:first-child,
.tenet.outcome>ul>li:nth-child(5){padding-top:0}
@media (min-width:861px){
  .tenet.outcome>ul{
    columns:2;
    column-gap:clamp(1.8rem,3.2vw,2.75rem);
  }
  .tenet.outcome>ul>li{break-inside:avoid}
}

/* ── EL RESALTADO EN ORO (fase 26ZB) ──────────────────────────────
   Cada punto se ilumina al pasar el raton por encima y al tocarlo. El oro es
   `--accent` (#CB9A31), que ya esta en la paleta: no entra ningun color
   nuevo. Y se toca SOLO el color — ni tamano, ni peso, ni posicion—, porque
   mover el texto al pasar por encima obliga a leerlo dos veces.

   `:active` no sobra: en pantalla tactil el `:hover` se emula al tocar, pero
   se queda PEGADO hasta que se toca otra cosa. Con `:active` la iluminacion
   acompana al dedo mientras dura el toque, que es lo que se pidio.

   `-webkit-tap-highlight-color` a transparente quita el recuadro gris que
   Chrome de Android pinta encima al tocar, y que taparia el oro.

   ⚠ NI UN `tabindex`, y es deliberado. Son ocho parrafos de lectura, no
   controles: meterlos en el orden de tabulacion pondria ocho paradas
   inertes en el camino del teclado, que es una perdida y no una ganancia.
   El oro no comunica nada que el texto no diga ya —es enfasis, no
   informacion—, asi que quien navega con teclado no se pierde nada.
   `:focus-within` si se deja, para el dia en que un punto lleve un enlace
   dentro: entonces el foco de ese enlace ilumina su linea, y el anillo de
   foco del sistema (§3.9) sigue viendose encima. */
.tenet.outcome>ul>li{
  transition:color var(--dur-fast) ease-out;
  -webkit-tap-highlight-color:transparent;
}
/* ── EL `:hover` EN TACTIL · LO QUE SE PROBO Y POR QUE SE DESHIZO ────────
   EL DIAGNOSTICO DE PARTIDA ERA BUENO: en un telefono no hay puntero que se
   vaya, el navegador aplica `:hover` al tocar **y lo deja puesto hasta que se
   toca otra cosa**. El resaltado deja de ser del momento del toque y se queda
   encendido en la ultima cosa tocada.

   EL ARREGLO DE LA 27b-a FUE EL EQUIVOCADO Y SE REVIERTE EN LA 27b-b. Se
   acotaron 43 reglas —46 con las tres familias de puntos— dentro de
   `@media (hover:hover) and (pointer:fine)`. Con eso el estado dejo de
   quedarse pegado, si; pero **dejo de existir**: en el telefono ya no se veia
   donde se pulsaba. Se retiro senal para arreglar que la senal no se apagara.

   LA DISTINCION, que es la que hay que retener y la que yo no hice:

       que el estado se QUEDE   -> defecto, y hay que arreglarlo
       que el estado EXISTA     -> funcion, y hay que conservarla

   **Un toque tiene que dar senal y soltarla.** Acotar por puntero solo sabe
   hacer la mitad: quita la senal entera. Lo que hace falta es que el estado se
   levante al levantar el dedo, y eso no es una consulta de medios.

   LO QUE SE MIDIO Y NO CAMBIA: las siete reglas `html a:hover`,
   `html [type=button]:hover`, `html .elementor-button:hover`,
   `html .elementor-icon:hover`, `html .e-tab-base:hover`, `.tail .burger:hover`
   y la del `author-box` **no son adorno: son neutralizadores** del
   `a:hover{color:#336}` de `reset.css` de hello-elementor, que es azul y no
   esta acotado. Nunca entraron en el acotado y siguen fuera.

   El estado del fichero es hoy, en todo lo que toca a `:hover`, **identico al
   anterior a la 27b-a**: verificado linea a linea contra `HEAD~1`.
   El defecto del estado pegado sigue abierto en BLOQUEOS, con las salidas
   medidas y sin aplicar ninguna.
   ──────────────────────────────────────────────────────────────────────── */
.tenet.outcome>ul>li:active,.tenet.outcome>ul>li:focus-within{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.tenet.outcome>ul>li:hover{color:var(--accent)}}
.tenet.outcome>ul>li>b{transition:color var(--dur-fast) ease-out}
.tenet.outcome>ul>li:active>b,.tenet.outcome>ul>li:focus-within>b{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.tenet.outcome>ul>li:hover>b{color:var(--accent)}}

/* Quien pide menos movimiento no pide menos contraste: el color cambia
   igual, pero de golpe y sin transicion. */
@media (prefers-reduced-motion:reduce){
  .tenet.outcome>ul>li,
  .tenet.outcome>ul>li>b{transition:none}
}

/* ── EL MISMO RESALTADO EN LOS TRES NIVELES (fase 26ZC) ───────────
   Cada tema de cada tarjeta se ilumina en oro al pasar el raton y al tocar,
   igual que los ocho puntos de «Al terminar…».

   Y UNA EXCEPCION: la linea de requisito —`.course-req`, la que dice si el
   nivel pide formacion previa— se distingue en BORGOÑA. `--accent-alt`, que
   ya vale #7A1E2E y esta en la paleta desde la §1.5: no entra color nuevo.
   La distincion no es decorativa: el oro marca lo que el nivel DA, y el
   borgoña lo que el nivel PIDE. */
.courses .course-topics>li{
  transition:color var(--dur-fast) ease-out;
  -webkit-tap-highlight-color:transparent;
}
.courses .course-topics>li>b{transition:color var(--dur-fast) ease-out}

.courses .course-topics>li:active,.courses .course-topics>li:focus-within,.courses .course-topics>li:active>b,.courses .course-topics>li:focus-within>b{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.courses .course-topics>li:hover,.courses .course-topics>li:hover>b{color:var(--accent)}}

/* ── EL BORGOÑA VA AL FILETE, NO AL TEXTO (fase 26ZD) ─────────────
   La 26ZC lo puso como COLOR DE TEXTO, se midio, y daba 1,91:1 sobre el
   fondo del sitio. No es una cifra nueva: **este proyecto ya habia
   descartado el borgoña como color de texto por esa misma razon**, y la
   sonda `mira-correo` lo imprime en cada pasada —«borgona sobre lienzo
   1.91:1 (no se usa)»—. Meterlo por otra puerta habria derogado una decision
   sin decirlo. Decision del encargante en la 26ZD: **al filete.**

   ¿Filete izquierdo o superior? SUPERIOR, y lo decide la maqueta:
   `.course{padding:1.7rem 0 0}` no tiene relleno horizontal, asi que un
   filete a la izquierda o indenta el texto —y entonces el texto SE MUEVE al
   pasar por encima, que es justo lo que no puede pasar— o se sale de la
   tarjeta. **Y `.course-req` YA TIENE un filete de entrada**, su
   `border-top`: solo hay que encenderlo.

   Va como pseudoelemento superpuesto y no cambiando el `border-color`
   porque un borgoña de 1 px sobre #0A0C10 se ve poco —1,91:1 tambien como
   grafico—: el halo, en dos capas como los filetes del 404, es lo que lo
   hace visible sin tocar el color. Y superpuesto en `top:-1px` no mueve
   nada: el filete de debajo sigue ahi, del mismo grosor.

   Se distingue del oro sin esfuerzo porque son DOS EJES distintos: el oro
   tine la letra, el borgoña enciende una linea. */
.courses .course-req{position:relative;-webkit-tap-highlight-color:transparent}
.courses .course-req::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--accent-alt);
  box-shadow:0 0 5px rgba(122,30,46,1), 0 0 14px rgba(122,30,46,.7);
  opacity:0;transition:opacity var(--dur-fast) ease-out;pointer-events:none;
}
.courses .course-req:active::before,.courses .course-req:focus-within::before{opacity:1}
@media (hover:hover) and (pointer:fine){.courses .course-req:hover::before{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .courses .course-topics>li,
  .courses .course-topics>li>b,
  .courses .course-req::before{transition:none}
}

.belong{
  margin-top:2.4rem;padding-top:1.8rem;
  border-top:1px solid var(--border-hairline);
  max-width:var(--width-read);
}
.belong p{
  font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.4rem);
  line-height:1.6;color:var(--text-primary);
}

/* ── La Schola ───────────────────────────────────────────────────── */
/* Pestañas: navegación real por URL o ancla, no setTimeout (§7.2) */
.tabs{
  display:flex;gap:.25rem;padding:.4rem;width:max-content;margin-inline:auto;
  flex-wrap:wrap;justify-content:center;   /* sin radio (DA-1 ratificada: códice) */
}
.tab{
  font-family:var(--font-label);font-size:.67rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  padding:.85em 1.45em;
  color:var(--text-muted);
  transition:color var(--dur-fast), background-color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){.tab:hover{color:var(--text-primary)}}
.tab:active{color:var(--text-primary)}
.tab.on{background:var(--accent);color:var(--text-on-accent)}
/* §5.2 · sin JS no hay conmutación: todos los paneles visibles apilados */
/* ── AQUÍ ESTUVO LA TRAMPA · retirada en la fase 21a ──────────────────
   Estas dos líneas eran
       html.js .tabpane{display:none}
       html.js .tabpane.on{display:block}
   y en la fase 10 dejaron CUATRO QUINTAS PARTES de esta página
   invisibles: `html.js` la pone un guion mínimo de cabecera, así que el
   CSS ocultaba en cuanto había JavaScript, existiera o no un runtime que
   encendiera paneles. No existía. El CSS ocultaba y nadie encendía.
   Censo previo a la retirada: `.tabpane` tiene CERO usos en las siete
   páginas públicas. Se borra por la misma razón que `.lit` en la fase
   17b: una regla que sólo puede hacer daño no se deja «por si acaso».

   Lo que la sustituye está abajo, en el catálogo de La Schola, y va con
   la lógica INVERTIDA: quien oculta es `body.panelled`, y esa clase la
   pone el runtime DESPUÉS de haber encendido una entrada. Sin JS no hay
   clase, no hay nada oculto y la página se lee larga y completa. */

/* ── EL CATÁLOGO COMO PANEL NAVEGABLE (fase 21a, bloque 3) ────────────
   `body.panelled` la escribe `assets/schola.js` y sólo después de haber
   marcado una entrada activa. Si ese archivo no llega, esta regla no
   casa con nada. */
body.panelled .pane{display:none}
body.panelled .pane.on{display:block}

/* ── EL AIRE DE ARRIBA DEL PANEL (fase 26X) ───────────────────────────
   Los tres paneles son `.section`, asi que heredaban el aire superior de una
   SECCION —`--space-section` por el factor .895 de §3.8—. Medido con ventanas
   reales: 126 px a 1920x1080, 129 a 834x1112, 98 a 390x844, y con lo que pone
   la cabecera del indice el hueco total salia de 187 a 207 px.

   Y es aire mal gastado, porque el indice del catalogo NO es una seccion
   anterior: es la CABECERA DE ESTE PANEL. Va pegado arriba, tiene su filete y
   conmuta el contenido de abajo. Entre una cabecera y su contenido va aire de
   BLOQUE, no de seccion.

   Se pone la mitad del token de bloque, que deja el hueco total en unos 100 px
   en escritorio y 75 en movil, y sigue siendo responsivo porque el clamp va en
   `vh` igual que los tokens de los que sale.

   ⚠ El primer instrumento dijo que el aire era FIJO en los tres anchos. Era
   falso: medía los tres con la MISMA altura de ventana, y estos tokens van en
   `vh`, no en `vw`. Un ancho no es una ventana. */
body.panelled #niveles,
body.panelled #precios,
body.panelled #mi-area{padding-top:clamp(1.75rem, 3.5vh, 3rem)}
/* El índice se pega arriba mientras se recorre el catálogo: es lo que lo
   hace navegable de verdad y no una lista que se pierde al bajar. */
.catalog-head{position:sticky;top:74px;z-index:2;
  background:var(--surface-base);
  padding-block:1.1rem;border-bottom:1px solid var(--border-hairline)}
.tab.on{background:none;color:var(--accent-hi);
  border-bottom:1px solid var(--accent-hi)}

/* ── VOCABULARIO DE RUTAS · RETIRADO en la fase 21a ───────────────────
   Aquí vivían `.route`, `.route-head`, `.route-sigil`, `.route.open`,
   `.route-name`, `.route-desc`, `.route-teacher` y `.route-courses`, más
   `.level` con sus tres grados. Las rutas de tres niveles del encargo §4
   dejaron de existir cuando el encargante rehizo el catálogo: Salmos y
   Corpus Paulino pasaron a cursos abiertos y lo que se vende es un solo
   curso en tres niveles.
   Censadas antes de borrar, sobre el HTML servido de las SIETE páginas
   públicas: cero usos de las nueve clases. No se borra por sospecha.
   Y se borran, en vez de dejarlas «por si acaso», por la lección de la
   fase 17b: una clase que no hace nada es una trampa para el que venga
   después — la `.lit` costó tres rondas por seguir viva sin servir. */

/* La lámina de curso deja de ser caja (fase 21a, bloque 4). Era uno de
   los cincuenta rectángulos cerrados del diagnóstico y compartía fondo
   con la página, así que su borde hacía todo el trabajo. Pasa a la misma
   entrada de códice que `.open` y que las tarifas: filete arriba y el
   contenido sobre el fondo desnudo. El hover se queda —es la única
   señal de que la entrada responde— pero sobre el filete, no sobre una
   caja que ya no existe. */
.course{
  display:flex;flex-direction:column;
  padding:1.7rem 0 0;background:none;
  border:0;border-top:1px solid var(--border-gold-frame);
  transition:border-color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){.course:hover{border-top-color:var(--accent-hi)}}
.course:active{border-top-color:var(--accent-hi)}   /* nada se eleva (DA-1 ratificada: códice) */
/* `.level` (i/ii/iii) retirada con las rutas: era la píldora con borde
   del nivel, y el nivel ahora ES el nombre de la entrada (Initium,
   Studium, Corpus · §4.4). Censo previo: cero usos en las siete páginas.
   `.course-teacher` y `.course-desc` caen por lo mismo. */
.course-name{font-family:var(--font-display);font-size:1.6rem;font-weight:500;
  line-height:1.2}
.course-price{
  font-family:var(--font-display);font-size:1.75rem;font-weight:400;
  color:var(--text-primary);                        /* crema: la cifra no grita (bloque 4) */
  margin:1.4rem 0 1.1rem;font-variant-numeric:tabular-nums;
}

/* Testimonios — ⚠ de muestra, marcados en la plantilla (§7.2) */
.testimonials{columns:3;column-gap:1.3rem}
.testimonial{break-inside:avoid;margin-bottom:1.3rem;padding:1.9rem;
  background:var(--surface-base);border:1px solid var(--border-frame)}   /* lámina (DA-1 ratificada: códice) */
.stars{color:var(--accent);font-size:.8rem;letter-spacing:var(--track-btn)}
.testimonial p{font-family:var(--font-display);font-size:1.08rem;font-style:italic;
  line-height:1.5;margin-top:1.1rem}
.testimonial footer{display:flex;align-items:center;gap:.8rem;margin-top:1.5rem;
  padding-top:1.2rem;border-top:1px solid var(--border-hairline)}

/* Claustro (v8 L934–937, era «glass teacher»): lámina códice (§2.1) */
.faculty{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
/* Ficha de profesor: entrada de códice, no tarjeta (fase 21a, bloque 4) */
.teacher{padding:1.7rem 0 0;background:none;border:0;
  border-top:1px solid var(--border-hairline-hi)}
.teacher-count{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-soft);
}
/* FASE 21zc · «ESCRÍBENOS» ERA UNA PUERTA PINTADA. La ficha de la plaza abierta
   del claustro terminaba con esa palabra y no llevaba a ninguna parte — el mismo
   defecto que la caja de autor sin enlace de la 21r, y ya van dos. Ahora enlaza
   al formulario de Colabora POR SU ANCLA, `#propuesta`, no a la cabecera de la
   página: quien pulsa aterriza donde se escribe, no donde hay que volver a
   buscar. El filete lo hereda del vocabulario de rótulos navegables del pie. */
.teacher-count a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--border-hairline-hi);padding-bottom:.15em;
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
.teacher-count a:focus-visible{color:var(--accent-hi);border-bottom-color:var(--accent-hi)}
@media (hover:hover) and (pointer:fine){.teacher-count a:hover{color:var(--accent-hi);border-bottom-color:var(--accent-hi)}}
.teacher-count a:active{color:var(--accent-hi);border-bottom-color:var(--accent-hi)}

/* Precios en capas — data-price intacto (§7.3) */
.layer+.layer{margin-top:clamp(3rem,6vw,4.5rem)}
.layer-head{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline;
  margin-bottom:1.8rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border-hairline);
}
.layer-num{
  font-family:var(--font-display);font-size:1.9rem;font-weight:400;font-style:italic;
  color:var(--accent);opacity:.4;line-height:1;     /* opacidad, no rgba suelto */
}
.layer-title{font-family:var(--font-display);font-size:clamp(1.3rem,2.3vw,1.8rem);font-weight:400}
.layer-note{
  font-family:var(--font-label);font-size:.58rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-faint);margin-top:.5rem;
}

/* ── LA ÚNICA ELEVACIÓN DE LA PÁGINA · fase 21a, bloque 4 ─────────────
   El diagnóstico pedía luz: tres elevaciones disponibles y una sola
   usada, con las cincuenta cajas al mismo nivel que el fondo. Pero la
   ley §3.2 es tajante —«solo lo sellado se eleva»— y mi propia propuesta
   de la fase 16 (alternar elevación en las cuatro capas) la incumplía.
   Manda el contrato: se sella UNA capa, la 04, que es el compromiso
   máximo con el proyecto y el clímax semántico de la página; las otras
   tres se quedan sobre `--surface-base`. Es el mismo recurso con el que
   la portada separa su sección sellada, y da compás sin un filete más.
   El sangrado lateral la saca de la columna de texto para que la
   elevación se lea como banda y no como tarjeta grande. */
.layer.sealed{
  background:var(--surface-raised);
  border-block:1px solid var(--border-gold-frame);
  padding:clamp(2.8rem,5.5vw,4.2rem) clamp(1.6rem,4vw,3.2rem);
  margin-inline:clamp(-3.2rem,-4vw,-1.6rem);
}
/* El halo se gasta aquí, en la cifra de Fundator: es el segundo de los
   tres que el §3.1 concede por página (el primero, el cero de los cursos
   abiertos). Ninguna otra cifra del sitio lo lleva en esta página. */
.layer.sealed .price.mark .price-fig{text-shadow:var(--halo-figure)}

/* ── COMPÁS Y JERARQUÍA DE LAS TARIFAS · fase 21a, bloque 4 ───────────
   El diagnóstico de la fase 16 dejó aquí las tres causas raíz de que la
   página se leyera «pobre y cutre», y se corrigen las tres a la vez.

   1 · LA CAJA SE VA. Diez rectángulos con los cuatro bordes y el MISMO
   fondo que la página: no separaban por luz, sólo por filete, y por eso
   la sección se leía como rejilla de aplicación y no como catálogo de
   una escuela. Queda la entrada de códice —filete superior y contenido
   sobre el fondo desnudo—, que es la figura que la portada ya usa y que
   el encargante tiene aprobada. Y con la caja se va el degradado del
   destacado: el `.mark` deja de distinguirse por un lavado de oro de
   cuatro niveles de luminancia sobre 255 —invisible a un metro— y pasa
   a distinguirse por CUERPO y por filete, que sí se ven.

   2 · EL COMPÁS. La calle sube de 17,6 px a 44. El díptico de la portada
   respira a 70 y esta retícula respiraba cuatro veces menos. Tres
   columnas exactas por capa; la de cuatro tarifas pasa a 2×2 en vez de
   dejar una huérfana, y la de una sola deja de ocupar un tercio con dos
   tercios de negro al lado: se estira al ancho y se compone a dos
   columnas, cifra a la izquierda y argumento a la derecha.

   3 · UNA CIFRA POR CAPA, NO DIEZ. Las diez tarifas se anunciaban con el
   mismo tipo, el mismo cuerpo y el mismo oro: 24,95 € y 997 € pesaban
   igual y la página no decía cuál importa. Ahora la cifra normal va en
   crema a 2,5rem y la recomendada de cada capa en oro claro a 3,5rem.
   El halo se reserva a UNA sola de la página —Fundator, en la capa
   sellada—, porque el §3.1 da tres por página y el cero de los cursos
   abiertos ya gasta otro. */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:2.75rem}
/* La capa de cuatro tarifas no cabe en tres columnas sin dejar una sola
   en la segunda fila: pasa a 2×2, que es retícula y no sobra nada. */
.prices:has(> :nth-child(4)){grid-template-columns:repeat(2,1fr)}
.price{
  display:flex;flex-direction:column;
  padding:1.7rem 0 0;background:none;
  border:0;border-top:1px solid var(--border-hairline-hi);   /* entrada de códice */
}
.price.mark{border-top-color:var(--border-gold-frame)}

/* La capa 02 va sola: deja de ser una tarjeta huérfana en un tercio de
   fila y pasa a ser el eje de su capa, a dos columnas y ancho completo. */
.prices.solo{grid-template-columns:1fr}
.prices.solo .price{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.prices.solo .price>*{grid-column:1}
.prices.solo .price-note{grid-column:2;grid-row:1 / span 4;margin:0;align-self:start}
.prices.solo .btn{grid-column:2;grid-row:5;margin-top:1.6rem}
.prices.solo .form-note{grid-column:2;grid-row:6}

.price-name{font-family:var(--font-display);font-size:1.35rem;font-weight:400}
.price-access{
  font-family:var(--font-label);font-size:.56rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-faint);margin-top:.5rem;
}
.price-fig{
  font-family:var(--font-display);font-size:2.5rem;font-weight:400;
  color:var(--text-primary);                        /* crema: la cifra normal no grita */
  line-height:1;margin:1.2rem 0 .2rem;font-variant-numeric:tabular-nums;
}
/* La recomendada de cada capa, y sólo ella: cuerpo mayor y oro claro. Es
   el mismo recurso con el que la portada enciende una de sus cuatro
   cifras (`.figure.hi`, §2.2) — cuerpo y color, no un acento nuevo. */
.price.mark .price-fig{font-size:3.5rem;font-weight:500;color:var(--accent-hi)}
.price-fig small{font-family:var(--font-body);font-size:.8rem;color:var(--text-faint)}
.price-save{font-size:.76rem;color:var(--accent-hi);margin-top:.6rem}
.price-note{font-size:.83rem;color:var(--text-muted);line-height:1.7;margin:1rem 0 1.6rem;flex:1}
.perks{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:grid;gap:.7rem;flex:1}
.perks li{display:flex;gap:.7rem;font-size:.84rem;color:var(--text-muted);line-height:1.6}
.perks li::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-top:.6em}

/* Área del alumno — referencia visual: lo renderiza TutorLMS (§7.2);
   este CSS es el contrato de aspecto que la capa 10 somete. */
.dash{display:grid;grid-template-columns:230px 1fr;overflow:hidden;
  background:var(--surface-base);
  border:1px solid var(--border-frame)}              /* lámina (DA-1 ratificada: códice) */
.dash-side{padding:1.8rem 1.3rem;border-right:1px solid var(--border-hairline);
  background:var(--surface-card)}                    /* sin vidrio (DA-1 ratificada: códice) */
.dash-user{text-align:center;padding-bottom:1.5rem;margin-bottom:1.5rem;
  border-bottom:1px solid var(--border-hairline)}
.dash-user .person-face{width:56px;height:56px;font-size:1.05rem;margin:0 auto .9rem}
.dash-name{font-family:var(--font-display);font-size:1.02rem}
.dash-level{
  font-family:var(--font-label);font-size:.55rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--accent);margin-top:.4rem;
}
.dash-menu{display:grid;gap:.15rem}
.dash-menu div{
  display:flex;align-items:center;gap:.75rem;padding:.7rem .85rem;
  font-size:.82rem;color:var(--text-muted);
  transition:background-color var(--dur-fast), color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){.dash-menu div:hover{background:var(--surface-hover);color:var(--text-primary)}}
.dash-menu div:active{background:var(--surface-hover);color:var(--text-primary)}
.dash-menu div.on{background:var(--wash-gold-strong);color:var(--accent)}
.dash-menu b{
  margin-left:auto;background:var(--accent-alt);color:var(--text-primary);
  font-size:.58rem;font-weight:400;padding:.1em .6em;
}
.dash-main{padding:clamp(1.8rem,3vw,2.6rem)}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.7rem 0}
.dash-stat{padding:1.1rem 0 0;background:none;border:0;
  border-top:1px solid var(--border-hairline);text-align:left}   /* entrada de códice (fase 21a) */
.dash-stat b{
  display:block;font-family:var(--font-display);font-size:1.85rem;font-weight:400;
  color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;
}
.dash-stat span{
  display:block;font-family:var(--font-label);font-size:.55rem;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-faint);margin-top:.6rem;
}
.dash-course{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:1.1rem 0;border-bottom:1px solid var(--border-hairline)}
.dash-course-name{font-family:var(--font-body);font-size:.86rem;font-weight:500}   /* DA-2 */
.bar{height:3px;background:var(--border-hairline);margin-top:.7rem;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.bar-pct{
  display:block;font-family:var(--font-label);font-size:.58rem;letter-spacing:.14em;
  color:var(--text-faint);margin-top:.45rem;
}

/* ── El latín nombra, el castellano explica (SISTEMA.md §4.4) ─────────
   Forma canónica de la Iglesia: «Dei Verbum» y debajo «sobre la divina
   revelación». El nombre en latín va en la itálica del display —es cita,
   y la cita se inclina— y la glosa debajo en la voz de rótulo, que es la
   que el sitio usa para decir qué es una cosa.
   El `lang="la"` no es decoración: sin él un lector de pantalla castellano
   pronuncia «Perpetuus» como si fuera español. Va en el marcado, no aquí.
   PROHIBIDO en botones, cifras, formularios y errores: lo que se nombra
   puede ir en latín; lo que se hace, jamás. */
.latin{font-style:italic}
/* ── El trascendental de cada movimiento · fase 21f ───────────────────
   `Pulchrum · Bonum · Verum` en El Rostro del Amor. No es decoración y
   por eso entra: la obra pregunta por la belleza, por el bien y por la
   verdad, y la tradición tenía nombradas esas tres preguntas siglos
   antes de que la obra las hiciera. Eso es exactamente la ley del §4.4
   —el latín nombra, el castellano explica— con el latín ACOMPAÑANDO al
   nombre del encargo, que no se toca.
   Va bajo el numeral romano, en la columna que ya existe, para que se
   lea como lo que es: la marca de una tradición sobre el movimiento. */
.mv-trans{
  display:block;font-family:var(--font-display);font-style:italic;
  font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.2;
  color:var(--accent);margin-top:.5rem;
}
.mv-trans small{
  display:block;font-family:var(--font-label);font-size:var(--size-label);
  font-style:normal;font-weight:400;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-soft);margin-top:.35rem;
}
.gloss{
  display:block;font-style:normal;
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--text-soft);margin-top:.55rem;
}

/* ── La Schola · cursos abiertos (fase 21a) ───────────────────────────
   Entrada de códice, no tarjeta: filete superior en oro de marco, el
   contenido sobre el fondo desnudo y ni un borde lateral. Es la figura
   que el diagnóstico de la fase 16 pedía en lugar de los cincuenta
   rectángulos cerrados, y la que la portada ya usa y está aprobada.
   Estas dos láminas son lo único de la página que se puede hacer HOY,
   así que son las únicas que llevan botón sólido junto a Fundador. */
.opens{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--marg-gap)}
/* FASE 21zg · ACOTADA A SU CONTENEDOR, y esto era un fallo de verdad.
   `.open` a secas casa con CUALQUIER elemento que lleve esa clase, y «open» es
   además el modificador de plaza vacante de otros tres componentes:
   `.roster-card.open` del carrusel, `.person.open` de las fichas de Colabora y
   `.teacher.person.open` del claustro. Las tarjetas del carrusel heredaban de
   aquí `display:flex` y `padding-top:1.9rem` —30,4px frente a los 14,4 suyos—,
   y ESE es el origen de los 16px de desnivel que la 21zf midió y no supo
   explicar: la lámina rayada arrancaba en y=31 y la de fotografía en y=15.
   Se quita la causa, no se compensa: acotada a `.opens`, que es su sección.
   LECCIÓN: una clase de una sola palabra en una hoja global no es un
   componente, es una mina. Si el nombre puede repetirse como modificador
   —open, mark, solo, bare—, el selector se ancla a su contenedor. */
.opens>.open{display:flex;flex-direction:column;
  border-top:1px solid var(--border-gold-frame);padding-top:1.9rem}
.open-meta{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);color:var(--accent);
}
.open-name{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.1;margin-top:1rem}
.open-sub{font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.35;
  color:var(--text-secondary);margin-top:.55rem}
.open-desc{font-size:.92rem;line-height:1.85;color:var(--text-muted);
  margin:1.6rem 0 2.2rem;flex:1}
.open .btn{margin-top:auto}

/* ── La Schola · los tres niveles del curso inaugural (fase 21a) ─────
   El temario va en filas de filete, no en párrafo corrido: cada materia
   es una entrada y se lee como índice de un plan de estudios, que es
   justo el argumento que distingue a La Schola de un canal de vídeos. */
/* `align-items:start` y no el estirado por defecto (fase 21b). Con los
   tres niveles a la misma altura, el Nivel II —que desde esta fase trae
   sus diez clases del guion de Don Manuel— arrastraba a los otros dos y
   dejaba 600 y 800 px de vacío antes de su precio. Igualar alturas es
   gesto de tabla de precios; esto es un códice, y en un códice las
   entradas miden lo que dice su contenido. La asimetría además es
   verdadera: el Nivel II tiene temario publicado y los otros dos todavía
   no, y la página no debe disimularlo con aire. */
/* FASE 21z · LAS TRES RUTAS, CON LOS BOTONES A LA MISMA ALTURA.
   `align-items:start` dejaba a cada lámina con su alto natural —900, 980 y
   792px medidos— y con ello los tres «Avisadme cuando abra» caían a tres
   alturas distintas, con 79 y 188px de desnivel. Tres botones en fila que no
   cuadran es el mismo defecto que dos de distinto ancho, visto por el otro
   eje, y la norma del encargante habla de botones VISUALMENTE JUNTOS.
   Las láminas se estiran a la fila —no cuesta nada: no tienen caja, sólo un
   filete superior— y el par botón + nota se descuelga al fondo con un margen
   automático. El temario sigue empezando arriba; lo que se iguala es el pie. */
.courses{display:grid;grid-template-columns:repeat(3,1fr);
  align-items:stretch;gap:clamp(1.8rem,3.2vw,2.75rem)}
.course>.btn{margin-top:auto}
.course-topics{list-style:none;padding:0;margin:1.3rem 0 0}
.course-topics li{padding:.85rem 0;border-bottom:1px solid var(--border-hairline);
  font-size:.86rem;line-height:1.65;color:var(--text-muted)}
.course-topics li b{font-weight:500;color:var(--text-secondary)}

/* Cuenta de clases y requisitos previos de un nivel (fase 21b). El guion
   de Don Manuel da los dos y la página no los decía: cuántas clases son
   y qué hace falta traer. Se dicen con franqueza, que es lo que el guion
   pide —«prefiero que empiece bien a que abandone a la tercera clase»—. */
.course-count{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--accent);margin-top:.9rem;
}
.course-req{font-size:.82rem;line-height:1.7;color:var(--text-soft);
  margin-top:1.2rem;padding-top:1rem;
  border-top:1px solid var(--border-hairline)}
/* FASE 21za · LA LÍNEA QUE CIERRA LOS TRES NIVELES.
   La estructura del producto la fija el encargante y es la misma en los tres:
   diez temas, examen final y certificación. Cada lámina lo dice en su renglón
   —para que ninguna columna dependa de haber leído las otras— y esta línea lo
   cierra para el bloque entero, que es donde el comprador compara precios.
   Toma la voz de la credencial: versalita de rótulo, los tres términos en oro
   sobre el resto en secundario, y un filete arriba que la separa de la
   retícula sin abrir una sección nueva. */
.courses-all{
  margin-top:clamp(2rem,3.5vw,2.75rem);padding-top:1.3rem;
  border-top:1px solid var(--border-hairline-hi);
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--text-secondary);
}
.courses-all b{font-weight:400;color:var(--accent)}
/* Nota: la nota de precio del Nivel II contaba «diez clases» y la 21za la dejó
   cualitativa como las otras dos de su capa. La cuenta de unidades vive ahora
   en un solo sitio —el renglón de la lámina— y dice «temas», no «clases». */

/* ── Los tres asientos del curso · fase 21b ───────────────────────────
   De dónde viene, cómo trabaja y qué NO da. Los tres salen del guion de
   presentación de Don Manuel, y el tercero es además la nota del
   propedéutico que el encargante ha querido hacer visible: la página
   dice lo que el curso no ofrece antes de que nadie lo pregunte.
   Registro códice: entrada de filete, sin caja. */
.tenets{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.8rem,3.2vw,2.75rem);margin-top:clamp(3rem,6vw,4.5rem)}
.tenet{border-top:1px solid var(--border-hairline-hi);padding-top:1.7rem}
.tenet h3{font-family:var(--font-display);font-size:1.45rem;font-weight:500;
  line-height:1.2}
.tenet p{font-size:.86rem;line-height:1.8;color:var(--text-muted);margin-top:1rem}
.tenet ul{list-style:none;padding:0;margin:1rem 0 0}
.tenet li{padding:.7rem 0;border-bottom:1px solid var(--border-hairline);
  font-size:.84rem;line-height:1.6;color:var(--text-muted)}
.tenet li b{font-weight:500;color:var(--text-secondary)}

/* Entradilla de capa (la 04 la necesita: la ventana que se cierra hay
   que explicarla, no insinuarla — encargante, fase 21a). */
.layer-lead{font-size:.95rem;line-height:1.8;color:var(--text-secondary);
  max-width:var(--width-read);margin:1.4rem 0 2.6rem}
/* El margen inferior no es estético: sin él, el filete superior de la
   primera lámina cae justo bajo el último renglón de la entradilla y la
   SUBRAYA. Un filete de códice que toca el texto deja de leerse como
   separación y se lee como error. */

/* ── La tesis · el mosaico de san Ireneo (fase 21b) ───────────────────
   No es adorno: es el argumento con el que el proyecto explica por qué
   hace falta método, y por eso vive en el RECORRIDO —donde se explica
   por qué existe la academia— y no en el catálogo, donde llegaría tarde
   y detrás de un precio.
   Sale del guion de Don Manuel, que además señala ese pasaje como «el
   momento más memorable del vídeo» y recomienda ilustrarlo con la imagen
   del mosaico. El hueco de esa pieza queda marcado en el marcado; el
   argumento no espera a la imagen porque el texto ya se sostiene solo.
   Ancho de lectura y Cormorant: se compone como cita larga, no como
   párrafo de sección. */
/* EL AIRE, corregido en la fase 21c (bloque 5). Medido a 1920 antes de tocar
   nada: aire anterior **0 px** y posterior 140. La tesis nacía pegada a los
   tres pilares, leyéndose como un párrafo más de su columna en vez de como la
   pieza destacada que es.
   El §3.8 fija la asimetría —el aire posterior siempre ≥ anterior—, así que el
   anterior sube a 130 px máximo y el posterior se queda en los 140 que ya pone
   el acolchado de la sección: 0/140 pasa a 130/140, con la regla cumplida y sin
   inventar un espaciado nuevo. */
.thesis{max-width:var(--width-read);margin-inline:auto;
  margin-block:clamp(4.5rem,8vw,8.125rem) 0}
.thesis .label{justify-content:center}
.thesis p{
  font-family:var(--font-display);font-size:clamp(1.08rem,1.9vw,1.35rem);
  line-height:1.65;color:var(--text-secondary);margin-top:1.4rem;
}
.thesis p:last-child{color:var(--text-primary)}
.thesis .pilcrow{margin-right:.45rem}

/* ── La nota del ministerio ───────────────────────────────────────────
   NO es letra pequeña ni disclaimer: es una afirmación del proyecto y se
   compone como tal —Cormorant, ancho de lectura, doble filete y calderón
   borgoña—, al peso de una declaración y no al de una cláusula. */
.ministry{
  margin:clamp(3rem,6vw,4.5rem) auto 0;max-width:var(--width-read);
  border-block:1px solid var(--border-hairline-hi);
  padding-block:clamp(1.8rem,3.4vw,2.6rem);text-align:center;
}
.ministry p{
  font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.55rem);
  line-height:1.55;color:var(--text-primary);
}
.ministry .pilcrow{margin-right:.5rem}

/* ── Puente a la Schola (interiores) ─────────────────────────────── */
.bridge{
  padding:clamp(2.6rem,5vw,4.4rem);   /* sin radio (DA-1 ratificada: códice) */
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;
}
.bridge-list{display:grid}
.bridge-list div{
  display:flex;align-items:baseline;gap:1rem;padding:.85rem 0;
  border-bottom:1px solid var(--border-hairline);
  font-size:.92rem;color:var(--text-secondary);
}
.bridge-list div:last-child{border-bottom:0}
.bridge-list b{
  flex:none;width:1.7rem;
  font-family:var(--font-label);font-size:.6rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--accent);
}

/* ── Cierre de interiores (DA-8: en la home manda imagen + .lit) ── */
.closing{position:relative;text-align:center;padding-block:clamp(7rem,15vh,12rem);overflow:hidden}
.closing-mark{
  font-family:var(--font-display);font-size:clamp(5rem,13vw,10rem);line-height:.7;
  color:var(--accent);opacity:.16;user-select:none;   /* opacidad, no rgba suelto */
}
.closing .quote{font-size:clamp(1.7rem,4.2vw,3.1rem);max-width:900px;margin:1.5rem auto 0}
.closing .quote-src{display:block;margin-top:2.2rem}


/* ══════════════════════════════════════════════════════════════════
   07 · MOVIMIENTO
   IntersectionObserver es la base (§5.1); red de seguridad de 2 s en
   JS (§5.2). La clase .motion la pone refugio.js en el <body>
   —no en <html>— si hay observador y no hay movimiento
   reducido: SIN ella, todo es visible desde el primer instante.
   Curvas y duraciones desde tokens §1.10; los .95s/1.1s son las
   constantes documentadas del revelado (§5.9).
   ══════════════════════════════════════════════════════════════════ */
.motion [data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
}
.motion [data-reveal].seen{opacity:1;transform:none}
/* El recorte que oculta la línea antes de entrar vive SOLO bajo .motion, y
   el JS lo libera en cuanto la línea llega a su sitio: mientras estuvo
   permanente, la caja cortaba el propio text-shadow del clímax y el halo
   del hero salía en rectángulo de cantos duros, contra la ley §3.1. */
.motion .line,.motion .mline{overflow:hidden}
.motion .mline>span{transform:translateY(105%);transition:transform 1.1s var(--ease-out)}
.motion .mline.seen>span{transform:none}
.motion .hero h1 .line>span{transform:translateY(105%)}   /* la entrada la conduce GSAP (§5.3) */

/* Verbos del sistema (§5.9): rise (la transición del revelado IO, no
   un keyframe) · heroIn (GSAP) · marquee (GSAP) · lit · drip · pulse ·
   count-up (JS). No hay más. */
/* @keyframes lit — retirado con su verbo en la fase 17b; no quedaba ningun uso. */
@keyframes drip{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ── `.lit` · VERBO RETIRADO EN LA FASE 17b ─────────────────────────
   Era el «segundo verbo de revelado, reservado a citas» (§2.2, §5.4) y
   dejaba la cita en `opacity:.1` con `blur(2px)` hasta que le llegara
   `.seen`. **Ese `.seen` no llegaba nunca**: el observador sólo mira
   elementos con `data-reveal`, y el párrafo de la cita no lo lleva. Su
   único respaldo era el bloque `@supports (animation-timeline: view())`,
   que la encendía por posición.

   Consecuencia medida: en Chromium la cita estaba a opacidad 1 en toda
   posición de scroll, y en Safari y Firefox —que no tienen timelines de
   vista— se quedaba **a una décima de opacidad y desenfocada, de forma
   permanente**. Un fallo que sólo existe fuera de Chromium, y mi arnés es
   Chromium: por eso resistió tres rondas.

   Y hay un segundo motivo por el que mis medidas no lo vieron: se toman
   con movimiento reducido, y `.motion` no se añade en ese modo, así que
   `.lit` ni siquiera se aplicaba. Medía 16,55:1 sobre un párrafo que en su
   navegador no se pintaba así.

   El encargante decide que la cita vaya en `--text-primary` puro, sin
   atenuación heredada. Con un solo uso en todo el sitio —censado sobre el
   espejo de contenido—, el verbo se retira entero en vez de dejarlo
   neutralizado: una clase que no hace nada es una trampa para el que
   venga después. La clase también sale del marcado (widget ed0f64f).
   §5.4 queda derogada en este punto.
   ────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   08 · RESPONSIVE — cortes 1140 / 860 / 520 (§6)
   La fluidez fina la dan los clamp() de los tokens; los cortes solo
   cambian estructura. El aire vertical no se toca (es fluido).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1140px){
  /* §5.2: la nav solo se oculta si hay JS que ofrezca el drawer;
     sin JS la nav de texto sobrevive y el burger no aparece. */
  html.js .nav{display:none}
  html.js .burger{display:flex}
  .people{grid-template-columns:repeat(2,1fr)}
  .testimonials{columns:2}
  .bridge{grid-template-columns:1fr}
  /* Los tres niveles caen a dos aquí: a 1024 tres columnas dejan el temario
     del Nivel I en renglones de tres palabras. El tercero ocupa la fila. */
  .courses{grid-template-columns:repeat(2,1fr)}
  .courses>*:last-child{grid-column:1 / -1}

  /* FASE 19 · EL PIE PIERDE UNA COLUMNA AQUÍ, no a los 860.
     La sonda 3 sobre el sitio real lo cazó a 1024: las cuatro columnas de
     enlaces medían 117px, y a 900 bajaban a 98. El corte a dos columnas
     estaba en ≤860, así que entre 861 y 1140 el pie iba con sus cinco
     columnas originales y «El Rostro del Amor» o «Comunidad de Telegram»
     partían en dos y tres renglones.
     Con cuatro columnas iguales y la marca a todo lo ancho, la columna más
     estrecha pasa de 98 a 205px en el peor caso de esta franja. El corte de
     ≤860 a dos columnas y el de ≤520 a una siguen donde estaban. */
  .footer-top{grid-template-columns:repeat(4,1fr)}
  .footer-top>*:first-child{grid-column:1 / -1}

  /* Bento: la retícula de 12 col colapsa a bloques apilados de ancho
     completo con el fresco primero; la retícula luminosa de 1px se
     conserva (gap + fondo --border-grid). */
  .bento{grid-template-columns:1fr}
  /* EL FRESCO NO INVIERTE SU ORIENTACION, fase 27a.
     `fresco.webp` es 1536x2752: una pieza VERTICAL de 0,56. En escritorio la
     celda es 1/6 de doce columnas por dos filas y sale 379x910 —0,42—, que es
     casi la del fichero, y sobrevive el 75 %.
     Aqui la celda pasaba a ancho completo con `min-height:420px`, y eso la
     volvia APAISADA: medido a 834, la celda salia 740x420 —1,76— y **del
     fichero solo sobrevivia el 32 %**. Una pieza vertical servida como friso.
     Y el defecto no era del movil: a 390 la celda es estrecha y la misma regla
     daba 343x420 —0,82— con el 68 %. **El tramo malo era el de tableta**, donde
     la celda es ancha y la altura fija.
     Se cambia el alto fijo por una PROPORCION, que es lo unico que no depende
     del ancho: con 4/5 la supervivencia sale **70 % a 390, a 520 y a 834**, la
     misma cifra en los tres, y a 390 el alto pasa de 420 a 429 px: el movil se
     queda como estaba y la tableta deja de aplastarla. */
  .bento-fresco{grid-column:1 / -1;grid-row:auto;order:-1;min-height:0;aspect-ratio:4 / 5}
  .bento-claim,.bento-tabula{grid-column:1 / -1;grid-row:auto}
  .bento-note{grid-column:1 / -1}

  /* Marginalia: la columna sticky pasa a cabecera en flujo
     (¶ + rótulo + filete en horizontal). */
  .marginalia{grid-template-columns:1fr;gap:2.25rem}
  .marginalia>:first-child{position:static;display:flex;align-items:baseline;gap:1.25rem}
  .marg-mark{font-size:var(--size-h3)}
  .marg-label{margin-top:0}
  .marg-rule{margin:0;align-self:center}

  /* Cifras a 2×2 con separadores (se conserva solo el central de cada
     fila; los <i class="figure-sep"> intermedios salen del flujo).
     D-F5-4: el corte sube de 860 a 1140 — la fila de cuatro pide 1129px
     de mínimo y a 1024 la cuarta cifra quedaba cortada. */
  .figures{display:grid;grid-template-columns:1fr auto 1fr;row-gap:3rem;align-items:start}
  .figures .figure-sep:nth-of-type(2){display:none}

  /* Hero apilado (D-F5-3, ampliada): el corte sube de 860 a 1140. En la
     banda de tableta la fila deja al título 470px y la escala rota
     necesita 477 para «la Verdad» y 471 para la línea sangrada: se
     partían dos de las tres. Apilado, la copia dispone del lienzo entero
     (922px a 1024) y las tres líneas vuelven a un solo renglón. */
  .hero{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2.5rem}
  .hero-cta{align-items:flex-start;text-align:left;padding-bottom:0}
  .hero-cta .btn-row{justify-content:flex-start}   /* apilado, la columna se lee a la izquierda */
}

@media (max-width:860px){
  /* FASE 27a-b · EL SUELO DE 800 SE RETIRA EN EL MOVIL, y es la mitad del
     arreglo de `dvh`. Un telefono con la barra del navegador puesta deja
     menos de 800 px de hueco, y con el suelo puesto la caja se salia de la
     pantalla aunque el alto fuera `dvh`. Medido: con la ventana en 780, 745,
     730, 700 y 660 la caja seguia en 800 y el rotulo «Entra» se metia encima
     de los dos botones.
     Sin suelo, la caja vale exactamente el hueco visible y la composicion se
     recoloca sola: el contenido va anclado abajo y conserva sus 10 px de
     holgura contra el senuelo en cualquier altura. */
  .hero,
  body.error404 .elementor-widget-html>.page-head{min-height:0}

  .grid-2,.grid-3,.trades{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}   /* el §6 promete las retículas de tarjetas a una columna aquí; el archivo se había quedado en las dos de ≤1140, y a 390 dos fichas dejan ~90px de texto */
  .articles{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr}
  .feature-cover{min-height:200px}
  .opens{grid-template-columns:1fr;gap:clamp(2.6rem,7vw,3.4rem)}
  .courses{grid-template-columns:1fr}
  .tenets{grid-template-columns:1fr;gap:2.2rem}
  /* FASE 21a · el claustro pierde su segunda columna AQUÍ, como el resto
     de retículas de ficha. Se quedó fuera de la corrección de la fase 19
     —que bajó `.people` a una columna por esta misma razón— y a 390 sus
     dos fichas dejaban la biografía en 158 px de ancho: seis palabras por
     renglón y el nombre partido. El §6 promete las retículas de tarjetas a
     una columna en este corte; `.faculty` era la que faltaba. */
  .faculty{grid-template-columns:1fr}
  .prices,.prices:has(> :nth-child(4)){grid-template-columns:1fr}
  .prices.solo .price{grid-template-columns:1fr}
  .prices.solo .price>*,.prices.solo .price-note,
  .prices.solo .btn,.prices.solo .form-note{grid-column:1;grid-row:auto}
  .layer.sealed{margin-inline:0;padding-inline:clamp(1.2rem,4vw,2rem)}
  .testimonials{columns:1}
  .movement{grid-template-columns:1fr}

  /* Puerta compacta: cae solo la flecha; el puntillé se conserva (§6) */
  .door{grid-template-columns:auto 1fr;row-gap:.5rem}
  .door-arrow{display:none}
  .door-title{grid-column:1 / -1}
  .door-desc{grid-column:1 / -1;margin-top:.5rem}
  .door.sealed .door-desc{grid-template-columns:1fr;gap:2rem}

  /* CTA de cabecera compacto. FASE 17 · deja de encoger el horizontal —a 72px
     de ancho su tipografía es ilegible— y CONMUTA al sello, que es lo que el
     contrato reserva para esta forma (§2.1). El cambio de pieza se hace con
     `content:url()` sobre la misma <img>, porque el widget atómico sólo admite
     una fuente y duplicarlo dejaría dos imágenes que descargar.
     Ruta relativa desde el tema, no absoluta: sistema.css vive en
     `themes/hello-elementor-child/`, así que `../../uploads/` es `wp-content/uploads/`.
     FASE 33-b · la pieza pasa a `sello-schola-relleno.svg` (la B1, generada
     en la 33 y subida por el encargante): mismo trazado con el relleno en el
     TOKEN `#0A0C10` — la paleta vuelve a ser cerrada—, 7,65:1 sobre el oro
     medido en el botón renderizado (la vieja daba 7,64 con un color que no
     estaba en el contrato). */
  .schola-key img{
    content:url('../../uploads/2026/05/sello-schola-relleno.svg');
    width:30px;height:30px;                       /* el sello es 1000×1000 */
  }
  /* FASE 18 · la forma compacta se había quedado MÁS ALTA que la de escritorio
     (54×44 frente a 108×40) al bajar ésta. Se recorta en la misma proporción
     para que la barra no engorde al estrecharse: 50×38. */
  .schola-key a.e-image-link-base{padding:4px 10px}

  .footer-top{grid-template-columns:1fr 1fr}
  .footer-top>*:first-child{grid-column:1 / -1}
  form.search{margin-left:0;width:100%}
  .letter{grid-template-columns:auto 1fr;gap:1rem}
  .letter-go{display:none}
  .dash{grid-template-columns:1fr}
  .dash-side{border-right:0;border-bottom:1px solid var(--border-hairline)}

  /* Encuadre móvil del vídeo (referencia de dirección de arte móvil,
     portada L1372–1446) */
  /* FASE 21zc · la variable también aquí. Esta regla fijaba el 51% literal y,
     al ganar por orden a la base, se comía el valor que calcula el runtime: en
     móvil el haz se quedaba 44,7px a la derecha. El 51% sobrevive como reserva
     para cuando no hay JS, que es exactamente su papel. */
  .hero-video video{object-position:var(--haz-p, 51%) 50%}
}

@media (max-width:520px){
  .bento{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .dash-stats{grid-template-columns:1fr}
  /* FASE 27a · la tabla del sello, tambien. Se habia quedado fuera de esta
     lista: `.seal-table` es `1fr 1fr` sin ningun corte, y medido a 390 sus
     celdas salian de **153 px**. Ahi «Rutas en tres niveles por materia» se
     parte en cinco renglones de dos palabras y «Comunidad privada de estudio»
     en cuatro. Es el mismo caso que `.dash-stats` de dos lineas mas arriba,
     con el mismo remedio.
     AQUI Y NO EN 860: a 834 las celdas miden 350 px y las cuatro entradas caben
     en dos renglones. Bajarla alli seria tirar la mitad del ancho. */
  .seal-table{grid-template-columns:1fr}

  /* D-F5-4: ni el 2×2 cabe aquí (cada cifra pide 225px de mínimo contra
     345 disponibles): una columna y los separadores fuera. La fila
     número + rótulo a línea base (§5) se conserva. */
  .figures{grid-template-columns:1fr;row-gap:2.25rem}
  .figures .figure-sep{display:none}

  /* Scroll horizontal de pestañas: el borde de scroll se resuelve con
     máscara degradada, NUNCA con filete (§6 · encargo §11). */
  .tabs{
    width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}

/* Sin puntero fino no hay cursor de luz que ocultar: DA-14 lo retira;
   el corte (hover:none),(pointer:coarse) queda documentado por si la
   decisión se revierte. */

/* ══════════════════════════════════════════════════════════════════
   09 · TUTORLMS — CAPA DE SOMETIMIENTO
   Andamiaje honesto: variables del sistema aplicadas a los selectores
   raíz documentados de TutorLMS. SE COMPLETARÁ cuando el plugin esté
   instalado y se puedan verificar los selectores reales de plantilla
   (§7.2 .dash es la referencia visual del contrato).
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* TutorLMS lee sus propios custom properties: se le entregan los
     del sistema, nunca literales nuevos. */
  --tutor-color-primary:var(--accent);
  --tutor-color-primary-hover:var(--accent-hi);
  --tutor-color-secondary:var(--text-secondary);
  --tutor-body-color:var(--text-primary);
  --tutor-border-color:var(--border-hairline);
  --tutor-primary-button-color:var(--text-on-accent);
}
.tutor-wrap{
  font-family:var(--font-body);font-size:var(--size-body);font-weight:400;
  color:var(--text-primary);line-height:1.85;
}
.tutor-wrap h1,.tutor-wrap h2,.tutor-wrap h3,.tutor-wrap h4{
  font-family:var(--font-display);font-weight:500;letter-spacing:0;
}
.tutor-wrap a{color:var(--accent);transition:color var(--dur-fast)}
@media (hover:hover) and (pointer:fine){.tutor-wrap a:hover{color:var(--accent-hi)}}
.tutor-wrap a:active{color:var(--accent-hi)}
/* Botones: la voz Montserrat del sistema (DA-2), planos (§4) */
.tutor-wrap .tutor-btn{
  font-family:var(--font-heading);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  border-radius:0;transition:background-color var(--dur-fast), color var(--dur-fast);
}
.tutor-wrap .tutor-btn-primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
@media (hover:hover) and (pointer:fine){.tutor-wrap .tutor-btn-primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}}
.tutor-wrap .tutor-btn-primary:active{background:var(--accent-hi);border-color:var(--accent-hi)}
/* Tarjetas de curso → láminas, sin radio (DA-1 ratificada: códice) */
.tutor-wrap .tutor-card{
  background:var(--surface-base);
  border:1px solid var(--border-frame);border-radius:0;
  box-shadow:none;                                  /* la sombra no existe (§3.3) */
}
/* Barras de progreso */
.tutor-wrap .tutor-progress-bar{background:var(--border-hairline)}
.tutor-wrap .tutor-progress-bar .tutor-progress-value{background:var(--accent)}

/* ══════════════════════════════════════════════════════════════════
   10 · IMPRESIÓN (mínimo) Y MOVIMIENTO REDUCIDO
   ══════════════════════════════════════════════════════════════════ */
@media print{
  .hero-video,.hero-cue,.marquee,.burger,.drawer,.skip{display:none}
  .header{position:static}
  .motion [data-reveal]{opacity:1;transform:none;filter:none}
  .motion .mline>span,.motion .hero h1 .line>span{transform:none}
}

/* §5.8 · Tres señales, no una: esta media query, la bandera REDUCED
   en JS y la degradación sin JS (sin .motion todo es visible).
   El sitio queda completo, legible y navegable. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
  .motion [data-reveal]{opacity:1;transform:none}
  .motion .mline>span,.motion .hero h1 .line>span{transform:none}
  .hero-video video{opacity:.45!important;transition:none}   /* vídeo a opacidad fija */
}

/* ══════════════════════════════════════════════════════════════════
   11 · COMPAT ELEMENTOR (fases 4-6 — §2.4/§7 del contrato)
   Puentes entre los selectores del sistema y el markup real que
   generan los contenedores atómicos de Elementor 4. Desde la fase 5 el
   archivo se despliega y ya no hay espejo que mantener (BLOQUEOS.md).
   ══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   0 · DES-ACOLCHADO RAÍZ · TODAS LAS PÁGINAS — VA PRIMERO
   Las bases atómicas acolchan 10px todo contenedor; los bloques raíz
   de una página no lo toleran (sus sangres llegan al borde). El cero
   se declara por página, con la especificidad del patrón (0,3,0).
   POR QUÉ AQUÍ Y NO EN LA ZONA DE CADA PÁGINA: este cero empata en
   especificidad con TODAS las guardas de clase (`.section`, `.hero`,
   `.page-head`…), así que quien imprima después gana. Escrito al pie
   de la zona de cada página, el cero enterraba el acolchado de las
   secciones —le pasó a la página 38: las cuatro partes perdieron sus
   104/117px de aire—. Puesto al principio del bloque, cualquier guarda
   posterior lo bate y no hay que re-asentar nada.
   AL AÑADIR UNA PÁGINA: una línea más aquí, y nada más.
   ────────────────────────────────────────────────────────────────── */
.elementor-36>.e-flexbox-base.e-atomic-element,
.elementor-38>.e-flexbox-base.e-atomic-element,
.elementor-42>.e-flexbox-base.e-atomic-element,
.elementor-44>.e-flexbox-base.e-atomic-element,
.elementor-46>.e-flexbox-base.e-atomic-element,
.elementor-325>.e-flexbox-base.e-atomic-element,
.elementor-786>.e-flexbox-base.e-atomic-element,
.elementor-788>.e-flexbox-base.e-atomic-element,
.elementor-928>.e-flexbox-base.e-atomic-element,   /* resultados de búsqueda (fase 16) */
.elementor-308>.e-flexbox-base.e-atomic-element{padding:0}   /* 404 (fase 16) */

/* Y su gemela: los ganchos de composición del sistema APILAN —son bloques,
   no filas—, pero la base atómica hace de todo e-flexbox una fila. Hasta
   ahora cada página lo arreglaba declarando la columna en su clase local, y
   en cuanto una no lo hizo (la 42) su contenido se compuso en fila y se
   solapó: cabecera encima del titular, rótulo de sección encima de la
   primera columna. Se declara una vez aquí, para todas las páginas. Los
   ganchos que sí son fila o retícula (.hero, .movement, .bridge, la fila de
   la captación) tienen su propia guarda más adelante y la baten por orden.

   FASE 15 · la lista se completa, y la falta costaba caro. Esta guarda cubría
   sólo los cuatro ganchos de PÁGINA; los de COMPONENTE se quedaron declarando
   su columna en la clase suelta (`.article{flex-direction:column}`, 0,1,0),
   que pierde contra `.elementor .e-flexbox-base` (0,2,0) SIEMPRE, gane quien
   gane el orden. En el sitio vivo eso volvía fila cada ficha de artículo: el
   hueco de imagen se llevaba el ancho entero y el texto quedaba en una
   columna de un carácter —el titular partido letra a letra que el encargante
   ve en su captura de 1904—. El mismo modo de fallo esperaba en las láminas
   del díptico, las celdas del bento, los niveles de La Schola y las cuotas.
   La regla: si un gancho apila, se declara AQUÍ, no en su clase suelta. */
.page-head.e-flexbox-base.e-atomic-element,
.section.e-flexbox-base.e-atomic-element,
.wrap.e-flexbox-base.e-atomic-element,
.closing.e-flexbox-base.e-atomic-element,
.drawer.e-flexbox-base.e-atomic-element,
.burger.e-flexbox-base.e-atomic-element,
.hero-cue.e-flexbox-base.e-atomic-element,
.bento-cell.e-flexbox-base.e-atomic-element,
.article.e-flexbox-base.e-atomic-element,
.article-body.e-flexbox-base.e-atomic-element,
.feature-body.e-flexbox-base.e-atomic-element,
.person.e-flexbox-base.e-atomic-element,
.course.e-flexbox-base.e-atomic-element,
.price.e-flexbox-base.e-atomic-element{flex-direction:column}

/* Gancho de la 3.ª zona de la cabecera (sustituto de .header-end, §2.4) */
.header .tail{justify-self:end;display:flex;align-items:center;gap:.875rem}

/* El mini-form del pie cabe en su columna 1.3fr sin romper la fila
   única del filete (portada L1957) */
.footer .inline-form input{min-width:0}
.footer .inline-form{margin-top:1.125rem}           /* 18px bajo el párrafo */

/* El logotipo no desborda la cabecera en pantallas estrechas.
   (D2a pasada 5: con la clase atómica para NO empatar con la regla
   de 42px del archivo desplegado.) */
@media (max-width:520px){
  .header .logo.e-atomic-element img{height:30px}
}

/* El mini-form del pie mantiene la fila única también en tablet.
   (D2b pasada 5: ámbito .footer para no empatar con la base wrap.) */
.footer .inline-form{flex-wrap:nowrap}

/* ──────────────────────────────────────────────────────────────────
   DES-BASE ATÓMICO (Elementor 4 · pasada 4)
   LEY DEL ESPEJO/DES-BASE (re-precisada en pasadas 6-7): el espejo
   (custom_css del kit, post-14.css) imprime ANTES que TODO lo que
   importa — antes que base-desktop.css (verificado en el encolado:
   el kit encola en after_enqueue_styles y las bases atómicas en
   after_enqueue_post_styles), antes que los locales de plantilla,
   antes que las TRES hojas del tema padre (reset/theme/header-footer
   de hello-elementor, cazadas en pasada 7) y antes que el sistema.css
   desplegado. Solo frontend.min.css imprime antes que el espejo.
   Orden completo: frontend.min → post-14 (ESPEJO) → base-desktop →
   locales 327/329 → reset/theme/header-footer del padre → style.css →
   sistema.css. Por tanto: todo selector del espejo debe tener
   especificidad ESTRICTAMENTE MAYOR que cualquier regla posterior que
   toque las mismas propiedades — tanto las del archivo desplegado
   como las bases atómicas (`.elementor .e-*-base`, 0,2,0): contra las
   bases el empate 0,2,0 TAMBIÉN pierde (premisa contraria de las
   pasadas 4-5, refutada con el código de encolado en la pasada 6).
   Patrón: clase de sistema + clase base + .e-atomic-element (0,3,0).
   Bases neutralizadas: .e-button-base (pastilla azul #375EFB, radio
   2px, padding 12/24, inline-block) · .e-flexbox-base (padding:10px;
   display:flex; flex-direction:row) · .e-div-block-base (padding:10px;
   min-width:30px; display:block) · .e-heading-base / .e-paragraph-base
   (margin:0) · .e-image-link-base (all:unset; display:inherit;
   width:fit-content). El markup real es `e-con e-atomic-element
   e-flexbox-base` (+clases de usuario): `.e-flexbox` a secas no
   existe — las dos guardas antiguas (.header.e-flexbox/
   .footer-top.e-flexbox) eran muertas y quedaron sustituidas.
   NOTA para el redespliegue del archivo: dentro del archivo esta
   sección imprime la ÚLTIMA (tras las bases), así que estos selectores
   0,3,0 son redundantes pero inocuos allí; la exigencia la impone la
   fase-espejo.
   ────────────────────────────────────────────────────────────────── */

/* 1 · Des-acolchado de contenedores del sistema (padding:10px de
   .e-flexbox-base/.e-div-block-base): primero a 0, después cada regla
   re-declara el padding EXACTO que el sistema le da. Este zona imprime
   ANTES que las guardas de retícula (2): a igual especificidad, el
   padding-block de .footer-top no puede perder contra el cero de su
   otra clase .wrap (verificado en el arnés real). */
.footer.e-flexbox-base.e-atomic-element,.footer-bar.e-flexbox-base.e-atomic-element,
.rule-double.e-flexbox-base.e-atomic-element,.wrap.e-flexbox-base.e-atomic-element,
.tail.e-flexbox-base.e-atomic-element,.nav.e-flexbox-base.e-atomic-element,
.socials.e-flexbox-base.e-atomic-element{padding:0}
.wrap.e-flexbox-base.e-atomic-element{padding-inline:var(--gutter)}
.rule-double.e-flexbox-base.e-atomic-element{padding-block:4px}
.rule-double.top.e-flexbox-base.e-atomic-element{padding-block:4px 0}   /* 0,4,0: el .top no puede perder contra la regla anterior */
/* Tras .wrap: el shorthand de .footer-bar (sección 05) también anula
   el gutter — cascada del archivo replicada, no corregida. */
.footer-bar.e-flexbox-base.e-atomic-element{padding:1.625rem var(--gutter) 1.875rem}
/* Envoltorios SIN clase de usuario: el hijo único del doble filete
   del pie y las cinco columnas del pie (e-div-block sin gancho);
   0,3,0 ya gana a la base 0,2,0 aunque imprima después. */
.footer.e-atomic-element>.e-atomic-element{padding:0;min-width:0}
.footer-top.e-atomic-element>.e-atomic-element{padding:0;min-width:0}
/* El cajón raíz del drawer (e-div-block hermano de la cabecera):
   sin des-acolchar mediría 20px y bajaría todo el contenido. */
.header+.e-div-block-base.e-atomic-element{padding:0;min-width:0}

/* 2 · Guardas reales de retícula — valores copiados EXACTOS de las
   reglas .header (sección 05) y .footer-top (sección 05). */
.header.e-flexbox-base.e-atomic-element{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 clamp(1.25rem, 3.05vw, 2.75rem);
}
/* Colocación EXPLÍCITA de las tres zonas (D1 pasada 5): cuando la nav
   cae a ≤1140 (display:none), la auto-colocación movería .tail a la
   columna central y la caja oro quedaría lejos del borde. 0,2,0 basta:
   ninguna regla posterior (bases ni archivo) declara grid-column aquí. */
.logo.e-atomic-element{grid-column:1}
.nav.e-atomic-element{grid-column:2}
.tail.e-atomic-element{grid-column:3}
/* Envoltorios de widgets html clásicos como ítems de flex (D3 pasada 5):
   el burger oculto a >1140 dejaría su envoltorio interponiendo el gap. */
.tail>.elementor-widget-html{display:contents}
/* padding UA del <button> + marco/relleno/transición del reset del tema
   padre (zona 6): la neutralización completa vive aquí, una sola regla. */
.tail .burger{padding:0;border:0;border-radius:0;background:none;transition:none}
.footer-top.e-flexbox-base.e-atomic-element{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr 1fr;
  padding-block:clamp(3.4rem, 6vw, 5.375rem) 0;
}
/* Espejo responsive obligado: la guarda (0,3,0) taparía los cortes
   0,1,0 de la sección 08 si no se re-declaran aquí a su altura.
   FASE 19 · faltaba el de 1140, y por eso el corte nuevo del pie no entraba:
   se escribió en la §08 a (0,1,0) y esta guarda se lo comía. La nota de arriba
   ya lo avisaba; el error fue no releerla al añadir el corte. */
@media (max-width:1140px){
  .footer-top.e-flexbox-base.e-atomic-element{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .footer-top.e-flexbox-base.e-atomic-element{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .footer-top.e-flexbox-base.e-atomic-element{grid-template-columns:1fr}
}

/* 3 · Botones-enlace neutralizados por contexto (e-button = <a> de la
   nav y de las redes del pie): fuera la pastilla azul; después, las
   declaraciones que .nav a / .socials a fijan sobre el propio <a>. */
.nav a.e-button-base,.socials a.e-button-base{
  background:none;border:0;border-radius:0;padding:0;display:inline-block;
  color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;
  text-decoration:none;
}
.nav a.e-button-base{
  position:relative;
  font-family:var(--font-label);font-size:.781rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-nav);
  color:var(--text-primary);
  padding:.65rem .85rem;
  transition:color var(--dur-fast);
}
.nav a.on.e-button-base{color:var(--accent)}   /* el estado .on no puede perder contra la re-declaración */
.socials a.e-button-base{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-secondary);
  border-bottom:1px solid var(--border-frame);padding-bottom:2px;
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){.socials a.e-button-base:hover{color:var(--accent-hi);border-color:var(--accent-hi)}}
.socials a.e-button-base:active{color:var(--accent-hi);border-color:var(--accent-hi)}   /* 0,3,1: el hover re-asciende sobre la re-declaración */
/* El anillo de foco global (0,1,0) pierde su radio 2px contra el
   border-radius:0 de la neutralización (0,2,1): re-ascendido (pasada 7). */
.nav a.e-button-base:focus-visible,.socials a.e-button-base:focus-visible{border-radius:2px}

/* 4 · Cajas div-block y anclas de imagen. Toda la caja oro de La
   Schola es clicable, no solo la imagen: el padding 5/14 vive en el
   <a> (markup div>a>img); el ancla real es a.e-image-link-base porque
   su base (all:unset, 0,2,0) mata cualquier selector 0,1,1. */
.logo.e-div-block-base.e-atomic-element,.seal.e-div-block-base.e-atomic-element{padding:0;min-width:0}
/* width:auto — frontend.min da `width:100%` a TODO .e-con (var --width);
   la caja oro es el único e-con del sistema que debe encogerse a su
   contenido: sin esto se estira a llenar la cola (y encoge el burger).
   Cazado en pasada 6 al incorporar frontend.min al arnés. */
.schola-key.e-div-block-base.e-atomic-element{display:inline-flex;width:auto;padding:0;min-width:0}
/* FASE 21zd · MENOS ALTURA DE CAJA, MISMO LOGOTIPO. El de 112px se queda: lo
   que sobraba era el aire vertical. El relleno pasa de 4 a 1px arriba y abajo
   —el horizontal no se toca, porque a los lados el aire sí hace falta para que
   la palabra no roce el borde del oro— y la caja baja de 50,5 a 44,5: el 60%
   de los 74px de la barra en vez del 68%. El `align-items:center` de la
   retícula de cabecera la sigue recentrando sola, así que no hay que tocar
   ninguna otra medida. El contraste no depende del relleno: es el mismo
   `#0b0c0f` sobre el mismo oro, 7,61:1, y se vuelve a medir igualmente. */
.schola-key a.e-image-link-base{display:flex;align-items:center;padding:1px 12px;cursor:pointer}
@media (max-width:860px){
  .schola-key a.e-image-link-base{padding:5px 10px}   /* forma compacta §6 */
}
.logo a.e-image-link-base,.seal a.e-image-link-base{display:block;cursor:pointer}
/* ── EL ANILLO DE FOCO NO SE ARREGLA AQUI · fase 27b-a ───────────────────
   AQUI HUBO DOS INTENTOS y los dos eran listas: primero `.logo`, `.seal` y
   `.schola-key`; despues las clases base de Elementor. **El segundo arreglo
   30 paradas de 69 y yo lo di por cerrado.** No lo estaba: las 39 restantes
   las pisaba `reset.css` de Elementor con `a:focus-visible{outline:2px solid
   #000}`, que ninguna lista de clases del sitio podia prever.

   LA REGLA VIVE EN LA §3.9, es una sola y lleva `!important`. Aqui no se
   escribe nada: si vuelve a aparecer una parada sin anillo, **no se anade un
   selector en este sitio** — se mide con `auditoria/foco.js`, se le pregunta
   al motor quien pisa, y se corrige alli.
   ──────────────────────────────────────────────────────────────────────── */

/* 5 · Márgenes del pie que .e-heading-base/.e-paragraph-base (margin:0)
   aplastan. (.footer-bar no margina ningún párrafo: nada que restaurar.) */
.footer-top>div>:is(h2,h3,h4,h5,h6).e-heading-base{margin:0 0 1.4rem}
p.footer-claim.e-paragraph-base{margin-top:1.625rem}   /* ≥0,2,1: el empate 0,2,0 con la base no basta */

/* ──────────────────────────────────────────────────────────────────
   6 · DES-RESET DEL TEMA PADRE (pasada 7)
   hello-elementor encola reset.css/theme.css/header-footer.css DESPUÉS
   de base-desktop y los locales, y ANTES de style.css y sistema.css.
   El archivo gana sus empates con el reset por imprimir después; el
   ESPEJO (imprime antes que el reset) exige de nuevo especificidad
   estrictamente mayor. Del reset solo sobreviven a la cascada del
   sistema tres superficies en fase 4, neutralizadas aquí: el botón
   (marco/relleno rosa #c36 en base y :hover/:focus — 0,1,1/0,2,0 —,
   padding .5/1rem y transition:all, ya absorbidos en .tail .burger de
   la zona 2), el submit del mini-form en sus estados, y el subrayado
   de :visited (0,1,1, que bate al a{text-decoration:none} global 0,0,1
   en ambos mundos). El resto (a base, inputs, listas, títulos) ya lo
   re-declara el sistema con empate ganado por orden o especificidad. */
/* `.tail .burger:hover` retirada en la 27b-c: el burger es un <button>
   y el corte de raiz de la §3.9 ya le quita el magenta de hello. */
.footer .inline-form .form-go:focus{background:none;color:var(--accent)}
@media (hover:hover) and (pointer:fine){.footer .inline-form .form-go:hover{background:none;color:var(--accent-hi)}}
.footer .inline-form .form-go:active{background:none;color:var(--accent-hi)}
html a:visited{text-decoration:none}   /* 0,1,2 > 0,1,1 del reset */
/* La plantilla `default` del tema padre envuelve TODO el contenido de la
   página en .page-content, y su hoja subraya ahí cualquier enlace
   (.page-content a, 0,1,1, contra el a{text-decoration:none} global de
   0,0,1). Se neutraliza a igual especificidad: sistema.css imprime
   después. Afecta a todas las páginas del sitio, no solo a la portada. */
.page-content a{text-decoration:none}
/* Y una base CLÁSICA de Elementor, no del tema padre: frontend.min trae
   `.elementor hr{background-color:transparent;margin:0}` (0,1,1), que batía
   al `.marg-rule` del § (0,1,0) y dejaba SIN PINTAR el filete de las cinco
   marginalias —solo sobrevivía el dorado, que es 0,2,0— y sin su aire de
   20px. Se re-declara con el elemento delante (0,1,1) y se repite el corte
   §6 ≤1140, donde el filete pasa a la cabecera en flujo. */
hr.marg-rule{background:var(--border-frame);margin:1.25rem 0 0}
@media (max-width:1140px){
  hr.marg-rule{margin:0;align-self:center}
}

/* Aquí vivía un espejo de los tokens AA en `html:root` (0,1,1), escrito
   cuando el archivo desplegado aún llevaba los alfas viejos. Con el tema
   desplegado ya no hace falta y era ACTIVAMENTE DAÑINO: por su mayor
   especificidad enterraba el `--text-dim` de la sección 01 y congelaba el
   valor de la pasada 7 (.62) sobre el .64 nuevo de D-F6-2. Retirado; los
   tokens viven en un solo sitio. */

/* El placeholder completo cabe a 1024 (hallazgo 9 de la pasada 7):
   un paso menos de cuerpo SOLO en el tramo de 5 columnas estrechas. */
@media (min-width:861px) and (max-width:1140px){
  .footer .inline-form input{font-size:.8rem}
}

/* ──────────────────────────────────────────────────────────────────
   7 · REMATE DE IMPRESIÓN (pasada 7)
   El bloque print de la sección 10 oculta .burger a 0,1,0, pero el
   corte ≤1140 aplica también al papel (A4 ≈ 794px) y su
   html.js .burger{display:flex} (0,2,1) lo re-mostraba. 0,3,1 lo
   entierra en los dos mundos. */
@media print{
  html.js .tail .burger{display:none}
}

/* ──────────────────────────────────────────────────────────────────
   8 · COMPAT DE LA HOME (fase 5 — página 36 · Inicio)
   Misma ley del espejo que las zonas 1-7: especificidad estrictamente
   mayor que las bases atómicas 0,2,0 y que el archivo desplegado.
   Contenedores: gancho + clase base + .e-atomic-element (0,3,0).
   Hojas atómicas (sin .e-atomic-element): elemento + gancho + base
   (≥0,2,1). El des-acolchado raíz va acotado a la página por
   `.elementor-36>` (si la página se re-crea con otro id, re-bautizar).
   Los H2 de sección, la marquesina, el bento, el díptico, las puertas,
   la tabla sellada y el cierre viven DENTRO de widgets html: no son
   atómicos y no necesitan des-base — los gobierna el archivo, que
   imprime el último. Nota para fases futuras: si un interior usa
   .btn.link/.btn.block como e-button atómico, necesitará su propio
   des-base aquí (la neutralización 8d pisa su padding/background).
   ────────────────────────────────────────────────────────────────── */

/* 8a · Acolchados de la home. El cero de sus bloques raíz vive ahora en
   la zona 0, al principio del bloque, para que estas guardas —y las de
   cualquier página— impriman después y lo batan. Aquí queda solo la
   re-declaración del padding EXACTO del sistema para cada gancho. */
.rule-double.e-flexbox-base.e-atomic-element{padding-block:4px}
.hero.e-flexbox-base.e-atomic-element{padding:0 var(--gutter) 8rem}
.marquee.e-flexbox-base.e-atomic-element{padding:17px 0}
/* La familia §3.8 completa: sin las variantes, la guarda .section
   (0,3,0) enterraría .tight/.vast/.bleed-end (0,2,0) en el archivo
   redesplegado. El shorthand de la base también acolcha los lados:
   padding-inline explícito a 0. */
.section.e-flexbox-base.e-atomic-element{padding-block:calc(var(--space-section)*.895) var(--space-section);padding-inline:0}
.section.tight.e-flexbox-base.e-atomic-element{padding-block:var(--space-block)}
.section.vast.e-flexbox-base.e-atomic-element{padding-block:calc(var(--space-vast)*.958) var(--space-vast)}
.section.bleed-end.e-flexbox-base.e-atomic-element{padding-block:var(--space-section) 0}
.hero-copy.e-div-block-base.e-atomic-element{padding:0;min-width:0}
/* width:auto obligado (realidad e-con, §2.4): con --width:100% y el
   flex:none del §2.1 la CTA reclamaba la fila entera y dejaba el H1 en
   0px de ancho —una palabra por línea, recortada por el overflow del
   .line—. Mismo patrón que .schola-key en la fase 4. */
.hero-cta.e-flexbox-base.e-atomic-element{flex-direction:column;padding:0 0 1.1rem;width:auto}
.btn-row.e-flexbox-base.e-atomic-element{padding:0}
/* Columnas de flujo de la marginalia (e-div-block sin gancho) y el
   manifiesto: el hijo genérico primero, la re-declaración después. */
.marginalia.e-atomic-element>.e-atomic-element{padding:0;min-width:0}
.manifesto.e-div-block-base.e-atomic-element{padding:.5rem 0 0;min-width:0}

/* 8b · Guardas de retícula. La marginalia es e-div-block: su
   display:grid (0,1,0) pierde contra el display:block de la base —
   re-declarada entera (§3, valores exactos). */
.marginalia.e-div-block-base.e-atomic-element{
  display:grid;grid-template-columns:var(--marg-col) 1fr;gap:var(--marg-gap);
  padding:0;min-width:0;
}
/* El bloque ¶+rótulo+filete llega en widget html: el envoltorio se
   disuelve y el <div data-reveal> interior pasa a ser el ítem de
   retícula; la regla sticky del archivo (§3 .marginalia>:first-child)
   apunta al envoltorio sin caja — re-declarada aquí sobre el interior
   (0,2,1). */
.marginalia>.elementor-widget-html{display:contents}
.marginalia>.elementor-widget-html>div{position:sticky;top:7.5rem;align-self:start}
/* Espejo responsive obligado del corte §6 ≤1140: las guardas 0,3,0 y
   0,2,1 taparían la marginalia en cabecera (0,1,0 / 0,2,0). */
@media (max-width:1140px){
  .marginalia.e-div-block-base.e-atomic-element{grid-template-columns:1fr;gap:2.25rem}
  .marginalia>.elementor-widget-html>div{position:static;display:flex;align-items:baseline;gap:1.25rem}
}

/* 8c · Hero. Los envoltorios de sus widgets html (skip, vídeo, cue)
   son ítems del flex y romperían el space-between de copy/CTA: se
   disuelven y los absolutos anclan en el propio .hero (relative).
   Espejo responsive del corte §6 ≤1140 (D-F5-3): la base row (0,2,0) y
   el local desktop (0,2,0, imprime tras base-desktop) enterrarían la
   columna 0,1,0 de la sección 08. */
.hero>.elementor-widget-html{display:contents}
@media (max-width:1140px){
  .hero.e-flexbox-base.e-atomic-element{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2.5rem}
  .hero-cta.e-flexbox-base.e-atomic-element{align-items:flex-start;padding:0}
}

/* 8d · Botones atómicos (e-button = <a class="btn solid|ghost">):
   fuera la pastilla azul; después, los valores EXACTOS de §4 —
   variantes y hover a ≥0,3,1 porque la neutralización 0,2,1 pisa a
   .btn.solid/.btn.ghost (0,2,0) del archivo. */
a.btn.e-button-base{
  background:none;border:0;border-radius:0;color:inherit;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--font-heading);font-size:.75rem;line-height:1;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  padding:1.333em 2.5em 1.25em;
  transition:background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
a.btn.solid.e-button-base{background:var(--accent);color:var(--text-on-accent);font-weight:600}
@media (hover:hover) and (pointer:fine){a.btn.solid.e-button-base:hover{background:var(--accent-hi)}}
a.btn.solid.e-button-base:active{background:var(--accent-hi)}
a.btn.ghost.e-button-base{border:1px solid var(--border-ghost);color:var(--text-primary);font-weight:500}
@media (hover:hover) and (pointer:fine){a.btn.ghost.e-button-base:hover{border-color:var(--accent-hi);color:var(--accent-hi)}}
a.btn.ghost.e-button-base:active{border-color:var(--accent-hi);color:var(--accent-hi)}
/* El anillo de foco global pierde su radio contra el border-radius:0
   de la neutralización: re-ascendido (patrón de la zona 3). */
a.btn.e-button-base:focus-visible{border-radius:2px}

/* 8e · Márgenes que las bases margin:0 aplastan o que el flujo en
   bloque de las columnas necesita (los aires del lienzo, §10.1). */
p.intro.e-paragraph-base{margin:2.125rem 0 0}   /* 34px bajo el h2 (portada L1628/L1691/L1852; el 32px de la captación L1887 se consolida) */
.sealed a.btn.e-button-base{margin-top:3.75rem}   /* CTA de la sellada: 60px bajo la tabla (portada L1871) */
.glow .s-h2.quiet{margin-top:1.875rem}            /* 30px del kicker al H2 de la captación (portada L1886) */
.glow form{margin-top:3.375rem}                   /* 54px del intro al formulario (portada L1889) */

/* 8f · Ganchos nuevos (fase 5) — huecos del contrato detectados al
   construir la home; valores derivados de la portada. Pendientes de
   bautizo formal en SISTEMA.md §2.4. */
/* Retícula de la captación (§7.1): el constructor dejó flex fila
   interina — la guarda la corrige al grid 1fr/480px de la portada
   (L1883: minmax(0,1fr) 480px · gap 90px · align center). El corte
   ≤860 apila a una columna (criterio: precedente §6 de
   .door.sealed .door-desc). */
.glow .wrap>.e-flexbox-base.e-atomic-element{
  display:grid;grid-template-columns:minmax(0,1fr) 30rem;gap:5.625rem;align-items:center;
  padding:0;
}
.glow .wrap>.e-flexbox-base.e-atomic-element>.e-atomic-element{padding:0;min-width:0}
@media (max-width:860px){
  .glow .wrap>.e-flexbox-base.e-atomic-element{grid-template-columns:1fr;gap:2rem}
}
/* El corte sube a 1140: con la columna de la pieza fija en 480px, el tramo de
   tableta dejaba al titular 351px —en Kerigmaté, que ahí lleva el H1, caía a
   cuatro y hasta siete renglones—. Apilada, la columna de texto respira. */
@media (min-width:861px) and (max-width:1140px){
  .glow .wrap>.e-flexbox-base.e-atomic-element{grid-template-columns:minmax(0,1fr);gap:2.5rem}
}

/* Piezas con alfa pendientes (§11): el widget que solo lleva su comentario de
   hueco casa con `:empty` —los comentarios no cuentan como contenido— y se
   declara en pantalla con el mismo rayado que los retratos y las escenas
   (D-F5-9). Sin esto su columna reservaba 480px de nada: media página muerta
   junto a un titular ahogado, en la portada y en Kerigmaté. Cuando entre el
   <picture>, la regla se apaga sola. */
.glow .wrap .elementor-widget-html:empty{
  aspect-ratio:1/1;display:grid;place-items:center;
  max-width:30rem;   /* apilada no se desboca: conserva el ancho de su columna */
  background:
    repeating-linear-gradient(45deg, rgba(200,191,166,.05) 0 1px, transparent 1px 10px),
    var(--surface-base);
}
.glow .wrap .elementor-widget-html:empty::before{
  content:'Pieza pendiente';
  font-family:var(--font-label);font-size:.625rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--text-dim);
}
/* gancho nuevo (fase 5): las cifras corren a lienzo pleno — 1300px de
   contenido con el gutter FUERA (portada L1727-1728: padding 84/60 en
   el marco y max-width 1300 en la fila; el padding lateral ya vive en
   .figures §5, de ahí el calc). */
.figures{max-width:calc(var(--width-max) + var(--gutter)*2);margin-inline:auto}
/* gancho nuevo (fase 5): aire del fresco del cónclave bajo la
   escalera — 120px de lienzo (portada L1612). */
.bleed-end .bleed-x{margin-top:7.5rem}
/* gancho nuevo (fase 5): logotipo de La Schola en la cabecera de la
   sección sellada — 124px de alto, sangrado óptico -20/-14 y 44px de
   aire inferior (portada L1850). El SVG (mediateca 225) se colocará
   como <img class="schola-logo"> en el widget del hueco. */
.sealed .schola-logo{display:block;height:7.75rem;width:auto;margin:-1.25rem 0 2.75rem -.875rem}
/* gancho nuevo (fase 5): objetos flotados del díptico — el códice
   (145px, portada L1703) y el objetivo de cine (246px, portada
   L1716) muerden el margen derecho de su lámina; la lista de oficios
   cierra el flotado. Al llegar los WebP: <img class="trade-obj">. */
.trade-obj{float:right;width:auto}
/* FASE 17 · EL OBJETO ESTRANGULABA LA PROSA. Medido a 1440, con los tamaños
   del diseño (145px el códice, 246px el objetivo — portada.html L1627 y
   L1640), la columna de 421px repartía así:

     lámina I   objeto 254px de ancho  →  prosa a  3 4 4 2 2 4 4 3  palabras
     lámina II  objeto 246px de ancho  →  prosa a  7 6 4 6 4 5 4 3  palabras

   Renglones de DOS palabras. Es lo que el encargante describe, y el diagnóstico
   es suyo: el objeto se come la medida.

   Los tamaños de abajo NO salen de razonar, salen de barrer 49 pares de alturas
   y quedarse con el que cumple las dos condiciones a la vez —prosa a cinco
   palabras como mínimo y las dos listas de oficios a la MISMA altura—:

     lámina I  84px  ·  lámina II  200px  →  mínimo 5 palabras · 7 y 7
     renglones · desfase entre las dos listas de oficios: 0px

   Se aparta del lienzo aprobado y es a propósito, con autorización expresa del
   encargante: el lienzo pedía 145 y 246, y con esas medidas la prosa no se lee.

   Los márgenes NO se tocan: el sangrado negativo (−24 a la calle del díptico,
   −74 al margen de página) es composición del diseño y sigue igual. */
/* FASE 17b · reequilibrados por MASA VISIBLE, no por píxeles de caja.
   El encargante ve el códice más pequeño que el objetivo, y tiene razón. Medida
   la cobertura de alfa de cada pieza sobre su lienzo: **el códice cubre el
   55,4 %** de los suyos y **el objetivo el 34,2 %**. A los tamaños de la fase
   17 (84 y 200) eso daba 6.841 y 13.690 px² de tinta: **el objetivo pesaba
   exactamente el doble**.

   Igualar masas pide `h₁ = 0,594·h₂`, pero esa relación choca con las otras dos
   condiciones. Barridos 256 pares de alturas: **ninguno cumple las tres a la
   vez** —masas iguales, prosa a cinco palabras y las dos listas de oficios a la
   misma altura—. El mejor compromiso es éste:

     78 / 138  →  6 y 6 renglones de prosa · mínimo 5 palabras ·
                  desfase entre listas ≤2px · masas 5.898 y 6.519 px²

   Queda un 11 % de diferencia de masa, frente al 100 % de antes. Se prioriza
   así porque la alineación y la legibilidad son requisitos y el equilibrio de
   masa es percepción: 11 % no se ve, 100 % sí.

   Los márgenes siguen sin tocarse. */
/* FASE 19 · CON EL COPY IGUALADO, LAS TRES CONDICIONES CASI CABEN.
   El encargante alargó la descripción del Padre Manuel a 232 caracteres, frente
   a los 222 de José Manuel: 10 de diferencia donde había 83. Rehecho el barrido
   sobre el sitio real, **35 pares cumplen ya Δ0 y cinco palabras por renglón**,
   donde en la fase 18 no había ninguno. Tenía razón: los 39px eran copy.

   De esos 35 se toma el que más sube el códice —88px es el techo: a 90 la prosa
   de la lámina I pasa a ocho renglones y el desnivel vuelve— y, dentro de ese
   techo, el objetivo que menos desequilibra la masa: 170.

     88 / 170  →  7 y 7 renglones · mínimo 5 palabras · desfase 0px

   LO QUE SIGUE SIN CUADRAR, y es la tercera prioridad: las masas quedan a
   **1,32** (7.508 y 9.892 px² de tinta). El Δ0 exige que el objetivo mida al
   menos 170 —por debajo, la prosa de la lámina II baja a seis renglones y el
   desnivel reaparece— y la igualdad de masa pediría 101 de códice, que rompe la
   prosa. Se sacrifica la masa, que es percepción, y no la alineación ni la
   legibilidad, que son requisitos. Es el mismo orden de las fases 17b y 18, ya
   ratificado por el encargante.

   Los márgenes siguen sin tocarse. */
.plate:first-child .trade-obj{height:5.5rem;margin:4.625rem -1.5rem .5rem 1.625rem}      /* 88px */
.plate:last-child .trade-obj{height:10.625rem;margin:.875rem -4.625rem .5rem 1.625rem}   /* 170px */
.trade-skills{clear:right}
/* El flotado y sus márgenes negativos son composición de lienzo 1440: por
   debajo, el objeto se salía del viewport (borde derecho en 1047 con 1024 de
   lienzo) y dejaba al párrafo una medida de una a tres palabras por renglón.
   Se suelta el flotado y el objeto pasa a bloque alineado a la derecha, con
   ancho relativo en vez de alto fijo. */
@media (max-width:1140px){
  /* FASE 27a-b · EL OBJETO ACOMPANA A LA LINEA DE OFICIOS, NO PARTE LA PROSA.
     Visto en un telefono de verdad: soltar el flotado dejaba al objeto en un
     renglon propio ENTRE el cargo y la prosa —medido a 390: `codice-web` a
     y5237, con el cargo acabando en 5209 y la prosa empezando despues—, y eso
     parte el bloque por la mitad y mete aire donde no hace falta.
     Su sitio es **a la derecha, a la altura de la linea de oficios**: el objeto
     acompana al oficio, no interrumpe la biografia.
     Y NO SE PUEDE HACER CON `order` A SECAS ni reordenando el marcado: el
     objeto es el primer hijo de `.trade-flow`, que va `display:contents`, y la
     lamina es un bloque. Se convierte la lamina en FLEX ENVOLVENTE: todo ocupa
     renglon entero salvo los dos ultimos, que comparten linea porque `order`
     los manda al final y sus anchos caben juntos.
     **No depende de cuantos parrafos tenga la prosa**, que es lo que descartaba
     colocar por celdas de rejilla: ahi habria que contar las filas. */
  .plate{
    display:flex;flex-wrap:wrap;align-items:flex-start;
  }
  .plate > *{flex:0 0 100%}
  .plate .trade-obj,
  .plate:first-child .trade-obj,
  .plate:last-child .trade-obj{
    float:none;display:block;height:auto;
    order:2;flex:0 1 auto;min-width:0;
    /* EL ANCHO SALE DE UNA MEDIDA, NO DE UN GUSTO. La segunda linea de oficios
       pide **221 px de minimo**: «Director tecnico» mide 203 en un solo renglon
       y los oficios no parten a mitad (§1.4, `white-space:nowrap`). Con la
       columna en 345 a 390 px, al objeto le caben 104 como mucho. Con 28 % son
       97 y quedan 7 px de holgura sobre ese minimo.
       El primer intento fue `min(38%,9rem)` = 131, y **la segunda lamina se
       partia**: los oficios no cabian en los 194 que quedaban y el objeto caia
       a un renglon propio. Medido, corregido y anotado para que no se suba. */
    width:min(28%,8rem);
    margin:1.5rem 0 0 auto;
  }
  .plate .trade-skills{
    order:1;flex:0 1 auto;width:auto;
    /* que no se coma la fila entera cuando le sobra sitio */
    max-width:min-content;
    margin-top:1.5rem;
  }
}

/* ──────────────────────────────────────────────────────────────────
   9 · COMPAT DE LA PUERTA 01 (fase 6 — página 38 · El Rostro del Amor)
   El vocabulario de esta página ya estaba escrito (§ .page-head,
   .movement, .acts, .opus, .credit, .bridge): aquí solo van los
   puentes con el markup atómico, con el mismo patrón de las zonas
   1-8 —gancho + clase base + .e-atomic-element (0,3,0)— y los aires
   que las bases margin:0 aplastan.
   ────────────────────────────────────────────────────────────────── */

/* 9a · Acolchados de la puerta 01. El cero de sus bloques raíz vive en
   la zona 0 (al principio del bloque): escrito aquí, enterraba por
   empate la guarda de `.section` y los cuatro movimientos se quedaban
   sin sus 104/117px de aire. */
.page-head.e-flexbox-base.e-atomic-element{padding:clamp(9rem,18vh,13rem) 0 clamp(3.5rem,7vh,5.5rem)}

/* 9b · Los cuatro movimientos. `.movement{display:grid}` (0,1,0)
   pierde contra el display:flex de la base (0,2,0): la retícula se
   re-declara entera con sus valores del §. El espejo del corte §6
   ≤860 es obligado, o la guarda 0,3,0 entierra el 0,1,0 de la
   sección 08. */
.movement.e-flexbox-base.e-atomic-element{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);padding:clamp(3rem,6vw,5rem) 0;
}
.movement.e-atomic-element>.e-atomic-element{padding:0;min-width:0}
@media (max-width:860px){
  .movement.e-flexbox-base.e-atomic-element{grid-template-columns:1fr}
}
/* El filete superior del primer movimiento: `:first-child` ya no casa
   —el primer hijo del .wrap es el widget del .sec-head—, y los cuatro
   movimientos son los únicos <article> de la sección. */
.movement:first-of-type{border-top:0}

/* 9c · La obra completa y la película. */
.opus.e-div-block-base.e-atomic-element{padding:clamp(2.4rem,5vw,4.5rem);min-width:0}
.opus .btn-row.e-flexbox-base.e-atomic-element{justify-content:center;margin-top:2.2rem}
.bridge.e-flexbox-base.e-atomic-element{
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,4vw,4rem);
  align-items:center;padding:clamp(2.6rem,5vw,4.4rem);
}
.bridge.e-atomic-element>.e-atomic-element{padding:0;min-width:0}
@media (max-width:1140px){
  .bridge.e-flexbox-base.e-atomic-element{grid-template-columns:1fr}
}
/* La película es continuación de la obra completa, no sección nueva:
   sin aire arriba entre las dos (v8 L1697). ACOTADA A SU PÁGINA: sin el
   prefijo, cualquier página con dos `.tight` seguidas perdía la mitad de su
   aire —le pasaba ya a ¿Quiénes somos?, entre los valores y el equipo—. */
.elementor-38 .section.tight+.section.tight.e-flexbox-base.e-atomic-element{padding-block:0 var(--space-block)}

/* 9d · Aires que las bases margin:0 aplastan (patrón de la zona 8e). */
.page-head .btn-row.e-flexbox-base.e-atomic-element{margin-top:2.1rem}
.page-head p.lead.e-paragraph-base+p.lead.e-paragraph-base{margin-top:1.1rem}
.credit{margin-top:clamp(2.5rem,5vw,3.5rem)}
.bridge .s-h2{margin-top:1.4rem}
.bridge .lead{margin-top:1.4rem}
.bridge .small{margin-top:1.1rem}

/* ──────────────────────────────────────────────────────────────────
   10 · COMPAT DE ¿QUIÉNES SOMOS? (fase 8 — página 42)
   ────────────────────────────────────────────────────────────────── */

/* El cierre de esta página es `.closing`, no la banda del §DA-8: su
   `padding-block` (0,1,0) perdía contra el padding:10px de la base y la
   cita quedaba pegada al díptico. Valor literal de la sección 06. */
.closing.e-flexbox-base.e-atomic-element{padding-block:clamp(7rem,15vh,12rem);padding-inline:0}

/* Escena de cabecera — vocabulario de sistema, no de página: lo hereda La
   Schola con su propia foto. La escena va detrás del texto, enmascarada por
   los cuatro bordes y bajo velo (§3.4: toda cabecera con texto sobre imagen
   lleva velo); el contenido sube por encima con su propio contexto. */
/* El envoltorio que Elementor pone a cada widget lleva `position:relative`
   (frontend.min), así que la escena absoluta se anclaba a ÉL —una caja de
   0px de alto, porque su único hijo está fuera de flujo— y no a la
   cabecera: la fotografía no se vería ni cuando llegue. Se le devuelve el
   anclaje a `.page-head`, que sí es el contexto contratado. */
.page-head .elementor-widget-html{position:static}
.head-scene{position:absolute;inset:0;z-index:0}
/* ⚠ `img, video` DESDE LA 26Y, y hacia falta decirlo porque la respuesta a
   «¿admite video sin tocar la regla?» era NO: el selector nombraba `img` y un
   `<video>` no habria heredado `object-fit:cover` — se habria pintado a su
   tamano intrinseco dentro de una caja absoluta. Es la unica linea que hay que
   cambiar, y es inocua: no hay ningun otro video dentro de una `.head-scene`. */
.head-scene img,
.head-scene video{width:100%;height:100%;object-fit:cover;display:block}

/* ── EL ENCUADRE DE LAS CABECERAS (fase 26S) ──────────────────────
   La escena a sangre nunca tiene la proporción de la obra, así que con
   `object-fit:cover` SIEMPRE sobra algo. Lo que decide qué sobra es
   `object-position`, y por defecto es `50% 50%`: recorta por igual.

   EL CRITERIO ES EL MISMO QUE RIGE EL RECORTE CUADRADO DE LOS RETRATOS:
   en un retrato lo que no puede perderse es LA CABEZA. Todo lo demás —el
   mantel, los libros, el nimbo, el báculo— se puede ir.

   ⚠ Y EL EJE QUE RECORTA CAMBIA CON EL ANCHO, medido en la 26S:

     1920   las cinco recortan por ARRIBA Y ABAJO   -> manda la Y
     1440   tres por arriba, dos por los lados
     1140   dos por arriba, tres por los lados
      834   las cinco por LOS LADOS                 -> manda la X
      390   las cinco por LOS LADOS, y muy fuerte

   Es decir: **la Y es inerte en móvil y la X es inerte en escritorio.**
   No se pisan nunca, y por eso cada pieza puede llevar las dos.

   La premisa de que en móvil se recorta en vertical era falsa: a 390 la
   caja se vuelve vertical y la obra es apaisada, así que se van LOS LADOS
   —hasta 1 218 px de 2 048 en Artículos— y por arriba no se va nada.

   PIEZA POR PIEZA, mirado en captura y no deducido:

     Artículos · Jerónimo    Y 0%  le cortaba la coronilla a 1920
                             X 78% a 390 se quedaba ENTERO FUERA: solo la
                                   calavera y la mano. A 78% entra con margen
     La Schola · Sto Tomás   Y 0%  le cortaba la coronilla a 1920
                             X 50% a 390 la cara ya cae centrada: no se toca
     ¿Quiénes? · Agustín     Y 0%  le cortaba la mitra a 1920
                             X 78% a 390 se perdía la cabeza entera
     El Rostro · Pantocrátor Y 50% la cara está entera; arriba solo se corta
                                   nimbo, que es geometría, no rostro
                             X 62% a 390 la cara salía PARTIDA por la mitad
     Colabora · Juan de Juanes     no se toca: a 1920 todas las cabezas y sus
                                   nimbos están dentro, y a 390 Cristo cae en
                                   el centro exacto. Anclar arriba solo
                                   cortaría mantel y no ganaría nada

   No hay regla global: cada obra tiene su composición. Y no se regenera ni
   se recorta ninguna imagen — esto es CSS y se puede deshacer. */
body.blog        .head-scene img{object-position:78%  0%}   /* Jerónimo   */
body.page-id-325 .head-scene img{object-position:50%  0%}   /* Sto Tomás  */
body.page-id-42  .head-scene img{object-position:78%  0%}   /* Agustín    */
body.page-id-38  .head-scene img{object-position:62% 50%}   /* Pantocrátor*/
/* Colabora baja su encuadre al 28 % en la 26V: con la pieza nueva —una vista
   mas amplia de la mesa— la cabeza de Cristo quedaba pegada al borde superior
   y la tapaba la barra de navegacion. Bajar el encuadre la separa, y medido no
   cuesta contraste: 7,3:1 antes, 7,4:1 despues. La X se queda centrada. */
body.page-id-44  .head-scene img{object-position:50% 28%}
/* Aviso legal: con el 50 % por defecto la cabecera ensenaba el templo y el
   cielo, y la ENTREGA DE LAS LLAVES —que es el asunto del cuadro— quedaba
   cortada por debajo del borde. La cabecera solo ensena el 41 % del alto de
   la obra, asi que el encuadre decide que se ve. Bajarlo al 76 % mete a Pedro
   arrodillado, las llaves encendidas y la mano que las da. Cuesta contraste
   —de 10,0:1 a 5,7:1, medido a 1920— y sigue holgado sobre 4,5. */
body.page-id-1153 .head-scene img{object-position:50% 76%}
/* ── LA ESCENA DE CABECERA VA A SANGRE (fase 21a, bloque 6) ───────────
   El encargante reportó que en La Schola la escena «vive dentro del .wrap
   y mide 1300 px en vez de ir a sangre». Cierto: `.head-scene` es
   `position:absolute;inset:0`, así que mide lo que mida su bloque
   contenedor, y ése era el wrap.

   PRIMER INTENTO, FALLIDO Y ANOTADO PORQUE ENSEÑA: retiré el
   `position:relative` que esta hoja ponía en `.page-head .wrap`. No sirvió
   de nada —medido: la escena seguía a 1300—, porque el relative no lo
   ponía yo solo. Lo pone **Elementor**, en `frontend.min.css`:

       .e-con{ position: var(--position) }   →  relative

   y el wrap es un `.e-con`. Es exactamente el patrón del marco de la fase
   18: una propiedad de tercero sobre un elemento que yo creía sólo mío. La
   diferencia es que esta vez se buscó al autor de la declaración en las
   hojas cargadas en vez de suponerlo.

   LA CORRECCIÓN: se le quita al wrap la condición de bloque contenedor,
   pero SÓLO cuando de verdad hospeda una escena, para no alterar la caja
   de las cabeceras que no la llevan. (0,3,0) bate al (0,1,0) de `.e-con`.
   Así la escena se resuelve contra `.page-head`, que es de ancho completo
   y ya recorta con su `overflow:hidden`.
   No se usa `width:100vw`: con `scrollbar-gutter:stable` el 100vw incluye
   la barra y desbordaría por la derecha. */
.page-head .wrap{z-index:2}
/* Y los hijos del wrap por encima de la escena aunque ésta viva DENTRO de él:
   un absoluto con z-index 0 pinta por encima de sus hermanos sin posicionar,
   así que en La Schola —donde la escena cuelga del wrap y no de la cabecera—
   el rayado tapaba el titular. Con esto da igual dónde cuelgue. */
.page-head .wrap>*:not(.head-scene){position:relative;z-index:1}

/* ──────────────────────────────────────────────────────────────────
   11 · REMATES DE LA SCHOLA (fase 10 — página 325)
   Seis valores que el v8 resolvía con estilo en línea y que aquí bajan
   al sistema, donde se pueden leer y cambiar. Ninguno es decorativo:
   los seis corrigen una caja estirada, un filete huérfano o un vacío.
   ────────────────────────────────────────────────────────────────── */
/* DEROGADA en la fase 21a (bloque 4): era el remedio de la fase 10 al
   sintoma equivocado. El diagnostico de la fase 16 midio que esa lamina,
   con 328x360 px y el 28 % del ancho, dejaba 843 px de negro a su derecha
   y se leia como que faltaba algo, siendo el unico argumento de ahorro de
   la pagina. Ahora la capa 02 SI ocupa el ancho, compuesta a dos columnas.
   Nota de metodo: esta regla y la nueva de la §06 tienen la MISMA
   especificidad (0,2,0), asi que ganaba la que imprime despues -esta- y la
   nueva no hacia nada. Se midio el grid-template-columns computado, que
   decia 440px donde el archivo decia 1fr. */
/* Relleno de las barras del panel de muestra. Muere con la maqueta el
   día que TutorLMS sirva el progreso real (§09). */
.bar i[data-pct="25"]{width:25%}
.bar i[data-pct="68"]{width:68%}
.bar i[data-pct="100"]{width:100%}
/* Aquí vivía `.route.open .route-head`, para que «Más rutas en camino»
   no arrastrase el filete de una lista vacía. Retirada en la fase 21a
   con el resto del vocabulario de rutas: cero usos en las siete páginas. */
/* La línea de estado de la ficha de claustro no tenía aire (venía así
   del v8): toma el mismo que la nota del formulario. */
.teacher-count{margin-top:1.1rem}
/* Última fila del panel: sin filete de cierre (v8 L2683). */
.dash-main>.dash-course:last-child{border-bottom:0}

/* ──────────────────────────────────────────────────────────────────
   12 · ARTÍCULOS · el vestido de las plantillas
   (fase 11 a ciegas · REESCRITA en la fase 12 contra el render)

   Artículos no es una página sino cuatro plantillas del Theme Builder
   (archivo 786, entrada 788 y las dos fichas de bucle 782/784), así que
   su marcado no es el HTML del v8: lo pone Elementor, con sus
   envoltorios (.elementor-widget-container, .elementor-heading-title,
   .elementor-loop-container, .e-loop-item). Esta sección es el puente
   entre el vocabulario del sistema —ya escrito en la §06— y el marcado
   que de verdad existe.

   La versión anterior se escribió sin ver el render y se equivocaba en
   lo más grande: vestía el contenedor INTERIOR del bucle y dejaba en pie
   el `.articles{display:grid;grid-template-columns:repeat(3,1fr)}` de la
   §06, que en el marcado real cae sobre el ENVOLTORIO del widget —cuyo
   único hijo es `.elementor-widget-container`—. Resultado medido en el
   arnés de la fase 12 a 1440: el bucle entero renderizaba dentro de una
   columna de 323px de las tres de 1012px, con fichas de 94px y titulares
   partidos letra a letra. Se corrige en 12b.
   ────────────────────────────────────────────────────────────────── */

/* 12·0 · EL ANCHO DE LA PÁGINA. Estas dos plantillas son las únicas del
   sitio que sirven contextos NO singulares o no construidos con
   Elementor, y ahí `elementor-page-<id>` no llega al <body>:
   elementor/includes/frontend.php L294-300 la añade solo si
   `is_singular()` Y el documento `is_built_with_elementor()`.
     · /articulos/ es la página de entradas (page_for_posts=40) ⇒
       is_home(), no is_singular().
     · una entrada normal es singular, pero el documento que se consulta
       es la ENTRADA, que no está construida con Elementor.
   Sin esa clase se activa el corsé del tema padre —
   `body:not([class*=elementor-page-]) .site-main{max-width:500/600/800/1140px}`
   (hello-elementor theme.css)—, que medido en el arnés dejaba el
   contenido en 1140px a 1440 (80px más adentro que en el resto del
   sitio, donde `.wrap` vale 1300) y en 800px a 1024. Empate de
   especificidad (0,2,1) resuelto por orden: esta sección imprime
   después. También cae el `padding-inline:10px` de ≤575, que a 390
   desalineaba el contenido respecto de la cabecera. */
body.blog .site-main,
body.archive .site-main,
body.search .site-main,
body.single-post .site-main{max-width:none;padding-inline:0}

/* 12a · Des-base de los contenedores atómicos de las fichas.
   FASE 15 · el comentario que había aquí decía lo contrario de lo que ocurre
   —«son FILAS y la base los pondría en columna»— y sobre esa premisa
   invertida se escribió toda la zona: la base atómica hace FILA de todo
   e-flexbox, así que las filas (.article-foot, .byline) no necesitaban
   guarda y las columnas (.article, .article-body, .feature-body) sí. Ese
   error es el que partía los titulares letra a letra en el sitio vivo. La
   columna se declara ahora en la guarda única de la zona 0; aquí quedan
   sólo las filas y retículas, que la baten por orden. */
.article.e-flexbox-base.e-atomic-element{padding:0}
.article-cover.e-flexbox-base.e-atomic-element{padding:0;display:grid;place-items:center;position:relative}
.article-body.e-flexbox-base.e-atomic-element{padding:clamp(1.5rem,2.2vw,1.9rem);gap:1rem}
.article-foot.e-flexbox-base.e-atomic-element{flex-direction:row;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0 0}
.byline.e-flexbox-base.e-atomic-element{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem;padding:0}
.feature.e-flexbox-base.e-atomic-element{display:grid;grid-template-columns:1fr 1.25fr;align-items:stretch;padding:0}
.feature-cover.e-flexbox-base.e-atomic-element{padding:0;display:grid;place-items:center;position:relative}
.feature-body.e-flexbox-base.e-atomic-element{padding:clamp(2.2rem,3.6vw,3.25rem);justify-content:center;gap:1.15rem}

/* 12b · LA REJILLA DEL BUCLE. Dos piezas y hay que distinguirlas:
   `.articles` es el ENVOLTORIO del widget (un solo hijo,
   `.elementor-widget-container`), y la retícula real es
   `.elementor-loop-container`, que Elementor pinta dentro. La §06 hace
   rejilla del envoltorio —correcto para el marcado del v8, ruinoso
   aquí—, así que lo primero es devolverlo a flujo normal.
   `--grid-columns` debe seguir vivo porque el destacado ocupa
   `grid-column: span min(3, var(--grid-columns))` (loop-grid.php L254);
   por eso los cortes se hacen moviendo la VARIABLE en el propio
   contenedor —el valor propio gana al heredado del envoltorio, donde
   Elementor escribe sus cortes de 1024/767— y no tocando
   `grid-template-columns`: si la retícula y el span discreparan, el
   destacado abriría una columna implícita.
   `grid-auto-rows` vuelve a `auto`: el ajuste `equal_height` del widget
   lo pone a `1fr`, que con el destacado a tres columnas iguala TODAS las
   filas a la más alta y deja las fichas con un tercio de aire muerto.
   Con `auto`, cada fila mide su contenido y las fichas siguen
   igualándose dentro de su fila (el `height:100%` de `.e-loop-item>.e-con`
   que pone el mismo ajuste). Especificidad 0,4,0 para empatar con el CSS
   generado de la plantilla y ganar por orden. */
.articles{display:block;grid-template-columns:none;gap:0}
.elementor .articles.elementor-widget-loop-grid .elementor-loop-container{
  display:grid;grid-template-columns:repeat(var(--grid-columns,3),minmax(0,1fr));
  gap:clamp(1.5rem,2.3vw,2rem);grid-auto-rows:auto;
}
.articles .e-loop-item{display:flex;min-width:0}
.articles .e-loop-item>.e-con{width:100%}

/* 12c · La voz dentro de los widgets. Los titulares del sistema pasan a
   ser envoltorios y quien pinta es su hijo: se le devuelve la herencia
   para no repetir la escala en dos sitios. `.elementor-heading-title`
   trae además `line-height:1` (frontend.min), que en el H1 de la entrada
   —un `theme-post-title` envuelto en `.display.s-h1`— aplastaba las dos
   líneas del titular contra el 1.08 del sistema (§2.1 .display). */
.page-head .display .elementor-heading-title,
.article-title .elementor-heading-title,
.feature-title .elementor-heading-title,
.article-foot .elementor-heading-title,
/* FASE 21w · los tres ganchos de texto que la 21t y la 21v pasaron a `heading`
   al morir los widgets `theme-*`. Faltaban en esta lista, y se notaba justo
   donde el encargante lo vio: la entradilla de la entrada partía en dos
   renglones con INTERLINEADO 1,0 —el título del widget traía el de Elementor y
   no el 1,75 de `.lead`, que vive en el envoltorio—. `font:inherit` lo arregla
   porque el interlineado va dentro de `font`. */
.page-head .lead .elementor-heading-title,
.article-excerpt .elementor-heading-title,
.feature-body .small .elementor-heading-title{font:inherit;color:inherit;letter-spacing:inherit}
.article-title a,.feature-title a,.article-go a{color:inherit;text-decoration:none}
.article-excerpt p,.small p{margin:0;font:inherit;color:inherit}

/* Titulares de ficha y de destacado: Cormorant 500 —el peso base del
   display (§2.1: el 300 del v8 muere)— y tracking 0 (ley §1.8). */
.article-title{
  font-family:var(--font-display);font-weight:500;letter-spacing:0;
  font-size:clamp(1.2rem,1.45vw,1.375rem);line-height:1.2;
}
.article-excerpt{font-size:var(--size-small);color:var(--text-muted);line-height:1.75}
.feature-title{
  font-family:var(--font-display);font-weight:500;letter-spacing:0;
  font-size:clamp(1.85rem,3vw,2.625rem);line-height:1.12;margin-top:0;
}
@media (hover:hover) and (pointer:fine){.article:hover .article-title,.feature:hover .feature-title{color:var(--accent)}}
.article:active .article-title,.feature:active .feature-title{color:var(--accent)}

/* 12d · MATERIA Y FIRMA · los metadatos de la ficha.

   LA MATERIA abre las dos fichas. En la primera pasada cada plantilla daba
   sus datos en un orden distinto —la normal firma+materia arriba, el
   destacado firma+fecha arriba y la materia colgada de la cubierta—, y una
   rejilla donde la pieza grande no se lee igual que las pequeñas no es una
   jerarquía: es una excepción. Segunda pasada: las dos dan los mismos cinco
   datos en el mismo orden — materia · titular · entradilla · firma ·
   minutaje — y `.article-cat` es el primero.
   Sin caja: `.tag` es la etiqueta de ESTADO del sistema («En producción ·
   2027»), y ocho marcos velvet dentro de la rejilla competirían con el marco
   de las propias láminas — el mismo motivo por el que la 12f retiró las
   píldoras de los filtros. Toma la voz de la fila de filtros (`.chip`) y el
   oro que esta misma sección reserva a la materia (`.byline-meta a`).
   `align-self` no es cosmética: dentro de un contenedor flexbox en columna
   los ítems se blockifican —el `inline-flex` del rótulo no sobrevive— y el
   envoltorio del widget se estiraría a todo el ancho de la ficha. */
.article-cat{
  align-self:flex-start;
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-secondary);
}
.article-cat .elementor-heading-title{font:inherit;color:inherit;letter-spacing:inherit}
.article-cat a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast)}
@media (hover:hover) and (pointer:fine){.article-cat a:hover{color:var(--accent-hi)}}
.article-cat a:active{color:var(--accent-hi)}
/* Con la materia ya dentro del cuerpo, en el destacado quedan dos versalitas
   Jost seguidas —«Artículo destacado» y la materia— y `.label` es oro igual
   que ella: medido en el arnés, misma familia, mismo cuerpo, mismo tracking y
   misma tinta. Eso no es jerarquía, es un eco. El rótulo de hueco es UI —dice
   en qué parte de la rejilla estás, no de qué trata la pieza—, así que baja a
   `--text-faint`, la tinta que la 12h ya da al minutaje, y el oro se queda
   donde esta sección lo reserva: la materia y la llamada. */
.feature-body>.label{color:var(--text-faint)}

/* LA FIRMA. Los selectores de elemento del v8 (`.byline b`,
   `.byline span`) ya no alcanzan: sus papeles pasan a widgets, y en la
   entrada uno de los metadatos NO es un titular sino el shortcode del
   tiempo de lectura (`.elementor-shortcode`), que la versión anterior
   dejaba sin vestir —salía en Inter 16px junto a dos versalitas Jost de
   11px—. Se viste el ENVOLTORIO y los hijos heredan, que además es lo
   único que cubre a la vez heading y shortcode.
   Los envoltorios pasan a `inline-flex` para que el «·» separador pueda
   ser hermano de flexbox: como `::before` de un envoltorio de bloque
   caía a una línea propia. El «·» en velvet es el separador ornamental
   del sistema (§1.4, mismo idioma que `.trade-skills i+i::before`). */
.byline-name,.byline-meta{display:inline-flex;align-items:baseline;gap:.85rem}
.byline-name{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-secondary);
}
.byline-meta{
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--text-faint);
}
.byline-name .elementor-heading-title,
.byline-meta .elementor-heading-title,
.byline-meta .elementor-shortcode{font:inherit;color:inherit;letter-spacing:inherit;line-height:1.6}
/* El «·» SEPARA, y por eso cuelga de quien va DELANTE y no de quien va
   detrás. Como `::before` del seguidor rompía por dos sitios distintos, los
   dos medidos en el arnés: con la firma técnica oculta el punto abría la
   línea de la ficha («· DOCTRINA»), y en cuanto la fila envolvía —por debajo
   de 870 en el destacado y de 600 en la cabecera de la entrada— abría el
   renglón nuevo como si fuera una viñeta. Como `::after` del que precede, el
   punto desaparece con él cuando se oculta y, si la fila envuelve, CIERRA el
   renglón en vez de abrirlo, que es lo que un separador hace. Ningún corte
   de pantalla hace falta: la regla vale a cualquier ancho.
   `:not(:last-child)` deja el último sin punto colgando. */
.byline>*:not(:last-child)::after{content:'·';color:var(--accent-alt);flex:none}
/* Solo la categoría es enlace (post-terms con link:yes): la fecha y el
   minutaje no lo son, así que el oro marca la materia sin repartirse. */
.byline-meta a{color:var(--accent);text-decoration:none}
@media (hover:hover) and (pointer:fine){.byline-meta a:hover{color:var(--accent-hi)}}
.byline-meta a:active{color:var(--accent-hi)}
/* En la cabecera de la entrada la firma es un bloque más del `.page-head`,
   y ahí el aire lo reparten márgenes propios (`.chapter`, `h1`, `.lead` en
   la §06): sin esta línea la firma salía pegada a la entradilla. */
.page-head .byline{margin-top:1.9rem}

/* 12e · La línea del archivo actual. El estilo va en el HIJO y nunca en
   el envoltorio: en /articulos/ el título de archivo de Elementor sale
   vacío —`Utils::get_page_title()` no cubre `is_home()`— y un envoltorio
   con marco o rayita dejaría una marca huérfana en la página principal
   de la sección. Toma el idioma de `.label` (rayita + Jost versalita)
   porque dice lo mismo: en qué parte del periódico estás. */
.archive-current{margin-top:1.25rem}
.archive-current .elementor-heading-title{
  display:inline-flex;align-items:center;gap:.75em;
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-secondary);
}
.archive-current .elementor-heading-title::before{content:'';width:26px;height:1px;background:currentColor;opacity:.55;flex:none}

/* 12f · FILTROS Y BUSCADOR — la barra del periódico, no un panel de
   control. La §06 los dibujaba como seis píldoras con marco completo
   (sin radio, sí, pero seis cajas): en una página cuya pieza es la
   lámina con marco, seis marcos más compiten con las fichas y suenan a
   interfaz de aplicación. El sistema ya tiene el idioma correcto para
   una fila de rótulos navegables —los enlaces del pie (§2.1 `.socials`,
   portada L1932-1936): Jost versalita con filete inferior— y para
   encuadrar una fila de datos —el doble filete de la tabula y de la
   marquesina—. Aquí se combinan: la fila entera vive entre dos filetes
   (§3.3: la sombra no existe, la línea sí) y cada filtro es texto con su
   filete propio, que el activo enciende en oro.
   El filtro activo sigue sin runtime alguno — WordPress ya marca el
   <body> con `blog` y `category-<slug>`, así que el estado sale gratis.
   (El comentario evita a propósito la palabra que el cortafuegos del
   alojamiento confunde con un URI ejecutable: véase BLOQUEOS.md.) */
.filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.75rem;
  border-block:1px solid var(--border-hairline);padding-block:.95rem;
  margin-bottom:clamp(2.5rem,4.5vw,3.75rem);
}
.chip{
  display:inline-flex;align-items:center;
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-wide);
  color:var(--text-secondary);text-decoration:none;
  background:none;border:0;border-bottom:1px solid transparent;border-radius:0;
  padding:.3rem 0 .35rem;
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
@media (hover:hover) and (pointer:fine){.chip:hover{color:var(--text-primary);border-bottom-color:var(--border-frame)}}
.chip:active{color:var(--text-primary);border-bottom-color:var(--border-frame)}
body.blog .chip[data-cat="todos"],
body.category-actualidad .chip[data-cat="actualidad"],
body.category-doctrina .chip[data-cat="doctrina"],
body.category-historia .chip[data-cat="historia"],
body.category-testimonio .chip[data-cat="testimonio"],
body.category-geopolitica .chip[data-cat="geopolitica"]{
  color:var(--accent);border-bottom-color:var(--accent);
}

/* El buscador vive en la misma barra, separado por un filete vertical.
   Sin caja: el óvalo del v8 y el marco inferior de la §06 sobran dentro
   de una fila ya encuadrada. */
form.search{
  display:flex;align-items:center;gap:.75rem;margin-left:auto;min-width:16rem;
  border:0;border-inline-start:1px solid var(--border-hairline);
  padding:.15rem 0 .15rem 1.75rem;
}
form.search:focus-within{border-inline-start-color:var(--accent)}
form.search input{
  background:none;border:0;width:100%;
  font-family:var(--font-body);font-size:.8125rem;font-weight:400;color:var(--text-primary);
  /* `appearance:none` no es cosmética: mientras el campo conserva la
     apariencia nativa `textfield`, Chromium dibuja SU anillo de foco y
     descarta el `outline-color` y el `outline-offset` del autor —medido
     en el arnés: ni con !important entraba el oro—. Con la apariencia
     desactivada manda el `:focus-visible` del sistema (§3.9) y de paso
     cae el aspa de borrado de WebKit, que no está en la paleta. */
  appearance:none;-webkit-appearance:none;
  /* Des-reset del padre (§11 zona 6): su `transition:all .3s` sobre los
     campos hacía que el anillo de foco ENTRARA animado —medido: a los
     0 ms el borde iba aún por currentColor y offset −1px, y solo a los
     300 ms era el oro del sistema—. El foco se ve o no se ve; no se
     estrena. */
  transition:color var(--dur-fast);
}
form.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* FASE 27a-r · EL ACOLCHADO DEL CAMPO, QUE NO ES NUESTRO. Medido a 360x800: el
   campo mide 190,5 px, el navegador le pone **16 px de acolchado a cada lado**
   —no lo pide ninguna regla del sistema— y deja 158,5 utiles, cuando «Buscar
   por palabras clave» pide **159,6**. Faltaba 1,1 px y el marcador se cortaba.

   Y ese acolchado ademas contradice al diseno: la fila se separa con el `gap` de
   12 px del `form`, y esos 16 px empujaban el texto a **28 px del icono**.

   Se retira SOLO donde hace falta —el buscador del 404, por debajo de 380—,
   que es la via que menos toca: escritorio, tableta y las otras dos apariciones
   del buscador se quedan como estan. El copy del marcador no se toca. */
@media (max-width:380px){
  body.error404 .page-head form.search input{padding-inline:0}
}
form.search input::placeholder{color:var(--text-placeholder)}
/* La §06 apagaba el anillo de foco del campo (`outline:none`, 0,1,1, que
   batía al `:focus-visible` global de 0,1,0). El encargo §3 no admite
   excepciones en el foco visible: se restituye a 0,2,1. */
form.search input:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
form.search svg{width:14px;height:14px;fill:none;stroke:var(--text-faint);stroke-width:1.6;flex:none}
/* El botón necesita el mismo des-reset del tema padre que el del
   mini-form del pie (§11 zona 6): marco y relleno rosa. */
form.search .form-go{background:none;border:0;border-radius:0;padding:0;flex:none;transition:color var(--dur-fast)}
form.search .form-go:focus{background:none;color:var(--accent-hi)}
@media (hover:hover) and (pointer:fine){form.search .form-go:hover{background:none;color:var(--accent-hi)}}
form.search .form-go:active{background:none;color:var(--accent-hi)}

/* 12g · LA LÁMINA Y SU HUECO DE IMAGEN. `.article` y `.feature` son
   láminas de registro códice (§2.1: `--surface-base` + marco
   `--border-frame`, patrón `.plate`; nada se eleva, ningún radio,
   ninguna sombra) — eso ya lo pone la §06.
   Lo que se corrige aquí es la cubierta. No hay ni una imagen de
   artículo en la mediateca y no puede haberla (MATERIAL-DESPLIEGUE.md),
   y la §06 rellenaba el hueco con un degradado velvet→oro: una mancha de
   color que finge ser una imagen, justo lo contrario de la regla de
   integración (§3.6). El sistema ya resuelve esto en dos sitios —
   `.placeholder-portrait` del díptico y `.bleed:empty` de las escenas
   pendientes—: rayado de pergamino a 45° sobre el fondo y rótulo Jost
   menudo. Se propaga tal cual, y se apaga solo el día que entre el
   <img> (la misma mecánica autocancelable de `.bleed:empty`). */
.article-cover,.feature-cover{
  background:
    repeating-linear-gradient(45deg, rgba(200,191,166,.05) 0 1px, transparent 1px 10px),
    var(--surface-base);
}
.article-cover{aspect-ratio:16/9;border-bottom:1px solid var(--border-hairline)}
.feature-cover{min-height:clamp(16rem,26vw,22rem);border-inline-end:1px solid var(--border-hairline)}
/* FASE 27a-b · LA FICHA DESTACADA SE APILA, COMO SUS CUATRO HERMANAS.
   Decision del encargante sobre la propuesta de la 27a.
   EL DEFECTO, medido: la cubierta se servia a **1,05** en 1920 —519x496—
   cuando las cuatro hermanas respetan 1,78, y por el recorte de `cover` se
   perdia el **41 % del fichero**. En 834 y 390 ya salia bien —1,73 y 1,69—,
   asi que **era un defecto de escritorio y solo de escritorio**.
   LA CAUSA no era un numero mal puesto: `.feature` es una ficha de DOS
   columnas con `align-items:stretch`, y **el alto de la fila lo fijaba el
   cuerpo de texto**. La cubierta media 519 de ancho por tocarle esa fraccion
   y 496 de alto por medir eso la fila: 1,05 no era un valor elegido, era el
   cociente de dos cosas que se decidian aparte. Por eso no habia ajuste
   posible: ensanchar la columna engordaba el cuerpo y la cuenta se perseguia
   a si misma, y fijarle la proporcion dejaba 204 px de hueco dentro.
   LA SALIDA es la que ya usan las hermanas: **una columna, cubierta arriba
   con su propia proporcion**. Es exactamente `.article` con `.article-cover`,
   asi que no se inventa vocabulario: se aplica el que hay.
   Y por debajo de 860 la ficha YA se apilaba desde antes; lo unico que
   cambia alli es que la cubierta pasa de un alto minimo a la proporcion. */
/* CON LOS TRES GANCHOS Y NO CON `.feature` A SECAS: la que manda es
   `.feature.e-flexbox-base.e-atomic-element` (0,3,0) de la zona de compat, y una
   regla de clase sola pierde por especificidad aunque venga despues. Medido: con
   `.feature{grid-template-columns:1fr}` la cubierta seguia saliendo a 1,05. */
.feature.e-flexbox-base.e-atomic-element{grid-template-columns:1fr}
.feature-cover{
  aspect-ratio:16/9;min-height:0;
  border-inline-end:0;
  border-bottom:1px solid var(--border-hairline);   /* el filete pasa de vertical a horizontal, como en `.article-cover` */
}
/* El rótulo se dice UNA vez, en la cubierta grande: ocho repeticiones del
   mismo aviso en la rejilla son ruido, y con el destacado rotulado el
   rayado de las fichas ya se lee como lo que es. */
.feature-cover::after{
  content:'Imagen pendiente';
  font-family:var(--font-label);font-size:.625rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--text-dim);
}
.article-cover:has(img),.feature-cover:has(img){background:var(--surface-base)}
.feature-cover:has(img)::after{content:none}

/* FASE 16 · D1 RESUELTA: la ficha SIN imagen va SIN HUECO, no con hueco
   marcado. El rayado de «pieza pendiente» es honesto cuando hay una pieza
   adjudicada que todavía no ha llegado —el retrato del díptico, la escena de
   una cabecera—: dice «esto está reservado». Deja de serlo en cuanto la
   ausencia es la norma y no la excepción, que es lo que pasa en una rejilla
   de periódico: el encargante zanjó que las fichas llevan imagen SÓLO cuando
   el artículo tenga una de verdad, así que una rejilla entera de rayados no
   anuncia material en camino, sino que se lee como error de carga.
   La cubierta desaparece entera —no se atenúa— y la ficha se compone
   directamente desde la categoría. Es autocancelable en los dos sentidos: el
   día que un artículo traiga su <img>, su cubierta vuelve sola.
   El destacado necesita además soltar su columna de imagen: su retícula es
   `1fr 1.25fr` y sin cubierta dejaría media lámina vacía.

   FORMA DE LA REGLA (§12.4): las cubiertas tienen guarda des-base con
   `display:grid` a (0,3,0). Un `.article-cover:not(:has(img))` es (0,1,1) y
   pierde: hay que repetir el gancho completo. Primera vez que la ley escrita
   en la fase 15 atrapa un error mío antes de que lo vea el encargante. */
.article-cover.e-flexbox-base.e-atomic-element:not(:has(img)),
.feature-cover.e-flexbox-base.e-atomic-element:not(:has(img)){display:none}
.feature.e-flexbox-base.e-atomic-element:not(:has(.feature-cover img)){grid-template-columns:1fr}
.article-cover img,.feature-cover img{width:100%;height:100%;object-fit:cover;display:block}
/* La etiqueta de materia YA NO flota sobre la cubierta. En la segunda pasada
   la categoría bajó al cuerpo del destacado para ser el primero de los cinco
   datos, igual que en la ficha (12d, `.article-cat`), así que la cubierta se
   queda con su rótulo centrado y nada más. La regla de la §06 que la colgaba
   en absoluto se queda sin sujeto; no se borra —es vocabulario del v8— pero
   aquí ya no se le da aire porque no hay a quién. */

/* 12h · El pie de la ficha: minutaje a la izquierda y la llamada a la
   derecha. El minutaje es metadato (`--text-faint` es UI, no prosa,
   §1.3) y la llamada es acción, luego va en oro. */
.article-foot{
  border-top:1px solid var(--border-hairline);
  font-family:var(--font-label);font-size:.625rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--text-faint);
}
.article-foot .elementor-shortcode{font:inherit;color:inherit;letter-spacing:inherit}
.article-go,.article-go a{color:var(--accent);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.article-go a:hover{color:var(--accent-hi)}}
.article-go a:active{color:var(--accent-hi)}

/* 12i · Paginación y bucle vacío: voz de etiqueta, filete de cierre y
   ninguna pastilla. */
.articles .elementor-pagination{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.5rem;
  margin-top:clamp(2.5rem,4.5vw,3.75rem);padding-top:1.4rem;
  border-top:1px solid var(--border-hairline);
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-wide);
}
.articles .elementor-pagination .page-numbers{
  color:var(--text-faint);padding:0;text-decoration:none;
  border-bottom:1px solid transparent;transition:color var(--dur-fast), border-color var(--dur-fast);
}
.articles .elementor-pagination .page-numbers.current{color:var(--accent);border-bottom-color:var(--accent)}
@media (hover:hover) and (pointer:fine){.articles .elementor-pagination a.page-numbers:hover{color:var(--accent-hi);border-bottom-color:var(--accent-hi)}}
.articles .elementor-pagination a.page-numbers:active{color:var(--accent-hi);border-bottom-color:var(--accent-hi)}
.articles .e-loop-nothing-found-message{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--border-hairline)}
.articles .e-loop-nothing-found-message__text{
  margin:0;font-family:var(--font-display);font-style:italic;
  font-size:var(--size-h4);line-height:1.3;color:var(--text-soft);
}

/* 12j · EL CUERPO DEL ARTÍCULO. `.prose` corta a `--width-read` (68ch,
   el ancho de lectura del encargo §4) dentro de `.wrap.narrow`, pero sus
   hijos reales cuelgan de `.elementor-widget-container`, así que
   `.prose>*+*` no los alcanza. Todo lo de aquí es el mismo ritmo de
   `.prose` llegando un nivel más abajo. */
.article-text .elementor-widget-container>*+*{margin-top:1.15em}
.article-text h2{
  font-family:var(--font-display);font-weight:500;font-size:var(--size-h3);
  line-height:1.18;letter-spacing:0;color:var(--text-primary);margin-top:2.2em;
}
.article-text h3{
  font-family:var(--font-display);font-weight:500;font-size:1.25rem;
  line-height:1.25;letter-spacing:0;color:var(--text-primary);margin-top:1.9em;
}
.article-text a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--border-gold-sealed)}
@media (hover:hover) and (pointer:fine){.article-text a:hover{color:var(--accent-hi)}}
.article-text a:active{color:var(--accent-hi)}
/* Cita dentro del artículo: el idioma de `.quote` (§2.1) con el filete
   de grado sellado a la izquierda; ninguna comilla decorativa, ninguna
   caja. */
.article-text blockquote{
  margin:2.2em 0;padding-inline-start:clamp(1.25rem,2.4vw,2rem);
  border-inline-start:1px solid var(--border-gold-sealed);
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.42;letter-spacing:0;
  color:var(--text-primary);
}
.article-text blockquote p{margin:0;font:inherit;color:inherit}
.article-text ul,.article-text ol{margin-inline-start:1.15rem;padding:0}
.article-text li+li{margin-top:.5em}
.article-text li::marker{color:var(--accent)}
.article-text img{width:100%;height:auto;display:block}
.article-text figcaption{
  margin-top:.75rem;font-family:var(--font-display);font-style:italic;
  font-size:1rem;color:var(--text-soft);
}

/* 12k · CAJA DE AUTOR: lámina con marco, como `.plate` (DA-1, códice
   total). Toda esta zona va a 0,3,0 o más a propósito: los controles del
   widget nativo declaran valores globales por defecto —el color de su
   botón es COLOR_SECONDARY del kit, que en esta paleta es #0A0C10, o sea
   el propio fondo—, y Elementor los imprime en el CSS de la plantilla
   con la especificidad del envoltorio. Medido en el arnés: sin esta
   defensa el enlace «Más artículos de esta firma» sale invisible. */
.elementor .author-box.elementor-widget-author-box .elementor-author-box{
  background:var(--surface-base);border:1px solid var(--border-frame);
  padding:clamp(1.75rem,3vw,2.5rem);align-items:flex-start;gap:0;
}
/* El avatar deja de ser círculo y pasa a lámina cuadrada con marco
   (§2.1). Mientras el perfil no tenga retrato, WordPress sirve el
   comodín de Gravatar —una silueta gris clara que no está en la
   paleta—: se retira y queda el hueco marcado con el mismo rayado que
   `.placeholder-portrait`. El día que el retrato viva en la mediateca su
   `src` es del propio dominio y la regla deja de casar sola. */
.elementor .author-box.elementor-widget-author-box .elementor-author-box__avatar{
  flex:none;width:6rem;height:6rem;overflow:hidden;
  border:1px solid var(--border-frame);display:grid;place-items:center;
  background:
    repeating-linear-gradient(45deg, rgba(200,191,166,.05) 0 1px, transparent 1px 10px),
    var(--surface-base);
}
.elementor .author-box.elementor-widget-author-box .elementor-author-box__avatar img{
  width:100%;height:100%;object-fit:cover;border-radius:0;display:block;
}
.elementor .author-box.elementor-widget-author-box .elementor-author-box__avatar img[src*="gravatar.com"]{display:none}
.elementor .author-box.elementor-widget-author-box .elementor-author-box__text{padding-inline-start:clamp(1.4rem,2.4vw,2rem)}
.elementor .author-box.elementor-widget-author-box .elementor-author-box__name{
  margin:0;font-family:var(--font-display);font-weight:500;font-size:var(--size-h4);
  line-height:1.1;letter-spacing:0;color:var(--text-primary);
}
.elementor .author-box.elementor-widget-author-box .elementor-author-box__bio{
  margin:.9rem 0 0;font-family:var(--font-body);font-size:var(--size-small);
  font-weight:400;line-height:1.85;letter-spacing:normal;color:var(--text-muted);
}
.elementor .author-box.elementor-widget-author-box .elementor-author-box__bio:empty{display:none}
/* El enlace toma el idioma de los rótulos navegables de la casa (los del
   pie y los filtros de arriba): Jost versalita con filete, sin caja. */
.elementor .author-box.elementor-widget-author-box .elementor-author-box__button{
  display:inline-block;margin-top:1.4rem;padding:0 0 2px;
  background:none;border:0;border-bottom:1px solid var(--border-frame);border-radius:0;
  font-family:var(--font-label);font-size:var(--size-label);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--track-btn);
  color:var(--text-secondary);text-decoration:none;
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
.elementor .author-box.elementor-widget-author-box .elementor-author-box__button:focus,.elementor .author-box.elementor-widget-author-box .elementor-author-box__button:hover{
  background:none;color:var(--accent-hi);border-color:var(--accent-hi);
}
.elementor .author-box.elementor-widget-author-box .elementor-author-box__button:active{
  background:none;color:var(--accent-hi);border-color:var(--accent-hi);
}

/* 12l · CORTES. Los de esta página son los del sistema (§6: 1140/860),
   no los de Elementor (1024/767): la variable se mueve en el propio
   contenedor del bucle para que el span del destacado la siga (12b). */
@media (max-width:1140px){
  .articles .elementor-loop-container{--grid-columns:2}
  /* Medido en el arnés: los seis filtros más el buscador piden ~1018px de
     lienzo útil y el corte los deja en ~921 a 1024, así que el buscador
     envolvía solo y su filete VERTICAL quedaba colgando en la segunda
     línea. Por debajo de 1140 baja a propósito a su renglón y el filete
     pasa a horizontal — el mismo mecanismo, girado. */
  .filters{gap:.35rem 1.4rem}
  form.search{
    margin-left:0;width:100%;min-width:0;
    border-inline-start:0;border-top:1px solid var(--border-hairline);
    padding:.85rem 0 .15rem;
  }
  form.search:focus-within{border-inline-start-color:transparent;border-top-color:var(--accent)}
}
@media (max-width:860px){
  .articles .elementor-loop-container{--grid-columns:1}
  .feature.e-flexbox-base.e-atomic-element{grid-template-columns:1fr}
  .feature-cover{min-height:clamp(11rem,32vw,14rem);border-inline-end:0;border-bottom:1px solid var(--border-hairline)}
  .filters{padding-block:.85rem}
}
@media (max-width:520px){
  /* Dos renglones de filtros: el filete del activo necesita aire o roza la
     línea de abajo. */
  .filters{gap:.85rem 1.15rem}
  .elementor .author-box.elementor-widget-author-box .elementor-author-box{flex-direction:column;align-items:flex-start}
  .elementor .author-box.elementor-widget-author-box .elementor-author-box__avatar{margin:0 0 1.25rem}
  .elementor .author-box.elementor-widget-author-box .elementor-author-box__text{padding-inline-start:0}
}

/* El sobresangrado de la banda «bite» muerde el margen a propósito (§3.6b),
   pero con las escenas ya colocadas eso produce barra de scroll horizontal.
   Se recorta en el contenedor de contenido con `clip` y NO con `hidden`:
   `hidden` crearía un contexto de scroll y rompería el `position:sticky` del
   ¶ de la marginalia, que es lo que sostiene la firma editorial de la home. */
main#content{overflow-x:clip}

/* 12m · LAS PALABRAS NO SE PARTEN.
   Elementor Pro pone `.e-loop-item *{word-break:break-word}` a TODO
   descendiente de una ficha del bucle (pro-widget-loop-common.css). En una
   columna estrecha eso corta las palabras por la mitad —el defecto que el
   encargante describe como «saltos que cortan palabras y frases»— y en
   castellano, con palabras largas, salta enseguida. Se devuelve el corte
   normal y se conserva la única red que sí hace falta: `overflow-wrap`, que
   solo parte lo que de verdad no cabe (una URL sin espacios), nunca una
   palabra que podría ir al renglón siguiente. */
.articles .e-loop-item *,
.related .e-loop-item *{word-break:normal;overflow-wrap:break-word}

/* La firma técnica no se pinta. Mientras las entradas de muestra sigan
   asignadas al usuario del MCP, ni su caja de autor ni su nombre llegan a la
   página: el tema marca `autor-tecnico` en el <body> y en cada entrada del
   bucle. Es una red mientras se reasignan; la solución es la reasignación. */
.autor-tecnico .author-box,
.autor-tecnico .byline-name{display:none}
/* Y con la firma oculta, la `.byline` de la ficha se queda vacía: su caja
   sigue contando en el `gap` de `.article-body` y abría un renglón muerto
   entre la entradilla y el pie. Se retira entera, y solo ahí — en el
   destacado la `.byline` acompaña también a la fecha y sigue teniendo qué
   decir. Cae sola el día que las entradas se reasignen. */
.autor-tecnico .article-body>.byline{display:none}

/* 12n · LA CABECERA DE FIRMA (fase 21x). El archivo de autor llegaba con la
   cabecera de la sección entera y el nombre debajo, en el renglón fino que
   dice en qué parte del periódico estás: se leía como un filtro más. Es la
   página de una persona, así que manda el nombre y el retrato va a su lado.
   LA LÁMINA, NO UN AVATAR: se reutiliza el `.plate` del díptico de ¿Quiénes
   somos? —marco de un filete y proporción 4/5— y no una foto redonda de
   perfil, que es lengua de red social y no de códice (DA-1).
   LA COLUMNA DEL RETRATO SE ACOTA EN `rem` Y NO EN FRACCIÓN: a 1920 una mitad
   limpia daría una lámina de más de 600px de ancho y 750 de alto, un cartel
   encima de la cabecera. Acotada, el retrato manda sin gritar y la biografía
   conserva su medida de lectura. */
.author-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21rem);
  gap:var(--marg-gap);align-items:start;margin-top:1.5rem;
}
/* El aire de la cabecera lo lleva la retícula, no el titular: dentro de una
   celda de rejilla el margen del <h1> no colapsa con el de su columna y
   dejaría el retrato 24px por encima del nombre. */
.author-id h1{margin-top:0}
.author-id .trade-title{margin-top:1.5rem}
.author-id .lead{margin-top:1.7rem}
.author-id .lead+.lead{margin-top:1.1rem}

@media (max-width:1140px){
  .author-head{grid-template-columns:minmax(0,1fr) minmax(0,17rem)}
}
@media (max-width:860px){
  /* En una sola columna la lámina va DELANTE del nombre, que es el orden del
     díptico —marco, y debajo quién es—. En el marcado va después para que el
     titular siga siendo lo primero que encuentra quien no ve la página. */
  .author-head{grid-template-columns:minmax(0,1fr);gap:2.6rem}
  .author-head .plate{order:-1;max-width:17rem}
}

/* ══════════════════════════════════════════════════════════════════
   §11 · ZONA 13 — EL DÍPTICO, MARCHA ATRÁS EN EL ESPACIADO (fase 16)
   ══════════════════════════════════════════════════════════════════
   La fase 15 alineó las dos láminas fila a fila con una SUBRETÍCULA. Medía
   Δ0, y aun así estaba mal: una subretícula alinea estirando cada fila hasta
   la altura de la más alta, de modo que la lámina de textos cortos se llenaba
   de huecos. Medido en la lámina I: tres vanos de unos 90px entre el pie, el
   nombre, la credencial y la prosa, donde el diseño pide 12, 28 y 22.
   El encargante lo zanjó: «no dando más espaciado como ha dado solución, no,
   ahí hay que dar marcha atrás». Revertido.

   Y el defecto que la subretícula tapaba era otro: la credencial de la lámina
   II partía en dos renglones, así que las dos láminas ya no podían coincidir
   por mucho que se alinearan las filas. Arreglada esa línea (ver el tracking
   de `.trade-title`), las seis piezas caen a la misma altura por sí solas,
   sin retícula que las fuerce y sin un píxel de aire de más.

   `.trade-flow` se queda en el marcado —quitarlo obligaría a tocar otra vez
   los dos widgets— pero se vuelve transparente con `display:contents`: el
   objeto flotado y la prosa vuelven a ser hijos directos de la lámina, que es
   como estaban antes de la fase 15. El `clear:right` de los oficios vuelve a
   hacer su trabajo. */
.trade-flow{display:contents}

/* ══════════════════════════════════════════════════════════════════
   §11 · ZONA 14 — LOS ESTADOS NO TIENEN COLOR PROPIO (fase 16)
   ══════════════════════════════════════════════════════════════════
   El encargante ve un azul al pasar el ratón o al pulsar. No es un
   color mío: es el reset del tema padre y las bases de Elementor, que
   pintan los estados interactivos con su propia paleta. Hasta ahora se
   neutralizaba el estado NORMAL de cada componente y se daba por hecho
   que los estados heredaban. No heredan: se declaran aparte, y por eso
   el azul reaparecía cada vez que se tocaba un componente nuevo.

   El barrido de la sonda 2 —que DISPARA cada estado con el ratón y el
   teclado en vez de leer las hojas— saca ocho orígenes, no uno:

   | origen                | selector                          | pinta      |
   |-----------------------|-----------------------------------|------------|
   | hello reset           | a:active, a:hover                 | #336 azul  |
   | hello reset           | [type=button/submit]:hover,:focus | #c36 magenta + #fff |
   | hello reset           | input[…]:focus                    | #333 gris  |
   | frontend.min          | .elementor-button:hover/:focus/:visited | #fff |
   | frontend.min          | .elementor-icon:hover             | #69727d    |
   | base-desktop          | .e-tab-base:hover/:focus-visible  | #E0E0E0    |
   | base-desktop          | .e-form-*-base:focus              | #706F6F    |
   | pro · author-box      | .elementor-author-box__button     | #3f444b    |
   | navegador             | a:visited, tap-highlight          | púrpura/azul |

   El blanco `#fff` de los botones de Elementor no es un detalle menor:
   el blanco está RESERVADO al logotipo (§1), así que un botón que se
   ilumina en blanco puro rompe la regla más antigua de la paleta.

   Reparto, según la orden: `--accent-hi` para lo que se ENCIENDE (un
   enlace bajo el ratón, un botón que responde) y `--accent-alt` para lo
   ORNAMENTAL (filetes y separadores, que no responden a nadie).
   El resaltado táctil se apaga: en un móvil pintaba un rectángulo azul
   sobre cada enlace pulsado, y ese rectángulo no existe en el diseño. */

/* ── enlaces ── */
html a:active,html a:focus{color:var(--accent-hi)}
@media (hover:hover) and (pointer:fine){html a:hover{color:var(--accent-hi)}}
html a:visited{color:inherit;text-decoration:none}
html a,html button,html [type=button],html [type=submit],html summary{-webkit-tap-highlight-color:transparent}

/* ── botones nativos: el magenta y el blanco puro ── */
/* FASE 18 · el BORDE faltaba, y con el sitio público se vio. El reset del tema
   padre no sólo pinta el fondo y el texto: declara
   `[type=button],[type=submit],button{border:1px solid #c36;color:#c36}`, así
   que cada botón nativo llevaba un filete magenta. La fase 16 neutralizó fondo
   y color y dejó el borde vivo, y aparecía en el buscador de la entrada, en la
   página de resultados y en la de 404. Se cubre también el estado normal: el
   defecto no era sólo del hover. */
html [type=button],html [type=submit],html button{border-color:var(--border-hairline);color:inherit}
html [type=button]:focus,html [type=submit]:focus,html button:focus{background-color:var(--accent);color:var(--text-on-accent);border-color:var(--accent);text-decoration:none}
@media (hover:hover) and (pointer:fine){html [type=button]:hover,html [type=submit]:hover,html button:hover{background-color:var(--accent);color:var(--text-on-accent);border-color:var(--accent);text-decoration:none}}
html [type=button]:active,html [type=submit]:active,html button:active{background-color:var(--accent);color:var(--text-on-accent);border-color:var(--accent);text-decoration:none}
html .elementor-button:hover,html .elementor-button:focus,html .elementor-button:visited{color:inherit}
html .elementor-button.elementor-author-box__button{color:var(--accent)}

/* ── campos de formulario ── */
/* El reset declara `input[type=email]:focus` —elemento + ATRIBUTO +
   pseudoclase, (0,2,1)—, así que `html input:focus` (0,1,2) perdía. Se
   iguala el atributo para ganar por orden. */
html input:focus,html input[type]:focus,html textarea:focus,html select:focus,
html .elementor .e-form-input-base:focus,
html .elementor .e-form-textarea-base:focus{border-color:var(--accent);outline-color:var(--accent)}

/* ── iconos y pestañas de Elementor · RETIRADAS EN LA FASE 28 ──
   Sus cinco neutralizadoras apagaban widgets de icono y de pestaña que ya
   no existen en ninguna plantilla (censo de la 28: 0 elementos en 22
   estados). Si uno de esos widgets vuelve, frontend.min pinta
   #69727d / #E0E0E0 (tabla de arriba) y hay que volver a apagarlo. */

/* ── el filete de la marginalia ── */
/* Un <hr> sin color declarado toma el gris del navegador (#808080), que
   no está en la paleta. Es ornamento: `--accent-alt`. */
.marg-rule{color:var(--accent-alt);border-color:var(--accent-alt)}

body.error404 .head-scene::after,
body.blog .head-scene::after,
body.page-id-38 .head-scene::after,
body.page-id-42 .head-scene::after,
body.page-id-44 .head-scene::after,
body.page-id-325 .head-scene::after,
body.page-id-1153 .head-scene::after,
body.page-id-1156 .head-scene::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg,
      #0A0C10 0%,
      rgba(10,12,16,.92) 42%,
      rgba(10,12,16,.60) var(--velo-corte,70%),
      rgba(10,12,16,0) calc(var(--velo-corte,70%) + 16%)),
    rgba(10,12,16,var(--velo-base,.10));
}
/* ── EL TECHO DEL VELO · Colabora y La Schola (fase 26X) ──────────────
   EL PROBLEMA: el velo lateral dejaba en penumbra justo a quien tiene que
   estar mas iluminado — Cristo alzando la hostia en Colabora y Santo Tomas en
   La Schola—. Y no era casualidad: en las dos obras la figura central vive
   ARRIBA —Cristo entre el 13 % y el 42 % del alto, Santo Tomas entre el 10 % y
   el 34 %— y el titular vive DEBAJO. Se solapan en x y no en y.

   SE PROBARON LAS DOS VIAS PEDIDAS Y UNA TERCERA, midiendo a la vez el peor
   contraste del texto y la luz recuperada por la figura:

     via                        texto      luz de la figura
     hoy (velo vertical)        7,4:1      0,0107
     1 · reducir el velo        4,8:1      0,0138   (+29 %)
     2 · angular el velo        7,9:1      0,0484   (x4,5)
     3 · RECORTARLO POR ARRIBA  7,4:1      0,0503   (x4,7)

   GANA LA TERCERA, y por dos razones que no son de gusto:

     · El texto no pierde NI UNA DECIMA —7,4:1 antes y despues— porque el velo
       no se toca donde vive el texto. Las otras dos lo mueven todo.
     · Y la VERTICAL SE CONSERVA ENTERA, que era la condicion. Angular a 36
       grados inclina las lineas del velo 54 grados desde la vertical: mas que
       la diagonal de esquina a esquina de esta caja, que son 19. El techo no
       inclina nada — solo levanta el velo de la franja donde esta la obra.

   COMO: una mascara vertical sobre el propio velo. Transparente arriba, plena
   desde donde empieza el titular. El corte va JUSTO ENCIMA del H1 de cada
   pagina, que es lo que fija el numero: 48 % en Colabora y 42 % en La Schola.

   Solo en escritorio: por debajo de 861 px el velo lateral no existe —hay un
   degradado vertical en su lugar— y una mascara ahi lo romperia. */
@media (min-width:861px){
  body.page-id-44 .head-scene::after{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 48%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 48%);
  }
  body.page-id-325 .head-scene::after{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 42%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 42%);
  }

  /* ── LAS OTRAS CUATRO (fase 26Y) ────────────────────────────────────
     Mismo criterio, y CADA UNA ELIGE VIA DISTINTA porque la geometria de cada
     obra es distinta. Medidas las tres —dejarlo como esta, angular, recortar
     por arriba— con el peor contraste del texto y la luz de la figura a la vez:

       pieza                via elegida            texto        figura (pico)
       umbral-rostro        techo al 40 %          11,5 -> 11,5   x1,0 (+19% media)
       umbral-quienes       36 grados + techo 24   9,6 -> 9,2     x3,4
       umbral-aviso-legal   30 grados, corte 44 %  5,7 -> 6,7     x1,25
       umbral-privacidad    36 grados, corte 62 %  8,2 -> 8,7     x1,9

     LO QUE DECIDE ES DONDE SE SOLAPAN texto y motivo, no el gusto:

       · EL ROSTRO. El Pantocrator ya estaba a plena luz —el velo no le llega—,
         asi que aqui no habia nada que recuperar: el techo le da un 19 % de
         luz media SIN COSTAR NI UNA DECIMA de texto. Se pone porque es gratis.
       · QUIENES. La cara de Agustin vive ARRIBA (10-35 % del alto) y el titular
         DEBAJO (33-70 %). Se solapan en x y no en y: el techo es la via. Con el
         angulo ademas, el pico de luz en su cara se multiplica por 3,4 y el
         texto solo cae de 9,6 a 9,2. Es la unica de las cuatro que cuesta algo,
         y se dice: cuatro decimas.
       · AVISO LEGAL. Aqui NO sirve el techo, y se comprobo: Pedro y las llaves
         comparten altura con el H1 (35-95 % contra 45-70 %), asi que levantar
         el velo por arriba no toca la figura — medido, da exactamente la misma
         cifra que no hacer nada. Gana ANGULAR: es la unica de las seis en que
         la via 2 es la buena, y ademas MEJORA el texto.
       · PRIVACIDAD. Igual que Aviso legal —figura y titular a la misma
         altura—, y el angulo mejora las dos cosas.

     El corte de Aviso legal baja a 44 %, que sigue por encima del suelo de 42 %
     documentado en la 26V. */
  body.page-id-38 .head-scene::after{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 40%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 40%);
  }
  body.page-id-42 .head-scene::after{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 24%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 24%);
  }

  /* El angulo se parametriza igual que el corte: una variable, y el degradado
     se escribe una sola vez. `90deg` por defecto = el velo vertical de siempre,
     asi que las que no la declaran no cambian. */
  body.page-id-42 .head-scene::after,
  body.page-id-1153 .head-scene::after,
  body.page-id-1156 .head-scene::after{
    background:
      linear-gradient(var(--velo-angulo,90deg),
        #0A0C10 0%,
        rgba(10,12,16,.92) 42%,
        rgba(10,12,16,.60) var(--velo-corte,70%),
        rgba(10,12,16,0) calc(var(--velo-corte,70%) + 16%)),
      rgba(10,12,16,var(--velo-base,.10));
  }
}

/* EL 404 (26Y). La escena es un muro con el vano tapiado en el centro, y el
   texto vive a la izquierda: el velo corta pronto para no apagar la sillería
   del vano, que es lo unico que hay que ver. */
body.error404   .head-scene{--velo-corte:58%;--velo-base:.10}
body.blog       .head-scene{--velo-corte:70%;--velo-base:.10}
body.page-id-38  .head-scene{--velo-corte:70%;--velo-base:.18}
body.page-id-42  .head-scene{--velo-corte:78%;--velo-base:.22}
/* ⚠ COLABORA Y LA SCHOLA SE ABREN EN LA 26P. Con el 80/.28 y el 84/.38 el texto
   se leia pero la figura central se apagaba: en una esta Cristo y en la otra
   Santo Tomas, y tienen que verse. El criterio manda sobre el liston: mas
   opacidad donde cae el texto, menos sobre el centro.

   Y COLABORA SE ABRE OTRO PUNTO EN LA 26S, del 58/.08 al 46/.04, porque el
   borde del degradado seguia cayendo encima de Cristo. Barrido y medido a
   1920 sobre el compuesto real, el H1 NO es lo que limita:

     corte/base   H1 <2,0:1   H1 <4,5:1   entradilla <4,5:1
       58/.08        0 %         5 %            0 %          (26P)
       52/.06        0 %         7 %            0 %
       46/.04        1 %         8 %            5 %          <- puesto
       40/.03        1 %         9 %           13 %
       34/.02        2 %         9 %           25 %

   El presupuesto acordado era 5 % del H1 por debajo de 2,0:1 y se queda en
   el 1 %. Lo que aparece es un coste NUEVO y hay que decirlo: la entradilla
   entra por primera vez en la cuenta, con un 5 % de pixeles y un peor de
   3,5:1. Rompe el invariante de la 26O —«nunca el H1 ni la entradilla»— y se
   asume a sabiendas, porque es lo que hace que se vea Cristo.

   EL MOVIL NO SE TOCA: alli el velo es un degradado vertical que arranca
   transparente, y Cristo ya cae entero y visible en el centro. */
body.page-id-44  .head-scene{--velo-corte:64%;--velo-base:.04}
/* Las dos legales nacen con texto encima en la 26V: llevan velo desde el
   primer dia, no anadido despues. Su `.page-head` es mucho mas baja que las
   otras cinco —444 px contra 632-830— asi que el texto ocupa casi toda la
   altura y el reparto vertical no ayuda: aqui manda el lateral. */
/* ⚠ EL CORTE NO PUEDE BAJAR DEL 42 %. El degradado lleva una parada fija de
   .92 en el 42 %, asi que poner `--velo-corte` ahi hace coincidir dos paradas
   y el velo SALTA de .92 a .60 de golpe: un canto vertical visible. Con 42 se
   vio en la captura; con 52 desaparece. */
body.page-id-1153 .head-scene{--velo-corte:52%;--velo-base:0}
/* PRIVACIDAD SUBE A 70/.14 EN LA 26X, y el motivo es la pieza nueva, no el
   texto. Con el Bruegel anterior el tercio izquierdo era oscuro y bastaba un
   velo estrecho —52 % y sin plano base—. La pieza regenerada pone la escena
   ILUMINADA en la mitad derecha, que era lo que se pedia, y la cola del H1
   —«Politica de privacidad» llega al 63 % del ancho— cae sobre la tunica de
   Cristo: 1,8:1 medido. El velo tiene que alcanzar donde alcanza el titular.
   Con 70/.14 el texto sube a 8,2:1 y la figura conserva 0,0309 de luz media,
   casi el triple de lo que tenia la pieza vieja bajo el velo antiguo. */
body.page-id-1156 .head-scene{--velo-corte:70%;--velo-base:.14}

/* ⚠ ESTAS TRES VAN AQUI, DETRAS DE LAS DECLARACIONES PLANAS, Y NO ARRIBA CON
   SU MEDIA QUERY. Se escribieron primero dentro del bloque de la 26Y y NO
   habrian hecho nada: las declaraciones planas de `--velo-corte` de estas
   mismas paginas viven mas abajo en el fichero, y UNA MEDIA QUERY NO ANADE
   ESPECIFICIDAD — a igualdad de peso decide el orden de fuente. */
@media (min-width:861px){
  /* AVISO LEGAL LLEVA PERFIL PROPIO DESDE LA 26Z, y no es un capricho: el
     degradado compartido salta de `.92` al 42 % a `.60` en el corte, y con el
     corte en 44 % eso son DOS PUNTOS de transicion. Por eso se veia marcado —
     no era la cobertura, era la pendiente. Aqui la misma cobertura se reparte
     en seis paradas a lo largo del 78 % del ancho. Medido: el texto SUBE de
     6,7:1 a 7,1:1 y la figura se queda igual (0,0278 contra 0,0271), o sea que
     alargar la transicion no costo nada de lo que protegia. */
  body.page-id-1153 .head-scene::after{
    background:
      linear-gradient(var(--velo-angulo,90deg),
        rgba(10,12,16,1) 0%,
        rgba(10,12,16,.96) 20%,
        rgba(10,12,16,.86) 32%,
        rgba(10,12,16,.62) 44%,
        rgba(10,12,16,.34) 55%,
        rgba(10,12,16,.12) 66%,
        rgba(10,12,16,0) 78%),
      rgba(10,12,16,var(--velo-base,.10));
  }
  body.page-id-42   .head-scene{--velo-angulo:36deg;--velo-corte:70%}
  body.page-id-1153 .head-scene{--velo-angulo:30deg;--velo-corte:44%}
  body.page-id-1156 .head-scene{--velo-angulo:36deg;--velo-corte:62%}
}
body.page-id-325 .head-scene{--velo-corte:68%;--velo-base:.06}

/* En movil la capa lateral no cubre nada: el texto ocupa el 94 % del ancho.
   Se apaga y queda un plano, mas fuerte cuanto mas clara sea la obra. */
@media (max-width:860px){
  /* LAS CINCO LLEVAN DEGRADADO VERTICAL (26V · antes solo dos).
     El plano uniforme apagaba la obra entera para tapar una franja de texto.
     Con las piezas nuevas —recompuestas con la penumbra dentro— la respuesta
     buena es la que ya usaban Colabora y La Schola: TRANSPARENTE ARRIBA, donde
     vive la cabeza, y denso desde donde empieza el texto.

     Los cuatro valores de cada una salen de un barrido medido con las cajas
     PEGADAS AL TEXTO —una por linea— hasta que las veinte y pico cajas de la
     cabecera pasan de 4,5:1. El tercer numero es donde arranca la meseta, y va
     JUSTO ENCIMA de la capitular de esa pagina: si se pone mas abajo, la
     capitular cae en la rampa y es la unica que falla.

       pagina        meseta   peor contraste
       El Rostro      .68@17      6,1:1
       Quienes        .78@24      5,9:1
       Colabora       .62@22      5,7:1
       La Schola      .68@16      6,4:1
       Articulos      .70@30      7,2:1

     Y NINGUNA CAMBIA SU `object-position`: la cabeza se queda en cuadro en las
     cinco. El velo hace el trabajo donde cae el texto, no sobre el motivo. */
  body.page-id-38 .head-scene::after{
    background:linear-gradient(180deg,
      rgba(10,12,16,0) 0%, rgba(10,12,16,.05) 10%,
      rgba(10,12,16,.68) 17%, rgba(10,12,16,.78) 100%);
  }
  body.page-id-42 .head-scene::after{
    background:linear-gradient(180deg,
      rgba(10,12,16,0) 0%, rgba(10,12,16,.06) 16%,
      rgba(10,12,16,.78) 24%, rgba(10,12,16,.86) 100%);
  }
  body.page-id-44 .head-scene::after{
    background:linear-gradient(180deg,
      rgba(10,12,16,0) 0%, rgba(10,12,16,.10) 14%,
      rgba(10,12,16,.62) 22%, rgba(10,12,16,.72) 100%);
  }
  body.page-id-325 .head-scene::after{
    background:linear-gradient(180deg,
      rgba(10,12,16,0) 0%, rgba(10,12,16,.06) 10%,
      rgba(10,12,16,.68) 16%, rgba(10,12,16,.78) 100%);
  }
  body.blog .head-scene::after{
    background:linear-gradient(180deg,
      rgba(10,12,16,0) 0%, rgba(10,12,16,.05) 22%,
      rgba(10,12,16,.70) 30%, rgba(10,12,16,.80) 100%);
  }
  /* EL 404 (26Y). Se le olvidaba a proposito y salio mal: al entrar en el
     selector del velo de escritorio pero NO en este, a 390 se quedaba con el
     degradado LATERAL sobre una pantalla estrecha — cinco cajas por debajo de
     4,5:1, la entradilla en 1,6. Aqui manda la meseta, y va justo encima del
     titular. El tramo transparente deja ver el vano tapiado, que es el motivo. */
  body.error404 .head-scene::after{
    background:linear-gradient(180deg,
      rgba(10,12,16,0) 0%, rgba(10,12,16,.06) 14%,
      rgba(10,12,16,.78) 24%, rgba(10,12,16,.86) 100%);
  }
  /* La meseta sube de .54 a .62 en la RE-AUDITORIA de la 26V, no en el
     barrido. Con .54 el peor contraste a 390 px era 4,9:1 en Aviso legal y
     5,0:1 en Privacidad: pasaban, pero con cuatro decimas sobre el umbral y
     sin sitio para el ruido del recodificado del CDN. Ocho centesimas de velo
     lo llevan a 6,4:1. El tramo transparente NO se mueve: sigue en el 12 %
     superior, donde estan las dos figuras. Se oscurece donde ya solo hay
     texto. */
  body.page-id-1153 .head-scene::after,
  body.page-id-1156 .head-scene::after{
    background:linear-gradient(180deg,
      rgba(10,12,16,0) 0%, rgba(10,12,16,.06) 12%,
      rgba(10,12,16,.62) 20%, rgba(10,12,16,.70) 100%);
  }
}

/* ── KERIGMATE · la carta, centrada con el halo y rebasando su columna ──
   Medido en la 26N: la pieza caia 125 px por debajo del centro del halo de
   `.glow` en escritorio y medio millar en tableta y movil, y dejaba 488 px de
   vacio encima.
   NO SE ENSANCHA LA COLUMNA: la de texto mide 602 px y la linea mas larga del
   H1 mide 601. Un pixel de holgura. Asi que la pieza REBASA su celda hacia la
   derecha, donde hay margen de pagina, sin tocar la reticula ni el titular. */
body.page-id-46 .page-head .elementor-element-6b51fe3 img{
  max-width:none;width:130%;transform:translate(-6%,-25%);
}
@media (max-width:1140px){
  /* apilada, la columna ya es ancha: rebasar sobraria y la subida es mayor */
  body.page-id-46 .page-head .elementor-element-6b51fe3 img{
    width:100%;transform:translateY(-6%);
  }
}

/* ═══ fin de sistema.css · v8-r1 ═══ */

/* ── LOS CONTENEDORES DE BANDA (fase 26V) ─────────────────────────
   Las diecisiete bandas nuevas van en un contenedor propio de nivel superior
   con un solo widget `html` dentro, que es la anatomia de `99981c7` de la
   portada.

   ⚠ POR QUE HACE FALTA ESTA REGLA. El contenedor que crea la herramienta sale
   con `flex-direction:row` aunque su documentacion diga que el defecto es
   `column`. En fila, el hijo encoge al contenido: medido, la imagen se
   quedaba en sus 1568 px nativos dentro de un contenedor de 1911 y la banda no
   llegaba a sangre. En columna, `align-items` normal la estira.

   Se apunta por `.bleed` y no por un id, para que valga para las diecisiete
   sin nombrar ninguna. Sobre la de la portada es inocua: ya estaba en columna. */
.e-con:has(> .elementor-widget-html > .bleed),
.e-con:has(> .elementor-widget-html > .bleed-x),
.e-con:has(> .elementor-widget-html > .lamina){flex-direction:column}

/* Y EL PADDING LATERAL A CERO, que es la segunda mitad del mismo defecto y se
   vio en la 26W. Un contenedor de banda colocado en la RAIZ sale con
   `padding:0`; el mismo contenedor ANIDADO —dentro del panel de Niveles, por
   ejemplo— cae al defecto de Elementor y sale con 10 px a cada lado. Medido:
   la imagen pasaba de 1911 a 1891 px y aparecian veinte pixeles de suelo a los
   lados. Eso ya no es una banda a sangre: es una escena con margen lateral, y
   entonces manda §3.6b —haria falta `.bleed-x`—. Se corrige en la causa: la
   banda va a sangre viva donde sea que se la cuelgue. */
.e-con:has(> .elementor-widget-html > .bleed){padding-inline:0}

/* `.bleed-x` NO lleva el padding a cero, y es a proposito: si esta puesta es
   porque la escena YA tiene margen lateral —vive dentro de una columna— y ahi
   los 10 px no sobran, los disimula su propia mascara horizontal. */

/* ── LA ESCALA DE TRANSICION (fase 26X) ───────────────────────────────
   EL DEFECTO ERA DE CONCEPTO, no de una pieza. Medido contra una ventana de
   1920x1080, cada banda ocupaba el 76 % del alto de pantalla y las dos de 16:9
   el 100 %. Una pieza que llena la ventana deja de ser transicion y se lee
   como DESTINO: el sitio parecia una galeria, y cada respiro costaba una
   pantalla entera de scroll.

   EL PATRON ES `respiro-belleza-caos`, que salio bien por accidente en la 26W:
   vive dentro de la columna de lectura y por eso mide 1152 px de ancho y 494
   de alto — el 46 % de la pantalla, con aire a los lados y la doble mascara
   que funde sus cuatro bordes.

     pieza                 ancho   alto   pantalla
     belleza-caos (patron)  1152    494      46 %
     las demas, antes       1911    819      76 %
     las dos de 16:9        1911   1075     100 %

   LA REGLA: la banda no se mide contra la VENTANA sino contra la MEDIDA DE
   LECTURA. `--width-max` menos el canal de la columna da 1172 px, que es el
   patron con veinte pixeles de margen. La imagen NO se recorta ni se
   reencuadra: se reduce y se enmarca en aire.

   `body:not(.home)` porque la portada NO entra: sus cuatro escenas son parte
   de una composicion anterior a este vocabulario y ahi el ancho completo es el
   gesto, no un descuido. Se comprobo antes de escribir la regla: las cuatro
   miden 1911 o mas.

   Por que solo muerde en escritorio: a 834 la medida de lectura ya es casi
   toda la ventana, asi que `max-width` no ata y la banda se queda como estaba
   —32 % de pantalla, que no es un heroe—. El defecto vivia en 1920 y ahi se
   corrige. */
body:not(.home) .bleed-x{
  max-width:calc(var(--width-max) - 8rem);
  margin-inline:auto;
}

/* ── EL AIRE ALREDEDOR DE LA PIEZA (fase 26Y) ─────────────────────────
   Bajada la escala en la 26X, lo que sobraba era el AIRE. Medido a 1920x1080,
   y descompuesto, porque cada parte se corrige en un sitio distinto:

     · el contenedor de la banda no pone nada: 0 de padding y 0 de margen.
     · TODO el hueco lo pone el `padding` de la SECCION vecina — 75,6 px donde
       es `--space-block`, 125,7 y 140,4 donde es `--space-section`, y
       194,4 / 186,2 en Kerigmate, que usa `--space-vast`. De ahi que las dos
       peores fueran `respiro-pilares` y `respiro-carta`: no es que esas piezas
       tengan nada raro, es que viven en la pagina de aire mayor del sitio.
     · y la MASCARA funde el 22 % de arriba y el 22 % de abajo — el 44 % del
       alto de la pieza se lee como suelo: 221 px en una banda de 502.

   LA REGLA, y no es nueva: §3.8 ya tiene codificada la excepcion
   `.section.bleed-end` —«cuando una imagen a sangre cierra la seccion, el
   padding inferior es 0 y el aire lo pone la mascara»—. Lo unico que faltaba
   era aplicarla cuando la banda es HERMANA de la seccion y no hija suya, que
   es como quedaron colocadas las diecisiete.

   Donde una seccion toca una banda, su aire de ese lado baja a
   `--space-block`. Donde no la toca, el ritmo del codice no se altera: el aire
   grande de Kerigmate sigue entero entre sus bloques de texto. */
/* ⚠ SIN `:has()` ANIDADO. La primera version de esta regla era
   `.section:has(+ .e-con:has(> ... > .bleed-x))` y NO casaba con nada: CSS no
   permite un `:has()` dentro del argumento de otro `:has()`. Se vio midiendo,
   no leyendo: el padding de abajo seguia en 140,4 y 194,4 mientras el de
   arriba de la seccion siguiente si habia bajado. El argumento se escribe
   entero, sin anidar. */
body:not(.home) .e-con.section:has(+ .e-con > .elementor-widget-html > .bleed-x){
  padding-bottom:var(--space-block);
}
body:not(.home) .e-con:has(> .elementor-widget-html > .bleed-x) + .e-con.section{
  padding-top:var(--space-block);
}

/* ── TRES AJUSTES DE AIRE (fase 26Z) ──────────────────────────────────
   Los tres salieron de mirar, y los tres son casos distintos. Se dicen con su
   medida porque ninguno se arregla en el mismo sitio.

   1 · `cierre-quienes`. La regla de la 26Y no le llegaba, y el motivo es
   concreto: su vecino de arriba NO es `.section` sino `.closing` —el bloque de
   la cita final—, asi que el selector no casaba y se quedaba en 162 px. No es
   que la regla estuviera mal: es que la familia de vecinos era mas grande de
   lo que se comprobo. Solo arriba, que es lo que sobraba. */
body:not(.home) .e-con.closing:has(+ .e-con > .elementor-widget-html > .bleed-x){
  padding-bottom:var(--space-block);
}

/* 2 · `respiro-movimientos`. Aqui los dos vecinos YA estaban en
   `--space-block` —75,6 px— y aun asi sobraba, porque a ese hueco hay que
   sumarle el 22 % de mascara de la propia pieza: 75,6 + 110 = 186 px de suelo
   percibido a cada lado. Se baja a poco mas de la mitad SOLO en esta pieza: las
   demas del sitio con el mismo vecindario se ven bien, y una correccion global
   estropearia las que ya estan. Se apunta por el nombre del fichero, que es lo
   unico que la distingue. */
body:not(.home) .e-con:has(+ .e-con > .elementor-widget-html > .bleed-x img[src*="respiro-movimientos"]){
  padding-bottom:calc(var(--space-block) * .25);
}
body:not(.home) .e-con:has(> .elementor-widget-html > .bleed-x img[src*="respiro-movimientos"]) + .e-con{
  padding-top:calc(var(--space-block) * .25);
}
/* FASE 26ZB · el .55 no basto, y el desglose dice por que. Medido a
   1920 x 1080 con el .55 puesto:

       hueco real entre cajas          0 px
       acolchado del vecino           42 px a cada lado
       la MASCARA de la pieza         funde el 44 % de sus 502 px = 221 px,
                                      o sea 111 px de suelo por lado
       -------------------------------------------------------------
       SUELO PERCIBIDO               153 px a cada lado

   Los 111 px de mascara son la mitad del problema y NO se tocan: son la
   anatomia de la pieza. Lo unico ajustable es el acolchado del vecino, que
   baja de 42 a 19 y deja el suelo percibido en ~130 px por lado. */

/* 3 · `respiro-niveles` ESTABA AL REVES, y es el mas claro de los tres: cero
   aire arriba —pegada al desglose de niveles— y 140,4 px abajo, que es el
   `padding-bottom` del panel. La pieza cierra el panel, asi que abajo tiene que
   llegar hasta el filete y el aire tiene que estar arriba. Se invierte: el
   panel deja de poner suelo debajo y la banda lo pone encima.

   Va con `:last-child` y no por nombre a proposito: lo que manda no es que sea
   el Dante, es que sea LA PIEZA QUE CIERRA EL PANEL. */
body.panelled #niveles > .e-con:last-child:has(> .elementor-widget-html > .bleed-x){
  margin-top:calc(var(--space-block) * .25);
}
/* FASE 26ZB · SEGUNDA CORRECCION DE ESTA MISMA PIEZA, y ahora con el
   desglose delante en vez de a ojo. La 26Z invirtio bien el aire —estaba
   todo abajo y tenia que estar arriba— pero puso `--space-section`, que a
   1920 x 1080 son 140 px, SIN CONTAR que la mascara ya aporta lo suyo:

       margen que puse en la 26Z      140 px
       la mascara funde el 44 %       111 px de suelo por lado
       -------------------------------------------------------
       SUELO PERCIBIDO               251 px arriba

   Doscientos cincuenta y un pixeles. El error fue razonar sobre el margen
   como si fuera todo el aire, cuando era menos de la mitad. Baja a 19 px y
   el suelo percibido queda en ~130, igual que `respiro-movimientos`. */
body.panelled #niveles:has(> .e-con:last-child > .elementor-widget-html > .bleed-x){
  padding-bottom:0;
}

/* LAS DOS DE 16:9 BAJAN A LA ALTURA DE LAS DEMAS. A la misma anchura un 16:9
   es mas alto que un 21:9: `respiro-metodo` y `respiro-cursos` median 659 px
   contra los 502 de sus catorce hermanas — el 61 % de la pantalla contra el
   46 %. Se igualan por ALTO y no por ancho, que es lo que cuesta scroll y lo
   que hace que una pieza se lea como destino. La imagen no se recorta: se
   estrecha a 892 px, que a 16:9 dan exactamente 502 de alto. */
body:not(.home) .bleed-x:has(img[src*="respiro-metodo"]),
body:not(.home) .bleed-x:has(img[src*="respiro-cursos"]){
  max-width:calc((var(--width-max) - 8rem) * .761);
}

/* EL BOTON DEL 404 VA A LA DERECHA (26Y). En el resto del sitio la fila de
   botones sigue al texto y por tanto va a la izquierda. Aqui no hay recorrido
   que seguir: hay UNA salida, y ponerla al final de la linea la lee como lo que
   es —la puerta por la que se sale— y no como una opcion mas de una lista. */
body.error404 .btn-row{justify-content:flex-end}

/* ── LA LAMINA (fase 26V) ─────────────────────────────────────────
   Tipo de contenedor NUEVO, y el ultimo que le faltaba al sistema. Lo pedia
   `detalle-manos` desde la 26h y ahora tambien `umbral-cookies`.

   QUE ES Y EN QUE SE DIFERENCIA DE `.bleed`:

     .bleed    la escena LLENA el ancho y se disuelve por los bordes. La obra
               se recorta: es una banda, no un cuadro.
     .lamina   la obra se ve ENTERA y sin recortar, centrada sobre el suelo
               del codice. Es un cuadro colgado, no una escena.

   Por eso no lleva mascara: una obra que se ve entera no se disuelve por los
   bordes, porque sus bordes SON la obra. Y por eso el fondo es `#0A0C10`
   desnudo y no una caja: la pieza se separa con espacio, no con contorno
   —regla de `USO.md` §1—.

   El limite es el ALTO, no el ancho: las dos laminas son verticales, y a
   ancho completo `detalle-manos` mediria casi tres mil pixeles de alto. Se
   acota con `max-height` en unidades de ventana para que quepa en pantalla en
   cualquier ancho, y `object-fit:contain` garantiza que nunca se recorte.

   Clase nueva y aislada: no toca ninguna regla existente. */
.lamina{
  display:flex;align-items:center;justify-content:center;
  width:100%;
  /* SE ALINEA CON LA MEDIDA DE LECTURA, no con la ventana (26W). Nacio a
     ancho completo y el resultado, medido en Colabora, era una imagen de
     413 px dentro de una banda de 1911: 749 px de suelo vacio a cada lado y
     un agujero del tamano de una seccion. Una lamina no es una banda —no va
     a sangre—, asi que su sitio natural es la misma columna en la que se lee
     el texto. Con `--width-max` la pieza queda dentro de la medida y deja de
     partir la pagina en dos. */
  max-width:var(--width-max);
  margin-inline:auto;
  background:var(--surface-base);
  min-height:clamp(340px, 52vh, 640px);
  padding:clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
  box-sizing:border-box;
}
.lamina img{
  display:block;
  width:auto;height:auto;
  max-width:min(100%, 34rem);
  max-height:min(64vh, 620px);
  object-fit:contain;
}

/* ── LAS DOS LAMINAS · RETIRADAS DEL SITIO EN LA 26ZK ──────────────────
   Aqui vivian dos bloques: el de la 26ZH, que arreglaba su escala en
   escritorio, y el de la 26ZI, que las componia a dos columnas con el texto
   al lado y les ponia un pie de lamina.

   **Los dos se han quitado porque ya no hay ninguna `.lamina` en el sitio.**
   `detalle-manos` salio de Colabora y `umbral-cookies` de Cookies por decision
   del encargante, despues de tres colocaciones fallidas y del analisis de la
   26ZJ. Las obras NO se descartan: se quedan en la mediateca y en el plan.

   **La clase `.lamina` de arriba se conserva a proposito**, sin usar. Si algun
   dia este sitio se dota de un patron para lo vertical, las dos piezas vuelven
   y la clase ya esta escrita y documentada. Ver `IMAGENES-PENDIENTES.md`. */

/* ── EL AIRE SOBRE EL CIERRE DE ¿QUIENES SOMOS? (fase 26ZB) ───────
   Entre la presentacion del equipo —Padre Manuel y Jose Manuel— y el cierre
   «No hablamos para agradar» habia 238 px de blanco, y salian de dos sitios:

       acolchado inferior del bloque del equipo    76 px
       acolchado superior de `.closing`           162 px   <- clamp(7rem,15vh,12rem)
       ------------------------------------------------
                                                  238 px

   Y despues de ese blanco todavia viene la comilla decorativa, que mide 112
   px de alto: el titular real del cierre empieza a 350 px del ultimo texto
   del equipo.

   Se toca SOLO el de arriba, que es el que sobra: el de abajo separa el
   cierre de la pieza que va detras y ya se ajusto en la 26Z. Y se toca solo
   aqui, sin riesgo de arrastrar nada: **`.closing` no existe en ninguna otra
   pagina del sitio** —comprobado sobre el espejo—, asi que la clase es de
   hecho privativa de ¿Quienes somos?. Aun asi se acota al `body` por si
   manana se reutiliza. */
body.page-id-42 .closing.e-flexbox-base.e-atomic-element{
  /* FASE 26ZH · TERCER Y ULTIMO PASO, este medido sobre los pixeles y no sobre
     las cajas. De `.5` a `.22`: 35 -> 15 px. Ver el bloque del final del
     fichero para el desglose completo de las tres fuentes. */
  padding-top:calc(var(--space-block) * .22);
}
/* FASE 26ZC · SEGUNDO PASO. Con `--space-block` entero quedaban 76 + 76 =
   152 px de blanco hasta la comilla, y 212 hasta la cita, que es el texto
   que de verdad se lee. Baja a la mitad: 76 + 38 = 114 hasta la comilla.
   El acolchado del bloque del equipo —los otros 76— no se toca: es el suyo,
   y lo comparte con el resto de secciones de la pagina. */

/* ── EL 404 A SANGRE, CON LA ANATOMIA DEL HERO (fase 26Z-b) ───────
   La 26Y subio la pieza a cabecera y la 26Z la paso a video, y las dos veces
   se dejo dentro del vocabulario de las CABECERAS DE INTERIOR, que es una
   BANDA: `.page-head` mide lo que mide su texto, mas 194,4 px arriba y 75,6
   abajo. Y ademas esa clase la lleva TAMBIEN el `main` de la plantilla —le
   viene de la clase global `g-0df0c85`—, de modo que el acolchado se aplicaba
   DOS VECES. Medido a 1920x1080: la escena era una franja de 669,5 px que
   empezaba en y=194,4, con filete al pie. Eso es una caja, no una pantalla.

   El 404 no es un interior: es una PUERTA, como la portada. Va con la
   anatomia del hero —alto de ventana, suelo de 800 px, `overflow:hidden`,
   texto abajo— sobre el mismo `object-fit:cover` que ya tenia.

   ⚠ NO se toca la regla de `object-fit` de las ocho cabeceras de imagen.
   Aqui solo cambia LA CAJA, y solo bajo `body.error404`. */

/* 1 · el contenedor deja de empujar, ARRIBA Y ABAJO (26ZB). En la 26Z-b se
   dejo el acolchado inferior porque separaba el buscador del pie; desde la
   26Z-c el buscador vive DENTRO de la pantalla, asi que ese acolchado ya no
   separa nada: solo mete un hueco entre la pantalla de 100vh y el pie. */
/* FASE 27a-o · Y EL FILETE, QUE ESTABA DUPLICADO. La 26ZB quito el borde
   inferior de la banda —`border-bottom:0`— pero se lo quito al `<div>` de
   DENTRO del widget, y **al `<main>`, que tambien lleva la clase `.page-head`,
   no le llegaba**. Medido: el widget 730,000 y el `<main>` **731,000**, con un
   `border-bottom:1px solid rgba(200,191,166,.14)`. Capturada la juntura, se
   veian **dos filetes apilados a 1 px**: el dorado de `.filters::after`, metido
   a la medida de lectura, y debajo uno gris a sangre. Y el pie arrancaba en 731
   sobre una pantalla de 730. Es el mismo caso que el aire de la 27a-c: una
   regla que no alcanza. */
body.error404 main.page-head.e-flexbox-base.e-atomic-element{padding:0;border-bottom:0}

/* 2 · la banda pasa a pantalla. En COLUMNA y no en fila, a proposito: como
   item de una fila, `.wrap` encogeria a su contenido y perderia la medida de
   lectura; en columna estira y conserva su `max-width` y sus margenes auto. */
body.error404 .elementor-widget-html>.page-head{
  /* FASE 27a-b · lo mismo que el hero de la portada, y por lo mismo: es la otra
     vista a pantalla completa. Medido a 390: con la ventana en 780 la banda se
     quedaba en 800 y **su ultimo elemento caia 20 px por debajo del borde**. */
  /* FASE 27a-c · `svh` y no `dvh`: ver la nota larga en `.hero`. Aqui la
     franja que aparece al esconderse la barra la ocupa el pie, justo debajo
     del filete del buscador, que es donde la 26ZB decidio que acabara la
     pantalla. Comprobado en captura. */
  height:100vh;height:100svh;min-height:800px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:0;        /* 26ZB: ver abajo */
  border-bottom:0;        /* un filete cruzando una pantalla es otra franja */
}
/* Y EL SUELO DE 800 SE RETIRA AQUI Y NO ARRIBA, fase 27a-b. La misma regla se
   escribio primero dentro del bloque de `max-width:860px`, que vive dos mil
   lineas mas arriba, y **no hizo nada**: a igualdad de especificidad gana la
   que viene despues, y la de esta banda es esta. Medido las dos veces: con la
   regla arriba, la caja seguia en 801 con la ventana en 780; aqui, la sigue. */
@media (max-width:860px){
  body.error404 .elementor-widget-html>.page-head{min-height:0}
}
/* FASE 26ZB · EL PIE DE 8rem SE VA, y no es lo mismo que en la portada.
   El hero de la portada acaba en texto y en un boton, y 128 px por debajo
   son su suelo. Aqui la pantalla acaba en LA BANDA DEL BUSCADOR, que es una
   herramienta y no un remate: con 128 px por debajo quedaba flotando a media
   altura, con un vacio detras que no separaba de nada porque el pie de
   pagina venia despues.

   A cero, el filete inferior de la banda cae en el limite de la 100vh y el
   pie de pagina arranca justo ahi. La banda respira por dentro: `.filters`
   lleva su propio `padding-block` de .95rem. */

/* 3 · el encuadre, medido y no estimado. Los cuatro cantos verticales del
   cerco caen en las MISMAS columnas en el video y en el poster (446, 467, 637
   y 660 sobre 1103), asi que el cerco va de 0,4044 a 0,5984 del fichero y su
   centro esta en 0,5014 — no en 0,5. Con el 50 % de fabrica, a 390 px el
   canto derecho se quedaba fuera de la franja visible. */
/* FASE 27a-h · el `object-position` se declara ahora junto al del <img> del
   poster, para que no puedan separarse. */

/* ── EL RELEVO DEL 404 · fase 27a-c ────────────────────────────────────────
   EL SINTOMA: al cargar se veia un salto entre la imagen y el video.

   LO PRIMERO FUE DESCARTAR EL ENCUADRE, que era la sospecha razonable y la que
   traia el encargo. **No era.** Medido:

       video    2206x946   proporcion 2,332
       poster   1568x672   proporcion 2,333
       la misma franja del fichero sobrevive en los dos: 76 % a 1920, 23 % a 390
       y los cantos verticales del cerco caen en las mismas columnas
       normalizadas: poster 0,395..0,435, video 0,400..0,435

   Y capturados LOS DOS ESTADOS RENDERIZADOS por separado —una carga con el mp4
   cortado para quedarse en el poster y otra con el video ya pintando— y
   comparados por perfil de columnas: **desplazamiento 0 y error medio 1,2 sobre
   255 a 1440, y 1,5 a 390.** Geometricamente no hay salto.

   LO QUE SI ERA, medido: **la LUZ.**

       poster                              66,9
       video, su fotograma MAS OSCURO      71,0   (en t=0)
       video, el mas claro                 78,5   (en t=3,52)

   **El poster es un 6,1 % mas oscuro que el fotograma mas oscuro del video, y
   ningun fotograma de los 8,04 s llega a igualarlo.** No es un fotograma a
   mitad del recorrido —esa era la otra sospecha del encargo, y tambien se
   descarta: es mas oscuro que todos, no mas claro que algunos—.

   LA RAZON estaba ya escrita en `IMAGENES-PENDIENTES.md`: `frame404.webp` tiene
   **el mismo SHA-256 que `puerta-tapiada.webp`**. Es el bodegon del vano
   tapiado, no un fotograma extraido del video. Comparten composicion y no
   comparten revelado.

   Y COMO NO SE TOCAN LOS FICHEROS, se arregla el relevo: en vez de un cambio
   instantaneo, **el mismo mecanismo que la portada ya usa desde la fase 17b**
   —el poster en su propia capa y el video cruzando por encima—. Alli el poster
   SI es el fotograma fuente del video y el relevo existe igual, para que no se
   note el cambio de capa; aqui ademas tiene que salvar ese 6,1 %.

   EL POSTER PASA A CAPA PROPIA y no se queda en el atributo, y esto arregla
   una segunda cosa: **el atributo `poster` lo encuadra cada navegador a su
   manera** —hay motores que ignoran `object-fit` en el poster y lo ESTIRAN a la
   caja—, mientras que un fondo con `cover` lo respeta todo el mundo. Con la
   capa, el encuadre del reposo deja de depender del navegador.
   ────────────────────────────────────────────────────────────────────────── */
/* -- FASE 27a-f . EL 404 SE HACE COMO EL HERO -------------------------------
   La 27a-c le monto a esta escena una version PROPIA del relevo, y esa fue la
   equivocacion: el hero lleva desde la 17b resolviendo exactamente el mismo
   caso —un poster y un video en la misma caja— y no habia razon para hacerlo
   distinto.
   Comparados los dos mecanismos elemento por elemento salieron **19 diferencias
   de 33**, y dos eran la causa del desfase que se veia al cargar:

       la capa       HERO fondo `--hero-penumbra`  ·  404 **transparente**
       `::before`    HERO opacidad 0 -> `.poster-ready` -> cruce
                     404 **opacidad 1 desde el primer pintado, `0s all`**

   O sea: el hero **revela** el poster sobre un fondo de color y luego lo cruza
   con el video; el 404 iba de transparente a poster de golpe y de poster a
   video de golpe. **Dos saltos donde el hero no tiene ninguno.**

   Se copia el mecanismo entero, con los mismos tiempos —.8s para revelar, 1,2s
   para cruzar— y la misma cadena de puertas.

   LAS TRES DIFERENCIAS QUE QUEDAN, cada una con su razon:
     · **el valor de encuentro es 1 y no .55.** Lo que hace invisible el relevo
       no es el numero: es que **el poster y el video se crucen en el MISMO**.
       El hero se encuentra en .55 porque su video es escenografia bajo el velo;
       aqui la escena va a plena opacidad con su velo en `::after`. El invariante
       se respeta; el valor no tiene por que.
     · **sin `transform` ni `--haz-*`.** El hero mueve las dos capas juntas para
       centrar el haz; aqui el encuadre es fijo, medido en la 26ZB —el cerco va
       de 0,4044 a 0,5984 y su centro esta en 0,5014—, y no hay nada que seguir.
     · **sin `aria-hidden` en la capa.** La escena del hero es decoracion; esta
       lleva `aria-label` porque el vano tapiado dice algo. Es de contenido.

   Y EL FONDO DE LA CAPA no inventa color: medida la pieza, **su zona mas oscura
   es `#02060e`**, que es practicamente `--surface-base` (`#0A0C10`), el suelo
   del sitio. El hero necesita un granate propio porque su escena es una
   cortina; esta sale de la oscuridad del propio sitio.
   -------------------------------------------------------------------------- */
body.error404 .head-scene{
  background:var(--surface-base);
  overflow:hidden;
}
/* >>> FASE 27a-h · ESTE `::before` SE RETIRA. Lo que sigue vale igual, pero el
   poster ya NO es un fondo de pseudoelemento: es un `<img>`. Ver el bloque
   «LAS DOS CAPAS, EL MISMO MECANISMO DE ENCUADRE», mas abajo. <<< */
/* -- FASE 27a-h . LAS DOS CAPAS, EL MISMO MECANISMO DE ENCUADRE ------------
   EL SINTOMA, visto en el telefono: el marco IZQUIERDO del cerco bailaba entre
   el poster y el video. Solo el izquierdo, y solo en movil.

   LO QUE SE MIDIO, y no encontro nada: desplazamiento por bandas —correlacion
   cruzada, no «los picos mas fuertes», que ya engano una vez— entre las dos
   capturas, izquierda, centro y derecha, y arriba, medio y abajo:

       390x730 densidad 1     todas las bandas **0 px**
       390x730 densidad 3     todas las bandas **0 px**   <- la de su telefono
       390x730 densidad 2     todas las bandas **0 px**
       412x730 densidad 3     todas las bandas **0 px**
       834 y 1920             todas **0 px**

   **Seis medidas y ninguna ve el desfase.** Asi que no se sigue persiguiendo:
   se quita la POSIBILIDAD.

   PORQUE LA POSIBILIDAD EXISTE, aunque aqui no se vea. El poster era un
   `background` de `::before` y el video un `<video>` con `object-fit`: **dos
   caminos de codigo distintos que se llaman igual.** `background-size:cover`
   redondea el escalado y ancla el origen por su cuenta, y `object-fit:cover`
   por la suya; en un dispositivo con otra densidad, otro compositor o otro
   redondeo, pueden no coincidir. **Yo puedo probar que coinciden en mi arnes.
   No puedo probar que coincidan en el suyo.**

   ASI QUE EL POSTER PASA A SER UN `<img>`, y las dos capas usan `object-fit`
   con la misma caja y el mismo `object-position`. La diferencia deja de ser
   posible en vez de quedar descartada.

   Y NO SE INVENTA VOCABULARIO: `.head-scene img` y `.head-scene video` ya
   comparten regla en el sistema desde la fase 8 —`width:100%;height:100%;
   object-fit:cover`—. El 404 era el unico que se salia usando un pseudoelemento.
   -------------------------------------------------------------------------- */
body.error404 .head-scene .escena-reposo,
body.error404 .head-scene video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  object-position:50.2% 50%;
}
/* ── LA ESCENA DEJA DE RELLENAR EN MOVIL · fase 27a-o ─────────────────────
   ERA LA ULTIMA DIFERENCIA SIN IGUALAR con el hero, y la unica causa candidata
   que reproduce el reparto del defecto: **solo movil, y no en el hero**.

       HERO en movil   va en BANDA desde la 27a-b, muriendo en mascara.  No salta.
       404  en movil   rellenaba a sangre.                               Salta.

   MEDIDO, con el fichero en 2208x944:

       caja            proporcion   se ve del fichero   px de pantalla por px
       390x844   antes    0,462          **19,8 %**            **x2,68**
                 ahora    1,155            49,4 %                x1,07
       412x915   antes    0,450            19,3 %                x2,91
                 ahora    1,126            48,1 %                x1,16
       360x800   antes    0,450            19,2 %                x2,54
                 ahora    1,125            48,1 %                x1,02

   **El remuestreo deja de trabajar hacia arriba.** Y de paso se recupera la
   escena: a 19,8 % la puerta LLENABA la pantalla, y una puerta tapiada sin muro
   alrededor no se lee como tapiada. A 49,4 % vuelve el marmol a los dos lados.

   LA CONDICION VA POR PROPORCION Y NO POR ANCHO, igual que en el hero y por lo
   mismo: a 834 la caja ya es 0,742 y no hay nada que corregir. Escritorio y
   tableta salen intactos —comprobado: 31,7 %, 68 % y 75,7 % sin tocar—.

   EL NUMERO NO ES EL DEL HERO, Y ESA ES LA CUESTION (§12.72). El hero sale a
   62 %, que a 390x844 le da una caja de 0,75. Con ese mismo 62 % aqui el
   agrandado se queda en **x1,66**, porque el fichero del 404 es 2,339 y el del
   hero 1,793: **la misma regla sobre otra proporcion da otro numero.** Se copia
   el criterio —que el video deje de agrandarse— y no la cifra. Probados los
   cuatro candidatos y mirados: 62 % deja la puerta grande y con el pie del vano
   comido por la mascara; 40 % la deja entera con muro a los lados.

   Y LA MASCARA MUERE MAS TARDE que la del hero —opaca hasta el 70 % y no hasta
   el 58 %— porque la banda es mas corta: con 58 % la disolucion empezaba encima
   del dintel. Mirado, no deducido.

   EL POSTER VA EN LA MISMA REGLA. Si se reencuadra uno y el otro no, vuelve el
   desencaje que costo cuatro fases. Van juntos o no van.
   ────────────────────────────────────────────────────────────────────────── */
/* FASE 27a-p · LA BANDA BAJA, CRECE Y SE DISUELVE POR LOS DOS LADOS.
   La 27a-o la dejo pegada al borde superior y sin velo arriba, y asi **se leia
   colgada**: no era la posicion —su centro caia en 168,8 con el hueco centrado
   en 177,3— sino **el canto duro**, que la hacia parecer cortada.

   Tres cosas a la vez, y las tres medidas:
     · **aire arriba**, 5 %, para que no nazca en el borde;
     · **mas escala**, del 40 % al 45 % de alto;
     · **y la mascara muere por los DOS lados**, no solo por abajo.

       390x844   antes  banda 0..337,6     visible 0..236,3     se ve 49,4 %  x1,07
                 ahora  banda 42,2..422    visible 99,2..285,3  se ve 43,9 %  **x1,21**
       412x915   ahora  banda 45,8..457,5  visible 107,5..309,3 se ve 42,8 %    x1,31
       360x800   ahora  banda 40..400      visible 94..270,4    se ve 42,8 %    x1,14

   **EL LIMITE NO LO PONE EL GUSTO: lo pone la caja mas ajustada.** A 360x800 el
   texto empieza en 282,5 —el 0,353 de la altura, porque el titular parte en dos
   lineas mas altas—, y la parte OPACA de la banda tiene que acabar antes. De ahi
   sale el 64 % y no mas: con 72 % se comia el sobretitulo a 360.

   PROBADOS CUATRO Y MIRADOS, inyectando el CSS en la pagina servida y sin tocar
   el servidor: 42 % de alto se queda corto, 48 % vuelve a leerse pegado arriba
   porque el velo superior se acorta. **45 % es el que flota.**

   Y NO SE RECUPERA EL DEFECTO: x1,21 sigue lejos del x2,68 que disparaba el
   salto. El encargante puso el freno en 2 y esto no se acerca. */
@media (max-aspect-ratio: 3/5){
  body.error404 .head-scene .escena-reposo,
  body.error404 .head-scene video{
    top:5%;
    /* FASE 27a-u · la escala sube del 45 % al **55 %**: el agrandado pasa de
       **x1,21 a x1,48** a 390x844 y de x1,14 a x1,40 a 360x800. El freno del
       encargante esta en x2 y esto no se acerca. */
    height:55%;
    bottom:auto;
    /* FASE 27a-q · EL VELO ENVUELVE, y no corta. Hasta aqui era una banda
       horizontal —transparente arriba, opaca en medio, transparente abajo— y se
       leia como DOS LINEAS DE CORTE. Ahora son dos mascaras multiplicadas:

         la elipse   envuelve por los lados, que es lo que el recto no hacia
         el lineal   conserva el perfil vertical, que esta medido contra el
                     limite de 360x800 y no se puede tocar

       `mask-composite:intersect` las multiplica, asi que la opacidad final es el
       producto: la escena se apaga hacia fuera en TODAS las direcciones y sale
       de la penumbra en vez de estar recortada entre dos filos.

       MEDIDA LA LUZ, que es lo unico que cambia —la geometria no la toca la
       mascara: se sigue viendo el 43,9 % del fichero y sigue agrandando x1,21—:

           zona                antes    ahora
           la puerta           67,74    **67,55**   la escena no pierde luz
           el lado izquierdo   79,04      54,74     ahi es donde envuelve
           el lado derecho     41,73      31,84
           la franja del texto 40,63      31,19     y **gana** contraste

       PROBADAS CUATRO FORMAS Y MIRADAS. La elipse sola y ancha deja los lados a
       medio apagar; **la elipse sola y justa deja ver su arco en las esquinas de
       arriba**, que es el mismo defecto con otra forma; la elipse ancha por el
       lineal envuelve poco. **Esta —elipse estrecha, desvanecimiento largo, por
       el lineal— es la que disuelve sin dejar canto.**

       Y EL POSTER VA EN LA MISMA REGLA, como todo desde la 27a-h. */
    /* FASE 27a-r · EL PERFIL VERTICAL SE ABRE, del 15..64 al **3..82**. Sobraba
       velo arriba y abajo y la pieza perdia presencia. La elipse de los lados no
       se toca: es la que resolvio el canto.

       MEDIDA LA LUZ ARRIBA, que es donde se gana:  42,71 -> **53,17** a 390.
       Y abajo casi nada, 12,60 -> 13,23, porque ahi mandan la elipse y el velo
       de `::after`, no el lineal.

       Y EL CONTRASTE NO SE MUEVE NI UNA DECIMA, medido con el criterio de la
       sonda 288 en los tres anchos de movil y en cuatro aperturas:
       `.chapter` **10,68**, `.lead` 10,68, `h1` 16,28 y el boton 7,65 —y el
       boton no cuenta, que tiene fondo opaco—. La condicion del encargante
       —parar si el sobretitulo pierde contraste a 360x800— no llega a apretar.

       LA FRONTERA, BUSCADA Y ENCONTRADA. Se probaron dos pasos MAS ALLA de este
       valor: con `0..90` y con la elipse sola **aparece la linea del canto
       superior**, recta y de lado a lado, justo bajo la cabecera. Con `3..82` no.
       **El 3 % de arriba es lo minimo que todavia disuelve el borde**, y son
       11 px a 390. */
    /* FASE 27a-s · LA ELIPSE, CENTRADA Y MAYOR QUE LA BANDA. Estaba al **40 %**
       del alto, y la cuenta explica lo que se veia: con la banda en 380 px a
       390x844, su centro caia en y=152 y su borde en y=418 —**38 px por debajo de
       la banda**—, asi que **al pie de la puerta le tocaba 0,51 de opacidad**; y
       arriba su borde quedaba en y=−114, de modo que en el canto superior la
       elipse valia 0,61 y **quien dibujaba la transicion era el lineal, que es
       recto de lado a lado**. De ahi la linea horizontal.

       DOS CAMBIOS Y UNA RENUNCIA:
         · **centro al 50 %**, para que el pie de la puerta entre en el nucleo;
         · **radios MAYORES que la banda** — 60 % y 85 % —, para que su curva
           cerrada caiga fuera y **no se lea el ovalo**;
         · y la renuncia: si la elipse es mayor que la banda no puede apagar
           los bordes ella sola, asi que **el lineal se queda** — pero con la
           rampa de **61 px** en vez de los 11 de la 27a-r, que es lo que se leia
           como canto. Una rampa larga no es una linea.

       MEDIDO, a 390x844 y a 360x800:

           zona                antes    ahora
           el DINTEL            81,4     77,9    practicamente igual
           **el PIE de la puerta  40,6     43,2**   y el perfil de la columna sube
                                                 en las tres rebanadas de abajo:
                                                 37,2/21,5/12,9 -> 40,8/26,1/14,3
           el margen SUPERIOR   48,1     35,3    de ahi que la linea desaparezca
           los lados            39,0     45,8    se pierde algo de envoltura
                                                 lateral: es el precio de centrar
           el sobretitulo      10,68    10,68    ni una decima

       PROBADAS SIETE FORMAS Y MIRADAS. Con la elipse **inscrita** —radios al
       50 %, que apagaria los cuatro bordes ella sola— **se ve el ovalo**, y eso
       es lo mismo que rechazo la 27a-q con otro numero. */
    /* FASE 27a-t · SIN VELO EN EL MARGEN INFERIOR. La pieza llega a su borde de
       abajo a plena opacidad, y los otros tres margenes se quedan como estaban.
       Hacen falta las dos capas, porque las dos apagaban abajo:
         · el lineal deja de desvanecerse: `#000 84%, transparent 100%` -> `#000 100%`;
         · y la elipse **baja su centro al 60 % y crece al 102 %**, de modo que el
           borde inferior le cae a 0,392 del radio —dentro de su nucleo, que llega
           al 0,40— y le toca opacidad **1**. El de arriba le sigue cayendo a
           0,588, que es exactamente donde caia antes: **el margen superior no se
           mueve**.
       MEDIDO: margen inferior **12,6 -> 15,5** y la ultima rebanada de la columna
       de la puerta 14,3 -> 17,1; margen superior 35,3 -> 35,2, lados 45,8 -> 45,1,
       dintel 77,9 -> 76,9 y el pie 43,2 -> 43,2. El sobretitulo a 360x800 sigue en
       **10,68:1**.
       Lo que queda oscuro abajo ya no es la mascara: es la propia pieza y el velo
       de `::after`, y ninguno de los dos es de esta fase. */
    /* FASE 27a-u · DOS RETOQUES AL LINEAL, Y NINGUNO A LA ELIPSE:
         · el primer tope baja del 16 % al **13 %** para que la rampa de arriba
           siga midiendo los mismos **60 px** con la banda mas alta: en
           porcentaje se habria alargado a 74 y el margen superior cambiaria;
         · y vuelve **un velo leve abajo**, pero no con una rampa corta —eso es un
           canto— sino dejando el ultimo tope en **opacidad 0,65**: la escena
           llega al borde inferior atenuada, sin transicion que se lea.
       MEDIDO: margen inferior 15,5 -> **14,8** y el pie de la puerta 43,2 -> 42,0,
       o sea que el velo se nota y no tapa. Y el sobretitulo a 360x800, muestreado
       de verdad, **6,99 -> 6,15:1**, muy por encima del 4,5.
       LO QUE SI CAMBIA SIN QUE LA MASCARA LO TOQUE: los lados pasan de 45,1 a
       39,4 porque **con la banda mas alta `cover` ensena menos ancho del fichero**
       —35,9 % en vez de 43,9— y en el borde izquierdo cae ya otra parte del muro.
       Es del encuadre, no del velo. */
    /* FASE 27a-v · CADA RAMPA PASA DE DOS TOPES A OCHO, EN CURVA EN S. El
       diagnostico del encargante es exacto: una banda de Mach no la produce una
       rampa corta, la produce **una discontinuidad en la DERIVADA**. Un degradado
       de dos topes arranca de golpe y para de golpe, y en esos dos puntos la
       pendiente salta. Por eso alargarla no la quitaba.

       MEDIDO COMO TAL, y hubo que cambiar de instrumento. La primera medida sobre
       la pagina no valia: el pico de |d2L| en el tercio de arriba caia en la fila
       424 —muy por debajo de donde acaba la rampa— y no se movia con ninguna
       curva. **Era el dintel de la puerta, no la mascara.** Un instrumento que
       mide la obra no puede juzgar el velo. Se aislo poniendo la MISMA mascara
       sobre un rectangulo de color plano del mismo tamano: ahi el perfil de luz
       ES la mascara.

           mascara sobre campo plano      pico arriba   pico abajo   salto
           dos topes (27a-u)                  1,1456      **71,00**   71,6
           la curva de cuatro topes           0,9231        71,00     71,6
           la S larga, rampa al 24 %          0,7930         1,50     1,93
           **la S densa, rampa al 14 %          0,8132         1,50     1,93**

       DOS COSAS QUE DICE ESA TABLA:
         · arriba, la curva baja el pico un **29 %**, y ahi si era una banda de
           Mach. **Y la rampa no hace falta alargarla:** la S de 24 % velaba el
           dintel —de 77,6 a 65,5 de luz— y la de 14 %, con los topes mas juntos,
           baja el pico casi igual **dejando el dintel donde estaba**. Lo que
           importa no es la longitud sino la densidad de topes;
         · **abajo NO era una banda de Mach: era un ESCALON.** El velo de la 27a-u
           acababa en opacidad 0,65 y ahi se terminaba el elemento, asi que la
           escena caia de golpe al suelo del sitio: un salto de **71,6** en la
           ultima fila. Suavizar la aproximacion no lo tocaba —la curva de cuatro
           topes deja el 71,00 intacto—. **Solo llegar a cero lo quita.** Y se
           puede llegar a cero sin perder el velo leve: la curva se mantiene por
           encima de 0,85 hasta el 90 % y solo se apaga en los ultimos 46 px.

       Y LA ELIPSE SE QUEDA CON SUS DOS TOPES: probada tambien en curva, **empeora
       el pico de arriba** —de 0,793 a 1,341— porque su rampa y la del lineal
       dejan de cancelarse. Medido, no supuesto. */
    -webkit-mask-image:radial-gradient(ellipse 60% 102% at 50% 60%, #000 40%, transparent 100%),
                       linear-gradient(180deg, transparent 0%,
                         rgba(0,0,0,.04) 1.7%, rgba(0,0,0,.15) 3.4%, rgba(0,0,0,.32) 5.1%,
                         rgba(0,0,0,.52) 6.8%, rgba(0,0,0,.72) 8.5%, rgba(0,0,0,.88) 10.2%,
                         rgba(0,0,0,.97) 12%, #000 14%,
                         #000 78%, rgba(0,0,0,.99) 82%, rgba(0,0,0,.95) 86%,
                         rgba(0,0,0,.85) 90%, rgba(0,0,0,.66) 94%,
                         rgba(0,0,0,.38) 97.5%, rgba(0,0,0,.12) 99.2%, transparent 100%);
    mask-image:radial-gradient(ellipse 60% 102% at 50% 60%, #000 40%, transparent 100%),
               linear-gradient(180deg, transparent 0%,
                 rgba(0,0,0,.04) 1.7%, rgba(0,0,0,.15) 3.4%, rgba(0,0,0,.32) 5.1%,
                 rgba(0,0,0,.52) 6.8%, rgba(0,0,0,.72) 8.5%, rgba(0,0,0,.88) 10.2%,
                 rgba(0,0,0,.97) 12%, #000 14%,
                 #000 78%, rgba(0,0,0,.99) 82%, rgba(0,0,0,.95) 86%,
                 rgba(0,0,0,.85) 90%, rgba(0,0,0,.66) 94%,
                 rgba(0,0,0,.38) 97.5%, rgba(0,0,0,.12) 99.2%, transparent 100%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
}
/* Y LA PILA, EXPLICITA. En la 27a-f la deduje del orden de arbol y me equivoque:
   el orden de arbol solo decide dentro de la misma capa de pintado. Ahora los
   dos estan posicionados —misma capa— y ademas se dice el numero. */
body.error404 .head-scene .escena-reposo{z-index:0}
body.error404 .head-scene video{z-index:1}
/* -- FASE 27a-i . LAS DOS CAPAS COMPONEN EN EL MISMO SITIO -----------------
   El desfase del borde izquierdo seguia despues de igualar el encuadre en la
   27a-h, y seis medidas en cinco anchos no lo veian. Porque **pasa despues de
   donde el arnes mira**: el arnes captura la pagina ANTES de la composicion.

   MEDIDO, comparando que promueve cada capa a la GPU, en el 404 y en el hero:

       404    poster  transform:none · will-change:auto   -> **CPU**
              video   <video> reproduciendo               -> **GPU**   asimetrico

       HERO   poster  transform: matrix(1,0,0,1,0,0)      -> GPU
              video   reproduciendo + transform           -> GPU       simetrico

   **El hero tiene las dos capas en el mismo sitio y el 404 no**, y por eso el
   hero nunca tuvo este defecto. Un `<video>` reproduciendo se promueve solo; una
   imagen no, salvo que se le diga. **Dos tuberias distintas redondean el
   escalado por su cuenta**, y a 390 —donde solo se ve el 23 % del ancho— esa
   diferencia sub-pixel se convierte en varios pixeles visibles.

   Y el hero lo consigue por partida doble: su poster lleva el `transform` de la
   maquinaria del haz **y ademas pinta ENCIMA del video**, lo que fuerza su
   promocion por solapamiento. Aqui el poster va debajo, asi que no lo promueve
   nada.

   `translateZ(0)` Y NO `translate(0)`: una identidad en 2D calcula igual en el
   estilo —`matrix(1,0,0,1,0,0)`, la misma que el hero— pero **no garantiza la
   promocion**; hace falta que la transformacion sea 3D. El `will-change` va
   ademas, que es la forma declarada de pedirlo y no un efecto colateral.

   ⚠ ESTO NO SE HA PODIDO COMPROBAR AQUI, y se dice: el arnes no ve la
   composicion. La verificacion es del encargante en su telefono. */
/* FASE 27a-k · la regla se declara abajo, en la MISMA que promueve el video: la
   27a-i promovio el poster y la 27a-j el video, cada una en su sitio, y asi la
   simetria dependia de que nadie tocara una sin la otra. Ahora es una lista de
   selectores: no se pueden separar. */
/* -- FASE 27a-j . EL VIDEO TAMBIEN SE PROMUEVE DESDE EL PRIMER PINTADO -----
   EL DIAGNOSTICO ERA OTRO, y lo reprodujo el encargante: **no es un desfase
   entre el poster y el video. Es el propio video el que salta.** Al segundo de
   empezar, la imagen se desplaza a la izquierda; **solo en la primera
   reproduccion**, nunca en los bucles; y el fichero se reproduce bien en VLC.

   MEDIDO, y es la misma asimetria de la 27a-i pero en el otro elemento:

       404    transform del <video>: none
              -> **NADA lo promueve antes de reproducir**
       HERO   transform: matrix(1, 0, 0, 1, 0, 0)
              -> **promovido desde el primer pintado**

   Un `<video>` se promueve solo **al empezar a reproducir**, no antes. Asi que
   el navegador lo compone primero en CPU y despues lo MIGRA a una capa de
   hardware, y esa migracion lo vuelve a rasterizar a la escala de la capa.

   Y encaja con las cuatro senas:
     · **solo la primera vez** — la capa se crea una vez y ya queda hecha;
     · **solo en movil** — a 390 se ve el 23 % del ancho y la diferencia de
       rasterizado se amplifica; a 1920, con el 76 % a la vista, es sub-pixel;
     · **bien en VLC** — no es del fichero, es de lo que el navegador hace
       alrededor;
     · **el hero no lo hace** — lleva el `transform` de la maquinaria del haz
       desde el primer pintado, sin proponerselo.

   DESCARTADA LA DESCARGA: una sola peticion, http 206, los 5 957 337 bytes
   enteros, y los 8,04 s en memoria. No hay pintado parcial que ajustar.

   ⚠ NO SE HA PODIDO COMPROBAR AQUI. El arnes captura antes de la composicion.
   Lo medido es la CAUSA; el resultado lo verifica el telefono.

   FASE 27a-k · Y LAS DOS EN UNA SOLA REGLA. Ninguna de las dos era redundante
   —promueven elementos distintos— pero estaban escritas por separado y con 35
   lineas de por medio, que es como se llega a que una se cambie sin la otra:
   exactamente lo que paso entre la 27a-i y la 27a-j. En una lista de selectores
   la simetria es estructural y no un acuerdo entre dos sitios. */
body.error404 .head-scene .escena-reposo,
body.error404 .head-scene video{
  transform:translateZ(0);
  will-change:transform;
}
body.error404 .head-scene .escena-reposo{opacity:1;transition:opacity .8s var(--ease-out)}
/* -- FASE 27a-g . EL VIDEO VUELVE A PONERSE ENCIMA, Y ES UN ERROR MIO ------
   La 27a-f quito de aqui un `position:relative;z-index:0` diciendo que «el
   `::before` se genera como primer hijo, asi que el video pinta despues por
   orden de arbol y queda encima sin ayuda». **Eso es falso, y el orden de
   pintado de CSS lo dice:**

       paso 3-5   contenido en flujo          <- el <video>, que era `static`
       paso 6     descendientes POSICIONADOS  <- el `::before`, que es `absolute`

   El orden de arbol solo decide **dentro de la misma capa**. Entre capas manda
   la capa, y la del `::before` va por encima. Al quitarle el `position` al
   video, **el poster paso a taparlo para siempre.**

   MEDIDO, y no deducido: muestreada la luz del compuesto con el video corriendo
   un bucle entero,

       como estaba                 recorrido **0,0**   la escena no cambia nunca
       con el `::before` apagado   recorrido 1,8       sigue al video
       con el video en z-index 1   recorrido 1,8       sigue al video

   Un recorrido de 0,0 mientras el video barre su haz solo puede significar una
   cosa: **el video no se estaba viendo.**

   Y de ahi salian los dos sintomas que el encargante vio en pantalla:
     · **el parpadeo imagen -> video -> imagen.** El poster sube 0->1 en .8s y el
       video 0->1 en 1,2s, asi que hay una ventana en la que el video asoma POR
       DEBAJO de un poster todavia translucido, y despues el poster llega a 1 y
       lo tapa otra vez.
     · **el «estiron»**, que era comparar ese vistazo fugaz —el video mezclado
       con un poster a medio subir— contra el poster ya asentado.

   Con el video en su capa, el poster debajo no cuesta nada: la traza es
   identica a apagarlo. Y la cuenta de la 27a-f sigue valiendo **ahora que la
   premisa es cierta**: la capa de arriba es opaca, asi que la cobertura suma 1
   y el compuesto es la escena entera en todo momento.

   El velo de `::after` tambien va en `z-index:1` y viene despues en el arbol:
   ahi si manda el arbol, porque los dos estan ya en la capa 6. Sigue arriba. */
/* FASE 27a-h · la pila se declara arriba, junto a las dos capas. */

/* EL AIRE ENTRE EL TEXTO Y «VUELVE AL UMBRAL» · fase 27a-c.
   MEDIDO: 6 px a 1440 y 4 px a 390, entre la tinta de «…o que nunca llegara a
   existir.» y el borde del boton. **El resto del sitio usa 38.** Recorridos los
   pares de texto y boton que hay: portada 38 y 38, El Rostro 38, 38 y 39, La
   Schola 38 y 38. Los salen todos de `.page-head .btn-row{margin-top:2.1rem}`.
   POR QUE ESTE SE QUEDO FUERA: esa regla pide `.e-flexbox-base.e-atomic-element`,
   y la pantalla del 404 se construye dentro de un `elementor-widget-html`, asi
   que su `.btn-row` es marcado plano y **nunca ha casado con ella**. No es un
   valor mal elegido: es una regla que no llegaba.
   Se le da la misma cifra del sitio, no una nueva. Y sube el contenido en vez de
   bajarlo, porque la pantalla va anclada abajo: comprobado que sigue cabiendo
   entera en las ocho alturas. */
body.error404 .page-head .btn-row{margin-top:2.1rem}
/* §5.2 · degradacion sin JS, igual que en la portada: el video solo parte
   oculto bajo `html.js`, que la pone `functions.php`. Sin guion queda visible
   desde el principio y lo unico que se pierde es el cruce. */
/* La cadena de puertas del hero, literal: el poster nace oculto bajo `html.js`,
   se REVELA cuando el guion confirma que el fichero esta pintado, y se APAGA
   cuando el video esta listo. Los dos se cruzan en el mismo valor. */
html.js body.error404 .head-scene .escena-reposo{opacity:0}
html.js body.error404 .head-scene.poster-ready .escena-reposo{opacity:1}
/* LA CUARTA DIFERENCIA CON EL HERO, Y ES DE ARITMETICA · fase 27a-f.
   El hero APAGA su poster cuando el video entra. **Aqui no, y hay cuenta.**

   Dos capas superpuestas no se funden: se componen. Con el poster a `p` y el
   video a `v` encima, lo que se ve es `v*V + (1-v)*p*P`, y **la cobertura suma
   `v + (1-v)*p`**, que solo vale 1 si `p` vale 1.

       el hero    poster y video se encuentran en **.55**. Si el poster se
                  quedara, el compuesto seria .55*V + .45*.55*P: **mas claro**
                  que la escena sola. Tiene que irse.
       el 404     se encuentran en **1**. Con el poster quieto en 1, el compuesto
                  es la escena entera en todo momento —`v*V + (1-v)*P`, y V=P
                  porque **el poster se extrajo del video en la 27a-d**—.
                  Apagarlo dejaba la cobertura en 0,78 a mitad de cruce y por ahi
                  asomaba el fondo de la capa: un bache.

   MEDIDO, muestreando la luz de la escena durante el cruce:

       recorrido de luz    con el poster yendose    quedandose
       1920                        8,4                  7,7
       390                         9,5                **2,9**

   Lo que queda a 1920 no es el relevo: es el haz del propio video, que barre.

   Y de paso mejora el respaldo: si el video se cae a mitad, la escena se queda
   en el poster en vez de en el suelo del sitio. */
html.js body.error404 .head-scene video{opacity:0;transition:opacity var(--dur-xslow) var(--ease-out)}
html.js body.error404 .head-scene video.ready{opacity:1}

/* 4 · TODO EN UNA PANTALLA (fase 26Z-c). El buscador estaba en un bloque de
   DEBAJO: se veia el video a pantalla completa y habia que hacer scroll para
   encontrar la unica herramienta que la pagina ofrece. Ahora vive dentro del
   mismo `.wrap` que el texto, asi que se alinea con el titular y con el boton
   y comparte con ellos la medida de lectura.

   La regla que habia aqui —`margin-top:var(--space-block)` para separarlo del
   heroe— ya no tiene sentido: no hay nada de lo que separarlo. */
body.error404 .page-head .filters{
  margin:2.3rem 0 0;
  padding-block:.95rem;
  border-block:0;   /* los filetes pasan a pseudoelementos: un `border` no lleva halo */
  position:relative;
}

/* 5 · LOS DOS FILETES, EN ORO CON HALO. El oro es `--accent`, que ya vale
   #CB9A31: no entra ningun color nuevo. Van como pseudoelementos y no como
   `border` porque un `box-shadow` sobre la caja resplandeceria tambien por
   los costados, donde no hay linea; asi el halo sale SOLO de la linea.
   Dos capas de sombra, corta y larga, para que la caida sea suave y no un
   contorno duro. */
body.error404 .page-head .filters::before,
body.error404 .page-head .filters::after{
  content:'';position:absolute;left:0;right:0;height:1px;
  background:var(--accent);
  box-shadow:0 0 4px rgba(203,154,49,.55), 0 0 12px rgba(203,154,49,.30);
  pointer-events:none;
}
body.error404 .page-head .filters::before{top:0}
body.error404 .page-head .filters::after{bottom:0}

/* 6 · EL BUSCADOR OCUPA LA BANDA ENTERA. `form.search` viene de la barra de
   archivo, donde a la izquierda hay FICHAS de categoria y el formulario se
   arrima a la derecha con `margin-left:auto` y un filete vertical que lo
   separa de ellas. Aqui no hay fichas: a 1920 quedaban tres cuartos de banda
   dorada vacios y el buscador colgando del extremo. Por debajo de 860 ya se
   comportaba bien —la §6 le pone `width:100%`—, asi que esto solo iguala el
   escritorio con lo que el movil ya hacia. El filete vertical se retira por
   lo mismo: no separa de nada. */
body.error404 .page-head form.search{
  margin-left:0;width:100%;
  border-inline-start:0;padding-inline-start:0;
}

/* ── EL AIRE ANTES DEL PRINCIPIO EDITORIAL · TERCERA VEZ, Y AHORA MEDIDO (26ZH)
   Las dos correcciones anteriores tocaron el `clamp` de `.closing` y no
   bastaron. **Por que**: ese acolchado ya solo aporta 35 de los 162 px, asi que
   por mucho que se apretara no podia arreglarlo. Es el mismo error que con
   `respiro-niveles` — razonar sobre una fuente de aire cuando hay tres.

   MEDIDO SOBRE LOS PIXELES de la captura, no sobre las cajas del DOM, que aqui
   discrepaban: se recorre la imagen fila a fila y se busca la banda sin tinta.

       banda vacia de «SEGURIDAD» a la comilla ..... 162 px
       banda vacia de la comilla al titular ........  48 px

   Y las 162 salen de TRES sitios, no de uno:

       acolchado inferior del bloque del equipo ....  70 px
       acolchado superior de `.closing` ............  35 px
       margen residual de la lista de etiquetas ....  57 px
       ---------------------------------------------------
                                                     162 px

   UNA CORRECCION AL PRIMER INTENTO DE ESTA MISMA FASE, porque importa: se
   escribio una regla contra `.e-con:has(> .closing)` dando por hecho que
   `.closing` vivia DENTRO de un contenedor. **No es asi: `.closing` ES el
   `.e-con`** —`section.elementor-element-ab80938.e-con.closing`—, de modo que
   aquel selector no engancho nada y la medida no se movio ni un pixel. Se
   comprobo midiendo otra vez, no dando el cambio por bueno.

   Se aprietan los dos acolchados que si existen. El margen residual de las
   etiquetas se deja: viene de la maquetacion del bloque del equipo y tocarlo
   desde aqui seria arreglar una pagina rompiendo otra. Y la comilla no se toca
   porque 48 px entre una comilla y su titular es tipografia, no descuido. */
body.page-id-42 .e-con:has(+ .e-con.closing){padding-bottom:20px}

/* (Aqui vivia la composicion de las dos laminas, de la 26ZI. Retirada en la
   26ZK junto con las piezas. Ver la nota junto a la clase `.lamina`.) */

/* ── LAS DOS OBRAS VERTICALES · fase 26ZL ────────────────────────────────
   Cinco fases intentando alojar `detalle-manos` y `umbral-cookies`, y las cinco
   fallaron por lo mismo sin verlo: **se estaba tratando el problema como de
   TAMANO y de SITIO, y era de BORDE.**

   El dato que lo desbloquea: **`sexta_puerta` es vertical y funciona**, y es la
   unica del sitio que lo consigue. No por su escala ni por su vecindad, sino
   porque **no tiene caja**: es un objeto con alfa flotando sobre el suelo, sin
   canto que delate su formato ni aire que se lea como vacio. Las dos laminas
   tienen **fondo opaco**, y por eso se leian como un cuadro colgado en una
   pagina que no es un museo.

   Asi que no se recorta, no se rellena y no se regenera nada: **se disuelve el
   borde de su fondo** con la misma doble mascara con la que este sitio integra
   las cuatro escenas a sangre de la portada (`.bleed-x`, §3.6b de `USO.md`).
   Difuminar el borde del fondo no es tocar la obra: es integrarla.

   Los porcentajes son mas agresivos que los de `.bleed-x` —18/82 y 16/84 frente
   a 22/78 y 14/86— porque una vertical tiene menos alto util que perder y mas
   ancho: la obra ha de morir a negro por los cuatro lados antes de encontrarse
   con cualquier borde. Lo que queda no es un rectangulo: es penumbra que se
   aclara donde esta la obra.

   La clase se llama `.obra` y no `.lamina` a proposito. Una lamina es una hoja
   suelta que se cuelga; **una obra es parte del mundo del sitio.** `.lamina`
   sigue en el fichero, sin usar, por si algun dia hace falta lo contrario. */
.obra{
  display:block;
  width:100%;
  margin-inline:auto;
}
.obra img{
  display:block;
  width:100%;
  height:auto;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-composite:intersect;
}

/* CADA OBRA NECESITA LA DISOLUCION QUE LE PIDE SU PROPIO FONDO, y esto se
   midio en vez de estimarse. Luminancia media de las cuatro esquinas de cada
   fichero, sobre 255, contra el suelo del codice `#0A0C10`, que vale 11:

       umbral-cookies    11,1  13,5  13,4  11,9   -> ya esta en el suelo
       detalle-manos     18,7  23,7  18,9  33,3   -> hasta el TRIPLE

   El Holman Hunt muere a negro el solo y le basta la mascara general. El Durero
   tiene un fondo azul grisaceo que, con la misma mascara, deja un campo claro
   visible: no un canto, pero si una mancha. Se le da mas recorrido de fundido.
   **No se toca la obra ni un pixel: solo se alarga la transicion.** */
.obra-colabora img{
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

@media (min-width:1025px){
  /* COOKIES · la obra entra en la CABECERA y convive con el titular.
     Rejilla de dos columnas con el orden de `sexta_puerta` —texto a la
     izquierda, obra a la derecha— y sin `gap` medible: con los bordes
     disueltos, un hueco entre columnas volveria a dibujar la caja que se acaba
     de quitar. Las columnas se solapan un poco a proposito. */
  /* COOKIES · LA ANATOMIA DE LAS OTRAS CABECERAS, fase 26ZM. Medidas las nueve:
     su escena va de fondo CSS y a sangre, y **reservan el tercio izquierdo para
     el texto**. Aqui la obra es una vertical y no puede ir a sangre sin
     recortarla, pero si puede hacer lo mismo: **ocupar los dos tercios de la
     derecha y morir hacia la izquierda.**

     Tres cosas la componen como a las demas:
       · la columna derecha pasa de 30rem a 40rem, que es la escala que pedia
       · la obra **sangra hasta el borde derecho de la ventana**, como las
         escenas de las otras cabeceras, en vez de pararse en la medida de
         lectura
       · y su borde izquierdo lleva **el velo mas largo de todo el sitio** para
         que el encuentro con el tercio vacio no sea un corte

     El sangrado se calcula, no se escribe a mano: `(1300px - 100vw) / 2` es
     exactamente el margen que el contenedor deja a la derecha, y el `min(0px,…)`
     impide que se vuelva positivo si la ventana fuera mas estrecha que la
     medida de lectura. */
  /* LA PIEZA DESBORDA, fase 26ZN. Hasta ahora la obra CABIA entera en la
     cabecera, y por eso seguia leyendose como una imagen colocada: una cabecera
     de este sitio no ensena una escena entera, **ensena un trozo de una escena
     mas grande que ella**. Eso es lo que hacen las otras ocho con su fondo CSS.

     Asi que la obra crece a los dos tercios de la derecha y **se sale del alto
     de la cabecera por arriba y por abajo**, que la recorta. Y al crecer, **su
     propia masa oscura invade el tercio izquierdo y lo oscurece sola**: no hace
     falta un velo que tape, hace falta que la pieza sea grande.

     El recorte lo hace el contenedor, no el fichero: **la obra no se toca**.

     `align-self:start` y no `center` porque la composicion del Holman Hunt
     lleva la cabeza y el halo en el tercio superior: centrarla los perderia.
     Se ancla arriba y lo que se va es el pie de la escena. */
  /* LA ESCENA OCUPA LOS DOS TERCIOS DE LA DERECHA, DE BORDE A BORDE DE LA
     CABECERA. Se saca del flujo y se ancla a la seccion: asi toca el filo de
     arriba y el de abajo sin dejar canto, y sangra al borde derecho de la
     ventana. Es exactamente lo que hacen las otras ocho cabeceras con su fondo
     CSS, solo que aqui la escena es un `<img>` porque es una obra con nombre y
     tiene que llevar su `alt`.

     `object-fit:cover` la agranda hasta llenar esa caja y **recorta lo que no
     cabe: la recorta el CONTENEDOR, no el fichero**. Y `object-position` al
     18 % del alto porque la cabeza y el halo del Holman Hunt viven en el tercio
     superior: centrarla los perderia.

     Al crecer asi, **su propia masa oscura invade el tercio izquierdo y lo
     oscurece sola.** No hay ningun velo que tape la escena: solo el fundido del
     margen izquierdo, donde se cruza con el titular. */
  body.page-id-1154 .elementor-element-ckhead001{
    position:relative;
    overflow:hidden;
  }
  body.page-id-1154 .elementor-element-ckwrap001{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    align-items:center;
    gap:0;
    min-height:clamp(28rem, 50vh, 40rem);
    /* STATIC A PROPOSITO. Elementor pone `position:relative` a todos sus `.e-con`,
       y mientras lo tuviera era EL el bloque contenedor de la escena absoluta:
       medido, la escena salia de 850 x 500 —el alto de este contenedor— en vez
       de los 751 de la cabecera, y por eso quedaba franja negra arriba y abajo.
       Con `static`, el ancla pasa a ser `ckhead001` y la escena llena de filo a
       filo, como las otras ocho. */
    position:static;
  }
  /* EL ENVOLTORIO DEL WIDGET SE APARTA. Elementor le pone `position:relative` a
     cada widget, asi que era EL quien hacia de bloque contenedor de la obra
     absoluta —y como su unico hijo pasa a estar fuera de flujo, medía **851 x 0**
     y la escena no se veia—. Medido antes de tocarlo. Se le devuelve
     `position:static` para que el ancla sea la cabecera, que es lo que se
     quiere. */
  body.page-id-1154 .elementor-element:has(> .obra-cookies){
    position:static;
  }
  body.page-id-1154 .elementor-element-ckwrap001 .obra{
    position:absolute;
    /* DOS TERCIOS JUSTOS, fase 26ZO. Estaba en el 40 %, que servido son 60 % de
       ancho y se lee como media pantalla. El 33,3333 % deja el tercio izquierdo
       entero para el titular y la entradilla, como en las otras ocho.
       Y el sangrado se retira: estaba calculado para un contenedor de 1300 px,
       pero el bloque contenedor es `ckhead001`, que va a ANCHO COMPLETO. Medido:
       la caja acababa en 1501 con la ventana en 1431 —70 px fuera— y a 1920 se
       perdian 310. Como `object-fit:cover` encuadra sobre la caja y no sobre lo
       visible, ese sobrante desplazaba el recorte hacia la izquierda. Con `0`,
       la caja acaba donde acaba la ventana y el encuadre es el que se ve. */
    inset:0 0 0 33.3333%;
    margin:0;
    width:auto;
    z-index:0;
    pointer-events:none;
  }
  body.page-id-1154 .obra-cookies img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 18%;
  }
  /* EL TERCIO IZQUIERDO SE ACOTA, y no es cosmetico: sin esto el titular se
     metia dentro de la escena y «cookies» se perdia sobre el manto de la
     figura. Con 30rem el titular parte en tres lineas y termina a ~610 px,
     donde el velo de la escena esta todavia al 13 % de opacidad: el texto se lee
     sobre el suelo del codice, no sobre la obra. Comprobado con la sonda de
     contraste. */
  body.page-id-1154 .elementor-element-ckwrap001 > .elementor-element-cktitl001{
    position:relative;
    z-index:1;
  }
  /* Se acota el TEXTO y no el widget: Elementor le pone `max-width:100%` al
     elemento y gana. Medido: el widget seguia en 1 172 px con la regla puesta. */
  body.page-id-1154 .elementor-element-cktitl001 h1,
  body.page-id-1154 .elementor-element-cktitl001 p{
    max-width:30rem;
  }

  /* EL VELO DEL BORDE IZQUIERDO. Asimetrico a proposito: por la izquierda la
     obra tiene que morir largo —hasta el 38 %— porque ahi es donde se encuentra
     con el titular y con el vacio reservado; por la derecha apenas se disuelve
     —desde el 94 %— porque ese lado ya sale de la ventana y no hay nada contra
     lo que recortar. Es la misma disolucion de la 26ZL, puesta donde ahora hace
     falta. */
  /* EL VELO, SOLO EN EL MARGEN IZQUIERDO. Ya no hay fundido vertical: arriba la
     cabecera topa con la barra de navegacion y abajo con su propio filete, que
     son bordes definidos del sitio y no necesitan disolverse —igual que en las
     otras ocho cabeceras—. El unico encuentro que si necesita velo es el de la
     izquierda, donde la escena se cruza con el titular. */
  /* EL VELO SE ALARGA AL 50 %, fase 26ZO, porque la escena se ha movido debajo
     del texto. Con el arranque en el 40 % la escena empezaba en 572 y la tinta
     del titular moria en 542: no se tocaban. En el 33,3 % la escena empieza en
     477 y el titular la pisa 65 px. El 50 % devuelve la ultima linea al 13 % de
     opacidad, que es justo donde estaba antes y donde el contraste se midio. */
  body.page-id-1154 .obra-cookies img{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 50%);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(90deg, transparent, #000 50%);
    mask-composite:add;
  }

  /* COLABORA · APILADO, fase 26ZM. Antes eran tres columnas —obra, copy y
     formulario— en 1300 px, y **era el unico bloque de la pagina con esa
     forma**: las demas secciones apilan. El formulario quedaba en 399 px y la
     obra competia con el.

     Ahora van uno debajo de otro: **el copy arriba, la obra en medio, el
     formulario abajo a su ancho completo.**

     COMO, sin mover una palabra de copy. El copy y el formulario viven DENTRO
     del widget de contacto, en un `.grid-2.proposal` de dos columnas, asi que
     no son hermanos de la obra y ningun `order` los alcanzaria. Se les quita la
     caja intermedia con `display:contents` —el widget, su contenedor y la
     rejilla dejan de generar caja— y los tres pasan a ser hijos directos de la
     misma rejilla de una columna. Ahi ya se ordenan.

     `display:contents` no cambia el marcado ni el texto: solo deja de pintar
     tres divs de envoltorio. */
  body.page-id-44 .elementor-element-7460f53{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 26rem);
    column-gap:clamp(3rem, 6vw, 5.5rem);
    row-gap:clamp(2.5rem, 5vw, 4rem);
    align-items:center;
  }
  body.page-id-44 .elementor-element-de4667d,
  body.page-id-44 .elementor-element-de4667d > .elementor-widget-container,
  body.page-id-44 .elementor-element-de4667d .grid-2.proposal{
    display:contents;
  }
  /* EL REPARTO, fase 26ZN. Se colocan por celda y no por `order`, que es lo que
     permite que el formulario cruce las dos columnas:

         copy (izquierda)  |  obra (derecha)
         ------------------------------------
         el formulario, apaisado y a las dos columnas

     Es la anatomia del diptico de la portada, medida: el bloque de Kerigmate va
     en `602px 480px` con 90 px de calle, texto a la izquierda y pieza a la
     derecha. Aqui sale ~800 / 416 con la misma calle proporcional. */
  body.page-id-44 .elementor-element-de4667d .grid-2.proposal > div.stack-sm{
    grid-column:1;
    grid-row:1;
  }
  body.page-id-44 .elementor-element-7460f53 > .elementor-element-80e3466{
    grid-column:2;
    grid-row:1;
  }
  body.page-id-44 .elementor-element-de4667d .grid-2.proposal > form.stack-sm{
    grid-column:1 / -1;
    grid-row:2;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 27a · LAS DOS COMPOSICIONES DE LA 26, POR DEBAJO DE 1025 px

   La 26ZM-26ZN las resolvio en escritorio y lo dejo dicho: «solo tablet y
   movil». Aqui se cierran. Va al final del fichero a proposito: el bloque de
   escritorio es `min-width:1025px` y este es `max-width:1024px`, asi que no se
   pisan nunca y el orden entre ellos no decide nada.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){

  /* ── COOKIES · la escena deja de ser una lamina y pasa a ser LA CABECERA ──
     MEDIDO ANTES: a 390 la obra salia 345x460 centrada, con 22 px de suelo a
     cada lado y la mascara vertical de la 26ZL todavia puesta —la regla nueva
     vive en `min-width:1025px` y aqui no llegaba—. Es exactamente la «lamina
     suelta» que la 26ZL quito de escritorio, reaparecida en el movil.

     Y el tercio no vale aqui: a 390 un tercio son 130 px, que no sostienen un
     titular. Asi que la escena hace lo que hacen las otras ocho cabeceras en
     movil: **llena la cabecera, a sangre, con el texto encima y bajo velo**.
     Es `.head-scene` con otro nombre, y por eso se copia su mecanismo entero
     —`inset:0`, `cover`, velo del §3.4— en vez de inventar uno.

     Lo que se gana, medido: la pieza es 0,75 de proporcion y la cabecera movil
     0,46, asi que `cover` conserva **el 61 % del fichero a plena altura**. Con
     la lamina centrada se veia el 100 % de un fichero que ocupaba un tercio de
     la pantalla; ahora se ve algo menos de fichero y mucha mas escena. */
  body.page-id-1154 .elementor-element-ckhead001{
    position:relative;
    overflow:hidden;
  }
  /* Los dos `position` que Elementor pone y que harian de bloque contenedor.
     Es el mismo hallazgo de la 26ZM, medido alli: sin esto la escena se ancla
     al envoltorio del widget —alto 0— y no se ve. */
  body.page-id-1154 .elementor-element:has(> .obra-cookies){
    position:static;
    /* Y AL SUELO. Elementor le pone `z-index:1` a este widget, y `ckwrap001` es
       un contenedor FLEX: **en un flex el `z-index` de un hijo cuenta aunque
       sea `position:static`**. Con el titular tambien en 1, empataban, y a
       igualdad manda el orden del arbol: el widget de la obra va despues, asi
       que la escena se pintaba ENCIMA de su propio titular.
       Medido y no deducido: la cabecera se capturo sin titulo mientras
       `elementFromPoint` seguia devolviendo el `h1` —el velo lleva
       `pointer-events:none`, asi que el acierto del punto no delataba el
       pintado—, y solo al subir el titular a `z-index:9` en una prueba aparte
       aparecio el texto entero. */
    z-index:0;
  }
  body.page-id-1154 .elementor-element-ckwrap001{
    position:static;
    min-height:clamp(24rem, 58vh, 32rem);
    justify-content:flex-end;
  }
  body.page-id-1154 .elementor-element-ckwrap001 .obra{
    position:absolute;
    inset:0;
    margin:0;
    width:auto;
    z-index:0;
    pointer-events:none;
  }
  body.page-id-1154 .obra-cookies img{
    width:100%;
    height:100%;
    object-fit:cover;
    /* la cabeza y el halo del Holman Hunt viven en el tercio superior */
    object-position:50% 18%;
    /* SIN MASCARA: una escena a sangre no se disuelve, se vela. Las otras ocho
       tampoco llevan. La de la 26ZL era para una lamina, y ya no lo es. */
    -webkit-mask-image:none;
    mask-image:none;
  }
  /* EL VELO, con la formula del sitio (§3.4 · «toda cabecera con texto sobre
     imagen lleva velo»). Aqui es VERTICAL y no lateral, porque en movil el
     texto no ocupa un lado: ocupa el pie, de margen a margen. */
  body.page-id-1154 .elementor-element-ckwrap001 .obra::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,
      rgba(10,12,16,.34) 0%,
      rgba(10,12,16,.52) 38%,
      rgba(10,12,16,.88) 72%,
      #0A0C10 100%);
  }
  body.page-id-1154 .elementor-element-ckwrap001 > .elementor-element-cktitl001{
    position:relative;
    /* 2 y no 1: ver arriba. Con 1 empataba con el widget de la obra. */
    z-index:2;
  }
  /* El tope de 30rem era para el tercio de escritorio. Aqui no hay tercio. */
  body.page-id-1154 .elementor-element-cktitl001 h1,
  body.page-id-1154 .elementor-element-cktitl001 p{
    max-width:none;
  }

  /* ── COLABORA · el diptico se apila, y el titular va PRIMERO ──────────────
     MEDIDO ANTES: a 390 el orden servido era **obra (y 2439) · copy (3005) ·
     formulario (3691)**. La obra caia antes que su propio titular, porque las
     reglas de reparto viven en `min-width:1025px` y al colapsar mandaba el
     orden del DOM, que pone el widget de la obra primero.

     Y eso contradice al resto del sitio, comprobado en las tres secciones
     equivalentes: «DOS OFICIOS» de la portada, «EL EQUIPO» de ¿Quienes somos?
     y «EL CLAUSTRO» de La Schola ponen las tres el rotulo y el titular ANTES
     de la pieza. Aqui se hacia al reves.

     Se aplanan los envoltorios igual que en escritorio —`display:contents` no
     cambia marcado ni texto: solo deja de pintar tres divs— y los tres quedan
     de hermanos en una columna, donde `order` si puede colocarlos:

         copy · obra · formulario  */
  body.page-id-44 .elementor-element-de4667d,
  body.page-id-44 .elementor-element-de4667d > .elementor-widget-container,
  body.page-id-44 .elementor-element-de4667d .grid-2.proposal{
    display:contents;
  }
  body.page-id-44 .elementor-element-7460f53{
    display:flex;
    flex-direction:column;
    gap:clamp(2.5rem, 6vw, 3.5rem);
  }
  body.page-id-44 .elementor-element-de4667d .grid-2.proposal > div.stack-sm{
    order:1;
  }
  body.page-id-44 .elementor-element-7460f53 > .elementor-element-80e3466{
    order:2;
  }
  body.page-id-44 .elementor-element-de4667d .grid-2.proposal > form.stack-sm{
    order:3;
  }
}

/* ══════════════════════════════════════════════════════════════════
   RESPUESTA DEL SISTEMA · fase 27b-d · el primer movimiento de la serie
   ──────────────────────────────────────────────────────────────────
   TRES PIEZAS, Y LAS TRES RESPONDEN A ALGO QUE HA HECHO EL LECTOR. Ninguna se
   dispara sola, ninguna se dispara al entrar en pantalla, ninguna anima nada
   que no sea `opacity` o `transform`, y ninguna estrena un valor: todo sale de
   las fichas del §1.10.

   Y LAS TRES SIGUEN LA REGLA: **el estado final se escribe como valor por
   defecto y la animacion se pone encima.** Si el navegador no entiende la
   animacion, o si la preferencia de movimiento reducido esta puesta, lo que
   queda es el estado bueno — no una pantalla en blanco esperando un fotograma
   que no va a llegar.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · EL PASO DE PESTANA EN LA SCHOLA ─────────────────────────────────
   `body.panelled .pane{display:none}` y `.pane.on{display:block}`: el
   contenido se cambia de golpe, y quien lee pierde el sitio. Una transicion
   NO sirve aqui —no se puede interpolar `display`, y un elemento que acaba de
   dejar de estar oculto no arranca transiciones—, asi que es una animacion.

   Y NO SE ANIMA `.pane.on` A SECAS, que seria revelar al cargar: se anima
   `.pane.on.conmuta`, y la clase `conmuta` la pone `schola.js` **solo en el
   `hashchange`**, nunca en la activacion inicial. O sea: responde al gesto de
   cambiar de pestana y a nada mas. */
@keyframes entra-panel{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference){
  body.panelled .pane.on.conmuta{
    animation:entra-panel var(--dur-fast) var(--ease-out) both;
  }
}

/* ── 2 · EL ENVIO DEL FORMULARIO DEL PIE ─────────────────────────────────
   El formulario del pie es un `<form method="post">` que NAVEGA: al pulsar,
   la pagina se va. Entre el gesto y la respuesta del servidor no habia nada,
   y esa es la definicion de un sistema que no contesta.

   EL ESTADO SE ESCRIBE SIN ANIMACION —opacidad fija—, y el latido se pone
   encima. Con movimiento reducido el boton sigue diciendo que esta enviando:
   se pierde el latido, no la senal. */
.inline-form.enviando .form-go{opacity:.55;cursor:progress}
@keyframes latido-envio{
  from{opacity:.5}
  to{opacity:.95}
}
@media (prefers-reduced-motion:no-preference){
  .inline-form.enviando .form-go{
    animation:latido-envio var(--dur-mid) var(--ease-io) infinite alternate;
  }
}

/* ── 3 · EL FILTRO DE ARTICULOS ──────────────────────────────────────────
   AQUI HAY QUE CORREGIR EL DIAGNOSTICO DE LA 27b-a, y la correccion cambia lo
   que se puede hacer: **los filtros no filtran en la pagina, NAVEGAN.** Son
   `<a href="/articulos/tema/doctrina/">`. Lo que cambia el listado es una
   carga nueva, no un guion.

   Asi que una «transicion del listado» seria una transicion ENTRE DOCUMENTOS
   —`@view-transition`—, que afectaria a todas las navegaciones del sitio y no
   solo al filtro. Eso es una decision de alcance y no se toma aqui: queda
   propuesta en la bitacora con su coste.

   LO QUE SI SE MONTA, y es respuesta del sistema en el sentido estricto: el
   filtro **acusa el toque en el instante**, antes de que la pagina se vaya. Se
   le da el mismo oro que lleva el filtro activo, que es el vocabulario que ya
   existe. No es una animacion: es un estado, y por eso no lleva guarda. */
.chip.eligiendo{color:var(--accent);border-bottom-color:var(--accent)}

/* Y LA MARCA SE MUEVE, no se duplica. Sin esto, entre el gesto y la pagina
   nueva quedaban DOS filtros en oro —el que estaba activo y el recien
   elegido—, que es decir dos cosas a la vez. En cuanto hay uno eligiendose,
   los demas vuelven a su reposo. Se ve en la captura de la 27b-d.
   La especificidad se cuenta: `.filters:has(.chip.eligiendo)` vale lo que su
   argumento mas pesado, asi que el conjunto llega a (0,5,0) y le gana al
   (0,3,0) de `body.category-X .chip[data-cat="X"]`, que es quien marca el
   activo. */
.filters:has(.chip.eligiendo) .chip:not(.eligiendo){
  color:var(--text-secondary);
  border-bottom-color:transparent;
}

/* ══════════════════════════════════════════════════════════════════
   EL REVELADO AL ENTRAR, Y LAS CUATRO FAMILIAS QUE PEDIAN RESPUESTA
   fase 27b-f
   ──────────────────────────────────────────────────────────────────
   PRIMERO UNA CORRECCION DE LA PREMISA, medida antes de montar (§12.82):
   **el sitio YA revela al entrar en pantalla, y desde la fase 5.**
   `.motion [data-reveal]{opacity:0;transform:translateY(24px)}` con
   `IntersectionObserver`, y funciona: medido en seis de siete paginas,
   oculto -> visible al entrar. La clase `.motion` esta puesta en las siete.

   LO QUE FALLA NO ES EL MECANISMO: ES LA COBERTURA. Y muy desigual:

       portada        31 elementos con data-reveal
       la-schola      35
       el-rostro      18
       quienes-somos  14
       kerigmate      11
       colabora        9
       ARTICULOS       4   <- y son la cabecera: h1, lead y filtros

   **En /articulos/ las 44 fichas de articulo y las 5 destacadas no tienen
   revelado ninguno.** Es la pagina que mas se recorre y la unica que se lee
   como texto plano de arriba abajo. Ahi falta, y ahi se pone.
   ══════════════════════════════════════════════════════════════════ */

/* ── A · EL REVELADO DE LAS FICHAS, CON `animation-timeline: view()` ─────
   POR QUE `view()` Y NO EXTENDER EL `data-reveal` QUE YA HAY: porque
   `data-reveal` es un atributo del MARCADO, y las 44 fichas las genera un
   bucle de Elementor — habria que tocar la plantilla. `view()` lo hace desde
   la hoja, sin JS, sin atributo y en el hilo del compositor.

   Y NO HAY REGRESION EN NINGUN NAVEGADOR, que es la duda razonable: Firefox
   todavia lo tiene tras bandera, pero **estas fichas no revelan hoy en
   ningun navegador**. Quien no entienda la regla ve exactamente lo que ve
   ahora. El revelado por `IntersectionObserver` se queda donde esta y sigue
   sirviendo a todo el mundo: no se sustituye nada.

   LAS CUATRO REGLAS, cumplidas y comprobables:
     1 · el estado final es el VALOR POR DEFECTO. Ninguna regla de fuera pone
         `opacity:0`: la opacidad 0 vive **solo dentro del keyframe**. Si la
         animacion no corre, la ficha esta visible. Es la unica forma de no
         mandar un revelado que no revela.
     2 · `@supports` envolviendo, y dentro `prefers-reduced-motion:
         no-preference`.
     3 · solo `opacity` y `transform`.
     4 · se rearma solo: una linea de tiempo de vista no es un disparo, es
         una posicion — al volver a entrar vuelve a recorrerse.

   LA DISTANCIA Y EL RECORRIDO, y se dicen porque el encargo los pide:
     · **14 px**, no los 24 del revelado por guion. Un revelado atado al
       desplazamiento se lee mas largo que uno disparado, porque dura lo que
       dura el gesto: con 24 px se nota el arrastre.
     · **`entry 10% cover 26%`**: empieza cuando la ficha asoma un 10 % y
       acaba antes de que llegue a un cuarto de pantalla. Corto y contenido.
     · **no hay duracion en segundos que elegir**: una animacion de `view()`
       no se mide en tiempo sino en recorrido. Las fichas del §1.10 siguen
       gobernando todo lo demas; esta no las usa porque no puede.
   ──────────────────────────────────────────────────────────────────────── */
@keyframes revela-ficha{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    /* LA FICHA DEL LISTADO ES `.e-loop-item`, NO `.article`. Lo primero que
       escribi fue `.articles .article`, y casaba con 5 elementos de 49: en
       esta pagina `article` solo aparece como parte de `article-img`,
       `article-cat`, `article-title`… —clases de las PIEZAS de la ficha— y la
       ficha entera es el elemento de bucle de Elementor. Contar «44 .article»
       en el marcado era contar subcadenas (§12.82: mirar el marcado, y
       mirarlo bien). */
    .articles .e-loop-item:not([data-reveal]):not([data-reveal] *),
    .articles .feature:not([data-reveal]):not([data-reveal] *){
      animation:revela-ficha linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 26%;
    }
  }
}

/* ── B · EL INDICE DE ACTOS · El Rostro del Amor ─────────────────────────
   Veinte filas con numeral, titulo y minutaje, y ninguna respondia. Es del
   mismo tipo que los treinta temas de La Schola y que los ocho puntos del
   cierre —una lista que se recorre con la vista—, asi que **se hace igual y
   no se inventa un recurso**: oro en la letra.
   El numeral esta a opacidad .75 en reposo; al recorrer, sube a 1. */
.act span,.act b{transition:color var(--dur-fast) ease-out, opacity var(--dur-fast) ease-out}
.act:active span{color:var(--accent)}
.act:active b{opacity:1}
@media (hover:hover) and (pointer:fine){
  .act:hover span{color:var(--accent)}
  .act:hover b{opacity:1}
}

/* ── C · LOS TRES DE CADA TERNA ──────────────────────────────────────────
   Los tres valores irrenunciables de ¿Quienes somos?, los tres pilares de
   Kerigmate y los tres puntos de «Que cambia en quien entra» de La Schola
   son **el mismo componente**: `.pillars > article`, dentro de un `grid-3`.

   Y UNA INCONSISTENCIA QUE SALE AL MIRARLO Y SE ANOTA: en dos paginas el
   hijo lleva la clase `.pillar` y en La Schola no la lleva —es
   `article.stack-sm`—. El selector va al hijo directo del contenedor, que es
   lo unico comun; unificar las clases es de otra fase, y esta no toca
   marcado.

   Misma respuesta que las otras listas: oro, y en el titulo. El filete
   superior que ya tienen sube de `--border-hairline` a `--border-accent`. */
.pillars>*{transition:border-color var(--dur-fast) ease-out}
.pillars>* h3{transition:color var(--dur-fast) ease-out}
.pillars>*:active{border-top-color:var(--border-accent)}
.pillars>*:active h3{color:var(--accent)}
@media (hover:hover) and (pointer:fine){
  .pillars>*:hover{border-top-color:var(--border-accent)}
  .pillars>*:hover h3{color:var(--accent)}
}

/* ── D · EL NOMBRE DEL REDACTOR · Articulos ──────────────────────────────
   ⚠ AQUI HAY QUE DECIR ALGO ANTES DE HACERLO, porque el encargo pide «que se
   encienda en BORGONA» y **el borgona no puede ser color de texto**: sobre
   `--surface-base` da 1,91:1, se probo en la 26ZC, se midio y se deshizo en
   la 26ZD. Y esta misma fase exige cero cajas por debajo de 4,5:1.

   LA REGLA DEL SITIO YA RESUELVE LA CONTRADICCION, y es la que gobierna el
   requisito de La Schola y la sexta puerta —los dos ejemplos que el propio
   encargo cita—: **el oro tine la letra, el borgona enciende una LINEA.**
   Los dos casos que puso son lineas, no letras.

   Asi que el redactor se enciende en borgona **por debajo**: un filete de
   2 px con el mismo halo del requisito. El nombre no cambia de color, que es
   ademas lo mas honesto: la senal es borgona y no se mezcla con el oro. */
.byline-name a{position:relative;text-decoration:none}
.byline-name a::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--accent-alt);
  box-shadow:0 0 5px rgba(122,30,46,1), 0 0 14px rgba(122,30,46,.7);
  opacity:0;transition:opacity var(--dur-fast) ease-out;pointer-events:none;
}
.byline-name a:active::after{opacity:1}
@media (hover:hover) and (pointer:fine){
  .byline-name a:hover::after{opacity:1}
}

/* ── E · LAS FICHAS DEL CLAUSTRO · corregido en la fase 27b-g ────────────
   AQUI HABIA DOS DEFECTOS Y ERAN EL MISMO, dichos por el encargante:

   1 · **DIBUJABA UN MARCO DONDE NO LO HAY.** Las fichas de «Quien te ensena»
       de La Schola son `.teacher`, y su regla es literal:

           .teacher{padding:1.7rem 0 0;background:none;border:0;
                    border-top:1px solid var(--border-hairline-hi)}

       `border:0` y **una sola linea horizontal arriba**. Poner un halo
       alrededor de la caja entera es inventar un recurso donde el sitio ya
       tenia el suyo. **El borgona ENCIENDE LO QUE YA HAY**, que es lo que
       hacen el filete de requisito y el de la sexta puerta.

   2 · **LA SENAL LLEGABA A UNA FICHA Y NO A SUS HERMANAS.** La regla iba a
       `.person`, y en La Schola **solo la ficha de «¿Eres profesor?» lleva
       esa clase** —es `article.teacher.person.open`—; la del Padre Manuel es
       `.teacher` a secas. Medido: 1 de 2. Una senal que responde en una ficha
       y no en su hermana no es una senal, es una excepcion, y se rompe en
       cuanto alguien anade un profesor.

   ASI QUE SON DOS FAMILIAS CON DOS FORMAS, y cada una enciende SU limite:

       .teacher   (La Schola)   limite = la linea de arriba  -> se enciende ella
       .person    (Colabora)    limite = un marco de verdad  -> se enciende el marco

   Las dos con el halo del requisito, que es lo que levanta al borgona por
   encima del 3:1 que un contorno de componente necesita: `--accent-alt` a
   secas sobre `#0A0C10` da 1,91:1.
   ──────────────────────────────────────────────────────────────────────── */

/* E.1 · EL CLAUSTRO DE LA SCHOLA · se enciende la linea que ya tiene */
.teacher{position:relative}
.teacher::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--accent-alt);
  box-shadow:0 0 5px rgba(122,30,46,1), 0 0 14px rgba(122,30,46,.7);
  opacity:0;transition:opacity var(--dur-fast) ease-out;pointer-events:none;
}
.teacher:active::before{opacity:1}
@media (hover:hover) and (pointer:fine){
  .teacher:hover::before{opacity:1}
}

/* E.2 · LAS FICHAS DE «QUIEN FIRMA QUE» · Colabora · aqui el marco SI existe
   `.people > article.person` llevan `1px solid --border-frame` en los cuatro
   lados, medido. Ahi el borgona va al borde, porque **un marco ya es una
   linea**, y el halo lo abraza.
   Y se excluye a `.teacher`: la ficha de la plaza abierta lleva las dos
   clases, y sin el `:not()` recibiria las dos senales a la vez. */
.person:not(.teacher){transition:border-color var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out}
.person:not(.teacher):active{
  border-color:var(--accent-alt);
  box-shadow:0 0 5px rgba(122,30,46,.9), 0 0 16px rgba(122,30,46,.55);
}
@media (hover:hover) and (pointer:fine){
  .person:not(.teacher):hover{
    border-color:var(--accent-alt);
    box-shadow:0 0 5px rgba(122,30,46,.9), 0 0 16px rgba(122,30,46,.55);
  }
}

/* ── F · LAS DIEZ TARJETAS DE PRECIO Y LOS DOS CURSOS ABIERTOS · fase 27b-h ──
   PRIMERO SE MIDIO LA FORMA, que es lo que decide la senal (§12.83). Las diez
   tarifas de «Estructura de precios», leidas en el motor y no en el fichero:

       .price{padding:1.7rem 0 0;background:none;border:0;
              border-top:1px solid var(--border-hairline-hi)}
       .price.mark{border-top-color:var(--border-gold-frame)}

   `border:0` y **UNA SOLA LINEA HORIZONTAL ARRIBA**. Ninguna tiene marco y
   ninguna tiene fondo propio —el fondo elevado es de `.layer.sealed`, la banda
   que envuelve a las dos ultimas—. Es exactamente la forma de `.course` y de
   `.teacher`, y esta misma pagina ya tiene las DOS recetas legitimas para esa
   forma, a dos secciones de distancia:

       .course                linea arriba -> ORO      border-top-color:--accent-hi
       .courses .course-req   linea arriba -> BORGONA  ::before de 2px con halo

   ASI QUE NO HACE FALTA NINGUN RECURSO NUEVO. Se reparten asi:

   NUEVE EN ORO. El oro de este sitio no dice «pulsame para comprar»: se usa hoy
   en `.act` —veinte filas de un indice que no navegan—, en `.pillars > *` y en
   `.course`, que tampoco es enlace. Dice **esto se recorre**: se compara. La
   promesa la lleva el boton que ya vive dentro de cada tarjeta —«Avisadme
   cuando abra», a /kerigmate/— con «Todavia no ha abierto» debajo. La tarjeta
   acusa el dedo; no ofrece una caja.

   FUNDATOR EN BORGONA, y solo Fundator. Son cincuenta plazas que se cierran
   para siempre: es lo unico de la seccion que ADVIERTE, y el borgona es la
   senal del sitio para lo que distingue. Va con la receta del requisito
   —`::before` superpuesto en `top:-1px`, 2 px y halo en dos capas— por dos
   razones medidas: `--accent-alt` a secas sobre `#0A0C10` da 1,91:1 y necesita
   el halo para pasar del 3:1 que un contorno de componente pide; y superpuesto
   no mueve nada, porque su linea de oro sigue debajo, del mismo grosor.

   FUNDATOR NO TIENE CLASE PROPIA: es `.price.mark` dentro de `.layer.sealed`.
   Por eso el oro se escribe con las dos ramas que dan las nueve exactas —8 en
   las capas sin sellar y 1 sin `.mark` en la sellada, contadas— y le dejan
   fuera, en vez de con un `:not()` contra un elemento concreto.

   NI DESPLAZAMIENTO NI NADA QUE MUEVA EL TEXTO: `.price` no tiene relleno
   horizontal —igual que `.course`, y por eso su comentario ya lo advertia—,
   asi que un filete lateral indentaria el nombre al pasar por encima.
   ──────────────────────────────────────────────────────────────────────── */

/* F.1 · LAS NUEVE QUE SE COMPARAN · se enciende la linea que ya tienen, en oro */
.layer:not(.sealed) .prices .price,
.layer.sealed .prices .price:not(.mark){
  transition:border-color var(--dur-fast) ease-out;
  -webkit-tap-highlight-color:transparent;
}
.layer:not(.sealed) .prices .price:active,
.layer:not(.sealed) .prices .price:focus-within,
.layer.sealed .prices .price:not(.mark):active,
.layer.sealed .prices .price:not(.mark):focus-within{border-top-color:var(--accent-hi)}
@media (hover:hover) and (pointer:fine){
  .layer:not(.sealed) .prices .price:hover,
  .layer.sealed .prices .price:not(.mark):hover{border-top-color:var(--accent-hi)}
}

/* F.2 · FUNDATOR · cincuenta plazas que se cierran: su linea, en borgona */
.layer.sealed .prices .price.mark{position:relative;-webkit-tap-highlight-color:transparent}
.layer.sealed .prices .price.mark::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--accent-alt);
  box-shadow:0 0 5px rgba(122,30,46,1), 0 0 14px rgba(122,30,46,.7);
  opacity:0;transition:opacity var(--dur-fast) ease-out;pointer-events:none;
}
.layer.sealed .prices .price.mark:active::before,
.layer.sealed .prices .price.mark:focus-within::before{opacity:1}
@media (hover:hover) and (pointer:fine){
  .layer.sealed .prices .price.mark:hover::before{opacity:1}
}

/* F.3 · LOS DOS CURSOS ABIERTOS DE IANUA · la misma forma, la misma regla
   `.opens > .open` es `border-top:1px solid var(--border-gold-frame)` y nada
   mas: la linea de `.course` con su mismo color de reposo. Y aqui el oro es
   literal —los dos estan abiertos, son gratuitos y el boton lleva a YouTube—,
   asi que se lleva la regla de `.course` sin cambiarle una letra. */
.opens>.open{
  transition:border-color var(--dur-fast) ease-out;
  -webkit-tap-highlight-color:transparent;
}
.opens>.open:active,.opens>.open:focus-within{border-top-color:var(--accent-hi)}
@media (hover:hover) and (pointer:fine){
  .opens>.open:hover{border-top-color:var(--accent-hi)}
}

/* F.4 · LA CIFRA SE ILUMINA Y CRECE UN PUNTO · fase 30
   Sobre la linea de oro que ya enciende, no en su lugar: el mismo gesto que
   enciende el borde pasa la cifra de crema a oro alto y la crece un 2% con
   `transform` — lo unico que no cuesta disposicion (bloque 0: el motor,
   medido). En las `.mark`, que ya viven en oro alto, crece igual y el color
   no cambia; el halo de Fundator queda como esta (§3.1). La regla va a la
   familia (§12.83): una tarifa nueva responde sin tocar la hoja. */
.prices .price .price-fig{
  transition:transform var(--dur-fast) var(--ease-out), color var(--dur-fast) ease-out;
  transform-origin:left bottom;
}
.prices .price:active .price-fig,
.prices .price:focus-within .price-fig{transform:scale(1.02);color:var(--accent-hi)}
@media (hover:hover) and (pointer:fine){
  .prices .price:hover .price-fig{transform:scale(1.02);color:var(--accent-hi)}
}

/* Y los cimientos: sin movimiento, la senal sigue estando — cambia de golpe. */
@media (prefers-reduced-motion:reduce){
  .layer .prices .price,
  .prices .price .price-fig,
  .layer.sealed .prices .price.mark::before,
  .opens>.open{transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   NO SE ANIMA LO QUE NO EXISTE · fase 27b-d
   ──────────────────────────────────────────────────────────────────
   ELEMENTOR DECLARA TRANSICIONES DE `border-radius` Y `box-shadow` en tres
   grupos de selectores, y este sitio **no tiene ni radio ni sombras de
   superficie**: el radio es 0 por contrato (DA-1) y el codice no usa sombra
   como recurso. Se anima algo que nunca cambia.

   PERO ANTES DE RETIRARLAS SE MIDIO SI COSTABAN ALGO, y la respuesta cambia el
   tamano del hallazgo: **de 42 elementos examinados a fondo, en CERO cambia el
   radio o la sombra al forzar `:hover`, `:focus` o `:active`.** Una transicion
   sobre una propiedad que nunca varia **no interpola y no gasta**: el navegador
   no anima lo que no cambia.

   O SEA QUE ESTO ES HIGIENE, NO RENDIMIENTO, y se dice para que nadie lo
   apunte como una mejora de velocidad que no es. Lo que se gana es que la hoja
   deje de declarar intenciones falsas: quien lea `transition:…box-shadow…` en
   este sitio creera que hay sombras.

   Y UNA CORRECCION AL ENUNCIADO, porque el sitio SI usa una sombra: la
   `.header` transiciona `box-shadow` **y esa si interpola** — es el filete-luz
   doble que aparece al bajar (§3.3, `body.scrolled .header`). Un filete
   dibujado con `box-shadow` no es una sombra blanda, pero es una sombra. **Esa
   transicion se queda**, y por eso este bloque no toca nada nuestro: solo los
   tres selectores de Elementor.

   Se conserva todo lo demas de su lista —`background`, `border`, `transform`,
   `opacity`—: `transform` va al compositor y los otros los usan sus efectos.
   ══════════════════════════════════════════════════════════════════ */
html .elementor .e-con:where(:not(.e-div-block-base)){
  transition-property:background,border,transform;
}
html .elementor .e-con::before{
  transition-property:background,opacity;
}
html .elementor .elementor-element:where(:not(.e-con)):where(:not(.e-div-block-base)) .elementor-widget-container,
html .elementor .elementor-element:where(:not(.e-con)):where(:not(.e-div-block-base)):not(:has(.elementor-widget-container)){
  transition-property:background,border,transform;
}

/* LA EXCEPCION, Y LA ENCONTRO LA MEDIDA, no la lectura: **`.header` ES un
   `.e-con` de Elementor**, asi que las tres reglas de arriba tambien le
   quitaban SU transicion —la del filete-luz del §3.3, que es la unica sombra
   del sitio y la unica que de verdad interpola—. Con el sobrescrito puesto, el
   filete aparecia de golpe al bajar en vez de fundirse en 0,55 s.

   Medido: `transition-property` de `.header` pasaba a `background, border,
   transform`, sin `box-shadow`. Se le devuelve su lista entera. */
html .elementor .header{
  transition-property:background-color,box-shadow,top,left,right;
}

/* ══════════════════════════════════════════════════════════════════
   §5.8 SE COMPLETA, Y AHORA SI CIERRA EL FICHERO · fase 27b-a
   ──────────────────────────────────────────────────────────────────
   UNA CORRECCION DE PARTIDA, Y CON LA CIFRA: **no era cierto que el sitio no
   tuviera `prefers-reduced-motion`.** Medido: **cuatro** bloques en este fichero
   —lineas 2559, 2624, 3495 y el global de §5.8— y **tres** guardas en JS. El
   global de §5.8 ya apaga con `!important` toda animacion, toda transicion y el
   `scroll-behavior` del documento entero.

   PERO SU PROPIA NOTA DE LA LINEA 303 DICE QUE **CIERRA EL FICHERO**, y no lo
   cierra: esta en la linea 3495 de 6.729. Lo que lleva `!important` gana igual,
   pero **sus reglas sin `!important` las pisa cualquier cosa escrita despues**.
   Este bloque cierra de verdad.

   Y CUBRE LOS TRES HUECOS QUE §5.8 NO PODIA CUBRIR, porque son posteriores:

   1 · **EL VIDEO DEL 404.** §5.8 fija `.hero-video video` y nada mas; la escena
       del 404 nacio en la 26Z, despues. Un `<video loop>` es movimiento continuo
       aunque el CSS apague las animaciones: **el reset universal no pausa un
       video.** Decision, y se dice: **los dos videos se pausan en su primer
       fotograma**, que es exactamente el poster —medido en la 27a-n: encajan a
       0,0 px—. La escena se ve entera y quieta.

   2 · **LAS DOS MARQUESINAS.** El titulo corrido de la portada (52 s) y el
       roster de Colabora (46 s) no se animan con CSS: los mueve
       `Element.animate()` desde `refugio.js`, y **una animacion de la API web es
       invisible para `animation-duration:.01ms`**. Se paran en el guion, y aqui
       se les da la forma que necesitan para seguir siendo legibles: la pista
       **se envuelve en varias lineas** en vez de quedarse en una sola cortada
       por `overflow:hidden`. Sin esto la preferencia **escondia contenido**, que
       es peor que animarlo.

   3 · Y `scroll-behavior` **ya estaba**: el `scrollIntoView` de `schola.js`
       queda instantaneo por el `auto!important` de §5.8. Comprobado, no supuesto.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  /* 1 · las dos escenas con video: quietas y sin cruce */
  .hero-video video,
  .head-scene video,
  .head-scene .escena-reposo{transition:none!important;animation:none!important}

  /* 1 bis · Y VISIBLES, QUE ES LO QUE SE ME HABIA OLVIDADO.
     El encargante lo dijo: «los videos son el caso que se olvida». Lo era, y
     de una manera peor que la que yo estaba arreglando. Medido a 390 px con
     la preferencia puesta: **la escena del 404 estaba a opacidad 0 entera**,
     poster y video. No es que se moviera de mas: es que NO ESTABA.

     LA CAUSA no es de esta regla sino del guion: `refugio.js` es un IIFE con
     un `return` por movimiento reducido en su linea 73, y ese `return` mata
     la funcion entera —no un bloque—. De la 74 en adelante esta el codigo que
     pone `.poster-ready` y `.ready`, o sea **las dos puertas que suben las
     opacidades de 0 a 1**. Con la preferencia puesta no se abrian nunca.

     ASI QUE SE ESCRIBE EL ESTADO FINAL COMO VALOR POR DEFECTO, que es la
     regla del §1.10: quien pide menos movimiento no pide menos contenido.
     La escena se ve entera y quieta, sin depender de ninguna clase que un
     guion tenga que anadir. El hero no lo necesita —§5.8 ya le fija
     `opacity:.45!important`— y por eso solo entra el 404.

     LA ESPECIFICIDAD SE COPIA DE LA REGLA A LA QUE GANA, `html.js
     body.error404 .head-scene video{opacity:0}`, que vale (0,3,3): mismo
     peso y este bloque va detras, que es como se gana sin `!important`. */
  html.js body.error404 .head-scene .escena-reposo,
  html.js body.error404 .head-scene video{opacity:1}

  /* 2 · las dos marquesinas: sin desplazamiento y con todo a la vista */
  .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .marquee-track,
  .roster{
    width:auto;flex-wrap:wrap;
    transform:none!important;      /* gana a la animacion de la API web */
    will-change:auto;
  }
}