/* Chiringuito África Beach · hoja de estilos única
   Diseño y desarrollo: Oballe Studio Web · https://oballestudio.com/
   Estilo tomado de la carta del chiringuito: madera encalada y acuarela turquesa
   (carta de comida), papel, hojas de palmera, etiquetas de colores y copas
   ilustradas (carta de bebidas), y colores del logotipo.
   Tipografías: Outfit y Marck Script (SIL OFL 1.1), autoalojadas. */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-var-es.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marck Script";
  src: url("../fonts/marck-script-es.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Respaldos con métricas ajustadas para evitar saltos (CLS) */
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Roboto");
  size-adjust: 97.3%;
  ascent-override: 102.8%;
  descent-override: 26.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Marck Fallback";
  src: local("Georgia Italic"), local("Georgia"), local("Liberation Serif Italic");
  size-adjust: 88%;
  ascent-override: 98%;
  descent-override: 44%;
  line-gap-override: 0%;
}

:root {
  /* Logo */
  --tinta: #1D1A1A;
  --oceano: #0092B2;
  --menta: #79B7A5;
  /* Carta de comida */
  --agua: #AFE6EC;
  --agua-clara: #E1F4F5;
  /* Carta de bebidas */
  --mar: #478D88;         /* banda «cocktail» (tono de la carta oscurecido para que el texto se lea) */
  --papel: #F3F1EB;
  --palmera: #5EA5A0;
  /* Etiquetas (versiones con contraste suficiente para texto blanco) */
  --p-petroleo: #006E86;
  --p-verde: #3F7F79;
  --p-naranja: #9C6118;
  --p-coral: #C8372F;
  --p-salmon: #A9503F;
  --p-berenjena: #9E3D5B;
  /* Bordes de las cajas (tonos originales de la carta) */
  --b-petroleo: #08748F;
  --b-verde: #63978F;
  --b-naranja: #D1994D;
  --b-coral: #DB433E;
  --b-salmon: #D37261;
  --b-berenjena: #AB3F61;
  /* Texto y fondos */
  --enlace: #006E86;
  --enlace-hondo: #0B5D6E;
  --ingles: #16708C;
  --gris: #5B5651;
  --noche: #12282C;
  --blanco: #FFFFFF;
  --sans: "Outfit", "Outfit Fallback", Arial, sans-serif;
  --guion: "Marck Script", "Marck Fallback", cursive;
  --ancho: 74rem;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --radio: 16px;
  --sombra: 0 8px 24px rgba(29, 26, 26, .07);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel) url("../img/papel.webp") repeat center top / 1400px auto;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--enlace); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--enlace-hondo); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--oceano); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; font-weight: 700; text-wrap: balance; }
h3 { font-size: 1.25rem; }

.salto { position: absolute; left: -999px; top: 0; background: var(--p-petroleo); color: #fff; padding: .6rem 1rem; z-index: 50; }
.salto:focus { left: 1rem; top: 1rem; }
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* ---------- Títulos al estilo de la carta ---------- */
.guion {
  font-family: var(--guion);
  font-weight: 400;
  color: var(--tinta);
  line-height: 1.05;
  letter-spacing: 0;
}
.titulo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem;
  margin: 0 0 1.25rem;
}
.titulo .guion {
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  padding: .05em .45em .18em .25em;
  margin-left: -.25em;
  background: url("../img/acuarela-trazo.webp") no-repeat 0 78% / 100% 72%;
}
.titulo .etiqueta, .etiqueta {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .95rem; color: var(--tinta);
}
.antetitulo {
  display: inline-block; margin: 0 0 .9rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem;
  color: #fff; background: var(--p-petroleo); padding: .3rem .9rem; border-radius: 999px;
}

/* ---------- Botones y etiquetas ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .65rem 1.4rem;
  background: var(--p-petroleo); color: #fff; border: 2px solid var(--p-petroleo);
  border-radius: 999px; font-family: var(--sans); font-weight: 700; font-size: 1.05rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--enlace-hondo); border-color: var(--enlace-hondo); color: #fff; }
.boton--linea { background: rgba(255, 255, 255, .7); color: var(--p-petroleo); }
.boton--linea:hover { background: #fff; color: var(--enlace-hondo); }
.boton svg { width: 1.1em; height: 1.1em; flex: none; }

.pildora {
  display: inline-block; padding: .32rem 1rem; border-radius: 999px;
  color: #fff; background: var(--p-petroleo);
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: .95rem; line-height: 1.3;
}
.c-petroleo { --c: var(--p-petroleo); --cb: var(--b-petroleo); }
.c-verde { --c: var(--p-verde); --cb: var(--b-verde); }
.c-naranja { --c: var(--p-naranja); --cb: var(--b-naranja); }
.c-coral { --c: var(--p-coral); --cb: var(--b-coral); }
.c-salmon { --c: var(--p-salmon); --cb: var(--b-salmon); }
.c-berenjena { --c: var(--p-berenjena); --cb: var(--b-berenjena); }
.pildora[class*="c-"], [class*="c-"] > .pildora { background: var(--c); }

.mas a {
  font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
  border-bottom: 2px solid var(--agua); padding-bottom: .1rem;
}
.mas a::after {
  content: ""; width: .5em; height: .5em; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); margin-left: .1rem;
}
.mas a:hover { border-color: var(--oceano); }
.preguntas + .mas, .platos + .mas { margin-top: 2rem; }

/* ---------- Cabecera ---------- */
.cabecera { background: rgba(255, 255, 255, .94); border-bottom: 1px solid rgba(29, 26, 26, .08); position: relative; z-index: 5; }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .55rem; }
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { width: 86px; height: auto; }
.menu ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; padding: .5rem .75rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
  color: var(--tinta); font-weight: 600; font-size: .92rem; text-transform: uppercase; letter-spacing: .06em;
}
.menu a:hover { background: var(--agua-clara); color: var(--tinta); }
.menu a[aria-current="page"] { background: var(--agua); }
.menu .idioma { color: var(--gris); font-weight: 400; text-transform: none; letter-spacing: 0; }
.cabecera .boton { min-height: 44px; padding: .5rem 1.1rem; }
@media (max-width: 899px) {
  .cabecera__fila { flex-wrap: wrap; row-gap: .2rem; }
  .marca img { width: 62px; }
  .menu { order: 3; width: calc(100% + 2 * var(--margen)); margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen); overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { padding: .45rem .6rem; font-size: .85rem; }
}

/* ---------- Héroe ---------- */
.heroe { position: relative; overflow: hidden; padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem); }
.palmera { position: absolute; pointer-events: none; z-index: 0; }
.palmera--arriba { top: -40px; left: -60px; width: min(46vw, 420px); }
.palmera--abajo { bottom: -60px; right: -40px; width: min(44vw, 400px); }
.heroe > .contenedor { position: relative; z-index: 1; }
.heroe__rejilla { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.h1 { margin: 0 0 1rem; }
.h1__pre { display: block; font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--p-petroleo); margin-bottom: .2rem; }
.h1__guion {
  display: inline-block; font-family: var(--guion); font-weight: 400; color: var(--tinta);
  font-size: clamp(3.4rem, 9vw, 5.8rem); line-height: 1.05;
  padding: .02em .45em .15em .2em; margin-left: -.2em;
  background: url("../img/acuarela-trazo.webp") no-repeat 0 82% / 100% 70%;
}
.h1__sub { display: block; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600; line-height: 1.25; margin-top: .5rem; }
.entradilla { font-size: clamp(1.1rem, 1.5vw, 1.22rem); max-width: 40rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.datos { display: grid; gap: .9rem; margin: 1.75rem 0 0; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.datos > div { background: rgba(255, 255, 255, .8); border-radius: var(--radio); padding: .9rem 1rem .8rem; box-shadow: var(--sombra); }
.datos dt { margin-bottom: .35rem; }
.datos dt .pildora { font-size: .78rem; padding: .2rem .7rem; }
.datos dd { margin: 0; font-weight: 600; line-height: 1.35; }
.foto {
  margin: 0; position: relative;
  background: #fff; padding: 10px; border-radius: 20px; box-shadow: 0 14px 34px rgba(29, 26, 26, .16);
  transform: rotate(1.2deg);
}
.foto img { border-radius: 12px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto figcaption { font-size: .9rem; color: var(--gris); padding: .5rem .25rem 0; text-align: center; }
@media (max-width: 899px) { .foto { order: -1; transform: rotate(.8deg); margin-inline: .25rem; } }
@media (min-width: 900px) { .heroe__rejilla { grid-template-columns: 1.1fr .9fr; } }

/* ---------- Secciones ---------- */
.seccion { position: relative; padding-block: clamp(3rem, 7vw, 5rem); }
.seccion--madera { background: #EEF0EF url("../img/madera.webp") center / cover; }
.seccion--agua { background: var(--agua-clara); }
.seccion--blanca { background: rgba(255, 255, 255, .6); }
.intro { max-width: 46rem; }
.nota { color: var(--gris); font-size: 1rem; }
.dos-columnas { display: grid; gap: 2rem 3rem; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Aviso de cierre de temporada */
.aviso-temporada { background: var(--p-coral); color: #fff; text-align: center; font-size: 1.02rem; }
.aviso-temporada p { margin-block: 0; padding-block: .6rem; }
.aviso-temporada strong { text-transform: uppercase; letter-spacing: .06em; }

/* Fotos */
.foto--media { transform: rotate(-1deg); margin-top: 1.75rem; }
.foto--media img { aspect-ratio: 4 / 3; }
.pila { display: grid; gap: 1.5rem; align-content: start; }
.pila .foto--media { margin-top: 0; }
.fotos-cocteles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 2vw, 1.5rem); margin: 0 0 1rem; max-width: 42rem; }
.tarjeta .fotos-cocteles { grid-template-columns: repeat(2, 1fr); max-width: 22rem; margin: 0 0 1.2rem; }
.fotos-cocteles .foto { padding: 6px; border-radius: 14px; }
.fotos-cocteles .foto:nth-child(1) { transform: rotate(-2deg); }
.fotos-cocteles .foto:nth-child(2) { transform: rotate(1deg); }
.fotos-cocteles .foto:nth-child(3) { transform: rotate(-.5deg); }
.fotos-cocteles img { aspect-ratio: 2 / 3; border-radius: 9px; }
.fotos-cocteles figcaption { font-size: .82rem; padding-top: .35rem; }
.tarjeta__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.galeria { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.5rem; }
.galeria .foto img { aspect-ratio: 4 / 3; }
.galeria .foto:nth-child(odd) { transform: rotate(-1deg); }
.galeria .foto:nth-child(even) { transform: rotate(1deg); }
@media (min-width: 900px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
.dos-fotos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0 0 2rem; max-width: 48rem !important; }
.dos-fotos .foto img { aspect-ratio: 16 / 9; }
.dos-fotos .foto:first-child { transform: rotate(-1deg); }
.banda-playa--fina { min-height: 0; padding-top: .9rem; }

/* Tarjetas de platos */
.platos { display: grid; gap: 1.1rem; list-style: none; padding: 0; margin: 1.5rem 0 0; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
@media (min-width: 960px) { .platos { grid-template-columns: repeat(3, 1fr); } }
.plato { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); display: flex; flex-direction: column; overflow: hidden; }
.plato__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plato__cuerpo { padding: 1.1rem 1.3rem 1.3rem; }
@media (max-width: 599px) {
  .platos { gap: .8rem; }
  .plato { display: grid; grid-template-columns: 38% 1fr; }
  .plato__foto { height: 100%; aspect-ratio: auto; min-height: 9rem; }
  .plato__cuerpo { padding: .8rem .9rem .9rem; font-size: 1rem; }
  .plato__cabeza { flex-wrap: wrap; gap: 0 .6rem; }
  .plato h3 { font-size: 1.05rem; }
  .plato .en { font-size: .9rem; margin-bottom: .35rem; }
}
.plato__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.plato h3 { margin: 0; font-size: 1.2rem; }
.plato .precio { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; margin: 0; }
.plato .en { color: var(--ingles); margin: 0 0 .6rem; font-size: 1rem; }
.plato p:last-child { margin: 0; }

/* Caja con etiqueta (como las cajas de la carta de bebidas) */
.caja {
  position: relative; border: 2px solid var(--cb, var(--b-petroleo)); border-radius: 20px;
  padding: 2rem 1.3rem 1.1rem; margin-top: 1.4rem; background: rgba(255, 255, 255, .62);
}
.caja > .pildora, .caja > h2.pildora, .caja > h3.pildora {
  position: absolute; top: 0; left: 1.1rem; transform: translateY(-55%); margin: 0;
  background: var(--c, var(--p-petroleo)); font-size: 1rem;
}
.caja > :last-child { margin-bottom: 0; }

/* Lista tipo carta */
.lista-carta { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 2.5rem; }
.lista-carta li {
  display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; padding: .6rem 0;
  border-bottom: 1px dashed rgba(29, 26, 26, .14); break-inside: avoid; align-content: start;
}
.lista-carta li:last-child { border-bottom: 0; }
.lista-carta .nombre { font-weight: 700; }
.lista-carta .precio { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.lista-carta .precio small { display: block; font-weight: 400; color: var(--gris); font-size: .8em; }
.lista-carta .desc, .lista-carta .en { grid-column: 1 / -1; font-size: .98rem; line-height: 1.45; }
.lista-carta .en { color: var(--ingles); }

/* Tarjetas de la portada (playa y cóctel) */
.tarjeta { background: #fff; border-radius: 20px; box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; }
.tarjeta__cuerpo { padding: 1.5rem 1.5rem 1.6rem; }
.banda-coctel {
  background: var(--mar); position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.4rem .9rem; min-height: 150px; overflow: hidden;
}
.banda-coctel .guion { color: #F4F0E8; font-size: clamp(3.2rem, 7vw, 4.4rem); line-height: .9; }
.banda-coctel img { width: min(52%, 230px); height: auto; }
.banda-playa { background: var(--agua-clara); position: relative; min-height: 150px; padding: 1.1rem 1.4rem .9rem; display: flex; align-items: flex-end; overflow: hidden; }
.banda-playa .guion { font-size: clamp(3rem, 6.5vw, 4.2rem); line-height: .9; position: relative; z-index: 1; }
.banda-playa .palmera { right: -30px; top: -30px; width: 240px; }

/* Opciones (familias) */
.opciones { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.opciones li { background: #fff; border-radius: var(--radio); padding: 1rem 1.1rem 1.1rem; box-shadow: var(--sombra); }
.opciones .pildora { font-size: .8rem; margin-bottom: .55rem; }
.opciones p { margin: 0; }

/* Horario */
.horario { width: 100%; max-width: 26rem; border-collapse: collapse; margin: .25rem 0 1rem; }
.horario th, .horario td { text-align: left; padding: .45rem .25rem; border-bottom: 1px dashed rgba(29, 26, 26, .16); }
.horario th { font-weight: 400; }
.horario td { font-weight: 600; font-variant-numeric: tabular-nums; }
.horario .cerrado td { color: var(--gris); font-weight: 400; }
.horario .hoy th, .horario .hoy td { color: var(--p-petroleo); font-weight: 700; }
.horario .hoy th::after { content: " · hoy"; font-size: .85em; }
.horario caption { text-align: left; padding-bottom: .4rem; }
.direccion { font-style: normal; margin-bottom: 1rem; }
.direccion strong { display: block; }

/* Mapa */
.mapa {
  position: relative; aspect-ratio: 4 / 3; width: 100%; overflow: hidden;
  background: #fff url("../img/palmera-esquina-2.svg") no-repeat right -70px bottom -70px / 300px auto;
  border-radius: 20px; display: grid; place-items: center; text-align: center; padding: 1.25rem;
  box-shadow: var(--sombra);
}
.mapa p { margin: 0 0 .9rem; max-width: 24rem; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa--cargado { padding: 0; }

/* Preguntas */
.preguntas { display: grid; gap: 1.1rem 1.5rem; }
@media (min-width: 900px) { .preguntas--dos { grid-template-columns: 1fr 1fr; } }
.pregunta { background: rgba(255, 255, 255, .78); border-radius: var(--radio); padding: 1.1rem 1.25rem; }
.pregunta h3 { font-size: 1.12rem; margin-bottom: .35em; }
.pregunta p { margin: 0; }
.faq-grupo { margin-bottom: 2.75rem; }
.faq-grupo .preguntas { margin-top: .5rem; }

/* ---------- Páginas interiores ---------- */
.cabecera-pagina { position: relative; overflow: hidden; padding-block: clamp(1.75rem, 5vw, 3rem) 1.5rem; }
.cabecera-pagina > .contenedor { position: relative; z-index: 1; }
.cabecera-pagina .palmera--arriba { width: min(40vw, 340px); left: auto; right: -50px; top: -60px; transform: scaleX(-1); }
.migas { font-size: .95rem; color: var(--gris); margin-bottom: 1rem; }
.migas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.migas li + li::before { content: "/"; margin-right: .35rem; color: var(--gris); }
.h1--interior .h1__guion { font-size: clamp(3rem, 8vw, 5rem); }
.prosa > * { max-width: 46rem; }
.prosa h2 { font-size: 1.5rem; margin-top: 1.6em; }
.legal h2 { font-size: 1.3rem; }
.relleno { background: #FFF1B8; padding: 0 .2em; }

/* Índice de secciones (chips) */
.indice { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.indice a {
  display: inline-block; padding: .38rem .95rem; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--c, var(--p-petroleo));
}
.indice a:hover { filter: brightness(1.12); color: #fff; }

/* Carta de comida: madera encalada y bloques con acuarela */
.pagina-carta { background: #EEF0EF url("../img/madera.webp") center top / 1600px auto repeat; }
.carta-bloque {
  background: rgba(255, 255, 255, .86); border-radius: 22px; padding: 1.6rem clamp(1.1rem, 3vw, 2.2rem) 1.4rem;
  margin-bottom: 1.6rem; scroll-margin-top: 1rem; box-shadow: var(--sombra);
}
.carta-bloque .titulo { margin-bottom: .6rem; }
.carta-bloque .aviso-corto { display: inline-block; background: var(--agua-clara); border-radius: 999px; padding: .35rem 1rem; font-weight: 600; font-size: .98rem; margin: 0 0 .8rem; }
@media (min-width: 900px) { .carta-bloque .lista-carta { grid-template-columns: 1fr 1fr; } }
.foto-carta { margin: .25rem 0 1.25rem; transform: rotate(1deg); max-width: 26rem; }
.foto-carta img { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .carta-bloque--foto { display: grid; grid-template-columns: minmax(0, 1fr) 270px; column-gap: 2.25rem; align-items: start; }
  .carta-bloque--foto > .titulo, .carta-bloque--foto > .aviso-corto, .carta-bloque--foto > .lista-carta { grid-column: 1; }
  .carta-bloque--foto > .foto-carta { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .carta-bloque--foto .lista-carta { grid-template-columns: 1fr; }
}
@media (min-width: 1150px) { .carta-bloque--foto .lista-carta { grid-template-columns: 1fr 1fr; } }

/* Carta de bebidas: papel, palmeras y cajas de colores */
.banda-bebidas { background: var(--mar); position: relative; overflow: hidden; }
.banda-bebidas .contenedor { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-block: 1.4rem 1rem; }
.banda-bebidas .guion { margin: 0; color: #F4F0E8; font-size: clamp(4rem, 12vw, 7.5rem); line-height: .85; }
.banda-bebidas img { width: min(44vw, 330px); }
.columnas-bebidas { columns: 1; column-gap: 1.6rem; }
@media (min-width: 700px) { .columnas-bebidas { columns: 2; } }
@media (min-width: 1100px) { .columnas-bebidas { columns: 3; } }
.columnas-bebidas .caja { break-inside: avoid; display: inline-block; width: 100%; margin: 1.6rem 0 .4rem; }
.columnas-bebidas .lista-carta li { padding: .35rem 0; }
.cocteles .lista-carta { gap: 0 2.5rem; }
.vinos-rejilla { display: grid; gap: .5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.vinos-rejilla h3 { margin: .6rem 0 .2rem; font-size: 1.1rem; }
@media (min-width: 900px) { .cocteles .lista-carta { grid-template-columns: 1fr 1fr; } }

/* ---------- Pie ---------- */
.pie { background: var(--noche); color: #DCEBE8; padding-block: 3rem 6.5rem; font-size: 1rem; position: relative; overflow: hidden; }
.pie .palmera { opacity: .14; right: -60px; bottom: -40px; width: 420px; }
.pie > .contenedor { position: relative; z-index: 1; }
.pie a { color: #DCEBE8; }
.pie a:hover { color: #fff; }
.pie__rejilla { display: grid; gap: 2rem; }
@media (min-width: 900px) { .pie__rejilla { grid-template-columns: 1.1fr 1fr 1fr 1fr; } .pie { padding-bottom: 3rem; } }
.pie h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--menta); margin-bottom: .7rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .35rem; }
.pie .horario th, .pie .horario td { border-color: rgba(220, 235, 232, .18); padding: .3rem .2rem; }
.pie .horario td { color: #fff; }
.pie .horario .cerrado td { color: #9FB3B0; }
.pie .horario .hoy th, .pie .horario .hoy td { color: var(--agua); }
.pie__logo { width: 150px; height: auto; margin-bottom: 1rem; }
.pie__base { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(220, 235, 232, .18); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .95rem; color: #B9CCC9; }

/* ---------- Barra fija móvil ---------- */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid rgba(29, 26, 26, .1);
  box-shadow: 0 -4px 14px rgba(20, 34, 34, .08);
}
.barra-movil .boton { min-height: 46px; padding: .5rem .6rem; font-size: 1rem; }
@media (min-width: 900px) { .barra-movil { display: none; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .cabecera, .pie, .barra-movil, .indice, .acciones, .palmera { display: none !important; }
  body, .pagina-carta { background: #fff; font-size: 11pt; }
  .carta-bloque { box-shadow: none; padding: .5rem 0; }
}