/* Landing de pre-lanzamiento de Dorfi. Los colores, las fuentes y los estilos de texto salen de
   marca/tokens.css (el sistema de marca); aquí solo va la composición. De noche: el tema Noche, un
   violeta muy oscuro y nunca negro, con Dorfi flotando sobre el violeta del escenario. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 16px/1.6 var(--font-texto); }
img { max-width: 100%; display: block; }
a { color: var(--enlace); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.envoltura { max-width: 1120px; margin: 0 auto; padding-left: max(var(--espacio-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--espacio-4), env(safe-area-inset-right, 0px)); }
.saltar { position: absolute; left: -9999px; top: 8px; background: var(--fondo-alto); padding: 8px 12px; border-radius: var(--radio-s); z-index: 20; }
.saltar:focus { left: 8px; }

/* botones: píldoras; el principal en accion, uno por pantalla */
.boton { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; border: 0; border-radius: var(--radio-pildora); background: var(--accion); color: var(--sobre-accion); font: 700 16px/1 var(--font-texto); text-decoration: none; cursor: pointer; white-space: nowrap; }
.boton-sec { height: 40px; padding: 0 16px; font-size: 14px; background: var(--escenario); color: var(--sobre-escenario); }
.boton:disabled { opacity: .7; cursor: progress; }
.boton:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 5px var(--foco); }

/* cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; background: var(--fondo); background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-top: env(safe-area-inset-top, 0px); }
.cabecera-in { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4); height: 64px; }
.logo img { height: 30px; width: auto; }

/* primera pantalla */
.portada { background: radial-gradient(90% 70% at 50% 62%, var(--escenario) 0%, var(--escenario-alto) 48%, var(--fondo) 100%); padding-block: var(--espacio-8) var(--espacio-12); }
.portada-in { display: grid; gap: var(--espacio-8); align-items: center; }
.portada-texto { display: grid; gap: var(--espacio-4); align-content: start; min-width: 0; }
.antetitulo { color: var(--enlace); text-transform: uppercase; }
.portada h1 { font-size: clamp(42px, 10vw, 76px); }
.entradilla { color: var(--tinta-suave); max-width: 34em; }
.pregunta { font: 700 16px/1.2 var(--font-texto); margin-top: var(--espacio-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: var(--radio-pildora); border: 1px solid var(--linea); background: var(--fondo-alto); color: var(--tinta); font: 600 15px/1 var(--font-texto); cursor: pointer; }
.chip i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 5px var(--foco); }
.plan { background: var(--fondo-alto); border-radius: var(--radio-m); box-shadow: var(--sombra-tarjeta); padding: var(--espacio-6); display: grid; gap: var(--espacio-3); min-height: 132px; align-content: start; }
.plan-vacio { color: var(--tinta-suave); }
.plan h2 { font: 700 22px/1.2 var(--font-titular); font-variation-settings: 'opsz' 28; letter-spacing: -0.01em; }
.plan ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.plan .plan-ir { font-weight: 700; }
.ventana { justify-self: center; width: min(100%, 340px); aspect-ratio: 1; }
.ventana svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ventana svg > rect { display: none; }

/* el reto: la banda violeta */
.reto { background: linear-gradient(var(--escenario-alto), var(--escenario)); color: var(--sobre-escenario); padding-block: var(--espacio-16); }
.reto-in { display: grid; gap: var(--espacio-8); align-items: center; }
.reto .texto-l { color: var(--sobre-escenario); max-width: 32em; margin-top: var(--espacio-3); }
.reto h2 { margin-top: var(--espacio-3); }
.etiqueta-serie.etiqueta-luz { background: var(--luz); }
.etiqueta-serie { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radio-pildora); background: var(--resalte); color: var(--sobre-accion); font: 700 13px/1 var(--font-texto); white-space: nowrap; }
.lista { display: grid; gap: var(--espacio-3); min-width: 0; }
.campo-etiqueta { font-weight: 700; }
.fila-correo { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.campo { flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 20px; border-radius: var(--radio-pildora); border: 2px solid transparent; background: #ffffff; color: #1c1a2e; font: 500 16px/1 var(--font-texto); }
.campo::placeholder { color: #6b6782; }
.campo:focus-visible { outline: none; border-color: var(--resalte); }
.campo[aria-invalid="true"] { border-color: var(--resalte); }
.fila-correo .boton { flex: 0 0 auto; }
.permiso { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; }
.permiso input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accion); }
.reto a { color: var(--resalte); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.estado { min-height: 1.5em; font-weight: 600; }
.estado.error { color: var(--resalte); }
.reto .nota { color: var(--sobre-escenario-suave); font-size: 13px; }

/* así será la app */
.app, .ciencia { padding-block: var(--espacio-16); }
.bajada { color: var(--tinta-suave); margin-top: var(--espacio-3); max-width: 36em; }
.pasos { list-style: none; margin: var(--espacio-8) 0 0; padding: 0; display: grid; gap: var(--espacio-4); }
.pasos li { background: var(--fondo-alto); border-radius: var(--radio-m); padding: var(--espacio-6); display: grid; gap: var(--espacio-2); align-content: start; }
.paso-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--escenario); color: var(--sobre-escenario); font: 800 17px/1 var(--font-titular); }
.pasos p, .extra p, .mito p:not(.etiqueta-serie) { color: var(--tinta-suave); }
.extras { display: grid; gap: var(--espacio-4); margin-top: var(--espacio-4); }
.extra { border: 1px solid var(--linea); border-radius: var(--radio-m); padding: var(--espacio-6); display: grid; gap: var(--espacio-2); }

/* te han mentido */
.ciencia { background: var(--fondo-alto); }
.mitos { display: grid; gap: var(--espacio-4); margin-top: var(--espacio-8); }
.mito { background: var(--fondo); border-radius: var(--radio-m); padding: var(--espacio-6); display: grid; gap: var(--espacio-3); align-content: start; }
.mito .etiqueta-serie { justify-self: start; }
.mito .fuente { font-size: 13px; line-height: 1.45; font-weight: 500; }
.redes { margin-top: var(--espacio-8); font-weight: 600; }
.redes a { margin-right: var(--espacio-2); }

/* pie */
.pie { padding-block: var(--espacio-12) max(var(--espacio-12), env(safe-area-inset-bottom, 0px)); }
.pie-in { display: grid; gap: var(--espacio-3); justify-items: start; }
.pie-lema { font: 800 20px/1.2 var(--font-titular); font-variation-settings: 'opsz' 24; }
.pie nav { display: flex; gap: var(--espacio-4); }
.pie .nota { color: var(--tinta-suave); font-size: 13px; max-width: 46em; }

@media (max-width: 919px) {
  .portada-texto { display: contents; }
  .antetitulo { order: 1; } .portada h1 { order: 2; } .entradilla { order: 3; } .ventana { order: 4; }
  .pregunta { order: 5; } .chips { order: 6; } .plan { order: 7; }
  .portada-in { gap: var(--espacio-4); }
  .ventana { margin-block: var(--espacio-2); }
}
@media (min-width: 720px) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mitos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 920px) {
  .portada { padding-block: var(--espacio-12) var(--espacio-16); background: radial-gradient(70% 90% at 76% 52%, var(--escenario) 0%, var(--escenario-alto) 42%, var(--fondo) 100%); }
  .portada-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--espacio-12); }
  .ventana { width: 100%; max-width: 520px; }
  .reto-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espacio-12); }
}

/* páginas legales */
.legal { padding-block: var(--espacio-12) var(--espacio-16); max-width: 760px; display: grid; gap: var(--espacio-3); }
.legal h2 { margin-top: var(--espacio-6); }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.legal .nota { color: var(--tinta-suave); font-size: 14px; }