/* Base visual de wipper.ar: la usan la home y /activar.
   Todo lo que sea de una sola página va en el <style> de esa página. */
:root{
  --tinta:#0C0712;          /* el lienzo, uno solo para toda la página */
  --humo:#A79AB3;           /* gris con sesgo violeta */
  --vidrio:rgba(255,255,255,.045);
  --vidrio-2:rgba(255,255,255,.075);
  --borde:rgba(255,255,255,.1);
  --borde-vivo:rgba(243,43,208,.45);
  --fucsia:#F32BD0;
  --magenta:#EE2E9E;
  --naranja:#FF7A2F;
  --violeta:#8B2BF3;
  --grad:linear-gradient(115deg,#F32BD0 0%,#EE2E9E 52%,#FF7A2F 100%);
  --ancho:1180px;
  --r:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--tinta);color:#fff;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:500;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
.wrap{width:100%;max-width:var(--ancho);margin:0 auto;padding-inline:20px}

/* ---------- telón: vive detrás de TODA la página, por eso no hay costuras ---------- */
.telon{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.telon i{position:absolute;display:block;border-radius:50%;filter:blur(90px);will-change:transform}
.telon i:nth-child(1){width:58vw;height:58vw;left:-14vw;top:-16vw;background:var(--fucsia);opacity:.4;animation:f1 19s ease-in-out infinite alternate}
.telon i:nth-child(2){width:50vw;height:50vw;right:-12vw;top:6vh;background:var(--naranja);opacity:.3;animation:f2 23s ease-in-out infinite alternate}
.telon i:nth-child(3){width:46vw;height:46vw;left:26vw;bottom:-18vh;background:var(--violeta);opacity:.32;animation:f3 27s ease-in-out infinite alternate}
@keyframes f1{to{transform:translate3d(12vw,10vh,0) scale(1.25)}}
@keyframes f2{to{transform:translate3d(-14vw,14vh,0) scale(1.18)}}
@keyframes f3{to{transform:translate3d(10vw,-14vh,0) scale(1.3)}}
/* grano fino: le saca el plástico al degradado */
.grano{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.progreso{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--grad);z-index:60;pointer-events:none}

/* ---------- tipografía ---------- */
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.03em;font-weight:800;line-height:1.04}
h1{font-size:clamp(38px,7vw,74px)}
h2{font-size:clamp(30px,4.8vw,50px)}
h3{font-size:20px;letter-spacing:-.015em;line-height:1.28}
.ojo{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:#FFB07E;margin:0 0 18px}
.ojo::before{content:"";width:22px;height:1.5px;background:var(--grad);border-radius:2px}
.bajada{font-size:clamp(17px,2.1vw,20px);color:var(--humo);max-width:60ch;margin:20px 0 0}
.llama{font-style:italic;padding-right:.1em;
  background:linear-gradient(105deg,#F32BD0,#FF7A2F,#F32BD0);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:correr 9s linear infinite}
@keyframes correr{to{background-position:220% 0}}
.pal{display:inline-block;opacity:0;transform:translateY(28px);animation:sube .85s cubic-bezier(.2,.8,.25,1) both}
.quieto .pal{opacity:1;transform:none;animation:none}
@keyframes sube{to{opacity:1;transform:none}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;border:0;
  font:inherit;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;
  background:var(--grad);background-size:180% 100%;color:#fff;
  box-shadow:0 12px 30px -12px rgba(238,46,158,.85);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s,background-position .5s}
.btn:hover{transform:translateY(-3px);background-position:100% 0;box-shadow:0 20px 42px -14px rgba(238,46,158,1)}
.btn.vidrio{background:var(--vidrio-2);box-shadow:none;border:1px solid var(--borde);backdrop-filter:blur(8px)}
.btn.vidrio:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
.btn svg{width:19px;height:19px;flex:none;fill:currentColor}
a:focus-visible,button:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:999px}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(12,7,18,.6);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:72px}
.nav img{height:21px;width:auto;filter:brightness(0) invert(1)}
.nav nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav nav a{color:#CFC3D9;text-decoration:none;font-weight:700;font-size:14.5px;position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;border-radius:2px;background:var(--grad);transition:right .28s cubic-bezier(.2,.8,.3,1)}
.nav nav a:hover{color:#fff}
.nav nav a:hover::after{right:0}
.nav .btn{padding:11px 20px;font-size:14.5px}
/* este link le habla al cliente final, no al comercio: va como botón aparte */
.nav .pasecta{padding:9px 16px;border-radius:999px;border:1px solid var(--borde);
  background:var(--vidrio-2);color:#fff;font-weight:800;white-space:nowrap}
.nav .pasecta::after{display:none}
.nav .pasecta:hover{background:rgba(255,255,255,.14)}
@media (max-width:920px){
  /* en el celular no entran tres cosas y el link al pase es el que le sirve al
     cliente final. "Iniciar sesión" sigue disponible, en el pie. */
  .nav nav a:not(.pasecta){display:none}
  .nav .wrap{gap:14px}
  .nav nav{gap:14px}
  .nav .btn{padding:11px 14px}
  .nav .btn .txt{display:none}
  .nav .btn svg{width:21px;height:21px}
}

/* ---------- secciones (todas transparentes: el lienzo es uno solo) ---------- */
section{padding-block:clamp(74px,9vw,124px);position:relative}
section[id]{scroll-margin-top:88px}
.encabezado{max-width:62ch;margin:0 0 52px}
.js .rev{opacity:0;transform:translateY(34px)}
.js .rev.visto{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.16,.84,.28,1),transform 1s cubic-bezier(.16,.84,.28,1)}
.js .rev.d1.visto{transition-delay:.1s}
.js .rev.d2.visto{transition-delay:.2s}
.js .rev.d3.visto{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rev{opacity:1;transform:none}
  .progreso{display:none}
}

/* ---------- tarjetas de vidrio con foco que sigue al mouse ---------- */
.vid{position:relative;border-radius:var(--r);border:1px solid var(--borde);background:var(--vidrio);
  backdrop-filter:blur(12px);overflow:hidden;transition:border-color .3s,transform .3s cubic-bezier(.2,.8,.3,1)}
.vid::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(243,43,208,.16),transparent 60%)}
@media (pointer:fine){.vid:hover::after{opacity:1}.vid:hover{border-color:var(--borde-vivo);transform:translateY(-5px)}}

/* ---------- pie (igual en las dos páginas) ---------- */
footer{border-top:1px solid rgba(255,255,255,.07);padding-block:40px;font-size:14px;color:#8C7F98}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
footer img{height:19px;width:auto;filter:brightness(0) invert(1);opacity:.85}
footer a{color:#BAACC6;text-decoration:none;font-weight:700}
footer a:hover{color:#fff}
footer .der{margin-left:auto}