/* ============================================================
   FERREROBURGER — sitio web público
   ============================================================ */
:root{
  --rojo:#E41D23; --rojo-osc:#B91419; --negro:#111111;
  --gris-oscuro:#555555; --gris-claro:#E5E5E5; --gris-fondo:#F7F7F8;
  --shadow:0 2px 10px rgba(0,0,0,.06); --shadow-lg:0 20px 50px rgba(0,0,0,.16);
  --radius:16px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
body{font-family:'Inter',sans-serif; color:var(--negro); background:#fff; -webkit-font-smoothing:antialiased; overflow-x:hidden; overscroll-behavior-y:none;}
body.no-scroll{overflow:hidden; position:fixed; width:100%;}
h1,h2,h3{font-family:'Poppins',sans-serif; font-weight:800;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; touch-action:manipulation;}
img{max-width:100%; display:block;}
input,select,textarea{font-size:16px;} /* nunca menos de 16px: evita el zoom automático de Safari en iPhone al tocar un campo */
.red{color:var(--rojo);}
.hidden{display:none !important;}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:200; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--gris-claro); transition:box-shadow .25s ease, background-color .25s ease;}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.08); background:rgba(255,255,255,.98);}
.header-inner{max-width:1180px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:9px;}
.brand-logo{width:38px; height:auto; transition:transform .3s ease;}
.brand:hover .brand-logo{transform:rotate(-8deg) scale(1.06);}
.brand-wm{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:19px; color:var(--negro);}
.main-nav{display:flex; gap:26px;}
.main-nav a{position:relative; font-weight:600; font-size:14.5px; color:var(--negro); padding:4px 1px; transition:color .2s;}
.main-nav a::after{content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--rojo); border-radius:2px; transition:right .25s cubic-bezier(.4,0,.2,1);}
.main-nav a:hover{color:var(--rojo);}
.main-nav a:hover::after{right:0;}
.header-actions{display:flex; align-items:center; gap:14px;}
.social-ic{color:var(--gris-oscuro); transition:color .15s, transform .15s;}
.social-ic:hover{color:var(--rojo); transform:translateY(-2px);}
.btn-cart{position:relative; color:var(--negro); display:flex; transition:transform .15s;}
.btn-cart:hover{transform:scale(1.08);}
.cart-badge{position:absolute; top:-7px; right:-8px; background:var(--rojo); color:#fff; font-size:10.5px; font-weight:800; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; animation:pop-badge .25s ease;}
@keyframes pop-badge{from{transform:scale(0);} to{transform:scale(1);}}
.btn-burger{display:none; color:var(--negro);}

/* ---------- carrito deslizante ---------- */
.cart-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:299; opacity:0; pointer-events:none; transition:opacity .2s;}
.cart-overlay.open{opacity:1; pointer-events:auto;}
.cart-drawer{position:fixed; top:0; right:0; bottom:0; width:100%; max-width:400px; background:#fff; z-index:300; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s ease; box-shadow:-10px 0 40px rgba(0,0,0,.2);}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-head{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--gris-claro);}
.cart-drawer-head h3{font-size:18px;}
.cart-close{font-size:18px; color:var(--gris-oscuro); width:32px; height:32px; border-radius:50%;}
.cart-close:hover{background:var(--gris-fondo);}
.tienda-estado-banner{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; padding:10px 20px; background:var(--gris-fondo); color:var(--gris-oscuro);}
.tienda-estado-banner.abierto{background:#EAFBF1; color:#166534;}
.tienda-estado-banner.cerrado{background:#FFF4E5; color:#92400E;}
.cart-drawer-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 20px;}
.cart-line{display:flex; flex-direction:column; gap:6px; padding:14px 0; border-bottom:1px solid var(--gris-fondo);}
.cart-line-top{display:flex; justify-content:space-between; gap:8px; font-weight:700; font-size:14px;}
.cart-line-extras{font-size:12px; color:var(--gris-oscuro);}
.cart-line-bottom{display:flex; justify-content:space-between; align-items:center;}
.cart-qty{display:flex; align-items:center; gap:10px; background:var(--gris-fondo); border-radius:8px; padding:3px 5px;}
.cart-qty button{width:24px; height:24px; background:#fff; border-radius:6px; font-weight:800; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;}
.cart-remove{font-size:12px; color:var(--rojo); font-weight:700;}
.cart-empty-msg{text-align:center; padding:60px 20px; color:var(--gris-oscuro);}
.cart-drawer-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--gris-claro);}
.cart-total-row{display:flex; justify-content:space-between; font-weight:800; font-size:17px; margin-bottom:12px;}
.btn-checkout{display:block; text-align:center; background:var(--rojo); color:#fff; font-weight:800; padding:14px; border-radius:12px; transition:background .15s;}
.btn-checkout:hover{background:var(--rojo-osc);}

/* ---------- hero ---------- */
/* Banner del inicio: a todo el ancho, con fotos (o video) de fondo,
   texto superpuesto y flechas — estilo Big Boy / New York Burger.
   Las fotos vienen directo del CRM (combos/destacados con imagen
   subida) — sin necesidad de subir nada aparte. */
.hero-banner{position:relative; overflow:hidden; background:var(--negro); color:#fff; min-height:560px; display:flex; align-items:flex-end;}
.hero-banner-track{position:absolute; inset:0; display:flex; height:100%; transition:transform .6s cubic-bezier(.4,0,.2,1); will-change:transform;}
.hero-banner-slide{position:relative; flex:0 0 100%; width:100%; height:100%;}
.hero-banner-slide img, .hero-banner-slide video{width:100%; height:100%; object-fit:cover; display:block;}
.hero-banner-fallback{background:radial-gradient(circle at 30% 20%, rgba(228,29,35,.35), transparent 60%), linear-gradient(135deg,#1a1a1a,#000);}
.hero-banner-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.88) 100%); z-index:1;}
.hero-banner-contenido{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:60px 24px 56px; width:100%;}
.hero-banner .hero-logo-mark{width:64px; margin-bottom:16px; animation:hero-rise .6s ease both;}
.hero-banner h1{font-size:38px; line-height:1.14; margin-bottom:14px; max-width:640px; text-shadow:0 2px 18px rgba(0,0,0,.4); animation:hero-rise .6s .08s ease both;}
.hero-banner .hero-sub{font-size:15.5px; color:#e8e8e8; max-width:520px; margin:0 0 26px; line-height:1.6; animation:hero-rise .6s .16s ease both;}
.hero-banner .hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; animation:hero-rise .6s .24s ease both;}
@keyframes hero-rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .hero-banner .hero-logo-mark, .hero-banner h1, .hero-banner .hero-sub, .hero-banner .hero-cta{animation:none;}
  .hero-banner-track{transition:none;}
}
.btn-hero-primary{display:inline-flex; align-items:center; gap:8px; background:var(--rojo); color:#fff; font-weight:800; padding:14px 24px; border-radius:12px; font-size:15px; transition:transform .15s, background .15s;}
.btn-hero-primary:hover{background:var(--rojo-osc); transform:translateY(-1px);}
.btn-hero-outline{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); backdrop-filter:blur(6px); color:#fff; font-weight:700; padding:13px 22px; border-radius:12px; border:1.5px solid rgba(255,255,255,.4); font-size:15px; transition:border-color .15s, background .15s;}
.btn-hero-outline:hover{border-color:#fff; background:rgba(255,255,255,.16);}
.hero-banner-arrow{position:absolute; top:44%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.35); backdrop-filter:blur(4px); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .15s;}
.hero-banner-arrow:hover{background:rgba(0,0,0,.6);}
.hero-banner-prev{left:18px;}
.hero-banner-next{right:18px;}
.hero-banner-dots{position:absolute; right:24px; bottom:22px; z-index:3; display:flex; gap:7px;}
.hero-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); border:none; padding:0; cursor:pointer; transition:background .2s, width .2s;}
.hero-dot.active{background:#fff; width:22px; border-radius:5px;}
@media (max-width:900px){
  .hero-banner{min-height:520px;}
  .hero-banner h1{font-size:30px;}
  .hero-banner-arrow{display:none;}
}
@media (max-width:560px){
  .hero-banner{min-height:480px;}
  .hero-banner-contenido{padding:40px 18px 44px;}
  .hero-banner h1{font-size:26px;}
  .hero-banner .hero-cta{justify-content:flex-start;}
}
.btn-full{width:100%; justify-content:center;}

/* ---------- secciones generales ---------- */
.section-inner{max-width:1180px; margin:0 auto; padding:56px 20px;}
.section-head{text-align:center; margin-bottom:28px;}
.eyebrow{display:inline-block; color:var(--rojo); font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px;}
.section-head h2{font-size:26px;}
.section-cta{text-align:center; margin-top:28px;}
.btn-outline-red{display:inline-flex; align-items:center; gap:8px; border:2px solid var(--negro); color:var(--negro); font-weight:700; padding:12px 22px; border-radius:12px; transition:.15s;}
.btn-outline-red:hover{border-color:var(--rojo); color:var(--rojo);}

/* ---------- tarjetas de producto/combo ---------- */
.destacados-grid, .menu-subgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px;}
.prod-card-web{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:transform .18s, box-shadow .18s;}
.prod-card-web:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.prod-card-web.agotado{opacity:.6;}
.prod-card-img-wrap{position:relative; width:100%; height:190px; overflow:hidden; background:var(--gris-fondo);}
.prod-card-img-wrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.prod-card-img-wrap .img-alterna{opacity:0; transition:opacity .18s ease;}
.prod-card-web:hover .prod-card-img-wrap .img-alterna{opacity:1;}
.ph-img{width:100%; height:190px; background:linear-gradient(135deg,#FFF1F1,#FFE1E1); display:flex; align-items:center; justify-content:center; color:var(--rojo); opacity:.6;}
.agotado-badge{position:absolute; top:10px; right:10px; background:#111; color:#fff; font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:999px;}
.combo-ribbon-web{position:absolute; top:10px; left:10px; background:var(--negro); color:#fff; font-size:9.5px; font-weight:800; text-transform:uppercase; padding:4px 9px; border-radius:6px; z-index:2; letter-spacing:.4px;}
.combo-ribbon-web.ribbon-top{background:linear-gradient(135deg,#FFB020,var(--rojo));}
.prod-card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.prod-card-name{font-weight:800; font-size:15px;}
.prod-card-desc{font-size:12.5px; color:var(--gris-oscuro); line-height:1.4; flex:1;}
.prod-card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:8px;}
.prod-card-price{font-weight:800; font-size:16px; color:var(--negro);}
.btn-add-sm{background:var(--negro); color:#fff; font-weight:700; font-size:12.5px; padding:9px 16px; border-radius:9px; transition:background .15s; white-space:nowrap;}
.btn-add-sm:hover{background:var(--rojo);}
.btn-add-sm:disabled{background:var(--gris-claro); color:var(--gris-oscuro); cursor:not-allowed;}
.btn-pill-red{background:var(--rojo); text-transform:uppercase; letter-spacing:.3px; padding:10px 18px; border-radius:999px; font-size:11.5px;}
.btn-pill-red:hover{background:var(--rojo-osc);}
.btn-comprar-grande{display:inline-flex; align-items:center; gap:8px; background:var(--rojo); color:#fff; font-weight:800; padding:14px 26px; border-radius:12px; font-size:15px; text-transform:none; transition:transform .15s, background .15s;}
.btn-comprar-grande:hover{background:var(--rojo-osc); transform:translateY(-1px);}

/* ---------- encabezado decorativo con "zigzag" a los lados (estilo referencia) ---------- */
.section-head-deco{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:30px; color:var(--rojo);}
.section-head-deco h2{font-size:24px; letter-spacing:.3px; text-align:center;}
.section-head-deco svg{flex-shrink:0; opacity:.85;}

/* ---------- "Nuestras favoritas" / "Platos a la carta": grilla de tarjetas ---------- */
.section-favoritas{padding-bottom:8px;}
.favoritas-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px;}
.favorito-card{background:#fff; border-radius:18px; box-shadow:var(--shadow); overflow:hidden; position:relative; transition:transform .18s, box-shadow .18s;}
.favorito-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.favorito-card.agotado{opacity:.6;}
.favorito-img-wrap{position:relative; width:100%; height:190px; overflow:hidden; background:var(--gris-fondo);}
.favorito-img-wrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.favorito-card:hover .favorito-img-wrap .img-principal{transform:scale(1.05);}
.favorito-img-wrap .img-alterna{opacity:0; transition:opacity .18s ease;}
.favorito-card:hover .favorito-img-wrap .img-alterna{opacity:1;}
.favorito-ribbon{position:absolute; top:16px; left:0; z-index:2; background:var(--rojo); color:#fff; font-weight:800; font-size:11px; letter-spacing:.3px; padding:6px 14px 6px 16px; border-radius:0 999px 999px 0; box-shadow:0 4px 10px rgba(0,0,0,.22); animation:badge-in .4s .1s cubic-bezier(.34,1.56,.64,1) both;}
.favorito-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px;}
.favorito-name{font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:.2px;}
.favorito-incluye{font-size:12px; color:var(--gris-oscuro); line-height:1.4;}
.favorito-foot{display:flex; align-items:flex-end; justify-content:space-between; margin-top:6px; gap:10px;}
.favorito-precios{display:flex; flex-direction:column; gap:1px;}
.favorito-precio{font-weight:800; font-size:17px;}

/* ---------- "Nuestras estrellas": producto destacado a dos columnas ---------- */
.section-estrella{background:var(--gris-fondo);}
.estrella-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center;}
.estrella-img-wrap{border-radius:24px; overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:1/1;}
.estrella-img-wrap img{width:100%; height:100%; object-fit:cover; display:block;}
.estrella-texto h2{font-size:26px; line-height:1.28; margin:8px 0 10px;}
.estrella-texto h2 .red{display:block; font-size:22px;}
.estrella-lead{color:var(--gris-oscuro); font-size:14px; margin-bottom:18px;}
.estrella-producto{display:flex; gap:14px; align-items:flex-start; margin-bottom:22px;}
.estrella-icono{flex-shrink:0; width:44px; height:44px; border-radius:50%; border:2px solid var(--rojo); color:var(--rojo); display:flex; align-items:center; justify-content:center;}
.estrella-producto strong{display:block; font-size:16px; margin-bottom:4px;}
.estrella-producto p{color:var(--gris-oscuro); font-size:13.5px; line-height:1.6;}

/* ---------- franja "Combo perfecto" ---------- */
.section-combo-banner{padding:8px 0 12px;}
.combo-banner{position:relative; display:flex; align-items:center; gap:28px; background:linear-gradient(120deg,#7A0F13,var(--rojo-osc) 60%,var(--rojo)); border-radius:28px; padding:32px 40px; overflow:hidden; box-shadow:var(--shadow-lg);}
.combo-banner-img{flex-shrink:0; width:150px; height:150px; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35); border:3px solid rgba(255,255,255,.25);}
.combo-banner-img img{width:100%; height:100%; object-fit:cover; display:block;}
.combo-banner-texto{flex:1; color:#fff; min-width:0;}
.combo-banner-texto h2{font-size:25px; margin:2px 0 8px; text-transform:uppercase;}
.combo-banner-texto p{font-size:13.5px; color:#FFE1E1; line-height:1.6; margin-bottom:18px;}
.btn-combo-banner{display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--rojo-osc); font-weight:800; padding:13px 24px; border-radius:999px; font-size:14px; transition:transform .15s, background .15s;}
.btn-combo-banner:hover{background:#FFE1E1; transform:translateY(-1px);}
.combo-banner-badge{flex-shrink:0; width:110px; height:110px; border-radius:50%; background:#fff; color:var(--rojo-osc); display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.25); line-height:1.15;}
.combo-banner-badge span{font-size:26px;}
.combo-banner-badge{font-size:10.5px; text-transform:uppercase; letter-spacing:.3px;}
@media (max-width:720px){
  .estrella-grid{grid-template-columns:1fr;}
  .estrella-img-wrap{aspect-ratio:16/10;}
  .combo-banner{flex-direction:column; text-align:center; padding:28px 24px;}
  .combo-banner-texto{text-align:center;}
  .combo-banner-badge{position:absolute; top:16px; right:16px; width:78px; height:78px;}
  .combo-banner-badge span{font-size:18px;}
}

/* ---------- "Ver más" (enlace de texto con chevron, como en la referencia) ---------- */
.ver-mas-link{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13.5px; color:var(--negro); transition:color .15s, gap .15s;}
.ver-mas-link:hover{color:var(--rojo); gap:9px;}

/* ---------- "Nuestra tienda física": mapa + tarjeta de datos ---------- */
.tienda-grid{display:grid; grid-template-columns:1.3fr .8fr; gap:28px; align-items:stretch;}
.tienda-grid .mapa-wrap{margin-bottom:0; display:flex; flex-direction:column;}
.tienda-grid .mapa-wrap iframe{flex:1; min-height:260px;}
.tienda-grid .mapa-cta{padding:14px; background:#fff;}
.nosotros-card{background:var(--negro); color:#fff; border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:8px;}
.nosotros-card-logo{width:46px; margin-bottom:10px;}
.nosotros-card-pill{display:inline-flex; align-items:center; gap:7px; background:var(--rojo); color:#fff; font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; padding:8px 14px; border-radius:999px; width:fit-content; margin-top:12px;}
.nosotros-card p{color:#ccc; font-size:13.5px; line-height:1.5; margin-top:8px;}
.nosotros-historia{padding-top:8px;}
.nosotros-historia p{color:var(--gris-oscuro); line-height:1.7; margin:14px 0 22px; font-size:15px; max-width:720px;}
@media (max-width:900px){.tienda-grid{grid-template-columns:1fr;}}


   (calculado siempre desde el valor real de los productos incluidos —
   nunca un número inventado). */
.combo-card-precios{display:flex; flex-direction:column; gap:1px;}
.precio-antes{font-size:12px; color:var(--gris-oscuro); text-decoration:line-through; font-weight:600;}
.combo-descuento-badge{position:absolute; top:10px; right:10px; z-index:2; background:var(--rojo); color:#fff; font-size:11px; font-weight:800; padding:5px 10px; border-radius:999px; box-shadow:0 3px 10px rgba(228,29,35,.35);}
.combo-ahorro{font-size:11px; color:#166534; font-weight:700; margin-top:-2px;}
.combo-descuento-pill{display:inline-block; background:var(--rojo); color:#fff; font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px; vertical-align:middle;}

/* ---------- combos (scroll horizontal en home) ---------- */
.section-combos{background:var(--gris-fondo);}
.combo-scroll{display:flex; gap:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; scroll-snap-type:x mandatory;}
.combo-card-web{flex:0 0 260px; scroll-snap-align:start; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; position:relative; border:2px solid #FFB020;}
.combo-card-img-wrap{position:relative; width:100%; height:175px; overflow:hidden; background:var(--gris-fondo);}
.combo-card-img-wrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.combo-card-img-wrap .img-alterna{opacity:0; transition:opacity .18s ease;}
.combo-card-web:hover .combo-card-img-wrap .img-alterna{opacity:1;}
.combo-card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px;}
.combo-card-name{font-weight:800; font-size:14.5px;}
.combo-card-incluye{font-size:11.5px; color:var(--gris-oscuro); line-height:1.4;}
.combo-card-foot{display:flex; justify-content:space-between; align-items:center; margin-top:4px; gap:8px;}
.combo-card-price{font-weight:800;}

/* ---------- nosotros ---------- */
.nosotros-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;}
.nosotros-text p{color:var(--gris-oscuro); line-height:1.7; margin:14px 0 22px; font-size:15px;}
.nosotros-stats{display:flex; gap:26px;}
.nosotros-stats strong{display:block; font-size:26px; font-weight:800; color:var(--rojo);}
.nosotros-stats span{font-size:12px; color:var(--gris-oscuro); font-weight:600;}

/* ---------- menú (página completa) ---------- */
.menu-tabs{display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:14px; margin-bottom:20px;}
.menu-tab{flex-shrink:0; background:var(--gris-fondo); color:var(--negro); font-weight:700; font-size:13.5px; padding:11px 20px; border-radius:999px; transition:.15s;}
.menu-tab.active{background:var(--negro); color:#fff;}
.menu-tab.combo-tab-web{background:linear-gradient(135deg,#FFB020,#E41D23); color:#fff;}
.menu-tab.combo-tab-web.active{background:var(--negro);}
.menu-empty{color:var(--gris-oscuro); padding:30px 0;}
.menu-subcat-titulo{font-size:15px; font-weight:800; color:var(--negro); margin:34px 0 14px; padding-left:12px; border-left:4px solid var(--rojo);}
.menu-grid > .menu-subcat-titulo:first-child{margin-top:0;}

/* ---------- modal de adicionales (web) ---------- */
.modal-overlay-web{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:400; display:flex; align-items:flex-end; justify-content:center; animation:modal-overlay-in .2s ease both;}
@media (min-width:640px){.modal-overlay-web{align-items:center;}}
.modal-box-web{background:#fff; width:100%; max-width:480px; border-radius:20px 20px 0 0; max-height:85vh; max-height:85dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; animation:modal-sheet-in .28s cubic-bezier(.22,1,.36,1) both;}
@media (min-width:640px){.modal-box-web{border-radius:20px; animation:modal-scale-in .22s cubic-bezier(.22,1,.36,1) both;}}
@keyframes modal-overlay-in{from{opacity:0;} to{opacity:1;}}
@keyframes modal-sheet-in{from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:translateY(0);}}
@keyframes modal-scale-in{from{opacity:0; transform:translateY(8px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}
@media (prefers-reduced-motion:reduce){.modal-overlay-web, .modal-box-web{animation:none;}}

/* Modal con foto: columna de imagen fija a la izquierda (no se
   desplaza con el contenido) y una columna aparte que sí hace scroll.
   En móvil la foto pasa arriba, a todo el ancho, con una relación de
   aspecto (no una altura fija chica) para que se vea completa y no
   cortada, cualquiera sea el ancho de pantalla (iPhone o Android). */
.modal-box-web.modal-box-con-foto{display:flex; overflow:hidden; max-height:85vh; max-height:85dvh;}
.modal-img-col{width:230px; flex-shrink:0; position:relative; background:var(--gris-fondo); box-shadow:2px 0 10px rgba(0,0,0,.08);}
.modal-img-col img, .modal-img-col .ph-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.modal-img-col::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.28) 100%); pointer-events:none;}
.modal-content-col{flex:1; min-width:0; display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch;}
@media (min-width:640px){.modal-box-web.modal-box-con-foto{max-width:680px;}
  .modal-box-web.modal-box-con-foto:not(.modal-box-web-wide) .modal-img-col{width:270px;}
  .modal-box-web-wide.modal-box-con-foto{max-width:820px;}
  .modal-box-web-wide .modal-img-col{width:300px;}}
@media (max-width:640px){
  .modal-box-web.modal-box-con-foto{flex-direction:column; max-height:92vh; max-height:92dvh;}
  .modal-img-col{width:100%; height:auto; aspect-ratio:16/10; position:relative;}
  .modal-content-col{flex:1; min-height:0;}
}
.modal-head-web{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--gris-claro); position:sticky; top:0; background:#fff;}
.modal-head-web h3{font-size:17px;}
.modal-close-web{width:32px; height:32px; border-radius:50%; color:var(--gris-oscuro); transition:.12s;}
.modal-close-web:hover{background:var(--gris-fondo);}
.modal-body-web{padding:16px 20px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}

/* Extras/adicionales: tarjetas parejas en grilla (no un listado apilado)
   — nombre y precio arriba, contador −/+ centrado abajo. Misma tarjeta
   para el modal de un producto suelto y el de un combo, así se ve igual
   de prolijo en los dos. 2 columnas en el modal angosto (el de un solo
   producto) y hasta 3 en el modal ancho de combos en pantallas grandes. */
.adic-item-web{display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:11px 10px; border:2px solid var(--gris-claro); border-radius:12px; transition:.12s; text-align:center;}
.adic-item-web:hover{border-color:#ddd;}
.adic-item-web.checked{border-color:var(--rojo); background:#FFF3F3;}
.adic-item-web .nm{display:flex; flex-direction:column; align-items:center; gap:3px; font-weight:700; font-size:13px;}
.adic-item-web .pr{font-size:11.5px; color:var(--gris-oscuro); font-weight:600;}
.adic-item-web .stepper-mini-web{justify-content:center;}
.modal-foot-web{display:flex; align-items:center; gap:14px; padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--gris-claro); position:sticky; bottom:0; background:#fff;}
.qty-stepper-web{display:flex; align-items:center; gap:12px; background:var(--gris-fondo); border-radius:10px; padding:6px 10px;}
.qty-stepper-web button{width:28px; height:28px; background:#fff; border-radius:8px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; transition:.12s;}
.qty-stepper-web button:hover{background:var(--gris-fondo);}
.btn-add-confirm{flex:1; background:var(--rojo); color:#fff; font-weight:800; padding:13px; border-radius:12px; transition:.12s;}
.btn-add-confirm:hover:not(:disabled){background:var(--rojo-osc);}
.btn-add-confirm:disabled{background:var(--gris-claro); color:var(--gris-oscuro); cursor:not-allowed;}

/* Contador chico (−/+) reutilizado en extras y en opciones de combo */
.stepper-mini-web{display:flex; align-items:center; gap:9px; flex-shrink:0;}
.stepper-mini-web button{width:26px; height:26px; border-radius:8px; background:var(--gris-fondo); font-weight:800; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; transition:.12s;}
.stepper-mini-web button:hover{background:#ececec;}
.stepper-mini-web span{min-width:14px; text-align:center; font-weight:800; font-size:13px;}

/* Modal de elección de combo */
.modal-box-web-wide{max-width:560px;}
.modal-sub-web{font-size:12.5px; color:var(--gris-oscuro); font-weight:700; margin-top:2px;}
.combo-grupo-web{grid-column:1/-1; margin-bottom:6px;}
.combo-grupo-web + .combo-grupo-web{margin-top:14px; padding-top:14px; border-top:1px solid var(--gris-claro);}
.combo-grupo-titulo-web{font-weight:800; font-size:14px; margin-bottom:4px;}
.combo-grupo-progreso-web{font-size:12px; color:var(--gris-oscuro); font-weight:700; margin-bottom:10px;}
.combo-grupo-progreso-web.completo{color:#166534;}
.combo-opciones-web{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
.combo-opcion-web{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:10px 11px; border:2px solid var(--gris-claro); border-radius:12px; transition:.12s;}
.combo-opcion-web:hover{border-color:#ddd;}
.combo-opcion-web.tiene{border-color:var(--rojo); background:#FFF3F3;}
.combo-opcion-web .nombre{font-weight:700; font-size:12.5px; line-height:1.25;}
body.no-scroll{overflow:hidden;}

/* Extras del combo: hasta 3 columnas parejas en pantallas grandes, para
   no ocupar tanto espacio vertical — comparten la misma tarjeta de
   .adic-item-web de arriba (ya apilada nombre/precio/contador). */
#comboEleccionAdicionalesWeb{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
@media (min-width:720px){#comboEleccionAdicionalesWeb{grid-template-columns:repeat(3,1fr);}}

/* ---------- checkout ---------- */
.checkout-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:34px; align-items:flex-start;}
.checkout-page h2{font-size:22px; margin-bottom:20px;}
.entrega-tabs{display:flex; gap:10px; margin-bottom:14px;}
.entrega-tab{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--gris-fondo); font-weight:700; font-size:13.5px; padding:13px; border-radius:12px; transition:.15s;}
.entrega-tab.active{background:var(--negro); color:#fff;}
.tiempo-estimado-web{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--rojo-osc); background:#FFF3F3; padding:10px 14px; border-radius:10px; margin-bottom:18px;}
.checkout-estado-banner{border-radius:12px; margin-bottom:18px;}
.ubicacion-box-web{background:var(--gris-fondo); border-radius:12px; padding:14px; margin-bottom:16px;}
.btn-ubicacion-web{width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background:#fff; border:2px solid var(--negro); font-weight:700; font-size:13px; padding:12px; border-radius:10px;}
.btn-ubicacion-web:disabled{opacity:.6;}
.ubicacion-estado-web{font-size:12.5px; color:var(--gris-oscuro); margin-top:8px; font-weight:600; line-height:1.5;}
.ubicacion-estado-web.ok{color:#166534;}
.ubicacion-estado-web.fuera{color:#92400E;}

/* Selector visual de método de pago (con ícono), estilo pasarela de
   pago — más profesional que un <select> de texto plano. */
.metodos-pago-web{display:flex; flex-direction:column; gap:8px;}
.metodo-pago-card{display:flex; align-items:center; gap:12px; padding:12px 14px; border:2px solid var(--gris-claro); border-radius:12px; cursor:pointer; transition:.12s; background:#fff;}
.metodo-pago-card:hover{border-color:#ddd;}
.metodo-pago-card.seleccionado{border-color:var(--negro); background:#FAFAFA;}
.mp-icono{width:38px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; font-weight:800; font-size:10px; letter-spacing:.3px;}
.mp-icono-efectivo{background:#E8F5E9; color:#2E7D32;}
.mp-icono-yape{background:#8A05BE;}
.mp-icono-tarjeta{background:#1A237E; color:#fff;}
.mp-texto{flex:1; font-weight:700; font-size:13.5px;}
.mp-check{width:20px; height:20px; border-radius:50%; border:2px solid var(--gris-claro); display:flex; align-items:center; justify-content:center; color:transparent; flex-shrink:0; transition:.12s;}
.metodo-pago-card.seleccionado .mp-check{background:var(--negro); border-color:var(--negro); color:#fff;}
.form-row-web{margin-bottom:14px;}
.form-row-web label{display:block; font-weight:700; font-size:13px; margin-bottom:6px;}
.form-row-web input, .form-row-web select, .form-row-web textarea{width:100%; padding:12px 14px; border:2px solid var(--gris-claro); border-radius:10px; font-size:16px; font-family:inherit; -webkit-appearance:none; appearance:none; background-color:#fff;}
.form-row-web input:focus, .form-row-web select:focus, .form-row-web textarea:focus{outline:none; border-color:var(--rojo);}
.form-row-web select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;}
.campo-obligatorio{font-weight:500; color:var(--gris-oscuro); font-size:11.5px; text-transform:none;}
.campo-ayuda-web{display:block; margin-top:5px; font-size:11.5px; color:var(--gris-oscuro); font-weight:500;}
.form-row-web input:invalid:not(:placeholder-shown){border-color:#e0a800;}

/* Autocompletado de dirección (como Maps/inDrive): la lista de
   coincidencias flota debajo del campo, sin empujar el resto del
   formulario hacia abajo. */
.direccion-campo-web{position:relative;}
.direccion-sugerencias-web{position:absolute; left:0; right:0; top:calc(100% + 4px); background:#fff; border:1px solid var(--gris-claro); border-radius:12px; box-shadow:var(--shadow-lg); z-index:60; overflow:hidden; max-height:240px; overflow-y:auto;}
.direccion-sugerencia-web{display:flex; align-items:center; gap:9px; width:100%; padding:11px 14px; text-align:left; font-size:13px; font-weight:600; border-bottom:1px solid var(--gris-fondo); transition:.1s;}
.direccion-sugerencia-web:last-child{border-bottom:none;}
.direccion-sugerencia-web:hover{background:var(--gris-fondo);}
.direccion-sugerencia-web span{flex:1; line-height:1.3;}
.checkout-nota{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--gris-oscuro); margin-top:10px; justify-content:center;}
.checkout-empty{text-align:center; padding:40px 0; display:flex; flex-direction:column; gap:16px; align-items:center;}
.resumen-card{background:var(--gris-fondo); border-radius:var(--radius); padding:20px;}
.resumen-card h3{font-size:15px; margin-bottom:12px;}
.resumen-linea{display:flex; justify-content:space-between; font-size:13.5px; padding:8px 0; border-bottom:1px solid #ECECEC;}
.resumen-total-row{display:flex; justify-content:space-between; font-weight:800; font-size:16px; margin-top:12px; padding-top:12px; border-top:2px solid var(--negro);}

/* ---------- confirmación ---------- */
.confirmacion-page{padding:60px 0;}
.confirmacion-card{background:#fff; border-radius:20px; box-shadow:var(--shadow-lg); padding:32px 26px; text-align:center;}
.confirmacion-check{width:64px; height:64px; border-radius:50%; background:#DCFCE7; color:#166534; display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.confirmacion-codigo{color:var(--gris-oscuro); margin-bottom:6px;}

/* ---------- seguimiento de pedido ---------- */
.seguimiento-page{padding:40px 0 70px; perspective:800px;}
.buscar-pedido-form{display:flex; gap:10px; margin-bottom:24px;}
.buscar-pedido-form input{flex:1; padding:13px 16px; border:1.5px solid var(--gris-claro); border-radius:12px; font-size:14px; font-family:inherit;}
.buscar-pedido-form input:focus{outline:none; border-color:var(--rojo);}
.pedidos-recientes{margin-top:8px;}
.pedidos-recientes-titulo{display:block; font-size:12.5px; color:var(--gris-oscuro); font-weight:700; margin-bottom:10px;}
#pedidosRecientesLista{display:flex; flex-wrap:wrap; gap:8px;}
.pedido-reciente-chip{background:var(--gris-fondo); color:var(--negro); font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:999px; transition:.15s;}
.pedido-reciente-chip:hover{background:var(--negro); color:#fff;}

/* Icono grande del paso actual — flota suavemente para que la pantalla
   no se sienta vacía y para que se note de un vistazo en qué va el
   pedido, incluso antes de leer el texto. */
.seguimiento-icono-actual{font-size:56px; line-height:1; text-align:center; margin:6px 0 4px; animation:seg-flotar 3s ease-in-out infinite; filter:drop-shadow(0 10px 14px rgba(0,0,0,.12));}
@keyframes seg-flotar{0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-7px) rotate(2deg);}}

.seguimiento-timeline{display:flex; align-items:flex-start; margin:18px 0 26px;}
.seguimiento-step{display:flex; flex-direction:column; align-items:center; gap:9px; flex:0 0 auto; width:64px; opacity:0; animation:seg-step-in .5s ease both; animation-delay:calc(var(--i, 0) * 90ms);}
@keyframes seg-step-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

/* Círculo con look 3D (esfera con brillo, como un botón pulido) en vez de
   un aro plano — con sombra debajo para dar sensación de volumen. */
.seguimiento-circulo{width:40px; height:40px; border-radius:50%; background:radial-gradient(circle at 32% 28%, #fbfbfb, var(--gris-fondo) 70%); color:transparent; border:2px solid var(--gris-claro); display:flex; align-items:center; justify-content:center; transition:background .35s, border-color .35s, box-shadow .35s, transform .35s; transform-style:preserve-3d;}
.seguimiento-step.completado .seguimiento-circulo, .seguimiento-step.recien-completado .seguimiento-circulo{
  background:radial-gradient(circle at 32% 26%, #ff8a8d, var(--rojo) 55%, var(--rojo-osc) 100%);
  border-color:var(--rojo); color:#fff;
  box-shadow:0 5px 12px rgba(228,29,35,.35), inset 0 -4px 7px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.55);
}
.seguimiento-step.activo .seguimiento-circulo{border-color:var(--rojo); box-shadow:0 0 0 5px rgba(228,29,35,.14), inset 0 2px 4px rgba(0,0,0,.06); animation:seg-pulso 1.8s ease-in-out infinite;}
@keyframes seg-pulso{0%,100%{box-shadow:0 0 0 5px rgba(228,29,35,.14), inset 0 2px 4px rgba(0,0,0,.06); transform:scale(1) rotateX(0);} 50%{box-shadow:0 0 0 9px rgba(228,29,35,.05), inset 0 2px 4px rgba(0,0,0,.06); transform:scale(1.05) rotateX(6deg);}}

/* Check: entra con un giro 3D (como una moneda cayendo) cuando el paso
   pasa a estar completado, en vez de aparecer de golpe. */
.seguimiento-check{display:flex; transform:rotateY(90deg) scale(.5); opacity:0; transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s;}
.seguimiento-step.completado .seguimiento-check, .seguimiento-step.recien-completado .seguimiento-check{transform:rotateY(0) scale(1); opacity:1;}
.seguimiento-step.recien-completado .seguimiento-circulo{animation:seg-completo-pop .55s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes seg-completo-pop{0%{transform:scale(1) rotateY(0);} 45%{transform:scale(1.22) rotateY(180deg);} 100%{transform:scale(1) rotateY(360deg);}}

.seguimiento-label{font-size:11px; font-weight:700; color:var(--gris-oscuro); text-align:center; line-height:1.25;}
.seguimiento-step.activo .seguimiento-label, .seguimiento-step.completado .seguimiento-label, .seguimiento-step.recien-completado .seguimiento-label{color:var(--negro);}
.seguimiento-linea{flex:1; height:2.5px; background:var(--gris-claro); margin-top:21px; border-radius:2px; overflow:hidden; position:relative;}
.seguimiento-linea::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--rojo), #ff6b6f); transform:scaleX(0); transform-origin:left; transition:transform .6s ease;}
.seguimiento-linea.llena::after{transform:scaleX(1);}
.seguimiento-detalle-card{background:var(--gris-fondo); border-radius:16px; padding:20px 22px;}
.seguimiento-detalle-card strong{display:block; font-size:16px; margin-bottom:4px;}
.seguimiento-detalle-card p{color:var(--gris-oscuro); font-size:13.5px; margin:0;}
.seguimiento-cancelado{display:flex; align-items:flex-start; gap:14px; background:#FEE2E2; color:#7A1214; border-radius:16px; padding:20px 22px;}
.seguimiento-cancelado strong{display:block; margin-bottom:4px;}
.seg-pop{animation:seg-pop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes seg-pop{0%{transform:scale(1);} 40%{transform:scale(1.18);} 100%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){
  .seguimiento-step.activo .seguimiento-circulo, .seguimiento-step.recien-completado .seguimiento-circulo, .seguimiento-icono-actual{animation:none;}
  .seg-pop{animation:none;}
  .seguimiento-step{opacity:1; animation:none;}
  .seguimiento-check{transition:none;}
}
@media (max-width:480px){
  .seguimiento-step{width:auto;}
  .seguimiento-label{font-size:10px;}
  .seguimiento-icono-actual{font-size:46px;}
}

/* Libro de Reclamaciones */
.reclamos-aviso{background:var(--gris-fondo); border-left:4px solid var(--rojo); border-radius:10px; padding:14px 16px; font-size:12.5px; color:var(--gris-oscuro); line-height:1.6; margin-bottom:22px;}
.reclamos-negocio{background:#fff; border:2px solid var(--gris-claro); border-radius:12px; padding:16px 18px; margin-bottom:22px; font-size:13px; line-height:1.7;}
.reclamos-negocio strong{display:block; font-size:15px; margin-bottom:4px;}
.form-section-title{font-weight:800; font-size:14px; margin:26px 0 12px; padding-top:16px; border-top:1px solid var(--gris-claro);}
.form-section-title:first-of-type{border-top:none; margin-top:0; padding-top:0;}
.checkbox-row-web{display:flex; align-items:center; gap:9px; margin-bottom:14px; font-weight:600; font-size:13.5px;}
.checkbox-row-web input{width:19px; height:19px; accent-color:var(--rojo); flex-shrink:0;}
.footer-legal-btn{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.06); color:#fff; font-weight:700; font-size:12.5px; padding:10px 16px; border-radius:10px; border:1.5px solid rgba(255,255,255,.22); margin-top:2px; transition:.15s;}
.footer-legal-btn:hover{background:var(--rojo); border-color:var(--rojo);}

/* ---------- mapa (sección nosotros) ---------- */
.mapa-wrap{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);}
.mapa-wrap iframe{display:block;}
.mapa-cta{text-align:center; margin-top:20px;}

/* ---------- footer ---------- */
.site-footer{background:var(--negro); color:#ccc; margin-top:40px; border-top:3px solid var(--rojo);}
.footer-inner{max-width:1180px; margin:0 auto; padding:52px 20px 28px; display:grid; grid-template-columns:1.2fr repeat(5,1fr); gap:28px;}
.footer-historia p{font-size:13px; color:#bbb; line-height:1.6; margin-bottom:10px;}
.footer-historia a{color:var(--rojo); font-weight:700;}
.footer-historia a:hover{color:#fff;}
.footer-brand{display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.footer-logo{width:34px;}
.footer-brand .brand-wm{color:#fff;}
.footer-brand p{font-size:13px; color:#999; margin-top:4px;}
.footer-social{display:flex; gap:12px; margin-top:8px;}
.footer-social a{color:#999; transition:color .15s;}
.footer-social a:hover{color:var(--rojo);}
.footer-col h4{color:#fff; font-size:13.5px; margin-bottom:14px; text-transform:uppercase; letter-spacing:.4px;}
.footer-col a{display:block; font-size:13.5px; color:#bbb; margin-bottom:10px; transition:color .15s;}
.footer-col a:hover{color:#fff;}
.footer-pagos{margin-top:6px; font-size:12px; color:#999; display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.footer-pago-tag{background:rgba(255,255,255,.08); color:#ddd; padding:4px 10px; border-radius:999px; font-weight:600; font-size:11px;}
.footer-line{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#bbb; margin-bottom:12px;}
.footer-bottom{text-align:center; padding:18px; border-top:1px solid #262626; font-size:12px; color:#777;}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float{position:fixed; bottom:calc(22px + env(safe-area-inset-bottom)); right:calc(22px + env(safe-area-inset-right)); width:56px; height:56px; background:#25D366; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:150; transition:transform .15s; animation:wa-pulse 2.6s ease-in-out infinite;}
.whatsapp-float:hover{transform:scale(1.08); animation-play-state:paused;}
@keyframes wa-pulse{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.45);} 50%{box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 9px rgba(37,211,102,0);}}
@media (prefers-reduced-motion:reduce){.whatsapp-float{animation:none;}}

/* ---------- animación de aparición al hacer scroll ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease;}
.reveal-visible{opacity:1; transform:translateY(0);}

/* ---------- toques de estética extra: badges tipo "sticker" e imágenes con zoom ---------- */
.combo-descuento-badge{transform:rotate(-6deg); animation:badge-in .4s .1s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes badge-in{from{transform:rotate(-6deg) scale(0);} to{transform:rotate(-6deg) scale(1);}}
.prod-card-img-wrap img, .combo-card-img-wrap img{transition:transform .35s ease;}
.prod-card-web:hover .prod-card-img-wrap .img-principal, .combo-card-web:hover .combo-card-img-wrap .img-principal{transform:scale(1.05);}
.combo-card-web{transition:transform .18s, box-shadow .18s;}
.combo-card-web:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .combo-descuento-badge{animation:none;}
  .prod-card-img-wrap img, .combo-card-img-wrap img{transition:none;}
}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* ============================================================ */
@media (max-width:900px){
  .nosotros-grid{grid-template-columns:1fr;}
  .checkout-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:720px){
  .main-nav{display:none;}
  .main-nav.mobile-open{display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; padding:16px 20px; gap:4px; box-shadow:var(--shadow-lg); border-top:1px solid var(--gris-claro); animation:nav-drop .22s ease both;}
  .main-nav.mobile-open a{padding:14px 4px; border-bottom:1px solid var(--gris-fondo); min-height:44px; display:flex; align-items:center;}
  .btn-burger{display:flex;}
  .hero h1{font-size:27px;}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@keyframes nav-drop{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}}
@media (max-width:480px){
  .footer-inner{grid-template-columns:1fr;}
}

/* ---------- páginas legales (Términos, Privacidad, Cambios y Devoluciones, Cookies) ---------- */
.legal-page{max-width:760px; margin:0 auto; padding:48px 20px 64px;}
.legal-page h1{font-size:26px; margin-bottom:6px;}
.legal-page .legal-fecha{color:var(--gris-oscuro); font-size:12.5px; margin-bottom:28px;}
.legal-page h2{font-size:16px; margin:26px 0 10px;}
.legal-page p, .legal-page li{color:var(--gris-oscuro); font-size:14px; line-height:1.75;}
.legal-page ul{padding-left:20px; margin-bottom:12px;}
.legal-page li{margin-bottom:6px;}
.legal-page a{color:var(--rojo); font-weight:600;}