:root { color-scheme: dark; } * { box-sizing: border-box; } html, body { min-height: 100%; margin: 0; } body { background: var(--ink); color: var(--paper); font-family: var(--font-body); } html[data-active-lang="es"] [lang="en"], html[data-active-lang="en"] [lang="es"] { display: none !important; }
.experience { position: relative; min-height: 100svh; overflow: hidden; background: radial-gradient(circle at 85% 15%, rgba(199,42,9,.42), transparent 28%), radial-gradient(circle at 5% 90%, rgba(199,42,9,.21), transparent 32%), var(--ink); } .experience::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(228,226,221,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(228,226,221,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent); }
.topbar,.footer { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; width:min(100% - 48px,1120px); margin:auto; } .topbar { padding:26px 0; } .wordmark { color:var(--paper); font:700 17px/1 var(--font-display); letter-spacing:.07em; text-decoration:none; } .topbar__right { display:flex; align-items:center; gap:20px; } .exit { color:var(--muted); font-size:12px; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; } .language { display:inline-flex; border:1px solid var(--paper-border); } .language button { border:0; padding:6px 9px; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; letter-spacing:.1em; } .language button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
.flow { position:relative; z-index:1; width:min(100% - 48px,920px); min-height:calc(100svh - 180px); margin:auto; display:grid; place-items:center; } .progress { position:absolute; inset:0 0 auto; height:4px; background:var(--paper-border); } .progress span { display:block; width:25%; height:100%; background:var(--accent); transition:width .35s var(--ease-out-expo); } .slide { width:100%; padding:84px 0 120px; animation:enter .4s var(--ease-out-expo); } .slide[hidden] { display:none; } .eyebrow { margin:0 0 18px; color:var(--accent); font:700 12px/1.3 var(--font-display); letter-spacing:.16em; text-transform:uppercase; } h1,h2 { max-width:11ch; margin:0 0 22px; font-family:var(--font-display); font-weight:700; line-height:.92; letter-spacing:-.035em; } h1 { font-size:clamp(54px,10vw,120px); } h2 { font-size:clamp(42px,7vw,78px); } h1 em { color:var(--accent); font-style:normal; } .lead { max-width:52ch; margin:0 0 36px; color:var(--muted); font-size:clamp(18px,2.5vw,24px); line-height:1.45; }
.field { display:flex; flex-direction:column; gap:8px; max-width:500px; color:var(--paper); font:700 12px/1.2 var(--font-display); letter-spacing:.12em; text-transform:uppercase; } .field small { color:var(--muted); font-size:10px; } .field input { width:100%; border:1px solid var(--paper-border); border-radius:2px; padding:15px 16px; background:rgba(228,226,221,.06); color:var(--paper); font:400 20px var(--font-body); outline:none; } .field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .choices--three { grid-template-columns:repeat(3,minmax(0,1fr)); } .choices button { min-height:190px; padding:24px; border:1px solid var(--paper-border); border-left:4px solid var(--paper-border); border-radius:2px; background:rgba(228,226,221,.055); color:var(--paper); cursor:pointer; text-align:left; transition:transform .2s var(--ease-out-expo),border-color .2s,background .2s; } .choices button:hover,.choices button:focus-visible,.choices button.selected { border-color:var(--accent); background:rgba(199,42,9,.13); outline:none; transform:translateY(-3px); } .choices strong { display:block; margin-bottom:12px; font:700 clamp(23px,3vw,34px)/1 var(--font-display); letter-spacing:-.02em; } .choices span { color:var(--muted); font-size:17px; line-height:1.35; } .summary { max-width:500px; margin-top:24px; padding:16px; border-left:4px solid var(--accent); background:rgba(228,226,221,.06); color:var(--muted); line-height:1.5; }
.footer { min-height:84px; padding-bottom:26px; gap:12px; } .footer button { border:0; background:transparent; color:var(--muted); cursor:pointer; font:700 12px var(--font-display); letter-spacing:.12em; text-transform:uppercase; } .footer .next { margin-left:auto; padding:15px 22px; background:var(--accent); color:var(--on-accent); } .footer .next:disabled { cursor:not-allowed; opacity:.35; } .restart { opacity:0; pointer-events:none; } .restart.visible { opacity:1; pointer-events:auto; } @keyframes enter { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } } @media (max-width:680px) { .topbar,.flow,.footer { width:min(100% - 32px,1120px); } .topbar { padding:18px 0; } .exit { display:none; } .choices,.choices--three { grid-template-columns:1fr; } .choices button { min-height:132px; } .slide { padding:76px 0 92px; } .footer .restart { display:none; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }