/* ============================================================
   ECOLÓGICA ASOCIADOS SAS — Energía Limpia
   Acacías, Meta · Colombia
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Marca (constantes en ambos temas) */
  --gold:        #FFC61A;
  --gold-lt:     #FFD75E;
  --gold-dp:     #E0A400;
  --gold-ink:    #8A5F00;   /* dorado legible sobre blanco */
  --cyan:        #22D3EE;
  --teal:        #2DD4BF;
  --wa:          #25D366;

  /* Tipografía */
  --f-display: 'Sora', system-ui, -apple-system, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Escala tipográfica fluida */
  --t-xs:   .78rem;
  --t-sm:   .875rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --t-2xl:  clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --t-3xl:  clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --t-4xl:  clamp(2.4rem, 1.5rem + 4.2vw, 4.5rem);

  /* Espaciado (density 5/10 = estándar) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radios */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* Capas */
  --z-base: 1; --z-raise: 10; --z-nav: 100; --z-float: 200; --z-pre: 1000;

  /* Movimiento */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
  --d-fast: 160ms; --d-mid: 260ms; --d-slow: 420ms;

  --wrap: 1200px;
}

/* Tema oscuro (default) */
[data-theme="dark"]{
  --bg:        #070A11;
  --bg-alt:    #0A0F1A;
  --surface:   #0D131F;
  --surface-2: #131C2C;
  --border:    #1E2A3E;
  --border-hi: #2C3E59;
  --fg:        #EAF0FA;
  --fg-mut:    #9AAAC4;
  --fg-dim:    #6B7C96;
  --accent:    var(--gold);
  --accent-fg: #10131A;
  --glow:      rgba(255,198,26,.18);
  --glow-2:    rgba(34,211,238,.14);
  --grid-line: rgba(120,160,220,.055);
  --shadow:    0 18px 50px -12px rgba(0,0,0,.75);
  --shadow-sm: 0 6px 18px -6px rgba(0,0,0,.6);
  --scrim:     rgba(4,7,12,.72);
  --img-dim:   .88;
}

/* Tema claro */
[data-theme="light"]{
  --bg:        #F4F7FC;
  --bg-alt:    #EAEFF7;
  --surface:   #FFFFFF;
  --surface-2: #F7FAFE;
  --border:    #D9E2F0;
  --border-hi: #B9C8DE;
  --fg:        #0B1220;
  --fg-mut:    #4C5C75;
  --fg-dim:    #55657E;   /* 5.5:1 sobre --bg; #6B7C96 se quedaba en 3.9:1 */
  --accent:    var(--gold-ink);
  --accent-fg: #FFFFFF;
  --glow:      rgba(224,164,0,.16);
  --glow-2:    rgba(13,148,178,.12);
  --grid-line: rgba(20,60,120,.06);
  --shadow:    0 18px 44px -16px rgba(20,40,80,.22);
  --shadow-sm: 0 4px 14px -4px rgba(20,40,80,.14);
  --scrim:     rgba(240,245,252,.75);
  --img-dim:   1;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background var(--d-mid) var(--e-io), color var(--d-mid) var(--e-io);
}

body.is-locked{ overflow:hidden; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 var(--s-4);
  font-weight:700;
}
h2{ font-size:var(--t-3xl); }
h3{ font-size:var(--t-xl); font-weight:600; }
p{ margin:0 0 var(--s-4); }
a{ color:inherit; }

img{ max-width:100%; height:auto; display:block; }

code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.85em;
  background:var(--surface-2);
  border:1px solid var(--border);
  padding:.1em .4em;
  border-radius:4px;
  color:var(--accent);
}

::selection{ background:var(--gold); color:#10131A; }

:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; top:-100px; left:var(--s-4);
  background:var(--accent); color:var(--accent-fg);
  padding:var(--s-3) var(--s-5); border-radius:0 0 var(--r-sm) var(--r-sm);
  z-index:var(--z-pre); font-weight:600; text-decoration:none;
  transition:top var(--d-fast);
}
.skip-link:focus{ top:0; }

.wrap{
  width:min(100% - 2*var(--s-5), var(--wrap));
  margin-inline:auto;
}
@media (max-width:640px){
  .wrap{ width:min(100% - 2*var(--s-4), var(--wrap)); }
}

.grad{
  background:linear-gradient(100deg, var(--gold-dp), var(--gold), var(--gold-lt));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  font-style:normal;
}
[data-theme="light"] .grad{
  background:linear-gradient(100deg,#7A5400,#B77E00,#D69A00);
  -webkit-background-clip:text; background-clip:text;
}

.ico{ width:1.15em; height:1.15em; flex:none; }

/* ---------- 3. PRELOADER ---------- */
.preloader{
  position:fixed; inset:0; z-index:var(--z-pre);
  background:#05070c;
  display:grid; place-items:center;
  overflow:hidden; isolation:isolate;
  transition:opacity .6s var(--e-out), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
/* La foto de instalación real vive aquí (pantalla de carga), no en el hero:
   el video del hero debe reproducirse siempre, sin una imagen estática de
   por medio. Tratamiento fijo (no --bg) para que se vea igual en ambos temas. */
.preloader__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  opacity:.55;
}
.preloader__scrim{
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(5,7,12,.55) 0%, rgba(5,7,12,.88) 100%);
}
.preloader__inner{ text-align:center; display:grid; gap:var(--s-4); justify-items:center; }
.preloader__bolt{
  width:38px; height:62px; fill:var(--gold);
  filter:drop-shadow(0 0 16px var(--gold));
  animation:boltPulse 1.1s var(--e-io) infinite;
}
@keyframes boltPulse{
  0%,100%{ opacity:.35; transform:scale(.9); }
  50%    { opacity:1;   transform:scale(1.06); }
}
.preloader__bar{
  width:180px; height:3px; background:rgba(245,248,255,.2);
  border-radius:var(--r-full); overflow:hidden;
}
.preloader__bar span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold),var(--cyan));
  border-radius:var(--r-full);
  animation:loadBar 1.5s var(--e-out) forwards;
}
@keyframes loadBar{ to{ width:100%; } }
.preloader__txt{
  margin:0; font-size:var(--t-xs); color:rgba(245,248,255,.75);
  letter-spacing:.16em; text-transform:uppercase;
}

/* ---------- 4. NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  transition:background var(--d-mid), border-color var(--d-mid), backdrop-filter var(--d-mid);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--border);
}
.nav__inner{
  width:min(100% - 2*var(--s-5), var(--wrap));
  margin-inline:auto;
  display:flex; align-items:center; gap:var(--s-5);
  height:72px;
}
.nav__brand{
  display:flex; align-items:center; gap:var(--s-3);
  text-decoration:none; flex:none;
}
.nav__logo{
  width:44px; height:44px; border-radius:var(--r-full);
  border:1.5px solid var(--border-hi);
  transition:transform var(--d-mid) var(--e-out), box-shadow var(--d-mid);
}
.nav__brand:hover .nav__logo{
  transform:rotate(-8deg) scale(1.06);
  box-shadow:0 0 0 4px var(--glow);
}
.nav__brandtxt{ display:flex; flex-direction:column; line-height:1.15; }
.nav__brandtxt strong{
  font-family:var(--f-display); font-size:.95rem;
  letter-spacing:.06em; font-weight:700;
}
.nav__brandtxt em{
  font-style:normal; font-size:.62rem; color:var(--accent);
  letter-spacing:.18em; text-transform:uppercase; font-weight:600;
}
.nav__links{
  display:flex; gap:var(--s-2); margin-left:auto;
}
.nav__links a{
  position:relative; text-decoration:none;
  font-size:var(--t-sm); font-weight:500; color:var(--fg-mut);
  padding:var(--s-2) var(--s-3); border-radius:var(--r-sm);
  transition:color var(--d-fast);
}
.nav__links a::after{
  content:''; position:absolute; left:var(--s-3); right:var(--s-3); bottom:4px;
  height:2px; background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-mid) var(--e-out);
}
.nav__links a:hover,
.nav__links a.is-active{ color:var(--fg); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); }

.nav__actions{ display:flex; align-items:center; gap:var(--s-3); }

.theme-toggle{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-full); color:var(--fg-mut);
  transition:color var(--d-fast), border-color var(--d-fast), transform var(--d-fast);
  position:relative; overflow:hidden;
}
.theme-toggle:hover{ color:var(--accent); border-color:var(--border-hi); transform:translateY(-2px); }
.theme-toggle svg{
  width:20px; height:20px; position:absolute;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;
  transition:transform var(--d-slow) var(--e-out), opacity var(--d-mid);
}
[data-theme="dark"] .theme-toggle__sun { transform:rotate(0)     scale(1); opacity:1; }
[data-theme="dark"] .theme-toggle__moon{ transform:rotate(-90deg) scale(.4); opacity:0; }
[data-theme="light"] .theme-toggle__sun { transform:rotate(90deg) scale(.4); opacity:0; }
[data-theme="light"] .theme-toggle__moon{ transform:rotate(0)     scale(1); opacity:1; }
.theme-toggle__sun .rays{ animation:spinSlow 24s linear infinite; transform-origin:12px 12px; }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }

.nav__burger{
  display:none; width:44px; height:44px; flex:none;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__burger span{
  display:block; width:19px; height:2px; background:var(--fg);
  border-radius:2px; transition:transform var(--d-mid) var(--e-out), opacity var(--d-fast);
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__progress{
  height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold),var(--cyan));
  box-shadow:0 0 10px var(--glow);
  transition:width 80ms linear;
}

/* Antes de hacer scroll, la nav flota transparente sobre el video del hero
   (que siempre es oscuro, ver §6). Sin esto, en modo claro el texto de la
   nav heredaría --fg oscuro y quedaría casi invisible sobre el video. Al
   engancharse (.is-stuck) recupera su fondo y los colores del tema normal. */
.nav:not(.is-stuck) .nav__brandtxt strong,
.nav:not(.is-stuck) .nav__links a,
.nav:not(.is-stuck) .theme-toggle,
.nav:not(.is-stuck) .nav__burger span{
  color:#F5F8FF;
}
.nav:not(.is-stuck) .nav__brandtxt em{ color:var(--gold); }
.nav:not(.is-stuck) .nav__links a::after{ background:var(--gold); }
.nav:not(.is-stuck) .nav__links a:hover,
.nav:not(.is-stuck) .nav__links a.is-active{
  color:var(--gold);
}
.nav:not(.is-stuck) .nav__burger span{ background:#F5F8FF; }
.nav:not(.is-stuck) .nav__burger{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }
.nav:not(.is-stuck) .theme-toggle{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3);
}
.nav:not(.is-stuck) .theme-toggle:hover{ color:var(--gold); border-color:rgba(255,255,255,.5); }
.nav:not(.is-stuck) .nav__logo{ border-color:rgba(255,255,255,.4); }

/* ---------- 5. BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:44px; padding:var(--s-3) var(--s-5);
  border-radius:var(--r-full); border:1px solid transparent;
  font-family:var(--f-body); font-size:var(--t-sm); font-weight:600;
  text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition:transform var(--d-fast) var(--e-out), box-shadow var(--d-mid),
             background var(--d-fast), color var(--d-fast), border-color var(--d-fast);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn--sm{ min-height:40px; padding:var(--s-2) var(--s-4); font-size:var(--t-xs); }
.btn--lg{ min-height:54px; padding:var(--s-4) var(--s-6); font-size:var(--t-base); }
.btn--block{ width:100%; }

.btn--primary{
  background:linear-gradient(100deg,var(--gold-dp),var(--gold));
  color:#10131A;
  box-shadow:0 8px 24px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.3);
}
[data-theme="light"] .btn--primary{
  background:linear-gradient(100deg,#8A5F00,#B77E00);
  color:#fff;
}
.btn--primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.35);
}
/* barrido de luz */
.btn--primary::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5),transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--e-out);
}
.btn--primary:hover::before{ transform:translateX(120%); }

.btn--ghost{
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  border-color:var(--border-hi); color:var(--fg);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  border-color:var(--accent); color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 12px 30px -12px var(--glow);
}

.btn--wa{ background:var(--wa); color:#04250F; box-shadow:0 8px 24px -8px rgba(37,211,102,.5); }
.btn--wa:hover{ transform:translateY(-3px); box-shadow:0 16px 38px -10px rgba(37,211,102,.6); }

.btn__spin{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(0,0,0,.25); border-top-color:currentColor;
  display:none; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.is-loading{ pointer-events:none; opacity:.75; }
.btn.is-loading .btn__spin{ display:block; }

/* ---------- 6. HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  padding:calc(72px + var(--s-8)) 0 var(--s-8);
  overflow:hidden;
  isolation:isolate;

  /* Encabezado fotográfico: el video necesita el MISMO tratamiento en modo
     claro y oscuro (si el velo usara --bg, en claro se lava a blanco y el
     video desaparece). Estas variables fijan un panel oscuro constante y
     un dorado siempre brillante para todo el texto del hero, sin importar
     el tema del resto del sitio. Solo el borde inferior del velo se funde
     con --bg para no cortar en seco contra la siguiente sección. */
  --hero-fg:        #F5F8FF;
  --hero-fg-mut:    rgba(245,248,255,.82);
  --hero-fg-dim:    rgba(245,248,255,.62);
  --hero-border:    rgba(245,248,255,.22);
  --hero-border-hi: rgba(245,248,255,.4);
  --hero-surface:   rgba(10,14,23,.5);
  --hero-accent:    var(--gold);
  color:var(--hero-fg);
}
/* Video de fondo del hero. Sin archivo en assets/video/giro.mp4 el elemento
   no pinta nada (transparente) hasta que se agregue: no requiere tocar HTML. */
.hero__video{
  position:absolute; inset:0; z-index:-6; pointer-events:none;
  width:100%; height:100%; object-fit:cover;
}
.hero__video-scrim{
  position:absolute; inset:0; z-index:-5; pointer-events:none;
  background:
    /* viñeta: oscurece bordes para dar foco al centro, sin taparlo */
    radial-gradient(ellipse 85% 65% at 50% 34%, transparent 0%, rgba(4,7,14,.5) 100%),
    /* franja superior más oscura (legibilidad de la nav) + fundido final a --bg */
    linear-gradient(180deg,
      rgba(4,7,14,.66) 0%,
      rgba(4,7,14,.34) 20%,
      rgba(4,7,14,.4)  62%,
      var(--bg) 100%);
}
.hero__canvas,
.hero .bolt-layer{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-2; pointer-events:none;
}
.hero .bolt-layer{ z-index:-1; opacity:.85; }
.hero__grid{
  position:absolute; inset:0; z-index:-3; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 45%, #000 30%, transparent 78%);
}
.hero__glow{
  position:absolute; z-index:-3; pointer-events:none;
  width:min(1000px,120vw); aspect-ratio:1;
  top:-30%; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, var(--glow) 0%, transparent 62%);
  animation:glowBreathe 9s var(--e-io) infinite;
}
@keyframes glowBreathe{
  0%,100%{ opacity:.75; transform:translateX(-50%) scale(1); }
  50%    { opacity:1;   transform:translateX(-50%) scale(1.14); }
}

/* width:100% es necesario: `place-items:center` dimensiona el item a
   fit-content, y sin esto un titular largo desborda el viewport. */
.hero__content{
  text-align:center;
  width:100%; max-width:1000px;
  padding-inline:var(--s-5);
  position:relative;
}
/* Velo radial: aísla el texto del video/partículas. Fijo (no --bg) para que
   no se invierta a blanco en modo claro. */
.hero__content::before{
  content:''; position:absolute; z-index:-1;
  inset:-12% -8%;
  background:radial-gradient(ellipse at center,
    rgba(4,7,14,.5) 0%,
    rgba(4,7,14,.28) 45%,
    transparent 72%);
  pointer-events:none;
}

.hero__badge{
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:var(--s-2) var(--s-4); margin-bottom:var(--s-5);
  border:1px solid var(--hero-border-hi); border-radius:var(--r-full);
  background:var(--hero-surface);
  backdrop-filter:blur(10px);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hero-fg-mut);
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 0 0 rgba(45,212,191,.6);
  animation:pulseDot 2s var(--e-io) infinite;
}
@keyframes pulseDot{
  0%  { box-shadow:0 0 0 0 rgba(45,212,191,.6); }
  70% { box-shadow:0 0 0 10px rgba(45,212,191,0); }
  100%{ box-shadow:0 0 0 0 rgba(45,212,191,0); }
}

.hero__title{
  font-size:var(--t-4xl); font-weight:800; color:var(--hero-fg);
  letter-spacing:-.035em; margin-bottom:var(--s-5);
}
.hero__title .line{ display:block; }
/* El "sol" en gradiente debe leerse dorado brillante en ambos temas, no el
   dorado oscuro que usa [data-theme="light"] .grad para texto sobre blanco. */
.hero .grad{
  background:linear-gradient(100deg, var(--gold-dp), var(--gold), var(--gold-lt));
  -webkit-background-clip:text; background-clip:text;
}

.hero__sub{
  max-width:62ch; margin:0 auto var(--s-6);
  font-size:var(--t-lg); color:var(--hero-fg-mut); line-height:1.7;
}
.hero__sub strong{ color:var(--hero-fg); font-weight:600; }

.hero__cta{
  display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap;
  margin-bottom:var(--s-8);
}

.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--s-4); margin:0;
  max-width:820px; margin-inline:auto;
}
.stat{
  padding:var(--s-4) var(--s-3);
  border:1px solid var(--hero-border); border-radius:var(--r-md);
  background:var(--hero-surface);
  backdrop-filter:blur(10px);
  transition:border-color var(--d-mid), transform var(--d-mid) var(--e-out);
}
.stat:hover{ border-color:var(--hero-accent); transform:translateY(-4px); }
.stat dt{
  font-size:var(--t-xs); color:var(--hero-fg-dim);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--s-1);
}
.stat dd{
  margin:0; font-family:var(--f-display); font-size:var(--t-2xl);
  font-weight:700; color:var(--hero-accent);
  font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; justify-content:center; gap:2px;
}
.stat .plus{ font-size:.55em; color:var(--hero-fg-mut); }

.hero__scroll{
  position:absolute; bottom:var(--s-5); left:50%; transform:translateX(-50%);
  display:grid; gap:var(--s-2); justify-items:center;
  text-decoration:none; color:var(--hero-fg-dim);
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  transition:color var(--d-fast);
}
.hero__scroll:hover{ color:var(--hero-accent); }
.hero__mouse{
  width:24px; height:38px; border:1.5px solid currentColor;
  border-radius:var(--r-full); display:grid; justify-items:center; padding-top:7px;
}
.hero__mouse span{
  width:3px; height:7px; border-radius:2px; background:currentColor;
  animation:mouseScroll 1.8s var(--e-io) infinite;
}
@keyframes mouseScroll{
  0%  { opacity:0; transform:translateY(0); }
  35% { opacity:1; }
  75% { opacity:0; transform:translateY(11px); }
  100%{ opacity:0; }
}

/* ---------- 7. MARQUEE ---------- */
.marquee{
  border-block:1px solid var(--border);
  background:var(--bg-alt);
  padding:var(--s-4) 0; 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);
}
.marquee__track{
  display:flex; align-items:center; gap:var(--s-5); width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee span{
  font-family:var(--f-display); font-size:var(--t-sm); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim);
  white-space:nowrap;
}
.marquee i{ color:var(--gold); font-style:normal; font-size:.75rem; }

/* ---------- 8. SECCIONES ---------- */
.section{
  position:relative; padding:var(--s-9) 0;
  overflow:hidden; isolation:isolate;
}
.bolt-layer{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none;
}
.bolt-layer--soft{ opacity:.5; }

.shead{ margin-bottom:var(--s-8); max-width:760px; }
.shead--center{ margin-inline:auto; text-align:center; }
.shead__sub{
  font-size:var(--t-lg); color:var(--fg-mut); margin-top:var(--s-4); margin-bottom:0;
}

.eyebrow{
  display:flex; align-items:center; gap:var(--s-3);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:var(--s-3);
}
.shead--center .eyebrow{ justify-content:center; }
.eyebrow__bar{
  width:28px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

.lead{ font-size:var(--t-lg); color:var(--fg-mut); }
.lead strong{ color:var(--fg); }

/* ---------- 9. PROBLEMA ---------- */
.problema{ background:var(--bg-alt); }
.problema__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5);
}
.pcard{
  padding:var(--s-6);
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color var(--d-mid), transform var(--d-mid) var(--e-out), box-shadow var(--d-mid);
}
.pcard:hover{
  border-color:var(--border-hi); transform:translateY(-6px); box-shadow:var(--shadow);
}
.pcard__ico{
  width:52px; height:52px; border-radius:var(--r-md);
  display:grid; place-items:center; margin-bottom:var(--s-4);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color:var(--accent);
}
.pcard__ico svg{ width:24px; height:24px; }
.pcard h3{ margin-bottom:var(--s-2); }
.pcard p{ color:var(--fg-mut); font-size:var(--t-sm); margin:0; }

.problema__turn{
  margin-top:var(--s-8); text-align:center;
  display:grid; gap:var(--s-4); justify-items:center;
}
.problema__turnline{
  width:2px; height:56px;
  background:linear-gradient(180deg,transparent,var(--accent));
  position:relative;
}
.problema__turnline::after{
  content:''; position:absolute; bottom:0; left:50%; transform:translate(-50%,50%);
  width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 16px var(--accent);
}
.problema__turn p{
  font-family:var(--f-display); font-size:var(--t-xl);
  color:var(--fg-mut); margin:0; max-width:44ch;
}
.problema__turn strong{ color:var(--fg); }
.problema__turn em{ color:var(--accent); font-style:normal; font-weight:600; }

@keyframes ringOut{
  0%  { transform:scale(1);   opacity:.7; }
  100%{ transform:scale(2.1); opacity:0; }
}

/* ---------- 11. SISTEMA ---------- */
.sistema{ background:var(--bg-alt); }

.flow{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-2); margin-bottom:var(--s-8);
  padding:var(--s-6) var(--s-5);
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface);
  overflow-x:auto;
}
.flow__node{
  display:grid; gap:var(--s-2); justify-items:center; flex:none;
}
.flow__ico{
  width:60px; height:60px; border-radius:var(--r-md);
  display:grid; place-items:center;
  border:1px solid var(--border-hi); background:var(--surface-2);
  color:var(--accent);
  transition:transform var(--d-mid) var(--e-out), box-shadow var(--d-mid), border-color var(--d-mid);
}
.flow__node:hover .flow__ico{
  transform:translateY(-5px) scale(1.06);
  border-color:var(--accent);
  box-shadow:0 0 26px var(--glow);
}
.flow__ico svg{ width:28px; height:28px; }
.flow__node span{
  font-size:var(--t-xs); font-weight:600; color:var(--fg-mut);
  letter-spacing:.08em; text-transform:uppercase;
}
.flow__wire{
  flex:1 1 auto; min-width:28px; height:2px; position:relative;
  background:var(--border); border-radius:2px; overflow:hidden;
}
.flow__wire .spark{
  position:absolute; top:0; left:0; width:26px; height:100%;
  background:linear-gradient(90deg,transparent,var(--gold),var(--cyan),transparent);
  border-radius:2px;
  animation:sparkRun 2.6s var(--e-io) infinite;
}
.flow__wire:nth-of-type(2) .spark{ animation-delay:.35s; }
.flow__wire:nth-of-type(4) .spark{ animation-delay:.7s; }
.flow__wire:nth-of-type(6) .spark{ animation-delay:1.05s; }
.flow__wire:nth-of-type(8) .spark{ animation-delay:1.4s; }
@keyframes sparkRun{
  0%  { left:-30px; opacity:0; }
  15% { opacity:1; }
  85% { opacity:1; }
  100%{ left:100%; opacity:0; }
}

.comp{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5);
  margin-bottom:var(--s-8);
}
.comp__card{
  padding:var(--s-6);
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); position:relative; overflow:hidden;
  transition:border-color var(--d-mid), transform var(--d-mid) var(--e-out);
}
.comp__card::before{
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:linear-gradient(180deg,var(--gold),var(--cyan));
  transform:scaleY(0); transform-origin:top;
  transition:transform var(--d-slow) var(--e-out);
}
.comp__card:hover{ border-color:var(--border-hi); transform:translateY(-4px); }
.comp__card:hover::before{ transform:scaleY(1); }
.comp__card h3{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-3); }
.comp__num{
  font-family:var(--f-display); font-size:var(--t-xs); font-weight:700;
  color:var(--accent); letter-spacing:.1em;
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius:var(--r-sm); padding:3px 7px;
}
.comp__card p{ color:var(--fg-mut); font-size:var(--t-sm); margin:0; }
.comp__card em{ color:var(--fg); font-style:italic; }

.respaldo{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5);
}
.respaldo__card{
  padding:var(--s-6);
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color var(--d-mid), transform var(--d-mid) var(--e-out), box-shadow var(--d-mid);
}
.respaldo__card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.respaldo__card--on{
  border-color:color-mix(in srgb, var(--accent) 42%, transparent);
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
}
.respaldo__tag{
  display:inline-block; margin-bottom:var(--s-4);
  padding:var(--s-1) var(--s-3); border-radius:var(--r-full);
  background:var(--accent); color:var(--accent-fg);
  font-size:var(--t-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.respaldo__tag--alt{
  background:transparent; color:var(--fg-mut);
  border:1px solid var(--border-hi);
}
.respaldo__card h3{ margin-bottom:var(--s-2); }
.respaldo__card > p{ color:var(--fg-mut); font-size:var(--t-sm); }

.ticks{ list-style:none; padding:0; margin:var(--s-4) 0 0; display:grid; gap:var(--s-2); }
.ticks li{
  position:relative; padding-left:26px;
  font-size:var(--t-sm); color:var(--fg-mut);
}
.ticks li::before{
  content:''; position:absolute; left:0; top:.5em;
  width:14px; height:8px; border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent); transform:rotate(-45deg);
}

.sistema__note{
  margin:var(--s-7) 0 0; padding:var(--s-4) var(--s-5);
  display:flex; align-items:center; gap:var(--s-3);
  border:1px dashed var(--border-hi); border-radius:var(--r-md);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  color:var(--fg-mut); font-size:var(--t-sm);
}
.sistema__note .ico{ color:var(--accent); width:22px; height:22px; }
.sistema__note strong{ color:var(--fg); }

/* ---------- 12. SERVICIOS ---------- */
.srv{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
.srv__card{
  position:relative; padding:var(--s-6);
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); overflow:hidden;
  transition:border-color var(--d-mid), transform var(--d-mid) var(--e-out), box-shadow var(--d-mid);
}
.srv__card:hover{
  border-color:var(--accent); transform:translateY(-6px); box-shadow:var(--shadow);
}
/* chispa que recorre el borde superior */
.srv__spark{
  position:absolute; top:0; left:0; height:2px; width:70px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--cyan),transparent);
  opacity:0; transition:opacity var(--d-fast);
}
.srv__card:hover .srv__spark{ opacity:1; animation:sparkRun 1.6s var(--e-io) infinite; }
.srv__ico{
  width:52px; height:52px; border-radius:var(--r-md);
  display:grid; place-items:center; margin-bottom:var(--s-4);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color:var(--accent);
  transition:transform var(--d-mid) var(--e-out);
}
.srv__card:hover .srv__ico{ transform:rotate(-8deg) scale(1.08); }
.srv__ico svg{ width:25px; height:25px; fill:none; }
.srv__card h3{ margin-bottom:var(--s-2); font-size:var(--t-lg); }
.srv__card p{ color:var(--fg-mut); font-size:var(--t-sm); margin:0; }
.srv__card strong{ color:var(--fg); }

/* ---------- 13. CASOS ---------- */
.casos{ background:var(--bg-alt); }
.casos__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5);
}
.caso{
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color var(--d-mid), transform var(--d-mid) var(--e-out), box-shadow var(--d-mid);
}
.caso:hover{ border-color:var(--accent); transform:translateY(-6px); box-shadow:var(--shadow); }
.caso__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.caso__media img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(var(--img-dim)) saturate(1.05);
  transition:transform .8s var(--e-out), filter var(--d-mid);
}
.caso:hover .caso__media img{ transform:scale(1.07); filter:brightness(1) saturate(1.15); }
.caso__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%, color-mix(in srgb, var(--surface) 92%, transparent));
  pointer-events:none;
}
.caso__loc{
  position:absolute; top:var(--s-3); left:var(--s-3); z-index:2;
  padding:var(--s-1) var(--s-3); border-radius:var(--r-full);
  background:rgba(8,12,20,.78); color:#fff;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.06em;
}
.caso__body{ padding:var(--s-5); flex:1; display:flex; flex-direction:column; }
.caso__body h3{ font-size:var(--t-lg); margin-bottom:var(--s-2); }
.caso__body p{ color:var(--fg-mut); font-size:var(--t-sm); flex:1; }

.chips{ list-style:none; padding:0; margin:var(--s-4) 0 0; display:flex; flex-wrap:wrap; gap:var(--s-2); }
.chips li{
  padding:3px var(--s-3); border-radius:var(--r-full);
  border:1px solid var(--border-hi);
  background:var(--surface-2);
  font-size:var(--t-xs); font-weight:600; color:var(--fg-mut);
}

.casos__foot{
  margin-top:var(--s-8); text-align:center;
  display:grid; gap:var(--s-4); justify-items:center;
}
.casos__foot p{ margin:0; color:var(--fg-mut); font-size:var(--t-lg); }
.casos__foot strong{ color:var(--accent); }

/* ---------- 14. CALCULADORA ---------- */
.calc__box{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7);
  padding:var(--s-7);
  border:1px solid var(--border-hi); border-radius:var(--r-xl);
  background:var(--surface); box-shadow:var(--shadow);
}
.calc__controls{ display:grid; gap:var(--s-6); align-content:start; }

.field{ display:grid; gap:var(--s-2); border:0; padding:0; margin:0; min-width:0; }
.field > label,
.field > legend{
  font-size:var(--t-sm); font-weight:600; color:var(--fg);
  padding:0;
}
.field__help{ font-size:var(--t-xs); color:var(--fg-dim); margin:0; }
.field__err{
  font-size:var(--t-xs); color:#F87171; margin:0; min-height:0;
}
.field__err:empty{ display:none; }
.req{ color:var(--accent); }

.calc__out{
  font-family:var(--f-display); font-size:var(--t-2xl);
  font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums;
}

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--gold) 0%, var(--gold) var(--pct,10%), var(--border) var(--pct,10%));
  cursor:pointer; margin:var(--s-2) 0;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:50%;
  background:var(--gold); border:3px solid var(--surface);
  box-shadow:0 0 0 1px var(--gold), 0 0 18px var(--glow);
  cursor:grab; transition:transform var(--d-fast) var(--e-out);
}
input[type="range"]::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.18); }
input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--gold); border:3px solid var(--surface);
  box-shadow:0 0 0 1px var(--gold), 0 0 18px var(--glow);
  cursor:grab;
}

.radios{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.radio{ cursor:pointer; }
.radio input{ position:absolute; opacity:0; width:0; height:0; }
.radio__box{
  display:grid; gap:2px; min-height:64px;
  padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  border:1px solid var(--border); background:var(--surface-2);
  transition:border-color var(--d-fast), background var(--d-fast), transform var(--d-fast) var(--e-out);
}
.radio__box strong{ font-size:var(--t-sm); }
.radio__box em{ font-style:normal; font-size:var(--t-xs); color:var(--fg-dim); }
.radio:hover .radio__box{ border-color:var(--border-hi); transform:translateY(-2px); }
.radio input:checked + .radio__box{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}
.radio input:checked + .radio__box strong{ color:var(--accent); }
.radio input:focus-visible + .radio__box{ outline:3px solid var(--cyan); outline-offset:2px; }

.calc__results{ display:grid; gap:var(--s-4); align-content:start; }
.calc__res{
  padding:var(--s-4) var(--s-5);
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2);
  display:grid; gap:var(--s-1);
}
.calc__res--main{
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, var(--surface-2)), var(--surface-2));
}
.calc__resrow{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.calc__reslabel{
  font-size:var(--t-xs); color:var(--fg-dim);
  letter-spacing:.08em; text-transform:uppercase;
}
.calc__resval{
  font-family:var(--f-display); font-weight:700;
  font-size:var(--t-xl); color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.calc__res--main .calc__resval{ font-size:var(--t-3xl); color:var(--accent); }

.calc__bar{
  position:relative; height:34px; border-radius:var(--r-full);
  background:var(--surface-2); border:1px solid var(--border);
  overflow:hidden; display:grid; align-items:center;
}
.calc__barfill{
  position:absolute; inset:0 auto 0 0; width:70%;
  background:linear-gradient(90deg, var(--gold-dp), var(--gold), var(--cyan));
  border-radius:var(--r-full);
  transition:width var(--d-slow) var(--e-out);
  overflow:hidden;
}
.calc__barspark{
  position:absolute; top:0; left:0; width:40px; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:sparkRun 2.2s var(--e-io) infinite;
}
.calc__barlabel{
  position:relative; z-index:1; justify-self:center;
  font-size:var(--t-xs); font-weight:700; color:#10131A;
  letter-spacing:.08em; text-transform:uppercase;
  text-shadow:0 1px 2px rgba(255,255,255,.4);
}

.calc__disclaimer{
  margin:var(--s-6) auto 0; max-width:70ch; text-align:center;
  font-size:var(--t-xs); color:var(--fg-dim); line-height:1.7;
}
.calc__disclaimer strong{ color:var(--fg-mut); }

/* ---------- 15. NOSOTROS ---------- */
.nosotros{ background:var(--bg-alt); }
.nosotros__wrap{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:var(--s-8); align-items:center;
}
.nosotros__txt p{ color:var(--fg-mut); }
.nosotros__txt strong{ color:var(--fg); }

.vals{ list-style:none; padding:0; margin:var(--s-6) 0 0; display:grid; gap:var(--s-4); }
.vals li{ display:flex; gap:var(--s-4); align-items:flex-start; }
.vals__ico{
  width:30px; height:30px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color:var(--accent);
}
.vals__ico svg{ width:15px; height:15px; }
.vals strong{ display:block; font-size:var(--t-base); margin-bottom:2px; }
.vals p{ margin:0; font-size:var(--t-sm); color:var(--fg-mut); }

.nosotros__imgwrap{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border-hi); box-shadow:var(--shadow);
}
.nosotros__imgwrap img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:brightness(var(--img-dim));
  transition:transform .9s var(--e-out);
}
.nosotros__imgwrap:hover img{ transform:scale(1.05); }
.nosotros__badge{
  position:absolute; left:var(--s-4); bottom:var(--s-4);
  padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  background:rgba(8,12,20,.82); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  display:grid; gap:2px; color:#fff;
}
.nosotros__badge strong{ font-size:var(--t-sm); color:var(--gold); }
.nosotros__badge span{ font-size:var(--t-xs); color:rgba(255,255,255,.8); }
.nosotros__cap{
  margin:var(--s-4) 0 0; font-size:var(--t-sm);
  color:var(--fg-dim); text-align:center;
}

/* ---------- 16. COBERTURA ---------- */
.cob__list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:var(--s-3); justify-content:center;
}
.cob__list li{
  padding:var(--s-3) var(--s-5); border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface);
  font-family:var(--f-display); font-weight:600; font-size:var(--t-sm);
  color:var(--fg-mut);
  transition:border-color var(--d-fast), color var(--d-fast), transform var(--d-fast) var(--e-out), box-shadow var(--d-mid);
  cursor:default;
}
.cob__list li:hover{
  border-color:var(--accent); color:var(--accent);
  transform:translateY(-4px); box-shadow:0 10px 26px -10px var(--glow);
}

/* ---------- 17. CONTACTO ---------- */
.contacto{ background:var(--bg-alt); }
.contacto__wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:start;
}
.cinfo{ list-style:none; padding:0; margin:var(--s-6) 0 0; display:grid; gap:var(--s-5); }
.cinfo li{ display:flex; gap:var(--s-4); align-items:flex-start; }
.cinfo__ico{
  width:42px; height:42px; flex:none; border-radius:var(--r-md);
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color:var(--accent);
}
.cinfo__ico svg{ width:20px; height:20px; }
.cinfo strong{ display:block; font-size:var(--t-sm); margin-bottom:2px; }
.cinfo a, .cinfo span{ font-size:var(--t-sm); color:var(--fg-mut); }
.cinfo a{ text-decoration:none; transition:color var(--d-fast); }
.cinfo a:hover{ color:var(--accent); text-decoration:underline; }
.contacto__wabox{ margin-top:var(--s-6); }

.cform{
  padding:var(--s-6);
  border:1px solid var(--border-hi); border-radius:var(--r-xl);
  background:var(--surface); box-shadow:var(--shadow);
  display:grid; gap:var(--s-4);
}
.cform__title{ margin-bottom:0; font-size:var(--t-xl); }

.cform input,
.cform select,
.cform textarea{
  width:100%; min-height:46px;
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2); color:var(--fg);
  font-family:var(--f-body); font-size:var(--t-base);
  transition:border-color var(--d-fast), box-shadow var(--d-fast);
}
.cform textarea{ resize:vertical; min-height:84px; line-height:1.6; }
.cform input::placeholder,
.cform textarea::placeholder{ color:var(--fg-dim); }
.cform input:focus,
.cform select:focus,
.cform textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--glow);
}
.cform input.is-err,
.cform select.is-err{ border-color:#F87171; }
.cform select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AAAC4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s-4) center;
  background-size:18px;
  padding-right:var(--s-8);
}
.cform__note{
  margin:0; font-size:var(--t-xs); color:var(--fg-dim);
  text-align:center; line-height:1.6;
}
.cform__ok{
  margin:0; font-size:var(--t-sm); color:var(--teal);
  text-align:center; font-weight:600;
}
.cform__ok:empty{ display:none; }

/* ---------- 18. FOOTER ---------- */
.foot{ background:var(--bg); border-top:1px solid var(--border); }
.foot__wrap{
  padding:var(--s-8) 0 var(--s-6);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-6); flex-wrap:wrap;
}
.foot__brand{ display:flex; align-items:center; gap:var(--s-4); }
.foot__logo{
  width:56px; height:56px; border-radius:var(--r-full);
  border:1.5px solid var(--border-hi);
}
.foot__brand strong{
  display:block; font-family:var(--f-display);
  font-size:var(--t-sm); letter-spacing:.05em;
}
.foot__brand span{ font-size:var(--t-xs); color:var(--fg-dim); }

.foot__nav{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); }
.foot__nav a{
  font-size:var(--t-sm); color:var(--fg-mut); text-decoration:none;
  transition:color var(--d-fast);
}
.foot__nav a:hover{ color:var(--accent); }

.foot__social{ display:flex; gap:var(--s-3); }
.foot__social a{
  width:44px; height:44px; border-radius:var(--r-full);
  display:grid; place-items:center;
  border:1px solid var(--border); background:var(--surface);
  color:var(--fg-mut);
  transition:color var(--d-fast), border-color var(--d-fast), transform var(--d-fast) var(--e-out);
}
.foot__social a:hover{
  color:var(--accent); border-color:var(--accent); transform:translateY(-3px);
}
.foot__social svg{ width:19px; height:19px; }

.foot__bar{ border-top:1px solid var(--border); }
.foot__barwrap{
  padding:var(--s-4) 0; display:flex; justify-content:space-between;
  gap:var(--s-3); flex-wrap:wrap;
}
.foot__barwrap p{ margin:0; font-size:var(--t-xs); color:var(--fg-dim); }
.foot__barwrap a{ color:var(--fg-mut); text-decoration:none; }
.foot__barwrap a:hover{ color:var(--accent); }

/* ---------- 19. WHATSAPP FLOTANTE ---------- */
.wafloat{
  position:fixed; right:var(--s-5); bottom:var(--s-5); z-index:var(--z-float);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--wa); color:#04250F;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.6);
  transition:transform var(--d-mid) var(--e-out);
  opacity:0; visibility:hidden; transform:scale(.6);
}
.wafloat.is-in{ opacity:1; visibility:visible; transform:scale(1); }
.wafloat:hover{ transform:scale(1.1) translateY(-3px); }
.wafloat svg{ width:27px; height:27px; position:relative; z-index:1; }
.wafloat__ping{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--wa);
  animation:ringOut 2.4s var(--e-out) infinite;
}

/* ---------- 20. REVEALS ---------- */
.reveal{ will-change:transform, opacity; }
/* Estado inicial sólo cuando JS está activo (evita ocultar contenido sin JS) */
.js .reveal{ opacity:0; }
.js .reveal[data-reveal="left"] { transform:translateX(-60px); }
.js .reveal[data-reveal="right"]{ transform:translateX(60px); }
.js .reveal[data-reveal="up"]   { transform:translateY(40px); }
.js .reveal[data-reveal="down"] { transform:translateY(-30px); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width:1024px){
  .problema__grid,
  .srv,
  .casos__grid{ grid-template-columns:repeat(2,1fr); }
  .calc__box{ grid-template-columns:1fr; gap:var(--s-6); }
  .nosotros__wrap,
  .contacto__wrap{ grid-template-columns:1fr; gap:var(--s-7); }
  .hero__stats{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px){
  .nav__links{
    position:fixed; inset:72px 0 auto; margin:0;
    flex-direction:column; gap:0;
    padding:var(--s-4) var(--s-5) var(--s-6);
    background:var(--bg);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow);
    transform:translateY(-120%);
    transition:transform var(--d-slow) var(--e-out);
    max-height:calc(100svh - 72px); overflow-y:auto;
  }
  .nav__links.is-open{ transform:translateY(0); }
  /* Los enlaces pasan a position:fixed y dejan de empujar con margin-left:auto,
     así que el grupo de acciones toma el relevo. */
  .nav__actions{ margin-left:auto; }
  .nav__links a{
    padding:var(--s-4) var(--s-2);
    border-bottom:1px solid var(--border);
    font-size:var(--t-base);
  }
  .nav__links a::after{ display:none; }
  .nav__burger{ display:flex; }
  .nav__cta span{ display:none; }
  .nav__cta{ width:44px; padding:0; }
}

@media (max-width:768px){
  .section{ padding:var(--s-8) 0; }
  .problema__grid,
  .srv,
  .casos__grid,
  .comp,
  .respaldo,
  .radios,
  .calc__resrow{ grid-template-columns:1fr; }
  .flow{ gap:var(--s-3); padding:var(--s-5) var(--s-4); justify-content:flex-start; }
  .flow__wire{ min-width:36px; flex:0 0 36px; }
  .foot__wrap{ flex-direction:column; align-items:flex-start; }
  .foot__barwrap{ flex-direction:column; }
}

@media (max-width:520px){
  .hero__stats{ grid-template-columns:repeat(2,1fr); gap:var(--s-3); }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
  .calc__box,
  .cform{ padding:var(--s-5); }
  .nav__brandtxt{ display:none; }
  .wafloat{ right:var(--s-4); bottom:var(--s-4); }
}

/* ---------- 22. MOTION / A11Y ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; }
  .hero__canvas,
  .hero__video,
  .bolt-layer{ display:none; }
  .preloader{ display:none; }
}

@media print{
  .nav,.wafloat,.preloader,.hero__canvas,.bolt-layer,.marquee{ display:none !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
}