/*
  EL PEPIÁN — HOJA DE ESTILOS

  Sistema de diseño centralizado para el sitio.

  Incluye:
  - Diseño responsive para móvil, tablet y escritorio.
  - Márgenes laterales consistentes.
  - Tipografía adaptable mediante clamp().
  - Contenedor centralizado para pantallas grandes.
  - Animaciones con soporte para prefers-reduced-motion.
  - Protección contra desbordamientos horizontales.
*/


/*
  VARIABLES GLOBALES

  Todas las variables reutilizables del diseño se concentran
  aquí para facilitar el mantenimiento y modificar la identidad
  visual desde un único lugar.
*/

:root {
  /* Colores principales de la interfaz */
  --ink: #1b1712;
  --ink-soft: #2a241d;
  --bone: #f4eee2;
  --bone-dim: #e7dfce;
  --achiote: #9c4429;
  --achiote-lt: #c25a3b;
  --mostaza: #d6a13c;
  --musgo: #5c6b45;

  /* Colores utilizados para líneas y separadores */
  --line: rgba(244, 238, 226, 0.14);
  --line-dark: rgba(27, 23, 18, 0.12);

  /* Familias tipográficas utilizadas en el sitio */
  --f-display: "Fraunces", serif;
  --f-body: "Inter", sans-serif;
  --f-mono: "IBM Plex Mono", monospace;

  /* Ancho máximo para el contenido */
  --container: 1280px;

  /*
    Margen lateral global.

    clamp() permite que el margen sea adaptable:
    - Mínimo: 18px.
    - Valor flexible: 5vw.
    - Máximo: 64px.
  */
  --page-padding: clamp(18px, 5vw, 64px);

  /* Curva de transición principal para las animaciones */
  --ease: cubic-bezier(0.16, 0.8, 0.24, 1);
}


/*
  RESET / BASE

  Se establecen reglas generales para evitar diferencias
  innecesarias entre navegadores y controlar el comportamiento
  de los elementos desde el inicio.
*/

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

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  padding: 0;

  background: var(--ink);
  color: var(--bone);

  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;

  /* Evita scroll horizontal provocado por elementos grandes */
  overflow-x: hidden;

  /* Mejora la representación tipográfica */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Evita que elementos multimedia creen desbordamientos horizontales */

img,
svg,
video,
canvas {
  max-width: 100%;
}

/* Color utilizado al seleccionar texto */

::selection {
  background: var(--achiote);
  color: var(--bone);
}

/* Los enlaces heredan la apariencia del elemento padre */

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

/* Las imágenes se comportan como elementos de bloque */

img {
  display: block;
  max-width: 100%;
}

/*
  Permite que textos largos se ajusten correctamente
  sin romper innecesariamente las palabras.
*/

p {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Tipografía base de los títulos */

h1,
h2,
h3 {
  margin: 0;

  font-family: var(--f-display);
  font-weight: 500;

  letter-spacing: -0.01em;
}


/*
  CONTENEDOR PRINCIPAL

  .wrap centraliza el contenido y limita su ancho máximo.
  El padding lateral se controla mediante --page-padding.
*/

.wrap {
  width: 100%;
  max-width: var(--container);

  margin-inline: auto;

  padding-inline: var(--page-padding);
}


/*
  ACCESIBILIDAD — FOCUS

  Permite identificar visualmente los elementos interactivos
  cuando se navega utilizando teclado.
*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mostaza);
  outline-offset: 3px;
}


/*
  EYEBROW

  Pequeño texto de introducción utilizado normalmente
  encima de los títulos principales.
*/

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;

  font-family: var(--f-mono);
  font-size: 12px;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--mostaza);
}

/* Línea decorativa ubicada antes del eyebrow */

.eyebrow::before {
  content: "";

  display: inline-block;

  width: 22px;
  height: 1px;

  background: var(--mostaza);

  flex-shrink: 0;
}


/*
  ANIMACIONES REVEAL

  Estas clases permiten revelar contenido progresivamente
  cuando se añade la clase .is-in mediante JavaScript.
*/

.reveal-line {
  display: block;
  overflow: hidden;
}

.reveal-line > * {
  display: block;

  /* Oculta inicialmente el contenido desde abajo */
  clip-path: inset(0 0 100% 0);

  transform: translateY(8%);

  opacity: 0;
}

.reveal-line.is-in > * {
  animation: clipUp 1s var(--ease) forwards;
}

/* Animación de aparición vertical */

@keyframes clipUp {
  to {
    clip-path: inset(0 0 0% 0);
    transform: translateY(0);
    opacity: 1;
  }
}

/* Estado inicial del contenido que aparecerá desde abajo */

.fade-up {
  opacity: 0;
  transform: translateY(24px);
}

/* Activa la animación al añadir .is-in */

.fade-up.is-in {
  animation: fadeUp 0.9s var(--ease) forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/*
  REDUCCIÓN DE MOVIMIENTO

  Respeta la preferencia del usuario del sistema operativo
  para reducir animaciones y movimiento.
*/

@media (prefers-reduced-motion: reduce) {
  .reveal-line > *,
  .fade-up {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }

  .tueste {
    filter: none !important;
  }

  * {
    scroll-behavior: auto !important;
  }
}


/*
  EFECTO FIRMA — TUESTE

  Las imágenes comienzan con un aspecto desaturado y oscuro.
  Cuando reciben .is-toasted recuperan progresivamente
  su color y luminosidad.
*/

.tueste {
  position: relative;

  filter: grayscale(0.85) brightness(0.75) saturate(0.4) sepia(0.15);

  transition: filter 1.1s var(--ease);
}

/* Estado final del efecto */

.tueste.is-toasted {
  filter: grayscale(0) brightness(1) saturate(1.08) sepia(0);
}

/* Capa luminosa utilizada durante la transición */

.tueste-sheen {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(214, 161, 60, 0.55) 50%,
    transparent 60%
  );

  transform: translateX(-120%);
}

/* Ejecuta el barrido cuando la imagen está tostada */

.tueste.is-toasted .tueste-sheen {
  animation: sheen 1.1s var(--ease) forwards;
}

@keyframes sheen {
  to {
    transform: translateX(120%);
  }
}


/*
  TEXTO RECADO

  .fill-text permite mostrar un texto con una versión
  contorneada y otra versión coloreada que se revela
  mediante clip-path.
*/

.fill-text {
  position: relative;

  display: inline-block;

  font-family: var(--f-display);
}

/* Texto base únicamente con contorno */

.fill-text .ft-base {
  color: transparent;

  -webkit-text-stroke: 1px rgba(27, 23, 18, 0.28);
}

/* Texto coloreado que puede revelarse progresivamente */

.fill-text .ft-fill {
  position: absolute;
  inset: 0;

  color: var(--achiote);

  overflow: hidden;

  clip-path: inset(100% 0 0 0);

  white-space: inherit;
}


/*
  HEADER

  Barra de navegación fija en la parte superior.
  Al agregar .scrolled cambia su fondo y reduce su altura.
*/

header {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 100;

  padding: 18px var(--page-padding);

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  transition:
    background 0.4s var(--ease),
    border-color 0.4s var(--ease),
    padding 0.4s var(--ease);

  border-bottom: 1px solid transparent;
}

/* Estado del header después de hacer scroll */

header.scrolled {
  background: rgba(27, 23, 18, 0.86);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--line);

  padding-top: 12px;
  padding-bottom: 12px;
}

/* Contenedor de la marca */

.brand {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
}

/* Imagen o logotipo de la marca */

.brand img {
  width: 10%;
  height: 10%;

  border-radius: 50%;

  flex-shrink: 0;
}

/* Nombre de la marca */

.brand span {
  font-family: var(--f-display);

  font-size: clamp(16px, 4vw, 19px);

  letter-spacing: 0.01em;

  overflow-wrap: break-word;
}

/* Lista de enlaces de navegación */

nav ul {
  display: flex;

  gap: 34px;

  margin: 0;
  padding: 0;

  list-style: none;
}

/* Enlaces principales */

nav a {
  position: relative;

  padding-bottom: 3px;

  font-family: var(--f-mono);
  font-size: 13px;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Línea que aparece debajo de los enlaces */

nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 1px;

  background: var(--mostaza);

  transition: width 0.35s var(--ease);
}

nav a:hover::after {
  width: 100%;
}

/* Elementos adicionales ubicados a la derecha del header */

.nav-right {
  display: flex;

  align-items: center;

  gap: 28px;

  flex-shrink: 0;
}

/* Botón hamburguesa. Se muestra únicamente en responsive */

.burger {
  display: none;

  background: none;

  border: none;

  color: var(--bone);

  cursor: pointer;
}


/*
  BOTONES

  Estilo general para botones y llamadas a la acción.
*/

.btn {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 48px;
  max-width: 100%;

  padding: 15px 26px;

  border: 1px solid var(--bone);
  border-radius: 999px;

  background: transparent;

  color: var(--bone);

  font-family: var(--f-mono);
  font-size: 12.5px;

  text-transform: uppercase;
  letter-spacing: 0.1em;

  cursor: pointer;

  overflow: hidden;

  isolation: isolate;

  white-space: normal;

  text-align: center;
}

/* Fondo utilizado en el efecto hover */

.btn::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background: var(--bone);

  border-radius: 999px;

  transform: scale(0);

  transition: transform 0.5s var(--ease);
}

.btn:hover::before {
  transform: scale(1);
}

.btn:hover {
  color: var(--ink);
}

/* Variante sólida del botón */

.btn-solid {
  background: var(--achiote);

  border-color: var(--achiote);

  color: var(--bone);
}

.btn-solid::before {
  background: var(--bone);
}

.btn-solid:hover {
  color: var(--ink);
}

/* Contenedor utilizado para efectos magnéticos */

.magnetic-wrap {
  display: inline-block;

  max-width: 100%;
}


/*
  HERO

  Primera sección principal de la página.
  Utiliza una imagen de fondo, una capa oscura y contenido
  superpuesto.
*/

#hero {
  position: relative;

  min-height: 100svh;

  display: flex;

  align-items: flex-end;

  padding-top: 120px;

  overflow: hidden;
}

/* Contenedor de la imagen de fondo */

#hero .bg {
  position: absolute;
  inset: 0;

  z-index: 0;
}

/* Imagen de fondo del hero */

#hero .bg img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: saturate(0.92) brightness(0.5);

  transform: scale(1.12);
}

/* Capa oscura para mejorar la lectura del contenido */

#hero .bg::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(27, 23, 18, 0.35) 0%,
    rgba(27, 23, 18, 0.35) 40%,
    rgba(27, 23, 18, 0.96) 96%
  );
}

/* Textura granulada superpuesta */

#hero .grain {
  position: absolute;
  inset: 0;

  z-index: 1;

  opacity: 0.18;

  mix-blend-mode: overlay;

  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Canvas utilizado para efectos visuales adicionales */

#emberCanvas {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;
}

/* Contenido del hero */

.hero-inner {
  position: relative;

  z-index: 2;

  width: 100%;

  padding: 0 var(--page-padding) 64px;
}

/* Evita padding duplicado cuando .hero-inner está dentro de .wrap */

.wrap .hero-inner {
  padding-left: 0;
  padding-right: 0;
}

/* Espaciado inferior del texto superior */

.hero-eyebrow {
  margin-bottom: 22px;
}

/* Título principal del hero */

.hero-title {
  max-width: 12ch;

  font-size: clamp(38px, 10.5vw, 152px);

  line-height: 0.96;

  font-weight: 500;

  letter-spacing: -0.02em;

  overflow-wrap: break-word;
}

/* Parte destacada del título */

.hero-title em {
  font-style: italic;

  color: var(--mostaza);
}

/* Fila que contiene descripción y botones */

.hero-row {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 40px;

  margin-top: 34px;

  flex-wrap: wrap;
}

/* Descripción del hero */

.hero-sub {
  width: 100%;

  max-width: 42ch;

  font-size: clamp(14.5px, 3.6vw, 16.5px);

  line-height: 1.65;

  color: var(--bone-dim);
}

/* Grupo de botones del hero */

.hero-cta {
  display: flex;

  gap: 14px;

  flex-wrap: wrap;

  max-width: 100%;
}

/* Indicador visual para continuar haciendo scroll */

.scroll-cue {
  position: absolute;

  right: var(--page-padding);
  bottom: 34px;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  font-family: var(--f-mono);

  font-size: 11px;

  letter-spacing: 0.1em;

  color: var(--bone-dim);
}

/* Línea animada del indicador */

.scroll-cue .stick {
  width: 1px;
  height: 46px;

  background: linear-gradient(var(--mostaza), transparent);

  animation: stick 1.8s ease-in-out infinite;
}

@keyframes stick {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}


/*
  SECCIONES

  Reglas generales para las secciones principales.
*/

section {
  position: relative;

  width: 100%;

  min-width: 0;
}

/* Espaciado vertical estándar */

.section-pad {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* Espaciado vertical reducido */

.section-pad-sm {
  padding-top: 80px;
  padding-bottom: 80px;
}


/*
  ABOUT

  Sección informativa sobre el restaurante/proyecto.
*/

#nosotros {
  background: var(--bone);

  color: var(--ink);
}

/* Distribución principal de contenido */

.about-grid {
  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 80px;

  align-items: start;
}

/* Párrafos de la sección */

.about-copy p {
  width: 100%;

  max-width: 52ch;

  margin: 0 0 20px;

  font-size: clamp(16px, 2.6vw, 19px);

  line-height: 1.7;

  color: #3a3327;
}

/* Primera letra decorativa */

.about-copy .drop {
  float: left;

  padding: 6px 10px 0 0;

  font-family: var(--f-display);

  font-size: clamp(46px, 10vw, 64px);

  line-height: 0.8;

  color: var(--achiote);
}

/* Lista de estadísticas */

.stat-list {
  display: flex;

  flex-direction: column;

  gap: 0;

  border-top: 1px solid var(--line-dark);
}

/* Cada fila de estadística */

.stat-row {
  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: 16px;

  padding: 26px 0;

  border-bottom: 1px solid var(--line-dark);
}

/* Número principal de la estadística */

.stat-num {
  flex-shrink: 0;

  font-family: var(--f-display);

  font-size: clamp(36px, 9vw, 56px);

  font-weight: 500;

  color: var(--achiote);
}

/* Descripción de la estadística */

.stat-label {
  max-width: 180px;

  font-family: var(--f-mono);

  font-size: 12px;

  text-align: right;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #5a5140;
}


/*
  MENÚ

  Sección donde se muestran los platos disponibles.
*/

#menu {
  background: var(--ink);
}

/* Cabecera del menú */

.menu-head {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 30px;

  margin-bottom: 50px;

  flex-wrap: wrap;
}

.menu-head h2 {
  font-size: clamp(30px, 7vw, 64px);
}

/* Contenedor de los platos */

.dish-list {
  border-top: 1px solid var(--line);
}

/* Cada elemento individual del menú */

.dish {
  position: relative;

  display: grid;

  grid-template-columns:
    60px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 24px;

  padding: 26px 4px;

  border-bottom: 1px solid var(--line);

  cursor: pointer;

  transition: padding 0.35s var(--ease);
}

/* Desplaza ligeramente el plato al pasar el cursor */

.dish:hover {
  padding-left: 18px;
}

/* Número del plato */

.dish-idx {
  font-family: var(--f-mono);

  font-size: 12px;

  color: var(--mostaza);
}

/* Contenedor que evita que el nombre desborde */

.dish-name-wrap {
  min-width: 0;

  overflow: hidden;
}

/* Nombre del plato */

.dish-name {
  display: inline-block;

  font-family: var(--f-display);

  font-size: clamp(22px, 4.6vw, 38px);

  overflow-wrap: break-word;

  transition:
    transform 0.45s var(--ease),
    color 0.45s var(--ease);
}

/* Efecto sobre el nombre cuando se pasa el cursor */

.dish:hover .dish-name {
  transform: translateX(10px);

  color: var(--mostaza);
}

/* Categoría del plato */

.dish-cat {
  display: block;

  margin-top: 6px;

  font-family: var(--f-mono);

  font-size: 11px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--bone-dim);

  opacity: 0.7;
}

/* Precio del plato */

.dish-price {
  font-family: var(--f-mono);

  font-size: clamp(13px, 3.4vw, 15px);

  color: var(--bone-dim);

  white-space: nowrap;
}


/*
  VISTA PREVIA DEL PLATO — ESCRITORIO

  Vista flotante que aparece cuando el usuario pasa
  el cursor sobre un plato.
*/

.dish-preview {
  position: fixed;

  top: 0;
  left: 0;

  width: 220px;
  height: 280px;

  z-index: 60;

  overflow: hidden;

  border-radius: 6px;

  pointer-events: none;

  opacity: 0;

  transform: scale(0.85);

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);

  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.dish-preview img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* Estado visible de la vista previa */

.dish-preview.active {
  opacity: 1;

  transform: scale(1);
}

/*
  En dispositivos táctiles no existe hover tradicional,
  por lo que la vista previa flotante se desactiva.
*/

@media (hover: none) {
  .dish-preview {
    display: none;
  }
}


/*
  GALERÍA
*/

#galeria {
  background: var(--ink);
}

/* Grid principal de imágenes */

.gal-grid {
  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  grid-auto-rows: 14vw;

  gap: 10px;
}

/* Elemento individual de la galería */

.gal-item {
  position: relative;

  overflow: hidden;

  background: var(--ink-soft);

  border-radius: 4px;

  cursor: zoom-in;
}

/* Contenedor del efecto de tueste */

.gal-item .tueste {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}

/* Imagen de la galería */

.gal-item img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.7s var(--ease);
}

/* Zoom de la imagen al pasar el cursor */

.gal-item:hover img {
  transform: scale(1.08);
}

/* Variantes de tamaño del grid */

.gal-item.a {
  grid-column: span 3;
  grid-row: span 2;
}

.gal-item.b {
  grid-column: span 2;
  grid-row: span 1;
}

.gal-item.c {
  grid-column: span 2;
  grid-row: span 2;
}


/*
  LIGHTBOX

  Visor de imágenes a pantalla completa.
*/

.lightbox {
  position: fixed;
  inset: 0;

  z-index: 200;

  display: flex;

  align-items: center;
  justify-content: center;

  background: rgba(15, 12, 9, 0.96);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.35s var(--ease);
}

/* Estado abierto del lightbox */

.lightbox.open {
  opacity: 1;

  pointer-events: auto;
}

/* Imagen mostrada dentro del lightbox */

.lightbox img {
  max-width: min(88vw, 1200px);

  max-height: 82vh;

  border-radius: 4px;
}

/* Botón de cierre */

.lightbox button {
  position: absolute;

  top: 28px;
  right: 34px;

  background: none;

  border: none;

  color: var(--bone);

  font-family: var(--f-mono);

  font-size: 14px;

  letter-spacing: 0.1em;

  cursor: pointer;
}

/* Flechas de navegación */

.lb-arrow {
  position: absolute;

  top: 50%;

  padding: 14px;

  background: none;

  border: none;

  color: var(--bone);

  font-size: 28px;

  cursor: pointer;

  transform: translateY(-50%);
}

.lb-prev {
  left: 14px;
}

.lb-next {
  right: 14px;
}


/*
  TESTIMONIOS
*/

#testimonios {
  background: var(--bone-dim);

  color: var(--ink);
}

/* Grid de tarjetas */

.test-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1px;

  background: var(--line-dark);

  border: 1px solid var(--line-dark);
}

/* Tarjeta individual */

.test-card {
  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 22px;

  min-height: 260px;

  padding: 40px 34px;

  background: var(--bone-dim);
}

/* Texto de la recomendación */

.test-quote {
  font-family: var(--f-display);

  font-size: clamp(17px, 4.2vw, 21px);

  line-height: 1.5;

  overflow-wrap: break-word;
}

/* Nombre del cliente */

.test-name {
  font-family: var(--f-mono);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--achiote);
}


/*
  MAPA
*/

#mapa {
  background: var(--ink);
}

/* Contenedor visual del mapa */

.map-frame {
  height: 380px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 8px;

  filter: grayscale(0.4) invert(0.92) contrast(0.9);
}

/* iframe utilizado para insertar el mapa */

.map-frame iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}


/*
  FOOTER / CTA
*/

footer {
  background: var(--ink);

  padding-top: 120px;
}

/* Llamada a la acción principal del footer */

.cta-big {
  padding-bottom: 100px;

  text-align: center;
}

/* Título grande del CTA */

.cta-big h2 {
  max-width: 12ch;

  margin-inline: auto;

  font-size: clamp(34px, 11vw, 128px);

  line-height: 0.98;

  letter-spacing: -0.02em;

  overflow-wrap: break-word;
}

/* Botón principal del CTA */

.cta-big .btn {
  margin-top: 40px;

  padding: 20px 42px;

  font-size: 14px;
}

/* Columnas informativas del footer */

.foot-grid {
  display: grid;

  grid-template-columns:
    1.3fr
    1fr
    1fr
    1fr;

  gap: 40px;

  padding: 56px 0;

  border-top: 1px solid var(--line);
}

/* Títulos de las columnas */

.foot-col h4 {
  margin: 0 0 16px;

  font-family: var(--f-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--mostaza);
}

/* Texto y enlaces del footer */

.foot-col p,
.foot-col a {
  display: block;

  font-size: 14.5px;

  line-height: 1.8;

  color: var(--bone-dim);

  overflow-wrap: break-word;
}

.foot-col a:hover {
  color: var(--bone);
}

/* Parte inferior del footer */

.foot-bottom {
  display: flex;

  justify-content: space-between;

  gap: 10px;

  padding: 22px 0 40px;

  border-top: 1px solid var(--line);

  font-family: var(--f-mono);

  font-size: 11.5px;

  color: var(--bone-dim);

  flex-wrap: wrap;
}


/*
  CURSOR PIEDRA

  Cursor visual personalizado que sigue la posición
  del mouse mediante JavaScript.
*/

#piedra {
  position: fixed;

  width: 64px;
  height: 64px;

  z-index: 150;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(244, 238, 226, 0.55),
      transparent 40%
    ),
    radial-gradient(circle at 70% 75%, rgba(0, 0, 0, 0.35), transparent 55%),
    var(--mostaza);

  opacity: 0;

  transform: translate(-50%, -50%) scale(0.4);

  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}

/* Texto interno del cursor */

#piedra span {
  font-family: var(--f-mono);

  font-size: 9px;

  letter-spacing: 0.06em;

  color: var(--ink);

  text-transform: uppercase;
}

/* Estado visible del cursor */

#piedra.show {
  opacity: 1;

  transform: translate(-50%, -50%) scale(1);
}

/* Oculta el cursor personalizado en dispositivos táctiles */

@media (hover: none) {
  #piedra {
    display: none;
  }
}


/*
  BOTÓN FLOTANTE WHATSAPP
*/

.wa-float {
  position: fixed;

  right: var(--page-padding);
  bottom: 80px;

  z-index: 120;

  width: 58px;
  height: 58px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #25d366;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Anillo animado alrededor del botón */

.wa-float::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: 50%;

  background: #25d366;

  opacity: 0.55;

  animation: waPulse 2.4s ease-out infinite;
}

@keyframes waPulse {
  0% {
    transform: scale(1);

    opacity: 0.55;
  }

  100% {
    transform: scale(1.8);

    opacity: 0;
  }
}

/* Icono de WhatsApp */

.wa-float svg {
  position: relative;

  z-index: 1;

  width: 28px;
  height: 28px;
}

/* Desactiva la animación de pulso si el usuario reduce movimiento */

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


/*
  TABLET / MÓVIL GRANDE — ≤900px

  Ajustes generales para pantallas de hasta 900px.
*/

@media (max-width: 900px) {
  /* Oculta la navegación horizontal */

  .navlinks {
    display: none;
  }

  /* Oculta el botón de WhatsApp del header */

  .nav-wa-btn {
    display: none;
  }

  /* Muestra el botón hamburguesa */

  .burger {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: 8px;

    border-radius: 6px;
  }

  /* Reduce el espacio vertical de las secciones */

  .section-pad {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .section-pad-sm {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* El contenido About pasa a una columna */

  .about-grid {
    grid-template-columns: 1fr;

    gap: 44px;
  }

  /* Los testimonios pasan a una columna */

  .test-grid {
    grid-template-columns: 1fr;
  }

  /* Footer de dos columnas */

  .foot-grid {
    grid-template-columns: 1fr 1fr;

    gap: 32px 24px;
  }

  /* Galería de dos columnas */

  .gal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    grid-auto-rows: 44vw;
  }

  .gal-item.a {
    grid-column: span 2;
    grid-row: span 1;
  }

  .gal-item.c {
    grid-column: span 1;
    grid-row: span 1;
  }


  /*
    MENÚ

    Se reorganiza el grid de cada plato para adaptarse
    a pantallas más pequeñas.
  */

  .dish {
    grid-template-columns:
      32px
      minmax(0, 1fr)
      auto;

    align-items: center;

    gap: 16px;

    padding: 18px 4px;
  }

  .dish-price {
    white-space: nowrap;
  }

  /*
    IMAGEN DEL PLATILLO

    En tablets y móviles grandes se utiliza una imagen
    de 190px de alto para dar mayor presencia al plato.
  */

  .dish-thumb {
    display: block;

    grid-column: 1 / -1;

    width: 100%;
    max-width: 100%;

    height: 190px;

    margin-top: 8px;

    object-fit: cover;
    object-position: center;

    border-radius: 8px;
  }


  /*
    WHATSAPP

    Se reduce el tamaño del botón flotante.
  */

  .wa-float {
    right: var(--page-padding);

    bottom: 80px;

    width: 52px;
    height: 52px;
  }

  .wa-float svg {
    width: 24px;
    height: 24px;
  }
}


/*
  MÓVIL — ≤600px

  Ajustes específicos para teléfonos.
*/

@media (max-width: 600px) {
  :root {
    --page-padding: clamp(18px, 5.5vw, 24px);
  }

  header {
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
  }

  .brand span {
    font-size: 16px;
  }

  .brand img {
    width: 20%;
    height: 20%;
  }


  /*
    HERO
  */

  #hero {
    padding-top: 96px;

    align-items: flex-end;
  }

  .hero-inner {
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    padding-bottom: 48px;
  }

  .wrap .hero-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .hero-title {
    max-width: 11ch;

    font-size: clamp(34px, 13vw, 60px);

    line-height: 1.02;
  }

  /* El contenido del hero se centra verticalmente */

  .hero-row {
    flex-direction: column;

    align-items: center;

    gap: 24px;

    margin-top: 24px;

    text-align: center;
  }

  .hero-sub {
    width: 100%;

    max-width: 38ch;

    margin-inline: auto;

    font-size: 15px;

    line-height: 1.65;
  }

  .hero-cta {
    justify-content: center;

    width: 100%;

    max-width: 360px;

    margin-inline: auto;
  }

  .hero-cta .btn {
    width: 100%;

    padding: 13px 18px;

    font-size: 11.5px;
  }

  /* El indicador de scroll no es necesario en móvil */

  .scroll-cue {
    display: none;
  }


  /*
    SECCIONES
  */

  .section-pad {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section-pad-sm {
    padding-top: 44px;
    padding-bottom: 44px;
  }


  /*
    ABOUT
  */

  .about-copy p {
    font-size: 15.5px;

    line-height: 1.7;
  }

  .about-copy .drop {
    padding: 4px 8px 0 0;

    font-size: 42px;
  }

  .stat-row {
    align-items: center;

    gap: 12px;

    padding: 18px 0;
  }

  .stat-num {
    font-size: 34px;
  }

  .stat-label {
    max-width: 120px;

    font-size: 10.5px;

    line-height: 1.5;
  }


  /*
    MENÚ
  */

  .menu-head {
    gap: 16px;

    margin-bottom: 32px;
  }

  .menu-head h2 {
    font-size: 30px;
  }

  /*
    El plato utiliza dos filas:

    Primera fila:
    número + nombre + precio

    Segunda fila:
    imagen ocupando todo el ancho.
  */

  .dish {
    grid-template-columns:
      26px
      minmax(0, 1fr)
      auto;

    grid-template-rows:
      auto
      auto;

    column-gap: 14px;
    row-gap: 14px;

    padding: 20px 0;
  }

  .dish-idx {
    font-size: 10.5px;
  }

  .dish-name {
    font-size: clamp(19px, 6vw, 24px);

    line-height: 1.15;
  }

  .dish-cat {
    font-size: 10px;

    line-height: 1.5;
  }

  .dish-price {
    font-size: 12.5px;
  }

  /* En móvil no se desplaza el plato al hacer hover */

  .dish:hover {
    padding-left: 0;
  }

  /*
    IMAGEN DE PLATILLO EN MÓVIL

    Se mantiene una altura de 190px para que la imagen
    sea fácilmente visible sin ocupar demasiado espacio.
  */

  .dish-thumb {
    grid-column: 1 / -1;

    width: 100%;
    max-width: 100%;

    height: 190px;

    margin-top: 4px;

    object-fit: cover;
    object-position: center;

    border-radius: 8px;
  }


  /*
    GALERÍA
  */

  .gal-grid {
    gap: 6px;

    grid-auto-rows: 42vw;
  }


  /*
    TESTIMONIOS
  */

  .test-card {
    min-height: auto;

    gap: 16px;

    padding: 26px 22px;
  }

  .test-quote {
    font-size: 17px;

    line-height: 1.5;
  }


  /*
    MAPA
  */

  .map-frame {
    height: 260px;
  }


  /*
    FOOTER
  */

  footer {
    padding-top: 70px;
  }

  .cta-big {
    padding-bottom: 60px;
  }

  .cta-big h2 {
    max-width: 11ch;

    font-size: clamp(30px, 13vw, 46px);

    line-height: 1.02;
  }

  .cta-big .btn {
    width: min(100%, 360px);

    margin-top: 26px;

    padding: 16px 24px;

    font-size: 12px;
  }

  .foot-grid {
    grid-template-columns: 1fr;

    gap: 28px;

    padding: 40px 0;
  }

  .foot-col p,
  .foot-col a {
    font-size: 13.5px;

    line-height: 1.7;
  }

  .foot-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    padding: 16px 0 32px;

    font-size: 10.5px;
  }


  /*
    WHATSAPP
  */

  .wa-float {
    right: var(--page-padding);

    bottom: 70px;

    width: 48px;
    height: 48px;
  }

  .wa-float svg {
    width: 22px;
    height: 22px;
  }


  /*
    LIGHTBOX
  */

  .lb-close {
    top: 16px !important;
    right: var(--page-padding) !important;
  }

  .lb-arrow {
    padding: 10px 12px;

    font-size: 24px;
  }

  .lb-prev {
    left: 8px !important;
  }

  .lb-next {
    right: 8px !important;
  }
}


/*
  MÓVIL PEQUEÑO — ≤380px

  Ajustes para dispositivos con pantallas especialmente pequeñas.
*/

@media (max-width: 380px) {
  :root {
    --page-padding: 16px;
  }

  .hero-inner {
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
  }

  .wrap .hero-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .hero-title {
    max-width: 11ch;

    font-size: 30px;
  }

  .hero-sub {
    font-size: 14px;
  }

  .menu-head h2 {
    font-size: 26px;
  }

  .dish {
    grid-template-columns:
      24px
      minmax(0, 1fr)
      auto;

    gap: 10px;
  }

  .dish-name {
    font-size: 18px;
  }

  .dish-price {
    font-size: 11.5px;
  }

  /*
    En pantallas muy pequeñas se reduce un poco la altura
    de la imagen, manteniendo una presencia importante.
  */

  .dish-thumb {
    height: 175px;
  }

  .cta-big h2 {
    font-size: 28px;
  }

  .stat-num {
    font-size: 28px;
  }

  .btn {
    padding-inline: 16px;
  }
}


/*
  MENÚ MÓVIL OVERLAY

  Menú que aparece sobre toda la página en dispositivos
  pequeños cuando se activa mediante JavaScript.
*/

.mobile-nav {
  position: fixed;
  inset: 0;

  z-index: 300;

  display: flex;

  align-items: center;
  justify-content: center;

  background: rgba(27, 23, 18, 0.97);

  backdrop-filter: blur(12px);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.4s var(--ease);
}

/* Estado visible del menú móvil */

.mobile-nav.open {
  opacity: 1;

  pointer-events: auto;
}

/* Contenido central del menú */

.mobile-nav-inner {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 32px;

  width: 100%;
  max-width: 420px;

  padding-inline: var(--page-padding);

  text-align: center;
}

/* Botón para cerrar el menú */

.mobile-nav-close {
  position: absolute;

  top: 24px;
  right: var(--page-padding);

  padding: 8px;

  background: none;

  border: none;

  color: var(--bone);

  font-family: var(--f-mono);

  font-size: 22px;

  cursor: pointer;
}

/* Lista de enlaces del menú móvil */

.mobile-nav ul {
  display: flex;

  flex-direction: column;

  gap: 8px;

  width: 100%;

  margin: 0;
  padding: 0;

  list-style: none;
}

/* Enlaces grandes del menú */

.mobile-nav-link {
  display: block;

  padding: 4px 0;

  color: var(--bone);

  font-family: var(--f-display);

  font-size: clamp(30px, 9vw, 52px);

  overflow-wrap: break-word;

  transition: color 0.3s var(--ease);
}

.mobile-nav-link:hover {
  color: var(--mostaza);
}

/* Botón de WhatsApp dentro del menú móvil */

.mobile-nav-wa {
  max-width: 100%;

  margin-top: 8px;

  padding: 14px 30px;

  font-size: 12.5px;
}


/*
  LIGHTBOX — ESPECIFICIDAD

  Estas reglas refuerzan las posiciones de los botones
  del lightbox utilizando !important para evitar que otras
  reglas generales de botones interfieran.
*/

.lb-close {
  position: absolute !important;

  top: 28px !important;
  right: var(--page-padding) !important;
  left: auto !important;

  z-index: 210;

  padding: 8px;

  background: none;

  border: none;

  color: var(--bone);

  font-family: var(--f-mono);

  font-size: 14px;

  letter-spacing: 0.1em;

  cursor: pointer;

  transform: none !important;
}

/* Flechas del lightbox */

.lb-arrow {
  position: absolute !important;

  top: 50% !important;

  left: auto !important;
  right: auto !important;

  z-index: 210;

  padding: 14px 18px;

  background: rgba(27, 23, 18, 0.5) !important;

  border: none;

  border-radius: 50%;

  color: var(--bone);

  font-size: 32px;

  cursor: pointer;

  transform: translateY(-50%) !important;

  transition: background 0.3s;
}

/* Estado hover de las flechas */

.lb-arrow:hover {
  background: rgba(156, 68, 41, 0.7) !important;
}

/* Posición del botón anterior */

.lb-prev {
  left: max(14px, var(--page-padding)) !important;
}

/* Posición del botón siguiente */

.lb-next {
  right: max(14px, var(--page-padding)) !important;
}


/*
  IMÁGENES DE PLATOS

  Estas reglas controlan específicamente cuándo se muestran
  las imágenes de los platos según el tamaño de pantalla.
*/


/*
  ESCRITORIO

  Las imágenes permanecen ocultas en pantallas superiores
  a 900px porque en escritorio se utiliza la vista previa
  flotante.
*/

@media (min-width: 901px) {
  .dish-thumb {
    display: none;
  }
}


/*
  TABLET Y MÓVIL GRANDE

  Las imágenes se muestran debajo de la información
  principal de cada plato.
*/

@media (max-width: 900px) {
  .dish-thumb {
    display: block;

    grid-column: 1 / -1;

    width: 100%;
    max-width: 100%;

    height: 190px;

    margin-top: 8px;

    object-fit: cover;
    object-position: center;

    border-radius: 8px;
  }
}


/*
  MÓVIL

  Mantiene una imagen amplia para que el platillo
  tenga suficiente presencia visual.
*/

@media (max-width: 600px) {
  .dish-thumb {
    width: 100%;
    max-width: 100%;

    height: 190px;

    margin-top: 10px;

    border-radius: 8px;

    object-fit: cover;
    object-position: center;
  }
}


/*
  MÓVILES PEQUEÑOS
*/

@media (max-width: 380px) {
  .dish-thumb {
    height: 175px;
  }
}


/*
  MÓVILES MUY PEQUEÑOS
*/

@media (max-width: 320px) {
  .dish-thumb {
    height: 160px;
  }
}


/*
  PROTECCIÓN EXTRA CONTRA DESBORDAMIENTO

  min-width: 0 permite que los elementos dentro de grids
  y flexbox puedan reducir su tamaño correctamente.
*/

.wrap,
.hero-inner,
.about-grid,
.menu-head,
.dish,
.test-grid,
.test-card,
.foot-grid,
.foot-col,
.mobile-nav-inner {
  min-width: 0;
}


/*
  MARGEN LATERAL DE SEGURIDAD

  Garantiza que las secciones principales mantengan
  el mismo espacio lateral que el resto del sitio.
*/

#nosotros > .wrap,
#menu > .wrap,
#galeria > .wrap,
#testimonios > .wrap,
#mapa > .wrap,
footer > .wrap {
  width: min(100%, var(--container));

  margin-inline: auto;

  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}


/*
  PANTALLAS MUY GRANDES

  En monitores de 1440px o más se fija el margen lateral
  en 64px para evitar que siga creciendo.
*/

@media (min-width: 1440px) {
  :root {
    --page-padding: 64px;
  }
}


/*
  PANTALLAS MUY PEQUEÑAS

  Ajustes finales para dispositivos de hasta 320px.
*/

@media (max-width: 320px) {
  :root {
    --page-padding: 14px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-sub {
    font-size: 13.5px;
  }

  .dish-name {
    font-size: 17px;
  }

  .dish-price {
    font-size: 11px;
  }

  /*
    Mantiene una altura suficiente para que la imagen
    siga siendo visualmente útil incluso en teléfonos
    muy pequeños.
  */

  .dish-thumb {
    height: 160px;
  }

  .btn {
    padding-inline: 14px;
  }
}