/* RUTA: /css/main.css */
/* ============================================
   VIANDAZZO - CSS Principal
   Identidad: Rojo coral, amarillo lima, retro/halftone
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700&family=Barlow:wght@400;500;600&display=swap');

/* ============================================
   VARIABLES
   ============================================ */
:root {
  --coral:       #D4523A;
  --coral-dark:  #B03C27;
  --coral-light: #E8725C;
  --lima:        #E8EC7A;
  --lima-dark:   #C8CC50;
  --cream:       #F5EFE0;
  --cream-dark:  #EDE4CC;
  --marron:      #6B1F1F;
  --marron-dark: #4A1010;
  --white:       #FFFFFF;
  --text-dark:   #1A0A0A;
  --text-mid:    #4A2020;
  --text-light:  #8B5050;

  --font-display: 'Bebas Neue', sans-serif;
  --font-head:    'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  --shadow-sm:  2px 3px 0px var(--marron-dark);
  --shadow-md:  4px 5px 0px var(--marron-dark);
  --shadow-lg:  6px 7px 0px var(--marron-dark);

  --transition: 0.18s ease;
}

/* ============================================
   RESET Y BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* FIX-NAV-STICKY: usar `overflow-x: clip` en vez de `hidden`. Ambos ocultan
     el desborde horizontal, pero `hidden` crea un "scroll container" que ANULA
     silenciosamente el `position: sticky` de los descendientes (regla del spec
     de CSS: cualquier overflow != visible en un ancestro rompe sticky en TODOS
     los ejes, no solo en el del overflow). `clip` no crea scroll container,
     entonces .navbar puede flotar como corresponde. Soporte: Chrome 90+,
     Firefox 81+, Safari 15.4+ — universal en 2026. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-dark);
  background: var(--cream);
  min-height: 100vh;
  /* FIX-NAV-STICKY: ver comentario del html — mismo motivo, mismo fix. */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ============================================
   HALFTONE TEXTURE (pseudo-elemento)
   ============================================ */
.halftone {
  position: relative;
}
.halftone::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 8px 8px;
  pointer-events: none;
  z-index: 0;
}
.halftone > * { position: relative; z-index: 1; }

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  background: var(--coral);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 3px solid var(--marron-dark);
  /* FIX-NAV-STICKY: sombra sutil para que el navbar se despegue visualmente
     del contenido cuando está flotando sobre él. Sin sombra, el nav sticky
     se ve "pegado" al contenido y no queda claro que es un elemento fijo. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 68px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-logo .logo-text {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--lima);
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 3px 3px 0 var(--marron-dark);
  transform: rotate(-2deg);
  display: inline-block;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

.navbar-nav a {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--lima);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
  transition: background var(--transition), color var(--transition);
  text-transform: uppercase;
}
.navbar-nav a:hover,
.navbar-nav a.active {
  background: var(--lima);
  color: var(--coral-dark);
}

.navbar-cart {
  position: relative;
  background: var(--lima);
  color: var(--coral-dark);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--marron-dark);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: transform var(--transition), box-shadow var(--transition);
}
.navbar-cart:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-md);
}
.navbar-cart:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.cart-badge {
  background: var(--coral);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--marron-dark);
}

/* FIX-NAV-MOBILE-3PLUS: botón "+" que solo aparece en mobile para desplegar los
   links secundarios (Envíos, FAQ, Contacto). En desktop está oculto porque el
   nav muestra los 6 links inline. */
.nav-more-wrap { display: none; position: relative; }
.nav-more {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--lima);
  background: transparent;
  border: 2px solid var(--lima);
  border-radius: var(--radius-sm);
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.nav-more:hover,
.nav-more[aria-expanded="true"] {
  background: var(--lima);
  color: var(--coral-dark);
}
.nav-more[aria-expanded="true"] { transform: rotate(45deg); }
.nav-more-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--coral);
  border: 2px solid var(--marron-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0.35rem;
  z-index: 1001;
  list-style: none;
  margin: 0;
}
.nav-more-dropdown.open { display: flex; flex-direction: column; gap: 2px; }
.nav-more-dropdown a {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--lima);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
}
.nav-more-dropdown a:hover,
.nav-more-dropdown a.active {
  background: var(--lima);
  color: var(--coral-dark);
}

/* ============================================
   HERO
   ============================================ */
.hero {
  background: var(--coral);
  padding: 5rem 1.5rem 4rem;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1.5px, transparent 1.5px);
  background-size: 10px 10px;
}

.hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }

.hero-eyebrow {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--lima);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  color: var(--lima);
  line-height: 0.9;
  letter-spacing: 4px;
  text-shadow: 6px 6px 0 var(--marron-dark);
  transform: rotate(-2deg);
  display: inline-block;
  margin-bottom: 1.5rem;
}

.hero-sub {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--cream);
  max-width: 520px;
  margin: 0 auto 2.5rem;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   BOTONES
   ============================================ */
.btn {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--marron-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translate(1px, 1px); box-shadow: none; }

.btn-primary   { background: var(--lima); color: var(--marron-dark); }
.btn-secondary { background: var(--white); color: var(--coral-dark); }
.btn-coral     { background: var(--coral); color: var(--lima); }
.btn-dark      { background: var(--marron); color: var(--cream); }
.btn-sm        { padding: 0.45rem 1.1rem; font-size: 0.9rem; }
.btn-lg        { padding: 1rem 2.5rem; font-size: 1.15rem; }
.btn-block     { width: 100%; justify-content: center; }

/* ============================================
   SECCIONES GENERALES
   ============================================ */
.section {
  padding: 5rem 1.5rem;
}

.section-cream  { background: var(--cream); }
.section-white  { background: var(--white); }
.section-coral  { background: var(--coral); color: var(--cream); }
.section-marron { background: var(--marron); color: var(--cream); }

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  margin-bottom: 3rem;
  text-align: center;
}

.section-label {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.5rem;
}
.section-marron .section-label,
.section-coral .section-label {
  color: var(--lima);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--marron);
}
.section-coral .section-title,
.section-marron .section-title {
  color: var(--lima);
  text-shadow: 3px 3px 0 var(--marron-dark);
}

.section-desc {
  margin-top: 0.75rem;
  font-size: 1.05rem;
  color: var(--text-mid);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   FEATURES / ICONOS
   ============================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature-item {
  text-align: center;
  padding: 2rem 1rem;
  background-color: var(--coral);
  background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1.5px, transparent 1.5px);
  background-size: 10px 10px;
  border: 2px solid var(--marron);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition);
  position: relative;
}
.feature-item:hover { transform: translateY(-4px); }
.feature-item .feature-title { color: var(--lima); }
.feature-item .feature-desc  { color: var(--cream); opacity: 0.9; }

.feature-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  object-fit: contain;
}

.feature-title {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--marron);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feature-desc {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.5;
}

/* ============================================
   COMBOS
   ============================================ */
.combos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.combo-card {
  background: var(--cream);
  border: 3px solid var(--marron);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition);
  position: relative;
}
.combo-card:hover { transform: translateY(-6px); }

.combo-card.featured {
  border-color: var(--lima-dark);
  background: var(--marron);
  color: var(--cream);
}

.combo-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--lima);
  color: var(--marron-dark);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--marron-dark);
}

.combo-header {
  padding: 2rem 1.75rem 1rem;
}

.combo-name {
  font-family: var(--font-display);
  font-size: 2.5rem;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--coral);
}
.combo-card.featured .combo-name { color: var(--lima); text-shadow: 2px 2px 0 var(--marron-dark); }

.combo-desc {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.5;
}
.combo-card.featured .combo-desc { color: var(--cream); }

.combo-includes {
  padding: 0 1.75rem;
  list-style: none;
}
.combo-includes li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(107,31,31,0.2);
  font-size: 0.95rem;
}
.combo-card.featured .combo-includes li { border-color: rgba(255,255,255,0.15); color: var(--cream); }
.combo-includes li:last-child { border: none; }
.combo-includes .ico { width: 20px; height: 20px; object-fit: contain; }

.combo-footer {
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.combo-price {
  font-family: var(--font-display);
  font-size: 2.2rem;
  letter-spacing: 1px;
  color: var(--coral);
  line-height: 1;
}
.combo-card.featured .combo-price { color: var(--lima); text-shadow: 2px 2px 0 var(--marron-dark); }

/* ============================================
   CATÁLOGO / PRODUCTOS
   ============================================ */
.menu-tabs-wrap {
  position: relative;
  margin-bottom: 2rem;
}
.menu-tabs-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: calc(100% - 0.5rem);
  background: linear-gradient(to right, rgba(245,239,224,0), #F5EFE0 80%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s;
}
.menu-tabs-wrap.at-end::after { opacity: 0; }

.menu-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.menu-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  border: 2px solid var(--marron);
  background: var(--cream-dark);
  color: var(--marron);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.tab-btn:hover { background: var(--coral-light); color: var(--white); border-color: var(--coral-light); }
.tab-btn.active { background: var(--coral); color: var(--lima); border-color: var(--coral); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}

.producto-card {
  background: var(--white);
  border: 2px solid var(--marron);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.producto-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-md);
}

/* FIX-IMG-CUADRADA: aspect-ratio 1/1 para fotos cuadradas sin corte */
.producto-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--cream-dark);
  border-bottom: 2px solid var(--marron);
}

.producto-body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.producto-nombre {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--marron);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.producto-desc {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 0.75rem;
}

.producto-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.producto-precio {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--coral);
  letter-spacing: 1px;
}

/* ============================================
   CARRITO (panel lateral)
   ============================================ */
.cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 10, 10, 0.55);
  z-index: 1999;
}
.cart-overlay.open { display: block; }

.cart-panel {
  position: fixed;
  top: 0;
  right: -480px;
  width: 100%;
  max-width: 460px;
  height: 100vh;
  background: var(--cream);
  border-left: 3px solid var(--marron);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  overflow: hidden;
}
.cart-panel.open { right: 0; }

.cart-header {
  background: var(--coral);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--marron-dark);
}

.cart-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--lima);
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 var(--marron-dark);
}

.cart-close {
  background: var(--lima);
  color: var(--marron-dark);
  border: 2px solid var(--marron-dark);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition);
}
.cart-close:hover { transform: scale(1.1); }

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}

.cart-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-light);
}
.cart-empty img { width: 80px; margin: 0 auto 1rem; opacity: 0.3; }
.cart-empty p { font-family: var(--font-head); font-size: 1.1rem; text-transform: uppercase; }

.cart-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--marron);
  align-items: flex-start;
}

.cart-item-info { flex: 1; }
.cart-item-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  color: var(--marron);
  letter-spacing: 0.3px;
}
.cart-item-cat { font-size: 0.8rem; color: var(--text-light); }

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.qty-btn {
  width: 26px; height: 26px;
  border: 1.5px solid var(--marron);
  border-radius: 50%;
  background: var(--white);
  color: var(--marron);
  font-size: 1rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.qty-btn:hover { background: var(--coral); color: var(--lima); }
.qty-val { font-family: var(--font-head); font-weight: 700; min-width: 24px; text-align: center; }

.cart-item-price {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--coral);
  white-space: nowrap;
  align-self: center;
}

.cart-remove {
  color: var(--text-light);
  font-size: 1rem;
  padding: 0.25rem;
  align-self: center;
  transition: color var(--transition);
}
.cart-remove:hover { color: var(--coral); }

.cart-footer {
  background: var(--white);
  border-top: 3px solid var(--marron);
  padding: 1.25rem 1.5rem;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}
.cart-total-label { font-family: var(--font-head); font-size: 1rem; font-weight: 600; text-transform: uppercase; color: var(--text-mid); }
.cart-total-val { font-family: var(--font-display); font-size: 2rem; color: var(--marron); letter-spacing: 1px; }

/* ============================================
   FORMULARIO DE PEDIDO / CHECKOUT
   ============================================ */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}
.checkout-grid > aside {
  position: sticky;
  top: 1.5rem;
}
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-grid > aside { position: static; }
}

.form-card {
  background: var(--white);
  border: 2px solid var(--marron);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

.form-card h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--marron);
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px dashed var(--marron);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-row.full { grid-template-columns: 1fr; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.form-label {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-mid);
}

.form-input,
.form-select,
.form-textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.65rem 0.9rem;
  border: 2px solid var(--marron);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--text-dark);
  transition: border-color var(--transition), background var(--transition);
  width: 100%;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--coral);
  background: var(--white);
}
.form-textarea { resize: vertical; min-height: 90px; }

/* ============================================
   RESUMEN DE PEDIDO
   ============================================ */
.order-summary {
  background: var(--marron);
  color: var(--cream);
  border: 2px solid var(--marron-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 88px;
}

.order-summary-header {
  background: var(--marron-dark);
  padding: 1.25rem 1.5rem;
}
.order-summary-header h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: var(--lima);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

.order-summary-body { padding: 1.25rem 1.5rem; }

.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed rgba(255,255,255,0.15);
  font-size: 1.05rem;
}
.summary-line:last-child { border: none; }
.summary-line-name { color: #ffffff; flex: 1; font-weight: 500; }
.summary-line-price { color: var(--lima); font-weight: 700; white-space: nowrap; font-size: 1.1rem; }

.summary-total {
  border-top: 2px solid var(--lima);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.summary-total-label { font-family: var(--font-head); font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; color: var(--cream); }
.summary-total-val { font-family: var(--font-display); font-size: 2.2rem; color: var(--lima); text-shadow: 2px 2px 0 rgba(0,0,0,0.4); }

.order-summary-footer { padding: 1.25rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); }

/* ============================================
   MODAL DE COMBO
   ============================================ */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,10,10,0.65);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-bg.open { display: flex; }

.modal {
  background: var(--cream);
  border: 3px solid var(--marron);
  border-radius: var(--radius-xl);
  max-width: 680px;
  width: 100%;
  /* FIX-MODAL-MOBILE-VH: 90vh en mobile se calcula sobre el viewport "completo"
     (como si la barra de direcciones del navegador estuviera oculta), no sobre
     el espacio realmente visible. Con la barra visible, ese 90% termina siendo
     más alto que la pantalla real -> el modal se corre para abajo y el footer
     ("Agregar al carrito") queda fuera de la vista. dvh usa el viewport visible
     real; se deja vh primero como fallback para navegadores viejos sin soporte. */
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-header {
  background: var(--coral);
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--marron-dark);
  gap: 0.75rem;
}
.modal-header h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--lima);
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 var(--marron-dark);
  /* FIX-MODAL-MOBILE-OVERFLOW: sin esto, un nombre de combo largo no se achica
     dentro del flex header (min-width:auto por defecto en flex items) y puede
     empujar el ancho del modal en pantallas angostas. */
  min-width: 0;
  overflow-wrap: break-word;
}

.modal-body {
  padding: 1.75rem;
  overflow-y: auto;
  flex: 1;
}

.modal-section {
  margin-bottom: 2rem;
}
.modal-section-title {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modal-section-title span {
  background: var(--coral);
  color: var(--white);
  font-size: 0.8rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-sm);
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}
.slot-item {
  border: 2px solid var(--marron);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
}
.slot-item select {
  font-family: var(--font-body);
  font-size: 0.8rem;
  border: 1.5px solid var(--marron);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.4rem;
  background: var(--cream);
  color: var(--text-dark);
  width: 100%;
}
.slot-num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--coral);
  min-width: 22px;
  text-align: center;
}

.modal-footer {
  padding: 1.25rem 1.75rem;
  background: var(--white);
  border-top: 2px solid var(--marron);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--marron-dark);
  color: var(--cream);
  padding: 3rem 1.5rem 1.5rem;
  border-top: 3px solid var(--marron);
}

.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 2.5rem;
  letter-spacing: 3px;
  color: var(--lima);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.4);
  transform: rotate(-2deg);
  display: inline-block;
  margin-bottom: 0.75rem;
}

.footer-tagline {
  font-size: 0.9rem;
  color: rgba(245,239,224,0.65);
  line-height: 1.5;
}

.footer-col h4 {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lima);
  margin-bottom: 1rem;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul a {
  font-size: 0.9rem;
  color: rgba(245,239,224,0.7);
  transition: color var(--transition);
}
.footer-col ul a:hover { color: var(--lima); }

.footer-contact p {
  font-size: 0.9rem;
  color: rgba(245,239,224,0.7);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom p { font-size: 0.8rem; color: rgba(245,239,224,0.4); }

/* ============================================
   TOAST / NOTIFICACIONES
   ============================================ */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  background: var(--marron);
  color: var(--cream);
  border: 2px solid var(--marron-dark);
  border-left: 5px solid var(--lima);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.25rem;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-md);
  max-width: 320px;
  animation: toastIn 0.25s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.toast.error { border-left-color: var(--coral); }

/* FIX-BUBBLE-CART: animaciones de llegada de la burbuja */
@keyframes bubPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.7); }
  65%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}
@keyframes bubShake {
  0%,100% { transform: scale(1) rotate(0deg); }
  20%     { transform: scale(1.25) rotate(-12deg); }
  40%     { transform: scale(1.25) rotate(12deg); }
  60%     { transform: scale(1.1) rotate(-5deg); }
  80%     { transform: scale(1.05) rotate(2deg); }
}
.bub-pop   { animation: bubPop   0.45s cubic-bezier(0.34,1.56,0.64,1); }
.bub-shake { animation: bubShake 0.5s  ease-out; }

/* FIX-SEO-FAQ: accordion nativo <details>/<summary>, sin triángulo del navegador */
#faq summary::-webkit-details-marker { display: none; }
#faq summary { list-style: none; }
#faq summary::marker { content: ''; }
#faq details[open] .faq-icon { transform: rotate(45deg); }
#faq details:hover { border-color: var(--coral); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================
   UTILITIES
   ============================================ */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  /* FIX-NAV-MOBILE-3PLUS: en mobile mostramos Inicio/Menú/Combos inline + un botón "+"
     que despliega Envíos/FAQ/Contacto en dropdown. Se eliminó la hamburguesa que
     colapsaba todo el nav. */
  .navbar-inner { padding: 0 0.85rem; gap: 0.35rem; }
  .navbar-logo .logo-text { font-size: 1.5rem; letter-spacing: 1px; }

  .navbar-nav { gap: 0.15rem; flex-wrap: nowrap; }
  .navbar-nav a { font-size: 0.85rem; padding: 0.35rem 0.55rem; letter-spacing: 0.3px; }
  .navbar-nav .nav-secondary { display: none; }
  .nav-more-wrap { display: block; }

  /* Carrito compacto en mobile — solo el ícono + badge, sin la palabra "Carrito" */
  .navbar-cart { padding: 0.4rem 0.7rem; font-size: 0; gap: 0.4rem; }
  .navbar-cart .cart-badge { font-size: 0.7rem; }

  .hero-title { font-size: 4rem; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .combo-footer { flex-direction: column; }
  .productos-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (max-width: 400px) {
  /* Ajuste extra fino para pantallas muy angostas (iPhone SE, Android chico) */
  .navbar-inner { padding: 0 0.6rem; }
  .navbar-logo .logo-text { font-size: 1.3rem; }
  .navbar-nav a { font-size: 0.78rem; padding: 0.3rem 0.4rem; }
}

@media (max-width: 480px) {
  .hero { padding: 3rem 1rem 2.5rem; }
  .features-grid { grid-template-columns: 1fr; }
  .tab-btn { font-size: 0.8rem; padding: 0.45rem 1rem; }

  /* FIX-MODAL-MOBILE-OVERFLOW: paddings más chicos para aprovechar el ancho
     angosto, y el footer en columna para que los botones nunca se aprieten
     ni se corten. El fix principal (dvh) ya está en la regla base .modal. */
  .modal-bg { padding: 0.5rem; }
  .modal { max-height: 95vh; max-height: 95dvh; }
  .modal-header { padding: 0.9rem 1.1rem; }
  .modal-header h2 { font-size: 1.4rem; letter-spacing: 1px; }
  .modal-body { padding: 1.1rem; }
  .modal-footer { padding: 0.9rem 1.1rem; flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; }
}

/* ============================================
   REDES SOCIALES - Footer
   ============================================ */
.red-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,0.15);
  color: rgba(245,239,224,0.7);
  background: rgba(255,255,255,0.05);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.red-social:hover {
  background: var(--lima);
  color: var(--marron-dark);
  border-color: var(--lima);
  transform: translateY(-3px);
}
.red-social--wa:hover {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}

/* ============================================
   WHATSAPP FLOTANTE
   ============================================ */
.wa-flotante {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 999;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 3px solid #fff;
}
.wa-flotante:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.wa-flotante svg {
  color: #fff;
  flex-shrink: 0;
}
/* Pulso animado */
.wa-flotante::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid #25D366;
  animation: waPulso 2s ease-out infinite;
  opacity: 0;
}
@keyframes waPulso {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ============================================
   BOTONES COMPARTIR - Combos
   ============================================ */
.btn-compartir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 2px solid;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  text-decoration: none;
}
.btn-compartir:hover { transform: translateY(-2px); opacity: 0.9; }

.btn-compartir-wa {
  background: #25D366;
  color: #fff;
  border-color: #1da851;
}
.btn-compartir-ig {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
  border-color: #bc1888;
}
.btn-compartir-link {
  background: var(--cream);
  color: var(--marron);
  border-color: var(--marron);
}

/* ============================================
   BOTONES REDES SOCIALES - Sección home
   ============================================ */
.btn-red-social {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
  backdrop-filter: blur(4px);
}
.btn-red-social:hover {
  background: var(--lima);
  color: var(--marron-dark);
  border-color: var(--lima);
  transform: translateY(-3px);
}
.btn-red-social--wa:hover {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}


/* ============================================
   COMBO MODAL — Selector de cantidad por producto
   FIX-COMBO-FLEXIBLE: nuevo diseño de selección
   ============================================ */
.modal-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.modal-counter {
  font-size: 0.85rem;
  color: var(--text-mid);
  background: var(--cream);
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  border: 1px solid var(--marron-light);
  transition: background 0.2s, color 0.2s;
}
.modal-counter.counter-ok {
  background: #2d7a2d;
  color: #fff;
  border-color: #2d7a2d;
}

/* Barra de progreso delgada debajo del header de cada sección */
.seccion-progress-wrap {
  height: 4px;
  background: rgba(139,26,26,0.12);
  border-radius: 2px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.seccion-progress-bar {
  height: 100%;
  background: var(--coral);
  border-radius: 2px;
  transition: width 0.25s ease, background 0.25s;
}
.seccion-progress-bar.bar-ok { background: #2d7a2d; }

/* ─── Barra de resumen global (sticky top del modal body) ─── */
.combo-resumen-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: var(--marron);
  border-bottom: 2px solid rgba(255,255,255,0.1);
  position: sticky;
  top: 0;
  z-index: 5;
}

.combo-cat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 6px 14px;
  min-width: 70px;
  text-align: center;
  transition: background 0.25s, border-color 0.25s;
}
.combo-cat-pill.pill-ok {
  background: rgba(45,122,45,0.3);
  border-color: #4caf50;
}

.pill-nombre {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(245,239,224,0.75);
}
.pill-prog {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
}
.combo-cat-pill.pill-ok .pill-prog { color: #81c784; }

.slot-cantidad-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.slot-cantidad-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--cream);
  border-radius: var(--radius-sm);
  border: 1px solid var(--marron-light);
}

.slot-prod-nombre {
  font-size: 0.9rem;
  color: var(--text-dark);
  flex: 1;
  /* FIX-MODAL-MOBILE-OVERFLOW: mismo fix que en .modal-header h2 — sin min-width:0
     un nombre de producto largo no se achica dentro de la fila flex y puede
     empujar el ancho de la fila (y visualmente cortar contenido) en mobile. */
  min-width: 0;
  overflow-wrap: break-word;
}

.slot-cantidad-ctrl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slot-btn-menos,
.slot-btn-mas {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--marron);
  background: var(--white);
  color: var(--marron);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.slot-btn-mas:hover  { background: var(--marron); color: var(--white); }
.slot-btn-menos:hover { background: var(--coral);  color: var(--white); border-color: var(--coral); }

.slot-cant-val {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--marron);
}


/* ============================================
   CHECKOUT — Toggle retiro/envío y calculadora
   FIX-CHECKOUT-ENVIO
   ============================================ */
.entrega-toggle-group {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.entrega-toggle {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid var(--marron-light);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-mid);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
}

.entrega-toggle:hover {
  border-color: var(--marron);
  color: var(--marron);
}

.entrega-toggle.active {
  background: var(--marron);
  border-color: var(--marron);
  color: var(--cream);
}

.envio-calc-box {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--cream);
  border-radius: var(--radius-md);
  border: 1px dashed var(--marron-light);
}

.envio-result-ok {
  padding: 0.6rem 0.9rem;
  background: #e8f5e9;
  border-radius: var(--radius-sm);
  color: #2d7a2d;
  font-size: 0.9rem;
}

.envio-result-fuera {
  padding: 0.6rem 0.9rem;
  background: #fff3e0;
  border-radius: var(--radius-sm);
  color: #e65100;
  font-size: 0.9rem;
}

.retiro-info-box {
  padding: 1.25rem;
  background: var(--cream);
  border-radius: var(--radius-md);
  border: 2px solid var(--lima);
  margin-bottom: 1rem;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}