/* La Vista · página del menú. Paleta: base #f2f2ef, carbón #3a3a3a, rojo #c73e3a, marino #1B2A41, salvia #A3B18A */
:root {
  --base: #f2f2ef;
  --carbon: #3a3a3a;
  --rojo: #c73e3a;
  --rojo-hover: #b23531;
  --marino: #1b2a41;
  --marino-2: #22344f;
  --salvia: #a3b18a;
  --claro: #c8ced6;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--marino); color: var(--base); font: 16px/1.6 var(--sans); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Portada */
.portada {
  min-height: 82svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 64px 20px 56px;
  background: radial-gradient(120% 80% at 50% 0%, var(--marino-2) 0%, var(--marino) 70%);
}
.logo { width: min(340px, 76vw); }
.raya { width: 56px; height: 2px; background: var(--rojo); margin: 36px 0 14px; }
h1 { font: italic 500 clamp(3rem, 9vw, 4.4rem)/1 var(--serif); color: var(--salvia); margin: 0 0 18px; }
.intro { max-width: 32ch; margin: 0 0 30px; color: var(--claro); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 600 .95rem/1 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--salvia); outline-offset: 3px; }
.btn-rojo { background: var(--rojo); color: var(--base); }
.btn-rojo:hover { background: var(--rojo-hover); }
.btn-linea { background: transparent; color: var(--base); border-color: rgba(242, 242, 239, .35); }
.btn-linea:hover { border-color: var(--base); }
.aviso { margin: 18px 0 0; font-size: .9rem; color: var(--salvia); }

/* Índice de secciones */
.indice { background: var(--base); color: var(--carbon); padding: 64px 20px 72px; }
.indice h2 { font: 500 clamp(1.9rem, 5vw, 2.5rem)/1.1 var(--serif); text-align: center; margin: 0 0 8px; }
.indice-ayuda { text-align: center; color: #6d6a65; margin: 0 0 36px; font-size: .95rem; }
.secciones {
  list-style: none; margin: 0 auto; padding: 0; max-width: 860px;
  columns: 2; column-gap: 40px; /* en orden por columna, como el índice del PDF */
}
.secciones li { break-inside: avoid; }
.secciones a {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 10px;
  padding: 15px 4px; border-bottom: 1px solid #d8d6d0; text-decoration: none; transition: color .2s ease;
}
.secciones a:hover .nom { color: var(--rojo); }
.secciones a:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.num { font: 600 .75rem/1 var(--sans); letter-spacing: .12em; color: var(--rojo); }
.nom { font: 500 1.35rem/1.2 var(--serif); transition: color .2s ease; }
.pag { font-size: .8rem; color: #6d6a65; }

/* Pie */
.pie { text-align: center; padding: 44px 20px 48px; color: var(--claro); font-size: .92rem; }
.pie p { margin: 0 0 6px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--base); text-decoration: underline; }
.redes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 0; margin: 18px 0; }
.redes a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.redes svg { width: 20px; height: 20px; }
.copy { font-size: .8rem; opacity: .7; margin-top: 14px !important; }

@media (max-width: 640px) {
  .secciones { columns: 1; }
  .botones { flex-direction: column; width: 100%; max-width: 320px; }
  .btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}