/* =====================================================================
   TRUJILLO MARKET — Landing PROPUESTA 7 · "porque mereces lo mejor"
   Rojo + dorado + negro · mapa interactivo oscuro · mínimo blanco
   ===================================================================== */
/* Ícono profesional: Material Symbols Rounded (relleno), auto-hospedado */
@font-face{
  font-family:"Material Symbols Rounded";
  font-style:normal;
  font-weight:100 700;
  src:url("/fonts/material-symbols-rounded.woff2?v=2") format("woff2");
  font-display:block;
}
.msym{
  font-family:"Material Symbols Rounded";
  font-weight:normal;font-style:normal;font-size:1em;line-height:1;
  display:inline-block;letter-spacing:normal;text-transform:none;
  white-space:nowrap;word-wrap:normal;direction:ltr;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
  -webkit-font-smoothing:antialiased;user-select:none;
}
/* Los íconos se inyectan como SVG vectorial (mismos glifos oficiales):
   heredan el tamaño vía font-size de las reglas .msym existentes */
svg.msym{width:1em;height:1em;fill:currentColor;flex:0 0 auto}

:root{
  --rojo:#DE1F26;
  --rojo-osc:#B92025;
  --rojo-prof:#9E1B1F;
  --vino:#6B0B0F;
  --oro:#FDB71D;
  --oro-claro:#FDD53B;
  --crema:#FBF3E4;
  --negro:#141110;
  --panel:#221D1B;
  --linea-osc:#2E2823;
  --txt-suave:#F7DCD2;
  --txt-gris:#B9B1AB;
  --max:1760px;
  --pad:clamp(20px,3.2vw,56px);
  --wave:clamp(46px,4.6vw,76px);
  --fh:"Baloo 2",system-ui,sans-serif;
  --fb:"Nunito",system-ui,sans-serif;
  --sombra:0 14px 34px rgba(0,0,0,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--rojo);color:#fff;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none}
[hidden]{display:none!important}

/* Patrón de estrellas (marca) */
.hero,.footer{position:relative}
.hero::before,.footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M35 14l3.2 8.8L47 26l-8.8 3.2L35 38l-3.2-8.8L23 26l8.8-3.2Z' fill='%23ffffff' fill-opacity='.045'/%3E%3Cpath d='M105 84l2.6 7.4 7.4 2.6-7.4 2.6-2.6 7.4-2.6-7.4-7.4-2.6 7.4-2.6Z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E");
}
.hero>*,.footer>*{position:relative;z-index:1}

/* ============ Botones ============ */
.btn-rojo,.btn-oro{
  display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14.5px;
  padding:12px 24px;border-radius:12px;transition:transform .16s,box-shadow .16s,background .16s;white-space:nowrap;
}
.btn-rojo{background:var(--rojo);color:#fff;box-shadow:0 10px 24px rgba(222,31,38,.35)}
.btn-rojo:hover{transform:translateY(-2px);background:#e93a40}
.btn-oro{background:var(--oro);color:#7C1215;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.btn-oro:hover{transform:translateY(-2px);background:var(--oro-claro)}

/* ============ Logo (lockup de texto; imagen opcional) ============ */
.logo-box{position:relative;display:inline-flex;flex-direction:column;line-height:1}
.logo-1{font-family:var(--fh);font-weight:800;font-size:42px;color:#fff;letter-spacing:.01em;text-shadow:0 3px 12px rgba(0,0,0,.22)}
.logo-2{font-family:var(--fh);font-weight:700;font-size:14.5px;color:var(--oro);letter-spacing:.42em;align-self:flex-end;margin-top:2px;margin-right:-3px;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.logo-stars{position:absolute;top:-14px;right:9px;line-height:1}
.logo-stars .st{font-style:normal}
.logo-stars .st-a{font-size:12px;color:#fff;margin-right:4px;vertical-align:7px}
.logo-stars .st-b{font-size:21px;color:var(--oro);text-shadow:0 0 12px rgba(253,213,59,.6)}
.logo-box.sm .logo-1{font-size:26px}
.logo-box img.logo-img{height:66px;width:auto}

/* ============ HEADER ============ */
.header{position:sticky;top:0;z-index:60;background:var(--rojo);transition:box-shadow .2s}
.header.scrolled{box-shadow:0 8px 26px rgba(0,0,0,.28)}
/* Filo dorado bajo el header, como el piping del estuche */
.header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:linear-gradient(90deg,var(--oro),var(--oro-claro) 50%,var(--oro))}
.header-in{max-width:var(--max);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
.logo{flex:0 0 auto}
.nav{display:flex;gap:24px;margin-left:auto}

/* Buscador de productos */
.search{flex:1 1 240px;max-width:440px;min-width:0;display:flex;align-items:center;gap:9px;background:#fff;border-radius:12px;padding:0 14px;height:46px;box-shadow:0 6px 16px rgba(0,0,0,.14);transition:box-shadow .16s}
.search:focus-within{box-shadow:0 0 0 3px var(--oro),0 8px 20px rgba(0,0,0,.2)}
.search .search-ic{display:inline-grid;place-items:center;color:var(--rojo);flex:0 0 auto}
.search .search-ic svg{width:21px;height:21px}
.search-input{flex:1;min-width:0;border:0;outline:none;background:none;font-family:var(--fb);font-weight:700;font-size:15px;color:#231d1b}
.search-input::placeholder{color:#b0a49d;font-weight:600}
.search-input::-webkit-search-cancel-button{display:none}
.search-x{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:#f0e7dd;color:#7C1215;display:grid;place-items:center;transition:background .15s,transform .15s}
.search-x:hover{background:var(--oro-claro);transform:scale(1.05)}
.search-x svg{width:16px;height:16px}
/* Menú: la sección activa lleva un trazo dorado curvo, el swoosh de los banners de la marca */
.nav a{font-weight:800;font-size:15px;color:#ffe9e2;padding:8px 2px 13px;position:relative;transition:color .15s}
.nav a::after{content:"";position:absolute;left:-1px;right:-1px;bottom:2px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q30 1 58 4' fill='none' stroke='%23FDB71D' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;opacity:0;transition:opacity .18s}
.nav a:hover{color:#fff}
.nav a:hover::after{opacity:.45}
.nav a.active{color:#fff}
.nav a.active::after{opacity:1}
/* Los íconos sociales viven en el menú lateral y el pie; el header prioriza el buscador */
.header-socials{display:none;gap:10px}
.header-socials a{width:38px;height:38px;border-radius:11px;background:#fff;color:var(--rojo);display:grid;place-items:center;transition:transform .15s,background .15s}
.header-socials a:hover{transform:translateY(-2px);background:var(--oro-claro)}
.header-socials a svg{width:19px;height:19px}
.burger{display:none;color:#fff;width:42px;height:42px;border-radius:10px;background:#ffffff22}
.burger svg{width:22px;height:22px}

/* Menú móvil */
.drawer-back{position:fixed;inset:0;background:rgba(15,8,7,.55);z-index:70;opacity:0;transition:opacity .22s}
.drawer-back.show{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--rojo-osc);z-index:71;padding:20px;transform:translateX(105%);transition:transform .24s ease}
.drawer.show{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.drawer-x{color:#fff;width:38px;height:38px;border-radius:10px;background:#ffffff22}
.drawer-x svg{width:20px;height:20px}
.drawer-nav{display:flex;flex-direction:column;gap:4px}
.drawer-nav a{font-weight:800;font-size:16px;color:#ffe9e2;padding:12px 10px;border-radius:10px}
.drawer-nav a:hover{background:#ffffff18;color:#fff}
.drawer-socials{display:flex;gap:10px;margin-top:18px}
.drawer-socials a{width:40px;height:40px;border-radius:11px;background:#fff;color:var(--rojo);display:grid;place-items:center}
.drawer-socials a svg{width:20px;height:20px}

/* ============ HERO (cielo rojo + cordillera de Huaraz al pie) ============ */
.hero{position:relative;overflow:hidden;background:radial-gradient(130% 95% at 70% 0%,#EE3D43 0%,var(--rojo) 50%,#C8161C 100%);background:radial-gradient(130% 95% at 70% 0%,color-mix(in srgb,var(--rojo),#fff 12%) 0%,var(--rojo) 50%,color-mix(in srgb,var(--rojo),#000 11%) 100%)}
/* Arco dorado de marca en el cielo (el swoosh de los banners impresos) */
.hero-arc{position:absolute;left:0;right:0;top:0;width:100%;height:clamp(110px,15vw,230px);z-index:1;pointer-events:none;display:block;fill:var(--oro);opacity:.12}
/* Cordillera Blanca en curvas suaves, telón detrás del titular y la vitrina.
   El arrebol dorado corona solo la doble cumbre del Huascarán. */
.hero-cordillera{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(320px,42vw,620px);z-index:1;pointer-events:none;display:block}
.hero-cordillera .cd-a{fill:var(--rojo-osc)}
.hero-cordillera .cd-b{fill:#8E1015;fill:color-mix(in srgb,var(--rojo-osc),var(--vino) 55%)}
.hero-cordillera .cd-sum{stroke:var(--oro);stroke-width:5;stroke-linecap:round;opacity:.85;fill:none}
.hero-cordillera .cd-c{fill:var(--vino)}
@keyframes cordIn{from{opacity:0;transform:translateY(4%)}to{opacity:1;transform:none}}
.hero-go .hero-cordillera{animation:cordIn 1.1s cubic-bezier(.22,.75,.3,1) .12s backwards}
.hero-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:clamp(24px,3vw,44px) var(--pad) clamp(34px,3.6vw,52px);display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:clamp(24px,3vw,52px);align-items:start}
.hero-copy{max-width:none}
/* Entrada con vida: la secuencia arranca cuando el contenido real ya cargó (body.hero-go).
   El titular llega línea por línea, "mereces" (dorado) asienta con un leve rebote,
   el afiche se posa y la tarjeta de precio aparece al final como remate. */
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroGoldIn{0%{opacity:0;transform:translateY(26px) scale(.97) rotate(-1.6deg)}62%{opacity:1;transform:translateY(-3px) scale(1.01) rotate(-1.6deg)}100%{opacity:1;transform:rotate(-1.6deg)}}
@keyframes heroMediaIn{from{opacity:0;transform:translateY(30px) scale(.976)}to{opacity:1;transform:none}}
@keyframes heroPopIn{0%{opacity:0;transform:translateY(8px) scale(.86) rotate(var(--tilt,0deg))}72%{opacity:1;transform:translateY(-2px) scale(1.03) rotate(var(--tilt,0deg))}100%{opacity:1;transform:rotate(var(--tilt,0deg))}}
.hero-go .hero-eyebrow{animation:heroIn .6s cubic-bezier(.22,.75,.3,1) .05s both}
.hero-go .hero-title .t-a{animation:heroIn .62s cubic-bezier(.22,.75,.3,1) .18s both}
.hero-go .hero-title .t-h{animation:heroGoldIn .72s cubic-bezier(.22,.75,.3,1) .34s both}
.hero-go .hero-title .t-b{animation:heroIn .62s cubic-bezier(.22,.75,.3,1) .52s both}
.hero-go .hero-sub{animation:heroIn .6s cubic-bezier(.22,.75,.3,1) .68s both}
.hero-go .hero-ctas{animation:heroIn .6s cubic-bezier(.22,.75,.3,1) .8s both}
.hero-go .hero-feat{animation:heroIn .5s cubic-bezier(.22,.75,.3,1) .9s both}
.hero-go .hero-feat:nth-child(2){animation-delay:.98s}
.hero-go .hero-feat:nth-child(3){animation-delay:1.06s}
.hero-go .hero-feat:nth-child(4){animation-delay:1.14s}
.hero-go .hero-media-wrap{animation:heroMediaIn .85s cubic-bezier(.22,.75,.3,1) .42s both}
.hero-go .hero-shelf{animation:heroIn .6s cubic-bezier(.22,.75,.3,1) 1.02s backwards}
.hero-go .hs-card{animation:heroPopIn .5s cubic-bezier(.3,1.25,.4,1) 1.12s backwards}
.hero-go .hs-card:nth-child(2){animation-delay:1.2s}
.hero-go .hs-card:nth-child(3){animation-delay:1.28s}
.hero-go .hs-card:nth-child(4){animation-delay:1.36s}
/* Carga lenta: si la entrada ya corrió, la góndola aparece de inmediato */
.hero-go .hero-shelf.now{animation-delay:0s}
.hero-go .now .hs-card{animation-delay:0s}
@media (prefers-reduced-motion:reduce){.hero-go .hero-eyebrow,.hero-go .hero-title .t-a,.hero-go .hero-title .t-h,.hero-go .hero-title .t-b,.hero-go .hero-sub,.hero-go .hero-ctas,.hero-go .hero-feat,.hero-go .hero-media-wrap,.hero-go .hero-shelf,.hero-go .hs-card,.hero-go .hero-cordillera{animation:none}}
.hero-eyebrow{font-family:var(--fh);font-weight:700;font-size:clamp(11.5px,1vw,13px);letter-spacing:.15em;text-transform:uppercase;color:var(--oro-claro);margin-bottom:20px;display:flex;align-items:center;gap:11px}
.hero-eyebrow::before{content:"";width:28px;height:2px;background:var(--oro);border-radius:2px;flex:0 0 auto}
/* Titular en Oswald — señalización profesional de retail — con sombra de bloque
   sólida limpia y "mereces" apenas inclinada (el único gesto a mano) */
.hero-title{font-family:"Oswald",var(--fh),sans-serif;font-weight:600;line-height:1;display:flex;flex-direction:column;letter-spacing:.008em}
.hero-title .t-a{font-size:clamp(2.6rem,4.2vw,4.2rem);color:#fff;text-shadow:.04em .04em 0 var(--vino)}
.hero-title .t-h{font-size:clamp(3.4rem,6vw,5.8rem);color:var(--oro);text-shadow:.04em .04em 0 var(--vino);transform:rotate(-1.6deg);margin:.03em 0}
.hero-title .t-b{font-size:clamp(3rem,5.2vw,5rem);color:#fff;text-shadow:.04em .04em 0 var(--vino)}
.hero-sub{margin-top:22px;font-size:clamp(16.5px,1.3vw,20px);font-weight:600;color:var(--txt-suave);max-width:520px;line-height:1.5}
.hero-sub .sub-hl{color:var(--oro-claro);font-weight:800}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-cta{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--rojo);font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;padding:15px 28px;border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.3);transition:transform .16s,background .16s}
.hero-cta:hover{transform:translateY(-2px);background:var(--oro-claro)}
.hero-cta .hc-ic{display:inline-grid;place-items:center}
.hero-cta .hc-ic svg{width:17px;height:17px}
.hero-cta2{display:inline-flex;align-items:center;gap:8px;padding:15px 22px;border-radius:12px;border:1.6px solid #ffffff5c;color:#fff;font-weight:800;font-size:14.5px;transition:background .16s,border-color .16s}
.hero-cta2:hover{background:#ffffff1a;border-color:#fff}
.hero-cta2 svg{width:17px;height:17px}
.hero-feats{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:500px}
.hero-feat{display:flex;align-items:center;gap:11px;background:#ffffff12;border:1px solid #ffffff26;border-radius:12px;padding:9px 16px 9px 9px;text-align:left}
.hero-feat .fi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--oro-claro);background:#ffffff1c;flex:0 0 auto}
.hero-feat .fi svg{width:20px;height:20px}
.hero-feat b{font-size:13px;line-height:1.2;color:#fff;font-weight:800}

/* Vitrina: promo enmarcada + tarjetas flotantes (profundidad) */
.hero-media-wrap{position:relative}
/* Vitrina: estuche vino con filo dorado — el arte cálido revienta sobre el fondo oscuro */
.hero-media{position:relative;width:100%;background:linear-gradient(160deg,#8A1114,var(--vino) 70%);background:linear-gradient(160deg,color-mix(in srgb,var(--vino),#fff 12%),var(--vino) 70%);padding:clamp(10px,1vw,14px);border-radius:20px;transform:rotate(-1.2deg);box-shadow:0 36px 70px rgba(50,6,8,.55),0 0 0 1.5px rgba(253,183,29,.5)}
.hero-frame-in{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--rojo-osc)}
/* Etiqueta dorada colgada en la esquina del estuche */
.hero-media-tag{position:absolute;top:-13px;left:24px;z-index:6;display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,var(--oro-claro),var(--oro));color:#6B0B0F;font-family:var(--fh);font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:8px;box-shadow:0 8px 18px rgba(50,6,8,.42);transform:rotate(-2deg)}
.hero-media-tag i{font-style:normal;font-size:11px}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:block;z-index:1}
.hero-slide.was{opacity:1;transition:none}
.hero-slide.on{opacity:1;z-index:2}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-slide-dots{position:absolute;right:14px;bottom:12px;display:flex;gap:7px;z-index:4}
.hero-slide-dots i{width:8px;height:8px;border-radius:50%;background:#ffffff9c;transition:background .2s,transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.hero-slide-dots i.on{background:var(--oro-claro);transform:scale(1.3)}
.hero-photo-ph{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#ffd9d3;text-align:center;font-weight:700}
.hero-photo-ph svg{width:52px;height:52px;color:var(--oro)}
.hero-photo-ph small{font-weight:600;color:#f3b9af}
/* Góndola: estantería de productos bajo la promo, sobre repisa dorada */
.hero-shelf{margin-top:18px}
.hs-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;padding:0 10px}
/* Productos colocados a mano en la repisa: cada tarjeta con su propia inclinación,
   pivotando sobre la base; al pasar el mouse se endereza y levanta */
.hs-card{--tilt:-1.2deg;background:#fff;border-radius:10px 10px 0 0;padding:10px 9px 9px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;transform:rotate(var(--tilt));transform-origin:50% 100%;transition:transform .18s}
.hs-card:nth-child(2){--tilt:.9deg}
.hs-card:nth-child(3){--tilt:-.7deg}
.hs-card:nth-child(4){--tilt:1.2deg}
.hs-card:hover{transform:translateY(-5px) rotate(0deg)}
.hs-img{height:58px;display:flex;align-items:center;justify-content:center}
.hs-img img{max-height:100%;max-width:min(84px,100%);width:auto;height:auto;object-fit:contain}
.hs-img svg{width:28px;height:28px;color:#c9b48b}
.hs-name{font-size:11.5px;font-weight:800;color:#292120;line-height:1.15;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-price{font-family:"Oswald",var(--fh),sans-serif;font-weight:600;font-size:14px;color:#7C1215;background:linear-gradient(180deg,var(--oro-claro),var(--oro));border-radius:6px;padding:3px 10px;line-height:1.15;letter-spacing:.01em}
.hs-bar{height:9px;background:linear-gradient(180deg,var(--oro-claro),var(--oro));border-radius:0 0 9px 9px;box-shadow:0 12px 24px rgba(50,6,8,.35)}
.hs-caption{margin:9px 0 0;text-align:center;font-family:var(--fh);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff}

/* Onda dorada al pie del hero */
.hero-wave{position:absolute;left:0;bottom:-1px;width:100%;height:var(--wave);z-index:3;display:block}
.hero-wave .w-oro{fill:var(--oro)}
.hero-wave .w-fondo{fill:var(--rojo);fill:color-mix(in srgb,var(--rojo),#fff 6%)}

/* ============ OFERTAS DE LA SEMANA (rojo cálido · precios al frente) ============ */
.ofertas{position:relative;overflow:hidden;background:var(--vino);padding:0 0 calc(var(--wave) + 30px)}
.ofertas-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:8px var(--pad) 0}
/* Sello con el mejor descuento de la semana, pegado junto al título como sticker */
.of-sello{display:inline-block;background:linear-gradient(180deg,var(--oro-claro),var(--oro));color:#6B0B0F;font-family:"Oswald",var(--fh),sans-serif;font-weight:600;font-size:clamp(12px,1vw,14.5px);letter-spacing:.07em;text-transform:uppercase;padding:5px 12px;border-radius:7px;transform:rotate(-3deg);margin-left:16px;vertical-align:8px;box-shadow:0 6px 14px rgba(0,0,0,.32)}
.ofertas-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.ofertas-title{font-family:var(--fh);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.1rem);color:#fff;display:flex;align-items:center;gap:12px}
.ofertas-title .of-ic{color:var(--oro);display:inline-grid;place-items:center}
.ofertas-title .of-ic svg{width:26px;height:26px}
.ofertas-sub{color:var(--txt-suave);font-weight:700;font-size:14.5px;margin-top:3px;margin-left:38px}
.ofertas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
/* Tarjeta "Rúbrica de Oro": crema arriba (producto), vino abajo (precio dorado),
   unidos por el swoosh dorado de la marca; la base vino se funde con la banda */
/* Tarjeta "Hablador": blanca y serena arriba; el pie es la etiqueta amarilla de
   precio de góndola, con el borde superior apenas inclinado (pegada a mano) */
.oferta-card{position:relative;background:#fff;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 16px 34px rgba(0,0,0,.28);transition:transform .16s,box-shadow .16s}
.oferta-card:hover{transform:translateY(-5px);box-shadow:0 22px 42px rgba(0,0,0,.55)}
.oc-media{height:clamp(124px,9.4vw,156px);display:flex;align-items:center;justify-content:center;padding:16px 16px 4px}
.oc-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px}
.oc-media svg{width:38px;height:38px;color:#c9b48b}
.oc-body{padding:6px 16px 14px;flex:1}
.oc-name{font-family:var(--fh);font-weight:800;font-size:14.5px;color:#2A2018;line-height:1.2}
.oc-store{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:11.5px;font-weight:700;color:#8a7460}
.oc-store svg{width:13px;height:13px;color:#B3151B;flex:0 0 auto}
.oc-store.is-solo span{color:#B3151B}
.oc-foot{position:relative;background:var(--oro);padding:10px 16px 13px}
.oc-foot::before{content:"";position:absolute;left:0;right:0;top:-5px;height:12px;background:var(--oro);transform:skewY(-1.6deg)}
.oc-price{position:relative;display:flex;align-items:baseline;gap:9px}
.oc-now{font-family:"Oswald",var(--fh),sans-serif;font-weight:600;font-size:clamp(24px,1.9vw,28px);color:#B3151B;line-height:1;letter-spacing:.01em}
.oc-sub{display:inline-flex;flex-direction:column;line-height:1.25}
.oc-old{font-size:11.5px;font-weight:700;color:rgba(107,11,15,.68)}
.oc-save{font-size:11px;font-weight:800;color:#6B0B0F}
.oc-badge{position:absolute;right:10px;top:-19px;z-index:2;background:var(--rojo);color:#fff;font-family:"Oswald",var(--fh),sans-serif;font-weight:600;font-size:12px;padding:5px 9px;border-radius:7px;transform:rotate(4deg);box-shadow:0 4px 10px rgba(0,0,0,.3)}

/* ============ TIENDAS (sección negra + mapa) ============ */
.stores{position:relative;overflow:hidden;padding:28px 0 clamp(72px,8vw,132px);
  background:var(--rojo);
  background:radial-gradient(130% 92% at 60% 0%,color-mix(in srgb,var(--rojo),#fff 11%) 0%,var(--rojo) 48%,color-mix(in srgb,var(--rojo),#000 12%) 100%)}
.stores-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
/* Fondo de marca en Nuestras tiendas: cielo rojo + cordillera de Huaraz (igual que el hero) */
/* La cordillera llena TODA la sección (detrás de las tarjetas), no solo el pie */
.stores-cordillera{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.stores-cordillera .cd-a{fill:var(--rojo-osc);opacity:.9}
.stores-cordillera .cd-b{fill:#8E1015;fill:color-mix(in srgb,var(--rojo-osc),var(--vino) 55%)}
.stores-cordillera .cd-sum{stroke:var(--oro);stroke-width:4;stroke-linecap:round;opacity:.6;fill:none}
.stores-cordillera .cd-c{fill:var(--vino)}
.stores .stores-title{text-shadow:0 2px 12px rgba(74,9,12,.45)}
.stores #stores-cta{background:var(--oro);color:var(--vino);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.stores #stores-cta:hover{background:var(--oro-claro)}
.stores-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.stores-title{font-family:var(--fh);font-weight:800;font-size:clamp(1.7rem,2.8vw,2.25rem);color:#fff;display:flex;align-items:center;gap:12px}
.stores-title .pin-ic{color:var(--oro);display:inline-grid;place-items:center}
.stores-title .pin-ic svg{width:28px;height:28px}
.stores-sub{color:var(--txt-suave);font-weight:700;font-size:15px;margin-top:2px;margin-left:40px}
.stores-grid{display:grid;grid-template-columns:minmax(400px,31%) 1fr;gap:26px;align-items:stretch}
.stores-map-wrap{border-radius:18px;overflow:hidden;border:1px solid var(--linea-osc);background:#1B1817;min-height:340px;position:relative}
.stores-map{position:absolute;inset:0;background:#1B1817}

/* Leaflet en oscuro */
.stores-map .leaflet-container{background:#1B1817;font-family:var(--fb)}
.stores-map .leaflet-control-zoom{border:0;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.stores-map .leaflet-control-zoom a{background:var(--panel);color:#fff;border:1px solid var(--linea-osc);width:32px;height:32px;line-height:32px}
.stores-map .leaflet-control-zoom a:hover{background:#332c28}
.stores-map .leaflet-control-attribution{background:rgba(20,17,16,.75);color:#8d857f;font-size:9.5px}
.stores-map .leaflet-control-attribution a{color:#aca39c}
.tm-pin{text-align:center;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.tm-pin .pin-dot{position:relative;display:inline-grid;place-items:center;width:34px;height:34px;background:var(--rojo);border:2.5px solid #fff;border-radius:50%;font-family:var(--fh);font-weight:800;font-size:15.5px;color:#fff;transition:transform .16s,background .16s}
.tm-pin .pin-dot::after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);border:5.5px solid transparent;border-top:8px solid #fff}
.tm-pin .pin-name{display:inline-block;margin-top:12px;background:rgba(20,17,16,.88);border:1px solid #ffffff2c;color:#fff;font-weight:800;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap}
.tm-pin.active .pin-dot{transform:scale(1.14);background:var(--oro);color:#3a2400}
.tm-pin.active .pin-name{color:var(--oro-claro);border-color:var(--oro)}

/* Rótulos sobre el mapa */
.map-badge{position:absolute;top:14px;left:14px;z-index:800;display:flex;align-items:center;gap:8px;background:rgba(20,17,16,.88);border:1px solid #ffffff26;color:#fff;font-weight:800;font-size:13px;padding:8px 15px;border-radius:999px;backdrop-filter:blur(4px)}
.map-badge svg{width:15px;height:15px;color:var(--oro)}
.map-hint{position:absolute;bottom:14px;left:14px;z-index:800;background:rgba(20,17,16,.72);color:#b9b1ab;font-weight:600;font-size:11.5px;padding:6px 13px;border-radius:999px;border:1px solid #ffffff1a;backdrop-filter:blur(3px)}

/* Cómo llegar desde donde estoy: botón de ubicación, línea dorada y distancia */
.map-loc{position:absolute;top:14px;right:14px;z-index:800;display:inline-flex;align-items:center;gap:7px;background:var(--oro);color:#6B0B0F;font-weight:800;font-size:12px;padding:8px 13px;border-radius:9px;box-shadow:0 6px 14px rgba(0,0,0,.35);transition:transform .15s,background .15s}
.map-loc:hover{transform:translateY(-2px);background:var(--oro-claro)}
.map-loc svg{width:14px;height:14px}
.map-loc.busy{opacity:.6;pointer-events:none}
.map-dist{position:absolute;bottom:52px;left:14px;z-index:800;background:rgba(20,17,16,.85);border:1px solid #FDB71D55;color:#FDD53B;font-weight:800;font-size:12px;padding:7px 13px;border-radius:9px}
.tm-user{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px}
.tm-user .tu-man{position:relative;z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.tm-user::before{content:"";position:absolute;top:28px;left:50%;width:30px;height:11px;transform:translateX(-50%);border-radius:50%;background:rgba(253,183,29,.45);animation:userPulse 1.9s ease-out infinite;z-index:1}
.tu-txt{position:relative;z-index:2;background:rgba(20,17,16,.88);color:#FDD53B;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:6px;white-space:nowrap}
@keyframes userPulse{0%{transform:translateX(-50%) scale(.7);opacity:.8}100%{transform:translateX(-50%) scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.tm-user::before{animation:none;opacity:.4}}

/* La Ruta: las tiendas como paradas numeradas sobre el swoosh dorado */
.ruta{max-width:var(--max);margin:0 auto}
.ruta-line{position:relative;height:84px}
.ruta-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.rl-oro{fill:none;stroke:var(--oro);stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 3px 8px rgba(253,183,29,.28))}
.rt-dot{position:absolute;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:var(--rojo);color:#fff;font-family:"Oswald",var(--fh),sans-serif;font-weight:600;font-size:13px;display:grid;place-items:center;border:3px solid var(--vino);cursor:pointer;transition:transform .16s,background .16s;z-index:2}
.rt-dot:hover{transform:translateX(-50%) scale(1.12)}
.rt-dot.active{background:var(--oro);color:var(--negro)}
.ruta-cards{display:grid;grid-template-columns:repeat(var(--rcols,4),minmax(0,1fr));gap:12px;margin-top:14px}
.ruta-cards + .ruta-line{margin-top:28px}
/* Letrero con foto: placa vino oscuro, foto en duotono rojo de marca,
   y el nombre de la tienda elegida se ENCIENDE como letrero nocturno */
/* La foto de la tienda ES la tarjeta: fachada a toda altura, datos sobre el degradado */
.rt-card{position:relative;height:clamp(225px,16.5vw,268px);background:#3a0709;border:1px solid #7E1013;border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 12px 26px rgba(0,0,0,.4);transition:transform .16s,border-color .16s,box-shadow .16s}
.rt-card:hover{transform:translateY(-4px)}
.rt-card.active{border-color:#FDB71D99;box-shadow:0 0 0 2px #FDB71D55,0 12px 26px rgba(0,0,0,.45)}
.rt-thumb{position:absolute;inset:0;background:#3a0709;overflow:hidden}
/* La foto del local se muestra COMPLETA (contain); detrás, la misma foto difuminada rellena el marco */
.rt-thumb img{position:absolute;inset:0;width:100%;height:100%;display:block}
.rt-thumb .rt-bg{object-fit:cover;filter:blur(18px) brightness(.58);transform:scale(1.18)}
.rt-thumb .rt-ph{object-fit:contain}
.rt-thumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72%;background:linear-gradient(180deg,transparent,rgba(24,4,5,.5) 42%,rgba(24,4,5,.93));pointer-events:none}
.rt-body{position:relative;z-index:2;flex:0 0 auto;padding:0 14px 13px}
.rt-name{font-family:"Oswald",var(--fh),sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;color:#DCBBB0;text-transform:uppercase;transition:color .2s;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.rt-card.active .rt-name{color:#FBF3E4;text-shadow:0 0 7px rgba(222,31,38,.95),0 0 20px rgba(222,31,38,.55),0 0 42px rgba(222,31,38,.3);animation:signOn .42s ease-out}
@keyframes signOn{0%{opacity:.25}14%{opacity:1}24%{opacity:.4}38%{opacity:1}}
.rt-addr{display:flex;align-items:flex-start;gap:6px;margin-top:4px;font-size:11.5px;font-weight:600;color:#DFC3B8;line-height:1.35;text-shadow:0 1px 5px rgba(0,0,0,.5);cursor:pointer}
.rt-addr:hover span{color:#fff;text-decoration:underline}
.rt-addr svg{width:13px;height:13px;color:#E8656A;flex:0 0 auto;margin-top:1px}
.rt-hrs{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--oro-claro)}
.rt-hrs svg{width:13px;height:13px;flex:0 0 auto}
.rt-link{display:inline-block;margin-top:7px;font-size:12px;font-weight:800;color:var(--oro-claro);transition:color .15s}
.rt-link:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.rt-card.active .rt-name{animation:none}}
.ruta-toggle{display:flex;align-items:center;gap:8px;margin:16px auto 0;background:#ffffff12;border:1px solid #ffffff26;color:#fff;font-weight:800;font-size:13px;padding:10px 18px;border-radius:10px;transition:background .16s,border-color .16s}
.ruta-toggle:hover{background:#ffffff1f;border-color:#ffffff40}
.ruta-toggle svg{width:15px;height:15px;color:var(--oro)}
.ruta-mapa{max-height:0;overflow:hidden;transition:max-height .45s ease,margin-top .45s ease;margin-top:0}
.ruta-mapa.open{max-height:440px;margin-top:18px}
.ruta-mapa .stores-map-wrap{position:relative;height:400px;border-radius:14px;overflow:hidden;border:1px solid var(--linea-osc)}
.ruta-mapa .stores-map{height:100%}
@media (prefers-reduced-motion:reduce){.ruta-mapa{transition:none}}
@media (max-width:820px){
  .ruta-line{display:none}
  .ruta-cards{grid-template-columns:1fr 1fr;margin-top:12px}
  .rt-name{font-size:14px}
  .rt-card{height:212px}
}

/* Carrusel de tiendas */
.stores-car{position:relative;min-width:0;display:flex;align-items:stretch}
.stores-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px;flex:1}
.stores-track::-webkit-scrollbar{display:none}
.store-card{scroll-snap-align:start;flex:0 0 clamp(250px,21vw,320px);background:var(--panel);border:1px solid var(--linea-osc);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s,transform .18s;cursor:pointer}
.store-card:hover{transform:translateY(-3px)}
.store-card.active{border-color:var(--oro)}
.store-thumb{height:clamp(140px,10.5vw,168px);background:#2a2422;position:relative}
.store-thumb img{width:100%;height:100%;object-fit:cover}
.store-num{position:absolute;top:10px;left:10px;width:31px;height:31px;border-radius:50%;background:var(--rojo);border:2px solid #fff;color:#fff;font-family:var(--fh);font-weight:800;font-size:15px;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.45);transition:background .16s,color .16s}
.store-card.active .store-num{background:var(--oro);color:#3a2400}
.store-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.store-body .store-btn{margin-top:6px}
.store-name{display:flex;align-items:center;gap:7px;font-family:var(--fh);font-weight:800;font-size:17px;color:#fff}
.store-name svg{width:16px;height:16px;color:var(--rojo);flex:0 0 auto}
.store-meta{display:flex;gap:8px;align-items:flex-start;color:var(--txt-gris);font-size:13px;font-weight:600;line-height:1.35}
.store-meta svg{width:14px;height:14px;color:var(--rojo);flex:0 0 auto;margin-top:2px}
.store-btn{margin-top:auto;display:block;text-align:center;background:#fff;color:#231d1b;font-weight:800;font-size:13.5px;padding:10px;border-radius:10px;transition:background .15s}
.store-btn:hover{background:var(--oro-claro)}

/* Flechas y puntos de carrusel */
.car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;background:#ffffff14;border:1px solid #ffffff30;color:#fff;display:grid;place-items:center;backdrop-filter:blur(3px);transition:background .15s,color .15s}
.car-btn:hover{background:var(--oro);color:#3a2400;border-color:var(--oro)}
.car-btn svg{width:19px;height:19px}
.car-prev{left:-10px}
.car-next{right:-10px}
.car-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.car-dots button{width:9px;height:9px;border-radius:50%;background:#463F3A;transition:background .15s,transform .15s;padding:0}
.car-dots button.active{background:var(--oro);transform:scale(1.2)}

/* ============ FRANJA DE CONFIANZA (dorada) ============ */
.trust{position:relative;background:linear-gradient(180deg,var(--oro-claro),var(--oro));overflow:hidden}
.trust-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:28px var(--pad);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(24px,3vw,56px)}
.trust-kicker{display:flex;align-items:center;gap:7px;font-weight:800;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#B92025}
.trust-kicker i{font-style:normal;font-size:13px}
.trust-head h3{font-family:var(--fh);font-weight:800;font-size:clamp(1.25rem,1.65vw,1.65rem);line-height:1.12;color:#7C1215;max-width:340px;margin-top:5px}
.trust-items{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:13px;padding:6px clamp(18px,2.2vw,42px);border-left:1.5px solid rgba(124,18,21,.16)}
.trust-item:first-child{border-left:0;padding-left:0}
.trust-item .ti-ic{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#E8353B 0%,#B92025 80%);color:#fff;display:grid;place-items:center;box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 8px 16px rgba(124,18,21,.3);flex:0 0 auto}
.trust-item .ti-ic svg{width:24px;height:24px}
.trust-item b{display:block;font-family:var(--fh);font-weight:800;font-size:16.5px;color:#7C1215;line-height:1.12}
.trust-item div>span{display:block;font-weight:700;font-size:12.5px;color:#8A5B12;margin-top:2px}
.trust-cta{display:inline-flex;align-items:center;gap:10px;justify-self:end;background:#B92025;color:#fff;font-weight:800;font-size:14.5px;padding:15px 30px;border-radius:999px;box-shadow:0 12px 26px rgba(124,18,21,.35);transition:transform .16s,background .16s}
.trust-cta:hover{transform:translateY(-2px);background:var(--rojo)}
.trust-cta svg{width:20px;height:20px}

/* ============ Encabezados de sección (zona clara de compra) ============ */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:26px}
.sec-title{font-family:var(--fh);font-weight:800;font-size:clamp(1.7rem,2.8vw,2.2rem);color:#2A2018}
.sec-sub{color:var(--rojo);font-weight:700;font-size:15px;margin-top:3px}

/* ============ PRODUCTOS (fondo claro para que resalten) ============ */
.products{position:relative;overflow:hidden;padding:40px 0 clamp(32px,3.5vw,52px);
  background:var(--rojo);
  background:radial-gradient(130% 92% at 40% 0%,color-mix(in srgb,var(--rojo),#fff 11%) 0%,var(--rojo) 48%,color-mix(in srgb,var(--rojo),#000 12%) 100%)}
.products-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
/* Paisaje Trujillo: cielo rojo + cordillera detrás de todas las tarjetas (une con Tiendas) */
.products-cordillera{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.products-cordillera .cd-a{fill:var(--rojo-osc);opacity:.9}
.products-cordillera .cd-b{fill:#8E1015;fill:color-mix(in srgb,var(--rojo-osc),var(--vino) 55%)}
.products-cordillera .cd-sum{stroke:var(--oro);stroke-width:4;stroke-linecap:round;opacity:.6;fill:none}
.products-cordillera .cd-c{fill:var(--vino)}
.products .sec-title{color:#fff;text-shadow:0 2px 12px rgba(74,9,12,.45)}
.products .sec-sub{color:var(--txt-suave)}
.products .pgc{background:#FFFDF7;box-shadow:0 16px 36px rgba(40,4,6,.34)}
.products .pgc:hover{box-shadow:0 24px 46px rgba(40,4,6,.45)}
.products .pgc-save{color:#8a5a12}
.products .prods-status{color:var(--crema)}
.products .prods-status .ps-count b{color:var(--oro-claro)}

/* Productos: carrusel horizontal compacto (una fila que se desliza, tipo estante) */
.prods-grid{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 2px 22px;scroll-padding-left:2px}
.prods-grid::-webkit-scrollbar{height:0}
/* Al buscar, se muestran todas las coincidencias en cuadrícula */
.products.searching .prods-grid{flex-wrap:wrap;overflow:visible;justify-content:center}
.pgc{flex:0 0 clamp(192px,14.5vw,216px);scroll-snap-align:start;display:flex;flex-direction:column;background:#FFFDF7;border:1px solid rgba(42,32,24,.07);border-radius:14px;overflow:hidden;box-shadow:0 12px 26px rgba(124,18,21,.10);transition:box-shadow .16s}
.pgc:hover{box-shadow:0 20px 40px rgba(40,4,6,.4)}
.pgc.hide{display:none}
.pgc-media{position:relative;height:clamp(140px,10vw,166px);background:#fff;border-bottom:1px solid #f1ece3;display:flex;align-items:center;justify-content:center;padding:14px}
.pgc-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .22s}
.pgc:hover .pgc-media img{transform:scale(1.05)}
.pgc-badge{position:absolute;top:12px;left:12px;background:var(--rojo);color:#fff;font-family:"Oswald",var(--fh),sans-serif;font-weight:600;font-size:11px;letter-spacing:.05em;padding:4px 10px;border-radius:7px;transform:rotate(-3deg);box-shadow:0 4px 10px rgba(0,0,0,.22)}
.pgc-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;flex:1}
.pgc-name{font-family:var(--fh);font-weight:800;font-size:15px;color:#292120;line-height:1.15}
.pgc-brand{font-weight:700;font-size:12.5px;color:#9a8f89}
.pgc-price{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:11px}
.pgc-tag{position:relative;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,var(--oro-claro),var(--oro));border-radius:10px;padding:6px 13px;box-shadow:0 5px 12px rgba(224,155,0,.30)}
.pgc-star{color:var(--rojo);font-size:12px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.pgc-now{font-family:var(--fh);font-weight:800;font-size:18px;color:#7C1215;line-height:1;white-space:nowrap}
.pgc-old{font-size:12px;font-weight:700;color:#9a8f89;text-decoration:line-through}
.pgc-save{font-size:11px;font-weight:800;color:#1f7a44;margin-top:5px}
/* Pantallas anchas: tarjetas más grandes para mantener 4 por fila (fila final más llena) */
@media (max-width:680px){
  .prods-grid{gap:12px}
  .pgc{flex-basis:clamp(156px,44vw,190px)}
  .products.searching .pgc{flex-basis:calc(50% - 6px)}
  .pgc-media{height:clamp(128px,34vw,160px);padding:12px}
  .pgc-name{font-size:14px}
  .pgc-now{font-size:18px}
}

.prods-wrap{position:relative}
.prods-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 12px}
.prods-track::-webkit-scrollbar{display:none}
.prod-card{scroll-snap-align:start;position:relative;flex:0 0 clamp(204px,15.4vw,240px);background:#fff;border:1px solid rgba(42,32,24,.06);border-radius:14px;padding:14px 14px 16px;display:flex;flex-direction:column;gap:3px;color:#292120;box-shadow:0 12px 26px rgba(124,18,21,.10);transition:transform .16s,box-shadow .16s}
.prod-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(124,18,21,.16)}
.prod-badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--rojo);color:#fff;font-family:"Oswald",var(--fh),sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.05em;padding:5px 11px;border-radius:7px;transform:rotate(-3deg);box-shadow:0 5px 12px rgba(0,0,0,.25)}
.prod-media{height:clamp(150px,11.4vw,180px);display:flex;align-items:center;justify-content:center;margin-bottom:8px;overflow:hidden}
.prod-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.prod-name{font-weight:800;font-size:14.5px;line-height:1.2;color:#292120}
.prod-brand{font-weight:700;font-size:12.5px;color:#9a8f89;margin-bottom:2px}
.prod-price{display:flex;align-items:baseline;gap:8px;margin:6px 0 0}
.pp-now{font-family:var(--fh);font-weight:800;font-size:22px;color:var(--rojo);line-height:1;white-space:nowrap}
.pp-old{font-size:12.5px;font-weight:700;color:#9a8f89;text-decoration:line-through;white-space:nowrap}
.prod-save{font-size:11.5px;font-weight:800;color:#1f7a44;margin-top:3px}
.prods-next{right:-8px;background:#fff;border-color:rgba(42,32,24,.14);color:var(--rojo);box-shadow:0 8px 20px rgba(124,18,21,.18)}

/* Estado de búsqueda: catálogo en grilla + barra de resultados */
.prods-status{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:-4px 0 20px;color:#2A2018}
.prods-status .ps-count{font-family:var(--fh);font-weight:800;font-size:16px}
.prods-status .ps-count b{color:var(--rojo)}
.prods-status .ps-clear{display:inline-flex;align-items:center;gap:7px;background:var(--rojo);color:#fff;font-weight:800;font-size:13px;padding:8px 15px;border-radius:10px;box-shadow:0 8px 18px rgba(124,18,21,.24);transition:background .15s,transform .15s}
.prods-status .ps-clear:hover{background:var(--rojo-osc);transform:translateY(-1px)}
.prods-status .ps-clear svg{width:15px;height:15px}
.prods-status.empty .ps-count b{color:var(--rojo)}
.products.searching .prods-track{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
.products.searching .prods-track .prod-card{flex:0 0 clamp(204px,15.4vw,240px)}
.products.searching .prods-next{display:none}
.prod-card.hide{display:none}

/* ============ CATEGORÍAS (fondo claro) ============ */
.cats{background:var(--crema);padding:48px 0 64px}
.cats-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat-chip{display:flex;align-items:center;gap:12px;background:#FFFDF7;border:1px solid rgba(42,32,24,.07);border-radius:999px;padding:10px 18px 10px 10px;box-shadow:0 8px 20px rgba(124,18,21,.08);transition:transform .16s,box-shadow .16s}
.cat-chip:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(124,18,21,.15)}
.cc-medal{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,var(--oro-claro),var(--oro));color:#9E1B1F;display:grid;place-items:center;line-height:1;box-shadow:0 4px 10px rgba(224,155,0,.3)}
.cc-medal svg{width:23px;height:23px}
.cc-name{flex:1;font-family:var(--fh);font-weight:800;font-size:15.5px;color:#292120;line-height:1.1}
.cc-go{flex:0 0 auto;color:var(--rojo);display:grid;place-items:center;opacity:.5;transition:opacity .16s,transform .16s}
.cat-chip:hover .cc-go{opacity:1;transform:translateX(3px)}
.cc-go svg{width:17px;height:17px}
@media (min-width:1700px){.cats-grid{grid-template-columns:repeat(8,1fr)}}
@media (max-width:900px){.cats-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.cats-grid{grid-template-columns:1fr}}

/* ============ COMPROMISO (sección oscura · ancla de marca) ============ */
/* ===== Experiencia del cliente — vino premium (cierre de confianza) ===== */
.commit{position:relative;overflow:hidden;padding:clamp(52px,6vw,84px) var(--pad) clamp(58px,6vw,92px);
  background:var(--rojo);
  background:radial-gradient(130% 92% at 50% 0%,color-mix(in srgb,var(--rojo),#fff 11%) 0%,var(--rojo) 48%,color-mix(in srgb,var(--rojo),#000 12%) 100%)}
.commit-cordillera{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.commit-cordillera .cd-a{fill:var(--rojo-osc);opacity:.9}
.commit-cordillera .cd-b{fill:#8E1015;fill:color-mix(in srgb,var(--rojo-osc),var(--vino) 55%)}
.commit-cordillera .cd-sum{stroke:var(--oro);stroke-width:4;stroke-linecap:round;opacity:.5;fill:none}
.commit-cordillera .cd-c{fill:var(--vino)}
.commit-kicker,.commit-h,.cstat b,.cstat span{text-shadow:0 2px 12px rgba(74,9,12,.5)}
.commit-hero{position:relative;z-index:1;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:clamp(26px,3vw,56px);align-items:center}
.commit-media{position:relative;border-radius:20px;overflow:hidden;min-height:clamp(280px,27vw,410px);border:1px solid rgba(253,183,29,.22);box-shadow:0 26px 56px rgba(0,0,0,.5)}
.commit-media img,.commit-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.commit-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(43,7,9,.55))}
.commit-sound{position:absolute;right:12px;bottom:12px;z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(20,4,6,.55);border:1.5px solid rgba(253,183,29,.6);color:var(--oro);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(3px);transition:background .16s,color .16s,transform .16s}
.commit-sound:hover{background:var(--oro);color:var(--vino);transform:scale(1.07)}
.commit-sound:focus-visible{outline:2px solid var(--oro-claro);outline-offset:2px}
.commit-sound svg{width:18px;height:18px}
.commit-intro{display:flex;flex-direction:column;align-items:flex-start}
.commit-kicker{display:flex;align-items:center;gap:9px;font-family:"Oswald",var(--fh),sans-serif;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-claro)}
.commit-kicker::before{content:"\2726";color:var(--oro);font-size:14px}
.commit-h{font-weight:600;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.02;color:var(--crema);margin-top:12px;text-transform:uppercase}
.commit-h .gold{color:var(--oro)}
.commit-grid{position:relative;z-index:1;max-width:var(--max);margin:clamp(34px,3.8vw,58px) auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,1.6vw,24px)}
.commit-item{display:flex;flex-direction:row;gap:15px;align-items:center;background:rgba(74,9,12,.42);border:1px solid rgba(253,183,29,.3);border-radius:14px;padding:18px 20px;box-shadow:0 12px 26px rgba(40,4,6,.25)}
.commit-item .ks{width:50px;height:50px;border-radius:50%;background:linear-gradient(180deg,var(--oro-claro),var(--oro));color:#7C1215;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 6px 14px rgba(0,0,0,.32)}
.commit-item .ks svg{width:25px;height:25px}
.commit-item b{display:block;font-family:"Oswald",var(--fh),sans-serif;font-weight:600;text-transform:uppercase;font-size:15.5px;letter-spacing:.01em;color:#fff}
.commit-item p{font-size:12.5px;font-weight:600;color:var(--txt-suave);line-height:1.45;margin-top:3px}
.commit-stats{display:flex;gap:clamp(20px,2.6vw,46px);flex-wrap:wrap;margin:24px 0 26px}
.cstat{max-width:132px}
.cstat b{font-family:"Oswald",var(--fh),sans-serif;font-weight:700;font-size:clamp(2rem,3vw,2.9rem);color:var(--oro);line-height:.82;display:block}
.cstat span{display:block;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-suave);margin-top:6px}
.commit-cta{font-family:"Oswald",var(--fh),sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:15px;padding:14px 28px}

/* Testimonios: tarjetas crema que resaltan sobre el vino */
.testis{position:relative;z-index:1;max-width:var(--max);margin:clamp(30px,3.4vw,50px) auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.testi{position:relative;background:var(--crema);border-radius:14px;padding:24px 22px 20px;box-shadow:0 18px 34px rgba(0,0,0,.3)}
.testi-stars{display:flex;gap:2px;color:var(--oro);margin-bottom:10px}
.testi::before{content:"\201C";position:absolute;top:10px;right:20px;font-family:Georgia,serif;font-size:56px;line-height:1;color:var(--oro);opacity:.26;pointer-events:none}
.testi blockquote{position:relative;font-size:14.5px;font-weight:600;color:#4a3a33;line-height:1.5;margin:0 0 16px}
.testi figcaption{display:flex;align-items:center;gap:12px}
.testi-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,var(--oro-claro),var(--oro));color:#7C1215;font-family:"Oswald",var(--fh),sans-serif;font-weight:700;font-size:18px;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 5px 12px rgba(124,18,21,.22)}
.testi figcaption b{display:block;font-family:"Oswald",var(--fh),sans-serif;font-weight:600;text-transform:uppercase;font-size:14px;color:#2a1a16}
.testi figcaption span span{display:block;font-size:12px;font-weight:700;color:#9a7038;margin-top:1px}

/* ============ FOOTER ============ */
.footer{background:var(--rojo);background:radial-gradient(130% 95% at 60% 0%,color-mix(in srgb,var(--rojo),#fff 11%) 0%,var(--rojo) 50%,color-mix(in srgb,var(--rojo),#000 12%) 100%)}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--oro) 30%,var(--oro-claro) 50%,var(--oro) 70%,transparent);z-index:2}

/* Newsletter (tarjeta dorada) */

.footer-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:clamp(44px,4.6vw,68px) var(--pad) clamp(30px,3vw,40px);display:grid;grid-template-columns:1.25fr .78fr .74fr .95fr .66fr;gap:clamp(24px,2.6vw,48px)}
.foot-brand .logo-box .logo-1{font-size:44px}
.foot-slogan{font-family:var(--fh);font-weight:700;color:var(--oro-claro);font-size:15.5px;margin-top:8px}
.foot-desc{margin-top:10px;color:var(--txt-suave);font-weight:600;font-size:13.5px;max-width:280px;line-height:1.5}
.foot-col h4{position:relative;font-family:"Oswald",var(--fh),sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:15px;color:#fff;margin-bottom:18px;padding-bottom:10px}
.foot-col h4::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--oro);border-radius:2px}
.foot-col ul{display:flex;flex-direction:column;gap:9px}
.foot-col ul a{color:var(--txt-suave);font-weight:700;font-size:13.5px;transition:color .14s}
.foot-col ul a:hover{color:var(--oro-claro)}
.foot-links-2col{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.foot-social li a{display:flex;align-items:center;gap:10px}
.foot-social .si{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--rojo);display:grid;place-items:center;flex:0 0 auto}
.foot-social .si svg{width:15px;height:15px}
.foot-contact li{display:flex;align-items:center;gap:10px;color:var(--txt-suave);font-weight:700;font-size:13.5px}
.foot-contact .si{width:30px;height:30px;border-radius:50%;background:#ffffff22;border:1px solid #ffffff38;color:#fff;display:grid;place-items:center;flex:0 0 auto}
.foot-contact .si svg{width:14px;height:14px}
.foot-contact .si .msym{font-size:15px}
.foot-pay{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:22px var(--pad);display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(253,183,29,.16)}
.foot-pay>span{font-family:"Oswald",var(--fh),sans-serif;font-weight:600;font-size:12px;color:var(--txt-suave);letter-spacing:.1em;text-transform:uppercase}
.pay-chips{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pay-b{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:9px;padding:0 13px;height:36px;box-shadow:0 4px 11px rgba(0,0,0,.2);font-family:var(--fb),sans-serif}
.pay-b .pb-txt{font-weight:800;font-size:13px;color:#2a2018;line-height:1}
.pay-b-img{padding:0 11px}
.pay-b-img img{height:22px;width:auto;max-width:82px;object-fit:contain;display:block}
.pb-yape{font-family:"Baloo 2",var(--fb),sans-serif;font-weight:800;font-size:16px;color:#742384;letter-spacing:-.3px;line-height:1}
.pb-plin{font-family:"Baloo 2",var(--fb),sans-serif;font-weight:800;font-size:16px;color:#0FB5AE;line-height:1}
.pb-visa{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:800;font-size:16px;color:#1A1F71;letter-spacing:.5px;line-height:1}
.pb-cash{width:20px;height:20px;color:#1f7a44;flex:0 0 auto}
.pb-mc{position:relative;display:inline-block;width:31px;height:20px;flex:0 0 auto}
.pb-mc i{position:absolute;top:0;width:20px;height:20px;border-radius:50%}
.pb-mc i:first-child{left:0;background:#EB001B}
.pb-mc i:last-child{right:0;background:#F79E1B;mix-blend-mode:multiply}
.footer-bar{border-top:1px solid #ffffff36;padding:15px;text-align:center;color:var(--txt-suave);font-weight:600;font-size:12.5px}
.toast .msym{font-size:18px;color:var(--oro)}


/* ============ Ventana de tienda (modal) ============ */
.smodal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.smodal[hidden]{display:none}
.smodal-back{position:absolute;inset:0;background:rgba(10,7,6,.66);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s}
.smodal.show .smodal-back{opacity:1}
.smodal-card{position:relative;z-index:1;display:block;width:min(560px,100%);max-height:92vh;overflow:auto;opacity:0;transform:translateY(16px) scale(.97);transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .26s}
.smodal-card::-webkit-scrollbar{width:0}
.smodal.show .smodal-card{opacity:1;transform:none}
.smodal-card::-webkit-scrollbar{width:0}
.smodal-x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(20,17,16,.6);border:1px solid #ffffff2c;color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .16s,transform .2s}
.smodal-x:hover{background:var(--rojo);transform:rotate(90deg)}
.smodal-x svg{width:20px;height:20px}
/* Galería panorámica: fachada + interior lado a lado, a todo el ancho.
   Las fotos de los locales son letreros anchos — nunca meterlas en marcos verticales. */
.smodal-gal{display:flex;flex-direction:row;height:clamp(240px,34vw,330px);background:#2a2422;flex:0 0 auto}
.smodal-media{position:relative;flex:1.45;min-width:0;background:#2a2422;overflow:hidden}
/* Fotos COMPLETAS: contain al frente, la misma foto difuminada de relleno atrás */
.smodal-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.smodal-media .sm-bg{object-fit:cover;filter:blur(20px) brightness(.55);transform:scale(1.16)}
.smodal-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(20,17,16,.45) 100%)}
.smodal-media-in{flex:1;border-left:3px solid var(--oro)}
.smodal-media-in::after{background:linear-gradient(180deg,transparent 68%,rgba(20,17,16,.4) 100%)}
/* Sin foto interior aún: la fachada se luce sola como banner completo */
.smodal-card.solo .smodal-gal{height:clamp(250px,37vw,352px)}
.sm-tag-in{position:absolute;left:13px;top:12px;z-index:2;background:var(--oro);color:var(--vino);font-family:"Oswald",var(--fh);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.07em;padding:5px 11px;border-radius:6px;transform:rotate(-2deg);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.sm-num{position:absolute;left:18px;bottom:14px;z-index:2;width:40px;height:40px;border-radius:50%;background:var(--rojo);border:2.5px solid #fff;color:#fff;font-family:var(--fh);font-weight:800;font-size:18px;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.smodal-body{padding:26px 30px 28px;display:grid;grid-template-columns:1.1fr .9fr;gap:12px 34px;align-items:start}
.sm-kicker{display:flex;align-items:center;gap:7px;font-family:var(--fh);font-weight:700;font-size:12.5px;color:var(--oro-claro);text-transform:uppercase;letter-spacing:.14em}
.sm-kicker i{font-style:normal}
.sm-name{font-family:"Oswald",var(--fh);font-weight:600;text-transform:uppercase;font-size:clamp(1.9rem,3.4vw,2.4rem);color:#fff;margin:7px 0 16px;line-height:1.04;letter-spacing:.01em}
.sm-rows{display:flex;flex-direction:column;gap:11px}
.sm-row{display:flex;align-items:flex-start;gap:12px;color:var(--txt-suave);font-weight:600;font-size:15px;line-height:1.45}
.sm-row .sm-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:#ffffff10;border:1px solid #ffffff1f;color:var(--oro);display:grid;place-items:center;margin-top:1px}
.sm-row .sm-ic svg{width:17px;height:17px}
.smodal-side{display:flex;flex-direction:column;padding-top:6px}
/* Horario = hablador dorado (etiqueta de góndola de la marca) */
.sm-horario{position:relative;display:flex;align-items:center;gap:10px;background:var(--oro);color:var(--vino);font-weight:800;font-size:14.5px;padding:13px 16px;border-radius:0 0 8px 8px;margin:5px 0 16px}
.sm-horario::before{content:"";position:absolute;left:0;right:0;top:-5px;height:10px;background:var(--oro);transform:skewY(-1.4deg);border-radius:8px 8px 0 0}
.sm-horario svg{position:relative;width:18px;height:18px;flex:0 0 auto}
.sm-horario span{position:relative}
.sm-actions{display:flex;flex-direction:column;gap:10px}
.sm-btn{display:flex;align-items:center;justify-content:center;gap:9px;font-family:"Oswald",var(--fh);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:15px;padding:14px;border-radius:12px;transition:transform .15s,background .15s,box-shadow .15s;white-space:nowrap}
.sm-btn svg{width:18px;height:18px}
.sm-go{background:linear-gradient(180deg,var(--rojo),var(--rojo-osc));color:#fff;box-shadow:0 12px 26px rgba(222,31,38,.32)}
.sm-go:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(222,31,38,.44)}
.sm-map{background:transparent;border:1.5px solid #ffffff2e;color:var(--crema)}
.sm-map:hover{background:#ffffff14}
@media (max-width:760px){
  .smodal-card{width:min(560px,100%)}
  .smodal-gal{flex-direction:column;height:auto}
  .smodal-media{flex:0 0 auto;height:190px}
  .smodal-media-in{border-left:0;border-top:3px solid var(--oro);height:150px}
  .smodal-card.solo .smodal-gal{height:auto}
  .smodal-card.solo .smodal-media{height:210px}
  .sm-tag-in{left:10px;top:10px;font-size:10.5px;padding:4px 9px}
  .smodal-body{grid-template-columns:1fr;padding:20px 22px 22px;gap:8px}
  .smodal-side{padding-top:0}
  .sm-name{margin-bottom:12px}
  .sm-rows{margin-bottom:10px}
}
@media (max-width:520px){
  .smodal{padding:10px}
  .smodal-card{width:100%;max-height:94vh}
}
@media (prefers-reduced-motion:reduce){
  .smodal-back{transition:opacity .01s}
  .smodal-card{transition:opacity .01s;transform:none}
  .smodal.show .smodal-card{transform:none}
}

/* ============ Toast ============ */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:var(--negro);color:#fff;padding:12px 20px;border-radius:12px;display:flex;gap:10px;align-items:center;font-weight:700;font-size:14px;box-shadow:var(--sombra);opacity:0;transition:opacity .2s,transform .2s;z-index:90}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:var(--oro)}

/* ============ Animación de aparición ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ============ Responsive ============ */
/* El buscador toma protagonismo: el menú pasa al cajón lateral antes */
@media (max-width:1180px){
  .nav{display:none}
  .header-socials{display:none}
  .burger{display:grid;place-items:center;margin-left:auto}
  .search{max-width:none}
}
@media (max-width:1120px){
  .stores-grid{grid-template-columns:340px 1fr}
  .footer-in{grid-template-columns:1.2fr 1fr 1fr}
  .foot-col:last-child{grid-column:auto}
}
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:clamp(36px,7vw,52px);padding-bottom:58px}
  .hero-copy{max-width:none}
  .hero-sub{max-width:none}
  .hero-media-wrap{max-width:600px}
  .stores-grid{grid-template-columns:1fr}
  .stores-map-wrap{min-height:320px}
  .stores-sub{margin-left:0}
  .trust-in{grid-template-columns:1fr;gap:18px}
  .trust-items{justify-content:flex-start}
  .trust-item{padding:6px 22px 6px 0;border-left:0}
  .trust-cta{justify-self:start}
  .commit-hero{grid-template-columns:1fr}
  .commit-grid{grid-template-columns:1fr}
  .commit-media{min-height:230px}
  .footer-in{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .header-in{padding:12px 18px;gap:12px 14px}
  .search{flex:1 1 100%;max-width:none;order:5;height:44px}
  .hero-in,.stores-in,.products-in,.cats-in{padding-left:18px;padding-right:18px}
  .hero-feats{gap:12px 18px}
  .hs-img{height:46px}
  .hs-cards{gap:7px;padding:0 7px}
  .hero-media-tag{font-size:11px;padding:6px 12px;left:14px}
  .sec-head,.stores-head{flex-direction:column;align-items:flex-start}
  .commit-grid{grid-template-columns:1fr;gap:16px}
  .footer-in{grid-template-columns:1fr 1fr;gap:24px 20px}
  .foot-brand{grid-column:1 / -1}
  .foot-brand .logo-box .logo-1{font-size:34px}
  .foot-desc{max-width:none}
  .foot-links-2col{grid-template-columns:1fr}
  .foot-col{min-width:0}
  .foot-col ul a,.foot-contact li{overflow-wrap:anywhere}
  .foot-pay{flex-direction:column;gap:12px}
  .car-prev{left:-6px}
  .car-next{right:-6px}
}
@media (max-width:480px){
  .ruta-cards{grid-template-columns:1fr}
  .rt-card{height:clamp(180px,50vw,212px)}
  .rt-name{font-size:17px}
  .rt-addr{font-size:12.5px}
  .rt-hrs,.rt-link{font-size:12px}
  .footer-in{grid-template-columns:1fr 1fr}
}

/* Tamaños de los íconos Material por contenedor */
.burger .msym{font-size:24px}
.drawer-x .msym{font-size:22px}
.hero-cta .hc-ic .msym{font-size:18px}
.hero-feat .fi .msym{font-size:32px}
.hero-photo-ph .msym{font-size:52px;color:var(--oro)}
.stores-title .pin-ic .msym{font-size:30px}
.store-name .msym{font-size:17px;color:var(--rojo)}
.store-meta .msym{font-size:15px;color:var(--rojo);margin-top:1px}
.car-btn .msym{font-size:21px}
.map-badge .msym{font-size:16px}
.cat-card .ci .msym{font-size:37px}
.commit-item .ki .msym{font-size:31px}
.trust-item .ti-ic .msym{font-size:26px}

/* Refuerzo: imágenes siempre adaptadas a su contenedor */
.hero-photo img,.hero-slide img,.store-thumb img{width:100%;height:100%;object-fit:cover;object-position:center}
.prod-media img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.logo-box img.logo-img{width:auto}

/* Oswald unifica los titulos de seccion con el titular (señalización de retail) */
.ofertas-title,.stores-title,.sec-title,.commit-h{font-family:"Oswald",var(--fh),sans-serif;font-weight:600;letter-spacing:.02em}