/* ============================================================
   «No te va a dar la vida» · estilos
   Escena 3D arriba (el reloj) y panel abajo. Móvil primero: cada paso
   cabe entero en 390×664 (navegador de Instagram) sin scroll.
   Marca: noche #0F190F, tinta crema, un solo acento lima por pantalla.
   ============================================================ */
@font-face { font-family: 'Beaufort Pro'; src: url('../fonts/Beaufort-Pro-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Beaufort Pro'; src: url('../fonts/Beaufort-Pro-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  --noche: #0F190F;
  --superficie: #142114;
  --linea: rgba(247, 248, 229, .14);
  --crema: #F7F8E5;
  --gris: #A9B09C;
  --lima: #D0FD00;
  --esmeralda: #18D591;
  --display: 'Beaufort Pro', 'Iowan Old Style', Georgia, serif;
  --texto: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --escena: 50svh;          /* alto del reloj; cada paso lo cambia */
  color-scheme: dark;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(120% 70% at 50% 22%, #17301F 0%, var(--noche) 58%) fixed, var(--noche);
  color: var(--crema); font-family: var(--texto); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
#sin-js { display: none }

.cab { position: fixed; z-index: 5; top: env(safe-area-inset-top, 0px); left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 14px max(18px, env(safe-area-inset-right, 0px)) 0 max(18px, env(safe-area-inset-left, 0px)); pointer-events: none }
.cab a, .cab span { pointer-events: auto }
.cab img { display: block; height: 15px; width: auto; opacity: .92 }
.paso-n { font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; letter-spacing: .02em }

/* ── la escena: un bloque de alto variable arriba ── */
.escena { position: relative; height: var(--escena); transition: height .7s cubic-bezier(.22, 1, .36, 1); }
.escena canvas { position: absolute; inset: 34px 0 0 0; width: 100%; height: 100%; display: block; touch-action: pan-y }
.reloj-2d { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); height: 52%; width: auto; opacity: .9 }
body[data-paso="intro"] { --escena: 54svh }
body[data-paso="dato"], body[data-paso="pregunta"] { --escena: 36svh }
body[data-paso="resultado"] { --escena: 42svh }
body[data-paso="form"], body[data-paso="gracias"] { --escena: 46px }
body[data-paso="form"] .escena canvas, body[data-paso="gracias"] .escena canvas, body[data-paso="form"] .reloj-2d, body[data-paso="gracias"] .reloj-2d { opacity: 0; transition: opacity .3s }

/* ── el panel ── */
.panel { position: relative; z-index: 2; max-width: 520px; margin: 0 auto;
  padding: 0 max(18px, env(safe-area-inset-right, 0px)) 22px max(18px, env(safe-area-inset-left, 0px)); }
.pantalla { display: flex; flex-direction: column; gap: 12px; animation: entra .45s cubic-bezier(.22, 1, .36, 1) both }
@keyframes entra { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

h1 { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 8.6vw, 46px); line-height: 1.04; letter-spacing: -.015em; margin: 0; text-wrap: balance }
h2 { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 6.2vw, 30px); line-height: 1.12; margin: 0; text-wrap: balance }
p { margin: 0 }
.entrada { color: var(--gris); font-size: 15px; max-width: 46ch }
.nota { color: var(--gris); font-size: 12.5px }

/* ── botones ── */
.cta { appearance: none; border: 0; border-radius: 14px; min-height: 52px; padding: 0 22px; width: 100%;
  background: var(--lima); color: #0F190F; font: 600 16px/1 var(--texto); letter-spacing: -.005em; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 30px -12px rgba(208, 253, 0, .55); transition: opacity .2s }
.cta:disabled { opacity: .35; cursor: default; box-shadow: none }
.cta:not(:disabled):hover { opacity: .92 }
.secundario { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 14px; border: 1px solid var(--linea);
  background: transparent; color: var(--crema); font: 500 15px var(--texto); cursor: pointer; text-decoration: none }
.secundario:hover { border-color: rgba(247, 248, 229, .35) }
.atras { align-self: center; background: none; border: 0; color: var(--gris); font: 500 13px var(--texto); padding: 6px 10px; cursor: pointer }
.atras:hover { color: var(--crema) }
:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px }

/* ── dial (edad, libros al año) ── */
.dial { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; margin-top: 2px }
.paso-dial { height: 52px; border-radius: 50%; border: 1px solid var(--linea); background: rgba(247,248,229,.03); color: var(--crema); font: 400 26px/1 var(--texto); cursor: pointer }
.paso-dial:hover { border-color: rgba(247,248,229,.35) }
.cifra-dial { text-align: center; font-family: var(--display); font-size: 68px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em }
.rango { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0 }
.rango::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--lima) var(--p, 30%), rgba(247,248,229,.16) var(--p, 30%)) }
.rango::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(247,248,229,.16) }
.rango::-moz-range-progress { height: 3px; background: var(--lima) }
.rango::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--crema); margin-top: -10.5px; box-shadow: 0 0 0 6px rgba(208,253,0,.14) }
.rango::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--crema) }

/* ── preguntas ── */
.opciones { display: grid; gap: 7px }
.op { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 44px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--linea); background: rgba(247,248,229,.03); color: var(--crema); font: 500 14.5px/1.3 var(--texto); cursor: pointer;
  transition: border-color .15s, background .15s }
.op:hover { border-color: rgba(247,248,229,.32) }
.op[aria-pressed="true"] { border-color: var(--lima); background: rgba(208,253,0,.08) }
.op .marca { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(247,248,229,.4) }
.op[aria-pressed="true"] .marca { border-color: var(--lima); background: radial-gradient(circle, var(--lima) 45%, transparent 50%) }
.opciones.multi { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.opciones.multi .op { justify-content: center; text-align: center; padding: 10px 6px; font-size: 13.5px }
.opciones.multi .op .marca { display: none }

/* ── resultado ── */
.resultado { gap: 14px; text-align: center }
.te-quedan { font-size: 13px; letter-spacing: .04em; color: var(--gris); margin-top: -6px }
.cifra-dom { font-family: var(--display); font-size: 64px; line-height: .95; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
body.con-3d .te-quedan { display: none }
body.con-3d .unidad { margin-top: -4px }
body.con-3d .cifra-dom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }   /* la cifra la pinta el 3D; esta queda para lectores de pantalla */
.unidad { color: var(--gris); font-size: 13.5px; margin-top: -8px }
.perfil { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: rgba(20, 33, 20, .72); border: 1px solid var(--linea); text-align: left }
.perfil-tipo { font-size: 12px; color: var(--esmeralda); letter-spacing: .03em }
.perfil p:last-child { color: var(--gris); font-size: 14px }
.mas { display: grid; gap: 4px; text-align: left }
.mas label { font-size: 14px }
.mas output { font-variant-numeric: tabular-nums; color: var(--lima); font-weight: 600 }
.mas p { color: var(--gris); font-size: 13.5px; font-variant-numeric: tabular-nums }
.mas p b { color: var(--crema); font-weight: 600 }
.primera { text-align: left; padding: 20px 18px; border-left: 2px solid var(--lima); background: rgba(20,33,20,.5); border-radius: 0 14px 14px 0; display: grid; gap: 10px; margin-top: 10px }
.primera blockquote { margin: 0; font-family: var(--display); font-weight: 300; font-size: 19px; line-height: 1.45 }
.firma-pasaje { font-size: 13px; color: var(--gris) }
.firma-pasaje a { color: var(--crema) }
.libros { text-align: left; display: grid; gap: 10px }
.libros ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.libros li { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--linea); display: grid; gap: 6px }
.libros li b { font-family: var(--display); font-weight: 500; font-size: 18px }
.libros li span { color: var(--gris); font-size: 13px }
.libros li p { font-size: 14px; color: var(--gris) }
.bajar { display: flex; gap: 8px; flex-wrap: wrap }
.bajar a { font: 600 12.5px var(--texto); color: var(--crema); text-decoration: none; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--linea) }
.bajar a:hover { border-color: var(--lima) }

/* ── formulario ── */
.form { display: grid; gap: 8px }
.campo { display: grid; gap: 4px }
.campo label { font-size: 12.5px; color: var(--gris) }
.campo input, .campo select { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--linea); background: rgba(247,248,229,.04);
  color: var(--crema); font: 500 15px var(--texto); padding: 0 12px }
.campo input::placeholder { color: rgba(247,248,229,.35) }
.fila-tel { display: grid; grid-template-columns: 132px 1fr; gap: 8px }
.fila-tel select { text-overflow: ellipsis; font-size: 14px }
.campo .err { display: none; font-size: 12px; color: #FF9B8A }
.campo.mal .err { display: block }
.campo.mal input { border-color: #FF9B8A }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--gris); line-height: 1.4 }
.consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--lima); flex: none }
.consent a { color: var(--crema) }
.msg { font-size: 13px; color: #FF9B8A; min-height: 0 }

/* ── pantallas bajas: el reloj cede antes que el texto ── */
@media (max-height: 620px) {
  body[data-paso="dato"], body[data-paso="pregunta"] { --escena: 30svh }
  body[data-paso="intro"] { --escena: 46svh }
  .op { min-height: 40px; padding: 8px 12px; font-size: 14px }
  .cifra-dial { font-size: 56px }
}
@media (max-height: 570px) {
  body[data-paso="dato"], body[data-paso="pregunta"] { --escena: 24svh }
  .opciones { gap: 6px }
}
@media (min-width: 900px) {
  body[data-paso="pregunta"], body[data-paso="dato"] { --escena: 44svh }
}
@media (prefers-reduced-motion: reduce) {
  .escena, .pantalla { transition: none; animation: none }
}

#p-form { gap: 10px }
#p-form .entrada { font-size: 14px }
#p-form .corto { display: none }
@media (max-height: 640px) { #p-form .largo { display: none } #p-form .corto { display: inline } #p-form h2 { font-size: 22px } .campo input, .campo select { height: 42px } }
@media (max-height: 640px) { .campo label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) } #p-form { gap: 8px } }
@media (max-height: 570px) { #p-form h2 { font-size: 20px } #p-form { gap: 6px } }

/* ============================================================
   23-oct · espacio profundo, cristal y todo centrado (pedido de Juan)
   ============================================================ */
:root {
  --noche: #050A07;
  --vidrio: linear-gradient(135deg, rgba(247,248,229,.10), rgba(247,248,229,.025) 55%, rgba(24,213,145,.05));
  --vidrio-borde: rgba(247,248,229,.16);
  --vidrio-sombra: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.02), 0 18px 40px -18px rgba(0,0,0,.75);
}
/* el fondo: nebulosa esmeralda casi negra con una veladura lima arriba y viñeta */
body {
  background:
    radial-gradient(55% 40% at 50% 26%, rgba(24,213,145,.17), transparent 70%),
    radial-gradient(45% 38% at 12% 82%, rgba(6,63,50,.55), transparent 72%),
    radial-gradient(38% 30% at 88% 12%, rgba(208,253,0,.07), transparent 70%),
    radial-gradient(130% 95% at 50% 35%, #0A160F 0%, #050A07 62%, #020403 100%) fixed,
    var(--noche);
}
/* estrellas fijas en dos tramas de tamaño distinto (patrón, no ruido) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgba(247,248,229,.9), transparent 60%),
    radial-gradient(1px 1px at 151px 97px, rgba(247,248,229,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 89px 173px, rgba(208,253,0,.7), transparent 60%),
    radial-gradient(1px 1px at 211px 29px, rgba(24,213,145,.9), transparent 60%),
    radial-gradient(1px 1px at 61px 233px, rgba(247,248,229,.6), transparent 60%),
    radial-gradient(1px 1px at 320px 150px, rgba(247,248,229,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 280px 310px, rgba(247,248,229,.5), transparent 60%);
  background-size: 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 410px 410px, 410px 410px;
  animation: titila 9s ease-in-out infinite alternate;
}
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%) }
@keyframes titila { from { opacity: .4 } to { opacity: .65 } }
.escena, .panel, .cab { position: relative; z-index: 1 }
.cab { position: fixed; z-index: 5 }

/* el cristal: todas las piezas (tarjetas, opciones, campos, botones secundarios) */
.op, .perfil, .secundario, .paso-dial, .libros li, .primera, .campo input, .campo select, .bajar a, .gracias-caja {
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-sombra);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.op:hover, .secundario:hover, .paso-dial:hover, .bajar a:hover { border-color: rgba(247,248,229,.34); opacity: 1 }
.op[aria-pressed="true"] { border-color: var(--lima); background: linear-gradient(135deg, rgba(208,253,0,.16), rgba(208,253,0,.04)) }
.primera { border-left: 2px solid var(--lima); border-radius: 16px }
.perfil, .libros li { border-radius: 18px }
.cta { border-radius: 16px; background: linear-gradient(180deg, #E3FF4D 0%, var(--lima) 60%, #BDE600 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(208,253,0,.35), 0 14px 38px -14px rgba(208,253,0,.65) }

/* todo centrado */
.pantalla { text-align: center; align-items: stretch }
.pantalla > h1, .pantalla > h2, .pantalla > .entrada, .pantalla > .nota, .pantalla > .remate { margin-inline: auto }
.entrada { margin-inline: auto }
.perfil { text-align: center; padding: 20px 18px }
.mas { text-align: center; gap: 8px }
.libros > .perfil-tipo, .primera > .perfil-tipo { text-align: center }

/* el titular de la portada: pregunta grande y apretada, con el remate de la marca debajo */
#p-intro { gap: 14px }
#p-intro h1 { font-size: clamp(32px, 8.8vw, 50px); line-height: 1.02; letter-spacing: -.026em; max-width: 19ch }
.remate { font-family: var(--display); font-weight: 300; font-size: clamp(18px, 4.6vw, 23px); line-height: 1.2; color: var(--esmeralda); max-width: 34ch; margin-top: -2px; text-wrap: balance }

/* el resultado: más aire entre bloques */
.resultado { gap: 18px }
.resultado .perfil { margin-top: 4px }
.resultado .mas, .resultado .primera, .resultado .libros { margin-top: 10px }
.resultado .secundario { margin-top: -6px }

/* la pantalla final: la caja de cristal en el centro exacto, con los libros volando detrás */
body[data-paso="gracias"] .escena { position: fixed; inset: 0; height: 100svh; z-index: 0 }
body[data-paso="gracias"] .escena canvas { inset: 0; opacity: 1 }
body[data-paso="gracias"] .panel { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding-block: 72px 24px }
#p-gracias { width: 100%; max-width: 480px; padding: 28px 22px; border-radius: 24px; gap: 14px;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-sombra);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%) }
@media (prefers-reduced-motion: reduce) { body::before { animation: none } }

/* el lienzo 3D se funde con el fondo: sin borde duro abajo */
.escena canvas { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%) }
body[data-paso="gracias"] .escena canvas { -webkit-mask-image: none; mask-image: none }
@media (min-width: 900px) { body[data-paso="intro"] { --escena: 46svh } }
/* la portada lleva una pregunta más larga que el titular de antes: el reloj cede un poco */
body[data-paso="intro"] { --escena: 47svh }
@media (max-height: 620px) { body[data-paso="intro"] { --escena: 40svh } #p-intro { gap: 11px } }
@media (min-width: 900px) { body[data-paso="intro"] { --escena: 46svh } }