/* ==========================================================================
   DELOCOS · hoja de estilos única · mobile-first
   Poppins local (/fonts). Colores, tamaños y radios salen de :root.
   ========================================================================== */

@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Marca (BRAND.md) */
  --c-yellow: #f8b624;
  --c-red: #bc1b21;
  --c-black: #1a1a1a;
  --c-bg: #ededed;
  --c-white: #ffffff;

  /* Apoyo: un color por función */
  --c-red-bright: #de0e1c;   /* footer, botón Enviar, subrayado del menú */
  --c-orange: #fda103;       /* palabras destacadas en pegatinas, badge Novedad */
  --c-teal: #2db299;         /* fondos verdes */
  --c-teal-dark: #1f7a69;    /* verde para texto sobre blanco (5,19:1) */
  --c-tripadvisor: #34e0a1;  /* fondo del logo de Tripadvisor (color de su marca) */
  --c-tripadvisor-burbuja: #00aa6c; /* burbujas de nota de Tripadvisor */
  --c-cream: #fde3c8;        /* pegatinas crema */
  --c-gray: #595959;         /* textos secundarios de la carta (7:1) */
  --c-line: #e5e5e5;         /* separadores */
  --c-true-black: #000000;   /* solo el contorno de .title-delocos (BRAND.md) */

  /* Alias de uso */
  --c-shadow: var(--c-black);
  --c-menu-line: var(--c-black);
  --c-contact: var(--c-black);

  /* Terceros: colores de los logos de las apps de reparto, fuera de la paleta */
  --c-glovo: #fdb81e;
  --c-justeat: #ff8000;

  /* Transparencias */
  --c-black-a12: rgba(0, 0, 0, 0.12);
  --c-black-a35: rgba(0, 0, 0, 0.35);
  --c-black-a75: rgba(0, 0, 0, 0.75);
  --c-white-a07: rgba(255, 255, 255, 0.07);
  --c-white-a15: rgba(255, 255, 255, 0.15);
  --c-white-a20: rgba(255, 255, 255, 0.2);
  --c-white-a30: rgba(255, 255, 255, 0.3);
  --c-white-a50: rgba(255, 255, 255, 0.5);
  --c-white-a65: rgba(255, 255, 255, 0.65);
  --c-white-a82: rgba(255, 255, 255, 0.82);

  /* Estados */
  --c-focus: #357df9;
  --c-placeholder: #f0a0a8;

  --font: "Poppins", system-ui, sans-serif;

  /* Tamaños fluidos (móvil → escritorio 1440) */
  --fs-body: clamp(16px, 2.2vw, 20px);
  --fs-label: clamp(14px, 1.6vw, 20px);
  --fs-nav: 14px;
  --fs-h-xl: clamp(36px, 5vw, 72px);
  --fs-h-banner: clamp(28px, 4.45vw, 64px);
  --fs-h-island: clamp(44px, 6.7vw, 96px);
  --fs-h-contact: clamp(32px, 4.45vw, 64px);
  --fs-display: clamp(48px, 9.03vw, 130px);
  --fs-display-menu: clamp(72px, 17vw, 246px);
  --fs-tagline: clamp(22px, 3.2vw, 46px);
  --fs-sticker: clamp(13px, 1.67vw, 24px);

  /* Radios: píldora para lo interactivo, 6/12/24 px para cajas,
     em para etiquetas tipográficas (escalan con su texto) y círculo */
  --radius-pill: 999px;   /* botones y campos de una línea */
  --radius-sm: 6px;       /* pegatinas y badges */
  --radius-md: 12px;      /* imágenes y tarjetas pequeñas */
  --radius-lg: 24px;      /* tarjetas grandes, paneles y textarea */
  --radius-type-sm: 0.14em;
  --radius-type: 0.3em;
  --radius-type-lg: 0.7em;
  --radius-round: 50%;

  --gutter: 16px;
  --nav-h: 60px;
  --w-text: 1017px;
  --w-wide: 1053px;
  --w-narrow: 700px;
  --w-container: 74em;
  --w-dish: 400px;

  --t-fast: 0.2s;
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);

  /* Rediseño de la home (3.3) · diales: variedad 7, movimiento 5, densidad 4; solo modo claro */
  --space-section: clamp(56px, 9vw, 120px);  /* aire vertical entre bloques */
  --space-block: clamp(24px, 4vw, 48px);     /* aire entre cabecera y contenido */
  --w-home: 72rem;
  --fs-h2-home: clamp(40px, 8vw, 110px);     /* h2 .title-delocos de los bloques */
  --fs-h3-home: clamp(20px, 2.4vw, 28px);
  --fs-hero-rotulo: clamp(56px, min(10vw, 14vh), 140px); /* «Make me Crazy»; también se ajusta a pantallas bajas */
  --fs-hero-h1: clamp(28px, min(3.8vw, 5.5vh), 54px); /* H1 «Bar de tapas en Puerto de la Cruz» */
  --pop-shift: clamp(6px, 0.9vw, 12px);      /* sombra extruida de tarjetas y marcos */
  --pop-border: 3px;
  --stagger: 80ms;                            /* retraso entre elementos al revelar */
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-black);
  background: var(--c-bg);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

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

/* Saltar al contenido: fuera de pantalla hasta recibir el foco con el teclado */
.skip-link {
  position: fixed; top: 8px; left: var(--gutter); z-index: 101;
  padding: 0.6em 1.2em;
  font-weight: 800; font-size: var(--fs-nav); text-decoration: none;
  color: var(--c-black); background: var(--c-yellow);
  border: 2px solid var(--c-black); border-radius: var(--radius-pill);
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus { transform: none; }
#contenido,
section[id] { scroll-margin-top: var(--nav-h); } /* al saltar a un ancla (p. ej. desde el footer) la barra no tapa el inicio del bloque */
#contenido:focus { outline: none; }

/* ---------- Título de marca (BRAND.md · 30 capas) ---------- */
.title-delocos {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(56px, 13vw, 190px);
  text-transform: uppercase;
  line-height: 0.95;
  text-align: center;
  -webkit-text-stroke: 0.03em var(--c-true-black);
  paint-order: stroke fill;
  text-shadow:
    -0.0064em 0.0075em 0 var(--c-shadow),
    -0.0128em 0.0150em 0 var(--c-shadow),
    -0.0192em 0.0225em 0 var(--c-shadow),
    -0.0256em 0.0300em 0 var(--c-shadow),
    -0.0320em 0.0375em 0 var(--c-shadow),
    -0.0384em 0.0450em 0 var(--c-shadow),
    -0.0448em 0.0525em 0 var(--c-shadow),
    -0.0512em 0.0600em 0 var(--c-shadow),
    -0.0576em 0.0675em 0 var(--c-shadow),
    -0.0640em 0.0750em 0 var(--c-shadow),
    -0.0704em 0.0825em 0 var(--c-shadow),
    -0.0768em 0.0900em 0 var(--c-shadow),
    -0.0832em 0.0975em 0 var(--c-shadow),
    -0.0896em 0.1050em 0 var(--c-shadow),
    -0.0960em 0.1125em 0 var(--c-shadow),
    -0.1024em 0.1200em 0 var(--c-shadow),
    -0.1088em 0.1275em 0 var(--c-shadow),
    -0.1152em 0.1350em 0 var(--c-shadow),
    -0.1216em 0.1425em 0 var(--c-shadow),
    -0.1280em 0.1500em 0 var(--c-shadow),
    -0.1344em 0.1575em 0 var(--c-shadow),
    -0.1408em 0.1650em 0 var(--c-shadow),
    -0.1472em 0.1725em 0 var(--c-shadow),
    -0.1536em 0.1800em 0 var(--c-shadow),
    -0.1600em 0.1875em 0 var(--c-shadow),
    -0.1664em 0.1950em 0 var(--c-shadow),
    -0.1728em 0.2025em 0 var(--c-shadow),
    -0.1792em 0.2100em 0 var(--c-shadow),
    -0.1856em 0.2175em 0 var(--c-shadow),
    -0.1920em 0.2250em 0 var(--c-shadow);

}
.title-delocos .l1,
.title-delocos .l2 { display: block; }
.title-delocos .l1 { color: var(--c-yellow); }
.title-delocos .l2 { color: var(--c-red); }

/* ---------- Utilidades de texto ---------- */
.red { color: var(--c-red); }
.white { color: var(--c-white); }
.yellow { color: var(--c-yellow); }

.heading-xl,
.tagline {
  font-family: var(--font);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-black);
}
.heading-xl { font-size: var(--fs-h-xl); line-height: 1.3; }

/* Párrafos: base de marca (BRAND.md) */
p {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-black);
}

/* ---------- Pegatinas rotadas ---------- */
.sticker {
  display: inline-block;
  padding: 0.25em 0.7em;
  font-family: var(--font);
  font-size: var(--fs-sticker);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--c-black);
  border-radius: var(--radius-sm);
  rotate: var(--rot, 0deg);
}
.sticker--red { background: var(--c-red); color: var(--c-white); font-weight: 400; letter-spacing: 0.02em; }
.sticker--cream { background: var(--c-cream); color: var(--c-black); font-weight: 300; letter-spacing: 0.03em; }
.sticker strong { font-weight: 800; }

/* ---------- Botones ---------- */
.btn-pill,
.btn-yellow,
.btn-red,
.btn-black {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.5em;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.btn-pill:active,
.btn-yellow:active,
.btn-red:active,
.btn-black:active { transform: scale(0.98); }
.btn-pill { background: var(--c-bg); color: var(--c-black); border: 2px solid var(--c-black); }
.btn-yellow { background: var(--c-yellow); color: var(--c-red); border: 0; }
.btn-red { background: var(--c-red-bright); color: var(--c-white); border: 0; }
.btn-black { background: var(--c-black); color: var(--c-white); border: 0; }
@media (hover: hover) {
  .btn-pill:hover, .btn-yellow:hover { background: var(--c-black); color: var(--c-white); }
  .btn-red:hover { background: var(--c-black); }
  .btn-black:hover { background: var(--c-red); }
}

/* ---------- Revelado al entrar en pantalla ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s var(--ease-reveal), transform 0.6s var(--ease-reveal);
  transition-delay: calc(var(--i, 0) * var(--stagger)); /* escalonado: style="--i: 1" */
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes user-loop-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.loop--float { animation: user-loop-float 3.4s ease-in-out infinite; }

/* ==========================================================================
   0 · Navegación
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--c-yellow);
  transition: transform 0.3s var(--ease-reveal), box-shadow 0.3s var(--ease-reveal);
}
/* Al bajar se esconde hacia arriba y al subir vuelve (main.js). Con el teclado dentro
   del menú no se esconde nunca. Lejos del principio lleva una sombra suave. */
.nav.is-scrolled { box-shadow: 0 4px 0 var(--c-black-a12); }
.nav.is-hidden { transform: translateY(-100%); }
.nav:has(:focus-visible) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}
/* Tres columnas: en móvil ☰ | logo | Instagram; en escritorio logo | enlaces | «Dosis diaria» + Instagram */
.nav__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 0 var(--gutter);
}
.nav__toggle { grid-column: 1; justify-self: start; }
.nav__logo { grid-column: 2; display: block; }
.nav__logo img { display: block; width: auto; height: 46px; }
.nav__dosis {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
/* 19px en negrita cuenta como texto grande: el rojo sobre amarillo cumple el contraste (3,5:1) */
.nav__dosis-text { display: none; font-size: 19px; font-weight: 800; line-height: 1.05; text-align: right; color: var(--c-black); }
.nav__dosis-text > span { display: block; }
.nav__dosis-text .red { color: var(--c-red); }
.nav__ig { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--c-black); font-size: 30px; transition: color var(--t-fast), scale var(--t-fast); }
.nav__toggle {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--c-white);
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block; width: 22px; height: 2px; background: currentColor; position: relative;
}
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }

.nav__list {
  display: none;
  position: absolute;
  top: var(--nav-h);
  left: 0; right: 0;
  flex-direction: column;
  background: var(--c-yellow);
  padding: 8px var(--gutter) 16px;
}
.nav__list.is-open { display: flex; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-nav);
  line-height: 1.5;
  color: var(--c-white);
  text-decoration: none;
  transition: all var(--t-fast);
}
/* Foco del menú: contorno oscuro, que se ve sobre el amarillo (el azul general apenas contrasta) */
.nav :focus-visible { outline-color: var(--c-black); outline-offset: -2px; } /* hacia dentro: el borde superior de la pantalla no lo corta */
@media (hover: hover) {
  .nav__link:hover { color: var(--c-red-bright); text-decoration: underline; }
  .nav__ig:hover { color: var(--c-red); scale: 1.08; }
}

@media (min-width: 600px) {
  .nav__toggle { display: none; }
  .nav__logo { grid-column: 1; justify-self: start; }
  .nav__logo img { height: 50px; }
  .nav__inner { padding-inline: calc(var(--gutter) + 20px); } /* logo y «Dosis diaria» más separados del borde */
  .nav__list {
    grid-column: 2;
    display: flex; position: static; flex-direction: row; align-items: center;
    gap: clamp(16px, 4vw, 40px); padding: 0; background: none;
  }
}
@media (min-width: 1024px) {
  .nav__dosis-text { display: block; }
}

/* ==========================================================================
   1 · Hero
   ========================================================================== */
.hero { background: var(--c-bg); padding-bottom: clamp(24px, 6vw, 80px); overflow: hidden; }
/* Valoraciones de Google y Tripadvisor encima del rótulo: dos tarjetas pop en fila */
.hero__notas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin: clamp(20px, min(3vw, 3vh), 32px) auto 0;
  padding: 0 var(--gutter);
  list-style: none;
  animation: hero-fade-up 0.5s var(--ease-reveal) backwards;
}
.hero-nota {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 8px;
  color: var(--c-black);
  text-decoration: none;
  background: var(--c-white);
  border: 2px solid var(--c-black);
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 var(--c-black);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
@media (hover: hover) {
  a.hero-nota:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--c-black); }
}
.hero-nota__logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-round); font-size: 24px; }
.hero-nota__logo--ta { background: var(--c-tripadvisor); font-size: 22px; }
.hero-nota__cifra { font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-nota__info { display: grid; gap: 3px; }
.hero-nota__estrellas { display: flex; gap: 1px; font-size: 15px; color: var(--c-yellow); }
.hero-nota__estrellas .icon { stroke: var(--c-black); stroke-width: 1.5; }
.hero-nota__media { position: relative; display: inline-flex; }
.hero-nota__media .icon:last-child { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); } /* media estrella rellena */
.hero-nota__total { font-size: 13px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.burbujas { display: flex; gap: 3px; }
.burbuja { width: 13px; height: 13px; border: 2px solid var(--c-tripadvisor-burbuja); border-radius: var(--radius-round); background: var(--c-tripadvisor-burbuja); }
.burbuja--media { background: linear-gradient(90deg, var(--c-tripadvisor-burbuja) 50%, transparent 50%); }
@media (max-width: 599px) { /* móvil: más compactas para que quepan las dos en una fila */
  .hero__notas { gap: 8px; padding: 0 12px; }
  .hero-nota { gap: 6px; padding: 5px 10px 5px 5px; }
  .hero-nota__logo { width: 26px; height: 26px; font-size: 18px; }
  .hero-nota__logo--ta { font-size: 16px; }
  .hero-nota__cifra { font-size: 20px; }
  .hero-nota__info { gap: 1px; }
  .hero-nota__estrellas { font-size: 12px; }
  .hero-nota__total { font-size: 11px; }
  .burbujas { gap: 2px; }
  .burbuja { width: 10px; height: 10px; border-width: 1.5px; }
}
.hero__title { position: relative; max-width: 1440px; margin: clamp(40px, min(5vw, 6vh), 64px) auto 0; /* deja sitio a la pegatina de arriba bajo el menú */ padding: 0 var(--gutter); }
/* Rótulo de marca (ya no es el H1): más contenido para que H1, intro y botones quepan en la primera pantalla */
.hero__rotulo { margin: 0; font-size: var(--fs-hero-rotulo); }
/* Entrada letra a letra (referencia: lamannabakery.com): cada letra sube con su sombra
   hasta su sitio. Solo transform: las letras nunca están ocultas (no retrasa el LCP). */
.hero__rotulo { position: relative; z-index: 1; } /* las pegatinas (z-index 2) siguen encima */
.hero__rotulo .word { display: inline-block; white-space: nowrap; }
/* Separadas, cada letra pinta su sombra encima de la letra de su izquierda (la extrusión va
   hacia abajo a la izquierda). Se apilan de izquierda a derecha y CRAZY sobre MAKE ME,
   como cuando el navegador pinta el título entero: todas las sombras por debajo. */
.hero__rotulo .ch {
  position: relative;
  z-index: calc(100 - var(--n));
  display: inline-block;
  animation: hero-letter-in 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
  animation-delay: calc(0.1s + var(--n) * 45ms);
}
@keyframes hero-letter-in {
  from { transform: translateY(0.6em) rotate(var(--tilt, 8deg)); }
  to { transform: none; }
}
.hero__rotulo .l2 .ch { z-index: calc(200 - var(--n)); }
.hero__rotulo .ch:nth-child(even) { --tilt: -8deg; }
/* Después del rótulo entran H1, intro y botones: así las letras no los pisan al subir */
.hero__h1,
.hero__intro,
.hero__ctas { animation: hero-fade-up 0.5s var(--ease-reveal) backwards; }
.hero__h1 { animation-delay: 0.6s; }
.hero__intro { animation-delay: 0.72s; }
.hero__ctas { animation-delay: 0.84s; }
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.hero__h1 { margin: clamp(20px, min(3.5vw, 4vh), 44px) auto 0; padding: 0 var(--gutter); font-size: var(--fs-hero-h1); line-height: 1.15; } /* separa la sombra de la 1.ª línea */
.hero__intro { max-width: 40rem; margin: clamp(12px, min(2vw, 2.5vh), 24px) auto 0; padding: 0 var(--gutter); text-align: center; }
.hero__ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: clamp(16px, min(2.5vw, 3.5vh), 32px); padding: 0 var(--gutter);
}
.hero__title .sticker { position: absolute; z-index: 2; }
.hero__sticker-1 { --rot: -12deg; --pop-delay: 1.1s; left: 4%; top: -14%; }
.hero__sticker-2 { --rot: 8deg; --pop-delay: 1.28s; right: 6%; bottom: -12%; }
/* Las pegatinas aparecen con rebote al terminar las letras y luego siguen flotando
   (el rebote anima scale y la flotación translate: no se pisan) */
.hero__title .sticker {
  animation:
    sticker-pop 0.55s ease-out var(--pop-delay) backwards,
    user-loop-float 3.4s ease-in-out infinite;
}
@keyframes sticker-pop {
  0% { scale: 0; }
  55% { scale: 1.2; }
  75% { scale: 0.92; }
  90% { scale: 1.04; }
  100% { scale: 1; }
}

.tagline {
  position: relative; z-index: 1;
  margin: clamp(40px, 6vw, 80px) auto 0;
  padding: 0 var(--gutter);
  font-size: var(--fs-tagline);
  line-height: 1.45;
  text-align: center;
  color: var(--c-black);
}
.tagline .l1, .tagline .l2 { display: block; }

/* ==========================================================================
   2 · Bienvenida + menú
   ========================================================================== */
.welcome { background: var(--c-bg); padding: var(--space-section) var(--gutter) clamp(32px, 6vw, 80px); }
/* Bienvenida (3.3.3): foto cuadrada enmarcada + título plano y texto.
   Móvil: foto encima; desde 920 px, dos columnas con la foto girada a la izquierda. */
.welcome__inner {
  display: grid; gap: var(--space-block); align-items: center;
  max-width: var(--w-home); margin: 0 auto;
}
.welcome__photo { --rot: -2.5deg; width: min(100%, 420px); margin: 0 auto; aspect-ratio: 1; }
.welcome__title { text-align: left; }
.welcome__lead { max-width: 40rem; margin: var(--space-block) 0 0; text-align: left; }
@media (min-width: 920px) {
  .welcome__inner { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
}

.menu-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px 24px; margin: clamp(32px, 5vw, 72px) auto 0; max-width: var(--w-narrow);
}
.menu-title { margin-top: clamp(8px, 2vw, 24px); }

/* ==========================================================================
   3 · Banner "Si llegaste…" y 7 · Tenerife (fondo con foto)
   ========================================================================== */
.photo {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60svh;
  padding: 48px var(--gutter);
  background-color: var(--c-black);
  background-size: cover;
  background-position: center;
  color: var(--c-white);
  text-align: center;
}
.photo--cheers { background-image: url("../img/fondo-copas-brindis.webp"); }
.photo--teide { background-image: url("../img/fondo-teide.webp"); }
.photo h2 { color: var(--c-white); max-width: 24ch; }
.photo--cheers h2 { font-size: var(--fs-h-banner); line-height: 1; }
.photo--teide h2 { font-size: var(--fs-h-island); line-height: 1.1; text-transform: none; }
.photo p { color: var(--c-white); }
.photo__text { margin-top: 32px; max-width: 40rem; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.4; }
.photo__text + .photo__text { margin-top: 24px; }



/* ==========================================================================
   8 · Contacto
   ========================================================================== */
.contact { background: var(--c-contact); color: var(--c-white); padding: clamp(40px, 6vw, 80px) var(--gutter); }
.contact__inner { max-width: 1224px; margin: 0 auto; display: grid; gap: 40px; }
.contact h2 { font-size: var(--fs-h-contact); line-height: 1.35; color: var(--c-white); text-transform: none; }
.contact p { color: var(--c-white); font-size: 16px; line-height: 1.4; margin-top: 32px; text-align: left; max-width: none; }
.form-contact { display: grid; gap: 8px; width: 100%; max-width: 488px; }
.form-contact label { font-size: 16px; color: var(--c-white); margin-top: 8px; }
.form-contact input,
.form-contact textarea {
  width: 100%; padding: 0 20px;
  font-family: var(--font); font-size: 16px; color: var(--c-black);
  background: var(--c-white); border: 0; border-radius: var(--radius-pill);
}
.form-contact input { min-height: 48px; }
.form-contact textarea { min-height: 96px; padding-top: 14px; border-radius: var(--radius-lg); resize: vertical; }
.form-contact .btn-red { justify-self: start; margin-top: 24px; min-height: 51px; }

/* ==========================================================================
   9 · Footer
   ========================================================================== */
/* Tres columnas (ubicación · logo · horario), fila «Explora» y franja negra
   con copyright y redes. En móvil, todo apilado y centrado con el logo arriba. */
.footer { background: var(--c-red-bright); color: var(--c-white); text-align: center; }
.footer :focus-visible { outline-color: var(--c-white); outline-offset: 3px; }
.footer__inner { max-width: var(--w-wide); margin: 0 auto; padding: clamp(40px, 6vw, 64px) var(--gutter) clamp(24px, 3vw, 32px); }
.footer__top { display: grid; justify-items: center; gap: 32px; }
.footer__logo { order: -1; display: block; width: clamp(120px, 11.7vw, 168px); }
.footer__logo img { width: 100%; height: auto; }
.footer__label {
  display: inline-block; margin-bottom: 12px; padding: 2px 10px;
  font-size: 13px; font-weight: 800; line-height: 1.6; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-yellow); background: var(--c-black); border-radius: var(--radius-sm);
}
.footer address,
.footer__col p:not(.footer__label) { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--c-white); }
.footer__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.footer__nav { margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--c-white-a30); }
.footer__nav ul { display: grid; justify-items: center; }
.footer__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px;
  font-size: 16px; text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.footer__bottom { background: var(--c-black); }
.footer__bottom-inner {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: var(--w-wide); margin: 0 auto; padding: 20px var(--gutter);
}
.footer__copy { font-size: 14px; color: var(--c-white-a82); }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  color: var(--c-black); background: var(--c-white); border-radius: var(--radius-round);
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.footer__social a:active { transform: scale(0.94); }
@media (hover: hover) {
  .footer__nav a:hover { text-decoration: underline; }
  .footer__social a:hover { background: var(--c-yellow); }
}
@media (min-width: 768px) {
  .footer__top { grid-template-columns: 1fr auto 1fr; align-items: start; }
  .footer__logo { order: 0; align-self: center; }
  .footer__col--ubicacion { justify-self: start; text-align: left; }
  .footer__col--horario { justify-self: end; text-align: right; }
  .footer__nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; }
  .footer__nav .footer__label { margin-bottom: 0; }
  .footer__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; }
  .footer__bottom-inner { flex-direction: row; justify-content: space-between; }
}

/* ==========================================================================
   Escritorio y tablet
   ========================================================================== */
@media (min-width: 920px) {
  .photo { background-attachment: fixed; }
  .photo--cheers { min-height: 694px; }
  .photo--teide { min-height: 700px; }
  .contact__inner { grid-template-columns: 1fr 1fr; align-items: start; gap: 64px; }
}

@media (min-width: 1224px) {
  .hero__sticker-1 { left: 12%; top: -9%; }
  .hero__sticker-2 { right: 18%; bottom: -8%; }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .photo { background-attachment: scroll; }
  .hero__rotulo .ch,
  .hero__title .sticker,
  .hero__h1,
  .hero__intro,
  .hero__ctas { animation: none; } /* sin retrasos escalonados: el hero sale quieto */
}

/* ==========================================================================
   Iconos (sprite img/icons.svg) · escalan con el texto
   ========================================================================== */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  color: inherit;
  fill: none; /* la estrella no lleva fill en el símbolo: así .icon--fill puede rellenarla */
}
.icon--red { color: var(--c-red); }
.icon--yellow { color: var(--c-yellow); }
.icon--lg { font-size: 54px; }
.icon--fill { fill: currentColor; }
.sticker .icon { font-size: 1.6em; vertical-align: middle; }
.footer__social .icon { width: 24px; height: 24px; }

/* ==========================================================================
   Subpágina Bebidas (menudrinks.html)
   ========================================================================== */
.nav__link[aria-current="page"] { color: var(--c-red-bright); text-decoration: underline; text-underline-offset: 6px; }
.orange { color: var(--c-orange); }
.icon--black { color: var(--c-black); }

.page-drinks { background: var(--c-white); }

/* Hero con fondo de puntos y banner */
.drinks-hero,
.food-hero {
  background: var(--c-red) url("../img/bebidas/fondo-puntos-rojos.jpg") center / cover;
  padding: clamp(16px, 4vw, 56px) var(--gutter) clamp(24px, 4vw, 52px);
}
.drinks-hero__inner { max-width: 1140px; margin: 0 auto; display: grid; justify-items: center; gap: clamp(20px, 4vw, 56px); }
.drinks-hero__banner { width: 100%; height: auto; aspect-ratio: 1400 / 1045; }

/* Accesos Comida / Bebida / Ofertas */
.menu-tabs {
  width: 100%; max-width: 1024px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--c-teal);
}
.menu-tabs a {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0.4em 0.5em;
  font-size: clamp(18px, 2.8vw, 36px); font-weight: 800; line-height: 1.2;
  color: var(--c-white); text-decoration: none;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.menu-tabs a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: hover) { .menu-tabs a:hover { background: var(--c-black-a12); } }
.menu-tabs--bottom { margin: clamp(40px, 6vw, 80px) auto 0; }

/* Aviso marca de ropa */
.promo-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px;
  background: var(--c-yellow); padding: 12px var(--gutter);
}
.promo-bar__text { margin: 0; max-width: none; font-size: clamp(16px, 2.2vw, 30px); font-weight: 800; line-height: 1.3; color: var(--c-white); text-align: center; }
.promo-bar__badge { background: var(--c-teal); color: var(--c-white); font-size: 15px; padding: 0.5em 1em; border-radius: var(--radius-sm); }
@media (min-width: 920px) {
  .promo-bar { position: relative; }
  .promo-bar__badge { position: absolute; right: clamp(16px, 7.5vw, 108px); }
}

/* Bloques de carta */
.menu-section { background: var(--c-white); padding: clamp(40px, 6vw, 80px) clamp(16px, 7.5vw, 108px) clamp(24px, 4vw, 56px); }
.menu-section__inner { max-width: 1224px; margin: 0 auto; text-align: center; }
.soft-grid, .price-table, .price-list, .wine-grid, .shots, .spirit-list { margin-inline: auto; }

.menu-title {
  position: relative;
  display: inline-block;
  margin: 0 0 clamp(36px, 6vw, 72px);
  font-size: clamp(42px, 7.4vw, 104px);
  font-weight: 800; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--c-red);
}
.menu-title__top { display: block; }
.menu-title__top--inline { display: inline; margin-right: 0.12em; }
.menu-title__band {
  display: inline-block;
  margin-top: 0.02em; padding: 0.04em 0.28em 0.08em;
  background: var(--c-black); color: var(--c-white);
  border-radius: var(--radius-type-sm); rotate: -2deg;
}
.price-sticker {
  position: absolute; right: -0.2em; bottom: -0.55em;
  padding: 0.1em 0.5em;
  font-size: 0.36em; font-weight: 800; line-height: 1.2; letter-spacing: 0;
  color: var(--c-white);
  border: 3px solid var(--c-black); border-radius: var(--radius-type); rotate: 6deg;
}
.menu-title__top + .price-sticker { right: 0; bottom: -1.7em; }
.menu-title:has(.menu-title__top + .price-sticker) { margin-bottom: clamp(52px, 8vw, 104px); }
.price-sticker--red { background: var(--c-red); }
.price-sticker--black { background: var(--c-black); }

/* Bebidas sin alcohol */
.soft-grid { position: relative; max-width: 640px; padding-top: 3.4rem; }
.soft-grid__glass { position: absolute; left: -0.5rem; top: 0; width: 4.5rem; height: auto; z-index: 2; }
.soft-grid__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.soft-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 4.5rem; padding: 0.5rem 0.75rem; text-align: center;
  background: var(--c-white); border: 3px solid var(--c-black); border-radius: var(--radius-md);
}
.soft-card__name { font-size: clamp(18px, 2.2vw, 26px); font-weight: 400; line-height: 1.2; color: var(--c-black); }
.soft-card__note { font-size: clamp(13px, 1.5vw, 16px); line-height: 1.3; color: var(--c-red); }
.soft-card--wide { grid-column: 1 / -1; justify-self: center; width: min(100%, 75%); }

/* Tabla cerveza de barril */
.price-table { width: 100%; max-width: 720px; border-collapse: collapse; }
.price-table th, .price-table td { padding: 0.55em 0; border-bottom: 3px dashed var(--c-menu-line); vertical-align: baseline; }
.price-table thead th { border-bottom: 3px solid var(--c-menu-line); font-weight: 400; font-size: clamp(18px, 2.4vw, 28px); color: var(--c-red); text-align: right; }
.price-table thead th:first-child { text-align: left; }
.price-table .icon { vertical-align: -0.15em; }
.price-table tbody th { text-align: left; font-size: clamp(18px, 2.6vw, 32px); font-weight: 400; color: var(--c-black); padding-right: 0.5em; }
.price-table td { text-align: right; white-space: nowrap; font-size: clamp(18px, 2.6vw, 32px); font-weight: 800; color: var(--c-black); }
.price-table__col { width: 22%; }

/* Lista cerveza de botella */
.price-list { max-width: 720px; display: grid; gap: 0.55em; }
.price-list li { display: flex; align-items: baseline; font-size: clamp(17px, 2.3vw, 28px); line-height: 1.3; }
.price-list__name { display: flex; flex: 1; align-items: baseline; font-weight: 400; color: var(--c-black); }
.price-list__name::after { content: ""; flex: 1; min-width: 1.5em; margin: 0 0.6em; border-bottom: 3px dashed var(--c-menu-line); }
.price-list__price { font-weight: 800; white-space: nowrap; color: var(--c-black); }

/* Vinos y vermouth */
.wine-grid { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 1000px; }
.wine-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 12rem; padding: 1.1em 1.3em 1.2em;
  border: 3px solid var(--c-black); border-radius: var(--radius-lg); background: var(--c-white);
}
.wine-card__title { margin: 0; font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; line-height: 1.1; color: var(--c-red); }
.wine-card__text { margin: 0.4em auto 0; max-width: 16em; font-size: clamp(16px, 1.9vw, 24px); line-height: 1.3; text-align: center; color: var(--c-black); }
.wine-card__prices { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em 2em; margin: auto 0 0; padding-top: 1.4em; }
.wine-card__prices div { display: grid; gap: 0.1em; }
.wine-card__prices dt { font-size: clamp(14px, 1.8vw, 22px); font-weight: 400; color: var(--c-black); }
.wine-card__prices dd { margin: 0; font-size: clamp(18px, 2.2vw, 28px); font-weight: 800; color: var(--c-red); }
.wine-card__prices--low { padding-top: 3.5em; }

.wine-card__sticker, .shot-card__sticker { position: absolute; z-index: 2; font-weight: 800; text-transform: none; line-height: 1.15; text-align: center; font-size: clamp(14px, 1.8vw, 24px); padding: 0.35em 0.8em; }
.wine-card__sticker--hearts { top: -0.9em; right: -0.5em; rotate: 32deg; }
.wine-card__sticker--wine { top: -1.7em; right: 8%; padding: 0.5em 1.1em; border-radius: var(--radius-round); rotate: -14deg; }
.wine-card__sticker--wine .icon { font-size: 1.05em; vertical-align: -0.15em; }

/* Cocktails */
.cocktails { display: grid; gap: 40px; }
.price-sticker.cocktails__sticker { position: static; display: table; margin: 0 auto 0.9rem; rotate: 0deg; font-size: clamp(15px, 2.66vw, 37px); }
.cocktails__list { display: grid; gap: 0.35em; font-size: clamp(20px, 2.8vw, 36px); font-weight: 400; line-height: 1.25; color: var(--c-black); }
.cocktails__mocktails { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.2em 0.8em; }
.cocktails__mocktails-name { font-weight: 800; text-transform: uppercase; color: var(--c-red); }
.cocktails__mocktails-note { flex-basis: 100%; }
.cocktails__price { font-weight: 800; white-space: nowrap; color: var(--c-black); }
.cocktails__brand { margin: 0 0 0.8em; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.2em 0.5em; font-size: clamp(22px, 3vw, 40px); font-weight: 400; line-height: 1.2; color: var(--c-black); }
.cocktails__brand strong { font-weight: 800; }
.cocktails__recipes { display: grid; gap: 1.1em; }
.cocktails__recipes strong { display: block; font-size: clamp(20px, 2.6vw, 32px); font-weight: 400; color: var(--c-black); }
.cocktails__recipes span { display: block; max-width: 24em; margin-inline: auto; font-size: clamp(15px, 1.8vw, 22px); line-height: 1.3; color: var(--c-red); }

/* Copas y combinados */
.tier { margin: 0 0 clamp(32px, 5vw, 56px); }
.tier__prices { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(16px, 4vw, 56px); margin-bottom: 1.2rem; }
.price-tag { display: grid; justify-items: center; gap: 0.2em; width: clamp(150px, 26vw, 280px); margin: 0; max-width: none; line-height: 1.2; }
.price-tag__label { font-size: clamp(16px, 2vw, 26px); font-weight: 400; text-transform: uppercase; color: var(--c-red); }
.price-tag__value {
  position: relative; display: flex; align-items: center; gap: 0.5em; width: 100%;
  padding: 0.3em 1.3em; border: 3px solid var(--c-black); border-radius: var(--radius-type-lg);
  background: var(--c-red); color: var(--c-white);
  font-size: clamp(22px, 3vw, 40px); font-weight: 800;
}
.price-tag__value::before, .price-tag__value::after {
  content: ""; position: absolute; top: 50%; width: 0.22em; height: 0.22em; margin-top: -0.11em; border-radius: var(--radius-round); background: var(--c-white);
}
.price-tag__value::before { left: 0.45em; }
.price-tag__value::after { right: 0.45em; }
.price-tag__value span:first-child { font-weight: 300; }
.spirit-list { max-width: 1000px; margin: 0 auto; }
.spirit-list li { break-inside: avoid; padding: 0.2em 0; font-size: clamp(17px, 2.3vw, 28px); font-weight: 400; line-height: 1.3; color: var(--c-black); }
.spirit-list .dot { color: var(--c-red-bright); }

/* Chupitos */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px clamp(10px, 2vw, 24px); max-width: 1000px; }
.shot-card {
  position: relative; min-height: 7rem; padding: 1em 1.1em;
  border: 3px solid var(--c-black); border-radius: var(--radius-lg); background: var(--c-white);
}
.shot-card h3 { margin: 0; font-size: clamp(19px, 3vw, 38px); font-weight: 800; line-height: 1.15; color: var(--c-red); }
.shot-card p { margin: 0.5em auto 0; max-width: 14em; font-size: clamp(14px, 1.9vw, 24px); line-height: 1.3; text-align: center; color: var(--c-black); }
.shot-card__sticker--miedo { top: -1em; right: -0.5em; rotate: 33deg; }
.shot-card__sticker--first { top: -3.4em; right: 2%; padding: 0.5em 1.1em; border-radius: var(--radius-round); rotate: -10deg; }
.shot-card__sticker--later { top: -3em; left: 8%; rotate: -22deg; }
.shot-card__glass { position: absolute; z-index: 2; top: -1.5em; right: 0.2em; font-size: clamp(36px, 6vw, 80px); line-height: 1; rotate: -8deg; }

/* Móvil: pegatinas por encima de las tarjetas para no tapar títulos */
@media (max-width: 599px) {
  .shots { padding-top: 1.2rem; }
  .shot-card__sticker { font-size: 12px; }
  .shot-card__sticker--miedo { top: -2.6em; right: -0.4em; }
  .shot-card__sticker--later { top: -3.6em; left: 2%; }
  .shot-card__sticker--first { top: -3.2em; right: 0; }
}

/* Tablet y escritorio */
@media (min-width: 600px) {
  .wine-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
  .tier__prices { flex-wrap: nowrap; }
}
@media (min-width: 920px) {
  .cocktails { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .shots { gap: 20px 24px; }
}

/* ==========================================================================
   Subpágina Tapas / Comida (tapas-comida.html)
   ========================================================================== */
.page-food { background: var(--c-white); }

/* Hero */
.food-hero__title {
  position: relative; display: grid; justify-items: center;
  --food-h1: clamp(52px, 11vw, 160px);
  padding: 0 var(--gutter) clamp(40px, 7vw, 100px);
}
.food-hero__h1 { font-size: var(--food-h1); }
.food-hero__h1 .l2 { color: var(--c-white); }
.food-hero__ribbon {
  position: relative; z-index: 1;
  margin-top: calc(var(--food-h1) * -0.1);
  padding: 0.45em 1.1em;
  background: var(--c-teal); color: var(--c-white);
  border: clamp(2px, 0.3vw, 4px) solid var(--c-white);
  font-size: clamp(11px, 1.7vw, 22px); font-weight: 800; line-height: 1.2; text-align: center;
  rotate: -3deg;
}

/* Bloques de la carta */
.food { padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(40px, 6vw, 80px); background: var(--c-white); }
.food-block { width: 100%; max-width: var(--w-dish); margin: 0 auto clamp(24px, 4vw, 40px); }
.food-block__dishes { display: grid; gap: 16px; }
.food-block--plain .food-block__dishes { gap: 24px; }

/* Paneles de color */
.food-block--panel {
  --panel: var(--c-red);
  background-color: var(--panel);
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.food-block--panel .food-block__dishes { padding: 20px 16px 24px; gap: 16px; }
.food-block--red,
.food-block--teal,
.food-block--amber {
  background-image: linear-gradient(color-mix(in srgb, var(--panel) 50%, transparent), color-mix(in srgb, var(--panel) 50%, transparent)), var(--pattern);
}
.food-block--red { --panel: var(--c-red); --pattern: url("../img/comida/patron-circulos-rojo.png"); }
.food-block--teal { --panel: var(--c-teal); --pattern: url("../img/comida/patron-lineas-verde.png"); }
.food-block--amber { --panel: var(--c-yellow); --pattern: url("../img/comida/patron-circulos-amarillo.png"); }
.food-block--mustard { --panel: var(--c-yellow); }
.food-block--mustard .food-block__dishes { padding: 16px 12px; gap: 12px; }

.food-block__label {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0; max-width: none; padding: 14px 24px;
  background: var(--c-yellow); color: var(--c-red);
  font-size: clamp(26px, 7vw, 38px); font-weight: 800; line-height: 1; letter-spacing: 4px; text-transform: uppercase;
}
.food-block__label span { font-size: 18px; letter-spacing: 0; }

/* Plato */
.dish {
  --dish-title: var(--c-red);
  --dish-desc: var(--c-gray);
  --dish-size: var(--c-teal-dark);
  --dish-units: var(--c-gray);
  --dish-line: var(--c-line);
  --dish-price: var(--c-black);
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--c-white); border-radius: var(--radius-md);
  padding-bottom: 20px; border-bottom: 2px solid var(--c-line);
}
.dish__media { position: relative; flex: 0 0 130px; width: 130px; height: 130px; }
.dish__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.dish__badge {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--c-orange); color: var(--c-black);
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px; line-height: 1.3; text-transform: uppercase;
  box-shadow: 0 2px 4px var(--c-black-a35);
}
.dish__body { flex: 1; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: 4px; padding: 2px 0; }
.dish__title { margin: 0; font-size: clamp(18px, 5vw, 22px); font-weight: 800; line-height: 1.15; color: var(--dish-title); }
.dish__desc { margin: 0; max-width: none; text-align: left; font-size: clamp(11px, 3vw, 12px); font-weight: 400; line-height: 1.4; color: var(--dish-desc); }
.dish__sizes { display: grid; grid-template-columns: repeat(3, 1fr); margin: 6px 0 0; text-align: center; }
.dish__sizes > div { display: grid; align-content: start; justify-items: center; gap: 2px; }
.dish__sizes dt { margin: 0; font-size: clamp(13px, 4vw, 16px); font-weight: 800; line-height: 1; color: var(--dish-size); }
.dish__sizes dd { margin: 0; }
.dish__units { font-size: clamp(9px, 2.5vw, 11px); font-weight: 400; line-height: 1.3; color: var(--dish-units); }
.dish__price {
  width: 100%; margin-top: 5px !important; padding-top: 3px;
  border-top: 1px solid var(--dish-line);
  font-size: clamp(16px, 4.5vw, 20px); font-weight: 800; line-height: 1.2; color: var(--dish-price);
}
.dish__sizes--text { grid-template-columns: repeat(2, 1fr); text-align: left; gap: 0 8px; }
.dish__sizes--text > div { justify-items: start; }
.dish__sizes--text dt { font-size: clamp(14px, 4vw, 17px); }
.dish__sizes--text .dish__price { font-size: clamp(17px, 4.5vw, 21px); }

/* Variantes según el panel */
.food-block--red .dish,
.food-block--teal .dish {
  --dish-title: var(--c-yellow);
  --dish-desc: var(--c-white-a82);
  --dish-units: var(--c-white-a65);
  --dish-line: var(--c-white-a20);
  --dish-price: var(--c-white);
  padding: 12px; gap: 14px;
  background: var(--c-white-a07); border: 1px solid var(--c-white-a15);
}
.food-block--red .dish { --dish-size: var(--c-teal); } /* teal-dark no se lee sobre rojo; contraste pendiente en PLAN 3.2.7 */
.food-block--teal .dish { --dish-title: var(--c-white); --dish-size: var(--c-white); }
.food-block--mustard .dish { --dish-price: var(--c-black); padding: 12px; border-bottom: 4px solid var(--c-red); }
.food-block--amber .dish {
  --dish-desc: var(--c-black);
  --dish-size: var(--c-red);
  --dish-units: var(--c-black);
  --dish-line: var(--c-black-a12);
  --dish-price: var(--c-black);
  padding: 12px; gap: 14px;
  background: var(--c-white-a30); border: 1px solid var(--c-white-a50);
}

/* Pide a domicilio */
.delivery {
  padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(40px, 6vw, 80px);
  background: var(--c-teal) url("../img/comida/fondo-rombos-verde.webp") center / cover;
  color: var(--c-white); text-align: center;
}
.delivery__brand { margin: 0; max-width: none; font-size: clamp(28px, 4vw, 52px); font-weight: 800; letter-spacing: 0.06em; line-height: 1.1; color: var(--c-black); }
.delivery__title { margin: 0.2em auto 0; max-width: 8em; font-size: clamp(34px, 5vw, 68px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; color: var(--c-white); }
.delivery__rule { width: 76px; margin: clamp(24px, 3.5vw, 40px) auto; border: 0; border-top: 2px solid var(--c-white); }
.delivery__lead { margin: 0 auto; font-size: clamp(16px, 1.8vw, 24px); font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-white); }
.delivery__apps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: clamp(20px, 3vw, 36px); }
.app {
  position: relative; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-black); font-weight: 800; line-height: 1.05;
}
.app::before, .app::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--c-white); }
.app--justeat {
  width: clamp(150px, 22vw, 230px); height: clamp(84px, 12.5vw, 130px); z-index: 1;
  border-radius: var(--radius-round); background: var(--c-black); color: var(--c-justeat);
  font-size: clamp(20px, 3vw, 34px); font-style: italic; rotate: 4deg;
}
.app--justeat::before { top: 18%; left: 42%; }
.app--justeat::after { bottom: 14%; left: 30%; }
.app--glovo {
  width: clamp(140px, 20vw, 210px); height: clamp(72px, 10.5vw, 108px); margin-inline: -12px;
  border-radius: var(--radius-lg); background: var(--c-glovo); color: var(--c-white);
  font-size: clamp(28px, 4.4vw, 52px); font-weight: 400; letter-spacing: -0.02em; rotate: -7deg;
}
.app--glovo::before { top: 10px; left: 10px; }
.app--glovo::after { bottom: 10px; left: 10px; }
.app--uber {
  width: clamp(120px, 17vw, 190px); height: clamp(72px, 10.5vw, 112px); z-index: 1; margin-left: -14px;
  border-radius: var(--radius-round); background: var(--c-red); color: var(--c-white);
  font-size: clamp(20px, 3vw, 34px); text-align: center; rotate: -2deg;
}
.app--uber::before { top: 55%; left: 8%; }
.app--uber::after { top: 60%; right: 6%; }

/* ==========================================================================
   Ofertas (menuoffers/)
   ========================================================================== */
.page-offers { background: var(--c-white); }

/* Hero: mismo fondo de puntos que Comida y Bebidas, con h1 de marca */
.offers-hero__h1 { font-size: clamp(52px, 11vw, 160px); padding-top: clamp(8px, 2vw, 24px); }
.offers-hero__h1 .l2 { color: var(--c-white); }

/* Bloque de oferta */
.offer { background: var(--c-white); padding: clamp(40px, 6vw, 88px) var(--gutter); }
.offer__inner {
  max-width: 1024px; margin: 0 auto;
  display: grid; justify-items: center; gap: clamp(20px, 3vw, 40px);
  text-align: center;
}
.offer__title-wrap { position: relative; isolation: isolate; }

/* Títulos de oferta: la firma de 30 capas en rojo y crema, en minúsculas como el original */
.title-delocos--crema { font-size: clamp(54px, 10vw, 140px); line-height: 0.9; text-transform: none; }
.title-delocos--crema .l1 { color: var(--c-red); }
.title-delocos--crema .l2 { color: var(--c-cream); }
.offer__title--jarra { text-transform: uppercase; font-size: clamp(44px, 8vw, 110px); }
.offer__title--jarra .l2 { color: var(--c-orange); }

/* "COMBO" / "OFERTAS": rótulo plano en rojo, sin sombra */
.offer__kicker {
  display: block;
  font-size: clamp(28px, 4.4vw, 60px); font-weight: 800; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-red);
}
.title-delocos .offer__kicker {
  font-size: 0.36em; margin-bottom: 0.2em;
  text-shadow: none; -webkit-text-stroke: 0;
}

/* Etiquetas con dos puntos: BEBIDAS, JIRAFAS (negra) y OFERTA (crema) */
.offer__tag {
  position: relative; display: inline-block; margin: 0; max-width: none;
  padding: 0.18em 1.1em;
  font-size: clamp(26px, 4vw, 52px); font-weight: 800; line-height: 1.1; text-transform: uppercase;
  color: var(--c-white); background: var(--c-black);
  border-radius: var(--radius-md);
  rotate: -3deg;
}
.offer__tag::before,
.offer__tag::after {
  content: ""; position: absolute; top: 50%;
  width: 0.2em; height: 0.2em; border-radius: var(--radius-round);
  background: currentColor; translate: 0 -50%;
}
.offer__tag::before { left: 0.45em; }
.offer__tag::after { right: 0.45em; }
.offer__tag--lg { font-size: clamp(34px, 6vw, 80px); }
.offer__tag--cream {
  font-size: clamp(18px, 2.4vw, 30px);
  color: var(--c-black); background: var(--c-cream);
  border: 2px solid var(--c-black); border-radius: var(--radius-sm);
}
.offer__heading { display: grid; justify-items: center; gap: 0.15em; }

.offer__when { margin: 0 auto; max-width: none; font-size: clamp(22px, 3.2vw, 40px); line-height: 1.2; }

/* Estrella naranja con contorno negro (decorativa) */
.offer-burst {
  --burst: polygon(50% 0%, 59.2% 24.6%, 82.1% 11.7%, 73.4% 36.5%, 99.2% 41.3%, 76.6% 54.7%, 93.3% 75%, 67.4% 70.7%, 67.1% 97%, 50% 77%, 32.9% 97%, 32.6% 70.7%, 6.7% 75%, 23.4% 54.7%, 0.8% 41.3%, 26.6% 36.5%, 17.9% 11.7%, 40.8% 24.6%);
  position: absolute; z-index: -1;
  width: clamp(110px, 17vw, 230px); aspect-ratio: 1;
  background: var(--c-black); clip-path: var(--burst);
}
.offer-burst::before { content: ""; position: absolute; inset: 7%; background: var(--c-orange); clip-path: var(--burst); }
.offer-burst--ofertapa { right: -14%; top: -4%; rotate: 12deg; }
.offer-burst--jirafas { left: -16%; top: -12%; width: clamp(80px, 11vw, 150px); rotate: -8deg; }

/* Tarjeta de precio: panel rojo + caja crema con sombra desplazada */
.offer-card {
  --shift: clamp(6px, 0.9vw, 12px);
  display: grid; grid-template-columns: 1fr auto;
  width: min(100%, 620px);
  background: var(--c-red);
  border: 3px solid var(--c-black); border-radius: var(--radius-lg);
  box-shadow: var(--shift) var(--shift) 0 var(--c-black);
  text-align: left;
}
.offer-card__body { display: grid; align-content: center; justify-items: start; gap: 0.5em; padding: 0.7em 1em 0.8em; }
.offer-card p { margin: 0; max-width: none; text-align: left; }
.offer-card__what { font-size: clamp(20px, 3.2vw, 38px); line-height: 1.1; color: var(--c-white); }
.offer-card__what strong { font-weight: 800; }
.offer-card .offer-card__price {
  display: flex; align-items: center; justify-content: center;
  min-width: 3.6em; margin: -3px -3px -3px 0; padding: 0.15em 0.4em;
  font-size: clamp(34px, 5.6vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  color: var(--c-red); background: var(--c-cream);
  border: 3px solid var(--c-black); border-radius: var(--radius-lg);
}
.sticker--orange { background: var(--c-orange); color: var(--c-black); font-weight: 400; text-transform: none; }
.offer-card__note { --rot: -3deg; font-size: clamp(12px, 1.5vw, 18px); }

/* Jirafas: foto de la torre + dos tarjetas por marca */
.jirafas {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(8px, 2vw, 24px); width: min(100%, 760px);
}
.jirafas__img { width: clamp(90px, 18vw, 220px); height: auto; }
.jirafas__list { display: grid; gap: clamp(24px, 4vw, 48px); }
.offer-card--jirafa:first-child { rotate: -3deg; }
.offer-card--jirafa .offer-card__price { min-width: 3em; }
.offer-card__brand { font-size: clamp(13px, 1.6vw, 20px); font-weight: 800; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-white); }
.offer-card__lead { font-size: clamp(18px, 2.8vw, 34px); font-weight: 800; line-height: 1; color: var(--c-orange); white-space: nowrap; }
@media (min-width: 600px) {
  .offer-card--jirafa .offer-card__body { grid-template-columns: auto 1fr; align-items: center; gap: 1em; }
}

/* Separador de guiones */
.offer-sep {
  width: min(100% - 2 * var(--gutter), 1224px); margin: 0 auto;
  border: 0; border-top: clamp(4px, 0.5vw, 6px) dashed var(--c-black);
}

/* Reto de dardos: fondo oscuro y diana al pie */
.offer--dark { background: color-mix(in srgb, var(--c-black) 88%, var(--c-white)); padding-bottom: 0; }
.offer__lead { margin: 0 auto; max-width: none; font-size: clamp(18px, 2.6vw, 32px); line-height: 1.2; color: var(--c-white); }
.offer__diana { display: block; width: min(100%, 560px); height: auto; margin-top: clamp(-24px, -2vw, -8px); }

/* Tú das la idea: fondo verde de rombos y formulario */
.idea {
  padding: clamp(40px, 6vw, 96px) var(--gutter);
  background: var(--c-teal) url("../img/comida/fondo-rombos-verde.webp") center / cover;
}
.idea__inner { max-width: 1224px; margin: 0 auto; display: grid; align-items: center; gap: clamp(24px, 5vw, 80px); }
.idea__photo { width: 100%; max-width: 520px; height: auto; justify-self: center; border-radius: var(--radius-md); }
.idea__title { font-size: clamp(24px, 3vw, 40px); font-weight: 800; line-height: 1.25; color: var(--c-black); }
.idea__body p { margin-top: 16px; max-width: none; text-align: left; }
.form-idea { display: grid; gap: 8px; margin-top: clamp(24px, 3vw, 40px); }
.form-idea label { margin-top: 8px; font-size: 16px; color: var(--c-black); }
.form-idea input,
.form-idea textarea {
  width: 100%; padding: 0 20px;
  font-family: var(--font); font-size: 16px; color: var(--c-black);
  background: var(--c-white); border: 2px solid transparent; border-radius: var(--radius-pill);
  transition: border-color var(--t-fast);
}
.form-idea input { min-height: 48px; }
.form-idea textarea { min-height: 120px; padding-top: 14px; border-radius: var(--radius-lg); resize: vertical; }
.form-idea input::placeholder,
.form-idea textarea::placeholder { color: var(--c-gray); }
.form-idea input:focus,
.form-idea textarea:focus { border-color: var(--c-black); }
.form-idea .btn-black { justify-self: center; margin-top: 24px; min-height: 51px; padding-inline: 2em; }
@media (min-width: 920px) {
  .idea__inner { grid-template-columns: 5fr 6fr; }
}

/* Barra de staff: variante negra del aviso de ropa */
.promo-bar--dark { background: var(--c-black); }
a.promo-bar__badge { text-decoration: none; transition: background-color var(--t-fast); }
@media (hover: hover) { a.promo-bar__badge:hover { background: var(--c-teal-dark); } }

/* ==========================================================================
   Rediseño de la home · componentes comunes (3.3.1)
   Lenguaje pop de la marca: borde negro, sombra extruida plana, giros leves.
   Móvil primero: una columna; 600 px y 920 px abren las rejillas.
   ========================================================================== */

/* ---------- Bloque de la home ---------- */
.hsec { padding: var(--space-section) var(--gutter); }
.hsec__wrap { max-width: var(--w-home); margin-inline: auto; }
.hsec__head {
  display: grid;
  gap: calc(var(--space-block) / 2);
  justify-items: center;
  margin-bottom: var(--space-block);
  text-align: center;
}
.hsec__head p { max-width: 40rem; margin: 0 auto; text-align: center; }
.title-delocos--h2 { font-size: var(--fs-h2-home); margin: 0 0 0.2em; } /* reserva la sombra extruida */

/* ---------- Superficie pop: borde negro + sombra extruida ---------- */
.pop {
  background: var(--c-white);
  border: var(--pop-border) solid var(--c-black);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-shift) var(--pop-shift) 0 var(--pop-color, var(--c-black)); /* --pop-color: sombra sobre fondos oscuros */
}
/* Enlace o botón con forma pop: se levanta al pasar y se hunde al pulsar */
a.pop,
button.pop {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
@media (hover: hover) {
  a.pop:hover,
  button.pop:hover {
    transform: translate(-3px, -3px);
    box-shadow: calc(var(--pop-shift) + 3px) calc(var(--pop-shift) + 3px) 0 var(--pop-color, var(--c-black));
  }
}
a.pop:active,
button.pop:active {
  transform: translate(var(--pop-shift), var(--pop-shift));
  box-shadow: 0 0 0 var(--pop-color, var(--c-black));
}

/* ---------- Tarjeta ---------- */
.card-pop { display: grid; align-content: start; overflow: hidden; }
.card-pop__media { aspect-ratio: var(--ratio, 4 / 3); background: var(--c-black); }
.card-pop__media img,
.card-pop__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-pop__body { display: grid; gap: 0.5em; padding: 1em 1.2em 1.3em; }
.card-pop__title {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-h3-home);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
.card-pop__body p { margin: 0; max-width: none; text-align: left; }

/* ---------- Marco de foto o vídeo (como pegado en la pared) ---------- */
.frame {
  overflow: hidden;
  background: var(--c-black);
  border: var(--pop-border) solid var(--c-black);
  border-radius: var(--radius-md);
  box-shadow: var(--pop-shift) var(--pop-shift) 0 var(--c-black);
  rotate: var(--rot, 0deg);
}
.frame img,
.frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Slider horizontal con scroll-snap (dedo, rueda o flechas) ---------- */
.slider { display: grid; grid-template-columns: 1fr; align-items: center; gap: 12px; }
.slider__track {
  display: flex;
  gap: var(--slide-gap, 16px);
  margin: 0;
  padding: 4px var(--pop-shift) calc(var(--pop-shift) + 6px) 4px; /* deja ver la sombra */
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { flex: 0 0 var(--slide-w, 180px); scroll-snap-align: start; }
.slider__btn { display: none; }
@media (hover: hover) and (min-width: 600px) {
  .slider { grid-template-columns: auto 1fr auto; }
  .slider__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--c-black);
    background: var(--c-yellow);
    border: 2px solid var(--c-black);
    border-radius: var(--radius-round);
    cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  }
  .slider__btn:hover { background: var(--c-black); color: var(--c-white); }
  .slider__btn:active { transform: scale(0.94); }
  .slider__btn .icon { font-size: 22px; }
  .slider__btn--prev .icon { rotate: 180deg; }
}

/* ---------- Galería vertical (vídeos y fotos de móvil, 9:16) ---------- */
.vgallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(72%, 280px);
  gap: var(--space-block);
  padding: 4px var(--pop-shift) calc(var(--pop-shift) + 6px) 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.vgallery::-webkit-scrollbar { display: none; }
.vgallery > * { aspect-ratio: 9 / 16; scroll-snap-align: center; }
@media (min-width: 920px) {
  .vgallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    overflow: visible;
  }
}

/* ---------- Bento: tantas celdas como contenido ---------- */
.bento { display: grid; gap: var(--space-block); grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--wide { grid-column: span 2; }
}
@media (min-width: 920px) {
  .bento { grid-template-columns: repeat(var(--cols, 4), 1fr); grid-auto-rows: minmax(180px, auto); }
  .bento__cell--tall { grid-row: span 2; }
  .bento__cell--big { grid-column: span 2; grid-row: span 2; }
}

/* ---------- Acordeón (preguntas frecuentes) con <details> ---------- */
.faq { display: grid; gap: 14px; max-width: var(--w-narrow); margin-inline: auto; }
.faq__item { border-radius: var(--radius-md); overflow: hidden; }
.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.2em;
  cursor: pointer;
  list-style: none;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__q {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
}
.faq__icon { font-size: 22px; transition: rotate var(--t-fast); }
.faq__item[open] .faq__icon { rotate: 180deg; }
.faq__item[open] > summary { background: var(--c-yellow); }
.faq__a { padding: 0 1.2em 1.2em; }
.faq__a p { margin: 1em 0 0; max-width: none; text-align: left; }

/* ==========================================================================
   Home · Comida por tallas (3.3.4) · título con firma
   Escalera de tallas: cada tarjeta es más grande que la anterior (S < L < XL).
   ========================================================================== */
.tallas { background: var(--c-teal); }
/* Móvil: S y L lado a lado (la S algo más estrecha) y la XL debajo, a todo el ancho */
.tallas__list {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  align-items: end;
  gap: var(--space-block) 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.talla--xl { grid-column: 1 / -1; --ratio: 2 / 1; } /* a todo el ancho, en franja */
.talla .card-pop__body { padding: 0.8em 0.9em 1em; }
.talla__price { white-space: nowrap; }
.talla__price { font-size: clamp(20px, 2.6vw, 32px); font-weight: 800; line-height: 1.1; color: var(--c-red); }
.talla__ej { font-size: clamp(13px, 1.2vw, 15px); color: var(--c-gray); }
/* Bloque de color con la letra de la talla (sin foto): amarillo, naranja y rojo */
.talla__media { display: grid; place-items: center; }
.talla__media span {
  font-family: var(--font);
  font-size: clamp(96px, 12vw, 168px);
  font-weight: 800;
  line-height: 1;
}
.talla__media--s { background: var(--c-yellow); color: var(--c-black); }
.talla__media--l { background: var(--c-orange); color: var(--c-black); }
.talla__media--xl { background: var(--c-red); color: var(--c-cream); }
@media (min-width: 600px) {
  .tallas__list { grid-template-columns: 0.8fr 0.9fr 1fr; column-gap: var(--space-block); }
  .talla--xl { grid-column: auto; --ratio: 4 / 3; }
  .talla .card-pop__body { padding: 1em 1.2em 1.3em; }
}
@media (min-width: 920px) {
  .tallas__list { grid-template-columns: 0.78fr 0.92fr 1.06fr; gap: clamp(28px, 3vw, 48px); }
}

/* Entrada de las tarjetas: salen de más pequeña a más grande (S, luego L, luego XL),
   creciendo desde abajo con un pequeño rebote. Sustituye al revelado normal. */
.js .talla.reveal {
  opacity: 0;
  transform: scale(0.55);
  transform-origin: 50% 100%;
  transition: opacity 0.4s var(--ease-reveal), transform 0.7s cubic-bezier(0.34, 1.45, 0.64, 1);
  transition-delay: calc(var(--i, 0) * 220ms);
}
.js .talla.reveal.is-visible { opacity: 1; transform: none; }

/* Carrusel de tapas: avanza solo de una en una (main.js), nombre arriba sobre velo oscuro */
.tapas-carrusel { position: relative; margin-top: var(--space-block); }
.tapas-carrusel__track {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 4px var(--pop-shift) calc(var(--pop-shift) + 6px) 4px; /* deja ver la sombra */
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tapas-carrusel__track::-webkit-scrollbar { display: none; }
.tapa {
  position: relative;
  flex: 0 0 clamp(200px, 21vw, 260px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-black);
  border: var(--pop-border) solid var(--c-black);
  border-radius: var(--radius-md);
  box-shadow: var(--pop-shift) var(--pop-shift) 0 var(--c-black);
  scroll-snap-align: start;
}
.tapa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tapa::before { /* velo oscuro, más intenso arriba para que el nombre se lea */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, var(--c-black-a75), var(--c-black-a35) 45%, var(--c-black-a35));
}
.tapa__name {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: 0.9em 1em;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: left;
  color: var(--c-white);
}
/* Flechas arriba a la derecha, con el estilo de las de .slider pero visibles también en móvil */
.tapas-carrusel__flechas { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }
.tapas-carrusel__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--c-black);
  background: var(--c-yellow);
  border: 2px solid var(--c-black);
  border-radius: var(--radius-round);
  box-shadow: 3px 3px 0 var(--c-black);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.tapas-carrusel__flecha .icon { font-size: 22px; }
.tapas-carrusel__flecha--prev .icon { rotate: 180deg; }
@media (hover: hover) {
  .tapas-carrusel__flecha:hover { background: var(--c-black); color: var(--c-white); }
}
.tapas-carrusel__flecha:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--c-black); }
.tapas-carrusel__flecha[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.tapas-carrusel__flecha[aria-disabled="true"]:hover { background: var(--c-yellow); color: var(--c-black); }
.tapas-carrusel__flecha[aria-disabled="true"]:active { transform: none; box-shadow: 3px 3px 0 var(--c-black); }

/* Barra de progreso: riel gris fino y tramo negro (amarillo al tocarlo); zona de toque de 28px */
.tapas-carrusel__barra {
  --bar-x: 0;
  --bar-w: 0.25;
  position: relative;
  height: 28px;
  margin-top: 4px;
  cursor: pointer;
  touch-action: none;
}
.tapas-carrusel__barra::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 6px;
  translate: 0 -50%;
  background: var(--c-black-a35);
  border-radius: var(--radius-pill);
}
.tapas-carrusel__pulgar {
  position: absolute;
  top: 50%;
  left: calc(var(--bar-x) * (100% - var(--bar-w) * 100%));
  width: calc(var(--bar-w) * 100%);
  height: 14px;
  translate: 0 -50%;
  background: var(--c-black);
  border: 2px solid var(--c-black);
  border-radius: var(--radius-pill);
  transition: left 0.45s var(--ease-reveal), width 0.45s var(--ease-reveal), background-color var(--t-fast);
}
@media (hover: hover) {
  .tapas-carrusel__barra:hover .tapas-carrusel__pulgar { background: var(--c-yellow); }
}
.tapas-carrusel.is-dragging .tapas-carrusel__pulgar { background: var(--c-yellow); }
.tapas-carrusel.is-dragging .tapas-carrusel__pulgar { transition: background-color var(--t-fast); }
.tapas-carrusel.is-dragging .tapas-carrusel__track { scroll-snap-type: none; }
@media (prefers-reduced-motion: reduce) {
  .tapas-carrusel__pulgar { transition: none; }
}
.tapas-carrusel__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 8px;
  padding: 0.35em 0.9em;
  font-family: var(--font);
  font-size: 14px;
  color: var(--c-black);
  background: var(--c-white);
  border: 2px solid var(--c-black);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.tapas-carrusel__toggle:hover { background: var(--c-yellow); }
.tapas-carrusel__toggle:active { transform: scale(0.96); }

/* ==========================================================================
   Título plano (sin la firma extruida): mayúsculas, Poppins 800, una palabra
   destacada en color. Para los h2 que no llevan firma (tres niveles de título).
   ========================================================================== */
.heading-plano {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-h-xl);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-black);
}

/* ==========================================================================
   Home · Bebida (3.3.5) · título plano sobre fondo negro
   Foto panorámica y tres categorías que pisan su borde inferior.
   ========================================================================== */
.bebida { --pop-color: var(--c-white); background: var(--c-black); overflow-x: clip; } /* la tarjeta que sale del mazo no crea scroll lateral */
.bebida .heading-plano,
.bebida .hsec__head p { color: var(--c-white); }
.bebida__photo { aspect-ratio: 16 / 9; max-width: 960px; margin: 0 auto; border-color: var(--c-white); box-shadow: none; }
.bebida__photo img { object-position: 50% 50%; }
.bebida__cats {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  max-width: 1080px; /* algo más anchas que la foto: sobresalen por los lados */
  margin: calc(-1 * clamp(20px, 3vw, 44px)) auto 0; /* pisan solo el borde inferior de la foto */
  padding: 0 clamp(12px, 4vw, 56px);
  list-style: none;
}
.bebida__cat { display: grid; gap: 0.35em; height: 100%; padding: 1em 1.2em 1.1em; }
.bebida__cat p { margin: 0; max-width: none; text-align: left; }
.bebida__cat--cerveza { background: var(--c-yellow); }
.bebida__cat--coctel { background: var(--c-cream); }
.bebida__cat--copa { background: var(--c-orange); }
.bebida__go { display: inline-flex; align-items: center; gap: 0.2em; margin-top: 0.3em; font-size: 15px; font-weight: 800; text-transform: uppercase; }
.bebida__go .icon { font-size: 1.1em; transition: translate var(--t-fast); }
@media (hover: hover) { .bebida__cat:hover .bebida__go .icon { translate: 4px 0; } }
@media (min-width: 600px) {
  .bebida__cats { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 920px) {
  .bebida__photo { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Home · Franja de Ofertas (3.3.6) · título crema (como en menuoffers/)
   ========================================================================== */
.promo-franja { background: var(--c-red); }
.promo-franja .title-delocos--crema .l1 { color: var(--c-yellow); } /* colores invertidos: fondo rojo, «mojitos» amarillo */
.promo-franja__when,
.promo-franja__more { color: var(--c-white); }
.promo-franja__inner { display: grid; justify-items: center; gap: clamp(16px, 2vw, 24px); text-align: center; }
.promo-franja__title { margin: 0 0 0.22em; font-size: clamp(48px, 8vw, 120px); } /* reserva la sombra extruida */
.nowrap { white-space: nowrap; }
.promo-franja__burst { right: -14%; top: -22%; rotate: 12deg; }
.promo-franja__when { margin: 0; max-width: none; font-size: clamp(22px, 3vw, 36px); font-weight: 800; line-height: 1.2; }
.promo-franja__more { margin: 0; }

/* ==========================================================================
   Home · Deportes en vivo (3.3.7) · título con firma, fondo crema
   Galería vertical (2 vídeos + foto), tres datos y cinta de ligas en bucle.
   ========================================================================== */
.deportes { background: var(--c-cream); }
.deportes__media { margin-bottom: var(--space-block); }
.deportes__datos {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.deportes__datos li { border-top: var(--pop-border) solid var(--c-black); padding-top: 0.8em; }
.deportes__dato-t {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-h3-home);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-red);
}
.deportes__datos p { margin: 0.3em 0 0; max-width: none; text-align: left; }
@media (min-width: 600px) {
  .deportes__datos { grid-template-columns: repeat(3, 1fr); gap: var(--space-block); }
}

/* Cinta de ligas: dos copias iguales que se desplazan la mitad del total = bucle sin salto */
.ligas { margin: var(--space-section) calc(-1 * var(--gutter)) 0; text-align: center; } /* a sangre: ocupa todo el ancho */
.ligas__viewport {
  overflow: hidden;
  padding-block: 12px;
  background: var(--c-white);
  border-block: var(--pop-border) solid var(--c-black);
}
.ligas__track { display: flex; width: max-content; animation: ligas-scroll 28s linear infinite; }
.ligas__list {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  margin: 0;
  padding: 0 clamp(20px, 3vw, 44px);
  list-style: none;
}
.ligas__list img { display: block; width: auto; height: clamp(44px, 5vw, 56px); }
.ligas:hover .ligas__track,
.ligas:focus-within .ligas__track,
.ligas.is-paused .ligas__track { animation-play-state: paused; }
.ligas__toggle { margin-top: 12px; }
@keyframes ligas-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ligas__track { animation: none; }
  .ligas__viewport { overflow-x: auto; }
  .ligas__list[aria-hidden="true"],
  .ligas__toggle { display: none; }
}

/* Bebida en móvil: mazo de tarjetas (main.js pone .is-deck por debajo de 600 px).
   Todas en la misma celda; --pos 0 es la de delante. Las de detrás asoman algo giradas. */
.bebida__cats.is-deck { padding-bottom: 26px; }
.bebida__cats.is-deck > li {
  grid-area: 1 / 1;
  z-index: calc(10 - var(--pos, 0));
  transform: translateY(calc(var(--pos, 0) * 13px)) scale(calc(1 - var(--pos, 0) * 0.05)) rotate(var(--tilt, 0deg));
  transform-origin: 50% 100%;
  transition: transform 0.35s var(--ease-reveal), opacity 0.35s;
}
.bebida__cats.is-deck > li[data-pos="1"] { --tilt: -3deg; }
.bebida__cats.is-deck > li[data-pos="2"] { --tilt: 3deg; }
.bebida__cats.is-deck > li[data-pos="0"] { touch-action: pan-y; cursor: grab; } /* el dedo en vertical sigue haciendo scroll */
.bebida__cats.is-deck > li.is-dragging { transition: none; cursor: grabbing; }
.bebida__cats.is-deck .bebida__cat { user-select: none; -webkit-user-drag: none; }
.bebida__deck-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.bebida__deck-nav[hidden] { display: none; }
.bebida__hint { font-size: 14px; color: var(--c-white); }

/* ==========================================================================
   Home · Juegos (3.3.8) · título plano · bento de 4 celdas
   Escritorio: dardos grande (2x2), futbolín ancho, cartas y Jenga en color.
   ========================================================================== */
.juegos__bento { margin: 0; padding: 0; list-style: none; }
@media (max-width: 599px) { .juegos__bento { grid-template-columns: 1fr 1fr; } } /* móvil: cartas y Jenga lado a lado */
.juego--dardos,
.juego--futbolin { grid-column: 1 / -1; }
.juego { position: relative; overflow: visible; }
.juego .card-pop__media { border-radius: calc(var(--radius-lg) - var(--pop-border)) calc(var(--radius-lg) - var(--pop-border)) 0 0; overflow: hidden; }
.juego--dardos .card-pop__media { --ratio: 4 / 3; } /* en escritorio llena su celda doble */
.juego--dardos .card-pop__media img { object-position: 50% 35%; } /* dianas y jugadores a la vista */
.juego--futbolin .card-pop__media { --ratio: 4 / 3; }
.juego__sticker { position: absolute; top: -14px; left: -10px; z-index: 2; --rot: -8deg; }
.juego--color { display: grid; align-content: center; justify-items: start; gap: 0.3em; padding: 1.2em 1.3em 1.4em; }
.juego--color p { margin: 0; max-width: none; font-weight: 800; }
.juego__icon { font-size: clamp(44px, 5vw, 64px); }
.juego--cartas { background: var(--c-yellow); }
.juego--jenga { background: var(--c-teal); }
@media (min-width: 920px) {
  .juego--dardos { display: flex; flex-direction: column; }
  .juego--dardos .card-pop__media { flex: 1; min-height: 320px; aspect-ratio: auto; }
  .juego--dardos { grid-column: span 2; }
  .juego--futbolin { grid-column: span 2; grid-template-columns: 1fr 1fr; align-content: stretch; }
  .juego--futbolin .card-pop__media { aspect-ratio: auto; align-self: stretch; min-height: 220px; border-radius: calc(var(--radius-lg) - var(--pop-border)) 0 0 calc(var(--radius-lg) - var(--pop-border)); }
  .juego--futbolin .card-pop__body { align-content: center; }
}
@media (min-width: 600px) and (max-width: 919px) {
  /* tablet: futbolín en horizontal, foto a la izquierda */
  .juego--futbolin { grid-template-columns: 1fr 1fr; align-content: stretch; }
  .juego--futbolin .card-pop__media { aspect-ratio: auto; align-self: stretch; min-height: 220px; border-radius: calc(var(--radius-lg) - var(--pop-border)) 0 0 calc(var(--radius-lg) - var(--pop-border)); }
  .juego--futbolin .card-pop__body { align-content: center; }
}

/* ==========================================================================
   Home · Conoce nuestras áreas (3.3.9) · título plano, fondo amarillo
   Collage de fotos tipo polaroid: marco blanco, pie debajo, giro propio.
   ========================================================================== */
.areas { background: var(--c-yellow); }
.areas__collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.areas__collage > li:first-child { grid-column: 1 / -1; } /* la foto horizontal, a todo el ancho */
.polaroid {
  margin: 0;
  padding: 8px 8px 0;
  background: var(--c-white);
  border: var(--pop-border) solid var(--c-black);
  border-radius: var(--radius-sm);
  box-shadow: var(--pop-shift) var(--pop-shift) 0 var(--c-black);
  rotate: var(--rot, 0deg);
  transition: rotate var(--t-fast), scale var(--t-fast);
}
.polaroid img { display: block; width: 100%; height: auto; border: 2px solid var(--c-black); }
.polaroid figcaption {
  padding: 0.6em 0.3em 0.7em;
  font-family: var(--font);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-black);
}
@media (hover: hover) { .polaroid:hover { rotate: 0deg; scale: 1.03; } }
@media (min-width: 920px) {
  /* escritorio: fotos sueltas como pegadas en la pared, a distinta altura */
  .areas__collage { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 28px 32px; }
  .areas__collage > li { width: 250px; }
  .areas__collage > li:first-child { width: 400px; }
  .areas__collage > li:nth-child(2) { margin-top: 36px; }
  .areas__collage > li:nth-child(4) { margin-top: -12px; }
  .areas__collage > li:nth-child(5) { margin-top: 24px; }
}

/* ==========================================================================
   Home · Eventos privados (3.3.10) · título crema sobre verde
   Texto con pegatinas de datos a un lado y vídeo vertical del salón al otro.
   ========================================================================== */
.eventos { background: var(--c-teal); }
.eventos__inner { display: grid; gap: var(--space-block); align-items: center; }
.eventos__title { margin: 0 0 0.5em; /* la «p» y su sombra no pisan el párrafo */ font-size: clamp(52px, 9vw, 130px); text-align: left; }
.eventos__text > p { max-width: 34rem; margin: 0; text-align: left; }
.eventos__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  margin: 1.4em 0 0;
  padding: 0;
  list-style: none;
}
.eventos__datos .sticker { font-size: clamp(14px, 1.4vw, 18px); }
.eventos__cta { margin-top: 1.6em !important; }
.eventos__nota { margin-top: 0.6em !important; font-size: 15px; }
.eventos__video { width: min(100%, 320px); aspect-ratio: 9 / 16; margin: 0 auto; }
@media (min-width: 920px) {
  .eventos__inner { grid-template-columns: 1fr minmax(0, 340px); gap: clamp(48px, 7vw, 120px); }
  .eventos__video { width: 100%; }
}

/* ==========================================================================
   Home · Por qué elegirnos (3.3.11) · título plano · 4 motivos sin tarjetas
   ========================================================================== */
.porque { background: var(--c-white); }
.porque__lista {
  display: grid;
  gap: var(--space-block);
  margin: 0;
  padding: 0;
  list-style: none;
}
.motivo { display: grid; justify-items: center; gap: 0.5em; text-align: center; }
.motivo__icono {
  display: grid;
  place-items: center;
  width: clamp(84px, 9vw, 112px);
  aspect-ratio: 1;
  border: var(--pop-border) solid var(--c-black);
  border-radius: var(--radius-round);
  box-shadow: calc(var(--pop-shift) * 0.7) calc(var(--pop-shift) * 0.7) 0 var(--c-black);
  font-size: clamp(46px, 5vw, 62px);
  color: var(--c-black);
  transition: rotate var(--t-fast);
}
.motivo__icono--amarillo { background: var(--c-yellow); rotate: -6deg; }
.motivo__icono--rojo { background: var(--c-red); color: var(--c-white); rotate: 5deg; }
.motivo__icono--verde { background: var(--c-teal); rotate: -4deg; }
.motivo__icono--naranja { background: var(--c-orange); rotate: 6deg; }
@media (hover: hover) { .motivo:hover .motivo__icono { rotate: 0deg; } }
.motivo__t {
  margin: 0.4em 0 0;
  font-family: var(--font);
  font-size: var(--fs-h3-home);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}
.motivo p { max-width: 22rem; margin: 0 auto; text-align: center; }
@media (min-width: 600px) { .porque__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .porque__lista { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Home · Reseñas (3.3.12) · título plano sobre rojo
   Nota real de Google en grande; las 3 reseñas llegan con la 3.3.12a.
   ========================================================================== */
.resenas { background: var(--c-red); }
.resenas .heading-plano { color: var(--c-white); }
.resenas__nota {
  display: grid;
  justify-items: center;
  gap: 0.4em;
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 1.6em 1.4em 1.8em;
  text-align: center;
  rotate: -1.5deg;
}
.resenas__nota p { margin: 0; max-width: none; text-align: center; }
.resenas__cifra { font-size: clamp(72px, 10vw, 120px); font-weight: 800; line-height: 1; color: var(--c-black); }
.resenas__estrellas { display: flex; gap: 4px; font-size: clamp(28px, 3vw, 36px); color: var(--c-yellow); }
.resenas__estrellas .icon { stroke: var(--c-black); stroke-width: 1.5; }
.resenas__media-estrella { position: relative; display: inline-flex; }
.resenas__media-estrella .icon:last-child { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); } /* media estrella rellena */
.resenas__total { font-weight: 800; }
.resenas__nota .btn-black { margin-top: 0.8em; }

/* ==========================================================================
   Home · Preguntas frecuentes (3.3.13) · título plano · acordeón .faq
   ========================================================================== */
.preguntas { background: var(--c-bg); }
.faq__a a { color: var(--c-red); font-weight: 800; text-underline-offset: 0.15em; }
.faq__a a:hover { color: var(--c-black); }

/* ==========================================================================
   Home · Ubicación + Tenerife Island (3.3.14)
   Fondo del Teide (ya sin «fixed»), velo oscuro y tarjeta con NAP + mapa con fachada.
   ========================================================================== */
.photo--teide.ubicacion {
  background-image: linear-gradient(var(--c-black-a35), var(--c-black-a35)), url("../img/fondo-teide.webp");
  background-attachment: scroll;
  padding-block: var(--space-section);
}
.ubicacion__card {
  display: grid;
  width: min(100%, 900px);
  margin-top: var(--space-block);
  overflow: hidden;
  color: var(--c-black);
  text-align: left;
}
.ubicacion__datos { display: grid; align-content: center; justify-items: start; gap: 0.6em; padding: 1.4em 1.4em 1.6em; }
.ubicacion__datos address { font-style: normal; font-size: var(--fs-body); line-height: 1.5; }
.ubicacion__card p { margin: 0; max-width: none; color: var(--c-black); text-align: left; }
.ubicacion__mapa {
  position: relative;
  min-height: 280px;
  background-color: var(--c-cream);
  background-image: radial-gradient(var(--c-black-a12) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  border-top: var(--pop-border) solid var(--c-black);
}
.ubicacion__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 760px) {
  .ubicacion__card { grid-template-columns: 1fr 1.3fr; }
  .ubicacion__mapa { border-top: 0; border-left: var(--pop-border) solid var(--c-black); min-height: 320px; }
}

/* ==========================================================================
   Home · Contacto (3.3.15) · errores por campo y estado del envío
   ========================================================================== */
.form-contact .campo { display: grid; gap: 6px; }
.form-contact .campo label { margin-top: 8px; }
.form-contact .campo__error,
.form-contact__estado { margin: 0; max-width: none; font-size: 14px; font-weight: 800; line-height: 1.3; color: var(--c-yellow); }
.form-contact .campo__error:empty,
.form-contact__estado:empty { display: none; }
.form-contact [aria-invalid="true"] { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.form-contact__estado { margin-top: 8px; font-size: 16px; }
.form-contact__estado.is-ok { color: var(--c-white); }
.form-contact .btn-red:disabled { opacity: 0.7; cursor: progress; }