/* ============================================================
   The Wai — landing de diagnóstico (tráfico de pauta IG)
   Sistema de marca: _plantillas/marca-thewai.css (mismos tokens)
   Mobile-first. Sin dependencias.
   ============================================================ */

@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
  font-style:normal;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --purple:#7600b1;
  --purple-mid:#a82be0;
  --purple-lite:#d9b8ee;
  --ink-dark:#100617;
  --ink-dark-2:#170a20;
  --white:#ffffff;
  --dim:rgba(255,255,255,.62);
  --dim-2:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.07);
  --card:rgba(255,255,255,.045);
  --wa:#25d366;
  --radius:16px;
  --wrap:1080px;
}

*{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none!important;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--ink-dark);
  color:var(--white);
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--purple-mid);outline-offset:3px;border-radius:6px;}

/* ---------- layout ---------- */
/* El padding respeta el notch: el <meta viewport-fit=cover> hace que el contenido
   llegue hasta el borde físico, y en iPhone apaisado se comía texto. */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;
  padding-left:max(22px,env(safe-area-inset-left));
  padding-right:max(22px,env(safe-area-inset-right));}
.wrap-narrow{max-width:660px;}
.center{text-align:center;}
section{position:relative;overflow:hidden;}

/* ---------- glows de marca ---------- */
.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;}
.glow-a{width:min(680px,140vw);aspect-ratio:1;right:-30vw;top:-28vh;
  background:radial-gradient(circle at center,rgba(168,43,224,.42) 0%,transparent 66%);}
.glow-b{width:min(520px,120vw);aspect-ratio:1;left:-34vw;bottom:-24vh;
  background:radial-gradient(circle at center,rgba(118,0,177,.38) 0%,transparent 70%);}
.glow-c{width:min(760px,150vw);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at center,rgba(168,43,224,.30) 0%,transparent 62%);}
.wrap,.topbar,.foot .wrap{position:relative;z-index:2;}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px max(22px,env(safe-area-inset-right)) 16px max(22px,env(safe-area-inset-left));
  max-width:var(--wrap);margin:0 auto;
}
.wm{font-weight:600;letter-spacing:.02em;font-size:17px;text-decoration:none;line-height:1;}
.wm .t{font-weight:300;color:var(--dim);}
.wm .w{color:var(--white);font-weight:800;}
.wm .r{font-size:.55em;vertical-align:super;color:var(--dim-2);}
.wm-sm{font-size:15px;}
.topbar-note{font-size:12px;color:var(--dim-2);letter-spacing:.02em;}

/* ---------- tipografía ---------- */
.kicker{
  text-transform:uppercase;letter-spacing:.24em;font-size:10.5px;font-weight:600;
  color:var(--purple-mid);margin-bottom:16px;
}
h1{font-weight:300;font-size:clamp(34px,8.2vw,60px);line-height:1.06;letter-spacing:-.025em;}
h1 b{font-weight:800;}
h2{font-weight:300;font-size:clamp(26px,6vw,40px);line-height:1.12;letter-spacing:-.02em;}
h2 b{font-weight:800;}
h3{font-size:17px;font-weight:600;letter-spacing:-.01em;}
.lead{color:var(--dim);font-size:clamp(15px,4vw,17.5px);font-weight:300;max-width:56ch;margin-top:18px;}
.lead b{color:var(--white);font-weight:600;}
.center-lead{margin-left:auto;margin-right:auto;}
.micro{font-size:12.5px;color:var(--dim-2);margin-top:12px;font-weight:300;}

/* ---------- botones ---------- */
.btn{
  display:inline-block;text-align:center;text-decoration:none;
  background:var(--purple);color:#fff;font-weight:600;font-size:16px;
  padding:17px 30px;border-radius:100px;line-height:1.2;
  box-shadow:0 10px 34px -12px rgba(168,43,224,.85);
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.btn:hover{background:var(--purple-mid);transform:translateY(-1px);}
.btn:active{transform:translateY(1px);}
.btn-lg{width:100%;max-width:420px;padding:19px 30px;font-size:17px;}
.btn-wa{background:var(--wa);color:#062d13;box-shadow:0 10px 34px -12px rgba(37,211,102,.8);}
.btn-wa:hover{background:#31e775;}
.btn-ghost{
  display:block;margin:18px auto 0;font-size:13.5px;color:var(--dim-2);
  text-decoration:underline;text-underline-offset:3px;font-weight:300;
}
.btn-ghost:hover{color:var(--white);}
.btn-back{
  margin-top:26px;font-size:14px;color:var(--dim-2);font-weight:300;
  padding:8px 2px;
}
.btn-back:hover{color:var(--white);}

/* ---------- hero ---------- */
.hero{padding:clamp(38px,9vw,80px) 0 clamp(50px,10vw,90px);}
.hero .btn-lg{margin-top:30px;}
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;}
.badges li{
  font-size:11.5px;font-weight:500;letter-spacing:.01em;color:var(--purple-lite);
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;
  background:rgba(168,43,224,.07);
}

/* ---------- la ecuación ----------
   Ya lo pagás → falta configurarlo → eso hacemos. Es el pitch entero y va
   apenas debajo del CTA: el tráfico de Instagram no scrollea hasta el fondo. */
.equation{list-style:none;margin-top:30px;display:grid;gap:10px;max-width:560px;}
.equation li{
  position:relative;padding:15px 17px 15px 48px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
}
.equation li::before{
  position:absolute;left:16px;top:16px;width:21px;height:21px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;line-height:1;
}
.eq-yes::before{content:"✓";background:rgba(37,211,102,.15);color:var(--wa);}
.eq-no::before {content:"✕";background:rgba(255,99,99,.15);color:#ff8080;}
.eq-do::before {content:"→";background:rgba(168,43,224,.20);color:var(--purple-lite);}
/* `.equation li` (clase+elemento) le gana a `.eq-do` a secas, así que va calificado. */
.equation li.eq-do{border-color:rgba(168,43,224,.42);background:rgba(168,43,224,.09);}
.eq-tag{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px;}
.equation p{font-size:13.5px;color:var(--dim);font-weight:300;line-height:1.5;}

/* ---------- quiz ---------- */
/* mientras se contesta, la landing desaparece: pantalla única, cero distracción */
body.is-quiz .paid,
body.is-quiz .how,
body.is-quiz .anti,
body.is-quiz .close,
body.is-quiz .foot{display:none;}

/* dvh y no vh: en el navegador de Instagram, vh mide la pantalla SIN sus barras,
   así que 88vh termina siendo más alto que lo que se ve y fuerza scroll de más.
   La línea vh queda primero como fallback para webviews viejas. */
.quiz{padding:24px 0 70px;min-height:88vh;min-height:88dvh;
  display:flex;align-items:flex-start;}
/* Encuadre de una línea. Es lo único que reemplaza al titular: dice de qué se trata
   sin pedirle a nadie que decida empezar algo. Desaparece en la pregunta 2. */
.quiz-intro{
  font-size:14.5px;color:var(--dim);font-weight:300;line-height:1.5;
  margin-bottom:20px;max-width:54ch;
}
.quiz-intro b{color:var(--white);font-weight:600;}
.qi-micro{color:var(--dim-2);white-space:nowrap;}
body.is-quiz .quiz-intro{display:none;}

.progress{height:3px;background:var(--line-2);border-radius:3px;overflow:hidden;margin-bottom:34px;}
.progress-bar{height:100%;width:20%;background:linear-gradient(90deg,var(--purple),var(--purple-mid));
  border-radius:3px;transition:width .35s cubic-bezier(.4,0,.2,1);}
.qhead{margin-bottom:26px;}
/* La pregunta es el h1 de la página (el quiz es la portada), pero NO usa el tamaño
   del h1 de titular: acá manda que entren las opciones sin scroll. */
.qhead h1{font-weight:400;font-size:clamp(24px,5.6vw,34px);line-height:1.12;letter-spacing:-.02em;}
.qhelp{color:var(--dim-2);font-size:14px;font-weight:300;margin-top:10px;}
.opts{display:flex;flex-direction:column;gap:11px;}
.opt{
  display:block;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 19px;transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.opt:hover{border-color:var(--purple-mid);background:rgba(168,43,224,.10);}
.opt:active{transform:scale(.985);}
.opt.picked{border-color:var(--purple-mid);background:rgba(168,43,224,.16);}
.opt .ot{font-size:16.5px;font-weight:600;letter-spacing:-.01em;}
.opt .os{display:block;font-size:13px;color:var(--dim-2);font-weight:300;margin-top:3px;}

/* ---------- resultado ---------- */
.result{padding:34px 0 80px;}
.result h2{font-size:clamp(27px,6.2vw,40px);}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;margin-top:18px;
}
.card-main{margin-top:30px;}
.card-eyebrow{
  text-transform:uppercase;letter-spacing:.2em;font-size:10px;font-weight:700;
  color:var(--purple-mid);margin-bottom:16px;
}
.checks{list-style:none;display:flex;flex-direction:column;gap:12px;}
.checks li{position:relative;padding-left:26px;font-size:15px;font-weight:300;color:rgba(255,255,255,.86);}
.checks li b{font-weight:600;color:#fff;}
.checks li::before{
  content:"";position:absolute;left:0;top:7px;width:12px;height:7px;
  border-left:2px solid var(--purple-mid);border-bottom:2px solid var(--purple-mid);
  transform:rotate(-45deg);
}
.minigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);
  border-radius:12px;overflow:hidden;margin-top:22px;}
.minigrid div{background:#1a0c24;padding:13px 10px;}
.minigrid .k{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);font-weight:600;}
.minigrid .v{display:block;font-size:13px;font-weight:600;margin-top:5px;letter-spacing:-.01em;line-height:1.25;}

/* escalera de precios */
.ladder{list-style:none;counter-reset:step;}
.ladder li{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  grid-template-areas:"num name price" "sp sub sub";
  column-gap:12px;
  padding:16px 0;border-bottom:1px solid var(--line-2);
}
.ladder li:last-child{border-bottom:none;padding-bottom:0;}
.ladder li:first-child{padding-top:0;}
.ladder .lnum{
  grid-area:num;width:26px;height:26px;border-radius:50%;
  background:rgba(168,43,224,.18);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;color:var(--purple-lite);
}
.ladder .lname{grid-area:name;font-size:15.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25;}
.ladder .lsub{grid-area:sub;font-size:12.5px;color:var(--dim-2);font-weight:300;
  margin-top:7px;line-height:1.4;}
.ladder .lprice{
  grid-area:price;text-align:right;font-size:15.5px;font-weight:700;
  color:var(--purple-lite);letter-spacing:-.02em;white-space:nowrap;line-height:1.25;
}
.ladder .lprice small{display:block;font-size:10.5px;font-weight:400;color:var(--dim-2);
  letter-spacing:0;margin-top:3px;white-space:normal;}
.ladder li.hi .lname{color:#fff;}
.ladder li.hi{background:rgba(168,43,224,.08);margin:0 -12px;padding-left:12px;padding-right:12px;
  border-radius:12px;border-bottom:none;}
.disclaimer{font-size:12px;color:var(--dim-2);font-weight:300;margin-top:18px;line-height:1.45;}
.card-roi p{font-size:14.5px;font-weight:300;color:rgba(255,255,255,.78);}
.card-roi b{font-weight:600;color:#fff;}

.cta-block{margin-top:34px;text-align:center;}
.cta-block .btn-lg{margin:0 auto;}
.next{margin-top:30px;border-top:1px solid var(--line-2);padding-top:18px;}
.next summary{font-size:14.5px;font-weight:600;cursor:pointer;list-style:none;color:var(--purple-lite);}
.next summary::-webkit-details-marker{display:none;}
.next summary::after{content:" +";color:var(--dim-2);}
.next[open] summary::after{content:" −";}
.next p{font-size:14.5px;color:var(--dim);font-weight:300;margin-top:12px;}

/* ---------- lo que ya estás pagando ---------- */
.paid{padding:clamp(56px,11vw,96px) 0;border-top:1px solid var(--line-2);}
.paidgrid{display:grid;gap:14px;margin-top:32px;}
.paidcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;border-top:2px solid var(--purple);
}
.paidcard h3{color:var(--purple-lite);margin-bottom:10px;}
.paidcard p{font-size:14.5px;color:var(--dim);font-weight:300;}
.paidcard b{color:#fff;font-weight:600;}
.bridge{
  margin-top:26px;font-size:15.5px;font-weight:300;color:var(--dim);
  border-left:2px solid var(--purple-mid);padding-left:18px;max-width:62ch;
}
.bridge b{color:#fff;font-weight:600;}

/* bloque "ya lo pagás" dentro del resultado */
.card-incluido{border-color:rgba(168,43,224,.34);background:rgba(168,43,224,.08);}
.card-incluido p{font-size:14.5px;font-weight:300;color:rgba(255,255,255,.82);}
.card-incluido b{color:#fff;font-weight:600;}

/* ---------- cómo trabajamos ---------- */
.how{padding:clamp(56px,11vw,96px) 0;border-top:1px solid var(--line-2);background:var(--ink-dark-2);}
.steps{list-style:none;display:grid;gap:16px;margin-top:36px;}
.steps li{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;
}
.steps .num{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--purple);
  font-size:15px;font-weight:700;margin-bottom:14px;
}
.steps p{font-size:14.5px;color:var(--dim);font-weight:300;margin-top:8px;}

/* ---------- anti-humo ---------- */
.anti{padding:clamp(56px,11vw,96px) 0;border-top:1px solid var(--line-2);}
.nolist{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:16px;}
.nolist li{
  font-size:15px;font-weight:300;color:var(--dim);
  padding-left:22px;position:relative;line-height:1.5;
}
.nolist li b{color:#fff;font-weight:600;}
.nolist li::before{content:"—";position:absolute;left:0;color:var(--purple-mid);font-weight:700;}

/* ---------- cierre ---------- */
.close{padding:clamp(64px,13vw,110px) 0;border-top:1px solid var(--line-2);text-align:center;}
.close .btn-lg{margin:30px auto 0;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line-2);
  padding:26px 0 max(34px,calc(env(safe-area-inset-bottom) + 18px));}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.foot-meta{font-size:11.5px;color:var(--dim-2);font-weight:300;}

/* ---------- animación de entrada ---------- */
.fade-in{animation:fade .3s cubic-bezier(.2,.6,.3,1) both;}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}

/* ---------- pantallas bajas: el navegador de Instagram ----------
   IG abre las webs en su propio webview con barra arriba y abajo: en un iPhone
   quedan ~620px de alto útil en vez de 844. Medido ahí, la 4ª opción del quiz
   caía abajo del fold y mucha gente ni se enteraba de que existía.
   Esto comprime el ritmo vertical solo cuando hace falta. */
@media (max-height:700px){
  .topbar{padding-top:10px;padding-bottom:10px;}
  .quiz{min-height:0;padding:14px 0 40px;}
  .quiz-intro{font-size:13.5px;margin-bottom:14px;}
  .progress{margin-bottom:18px;}
  .kicker{margin-bottom:11px;}
  .qhead{margin-bottom:14px;}
  .qhead h1{font-size:clamp(21px,5.2vw,28px);}
  .qhelp{margin-top:7px;font-size:13px;}
  /* La pregunta 4 tiene 5 opciones: es la que define cuánto hay que apretar. */
  .opts{gap:8px;}
  .opt{padding:12px 17px;}
  .opt .os{margin-top:2px;}
  .btn-back{margin-top:14px;}
}

/* Webviews más bajas todavía (Android, o iPhone con la barra de IG desplegada). */
@media (max-height:600px){
  .quiz-intro{font-size:13px;margin-bottom:11px;}
  .progress{margin-bottom:14px;}
  .kicker{margin-bottom:8px;font-size:10px;}
  .qhead{margin-bottom:11px;}
  .qhead h1{font-size:clamp(19px,4.8vw,24px);}
  .qhelp{margin-top:5px;font-size:12.5px;}
  .opts{gap:6px;}
  .opt{padding:9px 15px;}
  .opt .ot{font-size:15.5px;}
  .opt .os{font-size:12.5px;}
}

/* ---------- desktop ---------- */
@media (min-width:760px){
  .wrap{padding-left:40px;padding-right:40px;}
  .hero{padding:70px 0 100px;}
  .btn-lg{width:auto;min-width:340px;}
  .steps{grid-template-columns:repeat(3,1fr);}
  .paidgrid{grid-template-columns:repeat(2,1fr);}
  .card{padding:30px 28px;}
  .quiz{min-height:78vh;min-height:78dvh;}
  .opt{padding:19px 22px;}
  .equation{grid-template-columns:repeat(3,1fr);gap:12px;max-width:none;}
}