/* ─── VARIABLES GLOBALES ─── */
:root {
  --brand-pink: #E4007C; 
  --brand-pink-hover: #C2006A;
  --brand-yellow: #FFD100; 
  --brand-yellow-hover: #F2C600;
  --brand-green: #00A859; 
  
  --bg-white: #FFFFFF;
  --bg-offwhite: #F9FAFB;
  --text-dark: #1F2937;
  --text-gray: #4B5563;
  --border-color: #E5E7EB;
  --card-shadow: 0 8px 24px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 12px 32px rgba(228, 0, 124, 0.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg-white);
  color: var(--text-dark);
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-offwhite); }
::-webkit-scrollbar-thumb { background: var(--brand-pink); border-radius: 3px; }

/* ─── NAVBAR ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--border-color);
  transition: all 0.4s ease;
}
nav.scrolled {
  background: rgba(255, 255, 255, 0.98);
  padding: 0.75rem 2.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: var(--text-dark);
  text-decoration: none;
}
.nav-logo span { color: var(--brand-pink); }
.nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; }
.nav-links a {
  color: var(--text-gray); text-decoration: none;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; transition: color 0.3s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--brand-pink);
  transform: scaleX(0); transition: transform 0.3s ease; transform-origin: left;
}
.nav-links a:hover { color: var(--text-dark); }
.nav-links a:hover::after { transform: scaleX(1); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text-dark); transition: all 0.3s; }

/* ─── HERO ─── */
.hero {
  min-height: 100vh; position: relative; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('Images/galeria-mesa.jpg') center/cover no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 100%);
}
.hero-content {
  position: relative; z-index: 2; text-align: center; padding: 0 1.5rem; max-width: 800px;
  animation: heroFadeUp 1.2s cubic-bezier(0.16,1,0.3,1) forwards; opacity: 0; transform: translateY(40px);
}
@keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } }
.hero-tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--brand-green); color: var(--bg-white);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; 
  padding: 0.4rem 1.2rem; border-radius: 100px; margin-bottom: 1.8rem;
}
.hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3.5rem, 9vw, 8rem); line-height: 0.92; letter-spacing: 0.01em; margin-bottom: 1.5rem; color: var(--text-dark); }
.hero h1 em { font-style: italic; font-family: 'Fraunces', serif; color: var(--brand-pink); font-size: 0.9em; }
.hero-sub { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--text-gray); max-width: 520px; margin: 0 auto 2.5rem; font-weight: 400; line-height: 1.6; }
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem; background: var(--brand-pink); color: var(--bg-white);
  padding: 0.9rem 2.2rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; border: none; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 8px 20px rgba(228,0,124,0.25);
}
.btn-primary:hover { background: var(--brand-pink-hover); transform: translateY(-3px); box-shadow: 0 12px 25px rgba(228,0,124,0.35); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem; background: var(--brand-yellow); color: var(--text-dark);
  padding: 0.9rem 2.2rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; border: none;
  cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 10px rgba(255,209,0,0.2);
}
.btn-secondary:hover { background: var(--brand-yellow-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,209,0,0.4); }
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--text-gray); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; animation: scrollBob 2s ease-in-out infinite;
}
@keyframes scrollBob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }
.hero-scroll-line { width: 2px; height: 40px; background: linear-gradient(to bottom, var(--brand-green), transparent); }

/* ─── SECTION COMMONS ─── */
section { padding: 7rem 2.5rem; }
.section-label { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--brand-green); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 1rem; }
.section-label::before { content: ''; display: block; width: 28px; height: 2px; background: var(--brand-green); }
.section-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: 0.95; letter-spacing: 0.02em; margin-bottom: 1.2rem; color: var(--text-dark); }
.section-title em { font-family: 'Fraunces', serif; font-style: italic; color: var(--brand-pink); }
.section-sub { color: var(--text-gray); font-size: 1.05rem; max-width: 480px; line-height: 1.7; font-weight: 400; }
.container { max-width: 1200px; margin: 0 auto; }
.bg-offwhite { background: var(--bg-offwhite); }

/* ─── ESPECIALIDADES ─── */
.esp-header { text-align: center; margin-bottom: 4rem; display: flex; flex-direction: column; align-items: center;}
.esp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.esp-card { background: var(--bg-white); border-radius: 16px; overflow: hidden; border: 1px solid var(--border-color); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); cursor: pointer; box-shadow: var(--card-shadow); }
.esp-card:hover { transform: translateY(-8px); border-color: var(--brand-pink); box-shadow: var(--card-shadow-hover); }
.esp-img-wrap { width: 100%; aspect-ratio: 4/3; overflow: hidden; position: relative; }
.esp-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.esp-card:hover .esp-img-wrap img { transform: scale(1.08); }
.esp-body { padding: 1.5rem; border-top: 4px solid var(--brand-yellow); }
.esp-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--text-dark); }
.esp-desc { color: var(--text-gray); font-size: 0.9rem; line-height: 1.5; }

/* ─── POR QUÉ ─── */
.porque-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.porque-img { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--card-shadow); border: 4px solid var(--brand-yellow); }
.porque-img img { width: 100%; height: 100%; object-fit: cover; }
.porque-img-badge { position: absolute; bottom: 2rem; left: -1rem; z-index: 2; background: var(--brand-pink); color: white; border-radius: 12px; padding: 1.2rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 10px 20px rgba(228,0,124,0.3); }
.badge-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; line-height: 1; }
.badge-text { font-size: 0.85rem; line-height: 1.4; font-weight: 600; }
.porque-list { list-style: none; margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.porque-item { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.25rem; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 12px; transition: all 0.3s; }
.porque-item:hover { border-color: var(--brand-green); box-shadow: var(--card-shadow); transform: translateX(4px); }
.porque-icon { width: 46px; height: 46px; border-radius: 10px; background: rgba(0,168,89,0.1); color: var(--brand-green); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.porque-item-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.3rem; color: var(--text-dark); }
.porque-item-sub { color: var(--text-gray); font-size: 0.85rem; line-height: 1.5; }

/* ─── GALERÍA ─── */
.galeria-header { text-align: center; margin-bottom: 3.5rem; display: flex; flex-direction: column; align-items: center; }
.galeria-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; gap: 1rem; }
.gal-item { overflow: hidden; border-radius: 16px; position: relative; cursor: pointer; background: var(--border-color); border: 2px solid transparent; transition: border 0.3s;}
.gal-item:hover { border-color: var(--brand-pink); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); display: block; }
.gal-item:hover img { transform: scale(1.06); }
.gal-1 { grid-column: span 5; aspect-ratio: 4/5; }
.gal-2 { grid-column: span 7; aspect-ratio: 16/9; }
.gal-3 { grid-column: span 4; aspect-ratio: 3/4; }
.gal-4 { grid-column: span 4; aspect-ratio: 3/4; }
.gal-5 { grid-column: span 4; aspect-ratio: 3/4; }
.gal-6 { grid-column: span 6; aspect-ratio: 1/1; }
.gal-7 { grid-column: span 6; aspect-ratio: 1/1; }

/* En celular las 7 fotos van una debajo de otra, no comprimidas */
@media (max-width: 768px) {
  .gal-1, .gal-2, .gal-3, .gal-4, .gal-5, .gal-6, .gal-7 {
    grid-column: span 12;
    aspect-ratio: 4/3;
  }
}

/* Foco visible al navegar con teclado */
.gal-item:focus-visible { outline: 3px solid var(--brand-pink); outline-offset: 3px; }

/* ─── VISOR DE FOTOS ───
   La galería ya se veía "clickeable" (cursor de mano, zoom al pasar
   el mouse) pero no pasaba nada al hacer clic. Ahora abre la foto
   completa. */
.visor {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 2rem;
  cursor: zoom-out;
}
.visor.abierto { display: flex; animation: visor-aparece 0.25s ease; }
@keyframes visor-aparece { from { opacity: 0; } to { opacity: 1; } }

.visor img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}
.visor-cerrar {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}
.visor-cerrar:hover { background: rgba(255, 255, 255, 0.28); }
@media (prefers-reduced-motion: reduce) {
  .visor.abierto { animation: none; }
  .gal-item img, .gal-item:hover img { transition: none; transform: none; }
}

/* ─── MENÚ ─── */
.menu-header { text-align: center; margin-bottom: 4rem; display: flex; flex-direction: column; align-items: center;}
.menu-tabs { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
.menu-tab { padding: 0.7rem 1.8rem; border-radius: 100px; background: var(--bg-white); color: var(--text-gray); border: 1px solid var(--border-color); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 0.3s; font-family: 'DM Sans', sans-serif; }
.menu-tab.active, .menu-tab:hover { background: var(--brand-pink); color: var(--bg-white); border-color: var(--brand-pink); box-shadow: 0 4px 15px rgba(228,0,124,0.3); }
.menu-panel { display: none; }
.menu-panel.active { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; animation: fadeMenu 0.4s ease forwards; }
@keyframes fadeMenu { from {opacity: 0; transform: translateY(10px);} to {opacity: 1; transform: translateY(0);} }
.menu-item { display: flex; gap: 1.2rem; align-items: center; padding: 1.5rem; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 16px; transition: all 0.3s; box-shadow: var(--card-shadow); border-left: 4px solid var(--brand-green); cursor:pointer;}
.menu-item:hover { border-color: var(--brand-yellow); box-shadow: var(--card-shadow-hover); transform: translateY(-3px);}
.menu-item-img { width: 75px; height: 75px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.menu-item-info { flex: 1; min-width: 0; }
.menu-item-name { font-weight: 700; font-size: 1rem; color: var(--text-dark); margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.badge { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 4px; font-weight: 700; }
.badge-popular { background: var(--brand-yellow); color: var(--text-dark); }
.badge-fav { background: rgba(228,0,124,0.1); color: var(--brand-pink); }
.badge-new { background: rgba(0,168,89,0.1); color: var(--brand-green); }
.menu-item-desc { color: var(--text-gray); font-size: 0.85rem; line-height: 1.4; }

/* ─── CONTACTO ─── */
.contacto-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: start; }
.contact-info-block { display: flex; flex-direction: column; gap: 2.5rem; }
.contact-item { display: flex; gap: 1.2rem; align-items: flex-start; }
.contact-icon { width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0; background: rgba(228,0,124,0.1); color: var(--brand-pink); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.contact-item-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.3rem; color: var(--text-dark); }
.contact-item-text { color: var(--text-gray); font-size: 0.9rem; line-height: 1.6; }

.map-placeholder { width: 100%; height: 100%; min-height: 400px; border-radius: 20px; border: 2px solid var(--brand-yellow); overflow: hidden; position: relative; box-shadow: var(--card-shadow); }
/* El mapa se posiciona en absoluto para LLENAR la caja completa.
   Antes usaba height:100%, pero ese porcentaje no se resuelve contra
   el min-height del contenedor, así que el iframe colapsaba a una
   tira de ~150px y, al quedar tan aplastado, tampoco se dejaba
   arrastrar. Con inset:0 llena los 400px reales y vuelve a moverse. */
.map-inner { position: absolute; inset: 0; border: none; }
.map-inner iframe { width: 100%; height: 100%; border: 0; display: block; }

.social-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.social-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border-radius: 8px; background: var(--bg-white); border: 1px solid var(--border-color); color: var(--text-dark); text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: all 0.3s; fill: var(--text-dark); }
.social-btn svg { width: 18px; height: 18px; }
.social-btn:hover { background: var(--brand-pink); color: white; fill: white; border-color: var(--brand-pink); transform: translateY(-2px);}

/* ─── FOOTER ─── */
footer { background: var(--text-dark); color: white; padding: 4rem 2.5rem 2rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-brand .brand { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; margin-bottom: 1rem; color: white;}
.footer-brand .brand span { color: var(--brand-pink); }
.footer-brand p { color: #9CA3AF; font-size: 0.9rem; line-height: 1.7; max-width: 300px; }
.footer-col h5 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-yellow); margin-bottom: 1.5rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
.footer-col ul li a { color: #9CA3AF; text-decoration: none; font-size: 0.9rem; transition: color 0.3s; font-weight: 500;}
.footer-col ul li a:hover { color: var(--brand-green); }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { color: #9CA3AF; font-size: 0.85rem; }
.footer-bottom span { color: var(--brand-pink); }

/* ─── WHATSAPP FLOAT ─── */
.wa-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 200; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 25px rgba(37,211,102,0.3); text-decoration: none; transition: all 0.3s; animation: waPulse 3s infinite; }
@keyframes waPulse { 0%,100%{box-shadow:0 8px 25px rgba(37,211,102,0.3)} 50%{box-shadow:0 8px 35px rgba(37,211,102,0.5)} }
.wa-float:hover { transform: scale(1.1) translateY(-4px); box-shadow: 0 12px 30px rgba(37,211,102,0.4); }
.wa-float svg { width: 32px; height: 32px; fill: white; }

/* ─── MOBILE MENU ─── */
.mobile-menu { display: none; position: fixed; inset: 0; z-index: 99; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; }
.mobile-menu.open { display: flex; }
.mobile-menu a { color: var(--text-dark); text-decoration: none; font-family: 'Bebas Neue', sans-serif; font-size: 2.8rem; letter-spacing: 0.05em; transition: color 0.3s; }
.mobile-menu a:hover { color: var(--brand-pink); }
.mobile-close { position: absolute; top: 1.5rem; right: 2rem; font-size: 2rem; cursor: pointer; color: var(--text-dark); background: none; border: none; font-family: sans-serif;}

.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ─── MODAL CARRITO & ANIMACIONES INYECTADAS ─── */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000;
  align-items: center; justify-content: center; backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 0.3s ease; padding: 1rem;
}
.modal-overlay.active { display: flex; opacity: 1; }
.modal-content {
  background: var(--bg-white); width: 100%; max-width: 480px; border-radius: 16px;
  overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.2); position: relative;
  transform: translateY(20px); transition: transform 0.3s ease;
  display: flex; flex-direction: column; max-height: 90vh;
}
@keyframes modalBounceIn {
  0% { opacity: 0; transform: scale(0.85) translateY(40px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-overlay.active .modal-content {
  animation: modalBounceIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,0.9);
  border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font-size: 1.2rem; display: flex; align-items: center; justify-content: center; z-index: 10;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: all 0.2s;
}
.modal-close:hover { background: var(--brand-pink); color: white; }

#modal-body { overflow-y: auto; padding: 0; }
.modal-header-img { width: 100%; height: 220px; object-fit: cover; }
.modal-info { padding: 1.5rem; }
.modal-title { font-family: 'Fraunces', serif; font-size: 1.6rem; color: var(--text-dark); margin-bottom: 0.5rem; }

.grupo-modificador { margin-bottom: 1.8rem; }
.grupo-titulo { font-weight: 700; color: var(--text-dark); margin-bottom: 0.8rem; display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem;}
.req-badge { background: var(--brand-pink); color: white; font-size: 0.65rem; padding: 0.25rem 0.6rem; border-radius: 4px; letter-spacing: 0.05em; text-transform: uppercase;}

.opcion-label {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem; border: 1px solid var(--border-color); border-radius: 8px;
  margin-bottom: 0.5rem; cursor: pointer; transition: all 0.2s;
}
.opcion-label:hover { border-color: var(--brand-yellow); background: var(--bg-offwhite); }
.opcion-input { margin-right: 1rem; transform: scale(1.3); accent-color: var(--brand-green); cursor: pointer; }
.opcion-nombre { flex: 1; font-size: 0.95rem; color: var(--text-dark); }
.opcion-precio { color: var(--text-gray); font-size: 0.9rem; font-weight: 600;}

.modal-footer { padding: 1.5rem; border-top: 1px solid var(--border-color); background: var(--bg-offwhite); }

/* Elementos inyectados del carrito */
.secreto-amigable {
  text-align: center; max-width: 500px; margin: 4rem auto 2.5rem; padding: 1rem;
  background: var(--bg-offwhite); border-radius: 12px; cursor: pointer;
  color: var(--brand-pink); border: 2px dashed var(--brand-pink);
  transition: all 0.3s; box-shadow: 0 4px 15px rgba(228,0,124,0.1);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.secreto-amigable:active { transform: scale(0.98); }
.texto-secreto { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.4s ease; font-weight: 500; font-size: 0.95rem; color: var(--text-gray); }
.secreto-amigable.open .texto-secreto { max-height: 100px; opacity: 1; margin-top: 0.8rem; }
#btn-vaciar-carrito { transition: all 0.3s; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#btn-vaciar-carrito:hover { background-color: #d9363e !important; transform: translateY(-3px); box-shadow: 0 12px 25px rgba(255, 77, 79, 0.4) !important; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  section { padding: 5rem 1.5rem; }
  .porque-inner { grid-template-columns: 1fr; gap: 3rem; }
  .contacto-inner { grid-template-columns: 1fr; gap: 3rem; }
  .map-placeholder { min-height: 300px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem;}
}
@media (max-width: 650px) {
  nav { padding: 1rem 1.25rem; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .footer-inner { grid-template-columns: 1fr; text-align: center;}
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .hero h1 { font-size: 3.5rem; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center;}
}
/* ============================================================
   OPCIONES DEL MODAL DE PRODUCTO
   Se agregó cuando el modal pasó a construirse desde el catálogo
   de la base de datos en lugar de tener el HTML escrito a mano.
   ============================================================ */

/* Contador "2 de 3" en los grupos con límite de selección.
   Le dice al cliente cuántos guisados le quedan por elegir. */
.grupo-ayuda {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-gray);
  background: var(--bg-offwhite);
  border: 1px solid var(--border-color);
  border-radius: 99px;
  padding: 2px 9px;
  margin-left: 0.4rem;
  white-space: nowrap;
}

/* Opción desactivada porque ya se alcanzó el máximo del grupo */
.opcion-label input.opcion-input:disabled ~ .opcion-nombre {
  color: var(--text-gray);
}

/* Aviso de grupo obligatorio sin llenar */
.grupo-error {
  font-weight: 600;
}

/* Chiles de picante, como en el menú impreso.
   El nivel viene de opciones_modificadores.nivel_picante */
.opcion-picante {
  margin-left: 0.45rem;
  font-size: 0.78rem;
  letter-spacing: -0.08em;
  white-space: nowrap;
  vertical-align: middle;
}

/* ============================================================
   AJUSTES RESPONSIVE
   ============================================================
   Revisión de todas las pantallas. Lo que se corrige aquí:
   celular chico (hasta 480), celular grande y tablet (hasta 900),
   y las zonas donde el contenido se desbordaba. */

/* ─── Celular ─── */
@media (max-width: 640px) {
  section { padding: 4rem 1.1rem; }

  /* El menú de pestañas se desbordaba: ahora se desliza de lado */
  .menu-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tab { flex-shrink: 0; padding: 0.6rem 1.2rem; font-size: 0.78rem; }

  /* Tarjetas del carrito: el precio ya no aprieta al nombre */
  .cart-item { flex-direction: column; align-items: flex-start; gap: 0.8rem; padding: 1.1rem; }
  .cart-item-price { align-self: flex-end; }
  .cart-container { margin-top: 6rem; padding: 0 1rem; }
  .cart-summary { padding: 1.3rem; }

  /* Recoger / domicilio: uno debajo del otro para que quepa el texto */
  .tipo-entrega { grid-template-columns: 1fr; }
  .form-fila { grid-template-columns: 1fr; gap: 0; }

  /* El modal de producto ocupa casi toda la pantalla */
  .modal-content { max-height: 92vh; border-radius: 16px 16px 0 0; }
  .modal-footer { padding: 0.9rem; }

  /* Que los campos no provoquen zoom automático en iPhone:
     Safari hace zoom si la letra mide menos de 16px */
  input, select, textarea, .form-control { font-size: 16px !important; }
}

/* ─── Celular muy chico ─── */
@media (max-width: 380px) {
  .oe-texto strong { font-size: 0.9rem; }
  .oe-texto small { font-size: 0.72rem; }
  /* Los tamaños de encabezado y de botón para celular ya no se
     definen aquí: los fija el bloque "ESCALA UNIFICADA EN CELULAR"
     al final del archivo. Tenerlos en dos lugares hacía que este
     bloque, por venir después, pisara al otro sin que se notara. */
}

/* ─── Tablet ─── */
@media (min-width: 641px) and (max-width: 1024px) {
  section { padding: 5rem 1.8rem; }
  .porque-inner { gap: 3rem; }
}

/* ─── Nada debe desbordar horizontalmente ─── */
img, video, iframe { max-width: 100%; height: auto; }
.container, main, section { max-width: 100%; }

/* ─── PREGUNTAS FRECUENTES ─── */
.faq-header { text-align: center; margin-bottom: 3rem; display: flex; flex-direction: column; align-items: center; }
.faq-lista { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.8rem; }
.faq-item {
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: 12px; overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s;
}
.faq-item[open] { border-color: var(--brand-pink); box-shadow: var(--card-shadow); }
.faq-item summary {
  padding: 1.15rem 1.4rem; cursor: pointer; font-weight: 700; font-size: 1rem;
  color: var(--text-dark); list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.5rem; font-weight: 400; color: var(--brand-pink);
  line-height: 1; flex-shrink: 0; transition: transform 0.25s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--brand-pink); }
.faq-item summary:focus-visible { outline: 2px solid var(--brand-pink); outline-offset: -2px; }
.faq-cuerpo { padding: 0 1.4rem 1.3rem; }
.faq-cuerpo p { color: var(--text-gray); line-height: 1.65; margin-bottom: 0.8rem; }
.faq-cuerpo p:last-child { margin-bottom: 0; }
.faq-cuerpo a { color: var(--brand-pink); }
.faq-tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0.8rem 0; }
.faq-tabla th, .faq-tabla td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border-color); }
.faq-tabla th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-gray); }
.faq-tabla td { color: var(--text-gray); font-variant-numeric: tabular-nums; }

/* ─── BARRA FIJA EN CELULAR ─── */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: none; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-color);
  transform: translateY(110%); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.barra-movil.visible { transform: translateY(0); }
.bm-principal {
  flex: 1; text-align: center; background: var(--brand-pink); color: #fff;
  padding: 0.95rem 1rem; border-radius: 10px; text-decoration: none;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
}
.bm-compartir {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px;
  border: 1px solid var(--border-color); background: var(--bg-white);
  color: var(--text-dark); cursor: pointer; display: grid; place-items: center;
  transition: all 0.2s; position: relative;
}
.bm-compartir:hover { border-color: var(--brand-pink); color: var(--brand-pink); }
.bm-compartir.copiado::after {
  content: '¡Enlace copiado!'; position: absolute; bottom: calc(100% + 8px); left: 0;
  white-space: nowrap; background: var(--text-dark); color: #fff;
  font-size: 0.75rem; padding: 0.4rem 0.7rem; border-radius: 6px;
}

/* ─── La barra cambia según haya o no carrito ───
   Vacío  → [compartir] [Ver menú y pedir]
   Con algo → [vaciar]   [Pagar mi orden · $XXX]
   Se cambia con un atributo en la barra, no escondiendo cosas a
   mano desde el JS, para que el estado viva en un solo lugar. */
.bm-borrar {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px;
  border: 1px solid var(--border-color); background: var(--bg-white);
  color: var(--text-gray); cursor: pointer; display: grid; place-items: center;
  transition: all 0.2s;
}
.bm-borrar:hover { border-color: #DC2626; color: #DC2626; background: #FEF2F2; }
.bm-borrar svg { width: 19px; height: 19px; }

/* Por omisión (carrito vacío) se oculta el bote de basura */
.barra-movil .bm-borrar { display: none; }
.barra-movil[data-carrito="lleno"] .bm-compartir { display: none; }
.barra-movil[data-carrito="lleno"] .bm-borrar { display: grid; }
.barra-movil[data-carrito="lleno"] .bm-principal { background: var(--brand-green); }

.bm-principal .bm-monto { opacity: 0.85; font-weight: 600; }
@media (max-width: 768px) {
  .barra-movil { display: flex; }
  /* Que la barra no tape el final de la página */
  footer { padding-bottom: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .barra-movil { transition: none; }
}

/* ============================================================
   ESCALA UNIFICADA EN CELULAR
   ============================================================
   Va al FINAL del archivo a propósito.

   Antes, en una sola pantalla de 375px convivían cuatro tamaños
   de letra de botón (12.48, 12.8, 13.6 y 15.2px), cinco alturas
   (37, 39, 43, 46 y 50px) y tres radios distintos. Cada
   componente se había afinado por su cuenta y, juntos, se leían
   desalineados: es lo que hace que un sitio se sienta amateur.

   Aquí se normaliza a DOS escalas y nada más:
     · Acción principal → 13px de letra, 44px de alto
     · Chip o etiqueta  → 12.5px de letra, 36px de alto
   Los 44px son además el mínimo cómodo para el dedo.

   El ajuste BAJA lo que estaba grande de más (la barra fija
   estaba en 15.2px/50px); no agranda nada "para que resalte".

   Estar al final evita la colisión que ya ocurrió una vez: el
   bloque de 380px venía después y pisaba estos mismos valores. */
@media (max-width: 640px) {
  .btn-primary,
  .btn-secondary,
  .bm-principal {
    font-size: 13px;
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* El monto va como elemento flex aparte; sin gap explícito el
       espacio del HTML se colapsa y quedaría pegado al texto. */
    gap: 0.35rem;
  }

  .menu-tab,
  .social-btn {
    font-size: 12.5px;
    min-height: 36px;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
  }

  /* Los botones de ícono igualan la altura de la acción principal,
     para que la barra fija se lea como una sola pieza. */
  .bm-compartir,
  .bm-borrar { width: 44px; height: 44px; border-radius: 10px; }

  /* Encabezados: Bebas Neue es condensada y a 46px se sentía
     pesada en 375px de ancho. */
  .hero h1 { font-size: 2.5rem; }
  .section-title { font-size: 1.9rem; }
  .nav-logo { font-size: 1.6rem; }
}