/* ==========================================================================
   LA CUADRA — PIZZERÍA & CHIVITERÍA
   Hoja de estilos única. Está ordenada por secciones y comentada en español.

   ÍNDICE
     00. VARIABLES (colores, tipografías, espaciados)  <- tocá acá para cambiar la identidad
     01. RESET Y BASE
     02. UTILIDADES (contenedor, títulos, botones, animaciones)
     03. HEADER Y NAVEGACIÓN
     04. HERO
     05. FRANJA DE CONFIANZA
     06. MENÚ (pestañas + platos)
     07. CARRUSELES (usado por menú, galería y reseñas)
     08. PROMOS
     09. GALERÍA
     10. RESEÑAS
     11. RESERVAS (formulario)
     12. NOSOTROS
     13. CONTACTO
     14. FOOTER
     15. BOTÓN FLOTANTE DE WHATSAPP
     16. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO
   ========================================================================== */


/* ==========================================================================
   00. VARIABLES
   Cambiando estos valores cambiás TODO el sitio de una sola vez.
   ========================================================================== */
:root {

  /* ---- COLORES ---- */
  --fondo:          #141110;   /* Fondo general: carbón profundo */
  --superficie:     #1E1A18;   /* Tarjetas, cajas, campos del formulario */
  --superficie-alt: #262120;   /* Un escalón más claro, para hover */
  --rojo:           #D6402F;   /* Acento principal: rojo tomate (bordes, títulos, detalles) */
  --rojo-fuerte:    #B8331F;   /* Rojo más oscuro: se usa en BOTONES para que el texto se lea (AA) */
  --rojo-hover:     #9E2A18;   /* Rojo del botón cuando pasás el mouse */
  --dorado:         #E8B04B;   /* Acento secundario: dorado cálido (líneas finas, sobretítulos) */
  --crema:          #F5EFE7;   /* Texto principal */
  --gris-suave:     #B3A9A0;   /* Texto secundario */
  --borde:          rgba(232, 176, 75, 0.22);  /* Bordes finos dorados */
  --borde-suave:    rgba(245, 239, 231, 0.10); /* Bordes muy discretos */

  /* WhatsApp */
  --wsp:            #25D366;   /* Verde oficial: se usa en el botón flotante */
  --wsp-glifo:      #0A3B2A;   /* Verde muy oscuro para el ícono, para que contraste (9.5:1) */
  --wsp-boton:      #0E6B4F;   /* Verde oscuro para BOTONES con texto (contraste AA con crema) */
  --wsp-boton-hover:#0B5540;

  /* ---- TIPOGRAFÍAS ---- */
  --fuente-display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif; /* Títulos */
  --fuente-cuerpo:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- ESPACIADOS ---- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;

  /* ---- MEDIDAS ---- */
  --ancho-max:   1240px;   /* Ancho máximo del contenido */
  --radio:       14px;     /* Redondeo de las tarjetas */
  --radio-chico: 8px;
  --alto-header: 68px;

  /* ---- SOMBRAS ---- */
  --sombra-suave:  0 4px 18px rgba(0, 0, 0, 0.35);
  --sombra-media:  0 10px 30px rgba(0, 0, 0, 0.45);
  --sombra-fuerte: 0 18px 48px rgba(0, 0, 0, 0.55);

  /* ---- TRANSICIONES ---- */
  --trans: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- TEXTURA DE RUIDO (el "grano" sutil del fondo) ---- */
  --textura-ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)' opacity='0.055'/%3E%3C/svg%3E");
}


/* ==========================================================================
   01. RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Cualquier elemento con el atributo "hidden" queda oculto de verdad.
   (Sin esta regla, un "display: flex" de más abajo lo volvería a mostrar:
   es lo que pasaba con el cartel de confirmación de la reserva.) */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-header) + 12px); /* para que los anclajes no queden tapados por el header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--crema);
  background-color: var(--fondo);
  background-image: var(--textura-ruido);  /* grano sutil */
  overflow-x: hidden;   /* nunca queremos scroll horizontal en la página */
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--dorado); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--crema); }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0;
}

p { margin: 0 0 var(--esp-4); }

ul { margin: 0; padding: 0; list-style: none; }

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


/* ==========================================================================
   02. UTILIDADES
   ========================================================================== */

/* Caja central que mantiene el contenido alineado */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--esp-5);
}

/* Espaciado vertical de cada sección */
.seccion { padding-block: var(--esp-8); position: relative; }

/* Secciones con un tono apenas distinto (deja ver el grano del fondo) */
.seccion--alterna { background-color: rgba(255, 255, 255, 0.022); }

/* Encabezado de sección: sobretítulo + título + bajada */
.seccion__encabezado { max-width: 640px; margin-bottom: var(--esp-6); }

.seccion__sobretitulo {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: var(--esp-2);
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}
/* Línea fina dorada al costado del sobretítulo */
.seccion__sobretitulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--borde), transparent);
  max-width: 90px;
}

.seccion__titulo {
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  color: var(--crema);
  margin-bottom: var(--esp-3);
}

.seccion__bajada { color: var(--gris-suave); font-size: 1.02rem; margin-bottom: 0; }

/* Aclaración chiquita ("Precios sujetos a cambio...") */
.letra-chica {
  font-size: 0.82rem;
  color: var(--gris-suave);
  margin-top: var(--esp-5);
  margin-bottom: 0;
  font-style: italic;
}

/* ---- BOTONES ---- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--fuente-cuerpo);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--trans), transform var(--trans),
              box-shadow var(--trans), border-color var(--trans), color var(--trans);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton--primario {
  background-color: var(--rojo-fuerte);
  color: var(--crema);
  box-shadow: 0 6px 18px rgba(184, 51, 31, 0.30);
}
.boton--primario:hover {
  background-color: var(--rojo-hover);
  color: var(--crema);
  box-shadow: 0 10px 26px rgba(184, 51, 31, 0.45);
}

.boton--wsp {
  background-color: var(--wsp-boton);
  color: var(--crema);
  box-shadow: 0 6px 18px rgba(14, 107, 79, 0.30);
}
.boton--wsp:hover {
  background-color: var(--wsp-boton-hover);
  color: var(--crema);
  box-shadow: 0 10px 26px rgba(14, 107, 79, 0.45);
}

.boton--contorno {
  background-color: transparent;
  color: var(--crema);
  border-color: var(--borde);
}
.boton--contorno:hover { background-color: rgba(232, 176, 75, 0.10); border-color: var(--dorado); }

.boton--grande { padding: 0.92rem 1.7rem; font-size: 1rem; }
.boton--bloque { width: 100%; }
.boton__icono { flex-shrink: 0; }

/* ---- ANIMACIÓN DE APARICIÓN AL HACER SCROLL ----
   La clase .animar arranca invisible y el JavaScript le agrega .visible
   cuando el elemento entra en pantalla (IntersectionObserver).

   IMPORTANTE: el "opacity: 0" solo se aplica si el JavaScript está funcionando
   (por eso el ".js" adelante). Así, si el JS falla o está desactivado,
   el contenido se ve igual en vez de quedar invisible para siempre. */
.js .animar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .animar.visible { opacity: 1; transform: none; }

/* Texto que solo leen los lectores de pantalla */
.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Link para saltar directo al contenido (accesibilidad por teclado) */
.saltar-al-contenido {
  position: absolute;
  top: -60px; left: var(--esp-4);
  z-index: 2000;
  background: var(--rojo-fuerte);
  color: var(--crema);
  padding: 0.6rem 1rem;
  border-radius: var(--radio-chico);
  font-weight: 600;
  transition: top var(--trans);
}
.saltar-al-contenido:focus { top: var(--esp-4); color: var(--crema); }


/* ==========================================================================
   03. HEADER Y NAVEGACIÓN
   ========================================================================== */
.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--alto-header);
  display: flex;
  align-items: center;
  background-color: rgba(20, 17, 16, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--trans), border-color var(--trans), box-shadow var(--trans);
}
/* Cuando bajás, el header se vuelve más sólido (lo agrega el JavaScript) */
.cabecera--scrolleada {
  background-color: rgba(20, 17, 16, 0.94);
  border-bottom-color: var(--borde);
  box-shadow: var(--sombra-suave);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
}

/* ---- LOGO ---- */
.logo { display: inline-flex; align-items: center; gap: var(--esp-3); color: var(--crema); }
.logo:hover { color: var(--crema); }
.logo__marca { flex-shrink: 0; display: block; }
.logo__monograma {
  font-family: var(--fuente-display);
  font-size: 21px;
  letter-spacing: 0.5px;
}
.logo__texto { display: flex; flex-direction: column; line-height: 1; }
.logo__nombre {
  font-family: var(--fuente-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--crema);
}
.logo__bajada {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-top: 2px;
}

/* ---- BOTÓN HAMBURGUESA (solo celulares) ---- */
.hamburguesa {
  width: 44px; height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-chico);
  padding: 0;
}
.hamburguesa__linea {
  display: block;
  width: 20px; height: 2px;
  background-color: var(--crema);
  border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
}
/* Cuando el menú está abierto, las rayitas forman una X */
.hamburguesa--abierta .hamburguesa__linea:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa--abierta .hamburguesa__linea:nth-child(2) { opacity: 0; }
.hamburguesa--abierta .hamburguesa__linea:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- NAVEGACIÓN: en celular es una pantalla completa ---- */
.nav {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-6);
  background-color: rgba(20, 17, 16, 0.98);
  background-image: var(--textura-ruido);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 320ms;
}
.nav--abierto { transform: translateX(0); visibility: visible; }

.nav__lista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-5);
}
.nav__link {
  font-family: var(--fuente-display);
  font-size: 2rem;
  letter-spacing: 0.04em;
  color: var(--crema);
  position: relative;
}
.nav__link:hover, .nav__link--activo { color: var(--dorado); }
/* Subrayado dorado que crece en hover */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background-color: var(--dorado);
  transition: width var(--trans);
}
.nav__link:hover::after, .nav__link--activo::after { width: 100%; }

/* Fondo oscuro detrás del menú abierto */
.menu-fondo {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Cuando el menú está abierto bloqueamos el scroll del fondo */
body.menu-abierto { overflow: hidden; }


/* ==========================================================================
   04. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;          /* svh = alto real de pantalla en celulares */
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--alto-header);
  overflow: hidden;
}

.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Velo oscuro: garantiza que el texto SIEMPRE se lea sobre la foto */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(20,17,16,0.94) 0%, rgba(20,17,16,0.80) 45%, rgba(20,17,16,0.55) 100%),
    linear-gradient(to top, rgba(20,17,16,0.98) 0%, rgba(20,17,16,0.35) 45%, rgba(20,17,16,0.55) 100%);
}

.hero__contenido { position: relative; z-index: 2; padding-block: var(--esp-8); }

.hero__sobretitulo {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: var(--esp-4);
}

.hero__titulo {
  /* El 17vw está calculado para que "LA CUADRA" entre justo en pantallas de 360px */
  font-size: clamp(3.2rem, 17vw, 9rem);
  line-height: 0.9;
  color: var(--crema);
  margin-bottom: var(--esp-4);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

.hero__slogan {
  font-size: clamp(1.05rem, 4.4vw, 1.45rem);
  color: var(--crema);
  max-width: 30ch;
  margin-bottom: var(--esp-6);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.hero__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-bottom: var(--esp-6);
}

/* Línea de horarios de hoy */
.hero__horario {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;      /* en pantallas angostas el texto pasa a dos renglones */
  max-width: 100%;
  gap: var(--esp-3);
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: 100px;
  background-color: rgba(20, 17, 16, 0.6);
  font-size: 0.88rem;
  color: var(--crema);
  margin-bottom: 0;
}
/* Puntito que indica si está abierto (verde) o cerrado (rojo) */
.hero__punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  background-color: var(--gris-suave);
  flex-shrink: 0;
}
/* min-width:0 permite que el texto se corte en dos renglones en vez de desbordar */
#horario-hoy-texto { min-width: 0; }

.hero__horario--abierto .hero__punto { background-color: var(--wsp); box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.18); }
.hero__horario--cerrado .hero__punto { background-color: var(--rojo); box-shadow: 0 0 0 4px rgba(214, 64, 47, 0.18); }


/* ==========================================================================
   05. FRANJA DE CONFIANZA
   ========================================================================== */
.confianza {
  padding-block: var(--esp-7);
  border-top: 1px solid var(--borde-suave);
  border-bottom: 1px solid var(--borde-suave);
  background-color: rgba(255, 255, 255, 0.022);
}

.confianza__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-5);
}

.confianza__item { text-align: center; }
.confianza__icono {
  width: 38px; height: 38px;
  color: var(--dorado);
  margin: 0 auto var(--esp-3);
  display: block;
}
.confianza__titulo {
  font-size: 1.3rem;
  color: var(--crema);
  margin-bottom: var(--esp-1);
  letter-spacing: 0.03em;
}
.confianza__texto { font-size: 0.88rem; color: var(--gris-suave); margin: 0; }


/* ==========================================================================
   06. MENÚ
   ========================================================================== */

/* ---- Pestañas (Pizzas / Chivitos / Minutas / Bebidas) ---- */
.pestanas {
  display: flex;
  gap: var(--esp-2);
  overflow-x: auto;
  padding-bottom: var(--esp-2);
  margin-bottom: var(--esp-6);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pestanas::-webkit-scrollbar { display: none; }

.pestanas__boton {
  flex: 0 0 auto;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--borde-suave);
  border-radius: 100px;
  background-color: transparent;
  color: var(--gris-suave);
  font-size: 0.92rem;
  font-weight: 600;
  transition: all var(--trans);
  white-space: nowrap;
}
.pestanas__boton:hover { color: var(--crema); border-color: var(--borde); }
.pestanas__boton--activa {
  background-color: var(--rojo-fuerte);
  border-color: var(--rojo-fuerte);
  color: var(--crema);
}

/* Título de cada grupo dentro de una pestaña */
.grupo__titulo {
  font-size: 1.7rem;
  color: var(--crema);
  margin-top: var(--esp-6);
  margin-bottom: var(--esp-4);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-3);
  letter-spacing: 0.03em;
}
.grupo__titulo:first-of-type { margin-top: 0; }

.grupo__nota {
  font-family: var(--fuente-cuerpo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-suave);
}
.grupo__nota--estrella {
  color: var(--dorado);
  border: 1px solid var(--borde);
  border-radius: 100px;
  padding: 0.2rem 0.7rem;
}

/* ---- Tarjeta de plato ---- */
.plato {
  background-color: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.plato:hover {
  transform: translateY(-4px);
  border-color: var(--borde);
  box-shadow: var(--sombra-media);
}

.plato__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.plato:hover .plato__foto { transform: scale(1.05); }

.plato__cuerpo {
  padding: var(--esp-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.plato__nombre {
  font-size: 1.3rem;
  color: var(--crema);
  margin-bottom: var(--esp-2);
  letter-spacing: 0.03em;
}

.plato__desc {
  font-size: 0.88rem;
  color: var(--gris-suave);
  line-height: 1.55;
  flex: 1;
  margin-bottom: var(--esp-3);
}

.plato__precio {
  font-family: var(--fuente-display);
  font-size: 1.6rem;
  color: var(--dorado);
  margin: 0;
  letter-spacing: 0.03em;
}
.plato__precio-alt { color: var(--gris-suave); font-size: 1.15rem; }


/* ==========================================================================
   07. CARRUSELES
   Se usan en el menú, la galería y las reseñas.
   En celular: se deslizan con el dedo (scroll-snap).
   En escritorio: el menú y la galería se transforman en grilla.
   ========================================================================== */
.carrusel { position: relative; }

.carrusel__pista {
  display: flex;
  gap: var(--esp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--esp-2) var(--esp-4);
  /* Ocultamos la barra de scroll pero se sigue pudiendo deslizar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }

/* Cada tarjeta del carrusel ocupa casi todo el ancho y se "imanta" al centro */
.carrusel__pista > * {
  flex: 0 0 80%;
  max-width: 330px;
  scroll-snap-align: center;
}

/* Mientras arrastrás con el mouse, desactivamos el scroll suave */
.carrusel__pista--arrastrando { scroll-behavior: auto; cursor: grabbing; scroll-snap-type: none; }
.carrusel__pista--arrastrando * { pointer-events: none; }

/* ---- Flechas (solo en escritorio) ---- */
.carrusel__flecha {
  display: none;   /* se muestran en pantallas grandes, más abajo */
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background-color: rgba(30, 26, 24, 0.92);
  color: var(--crema);
  font-size: 1.7rem;
  line-height: 1;
  padding-bottom: 4px;
  transition: background-color var(--trans), border-color var(--trans), opacity var(--trans);
}
.carrusel__flecha:hover { background-color: var(--rojo-fuerte); border-color: var(--rojo-fuerte); }
.carrusel__flecha:disabled { opacity: 0.3; cursor: default; }
.carrusel__flecha:disabled:hover { background-color: rgba(30, 26, 24, 0.92); border-color: var(--borde); }
.carrusel__flecha--izq { left: -10px; }
.carrusel__flecha--der { right: -10px; }

/* ---- Puntos indicadores ---- */
.carrusel__puntos {
  display: flex;
  justify-content: center;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}
.carrusel__punto {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(245, 239, 231, 0.25);
  transition: background-color var(--trans), width var(--trans);
}
.carrusel__punto--activo { background-color: var(--dorado); width: 22px; border-radius: 100px; }


/* ==========================================================================
   08. PROMOS
   ========================================================================== */
.promos__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
}

.promo {
  position: relative;
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--esp-5);
  text-align: center;
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
/* Brillo dorado sutil arriba de la tarjeta */
.promo::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(to right, transparent, var(--dorado), transparent);
  opacity: 0.6;
}
.promo:hover {
  transform: translateY(-5px);
  border-color: var(--dorado);
  box-shadow: var(--sombra-media);
}

.promo__icono-caja {
  width: 62px; height: 62px;
  margin: 0 auto var(--esp-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background-color: rgba(232, 176, 75, 0.07);
}
.promo__icono { width: 30px; height: 30px; color: var(--dorado); }

.promo__nombre {
  font-size: 1.5rem;
  color: var(--crema);
  margin-bottom: var(--esp-2);
  letter-spacing: 0.03em;
}
.promo__detalle {
  font-size: 0.88rem;
  color: var(--gris-suave);
  line-height: 1.55;
  margin-bottom: var(--esp-4);
  min-height: 2.7em;
}
.promo__precio { margin: 0; }
.promo__badge {
  display: inline-block;
  font-family: var(--fuente-display);
  font-size: 1.75rem;
  letter-spacing: 0.03em;
  color: var(--crema);
  background-color: var(--rojo-fuerte);
  padding: 0.28rem 1.15rem 0.16rem;
  border-radius: 100px;
}


/* ==========================================================================
   09. GALERÍA
   ========================================================================== */
.galeria__item { margin: 0; }

.galeria__item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: var(--radio);
  border: 1px solid var(--borde-suave);
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color var(--trans);
}
.galeria__item img:hover { transform: scale(1.02); border-color: var(--borde); }


/* ==========================================================================
   10. RESEÑAS
   ========================================================================== */
.resena {
  background-color: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: var(--esp-5);
  display: flex;
  flex-direction: column;
  transition: border-color var(--trans), transform var(--trans);
}
.resena:hover { border-color: var(--borde); transform: translateY(-3px); }

.resena__estrellas { display: flex; gap: 3px; margin-bottom: var(--esp-3); }
.resena__estrella { width: 17px; height: 17px; color: var(--dorado); }
.resena__estrella--vacia { color: rgba(245, 239, 231, 0.20); }

.resena__texto {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--crema);
  flex: 1;
  margin-bottom: var(--esp-4);
}

.resena__autor {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dorado);
  margin: 0;
}


/* ==========================================================================
   11. RESERVAS (formulario)
   ========================================================================== */
.reservas { position: relative; }

.reservas__caja {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
}

.reservas__tips {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-top: var(--esp-5);
}
.reservas__tips li {
  position: relative;
  padding-left: var(--esp-5);
  font-size: 0.9rem;
  color: var(--gris-suave);
}
/* Puntito dorado antes de cada tip */
.reservas__tips li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background-color: var(--dorado);
}

/* ---- El formulario ---- */
.formulario {
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--esp-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
  box-shadow: var(--sombra-media);
}

.campo { display: flex; flex-direction: column; }
.campo--ancho { grid-column: 1 / -1; }

.campo__label {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--crema);
  margin-bottom: var(--esp-2);
}
.campo__req { color: var(--rojo); }
.campo__opcional { color: var(--gris-suave); font-weight: 400; text-transform: none; letter-spacing: 0; }

.campo__input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;      /* 16px evita que el celular haga zoom al tocar el campo */
  color: var(--crema);
  background-color: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-chico);
  transition: border-color var(--trans), background-color var(--trans), box-shadow var(--trans);
}
.campo__input::placeholder { color: rgba(179, 169, 160, 0.65); }
.campo__input:hover { border-color: var(--borde); }
.campo__input:focus {
  outline: none;
  border-color: var(--dorado);
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 3px rgba(232, 176, 75, 0.15);
}

.campo__textarea { resize: vertical; min-height: 90px; line-height: 1.55; }

/* Flechita del <select> dibujada con CSS */
.campo__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23B3A9A0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}
/* Las opciones del desplegable (las pinta el sistema, pero ayudamos) */
.campo__select option { background-color: var(--superficie); color: var(--crema); }

/* Campo con error */
.campo--error .campo__input { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(214, 64, 47, 0.15); }

.campo__error {
  font-size: 0.82rem;
  color: #FF8878;   /* rojo aclarado para que contraste sobre el fondo oscuro */
  margin: var(--esp-2) 0 0;
  min-height: 0;
  display: none;
}
.campo--error .campo__error { display: block; }

.campo__ayuda { font-size: 0.78rem; color: var(--gris-suave); margin: var(--esp-2) 0 0; }
.campo__ayuda--centro { text-align: center; }

/* ---- Cartel verde de confirmación ---- */
.confirmacion {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--radio-chico);
  border: 1px solid rgba(37, 211, 102, 0.45);
  background-color: rgba(37, 211, 102, 0.10);
}
.confirmacion__icono { color: var(--wsp); flex-shrink: 0; margin-top: 2px; }
.confirmacion__titulo {
  font-family: var(--fuente-display);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  color: var(--crema);
  margin: 0 0 var(--esp-1);
}
.confirmacion__texto { font-size: 0.88rem; color: var(--gris-suave); margin: 0; }


/* ==========================================================================
   12. NOSOTROS
   ========================================================================== */
.nosotros {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
  align-items: center;
}

.nosotros__texto p { color: var(--gris-suave); }
.nosotros__texto strong { color: var(--crema); font-weight: 600; }

.nosotros__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-6);
  margin-top: var(--esp-5);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--borde-suave);
}
.nosotros__dato { display: flex; flex-direction: column; }
.nosotros__numero {
  font-family: var(--fuente-display);
  font-size: 2.2rem;
  color: var(--dorado);
  line-height: 1;
  letter-spacing: 0.03em;
}
.nosotros__etiqueta {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-suave);
  margin-top: var(--esp-1);
}

.nosotros__fotos { display: grid; gap: var(--esp-4); }
.nosotros__figura { margin: 0; overflow: hidden; border-radius: var(--radio); border: 1px solid var(--borde-suave); }
.nosotros__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.22,0.61,0.36,1); }
.nosotros__figura:hover img { transform: scale(1.04); }
.nosotros__figura--grande img { aspect-ratio: 4 / 3; }
.nosotros__figura--chica img { aspect-ratio: 16 / 9; }


/* ==========================================================================
   13. CONTACTO
   ========================================================================== */
.contacto__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
}

.contacto__bloque {
  padding-bottom: var(--esp-5);
  margin-bottom: var(--esp-5);
  border-bottom: 1px solid var(--borde-suave);
}
.contacto__bloque:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.contacto__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: 1.25rem;
  color: var(--crema);
  margin-bottom: var(--esp-3);
  letter-spacing: 0.03em;
}
.contacto__icono { width: 21px; height: 21px; color: var(--dorado); flex-shrink: 0; }

.contacto__dato { color: var(--gris-suave); margin-bottom: var(--esp-2); }
.contacto__dato--chico { font-size: 0.9rem; }
.contacto__link { font-size: 0.9rem; font-weight: 600; }
.contacto__link-fuerte {
  font-family: var(--fuente-display);
  font-size: 2rem;
  color: var(--crema);
  letter-spacing: 0.04em;
}
.contacto__link-fuerte:hover { color: var(--dorado); }

/* Tabla de horarios */
.horarios th, .horarios td {
  padding: var(--esp-2) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borde-suave);
  font-size: 0.9rem;
}
.horarios tr:last-child th, .horarios tr:last-child td { border-bottom: none; }
.horarios th { font-weight: 600; color: var(--crema); padding-right: var(--esp-4); }
.horarios td { color: var(--gris-suave); text-align: right; }
/* El día de hoy se resalta (lo marca el JavaScript) */
.horarios tr.horarios--hoy th { color: var(--dorado); }
.horarios tr.horarios--hoy td { color: var(--crema); }

/* Redes */
.redes { display: flex; gap: var(--esp-3); flex-wrap: wrap; }
.redes__link {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 0.55rem 1rem;
  border: 1px solid var(--borde-suave);
  border-radius: 100px;
  color: var(--crema);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all var(--trans);
}
.redes__link:hover { border-color: var(--dorado); color: var(--dorado); background-color: rgba(232, 176, 75, 0.08); }

/* Mapa */
.contacto__mapa {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  min-height: 320px;
  box-shadow: var(--sombra-media);
}
.contacto__mapa iframe { width: 100%; height: 100%; min-height: 320px; display: block; filter: grayscale(0.25) contrast(1.05); }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.pie {
  background-color: rgba(0, 0, 0, 0.35);
  border-top: 1px solid var(--borde);
  padding-top: var(--esp-7);
  margin-top: var(--esp-4);
}

.pie__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
  padding-bottom: var(--esp-7);
}

.pie__slogan { color: var(--gris-suave); font-size: 0.9rem; margin-top: var(--esp-4); margin-bottom: 0; }

.pie__titulo {
  font-size: 1.15rem;
  color: var(--crema);
  margin-bottom: var(--esp-3);
  letter-spacing: 0.06em;
}

.pie__nav ul, .pie__contacto ul { display: flex; flex-direction: column; gap: var(--esp-2); }
.pie__nav a, .pie__contacto a { color: var(--gris-suave); font-size: 0.9rem; }
.pie__nav a:hover, .pie__contacto a:hover { color: var(--dorado); }
.pie__contacto li { color: var(--gris-suave); font-size: 0.9rem; }
.redes--pie { margin-top: var(--esp-4); }
.redes--pie .redes__link { padding: 0.5rem; border-radius: 50%; }

.pie__legal {
  border-top: 1px solid var(--borde-suave);
  padding-block: var(--esp-4);
}
.pie__legal p { margin: 0; font-size: 0.82rem; color: var(--gris-suave); text-align: center; }

/* Para que el botón flotante no tape el texto del final */
.pie__legal .contenedor { padding-right: 90px; }


/* ==========================================================================
   15. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */
.wsp-flotante {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: 900;
  width: 58px; height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--wsp);
  color: var(--wsp-glifo);   /* ícono oscuro: contrasta 9.5:1 con el verde */
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.10);
  /* Arranca oculto: aparece cuando bajás 400px */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22,0.61,0.36,1),
              visibility 320ms, width 260ms ease, border-radius 260ms ease;
}
.wsp-flotante--visible { opacity: 1; visibility: visible; transform: none; }
.wsp-flotante:hover { color: var(--wsp-glifo); }
.wsp-flotante__icono { position: relative; z-index: 2; flex-shrink: 0; }

/* Animación de pulso suave */
.wsp-flotante__pulso {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--wsp);
  opacity: 0.55;
  z-index: 1;
  animation: pulso-wsp 2.4s ease-out infinite;
}
@keyframes pulso-wsp {
  0%   { transform: scale(1);    opacity: 0.5; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* El texto "Escribinos" aparece al pasar el mouse (solo escritorio) */
.wsp-flotante__texto {
  display: none;
  position: relative;
  z-index: 2;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}


/* ==========================================================================
   16. ACCESIBILIDAD: foco visible
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 4px;
}
.carrusel__pista:focus-visible { outline-offset: -3px; }


/* ==========================================================================
   ===============  A PARTIR DE ACÁ: PANTALLAS MÁS GRANDES  =================
   El sitio está pensado primero para celulares. Estas reglas van agregando
   columnas y espacio a medida que la pantalla crece.
   ========================================================================== */

/* ---------- TABLETS CHICAS: desde 560px ---------- */
@media (min-width: 560px) {

  .confianza__grilla { grid-template-columns: repeat(2, 1fr); gap: var(--esp-6); }
  .promos__grilla    { grid-template-columns: repeat(2, 1fr); }

  .formulario { grid-template-columns: repeat(2, 1fr); padding: var(--esp-6); }

  .carrusel__pista > * { flex-basis: 62%; }

  .galeria__item img { height: 280px; }
}


/* ---------- TABLETS: desde 768px ---------- */
@media (min-width: 768px) {

  :root { --alto-header: 76px; }

  .seccion { padding-block: var(--esp-9); }

  .contenedor { padding-inline: var(--esp-6); }

  .confianza__grilla { grid-template-columns: repeat(4, 1fr); }

  .nosotros__fotos {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
  .nosotros__figura--grande { grid-column: 1 / -1; }

  .contacto__grilla { grid-template-columns: 1fr 1fr; gap: var(--esp-7); }
  .contacto__mapa { min-height: 100%; }

  .pie__interior { grid-template-columns: 1.4fr 1fr 1.2fr; }

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

  .carrusel__pista > * { flex-basis: 45%; max-width: 340px; }

  /* En las reseñas mostramos 2 a la vez */
  .carrusel--resenas .carrusel__pista > * { flex-basis: 46%; max-width: none; }
}


/* ---------- ESCRITORIO: desde 992px ---------- */
@media (min-width: 992px) {

  /* --- El menú deja de ser hamburguesa y pasa a la barra superior --- */
  .hamburguesa { display: none; }

  .nav {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--esp-5);
    background: none;
    transform: none;
    visibility: visible;
    padding: 0;
    width: auto;
  }
  .nav__lista { flex-direction: row; gap: var(--esp-5); }
  .nav__link {
    font-family: var(--fuente-cuerpo);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--gris-suave);
  }
  .nav__link:hover, .nav__link--activo { color: var(--crema); }
  .nav__cta { padding: 0.6rem 1.25rem; font-size: 0.88rem; }

  .menu-fondo { display: none !important; }

  /* --- Hero más ancho --- */
  .hero__slogan { max-width: 34ch; }

  /* --- El MENÚ deja de ser carrusel y pasa a ser GRILLA --- */
  /* "auto-fit" hace que las tarjetas se acomoden solas y ocupen todo el ancho:
     así un grupo de 5 pizzas entra en una sola fila y no queda ninguna suelta abajo. */
  [data-modo="menu"] .carrusel__pista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--esp-5);
    overflow: visible;
    scroll-snap-type: none;
    padding-block: 0;
  }
  /* El tope de 340px evita que en grupos de 2 platos las fotos queden gigantes */
  [data-modo="menu"] .carrusel__pista > * { flex-basis: auto; max-width: 340px; }
  [data-modo="menu"] .carrusel__flecha,
  [data-modo="menu"] .carrusel__puntos { display: none; }

  /* --- La GALERÍA deja de ser carrusel y pasa a MASONRY (columnas) --- */
  [data-modo="galeria"] .carrusel__pista {
    display: block;
    columns: 3;
    column-gap: var(--esp-4);
    overflow: visible;
    scroll-snap-type: none;
    padding-block: 0;
  }
  [data-modo="galeria"] .galeria__item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--esp-4);
    max-width: none;
  }
  /* En masonry cada foto conserva su alto natural: eso genera el efecto escalonado */
  [data-modo="galeria"] .galeria__item img { height: auto; }
  [data-modo="galeria"] .carrusel__flecha,
  [data-modo="galeria"] .carrusel__puntos { display: none; }

  /* --- Las RESEÑAS siguen siendo carrusel: acá aparecen las flechas --- */
  .carrusel--resenas .carrusel__flecha { display: inline-flex; }
  .carrusel--resenas .carrusel__pista > * { flex-basis: 31.5%; }
  .carrusel--resenas .carrusel__pista { padding-inline: 2px; }

  /* --- Reservas: texto a la izquierda, formulario a la derecha --- */
  .reservas__caja { grid-template-columns: 0.85fr 1.15fr; gap: var(--esp-7); align-items: start; }

  /* --- Nosotros en dos columnas --- */
  .nosotros { grid-template-columns: 1fr 1fr; gap: var(--esp-7); }
  .nosotros__fotos { grid-template-columns: 1fr; }
  .nosotros__figura--grande { grid-column: auto; }

  /* --- Botón flotante: se estira y muestra "Escribinos" --- */
  .wsp-flotante { right: var(--esp-6); bottom: var(--esp-6); }
  .wsp-flotante:hover, .wsp-flotante:focus-visible {
    width: auto;
    border-radius: 100px;
    padding-inline: 1.1rem;
    gap: var(--esp-2);
  }
  .wsp-flotante:hover .wsp-flotante__texto,
  .wsp-flotante:focus-visible .wsp-flotante__texto { display: inline; }
  /* Mientras está estirado, apagamos el pulso para que no se vea raro */
  .wsp-flotante:hover .wsp-flotante__pulso,
  .wsp-flotante:focus-visible .wsp-flotante__pulso { animation: none; opacity: 0; }
}


/* ---------- PANTALLAS GRANDES: desde 1280px ---------- */
@media (min-width: 1280px) {

  .seccion__titulo { font-size: clamp(3rem, 4.2vw, 4.2rem); }

  [data-modo="menu"] .carrusel__pista { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }

  [data-modo="galeria"] .carrusel__pista { columns: 4; }

  .carrusel__flecha--izq { left: -22px; }
  .carrusel__flecha--der { right: -22px; }

  .hero__contenido { padding-block: var(--esp-9); }
}


/* ---------- PANTALLAS MUY GRANDES: desde 1600px ---------- */
@media (min-width: 1600px) {
  :root { --ancho-max: 1360px; }
  .hero__titulo { font-size: 10rem; }
}


/* ==========================================================================
   17. MOVIMIENTO REDUCIDO
   Si la persona configuró su sistema para reducir animaciones, las apagamos.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Las secciones se muestran directamente, sin fade-in */
  .animar, .js .animar { opacity: 1; transform: none; }

  .carrusel__pista { scroll-behavior: auto; }
  .wsp-flotante__pulso { animation: none; opacity: 0.35; }
}


/* ==========================================================================
   18. IMPRESIÓN (por si alguien imprime la carta)
   ========================================================================== */
@media print {
  .cabecera, .wsp-flotante, .carrusel__flecha, .carrusel__puntos,
  .hero__botones, .contacto__mapa, .menu-fondo { display: none !important; }

  body { background: #fff; color: #000; }
  .plato, .promo, .resena { break-inside: avoid; border-color: #ccc; }
  [data-modo="menu"] .carrusel__pista { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .panel[hidden] { display: block !important; }
}