*,*::before,*::after{box-sizing:border-box}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Layout: landing de una columna para el navegador de Instagram — hero, tarjeta del test, método, testimonios. Look único oscuro y cálido (cacao-ciruela) con caramelo de acento y toques tierra: salvia, arcilla y arena. */
:root{
  --bg:#1d1517; --bg2:#271c1c; --card:#2f2322; --line:#4b3b35;
  --fg:#f4ebe1; --muted:#c6b39f; --accent:#d9a86c; --accent-ink:#1d1517;
  --sage:#a7b38c; --clay:#cf9068; --sand:#d9c4a3;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
body{background:radial-gradient(120% 60% at 50% 0%,var(--bg2),var(--bg) 70%) fixed,var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55}
.wrap{max-width:540px;margin:0 auto;padding-inline:20px;padding-block:36px 40px;display:flex;flex-direction:column;gap:40px}
p{margin:0}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.1}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);text-align:center}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.logo{display:block;width:104px;height:auto;max-width:100%;margin-inline:auto}
.mark{display:flex;flex-direction:column;align-items:center;gap:10px}
.mark svg{width:46px;height:46px}
.mark span{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
h1{font-size:clamp(24px,6.6vw,40px);font-weight:800;letter-spacing:-.02em}
h1 span,h1 em{display:block}
h1 em{font-style:normal;color:var(--accent)}
.sub{color:var(--muted);font-size:17px;max-width:40ch}

/* Tarjeta del test */
.quiz{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:24px;padding:24px 20px;display:flex;flex-direction:column;gap:20px;box-shadow:0 20px 50px -30px #000}
.meta{display:flex;justify-content:space-between;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.prog{height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .35s ease}
.quiz h2{font-size:clamp(21px,5.6vw,25px);font-weight:600;text-align:center}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--fg);font:inherit;font-size:16px;cursor:pointer;transition:border-color .2s,background .2s}
.opt:hover{border-color:var(--accent)}
.opt .dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--accent);display:grid;place-items:center}
.opt.sel{border-color:var(--accent);background:rgba(217,168,108,.12)}
.opt.sel .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.back{align-self:center;background:none;border:0;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;padding:4px 8px}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Resultado */
.res{display:flex;flex-direction:column;gap:14px}
.res .tag{align-self:center;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.res h2{font-size:clamp(23px,6vw,28px);font-weight:800}
.res p{color:var(--fg)}
.res .note{color:var(--muted);font-size:15px}
.divider{height:1px;background:var(--line)}
.msg{white-space:pre-wrap;font-family:var(--body);font-size:14px;background:rgba(255,255,255,.03);border:1px dashed var(--line);border-radius:12px;padding:14px;margin:0;user-select:all;color:var(--muted)}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:16px;padding:15px 22px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none;width:100%;box-sizing:border-box}
.btn.line{background:transparent;color:var(--fg);border:1px solid var(--line)}
.wa-opts{display:flex;flex-direction:column;gap:10px}
.ico{font-size:17px;line-height:1}
.stack{display:flex;flex-direction:column;gap:10px}
.hint{font-size:13px;color:var(--muted);text-align:center}

/* Método */
.method{display:flex;flex-direction:column;gap:18px;text-align:center}
.method h3{font-size:clamp(20px,5.4vw,24px);font-weight:600}
.method h3 b{color:var(--accent);font-weight:600}
.letters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.letters div{border:1px solid var(--line);border-radius:14px;padding:12px 6px;display:flex;flex-direction:column;gap:2px}
.letters strong{font-family:var(--display);font-size:24px;font-weight:800;color:var(--accent);line-height:1}
.letters span{font-size:13px;color:var(--muted)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pil{border:1px solid var(--line);border-radius:14px 14px 4px 4px;padding:16px 4px;font-family:var(--display);font-weight:600;font-size:clamp(13px,3.8vw,16px);background:rgba(255,255,255,.03)}
.base{grid-column:1/-1;border-radius:4px 4px 14px 14px;padding:12px;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.04em}
.points{display:flex;flex-direction:column;gap:10px;text-align:left}
.pt{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-left:2px solid var(--accent);background:rgba(255,255,255,.03);border-radius:0 12px 12px 0}
.pt strong{font-weight:600}
.pt span{color:var(--muted);font-size:15px}
.team{color:var(--muted);font-size:15px}
.team b{color:var(--fg);font-weight:600}
.checks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font-size:15px}
.checks span::before{content:"✓";color:var(--accent);margin-right:6px;font-weight:700}
/* Prueba social */
.proof{display:flex;flex-direction:column;gap:18px;text-align:center}
.proof h3{font-size:clamp(20px,5.4vw,24px);font-weight:600}
figure{margin:0}
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:16px;overflow:hidden}
.zoom img{display:block;width:100%;height:auto}
.ba{display:flex;flex-direction:column;gap:16px}
.ba figure{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card)}
.ba .zoom{border-radius:0}
.ba figcaption{display:grid;grid-template-columns:1fr 1fr;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:10px 0}
.ba figcaption span:last-child{color:var(--accent)}
.carousel{position:relative}
.msgs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
.msgs::-webkit-scrollbar{display:none}
.msgs.dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.msgs.dragging .zoom{cursor:grabbing}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:26px;line-height:1;cursor:pointer;display:none;place-items:center;padding:0 0 3px;box-shadow:0 8px 20px -10px #000;transition:opacity .2s}
.nav.prev{left:-6px}.nav.next{right:-6px}
.nav[disabled]{opacity:0;pointer-events:none}
.nav:hover{border-color:var(--accent)}
.dots{display:flex;justify-content:center;gap:8px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s}
.dots i.on{background:var(--accent);transform:scale(1.25)}
@media (hover:hover) and (pointer:fine){.nav{display:grid}.msgs{cursor:grab}.msgs figure{flex-basis:70%}}

.msgs figure{flex:0 0 82%;scroll-snap-align:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;box-sizing:border-box}
.msgs .zoom{border-radius:12px;flex:1;display:flex;align-items:center;background:#000}
.msgs figure.ba-card{padding:0;overflow:hidden}
.ba-card .zoom{border-radius:0;background:none}
.msgs figcaption.ba-cap{display:grid;grid-template-columns:1fr 1fr;padding:0 0 12px}
.ba-cap span:last-child{color:var(--accent)}
.msgs figcaption{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lightbox[hidden]{display:none!important}
.lightbox{position:fixed;inset:0;z-index:10;background:rgba(20,14,14,.92);display:grid;place-items:center;padding:20px}
.lightbox img{max-width:100%;max-height:85vh;border-radius:12px}
.lb-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:18px;cursor:pointer}
footer{display:flex;flex-direction:column;gap:6px;text-align:center;border-top:1px solid var(--line);padding-top:24px}
footer strong{font-size:12px;letter-spacing:.32em;text-transform:uppercase}
footer span{font-size:14px;color:var(--muted)}

/* Toques tierra */
.mark span,.ba-cap span:first-child{color:var(--clay)}
.ba-cap span:last-child,.checks span::before{color:var(--sage)}
.base{background:var(--sage)!important;color:var(--accent-ink)!important}
.pil{border-color:var(--line);color:var(--sand)}
.pt{border-left-color:var(--clay)!important}
.method .eyebrow{color:var(--sage)}
.proof .eyebrow{color:var(--clay)}
.msgs figcaption{color:var(--sand)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}