/* Arketip · web pública.
   Registro: oscuro, grande y con aire. El público son propietarios de empresa
   familiar y directivos senior, y la marca se define por su discreción.

   ── LA PIEL QUE MANDA AHORA: «NOCHE» (issue #151) ─────────────────────────
   Sustituye en TODA la web pública a las pieles de las issues #1, #15, #87 y
   #148 (crema, verde de la casa, granate de titulares #72, Gelasio e Inter).
   Lo que esas pieles protegían ya no existe en la web pública y sus notas se
   han quitado de aquí. Sus reglas siguen en la hoja por un solo motivo: las
   cuatro pantallas del área de cliente del Taller cargan esta misma hoja y no
   deben cambiar. Se reconocen porque no llevan `html.web-publica`; esa clase
   es la frontera. La piel nueva está al final del fichero, entera, y esta
   cabecera es su registro de decisiones.
*/

/* ── Qué es «Noche», qué decidió el coach y cómo está medida ──────────────
   Lo pidió así, tras ver tres maquetas: «ahora haz toda la página con este
   estilo. Nos quedamos con este». La maqueta es `a-noche.html`; esta capa es
   su traducción a las 25 clases de bloque que sabe pintar `pagina.html`, a las
   páginas del embudo (agenda, aplicar, gracias, baja, error) y a la cabecera y
   el pie.

   CÓMO ESTÁ PUESTA, Y POR QUÉ ASÍ
   · Todo cuelga de `html.web-publica` (`_base.html`). Las cuatro pantallas del
     área de cliente del Taller cargan esta misma hoja y NO llevan esa clase:
     por eso no cambian ni un píxel. Cada regla de aquí empieza por ella.
   · Va dentro de `@media screen`. En papel manda la piel de antes, que ya
     imprimía en negro sobre blanco: una piel negra gastaría la tinta de la
     impresora y dejaría ilegibles las bandas.
   · Cambia primero los TOKENS (`--fondo`, `--papel`, `--tinta`, `--suave`…) y
     después solo lo que traía un color escrito a mano. Así los 25 tipos de
     bloque se leen sobre negro sin repintar uno a uno, y un bloque nuevo hereda
     la piel sin que nadie se acuerde de ella.
   · Los botones se repintan EXPLÍCITOS (blanco con letra negra). No se pueden
     dejar a los tokens: la letra de los botones de antes era `--acento-papel`
     y el fondo `#fff` escrito a mano, así que con `--acento-papel` en champán
     salía champán sobre blanco (1,4:1).

   EL REGISTRO DE LA MARCA (decisiones del coach, 15/10/2026)
     fondo      #000                 negro puro; la banda `--noche` #0b0b0c
     tarjetas   #141414              con un filete blanco al 7-12 %
     texto      blanco, y grises #c4c4c4 (suave) y #8a8a8a (tenue)
     champán    #e8d3a6              EL acento. Solo en rótulos, números, el
                                     subrayado de un enlace y las palabras
                                     destacadas (`<em>`). Nunca de fondo grande.
     oro marca  #b5a36a              solo en el símbolo de tres puntas
     titulares  Instrument Sans 400, muy grandes y muy apretados (-.05em)
     destacados Instrument Serif cursiva, en champán
     botones    píldora blanca con letra negra; al pasar el ratón, champán
     caja       1240 px, margen lateral clamp(16px,4vw,56px)
   Las dos familias están autoalojadas en `/estatico/fuentes/` con su licencia
   SIL OFL al lado (`OFL-InstrumentSans.txt`, `OFL-InstrumentSerif.txt`). Nada
   sale del CDN de Google: ese CDN le entrega la IP de cada visitante a un
   tercero y esta web pide consentimiento para todo lo demás.

   CONTRASTES, fórmula WCAG de contraste relativo (script, no a ojo). Mínimo de
   la casa: 4,5:1 para texto, 3:1 para un contorno de interfaz.

                 negro   noche   tarjeta  tarjeta  banda   banda    banda    banda
                 #000    #0b0b0c #141414  en banda par     pizarra  acento   clara
                                          #1b1b1b  #0d0c09 #17181a  #1b160d  #121212
     blanco       21,00   19,67   18,42    17,22   19,56    17,77    17,99    18,73
     suave #c4c4c4 12,04  11,28   10,56     9,88   11,21    10,19    10,32    10,74
     gris  #a3a3a3  8,33   7,80    7,30     6,83    7,75     7,04     7,13     7,43
     tenue #8a8a8a  6,08   5,70    5,34     4,99    5,67     5,15     5,21     5,43
     champán       14,30  13,40   12,54    11,73   13,32    12,10    12,25    12,76
     error #ff9b8f 10,34   9,68    9,07     8,48    9,63     8,75     8,86     9,22
     contorno de un campo, una opción o un hueco de la agenda (#7d7d7d), el
       peor caso: 4,18 sobre una tarjeta dentro de una banda (mínimo 3:1)
     letra negra sobre un botón blanco 21,00 · sobre un botón champán 14,30
     el visto de una casilla marcada: negro sobre champán 14,30 (el blanco daba
       1,47, por eso es negro)
     aviso de borrador, #f3d79a sobre #2a1f0a: 11,55
     filetes de separación (blanco al 12 %) y anillos del Golden Circle
       (#707070, 3,72:1 sobre tarjeta): decoración, no contorno de interfaz.
   `test_los_contrastes_medidos_de_la_cabecera_son_los_de_la_hoja` recalcula
   esta tabla con la misma fórmula a partir de los tokens.

   LAS CINCO BANDAS (`banda:` en el YAML) siguen existiendo y ahora son cinco
   negros que marcan el cambio de sección, como la banda `--noche` de la maqueta
   — todas con letra blanca, ninguna con letra oscura sobre fondo oscuro (la
   cicatriz de la #38):
     profunda / division  #0b0b0c   alterna con #0d0c09 (cálido) por orden de
                                    aparición, como el verde y el granate de la #87
     pizarra              #17181a   el más claro de los fríos
     acento               #1b160d   negro con un punto de champán
     clara                #121212   ya no es crema: es la banda gris casi negra
   El granate de titulares (#72) pasa a ser blanco: `--granate` sigue siendo el
   nombre que llevan los titulares en toda la hoja, con otro valor.

   DECISIONES DE «NOCHE» QUE PISAN A OTRAS ANTERIORES (se dicen aquí para que
   nadie las tome por un descuido; todas se deshacen tocando esta capa)
   · El rótulo de sección vuelve a llevar su raya, ahora de champán: la #121
     la había quitado y la maqueta elegida la lleva.
   · La cabecera es fija (`position:sticky`) y con cristal, como la de la
     maqueta; la #95 la había dejado quieta. En escritorio la barra de los
     tres públicos va dentro de ella; en móvil se esconde al bajar y la
     cabecera se queda.
   · Las tarjetas de contenido NO se levantan ni se iluminan con el ratón
     (#147). Solo las de «Tres sistemas», que son enlaces, suben.
   · El televisor de las portadas desaparece: la foto va redondeada, con
     anillo, a su proporción y sin recortar.

   PARA QUIEN AÑADA MOVIMIENTO A LA HOME
   · La foto de portada es `.portada-foto-caja`: redondeada, con anillo y sin
     transformación; es el elemento que se inclinará con el scroll.
   · Los bloques están pintados en su estado final: lo que se encienda o
     aparezca al bajar tiene que partir de aquí y volver aquí con
     `prefers-reduced-motion`.
   · `html.js` existe desde el `<head>` de `_base.html` (menú de móvil).
   · Los titulares aceptan `<em>` (Instrument Serif cursiva, champán): falta
     que el contenido pueda marcar palabras.
*/

/* Las tipografías de la piel anterior (Gelasio e Inter) se declaran más abajo
   y las usa solo el área de cliente; las de «Noche» están al final de la hoja.
   Newsreader, DM Sans y Manrope ya no se usaban en ningún sitio y se han
   quitado: sus ficheros se dejan donde estaban, sin borrar. */

/* ── Paleta ─────────────────────────────────────────────────────────────────
   La piel del prototipo (issue de este cambio, ver cabecera del fichero).
   El acento sigue siendo UNO solo para toda la marca (decisión de la issue
   #1, que esta piel no toca): lo que cambia por división es el tono de la
   banda oscura de portada, no el color de marca.

   Contrastes medidos con la fórmula WCAG de contraste relativo, no a ojo.
   El mínimo que se acepta para texto en esta hoja es 4.5:1; para un filete o
   un contorno de interfaz (no texto), 3:1. */
/* ── Granate de titulares (issue #72) ────────────────────────────────────────
   El coach, en nota de voz: «que los títulos no salgan en negro, aunque sean
   en granate o en rojo, como rojo-granate». Un granate que combine con esta
   paleta (verde casi negro + el dorado de adorno), no un rojo de alarma:
   `#6d1f2b`, un vino oscuro de la misma familia tonal que `--acento`.

   Contraste medido con la MISMA fórmula WCAG de esta hoja, contra cada fondo
   claro donde cae hoy un titular:

     #6d1f2b sobre --fondo (#ece4d6 desde la #87; era #f2eee7, 9,65:1)  8,84:1
     #6d1f2b sobre --papel (#fbfaf7, tarjetas y campos)           10,70:1

   Los dos muy por encima del mínimo de 4,5:1 de la casa. NO sirve sobre
   fondo oscuro: `#6d1f2b` sobre el `--banda` de entonces (#14201d) daba
   1,50:1 y hoy sobre el granate de banda es el mismo color (1:1): este
   color NUNCA se usa donde el titular resuelve a `--tono-tinta` — ver el
   porqué de esa pareja en «Los tonos de banda», más abajo, y su aplicación
   en el bloque `h1,h2,h3` de la sección «Rejilla a sangre». */
:root{
  --granate:#6d1f2b;      /* titulares sobre fondo claro (issue #72) */
  --fondo:#ece4d6;        /* el papel de toda la web, un escalón más cálido que el --paper del prototipo (issue #87) */
  --papel:#fbfaf7;        /* --white del prototipo: tarjetas y campos */
  --tinta:#0c1412;        /* --ink del prototipo · 14,79:1 sobre el fondo (issue #87) */
  --suave:#3d4f47;        /* verde oscurecido de la familia --ink · 6,91:1 sobre --fondo (issue #87) */
  --tenue:#52635a;        /* el más claro que se usa para texto · 5,05:1 sobre --fondo (issue #87) */
  --linea:#d2c7b3;        /* filetes y bordes, no es texto; sigue al --fondo nuevo (issue #87) */
  /* Los dos colores de banda (issue #87). El coach: «todos los fondos negros
     cámbialos por verde o granate, ves variando». Ya no hay ningún fondo casi
     negro a sangre: las bandas oscuras y las portadas alternan entre estos dos
     (ver «Verde y granate, por orden de aparición», más abajo). Se eligieron
     de la misma luminosidad a propósito (el verde de la casa y el granate de
     los titulares miden lo mismo contra las mismas tintas), así que las
     tintas de banda valen para los dos sin repintar nada. */
  --banda:#2c4038;        /* verde de la casa (= --acento): el de la portada y las bandas impares */
  --granate-banda:#6d1f2b;/* = --granate: las bandas pares */
  --barra:#6d1f2b;        /* la barra de divisiones de arriba: granate, contra la portada verde */
  --pie:#6d1f2b;          /* el pie: granate SIEMPRE; si lo último del lienzo es una banda oscura
                             lleva un filete claro arriba (ver más abajo). Pasarlo a verde según la
                             paridad pedía un :has() dentro de otro, que no es válido (issue #87) */
  /* Aquí vivían `--naranja` y `--naranja-oscuro` (issue #88: el botón de
     reservar en naranja). Se quitaron en la issue #118: el coach quiere la
     web «lo más pro», sobria, y el naranja de llamada era lo más «landing» que
     quedaba. El botón de reservar es ahora del verde de la casa (`--acento`).
     Volver atrás es recuperar estas dos líneas y el bloque de la #88 del
     final de la hoja (`git log`). */
  /* Las TRES líneas del acento van juntas: si se cambia una, se cambian las
     tres o el botón cambia de familia de color al pasarle el ratón (la
     cicatriz de la #15). Por qué estos tres y no el dorado del prototipo,
     está en la cabecera del fichero. */
  --acento:#2c4038;       /* verde muy oscuro; enlaces y botones sobre papel · 9,57:1 */
  --acento-oscuro:#223129;/* el mismo verde pisado, para el hover de los botones */
  --acento-claro:#9bae9f; /* --sage del prototipo, legible sobre la banda · 7,14:1 */
  /* Las cuatro «sobre papel». No son colores nuevos: son un segundo nombre para
     los cuatro de arriba, y siguen a su original si algún día se cambia.

     Existen porque dentro de una banda de color hay que poder REPINTAR esos
     cuatro tonos y luego DEVOLVERLOS a las tarjetas y los campos, que traen su
     propio papel claro. Ver «Los tonos de banda».

     Y sí, esto funciona y no se resuelve dos veces: una propiedad personalizada
     se sustituye al calcular el valor EN ESTE elemento, así que `--suave-papel`
     hereda desde `:root` el literal `#3d4f47`. Cuando `.banda` repinta
     `--suave`, `--suave-papel` sigue intacta. Esto lo dice la especificación
     (CSS Custom Properties, la sustitución de `var()` al calcular el valor),
     no una prueba hecha en el navegador; se ve de verdad en la banda `clara`,
     que es la única que usa los nombres `-papel` como valor. */
  --suave-papel:var(--suave);
  --tenue-papel:var(--tenue);
  --linea-papel:var(--linea);
  --acento-papel:var(--acento);
  /* El ancho de la CAJA: la columna central del lienzo, las dos cabeceras, las
     rejillas, la matriz, las tarjetas y el marco del vídeo. Sin cambios en
     esta issue: no se toca la estructura, solo la piel. Ver «Medida de
     lectura» para lo que NO es esta variable. */
  --ancho:72rem;
  --medida:40rem;
  /* El radio de todo lo que se pulsa y todo lo que se rellena. 2px es el
     `--radius` del prototipo — casi a escuadra, más recto todavía que los
     .625rem de antes. Las tarjetas de CONTENIDO siguen sin radio: el filo
     recto con el borde de acento arriba es el registro de la casa y no se
     pulsa, así que no usa esta variable. */
  --radio:2px;
  /* Issue #68: `--aire` deja de ser SOLO el margen ENTRE secciones y pasa a
     ser también el `padding` de arriba y abajo DE cada sección — es lo que
     el prototipo hace en `.statement` (`clamp(90px,13vw,185px) 0`, medido en
     el navegador) y que aquí faltaba del todo: `getComputedStyle` en
     `.golden-circle`, `.manifiesto`, `.bifurcacion` y los dos `.texto` de la
     home daba 0px de `padding-top`/`padding-bottom` los cinco. Con las
     secciones pegadas se leía como un documento, no como una revista.
     90px=5.625rem, 185px=11.5625rem (base 16px), igual que el prototipo.

     ── Sobraba aire (revisión de composición, 18/09/2026, issue #70) ───────
     El coach, mirando la web ya publicada: «hay muchos huecos entre las
     secciones, de todas las páginas». El valor de arriba lo copiaba del
     prototipo tal cual, pero el prototipo tiene secciones LARGAS (un
     `.statement` de varias frases, tarjetas con texto largo); las nuestras
     son cortas — un párrafo, tres preguntas, un aviso legal — y el mismo
     aire de sobra se lee como hueco vacío en vez de respiro.

     Medido con `getComputedStyle` a 1280px de ancho, la proporción
     aire/contenido (el aire ARRIBA de una sección, dividido por la altura
     real de lo que hay dentro, de su primer a su último hijo) ANTES de este
     cambio, en tres páginas:

       página          sección          contenido   aire    proporción
       home            golden_circle      585px     166,4px    0,28
       home            texto (la más       207px     166,4px    0,80
                        corta de la home)
       /personal       filtro             327px     166,4px    0,51
       /aviso-legal    texto (la más      146px     166,4px    1,14  ← el
                        corta de las 4)                           aire
                                                                  SUPERA
                                                                  al texto

     La proporción no es estable: va de 0,28 (una sección larga, se lee
     bien) a 1,14 (el aire mide MÁS que el párrafo que separa, en la página
     legal). Ese 1,14 es la cifra que sostiene la queja del coach.

     El valor nuevo escala TODO el `clamp()` por el mismo factor —no se
     toca solo el número del medio— para no cambiar la FORMA en que crece
     con el ancho de ventana, solo su magnitud: 90px→48px (3rem),
     13vw→7vw, 185px→100px (6,25rem). Repetida la misma medida con el
     valor nuevo (96,4px en vez de 166,4px a 1280px de ancho):

       home            golden_circle      585px      96,4px    0,16
       home            texto               207px      96,4px    0,47
       /personal       filtro              327px      96,4px    0,29
       /aviso-legal    texto (la corta)     146px      96,4px    0,66

     La peor proporción pasa de 1,14 a 0,66: sigue siendo la sección que
     menos margen tiene (es la más corta de las tres páginas medidas), pero
     ya no supera a su propio contenido en ninguna. Las otras dos páginas
     bajan de 0,28-0,80 a 0,16-0,47, un aire con más peso relativo al
     contenido y menos a la vista.

     No se toca `--aire-banda` (el aire DENTRO de una banda de color): el
     coach no lo señaló y las bandas de esta web siguen las más largas —
     `principios`, `bifurcacion` — donde el aire de sobra no se notaba en
     la misma medida. Si algún día se ve igual de vacío, es la misma cuenta,
     no una intuición nueva. */
  --aire:clamp(1.5rem,3vw,2.5rem);
  /* El aire DENTRO de una banda de color, ahora también más grande y variable
     con el ancho — el prototipo usa `clamp(88px,10vw,150px)` en `.principles`,
     la banda oscura más parecida a lo que este cambio construye (ver
     `principios` en `pagina.html`). 88px=5.5rem, 150px=9.375rem. */
  --aire-banda:clamp(2.5rem,5vw,4rem);
  /* DM Sans para el cuerpo, Newsreader para los titulares, las dos
     autoalojadas (ver «Tipografías», arriba). Sin reserva metricocompatible:
     el motivo está en ese mismo bloque. */
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:Gelasio,Georgia,"Times New Roman",Times,serif;
  /* Los rótulos diminutos en mayúsculas (`.progreso`, `.rotulo`, cabeceras de
     tabla…): Manrope, con mucho tracking. No existía como variable propia
     hasta esta piel porque hasta ahora esos rótulos usaban `--sans` con más
     peso y más tracking; el prototipo les da su propia tipografía. */
  --micro:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* Las dos divisiones oscuras siguen siendo variantes de `--banda`, ahora
   dentro de la familia `--ink`/`--ink-2` en vez de la familia navy: sucesión
   tira a un verde más teal, executive a un verde más cálido. Medido, los
   mismos cinco tonos de la tabla de «Los tonos de banda» sobre cada una:
   sucesión 13,96 · 10,83 · 8,80 · 6,88:1; executive 14,53 · 11,27 · 9,16 ·
   7,16:1 (tinta, suave, tenue, enlace — ver esa tabla para el porqué de cada
   columna). Las dos por encima del 4,5:1 de la casa con margen de sobra. */
/* Issue #87: las dos variantes por división (`#132420` teal, `#1a1f14`
   cálido) eran negros que se distinguían a duras penas entre sí. Con bandas
   verde y granate, el color ya no dice la división (lo dice el rótulo y la
   barra), así que las tres divisiones comparten los dos colores de `:root`. */


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Columna de altura completa para que el pie oscuro se quede abajo del todo.
   Sin esto, en las páginas cortas (error 404, gracias) quedaba una franja de
   papel por debajo del pie y parecía que la página estaba a medio cargar. */
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
     color:var(--tinta);background:var(--fondo);
     font:300 18px/1.7 var(--sans);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{flex:1 0 auto}

/* ── El grano (issue #68) ───────────────────────────────────────────────────
   `.noise` del prototipo: una capa de ruido finísimo fija sobre toda la
   página, el mismo SVG en línea (turbulencia fractal) que ya trae el
   prototipo — no hace falta generar uno nuevo. `_base.html` la pinta como
   `<div class="grano" aria-hidden="true">` justo tras abrir `<body>`, en las
   22 páginas.

   `mix-blend-mode:multiply` OSCURECE lo que hay debajo, así que la opacidad
   se queda muy baja a propósito. La cota, hecha con la fórmula (no medida en
   un navegador — eso lo hace `validador`): el peor texel posible del ruido es
   negro puro, y con `multiply` a opacidad `.055` eso oscurece cualquier color
   de debajo un máximo del 5,5 % (`resultado = original·(1-0,055) +
   original·0·0,055 = original·0,945`). El contraste WCAG suma una constante
   de 0,05 a cada luminancia antes de dividir, así que oscurecer las DOS
   luminancias de un par (letra y fondo) por el MISMO factor <1 mueve el
   cociente hacia 1 — nunca lo aleja de 1 — y tanto menos cuanto más alta es
   la luminancia de partida. El par más ajustado que mide esta hoja hoy es
   4,59:1 (`pizarra`, columna «enlace» de «Los tonos de banda»): con el
   5,5 % de oscurecimiento en el peor caso, sigue por encima del mínimo de
   4,5:1 de la casa. Si algún día se sube la opacidad, hay que repetir esta
   cuenta antes de tocar el número. */
.grano{position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.055;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
/* En papel no hay ratón que pase por encima ni pantalla que retroiluminar: una
   capa `position:fixed` que oscurece el 5,5 % de CADA página impresa no aporta
   nada y sí puede oscurecer un poco más una impresora que ya imprime clara.
   El apagado va en el ÚNICO `@media print` de esta hoja, al final del
   fichero — un segundo bloque `@media print` aquí habría roto los tests que
   buscan "el primer `@media print`" para comprobar qué se oculta al
   imprimir (reproducido: `TestBarraDeDivisiones.test_la_barra_no_se_imprime`
   encontraba este `display:none` en vez del suyo). */

/* ── Entrada suave al bajar: retirada (issue #120) ───────────────────────
   Aquí vivía `.entra-preparada` (issue #68): cada sección se desvanecía y
   subía al entrar en pantalla. El coach quiere la web sobria, sin efectos de
   plantilla, y en una captura de página entera dejaba siete secciones en
   blanco. Se quitó entera, con su script de `_base.html`. */

/* Los pesos van escritos y no heredados, por lo mismo que ya valía con
   Georgia/Gelasio: dos tipografías con ejes de peso distintos no pueden
   heredar un número y esperar el mismo resultado en las dos.

   El peso baja de 400/700 a 300 en casi todo: es la piel del prototipo,
   "tipografía grande, mucho blanco" llevado más lejos — Newsreader a 300 es
   más ligero que la Georgia regular de antes, no solo más grande. `h3` se
   queda en 400 y NO baja a 300 como los otros dos: baja de tamaño de golpe
   (grep hecho antes de tocarlo) a un cuerpo de tarjeta y sección pequeña sin
   que ninguna plantilla lo pida más grande, y a ese tamaño un peso de 300
   se leía apagado, casi gris. Si algún día se quiere un `h3` tan grande y
   ligero como el resto, es una pasada aparte por cada sitio que lo usa —
   `.entrada h3`, y cualquier otro que no se haya visto en esta pasada—, no
   un cambio de número aquí.

   Letter-spacing y line-height sí que cambian de verdad: el prototipo pide
   titulares MUY juntos (`-.055em` en el más grande) y MUY apretados de
   interlineado (`.88`), que es justo lo que los hace parecer caros. Con el
   `-.015em`/`1.12` de antes los títulos se seguían leyendo como los de
   siempre con una tipografía distinta encima; con los números nuevos se
   parecen al prototipo. */
h1,h2,h3{font-family:var(--serif)}
h1{font-weight:400;font-size:clamp(2.4rem,6.3vw,6.4rem);line-height:.88;
   letter-spacing:-.045em;margin:0 0 1.3rem}
/* Issue #86 («estos títulos son muy grandes»): el título de sección pasa de
   clamp(2rem,4.2vw,3.7rem) —60,5 px a 1440 px, casi lo mismo que el titular
   de página de la #79 (61,9)— a clamp(1.7rem,2.9vw,2.7rem): 41,8 px a 1440 px,
   27,2 px a 390 px. El titular de página sigue ~1,5 veces por encima. */
h2{font-weight:400;font-size:clamp(1.7rem,2.9vw,2.7rem);line-height:1.05;
   letter-spacing:-.025em;margin:0 0 1.2rem}
h3{font-weight:400;font-size:1.2rem;line-height:1.3;letter-spacing:-.008em;
   margin:0 0 .5rem}
/* ── Título en granate, no en negro (issue #72) ────────────────────────────
   Solo la WEB PÚBLICA: `main.lienzo` es el envoltorio que solo pintan las
   páginas de `publico/templates/` (`_base.html`); las cuatro plantillas de
   cliente del Taller que también cargan esta hoja (`cliente_instrumento`,
   `cliente_documento`, `cliente_error`, `cliente_area`) usan un `<main
   style="…">` sin esa clase, así que este bloque no las alcanza — no hace
   falta tocar ninguna plantilla para separarlas.

   El criterio es el color del FONDO, no la clase: fondo claro → granate,
   fondo oscuro → como estaba. Un titular hoy resuelve a uno de tres colores:
   `--tinta` (el papel de siempre, o una tarjeta con su propio papel),
   `--tono-tinta` de una `.portada`/`.banda` OSCURA (el tono de división, o
   `tono-profunda`/`tono-pizarra`/`tono-acento`), o `--tono-tinta` de
   `.tono-clara` (#e9e3d8 — SÍ es fondo claro, aunque llegue por el mismo
   mecanismo `banda:`).

   (Corregido tras la #72: la primera versión de este bloque metía
   `.tono-clara` en el mismo saco que las bandas oscuras por describirlas a
   las dos como «`.portada`/`.banda`», y sus títulos —«Qué es, en concreto»
   en `/executive`, entre otros— se quedaban negros sobre claro, justo lo que
   el coach pidió quitar. El criterio correcto siempre fue el color
   resultante, no la clase que lo trae.)

   ── ESPECIFICIDAD, revisado por el `revisor` (issue #72) ──────────────────
   La REGLA POR DEFECTO va envuelta en `:where()` —que siempre cuenta 0 de
   especificidad, aunque adentro haya clases y etiquetas— A PROPÓSITO: sin
   eso, `main.lienzo h1,h2,h3` pesaba (0,1,2) y le ganaba a CUALQUIER regla
   de esta hoja que ya pintara un `color` propio sobre un `h1/h2/h3` con
   menos de dos clases delante — por ejemplo `.filtro h2{color:var(--tenue)}`
   (0,1,1): el título de "no es para ti" salía en granate en vez de gris, y
   se perdía el contraste con `.filtro .si h2{color:var(--acento)}` que SÍ
   pesa más (0,2,1) y ya ganaba sin ayuda. Con `:where()` la regla por
   defecto pesa 0: pierde automáticamente contra CUALQUIER regla de esta hoja
   que ya diera color a un titular, la tenga escrita antes o después en el
   fichero, sin tener que enumerarlas. Las otras tres reglas del bloque
   (bandas, tono-clara, `.rama`) SÍ necesitan su especificidad real —son
   ellas las que tienen que ganarle a la de por defecto— así que no llevan
   `:where()`.

   Comprobado que las otras dos reglas de este bloque siguen intactas:
   `main.lienzo .banda h2` pesa (0,2,2) y `main.lienzo .banda.tono-clara h2`
   (0,3,2) — las dos por encima de 0, así que ganan a la nueva regla por
   defecto exactamente igual que antes de este cambio; entre ellas dos no
   cambia nada, ya se decidían por especificidad (3 > 2).

   Sigue sin resolverse, y a propósito, el caso de una tarjeta con papel
   propio (`.celda`, `.entrada`…) colgando de una banda OSCURA que no sea
   `.tono-clara`: hoy ningún bloque real las combina (comprobado en el
   contenido YAML de `metodo web`), así que no se ve, pero si el coach pone
   `banda: profunda` en un tipo de tarjetas algún día, su título saldría en
   `--tono-tinta` (claro sobre su propio papel claro) y no en granate hasta
   que se revise esto. */
:where(main.lienzo) :where(h1,h2,h3){color:var(--granate)}
main.lienzo .portada h1,main.lienzo .portada h2,main.lienzo .portada h3,
main.lienzo .banda h1,main.lienzo .banda h2,main.lienzo .banda h3{
  color:var(--tono-tinta)}
main.lienzo .portada.tono-clara h1,main.lienzo .portada.tono-clara h2,
main.lienzo .portada.tono-clara h3,main.lienzo .banda.tono-clara h1,
main.lienzo .banda.tono-clara h2,main.lienzo .banda.tono-clara h3{
  color:var(--granate)}
/* `.rama h2` (la fila de «Tres caminos» en la portada) no tenía NINGUNA
   regla de color propia: heredaba el de `.rama`, que en reposo es el de
   siempre y al pasar el ratón o llevar el foco pasa a blanco (#fff desde la
   #131; antes `--fondo`) porque `.rama::before` sube un relleno oscuro por debajo —
   ver «Bifurcación», más abajo, para los cuatro contrastes de esa pareja.
   La regla por defecto de arriba, aunque pese 0, SÍ es una declaración
   directa sobre `h2` — y una declaración directa siempre le gana a un color
   HEREDADO del padre, pese lo que pese —, así que sin esta reactivación el
   título se quedaba en granate también con el ratón encima: `#6d1f2b` sobre
   el relleno `--tinta` (#0c1412) da 1,67:1, casi invisible — el mismo
   problema que el granate sobre una banda oscura, medido en la cabecera de
   este fichero. En reposo no hace falta tocar nada: ahí SÍ vale que `.rama
   h2` herede de la regla por defecto (granate sobre el papel de siempre).

   Con `main.lienzo .bifurcacion` delante, y no `.rama:hover h2` a secas
   (revisión de la #72): la `bifurcacion` puede llevar `banda:` —el esquema
   lo permite en cualquier bloque menos `portada`—, y entonces las reglas de
   banda de arriba, (0,2,2) y con `tono-clara` (0,3,2), le ganaban a un
   `.rama:hover h2` de (0,2,1). Con `banda: clara`, el título se quedaba en
   granate sobre el relleno oscuro: el mismo 1,67:1. Así pesa (0,4,2) y gana
   a las dos. Hoy ningún YAML le pone banda a una `bifurcacion`: esto es para
   el día que alguien lo haga. */
main.lienzo .bifurcacion .rama:hover h2,
main.lienzo .bifurcacion .rama:has(:focus-visible) h2{color:#fff}
p{margin:0 0 1.1rem}
strong{font-weight:600}
a{color:inherit}
main a{color:var(--acento);text-decoration-thickness:1px;text-underline-offset:.18em}
/* La entradilla también se usa fuera de una portada: las páginas de cliente del
   Taller la ponen suelta bajo el h1. Si solo existiera `.portada .entradilla`,
   allí se quedaría como un párrafo cualquiera. */
.entradilla{font-size:1.3rem;line-height:1.6;color:var(--suave);max-width:var(--medida)}

/* ── Rejilla a sangre ───────────────────────────────────────────────────────
   Tres columnas: margen · ancho de lectura · margen. Todo cae en la del medio;
   solo la portada pide `1/-1`. Los márgenes entre hermanos NO se funden dentro
   de una rejilla, así que el ritmo se lleva con `* + *` y no con márgenes
   sueltos: si se mezclan las dos cosas, los huecos se suman y se descuadra. */
main.lienzo{display:grid;grid-template-columns:1fr min(var(--ancho),100% - 3rem) 1fr;
            padding:0 0 var(--aire)}
main.lienzo>*{grid-column:2;margin:0}
/* El aire grande es entre SECCIONES. Dos párrafos sueltos seguidos (los avisos
   de la agenda, la coletilla de la página de error) llevan el hueco corto: con
   el grande parecían dos páginas distintas pegadas. */
main.lienzo>*+*{margin-top:1.75rem}
/* `section` YA NO lleva aquí (issue #68): desde que cada `<section>` tiene su
   propio `padding` de arriba y abajo (ver más abajo, «El aire DENTRO de cada
   sección»), sumarle TAMBIÉN este margen de `var(--aire)` habría contado el
   hueco dos veces —el `padding-bottom` de la sección anterior, este margen, Y
   el `padding-top` de la siguiente— y el hueco entre dos secciones se
   disparaba a más de 20rem. `h2` y `blockquote` no tienen padding propio, así
   que a esos dos sí les hace falta el margen grande completo. */
main.lienzo>*+h2,main.lienzo>*+blockquote{margin-top:var(--aire)}
main.lienzo>*+form{margin-top:3rem}
main.lienzo>*+.cta{margin-top:2.75rem}
/* ── El aire DENTRO de cada sección (issue #68) ────────────────────────────
   El prototipo separa sus secciones con su propio `padding` de arriba y de
   abajo, no con el margen entre hermanos que llevaba esta hoja: medido con
   `getComputedStyle`, `.golden-circle`, `.manifiesto`, `.bifurcacion` y los
   `.texto` de la home daban 0px de `padding-top`/`padding-bottom` antes de
   este cambio, y con eso la página se leía pegada, como un documento.

   Se excluye `.portada` (ya tiene su propio `padding` calibrado, distinto
   arriba y abajo y con su propio modo a sangre) y `.bifurcacion` (su título
   vive FUERA de la `<section>`, como hijo directo de `main.lienzo` —ver
   `main.lienzo>h2+.bifurcacion` arriba—, así que meterle el mismo aire por
   ARRIBA separaría el título de sus filas en vez de separar la bifurcación
   entera de lo anterior; se le da el aire completo solo por abajo). */
main.lienzo>section:not(.portada):not(.bifurcacion){padding:var(--aire) 0;margin-top:0}
main.lienzo>.bifurcacion{padding:0 0 var(--aire)}
/* `.banda` entra en la lista de excepciones por lo mismo que `.portada`: una
   banda de color a sangre empieza pegada arriba, no a tres rem y medio del
   final de la cabecera. Se añade al `:not()` en vez de pelearlo con otra regla
   por la lección que cuenta el comentario de aquí abajo. */
main.lienzo>*:first-child:not(.portada):not(.aviso-borrador):not(.banda){margin-top:3.5rem}
/* El aviso de borrador va pegado arriba: es una etiqueta, no una sección. Se
   excluye del `:first-child` de arriba en lugar de pelearle con otra regla: el
   aviso SIEMPRE es el primer hijo (`pagina.html` lo pinta antes del bucle), y
   `main.lienzo>.aviso-borrador` a secas perdía por especificidad (0,2,1 contra
   0,3,1). La regla existía, el comentario la contaba y el navegador calculaba
   3,5rem igual. */
main.lienzo>.aviso-borrador{margin-top:1.5rem}
main.lienzo>*+.portada{margin-top:1.5rem}
/* El título de una bifurcación vive fuera de su `section`: sin esto quedaban
   a cinco rem el uno del otro y no parecían la misma cosa. */
main.lienzo>h2+.bifurcacion,main.lienzo>.subtitulo+.bifurcacion{margin-top:1.5rem}
/* Una banda de color se separa de lo de arriba con el aire de siempre —el
   cambio de color no sustituye al hueco, si no hay hueco parece que la sección
   anterior se ha caído dentro—, PERO dos bandas seguidas van a tope, y una
   banda debajo de la portada también: ahí el filo entre dos colores ES la
   separación, y es lo que da el ritmo alterno de la referencia.
   Hace falta decirlo explícitamente porque el envoltorio de una banda es un
   `div` y no un `section`: `main.lienzo>*+section` no lo alcanza. */
main.lienzo>*+.banda{margin-top:var(--aire)}
main.lienzo>.portada+.banda,main.lienzo>.banda+.banda{margin-top:0}

/* `main` pelado (páginas de cliente del Taller): como siempre.
   Comprobado en la #38 al subir `--ancho` a 72rem: las cuatro páginas de
   cliente fijan `max-width:44rem` en el `style=` de su propio `<main>`, así que
   esta regla es solo la red de abajo y hoy no la usa nadie. Si algún día una
   página de cliente quita ese `style=`, aparecerá a 72rem de ancho. */
main:not(.lienzo){max-width:var(--ancho);margin:0 auto;padding:3rem 1.5rem 5rem}

/* ── Barra de divisiones (issue #33) ───────────────────────────────────────
   Los tres públicos, siempre visibles, encima del logo — como en
   el prototipo. Fondo oscuro y no el papel de la cabecera, a propósito: si
   llevara el mismo papel que la cabecera, las dos barras se leerían como una
   sola con dos filas de enlaces y no como "esto de arriba son tus tres
   caminos, esto de abajo es esta página". El color y el contraste son los
   mismos del pie (`--pie` de fondo, `#cdd6cc` de texto), que ya están medidos
   ahí: no se inventa una pareja nueva. */
.barra-divisiones{background:var(--barra)}
.barra-divisiones-interior{display:flex;gap:1.6rem;flex-wrap:wrap;
  max-width:calc(var(--ancho) + 3rem);margin:0 auto;padding:.55rem 1.5rem}
.barra-divisiones a{font:500 .8rem var(--sans);letter-spacing:.02em;
  color:#cdd6cc;text-decoration:none}
.barra-divisiones a:hover,.barra-divisiones a[aria-current]{color:var(--acento-claro)}
/* Issue #57: a 390px "Arketip Personal · Arketip Executive · Arketip Sucesión"
   no cabía en una línea y envolvía a dos. En la referencia (simonsinek.com)
   esa tira son tres etiquetas cortas ("For You"…) y por eso le cabe. Decisión
   del coach: en móvil se quita el "Arketip" repetido — ya está en el logo de
   al lado — y se enseña solo "Personal · Executive · Sucesión". El nombre
   completo sigue por defecto; el corto se enseña solo bajo 640px, junto al
   resto de ajustes de esa anchura (ver el `@media` de más abajo). */
.barra-divisiones .nombre-corto{display:none}
/* El anillo por defecto es `--acento` (el verde oscuro): invisible sobre este mismo verde.
   Mismo arreglo que ya lleva el pie, `.pie-sitio a:focus-visible`, más abajo. */
.barra-divisiones a:focus-visible{outline-color:var(--acento-claro)}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.cabecera{border-bottom:1px solid var(--linea);background:var(--fondo)}
.cabecera-interior{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
  max-width:calc(var(--ancho) + 3rem);margin:0 auto;padding:1.15rem 1.5rem}
/* El logotipo pasa de Georgia en negrita a Manrope (`--micro`), que es lo que
   el prototipo usa para su propio "ARKETIP" de cabecera — un rótulo en
   mayúsculas con mucho tracking, no un titular. Newsreader tampoco tiene
   peso 700 cargado (esta piel solo trae 300-500, ver «Tipografías»), así
   que quedarse en `--serif` habría forzado una negrita sintética. */
.marca{font:600 .95rem/1 var(--micro);letter-spacing:.22em;
       text-decoration:none;color:var(--tinta);white-space:nowrap}
.marca span{color:var(--acento);text-transform:uppercase}
/* Issue #53: la etiqueta de división ya no es un `span` dentro de `.marca`
   (ese enlace ahora va SOLO a la raíz) sino su propio `<a>` a la portada de la
   división, así que necesita su propia declaración de fuente — antes la
   heredaba del `.marca` que la envolvía. */
.marca-division{font:600 .95rem/1 var(--micro);letter-spacing:.22em;
       text-decoration:none;color:var(--acento);text-transform:uppercase;
       white-space:nowrap}
.cabecera nav{display:flex;gap:1.6rem;flex:1;flex-wrap:wrap}
.cabecera nav a{font:400 .88rem var(--sans);color:var(--suave);text-decoration:none}
.cabecera nav a:hover{color:var(--tinta)}
/* Aquí vivía `.cta-barra`, el botón de la derecha de la cabecera («Conoce
   Arketip», luego «Contacto»). La #113 quitó el primero y la #119 el
   segundo: la cabecera ya no tiene botón y sus reglas se han borrado de toda
   la hoja. «Contacto» vive ahora en el pie. */
/* «Contáctame», el último enlace del menú (issue #133). El coach: «que en el
   menú principal salga un Contáctame a la derecha». Es un enlace del menú,
   no un botón: sin relleno, sin borde, sin naranja ni flecha, porque desde
   la #118 la web no quiere parecer una landing.

   `margin-left:auto` lo empuja al borde derecho: el `nav` ya ocupa todo el
   sitio que deja la marca (`flex:1`), así que el margen libre se queda
   entre el último enlace del menú y este. En el móvil el `nav` baja a su
   propia fila (`flex-basis:100%`, en el `@media` de 640px) y el mismo
   margen lo deja al final de esa fila, a la derecha.

   El peso que lleva, y nada más: la letra en `--tinta` (14,79:1 sobre
   `--fondo`) en vez del `--suave` del resto (6,91:1), y un punto más de
   grosor (500 frente a 400). Se distingue sin gritar. Al pasar el ratón se
   subraya, porque el oscurecido que hacen los demás ya lo tiene puesto.

   Sobre la cabecera transparente (`body.con-portada-completa`) estas dos
   líneas pierden: aquellas reglas pesan más y pintan TODO `.cabecera nav a`
   del mismo color (`--papel`, o `--suave` en el `@media` de 56,25em), así
   que este enlace sigue al resto en cada modo sin una regla propia. */
.cabecera nav a.nav-contacto{margin-left:auto;font-weight:500;color:var(--tinta)}
.cabecera nav a.nav-contacto:hover{text-decoration:underline;text-underline-offset:.4em}
/* Issue #150: el coach, en nota de voz: el «Contáctame» de arriba a la
   derecha, «con el mismo formato que los demás». Pasa de enlace a botón: el
   mismo blanco con letra y borde verdes. `html.web-publica body` delante para
   ganarle a la cabecera transparente (`body.con-portada-completa …`, 0,3,3),
   que pinta todos los enlaces del menú del mismo color. */
html.web-publica body .cabecera nav a.nav-contacto,
html.web-publica body .cabecera nav a.nav-contacto[aria-current="page"]{
  background:#fff;color:var(--acento-papel);border:1px solid var(--acento-papel);
  border-radius:999px;padding:.5rem 1.2rem;font-weight:600;text-decoration:none;
  transition:background .2s,color .2s}
html.web-publica body .cabecera nav a.nav-contacto:hover{background:var(--acento-papel);
  color:#fff;text-decoration:none}
/* «Sobre Alejandro», aparte del submenú (issue #136). El coach: «tendría que
   diferenciarse un poco de los demás ítems del submenú. Porque no son lo
   mismo». `_base.html` pone `nav-aparte` en la primera entrada global que
   llega detrás de otra cosa: en un sistema, detrás de su submenú; en las
   globales, detrás de los tres sistemas.

   Un filete vertical de 1 px delante, el mismo gesto que ya separa la marca
   de la división (`.marca-division-pila`), y nada más: misma letra, mismo
   color, mismo peso que el resto del menú. Sigue siendo un enlace, no un
   botón. Así la cabecera se lee en tres grupos —el submenú, Sobre Alejandro
   y, al fondo a la derecha, «Contáctame»— sin que ninguno grite.

   El relleno izquierdo es el mismo `gap` del `nav` (1,6 rem; 1,1 rem en el
   móvil, abajo): el filete queda centrado entre las dos entradas. El color es
   `currentColor`, el `--suave` del texto (6,91:1 sobre `--fondo`; un filete
   pide 3:1). Se probó `--linea` (#d2c7b3, el de los filetes de la hoja) y da
   1,32:1: no se ve. Por ser `currentColor`, el filete sigue al texto en la
   cabecera transparente sin regla propia, igual que «Contáctame». */
.cabecera nav a.nav-aparte{padding-left:1.6rem;border-left:1px solid currentColor}

/* ── Barra transparente sobre la portada a pantalla completa (issue #68) ───
   `.topbar`/`.topbar.scrolled` del prototipo. SOLO cuando `body` lleva
   `con-portada-completa` —la señal que calcula `pagina.html` y por defecto
   vale `False`, ver `_base.html`—: las otras 21 páginas públicas y las 4
   pantallas de cliente del Taller (que ni siquiera cargan esta cabecera, ver
   `cliente_area.html`) no cambian ni un píxel.

   `.cabecera-fija` envuelve `.barra-divisiones` y `.cabecera` (ver
   `_base.html`) para que las dos se vuelvan `position:fixed` como una sola
   pieza, y la portada pase de tener el hueco de las dos barras EMPUJADO
   delante (como hoy) a tenerlo SUPERPUESTO — la portada ya reservaba
   `padding-top:9rem` para esto desde la #67.

   ── Revisión: medido de verdad, elemento a elemento (issue #68) ───────────
   La primera versión de esta regla razonó "blanco sobre el degradado da
   7,18:1" y se quedó ahí — pero la marca y el botón NO estaban en blanco:
   seguían en `var(--tinta)` (el color de texto sobre papel) porque el
   `color` que se les puso, `var(--white)`, es una variable QUE NO EXISTE en
   esta hoja (el nombre del prototipo; el de esta casa es `--papel`). Una
   `var()` que apunta a nada no falla: el navegador la trata como inválida y
   el `color` hereda el de más arriba, que resuelve en `--tinta`. Medido con
   `getComputedStyle` en `:8080` tras el primer intento: 1,02:1 — la marca y
   "Contacto" invisibles sobre la portada. La misma cicatriz que la #38 (484
   tests en verde con un título blanco sobre papel blanco), con un matiz:
   aquí ni siquiera hacía falta abrir el navegador para MEDIR el color, solo
   para darse cuenta de que `--white` no está en el `:root` de esta hoja.

   Repintado ahora CADA elemento que vive dentro de `.cabecera-fija`, uno a
   uno, con las variables que SÍ existen — y el fondo deja de ser un
   degradado (dos alfas distintos, dos contrastes distintos que medir) y
   pasa a ser un plano único: más fácil de medir y de fijar con un test.

     fondo, siempre (sin JavaScript): rgba(12,20,18,.74)

   (Cifras de antes de la #87: la cabecera oscura está apagada desde la #85 y
   no se ha vuelto a medir con el crema nuevo #ece4d6.)
   Medido contra el peor caso real — compuesto sobre `--fondo` (#f2eee7), lo
   que hay detrás en cuanto se termina de bajar la portada; sobre la propia
   foto oscura el contraste es mayor, no menor —:

     texto en `--papel` (marca, "Sobre Alejandro",
       "Contacto" sin pasar el ratón)                        8,25:1
     el filete de `--acento-claro` (SOLO el borde del botón,
       que es interfaz y no texto — el mínimo que le pide
       esta casa es 3:1, no 4,5:1)                           3,77:1
     "Contacto" con el ratón encima (`--tinta` sobre
       `--fondo`, la pareja que ya mide la cabecera de esta
       hoja para toda la web pública)                       16,15:1

   `--acento-claro` NO se usa para texto en este contexto — sí lo usaba la
   primera versión ("Sobre Alejandro" en `rgba(255,255,255,.78)`, otro valor
   sin medir) — porque contra este mismo fondo da 3,28:1: pasa el mínimo de
   interfaz, no el de texto. Se deja solo en el borde del botón, donde el
   mínimo es 3:1; el anillo de foco ya no lo necesita, ver más abajo.

   `test_ux_publico.py` (`TestBarraTransparenteSobreLaPortada`) fija dos
   cosas para que esto no se repita una cuarta vez: que ninguna `var()` de
   esta regla apunte a un nombre que no está declarado en `:root`, y que
   ningún elemento de `.cabecera-fija` en modo transparente se quede en
   `--tinta`/`--suave`/`--acento` — los tres tokens pensados para texto SOBRE
   PAPEL, no sobre este fondo oscuro. */
body.con-portada-completa .cabecera-fija{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(12,20,18,.74);
  transition:background .35s,backdrop-filter .35s}
/* Las dos barras dejan de pintar su propio fondo: el de `.cabecera-fija` es
   el único, para que las dos se lean como una sola pieza y no como dos
   franjas de color distinto superpuestas. */
body.con-portada-completa .cabecera-fija .barra-divisiones,
body.con-portada-completa .cabecera-fija .cabecera{
  background:transparent;border-bottom-color:transparent}
/* Cada elemento con texto dentro de `.cabecera-fija`, nombrado uno a uno —
   no "todo lo que no sea `.barra-divisiones a`", que es como se coló el
   fallo de arriba: `.marca-division` no se nombraba y se habría quedado en
   `--acento` (invisible) el día que una portada a sangre tenga división. */
body.con-portada-completa .cabecera-fija .marca,
body.con-portada-completa .cabecera-fija .marca-division,
body.con-portada-completa .cabecera-fija .marca-division-pila,
body.con-portada-completa .cabecera-fija .marca-volver,
body.con-portada-completa .cabecera-fija .cabecera nav a,
body.con-portada-completa .cabecera-fija .cabecera nav a:hover{color:var(--papel)}
/* El anillo de foco por defecto (`var(--acento)`, un verde oscuro) es
   invisible sobre este fondo oscuro — el mismo problema que ya arreglan
   `.barra-divisiones a:focus-visible` y `.pie-sitio a:focus-visible` con un
   color fijo. Aquí no hace falta uno: `currentColor` toma el `color` que YA
   tiene el enlace en cada modo —`--papel` en el transparente, `--tinta` en
   el de 390px (más abajo)— así que el anillo es SIEMPRE del mismo tono que
   su propio texto y no hay que repetir el arreglo en el `@media` de 390px
   ni tocar `outline` dentro de él (el test de foco de la suite no entiende
   `@media` y se planta si un `outline` aparece dentro de uno). */
body.con-portada-completa .cabecera-fija a:focus-visible{outline-color:currentColor}
/* El añadido de JavaScript: casi sólida y con desenfoque al perder de vista
   la portada. `backdrop-filter` es progresivo — donde el navegador no lo
   soporta, se queda con el fondo de arriba, que ya es legible por su
   cuenta. Más opaco que el de siempre (nunca baja de .74), así que el
   contraste solo mejora, nunca empeora. */
.cabecera-fija-oscura{background:rgba(12,20,18,.9)!important;
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:56.25em){
  /* A este ancho la portada a pantalla completa ya se apaga (el `@media` de
     `.portada.a-sangre`, más abajo): sin una portada oscura debajo, una
     barra fija y transparente se leería sobre el papel claro del resto de
     la página desde el primer píxel. Se vuelve a la barra sólida de
     siempre. */
  body.con-portada-completa .cabecera-fija{position:static;background:none}
  body.con-portada-completa .cabecera-fija .barra-divisiones{background:var(--barra)}
  body.con-portada-completa .cabecera-fija .cabecera{
    background:var(--fondo);border-bottom-color:var(--linea)}
  body.con-portada-completa .cabecera-fija .marca{color:var(--tinta)}
  body.con-portada-completa .cabecera-fija .marca-division,
  body.con-portada-completa .cabecera-fija .marca-division-pila{color:var(--acento)}
  body.con-portada-completa .cabecera-fija .cabecera nav a,
  body.con-portada-completa .cabecera-fija .marca-volver{color:var(--suave)}
}

/* ── Portada y bandas de sección, a sangre ────────────────────────────────
   `main.lienzo>.portada` y no `.portada` a secas: `main.lienzo>*` ya fija la
   columna 2 y gana por especificidad. Con el selector corto la banda se quedaba
   encerrada en el ancho de lectura y parecía un recuadro.

   La portada y una banda de sección son la MISMA pieza con distinto relleno:
   una franja de color que ocupa el ancho de la pantalla y centra su contenido
   en la columna de siempre. Comparten la máquina a propósito — mantener dos
   copias de la rejilla a sangre es la forma más rápida de que una se arregle y
   la otra no. Lo único que las distingue es cuánto respiran por dentro. */
main.lienzo>.portada,main.lienzo>.banda{grid-column:1/-1}
.portada,.banda{background:var(--tono);color:var(--tono-tinta);
  display:grid;grid-template-columns:1fr min(var(--ancho),100% - 3rem) 1fr}
.portada>*,.banda>*{grid-column:2;margin:0}
/* El ritmo DENTRO de una banda. La línea de arriba (0,1,0) le gana al
   `margin:0 0 1.2rem` de `h2` (0,0,1), así que un bloque con dos hijos
   directos los pegaba uno contra otro. Hoy el único es `bifurcacion`, que es
   el único tipo que saca su `<h2>` fuera de su `<section>`: con banda, el
   título quedaba tocando las tarjetas (revisión de la #38).
   1,5rem es el mismo hueco que ya usa `main.lienzo>h2+.bifurcacion` cuando ese
   título no va sobre color. La portada se lo pone a mano
   (`.portada .entradilla{margin:1.6rem 0 0}`, revisión de la #34: el
   `margin-top` suelto que había aquí escrito dependía de un reseteo de otra
   regla para los demás lados, y esa regla dejó de alcanzarla) y la maquinaria
   compartida se había quedado sin el equivalente; esto lo cubre para
   cualquier bloque que algún día saque dos hijos. */
.banda>*+*{margin-top:1.5rem}
.portada{padding:5.5rem 0 5.84rem}
/* ── Cabeceras sin foto, más pequeñas (issue #79) ──────────────────────────
   El coach, con una captura de `/personal/beneficios`: «Los títulos estos
   son MUY GRANDES. NO encajan con el resto» — y después, para las 18
   páginas con cabecera sin foto: «Cámbialo».

   Medido antes de tocar nada: el `h1` de esta hoja es GLOBAL
   (`h1{font-size:clamp(2.4rem,6.3vw,6.4rem)}`, línea ~364) y no solo lo
   heredan las 18 páginas sin foto: también home, Personal, Executive y
   "Sobre Alejandro" (`.portada.a-sangre`, con SU PROPIA reducción por
   altura de ventana, issue #67, pero SIN una propia por ANCHO — a ventana
   ancha y alta sigue cayendo en el `clamp` genérico), y los `h1` de las
   cuatro plantillas de cliente del Taller que cargan esta misma hoja
   (`cliente_instrumento`, `cliente_documento`, `cliente_error`,
   `cliente_area`; ver el comentario de "Título en granate", línea ~370),
   que ni siquiera son de este carril. Cambiar ese `h1{}` de raíz habría
   movido también las páginas con foto —lo que la petición dice
   explícitamente que NO se toca— y esas cuatro del Taller sin que nadie lo
   pidiera.

   Por eso el tamaño nuevo va en un selector propio, `.portada:not(.a-
   sangre):not(.compacta) h1`, y el `h1{}` de la línea 364 no se toca. Con
   esto basta: `.reserva h1` (agenda), `.reserva-resultado h1` (confirmada)
   y `.portada.compacta h1` (gracias/baja/error/aplicar) ya tenían su propio
   tamaño, con más especificidad que el genérico — no heredaban el número
   grande y no cambian con esto.

   Antes/después, en las 18 páginas afectadas (`getComputedStyle`, sin
   `agent-browser` en esta sesión, así que son cálculo de la fórmula, no
   medida en pantalla):

     `h1`, 1440px de ancho:  90,72px (5,67rem) → 61,92px (3,87rem)
     `h1`, 1440px, pantalla ancha (>1625px, tope del `clamp`):
                             102,4px (6,4rem)  →  70,4px (4,4rem)
     `h1`, 390px de ancho:   38,4px  (2,4rem)  →  35,2px (2,2rem)
     `h2` más grande de la página (sin cambios), 1440px: 59,2px (3,7rem)
     `h2` más grande, 390px:                            32px   (2rem)

   El titular sigue siendo el más grande de la página en los dos anchos
   (antes 1,53-1,73 veces el `h2` más grande; ahora 1,05-1,19 veces —
   "misma familia", no el doble). El `line-height:.88` del genérico es MUY
   apretado (pensado para el titular grande de las portadas con foto); a
   este tamaño menor colisionaba entre líneas, así que aquí se sube a `.98`
   — el mismo que ya usa `h2`.

   El relleno baja en la misma proporción que el tope del `clamp`
   (4,4/6,4=0,6875), arriba y abajo y en el `@media` de móvil por igual, para
   que la franja no quede vacía con un título más pequeño:

     escritorio:  8rem/8,5rem   → 5,5rem/5,84rem
     móvil (línea ~2015): 5rem/5,5rem → 3,44rem/3,78rem */
.portada:not(.a-sangre):not(.compacta) h1{
  font-size:clamp(2.2rem,4.3vw,4.4rem);line-height:.98}
/* `margin:0` va EN ESTA regla y no en un reseteo genérico de hijos directos
   (revisión de la #34): hasta la foto, `h1` y `.entradilla` eran hijos
   DIRECTOS de `.portada`, y `.portada>*,.banda>*{margin:0}` de arriba los
   alcanzaba. Envolverlos en `.portada-cuerpo > .portada-texto` los convirtió
   en NIETOS — ese selector de hijo directo ya no llega, y `.entradilla`
   recuperaba el `margin:0 0 1.1rem` del `p` global sin que nada lo devolviera
   a cero. Como esta regla y la de abajo usan un selector DESCENDIENTE
   (`.portada h1`, sin `>`), da igual a qué profundidad esté `h1` colgado de
   `.portada`: sigue alcanzándolo, sea hijo directo o nieto. */
.portada h1{max-width:20ch;margin:0}
/* Mismo caso que arriba, y en una sola declaración: `margin:1.6rem 0 0` es el
   hueco de siempre por arriba y CERO por los otros tres lados, así que esta
   regla no depende de ningún reseteo previo — se basta sola, la lea el
   navegador desde donde la lea. */
.portada .entradilla{margin:1.6rem 0 0;font-size:1.3rem;line-height:1.6;
  color:var(--tono-suave);max-width:var(--medida)}
.portada .progreso{margin-bottom:.9rem}
.portada.compacta{padding:4.75rem 0 5.25rem}
.portada.compacta h1{font-size:clamp(1.65rem,3.6vw,2.3rem);max-width:26ch}
/* La foto de la portada (issue #34, contenido de la #50): el titular a la
   izquierda, la foto a la derecha, como en la referencia (simonsinek.com).

   `.portada-cuerpo` es el ÚNICO hijo de `.portada` ahora (antes eran `h1` y
   `.entradilla` sueltos): así `.portada>*{grid-column:2}` de arriba se sigue
   cumpliendo sin tocarlo, y una portada sin foto —todas menos la home— sale
   con `.portada-texto` como único elemento dentro, con el mismo ancho y el
   mismo aspecto que tenía antes de esta issue (el reseteo de márgenes de `h1`
   y `.entradilla` va aparte, en sus propias reglas, arriba).

   `flex-wrap` es lo que hace que "cuando no caben al lado, la foto va debajo":
   la foto va DESPUÉS del texto en el HTML, así que es ella la que baja, y el
   titular sigue siendo lo primero que se lee. No hace falta ningún `@media`.

   **Pero NO intentes saber dónde se parte sumando los `flex-basis`. Ahí es
   donde se equivocaron las tres primeras vueltas de esta issue, cada una con
   un número distinto (550px, 688px, 1064px).** Las dos piezas pueden encoger
   —`flex-shrink:1` y `min-width:0` en las dos—, así que el navegador no
   envuelve cuando la suma deja de caber: sigue estrechándolas, y solo parte
   cuando el texto toca el mínimo que le impone su propio contenido, la palabra
   más larga del titular. Eso no sale de ninguna cuenta.

   Por eso el comportamiento va MEDIDO en Chrome (16/09/2026), no deducido:

     ventana   foto   texto   disposición
      1440px   665     455    dos columnas   ← la foto, en su tope
       768px   356     332    dos columnas   ← tableta, como la referencia
       720px   304     336    dos columnas
       660px   259     321    dos columnas
       600px   552     552    apilada
       375px   327     327    apilada

   El corte está entre 600 y 660px de ventana. Y entre ~630 y 720px la foto
   baja de los 288px que el coach rechazó por pequeños: es una franja estrecha
   —una ventana de escritorio muy encogida— y se deja así a sabiendas, porque
   forzarla a apilar antes le quitaría las dos columnas a la tableta, que es un
   ancho que sí usa gente. Si alguna vez molesta, la salida es un `@media`
   explícito, no volver a mover estos números a ojo.

   **El `min-width:0` de la foto no es adorno.** Un `<img>` trae de fábrica
   `min-width:auto`, que vale su ancho intrínseco: sin anularlo la foto no
   encoge nunca, la fila tiene que caber entera con sus 665px dentro, y el
   corte se dispara a 1064px de ventana — medido en la tercera vuelta, donde
   una tableta en vertical se apilaba. La referencia (`simonsinek.com`, medida
   el 15/09/2026) no hace eso: a 768px mantiene sus dos columnas encogiendo la
   imagen a 328px. Con `min-width:0`, la nuestra hace lo mismo con 356px.

   La foto se lleva tres cuartas partes del ancho que sobre (`flex-grow:3`
   contra el `1` del texto), así que a 1440px llega a 665px frente a los 455
   del texto — más grande, de hecho, que los 576px (40%) de la referencia.

   Si cambias cualquiera de los tres valores de abajo, **vuelve a medir.** */
.portada-cuerpo{display:flex;flex-wrap:wrap;align-items:center;gap:2rem}
.portada-texto{flex:1 1 20rem;min-width:0}
/* La foto real mide 665×385, y ESE es el tope: hasta ahí el navegador la pinta
   a escala 1:1 o por debajo; por encima tendría que inventarse píxeles y se ve
   blanda. Es el único límite que quedó en pie de los tres avisos que se le
   dieron al coach cuando pidió la foto «mucho más grande», y no es terquedad:
   es el punto exacto donde la calidad se cae.

   **El tope va en `px`, no en `rem`, y esa es la gracia** (revisión de la #34):
   estaba escrito `41.5rem`, que son 664px solo mientras la raíz valga 16px. A
   quien tiene subido el tamaño de letra del navegador —una preferencia de
   accesibilidad, no el zoom— el `rem` crece, el tope crece con él y la foto se
   estiraba por encima de sus 665px reales: justo lo que este comentario promete
   que no pasa nunca. Un tope que iguala los píxeles de un fichero es una
   magnitud absoluta y se escribe como tal.

   El `min-width:0` anula el `min-width:auto` que un `<img>` trae de fábrica,
   para que la foto pueda encoger en vez de saltar de línea; el porqué está en
   el comentario de arriba. El `width`/`height` del `<img>` en la plantilla
   reservan su hueco antes de que cargue, para que el texto no salte. */
.portada-foto{flex:3 1 20rem;min-width:0;max-width:min(100%,665px);height:auto;
  border-radius:var(--radio);display:block}

/* ── Portada a pantalla completa (issue #67) ───────────────────────────────
   SOLO la portada que trae `imagen`+`imagen_alt` (`pagina.html` decide la
   clase `a-sangre`; hoy es la única con foto, la home). Las otras 21 páginas
   no llevan esta clase y no cambian ni un píxel: todas las reglas de aquí
   están bajo `.portada.a-sangre`, nunca bajo `.portada` a secas.

   El texto NUNCA se pinta sobre la foto sin garantía: `.portada-texto` mide
   como mucho 34rem (544px) y el hueco opaco de la izquierda mide 40rem
   (640px) — con margen de sobra en CUALQUIER ventana, porque los dos están
   escritos en unidades absolutas, no en `%` del viewport. Con `%` el hueco
   opaco se hace más estrecho cuantas más caben en una ventana pequeña, justo
   cuando el texto necesita MÁS sitio, no menos — la referencia (prototipo)
   sí usa `%` y por eso este cambio no lo copia literal. Con `rem` el hueco
   es siempre 640px, y el texto siempre cabe dentro, así que el contraste ya
   medido de `--tono-tinta`/`--tono-suave` sobre `--tono` (la tabla de «Los
   tonos de banda») sigue valiendo sin medir nada nuevo: detrás del texto
   nunca hay foto, hay el mismo fondo sólido de siempre. */
/* `isolation:isolate` no es decoración: SIN ella, `.portada-foto` y el
   `::before` de abajo (los dos con `z-index` negativo) no se quedan dentro
   de `.portada` — `position:relative` a secas, sin `z-index` propio, NO
   crea un contexto de apilamiento nuevo, así que un hijo con `z-index:-1`
   sube hasta el contexto raíz de la página y se pinta ANTES que el propio
   fondo de `body`, que es un elemento normal y pinta en su sitio de
   siempre. Resultado medido en el navegador (18/09/2026, captura de la
   revisión): la foto entera invisible, tapada por el fondo de `body`. Con
   `isolation:isolate` el contexto se cierra aquí, y los negativos se pintan
   por debajo del contenido de ESTA sección, no de toda la página. */
.portada.a-sangre{position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;padding:9rem 0 4.5rem;align-content:end}
/* Issue #85: sin la barra transparente (cabecera clara y fija en su sitio en
   todas las páginas), la portada con foto ya no tiene que dejar 9rem por
   arriba para la barra ni ocupar la pantalla entera: toma el mismo relleno que
   la portada sin foto de la #79 y la altura la da su contenido (la pantalla
   con la foto). Si se recupera la barra transparente, esta regla deja de
   aplicarse sola. */
body:not(.con-portada-completa) .portada.a-sangre{min-height:0;padding:5.5rem 0 5.84rem;align-content:center}
@media(max-width:56.25em){
  body:not(.con-portada-completa) .portada.a-sangre{padding:3.44rem 0 3.78rem}
}
/* El degradado que separa el hueco de texto (sólido) del hueco de foto
   (transparente): en medio, un tramo semitransparente para que el corte no
   se note como una línea recta, y un velo suave abajo (el mismo `to top`
   del prototipo, `.hero::after`) para que la foto no corte en seco contra
   lo que venga debajo. `-1` queda ENCIMA de la foto (`-2`, más negativo);
   los dos usan el mismo mecanismo que ya explica `.rama::before`:
   descendientes posicionados de `.portada`, pintados en el orden que dice
   `z-index`, sea cual sea su profundidad real en el HTML.

   ── El degradado ancla a la SECCIÓN, no a la columna de texto (issue #67,
   revisión del rol público) ──────────────────────────────────────────────
   El comentario de aquí decía que había «margen de sobra en CUALQUIER
   ventana» porque los dos —el hueco opaco (40rem) y `.portada-texto`
   (34rem)— están en unidades absolutas. Es verdad a medias: los dos son
   absolutos, pero se miden desde sitios distintos. El degradado mide desde
   el borde IZQUIERDO DE LA SECCIÓN (`.portada.a-sangre::before` es hijo
   directo, a sangre); `.portada-texto` vive dentro de la COLUMNA DE
   CONTENIDO centrada (`main.lienzo`, `1fr min(72rem,100% - 3rem) 1fr`), que
   se desplaza a la derecha conforme crece la ventana. El texto se mueve, el
   degradado no, y la garantía se rompe a partir de cierto ancho — nunca se
   comprobó en una ventana ancha de verdad.

   Medido en el navegador (18/09/2026), dónde acaba `.portada-texto` desde el
   borde de la SECCIÓN (mismo origen que el degradado) y qué hay debajo:

     ventana   texto acaba en   sólido hasta   qué hay debajo
      1280px      608px           640px         sólido (32px de margen)
      1440px      688px           640px         zona semitransparente
      1536px      736px           640px         zona semitransparente
      1920px      928px           640px         LA FOTO PELADA
      2560px     1248px           640px         LA FOTO PELADA

   Por encima de 1344px de ventana (donde el margen de `main.lienzo` supera
   los 6rem que separan 34rem de 40rem) el texto ya no tiene sólido debajo;
   por encima de ~1824px cae sobre la foto sin ningún velo.

   Arreglo elegido, de las dos vías que apuntaba el `revisor`: en vez de
   mover el degradado a un elemento nuevo dentro de la columna de contenido
   (que además obligaría a mover ahí el contexto de posicionamiento de la
   foto, y ESE no se toca — sangra a pantalla completa desde el borde de la
   sección desde la #67), se deja el `linear-gradient` donde está —a
   sangre, en `.portada.a-sangre::before`— y se le suma a cada parada el
   mismo `margen` que calcula `main.lienzo` para su hueco lateral:
   `max(1.5rem,(100% - 72rem)/2)`. El `%` de ese `calc()` es el ancho de la
   SECCIÓN (el `inset:0` del propio `::before` la hace su base), que es
   exactamente el mismo ancho que usa `main.lienzo` para la misma cuenta —
   así el resultado coincide con el margen real de la columna sin
   necesidad de que el degradado viva dentro de ella.

   Vuelto a medir con el ancla nueva —los mismos anchos de ventana, el mismo
   origen (borde izquierdo de la sección) pero las paradas del degradado
   calculadas como `margen + 40rem`/`margen + 55rem`, con `margen` la misma
   fórmula que usa `main.lienzo` para su hueco lateral,
   `max(1.5rem,(100% - 72rem)/2)`—:

     ventana   margen calculado   texto acaba en   sólido hasta
      1280px      4rem (64px)      38rem (608px)    44rem (704px)
      1440px      9rem (144px)     43rem (688px)     49rem (784px)
      1536px     12rem (192px)     46rem (736px)     52rem (832px)
      1920px     24rem (384px)     58rem (928px)     64rem (1024px)
      2560px     44rem (704px)     78rem (1248px)    84rem (1344px)

   La columna «texto acaba en» coincide byte a byte con la medida original de
   antes de este arreglo (608/688/736/928/1248): es lógico, esa cifra la
   pone el layout del texto y no la toca este cambio; lo que cambia es que
   ahora «sólido hasta» la sigue a todos los anchos, siempre 6rem por
   delante, en vez de quedarse fijo en 640px — la misma holgura que ya tenía
   el comentario viejo, ahora verdadera a cualquier ancho porque el origen de
   la resta es el mismo para los dos. */
/* ── El escalón (revisión del `revisor`, 18/09/2026) ───────────────────────
   El `calc()` de arriba anclaba bien el ORIGEN del degradado, pero seguía
   usando la sintaxis de "doble posición" del código original —
   `colorA P1 P2, colorB P2 P3`— para las TRES paradas: eso pone dos colores
   DISTINTOS en la MISMA posición dos veces (en `margen+40rem` y en
   `margen+55rem`), y una posición compartida entre dos colores distintos no
   es un desvanecido, es un salto instantáneo de anchura cero. Medido con
   `getComputedStyle` a 1280px: dos escalones exactos en 704px y 944px,
   atravesando la cara en la captura.

   El arreglo no es diagonal como el prototipo (`122deg`) porque eso movería
   el ORIGEN del degradado con el alto de la sección además de con su ancho,
   y la garantía que da este código depende solo del ancho — mezclar los dos
   ejes habría que volver a medir la tabla entera con la altura como
   variable. Se mantiene `to right` y se hace continuo dando a cada color
   contiguo su PROPIA posición, sin repetirla: `var(--tono)` sigue plano
   hasta el borde del texto (`margen+34rem`, el mismo punto que ya usa la
   tabla de arriba), y desde ahí se funde en `color-mix(var(--tono) 62%, transparent)`
   (issue #87; era `rgba(12,20,18,.62)`) en `margen+40rem` y en transparente en `margen+55rem` — mismos tres colores y
   mismos tres anchos de siempre (6rem y 15rem), pero ahora son tramos reales
   de desvanecido, no un cambio de color en un punto sin anchura. */
.portada.a-sangre::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,var(--tono) 0 calc(max(1.5rem,(100% - 72rem)/2) + 34rem),
      color-mix(in srgb,var(--tono) 62%,transparent) calc(max(1.5rem,(100% - 72rem)/2) + 40rem),
      transparent calc(max(1.5rem,(100% - 72rem)/2) + 55rem)),
    linear-gradient(to top,color-mix(in srgb,var(--tono) 50%,transparent) 0%,transparent 38%)}
.portada.a-sangre .portada-foto-caja{position:absolute;z-index:-2;inset:0 0 0 44%;
  overflow:hidden}
/* `max-width:none` (revisión del `revisor`, 18/09/2026): la regla de la
   portada NORMAL, `.portada-foto{max-width:min(100%,665px)}` (línea ~469,
   sigue viva y sin tocar para las 21 páginas sin foto a sangre y para el
   móvil), le gana a cualquier `width` — `max-width` manda siempre. Sin este
   `none`, la imagen se quedaba en sus 665px reales dentro de una caja de
   717px a 1280px: un hueco de 52px de fondo desnudo a la derecha. Medido con
   `getComputedStyle`: caja 563→1280 (717px), foto 563→1228 (665px) antes de
   este `max-width:none`. */
.portada.a-sangre .portada-foto{width:100%;max-width:none;height:100%;
  border-radius:0;object-fit:cover;object-position:56% center;
  filter:saturate(.62) contrast(1.04) brightness(.88)}
.portada.a-sangre .portada-cuerpo{display:flex;flex-direction:column;
  align-items:flex-start;gap:0}
/* ── Executive: el encuadre de `alf-gafas-retrato.jpg` (issue #77) queda
   SUSTITUIDO por la #80 ────────────────────────────────────────────────
   La #77 recortaba la foto con `cover` dentro de una caja a sangre
   (806×900) y bajaba esa caja 118px para no tapar la coronilla con la
   cabecera fija. La #80 quita el modo a sangre de Executive entero — la
   foto pasa a un marco contenido, a la proporción REAL del fichero
   (`aspect-ratio:506/550`, sin recortar nada, ver más abajo, «Personal y
   Executive pasan a la misma pantalla que la portada») — así que ni el
   recorte con `cover` ni el desplazamiento de 118px tienen ya nada que
   resolver: no hay `cover` que corte la coronilla, y la caja ya no
   empieza detrás de la cabecera fija. El fondo oscuro que necesitaba ese
   hueco tampoco hace falta aparte: `.portada,.banda{background:var(--tono)}`
   (línea ~734) ya pinta `var(--tono)` —verde o granate desde la #87; `#1a1f14` en
   esta división antes— en cualquier portada a sangre de Executive sin que nadie lo
   repita aquí. */
.portada.a-sangre .portada-texto{max-width:34rem;flex:none}
/* ── El titular no cabía en un portátil (revisión de composición, 18/09/2026,
   issue #70) ────────────────────────────────────────────────────────────
   El coach: «en las secciones no aparecen completas, se cortan», con una
   captura del titular de la home leyéndose a medias bajo la barra fija.
   Medido en `:8080` a 1280×577 (un portátil real, no un caso raro): el
   titular ("No se falla por falta de talento, sino por falta de preparación
   sistémica.") mide 500px de alto —la fórmula `clamp(2.75rem,7.4vw,7.5rem)`
   da 94,72px a este ancho, y a esos 94,72px el bloque de texto (34rem =
   544px) solo deja sitio para 2-3 palabras por línea: SEIS líneas—, y la
   ventana entera mide 577px. Con la barra fija (105px), la entradilla y el
   botón (216px de aire arriba y abajo + 224px más de contenido propio) no
   cabían de ninguna manera: se necesitaba scroll para ver el botón, y ese
   scroll es justo lo que mete el titular por detrás de la barra (arreglado
   aparte en `_base.html`).

   El titular tiene que seguir siendo grande —es lo que le gustó del
   prototipo—, así que no se reduce con un número fijo: se reduce SOLO
   cuando la ventana es baja, con `@media(max-height)`, y solo en la portada
   a pantalla completa (`.portada.a-sangre`; las otras 21 páginas no tienen
   este problema — no llevan `min-height:100svh` ni la barra fija). Y solo
   por encima de 900px de ANCHO: por debajo la portada ya deja de ser a
   pantalla completa (ver el `@media(max-width:56.25em)` de más abajo) y
   pasa a un layout apilado sin esta restricción de alto.

   No se pudo usar un solo `clamp()` con `vh`: el ancho del texto (34rem) es
   fijo, así que el número de líneas del titular NO crece de forma continua
   con el tamaño de letra — salta de 3 a 4 a 5 a 6 líneas en escalones
   (medido con `getComputedStyle`, achicando el titular de 1px en 1px):

     ≤60px  → 3 líneas   61-70px → 4 líneas   71-93px → 5 líneas   ≥94px → 6

   Con un tamaño continuo, cualquier valor entre escalones sigue costando una
   línea entera de golpe (17-66px de más), así que se elige el tamaño MÁS
   GRANDE de cada escalón que cabe con margen en la altura de ventana que
   toca, y se fija por `@media(max-height)` en vez de una fórmula. Igual que
   `--aire`, esto es contenido calibrado contra ESTE titular: si el coach
   cambia el texto por uno mucho más largo o mucho más corto, hay que volver
   a medir estos tres números (no son una fórmula que se generalice sola).

   El resto del contenido fijo de la portada (etiqueta + entradilla + botón +
   los 216px de aire arriba/abajo) mide 439,52px con `getComputedStyle`
   (independiente del tamaño del titular). Presupuesto para el titular en
   cada escalón, y margen que deja el tamaño elegido:

     alto ventana   presupuesto   tamaño elegido   alto del titular   margen
       577px          137,48px      3rem (48px)        126,70px        10,8px
       700px          260,48px      4rem (64px)        225,28px        35,2px
       900px          460,48px    5,5rem (88px)         387,20px       73,3px

   Comprobado con el navegador real (`agent-browser`) a los tres altos: el
   titular, la entradilla y el botón caben sin necesitar scroll — la altura
   total de la portada iguala la de la ventana en vez de superarla (antes:
   932px a 577 de ventana). Por encima de 1000px de alto no hace falta tocar
   nada: la fórmula de siempre (hasta 7,5rem) ya tiene sitio de sobra. */
@media(min-width:56.26em) and (max-height:1000px){
  .portada.a-sangre h1{font-size:4.7rem}
}
@media(min-width:56.26em) and (max-height:820px){
  .portada.a-sangre h1{font-size:3.4rem}
}
@media(min-width:56.26em) and (max-height:650px){
  .portada.a-sangre h1{font-size:2.6rem}
}
/* Los tres datos bajo el titular («1:1 · Trabajo personal»): reutilizan
   `--tono-tinta`/`--tono-suave`, que YA son los colores del titular y la
   entradilla de esta misma portada — no una pareja nueva, la misma que mide
   la tabla de «Los tonos de banda» (11,07/9,04:1 sobre `--banda` desde la
   #131, y peor caso 10,78/8,81:1 sobre `pizarra`, que ninguna portada usa
   hoy). El filete
   de arriba no es texto, no necesita el mínimo de 4,5:1. */
.portada-datos{display:flex;gap:2rem;flex-wrap:wrap;margin:2rem 0 0;padding:0;
  list-style:none}
.portada-datos>div{border-top:1px solid var(--tono-linea);padding-top:.75rem;
  min-width:5.5rem}
.portada-datos dt{margin:0;font:500 clamp(1.4rem,2.2vw,1.85rem)/1 var(--serif);
  color:var(--tono-tinta)}
.portada-datos dd{margin:.4rem 0 0;font:600 .66rem var(--micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tono-suave)}

/* ── Los dos botones de la portada a sangre (issue #68) ────────────────────
   El sólido y el de contorno de `.hero-actions` en el prototipo. Reutilizan
   `--tono`/`--tono-tinta` de la propia portada —no una pareja de colores
   nueva— así que el contraste ya medido en la tabla de «Los tonos de banda»
   vale sin remedir nada: el sólido es literalmente esos dos colores
   invertidos (fondo `--tono-tinta`, letra `--tono`), que es la MISMA pareja
   que ya pasa el mínimo de 4,5:1 en los dos sentidos —el contraste entre dos
   colores no cambia según cuál pintes de fondo y cuál de letra—. El de
   contorno no rellena nada: es transparente con un filete de `--tono-linea`,
   así que lo que se lee es el texto normal de la portada sobre su propio
   fondo, ya medido.

   El color se declara con `.portada` DELANTE (`.portada .boton-solido`, no
   `.boton-solido` a secas) por especificidad, no por gusto: esta misma hoja
   ya trae `.portada a,.banda a{color:var(--tono-enlace)}` (0,1,1) para
   cualquier enlace suelto de la portada, y un botón ES un `<a>`. Sin el
   `.portada` delante, `.boton-contorno{color:var(--tono-tinta)}` (0,1,0)
   pierde ese pulso y el texto sale en `--tono-enlace` en vez de
   `--tono-tinta` — no rompe el contraste sobre la banda oscura (las dos
   parejas están medidas), pero SÍ lo rompía en el sólido: `--tono-enlace`
   está calibrado para leerse SOBRE la banda oscura, no sobre el fondo claro
   que pone el propio botón (`background:var(--tono-tinta)`), y ahí sale
   claro sobre claro. Reproducido con `getComputedStyle` antes de este
   comentario. */
.portada-acciones{display:flex;gap:.9rem;flex-wrap:wrap;margin:2rem 0 0}
.boton{display:inline-flex;align-items:center;gap:.6rem;
  font:600 .92rem var(--sans);text-decoration:none;
  padding:.85rem 1.7rem;border-radius:var(--radio);
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
/* ── El botón de la portada, con borde y sin relleno (issue #118) ─────────
   Hasta aquí el «sólido» de la portada era un bloque de color (el papel de
   la portada con su verde como letra) y llevaba una flecha que se movía al
   pasar el ratón. Las dos cosas se van:

   · Sin flecha: el coach quiere la web «lo más pro», sin efectos de
     plantilla. `pagina.html` ya no pinta el `<span>` de la flecha, y con él
     se van aquí las reglas que la movían (`span:last-child` y su
     `translateX/Y`) — dejarlas habría movido el TEXTO del botón, que ahora es
     el único hijo.
   · Con borde, sin relleno: la cabecera se quedó sin botón (#113, #119), así
     que el de la portada es el que deja reservar sin bajar. Con relleno
     competía con el botón verde del cuerpo de la página, que es el que manda.

   Borde y letra en `--tono-tinta`: blanco desde la issue #131 (antes el
   crema de la casa, #ece4d6, 8,77:1) sobre la portada verde (#2c4038),
   11,07:1 (fórmula WCAG), y sobre la granate (#6d1f2b) 11,16:1. En una
   portada `tono-clara` el mismo nombre resuelve a `--tinta`, 12,59:1 sobre
   su #ddd3c1. Al pasar el ratón se rellena de blanco con la letra del fondo
   de la portada: la misma pareja al revés, el mismo 11,07:1. El de contorno
   secundario no cambia: ya era así, con el filete más tenue (`--tono-linea`)
   para quedar por debajo del principal. */
/* Issue #150: el «Contáctame» de la portada deja de ser de contorno y pasa
   al botón de toda la web, blanco con letra verde. Al pasar el ratón vuelve
   al contorno de la #118. */
.portada .boton-solido{background:#fff;color:var(--acento-papel);border-color:#fff}
.portada .boton-solido:hover{background:transparent;color:var(--tono-tinta);
  border-color:var(--tono-tinta)}
/* En una portada clara el borde blanco no se ve: va en verde, como en papel. */
.portada.tono-clara .boton-solido{border-color:var(--acento-papel)}
.portada .boton-contorno{color:var(--tono-tinta);border-color:var(--tono-linea)}
.portada .boton-contorno:hover{border-color:var(--tono-tinta)}

/* ── Las dos líneas de fondo y la marca vertical (issue #68) ───────────────
   `.hero-gridline` y `.scroll-mark` del prototipo. Viven DENTRO de
   `.portada.a-sangre`, que ya tiene `isolation:isolate` (issue #67): por eso
   basta un `z-index` normal —0, sin negativo— para que pinten POR ENCIMA de
   la foto y el degradado (los dos en negativo) y POR DEBAJO del texto, que
   pinta después en el mismo contexto de apilamiento por venir más tarde en
   el HTML (`.portada-cuerpo` es hijo posterior a estos dos elementos). No es
   contenido del coach —son las mismas dos rayitas y la misma palabra en
   cualquier portada a sangre—, así que no hay campo que declarar: `home.yaml`
   no cambia con esto. */
.portada-lineas{position:absolute;inset:0;z-index:0;opacity:.15;
  pointer-events:none}
.portada-lineas::before,.portada-lineas::after{content:"";position:absolute;
  top:0;bottom:0;width:1px;background:var(--tono-tinta)}
.portada-lineas::before{left:50%}
.portada-lineas::after{left:75%}
.portada-explorar{position:absolute;z-index:0;right:1.5rem;bottom:2.5rem;
  margin:0;writing-mode:vertical-rl;transform:rotate(180deg);
  font:600 .62rem var(--micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--tono-suave)}
@media(max-width:56.25em){
  /* Sin sitio para una marca vertical ni para líneas que ya no dividen nada:
     a este ancho la sección deja de ser a pantalla completa (ver el `@media`
     de aquí abajo, `.portada.a-sangre{min-height:0}`). Mismo criterio que el
     prototipo (`.hero-gridline{display:none}`, `.scroll-mark{display:none}`
     en su propio `@media`). */
  .portada-lineas,.portada-explorar{display:none}
}

/* A partir de aquí, la ventana ya no tiene sitio para sangrar una foto sin
   tapar el titular (avisado en la issue: "comprueba 390px"). Medido en el
   navegador con la home real (18/09/2026): con la foto puesta a sangre y la
   ventana a 390px, el hueco opaco de 40rem (640px) es MÁS ANCHO que la
   propia ventana — el titular quedaba pintado sobre foto sin ninguna
   garantía, justo lo que el cálculo de arriba promete que no pasa en
   escritorio. Por eso el móvil no hereda ese mecanismo: se apila, la foto
   sube arriba en su propia caja 16:9 y el texto baja debajo, como cualquier
   portada con foto de las que ya había antes de esta issue. */
@media(max-width:56.25em){
  .portada.a-sangre{min-height:0;padding:5rem 0 3rem;overflow:visible;
    align-content:normal}
  .portada.a-sangre::before{content:none}
  .portada.a-sangre .portada-cuerpo{align-items:stretch}
  .portada.a-sangre .portada-texto{max-width:none}
  /* La caja (issue #67, revisión del recorte) también vuelve al flujo
     normal: sin esto seguiría con `position:absolute;inset:0 0 0 44%` y la
     foto no bajaría bajo el texto, se quedaría flotando a media página. */
  .portada.a-sangre .portada-foto-caja{position:static;z-index:auto;inset:auto;
    width:100%;aspect-ratio:16/9;border-radius:var(--radio);margin-top:2rem}
  .portada.a-sangre .portada-foto{position:static;z-index:auto;inset:auto;
    width:100%;height:100%;border-radius:var(--radio);object-position:center;
    filter:none}
}

.banda{padding:var(--aire-banda) 0}
/* Una banda al final de la página se come el padding de cierre del lienzo y va
   a morder el pie oscuro. Si no, entre el filo de la banda y el pie queda una
   franja de papel de siete rem que se lee como un hueco sin rellenar. */
main.lienzo>.banda:last-child{margin-bottom:calc(var(--aire) * -1)}

/* ── Los tonos de banda ─────────────────────────────────────────────────────
   Hasta la #38 había UNA banda y solo cambiaba por división. En la referencia
   las bandas alternan por SECCIÓN, y ese alternar es lo que da el ritmo de la
   página: no es decoración, es lo que te dice dónde empieza un argumento nuevo.

   El juego es CERRADO y se escribe desde el YAML del bloque (`banda: profunda`;
   el esquema lo valida y `render.py` tira lo que no esté en la lista). No hay
   color libre a propósito: con un campo de color abierto, en tres meses hay
   cuarenta azules distintos en la web y ninguno es el de la marca.

   Son cinco nombres para los seis colores de la referencia, y falta uno porque
   sus dos familias oscuras (forest y ocean) son DOS marcas; Arketip tiene una
   sola —el acento es uno para toda la marca, decisión de la #1— así que aquí
   las dos profundidades son de la misma familia oscura. Sus dos tonos vivos
   (lavender #c68fc6, sunshine #eab308) tampoco están: meterlos sería decidir
   por el coach una paleta que él fijó en ivory/navy (#15). El sitio para un
   tono cálido, si algún día lo pide, es un nombre más en esta lista.

   Cada tono repinta CINCO cosas de golpe, no solo el fondo: la tinta, el tono
   suave (entradillas y párrafos secundarios), el tenue (letra pequeña), el
   color de enlace/acento y el filete. Van juntas en una línea por la cicatriz
   de la #15: allí se movieron dos de las tres líneas del acento y el botón
   cambiaba de familia de color al pasarle el ratón. Si se toca un tono, se
   tocan sus cinco valores o no se toca.

   Contrastes RECALCULADOS en la issue #131 con la letra blanca (fórmula WCAG
   de contraste relativo, no a ojo; script de cálculo, no navegador). El mínimo
   que se acepta para texto en esta hoja es 4,5:1. La columna «enlace» vale
   también para el acento —dentro de una banda son el mismo color— y es la que
   manda: es la más apretada de las cuatro.

     fondo                tinta   suave    tenue   enlace
     ------------------------------------------------------
     (por división)
       (hasta la #87: --banda #14201d, sucesión #132420, executive #1a1f14;
        ya no hay variantes por división, ver `:root`)
     profunda   --banda  #2c4038 (verde)  11,07  9,04  7,79  4,72   (issue #87: antes #0c1412)
                --granate-banda #6d1f2b   11,16  9,12  7,86  4,76   (issue #87)
     pizarra    #31413a   10,78    8,81     7,59     4,59
     acento     #2c4038   11,07    9,04     7,79     4,72
     clara      #ddd3c1   12,59    5,88     4,78     7,46   (issue #87; antes #e9e3d8)

   Hasta la #131, con tinta crema #ece4d6, suave #cdd6cc y tenue #b8c2b8, las
   tres filas oscuras medían: verde 8,77/7,42/6,03, granate 8,84/7,49/6,09 y
   pizarra 8,54/7,23/5,88. (La fila de `pizarra` decía 9,32 de tinta y la de
   `acento` 9,57: eran de antes de la #87 y nadie las había remedido; con el
   crema daban 8,54 y 8,77.) El enlace no cambia: es `--sage`, no la tinta.

   `tinta` es siempre blanco (#fff, issue #131; hasta entonces `--fondo`, el
   papel) salvo en `clara`, donde se invierte
   —fondo claro, letra oscura— y por eso su `tinta` es `--tinta` normal. Las
   columnas suave/tenue/enlace de `clara` usan colores oscuros DISTINTOS de
   los de las bandas oscuras, por el mismo motivo: aquí el fondo es claro.

   Por qué `pizarra` es #31413a y no un verde grisáceo más claro —el tono a
   medio camino entre `--ink-2` y `--sage` que se probó primero, `#4a5a52`—:
   el ENLACE de esa banda es `--sage` (#9bae9f), y `--sage` y un gris medio
   están demasiado cerca en luminosidad para que la pareja mida bien: con
   `#4a5a52` el enlace se queda en 3,11:1, con `#566b60` en 2,44:1 —más claro
   el fondo, PEOR el contraste, porque los dos tonos convergen hacia el mismo
   gris—. Lo que pone el techo aquí es que `--sage` no se puede oscurecer
   —es el mismo valor en todas las bandas, decisión de la #15 que esta piel
   no toca (una línea, un solo tono)—, así que lo único que puede moverse es
   `pizarra`, y tiene que quedarse casi tan oscuro como `--acento` para que
   `--sage` siga leyéndose. Medido antes de elegir.

   La banda clara es la que más cuidado pide y por eso lleva sus cinco
   valores cambiados: sobre ella el `--tenue-papel` sin retocar (#57685f) se
   queda en 4,63:1, que pasa pero sin margen — el mismo patrón que ya tenía
   la ivory/navy vieja con su propio tenue (4,75:1). Se le da un tono más
   oscuro solo a esta banda, #4c5c53 (5,55:1), en vez de mover el general y
   perder margen en todas las demás. El filete (`--linea-papel`, #d2c7b3 desde la #87) se
   queda en 1,17:1 sobre ella: no es texto, no hay mínimo que cumplir, y es
   del mismo orden que sobre el papel normal (1,28:1) o el papel claro
   (1,42:1). */
.portada,.banda{
  --tono:var(--banda);            /* el oscuro de la división: el de siempre */
  /* Blanco y no el crema del papel desde la issue #131. El coach: «el blanco
     con el verde podría ser más blanco […] un blanco más potente como la de
     Simon Sinek». Hasta entonces la tinta de banda era `var(--fondo)`
     (#ece4d6): el MISMO crema que el papel de la web, así que sobre el verde
     se leía crema, no blanco. El papel (`--fondo`) no cambia; solo deja de
     prestarle su color a la letra de las franjas oscuras.
     Blanco puro y no casi puro: lo que se pedía era que se notara.
     Suave y tenue suben con él, y pasan de verdosos a neutros: con un
     titular blanco al lado, el #cdd6cc de antes seguía leyéndose crema
     verdoso. El filete, igual: blanco al 50 % y no crema al 50 %.
     Cifras antes → después, en la tabla de «Los tonos de banda» de arriba. */
  --tono-tinta:#fff;
  --tono-suave:#e6e9e6;
  --tono-tenue:#d4dad4;
  --tono-enlace:var(--acento-claro);
  --tono-linea:rgb(255 255 255/.5);  /* 4,11:1 sobre verde, 3,91:1 sobre granate (issue #131; crema: 3,47/3,33) */
  /* Y aquí está el motivo de que `--suave-papel` exista: dentro de una banda,
     los cuatro tonos heredados apuntan a los de la banda, así que TODO lo que
     ya pintaba en `var(--suave)`, `var(--tenue)`, `var(--linea)` o
     `var(--acento)` —la entradilla, el párrafo de un paso, la cifra grande, el
     número de un paso, el `dt` de la trayectoria, la flecha de una FAQ, el
     filete de una lista— se vuelve legible sobre el color sin una regla por
     componente. Una lista de componentes se queda corta el día que se añade el
     siguiente; esto no.

     `--tinta` NO se repinta, y es deliberado: la usan las tarjetas, la tabla y
     los testimonios, que traen su propio papel claro y necesitan seguir
     escribiendo en oscuro. Lo que sube al tono de la banda es el `color` del
     contenedor, que es lo que heredan los titulares y los párrafos. */
  --suave:var(--tono-suave);
  --tenue:var(--tono-tenue);
  --linea:var(--tono-linea);
  --acento:var(--tono-enlace)}
/* Lo que trae su propio papel recupera sus tintas: una tarjeta, una tabla o un
   campo de formulario dentro de una banda siguen siendo claros, y con las
   tintas de la banda encima quedarían casi invisibles —el caso peor es el filo
   de acento de una tarjeta, que sobre papel es el verde oscuro y pasaría al claro—.
   La regla no es una lista de componentes por gusto: es exactamente la lista de
   los que declaran `background:var(--papel)` o `background:#f7ecd6`. Si se
   añade otro, va aquí.

   El `color` va con las cuatro variables y no es de adorno: es lo que le pasó
   al `<h3>` de una tarjeta en la primera versión de esto. `.rama` declara su
   `color:var(--tinta)` y `.celda` no lo declaraba —nunca le hizo falta, hereda
   el de `body`—, así que dentro de una banda el titular de cada tarjeta
   heredaba el papel del contenedor y quedaba blanco sobre papel blanco: la
   tarjeta salía con su texto, sus puntos y su filo, y sin título.
   Se deduce de la cascada —`.celda` no declara `color`, luego hereda el del
   contenedor—, no de haberlo visto: aquí no hay navegador. Antes esta línea
   decía «se veía en el navegador», y no era verdad. Lo que sí es verdad es que
   no lo cazaba ningún test, y ahora sí:
   `test_lo_que_trae_su_propio_papel_recupera_su_tinta`.

   `.rama` SALE de esta lista en la issue #67: dejó de traer su propio papel
   (`background:var(--papel)`) al pasar de tarjeta a fila ancha, así que ya
   no necesita recuperar nada — sigue el tono ambiente como cualquier
   párrafo, que es lo correcto para algo sin fondo propio. Ver el comentario
   de `.bifurcacion`/`.rama` en «Bifurcación». */
.banda .celda,.banda .captura-email.con-foto,.banda .numerada.tarjetas li,.banda .rama:has(>.rama-foto),.banda .nivel,.banda .testimonio,.banda .entrada,.banda table,
.banda .error-form,.banda .aviso-form,.banda .aviso-borrador,
.banda fieldset.grupo,.banda .opcion,
.banda .filtro .si,.banda .filtro .no,
.banda .reserva-panel,.banda .reserva-detalles,.banda .reserva-cancelar button,
.banda input,.banda select,.banda textarea{
  color:var(--tinta);
  --suave:var(--suave-papel);
  --tenue:var(--tenue-papel);
  --linea:var(--linea-papel);
  --acento:var(--acento-papel)}
.portada a,.banda a{color:var(--tono-enlace)}
.portada .progreso,.banda .progreso{color:var(--tono-enlace)}
/* Los botones se dan la vuelta dentro de una banda: el principal es tinta
   sobre papel, o sea negro sobre negro en cuanto la sección tiene color. Pasan
   a ser el papel de la banda con su fondo como letra, que es lo que hace el
   prototipo en sus bandas oscuras. Desde la issue #131 ese «papel» es blanco
   (antes el crema #ece4d6): en reposo, de 10,78:1 (pizarra) a 11,16:1
   (granate) —con el crema eran 8,54-8,84:1—; al pasar el ratón, de 4,59:1
   (pizarra, la más apretada) a 7,46:1 (la banda clara), cifras de la #87 que
   la #131 no toca (el hover es `--sage`). Todos por encima del 4,5:1 de la
   casa, el peor con poco margen — igual que antes de esta piel.

   Van los DOS botones, el enlace-botón y el `<button>` del formulario: es el
   mismo error de la #15 al revés —arreglar uno de los dos deja «Enviar»
   invisible justo en la banda donde se pide el email—. `.aplicar button.atras`
   se queda fuera a propósito: es transparente y ya pinta en `var(--suave)`,
   que la banda repinta sola. Le gana por venir después en la hoja con la misma
   especificidad (0,2,1).

   Y va `.portada` además de `.banda` (issue #36, 18/09/2026). Esta regla
   decía solo `.banda` desde que se escribió, pero `.portada` ES una banda en
   todas las demás: comparten la declaración de los tonos (arriba), el fondo,
   el color de los enlaces. En esta se quedó fuera, y no se notó porque hasta
   hoy ninguna página metía un formulario dentro de una portada.
   La primera fue `/baja/{token}`, y el botón «Confirmar la baja» salió blanco
   sobre `--acento-claro`: **1,76:1** con la paleta ivory/navy de entonces,
   medido por el `validador` en el navegador, cuando el mínimo de la casa es
   4,5:1. Con la paleta de esta piel el mismo error mediría 2,25:1 (blanco
   sobre `--sage`) — sigue fallando, y por el mismo motivo: la causa no era
   el color, era que dentro de una banda `--acento` se repinta a
   `--tono-enlace` (línea ~549), así que un botón que pide `var(--acento)`
   pide luz sobre luz sea cual sea la paleta. Ni un test lo vio — es
   exactamente la cicatriz de la #38, el mismo fallo en otro sitio. */
.portada .cta a,.portada .contacto button,.portada .aplicar button,
.banda .cta a,.banda .contacto button,.banda .aplicar button{
  background:var(--tono-tinta);border-color:var(--tono-tinta);color:var(--acento-papel)}
.portada .cta a:hover,.portada .contacto button:hover,.portada .aplicar button:hover,
.banda .cta a:hover,.banda .contacto button:hover,.banda .aplicar button:hover{
  background:var(--tono-enlace);border-color:var(--tono-enlace);color:var(--tono)}
/* El segundo camino del filtro sigue siendo un enlace subrayado, no un botón:
   solo cambia de color para verse sobre la banda. */
.banda .cta.secundario a{background:none;border-color:transparent;
  color:var(--tono-enlace)}
.banda .cta.secundario a:hover{background:none;color:var(--tono-tinta)}
/* Las etiquetas de un formulario van en `--tinta`, que no se repinta (lo
   explica el bloque de arriba): dentro de una banda oscura son negro sobre
   negro. El campo sí se ve, porque trae su papel; lo que desaparece es la
   palabra que dice qué se escribe en él. Las etiquetas de dentro de un
   `fieldset.grupo` NO entran: ese fieldset ya es una caja de papel claro. */
.banda .contacto label,.banda .aplicar .campo>label,
.banda .aplicar fieldset.campo-opciones legend{color:var(--tono-tinta)}
/* `.tono-*` van sin `.banda` delante y DESPUÉS del bloque de arriba: misma
   especificidad (0,1,0), así que gana el orden, y así el mismo nombre sirve
   para una banda de sección y para la portada de una página. */
.tono-division{--tono:var(--banda)}
.tono-profunda{--tono:var(--banda)}
/* ── Verde y granate, por orden de aparición (issue #87) ───────────────────
   «Todos los fondos negros cámbialos por verde o granate (ves variando)».
   Las piezas oscuras a sangre de una página —la portada y cada banda
   `profunda`— alternan: la primera es verde, la segunda granate, la tercera
   verde… Se cuenta dentro del lienzo con `:nth-child(… of …)`, sin tocar
   ninguna plantilla: si el coach cambia el orden de los bloques en el Taller,
   los colores se reparten solos y dos bandas oscuras seguidas nunca son del
   mismo color. La banda clara no cuenta (no es oscura) y una portada clara
   tampoco.

   Va DESPUÉS de `.tono-*` y pesa más que ellos: sin eso el orden de la hoja
   decidiría. Solo cambia `--tono` (el fondo): las tintas de la banda ya
   están medidas sobre los dos, ver la tabla de más abajo. */
main.lienzo>:is(.portada:not([class*="tono-"]),.portada.tono-profunda,.banda.tono-profunda):nth-child(even of .portada:not([class*="tono-"]),.portada.tono-profunda,.banda.tono-profunda){
  --tono:var(--granate-banda)}
/* Hasta la #104 la lista contaba también `.con-indice:has(>.banda…)`, el
   envoltorio del numerito al margen, que dejaba la banda un nivel más abajo.
   Retirado el envoltorio, toda banda es hija directa del lienzo y basta con
   contarlas a ellas. */
/* El pie y la última banda (revisión de la #87). La primera versión pasaba
   el pie a verde cuando la última banda era granate, con esta misma lista
   dentro de un `body:has(…)`. Era inválida: un `:has()` no puede ir dentro de
   otro, y el navegador tiraba la regla entera sin avisar (`CSS.supports`
   da `false`). Contar el turno del pie sin `:has()` dentro de `:has()` no se
   puede, y contar sin distinguir los `.con-indice` (que existían hasta la #104)
   descolocaba todas las bandas. Así que el pie se queda granate —como la barra de arriba, que
   enmarca la página— y, cuando lo último del lienzo es una banda oscura, le
   pone un filete claro por arriba (los mismos 3,3:1 que los filetes de banda)
   para que verde con granate, o granate con granate, no se lean como una
   sola pieza. */
body:has(main.lienzo>.banda.tono-profunda:last-child) .pie-sitio{
  border-top:1px solid rgb(236 228 214/.5)}
.tono-pizarra{--tono:#31413a}
/* `--acento-papel` y NO `--acento`: en este mismo elemento `--acento` ya está
   repintado al claro de la banda, así que `var(--acento)` aquí habría dejado
   una banda de verde claro con la letra papel encima — casi ilegible. Es el
   único sitio de la hoja donde el segundo nombre no es un lujo. */
.tono-acento{--tono:var(--acento-papel)}
.tono-clara{--tono:#ddd3c1;
  --tono-tinta:var(--tinta);
  --tono-suave:var(--suave-papel);
  --tono-tenue:#4c5c53;
  --tono-enlace:var(--acento-papel);
  --tono-linea:var(--linea-papel)}

/* Etiqueta de sección: mayúsculas pequeñas y mucho tracking. Manrope y no
   DM Sans desde esta piel — es el `--micro` del prototipo, pensado justo
   para esto. */
.progreso,th{font:600 .72rem var(--micro);letter-spacing:.16em;
  text-transform:uppercase}

/* ── El rótulo de sección (issues #67, #121) ─────────────────────────────
   El `.eyebrow` del prototipo: mayúsculas, mucho tracking. Campo opcional
   (`etiqueta`) en cualquier bloque —no marca dónde empieza un argumento
   nuevo, para eso está `banda`; esto es la etiqueta de ESTA sección.

   Un único `<p class="etiqueta">`, sin scoping por sección, porque siempre
   vive en el mismo sitio relativo a su título: justo antes. Con margen de
   colapso normal (no es hijo de `main.lienzo`, va dentro de cada `<section>`)
   el hueco hasta el `h2` que sigue es exactamente `margin-bottom` de esta
   regla — no hace falta ninguna regla de `main.lienzo>*+*` para el caso
   normal, SOLO para `bifurcacion`, cuyo `<h2>` (y por tanto su etiqueta) vive
   fuera de la `<section>`, como hijo directo del lienzo (ver más abajo).

   ── Más visible y sin rayita (issue #121) ────────────────────────────────
   El coach, en nota de voz (05/10/2026): «que los títulos, preparación
   sistémica, WHY porqué, WHAT, que se vieran un poco más y no me acaba de
   matar el guión delante», y «escribirlo en negrita oscuro, un poco más
   grande y quitar el guión de delante». Tres cambios, medidos:

     tamaño   .7rem (11,2 px) → .875rem (14 px). Sigue siendo un rótulo: el
              `h2` que lo sigue mide 27-43 px y el `h1` de portada más.
     peso     600 → 700 (negrita).
     color    `--tenue` (#52635a, 5,05:1 sobre `--fondo`) → `--tinta`
              (#0c1412): 14,79:1 sobre `--fondo`, 12,59:1 sobre la banda
              clara (#ddd3c1).
     rayita   fuera (`.etiqueta::before`, 34 × 1 px, borrado).

   Sobre fondo oscuro (la portada verde, las bandas `profunda`/`pizarra`/
   `acento`) va en `--tono-tinta`, blanco desde la issue #131 (antes el crema
   de la casa: 8,77/8,84/8,54): 11,07:1 sobre el verde, 11,16:1 sobre el
   granate, 10,78:1 sobre `pizarra`. En `tono-clara` ese mismo
   nombre resuelve a `--tinta`, así que una sola regla cubre las dos. */
.etiqueta{margin:0 0 1.5rem;
  font:700 .875rem/1.3 var(--micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta)}
.portada .etiqueta,.banda .etiqueta{color:var(--tono-tinta)}
/* La única etiqueta que NO vive dentro de una `<section>`: la de
   `bifurcacion`, hermana directa de su `<h2>` en `main.lienzo` (o en
   `.banda`). Sin esto se le aplicaba el `var(--aire)` de `main.lienzo>*+h2`
   (7rem) entre la etiqueta y el título que la sigue — el mismo hueco que
   separa DOS secciones distintas, no una etiqueta de su titular. */
main.lienzo>*+.etiqueta{margin-top:var(--aire)}
main.lienzo>.etiqueta+h2{margin-top:.75rem}
/* El destino de «Ver los tres sistemas» de la portada (issue #118). Sin este
   margen el salto dejaba el rótulo pegado al borde de arriba de la ventana
   (0 px, medido); con él respira como el ancla de «¿Es para ti?». */
#tres-sistemas{scroll-margin-top:2rem}

/* Bajada suave al pinchar el menú (07/10/2026, junto a la #142). El coach:
   «cuando clique en el menú, la bajada que sea smooth, no directa; que baje
   poco a poco». Con cada sistema en una sola página, el salto seco a
   `#el-sistema` dejaba a la persona sin saber dónde estaba.
   · `:has(main.lienzo)`: solo la web pública; las páginas del Taller que
     comparten esta hoja no llevan `main.lienzo` y siguen como estaban.
   · Solo con `prefers-reduced-motion: no-preference`: a quien tiene pedido
     en su sistema menos movimiento, el salto le llega seco, como antes. */
@media(prefers-reduced-motion:no-preference){html:has(main.lienzo){scroll-behavior:smooth}}

/* ── La cabecera de cada apartado (issue #142) ─────────────────────────────
   Cada sistema es una sola página y cada apartado (Beneficios, El Sistema…)
   empieza aquí. En su página suelta era una portada verde a sangre; el coach
   eligió que solo la primera lo sea y las demás vayan como WHY/WHAT/HOW en la
   home: rótulo y título.

   · Fondos alternos, como la portada de la web (issue #146): el primer
     apartado ENTERO sobre la franja clara (`tono-clara`, la de WHY/HOW en la
     home), el segundo sobre el papel, y así. Hasta el 07/10/2026 cada uno
     empezaba con un filete fino, y el coach pidió «diferenciar un pelín las
     secciones», «como la primera página». El fondo no lo pone esta regla: lo
     pone `pagina.html` con el `banda` que reparte `bloques_de_una_pagina`.
     El filete ya no hace falta: separa el cambio de fondo.
   · El título un escalón por encima del `h2` de un bloque (41,8 → 52 px a
     1440 px) y por debajo del titular de la portada (61,9): es la cabeza de
     lo que era una página, no un bloque más. Granate sobre la franja clara:
     7,53:1 (medido en la #123).
   · El dibujo de su portada (#130/#141) a la derecha, en verde de la casa.
     El tamaño y el «oculto en el móvil» los pone `.portada-dibujo`.
   · Sin hueco por debajo: el bloque que sigue ya trae su propio aire arriba,
     y con los dos el título quedaba a 110 px de su contenido.
   · `scroll-margin-top`: el menú baja aquí y el rótulo no queda pegado al
     borde de la ventana. Sobre franja, del tamaño de su aire y un poco más,
     para que el borde de arriba de la franja quede a la vista. */
/* Los dos `:not()` no sobran: sin ellos la regla del papel (0,2,2) perdía
   contra `main.lienzo>section:not(.portada):not(.bifurcacion)` (0,3,2), que le
   ponía 40 px arriba y abajo y dejaba el título a 108 px de sus tarjetas. */
main.lienzo>section.apartado:not(.portada):not(.bifurcacion),.banda>section.apartado{
  display:flex;align-items:center;gap:2rem 3rem}
main.lienzo>section.apartado:not(.portada):not(.bifurcacion){padding:var(--aire) 0 0;
  scroll-margin-top:1.5rem}
.banda>section.apartado{padding:0;scroll-margin-top:calc(var(--aire-banda) + .75rem)}
/* Dos franjas del mismo tono seguidas son UNA sección: los bloques de un
   apartado sobre clara van cada uno en su `div.banda`, y sin esto entre dos de
   ellos se sumaban el aire de abajo de una y el de arriba de la otra (8 rem),
   más que entre dos secciones distintas. */
main.lienzo>.banda.tono-clara+.banda.tono-clara{padding-top:0}
.apartado-texto{min-width:0;flex:1 1 auto}
.apartado-texto h2{font-size:clamp(1.9rem,3.6vw,3.25rem);line-height:1.05;margin:.75rem 0 0;
  max-width:22ch}
.apartado-texto .entradilla{margin:1.2rem 0 0}
.apartado .portada-dibujo{color:var(--acento)}

/* ── El numerito de sección al margen: retirado (issue #104) ──────────────
   Aquí vivía `.con-indice` (issue #68): la etiqueta en una columna fija a la
   izquierda con un contador «01 —», y el título empujado a la derecha. Solo
   lo usaba `/personal`, donde dejaba dos maquetas en la misma página
   (títulos en x=529 y en x=144 a 1440 px). `pagina.html` ya no lo pinta y
   las reglas se han quitado: la etiqueta es siempre el rótulo con rayita de
   arriba. */

/* ── Bifurcación: filas anchas que se llenan de color (issue #67) ─────────
   Hasta aquí eran tarjetas con borde y sombra al pasar el ratón (documento
   VF, slide 3). El prototipo las pinta como filas del ancho de la sección,
   separadas por un filete, que se llenan de tinta al pasar por encima y
   mueven la flecha — el mismo contenido (nombre, problema, solución, CTA),
   otra piel.

   `.rama` YA NO trae su propio papel (`background:var(--papel)`): es una fila
   transparente sobre el fondo de la página o de la banda que la envuelva.
   Por eso sale de la lista "lo que trae su propio papel recupera su tinta"
   de más arriba (issue #38) — esa lista existe PARA que una tarjeta clara no
   se quede negra sobre negra dentro de una banda oscura; una fila sin papel
   propio es justo el caso contrario, tiene que seguir el tono ambiente como
   cualquier párrafo, y ya lo hace sin declarar nada aquí: no fija `color` ni
   ningún `--suave`/`--tenue`/`--acento` propio, así que hereda el de
   `main.lienzo` (el papel normal) o el de `.banda`/`.portada` si alguien
   pone `banda:` en este bloque, con los mismos números ya medidos en esa
   tabla. `bifurcacion` hoy solo se usa en `home.yaml`, sin `banda:` puesta —
   comprobado con `grep` antes de este cambio — así que hoy no se ve
   ninguna banda debajo, pero el mecanismo ya está listo si algún día la
   lleva. */
.bifurcacion{display:block;margin:0;border-top:1px solid var(--linea)}
.rama{display:grid;grid-template-columns:12.5rem 1fr auto;column-gap:2.5rem;
      align-items:center;padding:2.75rem 0;
      border-bottom:1px solid var(--linea);
      position:relative;
      transition:color .3s}
/* Issue #97: la fila ya no es un enlace entero sino un `<div>` con DOS enlaces
   (el nombre del sistema y «comprueba si es para ti»). Se quita el
   `overflow:hidden` de antes: recortaba el aro de foco de los dos enlaces y la
   fila no necesita recortar nada (el relleno crece con `scaleY`, dentro de su
   propia caja). */
/* El relleno que sube al pasar el ratón: el mismo mecanismo que el
   prototipo (`.path::before`, `transform:scaleY()` desde abajo). `z-index`
   en el propio `::before` y en `.rama>*` es lo que separa "el fondo que
   sube" de "el contenido que se lee encima" — sin la segunda línea, el
   texto quedaba DEBAJO del relleno en cuanto este entraba en su propia capa
   de apilamiento (los descendientes posicionados de un ancestro se pintan
   TODOS juntos, en el orden del árbol, así que un `<img>`/texto no
   posicionado del mismo padre pasa detrás del primer hijo posicionado que
   encuentre, sea o no el que quiere estar encima). */
.rama::before{content:"";position:absolute;inset:0 -1.25rem;z-index:0;background:var(--banda);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.rama>*{position:relative;z-index:1}
.rama:hover::before,.rama:has(:focus-visible)::before{transform:scaleY(1)}
/* Aire del relleno (issue #94): al pasar el ratón el verde llegaba justo
   hasta donde empieza el texto —«Arketip Personal» y la flecha tocaban los
   bordes—. El relleno sobresale 1,25rem por cada lado (`inset:0 -1.25rem`) y el
   texto se queda donde estaba, alineado con el resto de la página. No desborda
   a 390px: el lienzo deja 1,5rem de margen a cada lado de la ventana. La fila
   sigue reaccionando entera (`:hover` y foco de cualquiera de sus dos
   enlaces), aunque solo dos cosas sean pulsables. */
/* El relleno es `--banda` (el verde, #2c4038; era `--tinta` casi negro hasta
   la #87), así que la letra encima se repinta con los MISMOS cuatro valores
   que ya mide la fila «profunda» de la tabla de «Los tonos de banda»: tinta
   11,07:1, suave 9,04:1, tenue 7,79:1, enlace/acento 4,72:1 (blancos desde la
   issue #131, como en las bandas: es el mismo verde y tiene que leerse igual). Van los cuatro juntos por la misma razón de siempre (issue #15):
   tocar uno suelto deja el enlace o el filete de un color que no es de esta
   familia. */
.rama:hover,.rama:has(:focus-visible){color:#fff;
  --suave:#e6e9e6;--tenue:#d4dad4;--linea:rgb(255 255 255/.5);--acento:#9bae9f}
.rama h2{font-size:1.35rem;margin:0;letter-spacing:-.02em}
.rama h2 a{color:inherit;text-decoration:none}
.rama a:hover{text-decoration:underline;text-underline-offset:.22em}
.rama-textos{display:grid;gap:.9rem}
.rama p{color:var(--suave);font-size:.94rem;margin:0}
.rama .enlace{font:600 .85rem var(--sans);color:var(--acento);letter-spacing:.01em;
  white-space:nowrap;justify-self:end;display:inline-flex;gap:.4rem}
/* Issue #94: aquí había un `translateX(6px)` al pasar el ratón o el foco. La
   flecha va dentro del propio texto del enlace (`→` del CTA), así que lo que
   se movía era el texto entero: de 1216 a 1222 px a 1280 de ancho, medido.
   Se quita. El relleno verde y el subrayado ya dicen que la fila reacciona. */
/* Texto solo para lectores de pantalla (issue #94): el mismo nombre de enlace
   repetido en tres filas —«comprueba si es para ti»— no dice a cuál va cada
   uno (WCAG 2.4.4). Patrón estándar: fuera de la vista, sin afectar al
   diseño. */
.solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Las dos mitades de la fila (documento VF, slide 3): el problema y la
   solución. Tienen que distinguirse a un metro de la pantalla, porque el
   recorrido de la home es leer el problema y buscar la salida — si los dos
   párrafos son el mismo gris, la fila se lee como un bloque de texto y no
   como una pregunta con respuesta. Se distinguen por el filete y por el
   color del rótulo, no por el tamaño de la letra. */
.rama .parte{margin:0;padding-left:.85rem;border-left:2px solid var(--linea)}
.rama .solucion{border-left-color:var(--acento)}
.rama .rotulo{display:block;margin-bottom:.3rem;
  font:600 .68rem var(--micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue)}
.rama .solucion .rotulo{color:var(--acento)}
@media(max-width:640px){
  .rama{grid-template-columns:1fr;row-gap:1rem;padding:2.25rem 0}
  .rama .enlace{justify-self:start}
}

/* ── Filtro "sí / no" ─────────────────────────────────────────────────────
   Dos columnas, no tres: con `minmax(17rem…)` el ancho de lectura daba para
   tres huecos y las dos listas se quedaban estrechas con un tercio vacío
   al lado. El `min(…,100%)` es lo que evita el desbordamiento a 390px. */
.filtro{display:grid;gap:2.5rem 3rem;scroll-margin-top:1.5rem;
        grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr))}
/* ── «¿Es para ti?» se tiene que ver (issue #96) ───────────────────────────
   El coach: «el Sí es para ti y No es para ti es muy importante — quiero que
   se vea más». Tres cosas:

   · Un título de bloque, «Arketip Executive ¿Es para ti?», que sale de la
     división de la página (ver `pagina.html`). Va a todo el ancho, en el `h2`
     normal de la web (serif, granate).
   · Los dos subtítulos, «SÍ ES PARA TI» y «NO ES PARA TI», pasan de una
     etiqueta de 11,5 px en mayúsculas espaciadas a un subtítulo de verdad:
     serif, de 1,5 a 1,9 rem (24-30 px), granate. Son `h3`. Antes pintaban `--acento`
     el sí y `--tenue` el no; el coach pidió los dos en granate.
   · Dos cuadros CLAROS (`--papel` con filete) y no el cuadro oscuro de su
     captura: el granate de los subtítulos tiene que leerse en los dos, y un
     fondo oscuro ya no existe en la web (issue #87). Se distinguen con
     discreción: el sí lleva un filete superior de granate de 3 px y el no lo
     lleva del gris del filete.

   Contrastes (fórmula WCAG): granate sobre `--papel` 10,70:1; texto de la
   lista (`--tinta`) sobre `--papel` 17,89:1; el filete granate sobre el crema
   de la página 8,84:1 (mínimo 3:1 para un filete).

   Los cuadros traen su propio papel, así que entran en la lista de «lo que
   trae su propio papel recupera su tinta» (`.banda .filtro .si`…): si el coach
   mete un `filtro` en una banda oscura, el granate de los subtítulos no se
   queda sobre granate ni las listas en letra clara sobre papel claro. */
.filtro-titulo{grid-column:1/-1;margin:0}
.filtro .si,.filtro .no{background:var(--papel);border:1px solid var(--linea);
  padding:1.75rem 1.75rem 1.5rem;color:var(--tinta)}
.filtro .si{border-top:3px solid var(--granate)}
.filtro .no{border-top:3px solid var(--linea)}
main.lienzo .filtro .si h3,main.lienzo .filtro .no h3{margin:0 0 1.1rem;
  font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.15;letter-spacing:.01em;
  text-transform:none;color:var(--granate)}
.filtro ul{margin:0;padding-left:1.1rem}
.filtro li{margin-bottom:.7rem;font-size:.98rem}
.filtro .si li::marker{color:var(--granate)}
.filtro .no li::marker{color:var(--tenue)}
.filtro .cta,.filtro .descarte{grid-column:1/-1}
.descarte{font-size:.92rem;color:var(--tenue);border-left:2px solid var(--linea);
          padding-left:1.1rem;margin:0}

/* ── Botones ────────────────────────────────────────────────────────────────
   Rectángulo de radio corto (`--radio`), no píldora. Fueron píldoras hasta la
   #38, que los llevó a 10px siguiendo la referencia de entonces; esta piel
   los aprieta más todavía, a 2px (`--radio` del prototipo) — casi a
   escuadra, no solo "menos redondo".

   Y se cambiaron los TRES sitios de esta hoja de una vez, no dos: `.cta a`
   (aquí), `.cta-barra` (la cabecera) y `.contacto button,.aplicar button` (los
   formularios). Media docena de líneas más abajo la #15 dejó escrito lo que
   pasa cuando se mueven dos de tres. */
.cta{margin:0}
.numerada+.cta{margin-top:2rem}
.reserva-tipos{display:grid;gap:.85rem;align-content:start}
.reserva-tipos .boton{display:flex;justify-content:space-between;border:1px solid var(--linea);border-radius:999px;padding:1rem 1.5rem}
.reserva-tipos .boton:hover{background:var(--acento);color:var(--papel)}
/* Issue #87, revisión: los botones que NO reservan ya no son casi negros
   (`--tinta`), son del verde de la casa. Reposo: crema sobre `--acento`
   8,77:1; hover: blanco sobre `--acento-oscuro` 13,07:1. Lo mismo en los
   demás fondos oscuros que quedaban: `.cta-barra:hover`, `.rama::before`,
   `.reserva-tipos .boton:hover` (papel sobre `--acento`, 10,60:1) y
   `.saltar-contenido` (crema sobre `--acento`, 8,77:1). Quedan oscuros a
   propósito el marco del vídeo y los monitores dibujados (son un reproductor
   y un dibujo) y la cabecera oscura apagada (#85). */
/* Letra blanca y no crema desde la issue #118: el botón de reservar dejó el
   naranja con letra blanca y pasó a este verde; con la letra crema de antes
   (8,77:1) los dos verdes —el de reservar y el resto— se leían distintos sin
   razón. Blanco sobre `--acento`, 11,07:1 (fórmula WCAG). */
/* Issue #150: el coach eligió entre cuatro maquetas un botón blanco con la
   letra y un borde fino en el verde de la casa, el mismo en toda la web y
   redondo (eso ya venía de la #148, más abajo). Verde sobre blanco, 11,07:1.
   Al pasar el ratón se rellena de verde con la letra blanca, el mismo par al
   revés. `--acento-papel` y no `--acento`: dentro de una banda `--acento` se
   repinta a un verde claro (ver «Botones» en `.banda`, más arriba). */
.cta a{display:inline-block;font:600 .95rem var(--sans);text-decoration:none;
  color:var(--acento-papel);background:#fff;border:1px solid var(--acento-papel);
  border-radius:var(--radio);padding:.8rem 1.9rem;transition:background .15s,color .15s}
.cta a:hover{background:var(--acento-papel);border-color:var(--acento-papel);color:#fff}
.cta.grande a{font-size:1rem;padding:.95rem 2.2rem}
/* El segundo camino del filtro: "Entra → Conoce el Sistema Arketip", para quien
   todavía no quiere agendar (documento VF, slides 7, 10 y 13). Enlace y no
   píldora, y a propósito: dos píldoras seguidas dejan de ser una llamada y su
   alternativa —se convierten en dos botones y la gente elige el de la derecha o
   el más corto—, y la que mueve el embudo es la de arriba.

   Se especifica `.cta.secundario a` (dos clases) para ganarle a `.cta a`, que
   pinta el fondo y el borde de la píldora. Si algún día se toca `.cta a`, esto
   hay que mirarlo. */
.cta.secundario{margin-top:1rem}
.cta.secundario a{background:none;border-color:transparent;padding:0;
  color:var(--acento);font-size:.9rem;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em}
.cta.secundario a:hover{background:none;border-color:transparent;
  color:var(--acento-oscuro)}

/* ── Rejillas de contenido ──────────────────────────────────────────────── */
.rejilla{display:grid;gap:1.25rem;
         grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
/* Cinco cuadros, tres arriba y dos abajo (issue #98). El coach: «los 5
   cuadros de Beneficios por 3 arriba y 2 abajo»; salían 4 + 1, con un cuadro
   huérfano. Una sola regla para CUALQUIER rejilla con exactamente cinco
   elementos (`:has(> :nth-child(5):last-child)`, un solo `:has()`): las de
   cuatro, como «Cómo trabajo contigo» en la home, no cambian. Seis columnas
   de ancho mínimo, cada cuadro ocupa dos: la fila de arriba usa 1-2, 3-4 y
   5-6, y los dos de abajo van CENTRADOS (2-3 y 4-5) para que no parezca que
   falta uno a la derecha. Solo a partir de 56,25em: por debajo, el
   `auto-fit` de arriba ya apila en una o dos columnas. */
@media(min-width:56.25em){
  .rejilla:has(>:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .rejilla:has(>:nth-child(5):last-child)>*{grid-column:span 2}
  .rejilla:has(>:nth-child(5):last-child)>:nth-child(4){grid-column:2/span 2}
  .rejilla:has(>:nth-child(5):last-child)>:nth-child(5){grid-column:4/span 2}
}
.celda{background:var(--papel);border:1px solid var(--linea);
       border-top:3px solid var(--acento);padding:1.5rem 1.4rem}
.celda p{margin:0;font-size:.93rem;color:var(--suave)}
/* La lista dentro de la celda (documento VF, slides 20 y 23). Antes esto no
   existía y los cuatro puntos de cada bloque venían encadenados con "·" en una
   sola frase, que es donde se perdían.

   `list-style:none` con la viñeta puesta a mano en el `::before`, y no un
   `disc` con `padding-left`: la viñeta del navegador cuelga FUERA de la caja y
   en una tarjeta de 15rem con 1.4rem de padding se comía el filo de la
   izquierda. Así el punto está dentro y la sangría la controlamos nosotros. */
.celda .puntos{list-style:none;margin:.75rem 0 0;padding:0;
  font-size:.93rem;color:var(--suave)}
.celda .puntos li{position:relative;padding-left:.85rem;margin-top:.4rem;
  line-height:1.5}
.celda .puntos li::before{content:"";position:absolute;left:0;top:.55em;
  width:.3rem;height:.3rem;border-radius:50%;background:var(--acento)}
/* Sin `texto` encima, la lista arranca pegada al título: el hueco lo daba el
   párrafo que ya no está. */
.celda h3+.puntos{margin-top:.6rem}

.numerada,.fases{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem;
                 grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.numerada li,.fases li{border-top:2px solid var(--linea);padding-top:1rem}
.num{display:block;font:600 .74rem var(--micro);color:var(--acento);
     letter-spacing:.16em;margin-bottom:.5rem}
.numerada p{margin:.4rem 0 0;font-size:.93rem;color:var(--suave)}
ul.simple{columns:2;gap:2.5rem;padding-left:1.1rem;margin:0}
ul.simple li{margin-bottom:.6rem;break-inside:avoid}

/* ── Testimonios ─────────────────────────────────────────────────────────────
   Tarjeta con el mismo filo de acento que `.rama` y `.celda`: es la tercera vez
   que aparece la forma y ya es el registro de la casa. Aquí no hay ni un
   testimonio escrito por nadie que no sea la persona que lo dijo: el bloque
   sale vacío y `resolver_bloques` no publica ninguno sin `permiso: si`. */
.rejilla-testimonios{display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
.testimonio{margin:0;display:flex;flex-direction:column;gap:1.4rem;
  padding:1.9rem 1.7rem;background:var(--papel);border:1px solid var(--linea);
  border-top:3px solid var(--acento)}
/* El `blockquote` global es un destacado enorme en serif: dentro de una ficha
   de testimonio hay que devolverlo al tamaño del cuerpo, o una frase de tres
   líneas se come la tarjeta entera. */
.testimonio blockquote{margin:0;padding:0;border:0;max-width:none;flex:1}
.testimonio blockquote p{margin:0;font:400 1.02rem/1.62 var(--sans);
  color:var(--tinta);letter-spacing:0}
.testimonio figcaption{display:flex;align-items:center;gap:.9rem;
  border-top:1px solid var(--linea);padding-top:1.1rem}
.testimonio img{flex:none;width:3rem;height:3rem;border-radius:50%;
  object-fit:cover;background:var(--fondo)}
.testimonio .quien strong{display:block;font:600 .95rem/1.3 var(--sans)}
.testimonio .rol{display:block;font:400 .85rem/1.4 var(--sans);color:var(--tenue)}

/* ── Cifras ──────────────────────────────────────────────────────────────────
   Prueba social numérica. NO hay ningún número escrito en este fichero ni en la
   plantilla, y no es un olvido: una cifra que nadie ha contado es una mentira
   con formato de dato. Sale lo que el coach escriba en el Taller. */
.rejilla-cifras{display:grid;gap:2.25rem 1.75rem;margin:0;
  grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
.rejilla-cifras>div{border-top:2px solid var(--linea);padding-top:1.1rem}
/* Peso 500 y no 700: esta piel no carga Newsreader en negrita (ver
   «Tipografías»), así que 700 aquí habría sido una negrita sintética del
   navegador, no la tipografía de verdad. 500 es el peso más alto que SÍ está
   autoalojado. */
.rejilla-cifras dt{font:500 clamp(2.6rem,5.2vw,3.6rem)/1 var(--serif);
  letter-spacing:-.02em;color:var(--acento)}
.rejilla-cifras dd{margin:.65rem 0 0;font-size:.94rem;line-height:1.45;
  color:var(--suave)}
.pie-cifras{margin:1.75rem 0 0;font-size:.86rem;color:var(--tenue)}

/* ── Dato ────────────────────────────────────────────────────────────────────
   El primo de `cifras` con un solo par: la cifra a la izquierda y su frase al
   lado. Comparte tipografía, color y filete con `.rejilla-cifras` a propósito,
   para que un dato suelto y una fila de cifras se lean como la misma cosa y no
   como dos maquetaciones distintas de la misma web.
   El tipo estaba declarado en el esquema y la plantilla no lo pintaba: el
   bloque entero desaparecía de la página sin dar ningún error (issue #28). */
.par-dato{display:grid;align-items:center;gap:.5rem 2rem;margin:0;
  grid-template-columns:minmax(auto,15rem) 1fr;
  border-top:2px solid var(--linea);padding-top:1.4rem}
/* Más grande que un `dt` de `.rejilla-cifras` porque aquí hay UNO: es el dato
   que sostiene la página, no uno de cuatro en una fila. Peso 500 y no 700 por
   el mismo motivo que en `.rejilla-cifras dt`, arriba: esta piel no carga
   Newsreader en negrita. */
.par-dato dt{font:500 clamp(3.2rem,8vw,4.8rem)/1 var(--serif);
  letter-spacing:-.02em;color:var(--acento)}
.par-dato dd{margin:0;font:400 clamp(1.02rem,1.6vw,1.18rem)/1.55 var(--sans);
  color:var(--suave);max-width:36rem}
.dato .pie{margin:1.25rem 0 0;font-size:.86rem;color:var(--tenue)}

/* ── FAQ ─────────────────────────────────────────────────────────────────────
   `<details>` del navegador: abre y cierra sin JavaScript, se recorre con el
   teclado y el lector de pantalla dice solo si está abierta. Las objeciones
   contestadas aquí son minutos que no se gastan en la llamada. */
.faq .pregunta{border-bottom:1px solid var(--linea)}
.faq .pregunta:first-of-type{border-top:1px solid var(--linea)}
.faq summary{cursor:pointer;position:relative;list-style:none;
  padding:1.2rem 2.75rem 1.2rem 0;font:600 1.02rem/1.45 var(--sans)}
/* Los dos triángulos por defecto (Safari por un lado, el resto por otro) se
   quitan para poder poner una flecha que gire con el mismo acento de la marca. */
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{color:var(--acento)}
.faq summary::after{content:"";position:absolute;right:.5rem;top:1.5rem;
  width:.6rem;height:.6rem;transform:rotate(45deg);transition:transform .15s;
  border-right:2px solid var(--acento);border-bottom:2px solid var(--acento)}
.faq .pregunta[open] summary::after{transform:rotate(-135deg);top:1.7rem}
.faq .respuesta{padding:0 2.75rem 1.4rem 0;color:var(--suave);font-size:.98rem}
.faq .respuesta p{margin:0 0 .85rem}
.faq .respuesta p:last-child{margin-bottom:0}
/* El foco visible de la regla general cubre a, button e inputs; `summary` no
   está en esa lista y se quedaba sin marcar al llegar con el tabulador. */
summary:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* ── Medida de lectura ──────────────────────────────────────────────────────
   El ancho de CONTENIDO (`--ancho`, 72rem) y el ancho de LECTURA (`--medida`,
   40rem) no son lo mismo. Las rejillas, las tarjetas, la tabla, el vídeo y la
   portada quieren los 72; un párrafo corrido, no: a 72rem salen ~128 caracteres
   por línea y al saltar de renglón el ojo vuelve a la línea equivocada. 40rem
   son ~72 caracteres, que es la medida de un libro. Punto 07 del documento del
   coach: "cuerpo corto".

   Esto ya estaba, pero solo para `.texto p` y a mano. La #38 subió `--ancho` de
   62 a 72rem y ahí se vio lo que faltaba: había prosa colgada del ancho de la
   CAJA, que a 62rem ya salía larga (~110 caracteres) y a 72 se iba de madre.
   Los cuatro casos, con lo que medía cada uno a 72rem si no se tapaba:

     .faq .respuesta      69rem  la respuesta de una pregunta frecuente
     .trayectoria dd      61rem  el detalle de cada tramo (72 − la columna dt)
     .descarte            72rem  el "esto no es para ti" del filtro
     .pie de cada bloque  72rem  la letra pequeña de cifras, dato y vídeo
     .siguiente-paso p    72rem  las dos frases de `gracias.html`

   El quinto, `.siguiente-paso p`, se le escapó a la #38 y lo cazó su revisión.
   Es el peor sitio posible para que se escape: `gracias.html` es la página que
   ve TODO el que manda el formulario de contacto, y ese párrafo medía los
   72rem enteros (~128 caracteres por línea). No lo alcanzaba ninguno de los
   selectores de aquí abajo porque vive dentro de un `<section>`, así que
   `main.lienzo>p` no le llega, y `.siguiente-paso` solo tenía un filete y un
   relleno arriba.

   Y los párrafos sueltos que no viven dentro de ningún bloque: los avisos de la
   agenda, la coletilla de la página de error. Son hijos directos del lienzo, así
   que medían el ancho entero.

   La lista es la respuesta a "ensanchar la caja no puede ensanchar los
   párrafos": lo que gana los diez rem son las rejillas y la matriz; la prosa se
   queda donde estaba. Si se añade un bloque nuevo con un párrafo corrido, su
   sitio es esta lista.

   `.faq summary` NO está, y es la única excepción pensada: la pregunta es una
   línea corta, y su caja tiene que llegar hasta el filo derecho porque ahí vive
   la flecha de abrir y cerrar. Recortada a 40rem, la flecha se quedaba a media
   sección o fuera del área que se puede pulsar. */
.texto p,
.faq .respuesta,
.trayectoria dd,
.descarte,
.pie-cifras,.dato .pie,.video .pie,.nota-cta,
.siguiente-paso p,
main.lienzo>p{max-width:var(--medida)}

/* ── Cita ─────────────────────────────────────────────────────────────────
   Del tamaño del texto de la página desde la issue #124. Hasta entonces era
   un destacado en serif de clamp(1.5rem,3.1vw,2.15rem) —34,4 px a 1440 de
   ancho, 24 px a 390— con un filete encima. El coach, en nota de voz
   (05/10/2026), sobre las dos frases de abajo de /personal/programa: «se
   queda como muy de vendedor […] tiene que ser del mismo estilo que las
   letras anteriores». Y «Sí, cámbialo en todo».

   Ahora: la letra del cuerpo (`--sans`, 18 px, interlineado 1,7, el mismo
   que `body`) y, para que se distinga sin gritar, un filete vertical de 2 px
   a la izquierda en `--acento` (#2c4038; 8,77:1 sobre `--fondo`, mínimo 3:1
   para un filete). Dentro de una banda oscura `--acento` ya se repinta solo
   al claro de la banda. Sin cursiva: las tipografías de la casa no la traen
   y el navegador la inventaría inclinando la redonda. */
blockquote{margin:0;padding:.15rem 0 .15rem 1.25rem;border-left:2px solid var(--acento);
           max-width:var(--medida)}
blockquote p{font:400 1.125rem/1.7 var(--sans);margin:0 0 .6rem}
blockquote p:last-child{margin-bottom:0}
blockquote cite{font:600 .74rem var(--micro);font-style:normal;color:var(--tenue);
                letter-spacing:.16em;text-transform:uppercase}
blockquote .pie{font:400 .95rem/1.6 var(--sans);color:var(--suave);margin-top:.9rem}

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.scroll-x{overflow-x:auto}
/* Que se vea que hay más a la derecha. A 390px la matriz se cortaba en seco y
   parecía contenido perdido: se podía arrastrar desde siempre, pero nada lo
   decía. `_base.html` pone `.desborda` solo cuando la tabla no cabe y quita
   `.al-final` mientras quede algo por ver, así que en escritorio no aparece
   ni la pista ni el degradado. Sin JavaScript se queda como estaba. */
.scroll-x.desborda:not(.al-final){
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 3.5rem),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 3.5rem),transparent)}
.pista-scroll{display:none;margin:.6rem 0 0;
  font:500 .84rem var(--sans);color:var(--tenue)}
.scroll-x.desborda:not(.al-final)+.pista-scroll{display:block}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:34rem;
      background:var(--papel)}
th,td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--linea);
      vertical-align:top}
th{color:var(--tenue);border-bottom-width:2px}
/* El nombre de una fila NO es un rótulo de columna: es una frase ("El que coge
   el relevo", "Generación actual"). Con la versalita y el tracking de las
   cabeceras se leía como un grito y se partía en tres renglones en el móvil.
   Conserva el peso —es una cabecera y así se anuncia— y pierde la caja alta.

   Existe desde que `_matriz_cuadrada` marca esa primera columna como
   `th scope="row"`; antes era un `<td>` y la tabla salía descuadrada. */
th[scope=row]{font:600 .92rem/1.5 var(--sans);letter-spacing:0;text-transform:none;
  color:var(--tinta);border-bottom-width:1px}

.trayectoria{display:grid;grid-template-columns:9rem 1fr;gap:1.6rem 1.75rem;margin:0}
.trayectoria dt{font:600 .82rem var(--micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--acento);padding-top:.15rem}
.trayectoria dd{margin:0;font-size:.96rem}
.trayectoria dd span{display:block;color:var(--suave);font-size:.9rem}
/* La cuarta línea (issue #16): lo que ata cada etapa a una división. Va en el
   acento y con la flecha puesta desde aquí, no desde el texto — el coach
   escribe la frase, no el símbolo. `display:block` en el `span` de arriba es lo
   que la baja a su propia línea: antes el detalle y el origen se pegaban en
   una sola y se leían como una frase seguida. */
.trayectoria dd .origen{margin-top:.35rem;color:var(--acento);
  font:600 .86rem var(--sans)}
.trayectoria dd .origen::before{content:"→ "}

/* ── Golden Circle (issue #16) ───────────────────────────────────────────────
   Tres niveles etiquetados. El primero manda: va más grande y en serif, porque
   el porqué es lo que hay que leer aunque no se lea nada más. Los otros dos
   bajan al cuerpo. Ese escalón ES el bloque; sin él son tres párrafos con
   título y no dicen nada que no dijera una lista.

   No hay tres círculos concéntricos dibujados a propósito: el dibujo de Sinek
   es suyo, y aquí el que tiene que resaltar es el texto del coach. */
.golden-circle .circulo{margin:0;display:grid;gap:0}
.golden-circle .nivel{display:grid;grid-template-columns:9rem 1fr;
  gap:.4rem 1.75rem;padding:1.9rem 0;border-top:1px solid var(--linea)}
.golden-circle .nivel:last-child{border-bottom:1px solid var(--linea)}
.golden-circle dt{font:600 .82rem var(--micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--acento);padding-top:.5rem}
.golden-circle dd{margin:0;max-width:var(--medida)}
/* El primer nivel: el porqué. `first-child` sobre el contenedor del nivel, no
   sobre el `dd`, porque dentro de cada nivel el `dd` siempre es el primero de
   los suyos y la regla se aplicaba a los tres. */
.golden-circle .nivel:first-child{padding-top:0;border-top:0}
/* Issue #72: el coach, mirando `/executive` — «todas las letras iguales» —
   aclaró que hablaba del TIPO de letra, no del tamaño. El porqué seguía en
   serif y el cómo/qué ya estaban en `--sans` (lo heredan del body, sin regla
   propia); ahora los tres van en `--sans`. El tamaño se quedó entonces (issue #16) y el
   coach lo volvió a pedir en la #99: ver más abajo, donde ya no se queda. */
.golden-circle .nivel:first-child dd{font:inherit;letter-spacing:normal}
/* Issue #99, SEGUNDA vez que lo pide: «unifica la letra de el Por qué con el
   resto». La #72 igualó la FAMILIA (los tres en `--sans`) pero dejó el tamaño
   grande a propósito, y el coach lo vuelve a ver desigual. Ahora el porqué
   hereda exactamente lo mismo que el cómo y el qué: 18 px, el del cuerpo
   (medido en el navegador: 28 px el porqué, 18 px los otros dos, antes). Si
   alguien quiere que el porqué vuelva a pesar más, es una decisión del coach
   con su nombre, no un retoque de esta regla. */
.golden-circle .nivel:first-child dt{padding-top:.65rem}

/* ── Principios (issue #68) ────────────────────────────────────────────────
   «Tres fuerzas. Un sistema.» del prototipo (`.principles`): tres columnas
   separadas por un filete vertical, pensadas para pintarse sobre una banda
   oscura (`banda: profunda` en el propio bloque — el mismo mecanismo que ya
   usa cualquier otro tipo desde la #38, nada nuevo que construir).

   Todos los colores usan las variables `--tono-*` con un FALLBACK explícito
   a las de siempre (`var(--tono-tinta,var(--tinta))`): si algún día alguien
   publica este bloque SIN `banda:`, `--tono-*` no existe —esas variables solo
   se declaran dentro de `.portada`/`.banda`— y sin el fallback el texto caería
   al color por defecto del navegador en vez de al de la marca. Con banda, el
   fallback nunca se usa y el contraste es el YA medido de la tabla de «Los
   tonos de banda» (columnas tinta/suave/enlace, todas ≥4,5:1 en los cinco
   tonos). */
.rejilla-principios{display:grid;gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.principio{margin:0;padding-left:1.75rem;
  border-left:1px solid var(--tono-linea,var(--linea))}
.principio:first-child{padding-left:0;border-left:0}
.principio-cabecera{display:flex;align-items:baseline;gap:.9rem;margin:0 0 1.5rem;
  font:600 .72rem var(--micro);letter-spacing:.14em;text-transform:uppercase}
.principio-cabecera .num{color:var(--tono-enlace,var(--acento))}
.principio-cabecera .rotulo{color:var(--tono-suave,var(--suave))}
.principio-palabra{margin:0 0 1rem;font:300 clamp(2.4rem,5vw,3.6rem)/1 var(--serif);
  color:var(--tono-tinta,var(--tinta))}
.principio-texto{margin:0;color:var(--tono-suave,var(--suave));font-size:.98rem;
  line-height:1.6;max-width:var(--medida)}
.principio-pie{margin:1.25rem 0 0;font:600 .68rem var(--micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tono-tenue,var(--tenue))}
@media(max-width:640px){
  .principio{padding-left:0;border-left:0;padding-top:1.75rem;
    border-top:1px solid var(--tono-linea,var(--linea))}
  .principio:first-child{padding-top:0;border-top:0}
}

/* ── Manifiesto (issue #37) ───────────────────────────────────────────────
   Cada línea entra más adentro que la anterior (referencia: simonsinek.com,
   «Our Why»). El sangrado es SOLO visual — `margin-left` en cada `div`, en el
   mismo orden en que están escritos en el HTML — a propósito: un lector de
   pantalla oye las líneas seguidas, no seis niveles anidados.

   Seis pasos de 1.75rem cubren hasta seis líneas (`:nth-child(n+6)` se queda
   en el último escalón si algún día hay una séptima, en vez de seguir
   creciendo sin tope). En escritorio el contenedor mide hasta `--ancho`
   (72rem): 8.75rem de sangrado en el último escalón es una octava parte de
   eso, y dentro de `--medida` (40rem) de sobra para que la frase más larga
   siga teniendo dónde envolver.

   En 390px de ancho de pantalla (issue #37, medido: viewport 24.375rem a
   16px de raíz, menos los 3rem que `main.lienzo` resta siempre del ancho de
   contenido — `min(var(--ancho),100% - 3rem)` — deja 21.375rem, 342px, de
   caja) 8.75rem de sangrado se comen casi la mitad de esos 342px y dejan la
   frase envolviendo en dos o tres palabras por línea: la escalera deja de
   leerse como una escalera y se vuelve un zigzag apretado. La decisión, tal
   y como pedía la issue, no es hacerla desaparecer del todo —es el momento
   más de autor de la página, y sin ningún sangrado dejan de ser líneas en
   escalera y vuelven a ser un párrafo cortado— sino reducir el paso.
   El valor vivo está en la media query de 640px, más abajo en este mismo
   fichero: **no lo repitas aquí**. Hoy son pasos de .8rem con tope en 4rem
   (issue #61); la #37 los había puesto en .4rem con tope en 2rem.

   Y ese "no lo repitas aquí" está escrito con sangre. Este párrafo ha dicho
   un número que el código no hacía DOS veces: "seis pasos … 2.4rem el
   último" hasta el 16/09, y ".4rem … 2rem el último" hasta el 18/09, cuando
   la #61 dobló el paso y nadie bajó a corregir la prosa. Es el fallo que
   este repo persigue —el comentario que dice una cosa y el código que hace
   otra—, y que reaparezca dos veces en el mismo sitio no es descuido de
   nadie: es que la cifra vivía en dos sitios y solo uno se ejecuta. Por eso
   ahora esta cabecera explica el porqué y remite al valor, en vez de
   copiarlo. */
.manifiesto .escalera-manifiesto{display:grid;gap:1rem 0;margin-top:1.75rem}
/* Sin `color` propio, a propósito (issue #38, #15: el mismo fallo del
   `<h3>` de `.celda` en una banda, texto blanco sobre papel blanco). Hereda
   `color` de la sección: `--tinta` fuera de una banda, `--tono-tinta` dentro
   — que es exactamente lo que ya hacen `.golden-circle dd` y el párrafo de
   `.texto`. */
.linea-manifiesto{font:400 clamp(1.2rem,2.8vw,1.6rem)/1.5 var(--serif);
  letter-spacing:-.01em;max-width:var(--medida)}
.linea-manifiesto:nth-child(2){margin-left:1.75rem}
.linea-manifiesto:nth-child(3){margin-left:3.5rem}
.linea-manifiesto:nth-child(4){margin-left:5.25rem}
.linea-manifiesto:nth-child(5){margin-left:7rem}
.linea-manifiesto:nth-child(n+6){margin-left:8.75rem}

/* ── Entradas: podcast y blog (issue #35) ─────────────────────────────────
   Un componente, dos rellenos, igual que en la referencia (simonsinek.com): el
   podcast pinta la imagen al lado del texto en dos columnas (`.disposicion-
   lateral`), el blog la pinta arriba en tres (`.disposicion-apilada`, y la que
   sale por defecto). Misma tarjeta, mismo lenguaje que `.rama`: filo superior
   de acento y `translateY(-2px)` al pasar el ratón — avisado en la issue, no
   se inventa una tarjeta nueva.

   Hoy no hay ni una imagen real (ninguna entrada existe), así que la tarjeta
   tiene que verse completa SIN `<img>`. Con `display:flex`/`grid` y un solo
   hijo (`.entrada-cuerpo`, siempre presente) eso sale solo: sin imagen, el
   cuerpo ocupa el 100% de la tarjeta porque no hay nada más con quien
   repartirse el espacio — no hace falta ningún `:has()` ni una regla aparte
   para el caso sin foto. */
.entradas .cta.ver-todos{margin:0 0 2rem}
.entradas .cta.ver-todos:last-child{margin:2rem 0 0}
.rejilla-entradas{display:grid;gap:2rem}
.entrada{display:flex;flex-direction:column;background:var(--papel);
  border:1px solid var(--linea);border-top:3px solid var(--acento);
  overflow:hidden;text-decoration:none;color:var(--tinta);
  transition:transform .15s,box-shadow .15s}
.entrada:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgb(15 32 56/.11)}
.entrada img{display:block;width:100%;object-fit:cover;background:var(--fondo)}
.entrada-cuerpo{padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.entrada h3{margin:0;font-size:1.1rem}
.entrada .resumen,.entrada .autor{margin:0;font-size:.93rem;color:var(--suave)}
.entrada .enlace{margin-top:.3rem;font:600 .85rem var(--sans);
  color:var(--acento);letter-spacing:.01em}
.entrada-meta{margin:0;display:flex;gap:.6rem;flex-wrap:wrap;
  font:600 .72rem var(--micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue)}
/* Dos columnas, imagen cuadrada a la izquierda del texto (el podcast: un
   headshot, no una portada panorámica). `flex:none` en la imagen y `flex:1`
   en el cuerpo, así una tarjeta sin foto no deja un hueco: el cuerpo se
   estira solo a ocupar toda la anchura. */
.disposicion-lateral{grid-template-columns:repeat(2,1fr)}
/* `align-items:flex-start` (issue #35): `.entrada` es `display:flex` sin
   `align-items` propio, así que hereda el valor por defecto (`stretch`). En
   columna (`.disposicion-apilada`) eso no se nota — el eje cruzado ahí es el
   ancho, y ya es el 100% por el `grid`. Pero en fila (aquí) el eje cruzado es
   la ALTURA, y `stretch` tira de la imagen hasta la altura de toda la
   tarjeta, pisando su propio `aspect-ratio:1/1`: medido en el navegador, un
   headshot de verdad salía en 128x214,56px en vez de cuadrado. */
.disposicion-lateral .entrada{flex-direction:row;align-items:flex-start}
.disposicion-lateral .entrada img{flex:none;width:8rem;aspect-ratio:1/1}
.disposicion-lateral .entrada-cuerpo{flex:1;justify-content:center}
/* Tres columnas, imagen arriba (el blog). 3:2 porque no hay ninguna imagen
   real con la que medir una proporción mejor — es una proporción editorial
   común, no una medida del contenido (avisado en el informe de la issue). */
.disposicion-apilada{grid-template-columns:repeat(3,1fr)}
.disposicion-apilada .entrada img{aspect-ratio:3/2}
@media(max-width:640px){
  .disposicion-lateral,.disposicion-apilada{grid-template-columns:1fr}
  .disposicion-lateral .entrada{flex-direction:column}
  .disposicion-lateral .entrada img{width:100%;aspect-ratio:3/2}
}

/* ── Pie oscuro de columnas ─────────────────────────────────────────────── */
.pie-sitio{background:var(--pie);color:#cdd6cc;font:400 .9rem/1.7 var(--sans)}
.pie-interior{max-width:calc(var(--ancho) + 3rem);margin:0 auto;
  padding:4rem 1.5rem 3.25rem;display:grid;gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
.pie-sitio .marca{color:var(--fondo)}
/* Issue #53: era `.pie-sitio .marca span` — el pie ya no mete la división en
   un `span` dentro de `.marca` (ese enlace es SOLO la raíz); es un `.marca-division`
   hermano, y el `.pie-sitio` de aquí solo le tenía que cambiar el color. */
.pie-sitio .marca-division{color:var(--acento-claro)}
.pie-marca p{margin:1rem 0 0;color:#a4b0a0;font-size:.88rem}
.pie-nav,.pie-legal{display:grid;gap:.6rem;align-content:start}
.pie-sitio a{color:#cdd6cc;text-decoration:none}
.pie-sitio a:hover{color:var(--acento-claro)}

@media(max-width:640px){
  /* El aire baja por lo mismo dentro y fuera de una banda: en una pantalla de
     390px, cinco rem de color vacío antes del titular son un tercio de la
     pantalla gastada en nada. */
  :root{--aire:1.5rem;--aire-banda:2.5rem}
  ul.simple{columns:1}
  /* A una columna, el `gap` separa también el periodo de SU propio detalle, así
     que el aire entre tramos se lleva con el margen del `dd` y no con el gap.
     Con `gap:1.4rem` la fecha se quedaba flotando lejos de lo que fecha. */
  .trayectoria{grid-template-columns:1fr;gap:.4rem 0}
  .trayectoria dd{margin-bottom:1.6rem}
  /* A 15rem de columna, la cifra y su frase no caben una al lado de la otra en
     un móvil: la frase salía en columna de tres palabras. Debajo, y el número
     un punto más pequeño para que no se coma la pantalla. */
  .par-dato{grid-template-columns:1fr;gap:.7rem 0}
  .par-dato dt{font-size:clamp(2.8rem,14vw,3.6rem)}
  .golden-circle .nivel{grid-template-columns:1fr;gap:.6rem 0;padding:1.5rem 0}
  .golden-circle dt{padding-top:0}
  .golden-circle .nivel:first-child dt{padding-top:0}
  /* Cinco pasos de .8rem (issue #61, corrige el paso de la #37). La #37 lo
     calibró en .4rem por paso pensando en el peor caso de seis líneas —
     último escalón 2rem (32px), 310px libres de los 342px de caja a 390px
     de ancho. El contenido real que se publicó (issue #58) tiene CUATRO
     líneas, así que el escalón que se usa de verdad es el tercero: 1.2rem
     (19.2px) sobre 342px de caja se ve casi alineado a la izquierda — la
     escalera casi no se nota.

     Medido en el navegador a 390px con el manifiesto real: la línea más
     larga («por falta de capacidad.») mide 187px sin envolver. Doblar el
     paso a .8rem deja el último escalón usado (el cuarto) en 2.4rem (38.4px)
     — el doble de visible — y sigue con margen de sobra: probado también
     con seis líneas de prueba más largas que las reales (hasta 208px de
     ancho de texto), la más ajustada de las seis queda en 271.75px sobre
     342px de caja, sin envolver. Sigue siendo la misma escalera regular
     hasta el quinto paso y `:nth-child(n+6)` se queda en ese tope si algún
     día hay una séptima línea. */
  .linea-manifiesto:nth-child(2){margin-left:.8rem}
  .linea-manifiesto:nth-child(3){margin-left:1.6rem}
  .linea-manifiesto:nth-child(4){margin-left:2.4rem}
  .linea-manifiesto:nth-child(5){margin-left:3.2rem}
  .linea-manifiesto:nth-child(n+6){margin-left:4rem}
  .portada{padding:3.44rem 0 3.78rem} /* issue #79: misma proporción (0,6875×) que el tope del `clamp` del h1 sin foto */
  .portada.compacta{padding:3.5rem 0 3.75rem}
  .cabecera-interior{gap:1rem;padding:1rem 1.25rem}
  .cabecera nav{gap:1.1rem;order:3;flex-basis:100%}
  .cabecera nav a.nav-aparte{padding-left:1.1rem} /* issue #136: el mismo `gap` de aquí */
  .pie-interior{padding:3rem 1.25rem 2.5rem}
  /* Issue #57: el nombre corto sustituye al completo solo aquí abajo. */
  .barra-divisiones .nombre-completo{display:none}
  .barra-divisiones .nombre-corto{display:inline}
}

/* ── Funnel: contacto y aplicación (F7) ────────────────────────────────── */
.contacto,.aplicar form{display:grid;gap:1.3rem;max-width:34rem;margin:0}
.contacto label,.aplicar .campo>label,.aplicar fieldset label{
  display:block;font:600 .85rem var(--sans);color:var(--tinta)}
.contacto input:not([type=radio]):not([type=checkbox]),.contacto select,
.contacto textarea,
.aplicar input:not([type=radio]):not([type=checkbox]),.aplicar textarea{
  display:block;width:100%;box-sizing:border-box;margin-top:.45rem;padding:.7rem .8rem;
  font:400 1rem var(--sans);color:var(--tinta);background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio)}
/* El foco de un campo. Esta regla NO escribe `outline`, y eso es el arreglo:
   antes decía `outline:none;border-color:var(--acento)` y las dos mitades
   estaban muertas. Resuelto a mano, propiedad por propiedad, para un
   `<input>` de `.contacto` dentro de una banda (lo cazó la segunda revisión
   de la #38, con las medidas del navegador delante):

     outline-style · `input:focus-visible` (0,1,1) pone `solid`
                   · `.contacto input:focus` (0,2,1) ponía `none` ← ganaba
       El recuadro no existía. Chrome: `outline-style:none`, y de paso
       `outline-width:3px` (el `medium` inicial), o sea que el atajo `outline`
       se llevaba también el ancho.
     outline-color  · `.banda input:focus-visible` (0,2,1), y por ir después
       ganaba el color del tono… sin nada que colorear. Ese era el error del
       primer pase: se le dio color a un contorno que no se pintaba.
     border-color   · `.contacto input:not([type=radio]):not([type=checkbox])`
       (0,3,1) pone `--linea`
                   · `.contacto input:focus` (0,2,1) ponía `--acento` ← perdía
       Así que un campo de texto tampoco cambiaba de borde: el `<input>` de
       «Nombre» no tenía NINGÚN indicador de foco, ni dentro ni fuera de una
       banda. `select` y `textarea` sí, porque en la regla de estilo van sin
       los dos `:not()` y se quedan en (0,1,1).

   De ahí las dos correcciones: quitar el `outline` de aquí (que el recuadro lo
   ponga la sección de «Foco visible», que es donde se decide su color) y subir
   la especificidad del `border-color` a (0,4,1) repitiendo los mismos `:not()`
   de la regla de estilo. Los dos `:not()` no son adorno: emparejan esta regla
   con la de arriba, que es lo que hace que la de foco gane. */
.contacto input:not([type=radio]):not([type=checkbox]):focus,.contacto select:focus,
.contacto textarea:focus,
.aplicar input:not([type=radio]):not([type=checkbox]):focus,
.aplicar textarea:focus{border-color:var(--acento)}
/* El tercero de los tres botones de esta hoja. Ver «Botones»: los tres van con
   `--radio` o ninguno. */
.contacto button,.aplicar button{
  justify-self:start;font:600 .95rem var(--sans);
  color:var(--acento-papel);background:#fff;border:1px solid var(--acento-papel);
  border-radius:var(--radio);padding:.8rem 1.9rem;cursor:pointer;transition:background .15s}
.contacto button:hover,.aplicar button:hover{background:var(--acento-papel);
  border-color:var(--acento-papel);color:#fff}
.contacto button[disabled],.aplicar button[disabled]{opacity:.55;cursor:default}
/* La casilla de consentimiento va al lado de su texto y en peso normal. Lleva
   `.contacto label.consentimiento` porque `.contacto label` la ganaba por
   especificidad: la casilla salía centrada encima del texto y el texto en
   negrita, como si el consentimiento fuera un titular. */
.consentimiento,.contacto label.consentimiento{display:flex;gap:.7rem;
  align-items:flex-start;font:400 .84rem/1.55 var(--sans);color:var(--suave)}
.consentimiento input{margin-top:.25rem}
input,select,textarea{accent-color:var(--acento)}

/* El honeypot: fuera de la vista, no del DOM. Un display:none se lo saltan. */
.hp{position:absolute;left:-9999px;top:-9999px;height:1px;overflow:hidden}

/* Oculto de la vista pero no del DOM: la etiqueta que necesita un lector de
   pantalla y no necesita nadie que ve la página (el campo único de
   `captura_email` ya lo dice todo con el `placeholder` y el botón de al
   lado). Un `display:none` se lo saltaría igual que al honeypot de arriba. */
.oculta-visual{position:absolute;left:-9999px;top:-9999px;height:1px;overflow:hidden}

/* ── Captura de email de una línea (issue #36, referencia simonsinek.com
   «Stay Inspired») ─────────────────────────────────────────────────────────
   Dos columnas como `.filtro`, no una rejilla nueva: mismo `auto-fit` con
   `min(24rem,100%)`, así que en pantalla estrecha se apila sola sin media
   query. Sin `banda:` en el YAML de hoy — un color de fondo aquí es una
   decisión de la #38 que no toca esta issue, y sin ella no hay contraste
   nuevo que medir. */
.captura-email{display:grid;gap:2.5rem 3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr))}
.captura-email-form{display:grid;gap:1.1rem;align-content:start;margin:0}
.captura-email-form>*{margin:0}
/* El campo y el botón en la misma línea en pantalla ancha (la referencia:
   `flex flex-col gap-3 sm:flex-row sm:items-center`), uno debajo del otro en
   móvil. Sin media query en el resto del formulario: solo esta fila cambia
   de eje, el consentimiento se queda siempre en columna. */
.suscripcion{display:grid;gap:1rem;max-width:30rem;margin:0}
.suscripcion-campo{display:flex;flex-direction:column;gap:.75rem}
@media (min-width:40em){.suscripcion-campo{flex-direction:row}}
.suscripcion-campo input{flex:1;box-sizing:border-box;margin:0;padding:.7rem .8rem;
  font:400 1rem var(--sans);color:var(--tinta);background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio)}
.suscripcion-campo button{flex:none;font:600 .95rem var(--sans);white-space:nowrap;
  color:#fff;background:var(--acento);border:1px solid var(--acento);
  border-radius:var(--radio);padding:.8rem 1.6rem;cursor:pointer;transition:background .15s}
.suscripcion-campo button:hover{background:var(--acento-oscuro);border-color:var(--acento-oscuro)}
.captura-email .consentimiento{margin:0}
.pie-legal-captura{margin:0;font-size:.8rem;color:var(--tenue)}
/* La cita de la columna derecha reutiliza el `blockquote` global: mismo
   tamaño, mismo filo superior, para no duplicar su estilo aquí. */
.captura-email blockquote{margin:0}

.aplicar .progreso{color:var(--acento);margin:0 0 1.5rem}
.aplicar fieldset.grupo{border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--papel);padding:1.25rem 1.4rem;display:grid;gap:1rem}
.aplicar legend{font:600 .72rem var(--micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);padding:0 .4rem}
.aplicar .ayuda{margin:.25rem 0 0;font-size:.88rem;color:var(--tenue)}
.opciones{display:grid;gap:.55rem;margin-top:.7rem}
/* Una opción no es una etiqueta de campo: va en peso normal y al tamaño del
   cuerpo. `.aplicar fieldset label` (0,1,2) le gana a `.opcion` (0,1,0) por el
   nivel de tipo, así que hace falta subir la especificidad con
   `.aplicar fieldset label.opcion` (0,2,2) o las respuestas salen en negrita y
   más pequeñas que la pregunta.

   Pero por ese selector largo pasa SOLO lo que de verdad le pelea la regla de
   la etiqueta —`display` y `font`—, y ese reparto es el arreglo. Antes iba la
   regla entera, atajo `border:1px solid var(--linea)` incluido, y a (0,2,2)
   ese atajo mataba las TRES declaraciones de `border-color` de abajo:

     .opcion:focus-within      (0,2,0)  ← perdía
     .opcion:hover             (0,2,0)  ← perdía
     .opcion:has(input:checked) (0,2,1) ← perdía

   Y solo en UNA de las dos plantillas, que es lo que lo hacía invisible:
   `aplicar.html` mete la opción dentro de un `fieldset.campo-opciones` y el
   selector largo encaja; `agenda.html` cuelga `div.opciones` del propio
   formulario y no encaja. El mismo componente daba dos filos distintos según
   la página. Leído de Chrome sobre el DOM real de cada una, `border-color`:

                        ANTES              DESPUÉS
     marcada  aplicar   rgb(220,214,198)   rgb(28,75,138)
              agenda    rgb(28,75,138)     rgb(28,75,138)
     :hover   aplicar   rgb(220,214,198)   rgb(88,99,122)
              agenda    rgb(88,99,122)     rgb(88,99,122)

   Lo que se veía, dicho sin inflarlo, porque la revisión lo dio por más grave
   de lo que era y las capturas dicen otra cosa: la opción MARCADA sí se
   distinguía en `/aplicar`, porque el `box-shadow:inset` de la línea de abajo
   no iba por especificidad y seguía pintando su raya navy por dentro. Lo que
   se perdía era la mitad de la señal —una raya de 1px en vez de un filo de
   2px— y la coherencia entre las dos páginas. Lo que estaba muerto del todo
   era el `:hover`: en `/aplicar` pasar el ratón por una opción no hacía
   absolutamente nada. Y en `:focus-within` el contorno tapaba el fallo.
   Tercera declaración muerta de la #38 y la misma causa que las dos primeras
   (ver «El foco de un campo» y «Foco visible»): un atajo escrito con más
   especificidad que el estado que tiene que pisarlo. La lección, para la
   próxima: en esta hoja, un selector de especificidad alta lleva las
   propiedades que necesitan esa especificidad y ni una más. */
.opcion{display:flex;gap:.7rem;align-items:baseline;
  padding:.7rem .9rem;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);cursor:pointer;font:400 .97rem var(--sans)}
.aplicar fieldset label.opcion{display:flex;font:400 .97rem var(--sans)}
.opcion:hover{border-color:var(--tenue)}
.opcion:has(input:checked){border-color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento)}
.error,.error-form{display:block;margin-top:.35rem;
  font:500 .88rem var(--sans);color:#a01c1c}
.error-form{border-left:3px solid #a01c1c;padding:.55rem .9rem;margin:0 0 1.5rem;
  background:var(--papel)}
/* Aviso informativo (enlace caducado, formulario reiniciado): no es un error. */
.aviso-form{border-left:3px solid var(--tenue);padding:.55rem .9rem;margin:0 0 1.5rem;
  background:var(--papel);font:500 .88rem/1.6 var(--sans);color:var(--suave)}
.tenue{color:var(--tenue)}

/* Foco visible: quien navega con teclado tiene que saber dónde está.
   Sobre color, el recuadro se pinta con `var(--tono-enlace)` —el tono ya sabe
   cuál es su color de enlace— y hay que nombrar TODOS los elementos que se
   enfocan, no solo `a`, `button` y `summary`. Aquí decía lo contrario: que
   dentro de una banda `var(--acento)` ya venía repintado al navy claro y el
   foco se veía solo. Es falso justo donde importa, porque «lo que trae su
   propio papel recupera sus tintas» devuelve `--acento` al navy oscuro en
   `input`, `select`, `textarea` y `.opcion` —lo que se rellena en un
   formulario—, y `outline-offset` dibuja el recuadro FUERA del campo, o sea
   sobre la banda. Medido con la paleta ivory/navy de entonces (#1c4b8a sobre
   cada tono, incidente de la #38, no recalculado con esta piel porque el
   color que causaba el fallo ya no existe):

     division 1,74:1 · sucesión 1,58:1 · executive 1,71:1 · profunda 2,02:1
     pizarra 1,01:1 · acento 1,00:1

   En las dos últimas el recuadro era literalmente invisible: bastaba un
   `formulario_contacto` con `banda:` para dejar sin foco a quien navega con el
   teclado. Con `--tono-enlace` el mismo recuadro mide, RECALCULADO para esta
   piel, 7,14 · 6,88 · 7,16 · 7,96 · 4,59 · 4,72:1 sobre las bandas oscuras y
   8,67:1 sobre la clara (ahí el enlace es el verde oscuro de papel), todos
   por encima del 3:1 que pide un elemento de interfaz. El mecanismo lo cazó
   la revisión de la #38; los números de esta lista son de esta issue.

   Y el literal `--acento-claro` tampoco valía para la portada: sobre una
   portada `tono-clara` —que el esquema admite— el recuadro se quedaba en
   1,38:1 con la paleta vieja (con esta, 1,84:1: sigue sin servir). Ni un
   color escrito a mano aquí: se le pregunta al tono.

   ── Y AQUÍ EMPIEZA LA SEGUNDA REVISIÓN, QUE ES LA QUE IMPORTA ────────────
   Todo lo de arriba estaba bien calculado y no se veía. El primer pase de la
   #38 le dio color a un contorno que no existía: la regla de foco del funnel
   (F7, «El foco de un campo», más arriba) escribía `outline:none` con
   especificidad (0,2,1) y esta de aquí abajo la escribe con (0,1,1), así que
   `outline-style` se quedaba en `none` y `outline-width` en su `medium`
   inicial. El `outline-color` del tono ganaba su propiedad —(0,2,1) y va
   después— y no tenía nada que colorear. En enlaces y botones sí se veía,
   porque a esos la regla del funnel no los nombra; en `input`, `select` y
   `textarea` no se veía NADA. Lo midió el validador tabulando campo a campo,
   y no lo cazó ningún test porque los tests miraban la declaración y no cuál
   gana. El arreglo está allí: esa regla ya no escribe `outline`.

   Los números de arriba eran teóricos hasta que el `validador` los leyó del
   navegador (Chrome 140, `getComputedStyle` del elemento enfocado y
   `background-color` del antepasado que pinta detrás del recuadro), con la
   paleta ivory/navy — esto es un registro histórico de esa medición, con
   los rgb() literales de entonces, y NO se ha repetido en el navegador con
   esta piel (ningún agente de esta issue tiene navegador; el informe dice
   qué falta por comprobar):

     campo de `.contacto` dentro de banda · rgb(168,198,236) sobre
       division 8,57 · el mismo tono con `body.div-sucesion` 7,82 y con
       `body.div-executive` 8,43 · profunda 9,95 · pizarra 4,99 · acento 4,93
     banda clara · rgb(28,75,138) sobre rgb(234,228,210) · 6,82
     dentro de `fieldset.grupo` o `.opcion` · rgb(28,75,138) sobre el papel
       rgb(253,251,245) · 8,38 (el recuadro no cae sobre la banda)
     fuera de banda · rgb(28,75,138) sobre el ivory · 7,88

   Coincidían con los teóricos de entonces porque el cálculo estaba bien; lo
   que estaba mal era suponer que ese color llegaba a pintarse. El mecanismo
   que arregla —que gana el `border-color`/`outline-color` que corresponde—
   no depende de qué hex haya en cada variable, así que sigue valiendo con
   esta piel; los números recalculados (sin navegador) están en el bloque de
   arriba, con `--tono-enlace` de esta piel.

   ── EL BARRIDO DE LA #42 ─────────────────────────────────────────────────
   Los números de este bloque (2,16-2,42:1, 10,66:1, 1,57:1, 2,25:1…) son de
   la medición original con la paleta ivory/navy y NO se han repetido en el
   navegador con esta piel — el mecanismo que describen no cambia con la
   paleta, y los valores literales sí; los recalculados sin navegador de la
   nueva `--acento-claro` (`--sage`) están en la cabecera del fichero y en
   la regla de `.marco-video`, más abajo.

   La #38 barrió `.banda` y `.portada`. La #42 recorrió con el tabulador lo que
   quedaba —`/{division}/aplicar` y `/{division}/agenda` de punta a punta, más
   las dos superficies que no son ni banda ni portada— y encontró dos cosas,
   ninguna de ellas en esos dos formularios: los suyos están todos cubiertos.

   1. El marco del vídeo (`.marco-video`, más abajo en la hoja). Tres controles
      a 2,16-2,42:1, y el peor de ellos sin recuadro ninguno porque el marco lo
      recortaba. Y un CUARTO que no se encuentra tabulando la web tal como
      está, porque no existe en ninguna plantilla: el `<iframe>` que el script
      de `_base.html` pone en el sitio del botón al pulsar Reproducir. Con
      JavaScript activado —o sea, en el caso normal— es lo que queda enfocable
      dentro del marco, y no lo alcanzaba ninguna regla de la hoja. Lo cazó la
      revisión de la #42 leyendo el JavaScript, no la plantilla. El arreglo y
      su porqué están allí, junto a la regla — y allí está también lo que la
      #42 NO dejó resuelto: tres de los cuatro están validados en el navegador
      y el `<iframe>` no, porque Chromium no le aplica la regla (issue #43).
      Y una condición que vale para los cuatro: los 10,66:1 son sin cartel;
      con un cartel claro, 1,57:1 (issue #44).
   2. `.scroll-x`, la caja que se arrastra de la matriz. Es un `div` con
      `tabindex="0"`, o sea un control de pleno derecho, y no estaba en la
      lista de aquí abajo: se quedaba con el anillo del navegador en vez del de
      la marca. El mismo `--tono-enlace`/`--acento` que ya usa el resto de la
      hoja, así que sus números son los de la tabla de «Los tonos de banda»,
      RECALCULADOS para esta piel: 7,14 · 6,88 · 7,16 · 7,96 · 4,59 · 4,72:1
      sobre las bandas oscuras, 8,67:1 sobre la clara y 9,57:1 sobre el papel.
      Y va con un aviso que NO es un defecto nuevo —le pasaba igual al anillo
      del navegador, así que no hay regresión— pero que hay que saber, porque
      deja el anillo en nada en la pantalla más pequeña. Está medido en el
      navegador por el validador el 11/09/2026, con un elemento de prueba
      aparte y con un barrido de píxeles sobre la captura, a 390px, con la
      tabla desbordada y sin arrastrar hasta el final:

        A ancho de escritorio el anillo sale ENTERO y correcto.
        Con la máscara encendida no desaparece un filo: desaparece el anillo
        ENTERO, y la causa es `mask-clip`, que por defecto vale `border-box`.
        El recuadro se dibuja a `+2px`, o sea FUERA de esa caja de recorte, y
        lo que cae fuera de la caja de recorte no se pinta.

      La máscara es `.scroll-x.desborda:not(.al-final)` y solo se enciende en
      ese caso (móvil, tabla que desborda, sin llegar al final).
      Aquí hubo una hipótesis anterior —que la causa era el `mask-repeat` sin
      declarar y que lo que se perdía era el filo izquierdo— y se quita en vez
      de dejarla: era razonable, acertó el sitio, y resultó no ser la causa.
      Una explicación bonita que no es la buena manda al siguiente a arreglar
      lo que no está roto.
      Qué hacer va en la **issue #45**, con tres caminos: declararle un
      `mask-clip` que deje sitio al contorno, o darle el contorno hacia dentro
      como se hizo en el marco del vídeo, o tocar la máscara. El tercero se
      descarta a conciencia y se escribe aquí para que nadie lo redescubra:
      esa máscara ES la pista de «hay más tabla a la derecha», y quitarla
      arregla el foco rompiendo lo que la #38 puso ahí a propósito. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.scroll-x:focus-visible{
  outline:2px solid var(--acento);outline-offset:2px}
/* Issue #45: `.scroll-x` no puede compartir el `outline-offset:2px` de arriba.
   La máscara que difumina el filo derecho en móvil (`.scroll-x.desborda:not(
   .al-final)`, ver el comentario de más arriba) recorta con `mask-clip`, que
   por defecto vale `border-box`: todo lo que se dibuje FUERA de esa caja no se
   pinta, y a `+2px` el contorno entero cae ahí y desaparece — no solo un
   filo, el anillo completo. Se descartó tocar `mask-clip` (sin un valor que
   sirviera en los navegadores que usa este proyecto) y tocar la máscara (es
   la pista de «hay más tabla a la derecha», issue #38: quitarla no es este
   arreglo). La salida es la misma que ya lleva el marco de vídeo por el mismo
   motivo — contorno hacia DENTRO en vez de hacia fuera — así que se queda
   dentro de la caja de recorte en los dos casos, con máscara encendida o no.
   Medido en el navegador a 390px, tabla desbordada y sin arrastrar hasta el
   final: con `outline-offset:2px` el anillo no se ve; con `-2px`, los cuatro
   lados se ven completos. */
.scroll-x:focus-visible{outline-offset:-2px}
.portada a:focus-visible,.portada button:focus-visible,
.portada summary:focus-visible,.portada input:focus-visible,
.portada select:focus-visible,.portada textarea:focus-visible,
.portada .scroll-x:focus-visible,
.banda a:focus-visible,.banda button:focus-visible,
.banda summary:focus-visible,.banda input:focus-visible,
.banda select:focus-visible,.banda textarea:focus-visible,
.banda .scroll-x:focus-visible{
  outline-color:var(--tono-enlace)}
.pie-sitio a:focus-visible{outline-color:var(--acento-claro)}
.opcion:focus-within{border-color:var(--acento);outline:2px solid var(--acento);
  outline-offset:1px}
/* `.opcion` va en su propia línea y no en la lista de arriba por dos motivos:
   su regla escribe el `outline` entero (0,2,0, así que hay que ganarle con
   0,3,0) y el recuadro le sale a 1px del filo, que dentro de una banda es
   color de banda.

   El `border-color` de aquí arriba estuvo MUERTO en `aplicar.html` hasta el
   cuarto pase de la #38 —el atajo `border` de `.opcion` iba a (0,2,2) por
   compartir regla con `.aplicar fieldset label.opcion`— y aquí decía «El
   borde sí se queda en el acento», que era falso justo en esa plantilla.
   Está arreglado arriba, en «Una opción no es una etiqueta de campo», y lo
   que ahora se cumple es lo que la frase quería decir: el borde se queda en
   `--acento` en las dos plantillas, y ese acento cae sobre el papel claro de
   la propia opción, no sobre la banda. */
.portada .opcion:focus-within,.banda .opcion:focus-within{
  outline-color:var(--tono-enlace)}
/* Y la radio de dentro NO pinta su propio recuadro: el del `label` de arriba
   ya rodea la opción entera. Con los dos, una franja horaria enfocada en
   `/sucesion/agenda` salía con un cuadrado de 2px alrededor del punto redondo
   de la radio, y en un selector de huecos —donde toda la tarea es «cuál he
   elegido»— ese cuadrado se lee como MARCADO. Dos estados con el mismo dibujo
   en la pantalla donde solo importa distinguirlos. Lo votó así la revisión del
   tercer pase de la #38 y se comprobó en el navegador.
   Que el foco se vea una vez, no dos: el anillo del `label`. Por eso este
   `outline:none` no repite el fallo de los tres pases anteriores —no apaga un
   indicador, quita el segundo de dos—, y por eso `:focus-within` es el
   compañero obligado: el `label` SIEMPRE envuelve a su radio en las dos
   plantillas, así que no hay foco de radio sin anillo de opción. */
.opcion input:focus-visible{outline:none}
/* Y la vuelta atrás para lo que se enfoca DENTRO de una caja de papel claro:
   los campos de un `fieldset.grupo`. Ahí el recuadro no cae sobre la banda,
   cae sobre el papel de la caja, y el claro se queda en 1,70:1 mientras el
   acento medía 8,38:1 con la paleta ivory/navy. RECALCULADO sin navegador
   para esta piel: el claro (`--sage`) 2,25:1, el acento (`--acento-papel`)
   11,07:1 — la misma conclusión, con más margen todavía. La regla de arriba
   dice «sobre color, el color del tono»; esta dice dónde deja de haber
   color.
   Aquí estaba también `.banda .opcion input:focus-visible`, y se fue con el
   segundo recuadro: la radio de una opción ya no pinta contorno ninguno, así
   que darle color era darle color a nada — la cuarta declaración muerta, esta
   evitada antes de escribirla.
   Hoy no se alcanza: `fieldset.grupo` solo existe en `agenda.html` y
   `aplicar.html`, que no llevan banda, y ningún tipo de bloque de
   `pagina.html` lo saca. Está por lo mismo que está en la lista de «lo que
   trae su propio papel»: para que el día que un formulario con cajas entre en
   una banda, no haya que acordarse de esto.
   Que no se alcance no significa que no se pueda ver: el 8,38:1 (con la
   paleta ivory/navy) estuvo medido en Chrome sobre una página de andamio con
   este DOM exacto y esta misma hoja servida por :8080. No es una página de
   la web, y se dice así a propósito. El 11,07:1 recalculado para esta piel
   NO se ha repetido en el navegador: es aritmética, no medición. */
.banda fieldset.grupo input:focus-visible,
.banda fieldset.grupo select:focus-visible,
.banda fieldset.grupo textarea:focus-visible{outline-color:var(--acento-papel)}

/* El grupo de radios es un fieldset con su pregunta como legend. */
.aplicar fieldset.campo-opciones{border:none;padding:0;margin:0;background:none}
.aplicar fieldset.campo-opciones legend{padding:0;letter-spacing:normal;
  text-transform:none;font:600 .85rem var(--sans);color:var(--tinta)}

.aplicar .acciones{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.aplicar button.atras{background:none;color:var(--suave);border:1px solid var(--linea)}
.aplicar button.atras:hover{background:none;border-color:var(--tenue);color:var(--tinta)}

.siguiente-paso{border-top:2px solid var(--linea);padding-top:2.25rem}
.siguiente-paso .cta{margin-top:1.75rem}

/* ── El vídeo ───────────────────────────────────────────────────────────────
   La pieza que más mueve del embudo, así que ocupa el ancho de lectura entero
   —antes se quedaba en 46rem, con dos palmos de crema a los lados— y sube a
   morder la banda oscura de la portada cuando va justo debajo. Ese solape es
   lo que hace que se lea como "esto es lo primero", sin tocar el contenido.

   El marco es 16:9 SIEMPRE, con vídeo y sin él: así el hueco de "muy pronto"
   ocupa exactamente lo que ocupará el vídeo y la página no da un salto el día
   que se grabe. Y a 390px 16:9 son ~192px de alto: el botón de agendar sigue
   entrando en la misma pantalla. */
.video{position:relative;z-index:1}
/* El solape solo cuando el marco es lo primero del bloque: si el coach le pone
   un titulillo o una entradilla al vídeo, ese texto caería encima de la banda
   oscura y se quedaría negro sobre negro. Con `:has()` la regla se desactiva
   sola, y en un navegador que no lo entienda simplemente no hay solape. */
main.lienzo>.portada+.video:has(>.marco-video:first-child){margin-top:-3.5rem}
/* Casi negro, NO el color de la banda: cuando el marco sube a solaparse con la
   portada, dos tonos iguales se funden en un agujero sin forma. Un punto por
   debajo de la banda se lee como lo que es, una pantalla. El filo claro es lo
   que dibuja el borde mientras está encima del oscuro. */
/* Y las dos variables son de la #42: el marco TRAE SU PROPIO PAPEL, solo que
   oscuro. Es el reverso exacto de «lo que trae su propio papel recupera sus
   tintas» (ver «Los tonos de banda»): una tarjeta dentro de una banda vuelve
   al tono oscuro porque su fondo es claro; el marco de vídeo va al claro
   porque su fondo es casi negro SIEMPRE — lo pinta la línea de aquí abajo, no
   el tono. Fuera de banda `--acento` era el verde oscuro y el contorno de
   foco medía 2,16:1 con la paleta ivory/navy sobre el `#0b1220` de entonces
   (no recalculado con esta piel: ese literal ya no existe); y dentro de una
   banda `tono-clara` —`--tono-enlace` vale ahí el verde de papel— daba
   exactamente lo mismo. Con `--acento-claro` (ahora `--sage`) son 8,09:1 —
   RECALCULADO — sobre el `#0a120f` de esta piel (el "casi negro" también se
   retocó, un punto más cerca de la familia `--ink`; ver la regla de abajo),
   **mientras el bloque no lleve cartel**: un `poster:` tapa el marco entero
   y el recuadro pasa a caer sobre la imagen que suba el coach. La condición,
   entera, está abajo con la regla del foco.
   Se redefinen las DOS y no solo `--acento`: la regla de foco de una banda
   escribe `outline-color:var(--tono-enlace)` con más especificidad (0,2,1) que
   la general, así que tocar solo `--acento` dejaba el marco sin arreglar justo
   cuando el bloque de vídeo va dentro de una banda. */
.marco-video{position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:5px;background:#0a120f;
  --acento:var(--acento-claro);
  --tono-enlace:var(--acento-claro);
  box-shadow:0 0 0 1px rgb(255 255 255/.09),0 18px 44px rgb(6 14 28/.28)}
.marco-video>video,.marco-video>iframe{display:block;width:100%;height:100%;
  border:0;background:#000}
/* El vídeo va `contain`: si el coach graba en vertical con el móvil, se ve
   entero con bandas a los lados, no recortado por la mitad. */
.marco-video>video{object-fit:contain}

/* La fachada del proveedor: lo que se ve antes de pulsar Reproducir. */
.reproducir{display:block;width:100%;height:100%;margin:0;padding:0;
  border:0;background:transparent;cursor:pointer;position:relative}
.reproducir img{display:block;width:100%;height:100%;object-fit:cover}
/* El color ya lo arregla `--acento` de arriba; esto arregla el SITIO, y era el
   fallo gordo de los tres del marco (issue #42). Los TRES controles de aquí
   miden exactamente lo que mide el marco, y el marco lleva `overflow:hidden`:
   el recuadro de foco de la casa se dibuja a `+2px` del filo, o sea FUERA del
   control, o sea justo en la franja que el marco recorta. No es que se viera
   mal: no se veía nada. Con el desplazamiento en negativo el recuadro se
   dibuja por dentro y queda entero.

   Y son TRES y no dos desde la revisión de la #42, que cazó el que más se usa:

     .reproducir  la fachada, lo que hay antes de pulsar · VALIDADO
     video        el fichero que servimos nosotros       · VALIDADO
     iframe       el reproductor del proveedor           · NO LO APLICA CHROMIUM

   El `<iframe>` no está en ninguna plantilla: lo fabrica el JavaScript de
   `_base.html` (`document.createElement('iframe')` + `boton.replaceWith`) al
   pulsar Reproducir, o sea que sustituye al botón y hereda su tamaño y el
   recorte del marco palabra por palabra. Con JavaScript activado —el caso
   normal— es el único control que queda dentro del marco después de darle a
   play, y ninguna regla de la hoja le pintaba contorno.

   ── Y AQUÍ NO ACABA BIEN: LO DEL IFRAME NO ESTÁ RESUELTO (issue #43) ──────
   El selector está bien escrito y no se aplica. Medido por el validador en
   Chromium el 11/09/2026, tabulando de verdad: el `<iframe>` NUNCA recibe
   `:focus` ni `:focus-visible` aunque `document.activeElement` lo señale.
   Lo comprobó además con un iframe de control apuntando a `about:blank`, así
   que no es cosa de YouTube: es cómo trata Chromium el foco de un documento
   incrustado. Lo único que se ve es el foco nativo azul de Chrome sobre el
   contenido de DENTRO del iframe, que es el documento de YouTube y está fuera
   de nuestro alcance: no lo estilamos ni podemos.
   Dos avisos para quien lea esto:
     · es Chromium, y solo Chromium — no se ha medido en Firefox ni en Safari;
     · la regla SE QUEDA. No daña, cuesta una línea, y el día que un navegador
       se la aplique funcionará sola. Lo que no se puede es leerla como
       «arreglado», que es lo que daba a entender lo que había escrito aquí.
   Qué hacer va en la **issue #43**, y hay tres caminos sobre la mesa: envolver
   el iframe en un contenedor con `tabindex` y pintarle a él el anillo, tirar
   de `:focus-within` sobre el marco, o aceptarlo tal cual porque una vez
   dentro del reproductor el foco ya es de YouTube. No se elige desde aquí.

   ── LA HIPÓTESIS DE `:FOCUS-WITHIN` SE PROBÓ Y NO SIRVE ────────────────────
   La propia issue #43 pedía probarla antes de descartarla. Medido en el
   navegador (Chromium, un iframe de control como el de arriba, sin YouTube
   por medio) con DOS caminos distintos hasta el mismo `document.activeElement
   === iframe`:

     `iframe.focus()` desde JavaScript → `.marco-video:focus-within` SÍ
       coincide, y el contorno se pinta. Esto es lo que parecía confirmar
       la hipótesis a la primera.
     Tab real (Tab hasta el botón → Enter para pulsar Reproducir → Tab otra
       vez, que es el único camino que sigue un visitante real; `_base.html`
       no llama a `.focus()` en ningún momento) → el `<iframe>` SÍ queda
       como `document.activeElement`, pero `.marco-video:focus-within` da
       `false` y no se pinta nada. Reproducido dos veces, mismo resultado.

   O sea: Chromium trata distinto el foco puesto a mano desde JavaScript y el
   foco que deja un Tab de verdad al entrar en un documento incrustado — y
   solo el segundo es el caso real. `:focus-within` no es el arreglo: se
   comporta igual que `:focus-visible` en el `<iframe>` de arriba, y por el
   mismo motivo. No se añade la regla a la hoja: una regla que no se pinta
   nunca en el caso real no es un arreglo, es la misma trampa que ya
   describe este comentario dos párrafos arriba. De los tres caminos que
   quedan sobre la mesa, el que sigue en pie es envolver el iframe en un
   contenedor propio con `tabindex="0"` (cambia el JavaScript de `_base.html`,
   no solo esta hoja) o aceptar que, dentro del reproductor, el foco ya es de
   YouTube. Sigue sin elegirse desde aquí.

   Los tres selectores pesan (0,3,0) y (0,2,1), así que le ganan —o le empatan
   y van después— a `.banda button:focus-visible` (0,2,1) cuando el vídeo cae
   dentro de una banda. Van con combinador descendiente y no con `>`, aunque
   los tres sean hijos directos: el resolvedor de `test_ux_publico.py` se
   planta ante un combinador que no entiende, y eso es una buena raya que no se
   rodea escribiendo una regla que no puede comprobar.

   ── LA CONDICIÓN DE LOS 8,09:1, QUE ES LA MITAD QUE FALTABA ──────────────
   Ese número (10,66:1 con la paleta vieja, 8,09:1 RECALCULADO con `--sage`
   sobre el `#0a120f` de esta piel) es el claro de marca sobre el casi negro
   del marco, y vale SOLO MIENTRAS NO HAY CARTEL. En cuanto el coach pone
   `poster:`, la imagen tapa el marco entero —`.reproducir img` va a
   `width:100%;height:100%;object-fit:cover`, y el `<video>` enseña su
   póster en el centro—, y como el recuadro ahora se dibuja hacia DENTRO, ya
   no cae sobre el casi negro: cae encima del cartel.
   Con un cartel oscuro no cambia nada; con uno claro —una sala con ventanas—
   se cae del todo. Medido con la paleta ivory/navy (`#a8c6ec` sobre un crema
   claro `#f5f2ea`, **1,57:1**, confirmado por el validador en el navegador
   el 11/09/2026 sobre un cartel crema de verdad; y sobre un gris medio
   `#808080`, **2,25:1**). RECALCULADO sin navegador para esta piel
   (`--sage` #9bae9f sobre los mismos dos fondos): **2,10:1** y **1,68:1**.
   Los cuatro por debajo del 3:1: la conclusión no cambia con la piel nueva,
   sigue sin servir con un cartel claro. Desde aquí no hay forma de saber en
   cuál de los dos casos estamos: la imagen la sube el coach.
   No se arregla en la #42 a propósito: lo que se hace para eso son DOS anillos
   (uno claro y uno oscuro, o un contorno con su sombra debajo), y eso choca de
   frente con el «un solo contorno sólido de 2px» que la #38 dejó validado en
   ocho paradas. Es una decisión visual del coach y vive en la **issue #44**,
   con tres caminos: el anillo doble, un velo sobre el cartel, o no usar
   carteles claros. */
.marco-video .reproducir:focus-visible,.marco-video video:focus-visible,
.marco-video iframe:focus-visible{
  outline:2px solid var(--acento);outline-offset:-3px}
.pie-marco{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.8rem 1rem;
  background:rgb(0 0 0/.55);text-align:center}
.pie-marco a{color:var(--acento-claro)}

/* El hueco mientras no hay vídeo. Digno, no "roto": el mismo marco oscuro, el
   triángulo en reposo y la frase que el coach escribe desde el Taller. Nada de
   borde de puntos, que es el dibujo universal de "aquí falta algo". */
/* El hueco NO guarda el 16:9 entero: sobre el ancho de lectura son 35rem de
   pantalla apagada, y una pared negra con una frase en medio no es "muy
   pronto", es "esto está roto". Se deja en una franja, y con `min-height` (no
   `max-`) para que el texto nunca se recorte por muy estrecha que sea la
   pantalla. El día que haya vídeo, el marco recupera su 16:9 completo.
   Ojo: `aspect-ratio` + `max-height` NO vale — el navegador conserva la
   proporción encogiendo el ANCHO, y el marco se quedaba en 46rem centrado
   mientras el resto de la página seguía a 62. */
.marco-video.pendiente{aspect-ratio:auto;display:flex;min-height:min(26rem,54vw)}
.video-pendiente{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.4rem;padding:2rem 1.5rem;
  text-align:center}
.video-pendiente p{margin:0;max-width:34rem;color:#c8d3e4;
  font:400 1rem/1.6 var(--sans)}
/* El mismo marco sirve para el enlace que no sabemos reproducir aquí dentro:
   sobre fondo casi negro, un enlace con el color del texto no se ve. */
.video-pendiente a{color:var(--acento-claro)}
/* Triángulo de "reproducir" dibujado con bordes: ni SVG suelto ni una fuente
   de iconos por una sola forma. */
.triangulo{display:block;width:0;height:0;border-style:solid;
  border-width:1.05rem 0 1.05rem 1.75rem;
  border-color:transparent transparent transparent var(--acento-claro)}
.reproducir .triangulo{position:absolute;top:50%;left:50%;
  transform:translate(-42%,-50%);transition:transform .15s}
.reproducir:hover .triangulo{transform:translate(-42%,-50%) scale(1.12)}
.video-pendiente .triangulo{opacity:.5}

.video .pie{margin:.9rem 0 0;font-size:.88rem;color:var(--tenue)}
/* El botón va pegado al vídeo, no a un mundo de distancia: es su continuación. */
.video .cta.bajo-video{margin-top:1.75rem}
.nota-cta{margin:.7rem 0 0;font-size:.88rem;color:var(--tenue)}

@media(max-width:640px){
  /* Menos solape: la banda de portada también es más baja en móvil. */
  main.lienzo>.portada+.video:has(>.marco-video:first-child){margin-top:-2rem}
  .video-pendiente{gap:1rem;padding:1.25rem}
  .video-pendiente p{font-size:.92rem}
  .triangulo{border-width:.8rem 0 .8rem 1.35rem}
}

.aviso-borrador{padding:.65rem 1rem;border-left:3px solid #9a5b09;
  background:#f7ecd6;font:500 .86rem var(--sans);color:#7a4708}

/* Quien pide en su sistema que no se mueva nada, no lo pide por gusto. */
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .rama:hover{transform:none}
}

/* Ni la banda ni las tarjetas tienen sentido en papel: al imprimir un
   documento del área de cliente lo que importa es el texto. */
/* Método y oferta en dos bloques equivalentes. El porqué tiene su propio
   manifiesto a continuación y no se repite aquí. */
@media screen{
.div-global .golden-circle .circulo{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.div-global .golden-circle .nivel,
.div-global .golden-circle .nivel:first-child{display:block;padding:2.25rem;
  border:1px solid var(--linea);border-radius:1rem;background:var(--papel)}
.div-global .golden-circle dt,
.div-global .golden-circle .nivel:first-child dt{padding:0;margin-bottom:1.25rem;
  font:400 clamp(1.6rem,2.4vw,2rem)/1.2 var(--serif);letter-spacing:-.02em;
  text-transform:none;color:var(--tinta)}
.div-global .golden-circle dd,
.div-global .golden-circle .nivel:first-child dd{font:400 1.05rem/1.75 var(--sans);
  max-width:var(--medida);letter-spacing:0;color:var(--suave)}
}
@media screen and (max-width:44em){
  .div-global .golden-circle .circulo{grid-template-columns:1fr;gap:1rem}
  .div-global .golden-circle .nivel,
  .div-global .golden-circle .nivel:first-child{padding:1.5rem}
}

@media print{
  /* El aire nuevo de las secciones (issue #68) es un `padding` de sección, no
     solo un margen: en papel, el mismo `clamp()` de pantalla por sección
     —el doble entre dos seguidas, arriba y abajo de cada una— deja páginas
     casi en blanco entre bloques de texto cortos. Se baja al mismo tipo de
     valor fijo y pequeño que ya usaba esta hoja antes de la #68, igual que
     el `@media(max-width:640px)` de pantalla hace con el suyo, solo que
     aquí no hace falta que sea `clamp`: una página impresa no tiene un
     ancho de ventana que cambie durante la lectura. (El `clamp()` de
     pantalla bajó de magnitud en la revisión de composición del 18/09/2026,
     issue #70 — este valor fijo de impresión no dependía de su cifra
     concreta y sigue valiendo igual.) */
  :root{--aire:1.5rem;--aire-banda:1.25rem}
  body{background:#fff}
  /* `.barra-divisiones` se suma a la lista en la #33, y no por simetría: sus
     enlaces están pensados para el fondo oscuro y en papel quedan en 1,49:1
     sobre blanco (2,35:1 el de la división activa, en `--acento-claro`).
     RECALCULADO para esta piel; el mecanismo y la conclusión no cambian. Es
     el mismo mecanismo que la #38 ya pagó una vez —un fondo oscuro que se
     apaga al imprimir y deja el texto claro encima del papel—, con un
     componente que entonces no existía.
     Quien añada otra barra de color: o entra aquí, o le pone tinta propia.
     El grano, las líneas de fondo y la marca vertical se suman aquí mismo
     (issue #68) por el mismo motivo que ya obligó a fundir `.barra-divisiones`
     en esta regla y no en una propia: el test que comprueba «qué se oculta al
     imprimir» busca el PRIMER `display:none` de este `@media print` y lee
     hacia atrás hasta el `}` anterior —una regla nueva delante de esta la
     encontraría a ella primero y `.barra-divisiones` se quedaría fuera de lo
     que el test lee como oculto (reproducido antes de este comentario). Son
     decoración de pantalla —el ratón que pasa por encima, la
     retroiluminación— y no aportan nada en papel; la marca vertical además
     usa `writing-mode`, que en una hoja impresa normal solo estorba. */
  .cabecera,.pie-sitio,.barra-divisiones,.saltar-contenido,
  .grano,.portada-lineas,.portada-explorar{display:none}
  /* Sus dos hijos ya están ocultos por la lista de arriba; esto es solo para
     que el envoltorio (issue #68) no se quede fijo en la página impresa con
     una caja vacía. */
  .cabecera-fija{position:static}
  .portada{background:none;color:var(--tinta);padding:0 0 1.5rem}
  /* Títulos de portada y de banda en papel (issue #72). Antes heredaban el
     `color:var(--tinta)` que les ponen `.portada` (aquí arriba) y `.banda`
     (más abajo). Desde la #72 tienen una regla propia,
     `main.lienzo .portada h1{color:var(--tono-tinta)}`, y esa gana a la
     herencia: el titular de la portada salía en `--tono-tinta`, el claro de
     la banda, sobre papel blanco. Se midió 1,16:1 en el PDF de `/executive`
     (validador, #72). En papel ya no hay fondo oscuro, así que se aplica el
     criterio de la #72 (fondo claro → granate). Pesa (0,2,2) igual que la
     regla que corrige, y gana por ir después. `.tono-clara` ya estaba en
     granate. */
  main.lienzo .portada h1,main.lienzo .portada h2,main.lienzo .portada h3,
  main.lienzo .banda h1,main.lienzo .banda h2,main.lienzo .banda h3{
    color:var(--granate)}
  /* La portada a pantalla completa (issue #67) es la única con `min-height`,
     posición absoluta y un fondo que sangra: sin deshacer esto, una hoja de
     impresión saldría con una página casi entera en blanco (el `100svh` no
     significa nada en papel) y la foto absolutamente posicionada colgando
     fuera de donde el resto del contenido cree que está. Se apila igual que
     ya hace el móvil, no se inventa un tratamiento nuevo para el PDF. */
  .portada.a-sangre{min-height:0;padding:0 0 1.5rem;position:static;
    overflow:visible;align-content:normal}
  .portada.a-sangre::before{content:none}
  .portada.a-sangre .portada-cuerpo{display:block}
  .portada.a-sangre .portada-texto{max-width:none}
  .portada.a-sangre .portada-foto-caja{position:static;z-index:auto;inset:auto;
    width:100%;max-width:26rem}
  .portada.a-sangre .portada-foto{position:static;z-index:auto;inset:auto;
    width:100%;max-width:26rem;height:auto;aspect-ratio:auto;filter:none;
    margin-top:1rem}
  /* Las bandas de sección van por lo mismo que la portada: en papel el color a
     sangre se come el tóner y deja el texto en un rectángulo gris. Y al quitar
     el color hay que DESHACER el repintado de los tonos, porque dentro de una
     banda `--suave`, `--tenue`, `--linea` y `--acento` apuntan al tono claro,
     que sobre blanco es invisible: es el mismo agujero que ya tenía el
     "Error 404".

     Se deshace en los cuatro `--tono-*`, una vez, y no componente a
     componente. La #38 lo hizo con una lista de dos líneas
     (`.banda .entradilla,.banda p` y `.banda a,.banda .progreso`) y se quedó
     corta el mismo día, que es exactamente la crítica que le hace este fichero
     a las listas de componentes en «Los tonos de banda». Lo que se imprimía
     clarito sobre blanco, medido por la revisión de la #38 con la paleta
     ivory/navy (no recalculado: describe un fallo ya arreglado, y el número
     exacto de aquel literal ya no importa, solo el mecanismo que sigue
     valiendo): `.faq .respuesta` y `.rejilla-cifras dd` 1,51:1, la cifra
     grande de `.rejilla-cifras dt` 1,76:1, y con ellos `.trayectoria dt` y
     `dd span`, `.filtro h2`, `.filtro .no`, `.num` y `.golden-circle dt`.

     Basta con los `--tono-*` porque la regla de «Los tonos de banda» los
     encadena en el MISMO elemento (`--suave:var(--tono-suave)`), y una
     propiedad personalizada se sustituye al calcular el valor: cambiado el
     eslabón de arriba, bajan los cuatro. Ya en papel, RECALCULADO para esta
     piel: suave 8,72:1, tenue 5,91:1, enlace/acento 11,07:1 sobre blanco, y
     el filete 1,48:1 (no es texto, es un filete, y es el mismo que se ve en
     pantalla).

     `--tono-tinta` NO vuelve, y es a propósito: el botón invertido lo usa como
     FONDO (`.banda .cta a`), así que devolverlo al oscuro dejaría letra oscura
     sobre fondo oscuro. Lo que se paga por eso es la línea de las etiquetas de
     abajo. */
  .banda{background:none;color:var(--tinta);padding:1.5rem 0;
    --tono-suave:var(--suave-papel);
    --tono-tenue:var(--tenue-papel);
    --tono-enlace:var(--acento-papel);
    --tono-linea:var(--linea-papel)}
  /* Una mina que dejó puesta la #42 y que se escribe aquí para que no explote
     en silencio: `.marco-video` repinta `--tono-enlace` al claro de marca EN
     SU PROPIO ELEMENTO, así que este deshacer de aquí arriba no le llega. En
     pantalla es justo lo que se quiere —el marco sigue siendo casi negro venga
     de donde venga—, pero en papel el marco se imprime igual de oscuro y un
     enlace suyo que se fiara de este deshacer saldría a 2,35:1 sobre el
     blanco (RECALCULADO; 1,76:1 con la paleta ivory/navy). Hoy no pasa: los
     dos enlaces del marco (`.pie-marco a` y `.video-pendiente a`) llevan
     `--acento-claro` literal y ganan por orden.
     El día que alguien quite ese literal fiándose de esta regla, se imprime
     invisible y sin avisar.
     Y el marco entero en papel ya está mal desde antes de la #42 (fondo casi
     negro contra tinta de impresión): es issue aparte y no se toca aquí. */
  /* Lo único que se sigue nombrando por componente, porque no tiene otra vía:
     la etiqueta de un campo pinta en `--tono-tinta` (el papel de la banda) y
     sobre el papel blanco se queda en 1,16:1 (RECALCULADO; 1,10:1 con la
     paleta ivory/navy), o sea que el campo se imprime sin la palabra que
     dice qué va dentro. Se repiten los tres selectores del original porque
     hay que ganarles la especificidad (0,3,2 el peor). */
  .banda .contacto label,.banda .aplicar .campo>label,
  .banda .aplicar fieldset.campo-opciones legend{color:var(--tinta)}
  .portada .entradilla{color:var(--suave-papel)}
  /* El rótulo de sección (issues #67, #121) es el mismo caso: dentro de una
     portada o de una banda pinta en `--tono-tinta`, el blanco (#131), que en papel
     blanco no se ve. Vuelve a la tinta, como fuera de ellas. */
  .portada .etiqueta,.banda .etiqueta{color:var(--tinta)}
  /* Lo que va en `--acento-claro` dentro de la portada está pensado para leerse
     SOBRE la banda oscura. Al quitar la banda para imprimir se quedaba a
     2,35:1 sobre el blanco (RECALCULADO; 1,76:1 con la paleta ivory/navy), o
     sea invisible: le pasa al "Error 404" de `error.html`, que es un
     `.progreso` dentro de la portada.
     `--acento-papel` y no `--acento`: desde la #38 la portada también repinta
     `--acento` al claro, así que esta línea se estaba arreglando a sí misma con
     el color que venía a quitar. */
  .portada .progreso,.portada a{color:var(--acento-papel)}
  /* Mismo agujero, en el botón de contorno de la portada (issue #68): pinta
     `color:var(--tono-tinta)`, que es siempre el blanco (#131; antes `var(--fondo)`, el papel claro),
     nunca se deshace, ni aquí ni en `.banda` de más arriba (el botón
     invertido de una banda lo usa como FONDO, ver el comentario de esa
     regla)— y sin fondo propio (`.portada{background:none}` en papel) ese
     texto queda casi blanco sobre blanco. Se gana la especificidad a
     `.portada .boton-contorno{color:var(--tono-tinta)}` (0,2,0) con las
     mismas dos clases (0,2,0) y el orden: esta regla va DESPUÉS en la hoja.
     Desde la issue #118 el sólido tampoco rellena: es de contorno, con letra
     y borde en `--tono-tinta`, así que tiene el mismo agujero y lleva el
     mismo arreglo, con el borde incluido. */
  .portada .boton-contorno,.portada .boton-solido{color:var(--acento-papel)}
  .portada .boton-solido{border:1px solid var(--acento-papel)}
  /* Mismo agujero, mismo arreglo, para los tres datos bajo el titular (issue
     #67): `.portada-datos` pinta con `--tono-tinta`/`--tono-suave` directos
     (el mismo par que ya usan `h1` y `.entradilla`), y ese par NO se
     deshace por el mecanismo de `.banda` de más arriba — `.portada` nunca
     entró en esa lista. Se corrige aquí en vez de metiendo `.portada` en la
     regla genérica, por lo mismo que ya explica el comentario de la línea de
     arriba: esta hoja repinta `--tinta` a papel dentro de una portada
     (issue #38), así que un reseteo genérico de los `--tono-*` se estaría
     arreglando a sí mismo con el color que venía a quitar. */
  .portada-datos dt{color:var(--tinta)}
  .portada-datos dd{color:var(--suave-papel)}
  /* `.entrada` (issue #35): en `disposicion: apilada` las tarjetas 2 y 3 se
     cortaban a mitad de página en el PDF — medido con `agent_browser_pdf`,
     el salto de página 1 a 2 pasaba por en medio de la tarjeta. Mismo
     mecanismo que ya evita `ul.simple li` (arriba, fuera de este bloque
     porque a esa lista le vale en cualquier contexto multicolumna): una
     tarjeta es una unidad, no se reparte entre dos hojas. `page-break-inside`
     es el nombre que entienden los motores de impresión más viejos;
     `break-inside` es el que sustituye. */
  .entrada{break-inside:avoid;page-break-inside:avoid}
}

/* Reserva: el contexto acompaña al formulario y los horarios se agrupan por
   día. Details funciona también sin JavaScript; no hay calendario inaccesible
   ni dependencia externa para elegir una hora. */
.reserva{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);padding:clamp(2rem,5vw,5rem) 0;align-items:start}
.reserva h1{font-size:clamp(2.2rem,3.8vw,3.8rem);line-height:1.04;letter-spacing:-.045em;margin:1rem 0 1.5rem;max-width:12ch}
.reserva-intro{font-size:1.1rem;line-height:1.7;max-width:36ch}
.reserva-persona{display:flex;align-items:center;gap:1rem;margin:2rem 0}
.reserva-persona img{width:72px;height:72px;object-fit:cover;object-position:65% 35%;border-radius:50%}
.reserva-persona strong,.reserva-persona span{display:block}
.reserva-persona span{font-size:.85rem;margin-top:.25rem}
.reserva-detalles{margin:2rem 0;border-top:1px solid var(--linea)}
.reserva-detalles>div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--linea)}
.reserva-detalles dt{font-size:.9rem}.reserva-detalles dd{margin:0;text-align:right;font-size:.9rem}
.reserva-ayuda,.reserva-nota{font-size:.85rem;line-height:1.6;color:var(--acento)}
.reserva-panel{background:var(--papel);border:1px solid var(--linea);padding:clamp(1.2rem,3vw,2.5rem);box-shadow:0 12px 40px rgb(12 20 18 / 4%);min-width:0}
.reserva .reserva-formulario{max-width:none;margin:0}
.reserva fieldset{min-width:0;border:0;padding:0;margin:0 0 1.75rem}
.reserva legend{font-family:var(--sans);font-size:1.05rem;font-weight:600;letter-spacing:0;line-height:1.5}
.reserva-paso{font-family:var(--micro);font-size:.75rem;color:var(--tenue);margin-right:.65rem}
.reserva-dia{border-bottom:1px solid var(--linea);padding:.8rem 0}
.reserva-dia summary{cursor:pointer;font-size:.95rem;font-weight:500;list-style-position:inside}
.reserva-dia summary>span{float:right;font-weight:400;font-size:.75rem;line-height:1.8}
.reserva .reserva-horas{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.25rem,1fr));gap:.5rem;margin-top:1rem}
.reserva-horas .opcion{justify-content:center;padding:.65rem .35rem;min-height:44px;background:var(--fondo);border:1px solid var(--linea);border-radius:2px}
.reserva-horas .opcion:has(input:checked){background:var(--acento);color:var(--papel);border-color:var(--acento)}
.reserva-horas input{accent-color:var(--acento);margin:0 .35rem 0 0}
.reserva-datos label{display:block;margin-top:1rem}
.reserva-datos input{width:100%;box-sizing:border-box;min-height:48px}
.reserva .reserva-enviar{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;margin-top:1.5rem;text-align:left}
.reserva .consentimiento{font-size:.8rem;line-height:1.6}
@media(min-width:901px){.reserva-presentacion{position:sticky;top:2rem}}
@media(max-width:900px){.reserva{grid-template-columns:minmax(0,1fr);gap:1.5rem}.reserva h1{max-width:17ch}.reserva-intro{max-width:48ch}.reserva-detalles{margin:1rem 0}.reserva-persona{margin:1.5rem 0}.reserva-panel{padding:1.2rem}}
@media(prefers-reduced-motion:reduce){.reserva *{scroll-behavior:auto}}

/* Acceso por teclado y cierre del recorrido de reserva. */
.saltar-contenido{position:fixed;top:1rem;left:1rem;z-index:1000;transform:translateY(-200%);padding:1rem;background:var(--acento);color:var(--fondo)}
.saltar-contenido:focus{transform:translateY(0)}
.reserva-dia summary{min-height:44px;align-content:center}
.reserva .reserva-horas{max-height:19rem;overflow-y:auto;overscroll-behavior:contain;padding:.35rem;scrollbar-gutter:stable}
.reserva-seleccion{padding:1rem;border-left:3px solid var(--acento);background:var(--fondo);font-size:.95rem;line-height:1.6}
.reserva-resultado{width:100%;max-width:44rem;justify-self:center;min-width:0}
.reserva-resultado h1{font-size:clamp(2.15rem,4.25vw,3.8rem);line-height:1.06;letter-spacing:-.035em;overflow-wrap:break-word}
.reserva-resultado .entradilla{font-size:1.1rem;line-height:1.7;max-width:52ch}
.reserva-resultado .reserva-detalles{padding:1rem 1.5rem;background:var(--papel);border:1px solid var(--linea)}
.reserva-resultado .reserva-detalles>div:last-child{border-bottom:0}
.reserva-acciones{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 2rem}
.reserva-acciones p{margin:0 0 1rem}
.reserva-cancelar{margin-top:2rem;border-top:1px solid var(--linea);padding-top:1rem}
.reserva-cancelar summary{min-height:44px;align-content:center;cursor:pointer}
/* Issue #150: redondo y con el verde de la casa, como todos los botones de la
   web desde que el coach eligió el blanco con letra verde. Se quedaba cuadrado
   y en negro: lo cazó la prueba de punta a punta del 14/10/2026. */
.reserva-cancelar button{font:600 .95rem var(--sans);padding:.75rem 1.6rem;min-height:44px;
  background:#fff;color:var(--acento-papel);border:1px solid var(--acento-papel);
  border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.reserva-cancelar button:hover{background:var(--acento-papel);color:#fff}
@media(max-width:640px){
  .reserva h1{font-size:2.15rem;max-width:18ch}
  .reserva-persona{margin:1rem 0}
  .reserva-intro{font-size:1rem;line-height:1.6}
  .reserva-detalles>div{padding:.65rem 0}
  .reserva-panel h2{font-size:1.75rem;line-height:1.15}
  .reserva-datos input{font-size:1rem}
  .reserva-resultado .reserva-detalles{padding:.5rem 1rem}
}

.reserva-ir-horarios{display:none}
.reserva-panel{scroll-margin-top:1rem}
.reserva-panel h2{font-size:clamp(1.75rem,2.55vw,2.55rem);line-height:1.12}
.cabecera nav a[aria-current="page"]{color:var(--tinta);text-decoration:underline;text-underline-offset:.4em}
@media(max-width:900px){.reserva-ir-horarios{display:inline-flex;align-items:center;min-height:44px;font-weight:600}}

/* La reserva precede a los detalles, también en pantallas bajas. Nació solo
   para Personal; desde la issue #84 el mismo botón y los mismos datos van en
   Sobre Alejandro, Executive y Sucesión (esta última sin foto hasta la #105;
   desde la #104 va en la pantalla de la #80, como las otras), así que vale
   para cualquier portada QUE LLEVE DATOS. El `:has()` deja fuera la home, que
   tiene botón pero no datos y el coach pidió no tocar. */
.portada .portada-texto:has(.portada-datos){display:flex;flex-direction:column}
.portada .portada-texto:has(.portada-datos) .portada-acciones{order:1}
.portada .portada-texto:has(.portada-datos) .portada-datos{order:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
  max-width:34rem}  /* el ancho del texto en una portada con foto: en Sucesión, sin foto, las tres columnas se estiraban */
.portada-datos>div{min-width:0}
.portada-datos dd{line-height:1.6}
main.lienzo>.reserva:first-child{margin-top:0}
@media(max-width:640px){
  .div-personal .portada.a-sangre{padding-top:2.5rem}
  .div-personal .portada.a-sangre h1{line-height:1.05}
  .div-personal .portada.a-sangre .entradilla{font-size:1.05rem;line-height:1.65}
  .div-personal .portada.a-sangre .portada-datos dd{font-size:.6rem;letter-spacing:.04em}
  .reserva{padding-top:2rem}
}

/* La fotografía de portada se presenta en un televisor, sin ampliarla como
   fondo ni oscurecerla. El marco y la peana son vectoriales (CSS). */
@media screen{
  .div-global .portada.a-sangre{min-height:0;padding:10rem 0 6rem;
    background:radial-gradient(ellipse at 80% 50%,color-mix(in srgb,var(--tono) 80%,#fff) 0%,var(--tono) 65%)}
  .div-global .portada.a-sangre::before{content:none}
  .div-global .portada.a-sangre .portada-cuerpo{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;
    gap:clamp(2rem,4vw,4rem)}
  .div-global .portada.a-sangre .portada-texto{max-width:none}
  .div-global .portada.a-sangre h1{font-size:clamp(2.15rem,3.5vw,3.4rem);line-height:1.08}
  .div-global .portada.a-sangre .portada-foto-caja{position:relative;inset:auto;
    z-index:auto;width:100%;max-width:665px;aspect-ratio:auto;overflow:visible;
    margin:0 0 3rem;padding:clamp(.65rem,1.2vw,1.1rem);
    border-radius:1.35rem;background:linear-gradient(145deg,#454643,#111310 75%);
    box-shadow:inset 0 1px 1px #ffffff24,0 1.5rem 3rem #0005}
  .div-global .portada.a-sangre .portada-foto-caja::before{content:"";
    position:absolute;top:100%;left:calc(50% - .8rem);width:1.6rem;height:2.3rem;
    background:linear-gradient(90deg,#131512,#383b34,#171915)}
  .div-global .portada.a-sangre .portada-foto-caja::after{content:"";
    position:absolute;top:calc(100% + 2.2rem);left:32%;width:36%;height:.75rem;
    border-radius:50% 50% .5rem .5rem;background:linear-gradient(#373a34,#0c0e0b);
    box-shadow:0 .6rem 1rem #0004}
  .div-global .portada.a-sangre .portada-foto{display:block;position:static;
    width:100%;height:auto;max-width:none;aspect-ratio:665/385;object-fit:contain;
    border-radius:.45rem;filter:none}
  .div-global .portada.a-sangre .portada-lineas,
  .div-global .portada.a-sangre .portada-explorar{display:none}
}
@media screen and (max-width:56.25em){
  .div-global .portada.a-sangre{padding:7rem 0 4rem}
  .div-global .portada.a-sangre .portada-cuerpo{grid-template-columns:1fr;gap:2.5rem}
  .div-global .portada.a-sangre .portada-foto-caja{justify-self:center;margin-bottom:2rem}
}

/* ── Personal y Executive pasan a la misma pantalla que la portada (issue
   #80) ─────────────────────────────────────────────────────────────────
   Antes las dos iban a sangre, la foto cubriendo la mitad derecha entera
   (~806×900, medido en la #77): el coach, viéndolo en el navegador, «las
   fotos son demasiado grandes. Coge la idea de la primera foto, que está
   como en una tele». Se reaprovecha la MISMA pieza que ya usa `.div-global`
   ahí arriba — la rejilla de dos columnas y `.portada-foto-caja` como
   marco, con el MISMO radio, degradado y sombra —; lo único que varía por
   página es la peana (una pieza vectorial distinta cada vez, para no
   repetir la misma pantalla tres veces, que es justo lo que pide la
   issue) y la proporción del hueco, que sigue la de cada fotografía real
   sin recortarla ni estirarla.

   Sin navegador en esta sesión (issue #80: «lo miro yo con capturas
   cuando vuelvas»): los números de abajo son cálculo sobre las mismas
   fórmulas que ya trae `.div-global` — `main.lienzo` (`min(72rem,100% -
   3rem)`), la rejilla `minmax(0,1fr) minmax(0,1.15fr)` con
   `gap:clamp(2rem,4vw,4rem)`, y el padding del marco
   `clamp(.65rem,1.2vw,1.1rem)` —, no una lectura de pantalla:

     ventana   `main.lienzo`   gap       columna 2 (1.15fr)   padding marco
      1440px      1152px      57,6px         585px              17,28px
       390px       342px       (col. única, apilada tras el `@media` de abajo) 10,4px

   Personal (`alf-plato.png`, 665×385 — la MISMA proporción que Home): sin
   `max-width` propio más allá del de Home (665px), así que a estos dos
   anchos la caja mide EXACTAMENTE lo que mide la pantalla de Home — «un
   tamaño contenido como el de la portada», que es literal el punto 1 de
   la issue. La variación: un pedestal plano y rectangular con un piloto
   diminuto (en vez del pie ovalado de Home), una inclinación leve
   (-1,4°, como una tele dejada de lado en un plató) y un brillo diagonal
   sobre el cristal — decoración pura, `pointer-events:none`, igual que ya
   son decoración `.portada-lineas`/`.portada-explorar` de Home; no lleva
   ninguna palabra que el visitante pueda leer (regla 6 de CLAUDE.md).

     1440px: marco 585×353px, pantalla 550×319px → 550/665 = 0,83× (encoge)
      390px: marco 342×207px, pantalla 321×186px → 321/665 = 0,48× (encoge)

   Executive (`alf-gafas-retrato.jpg`, 415×451, retrato): un hueco a la
   proporción REAL del fichero (`aspect-ratio:506/550`, sin recortar nada
   — antes, con `cover`, se perdían coronilla y cuello, ver el comentario
   que sustituye la #77 más arriba), sobre un pie ALTO en vez de la peana
   baja de Home: un monitor de plató vertical, para aprovechar el retrato
   entero en vez de dejarlo pequeño con franjas dentro de una tele
   apaisada. `max-width:430px` — más estrecho que Home a propósito: a los
   665px de Home, un retrato de 415px real se ampliaría 1,60×, muy por
   encima del 1,3× que pide el punto 5 de la issue.

     1440px: marco 430×465px, pantalla 395×430px → 395/415 = 0,95× (encoge)
      390px: marco 342×370px, pantalla 321×349px → 321/415 = 0,77× (encoge)

   Las cuatro cifras de encogimiento están por debajo de 1×: los ficheros
   son pequeños (415-665px de ancho) y no hay margen para ampliarlos sin
   que se note el borrón — el mismo motivo que ya cuida el comentario de
   `.portada-foto`, más arriba en esta hoja («Medida de foto», ~línea 880). */
@media screen{
  .div-personal .portada.a-sangre,
  .div-sucesion .portada.a-sangre,
  .div-executive .portada.a-sangre{min-height:0;padding:10rem 0 6rem}
  .div-personal .portada.a-sangre::before,
  .div-sucesion .portada.a-sangre::before,
  .div-executive .portada.a-sangre::before{content:none}
  .div-personal .portada.a-sangre .portada-cuerpo,
  .div-sucesion .portada.a-sangre .portada-cuerpo,
  .div-executive .portada.a-sangre .portada-cuerpo{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;
    gap:clamp(2rem,4vw,4rem)}
  .div-personal .portada.a-sangre .portada-texto,
  .div-sucesion .portada.a-sangre .portada-texto,
  .div-executive .portada.a-sangre .portada-texto{max-width:none}
  .div-personal .portada.a-sangre h1,
  .div-sucesion .portada.a-sangre h1,
  .div-executive .portada.a-sangre h1{font-size:clamp(2.15rem,3.5vw,3.4rem);
    line-height:1.08}
  /* El marco: mismo radio, degradado y sombra que la pantalla de Home. Lo
     que pide la issue que no se repita es la peana, no el marco. */
  .div-personal .portada.a-sangre .portada-foto-caja,
  .div-sucesion .portada.a-sangre .portada-foto-caja,
  .div-executive .portada.a-sangre .portada-foto-caja{position:relative;
    inset:auto;z-index:auto;overflow:visible;
    padding:clamp(.65rem,1.2vw,1.1rem);border-radius:1.35rem;
    background:linear-gradient(145deg,#454643,#111310 75%);
    box-shadow:inset 0 1px 1px #ffffff24,0 1.5rem 3rem #0005}
  .div-personal .portada.a-sangre .portada-foto,
  .div-sucesion .portada.a-sangre .portada-foto,
  .div-executive .portada.a-sangre .portada-foto{display:block;position:static;
    width:100%;height:auto;max-width:none;object-fit:contain;
    border-radius:.45rem;filter:none}
  .div-personal .portada.a-sangre .portada-lineas,
  .div-personal .portada.a-sangre .portada-explorar,
  .div-executive .portada.a-sangre .portada-lineas,
  .div-executive .portada.a-sangre .portada-explorar,
  .div-sucesion .portada.a-sangre .portada-lineas,
  .div-sucesion .portada.a-sangre .portada-explorar{display:none}

  /* Personal: el mismo ancho máximo que Home (comparten fichero y
     proporción), un pedestal plano con un piloto diminuto y una
     inclinación leve, con un brillo diagonal sobre el cristal. */
  .div-personal .portada.a-sangre .portada-foto-caja{width:100%;
    max-width:665px;transform:rotate(-1.4deg)}
  .div-personal .portada.a-sangre .portada-foto{aspect-ratio:665/385}
  .div-personal .portada.a-sangre .portada-foto-caja::before{content:"";
    position:absolute;inset:clamp(.65rem,1.2vw,1.1rem);border-radius:.45rem;
    background:linear-gradient(120deg,rgba(255,255,255,.18) 0%,
      rgba(255,255,255,0) 34%);pointer-events:none}
  .div-personal .portada.a-sangre .portada-foto-caja::after{content:"";
    position:absolute;top:calc(100% + 1.3rem);left:38%;width:24%;
    height:.6rem;border-radius:.2rem;
    background:radial-gradient(circle at 15% 50%,#6fae76 0 2.5px,
        transparent 3px),
      linear-gradient(#373a34,#0c0e0b);
    box-shadow:0 .5rem .9rem #0004}

  /* Executive: hueco a la proporción real del retrato (415×451, sin
     recorte), un pie alto — el «monitor de plató vertical» — en vez de
     la peana baja de Home, pegado al borde derecho de su columna para no
     dejar un hueco vacío en medio (su marco es más estrecho que la
     columna, 430px de 585px a 1440px de ventana). */
  .div-executive .portada.a-sangre .portada-foto-caja{width:100%;
    max-width:430px;justify-self:end}
  /* 506×550 desde la issue #83: el retrato se «aleja» con un fondo de plató
     desenfocado alrededor, sin cambiar la proporción. 640×641 desde la
     issue #150: la foto de perfil del coach sustituye a ese retrato. */
.div-executive .portada.a-sangre .portada-foto{aspect-ratio:640/641}
  .div-executive .portada.a-sangre .portada-foto-caja::before{content:"";
    position:absolute;top:100%;left:calc(50% - .5rem);width:1rem;
    height:2.6rem;background:linear-gradient(90deg,#131512,#383b34,#171915)}
  .div-executive .portada.a-sangre .portada-foto-caja::after{content:"";
    position:absolute;top:calc(100% + 2.6rem);left:22%;width:56%;
    height:.65rem;border-radius:.3rem;background:linear-gradient(#373a34,#0c0e0b);
    box-shadow:0 .6rem 1rem #0004}
  /* Sucesión (issue #104): `metodo` le puso foto en la #105
     (`alf-gafas-tv.jpg`, 584×338 — la proporción de `alf-plato`, 1,73) y,
     sin entrar en esta lista, salía A SANGRE: una caja de 806×868 a 1440 px
     con la foto ampliada por `cover` ~2,6× (borrosa), y de vuelta
     `.portada-lineas` y «Explorar Arketip». Justo lo que el coach rechazó en
     la #80. Entra en la misma pantalla con su propia peana, distinta de las
     tres que ya hay (pie ovalado en Home, pedestal plano con piloto en
     Personal, pie alto en Executive): dos patas finas e inclinadas en los
     extremos, como una pantalla apoyada sobre un aparador. Recta, sin
     brillo: es la página más sobria de las tres. Decoración pura, sin
     palabras (regla 6 de CLAUDE.md).

     `max-width`: lo justo para que la foto no pase de su tamaño real
     (584 px más el padding del marco), así no se amplía en ningún ancho.
     Medido a 1440 px: la columna da 585 px de marco y la foto sale a
     ~550 px → 0,94×. */
  .div-sucesion .portada.a-sangre .portada-foto-caja{width:100%;
    max-width:calc(584px + 2 * clamp(.65rem,1.2vw,1.1rem));justify-self:end}
  .div-sucesion .portada.a-sangre .portada-foto{aspect-ratio:584/338}
  .div-sucesion .portada.a-sangre .portada-foto-caja::before,
  .div-sucesion .portada.a-sangre .portada-foto-caja::after{content:"";
    position:absolute;top:100%;width:.5rem;height:1.6rem;border-radius:0 0 .15rem .15rem;
    background:linear-gradient(90deg,#131512,#383b34,#171915);
    box-shadow:0 .9rem .9rem -.4rem #0004}
  .div-sucesion .portada.a-sangre .portada-foto-caja::before{left:14%;
    transform:skewX(-14deg);transform-origin:top}
  .div-sucesion .portada.a-sangre .portada-foto-caja::after{right:14%;
    transform:skewX(14deg);transform-origin:top}
}
@media screen and (max-width:56.25em){
  .div-personal .portada.a-sangre,
  .div-sucesion .portada.a-sangre,
  .div-executive .portada.a-sangre{padding:7rem 0 4rem}
  .div-personal .portada.a-sangre .portada-cuerpo,
  .div-sucesion .portada.a-sangre .portada-cuerpo,
  .div-executive .portada.a-sangre .portada-cuerpo{grid-template-columns:1fr;
    gap:2.5rem}
  .div-personal .portada.a-sangre .portada-foto-caja,
  .div-sucesion .portada.a-sangre .portada-foto-caja,
  .div-executive .portada.a-sangre .portada-foto-caja{justify-self:center;
    margin-bottom:2rem}
  /* Sin inclinación en móvil (punto 6 de la issue: «entera, sin cortar la
     cara, con el mismo trato que da la portada en móvil»): la tele
     apilada de Home tampoco gira, y torcida encima del texto se lee peor
     que recta, sin sitio a los lados para que el giro respire. */
  .div-personal .portada.a-sangre .portada-foto-caja{transform:none}
}

/* Símbolo vectorial de la referencia del coach junto a «Nuestro porqué».
   Es decorativo: el contenido del manifiesto sigue siendo texto accesible. */
.div-global .manifiesto{position:relative;min-height:27rem;padding-right:48%}
.div-global .manifiesto::after{content:"";position:absolute;inset:0 0 0 52%;
  background:url('/estatico/marca/simbolo-tres-puntas.svg') center/contain no-repeat}
@media(max-width:44em){
  .div-global .manifiesto{min-height:0;padding-right:0}
  .div-global .manifiesto::after{position:static;display:block;width:100%;
    height:18rem;margin-top:1rem;background-size:auto 125%;background-position:center 60%}
}

/* Dirección tipográfica de la nueva referencia: serif con cuerpo, texto
   sans legible y botones redondos. Fuentes alojadas en el propio servidor. */
@font-face{font-family:Gelasio;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/estatico/fuentes/gelasio-latin.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/estatico/fuentes/inter-latin.woff2) format('woff2')}
body{font-weight:400}
h1,h2{line-height:1.08;letter-spacing:-.04em}
.entradilla{font-weight:400;line-height:1.65}
.boton,.cta a,.contacto button,.aplicar button{border-radius:999px}
.boton{font-size:1rem;padding:1rem 1.8rem;justify-content:center;text-align:center}
.div-global .portada.a-sangre h1{font-size:clamp(2.15rem,3.5vw,3.4rem);line-height:1.06}

/* Separar la marca (inicio general) de la división evita que parezcan
   un único enlace. La vuelta al inicio se indica también de forma visible. */
.marca-grupo{display:inline-flex;align-items:center;gap:1rem}
.marca{display:inline-flex;flex-direction:column;gap:.45rem;padding:.3rem 0}
.marca .marca-inicio{font:400 .7rem/1.2 var(--sans);letter-spacing:0;
  color:inherit;text-transform:none}
.marca:hover .marca-inicio{text-decoration:underline;text-underline-offset:.2em}
.marca-grupo .marca-division{font:400 .95rem/1.2 var(--sans);letter-spacing:0;
  text-transform:none}
/* Issue #109: «← Inicio» bajo el nombre de la división. El filete que antes
   llevaba `.marca-division` pasa a la pila que envuelve las dos líneas, para
   que separe del logo las dos a la vez y no solo la de arriba. El `color` de
   la pila es el de la división (`--acento`), así el filete sale del mismo
   tono que antes. Sin el `padding` vertical de antes (.5rem arriba y abajo):
   la segunda línea ocupa ese hueco, y la cabecera no crece. Medido en el
   navegador: con `gap:.3rem` y `.15rem` de relleno crecía 7 px a 390 px
   (193,8 → 200,8); con estos valores la pila mide lo que medía la etiqueta
   sola de antes (2,14 rem).
   Discreto a propósito (el coach pidió una web «muy profesional, nada
   landing»): mismo cuerpo y tipografía que el «← Inicio» del pie
   (`.marca .marca-inicio`, .7rem en `--sans`) y el gris de los enlaces del
   menú (`--suave`), que ya pasa contraste sobre `--fondo`. Sin botón, sin
   color de llamada; se subraya al pasar el ratón, como el del pie.
   Todo bajo `.marca-grupo`, que solo existe en la cabecera pública: las
   páginas del Taller comparten esta hoja y no la pintan. */
.marca-grupo .marca-division-pila{display:inline-flex;flex-direction:column;
  align-items:flex-start;gap:.15rem;padding:0 0 0 1rem;
  border-left:1px solid currentColor;color:var(--acento)}
.marca-grupo .marca-volver{font:400 .7rem/1.2 var(--sans);letter-spacing:0;
  color:var(--suave);text-decoration:none;white-space:nowrap}
.marca-grupo .marca-volver:hover{color:var(--tinta);text-decoration:underline;
  text-underline-offset:.2em}

/* El manifiesto (issue #101: reescrito con la maqueta del coach). Antes el
   `h2` era un rótulo diminuto en mayúsculas y la frase grande iba debajo; ahora
   el rótulo es la `etiqueta` («WHY · POR QUÉ —», la rayita ya la pone
   `.etiqueta::before`) y el `h2` es la frase grande en granate, con su
   `subtitulo` debajo, las `palabras` en fila entre filetes y, al final, la
   línea en cursiva granate. El símbolo de tres puntas sigue a la derecha, ahora
   a lo alto de toda la columna de texto. */
.div-global .manifiesto .escalera-manifiesto{gap:.15rem;margin-top:0}
.div-global .manifiesto .linea-manifiesto{margin-left:0;
  font:italic 400 clamp(1.4rem,2.4vw,2rem)/1.35 var(--serif);
  letter-spacing:-.015em}
/* Un escalón por DEBAJO del titular de la portada (07/10/2026). El coach: «esta
   letra de la home debería ser igual o más pequeña que la de la primera
   sección; es enorme». Medido a 1440 px: el titular 50,4 px y este `h2` 62,4
   px, un 24 % más grande, y con el `antetitulo` de la #123 eran cinco líneas
   gigantes. Pasa a 46 px a 1440 (28,8 a 390): por debajo del titular, para que
   se lea primero lo de arriba, y aún por encima del `h2` de un bloque (41,8). */
.div-global .manifiesto h2{font-size:clamp(1.8rem,3.2vw,2.9rem);line-height:1.06;
  margin-bottom:.9rem}
.div-global .manifiesto .subtitulo{margin-bottom:2rem}
/* El `antetitulo` (issue #123): primera línea del mismo `<h2>`, con su mismo
   tamaño, peso y color, como pidió el coach («encima de "No te falta
   capacidad." y con su mismo tamaño de letra»). Solo se le da su propia
   línea y un respiro de un cuarto de letra antes de «No te falta
   capacidad.», para que se lean como dos frases. */
.manifiesto h2 .antetitulo{display:block;margin-bottom:.25em}
/* «Ponlo un poco más guay» (coach, 07/10/2026). Sin tocar una palabra ni el
   tamaño que pidió en la #123: el bloque entero iba en el mismo granate y se
   leía como un párrafo grande. Ahora tiene ritmo de tres tiempos:
   · El planteamiento («Porque la vida está llena…») en tinta y peso fino, y
     la respuesta («No te falta capacidad») en granate: la frase gira de color
     donde gira el sentido. Tinta sobre la franja clara: 12,59:1 (#123).
   · Miedo · Honor · Interés en versalitas espaciadas, como los rótulos: son
     las tres fuerzas, no tres palabras sueltas en grande.
   · La promesa final firmada con un trazo granate corto encima. */
.div-global .manifiesto h2 .antetitulo{margin-bottom:.4em;color:var(--tinta);font-weight:300}
.banda:not(.tono-clara) .manifiesto h2 .antetitulo{color:var(--tono-tinta)}
.div-global .palabras-manifiesto{font:600 .95rem/1.3 var(--micro);letter-spacing:.22em;
  text-transform:uppercase;padding-top:1.4rem}
.div-global .palabras-manifiesto li{padding:0 1.6rem}
.div-global .palabras-manifiesto li:first-child{padding-left:0}
.div-global .manifiesto .linea-manifiesto::before{content:"";display:block;width:2.5rem;
  height:2px;margin:0 0 1.1rem;background:currentColor}
.palabras-manifiesto{list-style:none;margin:0 0 2rem;padding:1.25rem 0 0;
  border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;
  font:400 clamp(1.3rem,2.2vw,1.75rem)/1.2 var(--serif)}
.palabras-manifiesto li{padding:0 1.5rem;border-left:1px solid var(--linea)}
.palabras-manifiesto li:first-child{padding-left:0;border-left:0}
.manifiesto .palabras-manifiesto,.manifiesto .linea-manifiesto{color:var(--granate)}
.banda:not(.tono-clara) .manifiesto .palabras-manifiesto,
.banda:not(.tono-clara) .manifiesto .linea-manifiesto{color:var(--tono-tinta)}
@media(max-width:44em){
  .div-global .manifiesto h2{margin-bottom:.75rem}
}

/* Las condiciones y la explicación forman una misma secuencia de lectura.
   Evitar sumar dos rellenos grandes y un margen entre estos tres bloques. */
.div-global main.lienzo>section:has(>.rejilla){padding-bottom:0}
.div-global main.lienzo>section:has(>.rejilla)+section.texto,
.div-global main.lienzo>section:has(>.rejilla)+section.texto+section.texto{
  margin-top:0;padding-top:clamp(2rem,4vw,3rem);padding-bottom:0}
.div-global main.lienzo>section:has(>.rejilla)+section.texto h2,
.div-global main.lienzo>section:has(>.rejilla)+section.texto+section.texto h2{
  font-size:clamp(1.7rem,2.8vw,2.6rem);margin-bottom:1rem}

/* El símbolo comparte fila con el texto: todo el texto en la columna 1 y el
   símbolo en la 2, a lo alto de las filas que ocupe el texto (`span 6` y no
   `1/-1`: las filas son implícitas y `-1` solo llega al final de las
   explícitas, o sea, la primera). */
/* `main.lienzo>.banda>.manifiesto` (issue #123): desde la #122 el manifiesto
   de la home va dentro de `<div class="banda tono-clara">`, y con solo
   `main.lienzo>.manifiesto` esta rejilla dejaba de aplicarse. El símbolo se
   quedaba con `position:static` y sin rejilla —un `::after` en línea, sin
   caja— y desaparecía de la página: medido con `getComputedStyle`,
   `display:inline` y nada pintado. */
@media(min-width:44.001em){
  .div-global main.lienzo>.manifiesto,
  .div-global main.lienzo>.banda>.manifiesto{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:3rem;padding-right:0;min-height:0;align-items:start}
  .div-global .manifiesto>*{grid-column:1}
  .div-global .manifiesto::after{position:static;inset:auto;grid-column:2;
    grid-row:1/span 6;align-self:center;
    width:100%;height:24rem;background-size:auto 160%;background-position:center 60%}
}

/* ── El botón de reservar: verde de la casa y más pequeño (issues #88, #118) ──
   La #88 lo pintó naranja con letra blanca y más pequeño («cambia todos los
   agendas por esto y que sea en color naranja con letra blanca y más
   pequeño»). La #118 le quita el naranja: el coach quiere la web «lo más
   pro», sobria, «sobre todo para que sigan agendando». Se queda el tamaño
   de la #88 y el color pasa a ser el del resto de botones: `--acento`
   (#2c4038) con letra blanca, 11,07:1; al pasar el ratón `--acento-oscuro`
   (#223129), 13,64:1 (fórmula WCAG). Eso ya lo pinta `.cta a`, así que aquí
   solo queda el TAMAÑO.

   Cuáles son «los agendas», como en la #88: los enlaces cuyo destino
   contiene `/agenda` (salvo `/agenda/<código>`, la página de una reserva que
   ya existe) o `/aplicar`, y el `cta` grande a `/contacto` de Sobre
   Alejandro, que también dice «Agenda tu conversación».

   Tamaño: 14 px de letra (14,4 el `grande`) con `.85rem 1.5rem` de relleno
   (.9rem 1.6rem el grande), 44-45 px de alto medido en la #88. */
.cta a:is([href*="/agenda"]:not([href*="/agenda/"]),[href*="/aplicar"]),
.cta.grande a[href^="/contacto"]{font-size:.875rem;padding:.85rem 1.5rem}
.cta.grande a:is([href*="/agenda"]:not([href*="/agenda/"]),[href*="/aplicar"]),
.cta.grande a[href^="/contacto"]{font-size:.9rem;padding:.9rem 1.6rem}

/* ── Sobre una banda oscura, el botón en blanco; sobre una clara, verde (#118) ──
   Sobre una franja oscura (`banda: profunda`, como «Cómo se empieza» de la
   portada) ya lo resuelve `.banda .cta a` de más arriba: fondo `--tono-tinta`
   (blanco desde la #131; era el crema #ece4d6) y letra del color de la banda.
   Medido: 11,07:1 sobre el verde, 11,16:1 sobre el granate, 10,78:1 sobre
   `pizarra` (con el crema, 8,77/8,84/8,54).

   Lo que faltaba es la banda CLARA (`tono-clara`, #ddd3c1): allí
   `--tono-tinta` es la tinta casi negra, y el botón salía negro con letra
   beige. El naranja lo tapaba en los de reservar; sin él, todos los botones
   de una banda clara vuelven al verde de la casa con letra blanca, igual que
   sobre el papel. El verde sobre la banda clara mide 7,46:1, así que el botón
   se recorta bien sin borde. `:not(.secundario)` deja en paz el segundo
   camino del filtro, que es un enlace subrayado y no un botón. */
.banda.tono-clara .cta:not(.secundario) a,.portada.tono-clara .cta:not(.secundario) a,
.banda.tono-clara .contacto button,.banda.tono-clara .aplicar button:not(.atras){
  background:#fff;border-color:var(--acento-papel);color:var(--acento-papel)}
.banda.tono-clara .cta:not(.secundario) a:hover,.portada.tono-clara .cta:not(.secundario) a:hover,
.banda.tono-clara .contacto button:hover,.banda.tono-clara .aplicar button:not(.atras):hover{
  background:var(--acento-papel);border-color:var(--acento-papel);color:#fff}
/* En papel no se imprime el fondo: un botón verde con letra blanca saldría
   en blanco sobre blanco. Pasa a contorno con letra verde, como hacía el
   bloque naranja de la #88 que este sustituye. */
@media print{
  .cta:not(.secundario) a,.banda .cta:not(.secundario) a,.portada .cta:not(.secundario) a,
  .banda.tono-clara .cta:not(.secundario) a,.portada.tono-clara .cta:not(.secundario) a,
  .contacto button,.aplicar button:not(.atras),
  .banda.tono-clara .contacto button,.banda.tono-clara .aplicar button:not(.atras){
    background:none;color:var(--acento-papel);border:1px solid var(--acento-papel)}
}

/* ── La portada nueva del coach: subtítulo, «Cómo» en tarjetas y El Método (issue #101) ──
   El coach dibujó la home entera en un PowerPoint (30/09/2026): Por qué → Qué →
   Cómo, y en el Word del 29/09 pidió «que la gente baje y lea sin clickear
   nada». Tres piezas nuevas en esta hoja.

   ── `.subtitulo`: la segunda línea del título ────────────────────────────
   Un `<p>` justo debajo del `h2`, en serif y bastante más pequeño (1,25-1,7 rem
   contra 1,7-2,7 del `h2`), pegado a él: `h2:has(+.subtitulo)` le quita el
   margen de abajo (un solo `:has()`, sin anidar otro). Color `--tinta` sobre el
   papel; dentro de una portada o de una banda `--tono-tinta`, que es la tinta
   legible de cada tono (sobre `tono-clara` vuelve a ser `--tinta`). Es lo que
   ya hacen los `h2` de arriba, y por lo mismo: un subtítulo oscuro sobre una
   banda verde sería ilegible y ningún test lo vería.

   ── Contrastes de esta issue, medidos con la fórmula WCAG ───────────────
     --tinta #0c1412 sobre --fondo #ece4d6 (subtítulo)           14,79:1
     --granate #6d1f2b sobre --fondo (palabras, línea del manifiesto) 8,84:1
     --granate sobre --papel #fbfaf7 (nombre dentro de la tarjeta)   10,70:1
     --granate sobre #ddd3c1 (manifiesto en `tono-clara`)             7,53:1
     --suave #3d4f47 sobre --papel (texto de la tarjeta)               8,36:1
     --acento #2c4038 sobre --papel (número 01 de la tarjeta)         ≥9:1
     (El dibujo de «El Método» iba en naranja; desde la #118 va en granate,
     con sus cifras en su propio bloque, «El Método», más abajo.)
     filete de las palabras (`--linea` #d2c7b3 sobre --fondo)         1,32:1
       es decorativo, igual que el resto de filetes de esta hoja: las palabras
       se leen sin él y las separa también el espacio */
.subtitulo{margin:0 0 1.75rem;font:400 clamp(1.25rem,2.2vw,1.7rem)/1.3 var(--serif);
  letter-spacing:-.012em;color:var(--tinta);max-width:var(--medida)}
.portada .subtitulo,.banda .subtitulo{color:var(--tono-tinta)}
h2:has(+.subtitulo){margin-bottom:.45rem}
/* El título de la bifurcación vive fuera de su `<section>`: allí `main.lienzo>*+*`
   (1,75 rem) separaba el subtítulo de su título. */
main.lienzo>h2+.subtitulo{margin-top:0}

/* ── «Cómo» en tarjetas: `lista_numerada`, no `pasos` ──────────────────
   El coach las dibujó a todo lo ancho, una bajo otra, en papel claro con un
   filete superior oscuro —en el verde de la casa, `--acento`, y no en
   `--tinta` casi negro: «todos los fondos negros cámbialos por verde o
   granate» (issue #87); medido 10,60:1 sobre la tarjeta (`--papel`), 8,77:1
   sobre `--fondo` y 7,46:1 sobre la banda clara (#ddd3c1), todos ≥ 3:1. Dentro
   de una banda oscura la tarjeta recupera `--acento-papel`, el mismo verde, y
   el filete se mide contra su propio papel; contra el granate de la banda da
   1,01:1, que no hace falta: lo que lo dibuja es el papel de debajo—: número pequeño, nombre en serif granate y el texto
   en sans. `pagina.html` pone `.tarjetas` solo cuando el bloque es
   `lista_numerada`; `pasos` sigue en columnas. El nombre va en `--granate`
   directo y no en el color del titular porque la tarjeta trae su propio papel
   claro, también dentro de una banda oscura (misma razón que `.celda`, y por
   eso la tarjeta está en la lista «lo que trae su propio papel recupera su
   tinta»). */
.numerada.tarjetas{grid-template-columns:1fr;gap:1rem}
.numerada.tarjetas li{background:var(--papel);border:1px solid var(--linea);
  border-top:3px solid var(--acento);padding:1.4rem 1.6rem 1.5rem}
.numerada.tarjetas strong{display:block;font:400 clamp(1.35rem,2vw,1.6rem)/1.2 var(--serif);
  letter-spacing:-.01em;color:var(--granate);margin-bottom:.3rem}
.numerada.tarjetas p{font-size:1rem;max-width:var(--medida)}

/* ── El Método: el dibujo radial (issue #101) ───────────────────────────
   SVG en línea hecho en `pagina.html`. Título grande y centrado, rayas, punto
   central y etapas, todo de un solo color, como en el PowerPoint del coach.

   Ese color era el naranja del PowerPoint hasta la issue #118, que quitó el
   naranja de toda la web («lo más pro», sin aire de landing). Ahora es el
   `--granate` de los titulares: el título «El Método» ya se lee como los
   demás títulos de la web, y las etapas y las rayas lo acompañan. Medido
   (fórmula WCAG): 8,84:1 sobre `--fondo`, 7,53:1 sobre la banda clara
   (#ddd3c1), 10,70:1 sobre blanco al imprimir — ya no hace falta un tono más
   oscuro para el texto pequeño de las etapas, como pedía el naranja (4,02:1).
   Si el coach quiere su naranja de vuelta en este dibujo, son estas seis
   líneas. El tamaño del texto está en unidades del propio dibujo (viewBox de
   860 de ancho): a 1152 px de caja se ve a tamaño real; por debajo de 52 em
   (832 px) escalaría a letra de 9 px, así que el dibujo cede el sitio a la
   lista numerada, que es la `<ol>` que ya estaba para los lectores de pantalla.
   Se mide por `screen`: al imprimir (una A4 mide unos 700 px útiles) el dibujo
   SE QUEDA y la lista sigue oculta. */
.diagrama-metodo{text-align:center}
.diagrama-metodo h2{color:var(--granate);font-size:clamp(2.4rem,5vw,4rem);
  line-height:1;max-width:3.4em;margin:0 auto .5rem}
.diagrama-metodo .etiqueta{text-align:center}
.dibujo-metodo{display:block;width:100%;max-width:860px;height:auto;margin:1rem auto 0}
.dibujo-metodo line{stroke:var(--granate);stroke-width:1.5;stroke-linecap:round}
.dibujo-metodo .centro{fill:var(--granate)}
.dibujo-metodo text{fill:var(--granate);font-family:var(--sans)}
.dibujo-metodo .etapa-num{font:600 12px var(--micro);letter-spacing:.16em}
.dibujo-metodo .etapa-nombre{font:400 18px var(--serif)}
.banda:not(.tono-clara) .diagrama-metodo h2{color:var(--tono-tinta)}
.banda:not(.tono-clara) .dibujo-metodo line{stroke:var(--tono-tinta)}
.banda:not(.tono-clara) .dibujo-metodo .centro{fill:var(--tono-tinta)}
.banda:not(.tono-clara) .dibujo-metodo text{fill:var(--tono-tinta)}
.etapas-metodo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0;list-style:none}
@media screen and (max-width:52em){
  .dibujo-metodo{display:none}
  .etapas-metodo{position:static;width:auto;height:auto;margin:1.25rem 0 0;
    overflow:visible;clip:auto;clip-path:none;white-space:normal;
    display:grid;gap:0;text-align:left}
  .etapas-metodo li{border-top:1px solid var(--granate);padding:.8rem 0;
    font:400 1.3rem/1.25 var(--serif);color:var(--granate)}
  .etapas-metodo .num{display:inline-block;min-width:1.8rem;margin:0 .9rem 0 0;color:inherit}
  .banda:not(.tono-clara) .etapas-metodo li{color:var(--tono-tinta);border-top-color:var(--tono-tinta)}
}
@media print{
  /* Medido en el PDF de la home (revisión de la #101): el símbolo del
     manifiesto se partía entre las páginas 1 y 2, y la tarjeta «Relación»
     entre la 3 y la 4. */
  .manifiesto,.numerada.tarjetas li{break-inside:avoid}
  .diagrama-metodo{break-inside:avoid}
  .dibujo-metodo{max-width:100%}
}

/* ── Los textos de la cabecera (issue #102) ──────────────────────────────────
   La maqueta del coach: barra granate con «Para ti · Para Ejecutivos · Para
   Sucesión Empresarial»; debajo, el símbolo de tres puntas a la izquierda,
   «ARKETIP» a su lado con «Preparación Sistémica» debajo en pequeño; al centro
   el menú con los tres sistemas; a la derecha el botón. El ASPECTO no cambia
   (issue #95: barra granate, cabecera crema, nada fijo): entran textos y el
   símbolo.

   `.marca` seguía siendo una columna (ARKETIP arriba, «← Inicio» debajo); ahora
   es una fila —símbolo, bloque de texto— y el bloque de texto es la columna.
   El dibujo del símbolo ocupa solo el 45 % de su lienzo (viewBox 700×680 con
   mucho aire alrededor): a 3,6 rem de ancho el trazo mide ~26 px, tamaño de la
   maqueta. Los márgenes negativos se comen el aire del lienzo, así que la caja
   no ensancha ni alarga la cabecera (mismo alto que antes, medido). Es un `<img>`, no un fondo: no se puede
   repintar, así que conserva su dorado (#b5a36a, adorno, no texto).

   El lema, en `--tenue` (5,05:1 sobre `--fondo`, 6,11:1 sobre `--papel`), 0,68 rem
   y sin mayúsculas ni tracking: si no, es más ancho que ARKETIP y descoloca la
   marca. Medido: 5,05:1 sobre #ece4d6, texto pequeño ≥ 4,5:1. Texto de la barra:
   el mismo `#cdd6cc` sobre granate de siempre (no cambia).

   En el pie la marca no lleva símbolo ni lema (no se pidió): `.marca` allí sigue
   siendo ARKETIP + «← Inicio» apilados, por eso `.marca-texto` y
   `.marca-simbolo` solo existen en la cabecera. */
.cabecera .marca{flex-direction:row;align-items:center;gap:.75rem;padding:0}
.marca-simbolo{display:block;width:3.6rem;height:auto;flex:none;
  margin:-.95rem -.4rem -.95rem -.6rem}
/* `.marca span` (arriba) pinta de `--acento` y en mayúsculas CUALQUIER `span`
   dentro de la marca: era para la etiqueta de división de antes de la #53 y
   ahora le tocaría a los dos `span` nuevos. Aquí heredan la tinta de la marca. */
.marca .marca-texto,.marca .marca-nombre{color:inherit}
.marca-texto{display:flex;flex-direction:column;gap:.3rem}
.marca-lema{font:400 .68rem/1.1 var(--sans);letter-spacing:0;text-transform:none;
  color:var(--tenue)}
@media(max-width:40em){
  .marca-simbolo{width:3rem;margin:-.8rem -.3rem -.8rem -.5rem}
}

/* ── Iconos de línea (issue #130) ─────────────────────────────────────────
   El coach: «Las páginas web se ven trabajadas cuando tienen esos detallitos…
   No son emojis. Como alguna imagen que transmita un poco el concepto. Un poco
   de movimiento también.» Los dibujos están en `publico/templates/_iconos.html`
   (lista blanca: un nombre desconocido no pinta nada). Piloto:
   `/executive/el-sistema`. Todas las reglas cuelgan de `.icono`, `.celda`,
   `.numerada.tarjetas` o `.portada-dibujo`: ninguna página del Taller que
   cargue esta hoja tiene esas clases con un `<svg>` dentro.

   COLOR, medido con la fórmula WCAG (mínimo 3:1 para un gráfico):
     · En las tarjetas (`.celda`, `.numerada.tarjetas li`): `--acento`, el
       verde de la casa, el mismo del filete de arriba de la tarjeta. Las dos
       tarjetas traen su propio papel (#fbfaf7) también dentro de una banda
       oscura —están en la lista «lo que trae su propio papel recupera su
       tinta», que les devuelve `--acento-papel`—, así que el fondo real es
       siempre ese papel: #2c4038 sobre #fbfaf7 = 10,60:1.
       El dorado del símbolo NO sirve aquí: #b5a36a sobre #fbfaf7 = 2,39:1,
       y el dorado del prototipo #b18d5f = 2,94:1. Los dos bajo 3:1.
     · El dibujo de portada: el dorado del símbolo de la cabecera, #b5a36a,
       que es adorno y aquí va de adorno. Medido sobre los fondos donde puede
       caer una portada oscura: verde #2c4038 4,43:1, granate #6d1f2b 4,47:1,
       pizarra #31413a 4,32:1. Sobre una portada `tono-clara` (#ddd3c1) daría
       1,68:1, así que ahí pasa a `--tono-tinta` (#0c1412, 12,59:1).
       Medido con los valores de la hoja el 07/10/2026, con la #131 en curso
       (que cambia `--tono-tinta` a blanco sobre las bandas oscuras): el dorado
       no depende de `--tono-tinta`, no le afecta.
   Nada de naranja (se quitó en #117-#127) ni rellenos: solo trazo de 1,5
   unidades (≈1,25 px en un icono de 40 px) y puntos pequeños en las puntas,
   como el símbolo.

   MOVIMIENTO: solo en los dibujos, nunca en una sección (la entrada al bajar
   se quitó en la #120 y no vuelve). Por defecto NADA está escondido: el
   icono dibujado entero es lo que hay sin JavaScript, al imprimir, con
   `prefers-reduced-motion` y en una captura de página entera. El trazado lo
   arranca el script de `_base.html`, que pone `.trazable` en el momento en
   que el icono ENTRA en pantalla porque la persona ha bajado, y `.trazado`
   en el fotograma siguiente: la línea se dibuja una vez, en 1,1 s. Lo que
   ya se ve al cargar no se toca, y lo que nunca se alcanza bajando (una
   captura que estira la ventana sin desplazarse) tampoco. */
.icono{display:block;flex:none;overflow:visible}
.icono .p{fill:currentColor;stroke:none}
/* Issue #147: los iconos pequeños son de Phosphor en dos tonos («los logos
   son un poco cutrillos»; el coach eligió esta versión entre cuatro). La línea
   va en `currentColor` —el verde de la casa, como antes— y la capa suave
   (`.tono`) en el dorado del símbolo, rebajado. Es adorno: la forma la da la
   línea, que sigue a 10,60:1 sobre el papel de la tarjeta. */
.icono .tono{fill:#b5a36a;opacity:.45}
.celda>.icono{width:2.5rem;height:2.5rem;margin:0 0 1rem;color:var(--acento)}
/* La tarjeta de `lista_numerada` con icono pasa a dos columnas: el icono a la
   izquierda, y número, nombre y texto a la derecha. Sin `:has()` (navegador
   viejo) el icono queda encima del número, que también se lee bien. */
.numerada.tarjetas li:has(>.icono){display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:1.5rem;align-items:start}
.numerada.tarjetas li>.icono{grid-row:1/span 3;width:2.75rem;height:2.75rem;
  margin:.1rem 0 0;color:var(--acento)}
.numerada.tarjetas li:has(>.icono)>:not(.icono){grid-column:2}
/* El dibujo de portada, al lado del titular. No crece: el titular se queda
   con todo el ancho que le sobre. */
.portada-dibujo{flex:0 0 auto;width:clamp(9rem,16vw,13rem);margin-left:auto;
  color:#b5a36a}
.portada-dibujo .icono{width:100%;height:auto}
.portada.tono-clara .portada-dibujo{color:var(--tono-tinta)}
/* Las tres piezas, un poco separadas hacia fuera; al pasar el ratón encajan.
   El desplazamiento va AQUÍ y no en el SVG: sin la hoja, las tres piezas
   salen juntas, que también es el dibujo. En un elemento SVG los `px` de un
   `transform` son unidades del propio dibujo (lienzo de 200). */
.dibujo-tres-bloques .pieza{transition:transform .6s cubic-bezier(.4,0,.2,1)}
.dibujo-tres-bloques .pieza-1{transform:translate(0,-6px)}
.dibujo-tres-bloques .pieza-2{transform:translate(-5.2px,3px)}
.dibujo-tres-bloques .pieza-3{transform:translate(5.2px,3px)}
/* En el móvil el dibujo grande se va: debajo del titular solo alargaría la
   portada y empujaría el contenido. El texto no se toca nunca. */
@media(max-width:40em){
  .portada-dibujo{display:none}
  .numerada.tarjetas li>.icono{width:2.25rem;height:2.25rem}
  .numerada.tarjetas li:has(>.icono){column-gap:1rem}
}

/* El trazado al entrar en pantalla. `pathLength="1"` en cada trazo (ver
   `_iconos.html`) hace que «la línea entera» mida 1 sin medir nada: guion de
   1 y desplazamiento de 1 es la línea escondida; desplazamiento 0, dibujada.
   El escalonado va por orden de trazo, para que el dibujo se haga como a
   mano. Los puntos aparecen al final. */
.icono.trazable .t{stroke-dasharray:1;stroke-dashoffset:1}
.icono.trazable .p{opacity:0}
.icono.trazable.trazado .t{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1)}
.icono.trazable.trazado .p{opacity:1;transition:opacity .4s ease-out .9s}
.icono.trazable.trazado .t:nth-of-type(2){transition-delay:.15s}
.icono.trazable.trazado .t:nth-of-type(3){transition-delay:.3s}
.icono.trazable.trazado .pieza-2 .t{transition-delay:.25s}
.icono.trazable.trazado .pieza-3 .t{transition-delay:.5s}

/* La reacción al ratón, SOLO con ratón y SOLO en el dibujo: las tarjetas no
   son enlaces, y una tarjeta que se levanta o echa sombra parece que se
   pulsa. En la portada, las tres piezas encajan. Hasta la #147 el icono de
   cada tarjeta se volvía a trazar al pasar el ratón y la aguja de la brújula
   giraba; con los iconos de Phosphor (relleno, no trazo) ya no hay línea que
   trazar ni aguja que girar, y esas reglas se quitaron. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .portada-dibujo:hover .pieza{transform:none}
}

/* Quien pide que no se mueva nada: ni trazado ni reacción. El script ya no
   arranca en ese caso; esto cubre el cambio de preferencia a media visita. */
@media(prefers-reduced-motion:reduce){
  .icono.trazable .t{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .icono.trazable .p{opacity:1;transition:none}
  .dibujo-tres-bloques .pieza{transition:none}
}
/* En papel, siempre dibujados, aunque el script haya dejado alguno a medias. */
@media print{
  .icono.trazable .t{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .icono.trazable .p{opacity:1!important}
  .portada-dibujo{color:var(--tinta)}
}

/* ── Fotos de concepto (issue #143) ──────────────────────────────────────────
   El coach mandó como referencia tres fotos de bodegón con figuras de madera
   («TIENE QUE QUEDAR BIEN Y QUE TENGAS SENTIDO») y aprobó un plan con solo dos
   sitios por página de sistema: una foto encima de cada paso de «Cómo se
   empieza» y la frase que resume la página sobre una foto a todo el ancho. Sus
   fotos (portadas, «Sobre Alejandro») no se tocan, y los dibujos de los
   apartados (#141) tampoco. Las fotos son `web/static/marca/concepto-*.jpg`.

   Las dos llevan el mismo tono suave (`saturate`+`sepia`): vienen de bancos de
   imágenes, cada una con su luz, y sin eso una salía fría y otra naranja. */
.numerada li:has(>.paso-foto){border-top:0;padding-top:0}
.paso-foto{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  object-position:center 35%;margin:0 0 1rem;background:var(--linea);
  filter:saturate(.82) sepia(.08)}
.numerada li>.paso-foto+.num{border-top:2px solid var(--linea);padding-top:1rem}

/* La frase sobre foto. Hija directa de `main.lienzo` y a sangre con la misma
   rejilla de tres columnas que una banda: la foto ocupa la pantalla y el texto
   cae en la columna de siempre.

   EL VELO, medido con la fórmula WCAG en el peor caso (texto blanco sobre una
   foto blanca, la pirámide tiene el fondo casi blanco):
     · a la izquierda, velo .86 → 12,56:1;
     · el texto acaba, a 1440, en el 55 % de la pantalla, y hasta el 75 % el
       velo no baja de .66 → 6,03:1;
     · en pantallas de menos de 64em el texto llega más a la derecha, donde el
       degradado aclara, así que el velo pasa a uniforme: .74 → 8,1:1.
   El mínimo de la casa es 4,5:1. */
main.lienzo>.franja-foto{grid-column:1/-1;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr min(var(--ancho),100% - 3rem) 1fr;
  align-items:end;min-height:clamp(20rem,38vw,28rem);margin-top:var(--aire);
  background:var(--banda)}
main.lienzo>.franja-foto+*{margin-top:var(--aire)}
/* El filete de arriba de un apartado sobra debajo de la foto, igual que debajo
   de una banda: el filo de la foto ya es la separación. */
main.lienzo>.franja-foto+section.apartado{border-top:0}
/* Encuadre al 75 % horizontal: en las tres fotos lo que importa está a la
   derecha (el texto va a la izquierda). Con `center`, a 375 px el peón de
   /personal quedaba fuera de la franja y se veía solo negro. */
.franja-foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:75% 40%;filter:saturate(.75) sepia(.1)}
.franja-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgb(12 20 18/.86) 0%,rgb(12 20 18/.66) 75%,rgb(12 20 18/.3) 100%)}
.franja-foto>blockquote{grid-column:2;position:relative;z-index:1;max-width:var(--medida);
  border:0;padding:var(--aire-banda) 0}
.franja-foto>blockquote::before{content:"";display:block;width:2.5rem;height:2px;
  background:#b5a36a;margin-bottom:1.2rem}
.franja-foto blockquote p{font:400 clamp(1.35rem,2.6vw,1.95rem)/1.3 var(--serif);
  color:#fff;text-wrap:balance;margin:0}
.franja-foto blockquote cite,.franja-foto blockquote .pie{color:#e6e9e6}
/* Dos frases en la misma franja (issue #150, `antetexto`): aire entre las dos,
   el mismo que entre la rayita y la primera. */
.franja-foto blockquote p+p{margin-top:1.2rem}
@media(max-width:64em){
  .franja-foto::after{background:rgb(12 20 18/.74)}
}
/* En papel no hay foto de fondo: la frase vuelve a ser una cita normal. */
@media print{
  .franja-foto>img,.franja-foto::after{display:none}
  main.lienzo>.franja-foto{background:none;min-height:0}
  .franja-foto blockquote p{color:var(--tinta)}
}

/* ══ Rediseño de la web (issue #148, 08/10/2026) ══════════════════════════════
   Lo pidió así: «todavía me da la sensación de que es un poco hecha por la IA
   […] vacía, […] faltan detalles, […] faltan imágenes […] tiene partes buenas y
   luego tiene partes que son mega simples […] sin cambiar el contenido ni
   mucho, pero haciéndola mega moderna».

   Lo que NO se mueve, porque son decisiones del coach escritas más arriba: la
   paleta (verde de la casa, granate de titulares, papel), las tipografías, el
   televisor de la portada con sus fotos, la cabecera no fija (#95, #102), los
   botones sin naranja ni flechas (#118), nada que aparezca al bajar (#120) y
   los iconos de Phosphor en dos tonos sin medallón (#147: eligió B, no D).

   Lo que sí cambia:
     · fotos en las secciones que eran solo texto, todas con el mismo
       tratamiento de color (más cálidas y algo menos saturadas). Llevaron un
       marco fino dorado desplazado detrás y se quitó el mismo día: «parece que
       estén descuadradas porque le has puesto un recuadro detrás»;
     · las tarjetas pierden el filo grueso de arriba y ganan sombra, papel y
       una rayita granate: se leen como piezas, no como cajas de formulario;
     · las listas numeradas llevan el número grande en serif granate;
     · «Tres sistemas» pasa de filas a tres tarjetas con foto;
     · «El Método» va sobre la franja oscura, con las rayas en dorado;
     · el «¿Es para ti?» marca cada punto con un visto o un aspa;
     · el pie lleva el símbolo y el lema, y un aire más generoso.

   Todo cuelga de `.web-publica` (en el `<html>` de `_base.html`): las páginas
   del área de cliente del Taller cargan esta misma hoja y no la llevan. Y nada
   entra con animación al cargar: se probó en el titular de la portada y se
   quitó por la #120, que sigue valiendo (`test_no_queda_la_entrada_suave`). */
.web-publica{
  --oro:#b18d5f;          /* el dorado del prototipo: SOLO adorno (ver la cabecera) */
  --oro-claro:#d1b07c;    /* dorado para TEXTO sobre oscuro: 5,24:1 sobre pizarra, 5,38:1 sobre verde;
                             el de arriba daba 3,51:1 y no llega al 4,5:1 de la casa */
  --sombra:0 1px 2px rgb(12 20 18/.05),0 18px 40px -22px rgb(12 20 18/.32);
  --sombra-alta:0 2px 6px rgb(12 20 18/.07),0 30px 60px -26px rgb(12 20 18/.45);
  --curva:cubic-bezier(.2,.8,.2,1);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
.web-publica ::selection{background:var(--granate);color:#fff}
.web-publica img{max-width:100%}

/* ── La foto de un bloque ─────────────────────────────────────────────────
   Sin marco detrás: el recuadro dorado desplazado que llevaba hacía que la
   foto pareciera descolocada (lo dijo así al verlo publicado, 08/10/2026). */
.web-publica .foto-bloque,.web-publica .apartado-foto{position:relative;margin:0}
.web-publica .foto-bloque img,.web-publica .apartado-foto img{display:block;width:100%;
  height:100%;object-fit:cover;background:var(--linea);box-shadow:var(--sombra)}

/* Texto a la izquierda, foto a la derecha. La foto se queda quieta mientras
   se lee una columna larga (la trayectoria, las preguntas). */
@media(min-width:56.001em){
  .web-publica main.lienzo section.con-foto{display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:clamp(3rem,7vw,6.5rem);align-items:start}
  .web-publica section.con-foto>.foto-bloque{position:sticky;top:2.5rem;
    margin-top:.5rem;aspect-ratio:4/5}
}
@media(max-width:56em){
  .web-publica section.con-foto>.foto-bloque{margin:2.5rem 0 0;
    aspect-ratio:4/3}
}

/* ── Rótulos de sección: la rayita en dorado, no en tinta ───────────────── */
.web-publica .etiqueta{letter-spacing:.2em}

/* ── WHY · «No te falta capacidad», con el iceberg ──────────────────────── */
.web-publica .manifiesto.con-foto::after{content:none;display:none}
@media(min-width:56.001em){
  .web-publica .div-global main.lienzo .manifiesto.con-foto{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;
    padding-right:0;min-height:0}
  .web-publica .manifiesto.con-foto>.con-foto-texto{grid-column:1}
  .web-publica .manifiesto.con-foto>.foto-bloque{grid-column:2;grid-row:1;
    aspect-ratio:4/5;max-height:36rem;position:relative;top:auto}
}
.web-publica .manifiesto .foto-bloque img{object-position:50% 62%}

/* ── WHAT · «Tres sistemas»: tres tarjetas con foto ────────────────────────
   Las filas anchas de la #67 sin foto siguen igual (no hay ninguna hoy).
   Lo de `:hover` deshace el relleno verde de la fila: aquí la tarjeta trae su
   propio papel, y la letra blanca de la fila se quedaría blanco sobre blanco. */
.web-publica main.lienzo>.bifurcacion:has(>.rama>.rama-foto){display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.4vw,2rem);
  border-top:0;margin-top:2.25rem;padding-bottom:var(--aire)}
.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama{display:flex;flex-direction:column;text-align:left;
  align-items:stretch;
  padding:0;margin:0;border:1px solid rgb(12 20 18/.08);background:var(--papel);
  color:var(--tinta);box-shadow:var(--sombra);
  transition:box-shadow .45s var(--curva)}
.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama::before{content:none}
.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama:hover,
.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama:has(:focus-visible){color:var(--tinta);
  --suave:var(--suave-papel);--tenue:var(--tenue-papel);--linea:var(--linea-papel);
  --acento:var(--acento-papel);box-shadow:var(--sombra-alta)}
.web-publica main.lienzo .bifurcacion:has(>.rama>.rama-foto) .rama h2,
.web-publica main.lienzo .bifurcacion:has(>.rama>.rama-foto) .rama:hover h2,
.web-publica main.lienzo .bifurcacion:has(>.rama>.rama-foto) .rama:has(:focus-visible) h2{
  color:var(--granate);font-size:clamp(1.45rem,2vw,1.75rem);
  padding:1.6rem 1.75rem 0;margin:0}
.web-publica .rama-foto{margin:0;aspect-ratio:3/2;overflow:hidden;
  background:var(--linea)}
.web-publica .rama-foto img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--curva)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .web-publica .bifurcacion:has(>.rama>.rama-foto) .rama:hover .rama-foto img{transform:scale(1.045)}
}
.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama-textos{padding:1.1rem 1.75rem 0;gap:1rem;
  flex:1 1 auto;align-content:start}
.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama p{font-size:.95rem;line-height:1.6}
.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama .enlace{align-self:flex-start;
  margin:1.5rem 1.75rem 1.75rem;padding:0 0 .3rem;font-size:.86rem;
  color:var(--acento-papel);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .4s var(--curva)}
.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama .enlace:hover{text-decoration:none;
  background-size:40% 1px}
@media(max-width:64em){
  .web-publica main.lienzo>.bifurcacion:has(>.rama>.rama-foto){grid-template-columns:1fr;
    max-width:var(--medida)}
  .web-publica .rama-foto{aspect-ratio:16/9}
}

/* ── Listas numeradas: el número grande, en serif granate ───────────────── */
.web-publica main.lienzo .numerada.tarjetas{gap:1rem}
.web-publica main.lienzo .numerada.tarjetas li{display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(1.1rem,2.4vw,1.75rem);
  align-items:start;padding:1.6rem clamp(1.25rem,2.6vw,2rem);
  background:var(--papel);border:1px solid rgb(12 20 18/.08);box-shadow:var(--sombra);
  transition:box-shadow .45s var(--curva)}
.web-publica main.lienzo .numerada.tarjetas li>.num{grid-column:1;grid-row:1/span 2;
  margin:0;padding:0;border:0;min-width:2.2ch;
  font:300 clamp(2.3rem,3.4vw,3rem)/.9 var(--serif);letter-spacing:-.03em;
  color:var(--granate)}
.web-publica main.lienzo .numerada.tarjetas li>strong,
.web-publica main.lienzo .numerada.tarjetas li>p{grid-column:2}
.web-publica main.lienzo .numerada.tarjetas li>strong{margin:.15rem 0 .35rem}
.web-publica main.lienzo .numerada.tarjetas li>p{margin:0}
.web-publica main.lienzo .numerada.tarjetas li>.icono{grid-column:3;grid-row:1/span 2;
  align-self:center;width:2.75rem;height:2.75rem;margin:0}
@media(max-width:40em){
  .web-publica main.lienzo .numerada.tarjetas li{grid-template-columns:auto minmax(0,1fr)}
  .web-publica main.lienzo .numerada.tarjetas li>.icono{display:none}
}
/* Issue #150: sin iconos («más pros»), el número manda. El coach eligió esta
   maqueta entre cinco: encima del título, grande, en dorado y con un filete
   corto debajo. El dorado de adorno (`--oro`, 2,94:1 sobre el papel de la
   tarjeta) no llega ni al 3:1 de la letra grande, así que va uno más oscuro de
   la misma familia: #9c7a4c, 3,79:1 sobre #fbfaf7 (fórmula WCAG). */
.web-publica main.lienzo .numerada.tarjetas{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.web-publica main.lienzo .numerada.tarjetas li{grid-template-columns:minmax(0,1fr);align-content:start}
.web-publica main.lienzo .numerada.tarjetas li>.num{grid-column:1;grid-row:auto;
  color:#9c7a4c;font-weight:400;padding-bottom:.9rem;margin-bottom:1rem;
  border-bottom:1px solid var(--linea);width:3.2rem}
.web-publica main.lienzo .numerada.tarjetas li>strong,
.web-publica main.lienzo .numerada.tarjetas li>p{grid-column:1}

/* ── Tarjetas de rejilla: papel, sombra y una rayita granate ────────────── */
.web-publica main.lienzo .rejilla .celda{position:relative;background:var(--papel);
  border:1px solid rgb(12 20 18/.08);border-top:1px solid rgb(12 20 18/.08);
  box-shadow:var(--sombra);padding:2rem 1.75rem 1.75rem;
  transition:box-shadow .45s var(--curva)}
.web-publica main.lienzo .rejilla .celda::before{content:"";position:absolute;top:-1px;
  left:1.75rem;width:2.25rem;height:3px;background:var(--granate)}
.web-publica main.lienzo .rejilla .celda>.icono{width:2.75rem;height:2.75rem;margin:0 0 1.1rem}
.web-publica main.lienzo .rejilla .celda h3{margin-bottom:.5rem}

/* ── El Método sobre la franja oscura ───────────────────────────────────── */
.web-publica .banda:not(.tono-clara) .dibujo-metodo line{stroke:var(--oro);stroke-width:1.25}
.web-publica .dibujo-metodo .anillos circle{fill:none;stroke:var(--linea);stroke-width:1}
.web-publica .banda:not(.tono-clara) .dibujo-metodo .anillos circle{stroke:rgb(255 255 255/.16)}
.web-publica .dibujo-metodo .anillos circle+circle{stroke-dasharray:2 6}
.web-publica .dibujo-metodo .puntas circle{fill:var(--granate)}
.web-publica .banda:not(.tono-clara) .dibujo-metodo .puntas circle{fill:var(--oro)}
.web-publica .banda:not(.tono-clara) .dibujo-metodo .centro{fill:#fff}
.web-publica .banda:not(.tono-clara) .dibujo-metodo .etapa-num{fill:var(--oro-claro)}
.web-publica .banda:not(.tono-clara) .dibujo-metodo .etapa-nombre{fill:#fff}
.web-publica .banda:not(.tono-clara) .diagrama-metodo .etapas-metodo .num{color:var(--oro-claro)}

/* ── El Golden Circle con su dibujo (Executive y Sucesión) ──────────────────
   «Por qué · Cómo · Qué» son los tres anillos del círculo de Sinek, de dentro
   afuera. Cada nivel lleva el dibujo de los tres con SU anillo en granate:
   el porqué es el centro relleno. Adorno: el rótulo de al lado ya lo dice. */
.web-publica .golden-circle dt::before{content:"";display:block;width:3rem;height:3rem;
  margin:0 0 .85rem;background:center/contain no-repeat}
.web-publica .golden-circle .nivel:nth-child(1) dt::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='7' fill='%236d1f2b'/%3E%3Ccircle cx='24' cy='24' r='15' fill='none' stroke='%23b9ab95' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='22' fill='none' stroke='%23b9ab95' stroke-width='1'/%3E%3C/svg%3E")}
.web-publica .golden-circle .nivel:nth-child(2) dt::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='7' fill='none' stroke='%23b9ab95' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='15' fill='none' stroke='%236d1f2b' stroke-width='2'/%3E%3Ccircle cx='24' cy='24' r='22' fill='none' stroke='%23b9ab95' stroke-width='1'/%3E%3C/svg%3E")}
.web-publica .golden-circle .nivel:nth-child(3) dt::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='7' fill='none' stroke='%23b9ab95' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='15' fill='none' stroke='%23b9ab95' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='22' fill='none' stroke='%236d1f2b' stroke-width='2'/%3E%3C/svg%3E")}
.web-publica .golden-circle dt{color:var(--granate)}

/* ── «¿Es para ti?»: un visto en lo que sí, un aspa en lo que no ────────── */
.web-publica .filtro .si,.web-publica .filtro .no{box-shadow:var(--sombra);
  border:1px solid rgb(12 20 18/.08);padding:2rem 2rem 1.6rem}
.web-publica .filtro .si{border-top:3px solid var(--granate)}
.web-publica .filtro .no{background:transparent;box-shadow:none;border:1px solid var(--linea-papel)}
.web-publica .banda .filtro .no{background:var(--papel)}
.web-publica .filtro ul{list-style:none;padding:0}
.web-publica .filtro li{position:relative;padding-left:2.1rem;margin-bottom:.85rem}
.web-publica .filtro li::before{content:"";position:absolute;left:0;top:.12em;
  width:1.3rem;height:1.3rem;border-radius:50%}
.web-publica .filtro .si li::before{background:var(--acento-papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.web-publica .filtro .no li::before{border:1px solid var(--tenue-papel);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='%2352635a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* ── «Cómo se empieza»: los pasos, con su número en un círculo ──────────────
   El círculo se sienta sobre el filete de arriba de cada paso, que ya existía:
   leídos de izquierda a derecha, los tres filetes hacen una línea de tiempo.
   Su fondo es el de la sección (`--tono` dentro de una banda) para que el
   filete no lo atraviese. */
.web-publica main.lienzo .numerada:not(.tarjetas)>li>.num{display:grid;
  place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid currentColor;padding:0;margin:-1.25rem 0 1.1rem;
  font:500 .9rem/1 var(--sans);letter-spacing:0;background:var(--tono,var(--fondo))}
.web-publica main.lienzo .numerada:not(.tarjetas)>li:not(:has(>.paso-foto)){padding-top:0}
/* Con foto encima, el círculo se monta sobre el borde de abajo de la foto. */
.web-publica main.lienzo .numerada:not(.tarjetas)>li>.paso-foto+.num{
  margin:-1.25rem 0 1rem 1.25rem;position:relative;
  background:var(--papel);color:var(--granate);border-color:var(--granate)}

.web-publica .numerada .paso-foto{box-shadow:var(--sombra);filter:none}
.web-publica main.lienzo .numerada:not(.tarjetas)>li>strong{font:400 1.35rem/1.25 var(--serif);
  letter-spacing:-.01em}

/* Las fases del programa de Sucesión, con el mismo gesto: el número en un
   círculo sentado sobre el filete, y el nombre de la fase en serif. */
.web-publica main.lienzo .fases>li{padding-top:0}
.web-publica main.lienzo .fases>li>.num{display:grid;place-items:center;width:2.5rem;
  height:2.5rem;border-radius:50%;border:1px solid var(--granate);color:var(--granate);
  margin:-1.3rem 0 1rem;padding:0;background:var(--tono,var(--fondo));
  font:500 .8rem/1 var(--sans);letter-spacing:.02em}
.web-publica main.lienzo .fases>li>strong{display:block;
  font:400 clamp(1.2rem,1.8vw,1.45rem)/1.25 var(--serif);letter-spacing:-.01em}
/* Las tarjetas que van justo debajo de las fases (Sucesión, petición del
   14/10/2026 tras la #150): «los 4 cuadrados blancos […] los pones del 1 2 3 4
   de arriba». Sin título propio, pegadas a las fases y con el mismo hueco
   entre columnas (1.5rem, el de `.fases`), para que cada tarjeta caiga bajo su
   número. Sin `:has()` (navegador viejo) solo se pierde el acercamiento. */
.web-publica main.lienzo>section:has(>.fases):has(+section>.rejilla){padding-bottom:0}
.web-publica main.lienzo>section:has(>.fases)+section:has(>.rejilla){margin-top:0;padding-top:1.75rem}
.web-publica main.lienzo>section:has(>.fases)+section>.rejilla{gap:1.5rem}

/* ── Preguntas frecuentes ───────────────────────────────────────────────── */
.web-publica .faq summary{padding-top:1.35rem;padding-bottom:1.35rem;
  font:400 clamp(1.08rem,1.5vw,1.22rem)/1.35 var(--serif);letter-spacing:-.005em;
  transition:color .25s}
.web-publica .faq .respuesta p{max-width:var(--medida)}
@media(min-width:56.001em){
  .web-publica .faq.con-foto .foto-bloque{aspect-ratio:1/1;margin-top:5.5rem}
}

/* ── «Sigue el hilo» con la plumilla ────────────────────────────────────── */
@media(min-width:56.001em){
  .web-publica main.lienzo .captura-email.con-foto{display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    column-gap:clamp(3rem,7vw,6.5rem);align-items:center}
  .web-publica .captura-email.con-foto>.foto-bloque{aspect-ratio:3/2}
}
@media(max-width:56em){
  .web-publica .captura-email.con-foto>.foto-bloque{margin:2.5rem 0 0;
    aspect-ratio:16/9}
}

/* ── Cabecera de cada apartado con foto ─────────────────────────────────── */
.web-publica main.lienzo section.apartado:has(>.apartado-foto){display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.web-publica .apartado:has(>.apartado-foto) .apartado-texto{max-width:none}
.web-publica .apartado-foto{aspect-ratio:3/2}
@media(max-width:56em){
  .web-publica main.lienzo section.apartado:has(>.apartado-foto){grid-template-columns:1fr}
  .web-publica .apartado-foto{margin-top:2rem;aspect-ratio:16/9}
}

/* ── Formulario de contacto, en su tarjeta ──────────────────────────────── */
.web-publica .seccion-contacto form.contacto{background:var(--papel);
  border:1px solid rgb(12 20 18/.08);box-shadow:var(--sombra);
  padding:clamp(1.5rem,3.5vw,2.5rem)}
.web-publica .seccion-contacto.con-foto>.foto-bloque{aspect-ratio:4/5}

/* ── Trayectoria: una línea de tiempo ───────────────────────────────────────
   Un filete vertical recorre los tramos y cada uno lleva un punto granate a su
   altura. El periodo queda a la izquierda, como hasta ahora. */
.web-publica .seccion-trayectoria .foto-bloque{aspect-ratio:3/4}
.web-publica .seccion-trayectoria .foto-bloque img{object-position:40% 50%}
@media(min-width:40.001em){
  .web-publica .trayectoria{position:relative;row-gap:2rem}
  .web-publica .trayectoria dd{position:relative;padding-left:2rem}
  .web-publica .trayectoria dd::before{content:"";position:absolute;left:0;top:-.1rem;
    bottom:-2.1rem;width:1px;background:var(--linea)}
  .web-publica .trayectoria dd:last-of-type::before{bottom:0}
  .web-publica .trayectoria dd::after{content:"";position:absolute;left:-.3rem;top:.35rem;
    width:.65rem;height:.65rem;border-radius:50%;background:var(--granate);
    box-shadow:0 0 0 4px var(--fondo)}
  .web-publica .trayectoria dt{padding-top:.15rem;color:var(--granate)}
}
.web-publica .trayectoria dd>strong{font:400 1.3rem/1.25 var(--serif);
  letter-spacing:-.01em;color:var(--tinta)}

/* ── Listas sueltas: «Temores frecuentes…», «Se reconoce…», «Formación» ─────
   Cada punto en su renglón con un filete debajo. Issue #150: el coach no quería
   «los guiones» y eligió, entre tres maquetas, una columna con la letra de los
   titulares y un rombo dorado delante en vez de la rayita granate. Una sola
   columna: en dos, «Se reconoce en cosas así» partía frases de dos líneas. */
.web-publica ul.simple{list-style:none;padding:0;columns:1;max-width:44rem;
  border-top:1px solid var(--linea)}
.web-publica ul.simple li{position:relative;margin:0;padding:.9rem 0 .9rem 1.8rem;
  border-bottom:1px solid var(--linea);font:400 1.15rem/1.5 var(--serif)}
.web-publica ul.simple li::before{content:"";position:absolute;left:.2rem;top:1.55rem;
  width:.45rem;height:.45rem;background:var(--oro);transform:rotate(45deg)}

/* El formulario ocupa su columna entera cuando lleva foto al lado. */
.web-publica .seccion-contacto.con-foto form.contacto{max-width:none}

/* ── Botones: un poco más de cuerpo y una transición suave ──────────────── */
.web-publica .boton,.web-publica .cta a,.web-publica .contacto button,
.web-publica .suscripcion button{transition:background-color .3s,border-color .3s,
  color .3s,box-shadow .3s}
.web-publica .cta:not(.secundario) a:hover{box-shadow:0 10px 24px -12px rgb(12 20 18/.55)}

/* ── El último «Contáctame» de la página, centrado y con aire ───────────────
   Con el símbolo encima, al doble de su tamaño por lo mismo que en el pie: el
   dibujo ocupa la mitad central de su lienzo. */
.web-publica main.lienzo>p.cta.grande:last-child{text-align:center;max-width:none;
  width:100%;padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3.5rem,8vw,6rem);margin:0}
.web-publica main.lienzo>p.cta.grande:last-child::before{content:"";display:block;
  width:6rem;height:5.8rem;margin:0 auto .75rem;
  background:url('/estatico/marca/simbolo-tres-puntas.svg') center/contain no-repeat}

/* ── Las frases sueltas del método, en grande ───────────────────────────────
   «No basta con tomar conciencia…», «Cada bloque trabaja…»: eran un párrafo
   con una raya al lado y se leían como una nota al margen. Pasan a ser la
   frase que son, en serif, con la rayita dorada de las frases sobre foto. */
.web-publica main.lienzo>blockquote,.web-publica main.lienzo>.banda>blockquote{
  border:0;padding:0;max-width:46rem}
.web-publica main.lienzo>blockquote::before,.web-publica main.lienzo>.banda>blockquote::before{
  content:"";display:block;width:2.5rem;height:2px;background:var(--oro);margin:0 0 1.2rem}
.web-publica main.lienzo>blockquote>p,.web-publica main.lienzo>.banda>blockquote>p{
  font:400 clamp(1.3rem,2.3vw,1.75rem)/1.35 var(--serif);letter-spacing:-.01em;
  color:var(--granate);text-wrap:balance}
.web-publica main.lienzo>.banda:not(.tono-clara)>blockquote>p{color:var(--tono-tinta)}
/* Un `texto` sin título es lo mismo: hoy son dos, y los dos una sola frase
   («Cada bloque trabaja…» en Executive, «No se falla…» en Sobre Alejandro). */
.web-publica section.texto:not(:has(>h2))>p:only-child{
  font:400 clamp(1.3rem,2.3vw,1.75rem)/1.35 var(--serif);letter-spacing:-.01em;
  color:var(--granate);text-wrap:balance;max-width:46rem}
.web-publica section.texto:not(:has(>h2))>p:only-child::before{content:"";display:block;
  width:2.5rem;height:2px;background:var(--oro);margin:0 0 1.2rem}
.web-publica .banda:not(.tono-clara) section.texto:not(:has(>h2))>p:only-child{color:var(--tono-tinta)}
.web-publica main.lienzo>blockquote>.pie,.web-publica main.lienzo>.banda>blockquote>.pie{
  font:400 .95rem/1.6 var(--sans);color:var(--suave)}

/* ── Las franjas verdes de portada, con el símbolo al fondo ─────────────────
   El mismo gesto que el pie: el símbolo de la marca en grande y casi
   transparente, por detrás de todo. La de Contacto, que es solo la palabra,
   dejaba de parecer una franja vacía. No se mueve y no tapa nada: va debajo
   del contenido (`z-index`) y no recibe el ratón. */
.web-publica main.lienzo>.portada{position:relative;overflow:hidden;isolation:isolate}
.web-publica main.lienzo>.portada::after{content:"";position:absolute;z-index:-1;
  right:-5rem;top:-7rem;width:34rem;height:33rem;opacity:.08;pointer-events:none;
  background:url('/estatico/marca/simbolo-tres-puntas.svg') center/contain no-repeat}
@media print{.web-publica main.lienzo>.portada::after{display:none}}

/* ── El pie ─────────────────────────────────────────────────────────────── */
.web-publica .pie-sitio{position:relative;overflow:hidden}
.web-publica .pie-sitio::after{content:"";position:absolute;right:-6rem;bottom:-7rem;
  width:26rem;height:25rem;opacity:.09;pointer-events:none;
  background:url('/estatico/marca/simbolo-tres-puntas.svg') center/contain no-repeat}
.web-publica .pie-interior{position:relative;z-index:1}
/* El dibujo del símbolo ocupa la mitad central de su lienzo (700×680): se pinta
   al doble y se recoge el margen, para que se vea del tamaño de una letra
   grande y alineado con «ARKETIP». */
.web-publica .pie-simbolo{display:block;width:5.5rem;height:auto;margin:-1.4rem 0 -.6rem -1.7rem}
.web-publica .pie-lema{margin:.35rem 0 1.25rem;font:500 .72rem/1.3 var(--micro);
  letter-spacing:.2em;text-transform:uppercase;color:#d4dad4}  /* 7,86:1 sobre el granate del pie */

/* En papel: ni sombras ni símbolo de fondo. */
@media print{
  .web-publica .pie-sitio::after{display:none}
  .web-publica main.lienzo *{box-shadow:none!important}
  .web-publica section.con-foto>.foto-bloque{position:static}
}


@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
  src:url(/estatico/fuentes/instrumentsans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
  src:url(/estatico/fuentes/instrumentsans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/estatico/fuentes/instrumentserif-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/estatico/fuentes/instrumentserif-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(/estatico/fuentes/instrumentserif-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(/estatico/fuentes/instrumentserif-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

@media screen{
/* ── Los tokens ─────────────────────────────────────────────────────────── */
html.web-publica{
  color-scheme:dark;background:#000;
  scrollbar-color:#3a3a3a #000;
  scroll-padding-top:7rem;
  --negro:#000;--noche:#0b0b0c;--tarjeta:#141414;
  --champan:#e8d3a6;--oro-marca:#b5a36a;
  --gutter:clamp(16px,4vw,56px);
  --caja:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --borde-control:#7d7d7d;           /* 5,12:1 sobre negro, 4,53:1 sobre tarjeta */
  --fondo:#000;--papel:#141414;--tinta:#fff;
  --suave:#c4c4c4;--tenue:#8a8a8a;
  --linea:rgb(255 255 255/.12);
  --suave-papel:#c4c4c4;--tenue-papel:#8a8a8a;--linea-papel:rgb(255 255 255/.12);
  --granate:#fff;
  --banda:#0b0b0c;--granate-banda:#0d0c09;--barra:#000;--pie:#000;
  --acento:#e8d3a6;--acento-oscuro:#fff;--acento-claro:#e8d3a6;--acento-papel:#e8d3a6;
  --oro:#e8d3a6;--oro-claro:#e8d3a6;
  --sombra:0 0 0 1px rgb(255 255 255/.04);
  --sombra-alta:0 30px 60px -30px rgb(0 0 0/.9),0 0 0 1px rgb(255 255 255/.1);
  --curva:cubic-bezier(.2,.7,.2,1);
  --radio:12px;
  --ancho:calc(var(--caja) - 2 * var(--gutter));
  --medida:42rem;
  --aire:clamp(2.75rem,6vw,5.5rem);
  --aire-banda:clamp(3.5rem,8vw,7rem);
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --micro:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cursiva:"Instrument Serif",Georgia,"Times New Roman",serif;
}
html.web-publica .banda,html.web-publica .portada{
  --tono-tinta:#fff;--tono-suave:#c4c4c4;--tono-tenue:#8a8a8a;
  --tono-enlace:#e8d3a6;--tono-linea:rgb(255 255 255/.18)}
/* Las cinco bandas: cinco negros. */
html.web-publica .tono-division,html.web-publica .tono-profunda{--tono:var(--banda)}
html.web-publica .tono-pizarra{--tono:#17181a}
html.web-publica .tono-acento{--tono:#1b160d}
html.web-publica .tono-clara{--tono:#121212}
html.web-publica main.lienzo>.portada{--tono:#000}
html.web-publica ::selection{background:var(--champan);color:#000}
html.web-publica body{background:#000;color:var(--tinta);font:400 17px/1.6 var(--sans);
  overflow-x:clip}
html.web-publica .grano{display:none}
html.web-publica img{max-width:100%}

/* ── Titulares ──────────────────────────────────────────────────────────── */
html.web-publica h1,html.web-publica h2,html.web-publica h3{font-family:var(--sans);font-weight:400}
html.web-publica h1{letter-spacing:-.055em;line-height:.98}
html.web-publica main.lienzo h2{font-size:clamp(2.1rem,4.4vw,4rem);line-height:1;
  letter-spacing:-.05em;text-wrap:balance}
html.web-publica h3{letter-spacing:-.025em}
html.web-publica :is(h1,h2,h3,.subtitulo,.entradilla) em{font-family:var(--cursiva);
  font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--champan)}
html.web-publica .subtitulo{font:400 clamp(1.15rem,1.8vw,1.5rem)/1.4 var(--sans);
  letter-spacing:-.01em;color:var(--suave);max-width:var(--medida)}
html.web-publica .portada .subtitulo,html.web-publica .banda .subtitulo{color:var(--tono-suave)}
html.web-publica .entradilla{font-weight:400;color:var(--suave)}
html.web-publica .portada .entradilla{color:var(--tono-suave)}
html.web-publica main.lienzo section.texto p{color:var(--suave)}
html.web-publica main.lienzo section.texto>.entradilla{color:var(--suave)}
html.web-publica main a{text-decoration-color:rgb(232 211 166/.5)}
html.web-publica main a:hover{text-decoration-color:var(--champan)}

/* ── El rótulo de sección: raya de champán y mayúsculas ─────────────────── */
html.web-publica .etiqueta{display:flex;align-items:center;gap:10px;
  font:500 .8125rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 1.4rem}
html.web-publica .etiqueta::before{content:"";flex:none;width:22px;height:1px;background:var(--champan)}
/* El `margin:0 0 1.4rem` de arriba pisaba el hueco de la etiqueta suelta de
   `bifurcacion` (hermana directa en `main.lienzo`): el «What · Qué» de la home
   salía pegado al filo de la banda de encima (16/10/2026, «está muy enganchado
   con el cambio de sección»). Le devuelve el mismo aire que una sección. */
html.web-publica main.lienzo>*+.etiqueta{margin-top:var(--aire)}
html.web-publica .portada .etiqueta,html.web-publica .banda .etiqueta{color:var(--tono-tenue)}
html.web-publica .progreso{color:var(--champan)}
html.web-publica .num{color:var(--champan)}

/* ── Barra de divisiones y cabecera (sticky, con cristal) ───────────────── */
html.web-publica .cabecera-fija{position:sticky;top:0;z-index:50;
  background:rgb(0 0 0/.72);-webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%)}
html.web-publica .barra-divisiones{background:transparent}
html.web-publica .barra-divisiones-interior{max-width:var(--caja);padding:10px var(--gutter) 0;
  justify-content:flex-end;gap:28px;box-sizing:border-box}
html.web-publica .barra-divisiones a{font:400 13px/1.4 var(--sans);letter-spacing:0;color:var(--tenue);
  transition:color .2s}
html.web-publica .barra-divisiones a:hover,html.web-publica .barra-divisiones a[aria-current]{color:#fff}
html.web-publica .barra-divisiones a[aria-current]{color:var(--champan)}
html.web-publica .cabecera{position:relative;background:transparent;
  border-bottom:1px solid var(--linea)}
html.web-publica .cabecera-interior{max-width:var(--caja);box-sizing:border-box;
  padding:.35rem var(--gutter) .5rem;gap:clamp(16px,2vw,32px);flex-wrap:nowrap;min-height:72px}
html.web-publica .marca{font:600 17px/1 var(--sans);letter-spacing:.28em;color:#fff}
html.web-publica .marca-lema{font:400 12px/1.1 var(--sans);letter-spacing:.02em;color:var(--suave)}
html.web-publica .marca-division,html.web-publica .marca-grupo .marca-division-pila{color:var(--champan)}
html.web-publica .marca-grupo .marca-volver{color:var(--suave)}
html.web-publica .marca-grupo .marca-volver:hover{color:#fff}
html.web-publica .cabecera nav{gap:clamp(14px,1.5vw,22px);flex-wrap:nowrap;justify-content:flex-end;min-width:0}
html.web-publica .cabecera nav a{position:relative;font:400 14px/1.2 var(--sans);color:#d6d6d6;
  padding:6px 0;white-space:nowrap;transition:color .2s}
html.web-publica .cabecera nav a:hover,html.web-publica .cabecera nav a[aria-current="page"]{
  color:#fff;text-decoration:none}
html.web-publica .cabecera nav a:not(.nav-contacto)::after{content:"";position:absolute;left:0;right:0;
  bottom:0;height:1px;background:var(--champan);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
html.web-publica .cabecera nav a:not(.nav-contacto):hover::after,
html.web-publica .cabecera nav a[aria-current="page"]:not(.nav-contacto)::after{transform:scaleX(1)}
html.web-publica .cabecera nav a.nav-aparte{padding-left:clamp(14px,1.5vw,22px);border-left:1px solid var(--linea)}
html.web-publica body .cabecera nav a.nav-contacto,
html.web-publica body .cabecera nav a.nav-contacto[aria-current="page"]{
  display:inline-flex;align-items:center;min-height:46px;padding:0 24px;border-radius:999px;
  background:#fff;color:#000;border:0;font:600 15px/1 var(--sans);text-decoration:none;
  margin-left:12px;transition:transform .25s var(--ease),background .25s}
html.web-publica body .cabecera nav a.nav-contacto:hover{background:var(--champan);color:#000;
  transform:translateY(-2px)}
html.web-publica .abrir-menu{display:none;margin-left:auto;background:none;border:1px solid var(--borde-control);
  color:#fff;border-radius:999px;height:42px;padding:0 16px;font:500 14px var(--sans);cursor:pointer}
html.web-publica a:focus-visible,html.web-publica button:focus-visible,
html.web-publica summary:focus-visible,html.web-publica input:focus-visible,
html.web-publica select:focus-visible,html.web-publica textarea:focus-visible{
  outline:2px solid var(--champan);outline-offset:3px;border-radius:4px}
html.web-publica .saltar-contenido{background:#fff;color:#000}

@media(max-width:76em){
  html.web-publica .cabecera-fija{top:-34px;background:rgb(0 0 0/.92)}
  html.web-publica .barra-divisiones-interior{height:34px;padding-top:0;align-items:center;gap:20px}
  html.web-publica .cabecera-interior{flex-wrap:wrap}
  html.web-publica.js .abrir-menu{display:inline-flex;align-items:center}
  html.web-publica.js .cabecera nav[aria-label="Principal"]{display:none}
  html.web-publica.js .cabecera nav[aria-label="Principal"].abierto{display:flex;flex-direction:column;
    align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;
    background:rgb(0 0 0/.97);border-bottom:1px solid var(--linea);
    padding:8px var(--gutter) 22px}
  html.web-publica.js .cabecera nav[aria-label="Principal"].abierto a{padding:14px 0;
    border-bottom:1px solid var(--linea);font-size:17px;white-space:normal}
  html.web-publica.js .cabecera nav[aria-label="Principal"].abierto a.nav-aparte{padding-left:0;border-left:0}
  html.web-publica.js .cabecera nav[aria-label="Principal"].abierto a::after{display:none}
  html.web-publica body .cabecera nav[aria-label="Principal"].abierto a.nav-contacto{justify-content:center;
    margin:18px 0 0;border-bottom:0}
  /* Sin JavaScript no hay botón que despliegue nada: el menú se ve entero y
     baja a su propia fila, como antes de la piel. */
  html.web-publica:not(.js) .cabecera nav{flex-basis:100%;flex-wrap:wrap;order:3;gap:.4rem 1.2rem;
    justify-content:flex-start}
  html.web-publica:not(.js) .cabecera nav a.nav-contacto{margin-left:0}
}

/* ── La caja: 1240 px y el margen de la maqueta ─────────────────────────── */
html.web-publica main.lienzo{grid-template-columns:1fr min(var(--ancho),100% - 2 * var(--gutter)) 1fr}
html.web-publica .portada,html.web-publica .banda{
  grid-template-columns:1fr min(var(--ancho),100% - 2 * var(--gutter)) 1fr}
html.web-publica main.lienzo>.franja-foto{
  grid-template-columns:1fr min(var(--ancho),100% - 2 * var(--gutter)) 1fr}
html.web-publica main.lienzo>section:not(.portada):not(.bifurcacion){padding:var(--aire) 0}
html.web-publica main.lienzo>section.apartado:not(.portada):not(.bifurcacion){padding:var(--aire) 0 0}
html.web-publica .banda{padding:var(--aire-banda) 0;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
html.web-publica .banda+.banda{border-top:0}
html.web-publica .banda:has(+.banda){border-bottom:0}
html.web-publica main.lienzo>.banda:last-child{margin-bottom:0}
html.web-publica main.lienzo>.banda>section{padding:0}

/* ── Portadas ───────────────────────────────────────────────────────────── */
html.web-publica main.lienzo>.portada{background:#000;
  padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(2.5rem,5vw,4.5rem)}
html.web-publica main.lienzo>.portada::after{content:none}
html.web-publica main.lienzo .portada h1{font-size:clamp(2.6rem,6.1vw,5.5rem);line-height:.98;
  letter-spacing:-.06em;max-width:18ch;text-wrap:balance}
html.web-publica main.lienzo .portada.compacta h1{font-size:clamp(2.2rem,4.8vw,4rem);max-width:20ch}
html.web-publica main.lienzo .portada .entradilla{font-size:clamp(1.12rem,1.6vw,1.3rem);
  line-height:1.5;color:var(--tono-suave);max-width:38rem}
html.web-publica main.lienzo .portada.compacta{padding:clamp(3.5rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem)}
html.web-publica .portada .portada-acciones{margin-top:1.75rem}

/* La home y «Sobre Alejandro»: titular centrado y la foto debajo, como en la
   maqueta. */
html.web-publica body.div-global main.lienzo>.portada.a-sangre{
  padding:clamp(3rem,5vw,4.5rem) 0 clamp(2.5rem,5vw,4rem);min-height:0;overflow:hidden;
  background:#000}
html.web-publica body.div-global main.lienzo>.portada.a-sangre::before{content:"";position:absolute;
  inset:auto 0 0 0;height:70%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 72%,rgb(232 211 166/.14),rgb(232 211 166/0) 70%)}
html.web-publica body.div-global main.lienzo .portada.a-sangre .portada-cuerpo{
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;
  gap:clamp(2.5rem,5vw,4.5rem)}
html.web-publica body.div-global main.lienzo .portada.a-sangre .portada-texto{
  display:flex;flex-direction:column;align-items:center;max-width:none}
html.web-publica body.div-global main.lienzo .portada.a-sangre h1{
  font-size:clamp(2.6rem,6.1vw,5.5rem);max-width:1180px;margin:0 auto}
html.web-publica body.div-global main.lienzo .portada.a-sangre .entradilla{margin:1.5rem auto 0}
html.web-publica body.div-global main.lienzo .portada.a-sangre .portada-acciones{justify-content:center}
html.web-publica body.div-global main.lienzo .portada.a-sangre .etiqueta{justify-content:center}

/* Las portadas de cada sistema: texto a la izquierda y la foto a la derecha,
   que es la estructura que ya tenían. */
html.web-publica body:not(.div-global) main.lienzo .portada.a-sangre h1{
  font-size:clamp(2.4rem,4.7vw,4.4rem);max-width:15ch}
html.web-publica body:not(.div-global) main.lienzo>.portada.a-sangre{
  padding:clamp(3.5rem,6vw,6rem) 0 clamp(3rem,5vw,5rem)}

/* La foto: sin televisor. Redondeada, con anillo, a su proporción real y sin
   recortar (la foto es del coach). */
html.web-publica main.lienzo .portada.a-sangre .portada-foto-caja{
  position:relative;inset:auto;width:100%;max-width:720px;margin:0;padding:0;
  border-radius:22px;overflow:hidden;background:#111;transform:none;
  box-shadow:0 40px 90px -30px rgb(0 0 0/.95),0 0 0 1px rgb(255 255 255/.08)}
html.web-publica main.lienzo .portada.a-sangre .portada-foto-caja::before,
html.web-publica main.lienzo .portada.a-sangre .portada-foto-caja::after{content:none;display:none}
html.web-publica main.lienzo .portada.a-sangre .portada-foto{display:block;position:static;
  width:100%;height:auto;max-width:none;border-radius:0;object-fit:contain;filter:none}
/* El marco estrecho va con la foto de perfil (640×641, casi cuadrada), no con
   una página: antes colgaba de `body.div-executive`, y el 19/10/2026 esa foto
   pasó a Personal y la del plató (665×385) a Executive. Con la regla por
   página, el plató salía a 430 px con bandas negras arriba y abajo. */
html.web-publica main.lienzo .portada.a-sangre .portada-foto-caja:has(img[src*="perfil-retrato"]){max-width:430px}
/* Y la proporción la pone la foto (su `width`/`height` en `pagina.html`). Las
   reglas de la piel anterior fijaban un `aspect-ratio` por página (665/385 en
   Personal, 640/641 en Executive, 584/338 en Sucesión) pensando en la foto que
   llevaba cada una entonces; con `object-fit:contain`, al cambiar la foto la
   caja conservaba la forma vieja y la foto nueva salía con bandas negras. La
   home no entra: su foto lleva su propio encuadre y su movimiento al bajar. */
html.web-publica body:not(.div-global) main.lienzo .portada.a-sangre .portada-foto{aspect-ratio:auto}
html.web-publica body.div-sucesion main.lienzo .portada.a-sangre .portada-foto-caja{
  max-width:640px}
html.web-publica body:not(.div-global) main.lienzo .portada.a-sangre .portada-foto-caja{justify-self:end}
html.web-publica .portada-dibujo{color:var(--oro-marca)}

/* ── Botones: la píldora blanca de la maqueta ───────────────────────────── */
html.web-publica body main.lienzo :is(.cta:not(.secundario) a,.boton-solido,.contacto button,
  .aplicar button:not(.atras),.suscripcion-campo button,.reserva-cancelar button,.reserva-enviar,
  .reserva-tipos .boton){
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:46px;padding:0 24px;border-radius:999px;
  background:#fff;color:#000;border:1px solid #fff;
  font:600 15px/1 var(--sans);letter-spacing:0;text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s}
html.web-publica body main.lienzo :is(.cta:not(.secundario) a,.boton-solido,.contacto button,
  .aplicar button:not(.atras),.suscripcion-campo button,.reserva-cancelar button,.reserva-enviar,
  .reserva-tipos .boton):hover{background:var(--champan);border-color:var(--champan);color:#000;
  transform:translateY(-2px)}
html.web-publica body main.lienzo .cta.grande a,
html.web-publica body main.lienzo .cta.grande a:is([href*="/agenda"],[href*="/aplicar"],[href^="/contacto"]){
  min-height:60px;padding:0 34px;font-size:18px}
html.web-publica body main.lienzo .reserva-enviar{width:100%;justify-content:space-between;
  min-height:56px;font-size:16px}
html.web-publica body main.lienzo .reserva-tipos .boton{justify-content:space-between;
  min-height:60px;font-size:18px}
html.web-publica body main.lienzo :is(.boton-contorno,.aplicar button.atras){
  display:inline-flex;align-items:center;min-height:46px;padding:0 24px;border-radius:999px;
  background:transparent;color:#fff;border:1px solid var(--borde-control);
  font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;
  transition:border-color .25s,color .25s,background .25s}
html.web-publica body main.lienzo :is(.boton-contorno,.aplicar button.atras):hover{
  background:transparent;border-color:var(--champan);color:var(--champan)}
html.web-publica body main.lienzo .cta.secundario a{background:none;border:0;min-height:0;
  padding:0;color:var(--champan);font-weight:500;transform:none}
html.web-publica body main.lienzo .cta.secundario a:hover{background:none;color:#fff;transform:none}
html.web-publica body main.lienzo .contacto button[disabled],
html.web-publica body main.lienzo .aplicar button[disabled]{opacity:.5}
html.web-publica .cta .boton{border-radius:999px}

/* ── Campos de formulario ───────────────────────────────────────────────── */
html.web-publica main.lienzo :is(.contacto,.aplicar) input:not([type=radio]):not([type=checkbox]),
html.web-publica main.lienzo :is(.contacto,.aplicar) select,
html.web-publica main.lienzo :is(.contacto,.aplicar) textarea,
html.web-publica main.lienzo .suscripcion-campo input,
html.web-publica main.lienzo .reserva-datos input{
  background:#000;color:#fff;border:1px solid var(--borde-control);border-radius:14px;
  padding:.85rem 1.1rem;font:400 16px/1.4 var(--sans);transition:border-color .2s}
html.web-publica main.lienzo .suscripcion-campo input{border-radius:999px;padding:.85rem 1.3rem}
html.web-publica main.lienzo .reserva-datos input{min-height:48px}
html.web-publica main.lienzo :is(.contacto,.aplicar) input::placeholder,
html.web-publica main.lienzo .suscripcion-campo input::placeholder,
html.web-publica main.lienzo textarea::placeholder{color:var(--tenue);opacity:1}
html.web-publica main.lienzo :is(.contacto,.aplicar) input:not([type=radio]):not([type=checkbox]):focus,
html.web-publica main.lienzo :is(.contacto,.aplicar) select:focus,
html.web-publica main.lienzo :is(.contacto,.aplicar) textarea:focus,
html.web-publica main.lienzo .suscripcion-campo input:focus,
html.web-publica main.lienzo .reserva-datos input:focus{border-color:var(--acento)}
html.web-publica input:-webkit-autofill,html.web-publica textarea:-webkit-autofill,
html.web-publica select:-webkit-autofill{-webkit-text-fill-color:#fff;
  box-shadow:0 0 0 100px #141414 inset;caret-color:#fff}
/* Casillas y radios hechos a mano: las nativas, sobre negro, salen como un
   cuadro gris sin contorno (3:1 que se pide a un control). Contorno #7d7d7d
   (4,53:1 sobre tarjeta); marcada, champán con el visto en negro (14,3:1). */
html.web-publica input[type=radio],html.web-publica input[type=checkbox]{
  -webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;
  display:inline-grid;place-content:center;background:#000;cursor:pointer;
  border:1.5px solid var(--borde-control);transition:background .2s,border-color .2s}
html.web-publica input[type=checkbox]{border-radius:6px}
html.web-publica input[type=radio]{border-radius:50%}
html.web-publica input[type=checkbox]:checked{background:var(--champan);border-color:var(--champan)}
html.web-publica input[type=checkbox]:checked::after{content:"";width:10px;height:5px;
  border-left:2px solid #000;border-bottom:2px solid #000;transform:translateY(-1px) rotate(-45deg)}
html.web-publica input[type=radio]:checked{border-color:var(--champan);
  background:radial-gradient(circle,var(--champan) 0 42%,#000 47%)}
html.web-publica .consentimiento input{margin-top:.2rem}
html.web-publica .consentimiento,html.web-publica .contacto label.consentimiento{color:var(--suave);
  font-size:.875rem}
html.web-publica .contacto label,html.web-publica .aplicar .campo>label,html.web-publica .aplicar fieldset label{
  color:#fff;font-weight:500}
html.web-publica .contacto label.consentimiento,html.web-publica .aplicar label.consentimiento{
  color:var(--suave);font-weight:400}
html.web-publica .aplicar legend,html.web-publica .aplicar fieldset.campo-opciones legend{color:#fff}
html.web-publica .aplicar .ayuda,html.web-publica .reserva-paso,html.web-publica .pie-legal-captura,
html.web-publica .nota-cta{color:var(--tenue)}
html.web-publica .aplicar fieldset.grupo{background:var(--papel);border-color:rgb(255 255 255/.1);
  border-radius:20px}
html.web-publica .opcion{align-items:center;background:#000;border:1px solid var(--borde-control);border-radius:14px;color:#fff}
html.web-publica .opcion:hover{border-color:var(--champan)}
html.web-publica .opcion:has(input:checked){border-color:var(--champan);
  box-shadow:inset 0 0 0 1px var(--champan)}
html.web-publica .opcion:focus-within{outline:2px solid var(--champan);outline-offset:2px}
html.web-publica .seccion-contacto form.contacto{background:var(--papel);border-radius:24px;
  border:1px solid rgb(255 255 255/.08);box-shadow:none}
html.web-publica .error,html.web-publica .error-form{color:#ff9b8f}
html.web-publica .error-form{border-left-color:#ff9b8f;background:var(--papel);border-radius:0 12px 12px 0}
html.web-publica .aviso-form{background:var(--papel);border-radius:0 12px 12px 0;color:var(--suave)}
html.web-publica .aviso-borrador{background:#2a1f0a;border-left-color:#e0a63a;color:#f3d79a}

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
html.web-publica main.lienzo .rejilla .celda,
html.web-publica main.lienzo .numerada.tarjetas li,
html.web-publica .filtro .si,html.web-publica .filtro .no,
html.web-publica .testimonio,html.web-publica .entrada{
  background:var(--papel);border:1px solid rgb(255 255 255/.08);border-top:1px solid rgb(255 255 255/.08);
  border-radius:20px;box-shadow:none;color:var(--tinta)}
html.web-publica main.lienzo .rejilla .celda::before{background:var(--champan);left:1.75rem;top:-1px;
  width:2.25rem;height:2px}
html.web-publica .celda p,html.web-publica .celda .puntos,html.web-publica .numerada p{color:var(--suave)}
html.web-publica main.lienzo .rejilla .celda h3{font-size:1.375rem;font-weight:500;
  letter-spacing:-.03em;line-height:1.15}
html.web-publica .celda>.icono{color:var(--champan)}
html.web-publica .icono .tono{fill:var(--champan);opacity:.3}
html.web-publica .celda .puntos li::before{background:var(--champan)}
/* Las tarjetas de contenido no reaccionan al ratón (#147: una tarjeta que se
   mueve o se ilumina parece un enlace y no lo es). Solo las de «Tres sistemas»,
   que sí son enlaces, suben como en la maqueta. */
/* Dentro de una banda las tarjetas suben un punto para separarse del fondo. */
html.web-publica .banda :is(.celda,.numerada.tarjetas li,.filtro .si,.filtro .no,.testimonio){
  background:#1b1b1b}
html.web-publica .numerada:not(.tarjetas),html.web-publica .fases{margin-top:3.5rem}
html.web-publica .numerada.tarjetas,html.web-publica .rejilla,html.web-publica .rejilla-testimonios,
html.web-publica .rejilla-cifras,html.web-publica .rejilla-principios,html.web-publica .filtro{
  margin-top:clamp(1.75rem,3vw,2.75rem)}
/* Lista numerada en tarjetas: la cifra en Instrument Serif cursiva y champán. */
html.web-publica main.lienzo .numerada.tarjetas li>.num{
  font:400 clamp(2.6rem,3.6vw,3.4rem)/.9 var(--cursiva);font-style:italic;
  color:var(--champan);border-bottom-color:rgb(255 255 255/.12);letter-spacing:-.02em;width:3.4rem}
html.web-publica main.lienzo .numerada.tarjetas li>strong{font-weight:500;font-size:1.375rem;
  letter-spacing:-.03em;color:#fff}
/* Los pasos y las fases: el número en un círculo de champán sentado en el filete. */
html.web-publica .numerada li,html.web-publica .fases li{border-top:1px solid var(--linea)}
html.web-publica main.lienzo .numerada:not(.tarjetas)>li>.num,
html.web-publica main.lienzo .fases>li>.num{border-color:var(--champan);color:var(--champan);
  background:var(--tono,#000);font:400 1.5rem/1 var(--cursiva);font-style:italic;letter-spacing:0;
  width:3rem;height:3rem;margin-top:-1.5rem}
html.web-publica main.lienzo .numerada:not(.tarjetas)>li>strong,
html.web-publica main.lienzo .fases>li>strong{font:500 clamp(1.25rem,1.8vw,1.5rem)/1.25 var(--sans);
  letter-spacing:-.03em;color:#fff}
html.web-publica main.lienzo .numerada:not(.tarjetas)>li>.paso-foto+.num{background:var(--papel);
  color:var(--champan);border-color:var(--champan)}
html.web-publica .paso-foto,html.web-publica .foto-bloque img,html.web-publica .apartado-foto img,
html.web-publica .rama-foto img{filter:none;box-shadow:none;background:#111}
html.web-publica .foto-bloque img,html.web-publica .apartado-foto img{border-radius:24px}
html.web-publica .paso-foto{border-radius:14px}
html.web-publica .foto-bloque,html.web-publica .apartado-foto{margin:0}

/* ── Tres sistemas ──────────────────────────────────────────────────────── */
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama{background:var(--papel);border-radius:24px;
  overflow:hidden;border:1px solid rgb(255 255 255/.07);box-shadow:none;color:var(--tinta);
  transition:transform .45s var(--ease),border-color .45s}
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama:hover,
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama:has(:focus-visible){
  border-color:rgb(232 211 166/.35);box-shadow:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama:hover{transform:translateY(-6px)}
}
html.web-publica main.lienzo .bifurcacion:has(>.rama>.rama-foto) .rama h2,
html.web-publica main.lienzo .bifurcacion:has(>.rama>.rama-foto) .rama:hover h2,
html.web-publica main.lienzo .bifurcacion:has(>.rama>.rama-foto) .rama:has(:focus-visible) h2{
  color:#fff;font-size:clamp(1.6rem,2.3vw,2.1rem);letter-spacing:-.04em;line-height:1.05;
  padding:1.75rem 1.75rem 0}
html.web-publica .rama .parte{border-left-color:rgb(255 255 255/.2)}
html.web-publica .rama .solucion{border-left-color:var(--champan)}
html.web-publica .rama .rotulo{font:500 .6875rem/1 var(--sans);letter-spacing:.18em;color:var(--tenue)}
html.web-publica .rama .solucion .rotulo{color:var(--champan)}
html.web-publica .rama p{color:#cfcfcf}
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama .enlace{color:#fff;font-weight:500;
  font-size:.9375rem;background:linear-gradient(var(--champan),var(--champan)) 0 100%/100% 1px no-repeat}
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama .enlace:hover{background-size:40% 1px}

/* ── Filtro «¿Es para ti?» ──────────────────────────────────────────────── */
html.web-publica .filtro .si{border-top:2px solid var(--champan)}
html.web-publica .filtro .no{border-top:1px solid rgb(255 255 255/.08);background:transparent;
  border-color:rgb(255 255 255/.16)}
html.web-publica .banda .filtro .no{background:var(--papel)}
html.web-publica main.lienzo .filtro .si h3,html.web-publica main.lienzo .filtro .no h3{
  color:#fff;font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.035em}
html.web-publica .filtro .si li::before{background:var(--champan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
html.web-publica .filtro .no li::before{border:1px solid var(--tenue);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='%23a3a3a3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat}
html.web-publica .filtro .si li::marker,html.web-publica .filtro .no li::marker{color:var(--champan)}
html.web-publica .descarte{border-left-color:rgb(255 255 255/.2);color:var(--tenue)}

/* ── Golden circle: los tres anillos, en champán y gris ─────────────────── */
html.web-publica .golden-circle dt{color:var(--champan)}
html.web-publica body.div-global .golden-circle dt,
html.web-publica body.div-global .golden-circle .nivel:first-child dt{color:#fff}
html.web-publica .div-global .golden-circle .nivel,
html.web-publica .div-global .golden-circle .nivel:first-child{border-radius:20px;
  border-color:rgb(255 255 255/.08)}
html.web-publica .golden-circle .nivel:nth-child(1) dt::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='7' fill='%23e8d3a6'/%3E%3Ccircle cx='24' cy='24' r='15' fill='none' stroke='%23707070' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='22' fill='none' stroke='%23707070' stroke-width='1'/%3E%3C/svg%3E")}
html.web-publica .golden-circle .nivel:nth-child(2) dt::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='7' fill='none' stroke='%23707070' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='15' fill='none' stroke='%23e8d3a6' stroke-width='2'/%3E%3Ccircle cx='24' cy='24' r='22' fill='none' stroke='%23707070' stroke-width='1'/%3E%3C/svg%3E")}
html.web-publica .golden-circle .nivel:nth-child(3) dt::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='7' fill='none' stroke='%23707070' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='15' fill='none' stroke='%23707070' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='22' fill='none' stroke='%23e8d3a6' stroke-width='2'/%3E%3C/svg%3E")}

/* ── Manifiesto («Por qué») ─────────────────────────────────────────────── */
html.web-publica .div-global .manifiesto::after{content:none;display:none}
html.web-publica .div-global main.lienzo>.manifiesto:not(.con-foto),
html.web-publica .div-global main.lienzo>.banda>.manifiesto:not(.con-foto){display:block;padding:0}
html.web-publica main.lienzo .manifiesto h2{font-size:clamp(2.4rem,5.4vw,4.9rem);line-height:1.02;
  letter-spacing:-.055em;max-width:17ch}
html.web-publica .manifiesto h2 .antetitulo{color:#fff;font-weight:400;margin-bottom:.35em}
html.web-publica .manifiesto .subtitulo{max-width:none;font-size:clamp(1.4rem,2.6vw,2.2rem);color:#fff;
  letter-spacing:-.03em;margin-top:.6rem}
html.web-publica .manifiesto .palabras-manifiesto,
html.web-publica .banda:not(.tono-clara) .manifiesto .palabras-manifiesto,
html.web-publica .div-global .palabras-manifiesto{
  font:400 clamp(2.2rem,5vw,4.4rem)/1 var(--sans);letter-spacing:-.055em;text-transform:none;
  color:#fff;border-top:1px solid var(--linea);padding-top:1.6rem;margin:2rem 0}
html.web-publica .palabras-manifiesto li{border-left-color:var(--linea);padding:0 clamp(1rem,3vw,2.6rem)}
html.web-publica .palabras-manifiesto li:nth-child(2){font-family:var(--cursiva);font-style:italic;
  color:var(--champan);letter-spacing:-.03em}
html.web-publica .manifiesto .linea-manifiesto,
html.web-publica .banda:not(.tono-clara) .manifiesto .linea-manifiesto,
html.web-publica .div-global .manifiesto .linea-manifiesto{
  font:italic 400 clamp(1.7rem,3.2vw,2.8rem)/1.15 var(--cursiva);letter-spacing:-.02em;
  color:#fff;max-width:40ch}
html.web-publica .div-global .manifiesto .linea-manifiesto::before{background:var(--champan)}

/* ── Principios, cifras, dato ───────────────────────────────────────────── */
html.web-publica .principio-palabra{font-weight:400;letter-spacing:-.05em}
html.web-publica .rejilla-cifras dt,html.web-publica .par-dato dt{font-family:var(--cursiva);
  font-style:italic;font-weight:400;color:var(--champan);letter-spacing:-.02em}

/* Las tarjetas bajo las cuatro fases de Sucesión siguen pegadas a ellas. */
html.web-publica main.lienzo>section:has(>.fases):has(+section>.rejilla){padding-bottom:0}
html.web-publica main.lienzo>section:has(>.fases)+section:has(>.rejilla){padding-top:1.75rem}
html.web-publica main.lienzo>section:has(>.fases)+section>.rejilla{margin-top:0}
html.web-publica .golden-circle .circulo{margin-top:clamp(1.75rem,3vw,2.75rem)}

/* ── Citas, frases sueltas y la franja con foto ─────────────────────────── */
html.web-publica main.lienzo>blockquote>p,html.web-publica main.lienzo>.banda>blockquote>p,
html.web-publica section.texto:not(:has(>h2))>p:only-child,
html.web-publica main.lienzo>.banda:not(.tono-clara)>blockquote>p,
html.web-publica .banda:not(.tono-clara) section.texto:not(:has(>h2))>p:only-child{
  font:italic 400 clamp(1.7rem,3.2vw,2.8rem)/1.15 var(--cursiva);letter-spacing:-.02em;
  color:#fff;max-width:30ch}
html.web-publica main.lienzo>blockquote::before,html.web-publica main.lienzo>.banda>blockquote::before,
html.web-publica section.texto:not(:has(>h2))>p:only-child::before{background:var(--champan)}
html.web-publica blockquote{border-left-color:var(--champan)}
html.web-publica .testimonio blockquote p{color:#fff}
html.web-publica main.lienzo>.franja-foto{background:#000}
html.web-publica .franja-foto::after{
  background:linear-gradient(90deg,rgb(0 0 0/.9) 0%,rgb(0 0 0/.72) 70%,rgb(0 0 0/.4) 100%)}
html.web-publica .franja-foto>img{filter:saturate(.75)}
html.web-publica .franja-foto>blockquote::before{background:var(--champan)}
html.web-publica .franja-foto blockquote p{font:italic 400 clamp(1.6rem,3vw,2.6rem)/1.15 var(--cursiva);
  letter-spacing:-.02em}
@media(max-width:64em){
  html.web-publica .franja-foto::after{background:rgb(0 0 0/.8)}
}

/* ── Preguntas frecuentes ───────────────────────────────────────────────── */
html.web-publica .faq .pregunta{border-bottom-color:var(--linea)}
html.web-publica .faq .pregunta:first-of-type{border-top-color:var(--linea)}
html.web-publica .faq summary{
  font:400 clamp(1.15rem,1.6vw,1.4rem)/1.3 var(--sans);letter-spacing:-.02em;color:#fff;
  padding-top:1.5rem;padding-bottom:1.5rem}
html.web-publica .faq summary:hover{color:var(--champan)}
html.web-publica .faq summary::after{border-color:var(--champan)}
html.web-publica .faq .respuesta{color:var(--suave)}
html.web-publica .faq .respuesta p{max-width:var(--medida)}

/* ── «Sigue el hilo»: tarjeta con la foto pegada al borde ───────────────── */
@media(min-width:56.001em){
  html.web-publica main.lienzo .captura-email.con-foto{column-gap:0;padding:0;
    background:var(--papel);border:1px solid rgb(255 255 255/.07);border-radius:32px;
    overflow:hidden;align-items:stretch}
  html.web-publica .captura-email.con-foto>.captura-email-form{padding:clamp(2.25rem,5vw,4.5rem)}
  html.web-publica .captura-email.con-foto>.foto-bloque{aspect-ratio:auto;min-height:340px;
    align-self:stretch;position:relative;margin:0;top:auto}
  html.web-publica .captura-email.con-foto>.foto-bloque img{position:absolute;inset:0;border-radius:0;
    height:100%}
}
@media(max-width:56em){
  html.web-publica .captura-email.con-foto{background:var(--papel);border-radius:28px;overflow:hidden;
    border:1px solid rgb(255 255 255/.07)}
  html.web-publica .captura-email.con-foto>.captura-email-form{padding:1.75rem}
  html.web-publica .captura-email.con-foto>.foto-bloque{margin:0;aspect-ratio:16/9}
  html.web-publica .captura-email.con-foto>.foto-bloque img{border-radius:0}
}
html.web-publica .banda>section.captura-email{padding:0}

/* ── Trayectoria, listas sueltas, tablas ────────────────────────────────── */
html.web-publica .trayectoria dt{color:var(--champan)}
html.web-publica .trayectoria dd::before{background:var(--linea)}
html.web-publica .trayectoria dd::after{background:var(--champan);box-shadow:0 0 0 4px var(--tono,#000)}
html.web-publica .trayectoria dd>strong{font:500 1.3rem/1.25 var(--sans);letter-spacing:-.02em;color:#fff}
html.web-publica ul.simple{border-top-color:var(--linea)}
html.web-publica ul.simple li{border-bottom-color:var(--linea);font:400 1.1rem/1.5 var(--sans);color:#fff}
html.web-publica ul.simple li::before{background:var(--champan)}
html.web-publica table{background:var(--papel)}
html.web-publica th,html.web-publica td{border-bottom-color:var(--linea)}
html.web-publica th{color:var(--tenue)}
html.web-publica th[scope=row]{color:#fff}
html.web-publica .scroll-x{border-radius:16px}

/* ── Vídeo ──────────────────────────────────────────────────────────────── */
html.web-publica .marco-video{border-radius:20px;background:#0b0b0c;
  box-shadow:0 0 0 1px rgb(255 255 255/.1),0 30px 70px -30px #000}
html.web-publica .video-pendiente p{color:var(--suave)}

/* ── El Método (diagrama radial) ────────────────────────────────────────── */
html.web-publica .diagrama-metodo h2{color:#fff;font-size:clamp(2.6rem,6vw,5.2rem);letter-spacing:-.055em;max-width:none}
html.web-publica .dibujo-metodo line{stroke:var(--champan)}
html.web-publica .dibujo-metodo .centro{fill:var(--champan)}
html.web-publica .dibujo-metodo text{fill:#fff}
html.web-publica .dibujo-metodo .etapa-num{fill:var(--champan)}
html.web-publica .dibujo-metodo .etapa-nombre{font:400 18px var(--sans);letter-spacing:-.01em}
html.web-publica .dibujo-metodo .puntas circle{fill:var(--champan)}
html.web-publica .dibujo-metodo .anillos circle{stroke:rgb(255 255 255/.16)}
html.web-publica .banda:not(.tono-clara) .dibujo-metodo line{stroke:var(--champan)}
html.web-publica .banda:not(.tono-clara) .dibujo-metodo .centro{fill:var(--champan)}
html.web-publica .banda:not(.tono-clara) .dibujo-metodo .etapa-nombre{fill:#fff}
html.web-publica .etapas-metodo li{border-top-color:rgb(255 255 255/.18)!important;color:#fff!important}
html.web-publica .etapas-metodo .num{color:var(--champan)!important;font-family:var(--cursiva);font-style:italic}

/* ── Cabecera de apartado ───────────────────────────────────────────────── */
html.web-publica .apartado-texto h2{font-size:clamp(2.2rem,5vw,4.4rem);letter-spacing:-.055em;max-width:16ch}
html.web-publica .apartado .portada-dibujo{color:var(--oro-marca)}

/* ── Agenda, confirmación y páginas del embudo ──────────────────────────── */
html.web-publica .reserva h1,html.web-publica .reserva-resultado h1{letter-spacing:-.055em;line-height:1}
html.web-publica .reserva-panel{background:var(--papel);border-radius:28px;
  border:1px solid rgb(255 255 255/.08);box-shadow:none}
html.web-publica .reserva-panel h2{letter-spacing:-.045em}
html.web-publica .reserva-ayuda,html.web-publica .reserva-nota{color:var(--suave)}
html.web-publica .reserva-ayuda a,html.web-publica .reserva-nota a{color:var(--champan)}
html.web-publica .reserva-horas .opcion{background:#000;border:1px solid var(--borde-control);
  border-radius:12px;color:#fff}
html.web-publica .reserva-horas .opcion:hover{border-color:var(--champan)}
html.web-publica .reserva-horas .opcion:has(input:checked){background:var(--champan);color:#000;
  border-color:var(--champan);box-shadow:none}
html.web-publica .reserva-seleccion{background:#000;border-left-color:var(--champan);
  border-radius:0 12px 12px 0}
html.web-publica .reserva-persona img{border:1px solid rgb(255 255 255/.15)}
html.web-publica .reserva-detalles,html.web-publica .reserva-dia,html.web-publica .reserva-cancelar{
  border-color:var(--linea)}
html.web-publica .reserva-detalles>div{border-bottom-color:var(--linea)}
html.web-publica .reserva-resultado .reserva-detalles{background:var(--papel);border-radius:20px;
  border:1px solid rgb(255 255 255/.08)}
html.web-publica .siguiente-paso{border-top-color:var(--linea)}
html.web-publica .reserva-ir-horarios{color:var(--champan)}

/* ── Pie: la marca gigante y las columnas de la maqueta ─────────────────── */
html.web-publica .pie-sitio{background:#000;color:#cfcfcf;border-top:1px solid var(--linea);
  font:400 .9375rem/1.7 var(--sans)}
html.web-publica .pie-sitio::after{content:none;display:none}
html.web-publica .pie-interior{max-width:var(--caja);box-sizing:border-box;
  padding:clamp(4.5rem,8vw,7rem) var(--gutter) 0;grid-template-columns:minmax(0,1.4fr) auto auto;
  gap:2.5rem clamp(2.5rem,7vw,6rem);align-items:start}
html.web-publica .pie-sitio .marca{color:#fff}
html.web-publica .pie-sitio .marca-division{color:var(--champan)}
html.web-publica .pie-sitio a{color:#cfcfcf;transition:color .2s}
html.web-publica .pie-sitio a:hover{color:var(--champan)}
html.web-publica .pie-marca p{color:var(--suave);font-size:.9375rem}
html.web-publica .pie-lema{color:var(--suave)}
html.web-publica .pie-nav,html.web-publica .pie-legal{gap:.7rem}
html.web-publica .marca-gigante{margin:clamp(3.5rem,8vw,7rem) 0 0;padding:0 var(--gutter);
  font:400 clamp(70px,19.5vw,290px)/.8 var(--sans);letter-spacing:-.07em;text-align:center;
  background:linear-gradient(180deg,#2b2b2b 0%,#0b0b0b 92%);-webkit-background-clip:text;
  background-clip:text;color:transparent;user-select:none;overflow:hidden;
  max-width:var(--caja);margin-left:auto;margin-right:auto;box-sizing:border-box}
@media(max-width:44em){
  html.web-publica .pie-interior{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html.web-publica .pie-marca{grid-column:1/-1}
}

/* ── Sin movimiento si se ha pedido ─────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html.web-publica *,html.web-publica *::before,html.web-publica *::after{
    transition:none!important;animation:none!important;scroll-behavior:auto!important}
  html.web-publica body main.lienzo :is(.cta:not(.secundario) a,.boton-solido):hover,
  html.web-publica body .cabecera nav a.nav-contacto:hover{transform:none}
}

/* ══ Movimiento de «Noche» (issue #151, tanda 2) ═════════════════════════════
   La maqueta `a-noche.html` tiene movimiento y la piel de arriba no lo traía.
   Lo conduce `publico/templates/_movimiento.html` (un solo listener de scroll)
   y esta sección dice qué se ve en cada estado.

   REGLA DE ORO: el estado FINAL es el de la hoja sin más. Lo que parte apagado
   (palabras, etapas, línea, apariciones) se apaga solo bajo `html.js`, así que
   sin JavaScript no queda nada escondido; y bajo `prefers-reduced-motion` el
   script y la hoja lo dejan todo encendido y sin transiciones. `estadoFinal()`
   (en la consola) pone `html.final` y lo deja todo terminado, para capturas.

   Qué hay aquí, por orden: la foto de la portada que se endereza; la frase de
   «Por qué» que se enciende palabra a palabra; Miedo, Honor e Interés gigantes
   y la línea final; el Recorrido de El Método (sustituye al dibujo radial); la
   luz que sigue al ratón en «Tres sistemas»; la línea de «Cómo se empieza»; la
   foto de las preguntas en 4:3; y las apariciones al bajar (`.rev`). Todo
   cuelga de `html.web-publica`: el área de cliente no cambia. */

/* ── La foto de la portada de la home ──────────────────────────────────────
   `--p` (0 a 1) lo pone el script en la sección. Inclinada hacia atrás al
   principio (rotateX 22°, a un 90 %) y recta al bajar medio alto de pantalla.
   Nunca se recorta: la caja sigue siendo la de siempre, a su proporción. */
html.web-publica.js body.div-global main.lienzo .portada.a-sangre .portada-foto-caja{
  transform-origin:50% 100%;will-change:transform;
  transform:perspective(1400px) rotateX(calc((1 - var(--p,0)) * 22deg)) scale(calc(.9 + var(--p,0) * .1))}
html.web-publica.js body.div-global main.lienzo>.portada.a-sangre::before{
  opacity:calc(.35 + var(--p,0) * .65)}

/* ── «Por qué»: la frase protagonista ──────────────────────────────────────
   Antetítulo, título y subtítulo van del mismo tamaño y seguidos, como una sola
   frase (la maqueta: «hazlo igual de grande y engánchalo con lo de arriba»). */
html.web-publica .manifiesto .vida{min-height:78vh;display:flex;flex-direction:column;justify-content:center}
html.web-publica .manifiesto .frase-vida{font-size:clamp(2.5rem,6.2vw,5.75rem);line-height:1.02;
  letter-spacing:-.055em;max-width:17ch;margin-top:1.4rem}
html.web-publica main.lienzo .manifiesto .frase-vida>*{font:inherit;letter-spacing:inherit;margin:0;max-width:none;
  color:#fff;text-wrap:balance}
html.web-publica main.lienzo .manifiesto .frase-vida>*+*{margin-top:.45em}
html.web-publica .manifiesto .frase-vida .antetitulo,
html.web-publica .div-global .manifiesto .frase-vida .antetitulo{display:block;font:inherit;
  letter-spacing:inherit;text-transform:none;color:#fff;margin:0 0 .45em}
html.web-publica .manifiesto .frase-vida .antetitulo::before{content:none;display:none}
html.web-publica .manifiesto .frase-vida em{letter-spacing:-.025em}
html.web-publica.js .manifiesto .frase-vida .w{opacity:.18;transition:opacity .35s var(--ease)}
html.web-publica.js .manifiesto .frase-vida .w.on{opacity:1}
@media (max-width:760px){
  html.web-publica .manifiesto .vida{min-height:0}
}

/* ── Miedo · Honor · Interés ───────────────────────────────────────────────
   Gigantes, uno debajo de otro y con un punto champán entre cada par. Se
   encienden al pasar por el centro de la pantalla; Honor, en cursiva y champán. */
html.web-publica .manifiesto .palabras-manifiesto,
html.web-publica .banda:not(.tono-clara) .manifiesto .palabras-manifiesto,
html.web-publica .div-global .palabras-manifiesto{
  display:block;border:0;padding:0;text-align:center;list-style:none;
  margin:clamp(70px,10vw,140px) 0 clamp(50px,7vw,100px)}
html.web-publica .manifiesto .palabras-manifiesto li,
html.web-publica .div-global .palabras-manifiesto li,
html.web-publica .div-global .palabras-manifiesto li:first-child{
  display:block;border:0;padding:0;text-transform:none;
  font:400 clamp(72px,17vw,250px)/.92 var(--sans);letter-spacing:-.07em;color:#fff;
  transition:color .5s var(--ease),transform .6s var(--ease)}
html.web-publica .manifiesto .palabras-manifiesto li:nth-child(2){
  font-family:var(--cursiva);font-style:italic;letter-spacing:-.03em;color:var(--champan)}
html.web-publica .manifiesto .palabras-manifiesto li+li::before{content:"";display:block;
  width:6px;height:6px;border-radius:50%;background:var(--champan);margin:18px auto;opacity:.6}
html.web-publica.js .manifiesto .palabras-manifiesto li{color:rgb(255 255 255/.16);transform:scale(.97)}
html.web-publica.js .manifiesto .palabras-manifiesto li.encendida{color:#fff;transform:none}
html.web-publica.js .manifiesto .palabras-manifiesto li:nth-child(2).encendida{color:var(--champan)}

/* La línea final: cursiva blanca, centrada, sin la raya de antes. */
html.web-publica .manifiesto .linea-manifiesto,
html.web-publica .banda:not(.tono-clara) .manifiesto .linea-manifiesto,
html.web-publica .div-global .manifiesto .linea-manifiesto{
  font:italic 400 clamp(1.9rem,4vw,3.5rem)/1.08 var(--cursiva);letter-spacing:-.02em;
  text-align:center;max-width:900px;margin:0 auto;color:#fff}
html.web-publica .div-global .manifiesto .linea-manifiesto::before{content:none;display:none}

/* ── El Método: el Recorrido ───────────────────────────────────────────────
   Sustituye al diagrama radial. Una línea con un punto por etapa (`--n` las
   reparte, así que si el coach quita o añade una, se recoloca solo). Por
   defecto está TERMINADO: línea completa y etapas encendidas. Bajo `html.js` el
   script la dibuja con `--p` y va encendiendo cada etapa (`.on`). En el móvil,
   vertical. */
html.web-publica .diagrama-metodo{text-align:left}
html.web-publica .diagrama-metodo h2{max-width:none}
html.web-publica .recorrido{position:relative;margin:clamp(64px,8vw,110px) 0 0;padding:0;
  list-style:none;display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr))}
html.web-publica .recorrido::before,html.web-publica .recorrido::after{content:"";position:absolute;
  left:calc(50% / var(--n,8));right:calc(50% / var(--n,8));top:46px;height:1px;background:var(--linea)}
html.web-publica .recorrido::after{background:var(--champan);transform-origin:left;transform:scaleX(1)}
html.web-publica.js .recorrido::after{transform:scaleX(var(--p,0))}
html.web-publica .recorrido li{position:relative;text-align:center;padding:0 6px;margin:0;border:0}
html.web-publica .recorrido .n{display:block;font:italic 400 26px/1 var(--cursiva);
  color:var(--champan);margin:0 0 12px;transition:color .4s}
html.web-publica .recorrido .punto{display:block;width:13px;height:13px;margin:0 auto 22px;
  border-radius:50%;background:var(--champan);border:1px solid var(--champan);position:relative;z-index:1;
  box-shadow:0 0 0 6px rgb(232 211 166/.12);transition:background .4s,border-color .4s,box-shadow .4s}
html.web-publica .recorrido .t{display:block;font-size:clamp(14px,1.3vw,18px);line-height:1.25;
  color:#fff;transition:color .4s}
html.web-publica.js .recorrido li:not(.on) .n{color:var(--tenue)}
html.web-publica.js .recorrido li:not(.on) .punto{background:var(--noche);border-color:var(--tenue);box-shadow:none}
html.web-publica.js .recorrido li:not(.on) .t{color:#a3a3a3}
@media (max-width:760px){
  html.web-publica .recorrido{grid-template-columns:1fr;row-gap:26px}
  html.web-publica .recorrido::before,html.web-publica .recorrido::after{top:0;bottom:0;left:6px;right:auto;
    width:1px;height:auto}
  html.web-publica .recorrido::after{transform-origin:top;transform:scaleY(1)}
  html.web-publica.js .recorrido::after{transform:scaleY(var(--p,0))}
  html.web-publica .recorrido li{display:grid;grid-template-columns:13px 2.4ch 1fr;align-items:center;
    gap:16px;text-align:left;padding:0}
  html.web-publica .recorrido .punto{margin:0;order:-1}
  html.web-publica .recorrido .n{margin:0}
}

/* ── Tres sistemas: la luz que sigue al ratón y la foto que se acerca ────── */
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama{position:relative}
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama::before{content:"";position:absolute;inset:0;
  pointer-events:none;opacity:0;transition:opacity .4s;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgb(232 211 166/.13),transparent 60%)}
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama:hover::before{opacity:1}
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama-foto img{transition:transform .9s var(--ease)}
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama:hover .rama-foto img{transform:scale(1.05)}
/* Toda la tarjeta es pulsable: el enlace del nombre se estira sobre ella y el
   segundo enlace se queda por encima, para seguir siendo pulsable por separado. */
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama h2 a::after{content:"";position:absolute;
  inset:0;z-index:1}
html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama .enlace{position:relative;z-index:2}

/* ── Cómo se empieza: la línea que se dibuja ───────────────────────────────
   Solo cuando los pasos van en columnas y ninguno lleva foto (con foto, el
   círculo se monta sobre la foto y la línea no tendría dónde ir). Los filetes
   sueltos de cada paso dan paso a una línea continua que pinta `--trazo`. */
@media (min-width:52em){
  html.web-publica main.lienzo .numerada:not(.tarjetas):not(:has(.paso-foto)){position:relative}
  html.web-publica main.lienzo .numerada:not(.tarjetas):not(:has(.paso-foto))>li{border-top:0}
  html.web-publica main.lienzo .numerada:not(.tarjetas):not(:has(.paso-foto))::before,
  html.web-publica main.lienzo .numerada:not(.tarjetas):not(:has(.paso-foto))::after{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linea)}
  html.web-publica main.lienzo .numerada:not(.tarjetas):not(:has(.paso-foto))::after{
    background:var(--champan);transform-origin:left;transform:scaleX(1)}
  html.web-publica.js main.lienzo .numerada:not(.tarjetas):not(:has(.paso-foto))::after{
    transform:scaleX(var(--trazo,0));transition:transform 1.6s var(--ease)}
  html.web-publica main.lienzo .numerada:not(.tarjetas):not(:has(.paso-foto))>li{position:relative;z-index:1}
}

/* ── Preguntas frecuentes: la foto en 4:3 ──────────────────────────────────
   A 1:1 les cortaba la cabeza a las dos figuras. */
@media (min-width:56.001em){
  html.web-publica .faq.con-foto .foto-bloque{aspect-ratio:4/3}
}

/* ── Apariciones al bajar ──────────────────────────────────────────────────
   El script pone `.rev` a los elementos y se la quita cuando acaban, así que
   nada se queda escondido ni estorba a un `:hover` posterior. */
html.web-publica.js .rev{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.web-publica.js .rev.visible{opacity:1;transform:none}
html.web-publica.js .rev[data-d="1"]{transition-delay:.08s}
html.web-publica.js .rev[data-d="2"]{transition-delay:.16s}
html.web-publica.js .rev[data-d="3"]{transition-delay:.24s}

/* ── Sin movimiento: el estado final, sin transiciones ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  html.web-publica.js body.div-global main.lienzo .portada.a-sangre .portada-foto-caja{transform:none}
  html.web-publica.js body.div-global main.lienzo>.portada.a-sangre::before{opacity:1}
  html.web-publica.js .manifiesto .frase-vida .w{opacity:1}
  html.web-publica.js .manifiesto .palabras-manifiesto li{color:#fff;transform:none}
  html.web-publica.js .manifiesto .palabras-manifiesto li:nth-child(2){color:var(--champan)}
  html.web-publica.js .rev{opacity:1;transform:none}
  html.web-publica .recorrido *,html.web-publica .recorrido::after,
  html.web-publica .manifiesto *,html.web-publica .numerada::after{transition:none}
}
/* ══ Repaso de móvil (issue #151, 16/10/2026) ═══════════════════════════════
   El coach: «Arregla todo para que se vea bien el móvil. Hay imágenes que se
   cortan o se ven mal.» Medido a 360 y 390 en las 24 páginas.
   · FOTOS: el recorte `cover` a 16:9 y 4:3 le cortaba cabezas y sujetos a las
     fotos de 3:2 (y la de contacto, a 4:5, le quitaba más de la mitad). En
     pantalla de una columna las fotos van ENTERAS, a su proporción. La del
     coach (`alf-*`) ya iba entera salvo el retrato de Executive: su caja
     conservaba el `aspect-ratio:16/9` de la hoja vieja y le cortaba la cabeza
     (la foto es 640×641 y la caja medía 328×185).
   · TOQUES: todo lo que se pulsa mide 44 px de alto como mínimo.
   · CABECERA de un sistema: «ARKETIP Preparación Sistémica» + el nombre del
     sistema + «Menú» no caben en 328 px y el botón bajaba a una fila propia. */
@media (max-width:56em){
  html.web-publica main.lienzo .portada.a-sangre .portada-foto-caja{
    aspect-ratio:auto;justify-self:center;margin-top:0}
  html.web-publica main.lienzo .portada.a-sangre .portada-foto{height:auto}
  html.web-publica .paso-foto{aspect-ratio:auto;height:auto;object-fit:contain}
  html.web-publica .rama-foto,html.web-publica .apartado-foto,
  html.web-publica main.lienzo .foto-bloque{aspect-ratio:auto}
  html.web-publica .rama-foto img,html.web-publica .apartado-foto img,
  html.web-publica main.lienzo .foto-bloque img{height:auto;object-fit:contain}
  html.web-publica main.lienzo .captura-email.con-foto>.foto-bloque{margin:0}
  /* La franja es un fondo con texto encima: se recorta por fuerza. A este
     ancho el peón de /personal (a ~79 % de la foto panorámica) quedaba cortado
     por el borde derecho con el 75 %. */
  html.web-publica .franja-foto>img[src*="concepto-peon.jpg"]{object-position:90% 40%}
  html.web-publica .etiqueta{line-height:1.5}
}
@media (max-width:76em){
  html.web-publica .cabecera-fija{top:-44px}
  html.web-publica .barra-divisiones-interior{height:44px}
  html.web-publica .barra-divisiones a{display:inline-flex;align-items:center;min-height:44px}
  html.web-publica.js .abrir-menu{height:44px}
}
@media (max-width:30em){
  html.web-publica body:not(.div-global) .cabecera .marca-lema,
  html.web-publica body:not(.div-global) .cabecera .marca-grupo .marca-volver{display:none}
  html.web-publica body:not(.div-global) .cabecera .marca-division{display:inline-flex;
    align-items:center;min-height:44px}
  html.web-publica .cabecera-interior{flex-wrap:nowrap}
}
@media (max-width:44em){
  html.web-publica .pie-nav a,html.web-publica .pie-legal a{display:inline-flex;
    align-items:center;min-height:44px}
  html.web-publica .pie-nav,html.web-publica .pie-legal{gap:0}
  /* 13px más de zona de toque arriba y abajo, restados del margen para que el
     enlace no se mueva. El margen lateral (1.75rem) se conserva: un `margin:-13px 0`
     lo ponía a 0 y el enlace se salía por el borde izquierdo de la tarjeta. */
  html.web-publica .bifurcacion:has(>.rama>.rama-foto) .rama .enlace{
    padding:13px 0 calc(.3rem + 13px);
    margin:calc(1.5rem - 13px) 1.75rem calc(1.75rem - 13px);
    background-position:0 calc(100% - 13px)}
  html.web-publica .marca{display:inline-flex;align-items:center;min-height:44px}
}
/* ══ Notas de voz del coach del 19/10/2026 ══════════════════════════════════
   · LA CABECERA. «Los títulos de arriba […] un poco más grandes y que se viera
     más el blanco, como el ARKETIP en mayúsculas», y la barra de los tres
     públicos «ponerlo en la izquierda, no en la derecha». La barra pasa de gris
     tenue (#8a8a8a) a blanco y de 13 a 15 px; el menú, de #d6d6d6 a blanco, y
     de 14 a 15 px solo en las páginas generales. En las de un sistema el menú
     lleva seis enlaces más el nombre del sistema, y a 15 px «Executive» se
     montaba sobre «Beneficios» a 1440 px de ancho: ahí se queda en 14. El
     público activo sigue en champán y el ratón pinta champán: con todo en
     blanco, el blanco ya no distingue nada. Volver atrás es borrar estas cinco
     reglas. */
html.web-publica .barra-divisiones-interior{justify-content:flex-start}
html.web-publica .barra-divisiones a{font-size:15px;color:#fff}
html.web-publica .barra-divisiones a:hover{color:var(--champan)}
html.web-publica .cabecera nav a:not(.nav-contacto){color:#fff}
html.web-publica body.div-global .cabecera nav a:not(.nav-contacto){font-size:15px}
/* · EL AIRE ENTRE LOS ENLACES DEL MENÚ (19/10/2026, con una captura de la
     cabecera de simonsinek.com al lado): «aquí está todo un poco
     embotonado; que quede más separado como este». En sus dos capturas, al
     mismo zoom, el hueco entre enlaces medía 31 px en la nuestra y 48 en la
     suya: ×1,55. El hueco pasa de clamp(14px,1.5vw,22px) a
     clamp(22px,2.4vw,34px), y lo mismo el que hay a cada lado del filete de
     «Sobre Alejandro». Solo desde 76em: por debajo el menú es el desplegable
     de móvil, en columna. Executive se queda con el hueco de antes: su menú
     lleva cinco apartados y, medido de 1300 a 1920 px, con el hueco nuevo
     «Executive ← Inicio» se quedaba pegado a «Beneficios». */
/* · LA BARRA DE LOS TRES PÚBLICOS, BANDA APARTE. Visto lo anterior en su
     pantalla: «se sigue chocando un poco», y preguntado dónde, la barra
     «Para ti · Para Ejecutivos…» encima del logo y del menú, sin aire entre
     las dos. Como en simonsinek.com: la barra es una banda propia (gris
     tarjeta #141414, blanco encima 18,42:1), de 44 px, con cada público como
     una pestaña con aire a los lados, y la del público activo en el negro de
     la cabecera, como si la pestaña siguiera en ella (champán sobre negro
     14,30:1). La primera pestaña se adelanta lo que mide su relleno para que
     su texto siga alineado con el logo. Debajo, la cabecera gana aire arriba
     y abajo. Solo desde 76em: en móvil la barra se esconde al bajar con
     `top:-44px` y su altura no se puede tocar sin recalcularlo. */
@media (min-width:76.0625em){
  html.web-publica .barra-divisiones{background:#141414;border-bottom:1px solid var(--linea)}
  html.web-publica .barra-divisiones-interior{height:44px;padding:0 var(--gutter);gap:0;
    align-items:stretch}
  html.web-publica .barra-divisiones a{display:inline-flex;align-items:center;padding:0 22px}
  html.web-publica .barra-divisiones a:first-child{margin-left:-22px}
  html.web-publica .barra-divisiones a[aria-current]{background:#000}
  html.web-publica .cabecera-interior{padding-top:.9rem;padding-bottom:.9rem}
  /* «Ahora el menú no está centrado, está como hacia arriba dentro de su
     recuadro» (20/10/2026). Los enlaces se estiraban a los 46 px del botón
     «Contáctame» y su texto se quedaba arriba: 12 px más alto que el del
     botón. Centrados, cada enlace mide lo que su texto. */
  html.web-publica .cabecera nav{align-items:center}
}
@media (min-width:76.0625em){
  html.web-publica body:not(.div-executive) .cabecera nav{gap:clamp(22px,2.4vw,34px)}
  html.web-publica body:not(.div-executive) .cabecera nav a.nav-aparte{padding-left:clamp(22px,2.4vw,34px)}
}
/* · LOS RÓTULOS «WHY / WHAT / HOW» DE LA HOME. «Que se vea más. Podría estar más
     blanco y un poco más grande», «si se saca la línea, mejor», y que el How
     guarde con su titular «la misma distancia» que el Why. Medido antes: Why a
     45 px de lo que sigue, What a 34, How a 22, porque cada bloque le sumaba su
     propio margen. Ahora los tres a 45 px (el del Why, que es el que le gusta).
     Solo en la home: `#tres-sistemas` es el ancla del bloque «Tres sistemas»,
     que no está en ninguna otra página. El rótulo de la portada («Preparación
     sistémica») no cambia. El resto de rótulos de la web siguen como estaban. */
html.web-publica main.lienzo:has(#tres-sistemas) .etiqueta:not(.portada .etiqueta){
  font-size:.9375rem;color:#fff;margin-bottom:2.8rem}
html.web-publica main.lienzo:has(#tres-sistemas) .etiqueta:not(.portada .etiqueta)::before{display:none}
html.web-publica main.lienzo:has(#tres-sistemas) .etiqueta:not(.portada .etiqueta)+*{margin-top:0}
}