:root{--ink:#11110f;--paper:#f1ede4;--red:#ef3e33;--red-dark:#c9241d;--muted:#77736b;--line:#c9c3b8;--dark:#151513;--lime:var(--red)}
html{background:var(--ink)}
body{font-family:Arial,Helvetica,ui-sans-serif,system-ui,sans-serif;background:var(--paper);cursor:default}
body:before{content:'';position:fixed;z-index:40;top:0;left:0;width:100%;height:4px;background:var(--red);transform-origin:left;animation:arrival .9s cubic-bezier(.16,1,.3,1)}
::selection{background:var(--red);color:#fff}
.top{height:88px;border-bottom:1px solid var(--ink);background:rgba(241,237,228,.92);backdrop-filter:blur(12px);position:relative;z-index:10}
.brand{font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.brand i{border-radius:0;background:var(--red);color:#fff;transform:rotate(-4deg);font-family:'DM Serif Display',serif}
.brand small{font-size:10px;letter-spacing:.14em}
.secure{border:1px solid var(--ink);padding:8px 11px;text-transform:uppercase;font-weight:700;letter-spacing:.08em;font-size:10px}
.hero{position:relative;min-height:calc(100vh - 88px);grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);gap:7vw;overflow:hidden}
.hero:after{content:'01';position:absolute;right:-.02em;bottom:-.23em;font:800 clamp(190px,28vw,440px)/1 'DM Sans';color:transparent;-webkit-text-stroke:1px rgba(17,17,15,.09);pointer-events:none}
.hero-copy{position:relative;z-index:2}
.kicker,.eyebrow{color:var(--red);letter-spacing:.16em;font-weight:800}
.hero .kicker:before{content:'●';margin-right:9px;animation:blink 1.2s step-end infinite}
.hero h1,.how h2,.panel h2,.legal h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400}
.hero h1{font-size:clamp(55px,7.6vw,108px);line-height:.87;letter-spacing:-.055em;max-width:900px;margin:24px 0 32px}
.hero h1:after{content:'';display:block;width:42%;height:9px;background:var(--red);margin-top:24px;transform:skewX(-22deg)}
.lead{font-size:clamp(19px,1.8vw,25px);color:var(--ink);max-width:680px}
.cta,.next{position:relative;border-radius:0;background:var(--red);color:#fff;border:1px solid var(--ink);box-shadow:5px 5px 0 var(--ink);text-transform:uppercase;letter-spacing:.04em;transition:transform .16s,box-shadow .16s,background .16s}
.cta:hover,.next:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink);background:var(--red-dark)}
.cta:active,.next:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.cta span{color:#fff}
.micro{border-left:2px solid var(--red);padding-left:12px;margin-top:20px}
.signal{position:relative;background:var(--ink);border:1px solid var(--ink);border-radius:0;box-shadow:14px 14px 0 var(--red);transform:rotate(1deg);overflow:hidden}
.signal:before{content:'TENSIÓN / MOVIMIENTO / VERDAD';display:block;color:var(--red);font-size:9px;font-weight:800;letter-spacing:.17em;margin-bottom:28px}
.signal p{font-family:'DM Serif Display',Georgia,serif;font-size:22px}
.signal hr{border-color:#494942}
.how{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.how:before{content:'NO ES OTRO TEST';position:absolute;top:10px;right:-15px;font-size:clamp(58px,12vw,180px);font-weight:800;color:#20201d;white-space:nowrap;transform:rotate(-3deg)}
.how .wrap{position:relative;z-index:2}
.how .kicker{color:var(--red)}
.how h2{max-width:800px}
.steps div{border-top:2px solid var(--red)}
.steps b{color:var(--red);font-size:13px}
.steps span{font-family:'DM Serif Display',serif;font-weight:400;font-size:30px}
.steps p{color:#b8b5ad}
.test{background:var(--paper);position:relative;overflow:hidden}
.test:before{content:'PI';position:fixed;right:-.05em;bottom:-.22em;font:800 min(42vw,560px)/1 'DM Sans';color:transparent;-webkit-text-stroke:1px rgba(17,17,15,.055);pointer-events:none}
.test-head{position:relative;z-index:2}
.bar{height:7px;background:#d6d0c5;border:1px solid var(--ink)}
.bar i{background:var(--red)}
.panel{position:relative;z-index:2;animation:questionIn .46s cubic-bezier(.16,1,.3,1)}
.panel .eyebrow{display:inline-block;background:var(--red);color:#fff;padding:6px 9px;transform:rotate(-1deg)}
.panel h2{font-size:clamp(42px,6vw,70px);letter-spacing:-.035em}
.panel h2 em{color:var(--red);font-style:italic}
.field{border-bottom:3px solid var(--ink);font-size:22px}
.field:focus{border-color:var(--red)}
.choices{gap:13px}
.choice{border:1px solid var(--ink);border-radius:0;background:rgba(255,255,255,.62);font-weight:700;transition:transform .15s,background .15s,box-shadow .15s}
.choice:hover,.choice.selected{border-color:var(--ink);background:#fff;box-shadow:6px 6px 0 var(--red);transform:translate(-2px,-2px)}
.ghost{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11px}
.consent{font-size:11px;max-width:650px}
.thinking .pulse{background:var(--red);border-radius:0;transform:rotate(45deg);box-shadow:0 0 0 12px rgba(239,62,51,.13)}
.thinking h2{font-family:'DM Serif Display',serif}
.transition-card{border:2px solid var(--ink);box-shadow:12px 12px 0 var(--red);border-radius:0}
.transition-card:before{color:#eee9df}
.transition-card h2{font-family:'DM Serif Display',serif}
.case-label{color:var(--red)}
.pattern-idea{border-color:var(--red)}
.pattern-idea small{color:var(--red)}
.insight-only{background:var(--ink);box-shadow:12px 12px 0 var(--red)}
.insight-only:before{color:#232320}
.mirror{position:relative;background:var(--ink);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--red);overflow:hidden}
.mirror:after{content:'';position:absolute;top:50%;left:-10%;width:120%;height:3px;background:var(--red);transform:rotate(-4deg)}
.mirror small{color:var(--red)}
.mirror strong{font-family:'DM Serif Display',serif}
.mirror .and{position:relative;z-index:2;display:inline-block;background:var(--red);color:#fff;padding:5px 8px}
.axis{background:var(--red);color:#fff;transform:rotate(-1deg)}
.note{background:#fff;border:1px solid var(--ink);border-left:8px solid var(--red)}
.commit{background:#fff;border:2px solid var(--ink);box-shadow:8px 8px 0 #c9c3b8}
.whatsapp{background:#159955}
footer{background:var(--ink);color:#aaa;border-top:4px solid var(--red)}
@keyframes arrival{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes questionIn{from{opacity:0;transform:translateY(18px) rotate(.3deg)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}
@media(max-width:760px){.top{height:72px}.hero{grid-template-columns:1fr;padding-block:48px}.hero h1{font-size:58px}.hero h1:after{height:6px}.signal{margin:10px 8px 16px 0;box-shadow:8px 8px 0 var(--red)}.panel h2{font-size:43px}.transition-card,.insight-only{box-shadow:7px 7px 0 var(--red)}.cta,.next{box-shadow:4px 4px 0 var(--ink)}.how:before{top:35px}.test-head{grid-template-columns:62px 1fr}.test-head>div{gap:9px}.test-head span{min-width:72px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}