/* ==========================================================
   Base: reset, tipografía, botones y utilidades compartidas
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); color-scheme: light; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  /* Damero rosa ondulado, como el fondo del menú impreso */
  background: var(--pink-pastel) url("../img/checker.svg") repeat;
  background-size: 360px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
html { font-synthesis: none; } /* Shrikhand tiene un solo peso: no "falsear" negritas */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; font-weight: 400; letter-spacing: 0; }

/* Título retro con doble contorno (como "MENÚ" en el menú impreso) */
.retro, .section-head h2:not(.plain) {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--pink-strong);
  /* relleno rosa + filete color papel + sombra desplazada (estilo letra de los 70) */
  text-shadow: .035em .035em 0 var(--cream), .075em .075em 0 var(--pink-dusty);
  letter-spacing: .01em;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--pink-strong); outline-offset: 3px; border-radius: 6px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--coffee); color: var(--cream); padding: .6rem 1rem; border-radius: var(--radius-sm); z-index: 100; transition: top var(--t-fast); }
.skip-link:focus { top: 1rem; }

/* ---------- Encabezados de sección ---------- */
.section-head { max-width: 640px; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow { font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-strong); line-height: 1; margin-bottom: .7rem; display: block; }
.section-head h2 { font-size: var(--fs-2xl); }
.section-head p { margin-top: .85rem; color: var(--text-muted); }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--pink-strong);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.7rem;
  border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bd);
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--btn-bg) 70%, transparent);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t-fast), color var(--t-fast);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--btn-bg) 80%, transparent); }
.btn:active { transform: translateY(0); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary:hover { --btn-bg: var(--pink-strong-dark); }
.btn--dark { --btn-bg: var(--coffee); }
.btn--dark:hover { --btn-bg: #34201a; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--coffee); --btn-bd: var(--coffee); box-shadow: none; }
.btn--ghost:hover { --btn-bg: var(--coffee); --btn-fg: var(--cream); box-shadow: var(--shadow); }
.btn--light { --btn-bg: var(--cream); --btn-fg: var(--coffee); }
.btn--sm { min-height: 42px; padding: .5rem 1.2rem; font-size: var(--fs-xs); }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Revelado al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}