/* === Fuentes auto-alojadas (GDPR: 0 llamadas a Google/CDN). Origen: Fontsource. === */
/* Fraunces (display) — variable opsz+wght · @fontsource-variable/fraunces 5.2.9 */
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;src:url('/fonts/fraunces-latin-opsz-normal.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:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;src:url('/fonts/fraunces-latin-ext-opsz-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* Atkinson Hyperlegible (cuerpo) — 400/700 · @fontsource/atkinson-hyperlegible 5.2.8 */
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/atkinson-hyperlegible-latin-400-normal.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:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/atkinson-hyperlegible-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:700;src:url('/fonts/atkinson-hyperlegible-latin-700-normal.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:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:700;src:url('/fonts/atkinson-hyperlegible-latin-ext-700-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* OpenDyslexic (toggle accesibilidad, se descarga solo al activarlo) — 400/700 · @fontsource/opendyslexic 5.2.5 */
@font-face{font-family:'OpenDyslexic';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/opendyslexic-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'OpenDyslexic';font-style:normal;font-display:swap;font-weight:700;src:url('/fonts/opendyslexic-latin-700-normal.woff2') format('woff2');}
/* Honeypot: fuera de pantalla, invisible para personas, visible para bots */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;}


:root{
  --page:#022052; --panel:#0A2168; --panel-2:#0B2150;
  --surface:#FFFFFF; --surface-2:#FBFCFE;
  --text:#E9EDF8; --muted:#AEB8D6; --heading:#FFFFFF;
  --ink:#222E3D; --ink-muted:#54616F;
  --navy:#001757; --navy-soft:#6076B8;
  --gold:#FCDE57; --green:#37AC83; --blue:#2A84CB; --redbrown:#A74033;
  --red:#C8102E; --red-hover:#A50D26;
  --border:#23356F; --border-light:#E2E8EF;
  --eyebrow:var(--gold); --accent-em:var(--gold);
  --radius:14px; --radius-sm:10px; --radius-lg:22px;
  --maxw:1240px;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Atkinson Hyperlegible',system-ui,-apple-system,sans-serif;
  --shadow-md:0 8px 20px rgba(0,0,0,.28);
  --shadow-lg:0 22px 50px rgba(0,0,0,.40);
  --dur:180ms;

  /* === CAPA DE MOVIMIENTO · curvas y tiempos ==========================
     Curvas propias, nunca `ease` ni `ease-out` a secas: el easing por
     defecto del navegador es la huella mas reconocible de una plantilla.
     Cada curva tiene un trabajo distinto y no se intercambian. */
  --sal-entrada:cubic-bezier(.16,1,.3,1);      /* algo que llega y se asienta */
  --sal-corte:cubic-bezier(.85,0,.15,1);       /* corte seco: arranca y para fuerte */
  --sal-rebote:cubic-bezier(.34,1.56,.64,1);   /* se pasa de largo y vuelve */
  --sal-ambiente:cubic-bezier(.37,0,.63,1);    /* respiracion continua, sin picos */

  --t-rapido:200ms;    /* microinteraccion: responde a un dedo */
  --t-medio:480ms;     /* un elemento entrando */
  --t-lento:900ms;     /* una escena entera */

  /* Color del acto vigente. Cada seccion lo redefine y los acentos lo
     heredan, en vez de tener su color fijo: es «cada mente, un color»
     convertido en sistema. Valor de partida = el dorado de marca. */
  --acto-color:var(--gold);
}
body.dys{ --font-body:'OpenDyslexic',sans-serif; }

*{box-sizing:border-box;}
/* El fondo marino vive en <html>, no en <body>: la capa de tinte del color
   vivo va en z-index:-1 y, si el fondo estuviera en body, quedaria tapada. */
html{scroll-behavior:smooth; background:var(--page);}
body{margin:0; background:transparent; color:var(--text); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0;}
p{margin:0;}
a{color:var(--gold); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;}

/* Top bar */
.topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--page) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border);}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; min-height:104px; gap:16px;}
.brand{display:flex; align-items:center; gap:16px; font-family:var(--font-display); font-weight:700; font-size:23px; color:var(--gold);}
.brand:hover{text-decoration:none;}
/* LA MARCA ES UN DISCO. El aro dorado venia dentro del bitmap; se recorto
   (queda fuera del circulo inscrito, asi que border-radius:50% lo elimina) y
   se vuelve a dibujar aqui en CSS con --acto-actual: la variable que el JS
   actualiza segun el acto en el que estas. El aro pasa a ser el termometro
   del color de la pagina —dorado en el hero, azul en la prueba social, rojo
   en la llamada final— en vez de un adorno fijo. Sin JS vale el valor inicial
   de @property, que es el dorado de siempre: se degrada, no se rompe. */
.brand img{height:92px; width:92px; border-radius:50%; display:block;
  box-shadow:0 0 0 var(--aro,3px) var(--acto-actual);}
.a11y{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.toggle{font-family:var(--font-body); font-size:13.5px; color:var(--text); background:transparent; border:1px solid var(--border); border-radius:999px; padding:8px 14px; cursor:pointer; min-height:40px; transition:background var(--dur) ease-out, border-color var(--dur) ease-out;}
.toggle:hover{border-color:var(--gold);}
.toggle[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#5a4a05; font-weight:700;}

/* HERO con foto de fondo y formulario en capa transparente */
.hero{position:relative; display:flex; align-items:center; min-height:min(900px,96vh); padding:56px 0; overflow:hidden;}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; z-index:0;}
.hero-scrim{position:absolute; inset:0; z-index:1; background:
   linear-gradient(90deg, rgba(2,32,82,.96) 0%, rgba(2,32,82,.80) 40%, rgba(2,32,82,.34) 100%),
   linear-gradient(180deg, rgba(2,32,82,.30) 0%, rgba(2,32,82,0) 26%, rgba(2,32,82,.92) 100%);}
.hero-content{position:relative; z-index:2; width:100%;}
.hero-inner{max-width:560px;}
/* === COLOR VIVO · «cada mente, un color» hecho sistema =================
   Cada acto de la pagina se apropia de un color. Ese color NO se usa para
   texto pequeno (en marino, el rojo y el azul no llegan al contraste que
   exige la norma): se usa para tenir el ambiente y para los remates.
   El fondo base sigue siendo marino. La diferencia entre «vivo» y
   «discoteca» esta exactamente en esa contencion.
   ====================================================================== */
@property --acto-actual{syntax:'<color>'; inherits:true; initial-value:#FCDE57;}

.hero   {--acto-color:var(--gold);}
.trust  {--acto-color:var(--blue);}
.section{--acto-color:var(--green);}
.story  {--acto-color:var(--gold);}
.band   {--acto-color:var(--red);}
footer  {--acto-color:var(--navy-soft);}

/* La capa de tinte: fija, detras de todo el contenido y por encima del
   fondo de <html>. Interpola de un acto al siguiente gracias a @property,
   que hace animable una variable de color. Sin @property el cambio es
   instantaneo en vez de progresivo: se degrada, no se rompe. */
body{transition:--acto-actual 900ms var(--sal-ambiente);}
.nca-tinte{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(125% 85% at 50% 0%,  color-mix(in srgb, var(--acto-actual) 42%, transparent), transparent 72%),
    radial-gradient(100% 70% at 88% 100%, color-mix(in srgb, var(--acto-actual) 30%, transparent), transparent 76%),
    radial-gradient(80% 55% at 5% 60%,   color-mix(in srgb, var(--acto-actual) 18%, transparent), transparent 70%);}

/* Remates que heredan el color del acto. Solo elementos NO textuales o
   texto grande: los pequenos se quedan en dorado, que siempre contrasta. */
.section .head::after{content:""; display:block; width:56px; height:3px; margin:22px auto 0;
  background:var(--acto-color); border-radius:2px;
  transform-origin:center; scale:0 1;
  transition:scale var(--t-medio) var(--sal-entrada);}
.section .head.in::after{scale:1 1;}
.chip{transition:border-color var(--t-rapido) var(--sal-entrada), transform var(--t-rapido) var(--sal-entrada);}
a.chip:hover{border-color:var(--acto-color);}
footer nav a::after{background:var(--acto-color);}

/* === TIPOGRAFIA CINETICA ==============================================
   Fraunces es variable de verdad. Verificado midiendo el renderizado:
   `wght` (100-900) y `opsz` (9-144) SI existen en este archivo; `SOFT` y
   `WONK` NO. `opsz` no escala: cambia el contraste del trazo y el remate
   de las serifas, asi que las letras cambian de FORMA. Ese es el efecto.

   El evento tipografico es la ENTRADA, no el scroll continuo: animar los
   ejes en cada fotograma obliga a recalcular la disposicion del texto y
   da tirones en movil. Aqui se paga una sola vez, al aparecer.
   ====================================================================== */
.hero h1{
  font-size:clamp(38px,6.6vw,88px);
  margin:0; color:#fff;
  /* En vw, no en %: el % se calcula contra el contenedor de 560 px y el
     titular nunca llegaria a salirse. Asi invade la zona de la foto a
     proposito, que es lo que rompe la sensacion de plantilla. */
  max-width:none; width:min(760px,92vw);
  line-height:1.02; letter-spacing:-.025em;
  font-variation-settings:"opsz" 144,"wght" 600;
}
.hero h1 em{font-style:italic; color:var(--acto-color); font-variation-settings:"opsz" 144,"wght" 600;}

/* Cada palabra es una ventana; su interior sube desde detras del borde.
   El recorte va por palabra y no por linea para no romper el <em>, y el
   ritmo se agrupa por linea medida, asi que se lee como linea a linea.
   El relleno inferior evita que se corten las colas de la j, la g y la p.
   El relleno DERECHO evita que se corte la ultima letra de la cursiva: un
   glifo inclinado dibuja tinta mas alla de su ancho de avance —medido en
   «agobiarte»: 5,3 px de tinta fuera del avance, frente a -0,6 px en una
   palabra recta— y overflow:hidden se la comia. Ojo, esto NO lo detecta
   comparar scrollWidth con clientWidth: eso mide el desbordamiento de
   maquetacion, no el de tinta, y da 0 aunque la letra se este cortando.
   En ambos casos el margen negativo compensa al relleno, asi que la caja
   de recorte crece pero la palabra siguiente no se mueve ni un pixel. */
.pal{display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.14em; margin-bottom:-.14em;
  padding-right:.09em; margin-right:-.09em;}
/* El estado escondido vive SOLO dentro del keyframe (con fill-mode both):
   si estuviera aqui como estado base, al retirarse la clase de carga las
   palabras se quedarian invisibles para siempre. */
.pal > i{display:inline-block; font-style:inherit;}
body.nca-carga .pal > i,.pal.dentro > i{
  animation:nca-palabra var(--t-lento) var(--sal-entrada) both;
  animation-delay:calc(var(--nca-linea,0) * 90ms + var(--nca-retardo,0ms));
}
@keyframes nca-palabra{
  from{translate:0 110%; font-variation-settings:"opsz" 9,"wght" 200;}
  to  {translate:0 0;    font-variation-settings:"opsz" 144,"wght" 600;}
}
.hero .lead{font-size:clamp(17px,1.5vw,20px); color:#D6DCF0; margin-top:20px; max-width:42ch;}

/* Form card — vidrio translúcido sobre la foto */
.signup{background:rgba(2,32,82,.52); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-lg); margin-top:28px; max-width:480px; opacity:1;}
.signup .offer{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.gift{flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:rgba(252,222,87,.22); display:grid; place-items:center;}
.signup .offer b{font-family:var(--font-display); font-size:18px; display:block; color:#D6DCF0;}
.signup .offer span{font-size:14.5px; color:#D6DCF0;}
.field{display:block; margin-bottom:13px;}
.field label{display:block; font-size:14.5px; font-weight:700; margin-bottom:6px; color:#fff;}
.field input, .field select{width:100%; font-family:var(--font-body); font-size:17px; color:#fff; background:rgba(255,255,255,.10); border:1.5px solid rgba(255,255,255,.28); border-radius:var(--radius); padding:14px 16px; min-height:52px; transition:border-color var(--dur) ease-out;}
.field input:hover, .field select:hover{border-color:rgba(255,255,255,.5);}
.field input::placeholder{color:rgba(255,255,255,.55);}
.field select option{color:#222E3D;}
.checks{display:grid; gap:10px; margin:8px 0 16px;}
.check{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.92); cursor:pointer;}
.check input{flex:0 0 auto; width:22px; height:22px; margin-top:1px; accent-color:var(--gold); cursor:pointer;}
.check a{color:var(--gold); font-weight:700;}
.cta{width:100%; font-family:var(--font-body); font-weight:700; font-size:17.5px; color:#fff; background:var(--red); border:none; border-radius:var(--radius); padding:15px 20px; min-height:54px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:background var(--dur) ease-out, transform var(--dur) ease-out; box-shadow:0 8px 22px rgba(200,16,46,.40);}
.cta:hover{background:var(--red-hover);}
.cta:active{transform:translateY(1px);}
.cta[disabled]{opacity:.85; cursor:default;}
.spinner{width:18px; height:18px; border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:none;}
.is-loading .spinner{display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}
.formnote{font-size:13px; color:rgba(255,255,255,.72); margin-top:13px; display:flex; gap:7px; align-items:flex-start;}
.msg{font-size:14.5px; border-radius:var(--radius-sm); padding:11px 14px; margin-bottom:14px; background:rgba(252,222,87,.18); border:1px solid rgba(252,222,87,.5); color:#ffe9a8; display:none;}
.msg.show{display:block;}
.firstlayer{margin-top:16px; font-size:12.5px; color:rgba(255,255,255,.72); line-height:1.5;}
.firstlayer details{border-top:1px dashed rgba(255,255,255,.22); padding-top:12px;}
.firstlayer summary{cursor:pointer; font-weight:700; color:#fff; list-style:none;}
.firstlayer summary::-webkit-details-marker{display:none;}
.firstlayer summary::before{content:"ⓘ "; color:var(--gold);}
.firstlayer dl{margin:10px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px;}
.firstlayer dt{font-weight:700; color:#fff;}
.firstlayer dd{margin:0;}
.pending{display:block; margin-top:12px; font-size:12px; color:#ffe9a8; background:rgba(252,222,87,.14); border:1px dashed rgba(252,222,87,.45); border-radius:8px; padding:10px 12px; line-height:1.55;}
.pending a{color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:2px;}
.pending a:hover{color:var(--gold);}

/* Trust */
.trust{border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.trust .wrap{padding:30px 24px;}
.trust .lbl{text-align:center; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:18px;}
.trust .lbl + .chips{margin-bottom:26px;}
.chips{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
.chip{display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border-light); border-radius:999px; padding:10px 18px; font-size:14.5px; font-weight:700; color:var(--ink);}
.chip svg{flex:0 0 auto;}
/* Texto solo para lectores de pantalla (avisa de que el enlace abre pestaña). */
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
/* Distintivos que SON enlaces: mismo aspecto, pero se levantan y se doran al
   pasar por encima para que se note que llevan a algún sitio. Los que no son
   enlaces siguen siendo <span> y no reaccionan. */
a.chip{text-decoration:none; transition:transform var(--dur) ease-out, border-color var(--dur) ease-out, box-shadow var(--dur) ease-out;}
a.chip:hover{text-decoration:none; transform:translateY(-2px); border-color:var(--gold); box-shadow:var(--shadow-md);}
.chip-logos{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;}
.chip-logo{height:22px; width:auto; max-width:88px; object-fit:contain; flex:0 0 auto; display:block;}
.chip-logo.w-tiktok{max-width:20px;}
.chip-logo.w-instagram{max-width:22px;}
.chip-logo.w-flag{max-width:32px;}
.chip-logo.w-globe{max-width:22px;}
.chip-logo.w-aster{max-width:76px;}
.chip-logo.w-ministry{max-width:104px; height:20px;}
.chip-logo.w-udia{max-width:22px; height:22px;}

/* Sections */
.section{padding:76px 24px;}
.section .head{max-width:620px; margin:0 auto 44px; text-align:center;}
.eyebrow{display:inline-block; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--eyebrow); margin-bottom:16px;}
.section h2{font-size:clamp(27px,3.2vw,38px); color:var(--heading);}
.section .head p{color:var(--muted); font-size:18px; margin-top:14px;}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.card{background:var(--surface); color:var(--ink); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:30px 26px; transition:transform var(--dur) ease-out, box-shadow var(--dur) ease-out;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.card .ico{width:50px; height:50px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px;}
.card h3{font-size:21px; margin-bottom:9px; color:var(--ink);}
.card p{color:var(--ink-muted); font-size:16px;}

/* Story */
.story{position:relative; background:var(--panel-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden;}
.story-bg{position:absolute; inset:0; z-index:0; width:100%; height:100%;}
.story-bg img{width:100%; height:100%; object-fit:cover; object-position:center 32%; display:block;}
.story::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:
  linear-gradient(90deg, rgba(11,33,80,.08) 0%, rgba(11,33,80,.55) 42%, rgba(11,33,80,.94) 68%, rgba(11,33,80,.98) 100%),
  linear-gradient(180deg, rgba(11,33,80,.55) 0%, transparent 28%, transparent 72%, rgba(11,33,80,.65) 100%);}
.story .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.15fr; gap:54px; align-items:center; padding:76px 24px;}
.story .wrap > .reveal{grid-column:2;}
.story h2{font-size:clamp(26px,3vw,36px); margin-bottom:20px; color:var(--heading);}
.story p{color:var(--muted); font-size:18px; line-height:1.7;}
.story p + p{margin-top:16px;}
.story .sign{margin-top:22px; font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--gold);}

/* Secondary CTA */
.band{padding:74px 24px;}
.band .inner{background:var(--panel); border:1.5px solid color-mix(in srgb,var(--gold) 55%, transparent); border-radius:var(--radius-lg); padding:54px 40px; text-align:center; color:#fff; position:relative; overflow:hidden;}
.band h2{color:#fff; font-size:clamp(26px,3vw,36px);}
.band p{color:rgba(233,237,248,.92); font-size:18px; margin:14px auto 26px; max-width:46ch;}
.band .btn{display:inline-flex; align-items:center; gap:10px; background:var(--red); color:#fff; font-family:var(--font-body); font-weight:700; font-size:17.5px; border:none; border-radius:var(--radius); padding:15px 30px; min-height:54px; cursor:pointer; transition:background var(--dur) ease-out, transform var(--dur) ease-out;}
.band .btn:hover{background:var(--red-hover); transform:translateY(-2px);}
/* TEXTURA DE LA TARJETA DE CIERRE. Antes habia dos circulos grises flotando:
   relleno generico, justo lo que se quiso evitar en el resto de la pagina. En
   su lugar va un fragmento AMPLIADO del mosaico del propio logo —el mismo
   archivo que ya carga la cabecera, asi que no anade ni un byte ni una
   peticion—, encuadrado para que se lea como textura y no como un logo
   pegado. Va detras del contenido y por debajo del umbral de legibilidad. */
.band .inner::before{content:""; position:absolute; inset:0; z-index:0;
  background-image:url(/mosaico-nca.webp), url(/mosaico-nca.webp);
  background-size:520px auto, 330px auto;
  background-position:right -60px top -70px, left -50px bottom -60px;
  background-repeat:no-repeat, no-repeat;
  opacity:.17;
  -webkit-mask-image:radial-gradient(62% 88% at 96% 2%, #000 0%, transparent 72%),
                     radial-gradient(46% 70% at 2% 100%, #000 0%, transparent 74%);
          mask-image:radial-gradient(62% 88% at 96% 2%, #000 0%, transparent 72%),
                     radial-gradient(46% 70% at 2% 100%, #000 0%, transparent 74%);
  pointer-events:none;}
.band .inner > *{position:relative; z-index:1;}

/* Footer */
footer{padding:50px 24px 40px; color:var(--muted); font-size:14.5px; border-top:1px solid var(--border);}
/* La columna de enlaces ocupa SOLO lo que necesita y se pega a la derecha, en
   vez de llevarse un tercio del ancho y dejar aire muerto a su lado. Antes era
   1.4fr / 1fr: en una pantalla de 1900 px eso dejaba un hueco enorme entre el
   lema y los enlaces, y el pie se veia deshabitado. No se anade contenido:
   solo se reparte el que ya hay. */
footer .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px 64px; align-items:start;}
footer .brand{display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:18px; font-family:var(--font-display); font-weight:700; color:var(--gold);}
footer .brand img{height:56px;width:56px;border-radius:50%; --aro:2.5px;}
footer .tag{max-width:38ch;}
/* Los enlaces en dos columnas: la lista vertical de cinco medía mas alto que
   la marca y el lema de al lado, y ese desnivel era la mitad del vacio. */
footer nav{display:grid; grid-template-columns:repeat(2,auto); gap:11px 34px; align-content:start;}
footer nav a{color:var(--text); font-size:14.5px;}
footer .legal{grid-column:1/-1; border-top:1px solid var(--border); margin-top:18px; padding-top:18px; font-size:12.5px; line-height:1.55; color:var(--muted);}
/* El año va integrado en la línea legal. (Antes tenía fondo blanco, borde
   negro y sombra: un resto de depuración que dibujaba una caja resaltada
   alrededor de "2026" en medio del texto legal.) */

.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease-out, transform .5s ease-out;}
.reveal.in{opacity:1; transform:none;}

@media (max-width:880px){
  .hero{min-height:auto; padding:36px 0 44px;}
  .hero-inner{max-width:100%;}
  /* En movil no hay zona de foto que invadir: el titular vuelve a caber
     dentro de la columna para que no lo recorte el overflow del hero. */
  .hero h1{width:100%;}
  .cards{grid-template-columns:1fr;}
  .story .wrap{grid-template-columns:1fr; gap:34px; padding:56px 24px;}
  .story .wrap > .reveal{grid-column:1;}
  .story::after{background:
    linear-gradient(180deg, rgba(11,33,80,.72) 0%, rgba(11,33,80,.45) 35%, rgba(11,33,80,.88) 100%),
    linear-gradient(0deg, rgba(11,33,80,.25), rgba(11,33,80,.25));}
  footer .wrap{grid-template-columns:1fr;}
  .section{padding:56px 24px;}
  .brand img{height:68px;width:68px; --aro:2.5px;}
  /* flex-wrap desde 880 px (no solo desde 560): entre 561 y ~620 px la marca y
     los dos botones tampoco caben en una linea. Aqui solo se PERMITE envolver;
     mientras quepan siguen en una sola fila. */
  .topbar .wrap{min-height:84px; flex-wrap:wrap; row-gap:10px;}
}
/* Movil estrecho (<=560px): la marca y los botones de accesibilidad no caben
   en una sola linea y desbordaban el ancho de la pagina (se veia scroll
   horizontal en pantallas de 375 px). Se reparten en dos filas.
   NOTA: este desbordamiento era PREVIO a la capa de movimiento; se corrige
   aqui porque afecta a la misma cabecera y al movil, que es casi todo el trafico. */
/* Al pulsar el logo (href="#top") el navegador colocaba el inicio de <main> en
   lo alto de la ventana; como la cabecera es pegajosa, se ponia encima y tapaba
   los primeros ~49 px del titular: parecia que "no subia del todo".
   Un scroll-margin-top holgado hace que el destino quede por encima del inicio
   del documento; el navegador no puede desplazarse por encima de 0, asi que
   lo recorta ahi y sube del todo. Vale para cualquier alto de cabecera, que
   cambia segun el ancho de pantalla (105 px, 85 px o dos filas en movil). */
#top{scroll-margin-top:200px;}

/* La cabecera es pegajosa y en movil ocupa dos filas, asi que al llevar el foco
   a un campo o a un mensaje de error el navegador lo dejaba justo debajo de
   ella, oculto. scroll-margin-top reserva ese alto al desplazarse. */
#msg,#nombre,#email,#c-consent,#c-age,#signup{scroll-margin-top:150px;}
@media (min-width:881px){#msg,#nombre,#email,#c-consent,#c-age,#signup{scroll-margin-top:120px;}}

@media (max-width:560px){
  .topbar .wrap{min-height:0; padding-top:12px; padding-bottom:12px;}
  .brand{font-size:18px; gap:10px;}
  .brand img{height:52px; width:52px; --aro:2px;}
  .a11y{width:100%; justify-content:flex-start;}
  .toggle{font-size:12.5px; padding:7px 11px; min-height:36px;}
}
/* ==========================================================================
   CAPA DE MOVIMIENTO NCA — "respirar, no llamar la atencion"
   --------------------------------------------------------------------------
   Todo se anima con translate / scale / opacity (compuestas en GPU: no
   provocan reflow ni repintado). Ningun ciclo continuo baja de 14 s, o sea
   ~0,07 Hz: dos ordenes de magnitud por debajo del umbral de 3 Hz de la
   WCAG 2.3.1. Los efectos por interaccion (hover) cumplen la 2.3.3.

   Dos interruptores independientes lo apagan ENTERO:
     1. @media (prefers-reduced-motion:reduce)  -> preferencia del sistema
     2. body.no-motion                          -> boton manual "Reducir
        movimiento" de la cabecera (recordado en localStorage)
   El JS ademas limpia los estilos en linea del paralaje al apagarse.

   Se usan las propiedades independientes `translate` y `scale` en vez de
   `transform` a proposito: asi la animacion CSS (scale) y el paralaje que
   escribe el JS (translate) conviven en el mismo elemento sin pisarse.
   ========================================================================== */

/* --- HERO · bucle ping-pong (el Ken Burns del video, sin archivo de video) --- */
.hero-bg{animation:nca-kenburns 34s ease-in-out infinite alternate; transform-origin:64% 42%; will-change:transform;}
/* El rango arranca en 1.06 (no en 1.0) a proposito: ese 6% extra es el margen
   que consume el paralaje topado a 20 px sin descubrir los bordes. Se mantiene
   lo mas bajo posible para no recortar de mas la foto de familia ni el logo. */
@keyframes nca-kenburns{from{scale:1.06;} to{scale:1.12;}}

/* --- HERO · luz que respira (las "nubes pasando" del framework) --- */
.hero-scrim::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(62% 52% at 68% 36%, rgba(252,222,87,.17), transparent 70%);
  animation:nca-respira 16s ease-in-out infinite alternate;}
@keyframes nca-respira{from{opacity:.30;} to{opacity:.72;}}

/* --- HERO · entrada en cascada (titular -> texto -> formulario) ---
   La opacidad inicial vive SOLO dentro del keyframe: si las animaciones se
   desactivan, los elementos se pintan en su estado natural y nunca quedan
   invisibles por accidente. */
@keyframes nca-entra{from{opacity:0; translate:0 14px;} to{opacity:1; translate:0 0;}}
/* Va condicionada a body.nca-carga, que el JS pone al arrancar y retira cuando
   la cascada termina. Sin esa clase la animacion no existe, asi que apagar y
   volver a encender el movimiento NO la relanza (el formulario no vuelve a
   desvanecerse cuando alguien ya esta escribiendo en el). Si no hay JS, la
   clase nunca se pone y todo se pinta en su estado natural. */
body.nca-carga .hero h1{animation:nca-entra .7s cubic-bezier(.22,.61,.36,1) .04s both;}
body.nca-carga .hero .lead{animation:nca-entra .7s cubic-bezier(.22,.61,.36,1) .12s both;}
body.nca-carga .hero .signup{animation:nca-entra .7s cubic-bezier(.22,.61,.36,1) .20s both;}

/* --- LA MARCA ENTRA RODANDO, UNA VEZ ---
   Un giro que TERMINA es un gesto; un giro continuo es un spinner. Y en esta
   misma pagina girar ya significa "enviando" (.spinner del formulario), asi
   que el logo da una vuelta y se planta: no compite con ese significado.
   La curva --sal-entrada gasta el 80% del giro en el primer cuarto del tiempo
   y llega frenando, que es como se para algo que rueda. Solo en la cabecera:
   el logo del pie no se ve al cargar. Al quitarse .nca-carga (2,2 s) la
   animacion desaparece y rotate vuelve a su valor normal, sin salto. */
@keyframes nca-logo-rueda{from{rotate:-360deg;} to{rotate:0deg;}}
body.nca-carga .topbar .brand img{animation:nca-logo-rueda 1100ms var(--sal-entrada) both;}

/* --- CABECERA · se asienta al bajar (solo sombra y escala: cero reflow) --- */
.topbar{transition:box-shadow .35s ease-out, border-color .35s ease-out;}
.topbar.is-scrolled{box-shadow:0 8px 26px rgba(0,0,0,.30); border-bottom-color:color-mix(in srgb,var(--gold) 34%, var(--border));}
.topbar .brand img{transition:scale .35s ease-out;}
.topbar.is-scrolled .brand img{scale:.88;}

/* --- REVELADOS · escalonado y direccion ---
   .reveal ya existia; aqui solo se le anade ritmo (--nca-i) y, en escritorio,
   una direccion coherente con la columna en la que vive cada bloque. */
.reveal{transition-delay:calc(var(--nca-i,0) * 90ms);}
.cards .card:nth-child(2){--nca-i:1;}
.cards .card:nth-child(3){--nca-i:2;}
.trust .chip{--nca-i:0;}
.trust .chip:nth-child(2){--nca-i:1;}
.trust .chip:nth-child(3){--nca-i:2;}
.trust .chip:nth-child(4){--nca-i:3;}
@media (min-width:881px){
  .story .wrap > .reveal{transform:translateX(30px);}
  .story .wrap > .reveal.in{transform:none;}
}

/* --- HISTORIA · margen para su paralaje (misma razon que el hero) --- */
.story-bg img{scale:1.10;}

/* --- TARJETAS · el icono responde al hover --- */
.card .ico{transition:scale .28s ease-out, rotate .28s ease-out;}
.card:hover .ico{scale:1.09; rotate:-5deg;}

/* --- CTA SECUNDARIO ---
   Los circulos flotantes y sus dos animaciones se retiraron: eran decoracion
   sin significado. La textura de mosaico que los sustituye va QUIETA a
   proposito. Este bloque ya tiene movimiento propio —la cuchilla al entrar y
   el iman del boton—; anadirle una respiracion de fondo seria volver al
   relleno que se quito de toda la pagina en la fase 0. */

/* --- PIE · entrada escalonada y enlaces con subrayado que se dibuja ---
   El pie es lo ultimo que se ve: entra en cascada de arriba abajo (marca,
   lema, enlaces uno a uno, linea legal) con un ritmo mas corto que el resto
   (70 ms) para que no se haga lento. Los enlaces cambian el subrayado del
   navegador por uno que se dibuja de izquierda a derecha, que es lo unico
   "caro" que se permite aqui. */
footer .reveal{transition-delay:calc(var(--nca-i,0) * 70ms);}
footer nav a{position:relative; display:inline-block; width:-moz-fit-content; width:fit-content;
  transition:color var(--dur) ease-out, translate var(--dur) ease-out;}
footer nav a::after{content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1.5px;
  background:var(--gold); scale:0 1; transform-origin:left center;
  transition:scale .28s cubic-bezier(.22,.61,.36,1);}
footer nav a:hover{color:var(--gold); text-decoration:none; translate:3px 0;}
footer nav a:hover::after,footer nav a:focus-visible::after{scale:1 1;}
/* En un disco, girar 3 grados no se ve: lo que se lee es el aro. Al pasar por
   encima engorda y toma el color del acto, que es el mismo lenguaje del resto. */
footer .brand img{transition:scale .3s ease-out, box-shadow .3s ease-out;}
footer .brand:hover img{scale:1.06; box-shadow:0 0 0 5px var(--acto-actual);}

/* === CINE POR SCROLL ==================================================
   Tres recursos, todos nativos y baratos. No se usa anclaje por JS: es lo
   que hace que estas paginas vayan a tirones en un Android normal.

   NOTA de diseno: el hero NO se queda pegajoso. Un hero clavado exige que
   lo que pasa por encima sea opaco, y eso taparia la capa de tinte del
   color vivo (que va en z-index:-1). Se pina la historia, que no entra en
   conflicto y ademas es un recurso menos visto.
   ====================================================================== */

/* 1 · ACTO PEGAJOSO: en la historia, el texto se clava y la foto sigue
   corriendo por detras. Solo en escritorio: en movil la seccion pasa a una
   columna y clavar el texto dejaria la foto huerfana arriba. */
@media (min-width:881px){
  .story .wrap{align-items:start;}
  .story .wrap > .reveal{position:sticky; top:clamp(120px,18vh,190px);}
}

/* 2 · CORTE SECO: el bloque entra por una cuchilla horizontal en vez de
   desvanecerse. Se apoya en el observador que ya existe (.reveal -> .in) y
   anula su desvanecido, que ablandaria el corte.

   OJO, y es una trampa fina: el recorte NO puede ir en el mismo elemento
   que observa el IntersectionObserver. clip-path reduce su area de
   interseccion a cero, el observador nunca lo ve entrar, nunca anade .in y
   el recorte no se abre jamas: el bloque se queda invisible para siempre.
   Por eso se observa la SECCION (que nunca se recorta) y se recorta el
   bloque interior. */
   SEGUNDA trampa de la misma familia, y esta costo encontrarla: el corte se
   hacia con una TRANSICION de clip-path. Una transicion solo avanza si el
   navegador pinta el elemento, y aqui el elemento esta recortado al 100%, o
   sea, sin un solo pixel visible. Medido: la transicion quedaba en
   playState "running" con currentTime clavado en 0 ms indefinidamente, y la
   tarjeta no aparecia nunca —ni en su sitio ni fuera de el: el "limbo" que
   se veia—. En un elemento aislado y visible la misma transicion interpola
   perfectamente (87,8% -> 75,6% -> ... -> 2,4%), asi que no es cosa del
   navegador: es depender de que se pinte algo invisible.

   Ahora son dos capas y ninguna depende de eso:
   1. una ANIMACION con fill-mode "both" en vez de una transicion: al
      terminar deja fijado el estado final aunque nadie la haya visto correr;
   2. una red de seguridad en el JS que, un segundo despues de entrar, quita
      el recorte del todo. Si algun dia la capa 1 vuelve a fallar, el
      contenido se ve igualmente. Es contenido, no adorno: no puede
      depender de que una animacion salga bien. */
.reveal.nca-corte{opacity:1; transform:none; transition:none;}
.reveal.nca-corte > .inner{clip-path:inset(0 0 100% 0);}
.reveal.nca-corte.in > .inner{animation:nca-cuchilla 820ms var(--sal-corte) both;}
.reveal.nca-corte.nca-abierto > .inner{clip-path:none; animation:none;}
@keyframes nca-cuchilla{from{clip-path:inset(0 0 100% 0);} to{clip-path:inset(0 0 0 0);}}

/* === MICRO-OFICIO =====================================================
   Lo que de verdad separa lo caro de lo aparente. Nada de esto se ve por
   separado: se nota en conjunto.
   ====================================================================== */

/* Cifras tabulares en los contadores: sin esto, cada digito tiene un ancho
   distinto y el texto BAILA mientras cuenta. Es el detalle que delata a un
   contador mal hecho. */
.nca-cifra{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}

/* Coreografia: dentro de una seccion los elementos entran RELACIONADOS,
   no cada uno por su cuenta. Las tarjetas comparten un mismo gesto con
   ritmo corto; el titulo de su seccion abre siempre por delante. */
.cards .card{transition:opacity var(--t-medio) var(--sal-entrada),
  transform var(--t-medio) var(--sal-entrada),
  box-shadow var(--t-rapido) var(--sal-entrada);}
.section .head.reveal{transition-delay:0ms;}
.cards .card:nth-child(1){--nca-i:1;}

/* Estados de interaccion a la altura del resto: hoy eran los de por defecto */
.cta{transition:background var(--t-rapido) var(--sal-entrada),
  transform var(--t-rapido) var(--sal-rebote), box-shadow var(--t-rapido) var(--sal-entrada);}
.cta:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(200,16,46,.34);}
.band .btn{transition:background var(--t-rapido) var(--sal-entrada),
  transform var(--t-rapido) var(--sal-rebote), box-shadow var(--t-rapido) var(--sal-entrada);}
.band .btn:hover{box-shadow:0 12px 30px rgba(200,16,46,.36);}
/* El CTA magnetico escribe --iman-x/--iman-y desde el JS (solo con raton) */
.band .btn{translate:var(--iman-x,0) var(--iman-y,0);}

/* === COLOR VIVO · tenido de los fondos opacos ==========================
   Va AQUI, al final, y no junto al resto del bloque de color: estas reglas
   sobrescriben las definiciones originales de .story, .band y .trust, y con
   la misma especificidad gana la ultima que aparece en la hoja. Puestas
   antes, la original ganaba y el tenido no se aplicaba.
   La capa de tinte fija va detras de TODO, asi que una seccion con fondo
   opaco la tapa entera. Por eso esas secciones se tinen en su propio fondo.
   ====================================================================== */
.story{background:color-mix(in srgb, var(--acto-color) 12%, var(--panel-2));}
/* La tarjeta de cierre NO se tine. Mezclar el rojo de su acto con el azul del
   panel daba un morado que no esta en la paleta —un subproducto, no una
   decision— y encima calentaba el fondo, restandole fuerza al rojo del boton,
   que es lo unico que tiene que destacar aqui. Va en marino profundo. Como es
   casi el mismo tono que el fondo de la pagina, lo que la separa es el borde
   dorado y la sombra; el ambiente rojizo del acto (que sigue vivo) hace el
   resto. El acto NO se toca: el aro del logo y el tinte del fondo siguen. */
.band .inner{background:var(--navy);
  box-shadow:0 24px 60px rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.25);}
.trust{background:color-mix(in srgb, var(--acto-color) 7%, transparent);}

/* --- APAGADO MANUAL (boton "Reducir movimiento") ---
   OJO: el selector universal `*` NO alcanza a los pseudoelementos, y una
   animacion en marcha gana a cualquier declaracion normal del autor. Por eso
   hay que nombrar ::before y ::after explicitamente: sin ellos, el resplandor
   del hero (.hero-scrim::after) seguia latiendo con el movimiento reducido
   activado. Es un fallo que ya se colo una vez: no quitar estos selectores.
   El spinner del formulario se exceptua a proposito: no es decorativo, es el
   indicador de que el alta se esta enviando, y debe girar siempre. */
body.no-motion *,body.no-motion *::before,body.no-motion *::after{animation:none !important;}
body.no-motion .spinner{animation:spin .7s linear infinite !important;}
body.no-motion .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
body.no-motion .story .wrap > .reveal,body.no-motion .story .wrap > .reveal.in{transform:none !important;}
body.no-motion .hero-bg,body.no-motion .story-bg img{translate:none !important; scale:none !important;}
body.no-motion .hero-scrim::after{opacity:.45 !important;}
body.no-motion .topbar .brand img{scale:none !important;}
body.no-motion .card:hover,body.no-motion .band .btn:hover,body.no-motion .cta:active{transform:none;}
body.no-motion .card:hover .ico{scale:none; rotate:none;}
/* Pie: el subrayado y el color SIGUEN apareciendo al pasar por encima (son la
   pista de que es un enlace), pero sin transicion y sin desplazamiento. */
/* El color de cada acto SE MANTIENE (es identidad de la seccion, no
   movimiento), pero el fundido de 900 ms entre uno y otro se apaga: el
   cambio pasa a ser instantaneo. */
body.no-motion{transition:none !important;}
/* Cine por scroll: sin corte de cuchilla y sin acto pegajoso. */
body.no-motion .reveal.nca-corte > .inner{clip-path:none !important; transition:none !important;}
body.no-motion .story .wrap > .reveal{position:static !important;}
body.no-motion a.chip{transition:none !important;}
body.no-motion a.chip:hover{transform:none;}
body.no-motion footer nav a,body.no-motion footer nav a::after,body.no-motion footer .brand img{transition:none !important;}
body.no-motion footer nav a:hover{translate:none;}
/* El aro SIGUE engordando al pasar por encima (es la pista de que la marca es
   un enlace), pero sin transicion y sin crecer. Mismo criterio que el
   subrayado de los enlaces del pie. */
body.no-motion footer .brand:hover img{scale:none;}

/* --- APAGADO POR PREFERENCIA DEL SISTEMA (solo cuando NO hay JS) ---
   Todo va condicionado a html:not(.nca-js). Con JS activo manda una unica
   fuente de verdad: la clase body.no-motion de arriba, que el JS pone leyendo
   esta misma preferencia. Asi el boton "Reducir movimiento" puede de verdad
   ENCENDER el movimiento a quien tiene la preferencia del sistema activada y
   aun asi quiere verlo; si el @media siguiera aplicandose, el boton anunciaria
   un estado que no ocurre. La clase .nca-js se pone justo antes de aplicar el
   estado, para que no exista ni un fotograma sin ninguna de las dos redes.
   El desplazamiento suave de la pagina NO se controla desde aqui: el CTA llama
   a scrollIntoView({behavior:'smooth'}), que por especificacion ignora la
   propiedad CSS. Se decide en el JS. */
@media (prefers-reduced-motion:reduce){
  html:not(.nca-js) *,html:not(.nca-js) *::before,html:not(.nca-js) *::after{animation:none !important;}
  html:not(.nca-js) .spinner{animation:spin .7s linear infinite !important;}
  html:not(.nca-js){scroll-behavior:auto;}
  html:not(.nca-js) .reveal{opacity:1; transform:none; transition:none;}
  html:not(.nca-js) .story .wrap > .reveal,html:not(.nca-js) .story .wrap > .reveal.in{transform:none !important;}
  html:not(.nca-js) .card:hover,html:not(.nca-js) .band .btn:hover,html:not(.nca-js) .cta:active{transform:none;}
  html:not(.nca-js) .hero-scrim::after{opacity:.45;}
  html:not(.nca-js) .hero-bg,html:not(.nca-js) .story-bg img{translate:none !important; scale:none !important;}
  html:not(.nca-js) .topbar,html:not(.nca-js) .topbar .brand img,html:not(.nca-js) .card .ico{transition:none;}
  html:not(.nca-js) .topbar.is-scrolled .brand img{scale:none;}
  html:not(.nca-js) .card:hover .ico{scale:none; rotate:none;}
  html:not(.nca-js) body{transition:none !important;}
  html:not(.nca-js) .reveal.nca-corte > .inner{clip-path:none !important; transition:none !important;}
  html:not(.nca-js) .story .wrap > .reveal{position:static !important;}
  html:not(.nca-js) a.chip{transition:none !important;}
  html:not(.nca-js) a.chip:hover{transform:none;}
  html:not(.nca-js) footer nav a,html:not(.nca-js) footer nav a::after,html:not(.nca-js) footer .brand img{transition:none !important;}
  html:not(.nca-js) footer nav a:hover{translate:none;}
  html:not(.nca-js) footer .brand:hover img{scale:none;}
}

/* --- Reglas extraidas de atributos style="" en index.html (CSP sin
   unsafe-inline: style-src-attr hereda de style-src y bloquea el inline).
   Van al final del fichero a proposito: asi ganan a las @media anteriores,
   igual que hacia el inline por especificidad. --- */
.formnote-ico{margin-top:2px; flex:0 0 auto;}
.ico--blue{background:color-mix(in srgb,var(--blue) 18%, #fff);}
.ico--green{background:color-mix(in srgb,var(--green) 22%, #fff);}
.ico--gold{background:color-mix(in srgb,var(--gold) 34%, #fff);}
.story .story-title{margin-top:16px;}

/* Descargo E9 en el pie (2026-09-12): misma tipografia que .legal, sin la linea superior. */
footer .legal--descargo{border-top:1px solid var(--border); margin-top:18px; padding-top:18px;}
footer .legal--descargo + .legal{border-top:0; margin-top:0; padding-top:6px;}

/* --- /guia (2026-09-13): clon de la portada. Tres reglas propias, que
   index.html no usa, asi que la portada no cambia ni un pixel. OJO: la guia
   entregada (guia-ley-dependencia-2026.html) TAMBIEN carga index.css y usa
   .revisado dentro de .aviso-vigor, asi que cada regla de aqui va acotada a una
   clase que solo exista en guia.html; nunca a un elemento generico ni a `main`.
   - .hero .estado-ley: kicker del hero pintado desde estado-ley.json (bloque
     estado-ley:hero). Va en caja y sin mayusculas: es una frase larga con la
     fase de la ley y la fecha de revision, no una etiqueta de seccion.
   - .revisado-wrap .revisado: nota «Revisado el» antes del pie (bloque
     estado-ley:revisado), dentro del envoltorio propio de guia.html.
   - .legal--flush: aviso juridico de la guia, primera linea legal del pie; el
     descargo E9 que le sigue pierde su linea superior para no duplicarla. --- */
.hero .estado-ley{display:inline-block; text-transform:none; letter-spacing:.01em; font-size:14.5px; font-weight:700; line-height:1.45; color:#ffe9a8; background:rgba(252,222,87,.12); border:1px solid rgba(252,222,87,.45); border-radius:14px; padding:9px 14px; margin-bottom:18px; max-width:60ch; text-wrap:balance;}
.revisado-wrap .revisado{margin:0 0 48px; font-size:13.5px; line-height:1.5; color:var(--muted);}
footer .legal--flush + .legal--descargo{border-top:0; margin-top:0; padding-top:6px;}