/* BRUNCHI - Estilos Oficiales & UI Responsive Mobile-First */

:root {
  /* Paleta del volante y el catálogo de Brunchi (oct-2026) */
  --bg-main: #FBF4EA;            /* Crema */
  --bg-card: #FFFFFF;
  --bg-warm-light: #F4E7D6;      /* Crema tostado */
  --bg-warm-tint: #EFDFCB;

  --primary-dark: #3B3D1F;       /* Verde oliva oscuro de la marca */
  --primary-forest: #55582F;
  --terracotta: #BF6E4C;         /* Terracota */
  --terracotta-dark: #A65A3B;
  --honey-yolk: #EAC2B3;         /* Nude (antes amarillo yema; el volante no lo usa) */
  --honey-light: #FBEAE3;
  --nude: #EAC2B3;
  --rosado: #F3B2A5;             /* Rosado de la edición Halloween */
  --rosado-claro: #FCE2D6;
  --chocolate: #5A2E1E;

  --text-main: #3A2A22;
  --text-muted: #7A6556;
  --text-light: #9A8676;
  --border-color: #EADBC8;
  --border-focus: #BF6E4C;

  --shadow-sm: 0 2px 8px rgba(59, 61, 31, 0.06);
  --shadow-md: 0 6px 20px rgba(90, 46, 30, 0.10);
  --shadow-lg: 0 12px 35px rgba(90, 46, 30, 0.16);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --font-body: 'Jost', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-hand: 'Caveat', cursive, sans-serif;
  --font-script: 'Great Vibes', cursive;

  /* Variables dinámicas configurables desde el panel de control */
  --header-bg: #FBF4EA;
  --header-text: #3B3D1F;
  --section-header-bg: transparent;
  --section-header-text: #3B3D1F;
  --ribbon-bg: #BF6E4C;
  --ribbon-text: #FBF4EA;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 90px; /* Espacio para barra de carrito flotante en móviles */
}

/* Container */
.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header & Brand */
.header {
  background: var(--header-bg, var(--bg-card));
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  transition: background 0.3s ease, color 0.3s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.brand-logo-img {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--terracotta);
  box-shadow: 0 4px 14px rgba(200, 109, 81, 0.25);
  transition: transform 0.2s ease;
}

.brand-logo-wrap:hover .brand-logo-img {
  transform: scale(1.05);
}

/* Encabezado con el logo vigente: la marca en vez del círculo + texto */
.marca-2026 .brand-title { line-height: 0; margin: 0 0 3px; }
.brand-marca { height: 46px; width: auto; display: block; }
.marca-2026 .brand-tagline { font-size: 1.05rem; }
@media (max-width: 600px) {
  .brand-marca { height: 36px; }
  .marca-2026 .brand-tagline { font-size: 0.92rem; }
}

.brand-title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--header-text, var(--primary-dark));
  letter-spacing: -0.5px;
  line-height: 1.05;
  transition: color 0.3s ease;
}


.brand-tagline {
  font-family: var(--font-hand);
  font-size: 1.18rem;
  color: var(--terracotta);
  line-height: 1.1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-header-icon {
  background: var(--bg-warm-light);
  border: 1px solid var(--border-color);
  color: var(--primary-dark);
  padding: 8px 12px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-header-icon:hover {
  background: var(--honey-light);
  border-color: var(--honey-yolk);
}

/* Botón solo con ícono (acceso del personal): más pequeño y discreto que los
   botones con texto, para que el cliente no lo confunda con "registrarse". */
/* ===== Pie de página =====
   Discreto a propósito: el acceso del personal (la llave) vive aquí para que el
   cliente no lo confunda con "registrarse". El margen inferior deja aire para que
   la barra flotante del carrito no lo tape. */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 16px 0;
  margin-bottom: 84px;
  border-top: 1px solid var(--border-color);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.site-footer-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
/* Crédito del desarrollador: renglón propio debajo, más discreto */
.site-footer { flex-wrap: wrap; }
.site-footer-credito {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.85;
  letter-spacing: 0.2px;
  text-decoration: none;
}
.site-footer-credito:hover,
.site-footer-credito:focus-visible { text-decoration: underline; opacity: 1; }
.footer-staff-btn {
  background: none;
  border: none;
  padding: 2px 6px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
.footer-staff-btn:hover,
.footer-staff-btn:focus-visible { opacity: 1; }

/* Banner de Horario & Delivery */
.delivery-notice-bar {
  background: var(--primary-dark);
  color: #FFFFFF;
  padding: 8px 0;
  font-size: 0.85rem;
  text-align: center;
  font-weight: 500;
}

.delivery-notice-bar span.badge-hour {
  background: var(--honey-yolk);
  color: var(--primary-dark);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 700;
  margin-left: 6px;
  font-size: 0.75rem;
}

/* Gran Banner Principal del Logo Brunchi */
.brand-hero-banner {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 18px 0 16px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.brand-hero-image {
  max-width: 210px;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: transform 0.3s ease;
}

.brand-hero-image:hover {
  transform: scale(1.02);
}

@media (max-width: 600px) {
  .brand-hero-banner {
    padding: 12px 12px;
  }
  .brand-hero-image {
    max-width: 145px;
  }
}

/* Hero Section */
.hero-card {
  background: linear-gradient(135deg, #FAF4E8 0%, #F5E8D8 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 24px 20px;
  margin: 0 0 18px 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

/* Logo de la marca dentro del hero.
   El archivo del logo trae la frase "Tú lo imaginas..." abajo, que ya está en el
   encabezado: se recorta mostrando solo del 12% al 74% de la altura (taza + nombre
   + "DESAYUNOS · CAFÉ"). El margen negativo en % se calcula sobre el ANCHO del
   contenedor, que aquí es igual al alto de la imagen por ser cuadrada.
   El JPEG no tiene transparencia: con "darken" cada píxel se queda con el más
   oscuro entre el logo y la tarjeta, así el fondo crema del archivo (más claro que
   el degradado) desaparece y solo queda el dibujo. */
.hero-logo-wrap {
  width: min(360px, 88%);
  aspect-ratio: 1 / 0.62;
  overflow: hidden;
  margin: 0 auto 40px;
}
.hero-logo {
  display: block;
  width: 100%;
  margin-top: -12%;
  mix-blend-mode: darken;
}
/* Logo vigente (catálogo oct-2026): ya viene recortado y trae la frase */
.hero-logo-wrap.logo-2026 { width: min(440px, 92%); aspect-ratio: auto; overflow: visible; margin-bottom: 28px; }
.hero-logo-wrap.logo-2026 .hero-logo { margin-top: 0; }

.hero-badge {
  display: inline-block;
  background: var(--terracotta);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--primary-dark);
  line-height: 1.2;
  margin-bottom: 8px;
}

.hero-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

/* Customer Identification Banner */
.customer-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

.customer-greeting {
  display: flex;
  align-items: center;
  gap: 10px;
}

.customer-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--honey-light);
  color: var(--terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  border: 1px solid var(--honey-yolk);
}

.customer-info-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary-dark);
}

.customer-info-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.btn-customer-toggle {
  background: var(--bg-warm-light);
  border: 1px solid var(--border-color);
  color: var(--terracotta-dark);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-customer-toggle:hover {
  background: var(--terracotta);
  color: #FFFFFF;
}

/* Category Navigation Pills */
.category-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 16px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

.cat-pill {
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.cat-pill.active, .cat-pill:hover {
  background: var(--primary-dark);
  color: #FFFFFF;
  border-color: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(59, 61, 31, 0.2);
}

/* Barra de categorías deslizable con flechas */
.category-nav-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.category-nav-wrap .category-nav {
  flex: 1 1 auto;
  min-width: 0;
}
.cat-nav-arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-dark);
  color: #FFFFFF;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(59, 61, 31, 0.25);
  transition: background .2s, transform .1s;
  margin-bottom: 8px;
}
.cat-nav-arrow:hover { background: var(--terracotta); }
.cat-nav-arrow:active { transform: scale(0.92); }
.cat-nav-arrow.is-hidden { visibility: hidden; }

/* Products Grid */
.products-section {
  margin-bottom: 36px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--section-header-bg, transparent);
  border-radius: var(--radius-sm);
  border-bottom: 2px solid var(--border-color);
  transition: background 0.3s ease;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--section-header-text, var(--primary-dark));
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}


.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Product Card */
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.product-card-img-wrap {
  position: relative;
  height: 180px;
  background: var(--bg-warm-light);
  overflow: hidden;
}

.product-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card-img {
  transform: scale(1.04);
}

.product-badge-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--primary-dark);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.product-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-name {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.product-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 14px;
  flex-grow: 1;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--bg-warm-light);
}

.product-price-label {
  font-size: 0.75rem;
  color: var(--text-light);
  display: block;
}

.product-price-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--terracotta-dark);
}

.btn-custom-add {
  background: var(--terracotta);
  color: #FFFFFF;
  border: none;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease;
}

.btn-custom-add:hover {
  background: var(--terracotta-dark);
}

/* ========================================================
   Tarjeta Única de Recomendados con Collage de hasta 3 fotos
   ======================================================== */
.rec-unified-card {
  background: var(--bg-card);
  border: 2px solid var(--ribbon-bg, #BF6E4C);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  cursor: pointer;
}

.rec-unified-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.rec-unified-ribbon {
  background: var(--ribbon-bg, #BF6E4C);
  color: var(--ribbon-text, #FFFFFF);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.6px;
  padding: 6px 10px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Collage de hasta 3 fotos dividido */
.rec-collage-wrap {
  display: flex;
  height: 180px;
  background: var(--bg-warm-light);
  overflow: hidden;
  position: relative;
}

.rec-collage-img {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  border-right: 2px solid #FFFFFF;
  transition: transform 0.35s ease, filter 0.35s ease;
  filter: brightness(0.96);
}

.rec-collage-img:last-child {
  border-right: none;
}

.rec-unified-card:hover .rec-collage-img {
  transform: scale(1.06);
  filter: brightness(1.02);
}

.rec-collage-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(59, 61, 31, 0.85);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.rec-unified-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.rec-unified-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.rec-unified-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.rec-unified-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.rec-unified-item {
  font-size: 0.8rem;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  background: var(--bg-warm-light);
  border-radius: 6px;
  border-left: 3px solid var(--ribbon-bg, #BF6E4C);
}

.rec-unified-item-name {
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rec-unified-item-price {
  font-weight: 800;
  color: var(--terracotta-dark);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.rec-unified-btn {
  width: 100%;
  background: var(--ribbon-bg, var(--terracotta));
  color: var(--ribbon-text, #FFFFFF);
  border: none;
  padding: 9px 14px;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.rec-unified-btn:hover {
  filter: brightness(0.9);
}

/* ========================================================
   Modal de Lista Completa de Recomendados de una Categoría
   ======================================================== */
.rec-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.rec-modal-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rec-modal-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--ribbon-bg, var(--terracotta));
}

.rec-modal-img-wrap {
  position: relative;
  height: 150px;
  background: var(--bg-warm-light);
  overflow: hidden;
}

.rec-modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.rec-modal-card:hover .rec-modal-img {
  transform: scale(1.05);
}

.rec-modal-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--ribbon-bg, rgba(59, 61, 31, 0.9));
  color: var(--ribbon-text, #FFFFFF);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.rec-modal-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.rec-modal-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.rec-modal-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.4;
  flex-grow: 1;
}

.rec-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--bg-warm-light);
}

.rec-modal-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--terracotta-dark);
}

.rec-modal-order-btn {
  background: var(--ribbon-bg, var(--terracotta));
  color: var(--ribbon-text, #FFFFFF);
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s ease, filter 0.2s ease;
}

.rec-modal-order-btn:hover {
  filter: brightness(0.9);
}


/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* En Safari de iPhone, 'bottom: 0' queda DEBAJO de la barra del navegador, así
     que el pie del cuadro (con el botón "Agregar al Pedido") caía fuera de la
     pantalla. 'dvh' mide el alto REALMENTE visible y se ajusta solo cuando la
     barra aparece o desaparece al desplazarse. La línea de 'vh' es el respaldo
     para navegadores viejos que no entienden dvh. */
  height: 100vh;                       /* respaldo antiguo */
  height: 100dvh;                      /* descuenta la barra del navegador */
  height: var(--alto-visible, 100dvh); /* descuenta también el TECLADO */
  background: rgba(30, 40, 30, 0.65);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Espacio para la barra inferior y el indicador de inicio del iPhone */
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
}

.modal-overlay.active {
  display: flex;
}

.modal-sheet {
  background: var(--bg-card);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;    /* respaldo para navegadores antiguos */
  max-height: 90dvh;   /* descuenta la barra del navegador */
  /* El límite real: el 100% del recuadro que lo contiene, que ya descuenta la
     barra Y el teclado. Sin esto, al abrirse el teclado el cuadro conservaba su
     alto anterior y el botón "Agregar al Pedido" quedaba detrás del teclado. */
  max-height: 100%;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  flex-shrink: 0;          /* el título nunca se encoge */
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-warm-light);
}

.modal-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.btn-modal-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}

.btn-modal-close:hover {
  background: rgba(0,0,0,0.06);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;                    /* sin esto, flex no deja encoger el cuerpo */
  -webkit-overflow-scrolling: touch; /* desplazamiento suave en iPhone */
  overscroll-behavior: contain;      /* no arrastra la página de atrás */
}

.modal-footer {
  /* Clave del arreglo en iPhone: el pie queda SIEMPRE visible y con el total y
     el botón a la vista; lo que se desplaza es solo el cuerpo del cuadro. */
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  z-index: 2;
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Customizer Steps */
.custom-step {
  margin-bottom: 22px;
}

.step-label {
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--terracotta);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 12px;
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.opt-card {
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.2s ease;
  user-select: none;
}

.opt-card:hover {
  border-color: var(--terracotta);
  background: var(--bg-warm-light);
}

.opt-card.selected {
  border-color: var(--terracotta);
  background: #FDF3E7;
  box-shadow: 0 2px 8px rgba(200, 109, 81, 0.15);
}

.opt-left {
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex-wrap: wrap;      /* el precio baja de línea si no cabe al lado */
  flex: 1 1 auto;
  min-width: 0;         /* sin esto el texto no cede y desborda la tarjeta */
}

.opt-radio, .opt-check {
  width: 18px;
  height: 18px;
  accent-color: var(--terracotta);
}

.opt-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-main);
  min-width: 0;
  overflow-wrap: break-word;   /* solo parte si la palabra no cabe entera */
}

.opt-price-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--terracotta-dark);
}

.opt-price-included {
  font-size: 0.78rem;
  font-weight: 700;
  color: #2F855A;
  background: #E6FFFA;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* Quantity Stepper Control */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-warm-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 3px 8px;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: #FFFFFF;
  color: var(--primary-dark);
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  line-height: 1;
}

.qty-btn:hover {
  background: var(--terracotta);
  color: #FFFFFF;
  border-color: var(--terracotta);
}

.qty-btn:active {
  transform: scale(0.92);
}

.qty-val {
  min-width: 22px;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--primary-dark);
}

.topping-stepper-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;        /* los botones - 1 + no se encogen jamás */
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topping-stepper-wrap .opt-price-tag {
  white-space: nowrap;   /* el precio no se parte en dos renglones */
}

/* Floating Cart Bar (Mobile-first) */
.cart-floating-bar {
  position: fixed;
  bottom: 14px;
  left: 16px;
  right: 16px;
  max-width: 600px;
  margin: 0 auto;
  background: var(--primary-dark);
  color: #FFFFFF;
  border-radius: var(--radius-full);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.cart-floating-bar:hover {
  transform: translateY(-2px);
}

.cart-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-badge-count {
  background: var(--honey-yolk);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: 0.85rem;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-bar-text {
  font-weight: 600;
  font-size: 0.92rem;
}

.cart-bar-total {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--honey-yolk);
}

/* Cart Items in Checkout Sheet */
.cart-item-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.cart-item-info {
  flex-grow: 1;
  padding-right: 12px;
}

.cart-item-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary-dark);
}

.cart-item-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.cart-item-price-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.cart-item-price {
  font-weight: 800;
  color: var(--terracotta-dark);
  font-size: 0.95rem;
}

.btn-remove-item {
  background: transparent;
  border: none;
  color: #C53030;
  font-size: 0.8rem;
  cursor: pointer;
}

/* WhatsApp Primary Button */
.btn-whatsapp-order {
  width: 100%;
  background: #25D366;
  color: #FFFFFF;
  border: none;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 14px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: all 0.2s ease;
}

.btn-whatsapp-order:hover {
  background: #20BA5A;
  transform: translateY(-1px);
}

/* Form Styles */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 5px;
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-family: inherit;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  outline: none;
  transition: border-color 0.2s ease;
}

.form-control:focus {
  border-color: var(--terracotta);
}

/* Visualizer Plate Card */
.visualizer-preview-box {
  background: var(--bg-warm-light);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  position: relative;
  margin-bottom: 16px;
}

.plate-canvas-wrap {
  position: relative;
  /* Antes el tamaño venía fijo en línea desde visualizer.js (280x280). En un
     celular el ancho se recortaba pero el alto no, y el plato quedaba ovalado.
     Ahora es siempre circular y se ajusta a lo que haya disponible. */
  width: min(280px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  border: 8px solid #FAF4EA;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-full);
  background: radial-gradient(circle, #FBF4EA 60%, #E6DEC8 100%);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  /* SIN 'overflow: hidden'. Esa línea recortaba las etiquetas contra la curva del
     plato: por eso se leía "…evueltos tradic…". La foto ya es circular por su
     propio borde redondeado, así que el recorte aquí no hacía falta y solo
     estorbaba. Ahora las etiquetas se ven completas, asomándose un poco sobre el
     borde, que es justo el efecto de una etiqueta señalando el plato. */
  overflow: visible;
}

/* Media Queries */
@media (max-width: 640px) {
  .hero-title {
    font-size: 1.45rem;
  }
  .products-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .product-card {
    grid-column: 1 / -1; /* La tarjeta base ocupa el ancho completo en móvil */
  }
  .modal-sheet {
    /* En celular el cuadro se comporta como hoja inferior. El límite es el 100%
       del recuadro que lo contiene, que ya descuenta la barra del navegador Y el
       teclado. Antes decía 94vh, que se mide contra la pantalla COMPLETA: por eso
       el pie con el botón "Agregar al Pedido" quedaba fuera de lo visible. */
    max-height: 94vh;    /* respaldo para navegadores antiguos */
    max-height: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-top: auto;
  }
  /* El cuerpo es lo ÚNICO que se desplaza; encabezado y pie quedan fijos */
  .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

@media (max-width: 400px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
  .product-card {
    grid-column: auto;
  }
}

/* Recuadro Destacado Paso 1: Validación de Datos */
.customer-step-highlight {
  background: linear-gradient(135deg, #FFFDF8 0%, #FAF0E4 100%);
  border: 2px solid var(--terracotta);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 24px;
  box-shadow: 0 6px 20px rgba(200, 109, 81, 0.12);
  position: relative;
}

.step-indicator-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--terracotta);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.customer-step-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Sección de Calidad y Estándares Brunchi */
.quality-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  margin: 36px 0 24px 0;
  box-shadow: var(--shadow-sm);
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.quality-card {
  background: var(--bg-warm-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: transform 0.2s ease;
}

.quality-card:hover {
  transform: translateY(-2px);
  border-color: var(--terracotta);
}

.quality-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.quality-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--primary-dark);
  margin-bottom: 6px;
  font-weight: 700;
}

.quality-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Banner Contacto Directo WhatsApp */
.wa-direct-banner {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.25);
}

.wa-direct-btn {
  background: #FFFFFF;
  color: #128C7E;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.wa-direct-btn:hover {
  transform: scale(1.04);
  background: #F0FFF4;
}

/* Buzón de Sugerencias */
.suggestions-box {
  background: linear-gradient(135deg, #FAF4E8 0%, #F5E8D8 100%);
  border: 1.5px solid var(--honey-yolk);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  margin-bottom: 40px;
  box-shadow: var(--shadow-sm);
}

.suggestions-email-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid var(--terracotta);
  color: var(--terracotta-dark);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 6px;
  margin-bottom: 14px;
  /* En pantallas de 320 px el correo es más ancho que el teléfono y empujaba la
     página 4 px hacia el lado. Ahora se ajusta y parte el texto si hace falta. */
  max-width: 100%;
  word-break: break-word;
  text-decoration: none;
}

/* Selector de Medios de Pago */
.pay-opt-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pay-opt-card:hover {
  border-color: var(--terracotta);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.pay-opt-card.selected {
  border-color: var(--terracotta);
  background: #FFF8F5;
  box-shadow: 0 2px 10px rgba(200, 109, 81, 0.2);
}


/* ===== Guía visual: cómo pedir en 4 pasos (junto al hero) ===== */
.hero-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 18px;
}
.hero-row .hero-card { margin: 0; height: 100%; }

.steps-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.steps-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--terracotta), var(--primary-dark));
}
.steps-head { margin-bottom: 14px; }
.steps-kicker {
  display: inline-block;
  background: var(--terracotta);
  color: #FFF;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 9999px;
}
.steps-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--primary-dark);
  margin: 8px 0 0;
}

.steps-list { list-style: none; margin: 0; padding: 0; position: relative; }
.step-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-color);
}
.step-row:last-child { border-bottom: none; padding-bottom: 0; }
.step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--primary-dark);
  color: #FFF;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.step-text b { color: var(--primary-dark); font-size: 0.92rem; }
.step-text span { color: var(--text-muted); font-size: 0.82rem; line-height: 1.45; }
.step-once {
  background: #FEFCBF;
  color: #744210;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 9999px;
  margin-left: 4px;
  white-space: nowrap;
}
.step-ico { font-size: 1.3rem; line-height: 1.2; opacity: .9; }

@media (max-width: 860px) {
  .hero-row { grid-template-columns: 1fr; }
}

/* En pantallas pequeñas los botones del encabezado se compactan (solo el ícono)
   para que la cabecera no desborde el ancho del celular. */
@media (max-width: 430px) {
  .btn-header-icon span { display: none; }
  .btn-header-icon { padding: 8px 10px; font-size: 1rem; }
  .brand-logo-img { width: 52px; height: 52px; }
  .brand-title { font-size: 1.4rem; }
  .brand-tagline { font-size: 0.98rem; }
}

/* ===== Collage de la portada (se arma con las fotos reales de cada producto) ===== */
.hero-collage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 62px;
  gap: 8px;
  margin-top: 18px;
}
.hc-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-decoration: none;
  display: block;
  background: var(--bg-warm-tint);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hc-item:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-md); }
.hc-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(42,56,40,.85), rgba(42,56,40,0));
  color: #FFF;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 12px 7px 5px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Mosaico: el primero grande, los demás alternando tamaños */
.hc-item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.hc-item:nth-child(2) { grid-column: span 3; grid-row: span 2; }
.hc-item:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.hc-item:nth-child(4) { grid-column: span 2; grid-row: span 2; }
.hc-item:nth-child(5) { grid-column: span 2; grid-row: span 2; }
.hc-item:nth-child(n+6) { grid-column: span 2; grid-row: span 2; }

@media (max-width: 520px) {
  .hero-collage { grid-auto-rows: 52px; gap: 6px; }
  .hc-label { font-size: 0.62rem; }
}

/* Pieza del collage sin foto: se ve intencional, con el ícono del producto */
.hc-item.hc-empty {
  background: linear-gradient(135deg, var(--bg-warm-tint) 0%, var(--honey-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  border-color: var(--border-color);
}
.hc-ico { font-size: 1.9rem; opacity: .55; }
.hc-item.hc-empty .hc-label {
  background: none;
  color: var(--primary-dark);
  text-shadow: 0 1px 2px rgba(255,255,255,.9);
}

/* ===== REGISTRO OBLIGATORIO ANTES DE PEDIR =====
   El cliente no puede escoger ningún producto sin registrarse, así que el bloque
   de registro tiene que ser lo más visible de la página. */
.badge-obligatorio {
  background: var(--terracotta) !important;
  color: #FFFFFF !important;
  animation: latidoRegistro 2.4s ease-in-out infinite;
}
@keyframes latidoRegistro {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 109, 81, 0.45); }
  50%      { box-shadow: 0 0 0 9px rgba(200, 109, 81, 0); }
}

.registro-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
}
.registro-texto { flex: 1; min-width: 250px; }
.registro-texto h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--primary-dark);
  margin-bottom: 6px;
}
.registro-texto p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}
.registro-acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 230px;
}
.btn-registro-grande {
  background: var(--terracotta);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-full);
  padding: 14px 26px;
  font-size: 1.02rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(200, 109, 81, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  font-family: inherit;
}
.btn-registro-grande:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(200, 109, 81, 0.45);
}
.btn-registro-secundario {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px;
  font-family: inherit;
}
.btn-registro-secundario:hover { color: var(--terracotta); }

/* Destello cuando el cliente intenta escoger un producto sin registrarse */
.registro-urgente { animation: destelloRegistro 1.1s ease-out 2; border-radius: var(--radius-lg); }
@keyframes destelloRegistro {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 109, 81, 0); }
  30%      { box-shadow: 0 0 0 6px rgba(200, 109, 81, 0.55); }
}

/* Aviso dentro del formulario de datos */
.aviso-registro {
  background: #FFF5F2;
  border: 1.5px solid var(--terracotta);
  border-left-width: 5px;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  line-height: 1.45;
}
.aviso-registro b { display: block; color: var(--terracotta-dark, #A4472F); margin-bottom: 4px; font-size: 0.95rem; }
.aviso-registro span { font-size: 0.85rem; color: var(--text-muted); }

@media (max-width: 560px) {
  .registro-acciones { width: 100%; }
  .registro-texto h3 { font-size: 1.15rem; }
}

/* Todos los modales comparten z-index y el orden del HTML decide cuál queda
   arriba. Esta clase sube el formulario de datos por encima del armador de
   platillos, cuando se abre desde ahí. */
.modal-overlay.modal-encima { z-index: 1001; }

/* ===== Desayunos empresariales programados =====
   Se diferencia del banner verde de WhatsApp a propósito: es otra oferta, para
   otro público (empresas), y debe leerse como tal y no como "más de lo mismo". */
.wa-empresas {
  background: linear-gradient(135deg, #3B3D1F 0%, #55582F 100%);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 24px 26px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 6px 18px rgba(59, 61, 31, 0.28);
}
.wa-empresas-texto { flex: 1; min-width: 260px; }
.wa-empresas-etiqueta {
  display: inline-block;
  background: var(--honey-yolk);
  color: var(--primary-dark);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  padding: 3px 11px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
}
.wa-empresas h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  margin-bottom: 7px;
  line-height: 1.25;
}
.wa-empresas p {
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.93;
  margin-bottom: 12px;
}
.wa-empresas-lista {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 5px 18px;
  font-size: 0.85rem;
  opacity: 0.95;
}
.wa-empresas-btn {
  background: var(--honey-yolk);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: 0.98rem;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(234, 168, 56, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wa-empresas-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(234, 168, 56, 0.5);
}
@media (max-width: 560px) {
  .wa-empresas { padding: 18px; }
  .wa-empresas h3 { font-size: 1.15rem; }
  .wa-empresas-btn { width: 100%; text-align: center; }
}


/* ===== Tarjetas de topping en celular =====
   En una pantalla angosta no hay espacio para el nombre y los botones - 1 + en
   la misma línea: el nombre terminaba partido letra por letra. Se apila: el
   nombre ocupa todo el ancho arriba y los controles van debajo, a la derecha. */
@media (max-width: 430px) {
  .opt-card {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .opt-card .opt-left {
    flex: 1 1 100%;
    min-width: 100%;
  }
  .opt-card .topping-stepper-wrap {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
}


/* ===== Foto del plato en el armador ===== */
.plate-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.88;
}
/* En CELULAR se ignoran esas esquinas: la capa se vuelve una columna que reparte
   las etiquetas de arriba abajo, centradas. Así cada una dispone de todo el
   ancho del plato, ninguna se corta contra el borde y no se solapan entre sí,
   sean 3 o sean 7. En computador no cambia nada. */

/* En computador las etiquetas conservan sus esquinas, pero con un ancho máximo
   para que un nombre muy largo no se cruce el plato de lado a lado. */
/* ===== Última revisión de la dirección antes de enviar =====
   Es el punto donde más se pierde plata: pedidos que salen a una dirección
   vieja. Por eso el bloque es grande, con la dirección en tamaño legible y una
   casilla que hay que marcar a propósito. */
.confirmar-direccion {
  margin-top: 18px;
  background: #FFF8F0;
  border: 2px solid var(--honey-yolk);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.cd-titulo {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #8A6114;
  margin-bottom: 8px;
}
.cd-direccion {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.35;
}
.cd-zona {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 3px;
}
.cd-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  cursor: pointer;
  color: var(--text-main);
}
.cd-check input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--terracotta);
  cursor: pointer;
}
.cd-cambiar {
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--terracotta);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0;
  font-family: inherit;
}
/* El botón de enviar permanece apagado hasta confirmar */
.btn-whatsapp-order:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* ===== SEGUIMIENTO DEL PEDIDO (lo ve el cliente) ===== */
.seguimiento-pedido { max-width: 1080px; margin: 12px auto 0; padding: 0 16px; }
.sp-franja {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #3B3D1F 0%, #55582F 100%);
  color: #FFF; border-radius: var(--radius-md); padding: 13px 16px;
  cursor: pointer; box-shadow: 0 4px 14px rgba(42,56,40,.25);
  transition: transform .18s ease;
}
.sp-franja:hover { transform: translateY(-2px); }
.sp-icono { font-size: 1.6rem; flex-shrink: 0; }
.sp-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-texto b { font-size: 0.95rem; }
.sp-texto span { font-size: 0.8rem; opacity: .9; }
.sp-saldo { background: var(--honey-yolk); color: var(--primary-dark);
            padding: 1px 8px; border-radius: 9999px; font-weight: 800; margin-left: 6px; }
.sp-ver { font-size: 0.82rem; font-weight: 800; white-space: nowrap; opacity: .9; }

/* Aviso de "estoy agregando a un pedido en curso" */
.aviso-modo-agregar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--honey-yolk); color: var(--primary-dark);
  padding: 10px 18px; font-size: 0.88rem;
}
.ama-texto { display: flex; flex-direction: column; }
.ama-texto span { font-size: 0.78rem; opacity: .85; }
.ama-botones { display: flex; gap: 8px; }
.ama-confirmar {
  background: var(--primary-dark); color: #FFF; border: none;
  padding: 8px 16px; border-radius: 9999px; font-weight: 800;
  cursor: pointer; font-family: inherit; font-size: 0.85rem;
}
.ama-cancelar {
  background: none; border: 1.5px solid var(--primary-dark); color: var(--primary-dark);
  padding: 8px 14px; border-radius: 9999px; font-weight: 700;
  cursor: pointer; font-family: inherit; font-size: 0.85rem;
}
/* Mientras se agrega a un pedido, la barra del carrito estorba */
body.modo-agregar .cart-floating-bar { display: none !important; }

/* Detalle del pedido */
.sg-num { font-size: 1.3rem; font-weight: 800; color: var(--primary-dark); }
.sg-dir { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; }
.sg-pasos { border-left: 2px dashed var(--border-color); margin: 0 0 18px 10px; padding-left: 16px; }
.sg-paso { display: flex; align-items: center; gap: 9px; padding: 7px 0; opacity: .45; font-size: 0.88rem; }
.sg-paso.hecho { opacity: .8; }
.sg-paso.actual { opacity: 1; font-weight: 800; color: var(--terracotta-dark); }
.sg-punto { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-warm-tint);
            display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem; }
.sg-paso.actual .sg-punto { background: var(--terracotta); color: #FFF;
                            animation: pasoLatiendo 1.8s ease-in-out infinite; }
@keyframes pasoLatiendo { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.12); } }
.sg-paso-texto { flex: 1; }
.sg-hora { font-size: 0.76rem; color: var(--text-light); }
.sg-cancelado { background: #FED7D7; color: #9B2C2C; border-radius: 10px;
                padding: 14px; text-align: center; font-weight: 800; margin-bottom: 16px; }
.sg-cancelado span { font-weight: 400; font-size: 0.85rem; }
.sg-items { border-top: 1px solid var(--border-color); padding-top: 12px; }
.sg-item { display: flex; justify-content: space-between; gap: 10px;
           font-size: 0.87rem; padding: 4px 0; }
.sg-item.agregado { color: var(--terracotta-dark); }
.sg-totales { border-top: 1px solid var(--border-color); margin-top: 10px; padding-top: 10px; font-size: 0.87rem; }
.sg-totales > div { display: flex; justify-content: space-between; padding: 2px 0; }
.sg-total { font-weight: 800; font-size: 1.05rem; color: var(--primary-dark);
            border-top: 1px solid var(--border-color); margin-top: 6px; padding-top: 6px; }
.sg-saldo-aviso { display: block !important; background: #FBEAE3; border-left: 4px solid var(--honey-yolk);
                  border-radius: 0 8px 8px 0; padding: 10px 12px; margin-top: 12px; font-size: 0.84rem; line-height: 1.45; }
.sg-saldo-aviso span { display: block; color: var(--text-muted); margin-top: 3px; }
.sg-acciones { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.sg-btn-agregar {
  background: var(--terracotta); color: #FFF; border: none; padding: 13px;
  border-radius: 9999px; font-weight: 800; cursor: pointer; font-family: inherit; font-size: 0.95rem;
}
.sg-btn-cancelar {
  background: none; border: 1.5px solid #FC8181; color: #C53030; padding: 11px;
  border-radius: 9999px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 0.88rem;
}
.sg-nota { font-size: 0.84rem; color: var(--text-muted); text-align: center; line-height: 1.5; }

/* "¿Olvidaste tu PIN?" — se ve como enlace pero es botón, para que el lector de
   pantalla y el teclado lo tomen como acción y no como navegación. */
.link-olvide-pin {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin-top: 8px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--terracotta);
  text-decoration: underline;
  cursor: pointer;
}
.link-olvide-pin:hover { color: var(--terracotta-dark); }

/* ===== MODAL: OLVIDÉ MI PIN ===== */
.op-paso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}
.op-paso:last-child { border-bottom: none; }
.op-num {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary-dark);
  color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem;
}
.op-paso b { display: block; color: var(--primary-dark); margin-bottom: 3px; }
.op-paso p {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 10px;
}
.op-btn-wa {
  background: #25D366;
  color: #FFF;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
}
.op-mensaje {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.45;
}
.op-error { background: #FFF5F5; color: #C53030; border: 1px solid #FEB2B2; }
.op-ok    { background: #F0FFF4; color: #276749; border: 1px solid #9AE6B4; }

/* ===== AVISO EN VIVO: EL PEDIDO CAMBIÓ DE ESTADO =====
   El cliente casi nunca está mirando la pantalla en ese momento, así que el
   cambio tiene que notarse solo. Aparece arriba y se va a los 5 segundos. */
.aviso-estado {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: calc(100vw - 28px);
  background: var(--primary-dark, #3B3D1F);
  color: #FFF;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  animation: aeEntra .35s ease-out;
}
.aviso-estado .ae-icono { font-size: 1.5rem; line-height: 1; }
.aviso-estado b { display: block; font-size: .74rem; opacity: .75; letter-spacing: .4px; }
.aviso-estado span:not(.ae-icono) { font-size: .92rem; font-weight: 700; }
.aviso-estado.ae-fuera { animation: aeSale .55s ease-in forwards; }

@keyframes aeEntra {
  from { opacity: 0; transform: translate(-50%, -18px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes aeSale {
  to { opacity: 0; transform: translate(-50%, -18px); }
}

/* La franja de seguimiento parpadea una vez cuando el estado cambia */
.sp-cambio { animation: spLatido 1.8s ease-in-out; }
@keyframes spLatido {
  0%, 100% { box-shadow: none; }
  30%      { box-shadow: 0 0 0 3px var(--terracotta, #BF6E4C); }
}

/* ===== REPETIR EL ULTIMO PEDIDO ===== */
.repetir-pedido { max-width: 1100px; margin: 10px auto 0; padding: 0 16px; }
.rp-franja {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #FFF8EC; border: 1.5px solid #F2D9A6; border-radius: 14px;
  padding: 12px 16px;
}
.rp-icono { font-size: 1.6rem; line-height: 1; }
.rp-texto { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.rp-texto b { color: var(--primary-dark); font-size: .98rem; }
.rp-texto span { color: var(--text-muted); font-size: .84rem; line-height: 1.4; }
.rp-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-btn-repetir {
  background: var(--primary-dark); color: #FFF; border: none; border-radius: 10px;
  padding: 10px 16px; font-weight: 800; font-size: .88rem; cursor: pointer;
}
.rp-btn-repetir:hover { background: var(--terracotta); }
.rp-btn-ver {
  background: transparent; color: var(--primary-dark); border: 1.5px solid var(--primary-dark);
  border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: .86rem; cursor: pointer;
}
@media (max-width: 520px) {
  .rp-botones { width: 100%; }
  .rp-btn-repetir, .rp-btn-ver { flex: 1; text-align: center; }
}

/* Modal de historial */
.hist-nota { font-size: .84rem; color: var(--text-muted); margin: 0 0 12px; }
.hist-item { border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #FFF; }
.hist-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.hist-cab b { color: var(--primary-dark); }
.hist-cab span { font-size: .8rem; color: var(--text-muted); }
.hist-lineas { font-size: .88rem; line-height: 1.5; margin-bottom: 10px; }
.hist-lineas em { color: var(--text-muted); font-style: normal; font-size: .8rem; }
.hist-item .rp-btn-repetir { width: 100%; }
.hist-vacio { text-align: center; color: var(--text-muted); padding: 20px 0; }

/* ===== NOVEDAD: boton de anuncio en el encabezado ===== */
.novedad-boton {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border: 2px solid var(--terracotta); border-radius: 9999px;
  padding: 6px 16px 6px 6px; cursor: pointer; text-align: left;
  box-shadow: 0 6px 18px rgba(200, 109, 81, .25);
  animation: nvLatido 2.4s ease-in-out infinite;
}
.novedad-boton:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(200, 109, 81, .35); }
.novedad-boton img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #FFF; }
.nv-textos { display: flex; flex-direction: column; line-height: 1.15; }
.nv-tag { font-size: .68rem; font-weight: 800; letter-spacing: 1px; color: var(--terracotta-dark, #A6553E); }
.nv-nombre { font-size: .95rem; font-weight: 800; color: var(--primary-dark); }
@keyframes nvLatido {
  0%, 100% { box-shadow: 0 6px 18px rgba(200, 109, 81, .25); }
  50%      { box-shadow: 0 6px 26px rgba(200, 109, 81, .55); }
}
@media (max-width: 600px) {
  .novedad-boton { padding: 4px 12px 4px 4px; gap: 8px; }
  .novedad-boton img { width: 36px; height: 36px; }
  .nv-nombre { font-size: .84rem; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Imagen en grande */
.novedad-caja {
  position: relative; background: #FFF; border-radius: 18px; padding: 18px;
  width: min(92vw, 520px); max-height: 92vh; overflow-y: auto; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.novedad-cerrar { position: absolute; top: 10px; right: 10px; }
.novedad-etiqueta {
  display: inline-block; background: var(--terracotta); color: #FFF; font-weight: 800;
  font-size: .72rem; letter-spacing: 1.2px; padding: 5px 12px; border-radius: 9999px; margin-bottom: 12px;
}
.novedad-caja img { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 14px; background: #FAF2E7; }
.novedad-nombre { font-family: var(--font-serif, serif); font-size: 1.5rem; color: var(--primary-dark); margin: 14px 0 4px; }
.novedad-desc { color: var(--text-muted); font-size: .92rem; line-height: 1.5; margin-bottom: 10px; }
.novedad-cta { width: 100%; margin-top: 8px; }

/* ===== INSTAGRAM EN LA BARRA SUPERIOR =====
   El texto sigue centrado; el enlace va pegado a la derecha. En celular la
   barra deja de ser una línea y el enlace baja debajo, centrado, para que
   nunca se monte sobre el horario. */
.delivery-notice-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 12px;
  padding-right: 12px;
}
.ig-link {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 3px 10px 3px 6px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  transition: background .15s ease, transform .15s ease;
  white-space: nowrap;
}
.ig-link:hover { background: rgba(255, 255, 255, .24); transform: translateY(-50%) scale(1.03); }
.ig-icono { flex: 0 0 auto; }
.ig-siguenos { opacity: .85; font-weight: 500; margin-right: 2px; }

/* El texto de la franja ahora lo escribe el admin y puede ser largo: se le
   reserva el espacio del botón de Instagram a ambos lados para que no se monte. */
@media (min-width: 961px) {
  .delivery-notice-bar { padding-left: 200px; padding-right: 200px; }
}

@media (max-width: 960px) {
  .delivery-notice-bar { flex-direction: column; gap: 6px; padding-top: 7px; padding-bottom: 7px; }
  .ig-link { position: static; transform: none; font-size: 0.78rem; }
  .ig-link:hover { transform: none; }
}

/* ===== PROGRAMAR: ¿para hoy, mañana u otra fecha? ===== */
.dia-opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.dia-btn {
  flex: 1; min-width: 90px;
  background: #FFF; color: var(--primary-dark);
  border: 1.5px solid var(--border-color); border-radius: 10px;
  padding: 10px 12px; font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dia-btn.activo { border-color: var(--terracotta); background: #FFF5F2; color: var(--terracotta-dark, #A6553E); }
.dia-btn.apagado, .dia-btn:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.dia-aviso {
  margin-top: 8px; font-size: .8rem; font-weight: 700; line-height: 1.4;
  background: var(--rosado-claro); color: var(--chocolate); border: 1px solid var(--nude); border-radius: 8px; padding: 7px 10px;
}
.dia-resumen { margin-top: 10px; font-size: .86rem; font-weight: 800; color: var(--primary-dark); }

/* =====================================================================
   SECCIONES TIPO CATÁLOGO (tortas, postres, desayunos sorpresa, temporada)
   Estilo del volante y el catálogo de Brunchi (oct-2026)
   ===================================================================== */
.seccion-sub {
  font-size: 0.92rem; color: var(--text-muted); margin: -4px 0 12px; line-height: 1.45; max-width: 680px;
}
.seccion-nota {
  display: inline-block; background: var(--rosado-claro); color: var(--chocolate);
  font-size: 0.8rem; font-weight: 600; letter-spacing: .02em;
  padding: 5px 14px; border-radius: var(--radius-full); margin: 0 0 14px;
}
/* Fotos de producto en formato de post de Instagram (4:5, 1080×1350).
   Una foto 4:5 llena el marco exacto; una cuadrada u horizontal se ve COMPLETA,
   sin recortes, sobre un fondo hecho con la misma foto desenfocada. */
.product-card-img-wrap { height: auto !important; aspect-ratio: 4 / 5; isolation: isolate; }
.product-card-img-wrap::before {
  content: ""; position: absolute; inset: -24px; z-index: -1;
  background: var(--foto, none) center / cover no-repeat;
  filter: blur(22px) saturate(1.1); opacity: .55;
}
.product-card-img-wrap .product-card-img { object-fit: contain; }
.cat-card .product-name { font-family: var(--font-serif); font-weight: 600; }
.cat-card .product-name { font-family: var(--font-serif); font-weight: 600; }
.cat-porciones {
  font-size: 0.72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: var(--terracotta); margin: 2px 0 6px;
}
.cat-variantes { list-style: none; margin: 8px 0 4px; padding: 0; border-top: 1px dashed var(--border-color); }
.cat-variantes li {
  display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
  border-bottom: 1px dashed var(--border-color); font-size: 0.88rem; color: var(--text-main);
}
.cat-variantes li b { color: var(--terracotta-dark); white-space: nowrap; }
.cat-vacio { color: var(--text-muted); font-style: italic; padding: 12px 4px; }

/* Armador de un producto de catálogo */
.cat-armador-foto {
  position: relative; isolation: isolate; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px;
  aspect-ratio: 4 / 5; max-height: 46vh; width: 100%; background: var(--bg-warm-light);
}
.cat-armador-foto::before {
  content: ""; position: absolute; inset: -24px; z-index: -1;
  background: var(--foto, none) center / cover no-repeat; filter: blur(22px); opacity: .55;
}
.cat-armador-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cat-armador-desc { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 12px; line-height: 1.45; }
.cat-incluye {
  background: var(--bg-warm-light); border: 1px solid var(--border-color); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 0.86rem; color: var(--text-main); line-height: 1.45;
}
.cat-incluye b { display: block; font-family: var(--font-script); font-weight: 400; font-size: 1.45rem; color: var(--terracotta); line-height: 1; margin-bottom: 2px; }
.opt-detalle { display: block; font-size: 0.78rem; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
  border: 1.5px solid var(--border-color); background: #fff; color: var(--text-main);
  padding: 8px 16px; border-radius: var(--radius-full); font: inherit; font-size: 0.88rem; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.cat-chip:hover { border-color: var(--terracotta); }
.cat-chip.activo { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--bg-main); font-weight: 600; }
.custom-step.falta { outline: 2px solid var(--terracotta); outline-offset: 6px; border-radius: 10px; }
.cat-tarjeta-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

/* Cantidad 2 o más en un producto con elecciones: una fila por unidad */
.cat-unidad-label { font-size: 0.78rem; font-weight: 800; color: var(--terracotta-dark, var(--terracotta)); margin: 10px 0 5px; text-transform: uppercase; letter-spacing: .4px; }
.cat-unidad-label:first-child { margin-top: 2px; }
.cat-chips-unidad { padding-bottom: 6px; border-bottom: 1px dashed var(--border-color); }
.cat-chips-unidad:last-child { border-bottom: none; padding-bottom: 0; }

/* Kit / surtido: el cliente reparte las unidades entre los sabores con − / + */
.surtido-contador {
  font-size: 0.86rem; color: #9C4221; background: #FFF7E6; border: 1px solid #F0D48A;
  border-radius: 8px; padding: 7px 10px; margin-bottom: 10px;
}
.surtido-contador.completo { color: #276749; background: #F0FFF4; border-color: #9AE6B4; }
.surtido-lista { display: flex; flex-direction: column; gap: 8px; }
.surtido-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1.5px solid var(--border-color); border-radius: 10px; padding: 8px 10px 8px 12px;
}
.surtido-sabor { font-size: 0.9rem; font-weight: 600; color: var(--primary-dark); }
.surtido-fila .qty-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Buscador predictivo de barrios: la lista sale debajo del campo mientras se escribe */
.barrio-sugerencias {
  margin-top: 4px; background: #fff; border: 1.5px solid var(--border-color); border-radius: 10px;
  max-height: 264px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.barrio-sug-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--border-color);
  padding: 11px 12px; font: inherit; font-size: 0.92rem; color: var(--primary-dark); text-align: left; cursor: pointer;
}
.barrio-sug-item:last-child { border-bottom: none; }
.barrio-sug-item small { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }
.barrio-sug-item:hover, .barrio-sug-item:active, .barrio-sug-item.primero { background: var(--bg-warm-light); }

/* Adicionales con precio del desayuno sorpresa (cerveza, globo…): tarjetita con
   foto pequeña, nombre y precio; tocarla la agrega o la quita */
.cat-adic-opcional { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }
.cat-adicionales { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.cat-adic {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1.5px solid var(--border-color); background: #fff; border-radius: 12px;
  padding: 10px 8px 9px; font: inherit; cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.cat-adic:hover { border-color: var(--terracotta); }
.cat-adic img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--bg-warm-light); }
.cat-adic-nombre { font-size: 0.84rem; font-weight: 700; color: var(--primary-dark); line-height: 1.2; }
.cat-adic-precio { font-size: 0.8rem; font-weight: 700; color: var(--terracotta-dark, var(--terracotta)); }
.cat-adic-check {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--primary-dark); color: var(--bg-main); font-size: 0.8rem; font-weight: 900;
}
.cat-adic.activo { border-color: var(--primary-dark); background: var(--bg-warm-light); box-shadow: 0 0 0 2px var(--primary-dark) inset; }
.cat-adic.activo .cat-adic-check { display: flex; }
.cat-tarjeta textarea { resize: vertical; font: inherit; }

/* Edición de temporada (Halloween): bloque rosado como en el volante */
.products-section.estilo-halloween {
  background: var(--rosado); border-radius: var(--radius-lg);
  padding: 22px 18px 18px; margin-top: 18px; position: relative; overflow: hidden;
}
.products-section.estilo-halloween::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 92% 10%, rgba(255,255,255,.35) 0 70px, transparent 71px),
    radial-gradient(circle at 20% 115%, rgba(255,255,255,.22) 0 110px, transparent 111px);
}
.products-section.estilo-halloween > * { position: relative; }
.products-section.estilo-halloween .section-header { background: transparent; }
.products-section.estilo-halloween .section-title { color: var(--chocolate); }
.products-section.estilo-halloween .seccion-sub { color: var(--chocolate); opacity: .85; }
.products-section.estilo-halloween .seccion-nota { background: #fff; }

@media (max-width: 480px) {
  .cat-tarjeta-fila { grid-template-columns: 1fr; }
  .products-section.estilo-halloween { padding: 18px 12px 12px; border-radius: var(--radius-md); }
}