/* ============================================================
   SYSFLOTA — sistema visual
   ============================================================ */

:root{
  /* color */
  --navy:        #05232B;
  --navy-soft:   #073039;
  --navy-card:   #0A3D48;
  --pri:         #12A594;   /* primario */
  --pri-osc:     #0D8577;
  --sec:         #0E7C8C;   /* secundario, para el degradé */
  --marca:       linear-gradient(100deg, #0E7C8C, #12A594);
  --acento:      #F5B544;   /* acento */
  --lila:        #EFF6F5;
  --blanco:      #FFFFFF;
  --gris:        #4C6670;
  --gris-claro:  #78919A;
  --linea:       rgba(255,255,255,.14);
  --linea-osc:   rgba(2,0,35,.12);

  /* tipografía fluida (320px → 1600px) */
  --t--1:  clamp(.8125rem, .78rem + .16vw,  .9375rem);
  --t-0:   clamp(1rem,     .96rem + .19vw,  1.125rem);
  --t-1:   clamp(1.125rem, 1.06rem + .31vw, 1.375rem);
  --t-2:   clamp(1.375rem, 1.24rem + .63vw, 1.875rem);
  --t-3:   clamp(1.75rem,  1.49rem + 1.25vw, 2.75rem);
  --t-4:   clamp(2.125rem, 1.63rem + 2.34vw, 4rem);
  --t-5:   clamp(2.5rem,   1.64rem + 4.06vw, 5.25rem);

  /* espacio fluido */
  --s-3xs: clamp(.25rem, .23rem + .09vw, .375rem);
  --s-2xs: clamp(.5rem,  .45rem + .23vw, .75rem);
  --s-xs:  clamp(.75rem, .67rem + .39vw, 1.125rem);
  --s-s:   clamp(1rem,   .9rem  + .47vw, 1.375rem);
  --s-m:   clamp(1.5rem, 1.34rem + .75vw, 2.25rem);
  --s-l:   clamp(2rem,   1.72rem + 1.41vw, 4rem);
  --s-xl:  clamp(3rem,   2.44rem + 2.81vw, 6.25rem);
  --s-2xl: clamp(4rem,   3.02rem + 4.92vw, 9.5rem);
  --s-3xl: clamp(5rem,   3.6rem  + 7.03vw, 12.5rem);

  --ancho: 1360px;
  --gutter: clamp(1.25rem, .9rem + 1.75vw, 3.5rem);
  --radio: 4px;
  --borde-foco: 2px solid var(--acento);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--blanco);
  color:var(--navy);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:var(--t-0);
  line-height:1.6;
  font-feature-settings:'cv11','ss01';
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Geist', 'Inter', sans-serif;
  font-weight:500;
  letter-spacing:-.022em;
  line-height:1.1;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--t-5); }
h2{ font-size:var(--t-4); }
h3{ font-size:var(--t-2); }
h4{ font-size:var(--t-1); }

p{ margin:0; text-wrap:pretty; }
img,svg,video{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:var(--borde-foco);
  outline-offset:3px;
  border-radius:2px;
}

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.saltar{
  position:absolute; left:-9999px; top:0;
  background:var(--acento); color:var(--navy);
  padding:.75rem 1.25rem; z-index:999; font-weight:500;
}
.saltar:focus{ left:var(--gutter); top:.5rem; }

/* ===================== secciones ===================== */

.sec{ padding-block:var(--s-2xl); }
.sec--oscura{ background:var(--navy); color:var(--blanco); }
.sec--lila{ background:var(--lila); }
.sec--marca{ background:var(--marca); color:var(--blanco); }

.sec--oscura h2, .sec--marca h2{ color:var(--blanco); }

.apagado{ color:var(--gris); }
.sec--oscura .apagado,
.sec--marca .apagado{ color:rgba(255,255,255,.72); }

.medida{ max-width:62ch; }
.medida-corta{ max-width:46ch; }

/* subrayado de acento */
.marcado{
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  background-image:linear-gradient(var(--acento), var(--acento));
  background-repeat:no-repeat;
  background-position:0 88%;
  background-size:100% .32em;
  padding-inline:.04em;
}
.sec--oscura .marcado{ background-image:linear-gradient(var(--pri), var(--pri)); }

/* tercera línea gris del titular de tres tiempos */
.tenue{ color:var(--gris-claro); }

/* ===================== barra de aviso ===================== */

.aviso{
  background:#000;
  color:var(--blanco);
  font-size:var(--t--1);
  text-align:center;
  padding:.65rem var(--gutter);
}
.aviso a{ text-decoration:underline; text-underline-offset:3px; }
.aviso svg{ display:inline-block; vertical-align:-2px; margin-left:.35rem; }

/* ===================== header ===================== */

.cab{
  background:var(--navy);
  color:var(--blanco);
  position:sticky; top:0; z-index:90;
}
.cab__fila{
  display:flex; align-items:center; gap:var(--s-m);
  min-height:76px;
}
.cab__logo{ display:flex; align-items:center; margin-right:auto; }
.cab__logo img{
  height:34px; width:auto;
  transition:transform .3s var(--sal, ease);
}
.cab.achicada .cab__logo img{ height:30px; }
@media (hover:hover) and (pointer:fine){
  .cab__logo:hover img{ transform:translateX(2px); }
}
@media (max-width:520px){ .cab__logo img{ height:28px; } }

.nav{ display:flex; align-items:center; gap:clamp(.9rem,1.4vw,1.6rem); }
.nav__item{ position:relative; }
.nav__link{
  display:flex; align-items:center; gap:.3rem; white-space:nowrap;
  font-size:var(--t--1); padding:.6rem 0;
  color:rgba(255,255,255,.86);
  transition:color .18s ease;
  background:none; border:0; font-family:inherit; cursor:pointer;
}
.nav__link:hover,.nav__link[aria-expanded="true"]{ color:var(--blanco); }
.nav__link svg{ width:9px; transition:transform .2s ease; }
.nav__link[aria-expanded="true"] svg{ transform:rotate(180deg); }

.nav__panel{
  position:absolute; top:calc(100% + .5rem); left:-1rem;
  background:var(--blanco); color:var(--navy);
  min-width:300px; padding:.5rem;
  border:1px solid var(--linea-osc);
  box-shadow:0 24px 60px rgba(2,0,35,.22);
  display:none;
}
.nav__panel[data-abierto="true"]{ display:block; }
.nav__panel a{
  display:block; padding:.65rem .8rem; font-size:var(--t--1);
  transition:background .15s ease;
}
.nav__panel a:hover{ background:var(--lila); }

.cab__cta{
  display:inline-flex; align-items:center; gap:.7rem;
  border:1px solid var(--linea);
  padding:.7rem 1.1rem; font-size:var(--t--1);
  white-space:nowrap; flex:none;
  transition:background .18s ease, border-color .18s ease;
}
.cab__cta svg{ width:18px; flex:none; }
.cab__cta:hover{ background:var(--pri); border-color:var(--pri); }

.hamburguesa{
  display:none; background:none; border:0; cursor:pointer;
  padding:.5rem; margin-left:auto;
}
.hamburguesa span{
  display:block; width:26px; height:2px; background:var(--blanco); margin:5px 0;
  transition:transform .25s ease, opacity .25s ease;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===================== botones ===================== */

.btn{
  display:inline-flex; align-items:center; justify-content:space-between;
  gap:2.5rem;
  padding:1.05rem 1.4rem;
  font-size:var(--t-0);
  border:1px solid var(--navy);
  background:var(--navy); color:var(--blanco);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer; font-family:inherit;
}
.btn svg{ width:20px; flex:none; transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.btn:hover{ background:var(--pri); border-color:var(--pri); }
.btn:hover svg{ transform:translateX(5px); }

.btn--claro{ background:var(--blanco); color:var(--navy); border-color:var(--blanco); }
.btn--claro:hover{ background:var(--pri); color:var(--blanco); border-color:var(--pri); }

.btn--linea{ background:transparent; color:inherit; border-color:currentColor; }
.btn--linea:hover{ background:var(--navy); color:var(--blanco); border-color:var(--navy); }

.sec--marca .btn--linea:hover{ background:var(--blanco); color:var(--pri); border-color:var(--blanco); }

.btn--ancho{ width:min(100%, 520px); }

.enlace{
  display:inline-flex; align-items:center; gap:.5rem;
  border-bottom:1px solid currentColor; padding-bottom:.2rem;
  font-size:var(--t--1);
}
.enlace svg{ width:16px; transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.enlace:hover svg{ transform:translateX(4px); }

/* ===================== hero ===================== */

.hero{
  position:relative; overflow:hidden;
  background:var(--navy); color:var(--blanco);
  padding-block:var(--s-3xl);
  text-align:center;
  isolation:isolate;
}
.hero__aro{
  position:absolute; inset:0; z-index:-1;
  display:grid; place-items:center;
  pointer-events:none;
}
/* anillos que salen del centro como un sonar */
.hero__aro i{
  position:absolute;
  border-radius:50%;
  border:1.5px solid rgba(14,124,140,.9);
  box-shadow:0 0 22px rgba(18,165,148,.28), inset 0 0 22px rgba(18,165,148,.18);
  aspect-ratio:1;
  width:min(112vw,1520px);
  transform:scale(.16);
  opacity:0;
  animation:onda 7.2s cubic-bezier(.16,.62,.3,1) infinite;
}
.hero__aro i:nth-of-type(1){ animation-delay:0s; }
.hero__aro i:nth-of-type(2){ animation-delay:1.8s; }
.hero__aro i:nth-of-type(3){ animation-delay:3.6s; }
.hero__aro i:nth-of-type(4){ animation-delay:5.4s; }
.hero__aro b{
  position:absolute;
  width:min(58vw,760px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(18,165,148,.62), rgba(18,165,148,.10) 58%, transparent 72%);
  filter:blur(6px);
}
@keyframes onda{
  0%   { transform:scale(.14); opacity:0; }
  8%   { opacity:1; }
  55%  { opacity:.5; }
  100% { transform:scale(1); opacity:0; }
}

.hero__titulo{ margin-inline:auto; max-width:16ch; }
.hero__bajada{
  margin:var(--s-l) auto 0;
  max-width:58ch;
  font-size:var(--t-1);
  color:rgba(255,255,255,.76);
}
.hero__acciones{ margin-top:var(--s-xl); display:flex; justify-content:center; }

.hero--interno{ padding-block:var(--s-2xl) var(--s-xl); text-align:left; }
.hero--interno .hero__titulo{ margin-inline:0; max-width:20ch; }
.hero--interno .hero__bajada{ margin-inline:0; }

.miga{
  font-size:var(--t--1); color:rgba(255,255,255,.6);
  margin-bottom:var(--s-m);
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.miga a:hover{ color:var(--blanco); }

/* ===================== ticker ===================== */

.ticker{
  background:var(--marca); color:var(--blanco);
  padding-block:var(--s-m);
  overflow:hidden;
}
.ticker__rotulo{
  text-align:center; font-size:var(--t--1);
  opacity:.8; margin-bottom:var(--s-s);
}
.ticker__pista{
  display:flex; gap:var(--s-xl); width:max-content;
  animation:correr 34s linear infinite;
}
.ticker__pista span{
  font-family:'Geist',sans-serif;
  font-size:clamp(1.1rem,2vw,1.6rem);
  white-space:nowrap; opacity:.95;
}
@keyframes correr{ to{ transform:translateX(-50%); } }

/* ===================== grillas ===================== */

.dos{
  display:grid; gap:var(--s-xl);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items:start;
}
.dos--pegada{ gap:var(--s-l); }

.tarjetas{
  display:grid; gap:1px;
  background:var(--linea-osc);
  border:1px solid var(--linea-osc);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,220px), 1fr));
}
.tarjeta{
  background:var(--blanco);
  padding:var(--s-m);
  min-height:190px;
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-m);
  transition:background .2s ease;
}
a.tarjeta:hover{ background:var(--lila); }
.tarjeta svg{ width:26px; height:26px; color:var(--pri); }
.tarjeta h3{ font-size:var(--t-1); }
.tarjeta p{ font-size:var(--t--1); color:var(--gris); }

/* lista de módulos sobre navy */
.modulos{
  display:grid; gap:1px;
  background:var(--linea);
  border:1px solid var(--linea);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,320px), 1fr));
}
.modulo{
  background:var(--navy);
  padding:var(--s-s) var(--s-m);
  display:flex; align-items:center; gap:var(--s-s);
  min-height:84px;
  transition:background .2s ease;
}
.modulo:hover{ background:var(--navy-card); }
.modulo svg{ width:24px; height:24px; flex:none; color:var(--blanco); opacity:.85; }
.modulo span{ font-size:var(--t-0); }

/* pilares */
.pilares{
  display:grid; gap:var(--s-l);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,260px), 1fr));
}
.pilar{ border-top:1px solid var(--linea-osc); padding-top:var(--s-s); }
.sec--oscura .pilar{ border-color:var(--linea); }
.pilar h3{ font-size:var(--t-1); margin-bottom:var(--s-2xs); }
.pilar p{ font-size:var(--t--1); color:var(--gris); }
.sec--oscura .pilar p{ color:rgba(255,255,255,.7); }

/* notas del blog */
.notas{
  display:grid; gap:var(--s-l);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,290px), 1fr));
}
.nota{ display:flex; flex-direction:column; gap:var(--s-s); }
.nota__foto{
  aspect-ratio:16/10; width:100%; object-fit:cover;
  background:var(--navy-soft);
}
.nota h3{ font-size:var(--t-1); }
.nota p{ font-size:var(--t--1); color:var(--gris); }
.nota__meta{
  font-size:.8125rem; color:var(--gris-claro);
  display:flex; gap:1rem; margin-top:auto;
}
a.nota:hover h3{ color:var(--pri); }

/* ===================== mockup del tablero ===================== */

.tablero{
  background:var(--navy-card);
  border:1px solid var(--linea);
  padding:var(--s-s);
  display:grid; gap:var(--s-2xs);
  grid-template-columns:repeat(4,1fr);
  font-size:.8125rem;
}
.tablero__barra{
  grid-column:1/-1; display:flex; align-items:center; gap:.5rem;
  padding-bottom:var(--s-2xs); border-bottom:1px solid var(--linea);
  color:rgba(255,255,255,.55);
}
.tablero__punto{ width:8px; height:8px; border-radius:50%; background:var(--acento); flex:none; }
.tablero__mapa{
  grid-column:span 2; grid-row:span 2; min-height:210px;
  background:
    radial-gradient(circle at 30% 40%, rgba(18,165,148,.35), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px);
  position:relative;
}
.tablero__ruta{ position:absolute; inset:0; }
.tablero__dato{
  background:rgba(255,255,255,.04);
  padding:var(--s-xs);
  display:flex; flex-direction:column; gap:.2rem;
}
.tablero__dato b{
  font-family:'Geist',sans-serif; font-size:var(--t-2); font-weight:500;
  font-variant-numeric:tabular-nums; line-height:1;
}
.tablero__dato span{ color:rgba(255,255,255,.55); font-size:.75rem; }
.tablero__alerta svg{ width:18px; height:18px; flex:none; color:var(--acento); }
.tablero__alerta{
  grid-column:1/-1; display:flex; align-items:center; gap:.6rem;
  background:rgba(18,165,148,.18); padding:var(--s-xs);
  border-left:2px solid var(--acento);
  color:rgba(255,255,255,.85);
}

/* ===================== cursos ===================== */

.cursos{ display:grid; gap:0; background:transparent; }
.curso{
  background:transparent;
  display:flex; align-items:baseline; gap:var(--s-m);
  padding:var(--s-s) 0;
  border-top:1px solid rgba(255,255,255,.35);
  transition:padding-left .25s cubic-bezier(.2,.7,.3,1);
}
.curso:hover{ padding-left:var(--s-s); }
.curso__nombre{ font-family:'Geist',sans-serif; font-size:var(--t-2); flex:1; }
.curso__dato{ font-size:var(--t--1); opacity:.8; white-space:nowrap; }

/* ===================== formulario ===================== */

.form{ display:grid; gap:var(--s-s); }
.campo{ display:grid; gap:.4rem; }
.campo label{ font-size:var(--t--1); color:var(--gris); }
.campo input,.campo select,.campo textarea{
  font-family:inherit; font-size:var(--t-0);
  padding:.9rem 1rem;
  border:1px solid rgba(2,0,35,.25);
  background:var(--blanco); color:var(--navy);
  border-radius:0; width:100%;
  min-height:48px;
}
.campo textarea{ min-height:130px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--pri);
  box-shadow:0 0 0 3px rgba(18,165,148,.18);
}
.campo--doble{ display:grid; gap:var(--s-s); grid-template-columns:1fr 1fr; }
.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:var(--t--1); color:var(--gris); }
.consent input{ width:18px; height:18px; margin-top:.25rem; flex:none; }
.form__estado{ font-size:var(--t--1); min-height:1.4em; }
.form__estado[data-tipo="ok"]{ color:#1a7f37; }
.form__estado[data-tipo="error"]{ color:#b3261e; }

/* ===================== footer ===================== */

.pie{ background:var(--navy); color:var(--blanco); padding-block:var(--s-xl) var(--s-l); }
.pie__grilla{
  display:grid; gap:var(--s-l);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,180px), 1fr));
  padding-bottom:var(--s-l);
  border-bottom:1px solid var(--linea);
}
.pie h4{ font-size:var(--t--1); color:rgba(255,255,255,.5); margin-bottom:var(--s-s); font-weight:400; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pie a{ font-size:var(--t--1); color:rgba(255,255,255,.85); }
.pie a:hover{ color:var(--blanco); text-decoration:underline; text-underline-offset:3px; }
.pie__abajo{
  padding-top:var(--s-s);
  display:flex; justify-content:space-between; gap:var(--s-s); flex-wrap:wrap;
  font-size:var(--t--1); color:rgba(255,255,255,.5);
}

/* ===================== contenido editorial ===================== */

.texto{ max-width:68ch; display:grid; gap:var(--s-s); }
.texto h2{ font-size:var(--t-3); margin-top:var(--s-m); }
.texto h3{ font-size:var(--t-1); margin-top:var(--s-s); }
.texto ul{ margin:0; padding-left:1.1rem; display:grid; gap:.5rem; }
.texto li{ color:var(--gris); }
.sec--oscura .texto li{ color:rgba(255,255,255,.75); }

.ficha{
  border:1px solid var(--linea-osc);
  padding:var(--s-m);
  display:grid; gap:var(--s-s);
  position:sticky; top:100px;
}
.ficha dl{ margin:0; display:grid; gap:var(--s-s); }
.ficha .enlace,.ficha .btn{ justify-self:start; }
.ficha dt{ font-size:.8125rem; color:var(--gris-claro); }
.ficha dd{ margin:0; font-size:var(--t-0); }

/* ===================== responsive ===================== */

@media (max-width: 1040px){
  .hamburguesa{ display:block; }
  .nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--navy); border-top:1px solid var(--linea);
    flex-direction:column; align-items:stretch; gap:0;
    padding:var(--s-s) var(--gutter) var(--s-m);
    max-height:calc(100dvh - 76px); overflow-y:auto;
  }
  .nav[data-abierto="true"]{ display:flex; }
  .nav__item{ border-bottom:1px solid var(--linea); }
  .nav__link{ width:100%; justify-content:space-between; padding:1rem 0; font-size:var(--t-0); }
  .nav__panel{
    position:static; min-width:0; box-shadow:none; border:0;
    background:transparent; color:var(--blanco); padding:0 0 .5rem;
  }
  .nav__panel a{ padding:.6rem 0 .6rem 1rem; opacity:.8; }
  .nav__panel a:hover{ background:transparent; opacity:1; }
  .cab__cta{ margin-top:var(--s-s); justify-content:space-between; }
  .cab__logo{ margin-right:0; }
}

@media (max-width: 720px){
  .tablero{ grid-template-columns:repeat(2,1fr); }
  .tablero__mapa{ grid-column:1/-1; grid-row:auto; }
  .campo--doble{ grid-template-columns:1fr; }
  .curso{ flex-direction:column; gap:.3rem; }
  .btn{ gap:1.25rem; width:100%; }
  .ficha{ position:static; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   MOVIMIENTO
   ============================================================ */

:root{
  --sal:   cubic-bezier(.22,1,.36,1);   /* easeOutQuint — curva firma */
  --pop:   cubic-bezier(.34,1.56,.64,1);
  --suave: cubic-bezier(.77,0,.175,1);
}

/* ---------- revelado al scroll ---------- */

.anim [data-anim]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s var(--sal), transform .95s var(--sal), filter .8s var(--sal);
  filter:blur(6px);
}
.anim [data-anim].vista{ opacity:1; transform:none; filter:none; }
.anim [data-anim].listo{ will-change:auto; filter:none; }

/* grupos: el contenedor no se mueve, sus hijos entran escalonados */
.anim [data-anim="g"]{ opacity:1; transform:none; filter:none; transition:none; }
.anim [data-anim="g"] > *{
  opacity:0;
  transform:translateY(26px) scale(.985);
  transition:opacity .6s var(--sal), transform .7s var(--sal);
}
.anim [data-anim="g"].vista > *{ opacity:1; transform:none; }
.anim [data-anim="g"].vista > *:nth-child(1){ transition-delay:0s }
.anim [data-anim="g"].vista > *:nth-child(2){ transition-delay:.07s }
.anim [data-anim="g"].vista > *:nth-child(3){ transition-delay:.14s }
.anim [data-anim="g"].vista > *:nth-child(4){ transition-delay:.21s }
.anim [data-anim="g"].vista > *:nth-child(5){ transition-delay:.28s }
.anim [data-anim="g"].vista > *:nth-child(6){ transition-delay:.35s }
.anim [data-anim="g"].vista > *:nth-child(7){ transition-delay:.42s }
.anim [data-anim="g"].vista > *:nth-child(8){ transition-delay:.49s }

/* ---------- entrada del hero ---------- */

.anim .hero__titulo .pal{
  display:inline-block;
  opacity:0;
  transform:translateY(.75em);
  filter:blur(10px);
  animation:palabra .95s var(--sal) forwards;
  animation-delay:calc(var(--p) * .055s + .15s);
}
@keyframes palabra{ to{ opacity:1; transform:none; filter:none; } }

.anim .hero__bajada,
.anim .hero__acciones,
.anim .miga{
  opacity:0;
  animation:subir .9s var(--sal) forwards;
}
.anim .hero__bajada{ animation-delay:.55s }
.anim .hero__acciones{ animation-delay:.72s }
.anim .miga{ animation-delay:.1s }
@keyframes subir{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }

@keyframes aro{ to{ opacity:1; transform:none } }

.anim .hero__aro b{
  opacity:0;
  transform:scale(.8);
  animation:aro 1.8s var(--sal) .1s forwards;
}
/* el resplandor sigue al mouse, con amortiguación hecha en JS */
.hero__aro b{ transition:transform .9s var(--sal); }

/* ---------- header ---------- */

.cab{ transition:background .3s ease, box-shadow .3s ease; }
.cab__fila{ transition:min-height .35s var(--sal); }
.cab.achicada{
  background:rgba(2,0,35,.82);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 rgba(255,255,255,.1);
}
.cab.achicada .cab__fila{ min-height:62px; }

/* foco deslizante del menú */
.nav::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:var(--foco-w,0px); height:34px;
  transform:translate(var(--foco-x,0px), -50%);
  background:rgba(255,255,255,.1);
  opacity:var(--foco-o,0);
  transition:transform .4s var(--sal), width .4s var(--sal), opacity .25s ease;
  pointer-events:none;
}
@media (max-width:1040px){ .nav::before{ display:none } }

/* ---------- botones y enlaces ---------- */

.btn:active,.cab__cta:active{ transform:scale(.975); }
.btn,.cab__cta{ transition:background .2s ease, color .2s ease, border-color .2s ease, transform .14s ease-out; }

/* ---------- tarjetas ---------- */

a.tarjeta{ position:relative; overflow:hidden; }
a.tarjeta::before{
  content:"";
  position:absolute; inset:0;
  background:var(--lila);
  clip-path:inset(100% 0 0 0);
  transition:clip-path .45s var(--sal);
  z-index:0;
}
a.tarjeta > *{ position:relative; z-index:1; }
a.tarjeta svg{ transition:transform .45s var(--pop); }
@media (hover:hover) and (pointer:fine){
  a.tarjeta:hover::before{ clip-path:inset(0 0 0 0); }
  a.tarjeta:hover svg{ transform:translateY(-4px) scale(1.12); }
}

/* ---------- módulos ---------- */

.modulo{ position:relative; overflow:hidden; }
.modulo::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(18,165,148,.45), rgba(18,165,148,.08));
  clip-path:inset(0 100% 0 0);
  transition:clip-path .5s var(--sal);
}
.modulo > *{ position:relative; z-index:1; }
.modulo::after{
  content:"→";
  margin-left:auto;
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .3s ease, transform .4s var(--sal);
  position:relative; z-index:1;
}
@media (hover:hover) and (pointer:fine){
  .modulo:hover::before{ clip-path:inset(0 0 0 0); }
  .modulo:hover::after{ opacity:.85; transform:none; }
}

/* ---------- cursos ---------- */

.curso{ position:relative; }
.curso::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px; height:2px;
  background:var(--acento);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .55s var(--sal);
}
@media (hover:hover) and (pointer:fine){
  .curso:hover::before{ clip-path:inset(0 0 0 0); }
}

/* ---------- ticker ---------- */

.ticker__pista{ animation-play-state:running; }
.ticker.quieto .ticker__pista{ animation-play-state:paused; }
.ticker{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* ---------- tablero ---------- */

.tablero__punto{ animation:pulso 2.2s ease-in-out infinite; }
@keyframes pulso{
  0%,100%{ box-shadow:0 0 0 0 rgba(245,181,68,.55) }
  70%    { box-shadow:0 0 0 7px rgba(245,181,68,0) }
}

.tablero__ruta path{
  stroke-dasharray:var(--largo,300);
  stroke-dashoffset:var(--largo,300);
}
.tablero.corriendo .tablero__ruta .via{
  animation:trazo 1.6s var(--suave) .2s forwards;
}
.tablero.corriendo .tablero__ruta .desvio{
  animation:trazo 1s var(--suave) 1.5s forwards;
}
@keyframes trazo{ to{ stroke-dashoffset:0 } }

.tablero__ruta circle{ opacity:0; transform-box:fill-box; transform-origin:center; }
.tablero.corriendo .tablero__ruta circle{ animation:aparece .5s var(--pop) forwards; }
.tablero.corriendo .tablero__ruta .ini{ animation-delay:.25s }
.tablero.corriendo .tablero__ruta .fin{ animation-delay:1.5s }
.tablero.corriendo .tablero__ruta .aqui{ animation-delay:1.9s }
@keyframes aparece{ from{ opacity:0; transform:scale(.4) } to{ opacity:1; transform:none } }

.tablero.corriendo .tablero__ruta .aqui{
  animation:aparece .5s var(--pop) 1.9s forwards, titila 1.8s ease-in-out 2.5s infinite;
}
@keyframes titila{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.tablero__alerta{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--sal), transform .6s var(--sal);
}
.tablero.corriendo .tablero__alerta{ opacity:1; transform:none; transition-delay:2.3s; }

/* ---------- reduced motion: de verdad ---------- */

@media (prefers-reduced-motion: reduce){
  .anim [data-anim],
  .anim [data-anim="g"] > *{ opacity:1 !important; transform:none !important; filter:none !important; }
  .anim .hero__titulo .pal,
  .anim .hero__bajada,
  .anim .hero__acciones,
  .anim .miga,
  .anim .hero__aro b{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
  .hero__aro i{ animation:none !important; opacity:.3 !important; }
  .hero__aro i:nth-of-type(1){ transform:scale(.4) !important; }
  .hero__aro i:nth-of-type(2){ transform:scale(.62) !important; }
  .hero__aro i:nth-of-type(3){ transform:scale(.84) !important; }
  .hero__aro i:nth-of-type(4){ transform:scale(1) !important; }
  .tablero__ruta path{ stroke-dashoffset:0 !important; animation:none !important; }
  .tablero__ruta circle{ opacity:1 !important; animation:none !important; }
  .tablero__alerta{ opacity:1 !important; transform:none !important; }
  .ticker__pista{ animation:none !important; transform:none !important; }
  .tablero__punto{ animation:none !important; }
  .hero__aro b{ transition:none !important; }
}