:root {
  --tinta: #15130f;
  --fondo: #faf8f3;
  --tarjeta: #ffffff;
  --acento: #ffb703;
  --verde: #128c4a;
  --gris: #6a675f;
  --borde: #e8e4da;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta); line-height: 1.55;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: #0b5cab; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
header {
  background: var(--tinta); padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marca { color: #fff; font-size: 1.3rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.marca::first-letter { color: var(--acento); }
nav { display: flex; gap: 16px; }
nav a { color: #fff; font-weight: 600; text-decoration: none; }
main { max-width: 760px; margin: 0 auto; padding: 22px 16px 40px; }
h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.15; margin: 0 0 6px; }
h2 { font-size: 1.1rem; margin: 26px 0 6px; }
p, ul { margin: 0 0 10px; }
ul { padding-left: 20px; }
.nota { color: var(--gris); font-size: .85rem; }
.contacto { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 18px; margin-top: 16px; }
.contacto h2 { margin-top: 0; }
.boton {
  display: inline-block; background: var(--verde); color: #fff; font-weight: 800;
  text-decoration: none; padding: 13px 20px; border-radius: 12px; margin: 4px 0 10px;
}
details { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
summary { font-weight: 700; cursor: pointer; }
details p { margin: 8px 0 0; }
footer { text-align: center; padding: 0 16px 40px; font-size: .9rem; }