/* Estilos base provisionales: el diseño definitivo se decide en la fase de diseño. */
:root {
  --bg: #fbfaf7;
  --fg: #1f2421;
  --muted: #5f665f;
  --accent: #2f6f4e;
  --max: 68rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #141715; --fg: #e9ece8; --muted: #a3aaa2; --accent: #7cc39b; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1rem; }
a { color: var(--accent); }
.site-header, .site-footer { max-width: var(--max); width: 100%; margin: 0 auto; padding: 1rem; }
.brand { font-weight: 700; text-decoration: none; color: var(--fg); }
.site-footer { color: var(--muted); font-size: .875rem; }
.hero { padding: 4rem 0; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin: 0 0 .5rem; line-height: 1.1; }

/* Reserva pública (provisional) */
.boton, button { display: inline-block; padding: .6rem 1.1rem; border: 0; border-radius: .4rem; background: var(--accent); color: #fff; font: inherit; text-decoration: none; cursor: pointer; }
.paso label { display: block; margin: .6rem 0; }
.paso input:not([type=checkbox]):not([type=radio]), .paso select, .paso textarea { display: block; width: 100%; max-width: 28rem; padding: .45rem; font: inherit; }
.paso fieldset { border: 1px solid var(--muted); border-radius: .4rem; margin: .8rem 0; }
.error { color: #b3261e; font-weight: 600; }
.aviso { border-left: 4px solid var(--accent); padding: .4rem .8rem; }
.tarjeta { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--muted); border-radius: .5rem; padding: .8rem; margin: .8rem 0; }
.tarjeta img { width: 8rem; height: auto; border-radius: .3rem; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
table.desglose { border-collapse: collapse; margin: .8rem 0; }
table.desglose td, table.desglose th { padding: .25rem .8rem .25rem 0; text-align: left; }