/* ==========================================================================
   OVERFLO POTATO — style.css
   --------------------------------------------------------------------------
   ÍNDICE
   01. RESET
   02. VARIABLES (tokens)      <- se define al elegir la paleta
   03. BASE / TIPOGRAFÍA
   04. UTILIDADES / LAYOUT
   05. ACCESIBILIDAD
   --- SECCIONES (se van agregando una por una) ---
   06. HEADER / NAV
   07. HERO
   09. MARQUEE
   10. ORDER ONLINE
   11. PAGE HEADER (About Us)
   12. ABOUT US (contenido)
   13. POPULAR DISHES
   14. GALLERY
   15. MENÚ (menu.html)
   16. GOOGLE REVIEWS
   17. YELP
   18. MAPA
   18.1 PRÓXIMAMENTE
   19. PANTALLA DE CARGA
   20. BOTÓN FLOTANTE
   21. FOOTER
   ========================================================================== */


/* ==========================================================================
   01. RESET
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Los anclajes no quedan tapados por el header fijo. */
  scroll-padding-top: var(--header-h);
  /* El recorte va también en <html>: ponerlo solo en <body> no impide
     el arrastre lateral en iOS. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  max-width: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Una palabra larguísima (un correo, una URL) no debe empujar la
     página a lo ancho. */
  overflow-wrap: break-word;
}

img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.15;
  text-wrap: balance;
  font-weight: 700;
}

p {
  text-wrap: pretty;
}

table {
  border-collapse: collapse;
  width: 100%;
}


/* ==========================================================================
   02. VARIABLES (tokens)
   Placeholders neutros — se reemplazan al definir la identidad visual.
   ========================================================================== */

:root {
  /* --- Colores --- */
  --color-brand:        #E1141A;  /* rojo del logo (muestreado del PNG) */
  --color-brand-dark:   #B00F14;
  --color-accent:       #E8A33D;  /* dorado mantequilla / queso */
  --color-text:         #1C1613;
  --color-text-muted:   #5E524B;
  --color-bg:           #FFFFFF;
  --color-bg-alt:       #F7F2EC;
  --color-border:       #E4DAD0;
  --color-nav:          #171210;  /* barra de navegación oscura */
  --color-nav-line:     rgba(255, 255, 255, 0.12);
  --color-dark:         #0C0A09;  /* fondo de secciones oscuras (hero) */
  --color-on-dark:      #FFFFFF;
  --color-on-dark-mut:  rgba(255, 255, 255, 0.72);

  /* --- Tipografía --- */
  --font-heading: "Anton", "Arial Narrow", system-ui, sans-serif;  /* condensada, títulos */
  --font-body:    "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida: se adapta sola de móvil a desktop */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-lg:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-xl:   clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-2xl:  clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);

  /* --- Espaciado --- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(3rem, 8vw, 6rem);   /* padding vertical de secciones */

  /* --- Layout --- */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* --- Otros --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 3px rgba(28, 22, 19, 0.08);
  --shadow-md: 0 6px 20px rgba(28, 22, 19, 0.10);
  --shadow-lg: 0 16px 40px rgba(28, 22, 19, 0.14);
  --transition: 0.3s ease;
  --header-h: 112px;   /* valor de arranque; main.js lo ajusta al alto real */
}


/* ==========================================================================
   03. BASE / TIPOGRAFÍA
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Compensa el header fijo para que no tape el contenido. */
  padding-top: var(--header-h);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }


/* ==========================================================================
   04. UTILIDADES / LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-3xl);
}

.text-center { text-align: center; }

/* Entrada al hacer scroll — main.js añade .is-visible.
   Va bajo .js (clase que pone el script del <head>): sin JS el contenido
   se ve siempre, nunca queda invisible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}


/* --- Encabezado de sección (reutilizable) --- */

.section__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-align: center;
  color: var(--color-brand);
}

.section__title {
  margin-top: var(--space-xs);
  font-size: clamp(2rem, 1rem + 4vw, 3.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  text-align: center;
}


/* --- Botones (componente reutilizable) --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.95rem 1.75rem;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}

.btn--primary {
  background-color: var(--color-brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(225, 20, 26, 0.28);
}

.btn--primary:hover {
  background-color: var(--color-brand-dark);
  transform: translateY(-2px);
}



/* ==========================================================================
   05. ACCESIBILIDAD
   ========================================================================== */

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

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-md);
  z-index: 9999;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-brand);
  color: #fff;
  border-radius: var(--radius-sm);
  transition: top var(--transition);
}

.skip-link:focus {
  top: var(--space-md);
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

@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;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   06. HEADER / NAV
   ========================================================================== */

/* Header fijo: siempre visible arriba.
   --header-h lo recalcula main.js (módulo 05) según la altura real. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.icon {
  width: 1.125em;
  height: 1.125em;
  flex: none;
}

/* --- 06.1 Topbar (horario + redes) --- */

.topbar {
  background-color: var(--color-brand);
  color: #fff;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-lg);
  padding-block: var(--space-xs);
}

.topbar__hours,
.topbar__social {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.topbar__social-label {
  font-weight: 600;
}

.social {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.social__link {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-full);
  transition: background-color var(--transition), color var(--transition);
}

.social__link:hover {
  background-color: var(--color-accent);
  color: var(--color-brand-dark);
}

/* Yelp va con su nombre escrito: no tengo su logo oficial y una
   aproximación no sería su marca. */
.social__link--text {
  width: auto;
  padding-inline: var(--space-xs);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}

/* --- 06.2 Barra principal --- */

.navbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  background-color: var(--color-nav);
  box-shadow: var(--shadow-sm);
}

/* Logo sobre bloque blanco (el PNG ya trae fondo blanco, así que empalma) */
.brand {
  display: flex;
  align-items: center;
  padding: var(--space-2xs) clamp(0.75rem, 3vw, 2rem);
  background-color: var(--color-bg);
}

/* El logo es cuadrado: se escala por alto y el ancho sigue solo. */
.brand__logo {
  width: auto;
  height: clamp(3.5rem, 4.4rem + 1.2vw, 5.25rem);
  transition: transform var(--transition);
}

.brand:hover .brand__logo {
  transform: scale(1.04);
}

.navbar__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-inline: clamp(1rem, 3vw, 2.25rem);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

.nav__link {
  position: relative;
  display: block;
  padding-block: var(--space-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  transition: color var(--transition);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(var(--space-md) - 0.5rem);
  width: 100%;
  height: 3px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav__link:hover,
.nav__link.is-current {
  color: var(--color-accent);
}

.nav__link:hover::after,
.nav__link.is-current::after {
  transform: scaleX(1);
}

/* --- 06.2b Submenú de anclas --- */

.nav__item {
  position: relative;
}

.nav__item--has-sub {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* Cursor hacia abajo hecho con bordes: sin archivo de icono. */
.nav__caret {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
}

.nav__caret-mark {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition);
}

.nav__caret[aria-expanded="true"] .nav__caret-mark {
  transform: translateY(1px) rotate(-135deg);
}

.nav__item--has-sub:hover .nav__caret,
.nav__caret[aria-expanded="true"] {
  color: var(--color-accent);
}

.nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 13rem;
  padding: var(--space-xs) 0;
  background-color: var(--color-nav);
  border: 1px solid var(--color-nav-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  /* Oculto pero enfocable-friendly: se muestra con hover, foco o clic. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub,
.nav__sub.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__sub a {
  display: block;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  transition: background-color var(--transition), color var(--transition);
}

.nav__sub a:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-accent);
}


/* --- 06.3 Botón hamburguesa (solo móvil) --- */

.nav-toggle {
  display: none;
  padding: var(--space-xs);
  color: #fff;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: relative;
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* --- 06.4 Responsive --- */

/* Tablet y abajo: el nav pasa a panel desplegable bajo el header. */
@media (max-width: 991px) {
  .topbar__inner {
    justify-content: center;
    text-align: center;
  }

  .navbar {
    align-items: center;
  }

  .navbar__bar {
    justify-content: flex-end;
  }

  /* El panel cuelga del header (que es el ancestro posicionado). */
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-nav);
    border-top: 1px solid var(--color-nav-line);
    box-shadow: var(--shadow-md);
  }

  .nav.is-open {
    display: block;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-inline: var(--container-pad);
  }

  .nav__list > li + li {
    border-top: 1px solid var(--color-nav-line);
  }

  .nav__link::after {
    display: none;
  }

  /* En móvil el submenú se despliega en línea, no flotando. */
  .nav__item--has-sub {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .nav__caret {
    width: 2.75rem;
    height: 2.75rem;
  }

  .nav__sub {
    position: static;
    width: 100%;
    display: none;
    padding: 0 0 var(--space-xs);
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Sin hover en táctil: aquí manda el botón. */
  .nav__item--has-sub:hover .nav__sub,
  .nav__item--has-sub:focus-within .nav__sub {
    display: none;
  }

  .nav__sub.is-open,
  .nav__item--has-sub:focus-within .nav__sub.is-open {
    display: block;
  }

  .nav__sub a {
    padding-left: var(--space-md);
    border-left: 2px solid var(--color-brand);
    margin-bottom: var(--space-2xs);
  }

  .nav-toggle {
    display: block;
  }
}

/* Móvil: la topbar se apila y el logo no se come la barra. */
@media (max-width: 575px) {
  .topbar__inner {
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .brand__logo {
    height: 3.75rem;
  }
}

/* Móvil pequeño (≤360px): solo los iconos, sin la etiqueta. */
@media (max-width: 360px) {
  .topbar__social-label {
    display: none;
  }

  .brand__logo {
    height: 3.25rem;
  }
}

/* Pantallas bajas en horizontal: header más compacto. */
@media (max-height: 480px) and (orientation: landscape) {
  .brand__logo {
    height: 2.75rem;
  }

  .nav__link {
    padding-block: var(--space-sm);
  }
}


/* ==========================================================================
   07. HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-dark);
  color: var(--color-on-dark);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

/* Halos de color detrás del logo (rojo de marca + dorado queso). */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(42rem 42rem at 24% 45%, rgba(225, 20, 26, 0.22), transparent 62%),
    radial-gradient(28rem 28rem at 40% 88%, rgba(232, 163, 61, 0.14), transparent 65%);
}

/* Logo a la izquierda, mensaje a la derecha. */
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  min-height: calc(100svh - var(--header-h));
}

/* --- 07.1 Columna de texto --- */

.hero__kicker {
  margin-bottom: var(--space-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-on-dark-mut);
}

/* El lema va debajo, en su propia línea: minúsculas y cursiva para que
   contraste con el renglón en versalitas de arriba. */
.hero__motto {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--color-accent);
}

/* Traducción al inglés, justo debajo y más discreta que el lema. */
.hero__motto-en {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--color-on-dark-mut);
}

/* Tres líneas: el tamaño baja un punto para que cada una entre completa
   y el bloque no crezca de más. */
.hero__title {
  font-size: clamp(1.9rem, 0.95rem + 3.9vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__title-line {
  display: block;
  margin-top: 0.12em;
}

.hero__text {
  max-width: 46ch;
  margin-top: var(--space-lg);
  color: var(--color-on-dark-mut);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* Escalona la entrada: primero el logo, después el mensaje. */
.hero__media    { transition-delay: 0s; }
.hero__title    { transition-delay: 0.1s; }
.hero__text     { transition-delay: 0.18s; }
.hero__actions  { transition-delay: 0.26s; }

/* --- 07.2 Columna del logo --- */

.hero__media {
  justify-self: center;
  width: 100%;
  max-width: 30rem;
}

.hero__img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
  transition: transform 0.5s ease;
}

.hero__img:hover {
  transform: scale(1.03) rotate(-1.5deg);
}

/* --- 07.3 Responsive --- */

/* Apilado: el logo arriba (ya va primero en el HTML) y el mensaje debajo.
   El logo se achica para que el título asome sin tener que hacer scroll. */
@media (max-width: 991px) {
  .hero__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-lg);
    text-align: center;
    min-height: 0;
  }

  .hero__media   { max-width: 22rem; }
  .hero__text    { margin-inline: auto; }
  .hero__actions { justify-content: center; }
}

@media (max-width: 575px) {
  .hero__media { max-width: min(70vw, 16rem); }

  .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__img:hover { transform: none; }
}


/* ==========================================================================
   09. MARQUEE (banda de texto en movimiento)
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
  border-block: 1px solid var(--color-border);
  padding-block: clamp(1rem, 2.5vw, 2rem);
  /* En táctil, un dedo que se arrastre sobre la banda no debe poder
     empujarla de lado: aquí solo se desplaza la página, en vertical. */
  touch-action: pan-y;
}

/* Tinte cálido en el extremo derecho, como en la referencia. */
.marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(30rem 20rem at 100% 50%, rgba(225, 20, 26, 0.07), transparent 70%);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 36s linear infinite;
}

/* Dos grupos idénticos: al desplazar la mitad, el bucle cierra sin salto. */
@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
}

/* Letras solo de contorno. */
.marquee__word {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8.5vw, 7.5rem);
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(28, 22, 19, 0.20);
}

/* Si el navegador no soporta el contorno, el texto se rellena tenue
   en vez de quedar invisible. */
@supports not (-webkit-text-stroke: 1px #000) {
  .marquee__word {
    color: rgba(28, 22, 19, 0.14);
  }
}

.marquee__star {
  flex: none;
  color: rgba(28, 22, 19, 0.22);
}

.marquee__star svg {
  width: clamp(1.75rem, 3.5vw, 3rem);
  height: clamp(1.75rem, 3.5vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}


/* ==========================================================================
   10. ORDER ONLINE (banda de llamada a la acción)
   ========================================================================== */

.order {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-on-dark);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  /* Textura de pared negra; la primera regla es el respaldo para
     navegadores sin image-set(). */
  background: var(--color-dark) url("../images/bg-texture-dark.jpg") center / cover no-repeat;
  background-image: image-set(
    url("../images/bg-texture-dark.webp") type("image/webp"),
    url("../images/bg-texture-dark.jpg")  type("image/jpeg")
  );
}

/* Degradado cálido del negro al ámbar hacia la derecha, como la referencia. */
.order__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38rem 38rem at 82% 50%, rgba(232, 120, 24, 0.40), transparent 64%),
    radial-gradient(22rem 22rem at 96% 70%, rgba(225, 20, 26, 0.28), transparent 70%);
}

.order__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.order__eyebrow {
  margin-bottom: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-brand);
}

.order__title {
  font-size: clamp(2rem, 1rem + 4vw, 3.5rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.order__lead {
  margin-top: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.order__text {
  max-width: 42ch;
  margin-top: var(--space-md);
  color: var(--color-on-dark-mut);
}

/* Las dos formas de recibir el pedido, en etiquetas escaneables. */
.order__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.order__tags li {
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-on-dark);
}

.order__actions {
  margin-top: var(--space-lg);
}

.order__title   { transition-delay: 0.08s; }
.order__lead    { transition-delay: 0.14s; }
.order__text    { transition-delay: 0.20s; }
.order__tags    { transition-delay: 0.26s; }
.order__actions { transition-delay: 0.32s; }

.order__media {
  justify-self: center;
}

.order__img {
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.5));
  transition: transform 0.5s ease;
}

.order__img:hover {
  transform: translate(-10px, -10px);
}

/* --- 09.1 Responsive --- */

@media (max-width: 991px) {
  .order__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .order__content { order: 1; }
  .order__media   { order: 2; width: min(80%, 24rem); }

  .order__text { margin-inline: auto; }
  .order__tags { justify-content: center; }
}

@media (max-width: 575px) {
  .order__media { width: min(92%, 20rem); }
}


/* ==========================================================================
   11. PAGE HEADER (encabezado de sección — About Us)
   ========================================================================== */

.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: clamp(15rem, 32vw, 26rem);
  padding-block: var(--space-2xl);
  text-align: center;
  color: var(--color-on-dark);
  /* Papel a cuadros de las cajas, en cuadro chico para que lea como
     textura y no como bandera. El patrón va crudo debajo... */
  background: var(--color-dark) url("../images/bg-checker.jpg") center / 42rem auto repeat;
  background-image: image-set(
    url("../images/bg-checker.webp") type("image/webp"),
    url("../images/bg-checker.jpg")  type("image/jpeg")
  );
}

/* ...y esta capa lo atenúa: a contraste pleno el blanco y negro se comería
   el texto. Más oscuro al centro, donde va el título. */
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 110% at 50% 50%, rgba(12, 10, 9, 0.96), rgba(12, 10, 9, 0.82)),
    linear-gradient(90deg, rgba(225, 20, 26, 0.20), transparent 45%, rgba(225, 20, 26, 0.20));
}

/* Foto recortada asomando por el borde derecho. El desplazamiento hacia
   abajo depende del ancho de la foto (no del alto del encabezado), así
   la comida siempre queda a la vista y solo se corta la tapa. */
.page-header__dish {
  --dish-w: clamp(13rem, 34vw, 34rem);
  position: absolute;
  right: clamp(-3rem, -2vw, 0rem);
  bottom: calc(var(--dish-w) * -0.2);
  z-index: -1;
  width: var(--dish-w);
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.page-header__title {
  font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

@media (max-width: 575px) {
  .page-header__dish {
    --dish-w: 15rem;
    right: -4rem;
    opacity: 0.55;
  }
}


/* ==========================================================================
   12. ABOUT US (contenido)
   ========================================================================== */

/* La píldora y los aros sobresalen del bloque de la foto a propósito.
   Se recorta solo en horizontal (clip, no hidden: hidden forzaría un
   contenedor de scroll y en vertical cortaría las sombras). */
.about {
  overflow-x: clip;
}

.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

/* --- 11.1 Texto --- */

.about__eyebrow {
  text-align: left;
}

.about__title {
  margin-top: var(--space-xs);
  font-size: clamp(1.875rem, 1rem + 3.6vw, 3.25rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.about__title-line {
  display: block;
}

.about__text {
  max-width: 52ch;
  margin-top: var(--space-md);
  color: var(--color-text-muted);
}

.about__text p + p {
  margin-top: var(--space-sm);
}

/* Remate de la bio: en la fuente de títulos y en rojo de marca. */
.about__tagline {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-brand);
}

.about__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

/* Enlace de texto subrayado, el secundario de la referencia. */
.link-arrow {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-brand);
  padding-bottom: 2px;
  transition: color var(--transition);
}

.link-arrow:hover {
  color: var(--color-brand);
}

/* --- 11.2 Dos bloques de refuerzo --- */

.about__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.feature__title {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Barra roja en lugar del icono de la referencia. */
.feature__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand);
}

.feature__text {
  margin-top: var(--space-2xs);
  padding-left: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* --- 11.3 Foto circular con aros y sellos --- */

.about__media {
  position: relative;
  justify-self: center;
  width: min(100%, 30rem);
  aspect-ratio: 1;
}

/* Entrada propia: sube desde abajo, más recorrido y más lenta que el
   resto de elementos, para que se note. */
.js .about__media[data-reveal] {
  transform: translateY(5rem) scale(0.94);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.1s;
}

.js .about__media[data-reveal].is-visible {
  transform: translateY(0) scale(1);
}

.about__photo {
  position: relative;
  width: 78%;
  height: 78%;
  margin: 11%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  /* --px/--py los mueve main.js siguiendo el cursor. */
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--photo-scale, 1));
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.about__media:hover .about__photo {
  --photo-scale: 1.06;
  box-shadow: 0 26px 50px rgba(28, 22, 19, 0.28);
}

/* Aros abiertos: son arcos, no círculos completos — por eso se les nota
   el giro. Cada uno va a su ritmo y en sentido contrario. */
.about__rings::before,
.about__rings::after {
  content: "";
  position: absolute;
  border: 1px solid transparent;
  border-radius: 50%;
  opacity: 0.6;
  animation: about-ring-spin 26s linear infinite;
}

.about__rings::before {
  inset: 1%;
  border-top-color: var(--color-brand);
  border-right-color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

.about__rings::after {
  inset: -6%;
  border-left-color: var(--color-brand);
  border-top-color: var(--color-brand);
  animation-duration: 18s;
  animation-direction: reverse;
}

/* Al pasar el mouse los aros aceleran. */
.about__media:hover .about__rings::before { animation-duration: 9s; }
.about__media:hover .about__rings::after  { animation-duration: 6s; }

@keyframes about-ring-spin {
  to { transform: rotate(360deg); }
}

/* Píldora flotante arriba a la derecha. */
.about__pill {
  position: absolute;
  top: 12%;
  right: -4%;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-2xs);
  background-color: var(--color-bg);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brand);
  white-space: nowrap;
}

.about__pill-img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
}

/* Sello en estrella abajo a la derecha (clip-path, sin imagen). */
.about__stamp {
  position: absolute;
  right: 4%;
  bottom: 2%;
  display: grid;
  place-items: center;
  width: clamp(6.5rem, 16vw, 8.5rem);
  aspect-ratio: 1;
  background-color: var(--color-brand);
  color: #fff;
  clip-path: polygon(
    100% 50%, 92.2% 58.4%, 96.2% 69.1%, 85.8% 73.9%, 85.4% 85.4%, 73.9% 85.8%,
    69.1% 96.2%, 58.4% 92.2%, 50% 100%, 41.6% 92.2%, 30.9% 96.2%, 26.1% 85.8%,
    14.6% 85.4%, 14.2% 73.9%, 3.8% 69.1%, 7.8% 58.4%, 0% 50%, 7.8% 41.6%,
    3.8% 30.9%, 14.2% 26.1%, 14.6% 14.6%, 26.1% 14.2%, 30.9% 3.8%, 41.6% 7.8%,
    50% 0%, 58.4% 7.8%, 69.1% 3.8%, 73.9% 14.2%, 85.4% 14.6%, 85.8% 26.1%,
    96.2% 30.9%, 92.2% 41.6%
  );
  font-family: var(--font-heading);
  font-size: clamp(0.7rem, 0.35rem + 1.6vw, 1.15rem);
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Aro punteado interior: va aparte del texto para poder girar sin
   arrastrarlo. */
.about__stamp::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: about-ring-spin 14s linear infinite;
}

.about__media:hover .about__stamp::before {
  animation-duration: 5s;
}

.about__stamp span {
  position: relative;
}

/* --- 11.4 Responsive --- */

@media (max-width: 991px) {
  .about__inner {
    grid-template-columns: 1fr;
  }

  /* Primero el mensaje, después la foto. */
  .about__content { order: 1; }
  .about__media   { order: 2; width: min(85%, 26rem); }

  .about__text { max-width: none; }
}

@media (max-width: 575px) {
  .about__media { width: min(100%, 20rem); }

  /* En pantallas estrechas la píldora deja de ir en una sola línea: con
     nowrap, si la tipografía carga más ancha de lo previsto, empuja la
     página a lo ancho. */
  .about__pill {
    right: 0;
    max-width: 72%;
    white-space: normal;
    font-size: 0.625rem;
    line-height: 1.3;
  }

  .about__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about__rings::before,
  .about__rings::after,
  .about__stamp::before {
    animation: none;
  }

  .about__photo {
    transition: none;
  }
}


/* ==========================================================================
   13. POPULAR DISHES
   ========================================================================== */

.dishes {
  background-color: var(--color-bg-alt);
}

.dishes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  column-gap: clamp(1.5rem, 3vw, 2rem);
  /* La foto sobresale 4.5rem de su tarjeta: al haber más de una fila,
     el hueco vertical tiene que superar eso o las fotos pisan la tarjeta
     de arriba. */
  row-gap: 6rem;
  /* Mismo aire para la primera fila. */
  margin-top: calc(var(--space-2xl) + 4.5rem);
}

/* --- Tarjeta --- */

.dish {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--space-lg) var(--space-xl);
  text-align: center;
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.dish:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.dish__media {
  position: relative;
  width: 11rem;
  max-width: 60%;
  aspect-ratio: 1;
  /* Mitad de la foto sobresale por encima de la tarjeta. */
  margin-top: -4.5rem;
  margin-bottom: var(--space-md);
}

/* Aro punteado que gira alrededor de la foto. */
.dish__media::before {
  content: "";
  position: absolute;
  inset: -0.7rem;
  border: 2px dashed var(--color-brand);
  border-radius: 50%;
  animation: dish-ring-spin 22s linear infinite;
}

@keyframes dish-ring-spin {
  to { transform: rotate(360deg); }
}

.dish:hover .dish__media::before {
  animation-duration: 8s;
}

.dish__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: transform 0.45s ease;
}

/* Las circulares crecen en el sitio, sin desplazarse: si se mueven en
   diagonal se salen de su aro. */
.dish:hover .dish__img {
  transform: scale(1.06);
}

.dish__name {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.dish__desc {
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.dishes__cta {
  margin-top: var(--space-2xl);
  text-align: center;
}

/* --- 10.1 Responsive --- */

@media (max-width: 575px) {
  .dishes__grid {
    grid-template-columns: 1fr;
  }

  .dish__media {
    width: 12rem;
    max-width: 62%;
  }

  .dishes__cta .btn {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dish__media::before {
    animation: none;
  }
}


/* ==========================================================================
   14. GALLERY (carrusel de fotos)
   ========================================================================== */

.gallery {
  position: relative;
  background-color: var(--color-bg);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* Carril con scroll horizontal: swipe nativo en móvil, flechas en desktop. */
.gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(16rem, 30vw, 28rem);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  padding-inline: var(--container-pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-pad);
  overscroll-behavior-x: contain;
  /* Oculta la barra de scroll sin perder el desplazamiento. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__item {
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-alt);
}

.gallery__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Al pasar el mouse la foto crece un poco dentro de su marco. */
.gallery__item:hover .gallery__img,
.gallery__item:focus-within .gallery__img {
  transform: scale(1.07) translate(-8px, -8px);
}

/* --- 11.1 Flechas --- */

.gallery__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
  border-radius: var(--radius-full);
  background-color: var(--color-brand);
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition), opacity var(--transition);
}

.gallery__btn:hover {
  background-color: var(--color-brand-dark);
}

.gallery__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.gallery__btn--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.gallery__btn--next { right: clamp(0.5rem, 2vw, 1.5rem); }

/* Extremo alcanzado: el botón se apaga pero no desaparece (evita saltos). */
.gallery__btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* --- 11.2 Responsive --- */

@media (max-width: 991px) {
  .gallery__track {
    grid-auto-columns: clamp(14rem, 42vw, 22rem);
  }
}

@media (max-width: 575px) {
  .gallery__track {
    grid-auto-columns: 78vw;
  }

  .gallery__btn {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__img {
    transition: none;
  }
}


/* ==========================================================================
   15. MENÚ (página menu.html)
   ========================================================================== */

.menu {
  background-color: var(--color-bg-alt);
}

/* --- 14.1 Pestañas por categoría --- */

.menu__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  margin-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.menu__tab {
  position: relative;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.menu__tab::after {
  content: "";
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: 0;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand);
  transform: scaleX(0);
  transition: transform var(--transition);
}

.menu__tab:hover {
  color: var(--color-text);
}

.menu__tab.is-active {
  color: var(--color-brand);
}

.menu__tab.is-active::after {
  transform: scaleX(1);
}

/* Separador vertical entre pestañas, como en la referencia. */
.menu__tab + .menu__tab::before {
  content: "";
  position: absolute;
  left: calc(clamp(0.5rem, 2vw, 1.5rem) / -2);
  top: 20%;
  bottom: 20%;
  width: 1px;
  background-color: var(--color-border);
}

/* --- 14.2 Lista de platos --- */

.menu__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

/* Dos columnas como la referencia; más de dos aprieta las descripciones. */
@media (min-width: 768px) {
  .menu__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Aro punteado girando alrededor de la foto. Va como pseudo-elemento del
   item porque un <img> no admite ::before. */
.menu-item::before {
  content: "";
  position: absolute;
  left: -0.45rem;
  top: 50%;
  width: 6.9rem;
  height: 6.9rem;
  border: 2px dotted var(--color-brand);
  border-radius: 50%;
  /* El centrado va aquí y no solo en la animación: si el usuario pide
     menos movimiento, la animación se apaga y el aro debe seguir en su
     sitio. */
  transform: translateY(-50%);
  animation: menu-ring-spin 34s linear infinite;
  pointer-events: none;
}

/* Se van intercalando: uno rojo, el siguiente negro, y giran al revés
   uno del otro. */
.menu-item:nth-child(even)::before {
  border-color: var(--color-text);
  animation-duration: 42s;
  animation-direction: reverse;
}

/* Con dos columnas, impar/par dejaría una columna entera roja y la otra
   negra. Este patrón los alterna en damero, fila a fila. */
@media (min-width: 768px) {
  .menu-item:nth-child(4n + 2)::before,
  .menu-item:nth-child(4n + 3)::before {
    border-color: var(--color-text);
    animation-duration: 42s;
    animation-direction: reverse;
  }

  .menu-item:nth-child(4n + 1)::before,
  .menu-item:nth-child(4n)::before {
    border-color: var(--color-brand);
    animation-duration: 34s;
    animation-direction: normal;
  }
}

@keyframes menu-ring-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

.menu-item:hover::before {
  animation-duration: 12s;
}

.menu-item__img {
  flex: none;
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 50%;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
}

/* Donde no hay foto del plato va el logo: se muestra completo y con
   aire, no recortado como una foto. */
.menu-item__img--logo {
  object-fit: contain;
  padding: 0.5rem;
  border: 1px dashed var(--color-border);
}

/* Crece centrada, sin diagonal: el aro punteado la enmarca. */
.menu-item:hover .menu-item__img {
  transform: scale(1.08);
}

.menu-item__name {
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transition: color var(--transition);
}

.menu-item:hover .menu-item__name {
  color: var(--color-brand);
}

.menu-item__desc {
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* --- 14.3 Nota final --- */

.menu__note {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.menu__note p {
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
}

/* --- 14.4 Responsive --- */

@media (max-width: 575px) {
  .menu__tabs {
    gap: var(--space-2xs);
  }

  .menu__tab {
    font-size: var(--fs-sm);
    padding-inline: var(--space-sm);
  }

  .menu__tab + .menu__tab::before {
    display: none;
  }

  .menu-item__img {
    width: 4.5rem;
    height: 4.5rem;
  }

  .menu-item::before {
    width: 5.4rem;
    height: 5.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-item::before {
    animation: none;
  }
}


/* ==========================================================================
   16. GOOGLE REVIEWS
   ========================================================================== */

.reviews {
  position: relative;
  overflow-x: clip;
  color: var(--color-on-dark);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--color-dark) url("../images/bg-texture-dark.jpg") center / cover no-repeat;
  background-image: image-set(
    url("../images/bg-texture-dark.webp") type("image/webp"),
    url("../images/bg-texture-dark.jpg")  type("image/jpeg")
  );
}

.reviews__eyebrow {
  color: var(--color-accent);
}

.reviews__title {
  max-width: 22ch;
  margin-inline: auto;
}

/* --- Tarjetas de reseña (carrusel) --- */

.quotes {
  margin-top: var(--space-2xl);
}

.quotes__track {
  --quotes-gap: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  grid-auto-flow: column;
  /* Una tarjeta a la vista, con el borde de la siguiente asomando. */
  grid-auto-columns: 85%;
  gap: var(--quotes-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: var(--space-xs);
  scrollbar-width: none;
}

.quotes__track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .quotes__track {
    grid-auto-columns: calc((100% - var(--quotes-gap)) / 2);
  }
}

/* Tres a la vista como la referencia; el resto se desliza. */
@media (min-width: 992px) {
  .quotes__track {
    grid-auto-columns: calc((100% - var(--quotes-gap) * 2) / 3);
  }
}

.quote {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.quote__mark {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  line-height: 0.7;
  color: var(--color-brand);
}

.quote__text {
  flex: 1;
  margin-top: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  line-height: 1.7;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 400;
}

.quote__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* Foto de perfil del cliente, recortada en círculo. */
.quote__avatar {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--color-bg-alt);
}

.quote__who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.quote__who strong {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quote__who small {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* --- Puntos de navegación --- */

.quotes__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xl);
}

.quotes__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.28);
  transition: width var(--transition), background-color var(--transition);
}

.quotes__dot.is-active {
  width: 1.6rem;
  background-color: var(--color-brand);
}

.quotes__dot {
  cursor: pointer;
}

.quotes__cta {
  margin-top: var(--space-xl);
  text-align: center;
}


/* El widget de Google ocupa todo el ancho de la sección. */
.reviews__embeds {
  margin-top: var(--space-2xl);
}

.reviews__label {
  margin-bottom: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-align: center;
  color: var(--color-accent);
}

/* Contenedor del widget: el código de Google entra aquí. */
.reviews__embed {
  height: 100%;
}


/* --- Badge de Yelp ---
   Queda disponible por si se quiere volver a usar en otra sección:
   basta pegar el bloque <a class="yelp-badge"> donde haga falta. */

.yelp-badge {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1.5rem;
  border-radius: 10px;
  background: #000;
  border: 1px solid #19BB94;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease;
}

.yelp-badge:hover {
  background: #19BB94;
  transform: translateY(-2px);
}

.yelp-badge:focus-visible {
  outline: 2px solid #19BB94;
  outline-offset: 3px;
}

.yelp-badge__logo {
  flex-shrink: 0;
}

.yelp-badge__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}

.yelp-badge__txt strong {
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
}

.yelp-badge__txt small {
  color: #19BB94;
  font-size: .78rem;
}

.yelp-badge:hover .yelp-badge__txt small {
  color: #000;
}

@media (max-width: 480px) {
  .yelp-badge {
    width: 100%;
    justify-content: center;
    padding: .9rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yelp-badge { transition: none; }
  .yelp-badge:hover { transform: none; }
}

/* Marcador provisional. Se borra al pegar el widget. */
.reviews__placeholder {
  display: grid;
  place-content: center;
  gap: var(--space-xs);
  height: 100%;
  min-height: clamp(12rem, 22vw, 17rem);
  padding: var(--space-xl);
  border: 2px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.55);
}

.reviews__placeholder span {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
}


/* ==========================================================================
   17. YELP (calificación + enlace al perfil)
   ========================================================================== */

.yelp {
  overflow-x: clip;
  background-color: var(--color-bg-alt);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.yelp__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 768px) {
  .yelp__inner {
    grid-template-columns: 1.2fr 1fr;
  }
}

.yelp__eyebrow {
  text-align: left;
}

.yelp__title {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.yelp__text {
  max-width: 46ch;
  margin-bottom: var(--space-lg);
  color: var(--color-text-muted);
}

/* Aquí entra el badge de Yelp: se centra y no se desborda. */
.yelp__rating {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 100%;
  max-width: 24rem;
}

.yelp__rating > * {
  max-width: 100%;
}

/* Calificación */

.yelp__rating {
  gap: var(--space-xs);
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.yelp__score {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  line-height: 1;
  color: var(--color-text);
}

.yelp__stars svg {
  width: clamp(8rem, 20vw, 10rem);
  height: auto;
}

.yelp__count {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .yelp__inner {
    text-align: center;
    justify-items: center;
  }

  .yelp__eyebrow { text-align: center; }
  .yelp__text    { margin-inline: auto; }
}


/* ==========================================================================
   18. MAPA
   ========================================================================== */

.map {
  position: relative;
  line-height: 0;   /* mata el hueco bajo el iframe (es inline) */
  background-color: var(--color-bg-alt);
}

/* El alto manda: un mapa con aspect-ratio fijo se vuelve inusable
   en pantallas angostas. */
.map__frame {
  display: block;
  width: 100%;
  height: clamp(17rem, 42vw, 28rem);
  border: 0;
  filter: grayscale(0.15);
}


/* ==========================================================================
   18.1 PRÓXIMAMENTE (concepto del nuevo local, bajo el mapa)
   ========================================================================== */

.soon {
  overflow-x: clip;
  background-color: var(--color-bg);
}

.soon__inner {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.soon__eyebrow {
  text-align: left;
}

.soon__title {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

.soon__text {
  max-width: 46ch;
  margin-bottom: var(--space-lg);
  color: var(--color-text-muted);
}

.soon__media {
  position: relative;
  margin: 0;
}

.soon__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Sello inclinado, mismo lenguaje que el "Best Seller" del hero anterior. */
.soon__badge {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.25rem);
  left: clamp(-0.75rem, -1vw, 0rem);
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transform: rotate(-5deg);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
}

.soon__caption {
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  font-style: italic;
  text-align: center;
  color: var(--color-text-muted);
}

@media (max-width: 991px) {
  .soon__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .soon__eyebrow { text-align: center; }
  .soon__text    { margin-inline: auto; }
  .soon__badge   { left: 0.75rem; }
}


/* ==========================================================================
   19. PANTALLA DE CARGA
   ========================================================================== */

/* Sin JS no se muestra nunca: nadie se queda encerrado detrás de ella. */
.preloader {
  display: none;
}

.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  background-color: var(--color-brand);
  color: #fff;
  text-align: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  /* Red de seguridad: si el evento load nunca llega, a los 8 s se va sola. */
  animation: preloader-failsafe 0.01s linear 8s forwards;
}

@keyframes preloader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.js .preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Mientras carga, el fondo no se desplaza. */
.js.is-loading body {
  overflow: hidden;
}

.preloader__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  width: min(100%, 26rem);
}

.preloader__logo {
  width: clamp(7rem, 22vw, 10rem);
  height: auto;
  animation: preloader-bob 1.6s ease-in-out infinite;
}

@keyframes preloader-bob {
  50% { transform: translateY(-10px); }
}

.preloader__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.5rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Barra de progreso indeterminada: no sabemos cuánto falta, así que
   el relleno recorre la barra en lugar de fingir un porcentaje. */
.preloader__bar {
  position: relative;
  width: min(100%, 16rem);
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: rgba(0, 0, 0, 0.22);
}

.preloader__fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 40%;
  border-radius: var(--radius-full);
  background-color: #fff;
  animation: preloader-slide 1.2s ease-in-out infinite;
}

@keyframes preloader-slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

.preloader__sub {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .preloader__logo {
    animation: none;
  }

  /* La barra sigue moviéndose: es el indicador de que algo pasa,
     pero más lenta y sin rebote. */
  .preloader__fill {
    animation-duration: 2.4s;
    animation-timing-function: linear;
  }
}


/* ==========================================================================
   20. BOTÓN FLOTANTE (acciones rápidas)
   ========================================================================== */

/* Sin JS no se despliega, así que ni se muestra: un botón que no hace
   nada estorba más de lo que ayuda. */
.fab {
  display: none;
}

.js .fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  /* Encima de todo salvo la pantalla de carga. */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
}

/* --- Botón principal --- */

.fab__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
  background-color: var(--color-brand);
  color: #fff;
  border-radius: var(--radius-full);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  transition: background-color var(--transition), transform var(--transition);
}

.fab__toggle:hover {
  background-color: var(--color-brand-dark);
  transform: translateY(-2px);
}

.fab__logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: #fff;
  padding: 2px;
}

.fab__label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Acciones --- */

.fab__actions {
  display: grid;
  justify-items: end;
  gap: var(--space-xs);
  /* Cerrado por defecto. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.fab__actions.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Entran escalonadas, la de abajo primero. */
.fab__actions.is-open li:nth-child(1) { transition-delay: 0.12s; }
.fab__actions.is-open li:nth-child(2) { transition-delay: 0.06s; }

.fab__actions li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition);
}

.fab__actions.is-open li {
  opacity: 1;
  transform: translateY(0);
}

.fab__action {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.5rem 0.9rem;
  background-color: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.fab__action:hover {
  background-color: var(--color-brand);
  color: #fff;
  transform: translateX(-4px);
}

.fab__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background-color: var(--color-brand);
  color: #fff;
  transition: background-color var(--transition), color var(--transition);
}

.fab__action:hover .fab__icon {
  background-color: #fff;
  color: var(--color-brand);
}

.fab__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 575px) {
  .fab__toggle {
    padding-right: 1rem;
  }

  .fab__logo {
    width: 2rem;
    height: 2rem;
  }

  .fab__action {
    font-size: var(--fs-xs);
  }
}


/* ==========================================================================
   21. FOOTER
   ========================================================================== */

.footer {
  overflow-x: clip;
  color: var(--color-on-dark);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--color-dark) url("../images/bg-texture-dark.jpg") center / cover no-repeat;
  background-image: image-set(
    url("../images/bg-texture-dark.webp") type("image/webp"),
    url("../images/bg-texture-dark.jpg")  type("image/jpeg")
  );
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.footer__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.footer__col p,
.footer__address {
  font-style: normal;
  line-height: 1.8;
  color: var(--color-on-dark-mut);
}

.footer__address a {
  display: block;
  transition: color var(--transition);
}

.footer__address a:hover {
  color: var(--color-accent);
}

.footer__phone {
  margin-top: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  color: var(--color-on-dark);
}

.footer__muted {
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  opacity: 0.65;
}

/* --- Redes --- */

.footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.footer__tile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--color-nav-line);
  transition: background-color var(--transition), transform var(--transition);
}

.footer__tile:hover {
  background-color: var(--color-brand);
  transform: translateY(-3px);
}

.footer__tile svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Yelp va con su nombre: prefiero texto legible antes que un logo
   aproximado que no sería el suyo. */
.footer__tile--text {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}

/* Llamada a dejar reseña en Yelp, debajo de las redes. */
.footer__yelp {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--color-nav-line);
  border-radius: var(--radius-full);
  transition: background-color var(--transition), border-color var(--transition);
}

.footer__yelp:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
}

.footer__yelp-label {
  font-size: var(--fs-xs);
  color: var(--color-on-dark-mut);
}

.footer__yelp-brand {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  color: var(--color-brand);
}

/* --- Logo, crédito y legal --- */

.footer__brand {
  display: block;
  width: fit-content;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
}

.footer__brand img {
  width: clamp(5.5rem, 12vw, 7rem);
  height: auto;
  transition: transform var(--transition);
}

.footer__brand:hover img {
  transform: scale(1.05);
}

.footer__credit,
.footer__legal {
  text-align: center;
}

.footer__credit {
  margin-top: var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--color-on-dark-mut);
}

.footer__credit a {
  font-weight: 600;
  color: var(--color-accent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.footer__credit a:hover {
  border-bottom-color: var(--color-accent);
}

.footer__legal {
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-nav-line);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}

/* En móvil el botón flotante se planta sobre la esquina: el pie necesita
   ese espacio libre para que no tape la última línea. */
@media (max-width: 767px) {
  .footer {
    padding-bottom: 6rem;
  }
}