/* ==========================================================================
   RD Inteligente — sistema visual
   Bandas alternas: navy profundo para lo narrativo, tiza para lo informativo.
   ========================================================================== */

:root{
  /* Paleta */
  --noche:      #001730;
  --noche-2:    #002B57;
  --noche-3:    #003D7A;
  --azul:       #1E6BFF;
  --azul-vivo:  #4DA9E8;
  --azul-suave: #8FC4F0;
  --tiza:       #EDF2F7;
  --tiza-2:     #F5F8FC;
  --tiza-dim:   #93AEC6;
  --bandera:    #E01F26;
  --verde:      #00B884;
  --oro:        #F5A524;
  --lila:       #C77DFF;
  --rosa:       #FF7AB6;

  /* Tokens de banda (por defecto: oscura) */
  --fondo:      var(--noche);
  --texto:      var(--tiza);
  --texto-dim:  var(--tiza-dim);
  --regla:      rgba(237,242,247,.16);
  --tarjeta:    rgba(255,255,255,.035);
  --tarjeta-2:  rgba(255,255,255,.07);
  --acento:     var(--azul-vivo);

  /* Tipografía */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, sans-serif;
  --mono:    'Space Mono', ui-monospace, monospace;

  --maxw: 1200px;
  --curva: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after{ box-sizing:border-box }
/* `clip` en vez de `hidden`: recorta lo que se salga de ancho sin crear un
   contenedor de scroll, así siguen funcionando el desplazamiento suave y los
   elementos pegajosos. Es una red por si algo se desborda, no un sustituto de
   arreglarlo: en móvil un desborde real ensancha el viewport y se lleva la
   barra fija con él. */
/* Barras de desplazamiento discretas: la nativa de Windows es un bloque gris
   que rompe el tono oscuro del sitio. El pulgar lleva borde transparente con
   `background-clip:padding-box` en vez de un borde de color, para que quede
   igual de bien sobre las bandas claras y sobre las oscuras. */
*{ scrollbar-width:thin; scrollbar-color:rgba(0,61,122,.8) transparent }
*::-webkit-scrollbar{ width:9px; height:9px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{
  background:rgba(0,61,122,.8); border-radius:99px;
  border:2px solid transparent; background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(30,107,255,.85); background-clip:padding-box }
*::-webkit-scrollbar-button{ display:none; width:0; height:0 }
*::-webkit-scrollbar-corner{ background:transparent }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip }
body{
  margin:0; background:var(--noche); color:var(--tiza);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.03; margin:0; letter-spacing:-.025em }

/* ---------- bandas ---------- */
.band{ background:var(--fondo); color:var(--texto); position:relative; display:flow-root }
.band-dark{
  --fondo:var(--noche); --texto:var(--tiza); --texto-dim:var(--tiza-dim);
  --regla:rgba(237,242,247,.16); --tarjeta:rgba(255,255,255,.04);
  --tarjeta-2:rgba(255,255,255,.08); --acento:var(--azul-vivo);
}
.band-light{
  --fondo:var(--tiza-2); --texto:#0A2540; --texto-dim:#5A748E;
  --regla:rgba(0,40,80,.12); --tarjeta:#FFFFFF;
  --tarjeta-2:#FFFFFF; --acento:var(--azul);
}
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,32px) }
/* La barra de navegación es fija: sin esto, saltar a #curso deja el titular
   escondido detrás de ella. El hero sí debe llegar al tope de la página. */
section[id], footer[id]{ scroll-margin-top:78px }
#inicio{ scroll-margin-top:0 }
section.band{ padding:clamp(64px,9vw,110px) 0 }

/* ---------- utilidades tipográficas ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acento); display:flex; align-items:center; gap:12px; margin:0 0 18px;
}
.eyebrow::after{ content:""; flex:0 1 120px; height:1px; background:var(--regla) }
.sec-head{ max-width:62ch; margin-bottom:clamp(32px,5vw,52px) }
.sec-head h2{ font-size:clamp(30px,4.8vw,54px) }
.sec-head p{ color:var(--texto-dim); margin:18px 0 0; font-size:clamp(16px,1.6vw,18.5px) }
.lede{ color:var(--texto-dim) }
.grad{
  background:linear-gradient(100deg,var(--azul) 10%,var(--azul-vivo) 60%,var(--azul-suave));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- botones ---------- */
.btn{
  --bg:var(--azul); --fg:#fff;
  font-family:var(--body); font-weight:600; font-size:15px; line-height:1;
  background:var(--bg); color:var(--fg); border:0; border-radius:999px;
  padding:15px 26px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .2s var(--curva), box-shadow .2s var(--curva), filter .2s ease;
  box-shadow:0 6px 24px -8px rgba(30,107,255,.7);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 32px -8px rgba(30,107,255,.85) }
.btn:active{ transform:translateY(0) }
.btn svg{ width:16px; height:16px; flex:none }
.btn-ghost{
  --bg:transparent; --fg:var(--texto);
  border:1px solid var(--regla); box-shadow:none;
}
.btn-ghost:hover{ background:var(--tarjeta-2); box-shadow:none }
.btn-rojo{ --bg:var(--bandera); box-shadow:0 6px 24px -8px rgba(224,31,38,.7) }
.btn-rojo:hover{ box-shadow:0 12px 32px -8px rgba(224,31,38,.85) }
.btn-lg{ font-size:16.5px; padding:18px 32px }
:where(a,button,select,input,summary):focus-visible{
  outline:2px solid var(--oro); outline-offset:3px; border-radius:6px;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(0,20,44,.82); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:rgba(237,242,247,.14);
}
.nav-in{
  max-width:var(--maxw); margin-inline:auto; padding:16px clamp(20px,5vw,32px);
  display:flex; align-items:center; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--tiza); flex:none }
.brand-mark{ width:auto; flex:none }
.brand-txt{ line-height:1.05 }
.brand-txt b{ font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.02em; display:block }
.brand-txt span{ font-family:var(--mono); font-size:8.5px; letter-spacing:.24em; color:var(--tiza-dim); text-transform:uppercase }

.nav-links{ margin-left:auto; display:flex; gap:6px; align-items:center; position:relative }
.nav-links a{
  color:var(--tiza-dim); text-decoration:none; font-size:13.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; padding:9px 13px; border-radius:8px;
  transition:color .2s ease;
}
.nav-links a:hover{ color:var(--tiza) }
.nav-links a.on{ color:var(--azul-vivo) }
.nav-ind{
  position:absolute; bottom:-2px; height:2px; background:var(--azul); border-radius:2px;
  transition:transform .35s var(--curva), width .35s var(--curva); opacity:0; pointer-events:none;
}
.nav-cta{ flex:none; margin-left:8px }
.nav-burger{
  display:none; margin-left:auto; background:none; border:1px solid var(--regla);
  border-radius:10px; padding:9px 11px; cursor:pointer;
}
.nav-burger span{ display:block; width:18px; height:2px; background:var(--tiza); margin:3px 0; transition:.25s var(--curva) }
.nav.abierto .nav-burger span:nth-child(1){ transform:translateY(5px) rotate(45deg) }
.nav.abierto .nav-burger span:nth-child(2){ opacity:0 }
.nav.abierto .nav-burger span:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }

@media (max-width:940px){
  .nav-burger{ display:block }
  .nav-links{
    position:fixed; inset:69px 0 auto 0; flex-direction:column; gap:0; align-items:stretch;
    background:rgba(0,18,40,.98); backdrop-filter:blur(20px); padding:12px 20px 24px;
    border-bottom:1px solid var(--regla);
    transform:translateY(-12px); opacity:0; visibility:hidden; transition:.28s var(--curva);
  }
  .nav.abierto .nav-links{ transform:none; opacity:1; visibility:visible }
  .nav-links a{ padding:14px 4px; font-size:15px; border-bottom:1px solid rgba(237,242,247,.08) }
  .nav-links a.on{ color:var(--azul-vivo); box-shadow:inset 3px 0 0 var(--azul); padding-left:12px }
  .nav-ind{ display:none }
  .nav-cta{ display:none }
}

/* En pantallas muy estrechas el rótulo se queda solo con el nombre: la marca
   mide 213 px y a 320 px apenas sobran veinte antes del botón del menú. */
@media (max-width:380px){
  .nav .brand-txt span{ display:none }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:clamp(620px, 100svh, 940px); display:flex; align-items:center;
  padding:120px 0 70px; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 78% 40%, rgba(30,107,255,.20), transparent 65%),
    radial-gradient(ellipse 90% 70% at 10% 0%, rgba(0,61,122,.55), transparent 60%),
    var(--noche);
}
#mapa-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:1; pointer-events:none;
}
.hero-in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:center; width:100% }
.hero-txt{ max-width:640px }
.hero h1{ font-size:clamp(38px,6.4vw,80px); text-transform:uppercase; letter-spacing:-.03em }
.hero h1 .grad{ display:inline-block }
.hero p.sub{ max-width:50ch; color:var(--tiza-dim); font-size:clamp(16.5px,1.8vw,19.5px); margin:26px 0 0 }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px }

.hero-kpis{
  display:grid; grid-template-columns:repeat(3,auto); gap:clamp(20px,4vw,48px);
  margin-top:clamp(38px,6vw,60px); padding-top:28px; border-top:1px solid rgba(237,242,247,.14);
  justify-content:start;
}
.kpi b{ font-family:var(--display); font-size:clamp(24px,3.4vw,38px); font-weight:800; display:block; letter-spacing:-.03em; color:#fff }
.kpi span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tiza-dim); display:block; margin-top:6px }

.hero-side{ position:relative; min-height:340px; display:flex; align-items:center; justify-content:center }
.hero-tag{ position:absolute; right:0; top:8%; text-align:right; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tiza-dim) }
.hero-tag b{ display:block; color:var(--tiza); font-weight:400; margin-top:4px }
.hero-tag i{ display:block; width:48px; height:2px; background:var(--azul); margin:12px 0 0 auto; border-radius:2px }
.hero-tag i:last-child{ margin-top:6px; width:32px; opacity:.6 }

.scroll-hint{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tiza-dim); text-align:center; text-decoration:none;
}
.scroll-hint i{ display:block; width:1px; height:38px; margin:10px auto 0; background:linear-gradient(var(--tiza-dim),transparent) }
.scroll-hint::after{
  content:""; position:absolute; left:50%; bottom:0; width:5px; height:5px; margin-left:-2.5px;
  background:var(--azul); border-radius:50%; animation:caer 2.2s var(--curva) infinite;
}
@keyframes caer{ 0%{transform:translateY(-34px);opacity:0} 25%{opacity:1} 75%{opacity:1} 100%{transform:translateY(2px);opacity:0} }

@media (max-width:1000px){
  .hero-in{ grid-template-columns:1fr }
  .hero-side{ display:none }
  .hero-kpis{ grid-template-columns:repeat(3,auto); gap:24px 32px }
}
/* En móvil el hero llega justo al borde: el indicador de scroll pisaría los KPI. */
@media (max-width:620px){ .hero-kpis{ grid-template-columns:repeat(2,auto) } }
@media (max-width:760px){ .scroll-hint{ display:none } }

/* ==========================================================================
   VIDEO / MENSAJE
   ========================================================================== */
.dos-col h2{ font-size:clamp(30px,4.8vw,54px) }
.dos-col{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,64px); align-items:center }
@media (max-width:900px){ .dos-col{ grid-template-columns:1fr } }

.video-card{
  position:relative; border-radius:22px; overflow:hidden; aspect-ratio:16/9;
  background:linear-gradient(140deg,var(--noche-3),var(--noche));
  box-shadow:0 30px 70px -30px rgba(0,40,90,.6); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.video-card img, .video-card video, .video-card iframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0 }
/* El retrato es 4:3 y la tarjeta 16:9: anclando arriba, el recorte se come
   el pecho y no la cabeza. */
.video-card img{ object-position:center top }
.video-card .velo{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,23,48,.15),rgba(0,23,48,.7)); transition:background .55s var(--curva) }

/* ---- aviso mientras no hay video ---- */
.video-card.abierto .velo{ background:linear-gradient(180deg,rgba(0,23,48,.88),rgba(0,20,44,.95)) }
.video-card.abierto .play{ opacity:0; transform:scale(.6); pointer-events:none }
.video-card .play{ transition:transform .35s var(--curva), background .3s ease, opacity .35s ease }
.video-card.abierto{ cursor:default }

.aviso-video{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  padding:clamp(18px,6%,48px); text-align:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
.video-card.abierto .aviso-video{ opacity:1; visibility:visible }

/* Línea que barre de lado a lado antes de que aparezcan las palabras. */
.aviso-barra{ width:min(320px,70%); height:2px; background:rgba(237,242,247,.16); border-radius:2px; overflow:hidden; flex:none }
.aviso-barra i{ display:block; height:100%; width:100%; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--azul-vivo),transparent);
  transform:translateX(-100%); }
.video-card.corriendo .aviso-barra i{ animation:barrer 1.1s var(--curva) forwards }
@keyframes barrer{ to{ transform:translateX(100%) } }

.aviso-video p{ margin:0; max-width:34ch; line-height:1.45 }
.aviso-video .frase1{ font-family:var(--display); font-weight:600; font-size:clamp(17px,2.4vw,23px); color:var(--tiza); letter-spacing:-.01em }
.aviso-video .frase2{ font-size:clamp(14px,1.7vw,16.5px); color:var(--azul-suave) }
.aviso-video .p{
  display:inline-block; opacity:0; transform:translateY(12px);
  transition:opacity .5s var(--curva), transform .5s var(--curva);
  transition-delay:calc(var(--i,0) * 85ms + var(--base,0ms));
}
.video-card.corriendo .aviso-video .p{ opacity:1; transform:none }
.aviso-pie{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tiza-dim); opacity:0; transition:opacity .6s ease; transition-delay:var(--fin,2s);
}
.video-card.corriendo .aviso-pie{ opacity:1 }

@media (prefers-reduced-motion:reduce){
  .aviso-video .p{ opacity:1; transform:none; transition:none }
  .aviso-barra i{ animation:none; transform:none }
  .aviso-pie{ opacity:1; transition:none }
}
.play{
  position:relative; z-index:2; width:88px; height:88px; border-radius:50%;
  border:2px solid rgba(255,255,255,.85); display:grid; place-items:center;
  background:rgba(255,255,255,.08); backdrop-filter:blur(4px);
  transition:transform .3s var(--curva), background .3s ease;
}
.video-card:hover .play{ transform:scale(1.08); background:rgba(255,255,255,.2) }
.play::before{
  content:""; border-left:19px solid #fff; border-top:12px solid transparent;
  border-bottom:12px solid transparent; margin-left:6px;
}
.play::after{
  content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(255,255,255,.5);
  animation:pulso 2.6s var(--curva) infinite;
}
@keyframes pulso{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.55);opacity:0} }
.video-nota{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-dim); margin-top:16px }

/* ==========================================================================
   TRAMO COMÚN — acordeón de paradas
   ========================================================================== */
.paradas{ border:1px solid var(--regla); border-radius:18px; overflow:hidden; background:var(--tarjeta) }
.parada + .parada{ border-top:1px solid var(--regla) }
.parada-btn{
  width:100%; background:none; border:0; color:inherit; text-align:left; cursor:pointer;
  display:grid; grid-template-columns:90px 1fr auto; gap:22px; align-items:center;
  padding:24px clamp(18px,3vw,28px); font-family:inherit;
  transition:background .2s ease;
}
.parada-btn:hover{ background:var(--tarjeta-2) }
.parada-cod{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--acento) }
.parada-tit{ font-family:var(--display); font-size:clamp(18px,2.3vw,24px); font-weight:600; letter-spacing:-.02em }
.parada-hrs{ font-family:var(--mono); font-size:11.5px; color:var(--texto-dim); white-space:nowrap; display:flex; align-items:center; gap:14px }
.parada-hrs .chev{ width:11px; height:11px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .3s var(--curva) }
.parada.abierta .parada-hrs .chev{ transform:rotate(225deg) translate(-2px,-2px) }
.parada.abierta{ background:var(--tarjeta-2) }
.parada-cuerpo{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--curva) }
.parada.abierta .parada-cuerpo{ grid-template-rows:1fr }
.parada-cuerpo > div{ overflow:hidden }
.parada-int{ padding:0 clamp(18px,3vw,28px) 28px 112px }
.parada-meta{ color:var(--texto); font-weight:500; border-left:2px solid var(--oro); padding-left:16px; margin:0 0 16px; max-width:62ch }
.parada-int p{ margin:0 0 18px; color:var(--texto-dim); max-width:64ch }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--texto-dim); border:1px solid var(--regla); border-radius:7px; padding:6px 10px }
@media (max-width:700px){
  .parada-btn{ grid-template-columns:64px 1fr; gap:14px; padding:18px 16px }
  .parada-hrs{ grid-column:2; margin-top:-4px }
  .parada-int{ padding:0 16px 22px 78px }
}

/* ==========================================================================
   LA LLAMADA QUE NO ERA — animación de la estafa por voz clonada
   Un solo ciclo gobierna todo: la onda late siempre, y a mitad de ciclo el
   barrido la vuelve roja, cambia el nombre y aparece la frase.
   ========================================================================== */
.llamada-caja{ display:grid; place-items:center; margin-top:8px }
.llamada{
  --ciclo:10s;
  position:relative; width:min(520px,100%); border:1px solid var(--regla);
  border-radius:20px; padding:clamp(20px,3.5vw,28px); background:var(--tarjeta);
  animation:llamadaAlerta var(--ciclo) linear infinite;
}
@keyframes llamadaAlerta{
  0%,44%   { border-color:rgba(237,242,247,.16); box-shadow:none }
  56%,92%  { border-color:rgba(224,31,38,.55); box-shadow:0 0 46px -14px rgba(224,31,38,.5) }
  100%     { border-color:rgba(237,242,247,.16); box-shadow:none }
}

.llamada-cab{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-dim) }
.llamada-cab .punto{ width:7px; height:7px; border-radius:50%; background:var(--verde); flex:none; animation:llamadaPunto 1.4s ease-in-out infinite }
@keyframes llamadaPunto{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.75) } }
.llamada-cab .hora{ margin-left:auto; letter-spacing:.08em }

.llamada-quien{ display:flex; align-items:center; gap:14px; margin:20px 0 22px }
.llamada-avatar{
  width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:19px; color:#fff;
  background:linear-gradient(140deg,var(--azul),var(--noche-3));
  animation:llamadaAvatar var(--ciclo) linear infinite;
}
@keyframes llamadaAvatar{
  0%,44%  { background:linear-gradient(140deg,#1E6BFF,#003D7A); filter:none }
  56%,92% { background:linear-gradient(140deg,#E01F26,#5A0D10); filter:saturate(1.1) }
  100%    { background:linear-gradient(140deg,#1E6BFF,#003D7A) }
}
.llamada-nombre{ position:relative; min-height:44px; flex:1; min-width:0 }
.llamada-nombre b{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--texto);
}
.llamada-nombre b span{ font-family:var(--body); font-size:12.5px; font-weight:400; color:var(--texto-dim); letter-spacing:0; margin-top:2px }
.llamada-nombre .n1{ animation:llamadaN1 var(--ciclo) linear infinite }
.llamada-nombre .n2{ color:var(--bandera); animation:llamadaN2 var(--ciclo) linear infinite }
.llamada-nombre .n2 span{ color:rgba(255,150,150,.85) }
@keyframes llamadaN1{
  0%,38%  { opacity:1; transform:none }
  47%,100%{ opacity:0; transform:translateY(-10px) }
}
@keyframes llamadaN2{
  0%,47%  { opacity:0; transform:translateY(10px) }
  56%,92% { opacity:1; transform:none }
  97%,100%{ opacity:0; transform:translateY(10px) }
}

.onda{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:3px; height:62px; overflow:hidden }
.onda i{
  display:block; flex:1; min-width:2px; max-width:7px; height:100%; border-radius:99px;
  transform-origin:center; background:var(--azul-vivo);
  animation:ondaLate .85s ease-in-out infinite alternate, ondaTinte var(--ciclo) linear infinite;
  animation-delay:calc(var(--i) * -70ms), 0s;
}
@keyframes ondaLate{ from{ transform:scaleY(.16) } to{ transform:scaleY(1) } }
@keyframes ondaTinte{
  0%,42%  { background:#4DA9E8; opacity:.85 }
  52%,90% { background:#E01F26; opacity:1 }
  100%    { background:#4DA9E8; opacity:.85 }
}
/* El barrido que "detecta" la voz sintética. */
.onda::after{
  content:""; position:absolute; top:0; bottom:0; width:70px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(224,31,38,.55),transparent);
  animation:ondaBarrido var(--ciclo) linear infinite;
}
@keyframes ondaBarrido{
  0%,40%   { opacity:0; transform:translateX(-80px) }
  43%      { opacity:1 }
  52%      { opacity:1; transform:translateX(520px) }
  55%,100% { opacity:0; transform:translateX(520px) }
}

.llamada-frase{
  margin:20px 0 0; font-size:15.5px; line-height:1.55; color:var(--texto);
  border-left:2px solid var(--bandera); padding-left:16px;
  animation:llamadaFrase var(--ciclo) linear infinite;
}
@keyframes llamadaFrase{
  0%,50%  { opacity:0; transform:translateY(10px) }
  60%,92% { opacity:1; transform:none }
  97%,100%{ opacity:0; transform:translateY(10px) }
}

.llamada-pie{
  margin:26px auto 0; max-width:52ch; text-align:center; font-size:15px; color:var(--texto-dim); line-height:1.6;
}
.llamada-pie b{ color:var(--texto) }

@media (prefers-reduced-motion:reduce){
  /* Sin movimiento se muestra el desenlace, que es lo que hay que entender. */
  .llamada, .llamada-avatar, .onda i,
  .llamada-nombre b, .llamada-frase, .llamada-cab .punto{ animation:none !important }
  /* Sin animación el barrido sería solo una mancha: se retira. */
  .onda::after{ display:none }
  .llamada{ border-color:rgba(224,31,38,.55) }
  .llamada-avatar{ background:linear-gradient(140deg,#E01F26,#5A0D10) }
  .onda i{ background:#E01F26; transform:scaleY(.55) }
  .onda i:nth-child(odd){ transform:scaleY(.9) }
  .llamada-nombre .n1{ opacity:0 }
  .llamada-nombre .n2{ opacity:1; transform:none }
  .llamada-frase{ opacity:1; transform:none }
}

/* ==========================================================================
   RUTAS (23 segmentos) + diagrama
   ========================================================================== */
.picker{
  border:1px solid var(--regla); border-radius:22px; padding:clamp(22px,3.5vw,34px);
  background:var(--tarjeta); box-shadow:0 24px 60px -40px rgba(0,40,90,.5);
}
.picker-head{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px; margin-bottom:22px }
.picker-head h3{ font-size:clamp(20px,2.6vw,27px) }
.picker-head p{ margin:8px 0 0; color:var(--texto-dim); font-size:15px; max-width:46ch }
.selectwrap{ margin-left:auto; position:relative; min-width:0; max-width:100% }
.selectwrap::after{ content:""; position:absolute; right:20px; top:calc(50% - 4px); width:8px; height:8px; border-right:2px solid var(--texto-dim); border-bottom:2px solid var(--texto-dim); transform:rotate(45deg); pointer-events:none }
.picker select{
  appearance:none; font-family:var(--body); font-size:15px; font-weight:500;
  background:var(--fondo); color:var(--texto); border:1px solid var(--regla);
  border-radius:12px; padding:14px 46px 14px 16px; cursor:pointer;
  /* Un <select> se estira hasta su opción más larga y `min-width` no lo frena.
     Sin el tope, «Niños y adolescentes bajo protección» sacaba el desplegable
     fuera de la pantalla en móviles y con él se iba media página. */
  min-width:min(320px,80vw); max-width:100%; text-overflow:ellipsis;
}
/* -- Cálculo de la ruta: abanico de candidatas, barrido y trazo final ------ */
.calc{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--texto-dim);
}
.calc-punto{ width:7px; height:7px; border-radius:50%; background:var(--verde); flex:none; transition:background .3s ease }
.calc.calculando .calc-punto{ background:var(--oro); animation:calcLate .7s ease-in-out infinite }
.calc-txt{ min-width:22ch; font-variant-numeric:tabular-nums }
.calc-barra{ width:74px; height:3px; border-radius:2px; background:var(--regla); overflow:hidden; flex:none }
.calc-barra i{ display:block; height:100%; width:100%; border-radius:2px; background:var(--verde); transform-origin:left; transform:scaleX(1); transition:background .3s ease }
.calc.calculando .calc-barra i{ background:var(--oro); animation:calcCarga 1.4s var(--curva) forwards }
@keyframes calcLate{ 50%{ opacity:.25; transform:scale(.7) } }
@keyframes calcCarga{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

.fantasma{
  fill:none; stroke-width:1.8; stroke-linecap:round; stroke-dasharray:3 4;
  opacity:0; animation:fantasmaEntra .34s var(--curva) forwards;
}
@keyframes fantasmaEntra{ from{ opacity:0; stroke-dashoffset:24 } to{ opacity:.7; stroke-dashoffset:0 } }
.fantasma.suya{ stroke-width:3.4; stroke-dasharray:5 5; animation-name:fantasmaSuya }
@keyframes fantasmaSuya{ from{ opacity:0; stroke-dashoffset:24 } to{ opacity:1; stroke-dashoffset:0 } }
.fantasma.descartada{ animation:fantasmaSale .34s ease forwards }
@keyframes fantasmaSale{ from{ opacity:.7 } to{ opacity:0; stroke-dashoffset:-14 } }

.fantasma-et{
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  opacity:0; animation:fantasmaEtEntra .3s ease forwards;
}
@keyframes fantasmaEtEntra{ to{ opacity:.75 } }
.fantasma-et.descartada{ animation:fantasmaEtSale .3s ease forwards }
@keyframes fantasmaEtSale{ from{ opacity:.75 } to{ opacity:0 } }

.escaner line{ stroke:var(--azul-vivo); stroke-width:2; opacity:0 }
.escaner.corre line{ animation:barrer .78s var(--curva) forwards }
@keyframes barrer{
  0%{ transform:translateX(30px); opacity:0 }
  12%{ opacity:.85 }
  80%{ opacity:.85 }
  100%{ transform:translateX(900px); opacity:0 }
}

.flujo{
  fill:none; stroke-width:9; stroke-linecap:round; stroke-dasharray:.1 200;
  animation:fluir .68s var(--curva) forwards;
}
@keyframes fluir{ from{ stroke-dashoffset:0 } to{ stroke-dashoffset:-112 } }

.destino{ opacity:0; transition:opacity .14s ease }
.destino.puesto{ opacity:1; transition:opacity .45s ease }
.destino.puesto .destino-n2 circle{ animation:aterriza .5s var(--curva) }
@keyframes aterriza{ from{ r:2; stroke-width:8 } to{ r:9; stroke-width:3.5 } }

#capApp{ transition:opacity .12s linear }
#capApp.girando{ opacity:.45; font-variant-numeric:tabular-nums }

@media (prefers-reduced-motion: reduce){
  .fantasma, .fantasma-et, .escaner line, .flujo, .calc-barra i{ animation:none !important }
  .fantasma, .fantasma-et{ display:none }
  .destino{ opacity:1 }
}

.diagrama{ overflow-x:auto; padding:6px 0; scrollbar-width:thin }
.diagrama svg{ display:block; min-width:760px; width:100%; height:auto }
.trunk{ stroke:var(--texto); stroke-width:5; stroke-linecap:round; fill:none; opacity:.85 }
.rama{ stroke-width:5; stroke-linecap:round; fill:none; stroke-dasharray:100; stroke-dashoffset:100; animation:trazar .68s var(--curva) forwards }
@keyframes trazar{ to{ stroke-dashoffset:0 } }
.nodo circle{ fill:var(--fondo); stroke:var(--texto); stroke-width:3.5 }
.nodo.color circle{ stroke:currentColor }
.nodo text.c{ font-family:var(--mono); font-size:10.5px; fill:var(--texto-dim); letter-spacing:.08em }
.nodo text.t{ font-family:var(--body); font-size:12.5px; font-weight:600; fill:var(--texto) }
.term rect{ fill:none; stroke-width:3.5; rx:9 }
.pie-ruta{ display:flex; flex-wrap:wrap; gap:24px; margin-top:20px; padding-top:20px; border-top:1px solid var(--regla) }
.pie-ruta .cap{ display:flex; gap:12px; align-items:stretch; min-width:200px; flex:1 }
.pie-ruta .cap i{ width:4px; border-radius:3px; flex:none; background:var(--texto-dim) }
.pie-ruta b{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--texto-dim); font-weight:400; display:block; text-transform:uppercase }
.pie-ruta span{ font-size:14.5px; font-weight:500; display:block; margin-top:4px }

.segmentos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-top:32px }
.seg{
  display:flex; gap:12px; align-items:flex-start; text-align:left; font-family:inherit; color:inherit;
  background:var(--tarjeta); border:1px solid var(--regla); border-radius:13px;
  padding:15px 16px; cursor:pointer;
  transition:transform .18s var(--curva), border-color .18s ease, box-shadow .18s ease;
}
.seg:hover{ transform:translateY(-3px); border-color:currentColor; box-shadow:0 12px 26px -18px currentColor }
.seg[aria-current="true"]{ border-color:currentColor; background:var(--tarjeta-2); box-shadow:inset 3px 0 0 currentColor }
.seg i{ width:4px; border-radius:3px; background:currentColor; align-self:stretch; flex:none; min-height:34px }
.seg .num{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--texto-dim); display:block }
.seg .nm{ font-size:14.5px; font-weight:500; line-height:1.35; color:var(--texto); display:block; margin-top:3px }

/* ==========================================================================
   NIVELES
   ========================================================================== */
.niveles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); gap:20px }
.nivel{
  border:1px solid var(--regla); border-radius:20px; padding:30px; position:relative; overflow:hidden;
  background:var(--tarjeta); transition:transform .3s var(--curva), box-shadow .3s ease;
}
.nivel:hover{ transform:translateY(-5px); box-shadow:0 24px 50px -30px rgba(0,40,90,.55) }
.nivel::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--c) }
.nivel .lv{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--c); text-transform:uppercase }
.nivel h3{ font-size:26px; margin:14px 0 10px }
.nivel > p{ color:var(--texto-dim); font-size:15px; margin:0 0 20px }
.nivel dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14px }
.nivel dt{ font-family:var(--mono); font-size:10.5px; color:var(--texto-dim); letter-spacing:.1em; align-self:center; text-transform:uppercase }
.nivel dd{ margin:0; font-weight:500 }

/* ==========================================================================
   ÁREAS TÉCNICAS (tarjetas oscuras sobre banda clara)
   ========================================================================== */
.areas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:18px }
.area{
  position:relative; border-radius:18px; overflow:hidden; padding:26px 22px 24px;
  min-height:230px; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(165deg,#012C5C,#001730 70%);
  border:1px solid rgba(255,255,255,.1); color:var(--tiza);
  transition:transform .35s var(--curva), box-shadow .35s ease;
}
.area::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 24%, rgba(77,169,232,.32), transparent 62%);
  opacity:.55; transition:opacity .35s ease;
}
.area:hover{ transform:translateY(-6px); box-shadow:0 28px 60px -30px rgba(0,45,105,.85) }
.area:hover::after{ opacity:1 }
.area .ico{ position:absolute; top:26px; left:50%; transform:translateX(-50%); width:74px; height:74px; opacity:.95; z-index:1 }
.area h3{ position:relative; z-index:1; font-size:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; line-height:1.3 }
.area p{ position:relative; z-index:1; margin:8px 0 0; font-size:13.5px; color:var(--tiza-dim); line-height:1.5 }

/* ==========================================================================
   ALIADOS
   ========================================================================== */
/* Siete logotipos no reparten bien en una rejilla fija: sobra o falta uno en la
   última fila. Con flex de cuatro por línea, la fila incompleta se centra sola. */
.aliados{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  row-gap:clamp(14px,2.4vw,26px);
}
.aliado{
  flex:0 0 25%; display:grid; place-items:center; min-height:96px;
  padding:8px clamp(8px,1.5vw,18px);
  opacity:.92; transition:opacity .25s ease, transform .25s var(--curva);
  /* El separador existe siempre pero va transparente en el primero de cada
     línea: así todas las celdas miden igual y los logotipos quedan alineados. */
  border-left:1px solid transparent;
}
.aliado:not(:nth-child(4n+1)){ border-left-color:var(--regla) }
.aliado:hover{ opacity:1; transform:translateY(-2px) }
/* Los logotipos llevan proporciones muy distintas, así que cada uno trae su
   propia altura desde Contenido::aliados(); aquí solo se les impide desbordar. */
.aliado img{ max-width:min(100%,230px); width:auto; object-fit:contain }
@media (max-width:900px){
  .aliado{ flex-basis:50% }
  .aliado:not(:nth-child(4n+1)){ border-left-color:transparent }
  .aliado:nth-child(2n){ border-left-color:var(--regla) }
}
@media (max-width:460px){
  .aliado{ flex-basis:100%; min-height:0; border-left-color:transparent }
  .aliado:nth-child(2n){ border-left-color:transparent }
}

/* ==========================================================================
   PREGUNTAS FRECUENTES
   Con <details> nativo: se abre con teclado, lo entienden los lectores de
   pantalla y funciona aunque el JavaScript falle.
   ========================================================================== */
.faq{ display:grid; gap:10px; max-width:82ch }
.faq details{
  border:1px solid var(--regla); border-radius:14px; background:var(--tarjeta);
  transition:border-color .2s ease;
}
.faq details[open]{ border-color:var(--azul) }
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:16px;
  padding:17px clamp(16px,2.2vw,22px); font-size:clamp(15.5px,1.5vw,17px);
  font-weight:600; color:var(--texto);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; margin-left:auto; flex:none; width:9px; height:9px;
  border-right:2px solid var(--texto-dim); border-bottom:2px solid var(--texto-dim);
  transform:rotate(45deg); transition:transform .25s var(--curva);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); border-color:var(--azul) }
.faq summary:hover{ color:var(--azul) }
.faq summary:focus-visible{ outline:2px solid var(--azul); outline-offset:-2px; border-radius:14px }
.faq .resp{
  padding:0 clamp(16px,2.2vw,22px) 20px; margin:0; color:var(--texto-dim);
  font-size:16px; line-height:1.68; max-width:72ch;
}
.faq .resp b{ color:var(--texto) }
.faq .resp a{ color:var(--azul) }
.faq-pie{ margin-top:26px; color:var(--texto-dim); font-size:15.5px }
.faq-pie a{ color:var(--azul) }
@media (prefers-reduced-motion:reduce){ .faq summary::after{ transition:none } }

/* ==========================================================================
   CTA REGISTRO (huella)
   ========================================================================== */
.cta-registro{
  background:
    radial-gradient(ellipse 60% 70% at 78% 50%, rgba(30,107,255,.28), transparent 62%),
    linear-gradient(160deg,#002C5E,#001730 65%);
}
.huella{ position:relative; display:grid; place-items:center; min-height:330px }
.huella svg.fp{ width:min(210px,52vw); height:auto; position:relative; z-index:2; filter:drop-shadow(0 0 26px rgba(30,107,255,.6)) }
.huella .aro{
  position:absolute; border:1px solid rgba(143,196,240,.45); border-radius:50%;
  animation:expandir 4s var(--curva) infinite;
}
.huella .aro:nth-child(1){ width:230px; height:230px; animation-delay:0s }
.huella .aro:nth-child(2){ width:230px; height:230px; animation-delay:1.3s }
.huella .aro:nth-child(3){ width:230px; height:230px; animation-delay:2.6s }
@keyframes expandir{ 0%{transform:scale(.72);opacity:0} 18%{opacity:.85} 100%{transform:scale(1.7);opacity:0} }
.huella .base{
  position:absolute; bottom:34px; width:250px; height:56px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(30,107,255,.42), transparent 70%);
  filter:blur(6px);
}
.fp-trazo{ fill:none; stroke:#7FC0FF; stroke-width:5.5; stroke-linecap:round; stroke-dasharray:var(--len,420); stroke-dashoffset:var(--len,420); animation:trazar 1.6s var(--curva) forwards }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.pie{ background:#000F22; color:var(--tiza-dim); padding:clamp(48px,7vw,72px) 0 32px; position:relative; overflow:hidden }
.pie-mapa{ position:absolute; right:-4%; bottom:-16%; width:min(460px,52vw); opacity:.1; pointer-events:none }
.pie-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,56px); position:relative; z-index:1 }
.pie h3{ font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:var(--tiza-dim); margin:0 0 16px }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.pie a{ color:var(--tiza); text-decoration:none; font-size:14.5px; transition:color .2s ease }
.pie a:hover{ color:var(--azul-vivo) }
.pie .desc{ font-size:14.5px; max-width:34ch; margin:18px 0 0; line-height:1.6 }
.pie-contacto li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--tiza) }
.pie-contacto svg{ width:16px; height:16px; flex:none; margin-top:4px; stroke:var(--azul-vivo) }
/* Crédito institucional del pie. El logotipo va en blanco sobre el fondo
   oscuro, sin el recoloreado de la banda de aliados. */
.pie-itla{ margin-top:24px }
.pie-itla span{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tiza-dim); margin-bottom:10px;
}
.pie-itla img{ height:38px; width:auto; opacity:.95 }

.redes{ display:flex; gap:10px; margin-top:22px }
.redes a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.07);
  display:grid; place-items:center; transition:background .22s ease, transform .22s var(--curva);
}
.redes a:hover{ background:var(--azul); transform:translateY(-2px) }
.redes svg{ width:16px; height:16px; fill:var(--tiza) }
.pie-abajo{
  margin-top:clamp(34px,5vw,52px); padding-top:22px; border-top:1px solid rgba(237,242,247,.12);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:12.5px; position:relative; z-index:1;
}
.pie-abajo .sep{ margin-left:auto; display:flex; gap:18px }
@media (max-width:820px){ .pie-grid{ grid-template-columns:1fr } }

/* ==========================================================================
   PÁGINAS LEGALES
   ========================================================================== */
.legal{ padding-top:calc(69px + clamp(40px,6vw,72px)) }
.legal .wrap{ max-width:820px }
.legal h1{ font-size:clamp(32px,5vw,50px); margin-bottom:14px }
.legal .fecha{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-dim) }
.legal .entrada{ font-size:18px; color:var(--texto-dim); margin:24px 0 0; line-height:1.6 }
.legal .indice{
  margin:36px 0 0; padding:22px 26px; border:1px solid var(--regla); border-radius:16px;
  background:var(--tarjeta);
}
.legal .indice h2{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-dim); font-weight:400; margin:0 0 14px }
.legal .indice ol{ margin:0; padding-left:20px; columns:2; column-gap:32px; font-size:14.5px }
.legal .indice li{ margin-bottom:7px; break-inside:avoid }
.legal .indice a{ color:var(--texto); text-decoration:none }
.legal .indice a:hover{ color:var(--acento); text-decoration:underline }
@media (max-width:640px){ .legal .indice ol{ columns:1 } }

.legal section{ padding:0; border:0; margin-top:clamp(38px,5vw,54px); scroll-margin-top:86px }
.legal section h2{
  font-size:clamp(21px,2.8vw,27px); margin:0 0 16px; display:flex; gap:14px; align-items:baseline;
}
.legal section h2 i{
  font-family:var(--mono); font-style:normal; font-size:13px; color:var(--acento); flex:none;
}
.legal p{ color:var(--texto-dim); margin:0 0 15px; line-height:1.68 }
.legal p b, .legal li b{ color:var(--texto) }
.legal ul{ list-style:none; padding:0; margin:0 0 16px }
.legal ul li{
  color:var(--texto-dim); line-height:1.62; padding:0 0 0 22px; margin-bottom:10px; position:relative;
}
.legal ul li::before{
  content:""; position:absolute; left:2px; top:11px; width:6px; height:6px;
  border-radius:50%; background:var(--acento); opacity:.65;
}
.legal .dato{
  border:1px solid var(--regla); border-radius:14px; padding:20px 24px; margin:0 0 16px;
  background:var(--tarjeta);
}
.legal .dato h3{ font-size:16px; font-weight:600; margin:0 0 10px; color:var(--texto) }
.legal .dato p:last-child, .legal .dato ul:last-child{ margin-bottom:0 }
.legal .aviso-legal{
  border-left:3px solid var(--oro); padding:6px 0 6px 20px; margin:22px 0;
  color:var(--texto); font-size:16.5px; line-height:1.6;
}
.legal a{ color:var(--acento) }
.legal .licencia{
  font-family:var(--mono); font-size:11.5px; line-height:1.75; color:var(--texto-dim);
  border:1px solid var(--regla); border-radius:14px; padding:20px 22px; margin:0 0 16px;
  background:rgba(0,20,44,.35); white-space:pre-wrap; overflow-x:auto;
}
.legal .tabla-terceros{ width:100%; border-collapse:collapse; font-size:14px; margin:0 0 16px }
.legal .tabla-terceros th{
  text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-dim); font-weight:400;
  padding:0 14px 10px 0; border-bottom:1px solid var(--regla);
}
.legal .tabla-terceros td{ padding:11px 14px 11px 0; border-bottom:1px solid var(--regla); color:var(--texto-dim); vertical-align:top }
.legal .tabla-terceros td:first-child{ color:var(--texto) }
@media (max-width:600px){
  .legal .tabla-terceros, .legal .tabla-terceros tbody, .legal .tabla-terceros tr, .legal .tabla-terceros td{ display:block; width:100% }
  .legal .tabla-terceros thead{ display:none }
  .legal .tabla-terceros tr{ padding:12px 0; border-bottom:1px solid var(--regla) }
  .legal .tabla-terceros td{ border:0; padding:2px 0 }
}

.legal .contacto-caja{
  margin-top:clamp(38px,5vw,54px); border:1px solid var(--regla); border-radius:18px;
  padding:clamp(24px,4vw,34px); background:var(--tarjeta);
}
.legal .contacto-caja h2{ margin-bottom:12px }

/* ==========================================================================
   REVELADO AL SCROLL
   ========================================================================== */
.rev{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--curva), transform .7s var(--curva); transition-delay:calc(var(--i,0) * 70ms) }
.rev.visible{ opacity:1; transform:none }
.linea{ display:block; overflow:hidden }
.linea > span{ display:block; transform:translateY(105%); transition:transform .85s var(--curva); transition-delay:calc(var(--i,0) * 90ms) }
.cargado .linea > span{ transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .rev{ opacity:1; transform:none }
  .linea > span{ transform:none }
  .rama,.fp-trazo{ stroke-dashoffset:0 }
}