/* ===========================================================================
   Restaurante Amadeus — hoja propia, no comparte nada con styles.css.
   La pagina es la unica del sitio con identidad oscura (el resto de la
   hosteria es claro), asi que aislarla evita pelear contra 7.000 lineas de
   cascada y que un cambio de alla la rompa.

   La paleta salio de MEDIR el logo, no de elegirla a ojo: negro #030303 con
   vetas #191919/#252525, crema #FDF4AA y naranja #F9A704. Contraste de la
   crema sobre el negro 18.4:1, del naranja 10.4:1. El naranja contra la crema
   da 1.77:1, asi que nunca va uno sobre el otro como texto.

   LA MADERA (26/09). `assets/textura-madera.webp` es la veta del fondo del
   logo, recortada de una zona sin letras y espejada en cuatro para que se
   repita sin costura (columnas y filas del mosaico empalman exacto: se
   verifico pixel por pixel). Es lo que saca a la pagina del negro plano.

   Va en las zonas de RESPIRO — portada, cierre, cabecera, tarjetas de datos —
   y NO detras de la carta: 229 platos se leen sobre una superficie tranquila,
   no sobre vetas. Ahi la textura queda al 30% y bien debajo del panel.
   =========================================================================== */

:root {
  /* Los negros llevan un punto de calidez (rojo > azul), como la madera del
     logo. Un gris neutro al lado de la crema se ve azulado y sucio. */
  --negro: #100d0a;
  --negro-hondo: #0a0806;
  --superficie: #1b1712;
  --superficie-alta: #262019;
  --superficie-borde: #332b21;

  --borde: rgba(253, 244, 170, 0.13);
  --borde-fuerte: rgba(253, 244, 170, 0.3);
  --filete: rgba(249, 167, 4, 0.34);   /* el dorado del marco de la carta */

  --crema: #fdf4aa;          /* el script del logo */
  --texto: #ece7d6;          /* crema desaturada, para leer parrafos largos */
  --texto-tenue: #aaa189;
  --ambar: #f9a704;          /* el gorro de chef */
  --ambar-claro: #ffc75a;

  --madera: url("assets/textura-madera.webp");

  --display: "Yellowtail", "Segoe Script", cursive;
  --texto-fuente: "Jost", "Segoe UI", system-ui, sans-serif;

  --ancho: 1180px;
  --radio: 14px;
  --sombra: 0 24px 60px rgba(0, 0, 0, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }

/* Sin scroll horizontal en celular (03/10): la misma red que styles.css, ver
   el CLAUDE.md. En html, `hidden` es el respaldo de los navegadores sin
   `clip`. En body va SOLO `clip`: recorta sin volverlo contenedor de scroll
   (con `hidden` la cabecera dejaria de quedar pegada arriba). */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--texto-fuente);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* viewport-fit=cover: en un iPhone apaisado devuelve el contenido a la zona
     segura (fuera de la muesca). En vertical y en escritorio da 0. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* La veta del logo. Se aplica como CAPA (::before) y no como background del
   elemento, para poder graduarla con opacidad sin tocar lo que va encima.
   El mosaico se agranda a 520px: a su tamaño real (400) la simetria del
   espejo se nota; estirado y al 55% de opacidad se lee como veta y no como
   patron repetido. */
.vetas { position: relative; isolation: isolate; }
.vetas::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--madera) 0 0 / 520px auto repeat;
  opacity: 0.55;
  pointer-events: none;
}
.vetas-suave::before { opacity: 0.3; }
.vetas-fuerte::before { opacity: 0.85; }

/* `height: auto` no es adorno: las imagenes llevan width/height en el HTML
   (para que el navegador reserve el lugar y la pagina no salte al cargar), y
   sin esto ese height se aplica como alto FIJO — el logo salia estirado al
   doble de su alto. Las que si tienen que llenar su caja (.portada-foto,
   .lugar-galeria img) lo pisan mas abajo con su propia clase. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }
@media (max-width: 640px) { .contenedor { width: calc(100% - 32px); } }

.sr-solo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* El adorno que la carta impresa pone debajo de cada titulo de seccion: una
   llamita con un filete a cada lado. Va como SVG en el CSS y no como archivo
   -- son 200 bytes y aparece seis veces. */
.adorno {
  height: 16px; margin: 14px auto 0;
  background: no-repeat center / auto 16px
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="16" viewBox="0 0 200 16"><g stroke="%23f9a704" stroke-opacity=".5" stroke-width="1"><path d="M4 8h78"/><path d="M118 8h78"/></g><path d="M100 1c0 4.6-5 5.4-5 9.2a5 5 0 0 0 10 0C105 6.4 100 5.6 100 1z" fill="%23f9a704"/></svg>');
}

/* --- Botones -------------------------------------------------------------- */

.boton {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 500; font-size: 0.97rem;
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.boton:active { transform: translateY(1px); }

.boton-principal {
  background: linear-gradient(180deg, var(--ambar-claro), var(--ambar));
  color: #241800; font-weight: 600;
  box-shadow: 0 6px 20px rgba(249, 167, 4, 0.24);
}
.boton-principal:hover { box-shadow: 0 10px 28px rgba(249, 167, 4, 0.34); }

.boton-borde {
  border-color: var(--borde-fuerte); color: var(--crema);
  background: rgba(27, 23, 18, 0.55); backdrop-filter: blur(4px);
}
.boton-borde:hover { border-color: var(--crema); background: rgba(253, 244, 170, 0.09); }

/* --- Encabezado ----------------------------------------------------------- */

.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10, 8, 6, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.cabecera-fila { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.cabecera-logo { flex: 0 0 auto; }
.cabecera-logo img { height: 32px; width: auto; }
.cabecera-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.cabecera-nav a {
  padding: 9px 14px; border-radius: 999px;
  font-size: 0.93rem; color: var(--texto-tenue); text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.cabecera-nav a:hover { color: var(--crema); background: rgba(253, 244, 170, 0.08); }
.cabecera-volver { color: var(--texto-tenue); }
@media (max-width: 720px) {
  .cabecera-nav .solo-ancho { display: none; }
  .cabecera-logo img { height: 27px; }
}

/* --- Portada -------------------------------------------------------------- */

.portada {
  position: relative; overflow: hidden;
  background: var(--negro-hondo);
  border-bottom: 1px solid var(--filete);
}
.portada-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.38;
}
/* Dos capas: una viñeta que hunde los bordes para que el logo respire, y un
   lavado calido que le saca a la foto el gris de las paredes del salon. */
.portada-velo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 42%, rgba(16, 13, 10, 0.24), rgba(10, 8, 6, 0.9) 74%),
    linear-gradient(180deg, rgba(10, 8, 6, 0.72), rgba(20, 14, 6, 0.28) 46%, var(--negro)),
    linear-gradient(0deg, rgba(249, 167, 4, 0.06), rgba(249, 167, 4, 0.06));
}
.portada-cuerpo {
  position: relative; z-index: 2;
  padding: clamp(48px, 8vw, 92px) 0 clamp(42px, 6vw, 72px);
  text-align: center;
}
.portada-logo {
  width: min(440px, 78%); margin: 0 auto clamp(18px, 3vw, 26px);
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.7));
}
.portada-rotulo {
  margin: 0 0 18px;
  font-size: clamp(0.68rem, 1.8vw, 0.78rem);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ambar); font-weight: 500;
}
.portada h1 {
  margin: 0 auto 14px; max-width: 16ch;
  font-family: var(--display);
  font-weight: 400; font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.12; color: var(--crema);
  text-wrap: balance;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
.portada-bajada {
  margin: 0 auto clamp(22px, 4vw, 30px); max-width: 52ch;
  color: var(--texto-tenue); font-size: clamp(1rem, 2.1vw, 1.08rem);
  text-wrap: balance;
}
.portada-acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Abierto / cerrado, con los dos turnos. Es el dato que mas se busca en la
   pagina de un restaurante y por eso va en la portada, resuelto en vivo. */
.estado {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: clamp(20px, 3.5vw, 28px);
  padding: 9px 18px 9px 15px;
  border: 1px solid var(--borde); border-radius: 999px;
  background: rgba(16, 13, 10, 0.82); backdrop-filter: blur(6px);
  font-size: 0.93rem;
}
.estado-luz { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-tenue); flex: 0 0 auto; }
.estado.abierto .estado-luz { background: #5ed17a; box-shadow: 0 0 0 4px rgba(94, 209, 122, 0.16); }
.estado.cerrado .estado-luz { background: #d4623f; box-shadow: 0 0 0 4px rgba(212, 98, 63, 0.14); }
.estado b { color: var(--crema); font-weight: 600; }
.estado span { color: var(--texto-tenue); }

/* --- Titulos de seccion --------------------------------------------------- */

.seccion { padding: clamp(54px, 8vw, 96px) 0; position: relative; }
.seccion-titulo { text-align: center; margin-bottom: clamp(30px, 5vw, 46px); }
.seccion-rotulo {
  margin: 0 0 10px;
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ambar); font-weight: 500;
}
.seccion-titulo h2 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3.2rem); line-height: 1.15; color: var(--crema);
}
.seccion-titulo p {
  margin: 14px auto 0; max-width: 58ch;
  color: var(--texto-tenue); text-wrap: balance;
}
.seccion-titulo .adorno + p { margin-top: 16px; }

/* --- La carta ------------------------------------------------------------- */

.carta {
  background: var(--negro-hondo);
  border-block: 1px solid var(--filete);
}

.carta-buscador { position: relative; max-width: 470px; margin: 0 auto clamp(24px, 4vw, 34px); }
.carta-buscador input {
  width: 100%; min-height: 50px;
  padding: 0 44px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--superficie-borde); border-radius: 999px;
  font: inherit; font-size: 0.97rem;
  box-shadow: inset 0 1px 0 rgba(253, 244, 170, 0.05);
}
.carta-buscador input::placeholder { color: var(--texto-tenue); }
.carta-buscador input:focus { border-color: var(--filete); outline: none; }
.carta-buscador input:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
/* Con menos de 16px, iOS amplia la pagina al tocar el buscador y la deja
   ampliada y corrida. En el telefono va a 16. */
@media (max-width: 760px) {
  .carta-buscador input { font-size: 16px; }
}
.carta-buscador-lupa {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--texto-tenue); pointer-events: none;
}
.carta-buscador-limpiar {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: none; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--texto-tenue); font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.carta-buscador.con-texto .carta-buscador-limpiar { display: grid; }
.carta-buscador-limpiar:hover { color: var(--crema); background: rgba(253, 244, 170, 0.08); }

/* Escritorio: las categorias a la izquierda, siempre a la vista, y los platos
   al lado. Telefono: las categorias pasan a una tira de chips pegada arriba.
   En los dos casos estan TODAS visibles, que es el punto. */
.carta-cuerpo {
  display: grid; grid-template-columns: 246px minmax(0, 1fr);
  gap: clamp(22px, 3.5vw, 40px); align-items: start;
}

/* `min-width: 0` en los dos hijos del grid, y no es prolijidad: un grid item
   crece hasta el ancho de su contenido salvo que se le diga esto. Sin el, la
   tira de categorias de telefono (11 chips en fila, con su propio scroll)
   estiraba la PAGINA a 1030px en una pantalla de 625 y aparecia scroll
   horizontal en todo el sitio, con los precios cortados. */
.carta-indice, .carta-panel { min-width: 0; }
.carta-indice-lista { min-width: 0; max-width: 100%; }

.carta-indice { position: sticky; top: 80px; }
.carta-indice-lista { display: flex; flex-direction: column; gap: 2px; }
.carta-indice button {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 12px 15px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--texto-tenue);
  font: inherit; font-size: 0.97rem; text-align: left; cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
.carta-indice button:hover {
  color: var(--crema); background: var(--superficie); border-color: var(--superficie-borde);
}
.carta-indice button.activa {
  color: var(--crema); background: var(--superficie-alta);
  border-color: var(--filete); font-weight: 500;
  box-shadow: inset 3px 0 0 var(--ambar);
}
.carta-indice button .cuenta {
  margin-left: auto; font-size: 0.8rem; font-variant-numeric: tabular-nums;
  color: var(--texto-tenue); opacity: 0.75;
}
.carta-indice button.activa .cuenta { color: var(--ambar); opacity: 1; }

/* El panel de los platos es la "hoja" de la carta: superficie tranquila, con
   el doble filete dorado que tienen las cartas impresas (el de afuera claro,
   una linea oscura y el de adentro tenue). Se hace con box-shadow inset y no
   con bordes anidados, que pediria un div de mas. */
.carta-panel {
  background: linear-gradient(180deg, var(--superficie), #17130f);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 5px rgba(249, 167, 4, 0.09),
    var(--sombra);
  padding: clamp(24px, 3.4vw, 40px);
}
.carta-panel-titulo {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 2.5rem); color: var(--crema); line-height: 1.15;
}
.carta-panel-bajada { margin: 8px 0 0; color: var(--texto-tenue); }
.carta-panel-titulo + .carta-panel-bajada { margin-bottom: 4px; }
.carta-panel > .adorno { margin: 16px auto clamp(18px, 3vw, 26px); }

.carta-grupo + .carta-grupo { margin-top: clamp(28px, 4vw, 40px); }
.carta-grupo-titulo {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ambar); font-weight: 500;
}
.carta-grupo-titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--filete), transparent); }
.carta-grupo-nota { margin: -6px 0 16px; font-size: 0.9rem; color: var(--texto-tenue); font-style: italic; }

.platos { list-style: none; margin: 0; padding: 0; }
.plato {
  padding: 15px 14px; margin-inline: -14px;
  border-bottom: 1px solid rgba(253, 244, 170, 0.07);
  border-radius: 8px;
  transition: background-color 0.16s ease;
}
.plato:last-child { border-bottom: 0; }
.plato:hover { background: rgba(253, 244, 170, 0.035); }

/* La linea de puntos entre el plato y el precio es de la carta impresa. Se
   dibuja con un borde punteado en un hueco flexible, no con caracteres. */
.plato-linea { display: flex; align-items: baseline; gap: 10px; }
.plato-nombre { font-size: 1.05rem; color: var(--texto); font-weight: 500; }
.plato-puntos {
  flex: 1 1 auto; min-width: 18px; height: 0;
  border-bottom: 1px dotted rgba(253, 244, 170, 0.28);
  transform: translateY(-4px);
}
.plato-precio {
  flex: 0 0 auto; color: var(--crema); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plato-precio.consultar { color: var(--texto-tenue); font-weight: 500; font-size: 0.95rem; }
.plato-desc {
  margin: 5px 0 0; max-width: 62ch;
  font-size: 0.93rem; font-style: italic; color: var(--texto-tenue); line-height: 1.5;
}

.plato-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }

/* Las personas sugeridas, con el mismo lenguaje que la carta impresa: una
   figura por persona, no un numero suelto. */
.porciones {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 12px 3px 10px; border-radius: 999px;
  background: rgba(249, 167, 4, 0.09); border: 1px solid rgba(249, 167, 4, 0.16);
  font-size: 0.8rem; color: var(--texto-tenue);
}
.porciones svg { width: 9px; height: 13px; flex: 0 0 auto; color: var(--ambar); }
.porciones-figuras { display: inline-flex; gap: 2px; }

.etiqueta {
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--borde); font-size: 0.76rem;
  letter-spacing: 0.04em; color: var(--texto-tenue);
}
.etiqueta.destacada {
  border-color: rgba(249, 167, 4, 0.5); color: var(--ambar);
  background: rgba(249, 167, 4, 0.08);
}

.carta-notas {
  margin-top: clamp(26px, 4vw, 36px); padding: 18px 20px;
  border: 1px solid var(--superficie-borde); border-left: 2px solid var(--filete);
  border-radius: 10px;
  background: rgba(10, 8, 6, 0.5);
  display: grid; gap: 10px;
}
.carta-notas p { margin: 0; font-size: 0.9rem; color: var(--texto-tenue); line-height: 1.55; }

.carta-pie {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borde);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-size: 0.93rem; color: var(--texto-tenue);
}
.carta-pie b { color: var(--crema); font-variant-numeric: tabular-nums; }

.carta-vacio, .carta-cargando { padding: 60px 20px; text-align: center; color: var(--texto-tenue); }
.carta-error { color: #e8a48c; }

/* Resultados de la busqueda: se muestran todas las categorias con
   coincidencias, una debajo de la otra, en vez de obligar a adivinar en cual
   estaba el plato. */
.carta-resultados-cabeza { margin: 0 0 clamp(18px, 3vw, 26px); color: var(--texto-tenue); font-size: 0.95rem; }
.carta-resultados-cabeza b { color: var(--crema); }
.carta-resultado-cat + .carta-resultado-cat { margin-top: clamp(28px, 4vw, 38px); }

@media (max-width: 900px) {
  .carta-cuerpo { grid-template-columns: 1fr; gap: 18px; }
  .carta-indice {
    position: sticky; top: 64px; z-index: 12;
    padding: 10px 0;
    background: var(--negro-hondo);
    border-bottom: 1px solid var(--borde);
  }
  .carta-indice-lista {
    flex-direction: row; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }
  .carta-indice-lista::-webkit-scrollbar { display: none; }
  .carta-indice button {
    flex: 0 0 auto; width: auto; scroll-snap-align: start;
    border: 1px solid var(--superficie-borde); border-radius: 999px;
    padding: 9px 16px; font-size: 0.92rem; background: var(--superficie);
  }
  .carta-indice button.activa { border-color: var(--ambar); box-shadow: none; }
  .carta-indice button .cuenta { display: none; }
  .carta-panel { padding: 20px 16px; }
  .plato { margin-inline: -8px; padding-inline: 8px; }
}

/* --- El lugar ------------------------------------------------------------- */

.lugar-galeria {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px;
  margin-bottom: clamp(30px, 5vw, 46px);
}
.lugar-galeria figure {
  margin: 0; overflow: hidden; border-radius: var(--radio);
  border: 1px solid var(--superficie-borde);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.lugar-galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.lugar-galeria figure:hover img { transform: scale(1.03); }
.lugar-galeria figure:first-child img { aspect-ratio: 16 / 10; }
.lugar-galeria figure:last-child img { aspect-ratio: 3 / 4; }
@media (max-width: 760px) {
  .lugar-galeria { grid-template-columns: 1fr; }
  .lugar-galeria figure:last-child img { aspect-ratio: 16 / 11; }
}

.datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 1px;
  background: var(--superficie-borde);
  border: 1px solid var(--filete); border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.dato {
  padding: 22px;
  background:
    linear-gradient(rgba(27, 23, 18, 0.78), rgba(27, 23, 18, 0.78)),
    var(--madera) 0 0 / 520px auto repeat,
    var(--superficie);
}
.dato h3 {
  margin: 0 0 8px; font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ambar); font-weight: 500;
}
.dato p { margin: 0; color: var(--texto); line-height: 1.5; }
.dato p + p { margin-top: 3px; }
.dato a { color: var(--crema); text-decoration: none; border-bottom: 1px solid var(--filete); }
.dato a:hover { border-bottom-color: var(--crema); }
.dato small { display: block; margin-top: 8px; color: var(--texto-tenue); font-size: 0.86rem; }

/* --- Cierre y pie --------------------------------------------------------- */

.cierre {
  position: relative; overflow: hidden;
  background: var(--negro-hondo);
  border-top: 1px solid var(--filete);
}
.cierre-cuerpo { position: relative; z-index: 2; text-align: center; padding: clamp(54px, 7vw, 86px) 0; }
.cierre h2 {
  margin: 0 auto 16px; max-width: 18ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.9rem); color: var(--crema); line-height: 1.15;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
}
.cierre p { margin: 0 auto 28px; max-width: 46ch; color: var(--texto-tenue); }
.cierre-acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.pie {
  border-top: 1px solid var(--borde); background: var(--negro);
  padding: 28px 0; text-align: center;
}
.pie p { margin: 0; font-size: 0.88rem; color: var(--texto-tenue); }
.pie a { color: var(--texto-tenue); }
.pie a:hover { color: var(--crema); }