/* =============================================================
   VIBRA STREET FOOD — styles.css
   1. Fuentes  2. Tokens  3. Reset  4. Utilidades  5. Cabecera
   6. Hero  7. Secciones home  8. Footer  9. Stubs (en obra)
   10. Efectos  11. Responsive  12. Movimiento reducido
   ============================================================= */

/* =============================================================
   1. Fuentes autoalojadas (RGPD: sin CDN de Google)
   ============================================================= */
@font-face {
  /* Titulares del brandbook. OJO: el archivo actual es la version DEMO (sin digitos ni licencia comercial).
     Al tener la completa, sustituir fuentes/ut-bagh-display.woff2 y listo. */
  font-family: "UT Bagh Display";
  src: url("fuentes/ut-bagh-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url("fuentes/anton-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fuentes/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fuentes/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fuentes/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fuentes/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   2. Tokens de marca (del brandbook)
   ============================================================= */
:root {
  --negro:    #000000;
  --negro-2:  #0A0A0A;
  --negro-3:  #131313;
  --blanco:   #FFFFFF;
  --texto:    rgba(255, 255, 255, 0.92);
  --texto-2:  rgba(255, 255, 255, 0.64);
  --texto-3:  rgba(255, 255, 255, 0.58);
  --amarillo: #F38F1C;
  --rosa:     #E83085;
  --degradado: linear-gradient(90deg, #F38F1C 0%, #E83085 100%);
  --linea:    rgba(255, 255, 255, 0.12);

  --display: "UT Bagh Display", "Anton", "Arial Narrow", Impact, sans-serif;
  --display-num: "Anton", "Arial Narrow", Impact, sans-serif;
  --sans:    "Poppins", "Segoe UI", system-ui, sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --cab-h: 72px;            /* la cabecera */
  --barra-h: 30px;          /* la barra fina de arriba (calle e Instagram); 0 en móvil */
  --nav-h: calc(var(--cab-h) + var(--barra-h)); /* todo lo fijo arriba: lo usan los márgenes de las páginas */
  --pad:   1.25rem;
  --max:   1280px;
}
@media (min-width: 960px) { :root { --pad: 2.5rem; } }

/* =============================================================
   3. Reset y base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--negro);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
::selection { background: var(--rosa); color: var(--negro); }
:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 3px;
  border-radius: 4px;
}

.salto-contenido {
  position: fixed; top: -100px; left: 1rem;
  padding: 0.6rem 1rem; background: var(--blanco); color: var(--negro);
  z-index: 9999; border-radius: 8px; font-weight: 600;
}
.salto-contenido:focus { top: 1rem; }

/* Transiciones entre páginas (View Transitions API, progresivo) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: var(--ease-out);
}

/* =============================================================
   4. Utilidades
   ============================================================= */
.contenedor { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.seccion { padding-block: clamp(4rem, 9vw, 7.5rem); }
.kicker {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 26px; height: 2px;
  margin-right: 0.7rem;
  vertical-align: middle;
  background: var(--degradado);
}
.txt-degradado { color: var(--amarillo); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .txt-degradado {
    background: var(--degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* =============================================================
   5. Botones
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-degradado {
  background: var(--degradado);
  color: var(--negro);
  box-shadow: 0 6px 24px rgba(232, 48, 133, 0.35);
}
.btn-degradado:hover { box-shadow: 0 10px 34px rgba(232, 48, 133, 0.5); }

.btn-fantasma {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--texto);
}
.btn-fantasma:hover { border-color: var(--rosa); color: var(--blanco); }

.btn-negro {
  background: var(--negro);
  color: var(--blanco);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.btn-grande { font-size: 1.15rem; padding: 1.1rem 2.4rem; }
/* La flecha de "abre en otra pestana" es decorativa: se pinta, no se lee */
.ext { margin-left: 0.4em; font-size: 0.85em; }

/* =============================================================
   6. Cabecera compartida
   ============================================================= */
.cabecera {
  position: fixed;
  top: var(--barra-h); left: 0; right: 0;
  z-index: 100;
  height: var(--cab-h);
  transition: background-color 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft), backdrop-filter 0.4s var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.cabecera.is-solida {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
}
.cabecera-int {
  max-width: var(--max);
  height: 100%;
  margin: 0 auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cabecera-logo img { height: 36px; width: auto; }
.cabecera-nav { display: none; }
.cabecera-acciones { display: flex; align-items: center; gap: 0.9rem; }
.cabecera .btn-reservar { font-size: 0.86rem; padding: 0.7rem 1.35rem; }

.hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  border-radius: 10px;
}
.hamburguesa span {
  display: block;
  height: 2px; width: 100%;
  background: var(--blanco);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil a pantalla completa */
.menu-movil {
  position: fixed; inset: 0;
  z-index: 90;
  background: var(--negro);
  padding: calc(var(--nav-h) + 8vh) var(--pad) 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.menu-movil::before {
  content: "";
  position: absolute; inset: 0;
  background: url("imagenes/web/patron-300.webp") repeat;
  background-size: 150px;
  opacity: 0.03;
  pointer-events: none;
}
.menu-movil.is-abierto {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease-out);
}
.menu-movil a.enlace-movil {
  position: relative;
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 3rem);
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--texto);
  transform: translateY(18px);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out), color 0.3s;
}
.menu-movil.is-abierto a.enlace-movil { transform: translateY(0); opacity: 1; }
.menu-movil.is-abierto a.enlace-movil:nth-child(2) { transition-delay: 0.05s; }
.menu-movil.is-abierto a.enlace-movil:nth-child(3) { transition-delay: 0.1s; }
.menu-movil.is-abierto a.enlace-movil:nth-child(4) { transition-delay: 0.15s; }
.menu-movil.is-abierto a.enlace-movil:nth-child(5) { transition-delay: 0.2s; }
.menu-movil a.enlace-movil:hover,
.menu-movil a.enlace-movil.is-activa { color: var(--rosa); }
.menu-movil .menu-movil-pie {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

body.sin-scroll { overflow: hidden; }

/* Nav escritorio */
@media (min-width: 960px) {
  .hamburguesa, .menu-movil { display: none; }
  .cabecera-nav {
    display: flex;
    gap: 2.2rem;
  }
  .cabecera-nav a {
    position: relative;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--texto-2);
    transition: color 0.3s;
    padding-block: 0.3rem;
  }
  .cabecera-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    height: 2px;
    background: var(--degradado);
    transition: right 0.35s var(--ease-out);
  }
  .cabecera-nav a:hover, .cabecera-nav a.is-activa { color: var(--blanco); }
  .cabecera-nav a:hover::after, .cabecera-nav a.is-activa::after { right: 0; }
}

/* =============================================================
   8. Secciones de la home
   ============================================================= */

/* --- Manifiesto --- */
.manifiesto { background: var(--negro-2); border-block: 1px solid var(--linea); }
.manifiesto-texto {
  margin-top: 1.6rem;
  max-width: 30ch;
  font-size: clamp(1.55rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.manifiesto-nota {
  margin-top: 1.4rem;
  max-width: 52ch;
  color: var(--texto-2);
}

/* --- Teaser de carta --- */
.teaser-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.teaser-cabecera h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 14ch; }
/* --- Franja práctica --- */
.practica { background: var(--negro-2); border-block: 1px solid var(--linea); }
.practica-grid {
  display: grid;
  gap: 2.5rem;
}
.practica-bloque h3 {
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--texto-2);
  margin-bottom: 0.9rem;
}
.practica-bloque h3::after {
  content: "";
  display: block;
  width: 30px; height: 2px;
  margin-top: 0.6rem;
  background: var(--degradado);
}
.practica-bloque p, .practica-bloque li { color: var(--texto); }
.practica-bloque .practica-nota { color: var(--texto-3); font-size: 0.86rem; margin-top: 0.4rem; }
.practica-bloque ul { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
.practica-bloque strong { font-weight: 600; }
.practica-bloque a { border-bottom: 1px solid var(--rosa); transition: color 0.3s; }
.practica-bloque a:hover { color: var(--rosa); }
@media (min-width: 720px) {
  .practica-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Banda reservar --- */
.banda-reservar {
  background: var(--degradado);
  color: var(--negro);
}
.banda-reservar-int {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.8rem;
}
.banda-reservar h2 {
  font-size: clamp(2.1rem, 5.5vw, 4rem);
  max-width: 16ch;
}
.banda-reservar p { font-weight: 500; max-width: 44ch; }
@media (min-width: 960px) {
  .banda-reservar-int {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* =============================================================
   9. Footer compartido
   ============================================================= */
.pie {
  background: var(--negro);
  border-top: 1px solid var(--linea);
  padding-top: clamp(3rem, 6vw, 5rem);
}
.pie-grid {
  display: grid;
  gap: 2.6rem;
  padding-bottom: 3rem;
}
.pie-marca img { height: 34px; width: auto; }
.pie-marca p { margin-top: 1rem; color: var(--texto-2); font-size: 0.92rem; max-width: 30ch; }
.pie h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 1rem;
}
.pie ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.pie a { transition: color 0.3s; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); }
.pie a:hover { text-decoration-color: currentColor; }
.pie a:hover { color: var(--rosa); }
.pie .pie-horario-titulo {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--texto);
}
.pie .pie-horario-linea { color: var(--texto-2); font-size: 0.88rem; }
.pie-legal {
  border-top: 1px solid var(--linea);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--texto-3);
}
.pie-legal ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
@media (min-width: 720px) {
  .pie-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

/* =============================================================
   10. Páginas en obra (stubs)
   ============================================================= */
.obra {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
  padding-top: var(--nav-h);
  text-align: left;
}
.obra-int { position: relative; z-index: 1; }
.obra h1 { font-size: clamp(2.6rem, 7.5vw, 5.4rem); max-width: 12ch; }
.obra p { margin-top: 1.6rem; max-width: 50ch; color: var(--texto-2); font-size: 1.05rem; }
.obra .obra-acciones { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* =============================================================
   11. Efectos de aparición
   ============================================================= */
/* Solo se ocultan si hay JS (html.js). Sin JS, todo visible. */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal[data-retraso="1"] { transition-delay: 0.08s; }
html.js .reveal[data-retraso="2"] { transition-delay: 0.16s; }
html.js .reveal[data-retraso="3"] { transition-delay: 0.24s; }

/* =============================================================
   12. Movimiento reducido — sin reglas: los micro-efectos no se
   bloquean (Windows trae reduce activado en muchos equipos) y el
   carrusel tiene controles manuales visibles como mecanismo de parada
   ============================================================= */

/* =============================================================
   13. Página de la carta
   ============================================================= */
.carta-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(3rem, 7vw, 5rem)) 0 clamp(2.2rem, 5vw, 3.5rem);
  overflow: clip;
}
.carta-hero .contenedor { position: relative; z-index: 1; }
.carta-hero h1 { font-size: clamp(2.7rem, 7.5vw, 5.6rem); max-width: 14ch; }
.carta-notas { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.carta-nota-chip {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-2);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.45rem 1rem;
}

/* Subnav sticky de categorías */
.carta-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 60;
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--linea);
}
.carta-nav-int {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.7rem var(--pad);
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.carta-nav-int::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--texto-2);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.45rem 1.05rem;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.chip:hover { color: var(--blanco); border-color: rgba(232, 48, 133, 0.5); }
.chip.is-activa { background: var(--degradado); border-color: transparent; color: var(--negro); }

/* Secciones de categoría */
.carta-seccion { padding-block: clamp(3.2rem, 7vw, 5.5rem); }
.carta-seccion[id] { scroll-margin-top: calc(var(--nav-h) + 64px); }
.carta-seccion.alterna { background: var(--negro-2); border-block: 1px solid var(--linea); }
.carta-cab { margin-bottom: 2.4rem; }
.carta-num {
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: 0.08em;
  color: var(--amarillo);
}
.carta-cab h2 { font-size: clamp(2.3rem, 5.5vw, 4rem); margin-top: 0.2rem; }
.carta-frase {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rosa);
}
.carta-avisos { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Tarjetas de plato */
.carta-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .carta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .carta-grid { grid-template-columns: repeat(3, 1fr); } }
.plato {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 1.5rem 1.4rem 1.4rem;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.plato:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 48, 133, 0.4);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}
.plato img {
  width: 78%;
  aspect-ratio: 4 / 3;
  max-height: 220px;
  object-fit: contain;
  margin: 0 auto 1.2rem;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55));
  transition: transform 0.45s var(--ease-out);
}
.plato:hover img { transform: scale(1.05) rotate(-1.5deg); }
.plato h3 { font-size: 1.45rem; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.plato .plato-desc { margin-top: 0.55rem; color: var(--texto-2); font-size: 0.92rem; line-height: 1.55; }
.plato--sin-foto { background: linear-gradient(160deg, rgba(232, 48, 133, 0.07), var(--negro-3) 45%); }
.plato-precio {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.precio-cifra { font-family: var(--display); font-size: 1.5rem; color: var(--amarillo); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .precio-cifra, .carta-num {
    background: var(--degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.precio-nota { font-size: 0.78rem; color: var(--texto-3); font-weight: 500; }

/* Insignias */
.badge {
  font-size: 0.6rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.badge-pica { color: var(--rosa); border: 1px solid rgba(232, 48, 133, 0.55); }
.badge-vegana { color: #7BC96F; border: 1px solid rgba(123, 201, 111, 0.5); }

/* Salsas y extras */
.salsas-lista { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.salsa-chip {
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-weight: 500;
  color: var(--texto);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.salsas-nota { margin-top: 1.5rem; font-weight: 600; }
.salsas-nota .precio-cifra { font-size: 1.15rem; }
.extras-lista { max-width: 660px; }
.extras-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linea);
}
.extras-fila span:first-child { color: var(--texto-2); }
.extras-fila .precio-cifra { font-size: 1.2rem; white-space: nowrap; }

/* =============================================================
   17. La banda sonora (Spotify en dos pasos)
   ============================================================= */
.musica { background: var(--negro-2); border-block: 1px solid var(--linea); }
.musica-nota { margin-top: 0.8rem; color: var(--texto-2); max-width: 52ch; }
.musica-grid { margin-top: 2.2rem; display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .musica-grid { grid-template-columns: 1fr 1fr; } }
.musica-tarjeta {
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 1.4rem 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.musica-tarjeta h3 {
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.musica-titulo-onda { height: 24px; width: auto; }
.musica-marco {
  position: relative;
  min-height: 352px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
}
.musica-marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.musica-pie-tarjeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.musica-pie-tarjeta a { font-weight: 600; border-bottom: 1px solid var(--rosa); transition: color 0.3s; }
.musica-pie-tarjeta a:hover { color: var(--rosa); }
.musica-estado {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--texto-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =============================================================
   18. Reseñas de Google (carril horizontal, sin autoplay)
   ============================================================= */
.resenas-carril {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.resenas-carril::-webkit-scrollbar { display: none; }
.resena {
  flex: 0 0 min(360px, 84vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 1.5rem 1.5rem 1.4rem;
}
.resena-estrellas {
  color: var(--amarillo);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
}
.resena-estrellas .apagada { color: var(--texto-3); }
.resena p { color: var(--texto-2); font-size: 0.95rem; line-height: 1.6; }
.resena-pie {
  margin-top: auto;
  padding-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
}
.resena-pie strong { color: var(--texto); font-weight: 600; }
.resena-pie span { color: var(--texto-3); font-size: 0.8rem; }
.resenas-controles {
  margin-top: 1.2rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

/* =============================================================
   16. Página de reservas (módulo CoverManager)
   ============================================================= */
.reserva-seccion { padding-top: 0; }
.reserva-marco {
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: 22px;
  padding: clamp(0.8rem, 2vw, 1.4rem);
  overflow: hidden;
}
.reserva-marco iframe {
  display: block;
  width: 100%;
  min-height: 550px;
  border: 0;
  border-radius: 12px;
  /* El modulo de CoverManager esta tematizado en oscuro: fondo a juego para cargar sin destello */
  background: var(--negro-3);
}
.reserva-red {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--negro-2);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 1.3rem 1.5rem;
}
.reserva-red p { color: var(--texto-2); max-width: 46ch; }
.reserva-red strong { color: var(--texto); }
.reserva-acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Aviso de alérgenos */
.carta-alergenos {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  color: var(--texto-2);
  font-size: 0.92rem;
  background: var(--negro-2);
}
.carta-alergenos strong { color: var(--texto); }

/* =============================================================
   14. Burgers estilo street shots (tarjetas + modal)
   ============================================================= */
.oculto-accesible {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.burger-shots { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .burger-shots { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .burger-shots { grid-template-columns: repeat(3, 1fr); } }

.burger-shot {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: 22px;
  padding: 1.35rem 1.35rem 1.3rem;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.burger-shot-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  margin-bottom: 1.05rem;
  overflow: hidden;
  border-radius: 12px;
  background: var(--negro);
}
.burger-shot-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.burger-shot-desc {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 2.4rem 1.1rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--texto);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.94) 34%);
  transform: translateY(103%);
  transition: transform 0.5s var(--ease-out);
}
.burger-shot h3 { font-size: 1.45rem; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.burger-shot .plato-precio { margin-top: 0.4rem; padding-top: 0; }
.burger-shot-toca { display: none; }
.burger-shot-abrir {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 22px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .burger-shot:hover {
    transform: scale(1.04);
    border-color: transparent;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(232, 48, 133, 0.6), 0 0 36px rgba(232, 48, 133, 0.22);
    z-index: 2;
  }
  .burger-shot:hover .burger-shot-media img { transform: scale(1.06); }
  .burger-shot:hover .burger-shot-desc { transform: translateY(0); }
}
@media (hover: none) {
  .burger-shot-toca {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--texto-3);
  }
}

/* Modal de burger */
.burger-modal {
  /* margin auto: el reset global lo anula y el dialog perderia el centrado nativo */
  margin: auto;
  border: 1px solid var(--linea);
  border-radius: 24px;
  background: var(--negro-2);
  color: var(--texto);
  padding: 0;
  width: min(920px, calc(100vw - 1.5rem));
  max-height: min(92vh, 92dvh);
  overflow-y: auto;
}
.burger-modal::backdrop {
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.burger-modal[open] { animation: modal-entra 0.35s var(--ease-out); }
@keyframes modal-entra {
  from { opacity: 0; transform: scale(0.94) translateY(14px); }
}
.burger-modal-int { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .burger-modal-int { grid-template-columns: 1.05fr 1fr; } }
.burger-modal-foto {
  position: relative;
  min-height: 280px;
  background: var(--negro);
}
.burger-modal-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.burger-modal-texto {
  padding: 2.2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.burger-modal-texto h3 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.burger-modal-desc { color: var(--texto-2); line-height: 1.65; }
.burger-modal .precio-cifra { font-size: 2.1rem; }
.burger-modal-nota { font-size: 0.8rem; color: var(--texto-3); }
.burger-modal-acciones {
  margin-top: auto;
  padding-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.burger-modal-cerrar, .modal-cerrar {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 2;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--texto);
  font-size: 1.05rem;
  transition: color 0.3s, border-color 0.3s, transform 0.35s var(--ease-out);
}
.burger-modal-cerrar:hover, .modal-cerrar:hover { color: var(--rosa); border-color: var(--rosa); transform: rotate(90deg); }
@media (max-width: 759px) {
  .burger-modal-foto { min-height: 220px; }
  .burger-modal-texto { padding: 1.6rem 1.4rem 1.6rem; }
}

/* =============================================================
   15. Página de contacto
   ============================================================= */
.contacto-grid { display: grid; gap: 1.25rem; }
@media (min-width: 960px) {
  .contacto-grid { grid-template-columns: 5fr 7fr; align-items: stretch; }
}
.contacto-tarjetas { display: grid; gap: 1.25rem; align-content: start; }
.contacto-tarjeta {
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 1.5rem 1.5rem 1.4rem;
}
.contacto-tarjeta h3 { font-size: 1.2rem; letter-spacing: 0.06em; margin-bottom: 0.55rem; }
.contacto-tarjeta p { color: var(--texto-2); }
.contacto-tarjeta strong { color: var(--texto); font-weight: 600; }
.contacto-dato {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  letter-spacing: 0.03em;
  color: var(--texto);
  transition: color 0.3s;
}
a.contacto-dato:hover { color: var(--rosa); }
.contacto-acciones { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Mapa en dos pasos (privacidad: Google solo carga si se pide) */
.mapa-marco {
  position: relative;
  min-height: 420px;
  height: 100%;
  border: 1px solid var(--linea);
  border-radius: 20px;
  overflow: hidden;
  background: var(--negro-3);
}
.mapa-placeholder, .embed-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  text-align: center;
  padding: 2rem;
}
.mapa-placeholder::before, .embed-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("imagenes/web/patron-300.webp") repeat;
  background-size: 150px;
  opacity: 0.03;
  pointer-events: none;
}
.mapa-pin {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--degradado);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 12px 32px rgba(232, 48, 133, 0.4);
}
.mapa-placeholder p, .embed-placeholder p { position: relative; color: var(--texto-2); max-width: 36ch; }
.mapa-placeholder .mapa-nota, .embed-placeholder .mapa-nota { font-size: 0.74rem; color: var(--texto-3); max-width: 44ch; }
.mapa-marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 959px) { .mapa-marco { min-height: 320px; } }

/* Horario en tarjetas */
.horario-tarjetas { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .horario-tarjetas { grid-template-columns: 1fr 1fr; } }
.horario-tarjeta {
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 1.7rem 1.6rem;
}
.horario-tarjeta h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.horario-tarjeta ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; color: var(--texto-2); }
.horario-tarjeta li strong { color: var(--texto); font-weight: 600; }
.horario-cerrado { margin-top: 1.4rem; color: var(--texto-3); }

/* =============================================================
   19. Pedir a domicilio: botón de cabecera, barra móvil y modal
   ============================================================= */
.cabecera .btn-pedir { display: none; font-size: 0.86rem; padding: 0.7rem 1.25rem; }
@media (min-width: 960px) { .cabecera .btn-pedir { display: inline-flex; } }

/* Barra fija inferior, solo móvil. Oculta hasta pasar la portada para no
   tapar los controles del carrusel; la enseña main.js con .is-visible */
.barra-acciones {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 85;
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 0.6rem;
  padding: 0.6rem var(--pad) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--linea);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease-out);
}
.barra-acciones.is-visible { transform: none; }
.barra-acciones .btn { padding: 0.85rem 1rem; font-size: 0.98rem; }
.barra-acciones .btn-fantasma { border-color: rgba(255, 255, 255, 0.35); }
@media (min-width: 960px) { .barra-acciones { display: none; } }

/* Modal Pedir */
.pedir-modal {
  margin: auto;
  border: 1px solid var(--linea);
  border-radius: 24px;
  background: var(--negro-2);
  color: var(--texto);
  padding: 2.4rem 2rem 2rem;
  width: min(520px, calc(100vw - 1.5rem));
  max-height: min(92vh, 92dvh);
  overflow-y: auto;
}
.pedir-modal::backdrop {
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pedir-modal[open] { animation: modal-entra 0.35s var(--ease-out); }
.pedir-modal h3 { font-size: clamp(2rem, 6vw, 2.8rem); margin-top: 0.5rem; }
.pedir-nota { margin-top: 0.8rem; color: var(--texto-2); }
.pedir-opciones { margin-top: 1.6rem; display: grid; gap: 0.8rem; }
.pedir-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  border: 1px solid var(--linea);
  background: var(--negro-3);
  transition: border-color 0.3s, transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.pedir-opcion:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
.pedir-opcion span:last-child { color: var(--texto-2); font-size: 0.9rem; font-weight: 600; }
.pedir-logo {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.45rem 0.75rem 0.35rem;
  border-radius: 8px;
  color: var(--negro);
}
.pedir-logo--glovo { background: #FFC244; }
.pedir-logo--uber { background: #06C167; }
.pedir-pie { margin-top: 1.4rem; font-size: 0.86rem; color: var(--texto-3); }
.pedir-pie a { color: var(--texto); border-bottom: 1px solid var(--rosa); transition: color 0.3s; }
.pedir-pie a:hover { color: var(--rosa); }
@media (max-width: 479px) { .pedir-modal { padding: 2.2rem 1.4rem 1.6rem; } }

/* =============================================================
   20. Página Nosotros
   ============================================================= */
.nos-entradilla { margin-top: 1.6rem; max-width: 52ch; color: var(--texto-2); font-size: 1.08rem; }
.nos-foto {
  position: relative;
  height: clamp(320px, 62vh, 680px);
  overflow: hidden;
  border-block: 1px solid var(--linea);
}
.nos-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.nos-foto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 32%, transparent 68%, rgba(0, 0, 0, 0.75));
  pointer-events: none;
}
.nos-foto-pie {
  position: absolute;
  left: 0; right: 0; bottom: 1.4rem;
  z-index: 1;
  padding-inline: var(--pad);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.nos-alterna { background: var(--negro-2); border-block: 1px solid var(--linea); }
.nos-titulo { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-top: 0.6rem; max-width: 18ch; }

.nos-historia-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .nos-historia-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.nos-historia-texto p { color: var(--texto-2); font-size: 1.05rem; line-height: 1.7; }
.nos-historia-texto p + p { margin-top: 1.2rem; }
.nos-historia-texto strong { color: var(--texto); font-weight: 600; }

.nos-pilares-foto { margin: 2.2rem 0 0; border-radius: 22px; overflow: hidden; aspect-ratio: 2 / 1; background: var(--negro-3); border: 1px solid var(--linea); }
.nos-pilares-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }
@media (max-width: 640px) { .nos-pilares-foto { aspect-ratio: 4 / 3; } }
.nos-pilares-grid { margin-top: 2.6rem; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .nos-pilares-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nos-pilares-grid { grid-template-columns: repeat(4, 1fr); } }
.nos-pilar {
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 1.8rem 1.5rem 1.6rem;
  transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.nos-pilar:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 48, 133, 0.4);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}
.nos-pilar-num {
  display: block;
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--amarillo);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .nos-pilar-num, .nos-cifra strong {
    background: var(--degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.nos-pilar h3 { margin-top: 0.9rem; font-size: 1.45rem; }
.nos-pilar p { margin-top: 0.6rem; color: var(--texto-2); font-size: 0.95rem; }

.nos-cita blockquote { max-width: 36ch; margin: 0 auto; text-align: center; }
.nos-cita blockquote p {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  line-height: 1.05;
  text-wrap: balance;
}
.nos-cita blockquote p .txt-degradado { display: inline; }
.nos-cita footer {
  margin-top: 1.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.nos-equipo-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .nos-equipo-grid { grid-template-columns: 1fr 1fr; } }
.nos-equipo-media {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--linea);
  aspect-ratio: 4 / 3;
  background: var(--negro-3);
}
.nos-equipo-media img { width: 100%; height: 100%; object-fit: cover; }
.nos-equipo-texto p { margin-top: 1.1rem; color: var(--texto-2); font-size: 1.05rem; }
.nos-equipo-texto a { color: var(--texto); border-bottom: 1px solid var(--rosa); transition: color 0.3s; }
.nos-equipo-texto a:hover { color: var(--rosa); }

.nos-cifras { margin-top: 2.6rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .nos-cifras { grid-template-columns: repeat(4, 1fr); } }
.nos-cifra {
  text-align: center;
  padding: 1.6rem 1rem 1.4rem;
  border: 1px solid var(--linea);
  border-radius: 20px;
  background: var(--negro-3);
}
.nos-cifra strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--amarillo);
}
.nos-cifra span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* Pedir: ajustes finos */
.pedir-logo { white-space: nowrap; }
.pedir-opcion span:last-child { white-space: nowrap; }
/* Que la barra móvil no tape los enlaces legales al final de la página */
@media (max-width: 959px) {
  body:has(.barra-acciones) .pie { padding-bottom: 76px; }
}

/* =============================================================
   21. Home brand film: portada con video, manifiesto, carril de burgers, lista de carta, terraza, resenas
   ============================================================= */

/* --- Portada --- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--negro);
  display: flex;
  align-items: flex-end;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-media video { opacity: 0; transition: opacity 1.2s var(--ease-soft); }
.hero-media.con-video video { opacity: 1; }
.hero-media.sin-video img { animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1%); }
}
.hero-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 32%, rgba(0, 0, 0, 0.25) 58%, rgba(0, 0, 0, 0.9) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 60%);
}
.hero-int {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: calc(3.5vw + 4.6rem);
}
@keyframes hero-in { from { opacity: 0; transform: translateY(28px); } }
.hero-kicker { color: var(--texto); animation: hero-in 0.9s var(--ease-out) 0.1s both; }
.hero-titulo {
  margin-top: 0.6rem;
  font-size: clamp(3.6rem, 9vw, 8.2rem); /* "hecha con cabeza" cabe en una línea en el contenedor de 1200px */
  line-height: 0.88;
  letter-spacing: -0.005em;
}
.hero-linea { display: block; animation: hero-in 1s var(--ease-out) both; }
.hero-linea:nth-child(2) { animation-delay: 0.2s; }
.hero-sub {
  margin-top: 1.4rem;
  max-width: 40ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--texto);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
  animation: hero-in 0.9s var(--ease-out) 0.4s both;
}
.hero-acciones {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  animation: hero-in 0.9s var(--ease-out) 0.5s both;
}
.hero-estado {
  margin-top: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
  animation: hero-in 0.9s var(--ease-out) 0.6s both;
}
.hero-estado::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rosa);
}
.hero-estado.is-abierto::before {
  background: #3DDC84;
  animation: latido 1.8s ease-out infinite;
}
@keyframes latido {
  from { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); }
  to   { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); }
}
.hero-scroll {
  position: absolute;
  right: var(--pad);
  bottom: calc(3.5vw + 1rem);
  z-index: 2;
  width: 28px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  display: none;
}
.hero-scroll span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--blanco);
  animation: rueda 1.8s ease-in-out infinite;
}
@keyframes rueda { 50% { transform: translateY(16px); opacity: 0.2; } }
@media (min-width: 960px) { .hero-scroll { display: block; } }

/* --- Manifiesto en grande, palabra a palabra --- */
.manifiesto { padding-top: clamp(6rem, 12vw, 9rem); }
.manifiesto-texto {
  margin-top: 1.4rem;
  max-width: 20ch;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.manifiesto-texto .palabra { display: inline-block; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .manifiesto-texto .txt-degradado .palabra {
    background: var(--degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.manifiesto-nota { font-size: 1.05rem; }

/* --- Carril de burgers --- */
.shots {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
  background: var(--negro);
  overflow: hidden;
}
.shots-cab { margin-bottom: 1.6rem; }
.shots-cab h2 { font-size: clamp(2.3rem, 5vw, 4.2rem); margin-top: 0.4rem; max-width: 12ch; }
.shots-nota {
  margin-top: 0.9rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.shots-viewport {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shots-viewport::-webkit-scrollbar { display: none; }
.shots-pista {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  padding-inline: var(--pad);
  width: max-content;
}
/* Escritorio: rejilla de tres en tres. El carril horizontal se queda para el
   movil, donde se arrastra con el dedo. */
@media (min-width: 960px) {
  .shots-viewport { overflow: visible; }
  .shots-pista {
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-inline: var(--pad);
    max-width: var(--max);
    margin-inline: auto;
  }
}
.shot {
  position: relative;
  flex: 0 0 auto;
  width: min(74vw, 520px);
  aspect-ratio: 3 / 2;
  border-radius: 22px;
  overflow: hidden;
  background: var(--negro-3);
  scroll-snap-align: start;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
@media (min-width: 960px) {
  .shot { width: auto; }
  /* La tarjeta final cierra la rejilla ocupando la fila entera */
  .shot--final { grid-column: 1 / -1; aspect-ratio: auto; min-height: 190px; }
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}
.shot-info {
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  bottom: 1.1rem;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.shot-info strong {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.shot-info span {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--amarillo);
  white-space: nowrap;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .shot-info span { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
@media (hover: hover) and (pointer: fine) {
  .shot:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(232, 48, 133, 0.5); }
  .shot:hover img { transform: scale(1.06); }
}
.shot--final {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea);
  background: var(--negro-2);
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
  text-align: center;
  transition: border-color 0.3s, transform 0.45s var(--ease-out);
}
.shot--final::after { display: none; }
.shot--final:hover { border-color: var(--rosa); }

/* --- Lista tipografica de la carta --- */
.lista-cats {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--linea);
}
.lista-cats li { border-bottom: 1px solid var(--linea); }
.lista-cats a {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem 1fr 92px;
  grid-template-areas:
    "num nombre img"
    "num frase img";
  align-items: center;
  column-gap: 0.8rem;
  row-gap: 0.3rem;
  padding: 1.1rem 0;
  transition: padding-left 0.4s var(--ease-out);
}
.lista-num {
  grid-area: num;
  align-self: start;
  padding-top: 0.5rem;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--texto-3);
}
.lista-nombre {
  grid-area: nombre;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5.4vw, 4.4rem);
  line-height: 0.95;
  transition: color 0.3s;
}
.lista-frase {
  grid-area: frase;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.lista-img {
  grid-area: img;
  width: 92px;
  height: auto;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.6));
}
@media (min-width: 960px) {
  .lista-cats a {
    grid-template-columns: 3.5rem 1fr auto;
    grid-template-areas: "num nombre frase";
    padding: 1.4rem 0;
  }
  .lista-num { align-self: center; padding-top: 0; }
  .lista-frase { text-align: right; max-width: 24ch; font-size: 0.8rem; }
  .lista-img { display: none; }
  .lista-cats a:hover { padding-left: 1rem; }
  .lista-cats a:hover .lista-frase { color: var(--texto-2); }
  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .lista-cats a:hover .lista-nombre {
      background: var(--degradado);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
}

/* --- La terraza: foto/video a sangre con parallax --- */
.ambiente {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--negro);
  border-block: 1px solid var(--linea);
}
.ambiente-media {
  position: absolute;
  left: 0;
  right: 0;
  top: -15%;
  height: 130%;
}
.ambiente-media img,
.ambiente-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ambiente-media video { opacity: 0; transition: opacity 1.2s var(--ease-soft); }
.ambiente-media.con-video video { opacity: 1; }
.ambiente::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.88) 100%);
}
.ambiente-int {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.ambiente-int h2 { font-size: clamp(2.3rem, 6vw, 5rem); max-width: 12ch; margin-top: 0.5rem; }
.ambiente-int p:not(.kicker) { margin-top: 1rem; max-width: 42ch; color: var(--texto); }
.ambiente-int .btn { margin-top: 1.6rem; }

/* --- Resenas: resumen + carril --- */
.resenas-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .resenas-grid { grid-template-columns: minmax(280px, 1fr) 2fr; align-items: start; }
}
.resenas-carril-wrap { min-width: 0; }
.resenas-resumen h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 0.6rem; }
.resenas-nota-grande { margin-top: 1.2rem; display: flex; align-items: baseline; gap: 0.8rem; }
.resenas-nota-grande strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.2rem, 7vw, 5.4rem);
  line-height: 1;
  color: var(--amarillo);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .resenas-nota-grande strong { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .resena-estrellas .media {
    background: linear-gradient(90deg, var(--amarillo) 50%, rgba(255, 255, 255, 0.22) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.resenas-nota-grande .resena-estrellas { font-size: 1.3rem; }
.resenas-sub { margin-top: 0.9rem; color: var(--texto-2); max-width: 32ch; }
.resenas-resumen .btn { margin-top: 1.4rem; }
.flecha-circular {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.45);
  color: var(--blanco);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, background-color 0.3s;
}
.flecha-circular:hover { border-color: var(--rosa); background: rgba(0, 0, 0, 0.7); }

/* --- Musica: titulo sin estilos en linea --- */
.musica h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-top: 0.4rem; }

/* =============================================================
   22. Novedades (destacada + tarjetas) y prensa en Nosotros
   ============================================================= */
.destacada {
  display: grid;
  gap: 0;
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: 24px;
  overflow: hidden;
}
@media (min-width: 900px) { .destacada { grid-template-columns: 1.1fr 1fr; } }
.destacada-texto {
  padding: clamp(1.8rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.destacada-texto h2 { font-size: clamp(2.1rem, 4.8vw, 3.8rem); max-width: 12ch; }
.destacada-texto p { color: var(--texto-2); max-width: 44ch; }
.destacada-nota { font-size: 0.95rem; border-left: 3px solid var(--rosa); padding-left: 1rem; }
.destacada-nota strong { color: var(--texto); font-weight: 600; }
.destacada-acciones { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.destacada-media {
  position: relative;
  min-height: 280px;
  background: var(--degradado);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.destacada-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("imagenes/web/patron-300.webp") repeat;
  background-size: 150px;
  opacity: 0.14;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.destacada-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destacada-pronto {
  position: relative;
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--negro);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.9;
  text-align: center;
  transform: rotate(-6deg);
}
.destacada-pronto small { display: block; font-size: 0.26em; letter-spacing: 0.3em; margin-bottom: 0.6em; }

.novedades-grid { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .novedades-grid { grid-template-columns: repeat(2, 1fr); } }
.novedad {
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 1.7rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}
.novedad:hover { transform: translateY(-5px); border-color: rgba(232, 48, 133, 0.4); }
.novedad-etiqueta {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amarillo);
}
.novedad h3 { font-size: 1.6rem; }
.novedad p { color: var(--texto-2); font-size: 0.95rem; }
.novedad-pie { margin-top: auto; padding-top: 0.6rem; }
.novedad-pie a, .novedad-pie button {
  font-weight: 600;
  border-bottom: 1px solid var(--rosa);
  transition: color 0.3s;
}
.novedad-pie a:hover, .novedad-pie button:hover { color: var(--rosa); }

.banda-ig { background: var(--negro-2); border-block: 1px solid var(--linea); }
.banda-ig-int { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.banda-ig h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 16ch; }
.banda-ig p { color: var(--texto-2); max-width: 44ch; margin-top: 0.6rem; }
@media (min-width: 960px) {
  .banda-ig-int { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Nosotros: donde nos han visto */
.nos-prensa { list-style: none; padding: 0; margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 720px) { .nos-prensa { grid-template-columns: repeat(3, 1fr); } }
.nos-prensa li {
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 1.3rem 1.4rem;
  background: var(--negro-3);
}
.nos-prensa strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1;
}
.nos-prensa span {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* Selector de idioma (ES / CA) */
.cabecera-nav a.cabecera-idioma {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  color: var(--texto-2);
  transition: color 0.3s, border-color 0.3s;
}
.cabecera-nav a.cabecera-idioma::after { display: none; }
.cabecera-nav a.cabecera-idioma:hover { color: var(--blanco); border-color: rgba(232, 48, 133, 0.5); }
.menu-movil-idioma { font-weight: 600; color: var(--texto-2); }

/* =============================================================
   23. Fidelizacion (programa de puntos de Square)
   ============================================================= */
.club { background: var(--negro-2); border-block: 1px solid var(--linea); overflow: hidden; }
.club-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .club-grid { grid-template-columns: 1.1fr 1fr; } }
.club-texto h2 { font-size: clamp(2.1rem, 5vw, 4rem); margin-top: 0.5rem; max-width: 12ch; }
.club-texto p:not(.kicker) { margin-top: 1rem; color: var(--texto-2); max-width: 44ch; }
.club-acciones { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.club-tarjeta {
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
  aspect-ratio: 1.586;
  border-radius: 22px;
  background: var(--degradado);
  color: var(--negro);
  padding: 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  transform: rotate(-4deg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(232, 48, 133, 0.25);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out);
}
.club-tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("imagenes/web/patron-300.webp") repeat;
  background-size: 140px;
  opacity: 0.12;
  mix-blend-mode: multiply;
}
.club-tarjeta > * { position: relative; }
.club-tarjeta-marca { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.club-tarjeta-cifra { margin-top: auto; font-family: var(--display); font-size: clamp(5rem, 14vw, 8rem); line-height: 0.85; }
.club-tarjeta-texto { margin-top: 0.3rem; font-family: var(--display); text-transform: uppercase; font-size: clamp(1.1rem, 2.6vw, 1.5rem); line-height: 1; }
.club-tarjeta-pie { margin-top: 1rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
@media (hover: hover) { .club:hover .club-tarjeta { transform: rotate(-2deg) translateY(-6px); } }

/* =============================================================
   24. Paginas legales (aviso legal, privacidad, cookies)
   ============================================================= */
.legal { max-width: 52rem; padding-block: clamp(1rem, 3vw, 2rem) clamp(4rem, 8vw, 6rem); }
.legal .actualizado { color: var(--texto-3); font-size: 0.88rem; margin-bottom: 2.2rem; }
.legal h2 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  margin: 2.6em 0 0.7em;
  padding-top: 1.1em;
  border-top: 1px solid var(--linea);
}
.legal h3 { font-size: 1.15rem; letter-spacing: 0.04em; margin: 1.8em 0 0.5em; }
.legal p, .legal li { color: var(--texto-2); margin: 0 0 1em; }
.legal strong { color: var(--texto); font-weight: 600; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal ul.datos { list-style: none; padding: 0; }
.legal ul.datos li { margin-bottom: 0.45em; }
.legal a { color: var(--texto); border-bottom: 1px solid var(--rosa); transition: color 0.3s; }
.legal a:hover { color: var(--rosa); }
.legal .tabla-scroll { overflow-x: auto; margin: 0 0 1.5em; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.legal th, .legal td { border: 1px solid var(--linea); padding: 0.6em 0.75em; text-align: left; vertical-align: top; color: var(--texto-2); }
.legal th { background: var(--negro-3); color: var(--texto); font-weight: 600; }
.legal mark.pendiente { background: var(--amarillo); color: var(--negro); padding: 0.1em 0.4em; border-radius: 4px; font-weight: 600; }
.legal-pie { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); font-size: 0.88rem; color: var(--texto-3); }
.legal-pie a { display: inline-block; margin: 0 1.2em 0.4em 0; }

/* =============================================================
   25. Numeros en Anton: la UT Bagh Display (demo) no trae digitos
   ============================================================= */
.precio-cifra, .carta-num, .lista-num, .nos-pilar-num, .nos-cifra strong,
.resenas-nota-grande strong, .shot-info span, .club-tarjeta-cifra { font-family: var(--display-num); }

/* =============================================================
   26. Scroll suave (Lenis) y tarjetas con relieve.
   Todo se activa desde main.js solo en escritorio con ratón; el scroll
   suave se apaga además con "reducir movimiento".
   ============================================================= */

/* --- Lenis (scroll suave). Anula el scroll-behavior nativo mientras manda Lenis --- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- Tarjetas con relieve: GSAP lleva el transform, la CSS solo el borde y la sombra --- */
.plato.is-tilt, .burger-shot.is-tilt { transition-property: border-color, box-shadow; transform-style: preserve-3d; }
.plato.is-tilt img { transition-property: filter; }



/* =============================================================
   27. Grupos y eventos: rejilla de tarjetas. Reutiliza .contacto-tarjeta,
   que en contacto.html va en una sola columna porque comparte fila con el mapa.
   ============================================================= */
.tarjetas-rejilla { margin-top: 2.4rem; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .tarjetas-rejilla { grid-template-columns: repeat(2, 1fr); } }

/* =============================================================
   28. Nosotros: línea temporal de tres capítulos y cinco pilares
   ============================================================= */
.nos-linea { margin-top: 2.6rem; display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .nos-linea { grid-template-columns: repeat(3, 1fr); } }
.nos-linea .nos-pilar-num { font-size: 1.7rem; }
.nos-pilares-grid--5 { grid-template-columns: 1fr; }
@media (min-width: 640px) and (max-width: 759px) {
  .nos-pilares-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .nos-pilares-grid--5 > :last-child { grid-column: span 2; }
}
@media (min-width: 760px) { .nos-pilares-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .nos-pilares-grid--5 { grid-template-columns: repeat(5, 1fr); } }

/* Foto grande de Nosotros con el equipo: la banda toma la proporcion exacta de la
   foto (encuadre ancho en ordenador, 4:3 en movil), asi el navegador no recorta nada */
.nos-foto--equipo { height: auto; aspect-ratio: 2.4 / 1; }
.nos-foto--equipo img { object-position: center; }
@media (max-width: 640px) { .nos-foto--equipo { aspect-ratio: 4 / 3; } }

/* =============================================================
   29. Portada: intro de marca, entrada del titular, carrusel de apartados
   y NUEVE gigante. Elegido por Ivan el 15/9/2026 (propuestas 1 y 7).
   ============================================================= */

/* --- Intro: VIBRA como ventana a la burger. Una vez por sesión; ?intro la repite --- */
.intro { position: fixed; inset: 0; z-index: 20000; background: #000; display: grid; place-items: center; overflow: hidden; }
html.sin-intro .intro { display: none; }
.intro-palabra {
  font-family: var(--display);
  font-size: clamp(7rem, 34vw, 44rem);
  line-height: 0.85;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  background-image: url("imagenes/web/burger-abierta.webp");
  background-size: 130% auto;
  background-position: 50% 30%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: transform, opacity;
}
.intro-onda { position: absolute; width: 46vw; max-width: 720px; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.intro-onda--naranja { left: -6vw; top: 18vh; }
.intro-onda--rosa { right: -6vw; bottom: 14vh; }

/* --- Entrada del titular: GSAP la lleva; sin JS queda la animación CSS de siempre --- */
html.js .hero-linea, html.js .hero-kicker, html.js .hero-sub, html.js .hero-acciones, html.js .hero-estado { animation: none; }
.hero-mascara { display: block; overflow: hidden; padding: 0.16em 0 0.1em; margin: -0.16em 0 -0.1em; }

/* --- Carrusel de apartados: cada diapositiva ocupa toda la portada --- */
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.9s var(--ease-soft), visibility 0s 0.9s; }
.hero-slide.is-activa { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.9s var(--ease-soft), visibility 0s; }
.hero-slide .hero-int { width: 100%; }
@media (min-width: 960px) { .hero-slide:first-child .hero-poster { object-position: left center; } }
.hero-slide.is-activa .hero-media img { animation: kenburns 24s ease-in-out infinite alternate; }
.hero-slide.is-activa .hero-media.con-video img { animation: none; }
p.hero-titulo { margin-bottom: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; text-wrap: balance; }

.hero-control { position: absolute; left: var(--pad); bottom: calc(3.5vw + 1rem); z-index: 3; display: flex; align-items: center; gap: 0.7rem; }
.hero-puntos { display: flex; gap: 0.4rem; }
.hero-punto { position: relative; width: 36px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.28); cursor: pointer; overflow: hidden; }
.hero-punto::after { content: ""; position: absolute; inset: 0; background: var(--degradado); transform: scaleX(0); transform-origin: left; }
.hero-punto.is-activa::after { animation: hero-progreso var(--hero-dur, 6.5s) linear forwards; }
.hero.is-pausado .hero-punto.is-activa::after { animation-play-state: paused; }
.hero-punto:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }
@keyframes hero-progreso { to { transform: scaleX(1); } }
.hero-flecha { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.3); color: var(--blanco); display: grid; place-items: center; font-size: 1.1rem; line-height: 1; transition: border-color 0.3s, background 0.3s; }
.hero-flecha:hover { border-color: var(--blanco); background: rgba(0, 0, 0, 0.5); }
.hero-flecha:focus-visible { outline: 2px solid var(--blanco); outline-offset: 2px; }
@media (max-width: 720px) {
  .hero-control { bottom: calc(6vw + 1.6rem); }
  .hero-flecha { display: none; }
  .hero-punto { width: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-activa { transition: none; }
  .hero-punto.is-activa::after { animation: none; transform: scaleX(1); }
}

/* --- NUEVE gigante con la foto dentro --- */
.gigante {
  font-family: var(--display);
  font-size: clamp(4.2rem, 21vw, 19rem); /* "Burgers." mide 3,92 em: así cabe en el contenedor a cualquier ancho */
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  background-size: 118% auto;
  background-position: 50% 40%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0.12em 0 0.05em -0.02em;
  user-select: none;
}
.shots-cab h2 { margin-top: 0.2rem; }

/* =============================================================
   30. Contraste: secciones que alternan papel y negro, con cortes en
   diagonal. Una sección con la clase "claro" remapea los tokens de color en
   su ámbito y todo lo que hay dentro (tarjetas, líneas, textos) se adapta.
   ============================================================= */
.claro {
  --negro: #F5F2EE;
  --negro-2: #F5F2EE;
  --negro-3: #FFFFFF;
  --texto: #171215;
  --texto-2: rgba(23, 18, 21, 0.72);
  --texto-3: rgba(23, 18, 21, 0.5);
  --linea: rgba(23, 18, 21, 0.14);
  --blanco: #171215;
  --corte: 3.5vw;
  position: relative;
  z-index: 1;
  background: var(--negro);
  color: var(--texto);
  border-block: 0;
  clip-path: polygon(0 0, 100% var(--corte), 100% 100%, 0 calc(100% - var(--corte)));
  margin-top: calc(-1 * var(--corte));
  margin-bottom: calc(-1 * var(--corte));
  padding-top: calc(clamp(4rem, 9vw, 7.5rem) + var(--corte));
  padding-bottom: calc(clamp(4rem, 9vw, 7.5rem) + var(--corte));
}
@media (max-width: 720px) { .claro { --corte: 6vw; } }
.claro.manifiesto { padding-top: calc(clamp(6rem, 12vw, 9rem) + var(--corte)); }
.carta-seccion.claro { padding-top: calc(clamp(3.2rem, 7vw, 5.5rem) + var(--corte)); padding-bottom: calc(clamp(3.2rem, 7vw, 5.5rem) + var(--corte)); }
.claro + .claro { margin-top: 0; }

/* El degradado de marca, en tinta más oscura para que aguante sobre papel */
.claro .txt-degradado { background: linear-gradient(90deg, #B85B04, #C81C6C); -webkit-background-clip: text; background-clip: text; }
.claro .btn-fantasma { border-color: rgba(23, 18, 21, 0.4); color: var(--texto); }
.claro .btn-fantasma:hover { background: rgba(23, 18, 21, 0.06); }
.claro .btn-negro { background: #171215; color: #F5F2EE; }
.claro .resena, .claro .musica-tarjeta, .claro .club-tarjeta, .claro .plato, .claro .nos-pilar, .claro .contacto-tarjeta, .claro .novedad, .claro .burger-shot { background: #FFFFFF; border: 1px solid var(--linea); box-shadow: 0 10px 30px rgba(23, 18, 21, 0.06); }
.claro .flecha-circular { border-color: rgba(23, 18, 21, 0.3); background: #FFFFFF; color: var(--texto); }
.claro .flecha-circular:hover { border-color: var(--rosa); background: rgba(23, 18, 21, 0.06); }
.claro .lista-nombre, .claro .resenas-nota-grande strong { color: var(--texto); }
.claro .manifiesto-texto { font-size: clamp(2.6rem, 7.2vw, 7.5rem); line-height: 0.95; }
.claro .manifiesto-nota { font-size: 1.1rem; }
.claro .burger-shot-desc { color: #F5F2EE; }
.claro .plato--sin-foto { background: linear-gradient(160deg, rgba(232, 48, 133, 0.06), #FFFFFF 45%); }

/* La sección negra que sigue a una clara no lleva borde: el corte ya separa */
.shots, .club, .practica, .carta-seccion { border-block: 0; }

/* Portátiles con poca altura (va al final para ganar a las reglas de portada): el titular
   y los márgenes bajan de tamaño para que nada quede bajo la cabecera */
@media (min-width: 721px) and (max-height: 720px) {
  .hero-int { padding-top: var(--nav-h); }
  .hero-titulo { margin-top: 0.3rem; font-size: clamp(3rem, 7vw, 6.2rem); }
  .hero-sub { margin-top: 0.8rem; font-size: 1.05rem; max-width: 44ch; }
  .hero-acciones { margin-top: 1.3rem; }
  .hero-acciones .btn-grande { padding: 0.95rem 1.8rem; }
  .hero-estado { margin-top: 0.9rem; }
}

/* Antetítulo de la portada en móvil: cabe en una línea ("Hamburguesería · Cappont · Lleida") */
@media (max-width: 720px) {
  .hero-kicker { font-size: 0.7rem; letter-spacing: 0.12em; }
}
/* Móviles estrechos: el titular de cuatro líneas deja aire bajo la cabecera */
@media (max-width: 380px) {
  .hero-titulo { font-size: 3.2rem; }
}

/* Tarjetas de la banda sonora en negro sobre el papel, a juego con el reproductor de Spotify (Ivan, 15/9/2026) */
.claro .musica-tarjeta { --negro: #000000; --negro-2: #0F0D0E; --negro-3: #0F0D0E; --texto: #F5F2EE; --texto-2: rgba(245, 242, 238, 0.72); --texto-3: rgba(245, 242, 238, 0.5); --linea: rgba(255, 255, 255, 0.12); --blanco: #F5F2EE; background: #0F0D0E; color: var(--texto); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 16px 40px rgba(23, 18, 21, 0.18); }
.claro .musica-marco { background: #000000; }

/* Aviso de cookies (15/9/2026): tarjeta abajo a la izquierda; en móvil, por encima de la barra de acciones */
.cookies { position: fixed; left: var(--pad); right: var(--pad); bottom: 1rem; z-index: 90; max-width: 440px; background: #0F0D0E; color: #F5F2EE; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; padding: 0.85rem 1rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(12px); transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft); }
.cookies.is-visible { opacity: 1; transform: none; }
.cookies-texto { font-size: 0.8rem; line-height: 1.35; color: rgba(245, 242, 238, 0.85); }
.cookies-texto a { color: #F5F2EE; text-decoration: underline; text-underline-offset: 3px; }
.cookies-config { margin: 0.9rem 0 0; display: grid; gap: 0.45rem; }
.cookies-opcion { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.84rem; color: rgba(245, 242, 238, 0.85); }
.cookies-opcion input { margin-top: 0.2rem; accent-color: var(--rosa); }
.cookies-botones { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cookies-botones .btn { padding: 0.6rem 0.8rem; font-size: 0.78rem; }
.cookies-enlace { background: none; border: 0; color: rgba(245, 242, 238, 0.75); font: 600 0.8rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0.6rem 0.3rem; min-height: 44px; }
.cookies-enlace:hover { color: #F5F2EE; }
@media (max-width: 720px) { .cookies { left: 0.75rem; right: 0.75rem; max-width: none; bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .cookies { transition: none; } }

/* "Qué es Vibra" en tres tarjetas (Ivan, 15/9/2026) */
.que-es-grid { margin-top: 2.4rem; display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .que-es-grid { grid-template-columns: repeat(3, 1fr); } }
.manifiesto h2 { margin-top: 0.4rem; max-width: 18ch; font-size: clamp(2.2rem, 5vw, 4.4rem); }
.que-es-grid .nos-pilar h3 { font-size: 1.35rem; }
.que-es-grid .nos-pilar p { color: var(--texto); font-size: 1.05rem; }
.que-es-enlace { margin-top: 2rem; }

/* Salsas con foto (15/9/2026): el bote redondo a la izquierda del nombre */
.salsa-chip--foto { display: inline-flex; align-items: center; gap: 0.65rem; padding-left: 0.45rem; }
.salsa-chip--foto img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

/* Página El local (16/9/2026): galerías de fotos y fila invertida */
.local-galeria { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .local-galeria { grid-template-columns: 1fr 1fr; } }
.local-galeria figure { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--negro-3); border: 1px solid var(--linea); }
.local-galeria img { width: 100%; height: 100%; object-fit: cover; }
.local-galeria figcaption { position: absolute; }
.local-galeria figure { position: relative; }
.local-galeria figcaption { left: 1rem; bottom: 0.9rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #F5F2EE; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; }
@media (min-width: 900px) { .local-inversa .nos-equipo-media { order: -1; } }
.local-fila { margin-top: 3rem; }

/* Menú de escritorio con seis entradas (16/9/2026): nada de saltos de línea ni de aplastar el logo; entre 960 y 1199 px, más compacto */
.cabecera-logo { flex-shrink: 0; }
.cabecera-nav a { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1199px) {
  .cabecera-int { gap: 1rem; }
  .cabecera-nav { gap: 1.15rem; }
  .cabecera-nav a { font-size: 0.84rem; letter-spacing: 0.02em; }
  .cabecera-acciones { gap: 0.6rem; }
  .cabecera .btn-reservar, .cabecera .btn-pedir { padding-inline: 1.05rem; }
}

/* Titulares de cabecera largos, como el de Grupos (16/9/2026): menos cuerpo para que quepan en tres o cuatro líneas */
.carta-hero h1.larga { font-size: clamp(2.3rem, 4.8vw, 4.3rem); max-width: 22ch; line-height: 1.02; }

/* Menús de grupos (16/9/2026): dos tarjetas con el cartel de Instagram al lado */
#menu { scroll-margin-top: calc(var(--nav-h) + 24px); }
.menu-grupos { margin-top: 2.4rem; display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .menu-grupos { grid-template-columns: 1fr 1fr; } }
.menu-tarjeta { background: var(--negro-2); border: 1px solid var(--linea); border-radius: 22px; padding: 1.6rem 1.5rem; display: grid; gap: 1.4rem; align-items: start; }
@media (min-width: 560px) { .menu-tarjeta { grid-template-columns: 1fr 150px; } }
.menu-tarjeta-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; }
.menu-tarjeta h3 { font-size: clamp(1.8rem, 3vw, 2.3rem); letter-spacing: 0.02em; }
.menu-precio { margin: 0; display: flex; align-items: baseline; gap: 0.45rem; }
.menu-precio .precio-cifra { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.menu-pax { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.menu-lista { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.menu-lista li { display: grid; gap: 0.15rem; padding-top: 0.85rem; border-top: 1px solid var(--linea); }
.menu-lista li:first-child { padding-top: 0; border-top: 0; }
.menu-lista strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.15rem; }
.menu-lista span { color: var(--texto-2); font-size: 0.95rem; }
.menu-nota { margin-top: 1.1rem; font-size: 0.85rem; font-weight: 600; color: var(--texto-2); }
.menu-cartel { display: block; width: 150px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); justify-self: end; transition: transform 0.3s var(--ease-out), border-color 0.3s; }
.menu-cartel:hover { transform: translateY(-3px); border-color: var(--rosa); }
.menu-cartel img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 559px) { .menu-cartel { justify-self: start; } }

/* Horario de respuesta en las tarjetas de contacto (16/9/2026): en pequeño, como pidió Ivan */
.contacto-tarjeta p.practica-nota { margin-top: 0.35rem; font-size: 0.8rem; color: var(--texto-3); }

/* Archivo de novedades (16/9/2026): carril de tarjetas verticales, formato Instagram */
.archivo-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.archivo-cab > div:first-child > p:not(.kicker) { margin-top: 0.8rem; color: var(--texto-2); max-width: 52ch; }
.archivo-controles { display: flex; gap: 0.6rem; }
.archivo-carril { margin-top: 2rem; display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.25rem 0 0.75rem; scrollbar-width: none; }
.archivo-carril::-webkit-scrollbar { display: none; }
.archivo-item { flex: 0 0 min(280px, 72vw); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--negro-3); border: 1px solid var(--linea); border-radius: 20px; overflow: hidden; }
.claro .archivo-item { background: #FFFFFF; box-shadow: 0 10px 30px rgba(23, 18, 21, 0.06); }
.archivo-media { position: relative; aspect-ratio: 9 / 16; background: #0F0D0E; }
.archivo-media img, .archivo-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.archivo-media video { opacity: 0; transition: opacity 0.5s var(--ease-soft); }
.archivo-media video.is-playing { opacity: 1; }
.archivo-pie { padding: 1rem 1.1rem 1.15rem; display: grid; gap: 0.3rem; }
.archivo-etiqueta { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-3); }
.archivo-pie h3 { font-size: 1.35rem; }
.archivo-pie p:not(.archivo-etiqueta) { color: var(--texto-2); font-size: 0.9rem; }
@media (max-width: 720px) { .archivo-controles { display: none; } }

/* Cierre del bloque de burgers (17/9/2026): sustituye a la lista de la carta en la portada */
.shots-cierre { margin-top: 2.4rem; display: flex; align-items: center; gap: 1rem 1.6rem; flex-wrap: wrap; }
.shots-cierre h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1; }
/* solo la punta, grande y en degradado (opción 5 de Ivan) */
.shots-flecha { display: block; flex: 0 0 auto; width: 84px; height: 46px; fill: none; stroke: url(#flecha-grad); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) {
  .shots-cierre { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .shots-flecha { transform: rotate(90deg); margin: 1.1rem 0 1.1rem 0.2rem; }
}

/* Barra fina encima de la cabecera (17/9/2026): la calle y el Instagram. Oculta en móvil. */
.barra-superior { position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: var(--barra-h); background: #0A0809; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--texto-2); }
.barra-superior-int { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--pad); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.barra-superior a { color: inherit; white-space: nowrap; transition: color 0.3s; }
.barra-superior a:hover { color: var(--blanco); }
@media (max-width: 719px) { :root { --barra-h: 0px; } .barra-superior { display: none; } }

/* Textos del carrusel más contenidos para que no tapen la foto (Ivan y Víctor, 17/9/2026) */
.hero-titulo { font-size: clamp(2.5rem, 5.2vw, 4.8rem); line-height: 0.9; }
.hero-sub { margin-top: 1rem; max-width: 36ch; font-size: clamp(0.95rem, 1.15vw, 1.08rem); }
.hero-acciones { margin-top: 1.4rem; }
.hero-acciones .btn-grande { font-size: 1rem; padding: 0.95rem 1.9rem; }
.hero-velo { background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.18) 58%, rgba(0, 0, 0, 0.85) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 48%); }
@media (min-width: 721px) and (max-height: 720px) { .hero-titulo { font-size: clamp(2.2rem, 4.4vw, 4rem); } }
@media (max-width: 720px) { .hero-titulo { font-size: clamp(2.3rem, 10.5vw, 3rem); } .hero-sub { font-size: 0.98rem; } }
@media (max-width: 380px) { .hero-titulo { font-size: 2.2rem; } }

/* Pedir: al pasar el ratón por el botón de la cabecera salen ya Glovo y Uber (Ivan y Víctor, 17/9/2026).
   El clic sigue abriendo el modal (móvil y teclado). */
.pedir-menu { position: relative; display: none; }
@media (min-width: 960px) { .pedir-menu { display: block; } }
.pedir-desplegable { position: absolute; top: 100%; right: 0; z-index: 120; padding-top: 0.7rem; min-width: 280px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s var(--ease-soft), transform 0.25s var(--ease-soft), visibility 0.25s; }
.pedir-desplegable-caja { display: grid; gap: 0.5rem; padding: 0.6rem; background: rgba(15, 13, 14, 0.97); border: 1px solid var(--linea); border-radius: 20px; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55); }
.pedir-desplegable .pedir-opcion { padding: 0.75rem 0.9rem; border-radius: 14px; }
.pedir-menu:hover .pedir-desplegable, .pedir-menu:focus-within .pedir-desplegable { opacity: 1; visibility: visible; transform: none; }
@media (hover: none) { .pedir-desplegable { display: none; } }

/* Titular de Reservar en una sola línea, también en el móvil (Ivan y Víctor, 17/9/2026) */
.carta-hero h1.una-linea { max-width: none; white-space: nowrap; font-size: clamp(2.1rem, 10.2vw, 5.6rem); }
.carta-hero h1.una-linea:lang(ca) { font-size: clamp(1.6rem, 7.6vw, 5.6rem); }

/* Letra pequeña de la diapositiva de la burger del mes, al estilo de las promociones con fecha (Ivan, 18/9/2026) */
.hero-nota { margin-top: 1.1rem; max-width: 44ch; font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.02em; color: rgba(245, 242, 238, 0.68); }
@media (max-width: 720px) { .hero-nota { margin-top: 0.9rem; font-size: 0.68rem; } }

/* Reseñas: botón para dejar reseña + ver la ficha (P1, 19/9/2026); chips de contacto pulsables */
.resenas-acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.resenas-resumen .resenas-acciones .btn { margin-top: 0; }
a.carta-nota-chip { text-decoration: none; transition: border-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft); }
a.carta-nota-chip:hover, a.carta-nota-chip:focus-visible { border-color: var(--rosa); color: var(--rosa); }

/* Carta: descripción de cada burger a la vista, bajo el nombre (prueba pedida por Ivan, 19/9/2026) */
.burger-shot-texto { margin-top: 0.45rem; font-size: 0.88rem; line-height: 1.5; color: var(--texto-2); }
.burger-shot .plato-precio { margin-top: 0.7rem; }

/* Velocidad (P1, 19/9/2026): el fondo de "Burgers." se carga al acercarse (main.js pone is-visible) y en 1200 px;
   el horario del hero reserva su hueco para no mover el texto al aparecer */
.gigante.is-visible { background-image: url("imagenes/web/jack-dream-hero-1200.webp"); }
.hero-estado { min-height: 1.3em; }
.hero-estado:empty { visibility: hidden; }

/* Aviso de cookies en el móvil: más bajo y por encima de la barra de acciones (P1, 19/9/2026) */
@media (max-width: 720px) {
  .cookies { left: 0.5rem; right: 0.5rem; max-width: none; bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); padding: 0.75rem 0.85rem; }
  .cookies-botones .btn { padding: 0.55rem 0.7rem; font-size: 0.75rem; }
  .cookies-enlace { padding: 0.55rem 0.15rem; font-size: 0.76rem; }
  /* cuando aparece la barra de acciones (al bajar), el aviso sube para no taparla */
  body:has(.barra-acciones.is-visible) .cookies { bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); }
}