/* El mismo aspecto que la app: papel cálido, tinta y un solo acento (verde
   botella). Claro y oscuro según el sistema. Los colores salen de app/src/ui/tema.ts. */
:root {
  color-scheme: light dark;
  --fondo: #F5F3EE; --superficie: #FFFFFF; --hundido: #ECE9E1; --borde: #E0DCD2;
  --texto: #1A1915; --texto2: #5F5C53; --texto3: #8A867B;
  --acento: #17624A; --sobre-acento: #FFFFFF; --acento-suave: #E2EEE8;
  --peligro: #B3261E; --peligro-suave: #F8E3E0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121210; --superficie: #1B1A17; --hundido: #25241F; --borde: #34322C;
    --texto: #F2F0E9; --texto2: #B0ADA1; --texto3: #817E73;
    --acento: #74D3AD; --sobre-acento: #0B2A1F; --acento-suave: #1A3229;
    --peligro: #FF8E84; --peligro-suave: #3A1E1B;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: var(--fondo); color: var(--texto);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
main { width: 100%; max-width: 440px; }
.marca {
  display: inline-block; margin: 0 0 20px; color: var(--acento); text-decoration: none;
  font: 600 22px/1 Georgia, "Times New Roman", serif; letter-spacing: -0.01em;
}
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 24px; }
h1 { margin: 0 0 8px; font: 600 26px/1.2 Georgia, "Times New Roman", serif; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0 0 16px; color: var(--texto2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--acento); }
label { display: block; margin: 0 0 6px; font-weight: 600; font-size: 15px; }
.campo { display: flex; gap: 8px; margin-bottom: 6px; }
input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--fondo); color: var(--texto); font: inherit;
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.ayuda { margin: 0 0 16px; font-size: 14px; color: var(--texto3); }
button {
  height: 48px; padding: 0 18px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--acento); color: var(--sobre-acento); font: inherit; font-weight: 600;
}
button.ancho { width: 100%; }
button.discreto { background: var(--hundido); color: var(--texto); font-weight: 500; }
button:disabled { opacity: 0.55; cursor: default; }
.error { margin: 0 0 16px; padding: 10px 12px; border-radius: 12px; background: var(--peligro-suave); color: var(--peligro); font-size: 15px; }
.pie { margin: 20px 0 0; font-size: 14px; color: var(--texto3); text-align: center; }
[hidden] { display: none !important; }

/* La portada: titular grande, las tres cosas que hace y un botón. */
.portada main { max-width: 520px; padding: 16px 0; }
.portada h1 { margin-bottom: 12px; font-size: 36px; line-height: 1.08; }
.entrada { margin-bottom: 24px; font-size: 18px; }
.ventajas { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.ventajas li { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 18px 20px; }
.ventajas h2 { margin: 0 0 4px; font: 600 18px/1.3 Georgia, "Times New Roman", serif; color: var(--acento); }
.ventajas p { margin: 0; font-size: 16px; }
.boton {
  display: block; padding: 15px 18px; border-radius: 12px; text-align: center; text-decoration: none;
  background: var(--acento); color: var(--sobre-acento); font-weight: 600;
}