@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-700.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(/fonts/big-shoulders-display-900.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;src:url(/fonts/jetbrains-mono-700.woff2) format("woff2")}
:root{
  --mamey:#FFAB66;
  --ink:#17120E;
  --teal:#62DDD0;
  --deep:#0E3F3B;
  --paper:#FFF1E0;
  --soft:#5B4632;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Atkinson Hyperlegible",Verdana,sans-serif;
  --mono:"JetBrains Mono",Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--mamey);color:var(--ink);font:400 18px/1.55 var(--body)}
.wrap{max-width:1240px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3,p{margin:0}
h1,h2{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.005em}
h2{font-size:clamp(46px,7.2vw,96px);line-height:1;text-wrap:balance}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.dark :focus-visible{outline-color:var(--teal)}
section{padding-block:clamp(52px,7vw,96px)}

.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px;font:700 14px/1.4 var(--mono)}
.top a{color:var(--ink)}

.hero{padding-block:clamp(10px,2vw,28px) clamp(40px,5vw,72px)}
h1{font-size:clamp(56px,18.5vw,250px);line-height:.88}
h1 span{display:block}
h1 .r{text-align:right}
.hero-row{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);margin-top:clamp(24px,3.5vw,44px);align-items:start}
.lead{font-size:clamp(23px,2.5vw,32px);line-height:1.25;font-weight:700;max-width:22em}
.gift{margin-top:14px;font-size:clamp(18px,1.5vw,20px);max-width:32em}
form{display:grid;gap:8px;min-width:0}
label{font-weight:700;font-size:20px}
.field{display:flex;gap:0;flex-wrap:wrap}
input[type=email]{flex:1 1 200px;min-width:0;background:var(--paper);color:var(--ink);border:3px solid var(--ink);padding:14px;font:400 18px var(--body);border-radius:0}
.btn{background:var(--ink);color:var(--paper);border:3px solid var(--ink);padding:14px 22px;font:900 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;text-decoration:none;display:inline-block;transition:background .12s,color .12s}
.btn:hover{background:var(--deep);border-color:var(--deep)}
.note{font-size:16px}
.status{font-size:16px;font-weight:700;min-height:1.5em}

.dark{background:var(--ink);color:var(--paper)}
.demo h2{color:var(--teal)}
.sub{font-size:21px;max-width:34em;margin-top:16px}
.gauge{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,4vw,52px);margin-top:40px;align-items:stretch}
.levels{display:grid;gap:0;border-left:4px solid var(--teal);align-content:start}
.levels button{all:unset;box-sizing:border-box;cursor:pointer;padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;border-bottom:1px solid #3B3128}
.levels button:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.levels button b{font:900 34px/1 var(--display);text-transform:uppercase}
.levels button i{font:400 14px/1.3 var(--mono);color:var(--teal);font-style:normal}
.levels button small{grid-column:1/-1;font-size:16px;color:#CDBDA9}
.levels button[aria-selected=true]{background:var(--teal);color:var(--ink)}
.levels button[aria-selected=true] i,.levels button[aria-selected=true] small{color:var(--ink)}
.stage{background:var(--paper);color:var(--ink);padding:clamp(20px,3vw,36px);min-height:440px;display:flex;flex-direction:column;gap:14px;min-width:0}
.stage .lab{font:700 13px/1.4 var(--mono);color:var(--soft);text-transform:uppercase}
.b{padding:14px 18px;font-size:19px;line-height:1.45}
.q{background:var(--mamey)}
.q mark{background:var(--ink);color:var(--paper);padding-inline:.25em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.a{background:#F5D9B8}
.who-said{font:700 13px/1.4 var(--mono);text-transform:uppercase;margin-bottom:4px;display:block}
.verdict{font-weight:700;font-size:19px;margin-top:auto}

.story{background:var(--deep);color:var(--paper)}
.story h2{color:var(--mamey)}
.story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.story-text{display:grid;gap:16px}
.story p{font-size:21px;max-width:32em}
.proof{list-style:none;margin:8px 0 0;padding:0;font-size:18px}
.proof li{padding:12px 0;border-top:1px solid #2F6B65;display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px}
.proof b{font:700 13px/1.7 var(--mono);color:var(--teal);text-transform:uppercase}

.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:36px;border-top:3px solid var(--ink)}
.cat{padding:18px 18px 18px 0;display:grid;gap:8px;align-content:start;min-width:0}
.cat+.cat{padding-left:18px;border-left:1px solid var(--ink)}
.cat h3{font:900 34px/1 var(--display);text-transform:uppercase}

.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:36px}
.day{border-top:4px solid var(--teal);padding-top:12px;display:grid;align-content:start;gap:8px;min-width:0}
.day b{font:900 30px/1 var(--display);text-transform:uppercase;color:var(--teal)}
.day span{font-size:18px;line-height:1.3}
.day.big{border-color:var(--mamey)}
.day.big b{color:var(--mamey)}
.next h2{color:var(--paper)}

.who-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px);margin-top:36px}
.who h3{font:900 34px/1 var(--display);text-transform:uppercase;margin-bottom:14px}
.who ul{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.who li{padding:12px 0;border-bottom:1px solid var(--ink);font-size:20px}

.close{background:var(--teal)}
.close p{font-size:21px;margin:16px 0 28px;max-width:32em}
.team{background:var(--paper);padding-block:28px}
.team .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-size:20px}
.team b{font:900 26px/1.1 var(--display);text-transform:uppercase}
footer{background:var(--ink);color:#CDBDA9;padding-block:22px;font-size:16px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px}
.addr{user-select:all;font-weight:700}

@media (max-width:860px){
  .hero-row,.gauge,.who-grid,.story-grid{grid-template-columns:minmax(0,1fr)}
  .stage{min-height:0}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat:nth-child(3){padding-left:0;border-left:0}
  .cat:nth-child(n+3){border-top:1px solid var(--ink)}
  .days{grid-template-columns:minmax(0,1fr);gap:0}
  .day{grid-template-columns:84px minmax(0,1fr);padding-block:10px;align-items:baseline}
}
@media (max-width:480px){
  .field .btn{flex:1 1 100%;margin-top:8px}
  .proof li{grid-template-columns:minmax(0,1fr);gap:2px}
  .cats{grid-template-columns:minmax(0,1fr)}
  .cat,.cat+.cat{padding-left:0;border-left:0;border-top:1px solid var(--ink)}
  .cat:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* Sitio real */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note a,.team a,footer a{color:inherit;font-weight:700}
.who{background:var(--paper)}
.team a{color:var(--ink)}

/* Guía y páginas de texto */
.doc{background:var(--paper)}
.doc-head{background:var(--mamey);padding-block:clamp(10px,2vw,28px) clamp(36px,5vw,64px)}
.doc-head h1{font-size:clamp(52px,11vw,150px);line-height:.92}
.doc-head .lead{margin-top:20px}
.keep{margin-top:12px;font-size:18px;max-width:34em}
.doc-nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font:700 14px/1.4 var(--mono)}
.doc-nav a{color:var(--ink)}
.read{max-width:820px}
.intro{font-size:21px;margin-top:14px;max-width:34em}
.part{display:grid;grid-template-columns:150px minmax(0,1fr);gap:2px 20px;padding:14px 0;border-top:1px solid var(--ink)}
.parts{margin-top:28px;border-bottom:1px solid var(--ink)}
.part b{font:900 26px/1.1 var(--display);text-transform:uppercase;grid-row:span 2}
.part .ask-l{font-weight:700}
.compare{margin-top:28px;display:grid;gap:12px}
.compare div{padding:14px 18px;font-size:19px}
.compare .bad{background:#F5D9B8}
.compare .good{background:#BFEEE8}
.compare b{display:block;font:700 13px/1.4 var(--mono);text-transform:uppercase;margin-bottom:4px}
.small{font-size:17px;margin-top:12px}
.plain{margin:14px 0 0;padding-left:1.3em;font-size:20px;display:grid;gap:10px}
.prompts{margin-top:28px}
.prompt{padding:22px 0;border-top:3px solid var(--ink);display:grid;gap:12px}
.prompt h3{font:900 30px/1.05 var(--display);text-transform:uppercase}
.prompt .txt{font-size:19px;background:#FFE3C4;padding:16px 18px;overflow-wrap:anywhere}
.prompt mark{background:var(--mamey);color:inherit;padding-inline:.15em}
.copy{justify-self:start;font-size:18px;padding:10px 16px}
.legal h1{font-size:clamp(52px,11vw,120px);line-height:.92}
.legal h2{font-size:clamp(30px,4vw,44px);margin-top:36px}
.legal p{font-size:20px;margin-top:12px}
.legal a{color:var(--ink);font-weight:700}
.gone{min-height:62vh}
.gone p{font-size:21px;margin:16px 0 28px}
@media (max-width:480px){
  .part{grid-template-columns:minmax(0,1fr)}
}

/* Respuesta visual: funciona también sin animación */
:root{--btn-shadow:var(--teal)}
.close{--btn-shadow:var(--paper)}
.doc{--btn-shadow:var(--mamey)}
.btn{box-shadow:4px 4px 0 var(--btn-shadow)}
.btn[aria-busy=true]{pointer-events:none}
input[type=email]:focus{box-shadow:4px 4px 0 var(--teal)}
h1 .r{width:fit-content;margin-left:auto}
h1 .dot{display:inline}
.stage-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.xp{display:flex;align-items:center;gap:4px}
.xp span{font-size:16px;font-weight:700;margin-right:6px}
.xp i{display:block;width:20px;height:12px;background:#EBD0AF}
.xp i.on{background:var(--deep)}
.ghost{visibility:hidden}
.caret{display:inline-block;width:.5em;height:1em;margin-right:-.5em;background:currentColor;vertical-align:-.14em}
.verdict.wait{visibility:hidden}
.levels button.nudge i::before{content:"> "}
.copy.ok{background:var(--teal);color:var(--ink);border-color:var(--ink)}

/* Movimiento por pasos, como un videojuego de 16 bits */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hero h1>span{animation:wipe .3s steps(6,end) both}
  .hero h1>.r{animation-duration:.46s;animation-timing-function:steps(11,end);animation-delay:.28s}
  .hero h1 .dot{animation:blink .36s steps(1,end) .86s 3}
  .btn{transition:background .1s steps(2,end),border-color .1s steps(2,end),transform .08s steps(2,end),box-shadow .08s steps(2,end)}
  input[type=email]{transition:box-shadow .1s steps(2,end)}
  .levels button{transition:background .1s steps(2,end),color .1s steps(2,end)}
  .levels button b{transition:transform .08s steps(2,end)}
  .levels button.nudge i{animation:blink 1s steps(1,end) 5}
  .xp i.on{animation:bit .2s steps(3,end)}
  .xp.full i.on{animation:levelup .5s steps(1,end) 3}
  .verdict.pop{animation:drop .2s steps(3,end)}
  .shake{animation:shake .3s steps(6,end)}
  .call{animation:call .7s steps(1,end) 3}
  .copy.ok{animation:bit .2s steps(3,end)}
  .copied .txt{animation:copied .5s steps(1,end)}
  @media (hover:hover){
    .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--btn-shadow)}
    .levels button:not([aria-selected=true]):hover b{transform:translateX(6px)}
  }
  .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--btn-shadow)}
}
@keyframes wipe{from{clip-path:inset(-20% 100% -20% -5%)}to{clip-path:inset(-20% -5%)}}
@keyframes blink{50%{opacity:.15}}
@keyframes bit{from{transform:scale(.6)}to{transform:none}}
@keyframes levelup{50%{background:var(--mamey)}}
@keyframes drop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes call{50%{box-shadow:6px 6px 0 var(--ink)}}
@keyframes copied{0%,50%{background:#BFEEE8}}