/* Veladura · estudio de diseño de MKTN. Hoja de estilos global.
   El diseño de cada bloque va en línea en el HTML (viene del mockup de Claude Design);
   aquí van las tipografías, los estados (hover, foco) y las reglas globales. */
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/alegreya-sans-400.woff2) format('woff2')}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/alegreya-sans-500.woff2) format('woff2')}
@font-face{font-family:'Alegreya';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/alegreya-italic-400.woff2) format('woff2')}

html,body{margin:0;padding:0;background:#F4EFE6;color:#13324B}
body{overflow-x:clip}
*{box-sizing:border-box}
.pagina{font-family:'Alegreya Sans',sans-serif;font-weight:400;font-size:18px;line-height:1.5;color:#13324B;background:#F4EFE6}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:inherit;text-decoration-thickness:2px}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
html{scroll-behavior:smooth}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Estados de los controles sobre plano Pleno */
.h-v10:hover{background:#DEDCD7!important}
.f3:focus,.f3:focus-visible{outline:3px solid #F4EFE6;outline-offset:3px}
.f4:focus,.f4:focus-visible{outline:3px solid #F4EFE6;outline-offset:4px}
button:disabled{opacity:1;cursor:progress}

/* Accesibilidad: salto al contenido */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:#F4EFE6;color:#13324B;padding:12px 20px;font-size:18px;font-weight:500}
.saltar:focus{left:16px;top:16px}

/* Páginas legales y 404 */
.legal{max-width:760px;margin:0 auto;padding:clamp(32px,5vw,64px) clamp(20px,5vw,40px) clamp(64px,8vw,120px)}
.legal-cab{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:clamp(40px,6vw,80px)}
.legal-cab img{display:block;height:22px;width:auto}
.legal-cab a.volver{font-size:18px;font-weight:500}
.legal h1{margin:0 0 12px;font-size:clamp(40px,6vw,72px);line-height:1.02;font-weight:500;letter-spacing:-.01em}
.legal .fecha{margin:0 0 clamp(32px,5vw,56px);font-size:16px;color:#13324B}
.legal h2{margin:clamp(40px,5vw,56px) 0 12px;font-size:clamp(26px,3vw,34px);line-height:1.15;font-weight:500}
.legal p,.legal li{font-size:18px;line-height:1.6;max-width:62ch}
.legal p{margin:0 0 16px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin:6px 0}
.legal dl{margin:0 0 16px;display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:10px 24px;border-top:1px solid #6D7E89;padding-top:16px}
.legal dt{font-weight:500}
.legal dd{margin:0}
.legal-pie{margin-top:clamp(56px,8vw,96px);border-top:1px solid #6D7E89;padding-top:24px;display:flex;flex-wrap:wrap;gap:16px 32px;font-size:16px}

/* Enlace a MKTN (sección Quién) */
.enlace-mktn:hover span{border-bottom-width:2px!important}

/* ---------------------------------------------------------------- Contacto: variante «Carta» (Claude Design, 2026-10)
   Una tinta (Papel sobre Pleno), campos de línea inferior, etiquetas en mayúsculas espaciadas.
   Contrastes: Papel sobre Pleno 11,56:1; Veladura 10 sobre Pleno 9,67:1. */
.carta-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px clamp(32px,7vw,112px)}
.carta-zona{margin-top:clamp(48px,6vw,88px)}
.carta{display:flex;flex-direction:column;gap:28px;position:relative}
.carta-frase{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px clamp(16px,1.8vw,24px);font-size:clamp(28px,3.6vw,48px);line-height:1.2}
.carta .pre{padding-top:6px}
.carta .pre-largo{flex:1 1 100%}
.carta .campo{min-width:0;display:flex;flex-direction:column;gap:8px}
.carta .campo-nombre{flex:1 1 260px}
.carta .campo-correo{flex:1 1 340px}
.carta .campo-mensaje{flex:1 1 100%}
.carta input[type=text],.carta input[type=email],.carta textarea{
  font-family:inherit;font-size:inherit;line-height:1.2;color:#F4EFE6;caret-color:#F4EFE6;background:transparent;
  border:0;border-bottom:2px solid #F4EFE6;border-radius:0;outline:none;padding:6px 0 8px;width:100%;min-height:56px}
.carta textarea{line-height:1.3;resize:vertical;min-height:0}
.carta input[type=text]:focus,.carta input[type=email]:focus,.carta textarea:focus{border-bottom-width:4px;outline:2px solid #F4EFE6;outline-offset:6px}
.carta [aria-invalid="true"]{border-bottom-style:dashed!important}
.carta .campo label{font-size:14px;line-height:1.3;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.carta .err{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.4}
.carta .err i,.carta-fallo i{flex:none;width:10px;height:10px;background:#F4EFE6;display:block}
.carta-pie{display:flex;flex-direction:column;gap:8px}
.carta .nota{margin:0;font-size:16px;line-height:1.4;color:#DEDCD7}
.carta .privacidad{display:flex;align-items:center}
.carta input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:28px;height:28px;margin:0;border:2px solid #F4EFE6;border-radius:0;background:transparent;cursor:pointer}
.carta input[type=checkbox]:checked{background:#F4EFE6;box-shadow:inset 0 0 0 4px #13324B}
.carta input[type=checkbox]:focus-visible{outline:2px solid #F4EFE6;outline-offset:4px}
.carta input[type=checkbox][aria-invalid="true"]{border-style:dashed}
.carta .privacidad .texto{min-height:44px;display:flex;align-items:center;gap:16px;font-size:18px;line-height:1.4;cursor:pointer}
.carta .privacidad a{color:#F4EFE6}
.carta .enviar{align-self:flex-start;font-family:inherit;font-size:clamp(28px,3.6vw,48px);font-weight:500;line-height:1.2;color:#F4EFE6;background:transparent;border:0;border-bottom:4px solid #F4EFE6;border-radius:0;min-height:64px;padding:0 .3em 6px 0;display:inline-flex;align-items:center;gap:.4em;cursor:pointer}
.carta .enviar::after{content:"";flex:none;width:.8em;height:.5em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M0 12H36M25 1.5 36 12 25 22.5' fill='none' stroke='%23F4EFE6' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s ease}
.carta .enviar:hover::after{transform:translateX(.25em)}
.carta .enviar:focus-visible{outline:3px solid #F4EFE6;outline-offset:6px}
.carta .enviar:disabled{cursor:progress;color:#DEDCD7;border-bottom-color:#DEDCD7}
.carta .enviar:disabled::after{display:none}
@media (prefers-reduced-motion:reduce){.carta .enviar::after{transition:none}.carta .enviar:hover::after{transform:none}}
.carta-aviso{margin:0;font-size:19px;font-weight:500}
.carta-fallo{border:2px solid #F4EFE6;padding:20px 24px;display:flex;align-items:flex-start;gap:16px;max-width:44em}
.carta-fallo i{margin-top:8px;width:14px;height:14px}
.carta-fallo div{display:flex;flex-direction:column;gap:4px}
.carta-fallo .t{font-size:20px;font-weight:500}
.carta-ok{background:#F4EFE6;color:#13324B;padding:clamp(28px,5vw,72px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.carta-ok-texto{display:flex;flex-direction:column;gap:12px;max-width:34em}
.carta-ok h3{margin:0;font-size:clamp(36px,5vw,72px);line-height:1;font-weight:500}
.carta-ok p{margin:0;font-size:clamp(18px,1.7vw,22px);text-wrap:pretty}
.carta-ok button{font-family:inherit;font-size:18px;font-weight:500;color:#13324B;background:transparent;border:0;padding:0;min-height:44px;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.carta-simbolo{position:relative;overflow:hidden;height:clamp(260px,24vw,340px)}
.carta-simbolo svg{position:absolute;right:-10%;top:0;width:clamp(260px,38vw,560px);height:auto;aspect-ratio:1;display:block}

/* ================================================================ Rediseño «Costuras» (v2, Claude Design 2026-10) */
/* Veladura v2 · «Costuras» (Claude Design, 2026-10). Se suma a style.css.
   Cada titular gigante cabalga la costura entre dos planos, partido en dos tintas: el plano anterior lleva una copia
   (aria-hidden) recortada por su borde y el plano siguiente lleva el h2 real. Las dos van con la misma línea de tiempo.
   Con scroll-driven animations (Chrome, Edge, Safari 26) lo hace el CSS; si no, v2.js (Firefox).
   Con prefers-reduced-motion: composición estática, sin movimiento ni margen extra de recorrido. */
html:has(body.inicio),body.inicio{background:#13324B}

/* Pasos de la costura: de -0,45em - 24svh a -0,45em + 10svh (el titular va al 66 % de la velocidad del scroll) */
@keyframes costura{from{transform:translateY(calc(-0.45em - 24svh))}to{transform:translateY(calc(-0.45em + 10svh))}}
@keyframes deriva{from{transform:translateY(7svh)}to{transform:translateY(-7svh)}}

/* Anotaciones del plano técnico: anchas a partir de 1200 px, en lista debajo de las piezas por debajo */
.lado-ancho{display:none}
.lado-estrecho{display:contents}
@media (min-width:1200px){.lado-ancho{display:contents}.lado-estrecho{display:none}}

/* Reserva del recorrido del titular: en CSS para no mover nada tras el primer pintado */
[data-previa]{padding-bottom:calc(var(--pb) + clamp(64px,12.5vw,200px) * .5)!important}
@media (prefers-reduced-motion:no-preference){
  [data-previa]{padding-bottom:calc(var(--pb) + clamp(64px,12.5vw,200px) * .5 + 24svh)!important}
  [data-espaciador]{padding-top:10svh}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    [data-escena]{timeline-scope:--c2,--c3,--c4,--c5,--c6,--c7}
    [data-costura-de="2"]{view-timeline-name:--c2}
    [data-costura-de="3"]{view-timeline-name:--c3}
    [data-costura-de="4"]{view-timeline-name:--c4}
    [data-costura-de="5"]{view-timeline-name:--c5}
    [data-costura-de="6"]{view-timeline-name:--c6}
    [data-costura-de="7"]{view-timeline-name:--c7}
    [data-costura="2"]{animation:costura linear both;animation-timeline:--c2;animation-range:entry 0% entry 100%}
    [data-costura="3"]{animation:costura linear both;animation-timeline:--c3;animation-range:entry 0% entry 100%}
    [data-costura="4"]{animation:costura linear both;animation-timeline:--c4;animation-range:entry 0% entry 100%}
    [data-costura="5"]{animation:costura linear both;animation-timeline:--c5;animation-range:entry 0% entry 100%}
    [data-costura="6"]{animation:costura linear both;animation-timeline:--c6;animation-range:entry 0% entry 100%}
    [data-costura="7"]{animation:costura linear both;animation-timeline:--c7;animation-range:entry 0% entry 100%}
    [data-deriva]{animation:deriva linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}

/* Llamadas del plano técnico: punto sobre el objetivo y número fuera de la pieza (en narrow, sobre el borde) */
.pin{position:absolute;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:#13324B;border:2px solid #F4EFE6;box-sizing:border-box}
.n-pieza{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:#13324B;color:#F4EFE6;font-size:13px;line-height:24px;text-align:center;font-weight:500}
.n-izq{left:0}
.n-der{left:100%}
@media (min-width:1200px){.n-izq{left:-18px}.n-der{left:calc(100% + 18px)}}

/* ---------------------------------------------------------------- Criterio: «Banco de pruebas» + cita «Fiel» (Claude Design, 2026-10)
   Tres instrumentos con controles nativos (radios y casilla) resueltos con :has(): funcionan sin JavaScript y con teclado.
   v2.js solo anuncia los cambios a lectores de pantalla. */
.sr-solo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* La balanza: el brazo gira de -8° a +8° y vuelve a 0°; los platillos giran al revés para colgar en vertical; la frase del fallo se subraya */
@keyframes balanza{0%{transform:rotate(-8deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}45%{transform:rotate(8deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}80%,100%{transform:rotate(0deg)}}
@keyframes contra{0%{transform:rotate(8deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}45%{transform:rotate(-8deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}80%,100%{transform:rotate(0deg)}}
@keyframes sub1{0%,40%{text-decoration-color:#F4EFE6}44%,100%{text-decoration-color:#13324B}}
@keyframes sub2{0%,40%{text-decoration-color:#13324B}44%,76%{text-decoration-color:#F4EFE6}80%,100%{text-decoration-color:#13324B}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    [data-opcion="3"]{view-timeline-name:--cita}
    [data-anim="balanza"]{animation:balanza linear both;animation-timeline:--cita;animation-range:cover 5% cover 50%}
    [data-anim="contra"]{animation:contra linear both;animation-timeline:--cita;animation-range:cover 5% cover 50%}
    [data-anim="sub1"]{animation:sub1 linear both;animation-timeline:--cita;animation-range:cover 5% cover 50%}
    [data-anim="sub2"]{animation:sub2 linear both;animation-timeline:--cita;animation-range:cover 5% cover 50%}
  }
}

.crit-banco{display:flex;flex-direction:column;gap:clamp(88px,10vw,144px);padding-top:clamp(48px,6vw,88px)}
.crit-instrumentos{display:flex;flex-direction:column;border-top:2px solid #F4EFE6}
.instr{display:flex;flex-wrap:wrap;gap:40px clamp(40px,5vw,80px);padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid #6D7E89}
.instr:last-child{border-bottom:0}
.instr-texto{flex:1 1 280px;max-width:420px;display:flex;flex-direction:column;gap:16px}
.instr-etq{font-size:14px;font-weight:500;letter-spacing:.14em}
.instr h3{margin:0;font-size:clamp(36px,3.8vw,56px);line-height:1;font-weight:500}
.instr-texto p{margin:0;font-size:clamp(17px,calc(14px + 0.5vw),21px);text-wrap:pretty}
.instr-cuerpo{flex:2 1 520px;min-width:0;display:flex;flex-direction:column;gap:28px}
.instr fieldset{margin:0;padding:0;border:0;min-width:0}
.instr legend{padding:0;margin-bottom:12px;font-size:16px;font-weight:500}

/* Botones hechos con radios y casilla nativos */
.instr-botones{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px!important}
.btn-radio{position:relative;display:inline-flex;align-items:center;align-self:flex-start;min-height:48px;padding:0 20px;font-size:17px;font-weight:500;color:#F4EFE6;background:transparent;border:2px solid #F4EFE6;cursor:pointer}
.btn-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.btn-radio:has(input:checked){color:#13324B;background:#F4EFE6}
.btn-radio:has(input:focus-visible){outline:3px solid #F4EFE6;outline-offset:3px}
.btn-radio.pz{min-height:44px;padding:0 14px;font-size:16px}

/* Contraste: medidor */
.pares{display:flex;flex-wrap:wrap;gap:8px}
.par{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px 0 8px;border:1px solid #6D7E89;cursor:pointer;font-size:16px}
.par:has(input:checked){border:2px solid #F4EFE6;padding:0 13px 0 7px}
.par input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0 0 0 6px;border:2px solid #F4EFE6;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 3px #13324B;cursor:pointer}
.par input:checked{background:#F4EFE6}
.par input:focus-visible{outline:3px solid #F4EFE6;outline-offset:3px}
.par-aa{width:32px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;outline:1px solid #6D7E89}
.par-vista{display:flex;flex-wrap:wrap;align-items:stretch;gap:24px}
.par-muestra{flex:1 1 260px;min-height:140px;display:flex;align-items:center;padding:24px 28px;background:var(--fondo);color:var(--tinta);outline:1px solid #6D7E89;font-size:clamp(24px,2.4vw,34px);line-height:1.15;font-weight:500}
.par-estado{flex:0 1 220px;display:flex;flex-direction:column;justify-content:center}
.est .cifra{font-size:clamp(44px,4.4vw,64px);line-height:1;font-weight:500;letter-spacing:-0.01em}
.est .nombre{font-size:16px}
.est .veredicto{font-size:18px;font-weight:500}
.escala{position:relative;height:56px;margin:0 6px}
.escala .e-base{position:absolute;left:0;right:0;top:20px;height:2px;background:#6D7E89}
.escala .e-bajo{position:absolute;left:0;top:20px;height:2px;width:17.5%;background:#6D7E89}
.escala .e-ok{position:absolute;left:17.5%;right:0;top:19px;height:4px;background:#F4EFE6}
.escala .e-m{position:absolute;background:#F4EFE6}
.escala .e-n{position:absolute;top:34px;font-size:14px}
.escala .aguja{position:absolute;top:0;left:var(--pos);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:14px solid #F4EFE6;transform:translateX(-50%);transition:left 360ms cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.escala .aguja{transition:none}}

.leyenda{margin:0;font-size:16px}
.coh-lienzo{position:relative;width:100%;max-width:640px;aspect-ratio:400 / 420}
.coh-lienzo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.coh-regla{margin:0;font-size:16px;max-width:36em}

/* >>> criterio (generado por construir_v2.py) */
.instr-contraste{--fondo:#F4EFE6;--tinta:#13324B;--pos:52.82%}
.instr-contraste:has(#par-pap:checked){--fondo:#13324B;--tinta:#F4EFE6;--pos:52.82%}
.instr-contraste:has(#par-v10:checked){--fondo:#DEDCD7;--tinta:#13324B;--pos:43.33%}
.instr-contraste:has(#par-p60:checked){--fondo:#13324B;--tinta:#9AA3A8;--pos:20.79%}
.instr-contraste:has(#par-v60:checked){--fondo:#F4EFE6;--tinta:#6D7E89;--pos:13.35%}
.instr-contraste:has(#par-v30:checked){--fondo:#F4EFE6;--tinta:#B0B6B8;--pos:3.96%}
.est{display:none;flex-direction:column;justify-content:center;gap:4px}.est-pp{display:flex}
.instr-contraste:has(#par-pap:checked) .est-pp{display:none}
.instr-contraste:has(#par-pap:checked) .est-pap{display:flex}
.instr-contraste:has(#par-v10:checked) .est-pp{display:none}
.instr-contraste:has(#par-v10:checked) .est-v10{display:flex}
.instr-contraste:has(#par-p60:checked) .est-pp{display:none}
.instr-contraste:has(#par-p60:checked) .est-p60{display:flex}
.instr-contraste:has(#par-v60:checked) .est-pp{display:none}
.instr-contraste:has(#par-v60:checked) .est-v60{display:flex}
.instr-contraste:has(#par-v30:checked) .est-pp{display:none}
.instr-contraste:has(#par-v30:checked) .est-v30{display:flex}
.instr-jer .maq{display:none;container-type:inline-size;position:relative;aspect-ratio:16 / 9;background:#F4EFE6;color:#13324B;overflow:hidden}.instr-jer .maq-sin,.instr-jer .leyenda-sin{display:block}.instr-jer .leyenda{display:none}.instr-jer .leyenda-sin{display:block}
.instr[data-instrumento="jerarquia"]:has(#jer-con:checked) .maq-sin,.instr[data-instrumento="jerarquia"]:has(#jer-con:checked) .leyenda-sin{display:none}.instr[data-instrumento="jerarquia"]:has(#jer-con:checked) .maq-con,.instr[data-instrumento="jerarquia"]:has(#jer-con:checked) .leyenda-con{display:block}
.instr[data-instrumento="coherencia"] .g-pieza,.instr[data-instrumento="coherencia"] .g-cont{display:none}
.instr[data-instrumento="coherencia"] .p-a4{display:inline}
.instr[data-instrumento="coherencia"]:has(#pz-169:checked) .p-a4{display:none}
.instr[data-instrumento="coherencia"]:has(#pz-169:checked) .p-169{display:inline}
.instr[data-instrumento="coherencia"]:has(#pz-web:checked) .p-a4{display:none}
.instr[data-instrumento="coherencia"]:has(#pz-web:checked) .p-web{display:inline}
.instr[data-instrumento="coherencia"]:has(#pz-informe:checked) .p-a4{display:none}
.instr[data-instrumento="coherencia"]:has(#pz-informe:checked) .p-informe{display:inline}
.instr[data-instrumento="coherencia"]:has(#coh-sup:checked) .g-pieza{display:none!important}
.instr[data-instrumento="coherencia"]:has(#coh-sup:checked) .g-cont{display:inline}
.instr[data-instrumento="coherencia"]:has(#coh-sup:checked) .pz:not(.sup):has(input:checked){color:#F4EFE6;background:transparent}
/* <<< criterio */

/* Relleno al pasar el ratón en todos los botones (Papel 60 con Pleno, 5,16:1).
   Solo en dispositivos con puntero, para que en táctil no se quede pegado. */
@media (hover:hover){
  .h-v10:hover{background:#9AA3A8!important}
  .btn-radio:hover,.btn-radio:has(input:checked):hover{background:#9AA3A8;color:#13324B}
  .par:hover{background:#9AA3A8;color:#13324B}
  .par:hover input{border-color:#13324B;box-shadow:inset 0 0 0 3px #9AA3A8}
  .par:hover input:checked{background:#13324B}
  .carta .enviar:not(:disabled):hover{background:#9AA3A8;color:#13324B;border-bottom-color:#9AA3A8}
  .carta .enviar:not(:disabled):hover::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M0 12H36M25 1.5 36 12 25 22.5' fill='none' stroke='%2313324B' stroke-width='3'/%3E%3C/svg%3E")}
  .carta-ok button:hover{background:#9AA3A8}
}
.carta-ok button{padding:0 10px;margin-left:-10px}

/* ---------------------------------------------------------------- Cómo trabajamos (Claude Design v3, disposición «a»)
   Cada paso es una estancia con su filete, su número, el verbo y su prueba. Cada paso tiene su propia línea de tiempo (view-timeline en el li)
   y cada pieza usa un tramo (--an: animación, --ar: rango, definidos en el marcado). Sin soporte o con movimiento reducido: estado final. */
@keyframes revela{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes sello{from{clip-path:inset(50%)}to{clip-path:inset(0)}}
@keyframes tacha{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tachatexto{0%,60%{color:#F4EFE6}100%{color:#9AA3A8}}
[data-prueba="mirar"]{--col-notas:64px}
@media (min-width:760px){[data-prueba="mirar"]{--col-notas:minmax(220px,.8fr)}}
.nota-lado{display:none}
.nota-lista{display:block}
@media (min-width:760px){.nota-lado{display:contents}.nota-lista{display:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    [data-fila="1"]{view-timeline-name:--f1}
    [data-fila="2"]{view-timeline-name:--f2}
    [data-fila="3"]{view-timeline-name:--f3}
    [data-fila="4"]{view-timeline-name:--f4}
    [data-fila] [data-anim]{animation-name:var(--an);animation-range:var(--ar);animation-timing-function:linear;animation-fill-mode:both}
    [data-fila="1"] [data-anim]{animation-timeline:--f1}
    [data-fila="2"] [data-anim]{animation-timeline:--f2}
    [data-fila="3"] [data-anim]{animation-timeline:--f3}
    [data-fila="4"] [data-anim]{animation-timeline:--f4}
  }
}

/* Portada: construcción del símbolo (sin JS; solo al cargar) */
@keyframes h-cruce{from{clip-path:polygon(evenodd,-11.667% 8.333%,42.500% 8.333%,42.500% 79.167%,-11.667% 79.167%,-11.667% 8.333%,57.500% 20.833%,111.667% 20.833%,111.667% 91.667%,57.500% 91.667%,57.500% 20.833%)}to{clip-path:polygon(evenodd,8.333% 8.333%,62.500% 8.333%,62.500% 79.167%,8.333% 79.167%,8.333% 8.333%,37.500% 20.833%,91.667% 20.833%,91.667% 91.667%,37.500% 91.667%,37.500% 20.833%)}}
@keyframes h-cota{from{clip-path:inset(-32px 100% -32px -32px)}to{clip-path:inset(-32px)}}
@keyframes h-cota-v{from{clip-path:inset(-32px -32px 100% -32px)}to{clip-path:inset(-32px)}}
@media (prefers-reduced-motion:no-preference){
  .h-cruce{animation:h-cruce 900ms cubic-bezier(.2,.7,.2,1) 120ms both}
  .h-cota{animation:h-cota 420ms cubic-bezier(.2,.7,.2,1) var(--ret) both}
  .h-cota-v{animation-name:h-cota-v}
  .h-sello{animation:sello 420ms cubic-bezier(.2,.7,.2,1) var(--ret) both}
}

/* Menú fijo (solo escritorio con puntero): aparece al salir de la cabecera de la portada.
   Plano sólido que cambia entre Pleno y Papel según la sección que queda debajo. Sin sombras ni transparencias. */
.menu{display:none}
@media (min-width:1024px) and (hover:hover){
  .menu:not([hidden]){display:flex;position:fixed;z-index:50;top:0;left:0;right:0;height:56px;align-items:center;gap:40px;padding:0 max(clamp(20px,5.5vw,80px),calc(50% - 640px));font-size:18px;font-weight:500;background:#13324B;color:#F4EFE6;border-bottom:1px solid #6D7E89;transform:translateY(-100%)}
  .menu.dentro{transform:none}
  .menu[data-tono="papel"]{background:#F4EFE6;color:#13324B;border-bottom-color:#B0B6B8}
  .menu a{color:inherit;text-decoration:none;display:flex;align-items:center;min-height:44px}
  .menu ul{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:32px}
  .menu ul a{border-bottom:2px solid transparent;padding-top:2px}
  .menu ul a:hover{border-bottom-color:currentColor}
  .menu ul a[aria-current="true"]{border-bottom-color:currentColor}
  .menu-cta{padding:0 22px;min-height:40px!important;background:#F4EFE6;color:#13324B!important}
  .menu[data-tono="papel"] .menu-cta{background:#13324B;color:#F4EFE6!important}
  .menu .menu-cta:hover{background:#9AA3A8;color:#13324B!important}
  .menu a:focus-visible{outline:3px solid currentColor;outline-offset:3px}
  [data-tono]{scroll-margin-top:calc(56px + clamp(64px,12.5vw,200px) * .45)}
}
@media (min-width:1024px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .menu{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
}

/* Qué hacemos: tres hojas que se apilan (Capas). El escenario queda fijo mientras pasan los tres textos;
   cada hoja entra con la línea de tiempo de su texto y la anterior cede sitio. Sin soporte o con movimiento reducido:
   composición final (los transform en línea son el estado final). */
.q-escenario{position:relative;z-index:3;flex:1 1 480px;min-width:0;background:#F4EFE6;padding:12px 0;display:flex;justify-content:center}
@keyframes q-entra{from{transform:translateY(180%)}to{transform:none}}
@keyframes q-cede1{from{transform:none}to{transform:translate(-8%,-4%)}}
@keyframes q-cede2{from{transform:none}to{transform:translate(-6%,-20%)}}
@media (prefers-reduced-motion:no-preference){
  .q-escenario{position:sticky;top:clamp(0px,calc((100vw - 900px) * 1000),calc(56px + 3svh))}
  [data-bloque]{min-height:64svh}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    [data-escena]{timeline-scope:--c2,--c3,--c4,--c5,--c6,--c7,--n1,--n2,--n3}
    [data-bloque="1"]{view-timeline-name:--n1}
    [data-bloque="2"]{view-timeline-name:--n2}
    [data-bloque="3"]{view-timeline-name:--n3}
    .q-e1,.q-e2,.q-e3,.q-c1,.q-c2{animation-timing-function:linear;animation-fill-mode:both;animation-range:entry 15% entry 85%}
    .q-e1{animation-name:q-entra;animation-timeline:--n1}
    .q-e2{animation-name:q-entra;animation-timeline:--n2}
    .q-e3{animation-name:q-entra;animation-timeline:--n3}
    .q-c1{animation-name:q-cede1;animation-timeline:--n2}
    .q-c2{animation-name:q-cede2;animation-timeline:--n3}
  }
}

/* Página 404: el segundo plano del símbolo no llega a su sitio. Pleno a pantalla completa, como la portada. */
html:has(body.e404),body.e404{background:#13324B}
.e404 .pagina{background:#13324B;color:#F4EFE6}
.e404-main{min-height:100svh;display:flex;flex-direction:column;max-width:1440px;margin:0 auto;padding:0 clamp(20px,5.5vw,80px)}
.e404-cab{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(14px,2.6svh,30px) 0}
.e404-cab a{display:flex;align-items:center;min-height:44px;color:#F4EFE6}
.e404-cab img{display:block;height:22px;width:auto}
.e404-cont{font-size:18px;font-weight:500}
.e404-cuerpo{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(28px,4svh,48px) clamp(40px,4.4vw,64px);padding-bottom:clamp(24px,6svh,72px)}
.e404-texto{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.e404-eti{margin:0;font-size:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#9AA3A8}
.e404 h1{margin:clamp(12px,2.5svh,24px) 0 0;max-width:14ch;font-size:clamp(40px,min(6.6vw,11svh),96px);line-height:.94;font-weight:500;letter-spacing:-0.02em;text-wrap:balance;color:#F4EFE6}
.e404-p{margin:clamp(18px,3svh,28px) 0 0;max-width:28em;font-size:clamp(18px,min(1.6vw,2.6svh),23px);line-height:1.45;text-wrap:pretty}
.e404-btn{margin-top:clamp(20px,4svh,36px);display:inline-flex;align-items:center;min-height:56px;padding:0 32px;background:#F4EFE6;color:#13324B;font-size:18px;font-weight:500;text-decoration:none}
.e404-btn:hover{background:#9AA3A8}
.e404-enl{list-style:none;margin:clamp(20px,4svh,36px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 28px;font-size:18px}
.e404-enl a{display:inline-flex;align-items:center;min-height:44px;color:#F4EFE6}
.e404 a:focus-visible{outline:3px solid #F4EFE6;outline-offset:4px}
.e404-fig{margin:0;flex:0 1 auto;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,clamp(260px,min(38vw,58svh),560px))}
.e404-dib{position:relative;width:100%;aspect-ratio:1}
.e404-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.e404-fig figcaption{font-size:14px;line-height:1.35;color:#9AA3A8;text-align:center}