/* Gustamar: claridad, cercanía y producto. Paleta de trabajo basada en activos existentes. */
:root { --brand-ink:#203668; --brand-blue:#3555c5; --brand-muted:#50616a; --brand-paper:#faf7f0; --brand-orange:#b94316; --brand-line:#e3e4dd; --brand-sea:#eaf3ef; }
html, .brand-site { background:var(--brand-paper); color:var(--brand-ink); }
.brand-site { font-size:16px; }
.brand-site h1,.brand-site h2,.brand-site h3 { letter-spacing:-.035em; }
.brand-site :focus-visible { outline:3px solid #b94316; outline-offset:4px; }
.skip-link { position:fixed;top:-100px;left:16px;z-index:10000;background:white;padding:12px 20px; }
.skip-link:focus { top:8px; }
.brand-site .sticky-header { background:#fff; box-shadow:none; border-bottom:1px solid var(--brand-line); }
.brand-site header img[alt="Gustamar"], .brand-site #location-modal img, .brand-site #splash-screen img { background:transparent; padding:6px 0; border-radius:0; width:160px; height:auto; max-width:100%; filter:none; box-shadow:none; }
.brand-site header img[alt="Gustamar"] { display:block; }
.brand-site header input { border-color:var(--brand-line); background:#f8faf8; box-shadow:none; }
.brand-site #search-btn { background:var(--brand-ink); }
.brand-site header .header-icon-btn { color:var(--brand-ink); background:transparent; border-color:transparent; box-shadow:none; }
.brand-site .animate-on-scroll { opacity:1; transform:none; }
.eyebrow { font-size:11px; font-weight:750; letter-spacing:.17em; line-height:1.5; color:#7d491f; margin:0 0 16px; text-transform:uppercase; }
.brand-showcase { max-width:1200px; margin:auto; padding:64px 32px 52px; }
.brand-intro { max-width:800px; margin:0 auto 48px; text-align:center; }
.brand-intro h1 { font-size:clamp(40px,5.3vw,66px); line-height:1.06; font-weight:800; margin:0 0 22px; }
.brand-intro h1 span { color:#a7401b; }
.intro-copy { max-width:510px; margin:0 auto; font-size:18px; line-height:1.7; color:var(--brand-muted); }
.brand-actions { display:flex; gap:12px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.brand-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:13px 23px; border:1px solid var(--brand-orange); border-radius:10px; color:white; background:var(--brand-orange); font-size:14px; font-weight:700; line-height:1.5; text-decoration:none; transition:background .18s; }
.brand-button:hover { background:#943310; border-color:#943310; }
.brand-button.secondary { background:transparent; border-color:#aab8b6; color:var(--brand-ink); }
.brand-button.secondary:hover { background:var(--brand-sea); }
.brand-button svg { width:18px;height:18px; }
.catalog-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.catalog-heading .eyebrow { margin:0; }
.catalog-pagination { font-size:12px; color:var(--brand-muted); font-variant-numeric:tabular-nums; }
.product-selectors { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.product-selector { flex:1; min-width:125px; display:flex; align-items:center; gap:9px; min-height:60px; padding:6px 12px; border:1px solid var(--brand-line); border-radius:10px; background:transparent; color:var(--brand-muted); font-size:12px; font-weight:650; text-align:left; }
.product-selector img { width:40px; height:44px; object-fit:contain; }
.product-selector[aria-pressed="true"] { border-color:var(--brand-ink); background:var(--brand-ink); color:white; }
.product-selector:hover { border-color:var(--brand-ink); }
.brand-site #product-slider-container { width:100%; position:relative; border:1px solid var(--brand-line); border-radius:22px; overflow:hidden; background:white; }
.brand-site .carousel-slide { position:relative; display:none; opacity:1; visibility:visible; transition:none; }
.brand-site .carousel-slide.active { display:grid; grid-template-columns:1fr 1fr; }
.product-image { background:#f2ecdf; display:flex; align-items:center; justify-content:center; min-height:430px; padding:30px; }
.product-image.vegetales { background:#e7efe5; }
.product-image.picante { background:#f5e6dc; }
.product-image.encebollado { background:#edf3f1; }
.product-image img { width:100%; max-width:380px; height:370px; object-fit:contain; }
.product-copy { padding:44px; align-self:center; }
.product-copy h2 { font-size:clamp(28px,3.4vw,42px); line-height:1.12; font-weight:750; margin:0 0 20px; color:var(--brand-ink); }
.product-copy > p:not(.eyebrow) { color:var(--brand-muted); font-size:16px; line-height:1.75; margin-bottom:20px; }
.product-copy .product-detail { font-size:13px!important; padding-top:16px; border-top:1px solid var(--brand-line); }
.catalog-controls { display:flex;align-items:center;justify-content:space-between;gap:16px; margin-top:16px; color:var(--brand-muted); font-size:13px; }
.catalog-controls>div { display:flex;gap:8px; }
.product-navigation { position:absolute; inset:0 12px; z-index:2; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.catalog-arrow { display:flex; align-items:center;justify-content:center; background:var(--brand-blue); border:2px solid #ffffffdb; border-radius:50%; width:48px; height:48px; flex-shrink:0; color:white; box-shadow:0 4px 16px #20366830; pointer-events:auto; cursor:pointer; }
.catalog-arrow:hover { background:var(--brand-ink); }
.catalog-arrow:active { transform:scale(.94); }
.catalog-arrow svg { width:25px;height:25px; stroke-width:2.5; }
.retailer-section { background:var(--brand-sea); padding:48px max(24px,calc((100% - 1136px)/2)); }
.retailer-section h2 { font-size:clamp(26px,3vw,36px);font-weight:750;line-height:1.2;max-width:600px;margin-bottom:16px; }
.retailer-section p { color:var(--brand-muted); }
.retailer-section .eyebrow { color:#3b6255; }
.retailer-names { display:flex; gap:24px; justify-content:space-between; flex-wrap:wrap; border-top:1px solid #cadbd3; border-bottom:1px solid #cadbd3; padding:24px 0; margin:24px 0; font-weight:700; font-size:18px; }
.retailer-names small { display:block; font-size:12px; font-weight:400; }
.text-link { color:var(--brand-ink); text-decoration:underline; text-underline-offset:5px; display:inline-flex; align-items:center; font-weight:650; font-size:14px; }
.brand-site footer { background:var(--brand-ink); border:0; margin-top:0; padding:32px 20px; }
.brand-site footer p { color:#d2dedf; }
.brand-site footer img { opacity:1; box-shadow:none; border-radius:0; }
.brand-site #shop-banner { background:#edf3ef; border-color:#dae4df; }
.brand-site #shop-banner a { border:0; background:transparent; box-shadow:none; color:var(--brand-ink); }
.stores-intro { max-width:1280px; padding:38px 24px 28px; margin:auto; display:flex; gap:24px; align-items:center; justify-content:space-between; }
.stores-intro h1 { font-size:clamp(30px,3.5vw,44px);font-weight:750; line-height:1.12; margin:0 0 12px; }
.stores-intro p:not(.eyebrow) { color:var(--brand-muted);font-size:16px;line-height:1.7;max-width:640px; }
.stores-intro .eyebrow { margin-bottom:10px; }
.stores-intro .brand-button { flex-shrink:0; }
.brand-site #category-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:0; }
.brand-site .category-tab { border:1px solid var(--brand-line); border-radius:9px; background:white; color:var(--brand-muted); padding:10px 12px; box-shadow:none; display:flex;flex-direction:row;gap:8px; font-size:13px; }
.brand-site .category-tab.active-tab { background:var(--brand-ink);border-color:var(--brand-ink);color:white; }
.brand-site .category-tab[aria-pressed="true"] { font-weight:750; }
.brand-site .category-tab>div { display:none; }
.brand-site .category-tab>span { margin:0; color:inherit; font-size:12px; letter-spacing:0; text-transform:none; }
.brand-site .category-tab>span:last-child { font-size:11px; }
.brand-site .category-tab>span:last-child span { display:none; }
.brand-site #main-content .text-slate-400, .brand-site #main-content .text-slate-500 { color:var(--brand-muted); }
.brand-site .store-card, .brand-site .featured-card { border:1px solid var(--brand-line); background:white; border-radius:14px; box-shadow:none; animation:none; }
.brand-site .store-card:hover,.brand-site .featured-card:hover { transform:none;border-color:#96aaa3;box-shadow:0 3px 12px #173b4b08; }
.brand-site #stores-grid h3 { color:var(--brand-ink);font-size:18px;line-height:1.3; }
.brand-site #stores-grid a[data-route-name] { background:var(--brand-ink); border-radius:8px; }
.brand-site #stores-grid .featured-card { padding:24px; }
.brand-site #desktop-map-container { border-color:var(--brand-line); box-shadow:none; }
.brand-site .modal-backdrop { background:rgba(23,59,75,.4);backdrop-filter:blur(3px); }
.brand-site #shop-modal a { box-shadow:none; }
.retailer-red { --retailer:#bd2331; --retailer-soft:#fff1f2; --retailer-accent:#d52b3c; }
.retailer-green { --retailer:#22703c; --retailer-soft:#eff9f0; --retailer-accent:#339747; }
.retailer-sky { --retailer:#146385; --retailer-soft:#edf9ff; --retailer-accent:#69c5ec; }
.shop-panel { width:100%;max-width:600px;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;border-radius:24px;background:var(--brand-paper);overflow:hidden;box-shadow:0 24px 80px #14223a40; }
.shop-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 26px 20px;border-bottom:1px solid var(--brand-line);flex-shrink:0;background:white; }
.shop-heading .eyebrow { margin-bottom:8px; }
.shop-heading h2 { font-size:28px;font-weight:800;line-height:1.15;color:var(--brand-ink); }
.shop-heading button { flex-shrink:0; }
.shop-options { padding:20px 26px 24px;overflow-y:auto;overscroll-behavior:contain;min-height:0;display:flex;flex-direction:column;gap:12px; }
.shop-options > * { flex-shrink:0; }
.shop-intro,.shop-note { font-size:14px;line-height:1.6;color:var(--brand-muted); }
.shop-intro { margin-bottom:4px; }
.shop-option { display:flex;align-items:center;gap:16px;border:1px solid var(--brand-line);border-left:5px solid var(--retailer-accent);border-radius:14px;padding:16px;background:var(--retailer-soft);color:var(--retailer);transition:box-shadow .2s,background .2s; }
.shop-option:hover { box-shadow:0 4px 14px #20366818!important;background:white; }
.shop-icon { display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:white;flex-shrink:0; }
.shop-icon svg { width:25px;height:25px; }
.shop-option-copy { display:flex;flex-direction:column;gap:4px;min-width:0; }
.shop-option-copy strong { font-size:19px;line-height:1.2; }
.shop-option-copy>span { color:var(--brand-muted);font-size:13px; }
.shop-option-copy b { font-size:13px;margin-top:4px;text-decoration:underline;text-underline-offset:3px; }
.shop-palacio { border:1px solid var(--brand-line);border-left:5px solid var(--retailer-accent);border-radius:14px;overflow:hidden;background:var(--retailer-soft); }
.shop-palacio .shop-option { border:0;border-radius:0; }
.shop-delivery { display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid #cbe6ef;font-size:12px;color:var(--brand-muted); }
.shop-delivery a { color:var(--retailer);font-weight:700;text-decoration:underline;text-underline-offset:3px; }
.shop-note { font-size:12px;margin-top:3px; }
.brand-site #btn-cat-supermaxi,.brand-site #btn-cat-megamaxi { border-bottom:3px solid #d52b3c; }
.brand-site #btn-cat-santamaria { border-bottom:3px solid #339747; }
.brand-site #btn-cat-palacio { border-bottom:3px solid #69c5ec; }
.brand-site #btn-cat-supermaxi.active-tab,.brand-site #btn-cat-megamaxi.active-tab { background:#bd2331;border-color:#bd2331; }
.brand-site #btn-cat-santamaria.active-tab { background:#22703c;border-color:#22703c; }
.brand-site #btn-cat-palacio.active-tab { background:#dff4ff;border-color:#69c5ec;color:#146385; }
.brand-site #shop-banner a[href*="tipti"] { color:#bd2331; }
.brand-site #shop-banner a[href*="santamaria"] { color:#22703c; }
.brand-site #shop-banner a.palacio-wa { color:#146385; }
@media(max-width:480px) { .shop-heading { padding:20px; } .shop-heading h2 { font-size:24px; } .shop-options { padding:16px; } .shop-option { padding:14px;gap:12px; } }
.brand-site #wa-link { width:48px;height:48px;right:20px;bottom:20px;box-shadow:0 3px 12px #173b4b20; }
.brand-site .consent-banner { font-size:14px; border-color:var(--brand-line); }
.brand-site .consent-banner .text-xs { font-size:13px;line-height:1.6;color:var(--brand-muted); }
@media(max-width:767px) {
.brand-showcase { padding:36px 20px; }
.brand-intro { margin-bottom:32px; }
.intro-copy { font-size:16px; }
.brand-site .carousel-slide.active { grid-template-columns:1fr; }
.product-image { min-height:270px;padding:16px; }
.product-image img { height:260px; }
.product-copy { padding:26px; }
.product-copy h2 { font-size:30px; }
.product-selectors { flex-wrap:nowrap;overflow-x:auto;padding:3px 0 8px; }
.product-selector { flex:0 0 140px; }
.stores-intro { padding:28px 20px 10px;flex-direction:column;align-items:flex-start;gap:16px; }
.brand-site header img[alt="Gustamar"] { width:128px;padding:6px 0; }
.retailer-names { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.brand-site #results-title { font-size:17px; }
}
/* Ritmo costero: color y respuesta a la interacción, sin animaciones continuas. */
.brand-showcase { position:relative; isolation:isolate; }
.brand-showcase::before { content:""; position:absolute; z-index:-1; inset:0 -8px auto; height:370px; border-radius:0 0 48% 12%; background:linear-gradient(120deg,#eaf0ff 0%,#f3f5fc 58%,#fff2ca 100%); pointer-events:none; }
.brand-intro h1 span { color:var(--brand-blue); text-decoration:underline; text-decoration-color:#ffce32; text-decoration-thickness:7px; text-underline-offset:8px; }
.brand-intro .eyebrow { color:var(--brand-blue); }
.product-catalog { position:relative; }
.brand-site #product-slider-container { border:0; box-shadow:0 12px 36px #20366810; }
.product-image { position:relative; isolation:isolate; overflow:hidden; }
/* Fondo proporcionado por la marca, compartido por todos los empaques. */
.product-image,
.product-image.frijol,
.product-image.vegetales,
.product-image.picante,
.product-image.encebollado { background:#f2e5d2 url('../img/product-background.png') center center / cover no-repeat; }
.product-image::before { content:none; }
.product-image.picante { border-top:8px solid #ed3b24; padding-top:64px; }
.spicy-badge { position:absolute; top:14px; left:18px; display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:24px; background:#fff8ee; color:#a52619; font-size:14px; font-weight:800; line-height:1.4; box-shadow:0 3px 10px #00000012; }
.spicy-badge>span:first-child { font-size:24px; line-height:1; }
.product-image img { filter:drop-shadow(0 16px 14px #20366820); transition:transform .3s ease; }
.product-selector { background:#ffffffa8; transition:background .2s,transform .2s,border-color .2s; }
.product-selector[aria-pressed="true"] { background:var(--brand-blue); border-color:var(--brand-blue); box-shadow:inset 0 -3px #ffce32; }
.brand-button,.catalog-arrow { transition:background .2s,transform .2s,box-shadow .2s; }
.brand-site .carousel-slide.active .product-image img { animation:product-arrive .4s ease-out both; }
.brand-site .carousel-slide.active .product-copy { animation:copy-arrive .3s ease-out both; }
.retailer-section { position:relative; background:var(--brand-blue); color:white; border-radius:42px 42px 0 0; border-top:7px solid #ffce32; }
.retailer-section p,.retailer-section .text-link { color:#f0f3ff; }
.retailer-section .eyebrow { color:#ffe386; }
.retailer-names { border-color:#ffffff40; }
.stores-intro { background:linear-gradient(110deg,#eaf0ff,#faf7f0 65%,#fff1c7); border-radius:0 0 28px 28px; }
.brand-site .category-tab.active-tab { background:var(--brand-blue); border-color:var(--brand-blue); }
@media(hover:hover) {
 .product-image:hover img { transform:rotate(-2deg) scale(1.035); }
 .product-selector:hover,.brand-button:hover,.catalog-arrow:hover { transform:translateY(-2px); }
}
@keyframes product-arrive { from { opacity:0; translate:14px 8px; } to { opacity:1; translate:0 0; } }
@keyframes copy-arrive { from { opacity:0; translate:0 8px; } to { opacity:1; translate:0 0; } }
@media(max-width:767px) { .brand-showcase::before { inset:0 0 auto;height:380px;border-radius:0 0 36% 8%; } .retailer-section { border-radius:26px 26px 0 0; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .brand-site *, .brand-site *::before,.brand-site *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }
.product-image > img[role="button"] { cursor:zoom-in; }
.product-zoom { width:min(94vw,960px); max-width:94vw; max-height:94vh; max-height:94dvh; margin:auto; padding:16px; border:0; border-radius:22px; background:#fffaf2; color:var(--brand-ink); box-shadow:0 20px 80px #07152b55; overflow:auto; }
.product-zoom::backdrop { background:#07152bd9; }
.product-zoom-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.product-zoom-heading h2 { font-size:clamp(16px,2.3vw,22px); font-weight:700; line-height:1.3; margin:0; }
#product-zoom-close { flex:none; display:grid; place-items:center; width:48px; height:48px; border:0; border-radius:50%; background:var(--brand-blue); color:white; cursor:pointer; font-size:34px; line-height:1; }
#product-zoom-close:hover { background:var(--brand-ink); }
#product-zoom-photo { display:block; width:100%; height:calc(86vh - 70px); height:calc(86dvh - 70px); object-fit:contain; margin:10px auto 0; }