/* ==========================================================================
   loopi — sistema de diseño
   ========================================================================== */

:root {
  /* Colores de marca */
  --rojo: #E71600;
  --naranja: #FFA500;
  --morado: #AC00B1;
  --negro: #111111;
  --crema: #FFF8EE;

  --rojo-oscuro: #B81100;
  --morado-oscuro: #870089;

  /* Texto */
  --texto-oscuro: var(--negro);
  --texto-claro: var(--crema);
  --texto-muted: #6b6b6b;
  /* Blanco puro: solo para texto de cuerpo/normal sobre --rojo, donde --crema
     baja de 4.5:1 de contraste AA. --crema se mantiene intacto como fondo/marca. */
  --texto-sobre-rojo: #FFFFFF;

  /* Tipografía */
  --font-heading: 'Bungee', 'Poppins', 'Arial Rounded MT Bold', sans-serif;
  --font-body: 'Poppins', 'Inter', system-ui, sans-serif;

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Radios */
  --radius-card: 24px;
  --radius-pill: 999px;
  --radius-sm: 14px;

  /* Sombras de color, nunca grises */
  --shadow-rojo: 0 12px 30px rgba(231, 22, 0, 0.25);
  --shadow-morado: 0 12px 30px rgba(172, 0, 177, 0.22);
  --shadow-suave: 0 8px 24px rgba(17, 17, 17, 0.08);

  /* Layout */
  --container-max: 1180px;
  --header-height: 76px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 200ms var(--ease);
  --transition-med: 300ms var(--ease);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
/* Compensa el header fijo en todo scroll-to-anchor (scrollIntoView en
   initScrollSuave, main.js) para que el destino no quede tapado. */
section[id] { scroll-margin-top: calc(var(--header-height) + 12px); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--texto-oscuro);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, select { font: inherit; }

/* position:fixed (no solo overflow:hidden) porque en iOS Safari el body
   sigue rebotando/scrolleando detrás de un overlay solo con overflow:hidden.
   El "top" negativo lo pone JS (bloquearScroll en main.js) para mantener la
   posición visual exacta donde estaba el scroll al bloquear. */
body.no-scroll {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

:focus-visible {
  outline: 3px solid var(--morado);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--crema);
  color: var(--negro);
  padding: var(--space-sm) var(--space-md);
  z-index: 2000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Pantalla de carga
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background: var(--crema);
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms var(--ease), visibility 500ms var(--ease);
}
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__spiral {
  width: 84px;
  height: 84px;
  animation: preloader-spin 1.6s linear infinite;
}
.preloader__wordmark {
  width: 150px;
  height: auto;
}
.preloader__wordmark-text { fill: var(--rojo); }

@keyframes preloader-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .preloader__spiral { animation: none; }
  .preloader { transition: opacity 200ms linear; }
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* ==========================================================================
   Tipografía general
   ========================================================================== */
.section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-sm);
}
.section-subtitle {
  font-size: 1.05rem;
  color: var(--texto-muted);
  max-width: 46ch;
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 1rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn svg { width: 1.2em; height: 1.2em; }

.btn--primary {
  background: var(--rojo);
  color: var(--crema);
  box-shadow: var(--shadow-rojo);
}
.btn--primary:hover { background: var(--rojo-oscuro); }

.btn--light {
  background: var(--crema);
  color: var(--rojo-oscuro);
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.15);
}
.btn--light:hover { background: #fff; }

.btn--outline-light {
  background: transparent;
  color: var(--texto-sobre-rojo);
  border: 2px solid var(--texto-sobre-rojo);
}
.btn--outline-light:hover { background: rgba(255, 248, 238, 0.15); }

.btn--whatsapp {
  background: var(--negro);
  color: var(--crema);
  width: 100%;
  justify-content: center;
}
.btn--whatsapp:hover { background: #000; }

.btn--full {
  width: 100%;
  white-space: normal;
  text-align: center;
}

.btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--transition-med), box-shadow var(--transition-med);
}
.header--scrolled {
  background: var(--crema);
  box-shadow: var(--shadow-suave);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
}
.header__logo { display: inline-grid; height: 40px; }
.header__logo-img {
  grid-area: 1 / 1;
  height: 40px;
  width: auto;
  transition: opacity var(--transition-med);
}
.header__logo-img--crema { opacity: 1; }
.header__logo-img--rojo { opacity: 0; }
.header--scrolled .header__logo-img--crema { opacity: 0; }
.header--scrolled .header__logo-img--rojo { opacity: 1; }

.logo-mark__text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 84px;
  fill: var(--crema);
  transition: fill var(--transition-med);
}
.header--scrolled .logo-mark__text { fill: var(--rojo); }
.logo-mark__dot-a { fill: var(--naranja); }
.logo-mark__dot-b { fill: var(--rojo); }

.header__nav {
  display: none;
  align-items: center;
  gap: var(--space-lg);
  font-weight: 600;
  color: var(--texto-sobre-rojo);
  transition: color var(--transition-med);
}
.header--scrolled .header__nav { color: var(--negro); }
.header__nav a, .header__nav button {
  position: relative;
  padding-block: 4px;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
/* Estado transparente (sobre el hero rojo): subrayado en hover, no cambio de color,
   para no perder contraste con el fondo rojo. */
.header__nav a:hover, .header__nav button:hover { text-decoration: underline; text-underline-offset: 4px; }
.header--scrolled .header__nav a:hover, .header--scrolled .header__nav button:hover { color: var(--rojo-oscuro); text-decoration: none; }

.header__nav-badge {
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--naranja);
  color: var(--negro);
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.header__cta { display: none; }

.header__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--crema);
  transition: color var(--transition-med);
}
.header--scrolled .header__hamburger { color: var(--negro); }
.header__hamburger svg { width: 28px; height: 28px; }

@media (min-width: 900px) {
  .header__nav { display: flex; }
  .header__cta { display: inline-flex; }
  .header__hamburger { display: none; }
}

/* Menú móvil */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--rojo);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  transform: translateY(-100%);
  transition: transform var(--transition-med);
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  color: var(--crema);
}
.mobile-nav__close svg { width: 28px; height: 28px; }
.mobile-nav__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
}
.mobile-nav__nav a, .mobile-nav__nav button {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.8rem;
  color: var(--crema);
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.mobile-nav__badge {
  min-width: 26px;
  height: 26px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--naranja);
  color: var(--negro);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (min-width: 900px) {
  .mobile-nav { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Portada fija: .hero es un envoltorio alto (140svh) que le da al navegador
   "pista" de scroll extra; .hero__sticky se pega arriba (position:sticky) y
   se queda quieta en pantalla mientras ese sobrante se consume, hasta que se
   acaba y la siguiente sección la tapa al subir. */
.hero { position: relative; height: 140svh; }
.hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--crema);
  overflow: hidden;
  padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding-bottom: var(--space-2xl);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__sticky { position: relative; height: auto; min-height: 82svh; }
}

/* Capas de color apiladas: rojo es la base fija, morado y naranja se
   funden encima según el progreso de scroll (ver initHeroColorShift en
   main.js). Solo afecta el fondo de esta sección. */
.hero__capa { position: absolute; inset: 0; }
.hero__capa--rojo { background: var(--rojo); z-index: 0; }
.hero__capa--morado { background: var(--morado); z-index: 1; opacity: 0; }
.hero__capa--naranja { background: var(--naranja); z-index: 2; opacity: 0; }

.hero__lluvia {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.hero__lumpia-cayendo {
  position: absolute;
  top: -80px;
  height: auto;
  opacity: 0;
  animation-name: lumpia-caer;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
}
@keyframes lumpia-caer {
  0% { transform: translateY(0) rotate(var(--rot-inicial)); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateY(100vh) rotate(var(--rot-final)); opacity: 0; }
}

.hero__inner {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 620px;
}

.hero__isotipo-wrap {
  width: clamp(84px, 13vw, 132px);
  height: clamp(84px, 13vw, 132px);
  border-radius: 50%;
  background: rgba(255, 248, 238, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  animation: hero-isotipo-spin 24s linear infinite;
}
.hero__isotipo { width: 68%; height: 68%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); }
@keyframes hero-isotipo-spin {
  to { transform: rotate(360deg); }
}

/* Wordmark como pieza central de la portada: mucho más grande que antes
   (era min(56vw,220px)) para que el branding domine la composición. */
.hero__logo-h1 {
  position: relative;
  margin: 0 0 var(--space-md);
  line-height: 0;
  overflow: hidden;
}
/* Logo cursivo oficial en amarillo/naranja de marca (no el rojo original
   del archivo) — el fondo de la portada pasa por rojo, morado y un tinte
   naranja según el scroll (initHeroColorShift), y un logo rojo se pierde
   contra el estado rojo base. Naranja mantiene buen contraste en los tres. */
.hero__logo {
  width: min(82vw, 560px);
  height: auto;
  /* Arranca "sin escribir" — clip-path lo revela de izquierda a derecha
     cuando .hero__copy entra en pantalla (mismo trigger data-reveal que ya
     usa el resto del hero). No es trazo vectorial real (el archivo es un
     logo de imagen, no un path a mano) — un wipe de izquierda a derecha es
     la forma confiable de simular "se está escribiendo" sobre un raster. */
  clip-path: inset(0 100% 0 0);
}
.hero__copy.is-visible .hero__logo {
  animation: logo-escribir 2.8s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
}
@keyframes logo-escribir {
  to { clip-path: inset(0 0% 0 0); }
}
/* Color inicial (amarillo/naranja de marca) — initHeroColorShift en main.js
   lo funde hacia el morado a medida que se consume el scroll fijo de la
   portada, con color-mix() en vez de --naranja fijo. */
.hero__slogan {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.15rem, 3.4vw, 1.75rem);
  color: var(--naranja);
  margin-bottom: var(--space-lg);
}
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

.hero__copy {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.hero__copy.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .hero__isotipo-wrap { animation: none; }
  .hero__lluvia { display: none; }
}

/* ==========================================================================
   Mira de cerca — carrusel de una sola foto, al final de la página.
   La frase va superpuesta y centrada sobre la foto; una flecha avanza
   a la siguiente combinación foto+frase (loop de 3), ver initMiraCerca
   en main.js. Reemplaza la vieja galería de 3 filas apiladas — mucho
   más corta en mobile, que era el problema original.
   ========================================================================== */
/* Foto enmarcada dentro de un contenedor (no full-bleed): a lo ancho
   completo dejaba franjas negras enormes a los lados en pantallas
   grandes. Con un ancho tope + sombra se lee como una foto a propósito,
   nunca se recorta y nunca queda más alta que Contacto. */
.mira-cerca {
  padding-block: var(--space-2xl);
  padding-inline: var(--space-lg);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.mira-cerca__img {
  max-width: min(100%, 720px);
  max-height: 480px;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
  box-shadow: 0 20px 50px rgba(17, 17, 17, 0.25);
}
.mira-cerca__frase {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}
.mira-cerca__frase-linea {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  color: var(--negro);
}
.mira-cerca__frase-linea--morado { color: var(--morado); }
.mira-cerca__frase-linea--naranja { color: var(--naranja); }
@media (max-width: 600px) {
  .mira-cerca { padding-block: var(--space-lg); padding-inline: var(--space-md); }
  .mira-cerca__frase-linea { font-size: clamp(1.4rem, 7vw, 2rem); text-align: center; }
}

/* ==========================================================================
   Reveal genérico (IntersectionObserver)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .hero__copy {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero__logo { animation: none !important; clip-path: none !important; }
}

/* ==========================================================================
   Ruleta de sabores (carrusel deslizable)
   ========================================================================== */
/* Mismo rollito espiral que el footer, en versión clara para el fondo
   crema — sin máscara radial acá porque el contenido de esta sección
   (título + kicker + carrusel) es angosto, no ocupa el centro entero
   como en el footer, así que no hace falta despejarle el medio. */
.salsas { padding-block: var(--space-2xl); background: var(--rojo); text-align: center; }
.salsas .section-title { color: var(--crema); }
/* Grid de 2 columnas (ancho natural por contenido, no estirado) en vez de
   flex-wrap: con 5 salsas, flex-wrap dejaba la última ("Thai") flotando
   sola y descentrada en su propia fila. Acá la última pill se declara
   explícitamente a ancho completo y centrada — se lee como un cierre a
   propósito, no como un sobrante. En mobile angosto baja a 1 columna. */
.salsas__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  justify-items: center;
  gap: var(--space-sm) var(--space-md);
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--space-lg);
}
@media (min-width: 460px) {
  .salsas__grid { grid-template-columns: repeat(2, max-content); }
  .salsa__item:last-child { grid-column: 1 / -1; }
}
.salsa__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--crema);
  border: 1px solid rgba(17, 17, 17, 0.08);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.salsa__item.is-active {
  border-color: var(--salsa-color, var(--negro));
  background: color-mix(in srgb, var(--salsa-color, var(--negro)) 14%, var(--crema));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--salsa-color, var(--negro)) 30%, transparent);
}
.salsa__swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--salsa-color, var(--negro));
  flex-shrink: 0;
}
.salsa__nombre {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--negro);
  white-space: nowrap;
}
.salsa__stepper { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }

/* ==========================================================================
   Menú
   ========================================================================== */
.menu { padding-top: 0; }

.menu__eyebrow {
  margin-bottom: var(--space-sm);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.9rem;
  color: var(--negro);
}

.menu__block { padding-block: var(--space-lg); }
.menu__block--salados { background: var(--naranja); }
.menu__block--postres { background: var(--morado); color: var(--crema); }

.menu__block-title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.9rem;
  margin-bottom: var(--space-md);
}
.menu__block-title--light { color: var(--negro); }

/* 2 columnas desde mobile (antes 1) para que el menú no se estire en una
   sola torre larguísima de tarjetas — página más corta y fácil de recorrer. */
.menu__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
@media (min-width: 720px) {
  .menu__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
}

/* Tarjetas */
.card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-suave);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
  display: flex;
  flex-direction: column;
}
.card:hover { transform: scale(1.03); box-shadow: var(--shadow-rojo); }
/* Renders reales del empaque (PNG con fondo transparente, 1:1) — contain
   sobre fondo blanco en vez de cover, para que se vea la bolsita entera
   sin recortarla y que la foto tenga protagonismo real. */
.card__img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.card__body { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; }
.card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--negro);
}
.card__unidades {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--crema);
  background: var(--rojo);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.card__desc { color: var(--texto-muted); font-size: 0.78rem; margin-bottom: 0.1rem; line-height: 1.25; }

/* Selector de tamaño (pills 12/24 con precio adentro) + un solo stepper
   +/- que actúa sobre el tamaño activo, en vez de 2 filas fijas con su
   propio stepper cada una — menos alto, foto con más protagonismo. */
.card__tamano-selector {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.card__tamano-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0.2rem;
  border: 1.5px solid rgba(17, 17, 17, 0.15);
  border-radius: 8px;
  background: transparent;
  color: var(--negro);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.card__tamano-btn.is-active { background: var(--negro); border-color: var(--negro); color: var(--crema); }
.card__tamano-btn-num { font-family: var(--font-heading); font-weight: 800; font-size: 0.85rem; line-height: 1.2; }
.card__tamano-btn-precio { font-size: 0.68rem; opacity: 0.75; }

.card__stepper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
@media (min-width: 720px) {
  .card__body { padding: 0.85rem; gap: 0.2rem; }
  .card__title { font-size: 1.15rem; }
  .card__desc { font-size: 0.88rem; margin-bottom: 0.15rem; }
  .card__tamano-btn-num { font-size: 1rem; }
  .card__tamano-btn-precio { font-size: 0.78rem; }
}
/* ==========================================================================
   Resumen del pedido (compartido por el panel del carrito flotante —
   la vieja sección "Arma tu pedido" se eliminó, pero estas clases
   siguen vivas dentro de #carrito-panel).
   ========================================================================== */
.carrito-linea {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  font-size: 0.95rem;
}
.carrito-linea:last-child { border-bottom: none; padding-bottom: 0; }
.carrito-linea__desc { flex: 1; }
.carrito-linea__precio { font-family: var(--font-heading); color: var(--rojo); flex-shrink: 0; }
.carrito-linea__precio--envio { color: var(--naranja); }
.carrito-linea__borrar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--negro);
  border-radius: 50%;
  transition: background var(--transition-fast);
}
.carrito-linea__borrar:hover { background: rgba(17, 17, 17, 0.08); }
.carrito-linea__borrar svg { width: 16px; height: 16px; }
.stepper__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--negro);
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.stepper__btn:hover { background: var(--rojo); transform: scale(1.08); }
.stepper__btn svg { width: 16px; height: 16px; }
.stepper__cantidad { min-width: 1.4rem; text-align: center; font-weight: 700; }
/* Área de toque más grande en pantallas táctiles — 34px queda corto para
   un dedo (mínimo recomendado ~44px), y era lo más fácil de tocar mal en
   el carrito desde el celular. */
@media (pointer: coarse) {
  .stepper__btn { width: 42px; height: 42px; }
  .stepper__btn svg { width: 18px; height: 18px; }
}

.configurador__totales {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
}
.configurador__totales strong { font-family: var(--font-heading); font-size: 1.1rem; color: var(--rojo); }
.configurador__total-precio { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--rojo); }

/* ==========================================================================
   Tips para cocinarlas (mismos colores que tenía la vieja sección
   "Cómo pedir" — crema de fondo, texto oscuro por defecto — ahora que
   esa sección se eliminó y el carrito flotante cubre ese flujo.)
   ========================================================================== */
.tips { padding-block: var(--space-2xl); background: var(--crema); text-align: center; }
/* 3 columnas desde mobile (antes se apilaba en 1 sola columna larga) —
   en desktop los 3 pasos ya van uno al lado del otro, así que en
   teléfono tienen que verse igual, solo que compacto. */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
@media (min-width: 700px) {
  .pasos { gap: var(--space-lg); margin-top: var(--space-lg); }
}
.paso { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
@media (min-width: 700px) {
  .paso { gap: var(--space-sm); }
}
.paso h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.8rem;
}
@media (min-width: 700px) {
  .paso h3 { font-size: 1.1rem; }
}
.paso p { color: var(--texto-muted); font-size: 0.72rem; line-height: 1.25; }
@media (min-width: 700px) {
  .paso p { font-size: 1rem; max-width: 32ch; }
}
.paso__icono {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--crema);
}
@media (min-width: 700px) {
  .paso__icono { width: 72px; height: 72px; }
}
.paso__icono svg { width: 20px; height: 20px; }
@media (min-width: 700px) {
  .paso__icono svg { width: 32px; height: 32px; }
}
.paso__icono--rojo { background: var(--rojo); box-shadow: var(--shadow-rojo); }
.paso__icono--naranja { background: var(--naranja); color: var(--negro); }
.paso__icono--morado { background: var(--morado); box-shadow: var(--shadow-morado); }
.paso__icono--negro { background: var(--negro); }

/* ==========================================================================
   Eventos — hero, features y "Hablemos de tu evento"
   ========================================================================== */
/* Primer bloque bajo el header fijo (antes le tocaba a .galeria--pagina) —
   mismo respiro que .hero le da al header transparente/sólido. */
.eventos-hero {
  padding-top: calc(var(--header-height) + var(--space-xl) + env(safe-area-inset-top, 0px));
  padding-bottom: var(--space-2xl);
  background: var(--morado);
  color: var(--crema);
  text-align: center;
}
/* El H1 ES la frase de marca ("Eleva tu evento / con la experiencia /
   loopi") con el mismo tratamiento de línea a línea coloreada que tenía
   antes en Galería — no hace falta repetirla más abajo. */
.eventos-hero__title {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  margin-bottom: var(--space-lg);
}
.eventos-hero__title-linea {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 6.5vw, 3.4rem);
  line-height: 1.08;
}
.eventos-hero__title-linea--rojo { color: var(--rojo); }
.eventos-hero__title-linea--naranja { color: var(--naranja); }
.eventos-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* Bloque final propio (no la tarjeta de Contacto): un solo CTA fuerte
   en vez de 3 tiles compitiendo — WhatsApp es la vía rápida, correo e
   Instagram quedan como alternativa chica al pie. Fondo naranja de
   marca (mismo tono que el bloque Salados) — texto oscuro encima,
   igual que el resto de los usos de este color en el sitio. */
.eventos-cta { padding-block: var(--space-2xl); background: var(--naranja); color: var(--negro); text-align: center; }
.eventos-cta__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: var(--space-xs);
}
.eventos-cta__lead {
  font-size: 1.05rem;
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  opacity: 0.9;
}
.eventos-cta__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 2.2rem;
  border-radius: var(--radius-pill);
  background: #25D366;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.eventos-cta__whatsapp svg { width: 24px; height: 24px; }
.eventos-cta__whatsapp:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3); }
.eventos-cta__alt { margin-top: var(--space-md); font-size: 0.9rem; opacity: 0.8; }
.eventos-cta__alt a { color: var(--negro); text-decoration: underline; text-underline-offset: 2px; }
.eventos-cta__alt a:hover { opacity: 0.7; }

/* ==========================================================================
   Galería + lightbox
   ========================================================================== */
.galeria { padding-block: var(--space-2xl); background: var(--crema); }
.galeria__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.galeria__item {
  display: block;
  padding: 0;
  border: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  transition: transform var(--transition-fast);
}
.galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria__item:hover { transform: scale(1.03); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding: var(--space-md);
  transition: opacity var(--transition-med), visibility var(--transition-med);
}
.lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox__img {
  max-width: min(90vw, 900px);
  max-height: 85vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 248, 238, 0.15);
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover {
  background: rgba(255, 248, 238, 0.3);
}
.lightbox__close svg, .lightbox__prev svg, .lightbox__next svg { width: 22px; height: 22px; }
.lightbox__close { top: var(--space-md); right: var(--space-md); }
.lightbox__prev { left: var(--space-md); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--space-md); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__close { top: 8px; right: 8px; }
}

/* ==========================================================================
   Contacto
   ========================================================================== */
.contacto { padding-block: var(--space-2xl); background: var(--morado); color: var(--crema); }
.contacto .section-title { color: var(--crema); text-align: center; }
.contacto__info { max-width: 560px; margin-inline: auto; }

/* Casillas tipo tarjeta/botón (sin acción real salvo WhatsApp y Correo) —
   grid de 2 columnas para que la sección quede corta en teléfono en vez
   de una lista larga apilada. */
.contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.contacto__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
a.contacto__tile:hover, a.contacto__tile:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}
.contacto__tile--full { grid-column: 1 / -1; }
.contacto__tile-icon {
  width: 22px;
  height: 22px;
  color: var(--naranja);
}
.contacto__tile-label {
  font-weight: 700;
  color: var(--naranja);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.contacto__tile-valor {
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--crema);
  word-break: break-word;
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Morado con el mismo patrón de espirales de la portada (::before en vez de
   duplicar el div en el HTML de dos páginas) — mismo tratamiento visual,
   pie de página con identidad propia en vez de un bloque negro genérico. */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--morado);
  color: var(--crema);
  padding-top: var(--space-lg);
  /* El carrito flotante (bottom-left) y los botones de WhatsApp/Instagram
     (bottom-right) son position:fixed y quedan siempre encima del contenido
     que se scrollea debajo — sin este colchón, el botón del carrito (56px +
     su offset de --space-md) tapaba parte del copyright al llegar al final
     de la página. Padding extra para que el pie de página nunca quede
     debajo de esos botones, más el safe-area-inset del home indicator en
     iPhones con notch. */
  padding-bottom: calc(var(--space-lg) + 64px + env(safe-area-inset-bottom, 0px));
}
.footer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-md); font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: 0.85rem; }
.footer__nav a:hover, .footer__nav button:hover { color: var(--naranja); }
.footer__nav button { display: inline-flex; align-items: center; gap: 0.35rem; }
.footer__nav-badge {
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--naranja);
  color: var(--negro);
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Mismos colores de marca que los botones flotantes fijos (verde WhatsApp,
   degradé naranja→rojo→morado en Instagram en vez del rosa/fucsia fuera de
   paleta que tenía antes) pero con otra silueta — cuadrado redondeado en
   vez de círculo, con un anillo crema y una leve rotación al hover — para
   que no se lean como el mismo botón duplicado en dos lugares. */
.footer__social { display: flex; gap: var(--space-md); }
.footer__social a {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--crema);
  box-shadow: var(--shadow-suave), 0 0 0 2px rgba(255, 248, 238, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.footer__social svg { width: 21px; height: 21px; }
.footer__social a[data-wa-generico] { background: #25D366; }
.footer__social a[data-ig-link] { background: radial-gradient(circle at 30% 30%, var(--naranja) 0%, var(--rojo) 45%, var(--morado) 100%); }
.footer__social a[data-wa-generico]:hover { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.footer__social a[data-ig-link]:hover { transform: translateY(-3px) rotate(4deg) scale(1.06); }
.footer__datos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); font-size: 0.95rem; opacity: 0.85; }
.footer__copy { font-size: 0.85rem; opacity: 0.6; }

/* Variante amarilla del footer, solo en la portada — eventos.html conserva
   el morado original. El texto pasa a negro (crema queda ilegible sobre
   naranja) y el badge/hover, que usaban naranja para resaltar contra el
   morado, pasan a rojo para no fundirse con el nuevo fondo. */
.footer--amarillo { background: var(--naranja); color: var(--negro); }
.footer--amarillo .footer__nav a:hover, .footer--amarillo .footer__nav button:hover { color: var(--rojo); }
.footer--amarillo .footer__nav-badge { background: var(--rojo); color: var(--crema); }
.footer--amarillo .footer__social a { color: var(--negro); }

/* ==========================================================================
   Carrito / pedido flotante — esquina inferior izquierda, opuesta a los
   botones de WhatsApp/Instagram. Mismo patrón que un carrito de compras:
   botón con contador, panel deslizable con backdrop.
   ========================================================================== */
.carrito-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2400;
  background: rgba(17, 17, 17, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-med), visibility var(--transition-med);
}
.carrito-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.carrito-btn {
  position: fixed;
  left: calc(var(--space-md) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 56px;
  padding-inline: 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--negro);
  color: var(--crema);
  box-shadow: var(--shadow-suave);
  transition: transform var(--transition-fast);
}
.carrito-btn:hover { transform: translateY(-2px); }
.carrito-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.carrito-btn__label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.carrito-btn__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 0.3rem;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--crema);
  font-size: 0.75rem;
  font-weight: 800;
}
.carrito-btn__badge[hidden],
.header__nav-badge[hidden],
.mobile-nav__badge[hidden],
.footer__nav-badge[hidden] {
  display: none;
}

.carrito-panel {
  position: fixed;
  left: calc(var(--space-md) + env(safe-area-inset-left, 0px));
  bottom: calc(56px + var(--space-md) + 0.8rem + env(safe-area-inset-bottom, 0px));
  z-index: 2500;
  width: min(24rem, calc(100vw - 2.5rem));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--crema);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity var(--transition-med), visibility var(--transition-med), transform var(--transition-med);
  overflow: hidden;
}
.carrito-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.carrito-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  flex-shrink: 0;
}
.carrito-panel__titulo { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: 1rem; }
.carrito-panel__cerrar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-muted);
  transition: color var(--transition-fast);
}
.carrito-panel__cerrar:hover { color: var(--rojo-oscuro); }
.carrito-panel__cerrar svg { width: 20px; height: 20px; }

.carrito-panel__vacio { padding: var(--space-lg) var(--space-md); text-align: center; color: var(--texto-muted); font-size: 0.9rem; }

/* [data-pedido-contenido] envuelve toggle+lista+footer dentro del panel, entre
   .carrito-panel (flex column) y .carrito-panel__lista (flex:1). Sin display:flex
   acá, ese wrapper corta la cadena flex y .carrito-panel__lista nunca se achica
   para caber en max-height: crece a su alto natural y empuja el footer (botón
   de WhatsApp) fuera del panel, invisible e inalcanzable. :not([hidden]) evita
   pisarle el display:none al atributo hidden que usa main.js. */
.carrito-panel [data-pedido-contenido]:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.carrito-panel__lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Pick up / Delivery — sutil a propósito: un toggle chico arriba de los
   totales, igual de discreto que el resto del carrito. Pick up no
   necesita nada más; al elegir Delivery aparece un <select> nativo de
   una sola línea (el desplegable lo maneja el navegador, no empuja
   nada del panel) — así el pedido nunca pierde espacio ni queda tapado. */
.carrito-entrega {
  flex-shrink: 0;
  padding: 0 var(--space-md) var(--space-sm);
}
.carrito-entrega__toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: rgba(17, 17, 17, 0.06);
  border-radius: var(--radius-pill);
}
.carrito-entrega__btn {
  flex: 1;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--texto-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.carrito-entrega__btn.is-active { background: var(--negro); color: var(--crema); }
/* Selector de zona propio (no <select> nativo): el picker del sistema
   operativo no se puede vestir con la marca y en mobile abre una hoja
   nativa que desentona con todo el resto — este menú flota encima
   (position:absolute) en vez de empujar nada, así el pedido nunca
   pierde espacio y el look queda 100% consistente en cualquier equipo. */
.carrito-entrega__zona-wrap { position: relative; margin-top: 0.4rem; }
.carrito-entrega__zona-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(17, 17, 17, 0.15);
  background: #fff;
  color: var(--negro);
  font-size: 0.82rem;
  text-align: left;
}
.carrito-entrega__zona-trigger svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--texto-muted);
  transition: transform var(--transition-fast);
}
.carrito-entrega__zona-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.carrito-entrega__zona-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(17, 17, 17, 0.1);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.2);
  overflow: hidden;
}
.carrito-entrega__zona-opcion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  text-align: left;
  transition: background var(--transition-fast);
}
.carrito-entrega__zona-opcion + .carrito-entrega__zona-opcion { border-top: 1px solid rgba(17, 17, 17, 0.06); }
.carrito-entrega__zona-opcion:hover, .carrito-entrega__zona-opcion.is-active { background: rgba(17, 17, 17, 0.06); }
.carrito-entrega__zona-opcion-precio { font-family: var(--font-heading); color: var(--texto-muted); }
.carrito-entrega__zona-opcion.is-active .carrito-entrega__zona-opcion-precio { color: var(--naranja); }

.carrito-panel__footer {
  padding: var(--space-md);
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-shrink: 0;
}
.carrito-panel__vaciar {
  text-align: center;
  font-size: 0.8rem;
  color: var(--texto-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-block: 0.3rem;
  transition: color var(--transition-fast);
}
.carrito-panel__vaciar:hover { color: var(--rojo-oscuro); }

@media (max-width: 480px) {
  .carrito-btn { left: calc(var(--space-sm) + env(safe-area-inset-left, 0px)); bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px)); height: 48px; padding-inline: 0.9rem; }
  .carrito-btn__label { display: none; }
  .carrito-panel { left: calc(var(--space-sm) + env(safe-area-inset-left, 0px)); bottom: calc(48px + var(--space-sm) + 0.8rem + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 1.5rem); }
}

/* ==========================================================================
   Botones flotantes
   ========================================================================== */
.floating-buttons {
  position: fixed;
  right: calc(var(--space-md) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.floating-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--crema);
  box-shadow: var(--shadow-suave);
}
.floating-btn svg { width: 28px; height: 28px; }
.floating-btn {
  animation: pulse 2.4s ease-in-out infinite;
}
.floating-btn--whatsapp {
  background: #25D366;
  --pulse-color: 37, 211, 102;
}
.floating-btn--instagram {
  background: radial-gradient(circle at 30% 30%, var(--naranja) 0%, var(--rojo) 45%, var(--morado) 100%);
  --pulse-color: 172, 0, 177;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(var(--pulse-color), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-btn { animation: none; }
}

@media (max-width: 480px) {
  .floating-buttons { right: calc(var(--space-sm) + env(safe-area-inset-right, 0px)); bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px)); }
  .floating-btn { width: 48px; height: 48px; }
  .floating-btn svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   Compactación mobile — la mayoría del tráfico entra desde el teléfono y
   comprar tiene que sentirse rápido, no un scroll interminable. Achica
   --space-xl/--space-2xl (solo se usan como padding vertical de secciones
   grandes — Explora los sabores, Tips, Galería, Contacto, el respiro debajo
   del hero) para que cada sección ocupe menos alto sin cambiar su
   orientación ni su contenido, más algunos ajustes puntuales donde el
   espaciado no viene de esas variables (los bloques de Salados/Dulces).
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --space-xl: 2.5rem;
    --space-2xl: 3.5rem;
  }
  .menu__block { padding-block: var(--space-md); }
  .hero__slogan { margin-bottom: var(--space-md); }

  /* Tips y Contacto son las dos secciones más "pesadas" de la página en
     teléfono (pasos/casillas apiladas) — mismo padding-block reducido
     para que se sientan igual de cortas la una que la otra. */
  .tips, .contacto { padding-block: var(--space-lg); }
  .contacto .section-title { margin-bottom: var(--space-sm); }
  .contacto__grid { gap: 0.5rem; }
  .contacto__tile {
    padding: 0.6rem 0.7rem;
    gap: 0.2rem;
  }
  .contacto__tile-icon { width: 18px; height: 18px; }
  .contacto__tile-label { font-size: 0.66rem; }
  .contacto__tile-valor { font-size: 0.85rem; }
}