/* Encuesta de visita para el iPad del gimnasio: una pregunta por pantalla, botones grandes, se reinicia sola. */
:root{ --ink:#f4f2ee; --ink2:rgba(244,242,238,.72); --ink3:rgba(244,242,238,.5); --cobre:#e08a4f; --cobre2:#c4682f; --vidrio:rgba(255,255,255,.08); --borde:rgba(255,255,255,.14); --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,.8,.24,1); }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body{ height:100%; }
body{ margin:0; font:17px/1.45 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Inter, sans-serif; color:var(--ink); background:#0c0c0e; overflow:hidden; -webkit-font-smoothing:antialiased; user-select:none; -webkit-user-select:none; }
input, textarea{ user-select:text; -webkit-user-select:text; }
button, input, textarea{ font:inherit; color:inherit; }
.fondo{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.fondo .foto{ position:absolute; inset:-3%; background:url('../assets/fotos/encuesta-fondo.jpg') center 30%/cover, #0c0c0e; filter:grayscale(1) brightness(.42); }
.fondo i{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.45; animation:flota 24s var(--ease) infinite alternate; }
.fondo .m1{ width:60vw; height:60vw; left:-20vw; top:-25vw; background:#c4682f; } .fondo .m2{ width:50vw; height:50vw; right:-15vw; bottom:-20vw; background:#6b4fd8; animation-duration:30s; opacity:.35; }
.fondo .m3{ width:36vw; height:36vw; left:30vw; bottom:-12vw; background:#d1457a; animation-duration:34s; opacity:.25; }
@keyframes flota{ to{ transform:translate(6vw, 5vh) scale(1.08); } }
.arriba{ position:fixed; z-index:3; top:0; left:0; right:0; display:flex; align-items:center; gap:20px; padding:calc(env(safe-area-inset-top) + 20px) 32px 0; }
.logo{ width:52px; height:52px; border-radius:50%; flex:none; background:url('../assets/logo-oxido.jpg?v=2') center/cover; box-shadow:0 0 0 2px rgba(255,255,255,.14), 0 10px 24px -8px rgba(196,104,47,.7); }
.progreso{ flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.progreso i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg, #c4682f, #e0457f, #8f7bf0); transition:width .6s var(--ease); }
.salir{ border:1px solid var(--borde); background:var(--vidrio); border-radius:99px; height:40px; padding:0 18px; font-size:14px; color:var(--ink2); cursor:pointer; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
main{ position:relative; z-index:2; height:100%; display:grid; place-items:center; padding:110px 32px 130px; overflow-y:auto; }
.paso{ width:min(860px, 100%); animation:entra .55s var(--ease) both; }
.paso.sale{ animation:sale .25s ease-in both; }
@keyframes entra{ from{ opacity:0; transform:translateY(24px); } } @keyframes sale{ to{ opacity:0; transform:translateY(-16px); } }
.ceja{ font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--cobre); }
h1{ font-weight:200; font-size:clamp(40px, 6vw, 76px); line-height:1.02; letter-spacing:-.035em; margin:14px 0 0; }
h1 b{ font-weight:600; } h2{ font-weight:300; font-size:clamp(30px, 4.4vw, 50px); line-height:1.1; letter-spacing:-.025em; margin:12px 0 0; }
.ayuda{ color:var(--ink2); margin:12px 0 0; font-size:18px; }
.grande{ height:72px; padding:0 40px; border-radius:99px; border:0; background:#fff; color:#111; font-size:20px; font-weight:600; margin-top:40px; cursor:pointer; transition:transform .35s var(--spring); }
.grande:active{ transform:scale(.95); }
.campos{ display:grid; gap:16px; margin-top:32px; }
.campo span{ display:block; font-size:14px; color:var(--ink2); margin-bottom:8px; }
.campo input, .campo textarea{ width:100%; height:68px; border-radius:22px; border:1.5px solid var(--borde); background:rgba(255,255,255,.07); padding:0 24px; font-size:22px; outline:none; transition:border-color .2s, background .2s; }
.campo textarea{ height:150px; padding:18px 24px; resize:none; line-height:1.4; }
.campo input:focus, .campo textarea:focus{ border-color:var(--cobre); background:rgba(255,255,255,.11); }
.campo.err input{ border-color:#ff8a73; } .error{ color:#ff8a73; min-height:22px; margin-top:12px; font-size:15px; }
.chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.chip{ min-height:64px; padding:0 26px; border-radius:99px; border:1.5px solid var(--borde); background:var(--vidrio); font-size:19px; cursor:pointer; display:inline-flex; align-items:center; gap:12px;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); transition:transform .35s var(--spring), background .2s, border-color .2s, color .2s; }
.chip:active{ transform:scale(.94); }
.chip .ic{ font-size:22px; line-height:1; }
.chip[aria-pressed="true"]{ background:#fff; color:#111; border-color:#fff; }
.escala{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-top:36px; }
.escala button{ aspect-ratio:1; max-height:150px; border-radius:28px; border:1.5px solid var(--borde); background:var(--vidrio); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; transition:transform .35s var(--spring), background .2s;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.escala button b{ font-size:clamp(32px, 5vw, 52px); font-weight:200; line-height:1; }
.escala button small{ font-size:13px; color:var(--ink2); text-align:center; padding:0 6px; line-height:1.2; }
.escala button:active{ transform:scale(.93); }
.escala button[aria-pressed="true"]{ background:#fff; color:#111; } .escala button[aria-pressed="true"] small{ color:#555; }
.tarjetas{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:32px; }
.tarjetas button{ text-align:left; padding:24px; border-radius:26px; border:1.5px solid var(--borde); background:var(--vidrio); cursor:pointer; transition:transform .35s var(--spring), background .2s; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.tarjetas button b{ display:block; font-size:21px; font-weight:600; } .tarjetas button small{ display:block; color:var(--ink2); margin-top:4px; font-size:15px; }
.tarjetas button:active{ transform:scale(.96); } .tarjetas button[aria-pressed="true"]{ background:#fff; color:#111; } .tarjetas button[aria-pressed="true"] small{ color:#555; }
.check{ display:flex; gap:16px; align-items:flex-start; margin-top:18px; font-size:16px; color:var(--ink2); cursor:pointer; }
.check input{ width:28px; height:28px; flex:none; accent-color:#e08a4f; margin:0; }
.check a{ color:var(--ink); }
.abajo{ position:fixed; z-index:3; left:0; right:0; bottom:0; display:flex; gap:12px; justify-content:space-between; padding:0 32px calc(env(safe-area-inset-bottom) + 26px); }
.b{ height:64px; min-width:150px; padding:0 30px; border-radius:99px; border:0; background:#fff; color:#111; font-size:18px; font-weight:600; cursor:pointer; transition:transform .35s var(--spring), opacity .2s; }
.b.sec{ background:var(--vidrio); color:var(--ink); border:1.5px solid var(--borde); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.b:active{ transform:scale(.95); } .b[disabled]{ opacity:.35; pointer-events:none; }
#sig{ margin-left:auto; } #saltar{ min-width:0; }
.gracias{ text-align:center; } .gracias .anillo{ width:140px; height:140px; margin:0 auto 24px; border-radius:50%; background:url('../assets/logo-oxido.jpg?v=2') center/cover; box-shadow:0 0 0 8px rgba(255,255,255,.08), 0 30px 60px -20px rgba(196,104,47,.8); animation:gira 16s linear infinite; }
@keyframes gira{ to{ transform:rotate(360deg); } }
.cuenta{ color:var(--ink3); margin-top:28px; font-size:15px; }
.pie{ position:fixed; z-index:1; bottom:calc(env(safe-area-inset-bottom) + 6px); left:0; right:0; text-align:center; font-size:11px; letter-spacing:.06em; color:var(--ink3); pointer-events:none; }
.pie a{ color:var(--ink3); pointer-events:auto; }
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
@media (max-width:700px){ main{ padding:96px 18px 120px; } .arriba{ padding:calc(env(safe-area-inset-top) + 14px) 18px 0; } .abajo{ padding:0 18px calc(env(safe-area-inset-bottom) + 20px); }
  .escala{ gap:6px; } .escala button{ border-radius:18px; } .escala button small{ display:none; } .tarjetas{ grid-template-columns:1fr; } .chip{ min-height:54px; font-size:16px; padding:0 18px; } .b{ min-width:0; padding:0 22px; } .salir{ display:none; } }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }
[hidden]{ display:none !important; }
.fondo::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,12,14,.9) 0%, rgba(12,12,14,.65) 45%, rgba(12,12,14,.35) 100%); }