/* ==========================================================================
   RED22 · Sistema de diseño
   Paleta derivada del logotipo oficial (magenta → vino → verde nodo)
   Autor: propuesta de rediseño 2026
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Marca */
  --magenta-300:#FF6FBE;
  --magenta-400:#FF2D9B;
  --magenta-500:#E5087C;
  --magenta-600:#9F0656;
  --vino-700:#6B0D37;
  --vino-800:#4F0527;
  --vino-900:#2A0418;

  --verde-300:#8CFF6E;
  --verde-400:#5CFF3D;
  --verde-500:#22F000;
  --verde-600:#12B800;

  /* Neutros */
  --tinta-950:#050408;
  --tinta-900:#0A0810;
  --tinta-850:#100C18;
  --tinta-800:#17121F;
  --tinta-700:#221B2D;

  /* Acentos para TEXTO e ICONOS. Los colores de marca no se tocan: el verde
     neón es ilegible sobre blanco, pero debe seguir brillando en los degradados. */
  --acento:#5CFF3D;
  --acento-fuerte:#22F000;
  --acento-rosa:#FF6FBE;
  --tinte-verde:rgba(34,240,0,.07);
  --borde-verde:rgba(34,240,0,.22);

  /* Superficies y velos */
  --sup-1:rgba(255,255,255,.03);
  --sup-2:rgba(255,255,255,.06);
  --sup-3:rgba(255,255,255,.10);
  --pista:rgba(255,255,255,.07);
  --rejilla-linea:rgba(255,255,255,.028);
  --nav-fondo:rgba(8,6,13,.78);
  --menu-fondo:rgba(5,4,8,.97);
  --marq-texto:#FFFFFF;
  --ruido-mezcla:overlay;
  --ruido-opacidad:.032;
  --aurora-opacidad:.34;
  --canvas-opacidad:.85;

  --texto:#F4F1F8;
  --texto-2:#A79FB4;
  --texto-3:#6F6780;
  --sello-texto:#E7E2EE;   /* los sellos del hero van casi en blanco */
  --linea:rgba(255,255,255,.085);
  --linea-2:rgba(255,255,255,.15);

  /* Gradientes de marca */
  --grad-marca:linear-gradient(115deg,var(--magenta-400) 0%,var(--magenta-500) 42%,var(--verde-500) 118%);
  --grad-texto:linear-gradient(100deg,#FFFFFF 0%,#FFD9EE 38%,var(--magenta-300) 62%,var(--verde-400) 100%);
  --grad-vino:linear-gradient(160deg,var(--vino-800) 0%,var(--tinta-900) 70%);
  --grad-panel:linear-gradient(160deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 100%);

  /* Sombras y glow */
  --glow-magenta:0 0 0 1px rgba(255,45,155,.28),0 18px 60px -18px rgba(229,8,124,.65);
  --glow-verde:0 0 0 1px rgba(34,240,0,.25),0 18px 60px -20px rgba(34,240,0,.45);
  --sombra-card:0 24px 60px -30px rgba(0,0,0,.9);

  /* Tipografía */
  --f-display:"Sora","Segoe UI",system-ui,sans-serif;
  --f-texto:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  --t-xs:clamp(.72rem,.68rem + .18vw,.8rem);
  --t-sm:clamp(.84rem,.8rem + .2vw,.93rem);
  --t-base:clamp(.97rem,.93rem + .25vw,1.06rem);
  --t-lg:clamp(1.1rem,1.02rem + .4vw,1.28rem);
  --t-xl:clamp(1.32rem,1.18rem + .7vw,1.7rem);
  --t-2xl:clamp(1.7rem,1.42rem + 1.35vw,2.6rem);
  --t-3xl:clamp(2.15rem,1.65rem + 2.4vw,3.9rem);
  --t-4xl:clamp(2.7rem,1.8rem + 4vw,5.4rem);
  --t-4xl-caps:clamp(2.9rem,1.9rem + 4vw,5.1rem);

  /* Métrica */
  --ancho:1220px;
  --gutter:clamp(1.15rem,4vw,2.4rem);
  --sec-y:clamp(4.5rem,10vw,9rem);
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px;

  /* Motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-inout:cubic-bezier(.65,.05,.36,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:118px}
body{
  font-family:var(--f-texto);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--texto);
  background:var(--tinta-950);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
body.no-scroll{overflow:hidden}
img,video,svg,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--acento-fuerte);outline-offset:3px;border-radius:4px}
::selection{background:var(--magenta-500);color:#fff}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.06;letter-spacing:-.028em}

/* Versales compensadas: cuerpo menor + tracking negativo + interlínea cerrada,
   para que ocupen el mismo alto que la versión en caja baja. */
.titulo-caps{text-transform:uppercase;letter-spacing:-.035em;line-height:.95}
h1.titulo-caps{font-size:var(--t-4xl-caps)}
h2.titulo-caps{font-size:calc(var(--t-3xl) * .95)}
h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-xl);line-height:1.2}
p{text-wrap:pretty}

/* Scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--tinta-950)}
::-webkit-scrollbar-thumb{background:var(--vino-800);border-radius:99px;border:2px solid var(--tinta-950)}
::-webkit-scrollbar-thumb:hover{background:var(--magenta-600)}

/* Los hijos de rejilla no encogen por debajo de min-content salvo que se indique */
.hero-in>*,.campo-in>*,.calc>*,.tec-panel>*,.bento>*,
.planes-grid>*,.sedes>*,.proceso>*,.pie-top>*,.calc-usos>*{min-width:0}

/* ---------- 3. LAYOUT / UTILIDADES --------------------------------------- */
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.seccion{position:relative;padding-block:var(--sec-y)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--verde-500);color:#000;padding:.7rem 1.2rem;border-radius:0 0 10px 0;font-weight:700;
}
.skip:focus{left:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--acento);
  padding:.42rem .9rem;border-radius:99px;
  background:var(--tinte-verde);border:1px solid var(--borde-verde);
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--acento-fuerte);
  box-shadow:0 0 10px 2px var(--acento-fuerte);animation:latido 2.2s ease-in-out infinite;
}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

.encabezado-seccion{max-width:62ch;margin-bottom:clamp(2.4rem,5vw,4rem)}
.encabezado-seccion.centrado{margin-inline:auto;text-align:center}
.encabezado-seccion h2{margin:1.1rem 0 .9rem}
.encabezado-seccion p{color:var(--texto-2);font-size:var(--t-lg)}

.grad-texto{
  background:var(--grad-texto);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.verde{color:var(--acento)}
.magenta{color:var(--magenta-400)}

/* Botones ---------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);letter-spacing:.01em;
  padding:.95rem 1.7rem;border-radius:99px;isolation:isolate;
  transition:transform .45s var(--e-spring),box-shadow .45s var(--e-out),color .3s,border-color .3s;
  will-change:transform;
}
.btn svg{width:18px;height:18px;flex:none;transition:transform .45s var(--e-out)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.985)}

.btn-primario{color:#fff;background:var(--grad-marca);background-size:180% 180%;box-shadow:var(--glow-magenta)}
.btn-primario::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(115deg,var(--verde-500),var(--magenta-400));
  opacity:0;transition:opacity .5s var(--e-out);
}
.btn-primario:hover::after{opacity:1}
.btn-primario:hover{box-shadow:0 0 0 1px rgba(34,240,0,.35),0 22px 60px -18px rgba(34,240,0,.55)}
.btn-primario:hover svg{transform:translateX(3px)}

.btn-fantasma{
  color:var(--texto);border:1px solid var(--linea-2);
  background:var(--sup-1);backdrop-filter:blur(10px);
}
.btn-fantasma:hover{border-color:var(--acento-fuerte);color:var(--acento);box-shadow:var(--glow-verde)}

.btn-wa{background:#25D366;color:#04220F;box-shadow:0 18px 50px -20px rgba(37,211,102,.8)}
.btn-wa:hover{box-shadow:0 22px 60px -18px rgba(37,211,102,.95)}

/* Panel de vidrio --------------------------------------------------------- */
.panel{
  position:relative;border-radius:var(--r-lg);border:1px solid var(--linea);
  background:var(--grad-panel);backdrop-filter:blur(14px);
  box-shadow:var(--sombra-card);overflow:hidden;
}
/* Foco de luz que sigue al cursor */
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,45,155,.16),transparent 65%);
  opacity:0;transition:opacity .45s var(--e-out);
}
.panel:hover::before{opacity:1}

/* Ruido y aurora ---------------------------------------------------------- */
.ruido{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--ruido-opacidad);mix-blend-mode:var(--ruido-mezcla);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora span{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--aurora-opacidad);
  animation:flotar 22s ease-in-out infinite;
}
.aurora span:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-14vw;background:var(--magenta-500)}
.aurora span:nth-child(2){width:38vw;height:38vw;right:-10vw;top:18vh;background:var(--vino-700);animation-delay:-7s}
.aurora span:nth-child(3){width:30vw;height:30vw;left:38vw;bottom:-16vw;background:var(--verde-600);opacity:.17;animation-delay:-14s}
@keyframes flotar{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(4vw,-3vh,0) scale(1.12)}
  66%{transform:translate3d(-3vw,4vh,0) scale(.93)}
}

/* Rejilla técnica de fondo */
.rejilla{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--rejilla-linea) 1px,transparent 1px),
    linear-gradient(90deg,var(--rejilla-linea) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 78%);
}

/* ---------- 4. MOTION: primitivas de aparición --------------------------- */
[data-anim]{opacity:0;will-change:transform,opacity}
[data-anim="subir"]{transform:translateY(34px)}
[data-anim="bajar"]{transform:translateY(-28px)}
[data-anim="izq"]{transform:translateX(-40px)}
[data-anim="der"]{transform:translateX(40px)}
[data-anim="zoom"]{transform:scale(.92)}
[data-anim="difuminar"]{filter:blur(14px);transform:translateY(20px)}
[data-anim].visible{
  opacity:1;transform:none;filter:none;
  transition:opacity .95s var(--e-out),transform 1.05s var(--e-out),filter 1.1s var(--e-out);
  transition-delay:var(--d,0ms);
}

/* Revelado de titulares palabra por palabra */
.reveal-linea{display:block;overflow:hidden;padding-bottom:.06em}
.reveal-palabra{
  display:inline-block;opacity:0;
  transform:translateY(.36em);
  transition:transform .9s var(--e-out),opacity .55s ease-out;
  transition-delay:var(--d,0ms);
}
.visible .reveal-palabra,.reveal-listo .reveal-palabra{
  transform:none;opacity:1;
}

/* Un titular con degradado no puede animar sus palabras por dentro: con
   background-clip:text el degradado lo pinta el contenedor, así que la opacidad
   de cada palabra no le afecta y el trozo con color entra de golpe. La solución
   es pasar el degradado a cada palabra y recolocarlo por JS (alinearDegradados)
   para que siga leyéndose como una sola franja continua. */
.grad-texto.grad-repartido{background:none;color:inherit}
.grad-repartido .reveal-palabra{
  background:var(--grad-texto);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* Estado momentáneo mientras se miden las palabras: sin transformaciones, para
   que las medidas sean las de la maquetación real. */
.midiendo-grad .reveal-palabra{transform:none!important;transition:none!important}

/* ---------- 5. PRELOADER ------------------------------------------------- */
#preloader{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;gap:1.6rem;
  background:var(--tinta-950);
  transition:opacity .7s var(--e-out),visibility .7s;
}
#preloader.fuera{opacity:0;visibility:hidden}
.pre-marca{display:grid;justify-items:center;gap:1.4rem}
.pre-marca img{width:clamp(88px,16vw,124px);animation:pulso-logo 1.8s var(--e-inout) infinite}
@keyframes pulso-logo{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(229,8,124,0))}50%{transform:scale(1.07);filter:drop-shadow(0 0 26px rgba(229,8,124,.75))}}
.pre-barra{width:min(220px,52vw);height:2px;background:var(--sup-3);border-radius:99px;overflow:hidden}
.pre-barra i{display:block;height:100%;width:0;background:var(--grad-marca);transition:width .3s linear}
.pre-txt{font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.3em;text-transform:uppercase;color:var(--texto-3)}

/* ---------- 6. CURSOR + PROGRESO ---------------------------------------- */
#cursor{
  position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;z-index:150;
  border:1px solid rgba(255,45,155,.75);pointer-events:none;
  transform:translate3d(-100px,-100px,0);
  transition:width .3s var(--e-out),height .3s var(--e-out),background .3s,border-color .3s;
  mix-blend-mode:difference;
}
#cursor.activo{width:52px;height:52px;background:rgba(34,240,0,.18);border-color:var(--acento-fuerte)}
#progreso{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  background:var(--grad-marca);transform:scaleX(0);transform-origin:0 50%;
}

/* ---------- 7. NAVEGACIÓN ------------------------------------------------ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .45s var(--e-out),backdrop-filter .45s,border-color .45s,padding .45s var(--e-out);
  border-bottom:1px solid transparent;padding-block:1.1rem;
}
#nav.compacto{
  background:var(--nav-fondo);backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--linea);padding-block:.6rem;
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav-logo{display:flex;align-items:center;gap:.7rem;flex:none}
.nav-logo img{width:auto;height:53px;transition:height .45s var(--e-out)}
/* Dos versiones del logotipo: la de texto blanco sobre oscuro y la de texto
   negro sobre claro, para que la palabra RED22 no se pierda en ningún tema. */
.marca-claro{display:none}
:root[data-tema="claro"] .marca-oscuro{display:none}
:root[data-tema="claro"] .marca-claro{display:block}
#nav.compacto .nav-logo img{height:45px}

.nav-menu{display:flex;align-items:center;gap:.35rem}
.nav-menu a{
  position:relative;padding:.55rem .9rem;border-radius:99px;
  font-size:var(--t-sm);font-weight:500;color:var(--texto-2);
  transition:color .3s var(--e-out);
}
.nav-menu a::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:var(--sup-2);opacity:0;transform:scale(.8);
  transition:opacity .35s var(--e-out),transform .35s var(--e-spring);
}
.nav-menu a:hover{color:var(--texto)}
.nav-menu a:hover::before{opacity:1;transform:scale(1)}
.nav-menu a.actual{color:var(--texto)}
.nav-menu a.actual::after{
  content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0;
  width:16px;height:2px;border-radius:99px;background:var(--grad-marca);
}
.nav-acciones{display:flex;align-items:center;gap:.7rem;flex:none}
.nav-acciones .btn{padding:.7rem 1.3rem}

.nav-burger{
  display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--linea-2);
  place-items:center;gap:5px;background:var(--sup-1);
}
.nav-burger i{display:block;width:18px;height:2px;background:var(--texto);border-radius:9px;transition:transform .4s var(--e-out),opacity .3s}
.nav-burger.abierto i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.abierto i:nth-child(2){opacity:0}
.nav-burger.abierto i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

#menu-movil{
  position:fixed;inset:0;z-index:99;display:grid;align-content:center;gap:.4rem;
  padding:6rem var(--gutter) 3rem;
  background:var(--menu-fondo);backdrop-filter:blur(22px);
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .75s var(--e-inout);
}
#menu-movil.abierto{clip-path:circle(150% at calc(100% - 44px) 44px)}
#menu-movil a{
  font-family:var(--f-display);font-size:clamp(1.5rem,7vw,2.3rem);font-weight:800;
  padding-block:.5rem;border-bottom:1px solid var(--linea);
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out),color .3s;
}
#menu-movil.abierto a{opacity:1;transform:none;transition-delay:calc(var(--i)*70ms + 180ms)}
#menu-movil a:hover{color:var(--acento)}
.mm-pie{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- 8. HERO ------------------------------------------------------ */
#inicio{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(6.2rem,11vh,7.6rem) clamp(3.2rem,6vh,4.4rem);overflow:hidden;
}
#red-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:var(--canvas-opacidad)}
#inicio::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34vh;z-index:2;pointer-events:none;
  background:linear-gradient(to top,var(--tinta-950),transparent);
}
.hero-in{position:relative;z-index:3;display:grid;gap:clamp(2.6rem,6vw,4.4rem);align-items:center}
@media(min-width:1000px){.hero-in{grid-template-columns:1.08fr .92fr}}

.hero-titulo{font-size:var(--t-4xl);margin:1.1rem 0 1.2rem}
.hero-sub{font-size:var(--t-lg);color:var(--texto-2);max-width:52ch}
.hero-sub strong{color:var(--texto);font-weight:600}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem}

.hero-sellos{
  display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.7rem;
  padding-top:1.3rem;border-top:1px solid var(--linea);
}
.sello{display:flex;align-items:center;gap:.6rem;font-size:var(--t-xs);color:var(--sello-texto);letter-spacing:.05em}
.sello svg{width:17px;height:17px;color:var(--acento-fuerte);flex:none}

/* Panel de estado en vivo */
.hero-visual{position:relative}
.tarjeta-estado{padding:1.5rem 1.5rem 1.35rem}
.te-cabeza{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.te-titulo{font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}
.te-vivo{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--t-xs);font-weight:700;color:var(--acento)}
.te-vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verde-500);box-shadow:0 0 10px 2px var(--verde-500);animation:latido 1.6s ease-in-out infinite}

.te-medidor{position:relative;display:grid;place-items:center;margin-bottom:1.1rem}
.te-medidor svg{width:min(205px,54vw);height:auto;transform:rotate(-90deg)}
.te-medidor circle{fill:none;stroke-width:9;stroke-linecap:round}
.te-pista{stroke:var(--pista)}
.te-valor-arco{stroke:url(#gradArco);stroke-dasharray:534;stroke-dashoffset:534;transition:stroke-dashoffset 2.2s var(--e-out)}
.te-centro{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.te-num{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,7vw,3.2rem);line-height:1;letter-spacing:-.04em}
.te-uni{font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--texto-3);margin-top:.4rem}

.te-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;text-align:center}
.te-stat{padding:.85rem .5rem;border-radius:var(--r-sm);background:var(--sup-2);border:1px solid var(--linea)}
.te-stat b{display:block;font-family:var(--f-display);font-size:var(--t-lg);font-weight:800;letter-spacing:-.02em}
.te-stat span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3)}

.hero-scroll{
  position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;z-index:4;
  display:grid;justify-items:center;gap:.6rem;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--texto-3);
}
.hero-scroll i{display:block;width:1px;height:44px;background:linear-gradient(to bottom,var(--verde-500),transparent);animation:caer 2.2s var(--e-inout) infinite}
@keyframes caer{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 9. MARQUESINA ------------------------------------------------ */
.marquesina{
  position:relative;z-index:2;padding-block:1.1rem;overflow:hidden;
  border-block:1px solid var(--linea);background:var(--sup-1);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marq-pista{display:flex;width:max-content;animation:desfilar 38s linear infinite}
.marquesina:hover .marq-pista{animation-play-state:paused}
.marq-grupo{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem}
.marq-grupo span{
  font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);
  letter-spacing:.2em;text-transform:uppercase;color:var(--marq-texto);white-space:nowrap;
}
.marq-grupo b{color:var(--acento-fuerte);font-size:1.1em}
@keyframes desfilar{to{transform:translateX(-50%)}}

/* ---------- 10. BENTO / VENTAJAS ---------------------------------------- */
.bento{display:grid;gap:clamp(.8rem,1.6vw,1.15rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(178px,auto)}}
.celda{
  display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;
  padding:clamp(1.3rem,2.5vw,1.9rem);grid-column:span 2;
  transition:transform .6s var(--e-out),border-color .5s;
}
.celda:hover{transform:translateY(-5px);border-color:var(--linea-2)}
.celda h3{font-size:var(--t-lg)}
.celda p{font-size:var(--t-sm);color:var(--texto-2)}
.celda-icono{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:auto;
  background:rgba(255,45,155,.1);border:1px solid rgba(255,45,155,.25);color:var(--acento-rosa);
  transition:transform .6s var(--e-spring),background .4s,color .4s,border-color .4s;
}
.celda:hover .celda-icono{transform:scale(1.1) rotate(-6deg);background:rgba(34,240,0,.12);border-color:rgba(34,240,0,.3);color:var(--acento)}
.celda-icono svg{width:21px;height:21px}

@media(min-width:820px){
  .celda-a{grid-column:span 3;grid-row:span 2}
  .celda-b{grid-column:span 3}
  .celda-c{grid-column:span 3}
  .celda-d,.celda-e,.celda-f{grid-column:span 2}
}
/* Celda con foto de fondo */
.celda-foto{justify-content:flex-end;min-height:280px;color:#fff;background:var(--tinta-900)}
.celda-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.3s var(--e-out)}
.celda-foto:hover img{transform:scale(1.07)}
.celda-foto::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(5,4,8,.96) 8%,rgba(5,4,8,.55) 48%,rgba(42,4,24,.35) 100%);
}
.celda-foto>*{position:relative;z-index:2}
.celda-foto .celda-icono{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}

/* Contador grande */
.celda-cifra b{
  display:block;font-family:var(--f-display);font-weight:800;letter-spacing:-.045em;line-height:1;
  font-size:clamp(2.6rem,7vw,4rem);
  background:var(--grad-texto);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 11. TECNOLOGÍA (comparador) --------------------------------- */
.tec-tabs{
  position:relative;isolation:isolate;display:inline-flex;gap:.3rem;padding:.35rem;
  border-radius:99px;background:var(--sup-2);border:1px solid var(--linea);margin-bottom:2.4rem;
}
.tec-tab{
  position:relative;padding:.7rem 1.5rem;border-radius:99px;z-index:1;
  font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);color:var(--texto-2);
  transition:color .35s var(--e-out);
}
.tec-tab[aria-selected="true"]{color:#fff}
.tec-indicador{
  position:absolute;left:0;top:.35rem;bottom:.35rem;width:0;
  border-radius:99px;background:var(--grad-marca);z-index:-1;
  transition:transform .55s var(--e-spring),width .55s var(--e-spring);
}
.tec-panel{display:none;gap:clamp(2rem,5vw,3.6rem);align-items:center}
.tec-panel.activo{display:grid;animation:entrar-suave .8s var(--e-out) both}
@media(min-width:900px){.tec-panel{grid-template-columns:1fr 1fr}}
@keyframes entrar-suave{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.tec-media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--linea);aspect-ratio:4/3}
.tec-media img{width:100%;height:100%;object-fit:cover}
.tec-media::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(229,8,124,.22),transparent 55%,rgba(34,240,0,.14))}
.tec-lista{display:grid;gap:.75rem;margin-top:1.6rem}
.tec-lista li{display:flex;gap:.8rem;align-items:flex-start;font-size:var(--t-sm);color:var(--texto-2)}
.tec-lista svg{width:19px;height:19px;flex:none;margin-top:.2rem;color:var(--acento-fuerte)}
.tec-metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:2rem}
.tec-metrica{padding:1rem;border-radius:var(--r-sm);background:var(--sup-2);border:1px solid var(--linea);text-align:center}
.tec-metrica b{display:block;font-family:var(--f-display);font-size:var(--t-xl);font-weight:800;color:var(--acento)}
.tec-metrica span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}

/* ---------- 12. PLANES --------------------------------------------------- */
.planes-toggle{display:flex;justify-content:center;margin-bottom:3rem}
.planes-grid{display:grid;gap:clamp(1rem,2vw,1.4rem)}
@media(min-width:780px){.planes-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan{
  display:flex;flex-direction:column;padding:clamp(1.6rem,3vw,2.2rem);
  transition:transform .6s var(--e-out),border-color .5s,box-shadow .6s;
  transform-style:preserve-3d;
}
.plan:hover{border-color:var(--linea-2)}
.plan-destacado{border-color:rgba(255,45,155,.4);box-shadow:var(--glow-magenta)}
.plan-destacado::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(160deg,rgba(255,45,155,.13),transparent 55%);
}
.plan>*{position:relative;z-index:1}
.plan-tag{
  position:absolute;top:1.1rem;right:1.1rem;
  font-family:var(--f-display);font-size:.63rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:.35rem .75rem;border-radius:99px;background:var(--grad-marca);color:#fff;
}
.plan-nombre{font-family:var(--f-display);font-size:var(--t-lg);font-weight:800;letter-spacing:-.02em}
.plan-desc{font-size:var(--t-sm);color:var(--texto-3);margin-top:.3rem;min-height:2.6em}
.plan-vel{display:flex;align-items:baseline;gap:.5rem;margin:1.5rem 0 .2rem}
.plan-vel b{
  font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,7vw,3.4rem);line-height:1;letter-spacing:-.05em;
  background:var(--grad-texto);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.plan-vel span{font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);color:var(--texto-2)}
.plan-precio{display:flex;align-items:baseline;gap:.4rem;padding-block:1.1rem;margin-block:1.1rem;border-block:1px solid var(--linea)}
.plan-precio b{font-family:var(--f-display);font-size:var(--t-2xl);font-weight:800;letter-spacing:-.03em}
.plan-precio span{font-size:var(--t-sm);color:var(--texto-3)}
.plan-lista{display:grid;gap:.7rem;margin-bottom:1.8rem;flex:1}
.plan-lista li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-sm);color:var(--texto-2)}
.plan-lista svg{width:17px;height:17px;flex:none;margin-top:.28rem;color:var(--acento-fuerte)}
.plan .btn{width:100%}
.planes-nota{margin-top:1.8rem;text-align:center;font-size:var(--t-xs);color:var(--texto-3)}

/* ---------- 13. CALCULADORA --------------------------------------------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3.2rem);align-items:center}
@media(min-width:940px){.calc{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.calc-panel{padding:clamp(1.6rem,3.2vw,2.4rem)}
.calc-valor{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.4rem}
.calc-valor b{
  font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,10vw,4.6rem);line-height:1;letter-spacing:-.05em;
  background:var(--grad-texto);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.calc-valor span{font-family:var(--f-display);font-weight:700;font-size:var(--t-xl);color:var(--texto-2)}
.calc-etiqueta{font-size:var(--t-sm);color:var(--texto-3);margin-bottom:1.8rem}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--magenta-500) var(--pct,30%),var(--sup-3) var(--pct,30%));
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:4px solid var(--magenta-500);
  box-shadow:0 0 0 6px rgba(229,8,124,.18),0 6px 18px rgba(0,0,0,.5);
  transition:transform .3s var(--e-spring),box-shadow .3s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 0 10px rgba(229,8,124,.22),0 6px 18px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--magenta-500);cursor:pointer;
}
.calc-escala{display:flex;justify-content:space-between;margin-top:.8rem;font-size:var(--t-xs);color:var(--texto-3)}
.calc-plan{
  margin-top:1.9rem;padding:1.1rem 1.3rem;border-radius:var(--r-md);
  background:rgba(34,240,0,.06);border:1px solid rgba(34,240,0,.22);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.calc-plan>div{min-width:0}
.calc-plan small{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.calc-plan b{font-family:var(--f-display);font-size:var(--t-lg);font-weight:800;overflow-wrap:anywhere}

.calc-usos{display:grid;grid-template-columns:1fr;gap:.8rem}
@media(min-width:560px){.calc-usos{grid-template-columns:repeat(2,1fr)}}
.uso{
  display:flex;align-items:center;gap:.95rem;padding:1.05rem 1.15rem;
  border-radius:var(--r-md);border:1px solid var(--linea);background:var(--sup-1);
  transition:border-color .45s var(--e-out),background .45s,opacity .45s,transform .45s var(--e-out);
}
.uso.apto{border-color:rgba(34,240,0,.35);background:rgba(34,240,0,.07)}
.uso.no-apto{opacity:.34}
.uso-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--sup-2);color:var(--texto-2);transition:background .4s,color .4s}
.uso.apto .uso-ico{background:rgba(34,240,0,.14);color:var(--acento)}
.uso-ico svg{width:20px;height:20px}
.uso>div{min-width:0}
.uso b{display:block;font-size:var(--t-sm);font-weight:600;overflow-wrap:anywhere}
.uso small{font-size:var(--t-xs);color:var(--texto-3)}

/* ---------- 14. CAMPO / VIDEOS ------------------------------------------ */
#campo{background:linear-gradient(180deg,var(--tinta-950),var(--vino-900) 45%,var(--tinta-950))}
.campo-in{display:grid;gap:clamp(2.4rem,5vw,4rem);align-items:center}
@media(min-width:1000px){.campo-in{grid-template-columns:1fr 1fr}}
.campo-videos{
  display:flex;gap:clamp(.8rem,2vw,1.4rem);justify-content:center;
  perspective:1400px;overflow:visible;padding:1.5rem 0;
}
.telefono{
  position:relative;width:min(238px,42vw);aspect-ratio:9/19.3;flex:none;
  border-radius:34px;padding:9px;background:transparent;
  border:1px solid var(--linea-2);
  box-shadow:0 40px 90px -35px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .9s var(--e-out);
}
.telefono:nth-child(1){transform:rotateY(9deg) rotateZ(-2.5deg) translateY(14px)}
.telefono:nth-child(2){transform:rotateY(-9deg) rotateZ(2.5deg)}
.campo-videos:hover .telefono{transform:rotateY(0) rotateZ(0) translateY(0)}
.telefono::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:33px;
  background:linear-gradient(150deg,#2b2436,#0d0a13);
}
.telefono::before{
  content:"";position:absolute;top:16px;left:50%;translate:-50% 0;z-index:2;
  width:64px;height:5px;border-radius:99px;background:rgba(0,0,0,.75);
}
.telefono video{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:26px;background:#000}
.telefono-luz{
  position:absolute;inset:-14%;z-index:-1;border-radius:50%;filter:blur(55px);opacity:.45;
  background:radial-gradient(circle,var(--magenta-500),transparent 68%);
}
.telefono:nth-child(2) .telefono-luz{background:radial-gradient(circle,var(--verde-600),transparent 68%)}
.campo-cap{margin-top:1.3rem;text-align:center;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.campo-datos{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-top:2.2rem}
.campo-dato{padding:1.2rem;border-radius:var(--r-md);border:1px solid var(--linea);background:var(--sup-2)}
.campo-dato b{display:block;font-family:var(--f-display);font-size:var(--t-2xl);font-weight:800;letter-spacing:-.035em;line-height:1;background:var(--grad-texto);-webkit-background-clip:text;background-clip:text;color:transparent}
.campo-dato span{font-size:var(--t-xs);color:var(--texto-3)}

/* ---------- 15. PROCESO ------------------------------------------------- */
.proceso{position:relative;display:grid;gap:clamp(1rem,2vw,1.3rem)}
@media(min-width:860px){.proceso{grid-template-columns:repeat(4,1fr)}}
.proceso::before{
  content:"";position:absolute;left:0;right:0;top:46px;height:1px;z-index:0;display:none;
  background:linear-gradient(90deg,var(--magenta-500),var(--verde-500));
  transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform 1.6s var(--e-out);
}
@media(min-width:860px){.proceso::before{display:block}}
.paso{position:relative;z-index:1;padding:clamp(1.4rem,2.6vw,1.9rem)}
.paso-num{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:1.2rem;
  font-family:var(--f-display);font-weight:800;font-size:var(--t-lg);
  background:var(--tinta-900);border:1px solid var(--linea-2);color:var(--texto-2);
  transition:background .5s var(--e-out),color .5s,border-color .5s,transform .6s var(--e-spring);
}
.paso:hover .paso-num{background:var(--grad-marca);color:#fff;border-color:transparent;transform:scale(1.08)}
.paso h3{font-size:var(--t-lg);margin-bottom:.5rem}
.paso p{font-size:var(--t-sm);color:var(--texto-2)}

/* ---------- 16. COBERTURA / SEDES --------------------------------------- */
.sedes{display:grid;gap:clamp(1rem,2vw,1.3rem)}
@media(min-width:800px){.sedes{grid-template-columns:repeat(3,1fr)}}
.sede{padding:clamp(1.5rem,2.8vw,2rem);display:flex;flex-direction:column;transition:transform .6s var(--e-out),border-color .5s}
.sede:hover{transform:translateY(-6px);border-color:var(--linea-2)}
.sede-pin{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.3rem;
  background:var(--grad-marca);color:#fff;box-shadow:0 12px 34px -14px rgba(229,8,124,.85);
}
.sede-pin svg{width:21px;height:21px}
.sede h3{font-size:var(--t-lg);margin-bottom:.15rem}
.sede-ciudad{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--acento);margin-bottom:1.1rem}
.sede-dato{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-sm);color:var(--texto-2);margin-bottom:.7rem}
.sede-dato svg{width:17px;height:17px;flex:none;margin-top:.25rem;color:var(--texto-3)}
.sin-corte{white-space:nowrap}
.sede-tels{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.sede-tels a{
  font-size:var(--t-xs);padding:.35rem .7rem;border-radius:99px;
  border:1px solid var(--linea);background:var(--sup-1);color:var(--texto-2);
  transition:border-color .3s,color .3s,background .3s;
}
.sede-tels a:hover{border-color:var(--acento-fuerte);color:var(--acento);background:rgba(34,240,0,.07)}
.sede .btn{margin-top:auto;padding-top:1.4rem}
.sede-link{
  margin-top:auto;padding-top:1.4rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);color:var(--acento);
}
.sede-link svg{width:16px;height:16px;transition:transform .4s var(--e-out)}
.sede-link:hover svg{transform:translateX(4px)}

/* ---------- 17. OPINIONES ----------------------------------------------- */
.op-pista{display:flex;cursor:grab;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.2rem;scrollbar-width:none}
.op-pista::-webkit-scrollbar{display:none}
.opinion{
  flex:0 0 min(370px,84vw);scroll-snap-align:center;padding:1.8rem;
  display:flex;flex-direction:column;gap:1.1rem;
}
.op-estrellas{display:flex;gap:.2rem;color:var(--acento-fuerte)}
.op-estrellas svg{width:16px;height:16px}
.opinion p{font-size:var(--t-sm);color:var(--texto-2);flex:1}
.op-autor{display:flex;align-items:center;gap:.85rem;padding-top:1.1rem;border-top:1px solid var(--linea)}
.op-avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--f-display);font-weight:800;font-size:var(--t-sm);color:#fff;background:var(--grad-marca);
}
.op-autor b{display:block;font-size:var(--t-sm)}
.op-autor span{font-size:var(--t-xs);color:var(--texto-3)}
.op-nav{display:flex;justify-content:center;gap:.6rem;margin-top:1.4rem}
.op-nav button{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--linea-2);color:var(--texto-2);
  transition:border-color .35s,color .35s,transform .35s var(--e-spring),background .35s;
}
.op-nav button:hover{border-color:var(--acento-fuerte);color:var(--acento);background:rgba(34,240,0,.07);transform:scale(1.08)}
.op-nav svg{width:18px;height:18px}

/* ---------- 18. FAQ ------------------------------------------------------ */
.faq{display:grid;gap:.7rem;max-width:840px;margin-inline:auto}
.faq-item{border:1px solid var(--linea);border-radius:var(--r-md);background:var(--sup-1);overflow:hidden;transition:border-color .4s,background .4s}
.faq-item[data-abierto="true"]{border-color:rgba(255,45,155,.35);background:rgba(255,45,155,.045)}
.faq-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.25rem 1.4rem;text-align:left;
  font-family:var(--f-display);font-weight:700;font-size:var(--t-base);
  transition:color .3s;
}
.faq-btn:hover{color:var(--acento-rosa)}
.faq-mas{position:relative;width:22px;height:22px;flex:none}
.faq-mas::before,.faq-mas::after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  background:var(--texto-2);border-radius:9px;transition:transform .45s var(--e-spring),background .3s;
}
.faq-mas::before{width:13px;height:2px}
.faq-mas::after{width:2px;height:13px}
.faq-item[data-abierto="true"] .faq-mas::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-item[data-abierto="true"] .faq-mas::before{background:var(--magenta-400)}
.faq-cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e-out)}
.faq-item[data-abierto="true"] .faq-cuerpo{grid-template-rows:1fr}
.faq-cuerpo>div{overflow:hidden}
.faq-cuerpo p{padding:0 1.4rem 1.35rem;font-size:var(--t-sm);color:var(--texto-2)}

/* ---------- 19. CTA FINAL ------------------------------------------------ */
#contacto{position:relative;overflow:hidden}
.cta{
  position:relative;padding:clamp(2.6rem,6vw,4.6rem);text-align:center;border-radius:var(--r-xl);
  border:1px solid rgba(255,45,155,.3);
  background:radial-gradient(120% 130% at 50% 0%,rgba(229,8,124,.3),transparent 62%),var(--tinta-900);
  overflow:hidden;
}
.cta::after{
  content:"";position:absolute;left:50%;bottom:-58%;translate:-50% 0;
  width:120%;aspect-ratio:2/1;border-radius:50%;filter:blur(70px);opacity:.24;
  background:radial-gradient(circle,var(--verde-500),transparent 66%);
}
.cta>*{position:relative;z-index:1}
.cta h2{margin-bottom:1.1rem}
.cta p{color:var(--texto-2);font-size:var(--t-lg);max-width:56ch;margin-inline:auto}
.cta-botones{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:2.3rem}
.cta-tels{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2.4rem;
  padding-top:2rem;border-top:1px solid var(--linea);
}
.cta-tels a{
  display:inline-flex;align-items:center;gap:.5rem;font-size:var(--t-sm);color:var(--texto-2);
  padding:.55rem 1rem;border-radius:99px;border:1px solid var(--linea);
  transition:border-color .3s,color .3s,transform .35s var(--e-spring);
}
.cta-tels a:hover{border-color:var(--acento-fuerte);color:var(--acento);transform:translateY(-2px)}
.cta-tels svg{width:15px;height:15px}

/* ---------- 20. FOOTER --------------------------------------------------- */
footer{border-top:1px solid var(--linea);padding-block:clamp(3rem,6vw,4.5rem) 2rem;background:var(--tinta-900)}
.pie-top{display:grid;gap:2.6rem;margin-bottom:3rem}
@media(min-width:820px){.pie-top{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.pie-marca img{height:52px;width:auto;margin-bottom:1.2rem}
.pie-marca p{font-size:var(--t-sm);color:var(--texto-3);max-width:34ch}
.pie-redes{display:flex;gap:.55rem;margin-top:1.4rem}
.pie-redes a{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--linea);color:var(--texto-2);
  transition:transform .4s var(--e-spring),border-color .35s,color .35s,background .35s;
}
.pie-redes a:hover{transform:translateY(-4px);border-color:var(--magenta-400);color:var(--acento-rosa);background:rgba(255,45,155,.09)}
.pie-redes svg{width:19px;height:19px}
.pie-col h4{font-family:var(--f-display);font-size:var(--t-xs);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3);margin-bottom:1.2rem}
.pie-col li{margin-bottom:.65rem}
.pie-col a,.pie-col span{font-size:var(--t-sm);color:var(--texto-2);transition:color .3s,padding-left .3s}
.pie-col a:hover{color:var(--acento);padding-left:5px}
.pie-legal{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-top:2rem;border-top:1px solid var(--linea);font-size:var(--t-xs);color:var(--texto-3);
}
.pie-legal a:hover{color:var(--acento)}

/* ---------- 21. FLOTANTES ----------------------------------------------- */
.flotantes{position:fixed;right:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);z-index:90;display:grid;gap:.7rem;justify-items:end}
.fab{
  position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.85);
  transition:transform .45s var(--e-spring),box-shadow .4s,opacity .4s,visibility .4s;
}
.fab:hover{transform:scale(1.09) translateY(-3px)}
.fab svg{width:26px;height:26px}
.fab-wa svg{width:34px;height:34px}
.fab-wa{background:#25D366;color:#FFFFFF;box-shadow:0 16px 44px -12px rgba(37,211,102,.75)}
.fab-wa::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:onda 2.6s var(--e-out) infinite;
}
@keyframes onda{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.fab-top{
  background:var(--sup-2);border:1px solid var(--linea-2);color:var(--texto);
  backdrop-filter:blur(10px);opacity:0;visibility:hidden;
}
.fab-top.visible{opacity:1;visibility:visible}

/* ---------- 22. RESPONSIVE ---------------------------------------------- */
@media(max-width:960px){
  .nav-menu{display:none}
  .nav-burger{display:grid}
  .nav-acciones .btn-primario{display:none}
}
@media(max-width:820px){
  .bento{grid-template-columns:1fr}
  .celda{grid-column:span 1}
  .campo-datos{grid-template-columns:1fr 1fr}
  .tec-metricas{grid-template-columns:1fr}
}
@media(max-width:520px){
  .telefono{width:min(180px,44vw)}
  .hero-ctas .btn{width:100%}
  .cta-botones .btn{width:100%}
}
@media(hover:none){
  #cursor{display:none}
  .panel::before{display:none}
}

/* ---------- 23. ACCESIBILIDAD: menos movimiento -------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-anim]{opacity:1!important;transform:none!important;filter:none!important}
  .reveal-palabra{opacity:1!important;transform:none!important}
  .aurora,#red-canvas{display:none}
  .marq-pista{animation:none}
}

/* Impresión mínima */
@media print{
  #nav,#preloader,.flotantes,#cursor,#progreso,.aurora,#red-canvas,.ruido{display:none!important}
  body{background:#fff;color:#000}
}

/* Intro de la sección de campo */
.campo-intro{color:var(--texto-2);font-size:var(--t-lg);margin-top:1.2rem}

/* ---------- 24. GALERÍA EN MOVIMIENTO ------------------------------------ */
.galeria{
  padding-block:clamp(2.5rem,6vw,4.5rem);
  display:grid;gap:clamp(.7rem,1.6vw,1.1rem);
  background:linear-gradient(180deg,var(--tinta-950),var(--tinta-900));
}
.tira{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tira-pista{display:flex;width:max-content;animation:desfilar 58s linear infinite}
.tira-pista.inversa{animation-direction:reverse;animation-duration:70s}
.tira:hover .tira-pista{animation-play-state:paused}
.tira-grupo{display:flex;gap:clamp(.7rem,1.6vw,1.1rem);padding-right:clamp(.7rem,1.6vw,1.1rem)}
.tira-grupo figure{
  position:relative;flex:none;
  width:clamp(190px,26vw,330px);aspect-ratio:16/10;
  border-radius:var(--r-md);overflow:hidden;border:1px solid var(--linea);
}
.tira-grupo img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) contrast(1.05) brightness(.82);
  transition:filter .7s var(--e-out),transform 1.1s var(--e-out);
}
.tira-grupo figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(229,8,124,.26),transparent 55%,rgba(34,240,0,.18));
  opacity:.75;transition:opacity .6s var(--e-out);
}
.tira-grupo figure:hover img{filter:none;transform:scale(1.07)}
.tira-grupo figure:hover::after{opacity:.15}

@media(prefers-reduced-motion:reduce){
  .tira-pista{animation:none}
  .tira{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
}

/* ---------- 25. FONDO DE LA PANTALLA DE CARGA ---------------------------- */
/* Antes era un negro plano. Ahora reutiliza el lenguaje visual del hero:
   red de nodos, aurora de marca, rejilla técnica y ondas de señal. */
#preloader{overflow:hidden;isolation:isolate}
#pre-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.75}
#preloader .aurora{z-index:-1;opacity:.55}
#preloader .aurora span{filter:blur(110px)}

.pre-rejilla{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--rejilla-linea) 1px,transparent 1px),
    linear-gradient(90deg,var(--rejilla-linea) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 50%,#000 5%,transparent 62%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 5%,transparent 62%);
}

/* Viñeta: mantiene el centro limpio para que la marca no compita con el fondo */
#preloader::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 44%,transparent 18%,rgba(5,4,8,.34) 52%,rgba(5,4,8,.82) 88%);
}
.pre-marca{position:relative;z-index:2}

/* Ondas de señal saliendo del isotipo */
.pre-ondas{
  position:absolute;top:0;left:50%;translate:-50% 0;pointer-events:none;
  width:clamp(88px,16vw,124px);aspect-ratio:1;   /* mismo tamaño que el isotipo */
}
.pre-ondas i{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:100%;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--magenta-400);opacity:0;
  animation:onda-senal 2.6s var(--e-out) infinite;
}
.pre-ondas i:nth-child(2){animation-delay:.85s;border-color:var(--acento-fuerte)}
.pre-ondas i:nth-child(3){animation-delay:1.7s}
@keyframes onda-senal{
  0%{transform:scale(.9);opacity:0}
  18%{opacity:.55}
  100%{transform:scale(2.9);opacity:0}
}

@media(prefers-reduced-motion:reduce){
  #pre-canvas,.pre-ondas,.pre-rejilla{display:none}
  #preloader .aurora{display:none}
}

/* ==========================================================================
   26. TEMA CLARO
   Solo se redefinen variables: ninguna regla de maquetación cambia.
   Los colores de marca (magenta, vino, verde neón) se conservan para
   degradados y resplandores; lo que cambia son las superficies y los
   acentos de texto, que sobre blanco necesitan mucho más contraste.
   ========================================================================== */
:root[data-tema="claro"]{
  /* Escala de superficies invertida */
  --tinta-950:#F6F3F9;
  --tinta-900:#FFFFFF;
  --tinta-850:#F1ECF5;
  --tinta-800:#E9E2EF;
  --tinta-700:#DCD3E4;
  --vino-900:#F6EAF1;

  --texto:#160F1E;
  --texto-2:#4E4459;
  --texto-3:#6E6379;   /* 5,13:1 sobre el fondo claro */
  --sello-texto:#2A2233;

  --linea:rgba(22,15,30,.11);
  --linea-2:rgba(22,15,30,.22);
  --sup-1:rgba(22,15,30,.035);
  --sup-2:rgba(22,15,30,.065);
  --sup-3:rgba(22,15,30,.11);
  --pista:rgba(22,15,30,.10);
  --rejilla-linea:rgba(22,15,30,.045);

  /* Acentos oscurecidos: #22F000 sobre blanco no se lee */
  --acento:#0A7C00;    /* 4,90:1 sobre el fondo claro */
  --acento-fuerte:#0A7C00;
  --acento-rosa:#B00560;
  --tinte-verde:rgba(10,124,0,.09);
  --borde-verde:rgba(10,124,0,.30);

  --grad-panel:linear-gradient(160deg,#FFFFFF 0%,rgba(255,255,255,.55) 100%);
  --grad-texto:linear-gradient(100deg,#2A0418 0%,#9F0656 42%,#0A7C00 100%);

  --nav-fondo:rgba(255,255,255,.84);
  --menu-fondo:rgba(246,243,249,.98);
  --marq-texto:#2A0418;

  --sombra-card:0 22px 48px -28px rgba(42,4,24,.30);
  --glow-magenta:0 0 0 1px rgba(229,8,124,.30),0 16px 44px -18px rgba(229,8,124,.45);
  --glow-verde:0 0 0 1px rgba(10,124,0,.30),0 16px 44px -20px rgba(10,124,0,.35);

  /* Los fondos generativos deben bajar mucho de intensidad sobre claro */
  --ruido-mezcla:multiply;
  --ruido-opacidad:.05;
  --aurora-opacidad:.16;
  --canvas-opacidad:.42;
}

/* Retoques puntuales que no se resuelven solo con variables */
:root[data-tema="claro"] .celda-icono{
  background:rgba(229,8,124,.09);border-color:rgba(229,8,124,.24);color:var(--acento-rosa);
}
:root[data-tema="claro"] .celda:hover .celda-icono{
  background:rgba(10,124,0,.11);border-color:rgba(10,124,0,.3);color:var(--acento);
}
:root[data-tema="claro"] .uso.apto{border-color:rgba(10,124,0,.4);background:rgba(10,124,0,.07)}
:root[data-tema="claro"] .uso.apto .uso-ico{background:rgba(10,124,0,.13);color:var(--acento)}
:root[data-tema="claro"] .faq-item[data-abierto="true"]{
  border-color:rgba(229,8,124,.32);background:rgba(229,8,124,.05);
}
:root[data-tema="claro"] .cta{
  background:radial-gradient(120% 130% at 50% 0%,rgba(229,8,124,.14),transparent 62%),var(--tinta-900);
  border-color:rgba(229,8,124,.24);
}
:root[data-tema="claro"] #campo{
  background:linear-gradient(180deg,var(--tinta-950),var(--vino-900) 45%,var(--tinta-950));
}
:root[data-tema="claro"] .galeria{background:linear-gradient(180deg,var(--tinta-950),var(--tinta-850))}
:root[data-tema="claro"] .tira-grupo img{filter:grayscale(.35) contrast(1.02) brightness(.96)}
:root[data-tema="claro"] .tira-grupo figure::after{opacity:.4}
:root[data-tema="claro"] .paso-num{background:var(--tinta-850)}
:root[data-tema="claro"] #preloader::after{
  background:radial-gradient(circle at 50% 44%,transparent 18%,rgba(246,243,249,.34) 52%,rgba(246,243,249,.86) 88%);
}
:root[data-tema="claro"] ::-webkit-scrollbar-thumb{background:var(--tinta-700)}
:root[data-tema="claro"] ::-webkit-scrollbar-thumb:hover{background:var(--magenta-500)}
:root[data-tema="claro"] #cursor{mix-blend-mode:normal;border-color:rgba(229,8,124,.6)}
:root[data-tema="claro"] .btn-wa{color:#04220F}
/* La sección de campo tiene el vídeo sobre fondo de marca: el texto sigue claro */
:root[data-tema="claro"] .telefono{border-color:rgba(22,15,30,.18)}

/* ---------- 27. INTERRUPTOR DE TEMA -------------------------------------- */
.tema-btn{
  position:relative;flex:none;
  width:60px;height:32px;border-radius:99px;
  background:var(--sup-2);border:1px solid var(--linea-2);
  transition:background .4s var(--e-out),border-color .4s var(--e-out);
}
.tema-btn:hover{border-color:var(--acento-fuerte)}
.tema-btn i{
  position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:var(--grad-marca);
  box-shadow:0 3px 10px -2px rgba(0,0,0,.5);
  display:grid;place-items:center;
  transition:transform .45s var(--e-spring);
}
:root[data-tema="claro"] .tema-btn i{transform:translateX(28px)}
.tema-btn svg{width:14px;height:14px;color:#fff}
/* Solo se muestra el icono del tema al que se va a cambiar */
.tema-btn .ic-sol{display:none}
:root[data-tema="claro"] .tema-btn .ic-sol{display:block}
:root[data-tema="claro"] .tema-btn .ic-luna{display:none}

/* Evita el parpadeo de transición al cambiar de tema */
.cambiando-tema *,.cambiando-tema *::before,.cambiando-tema *::after{
  transition:background-color .35s ease,border-color .35s ease,color .35s ease!important;
}