/* Etapa 0 (D-TIP-08). Marca de la tienda = Tɨpina, identidad Vuelo (D-TIP-14):
   colores de ~/divulgacion-cientifica/marcas/tipina/vuelo/marca.py; contraste
   WCAG medido el 2026-10-22 (todo ≥ 6:1). Sin fuentes ni recursos de terceros. */

:root {
  --fondo: #F3E9DA;
  --superficie: #FBF6EE;
  --texto: #0E0C0B;
  --tenue: #5F544C;
  --acento: #5E0E26;
  --acento-texto: #F3E9DA;
  --borde: #DCCDB8;
  --error: #a1260d;
  --radio: 10px;
  --ancho: 46rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0E0C0B;
    --superficie: #1A1614;
    --texto: #F3E9DA;
    --tenue: #B9AC9F;
    --acento: #C9A15A;
    --acento-texto: #0E0C0B;
    --borde: #3A322C;
    --error: #ff8f78;
  }
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

header, main, footer { max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }

header { padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
header .marca { display: inline-flex; line-height: 0; }
header .marca img { height: 4.5rem; width: auto; }  /* el nombre del logo es de trazo fino: menos de ~4 rem no se lee */
header nav a { color: var(--tenue); margin-left: 1rem; }

h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.15; margin: 2rem 0 1rem; }
h2 { margin-top: 2.5rem; }

a { color: var(--acento); }

.entrada { font-size: 1.15rem; color: var(--tenue); }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  margin: 1.5rem 0;
}

.pasos { padding-left: 1.25rem; }
.pasos li { margin-bottom: .5rem; }

form label { display: block; font-weight: 600; margin-top: 1rem; }
form .ayuda { font-weight: 400; color: var(--tenue); font-size: .9rem; }
input, select, textarea {
  width: 100%;
  font: inherit;
  padding: .6rem .7rem;
  margin-top: .3rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  color: var(--texto);
}
input:focus, select:focus, textarea:focus, a:focus, button:focus {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}
fieldset { border: 1px solid var(--borde); border-radius: 8px; margin-top: 1rem; }
fieldset label, .casilla { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; }
fieldset input[type="checkbox"], .casilla input { width: auto; margin-top: .35rem; }

.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.boton, button {
  display: inline-block;
  background: var(--acento);
  color: var(--acento-texto);
  border: 0;
  border-radius: 8px;
  padding: .75rem 1.25rem;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  margin-top: 1.25rem;
}
.boton.secundario { background: transparent; color: var(--acento); border: 2px solid var(--acento); }

.privacidad-corta { font-size: .85rem; color: var(--tenue); margin-top: 1rem; }

.aviso { padding-top: 2rem; }
.aviso ul { color: var(--error); }

footer { margin-top: 4rem; padding-bottom: 2rem; border-top: 1px solid var(--borde); font-size: .85rem; color: var(--tenue); }
footer .leyenda { font-weight: 700; color: var(--texto); margin: .4rem 0; }

/* Puerta de edad (docs/05 L1). */
.puerta {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(20, 15, 12, .92);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.puerta[hidden] { display: none; }
.puerta .tarjeta { max-width: 26rem; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .boton, button { transition: transform .1s; }
  .boton:active, button:active { transform: scale(.98); }
}