/* ═══════════════════════════════════════════════════
   PIXEL & PILLAR — styles.css  v4
   Paleta: blanco · negro · azul #0066FF
═══════════════════════════════════════════════════ */

/* ─── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,video{display:block;max-width:100%}
button{font:inherit}
a{text-decoration:none;color:inherit}
ul{list-style:none}
html{scroll-behavior:smooth}

/* ─── TOKENS ── */
:root{
  --accent: #00AAFF;
  --accent2: #00d4ff;
  --black:#0a0a0a;
  --white:#ffffff;
  --g100:#f5f5f5;
  --g200:#e8e8e8;
  --g500:#888888;
  --blue:#00AAFF;
  --blue-d: #00AAFF;
  --neon:#00AAFF;
  --ff-display:'Bebas Neue',sans-serif;
  --ff-body:'DM Sans',sans-serif;
  --ff-mono:'Space Mono',monospace;
  --wrap:min(1300px,100% - 3rem);
  /* ── Shadow system ── */
  --shadow-card:0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.07);
  --shadow-card-dark:0 8px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  --shadow-blue:0 0 32px rgba(0,102,255,.22), 0 0 80px rgba(0,102,255,.10);
  --shadow-blue-strong:0 0 60px rgba(0,170,255,.35), 0 12px 40px rgba(0,0,0,.55);
  --shadow-neon:0 0 20px rgba(0,170,255,.6), 0 0 60px rgba(0,102,255,.3);
  --glow-text:0 0 40px rgba(0,170,255,.5);
}

body{
  font-family:var(--ff-body);
  background:var(--white);
  color:var(--black);
  overflow-x:hidden;
  overflow-y:scroll;
  scrollbar-width:none;
  cursor:none;
}
@media(pointer:coarse){body{cursor:auto}}

/* ─── NOISE ── */
.noise{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.02;

  background-image:url("data:image/svg+xml,...");
  background-size:300px;

  will-change: transform;
  animation:noiseShift .6s steps(1) infinite;
}
@keyframes noiseShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, -1%); }
  50%  { transform: translate(1%, 2%); }
  75%  { transform: translate(-1%, 1%); }
  100% { transform: translate(0, 0); }
}
/* Móvil: desactivar noise (costoso en GPU) */
@media(max-width:767px){.noise{display:none}}

/* ─── CURSOR ── */
#cursor-dot,#cursor-ring{
  position:fixed;border-radius:50%;pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
}
#cursor-dot{
  width:8px;height:8px;background:var(--blue);
  transition:background .2s;
  box-shadow:0 0 12px rgba(0,102,255,.8), 0 0 24px rgba(0,102,255,.4);
}
#cursor-ring{
  width:36px;height:36px;border:1.5px solid var(--blue);
  transition:width .3s,height .3s,border-color .3s,background .3s;
  will-change:transform;
  box-shadow:0 0 16px rgba(0,102,255,.3);
}
body.c-expand #cursor-ring{width:56px;height:56px;background:rgba(0,102,255,.08);box-shadow:0 0 28px rgba(0,102,255,.45)}
body.c-light  #cursor-dot {background:var(--white);box-shadow:0 0 12px rgba(255,255,255,.6)}
body.c-light  #cursor-ring{border-color:rgba(255,255,255,.5);box-shadow:0 0 16px rgba(255,255,255,.15)}
@media(pointer:coarse){#cursor-dot,#cursor-ring{display:none}}

/* ─── UTILS ── */
.wrap{width:var(--wrap);margin-inline:auto}

.label{
  font-family:var(--ff-mono);
  font-size:clamp(1rem,1.2vw,1.15rem);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--blue);
  display:flex;align-items:center;gap:.9rem;
  margin-bottom:1.4rem;
}
.label::before{content:'';width:24px;height:2px;background:var(--blue);display:inline-block}

/* ─── REVEAL ── */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity .9s cubic-bezier(.25,.46,.45,.94) var(--d,0s),
             transform .9s cubic-bezier(.25,.46,.45,.94) var(--d,0s);
}
.reveal.in{opacity:1;transform:translateY(0)}

/* ─── SCRAMBLE ── */
.scramble-letter{display:inline-block}

/* ─── FLIP LINK ── */
.flip-link{
  display:inline-flex;flex-direction:column;overflow:hidden;height:1.1em;perspective:600px;
}
.flip-link span{
  display:block;font-family:var(--ff-mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  transition:transform .45s cubic-bezier(.76,0,.24,1),opacity .45s;
  transform-origin:50% 0;backface-visibility:hidden;
}
.flip-link span:last-child{transform:rotateX(90deg) translateY(-100%);opacity:0;color:var(--g500)}
.flip-link:hover span:first-child{transform:rotateX(-90deg) translateY(100%);opacity:0}
.flip-link:hover span:last-child{transform:rotateX(0) translateY(-100%);opacity:1}

/* ─── KEYFRAMES ── */
@keyframes fadeUp {from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(105%)} to{opacity:1;transform:translateY(0)}}
@keyframes scrollDown{0%{top:-100%}100%{top:200%}}
@keyframes tickerSlide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes scanDown{0%{top:0%}100%{top:100%}}
@keyframes marqueeL{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes marqueeR{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(0,255,136,.4)}
  50%{opacity:.8;transform:scale(1.2);box-shadow:0 0 0 8px rgba(0,255,136,0)}
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 28px rgba(0,102,255,.5)}
  50%{box-shadow:0 0 56px rgba(0,170,255,.8),0 0 100px rgba(0,102,255,.3)}
}
@keyframes borderGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(0,170,255,0)}
  50%{box-shadow:0 0 24px rgba(0,170,255,.4)}
}

/* ═══════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem clamp(1.25rem,4vw,4rem);
  transition:background .35s,backdrop-filter .35s,padding .35s,border-color .35s;
}
#nav.scrolled{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
  padding-block:.9rem;
  border-bottom:1px solid var(--g200);
}

/* LOGO — se estira al alto del navbar cancelando su padding */
.nav-logo{display:flex;align-items:stretch;flex-shrink:0;margin-block:-1.4rem}
.nav-logo-img{height:88px;width:auto;max-width:clamp(120px,18vw,220px);display:block;object-fit:contain}

#nav.scrolled .nav-logo{margin-block:-.9rem}
#nav.scrolled .nav-logo-img{height:60px}

/* móvil */
@media(max-width:767px){
  .nav-logo-img{height:64px;max-width:clamp(100px,40vw,160px)}
  #nav.scrolled .nav-logo-img{height:44px}
}

.nav-links{display:none;gap:2.5rem;mix-blend-mode:difference}
#nav.scrolled .nav-links{mix-blend-mode:normal}
.nav-links .flip-link{color:var(--white)}
#nav.scrolled .nav-links .flip-link{color:var(--black)}

.nav-cta{
  display:none;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.58rem 1.4rem;
  background:var(--blue);color:var(--white);
  transition:background .3s, box-shadow .3s;flex-shrink:0;
  box-shadow:0 0 18px rgba(0,102,255,.4);
}
.nav-cta:hover{background:var(--blue-d);box-shadow:0 0 32px rgba(0,102,255,.7)}

@media(min-width:768px){
  .nav-links{display:flex}
  .nav-cta  {display:inline-block}
  .nav-burger{display:none!important}
}

.nav-burger{
  display:flex;flex-direction:column;gap:5px;
  background:none;border:none;padding:4px;cursor:pointer;mix-blend-mode:difference;
}
.nav-burger span{display:block;width:24px;height:1px;background:var(--white);transition:transform .3s,opacity .3s}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.open span:nth-child(2){transform:translateY(-6px) rotate(-45deg)}
#nav.scrolled .nav-burger span{background:var(--black)}

.drawer{
  position:fixed;inset:0;z-index:999;background:var(--black);
  display:flex;align-items:center;justify-content:center;
  transform:translateX(100%);transition:transform .52s cubic-bezier(.76,0,.24,1);
}
.drawer.open{transform:translateX(0)}
.drawer-link{
  font-family:var(--ff-display);font-size:clamp(2.8rem,10vw,5.5rem);
  letter-spacing:.04em;color:var(--white);display:block;padding:.35rem;transition:color .3s;
}
.drawer-link:hover{color:var(--blue)}

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
#hero{
  position:relative;height:100svh;min-height:560px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--black);
}
#hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:brightness(.28);will-change:transform;
  contain:strict;
}
@media(max-width:767px){
  #hero-video{filter:brightness(.32);will-change:auto}
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 60%,rgba(0,102,255,.12) 100%);
}
.hero-grid-lines{
  position:absolute;inset:0;display:flex;justify-content:space-between;
  padding-inline:clamp(1.25rem,5vw,5rem);pointer-events:none;
}
.hero-grid-lines span{width:1px;height:100%;background:rgba(255,255,255,.04)}

.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:.88rem;letter-spacing:.22em;text-transform:uppercase;
  color:#00FF88;margin-bottom:clamp(1.2rem,2.5vw,2rem);
  opacity:0;animation:fadeUp 1s .2s forwards;
}
.hero-tag::before{
  content:'';width:7px;height:7px;background:#00FF88;
  border-radius:50%;animation:pulse 2s infinite;
  box-shadow:0 0 12px rgba(0,255,136,.8), 0 0 24px rgba(0,255,136,.4);
}

.hero-content{
  position:relative;z-index:2;text-align:center;color:var(--white);
  padding-inline:clamp(1rem,5vw,3rem);width:100%;
}
.hero-eyebrow{
  font-family:var(--ff-mono);font-size:clamp(.58rem,.75vw,.68rem);
  letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.38);
  display:flex;align-items:center;justify-content:center;gap:1.4rem;
  margin-bottom:clamp(1.2rem,2.5vw,2rem);
  opacity:0;animation:fadeUp 1s .3s forwards;
}
.ey-line{display:inline-block;width:36px;height:1px;background:rgba(255,255,255,.2)}

.hero-title{
  font-family:var(--ff-display);font-size:clamp(4rem,14vw,13rem);
  line-height:.88;letter-spacing:.02em;color:var(--white);
}
.hero-title .blue   {
  color:var(--neon);
  text-shadow:0 0 40px rgba(0,170,255,.7), 0 0 100px rgba(0,102,255,.4);
}
.hero-title .outline{-webkit-text-stroke:2px var(--white);color:transparent;filter:drop-shadow(0 0 18px rgba(255,255,255,.2))}
.hero-line{display:block;overflow:hidden}
.word{
  display:inline-block;opacity:0;transform:translateY(105%);
  animation:slideUp .95s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-line:nth-child(1) .word{animation-delay:.5s}
.hero-line:nth-child(3) .word{animation-delay:.7s}
.hero-amp{
  display:block;font-family:var(--ff-display);font-size:clamp(2rem,5vw,5.5rem);
  color:rgba(255,255,255,.13);opacity:0;animation:fadeUp .8s .6s forwards;
}
.hero-sub{
  font-size:clamp(.9rem,1.6vw,1.1rem);font-weight:300;line-height:1.75;
  color:rgba(255,255,255,.58);max-width:460px;margin:clamp(1.4rem,3vw,2.4rem) auto 0;
  opacity:0;animation:fadeUp 1s 1s forwards;
}
.hero-btns{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;
  margin-top:clamp(1.8rem,4vw,3rem);opacity:0;animation:fadeUp 1s 1.2s forwards;
}

.btn-solid{
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.9rem 2.2rem;background:var(--blue);color:var(--white);
  border-radius:999px;display:inline-block;
  transition:background .3s, box-shadow .3s, transform .3s;
  box-shadow:0 0 24px rgba(0,102,255,.5);
  animation:glowPulse 3s ease-in-out infinite;
}
.btn-solid:hover{
  background:var(--blue-d);
  box-shadow:0 0 48px rgba(0,102,255,.8);
  transform:translateY(-2px);
  animation:none;
}
.btn-ghost{
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.9rem 2.2rem;border:1px solid rgba(255,255,255,.28);
  color:var(--white);display:inline-block;border-radius:999px;transition:border-color .3s,background .3s,box-shadow .3s;
}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.07);box-shadow:0 0 24px rgba(255,255,255,.12)}

.hero-scroll{
  position:absolute;bottom:clamp(4.5rem,8vw,6rem);left:50%;
  transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  opacity:0;animation:fadeUp 1s 1.8s forwards;
}
.scroll-track{width:1px;height:64px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.scroll-thumb{
  position:absolute;top:-100%;width:100%;height:100%;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.55));
  animation:scrollDown 2s ease-in-out infinite;
}
.hero-scroll span{font-family:var(--ff-mono);font-size:.95rem;letter-spacing:.3em;color:rgba(255,255,255,.28);text-transform:uppercase}

.hero-ticker{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.07);
  overflow:hidden;padding:.75rem 0;
}
.ticker-tape{display:flex;animation:tickerSlide 22s linear infinite;white-space:nowrap}
.ticker-tape span{font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.3);padding:0 2rem}
.ticker-tape em{color:rgba(255,255,255,.12);font-style:normal;padding:0 .5rem}

/* ═══════════════════════════════════════════════════
   DOBLE MARQUEE
═══════════════════════════════════════════════════ */
.marquee-wrap{background:var(--black);border-top:1px solid #1a1a1a;overflow:hidden}
.marquee-row {padding:.85rem 0;overflow:hidden;border-bottom:1px solid #1a1a1a}
.marquee-row:last-child{border-bottom:none}
.marquee-track{display:flex;white-space:nowrap}
.marquee-row:nth-child(1) .marquee-track{animation:marqueeL 28s linear infinite}
.marquee-row:nth-child(2) .marquee-track{animation:marqueeR 28s linear infinite}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}
/* Móvil: ralentizar marquee para ahorrar CPU */
@media(max-width:767px){
  .marquee-row:nth-child(1) .marquee-track{animation-duration:50s}
  .marquee-row:nth-child(2) .marquee-track{animation-duration:50s}
  /* Ocultar la segunda fila duplicada en móvil — solo decorativa */
  .marquee-row:nth-child(2){display:none}
}
.marquee-item{
  font-family:var(--ff-display);font-size:clamp(.8rem,1.2vw,1.1rem);
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.22);
  padding:0 2.5rem;flex-shrink:0;transition:color .3s;
}
.marquee-item:hover{color:rgba(255,255,255,.7)}
.marquee-item.accent{color:var(--blue)}

/* ═══════════════════════════════════════════════════
   MANIFESTO
═══════════════════════════════════════════════════ */
/* ─── MOBILE RENDER PERFORMANCE ── */
@media(max-width:767px){

  /* backdrop-filter es el mayor killer de scroll en Android Chrome */
  #nav.scrolled{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(255,255,255,.98);
  }

  /* Desactivar animación de box-shadow — no es GPU, fuerza repaint */
  .btn-solid{
    animation:none;
    box-shadow:0 0 18px rgba(0,102,255,.4);
  }

  /* Reducir text-shadow costosos en hero */
  .hero-title .blue{
    text-shadow:none;
    color:var(--neon);
  }
  .hero-title .outline{
    filter:none;
  }

  /* Sin glow en stats */
  .stat-n{text-shadow:none}

  /* Sin glow en secciones de fondo negro */
  .wcu-choose{filter:none}
  .cta-title .blue{text-shadow:none}
  .plans-packages{text-shadow:none}
}

/* scroll nativo sin interceptar en móvil */
@media(max-width:767px){
  html{scroll-behavior:auto}
}


.mf-grid{display:grid;grid-template-columns:1fr}

.mf-left{
  background:var(--black);color:var(--white);
  padding:clamp(3rem,7vw,7rem) clamp(1.5rem,5vw,5rem);
  display:flex;flex-direction:column;justify-content:center;
}
.mf-left .label{color:rgba(255,255,255,.25)}
.mf-left .label::before{background:#00AAFF}

.mf-headline{
  font-family:var(--ff-display);font-size:clamp(2.6rem,6vw,5.5rem);
  line-height:.92;letter-spacing:.02em;margin-bottom:clamp(1.2rem,3vw,2rem);color:var(--white);
}
.mf-headline span{display:block}
.mf-headline .dim{color:#00AAFF;text-shadow:0 0 18px rgba(0,51,170,.8),0 0 45px rgba(0,102,255,.4)}
.mf-body{font-size:clamp(.88rem,1.2vw,1rem);line-height:1.85;color:rgba(255,255,255,.52);font-weight:300}

.stats{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2rem,4vw,3.5rem);padding-top:clamp(1.5rem,3vw,2.5rem);
  border-top:1px solid rgba(255,255,255,.08);
}
.stat-n{
  font-family:var(--ff-display);font-size:clamp(2.8rem,5vw,3.8rem);
  color:var(--blue);display:block;
  text-shadow:0 0 24px rgba(0,102,255,.5), 0 0 60px rgba(0,170,255,.2);
}
.stat span{font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.18em;color:rgba(255,255,255,.28);text-transform:uppercase;display:block;margin-top:.25rem}

.mf-right{display:flex;flex-direction:column}
.mf-video-wrap{position:relative;overflow:hidden;min-height:clamp(240px,40vw,480px);flex:1;background:var(--g100)}
.mf-video-wrap video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}
.mf-video-wrap:hover video{transform:scale(1.03)}

.scan-line{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,transparent,rgba(0,102,255,.35),transparent);
  animation:scanDown 4s linear infinite;z-index:2;pointer-events:none;
}
@media(max-width:767px){.scan-line{display:none}}
.corner{position:absolute;width:18px;height:18px;z-index:3}
.corner.tl{top:1rem;left:1rem;border-top:1px solid rgba(0,102,255,.55);border-left:1px solid rgba(0,102,255,.55)}
.corner.tr{top:1rem;right:1rem;border-top:1px solid rgba(0,102,255,.55);border-right:1px solid rgba(0,102,255,.55)}
.corner.bl{bottom:1rem;left:1rem;border-bottom:1px solid rgba(0,102,255,.55);border-left:1px solid rgba(0,102,255,.55)}
.corner.br{bottom:1rem;right:1rem;border-bottom:1px solid rgba(0,102,255,.55);border-right:1px solid rgba(0,102,255,.55)}

.mf-caption{background:var(--g100);padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,5vw,4rem)}
.mf-cap-title{font-family:var(--ff-display);font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.9rem;letter-spacing:.03em}
.mf-cap-body{font-size:clamp(.86rem,1.1vw,.96rem);color:var(--g500);line-height:1.85;font-weight:300}

@media(min-width:768px){.mf-grid{grid-template-columns:48% 52%;min-height:72vh}}

.vid-strip{display:grid;grid-template-columns:1fr;gap:0}
.vs-item{position:relative;overflow:hidden;height:clamp(200px,35vw,420px)}
.vs-item video{width:100%;height:100%;object-fit:cover;filter:brightness(.5) grayscale(.35);transition:transform .9s cubic-bezier(.25,.46,.45,.94),filter .6s}
.vs-item:hover video{transform:scale(1.06);filter:brightness(.78) grayscale(0)}
@media(max-width:767px){
  .vs-item video{filter:brightness(.55);transition:none}
  .vs-item:hover video{transform:none;filter:brightness(.7)}
}
.vs-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.62) 0%,transparent 55%);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:clamp(1rem,3vw,1.8rem);
}
.vs-overlay span{font-family:var(--ff-display);font-size:clamp(1.2rem,3vw,1.8rem);letter-spacing:.05em;color:var(--white);transform:translateY(3px);transition:transform .4s}
.vs-overlay em{font-size:1.1rem;color:transparent;font-style:normal;transform:translate(-4px,4px);transition:color .4s,transform .4s}
.vs-item:hover .vs-overlay span{transform:translateY(0)}
.vs-item:hover .vs-overlay em{color:var(--blue);transform:translate(0,0)}
@media(min-width:640px){.vid-strip{grid-template-columns:repeat(3,1fr)}}

/* ═══════════════════════════════════════════════════
   STATEMENT
═══════════════════════════════════════════════════ */
.statement{
  padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,6vw,5.5rem);
  background:var(--white);border-bottom:1px solid var(--g200);
}
.statement{padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,6vw,5.5rem);background:var(--white);border-bottom:1px solid var(--g200)}
.st-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media(min-width:860px){.st-grid{grid-template-columns:1fr 1fr}}
.st-title{font-family:var(--ff-display);font-size:clamp(2.5rem,4.5vw,7rem);line-height:.92;letter-spacing:.02em;margin-block:1rem;white-space:nowrap;text-shadow:4px 4px 0 rgba(0,102,255,.08),8px 8px 0 rgba(0,102,255,.04)}
.st-sub{font-size:clamp(.9rem,1.3vw,1.05rem);color:var(--g500);font-weight:300;line-height:1.72;max-width:480px;margin-bottom:1.6rem}
.st-points{display:flex;flex-direction:column;gap:1.1rem;max-width:480px}
.st-points li{display:flex;align-items:flex-start;gap:14px}
.st-dot{width:7px;height:7px;background:var(--blue);border-radius:50%;flex-shrink:0;margin-top:7px;box-shadow:0 0 8px rgba(0,102,255,.5)}
.st-points p{font-size:clamp(.86rem,1.1vw,.95rem);color:var(--g500);line-height:1.7;font-weight:300}
.st-points strong{color:var(--black);font-weight:700}
.st-mockup{display:flex;flex-direction:column}
.mock-label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;font-weight:700}
.mock-bad-label{background:#fff0f0;color:#993C1D;border:1px solid #F5C4B3;border-bottom:none}
.mock-good-label{background:#f0fff4;color:#3B6D11;border:1px solid #C0DD97;border-bottom:none}
.mock-browser{border:1px solid var(--g200);overflow:hidden}
.mock-browser-good{border-color:#C0DD97}
.mock-bar{background:var(--g100);padding:7px 10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--g200)}
.mock-dots{display:flex;gap:4px}
.mock-dots span{width:8px;height:8px;border-radius:50%;background:var(--g200)}
.mock-url{flex:1;background:var(--white);border:1px solid var(--g200);border-radius:3px;padding:2px 7px;font-family:var(--ff-mono);font-size:10px;color:var(--g500)}
.mock-url-good{color:#3B6D11}
.mock-screen{padding:12px;background:var(--white)}
.mock-hero-bad{font-size:11px;color:var(--g500);background:var(--g100);padding:14px;text-align:center;border:1px dashed var(--g200);margin-bottom:8px}
.mock-lines{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.mock-line{height:8px;background:var(--g200);border-radius:2px;width:100%}
.mock-tags-bad{display:flex;gap:5px;flex-wrap:wrap}
.mock-tags-bad span{font-size:9px;background:#fff0f0;color:#993C1D;border:1px solid #F5C4B3;border-radius:2px;padding:2px 6px;font-family:var(--ff-mono)}
.mock-nav-good{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mock-logo{width:24px;height:24px;background:var(--blue);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:var(--white);font-family:var(--ff-mono)}
.mock-nav-links{display:flex;gap:8px}
.mock-nav-links span{font-size:9px;color:var(--g500)}
.mock-cta-nav{font-size:9px;background:var(--blue);color:var(--white);padding:3px 7px;border-radius:2px;font-family:var(--ff-mono)}
.mock-hero-good{background:#f0f7ff;padding:10px;border-radius:3px;margin-bottom:8px}
.mock-hero-tag{font-size:8px;color:var(--blue);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;font-family:var(--ff-mono)}
.mock-hero-h{font-size:13px;font-weight:700;color:var(--black);line-height:1.3;margin-bottom:4px}
.mock-hero-sub{font-size:9px;color:var(--g500);margin-bottom:8px}
.mock-btns{display:flex;gap:5px}
.mock-btn-p{font-size:9px;background:var(--blue);color:var(--white);padding:4px 9px;border-radius:2px;font-family:var(--ff-mono)}
.mock-btn-s{font-size:9px;color:var(--blue);border:1px solid var(--blue);padding:4px 9px;border-radius:2px;font-family:var(--ff-mono)}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mock-stat{background:var(--g100);padding:6px;text-align:center;border-radius:2px}
.mock-stat b{display:block;font-size:13px;font-family:var(--ff-display);color:var(--black);letter-spacing:.02em}
.mock-stat span{display:block;font-size:8px;color:var(--g500);font-family:var(--ff-mono);margin-top:1px}
.mock-caption{font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:6px;border:1px solid var(--g200);border-top:none}
.mock-caption-bad{color:#993C1D;background:#fff0f0;border-color:#F5C4B3}
.mock-caption-good{color:#3B6D11;background:#f0fff4;border-color:#C0DD97}

/* ═══════════════════════════════════════════════════
   SERVICES — carrusel
   hover: fondo NEGRO (no azul)
═══════════════════════════════════════════════════ */
#services{padding:clamp(4rem,8vw,8rem) 0;background:var(--white);overflow:hidden}

/* El header va dentro del wrap normal */
.svc-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:clamp(2rem,5vw,4rem)}
.svc-title{font-family:var(--ff-display);font-size:clamp(3rem,8vw,7rem);line-height:.9;letter-spacing:.02em}
.svc-note{font-family:var(--ff-mono);font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g500);max-width:180px;text-align:right;line-height:1.8}

.carousel-outer{
  overflow:hidden;
  /* Se extiende hasta el borde derecho de la pantalla, fuera del wrap */
  width:calc(100% + clamp(1.25rem,4vw,4rem));
  margin-right:calc(-1 * clamp(1.25rem,4vw,4rem));
}
.carousel-track{
  display:flex;gap:24px;
  transition:transform .65s cubic-bezier(.76,0,.24,1);
  will-change:transform;user-select:none;
}
@media(max-width:767px){
  .carousel-track{
    transition:transform .4s cubic-bezier(.76,0,.24,1);
  }
}

/* ── EXTRA VIDEOS en manifesto ── */
.mf-extra-vids{display:grid;grid-template-columns:1fr 1fr;gap:0}
.mf-vid-sm{min-height:clamp(140px,18vw,220px);flex:none}

/* ── CAROUSEL RESPONSIVE ── */
@media(max-width:639px){
  .carousel-outer{
    width:calc(100% + 1rem);
    margin-right:-1rem;
  }
  .scard{
    padding:1.5rem 1.2rem;
  }
  .ct{font-size:1.6rem}
  .cp{font-size:1.8rem}
}
@media(min-width:640px) and (max-width:1023px){
  .carousel-outer{
    width:calc(100% + clamp(1.25rem,4vw,3rem));
    margin-right:calc(-1 * clamp(1.25rem,4vw,3rem));
  }
}
@media(min-width:1024px){
  .carousel-outer{
    width:calc(100% + clamp(1.25rem,4vw,4rem));
    margin-right:calc(-1 * clamp(1.25rem,4vw,4rem));
  }
}
.scard{
  flex-shrink:0;
  box-sizing:border-box;
  border:1px solid var(--g200);
  padding:clamp(1.8rem,3vw,3rem) clamp(1.5rem,2.5vw,2.5rem);
  position:relative;overflow:hidden;background:var(--white);
  transition:border-color .5s;
  word-break:break-word;
  min-width:0;
}
/* capa NEGRA que sube — no azul */
.scard::before{
  content:'';position:absolute;inset:0;
  background:var(--black);
  transform:translateY(101%);
  transition:transform .55s cubic-bezier(.76,0,.24,1);z-index:0;
}
.scard:hover::before{transform:translateY(0)}
/* Corner negro en esquina superior derecha */
.scard::after{
  content:'';position:absolute;
  top:0;right:0;
  width:52px;height:52px;
  background:var(--black);
  clip-path:polygon(100% 0,0 0,100% 100%);
  z-index:2;opacity:0;
  transition:opacity .4s ease;
}
.scard:hover::after{opacity:1}
.scard>*{position:relative;z-index:1}

.scard:hover .cn,
.scard:hover .ct,
.scard:hover .cd,
.scard:hover .cp,
.scard:hover .ctag{color:var(--white)}
.scard:hover .cm  {color:rgba(255,255,255,.45)}
.scard:hover .cdiv{background:rgba(255,255,255,.1)}
.scard:hover .ctag{border-color:rgba(255,255,255,.2)}
.scard:hover .carrow{color:rgba(255,255,255,.55);transform:translate(2px,-2px)}

.cn{font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.2em;color:var(--blue);margin-bottom:2.2rem;transition:color .3s}
.ct{font-family:var(--ff-display);font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:.03em;line-height:1;margin-bottom:1.2rem;transition:color .3s}
.cd{font-size:clamp(.84rem,1vw,.9rem);color:var(--g500);line-height:1.8;margin-bottom:2rem;font-weight:300;transition:color .3s}
.cdiv{border:none;width:100%;height:1px;background:var(--g200);margin-bottom:1.8rem;transition:background .3s}
.cp{font-family:var(--ff-display);font-size:clamp(2rem,4vw,3rem);letter-spacing:.02em;transition:color .3s}
.cm{font-family:var(--ff-mono);font-size:.7rem;color:var(--g500);letter-spacing:.1em;margin-top:.25rem;transition:color .3s}
.ctag{
  display:inline-block;margin-top:1.4rem;
  font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--g200);padding:.28rem .85rem;transition:color .3s,border-color .3s;
}
.carrow{position:absolute;top:clamp(1.5rem,3vw,2.5rem);right:clamp(1.5rem,3vw,2.5rem);font-size:1.1rem;color:transparent;z-index:3;transition:color .4s,transform .4s}

.c-controls{display:flex;align-items:center;gap:.75rem;margin-top:clamp(1.5rem,3vw,3rem);justify-content:flex-end}
.c-prog{font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.1em;color:var(--g500);margin-right:auto}
.c-btn{
  width:50px;height:50px;border:1px solid var(--black);background:var(--black);color:var(--white);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1rem;transition:background .3s,border-color .3s,color .3s;cursor:none;
}
.c-btn:hover{background:var(--blue);border-color:var(--blue);color:var(--white)}
@media(pointer:coarse){.c-btn{cursor:pointer}}

/* ═══════════════════════════════════════════════════
   WHY CHOOSE US
   Fondo negro · WHY blanco · CHOOSE US degradado azul
═══════════════════════════════════════════════════ */
#why-choose{
  background:var(--black);
  padding:clamp(5rem,10vw,10rem) 0;
}
#why-choose .label{color:rgba(0,170,255,.6)}
#why-choose .label::before{background:var(--neon)}

/* Título */
.wcu-title{
  font-family:var(--ff-display);
  font-size:clamp(3.5rem,11vw,14rem);
  line-height:.9;letter-spacing:.02em;
  text-align:center;
  margin-bottom:clamp(3rem,6vw,5rem);
  word-break:keep-all;
  overflow-wrap:normal;
}
.wcu-why{
  display:block;
  color:var(--white);
  text-shadow:0 0 60px rgba(255,255,255,.08);
}
.wcu-choose{
  display:block;
  color:var(--blue);
  text-shadow:
    0 0 20px rgba(0,102,255,.9),
    0 0 50px rgba(0,102,255,.6),
    0 0 100px rgba(0,102,255,.35);
}

/* Feature cards */
.wcu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:0;
  border-top:1px solid #2a2a2a;
  border-bottom:1px solid #2a2a2a;
  align-items:start;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.wcu-card{
  background:var(--black);
  padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem);
  position:relative;overflow:hidden;
  transition:background .35s, box-shadow .45s, transform .35s;
  border-right:1px solid #2a2a2a;
}
.wcu-card:last-child{border-right:none;}
.wcu-card::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--neon),var(--blue));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.76,0,.24,1);
  box-shadow:0 0 16px rgba(0,170,255,.6);
}
.wcu-card:hover{
  background:#111;
  box-shadow:inset 0 0 60px rgba(0,102,255,.06), 0 -2px 0 0 rgba(0,170,255,.1);
  transform:translateY(-2px);
}
.wcu-card:hover::after{transform:scaleX(1)}
.wcu-icon-box{
  width:56px;height:56px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.4rem;
  flex-shrink:0;
}
.wcu-icon-blue{
  background:rgba(0,102,255,.25);
  border:1px solid rgba(77,166,255,.35);
  color:#4da6ff;
}
.wcu-icon-orange{
  background:rgba(255,120,40,.25);
  border:1px solid rgba(255,140,58,.35);
  color:#ff8c3a;
}
.wcu-card h3{
  font-family:var(--ff-body);font-size:clamp(1rem,1.4vw,1.15rem);font-weight:800;
  color:var(--white);margin-bottom:.8rem;letter-spacing:.01em;
}
.wcu-card p{font-size:.9rem;font-weight:300;color:rgba(255,255,255,.7);line-height:1.7}

/* ── PLANS TITLE ──────────────────────── */
.plans-title{
  font-family:var(--ff-display);
  font-size:clamp(3rem,8vw,7rem);
  line-height:1;
  letter-spacing:.02em;
  margin-bottom:clamp(2rem,4vw,3.5rem);
  display:flex;
  flex-wrap:wrap;
  gap:.25em;
}
.plans-services{
  color:var(--white);
}
.plans-packages{
  color:#00AAFF;
  text-shadow:0 0 30px rgba(0,170,255,.5), 0 0 80px rgba(0,170,255,.2);
}

/* ── PRICING CATEGORIES ──────────────────── */
.pricing-category{
  margin-bottom:clamp(3rem,6vw,5rem);
}
.pricing-cat-label{
  display:flex;align-items:center;gap:.75rem;
  font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--neon);
  margin-bottom:1.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pricing-cat-icon{font-size:.8rem;opacity:.6}

.pricing-grid--2col{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  max-width:700px;
}

/* ── PRICING REDESIGN ──────────────────── */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1rem,2vw,1.5rem);
  background:transparent;
}
.price-card{
  background:#0d0d0d;
  border:1px solid rgba(255,255,255,.07);
  border-radius:2px;
  padding:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .4s, transform .4s, box-shadow .4s;
  box-shadow:0 4px 24px rgba(0,0,0,.3);
}
.price-card:hover{
  border-color:rgba(0,153,255,.5);
  transform:translateY(-6px);
  box-shadow:0 24px 80px rgba(0,0,0,.5),
             0 0 40px rgba(0,102,255,.2),
             0 0 80px rgba(0,170,255,.08);
}
/* glow azul en hover */
.price-card::before{
  content:'';position:absolute;
  top:-60px;left:50%;transform:translateX(-50%);
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(0,153,255,.12) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  opacity:0;transition:opacity .5s;
}
.price-card:hover::before{opacity:1}

/* línea superior degradado azul */
.price-card::after{
  content:'';position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#00CCFF,#0066FF,#0033AA);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.76,0,.24,1);z-index:2;
}
.price-card:hover::after{transform:scaleX(1)}
.price-card.featured::after{transform:scaleX(1)}

.price-card>*{position:relative;z-index:1}

/* featured */
.price-card.featured{
  border-color:rgba(0,102,255,.5);
  background:linear-gradient(145deg,#0d0d0d 0%,#0a1628 100%);
  box-shadow:0 8px 40px rgba(0,0,0,.5), 0 0 40px rgba(0,102,255,.15);
}
.price-badge{
  display:inline-block;
  font-family:var(--ff-mono);font-size:.92rem;letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(90deg,#00CCFF,#0066FF);
  color:var(--white);
  padding:.3rem 1rem;margin-bottom:1.6rem;border-radius:1px;
}

.price-label{
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;
  color:#00AAFF;margin-bottom:.6rem;
}
.price-name{
  font-family:var(--ff-display);font-size:clamp(1.6rem,3vw,2.2rem);
  letter-spacing:.03em;color:#00AAFF;margin-bottom:1rem;
}
.price-amount{
  font-family:var(--ff-display);
  font-size:clamp(2.8rem,6vw,4.5rem);
  line-height:1;margin-bottom:.3rem;
  color:#00AAFF;
}
.price-sub{
  font-family:var(--ff-mono);font-size:.82rem;color:rgba(0,170,255,.7);
  letter-spacing:.1em;margin-bottom:2rem;
}
.price-divider{
  width:100%;height:1px;
  background:rgba(255,255,255,.06);
  margin-bottom:1.8rem;
}

.price-features{display:flex;flex-direction:column;gap:.85rem;flex:1}
.price-features li{
  display:flex;align-items:flex-start;gap:.85rem;
  font-size:.9rem;font-weight:300;color:#00AAFF;line-height:1.5;
}
.price-features li::before{
  content:'✓';
  color:#00AAFF;flex-shrink:0;
  font-family:var(--ff-mono);font-size:.8rem;
  font-weight:700;margin-top:.05rem;
}
.price-card:hover .price-features li{color:#fff}

.price-cta{
  display:block;margin-top:2rem;text-align:center;
  font-family:var(--ff-mono);font-size:.88rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.9rem 1.8rem;
  background:transparent;
  border:1px solid rgba(255,255,255,.15);color:var(--white);
  transition:background .3s,border-color .3s;
}
.price-cta:hover{
  background:linear-gradient(135deg,#0066FF,#0033AA);
  border-color:transparent;
}
.price-card.featured .price-cta{
  background:linear-gradient(135deg,#00AAFF,#0066FF);
  border-color:transparent;
}
.price-card.featured .price-cta:hover{
  background:linear-gradient(135deg,#0066FF,#0033AA);
}

/* ═══════════════════════════════════════════════════
   SERVICES — borde azul en cada scard
═══════════════════════════════════════════════════ */
.scard{
  border-color:var(--blue) !important;
  border-width:3px !important;
  box-shadow:0 4px 24px rgba(0,0,0,.08), 0 0 0 0 rgba(0,102,255,0);
  transition:box-shadow .45s cubic-bezier(.25,.46,.45,.94), transform .45s cubic-bezier(.25,.46,.45,.94), background .4s !important;
}
.scard:hover{
  box-shadow:0 0 0 1px var(--neon),
             0 20px 60px rgba(0,0,0,.25),
             0 0 40px rgba(0,102,255,.25),
             0 0 80px rgba(0,170,255,.12);
  transform:translateY(-6px);
}

/* ═══════════════════════════════════════════════════
   EJEMPLOS / PORTFOLIO — carrusel igual que services
═══════════════════════════════════════════════════ */
#ejemplos{
  padding:clamp(4rem,8vw,8rem) 0;
  background:var(--white);
  border-top:1px solid var(--g200);
  overflow:hidden;
}
.ej-header{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:1rem;margin-bottom:clamp(2rem,5vw,4rem);
}
.ej-title{
  font-family:var(--ff-display);
  font-size:clamp(3rem,8vw,7rem);
  line-height:.9;letter-spacing:.02em;
}

/* Carrusel — misma lógica que .carousel-outer */
.ej-carousel-outer{
  overflow:hidden;
  width:calc(100% + clamp(1.25rem,4vw,4rem));
  margin-right:calc(-1 * clamp(1.25rem,4vw,4rem));
}
@media(max-width:639px){
  .ej-carousel-outer{width:calc(100% + 1rem);margin-right:-1rem}
}
@media(min-width:640px) and (max-width:1023px){
  .ej-carousel-outer{
    width:calc(100% + clamp(1.25rem,4vw,3rem));
    margin-right:calc(-1 * clamp(1.25rem,4vw,3rem));
  }
}

.ej-carousel-track{
  display:flex;
  gap:24px;
  transition:transform .65s cubic-bezier(.76,0,.24,1);
  will-change:transform;
  user-select:none;
}

/* Cada par — borde azul, imágenes apiladas */
.ej-pair{
  flex-shrink:0;
  box-sizing:border-box;
  border:5px solid var(--blue);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:box-shadow .4s, transform .4s;
  touch-action:pan-y;
}
.ej-pair:hover{
  box-shadow:0 0 0 2px var(--neon),
             0 20px 60px rgba(0,0,0,.3),
             0 0 48px rgba(0,102,255,.3),
             0 0 100px rgba(0,170,255,.1);
  transform:translateY(-5px);
}

.ej-img-wrap,
.ej-desc-wrap{
  width:100%;
  overflow:hidden;
  flex-shrink:0;
}
.ej-img-wrap{ aspect-ratio:1/1 }
.ej-desc-wrap{ aspect-ratio:120px }

.ej-img-wrap img,
.ej-desc-wrap img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#f5f5f5;
  transition:transform .6s cubic-bezier(.25,.46,.45,.94);
}
.ej-desc-wrap img{
  object-fit:cover;
  background:#111;
}
.ej-pair:hover .ej-img-wrap img,
.ej-pair:hover .ej-desc-wrap img{transform:scale(1.04)}

/* ═══════════════════════════════════════════════════
   PAYPAL — formulario
═══════════════════════════════════════════════════ */
#paypal{
  background:var(--black);
  padding:clamp(5rem,10vw,9rem) 0;
  border-top:1px solid #1a1a1a;
}
.pp-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(3rem,7vw,8rem);
  align-items:center;
}
@media(max-width:768px){.pp-inner{grid-template-columns:1fr}}

#paypal .label{color:rgba(0,170,255,.6)}
#paypal .label::before{background:var(--neon)}

.pp-title{
  font-family:var(--ff-display);
  font-size:clamp(3rem,7vw,6rem);
  line-height:.9;letter-spacing:.02em;
  color:var(--white);margin-bottom:1.4rem;
}
.pp-title .blue{color:var(--neon)}

.pp-desc{
  font-size:clamp(.9rem,1.2vw,1rem);font-weight:300;
  line-height:1.8;color:rgba(255,255,255,.45);
  max-width:400px;margin-bottom:2.2rem;
}

.pp-email-block{
  display:flex;flex-direction:column;gap:.4rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-left:3px solid var(--blue);
  padding:1.2rem 1.6rem;
  margin-bottom:2rem;
}
.pp-email-label{
  font-family:var(--ff-mono);font-size:.95rem;
  letter-spacing:.25em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.pp-email{
  font-family:var(--ff-mono);font-size:clamp(.85rem,1.3vw,1rem);
  color:var(--white);letter-spacing:.05em;word-break:break-all;
}
.pp-note{
  font-size:.95rem;font-weight:300;
  color:rgba(255,255,255,.22);line-height:1.7;
}

/* Formulario */
.pp-form-card{
  border:1px solid rgba(255,255,255,.09);
  padding:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem);
  background:#0d0d0d;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:1.4rem;
  box-shadow:0 8px 48px rgba(0,0,0,.5), 0 0 32px rgba(0,102,255,.08);
  transition:box-shadow .4s;
}
.pp-form-card:focus-within{
  box-shadow:0 8px 48px rgba(0,0,0,.5), 0 0 48px rgba(0,102,255,.2);
}
.pp-form-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#00CCFF,#0066FF,#0033AA);
  box-shadow:0 0 16px rgba(0,170,255,.5);
}

.pp-field-group{display:flex;flex-direction:column;gap:.5rem}

.pp-label{
  font-family:var(--ff-mono);font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.pp-optional{color:rgba(255,255,255,.2);font-size:.9em}

.pp-input{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:var(--white);
  font-family:var(--ff-body);font-size:.95rem;font-weight:300;
  padding:.85rem 1rem;
  outline:none;
  transition:border-color .3s,background .3s;
  width:100%;
  appearance:none;-webkit-appearance:none;
}
.pp-input:focus{
  border-color:var(--blue);
  background:rgba(0,102,255,.06);
}
.pp-input::placeholder{color:rgba(255,255,255,.2)}

.pp-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
  cursor:pointer;
}
.pp-select option{background:#1a1a1a;color:var(--white)}

.pp-amount-wrap{position:relative}
.pp-currency{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  font-family:var(--ff-mono);font-size:.9rem;color:rgba(255,255,255,.4);
  pointer-events:none;
}
.pp-amount-input{padding-left:2rem}
.pp-amount-input::-webkit-inner-spin-button,
.pp-amount-input::-webkit-outer-spin-button{-webkit-appearance:none}

/* Resumen */
.pp-summary{
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.2rem;
  background:rgba(0,102,255,.08);
  border:1px solid rgba(0,102,255,.2);
}
.pp-sum-label{
  font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.pp-sum-amount{
  font-family:var(--ff-display);font-size:1.6rem;
  color:var(--neon);letter-spacing:.04em;
}

/* Botón */
.pp-btn{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  font-family:var(--ff-mono);font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--blue);color:var(--white);
  border:none;
  border-radius:999px;padding:1.1rem 2rem;
  transition:background .3s,transform .3s,box-shadow .3s;
  cursor:pointer;width:100%;
  box-shadow:0 0 28px rgba(0,102,255,.5);
}
.pp-btn:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 0 52px rgba(0,102,255,.8)}
.pp-btn:active{transform:translateY(0)}

.pp-form-note{
  font-size:.7rem;font-weight:300;
  color:rgba(255,255,255,.2);
  text-align:center;line-height:1.6;
}

/* ═══════════════════════════════════════════════════
   WE DON'T DO AVERAGE
═══════════════════════════════════════════════════ */
#why{background:var(--white);padding:clamp(5rem,10vw,10rem) 0;border-top:1px solid var(--g200)}
.why-header{max-width:700px;margin-bottom:clamp(2.5rem,5vw,4rem)}
.why-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(3rem,6vw,6rem);align-items:start;
  max-width:1200px;margin:0 auto;
}
@media(min-width:900px){.why-grid{grid-template-columns:1fr 1fr;gap:40px;align-items:center}}

/* new two-column layout */
.why-split{
  display:grid;grid-template-columns:1fr;
  gap:0;max-width:1200px;margin:0 auto;
  width:100%;overflow:hidden;
}
@media(min-width:700px){
  .why-split{grid-template-columns:300px 1fr;gap:0;align-items:start}
}

/* LEFT: dots list */
.why-dots-col{
  display:flex;flex-direction:column;
  border-right:1px solid var(--g200);
  padding-right:0;
}
@media(max-width:699px){
  .why-dots-col{
    flex-direction:row;flex-wrap:wrap;gap:8px;
    border-right:none;border-bottom:1px solid var(--g200);
    padding-bottom:1.5rem;margin-bottom:1.5rem;
    width:100%;
  }
}
.why-dot-item{
  display:flex;align-items:center;gap:14px;
  padding:18px 24px 18px 0;
  border-bottom:1px solid var(--g200);
  cursor:pointer;
  transition:color .25s;
  font-family:var(--ff-body);font-size:14px;font-weight:500;
  color:var(--g500);letter-spacing:.02em;
  position:relative;
}
@media(max-width:699px){
  .why-dot-item{
    padding:9px 12px;border:1px solid var(--g200);
    border-radius:4px;font-size:12px;
    flex:0 1 auto;max-width:calc(50% - 4px);
    white-space:normal;word-break:break-word;
  }
  .why-dot-item.active{border-color:var(--blue);color:var(--blue)}
  .why-dot-item:last-child{border-bottom:1px solid var(--g200)}
}
.why-dot-item:last-child{border-bottom:none}
.why-dot-marker{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--g200);
  transition:background .25s, box-shadow .25s;
}
.why-dot-item.active{color:var(--black)}
.why-dot-item.active .why-dot-marker{
  background:var(--blue);
  box-shadow:0 0 10px rgba(0,170,255,.55);
}
.why-dot-item:hover:not(.active){color:var(--black)}
.why-dot-item:hover:not(.active) .why-dot-marker{background:var(--black)}

/* RIGHT: info panels */
.why-info-col{
  padding:0 0 0 clamp(1.5rem,4vw,3.5rem);
  min-height:260px;position:relative;
}
@media(max-width:699px){.why-info-col{padding:0}}
.why-panel{
  display:none;
  animation:whyFade .3s ease;
}
.why-panel.active{display:block}
@keyframes whyFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.why-panel-num{
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.15em;
  color:var(--blue);margin-bottom:1rem;display:block;
}
.why-panel h3{
  font-family:var(--ff-body);font-size:clamp(1.3rem,2.5vw,1.8rem);
  font-weight:800;color:var(--black);margin-bottom:1.2rem;
  line-height:1.2;
}
.why-panel p{
  font-size:clamp(.9rem,1.2vw,1rem);font-weight:300;
  color:var(--g500);line-height:1.8;max-width:520px;
}

/* Título gigante display */
.why-title{
  font-family:var(--ff-display);
  font-size:clamp(3rem,8vw,7rem);
  line-height:.92;
  letter-spacing:.02em;
  color:var(--black);
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
  text-shadow:0 2px 0 rgba(0,0,0,.06);
}
@media(max-width:600px){
  .why-title{
    font-size:16.5vw;
    letter-spacing:.01em;
  }
}
.why-title .blue{color:var(--blue)}

.why-desc{
  font-family:var(--ff-body);
  font-size:clamp(.9rem,1.3vw,1.05rem);
  font-weight:300;
  color:var(--g500);
  line-height:1.75;
  max-width:440px;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.why-features{display:flex;flex-direction:column;gap:clamp(1.2rem,2vw,1.8rem);margin-top:0}
.feature-item{display:flex;align-items:flex-start;gap:16px}
.feature-dot{
  width:8px;height:8px;background:var(--blue);
  border-radius:50%;flex-shrink:0;margin-top:8px;
  box-shadow:0 0 10px rgba(0,102,255,.45);
}
.feature-item h4{font-family:var(--ff-body);font-size:15px;font-weight:800;margin-bottom:4px;color:var(--black)}
.feature-item p{font-size:14px;font-weight:300;color:var(--g500);line-height:1.6}

/* stat boxes: hover NEGRO + glow azul sutil */
.why-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--g200)}
.stat-box{
  background:var(--white);padding:48px 40px;
  transition:background .35s,box-shadow .35s,transform .35s;
  cursor:default;
  position:relative;overflow:hidden;
}
@media(pointer:coarse){.stat-box{cursor:auto}}
.sms-link{cursor:pointer}
@media(pointer:coarse){.sms-link{cursor:auto}}
.stat-box::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--neon));
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.76,0,.24,1);
}
.stat-box:hover{background:var(--black);box-shadow:var(--shadow-blue);transform:translateY(-2px)}
.stat-box:hover::after{transform:scaleX(1)}
.stat-box:hover .stat-num-b{color:var(--white)}
.stat-box:hover .stat-lbl  {color:rgba(255,255,255,.5)}
.stat-num-b{font-family:var(--ff-display);font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--black);transition:color .3s}
.stat-lbl  {font-size:13px;font-weight:400;color:var(--g500);margin-top:8px;transition:color .3s}

/* ═══════════════════════════════════════════════════
   PROCESS
═══════════════════════════════════════════════════ */
#process{background:var(--black);padding:clamp(4rem,8vw,8rem) 0}
#process .label{color:rgba(0,170,255,.7)}
#process .label::before{background:var(--neon)}
.proc-title{font-family:var(--ff-display);font-size:clamp(3rem,8vw,8rem);line-height:.92;color:var(--white);margin-bottom:clamp(3rem,6vw,5rem);letter-spacing:.02em;hyphens:none}
.proc-title .blue{color:var(--blue)}
.proc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
@media(max-width:900px){.proc-steps{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.proc-steps{grid-template-columns:1fr}}
.proc-steps::before{
  content:'';position:absolute;top:28px;left:0;right:0;height:1px;
  background:linear-gradient(to right,var(--blue),rgba(0,102,255,.1));
}
.step{padding:0 32px 0 0;position:relative}
.step-num{
  width:56px;height:56px;border:1px solid var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-size:24px;color:var(--blue);
  margin-bottom:32px;background:var(--black);position:relative;z-index:1;
  transition:background .3s,color .3s,box-shadow .3s;
  box-shadow:0 0 16px rgba(0,102,255,.25), inset 0 0 16px rgba(0,102,255,.08);
}
.step:hover .step-num{
  background:var(--blue);color:var(--white);
  box-shadow:0 0 32px rgba(0,102,255,.7), 0 0 64px rgba(0,102,255,.3);
}
.step h3{font-family:var(--ff-body);font-size:18px;font-weight:800;color:var(--white);margin-bottom:12px}
.step p{font-size:14px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.4)}

/* ═══════════════════════════════════════════════════
   CONTACT / CTA
═══════════════════════════════════════════════════ */
#contact{
  background:var(--black);
  padding:clamp(5rem,10vw,10rem) clamp(1.5rem,6vw,6rem);
  text-align:center;position:relative;overflow:hidden;
}
#contact::before{
  content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(0,102,255,.18) 0%,rgba(0,170,255,.06) 40%,transparent 70%);
  pointer-events:none;
}
#contact::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--neon),var(--blue),transparent);
  box-shadow:0 0 24px rgba(0,170,255,.5);
}
.cta-tag{
  font-family:var(--ff-mono);font-size:.88rem;letter-spacing:.22em;text-transform:uppercase;
  color:#00FF88;margin-bottom:24px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.cta-tag::before{content:'';width:6px;height:6px;background:#00FF88;border-radius:50%;animation:pulse 2s infinite;box-shadow:0 0 12px rgba(0,255,136,.7)}
.cta-title{font-family:var(--ff-display);font-size:clamp(3.5rem,9vw,9rem);line-height:.92;color:var(--white);margin-bottom:32px}
.cta-title .blue{
  color:var(--neon);
  text-shadow:0 0 40px rgba(0,170,255,.7),0 0 100px rgba(0,102,255,.4);
}
.cta-title .outline{-webkit-text-stroke:2px rgba(255,255,255,.3);color:transparent;filter:drop-shadow(0 0 14px rgba(255,255,255,.15))}
.cta-desc{font-size:18px;font-weight:300;color:rgba(255,255,255,.5);max-width:480px;margin:0 auto 40px;line-height:1.7}
.cta-phone{
  font-family:var(--ff-display);font-size:36px;color:#00FF88;letter-spacing:.05em;margin-bottom:12px;display:block;
  transition:color .3s, text-shadow .3s;
  text-shadow:0 0 24px rgba(0,255,136,.5);
}
.cta-phone:hover{color:var(--neon);text-shadow:0 0 40px rgba(0,170,255,.8)}
.cta-sms-hint{
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.25);margin-bottom:36px;display:block;
}
.cta-sms-hint::before{content:'✉ '}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn-blue{
  font-family:var(--ff-mono);font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--blue);color:var(--white);border:none;
  padding:16px 40px;border-radius:999px;
  transition:all .3s;display:inline-block;cursor:none;
  box-shadow:0 0 28px rgba(0,102,255,.5);
}
.btn-blue:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 0 52px rgba(0,102,255,.8)}
.btn-cta-ghost{
  font-family:var(--ff-mono);font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.4);
  padding:16px 40px;border-radius:999px;transition:all .3s;display:inline-block;cursor:none;
}
.btn-cta-ghost:hover{border-color:var(--white);box-shadow:0 0 24px rgba(255,255,255,.1)}

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
footer{
  position:relative;min-height:clamp(500px,70vh,700px);
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--black);
}
#footer-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:brightness(.3);
  /* works for both <img> and <video> */
}
.ft-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.15) 55%,transparent 100%);
}
.ft-body{position:relative;z-index:2;padding:clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,4rem) clamp(2rem,3vw,3rem)}
.ft-title{
  font-family:var(--ff-display);font-size:clamp(2.6rem,10vw,9rem);color:var(--white);
  line-height:.88;letter-spacing:.02em;margin-block:clamp(1.2rem,3vw,2rem);
  text-shadow:0 0 80px rgba(0,102,255,.3), 0 4px 0 rgba(0,0,0,.4);
  word-break:keep-all;
}
@media(max-width:480px){.ft-title{font-size:clamp(2.2rem,14vw,3.8rem)}}
.ft-cta{
  display:inline-flex;align-items:center;gap:1rem;
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  background:var(--blue);color:var(--white);padding:1rem 2.4rem;
  transition:background .3s, box-shadow .3s;
  box-shadow:0 0 32px rgba(0,102,255,.5);
}
.ft-cta:hover{background:var(--blue-d);box-shadow:0 0 56px rgba(0,102,255,.8)}
.ft-arrow{font-size:1.1rem}

.ft-info{
  position:relative;z-index:2;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  padding:clamp(3rem,5vw,4rem) clamp(1.5rem,5vw,4rem);
  border-top:1px solid rgba(255,255,255,.07);
}
@media(max-width:768px){.ft-info{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ft-info{grid-template-columns:1fr}}
.ft-brand-p{font-size:14px;font-weight:300;line-height:1.8;color:rgba(255,255,255,.35);max-width:300px}
.ft-col h4{font-family:var(--ff-body);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--white);margin-bottom:20px}
.ft-col ul{display:flex;flex-direction:column;gap:10px}
.ft-col ul li,.ft-col a{font-size:14px;font-weight:300;color:rgba(255,255,255,.35);transition:color .2s}
.ft-col a:hover,.ft-col ul li:hover{color:var(--blue)}

.ft-bottom{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:1.2rem;
  justify-content:space-between;align-items:center;
  padding:1.8rem clamp(1.5rem,5vw,4rem);
  border-top:1px solid rgba(255,255,255,.05);
}
.ft-brand-name{font-family:var(--ff-display);font-size:1.2rem;letter-spacing:.1em;color:var(--white)}
.ft-links{display:flex;flex-wrap:wrap;gap:1.5rem}
.ft-links a{font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.3);transition:color .3s}
.ft-links a:hover{color:var(--blue)}
.ft-copy{font-family:var(--ff-mono);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.18)}
/* ═══════════════════════════════════════════════════
   LIGHTBOX — ejemplos fullscreen
═══════════════════════════════════════════════════ */

/* cursor pointer en las tarjetas */
.ej-pair{ cursor:pointer }

/* overlay fondo */
/* ── LIGHTBOX ─────────────────────────────────────── */
#ejLightbox{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:9999;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
/* fondo borroso */
#ejLightbox::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--lb-bg,none);
  background-size:cover;
  background-position:center;
  filter:blur(24px) brightness(.45) saturate(1.2);
  transform:scale(1.1);
  z-index:0;
}
/* fallback color por si no hay --lb-bg */
#ejLightbox::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
  z-index:1;
}
#ejLightbox.open{
  opacity:1;
  pointer-events:all;
}

/* inner centrado */
#ejLbInner{
  position:relative;
  z-index:2;
  width:min(92vw,560px);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  border-radius:4px;
  overflow:hidden;
  transform:scale(.93) translateY(16px);
  transition:transform .35s cubic-bezier(.34,1.3,.64,1);
}
#ejLightbox.open #ejLbInner{
  transform:scale(1) translateY(0);
}

/* imagen superior — 60% */
#ejLbInner .lb-img-top{
  flex:0 0 60%;
  overflow:hidden;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
}
#ejLbInner .lb-img-top img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* divisor */
#ejLbInner .lb-divider{
  flex-shrink:0;
  height:3px;
  background:#fff;
}

/* imagen inferior — 40% */
#ejLbInner .lb-img-bot{
  flex:0 0 40%;
  overflow:hidden;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}
#ejLbInner .lb-img-bot img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* botón cerrar */
#ejLbClose{
  position:fixed;
  top:1rem;
  right:1rem;
  z-index:10000;
  background:var(--blue);
  color:#fff;
  border:none;
  width:48px;height:48px;
  font-size:1.2rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:2px;
  opacity:0;
  transform:scale(.7);
  transition:opacity .3s .1s, transform .3s .1s, background .2s;
  -webkit-tap-highlight-color:transparent;
}
#ejLightbox.open #ejLbClose{
  opacity:1;
  transform:scale(1);
}
#ejLbClose:hover,#ejLbClose:active{ background:var(--blue-d) }

/* bloquea scroll */
body.lb-open{
  overflow:hidden;
  touch-action:none;
}

em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  }
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}

/* ── REMOVE BROWSERS ── */
.st-mockup{display:none}
.st-grid{grid-template-columns:1fr!important;max-width:680px;margin-inline:auto}
.st-text{text-align:center;align-items:center;display:flex;flex-direction:column}
.st-points{align-items:flex-start;text-align:left}

/* ── EXAMPLES white bg fix for dark mode ── */
.ej-img-wrap img,.ej-desc-wrap img{background:#ffffff!important}
.ej-pair{background:#fff}



/* ── scard border same blue ── */
.scard{border-color:var(--blue)!important;border-width:2px!important}

/* ── Text Us Now ── */
.btn-blue{background:var(--blue)!important}

/* ── PAYPAL bigger text ── */
.pp-label{font-size:1rem!important}
.pp-input{font-size:1.1rem!important;padding:1rem 1.1rem!important}
.pp-btn{font-size:1.05rem!important;padding:1.25rem 2rem!important}
.pp-email-label{font-size:1.05rem!important}
.pp-email{font-size:clamp(1rem,1.5vw,1.15rem)!important}
.pp-sum-label{font-size:.85rem!important}
.pp-sum-amount{font-size:2rem!important}

/* ── STATEMENT REDESIGN ── */
.st-grid{grid-template-columns:1fr 1fr!important;gap:clamp(3rem,6vw,7rem);align-items:start;max-width:none!important;margin-inline:0!important}
@media(max-width:860px){.st-grid{grid-template-columns:1fr!important}}
.st-text{text-align:left!important;align-items:flex-start!important}
.st-mockup{display:none!important}
.st-points-col{padding-top:.5rem}
.st-points{max-width:none;gap:1.6rem}
.st-points li{align-items:flex-start;gap:16px}
.st-points p{font-size:clamp(.88rem,1.1vw,.97rem);color:var(--g500);line-height:1.75;font-weight:300}

/* metrics row */
.st-metrics{display:flex;gap:clamp(1.2rem,3vw,2.5rem);margin-top:clamp(1.8rem,3vw,2.5rem);padding-top:1.4rem;border-top:1px solid var(--g200)}
.st-metric{display:flex;flex-direction:column;gap:.2rem}
.st-metric-n{font-family:var(--ff-display);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--black);line-height:1;letter-spacing:.02em}
.st-metric-l{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g500)}



/* ── DARK MODE SAFARI FIX ── */
:root { color-scheme: only light; }