/* ======================================================
   INTERNET APICAL SAS — Design tokens
====================================================== */
:root{
  --font-display:'Bricolage Grotesque', sans-serif;
  --font-body:'Manrope', sans-serif;

  /* Dark (default) */
  --bg:#050912;
  --bg-rgb:5,9,18;
  --bg-soft:#0a1220;
  --bg-elevated:#0f1a2c;
  --ink:#eef3fb;
  --ink-soft:#a9b8d2;
  --ink-faint:#6b7d9c;
  --line:rgba(255,255,255,.09);
  --blue:#1e5eff;
  --blue-soft:#4d8bff;
  --cyan:#25e0d8;
  --orange:#ff7a2f;
  --orange-soft:#ffab6b;
  --card:rgba(255,255,255,.035);
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --grad-hero:radial-gradient(60% 60% at 80% 10%, rgba(30,94,255,.35), transparent 60%),
              radial-gradient(50% 50% at 10% 90%, rgba(255,122,47,.18), transparent 60%);
}

:root[data-theme="light"]{
  --bg:#f6f8fc;
  --bg-rgb:246,248,252;
  --bg-soft:#ffffff;
  --bg-elevated:#ffffff;
  --ink:#0c1526;
  --ink-soft:#4b5a75;
  --ink-faint:#8494ad;
  --line:rgba(12,21,38,.09);
  --card:#ffffff;
  --shadow:0 20px 50px rgba(20,40,80,.12);
  --grad-hero:radial-gradient(60% 60% at 80% 10%, rgba(30,94,255,.14), transparent 60%),
              radial-gradient(50% 50% at 10% 90%, rgba(255,122,47,.12), transparent 60%);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  transition:background .5s ease, color .5s ease;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit;}
svg{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

.container{width:min(1180px, 92%); margin-inline:auto;}
.accent{color:var(--orange);}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.08;}

/* ======================================================
   Background FX
====================================================== */
.fiber-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.55;
}
.grain-overlay{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tv-static{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
}
.tv-static.is-active{ animation:staticFlicker .5s steps(2) 2; opacity:.9; }
@keyframes staticFlicker{ 0%,100%{opacity:.85;} 50%{opacity:.5;} }

main, header, footer{ position:relative; z-index:2; }

/* ======================================================
   Preloader — "sintonizando señal"
====================================================== */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:#050912;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease, visibility .7s ease;
}
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__scanlines{
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 3px);
  animation:scanMove 6s linear infinite;
}
@keyframes scanMove{ from{background-position:0 0;} to{background-position:0 60px;} }
.preloader__inner{ position:relative; text-align:center; width:min(320px, 80%); }
.preloader__logo{ position:relative; width:64px; height:64px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; }
.preloader__logo-mark{
  font-family:var(--font-display); font-weight:800; font-size:1.8rem; color:var(--cyan);
  border:2px solid var(--cyan); border-radius:50%; width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 24px rgba(37,224,216,.5);
}
.preloader__logo-pulse{
  position:absolute; inset:0; border-radius:50%; border:2px solid var(--orange);
  animation:pulseRing 1.6s ease-out infinite;
}
@keyframes pulseRing{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.9); opacity:0; } }
.preloader__brand{ font-family:var(--font-display); letter-spacing:.12em; font-size:.8rem; color:var(--ink-soft); margin-bottom:22px; }
.preloader__brand strong{ color:var(--ink); }
.preloader__bars{ display:flex; align-items:flex-end; gap:4px; height:26px; justify-content:center; margin-bottom:14px; }
.preloader__bars span{ width:5px; background:var(--blue-soft); border-radius:2px; animation:barSignal 1.1s ease-in-out infinite; }
.preloader__bars span:nth-child(odd){ background:var(--cyan); }
.preloader__bars span:nth-child(1){ height:30%; animation-delay:.0s; }
.preloader__bars span:nth-child(2){ height:70%; animation-delay:.05s; }
.preloader__bars span:nth-child(3){ height:45%; animation-delay:.1s; }
.preloader__bars span:nth-child(4){ height:90%; animation-delay:.15s; }
.preloader__bars span:nth-child(5){ height:55%; animation-delay:.2s; }
.preloader__bars span:nth-child(6){ height:100%; animation-delay:.25s; }
.preloader__bars span:nth-child(7){ height:40%; animation-delay:.3s; }
.preloader__bars span:nth-child(8){ height:80%; animation-delay:.35s; }
.preloader__bars span:nth-child(9){ height:60%; animation-delay:.4s; }
.preloader__bars span:nth-child(10){ height:35%; animation-delay:.45s; }
@keyframes barSignal{ 0%,100%{ transform:scaleY(.4); opacity:.6; } 50%{ transform:scaleY(1); opacity:1; } }
.preloader__status{ font-size:.72rem; letter-spacing:.15em; color:var(--ink-faint); margin-bottom:10px; }
.preloader__progress{ width:100%; height:3px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.preloader__progress-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--blue), var(--cyan)); transition:width .2s ease; }
.preloader__pct{ margin-top:8px; font-size:.72rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

/* ======================================================
   Buttons
====================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-weight:700; font-size:.92rem;
  padding:.85rem 1.5rem; border-radius:99px; position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease, color .35s ease;
  white-space:nowrap;
}
.btn svg{ transition:transform .3s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn--primary{ background:linear-gradient(135deg, var(--orange), #ff5a3c); color:#fff; box-shadow:0 10px 30px rgba(255,90,60,.35); }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(255,90,60,.45); }
.btn--ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ background:var(--card); transform:translateY(-3px); border-color:var(--blue-soft); }
.btn--outline{ border:1.5px solid var(--blue-soft); color:var(--ink); background:transparent; justify-content:center; }
.btn--outline:hover{ background:rgba(30,94,255,.1); transform:translateY(-2px); }
.btn--block{ width:100%; justify-content:center; }
.btn--sm{ padding:.6rem 1.15rem; font-size:.82rem; }
.btn--lg{ padding:1rem 1.9rem; font-size:1rem; }
.btn__icon-wa{
  width:18px; height:18px; border-radius:50%; background:#fff;
  display:inline-block; position:relative; flex-shrink:0;
}
.btn__icon-wa::before{
  content:''; position:absolute; inset:3px; background:#25D366;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.5 3C9.6 3 4 8.6 4 15.5c0 2.4.7 4.6 1.9 6.6L4 29l7.1-1.9a12.4 12.4 0 0 0 5.4 1.2c6.9 0 12.5-5.6 12.5-12.5S23.4 3 16.5 3zm6.4 17.6c-.3.8-1.6 1.5-2.2 1.5-.6.1-1.2.3-3.9-.8-3.3-1.3-5.4-4.7-5.6-4.9-.2-.2-1.3-1.7-1.3-3.3s.8-2.4 1.1-2.7c.3-.3.6-.4.9-.4h.6c.2 0 .5 0 .7.6.3.7.9 2.3 1 2.5.1.2.1.4 0 .6-.1.2-.2.4-.4.6-.2.2-.4.5-.6.6-.2.2-.4.4-.2.7.2.4.9 1.4 1.9 2.3 1.3 1.1 2.4 1.5 2.8 1.6.3.1.5.1.7-.1.2-.2.8-.9 1-1.2.2-.3.5-.3.8-.2.3.1 1.9.9 2.3 1.1.3.2.5.2.6.4.1.2.1.9-.2 1.7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.5 3C9.6 3 4 8.6 4 15.5c0 2.4.7 4.6 1.9 6.6L4 29l7.1-1.9a12.4 12.4 0 0 0 5.4 1.2c6.9 0 12.5-5.6 12.5-12.5S23.4 3 16.5 3zm6.4 17.6c-.3.8-1.6 1.5-2.2 1.5-.6.1-1.2.3-3.9-.8-3.3-1.3-5.4-4.7-5.6-4.9-.2-.2-1.3-1.7-1.3-3.3s.8-2.4 1.1-2.7c.3-.3.6-.4.9-.4h.6c.2 0 .5 0 .7.6.3.7.9 2.3 1 2.5.1.2.1.4 0 .6-.1.2-.2.4-.4.6-.2.2-.4.5-.6.6-.2.2-.4.4-.2.7.2.4.9 1.4 1.9 2.3 1.3 1.1 2.4 1.5 2.8 1.6.3.1.5.1.7-.1.2-.2.8-.9 1-1.2.2-.3.5-.3.8-.2.3.1 1.9.9 2.3 1.1.3.2.5.2.6.4.1.2.1.9-.2 1.7z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ======================================================
   Header
====================================================== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition:padding .35s ease, background .35s ease, box-shadow .35s ease;
}
.header.is-scrolled{
  padding:10px 0;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  border-bottom:1px solid var(--line);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand{ display:flex; align-items:center; gap:.6rem; }
.brand__mark{ display:flex; }
.brand__ring{ fill:none; stroke:var(--blue-soft); stroke-width:2; }
.brand__cross{ stroke:var(--cyan); stroke-width:2.4; }
.brand__dot{ fill:var(--orange); stroke:none; }
.brand__text{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; display:flex; flex-direction:column; line-height:1.05; }
.brand__text strong{ font-weight:800; }
.brand__text small{ font-size:.6rem; letter-spacing:.2em; color:var(--ink-faint); font-weight:600; }

.nav{ display:flex; gap:1.9rem; }
.nav__link{ font-size:.9rem; font-weight:600; color:var(--ink-soft); position:relative; padding:4px 0; transition:color .25s ease; }
.nav__link::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--orange); transition:width .3s ease; }
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after{ width:100%; }

.header__actions{ display:flex; align-items:center; gap:.8rem; }
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; position:relative; color:var(--ink);
  transition:border-color .3s ease, transform .3s ease;
}
.theme-toggle:hover{ border-color:var(--orange-soft); transform:rotate(20deg); }
.theme-toggle__sun,.theme-toggle__moon{ position:absolute; transition:opacity .35s ease, transform .5s ease; }
.theme-toggle__sun circle{ fill:var(--orange); stroke:none; }
.theme-toggle__sun .rays{ stroke:var(--orange); }
.theme-toggle__moon path{ fill:var(--blue-soft); stroke:none; }
:root:not([data-theme="light"]) .theme-toggle__sun{ opacity:0; transform:rotate(-90deg) scale(.5); }
:root:not([data-theme="light"]) .theme-toggle__moon{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle__sun{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle__moon{ opacity:0; transform:rotate(90deg) scale(.5); }

.burger{ display:none; flex-direction:column; gap:5px; width:34px; height:34px; align-items:center; justify-content:center; }
.burger span{ width:20px; height:2px; background:var(--ink); transition:transform .3s ease, opacity .3s ease; }
.burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-active span:nth-child(2){ opacity:0; }
.burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:0; right:0; height:100vh; width:min(320px,80%); z-index:99;
  background:var(--bg-elevated); border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:1.4rem; padding:110px 2rem 2rem;
  transform:translateX(100%); transition:transform .45s cubic-bezier(.2,.8,.2,1);
  box-shadow:-20px 0 60px rgba(0,0,0,.3);
}
.mobile-menu.is-open{ transform:translateX(0); }
.mobile-menu__link{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; }

/* ======================================================
   Hero
====================================================== */
.hero{ position:relative; padding:170px 0 90px; overflow:hidden; }
.hero::before{ content:''; position:absolute; inset:0; background:var(--grad-hero); pointer-events:none; z-index:-1; }

/* Imagen de fondo del hero: coloca el archivo en img/hero-bg.jpg
   (o cambia la extensión abajo si usas .png / .webp). Sin imagen,
   esta capa simplemente no se ve y el fondo con partículas sigue
   funcionando normalmente. */
.hero__bg{
  position:absolute; inset:0; z-index:-3;
  background-image:url('../img/hero-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero__bg::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--bg-rgb),.55), rgba(var(--bg-rgb),.9) 85%);
}
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }

.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; letter-spacing:.04em; color:var(--cyan); background:rgba(37,224,216,.1); border:1px solid rgba(37,224,216,.25); padding:.45rem .9rem; border-radius:99px; margin-bottom:1.4rem; }
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:dotBlink 1.8s ease-in-out infinite; }
@keyframes dotBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.hero__title{ font-size:clamp(2.4rem, 4.6vw, 4rem); margin-bottom:1.3rem; }
.hero__title em{ font-style:normal; color:transparent; background:linear-gradient(100deg, var(--orange), var(--cyan)); -webkit-background-clip:text; background-clip:text; }
.hero__subtitle{ display:block; font-size:1.08rem; color:var(--ink-soft); max-width:520px; margin-bottom:2rem; }
.hero__ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.hero__stats{ display:flex; gap:2.4rem; flex-wrap:wrap; }
.hero__stat{ display:flex; flex-direction:column; }
.hero__stat-num{ font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--ink); }
.hero__stat-label{ font-size:.8rem; color:var(--ink-faint); font-weight:600; }

/* --- reveal mask (used for hero text lines) --- */
.reveal-mask{ display:block; overflow:hidden; }
.reveal-inner{ display:block; transform:translateY(115%); opacity:0; transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .7s ease; }
.hero__inner.is-ready .reveal-inner{ transform:translateY(0); opacity:1; }
.hero__inner.is-ready .reveal-mask:nth-of-type(1) .reveal-inner{ transition-delay:.05s; }
.hero__inner.is-ready .reveal-mask:nth-of-type(2) .reveal-inner{ transition-delay:.15s; }
.hero__inner.is-ready .reveal-mask:nth-of-type(3) .reveal-inner{ transition-delay:.25s; }
.hero__inner.is-ready .reveal-mask:nth-of-type(4) .reveal-inner{ transition-delay:.35s; }
.hero__inner.is-ready .reveal-mask:nth-of-type(5) .reveal-inner{ transition-delay:.45s; }
.hero__inner.is-ready .reveal-mask:nth-of-type(6) .reveal-inner{ transition-delay:.55s; }

/* signal orb visual */
.hero__visual{ display:flex; align-items:center; justify-content:center; position:relative; }
.signal-orb{ position:relative; width:340px; height:340px; max-width:90vw; }
.signal-orb__core{
  position:absolute; inset:38%; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--cyan), var(--blue) 60%, transparent 75%);
  box-shadow:0 0 60px rgba(37,224,216,.55), 0 0 120px rgba(30,94,255,.35);
  animation:coreFloat 5s ease-in-out infinite;
}
@keyframes coreFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-8px) scale(1.03); } }
.signal-orb__ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(77,139,255,.35); }
.signal-orb__ring--1{ inset:8%; animation:ringSpin 14s linear infinite; }
.signal-orb__ring--2{ inset:0%; border-color:rgba(37,224,216,.25); animation:ringSpin 22s linear infinite reverse; }
.signal-orb__ring--3{ inset:-10%; border-style:dashed; border-color:rgba(255,122,47,.25); animation:ringSpin 30s linear infinite; }
@keyframes ringSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.signal-orb__cable{ position:absolute; inset:0; width:100%; height:100%; }
.cable-path{ fill:none; stroke:url(#none); stroke:var(--blue-soft); stroke-width:1.4; stroke-dasharray:6 10; opacity:.5; animation:cableFlow 3s linear infinite; }
.cable-path--delay{ stroke:var(--cyan); animation-delay:-1.5s; }
@keyframes cableFlow{ to{ stroke-dashoffset:-160; } }
.signal-orb__chip{
  position:absolute; background:var(--card); border:1px solid var(--line); backdrop-filter:blur(10px);
  padding:.5rem .85rem; border-radius:14px; font-size:.78rem; font-weight:700; box-shadow:var(--shadow);
  animation:chipFloat 4.5s ease-in-out infinite;
}
.signal-orb__chip--tv{ top:2%; left:-6%; animation-delay:0s; }
.signal-orb__chip--net{ bottom:14%; right:-8%; animation-delay:1.2s; }
.signal-orb__chip--tel{ bottom:-2%; left:12%; animation-delay:2.4s; }
@keyframes chipFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

.scroll-cue{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:.68rem; letter-spacing:.15em; color:var(--ink-faint); }
.scroll-cue__line{ width:1px; height:34px; background:var(--line); position:relative; overflow:hidden; }
.scroll-cue__line i{ position:absolute; top:-100%; left:0; width:100%; height:100%; background:linear-gradient(var(--orange), transparent); animation:cueDrop 2.2s ease-in-out infinite; }
@keyframes cueDrop{ 0%{ top:-100%; } 60%,100%{ top:100%; } }

/* ======================================================
   Marquee
====================================================== */
.marquee{ position:relative; z-index:2; overflow:hidden; background:linear-gradient(90deg, var(--blue), #0f3fce); padding:.85rem 0; }
.marquee__track{ display:flex; gap:1.2rem; white-space:nowrap; width:max-content; animation:marqueeScroll 26s linear infinite; }
.marquee__track span{ font-family:var(--font-display); font-weight:700; font-size:.85rem; letter-spacing:.06em; color:#fff; }
.marquee__track span:nth-child(even){ color:var(--orange-soft); }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ======================================================
   Section basics
====================================================== */
.section{ padding:110px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:3.2rem; }
.tag{ display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-soft); margin-bottom:.9rem; }
.tag--light{ color:var(--cyan); }
.section-title{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom:.9rem; }
.section-title--light{ color:#fff; }
.section-desc{ color:var(--ink-soft); font-size:1.02rem; max-width:560px; }
.section-desc--light{ color:rgba(255,255,255,.75); }

/* generic reveal (used with overflow-hidden wrapper trick) */
.reveal{ overflow:hidden; }
.reveal > *{ display:block; }
[data-reveal="up"]{ opacity:0; transform:translateY(46px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal="up"].in-view{ opacity:1; transform:translateY(0); }

[data-reveal="left"]{ opacity:0; transform:translateX(-50px) rotate(-2deg); transition:opacity .75s ease, transform .75s cubic-bezier(.16,1,.3,1); }
[data-reveal="left"].in-view{ opacity:1; transform:translateX(0) rotate(0); }

[data-reveal="scale"]{ opacity:0; transform:scale(.82); transition:opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1); }
[data-reveal="scale"].in-view{ opacity:1; transform:scale(1); }

/* TV-flicker reveal: mimics powering on a television */
[data-reveal="tv"]{ opacity:0; filter:brightness(2.6) saturate(0) blur(2px); transform:scaleY(.4); transition:opacity .25s steps(4,end), filter .5s ease .1s, transform .45s cubic-bezier(.2,.9,.3,1) .05s; }
[data-reveal="tv"].in-view{ opacity:1; filter:brightness(1) saturate(1) blur(0); transform:scaleY(1); }

/* ======================================================
   Planes
====================================================== */
.plans{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; }
.plan-card{
  background:var(--card); border:1px solid var(--line); border-radius:22px; padding:2.1rem 1.8rem;
  display:flex; flex-direction:column; gap:1.6rem; position:relative;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease;
}
.plan-card:hover{ transform:translateY(-8px); border-color:var(--blue-soft); box-shadow:var(--shadow); }
.plan-card--featured{ background:linear-gradient(165deg, rgba(30,94,255,.14), rgba(37,224,216,.06)); border-color:rgba(77,139,255,.45); }
.plan-card__badge{ position:absolute; top:-14px; right:1.8rem; background:linear-gradient(135deg, var(--orange), #ff5a3c); color:#fff; font-size:.72rem; font-weight:800; padding:.4rem .9rem; border-radius:99px; box-shadow:0 8px 20px rgba(255,90,60,.35); }
.plan-card__head h3{ font-size:1.35rem; margin-bottom:.5rem; }
.plan-card__head p{ color:var(--ink-soft); font-size:.92rem; }
.plan-card__list{ display:flex; flex-direction:column; gap:.65rem; flex:1; }
.plan-card__list li{ position:relative; padding-left:1.5rem; font-size:.92rem; color:var(--ink-soft); }
.plan-card__list li::before{ content:''; position:absolute; left:0; top:.45em; width:9px; height:9px; border-radius:2px; background:var(--cyan); transform:rotate(45deg); }

/* ======================================================
   Canales (TV section)
====================================================== */
.section--tv{ background:linear-gradient(180deg, #060c18, #081226 60%, #060c18); position:relative; overflow:hidden; }
.tv-scanline{ position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 4px); pointer-events:none; }
.channels-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; }
.channel-cat{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:18px;
  padding:1.9rem 1.6rem; transition:transform .4s ease, border-color .4s ease, background .4s ease;
}
.channel-cat:hover{ transform:translateY(-6px); border-color:var(--cyan); background:rgba(37,224,216,.06); }
.channel-cat__icon{ font-size:1.9rem; display:block; margin-bottom:.9rem; }
.channel-cat h4{ color:#fff; font-size:1.08rem; margin-bottom:.4rem; }
.channel-cat p{ color:rgba(255,255,255,.62); font-size:.88rem; }

/* ======================================================
   Beneficios
====================================================== */
.features{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem; }
.feature-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.8rem 1.5rem; transition:transform .4s ease, border-color .4s ease; }
.feature-card:hover{ transform:translateY(-6px); border-color:var(--orange-soft); }
.feature-card__icon{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(30,94,255,.18), rgba(37,224,216,.12)); color:var(--cyan); margin-bottom:1.1rem; }
.feature-card h4{ font-size:1.05rem; margin-bottom:.5rem; }
.feature-card p{ color:var(--ink-soft); font-size:.88rem; }

/* ======================================================
   Cobertura
====================================================== */
.coverage{ background:linear-gradient(135deg, #0a1a3d, #071022 70%); padding:110px 0; position:relative; overflow:hidden; }
.coverage__inner{ display:grid; grid-template-columns:1fr .8fr; gap:3rem; align-items:center; }
.coverage .section-desc{ margin-bottom:1.8rem; }
.coverage__radar{ display:flex; align-items:center; justify-content:center; }
.radar{ position:relative; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(37,224,216,.08), transparent 70%); }
.radar__ring{ position:absolute; border:1px solid rgba(37,224,216,.25); border-radius:50%; }
.radar__ring:nth-child(1){ inset:0; }
.radar__ring:nth-child(2){ inset:20%; }
.radar__ring:nth-child(3){ inset:40%; }
.radar__sweep{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(37,224,216,.55), transparent 35%);
  animation:radarSpin 3.4s linear infinite;
}
@keyframes radarSpin{ to{ transform:rotate(360deg); } }
.radar__pin{ position:absolute; left:var(--x); top:var(--y); width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 12px var(--orange); animation:pinPulse 2s ease-in-out infinite; }
@keyframes pinPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.6); opacity:.5; } }

/* ======================================================
   Testimonios
====================================================== */
.testimonials{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.testimonial-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.9rem; }
.testimonial-card p{ font-size:.98rem; color:var(--ink); margin-bottom:1.1rem; font-style:italic; }
.testimonial-card footer{ font-size:.82rem; color:var(--ink-faint); font-weight:700; }

/* ======================================================
   CTA final
====================================================== */
.final-cta{ padding:100px 0; text-align:center; background:linear-gradient(180deg, transparent, rgba(30,94,255,.08)); }
.final-cta__inner h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:.8rem; }
.final-cta__inner p{ color:var(--ink-soft); margin-bottom:2rem; }

/* ======================================================
   Footer
====================================================== */
.footer{ background:var(--bg-soft); border-top:1px solid var(--line); padding:70px 0 0; }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:2.5rem; padding-bottom:50px; }
.footer__brand p{ color:var(--ink-faint); font-size:.88rem; margin-top:1rem; max-width:280px; }
.footer__col h5{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:1rem; }
.footer__col{ display:flex; flex-direction:column; gap:.65rem; }
.footer__col a{ color:var(--ink-soft); font-size:.92rem; transition:color .25s ease; }
.footer__col a:hover{ color:var(--orange); }
.footer__note{ font-size:.75rem; color:var(--ink-faint); opacity:.7; margin-top:.3rem; }
.footer__bottom{ border-top:1px solid var(--line); padding:1.4rem 0; text-align:center; font-size:.8rem; color:var(--ink-faint); }

/* ======================================================
   WhatsApp flotante
====================================================== */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:999;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .35s cubic-bezier(.3,1.5,.5,1);
}
.wa-float:hover{ transform:scale(1.08) translateY(-3px); }
.wa-float__ring{ position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:waPulse 2.2s ease-out infinite; }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }
.wa-float__icon{ position:relative; z-index:1; }
.wa-float__tooltip{
  position:absolute; right:72px; top:50%; transform:translateY(-50%) translateX(8px);
  background:var(--bg-elevated); color:var(--ink); font-size:.82rem; font-weight:700;
  padding:.5rem .9rem; border-radius:10px; white-space:nowrap; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
}
.wa-float:hover .wa-float__tooltip{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ======================================================
   Responsive
====================================================== */
@media (max-width: 1024px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; margin-bottom:1rem; }
  .signal-orb{ width:260px; height:260px; }
  .plans{ grid-template-columns:1fr; }
  .features{ grid-template-columns:repeat(2, 1fr); }
  .channels-grid{ grid-template-columns:repeat(2, 1fr); }
  .testimonials{ grid-template-columns:1fr; }
  .coverage__inner{ grid-template-columns:1fr; text-align:center; }
  .coverage__inner .btn{ margin-inline:auto; }
  .footer__inner{ grid-template-columns:1fr; gap:2rem; }
}

@media (max-width: 760px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .header__actions{ gap:.5rem; }
  .hero{ padding:130px 0 70px; }
  .hero__stats{ gap:1.5rem; }
  .section{ padding:80px 0; }
  .features{ grid-template-columns:1fr; }
  .channels-grid{ grid-template-columns:1fr; }
  .wa-float{ width:54px; height:54px; bottom:16px; right:16px; }
  .wa-float__tooltip{ display:none; }
  .btn--lg{ padding:.9rem 1.5rem; font-size:.92rem; }
}

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