/* ==========================================================================
   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 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
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) }
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:36px; height:36px; 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, .nav-links a.on{ color:var(--tiza) }
.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-ind{ display:none }
  .nav-cta{ 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(4,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(2,auto); gap:24px 40px }
}
/* En móvil el hero llega justo al borde: el indicador de scroll pisaría los KPI. */
@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 }
.video-card .velo{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,23,48,.15),rgba(0,23,48,.7)) }
.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 }

/* ==========================================================================
   TRONCO 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 }
}

/* ==========================================================================
   REGLAS ANTIESTAFA
   ========================================================================== */
.reglas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px }
.regla{
  border:1px solid var(--regla); border-radius:18px; padding:30px; background:var(--tarjeta);
  position:relative; overflow:hidden; transition:transform .3s var(--curva), border-color .3s ease;
}
.regla:hover{ transform:translateY(-4px); border-color:rgba(224,31,38,.5) }
.regla::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--bandera) }
.regla .n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--bandera) }
.regla h3{ margin:14px 0 0; font-size:21px; font-weight:600; line-height:1.28 }
.regla p{ margin:14px 0 0; color:var(--texto-dim); font-size:14.5px; line-height:1.55 }

/* ==========================================================================
   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 }
.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; min-width:min(320px,80vw); cursor:pointer;
}
.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:640; stroke-dashoffset:640; animation:trazar .9s 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
   ========================================================================== */
.aliados{ display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:clamp(20px,3.5vw,40px) }
.aliado{ display:flex; align-items:center; gap:14px; opacity:.9; transition:opacity .25s ease, transform .25s var(--curva) }
.aliado:hover{ opacity:1; transform:translateY(-2px) }
.aliado svg{ height:44px; width:auto; flex:none }
.aliado .txt{ line-height:1.15 }
.aliado .txt b{ font-family:var(--display); font-size:19px; letter-spacing:-.02em; display:block; color:var(--texto) }
.aliado .txt span{ font-size:10px; line-height:1.45; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-dim); display:block; margin-top:4px }
.aliado + .aliado{ border-left:1px solid var(--regla); padding-left:clamp(20px,3.5vw,40px) }
@media (max-width:900px){
  .aliados{ grid-template-columns:repeat(2,1fr) }
  .aliado:nth-child(odd){ border-left:0; padding-left:0 }
}
@media (max-width:520px){
  .aliados{ grid-template-columns:1fr }
  .aliado{ border-left:0 !important; padding-left:0 !important }
}

/* ==========================================================================
   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 h4{ 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) }
.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 } }

/* ==========================================================================
   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 }
}