:root {
  --color-ground: #f3eee4;
  --color-ink: #1c1816;
  --color-accent: #c8521d;
  --color-accent-text: #b44a1a;
  --color-on-accent: #ffffff;
  --color-line: #ccc7bf;
  --color-muted: #6e6964;
  --color-support: #c9a24a;
  --font-display: "Fraunces", Georgia, 'Times New Roman', serif;
  --font-text: "Hanken Grotesk", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --step-0: 1rem;
  --step-1: 1.414rem;
  --step-2: 1.9994rem;
  --step-3: clamp(1.9225rem, 3.77vw + 0.8481rem, 2.8271rem);
  --step-4: clamp(2.7184rem, 5.33vw + 1.1993rem, 3.9976rem);
  --step-5: clamp(3.8438rem, 7.54vw + 1.6958rem, 5.6526rem);
  --step-6: clamp(5.4351rem, 10.66vw + 2.3978rem, 7.9928rem);
  --step-m1: 0.7072rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  --space-9: 12rem;
  --radius-button: 0px;
  --measure: 64ch;
}
:root { --small: max(0.8125rem, var(--step-m1)); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--color-ground); color: var(--color-ink); font: 400 var(--step-0)/1.55 var(--font-text); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.04; margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); max-width: 17ch; font-variation-settings: "opsz" 120; }
h2 { font-size: var(--step-3); max-width: 22ch; font-variation-settings: "opsz" 96; }
h3 { font-size: var(--step-1); font-weight: 600; }
p, dd, li { max-width: var(--measure); }
a { color: var(--color-accent-text); text-underline-offset: 0.18em; }

/* cabecera: una línea, filete de herrería abajo */
.cabecera { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-3); background: var(--color-ground); border-bottom: 1px solid var(--color-ink); min-height: 3.5rem; }
.marca { display: flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none; color: var(--color-ink); line-height: 1; }
.marca-nombre { font: 500 var(--step-1)/1 var(--font-display); white-space: nowrap; }
.marca-apellido { display: none; font: 500 var(--small)/1.2 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-top: 0.2rem; white-space: nowrap; }
.cabecera nav { margin-left: auto; }
.indice summary { cursor: pointer; list-style: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--space-2); font: 500 var(--small)/1 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--color-ink); }
.indice summary::-webkit-details-marker { display: none; }
.indice ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3); }
.indice a { color: var(--color-ink); text-decoration: none; font-weight: 500; letter-spacing: 0.02em; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; }
.indice a:hover { border-bottom-color: var(--color-ink); }
.indice[open] { position: relative; }
.indice[open] ul { position: absolute; right: 0; top: calc(100% + var(--space-1)); background: var(--color-ground); border: 1px solid var(--color-ink); padding: var(--space-2) var(--space-4); flex-direction: column; gap: 0; min-width: 12rem; }
.idioma { font: 500 var(--small)/1 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--color-ink); min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--space-2); border-bottom: 1px solid var(--color-ink); }

/* secciones: aire regular y filete de herrería con remate en punto */
main section { padding: var(--space-7) var(--space-3); position: relative; }
main section + section::before { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); top: 0; border-top: 1px solid var(--color-ink); }
main section + section::after { content: ""; position: absolute; left: var(--space-3); top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ink); }
.titulo { margin-bottom: var(--space-5); }
.ceja { font: 500 var(--small)/1.4 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-3); }
.entrada { font-size: var(--step-1); line-height: 1.35; max-width: 34ch; }
.foto { margin: 0; }
.foto img { width: 100%; border-bottom: 1px solid var(--color-ink); background: var(--color-ground); }
.foto-hero img { aspect-ratio: 3 / 2; object-fit: cover; }
.foto-ancha img { aspect-ratio: 3 / 2; object-fit: cover; max-height: 64vh; }
.foto-plato img { aspect-ratio: 4 / 5; object-fit: cover; }

/* hero: la foto a sangre arriba, el texto sobre el muro encalado que se monta en la foto */
.hero { padding: 0 0 var(--space-7); }
.hero-texto { padding: var(--space-5) var(--space-3) 0; margin-top: calc(-1 * var(--space-5)); background: var(--color-ground); position: relative; }
.hero-texto h1 { margin-bottom: var(--space-4); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin: var(--space-4) 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-2) var(--space-4); background: var(--color-accent-text); color: var(--color-on-accent); border-radius: var(--radius-button); text-decoration: none; font-weight: 600; letter-spacing: 0.01em; }
.btn:hover { background: var(--color-ink); }
.btn-sec { background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); }
.btn-sec:hover { background: var(--color-ink); color: var(--color-ground); }
.enlace { font: inherit; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; min-height: 44px; display: inline-flex; align-items: center; }

/* sedes: dos columnas con la foto arriba y los datos en lista con filete */
.sedes { display: grid; gap: var(--space-6); }
.sede h3 { margin: var(--space-4) 0 var(--space-1); font-size: var(--step-2); font-weight: 500; }
.sede .sub { margin: 0 0 var(--space-3); color: var(--color-muted); }
.datos { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); border-top: 1px solid var(--color-line); padding-top: var(--space-2); }
.datos dt { font: 500 var(--small)/1.6 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.datos dd { margin: 0; }
.telefono { margin: var(--space-6) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-line); font-size: var(--step-1); }
.telefono span { display: block; font: 500 var(--small)/1.6 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.telefono a { color: var(--color-ink); display: inline-flex; align-items: center; min-height: 44px; }

/* carta: momentos en lista con filete; la foto del plato en columna aparte en escritorio */
.carta { display: grid; gap: var(--space-6); }
.momento { padding: var(--space-4) 0; border-top: 1px solid var(--color-line); }
.momento:first-child { border-top: 0; padding-top: 0; }
.momento h3 { margin-bottom: var(--space-1); }
.momento p { margin: 0 0 var(--space-2); }
.momento details { margin-top: var(--space-2); }
.momento summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 500 var(--small)/1.4 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); }
.momento details p { margin-top: var(--space-2); color: var(--color-ink); }

/* terraza: página con margen de datos */
.pagina { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.columna p { margin: 0 0 var(--space-3); }
.margen { margin: 0; border-top: 1px solid var(--color-ink); padding-top: var(--space-2); align-self: start; }
.margen dt { font: 500 var(--small)/1.6 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-top: var(--space-2); }
.margen dd { margin: 0; font-size: var(--step-1); font-family: var(--font-display); font-weight: 500; }

/* preguntas */
.preguntas { margin: 0; display: grid; gap: var(--space-4); }
.pregunta { padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.preguntas dt { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; max-width: 30ch; }
.preguntas dd { margin: var(--space-1) 0 0; }

/* reservar: la única inversión a tinta */
.cierre { background: var(--color-ink); color: var(--color-ground); }
.cierre h2, .cierre .enlace, .cierre a { color: var(--color-ground); }
.cierre .enlace { text-decoration-color: var(--color-accent); }
.reserva { display: grid; gap: var(--space-3); max-width: 34rem; margin-top: var(--space-5); }
.reserva label { display: grid; gap: var(--space-1); font: 500 var(--small)/1.4 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; }
.reserva select, .reserva input { min-height: 48px; font: 400 var(--step-0)/1.2 var(--font-text); color: var(--color-ground); background: transparent; border: 1px solid var(--color-ground); border-radius: 0; padding: 0 var(--space-2); color-scheme: dark; }
.vista-previa { margin: var(--space-2) 0 0; padding: var(--space-3); border: 1px dashed var(--color-line); }
.vista-previa span { display: block; font: 500 var(--small)/1.6 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-line); }
.nota { font-size: var(--small); color: var(--color-line); max-width: 48ch; }

.pie { padding: var(--space-5) var(--space-3); border-top: 1px solid var(--color-ink); font-size: var(--small); color: var(--color-muted); }
.pie p { margin: 0 0 var(--space-1); }
.pie .aviso { margin-top: var(--space-3); }

@media (max-width: 23.99rem) {
 .cabecera { gap: var(--space-2); padding-left: var(--space-2); padding-right: var(--space-2); }
 .marca-nombre { font-size: var(--step-0); }
 .indice summary, .idioma { padding-left: var(--space-1); padding-right: var(--space-1); letter-spacing: 0.08em; }
}
@media (min-width: 48rem) {
 main section { padding-left: var(--space-5); padding-right: var(--space-5); }
 main section + section::before { left: var(--space-5); right: var(--space-5); }
 main section + section::after { left: var(--space-5); }
 .hero-texto { padding-left: var(--space-5); padding-right: var(--space-5); }
 .sedes { grid-template-columns: 1fr 1fr; }
 .marca-apellido { display: block; }
 .indice[open] summary { display: none; }
 .indice ul, .indice[open] ul { position: static; border: 0; padding: 0; flex-direction: row; gap: var(--space-3); background: transparent; min-width: 0; }
}
@media (min-width: 64rem) {
 main section { padding-left: var(--space-7); padding-right: var(--space-7); }
 main section + section::before { left: var(--space-7); right: var(--space-7); }
 main section + section::after { left: var(--space-7); }
 .foto-hero img { max-height: 72vh; }
 .hero-texto { padding-left: var(--space-7); padding-right: var(--space-7); margin-top: calc(-1 * var(--space-7)); width: min(100%, 60rem); }
 .carta { grid-template-columns: minmax(0, 60ch) minmax(16rem, 28rem); align-items: start; }
 .pagina { grid-template-columns: minmax(0, 60ch) 18rem; gap: var(--space-7); }
 .sedes { gap: var(--space-7); }
 .preguntas { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-7); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
 .cabecera, .acciones, .idioma, .pie .aviso { display: none; }
 body { background: #fff; color: #000; }
 main section { padding: 1rem 0; }
 .cierre { background: #fff; color: #000; }
}