/* ============================================================
   MIKAN Pet Shop · style.css
   Paleta: amarillo #FFF41F · rojo #E11B1B · carbón #161310 · crema #FFFBEF
   Índice:
   1. Variables y base
   2. Tramas y recursos gráficos
   3. Layout y tipografía
   4. Botones, badges, cards
   5. Header de marca (logo grande + eslogan + isotipo)
   6. Menú mobile
   7. Hero full-width + fondo interactivo
   8. Info cards / categorías / pagos
   9. FAQ
   10. Catálogo (buscador, filtros acordeón, grilla 4col, paginación)
   11. Modal de producto (expandable)
   12. Carrito
   13. WhatsApp flotante / CTA / footer
   14. Helpers
   ============================================================ */

/* ===== 1. Variables y base ===== */
:root{
  --yellow:#FFF41F; --yellow-deep:#E6DB00; --yellow-soft:#FFFB87; --yellow-pale:#FFFDC4;
  --red:#E11B1B; --red-dark:#B01212; --red-deep:#7E0C0C;
  --ink:#161310; --ink-2:#221C14; --ink-soft:#4A4138; --ink-mute:#7A6F61;
  --cream:#FFFBEF; --cream-2:#FFF6DC; --card:#FFFFFF; --line:#EADFC6;
  --wa:#1FA855; --wa-dark:#157A39;
  --shadow-card:0 14px 34px -16px rgba(22,19,16,.28);
  --shadow-soft:0 8px 22px -10px rgba(22,19,16,.18);
  --shadow-pop:0 26px 60px -24px rgba(22,19,16,.5);
  --radius:1.35rem;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; overflow-x:clip; }
body{
  margin:0; color:var(--ink); font-family:"Montserrat",system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-color:var(--cream);
  /* fondo cálido con manchas suaves + huellitas sutiles fijas */
  background-image:
    radial-gradient(85rem 65rem at 100% -8%, rgba(255,244,31,.55), transparent 62%),
    radial-gradient(75rem 60rem at -12% 12%, rgba(255,244,31,.45), transparent 60%),
    radial-gradient(70rem 55rem at 45% 42%, rgba(255,244,31,.30), transparent 60%),
    radial-gradient(65rem 55rem at 100% 70%, rgba(255,244,31,.40), transparent 60%),
    radial-gradient(70rem 55rem at 50% 118%, rgba(255,244,31,.50), transparent 62%),
    radial-gradient(55rem 45rem at 0% 88%, rgba(225,27,27,.07), transparent 55%);
  background-attachment:fixed;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--yellow); color:var(--ink); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--cream-2); }
::-webkit-scrollbar-thumb{ background:var(--yellow-deep); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }
.font-display{ font-family:"Anton","Impact",sans-serif; }

/* ===== 2. Tramas y recursos gráficos ===== */
.paw-pattern{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23161310' fill-opacity='0.04'%3E%3Cellipse cx='60' cy='66' rx='13' ry='11'/%3E%3Ccircle cx='42' cy='48' r='6'/%3E%3Ccircle cx='60' cy='41' r='6.5'/%3E%3Ccircle cx='78' cy='48' r='6'/%3E%3C/g%3E%3C/svg%3E"); background-size:120px 120px; }
.paw-pattern-red{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23E11B1B' fill-opacity='0.06'%3E%3Cellipse cx='60' cy='66' rx='13' ry='11'/%3E%3Ccircle cx='42' cy='48' r='6'/%3E%3Ccircle cx='60' cy='41' r='6.5'/%3E%3Ccircle cx='78' cy='48' r='6'/%3E%3C/g%3E%3C/svg%3E"); background-size:130px 130px; }
.linegrid{ background-image:linear-gradient(rgba(22,19,16,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(22,19,16,.05) 1px,transparent 1px); background-size:48px 48px; }
.dotgrid{ background-image:radial-gradient(rgba(225,27,27,.18) 1.5px,transparent 1.5px); background-size:22px 22px; }
.stripes{ background-image:repeating-linear-gradient(45deg, rgba(22,19,16,.04) 0 2px, transparent 2px 14px); }
/* manchas decorativas */
.blob{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0; }
.blob-y{ background:rgba(255,244,31,.55); }
.blob-r{ background:rgba(225,27,27,.18); }
.blob-i{ background:rgba(22,19,16,.06); }
.deco-strip{ height:6px; width:100%; background:repeating-linear-gradient(90deg, var(--red) 0 28px, var(--ink) 28px 34px, var(--yellow) 34px 62px, var(--ink) 62px 68px); }

/* ===== 3. Layout y tipografía ===== */
.container-mk{ width:100%; max-width:80rem; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:640px){ .container-mk{ padding-inline:2rem; } }
@media (min-width:1024px){ .container-mk{ padding-inline:2.5rem; } }
.container-wide{ width:100%; max-width:100rem; margin-inline:auto; padding-inline:1rem; }
@media (min-width:640px){ .container-wide{ padding-inline:1.5rem; } }
@media (min-width:1280px){ .container-wide{ padding-inline:2rem; } }
.section-pad{ padding-block:4rem; }
@media (min-width:1024px){ .section-pad{ padding-block:5.5rem; } }
.relative{ position:relative; z-index:1; }
.heading{ font-family:"Anton","Impact",sans-serif; text-transform:uppercase; line-height:.92; letter-spacing:-.01em; color:var(--ink); margin:0; }
.text-mute{ color:var(--ink-mute); }
.section-head{ text-align:center; max-width:46rem; margin:0 auto 2.75rem; position:relative; z-index:1; }
.section-head .heading{ margin-top:.85rem; font-size:2.1rem; }
@media (min-width:640px){ .section-head .heading{ font-size:3rem; } }
.section-head .sub{ color:var(--ink-mute); margin-top:.7rem; font-size:1.02rem; }
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; background:var(--ink); color:var(--yellow); padding:.45rem 1rem; border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; box-shadow:var(--shadow-soft); }
.eyebrow.is-yellow{ background:var(--yellow); color:var(--ink); }
.eyebrow.is-red{ background:var(--red); color:var(--cream); }

/* ===== 4. Botones, badges, cards ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; border-radius:.8rem; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; cursor:pointer; border:0; user-select:none; line-height:1; text-align:center; white-space:nowrap; }
.btn:active{ transform:translateY(2px); }
.btn-red{ background:var(--red); color:var(--cream); box-shadow:0 4px 0 var(--red-deep); }
.btn-red:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--red-deep); }
.btn-red:active{ box-shadow:0 2px 0 var(--red-deep); }
.btn-yellow{ background:var(--yellow); color:var(--ink); box-shadow:0 4px 0 #C9C000; }
.btn-yellow:hover{ transform:translateY(-2px); box-shadow:0 6px 0 #C9C000; }
.btn-yellow:active{ box-shadow:0 2px 0 #C9C000; }
.btn-wa{ background:var(--wa); color:#fff; box-shadow:0 4px 0 var(--wa-dark); }
.btn-wa:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--wa-dark); }
.btn-ink{ background:var(--ink); color:var(--cream); }
.btn-ink:hover{ background:#000; transform:translateY(-2px); }
.btn-white{ background:#fff; color:var(--ink); border:2px solid var(--line); box-shadow:var(--shadow-soft); }
.btn-white:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-ghost{ background:#fff; border:2px solid rgba(22,19,16,.14); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--red); color:var(--red); }
.btn-lg{ padding:1rem 1.75rem; font-size:.875rem; }
.btn-md{ padding:.75rem 1.25rem; font-size:.8rem; }
.btn-sm{ padding:.62rem 1rem; font-size:.72rem; }
.link-action{ display:inline-flex; align-items:center; gap:.4rem; background:none; border:0; cursor:pointer; font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:.72rem; color:var(--ink-soft); transition:color .15s, gap .15s; padding:.3rem 0; }
.link-action:hover{ color:var(--red); gap:.55rem; }

.badge{ display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.3rem .75rem; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.badge-yellow{ background:var(--yellow); color:var(--ink); }
.badge-red{ background:var(--red); color:var(--cream); }
.badge-ink{ background:var(--ink); color:var(--yellow); }
.badge-soft{ background:var(--cream-2); color:var(--ink-soft); border:1px solid var(--line); }
.badge-stock{ background:rgba(31,168,85,.12); color:var(--wa-dark); border:1px solid rgba(31,168,85,.3); }

.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.logo-text{ background:var(--yellow); color:var(--ink); font-family:"Anton",sans-serif; font-size:1.6rem; padding:.1rem .55rem; border-radius:.4rem; letter-spacing:.05em; }
.ph{ position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(135deg,#FFF6DC 0%,#FFE9A8 100%); }
.ph-emoji{ font-size:3rem; filter:drop-shadow(0 6px 10px rgba(0,0,0,.12)); }

/* ===== 5. Header de marca ===== */
.site-header{ position:sticky; top:0; z-index:50; background:var(--yellow); border-bottom:2px solid var(--ink); transition:box-shadow .2s ease; }
.site-header.is-scrolled{ box-shadow:var(--shadow-soft); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:118px; }
.brand{ display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.brand-main{ display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.brand-logo{ height:92px; width:auto; }                 /* logo grande (~2x) */
.brand-slogan{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.22em; color:var(--red); text-align:center; }
.brand-iso{ height:64px; width:auto; padding-left:1rem; border-left:2px solid var(--line); }
@media (max-width:768px){ .header-inner{ height:84px; } .brand-logo{ height:58px; } .brand-slogan{ font-size:.6rem; letter-spacing:.16em; } .brand-iso{ height:42px; padding-left:.7rem; } }
@media (max-width:420px){ .brand-iso{ display:none; } }

.nav{ display:none; align-items:center; gap:1.85rem; }
@media (min-width:1024px){ .nav{ display:flex; } }
.nav-link{ position:relative; font-size:.92rem; font-weight:700; color:var(--ink-soft); transition:color .2s; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-7px; height:3px; width:0; background:var(--red); border-radius:3px; transition:width .3s; }
.nav-link:hover{ color:var(--red); }
.nav-link:hover::after,.nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--red); }

.icon-btn{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:.7rem; background:#fff; border:2px solid var(--ink); color:var(--ink); transition:background .2s,color .2s; }
.icon-btn:hover{ background:var(--yellow); }
.hide-lg{ display:flex; } @media (min-width:1024px){ .hide-lg{ display:none; } }
.show-sm{ display:none; } @media (min-width:640px){ .show-sm{ display:inline-flex; } }
.show-md{ display:none; } @media (min-width:768px){ .show-md{ display:inline-flex; } }

/* ===== 6. Menú mobile ===== */
.menu-overlay{ position:fixed; inset:0; background:rgba(22,19,16,.5); backdrop-filter:blur(3px); z-index:60; display:none; }
.menu-overlay.is-open{ display:block; }
.menu-aside{ position:fixed; top:0; right:0; bottom:0; width:92%; max-width:30rem; background:var(--cream); z-index:70; border-left:2px solid var(--ink); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s ease; }
.menu-aside.is-open{ transform:translateX(0); }
.menu-link{ font-family:"Anton",sans-serif; font-size:1.75rem; color:var(--ink); padding:1rem 0; border-bottom:1px solid var(--line); transition:color .2s; }
.menu-link:hover{ color:var(--red); }

/* ===== 7. Hero full-width + fondo interactivo ===== */
.page{ position:relative; z-index:10; }
#bg-deco{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.deco-item{ position:absolute; will-change:transform; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.deco-item svg{ display:block; width:100%; height:100%; fill:currentColor; }
@media (prefers-reduced-motion:reduce){ .deco-item{ transition:none; } }

.hero{ padding-top:1.75rem; padding-bottom:3.5rem; }
.hero-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:1024px){ .hero-grid{ grid-template-columns:1.85fr 1fr; gap:1.25rem; } }

.hero-carousel{ position:relative; border-radius:var(--radius); overflow:hidden; border:2px solid var(--ink); box-shadow:var(--shadow-card); min-height:360px; background:var(--ink); }
@media (min-width:640px){ .hero-carousel{ min-height:460px; } }
@media (min-width:1024px){ .hero-carousel{ min-height:560px; } }
.carousel-slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; display:block; }
.carousel-slide.is-active{ opacity:1; }
.carousel-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.carousel-dots{ position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; z-index:5; }
.carousel-dot{ height:9px; width:11px; border-radius:999px; background:rgba(255,255,255,.6); border:2px solid rgba(0,0,0,.15); cursor:pointer; transition:all .3s; }
.carousel-dot.is-active{ background:var(--yellow); width:30px; }
@media (prefers-reduced-motion:reduce){ .carousel-slide{ transition:none; } }

.hero-side{ display:grid; grid-template-rows:1fr 1fr; gap:1rem; }
@media (min-width:1024px){ .hero-side{ gap:1.25rem; } }
/* cards perro/gato: imagen izquierda, texto derecha, sin degradado */
.split-card{ display:grid; grid-template-columns:46% 1fr; border-radius:var(--radius); overflow:hidden; border:2px solid var(--ink); box-shadow:var(--shadow-card); transition:transform .25s, box-shadow .25s; min-height:170px; }
.split-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); }
.split-card .pic{ position:relative; overflow:hidden; }
.split-card .pic img{ width:100%; height:100%; object-fit:cover; transition:transform .45s; }
.split-card:hover .pic img{ transform:scale(1.06); }
.split-card .info{ padding:1.25rem 1.4rem; display:flex; flex-direction:column; justify-content:center; gap:.5rem; }
.split-card .info h3{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.7rem; line-height:.95; margin:0; }
@media (min-width:640px){ .split-card .info h3{ font-size:2.1rem; } }
.split-card .info p{ font-size:.85rem; margin:0; opacity:.85; }
.split-card .go{ display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-top:.2rem; }
.split-dark .info{ background:var(--ink); color:var(--cream); }
.split-dark .go{ color:var(--yellow); }
.split-yellow .info{ background:var(--yellow); color:var(--ink); }
.split-yellow .go{ color:var(--red); }

/* cards del hero con foto de fondo completa + texto encima (sin bloque sólido) */
.photo-card{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; border:2px solid var(--ink); box-shadow:var(--shadow-card); transition:transform .25s, box-shadow .25s; min-height:170px; }
.photo-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); }
.photo-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s; }
.photo-card:hover img{ transform:scale(1.06); }
.photo-card .ov{ position:absolute; inset:0; }
.photo-card .info{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; text-align:right; gap:.55rem; padding:1.3rem 1.6rem; }
.photo-card .info h3{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.9rem; line-height:.95; margin:0; }
@media (min-width:640px){ .photo-card .info h3{ font-size:2.4rem; } }
.photo-card .go{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-top:.2rem; }
.photo-card .go .lucide{ width:15px; height:15px; }
/* perros: texto blanco, "ver productos" amarillo, overlay oscuro desde la derecha */
.photo-card.card-perro .ov{ background:linear-gradient(270deg, rgba(22,19,16,.74) 0%, rgba(22,19,16,.34) 48%, transparent 80%); }
.photo-card.card-perro .info{ color:#fff; }
.photo-card.card-perro .info h3{ text-shadow:0 2px 12px rgba(0,0,0,.55); }
.photo-card.card-perro .go{ color:var(--yellow); }
/* gatos: texto negro, "ver productos" rojo, overlay claro desde la derecha */
.photo-card.card-gato .ov{ background:linear-gradient(270deg, rgba(255,251,239,.92) 0%, rgba(255,251,239,.5) 48%, transparent 82%); }
.photo-card.card-gato .info{ color:var(--ink); }
.photo-card.card-gato .info h3{ text-shadow:0 1px 8px rgba(255,255,255,.7); }
.photo-card.card-gato .go{ color:var(--red); }

/* texto sobre el carrusel grande (titular 3 líneas + CTA) */
.carousel-ov{ position:absolute; inset:0; z-index:3; background:linear-gradient(90deg, rgba(22,19,16,.62) 0%, rgba(22,19,16,.25) 50%, transparent 80%); pointer-events:none; }
.carousel-text{ position:absolute; z-index:4; left:1.5rem; right:1.5rem; bottom:3.2rem; pointer-events:none; }
@media (min-width:640px){ .carousel-text{ left:2.5rem; bottom:3.4rem; } }
.carousel-text h2{ font-family:"Anton",sans-serif; text-transform:uppercase; color:#fff; line-height:.95; margin:0 0 1rem; font-size:2.1rem; text-shadow:0 3px 16px rgba(0,0,0,.5); max-width:18ch; }
@media (min-width:640px){ .carousel-text h2{ font-size:3.4rem; } }
@media (min-width:1024px){ .carousel-text h2{ font-size:4rem; } }
.carousel-text .btn{ pointer-events:auto; }

/* ===== 8. Info cards / categorías / pagos ===== */
.info-grid{ display:grid; grid-template-columns:1fr; gap:.85rem; margin-top:1.25rem; }
@media (min-width:640px){ .info-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .info-grid{ grid-template-columns:repeat(4,1fr); gap:1rem; } }
.info-card{ display:flex; align-items:center; gap:1rem; background:var(--card); border:2px solid var(--ink); border-radius:1.1rem; padding:1rem 1.1rem; box-shadow:0 5px 0 rgba(22,19,16,.12); transition:transform .2s, box-shadow .2s; }
.info-card:hover{ transform:translateY(-4px); box-shadow:0 9px 0 rgba(22,19,16,.14); }
.info-ico{ width:52px; height:52px; flex-shrink:0; border-radius:1rem; background:var(--yellow); display:flex; align-items:center; justify-content:center; color:var(--ink); border:2px solid var(--ink); }
.info-card h4{ margin:0; font-size:.95rem; font-weight:800; line-height:1.15; }
.info-card p{ margin:.2rem 0 0; font-size:.75rem; color:var(--ink-mute); line-height:1.25; }

.cat-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:640px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .cat-grid{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }
.cat-card{ position:relative; border-radius:1.6rem; overflow:hidden; min-height:340px; box-shadow:var(--shadow-card); border:2px solid var(--ink); display:flex; align-items:flex-end; }
@media (min-width:1100px){ .cat-card{ min-height:350px; } }
.cat-card .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.cat-card:hover .bg{ transform:scale(1.07); }
.cat-overlay{ position:relative; z-index:2; margin:1.1rem; background:rgba(255,251,239,.96); border:2px solid var(--ink); border-radius:1.2rem; padding:1.35rem; width:calc(100% - 2.2rem); box-shadow:var(--shadow-soft); }
.cat-ico{ width:52px; height:52px; border-radius:1rem; background:var(--yellow); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; color:var(--ink); margin-top:-2.9rem; margin-bottom:.7rem; box-shadow:var(--shadow-soft); }
.cat-overlay h3{ margin:0 0 .35rem; font-size:1.35rem; font-weight:800; }
.cat-overlay p{ margin:0 0 1rem; font-size:.85rem; color:var(--ink-mute); line-height:1.35; }

.pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; max-width:60rem; margin-inline:auto; }
@media (min-width:1024px){ .pay-grid{ grid-template-columns:repeat(4,1fr); gap:1rem; } }
.pay-card{ background:#fff; border:2px solid var(--ink); border-radius:1.1rem; padding:1.4rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.65rem; box-shadow:0 5px 0 rgba(22,19,16,.14); transition:transform .2s; }
.pay-card:hover{ transform:translateY(-4px); }
.pay-ico{ width:84px; height:84px; border-radius:1rem; background:var(--cream-2); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; color:var(--red); overflow:hidden; }
.pay-ico img{ max-height:60px; max-width:88%; object-fit:contain; }
.pay-card strong{ font-size:.9rem; }
.pay-card span{ font-size:11px; color:var(--ink-mute); line-height:1.25; }

/* ===== 9. FAQ ===== */
.faq-item{ background:#fff; border:2px solid var(--ink); border-radius:1.1rem; overflow:hidden; transition:box-shadow .2s; margin-bottom:.85rem; box-shadow:0 4px 0 rgba(22,19,16,.1); }
.faq-item.is-open{ box-shadow:0 6px 0 var(--red); }
.faq-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.25rem; text-align:left; background:none; border:0; cursor:pointer; }
.faq-q{ display:flex; align-items:center; gap:.75rem; font-weight:700; font-size:.96rem; color:var(--ink); }
.faq-item.is-open .faq-q{ color:var(--red); }
.faq-q .ic{ color:var(--red); }
.faq-toggle{ width:34px; height:34px; flex-shrink:0; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--cream-2); border:2px solid var(--ink); color:var(--ink); transition:all .2s; }
.faq-item.is-open .faq-toggle{ background:var(--red); color:var(--cream); border-color:var(--red); }
.faq-panel{ display:none; padding:0 1.25rem 1.25rem 3.5rem; }
.faq-item.is-open .faq-panel{ display:block; }
.faq-panel p{ margin:0; color:var(--ink-soft); font-size:.92rem; line-height:1.55; }

/* ===== 10. Catálogo ===== */
.catalog-head{ background:var(--yellow); border-bottom:2px solid var(--ink); position:relative; overflow:hidden; }
.crumb{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:rgba(22,19,16,.65); display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem; }
.crumb a:hover{ color:var(--red); }

/* buscador protagonista */
.search-hero{ background:var(--ink); color:var(--cream); position:sticky; top:118px; z-index:40; border-bottom:2px solid var(--ink); }
@media (max-width:768px){ .search-hero{ top:84px; } }
.search-row{ display:flex; flex-direction:column; gap:.75rem; padding-block:1rem; }
@media (min-width:768px){ .search-row{ flex-direction:row; align-items:center; } }
.search-input{ position:relative; flex:1; }
.search-input .ic{ position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); color:var(--ink-mute); }
.search-big{ width:100%; border:0; border-radius:1rem; padding:1.1rem 1.1rem 1.1rem 3.2rem; font-size:1.05rem; font-family:inherit; font-weight:600; color:var(--ink); background:#fff; box-shadow:0 6px 0 rgba(0,0,0,.25); }
.search-big:focus{ outline:0; box-shadow:0 0 0 4px var(--yellow); }
.field{ width:100%; border:2px solid var(--line); background:#fff; border-radius:.7rem; padding:.7rem .9rem; font-size:.9rem; font-family:inherit; color:var(--ink); }
.field:focus{ outline:0; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,27,27,.15); }
.order-select{ border:0; background:var(--yellow); color:var(--ink); font-weight:800; border-radius:.8rem; padding:1rem 1.1rem; font-size:.85rem; cursor:pointer; box-shadow:0 4px 0 #C9C000; }
@media (min-width:768px){ .order-select{ max-width:15rem; } }

.catalog-wrap{ width:100%; max-width:96rem; margin-inline:auto; padding-inline:1rem; }
@media (min-width:640px){ .catalog-wrap{ padding-inline:1.5rem; } }
.catalog-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; padding-block:1.75rem; }
@media (min-width:1024px){ .catalog-grid{ grid-template-columns:248px 1fr; gap:2rem; align-items:start; } }

/* filtros */
.filters-overlay{ position:fixed; inset:0; background:rgba(22,19,16,.5); z-index:74; display:none; }
.filters-overlay.is-open{ display:block; }
@media (min-width:1024px){ .filters-overlay{ display:none !important; } }
.filters{ display:flex; flex-direction:column; gap:.85rem; }
@media (max-width:1023px){
  .filters{ position:fixed; top:0; right:0; bottom:0; width:88%; max-width:22rem; background:var(--cream); z-index:75; padding:1.25rem; overflow-y:auto; box-shadow:-10px 0 40px rgba(0,0,0,.25); transform:translateX(100%); transition:transform .3s; gap:.85rem; }
  .filters.is-open{ transform:translateX(0); }
}
@media (min-width:1024px){
  .filters{ position:sticky; top:210px; max-height:calc(100vh - 220px); overflow-y:auto; overflow-x:hidden; padding-right:.5rem; scrollbar-width:thin; scrollbar-color:rgba(22,19,16,.3) rgba(22,19,16,.07); }
  .filters::-webkit-scrollbar{ width:5px; }
  .filters::-webkit-scrollbar-track{ background:rgba(22,19,16,.07); border-radius:3px; }
  .filters::-webkit-scrollbar-thumb{ background:rgba(22,19,16,.3); border-radius:3px; }
  .filters::-webkit-scrollbar-thumb:hover{ background:var(--ink); }
}
.filters-head{ display:flex; align-items:center; justify-content:space-between; }
.filters-head h2{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.5rem; margin:0; }
.link-clear{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--red); background:none; border:0; cursor:pointer; }
.link-clear:hover{ text-decoration:underline; }
.filters > *{ flex-shrink:0; }
.acc{ background:#fff; border:2px solid var(--ink); border-radius:.9rem; overflow:hidden; }
.acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; background:none; border:0; cursor:pointer; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); }
.acc-head .chev{ transition:transform .25s; color:var(--ink-mute); }
.acc.is-open .acc-head .chev{ transform:rotate(180deg); }
.acc-body{ display:none; padding:0 1rem 1rem; }
.acc.is-open .acc-body{ display:block; }
.price-row{ display:flex; align-items:center; gap:.5rem; }
.check-row{ display:flex; align-items:center; gap:.6rem; padding:.28rem 0; cursor:pointer; font-size:.875rem; color:var(--ink-soft); }
.check-row:hover{ color:var(--ink); }
.check-row input{ width:17px; height:17px; accent-color:var(--red); cursor:pointer; }

/* grilla productos: 4 columnas, más verticales */
.results-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.results-count{ font-size:.9rem; color:var(--ink-mute); margin:0; }
.results-count b{ color:var(--ink); }
.product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
@media (min-width:680px){ .product-grid{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
@media (min-width:1100px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }
.product{ background:#fff; border:2px solid var(--ink); border-radius:1.1rem; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 5px 0 rgba(22,19,16,.1); transition:transform .2s, box-shadow .2s; }
.product:hover{ transform:translateY(-5px); box-shadow:0 11px 0 rgba(22,19,16,.14); }
.product .pic{ position:relative; aspect-ratio:1/1; cursor:pointer; background:linear-gradient(135deg,#FFF6DC,#FFE9A8); }
.product .pic img{ width:100%; height:100%; object-fit:cover; }
.product .pic .ph-emoji{ font-size:3.4rem; }
.product .pic .badge{ position:absolute; top:.5rem; left:.5rem; font-size:10px; }
.product .body{ padding:.9rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.product .brand{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--red); }
.product .name{ font-weight:700; font-size:.92rem; line-height:1.3; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; }
.product .cat{ font-size:11px; color:var(--ink-mute); }
.product .price{ font-family:"Anton",sans-serif; font-size:1.45rem; margin:.2rem 0 0; }
.product .actions{ margin-top:auto; display:flex; flex-direction:column; gap:.5rem; padding-top:.6rem; align-items:flex-start; }
.product .actions .btn{ width:100%; }

.pagination{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; margin-top:2.75rem; }
.page-btn{ min-width:40px; height:40px; padding:0 .8rem; display:inline-flex; align-items:center; justify-content:center; border-radius:.6rem; border:2px solid var(--ink); background:#fff; font-weight:800; font-size:.9rem; color:var(--ink); cursor:pointer; transition:all .15s; }
.page-btn:hover:not(:disabled){ background:var(--yellow); }
.page-btn.is-active{ background:var(--red); color:var(--cream); border-color:var(--red); }
.page-btn:disabled{ opacity:.4; cursor:not-allowed; }
.empty{ text-align:center; padding:5rem 1rem; }
.empty .emo{ font-size:3.5rem; }

/* ===== 11. Modal de producto (expandable) ===== */
.modal{ position:fixed; inset:0; z-index:90; display:none; }
.modal.is-open{ display:block; }
.modal-overlay{ position:absolute; inset:0; background:rgba(22,19,16,.62); backdrop-filter:blur(5px); animation:fade .25s ease; }
.modal-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-dialog{ position:relative; width:100%; max-width:68rem; background:var(--card); border:2px solid var(--ink); border-radius:1.6rem; overflow:hidden; box-shadow:var(--shadow-pop); max-height:94vh; animation:pop .3s cubic-bezier(.22,1,.36,1); }
@keyframes pop{ from{ opacity:0; transform:scale(.94) translateY(12px); } to{ opacity:1; transform:scale(1) translateY(0); } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.modal-grid{ display:grid; grid-template-columns:1fr; max-height:94vh; overflow:auto; }
@media (min-width:820px){ .modal-grid{ grid-template-columns:1.02fr 1fr; } }
.modal-pic{ position:relative; min-height:280px; background:linear-gradient(135deg,#FFF6DC 0%,#FFE9A8 100%); display:flex; align-items:center; justify-content:center; border-bottom:2px solid var(--ink); }
@media (min-width:820px){ .modal-pic{ min-height:100%; border-bottom:0; border-right:2px solid var(--ink); } }
.modal-pic img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.modal-pic .ph-emoji{ font-size:8rem; }
.modal-pic .tag{ position:absolute; top:1rem; left:1rem; }
.modal-info{ padding:1.75rem; display:flex; flex-direction:column; gap:.55rem; }
@media (min-width:820px){ .modal-info{ padding:2.25rem; } }
.modal-info .brand{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--red); }
.modal-info h3{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:2.1rem; line-height:1; margin:.1rem 0; }
.modal-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0; }
.modal-meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.82rem; color:var(--ink-soft); margin:.2rem 0; }
.modal-meta b{ color:var(--ink); }
.modal-price{ font-family:"Anton",sans-serif; font-size:2.5rem; color:var(--ink); margin:.3rem 0 0; }
.modal-desc{ color:var(--ink-soft); font-size:.92rem; line-height:1.55; margin:.2rem 0; }
.benefits{ list-style:none; margin:.3rem 0; padding:0; display:grid; gap:.4rem; }
.benefits li{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--ink-soft); }
.benefits li .lucide{ color:var(--wa-dark); }
.modal-close{ position:absolute; top:1rem; right:1rem; z-index:5; width:44px; height:44px; border-radius:999px; background:rgba(255,251,239,.96); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); box-shadow:var(--shadow-soft); transition:background .2s,color .2s; }
.modal-close:hover{ background:var(--red); color:#fff; border-color:var(--red); }
.modal-buybar{ margin-top:auto; padding-top:.9rem; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.8rem; }
.qty-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.qty{ display:inline-flex; align-items:center; border:2px solid var(--ink); border-radius:.8rem; overflow:hidden; background:#fff; }
.qty button{ width:44px; height:46px; background:var(--cream-2); border:0; cursor:pointer; font-size:1.25rem; font-weight:800; color:var(--ink); }
.qty button:hover{ background:var(--yellow); }
.qty input{ width:56px; height:46px; text-align:center; border:0; font-weight:800; font-size:1.05rem; color:var(--ink); -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.subtotal{ text-align:right; }
.subtotal .lbl{ display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); }
.subtotal .amt{ font-family:"Anton",sans-serif; font-size:1.7rem; color:var(--red); }
.modal-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.modal-actions .btn{ flex:1; min-width:11rem; }

/* ===== 12. Carrito ===== */
.cart-fab{ position:fixed; bottom:1.25rem; right:1rem; z-index:55; display:inline-flex; align-items:center; gap:.5rem; background:var(--ink); color:var(--cream); border:2px solid var(--ink); cursor:pointer; padding:.85rem 1.15rem; border-radius:999px; font-weight:800; text-transform:uppercase; font-size:.75rem; letter-spacing:.03em; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); }
@media (min-width:640px){ .cart-fab{ bottom:1.5rem; right:1.5rem; } }
.cart-fab .count{ background:var(--yellow); color:var(--ink); min-width:22px; height:22px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; padding:0 .3rem; }
.catalog-page .wa-fab{ right:auto; left:1rem; bottom:1.25rem; }
@media (min-width:640px){ .catalog-page .wa-fab{ left:1.5rem; bottom:1.5rem; } }
.cart-overlay{ position:fixed; inset:0; background:rgba(22,19,16,.55); backdrop-filter:blur(3px); z-index:95; display:none; }
.cart-overlay.is-open{ display:block; }
.cart-drawer{ position:fixed; top:0; right:0; bottom:0; width:92%; max-width:26rem; background:var(--cream); z-index:96; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s ease; }
.cart-drawer.is-open{ transform:translateX(0); }
.cart-header{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.25rem; border-bottom:2px solid var(--ink); background:var(--yellow); }
.cart-header h2{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.4rem; margin:0; display:flex; align-items:center; gap:.5rem; }
.cart-body{ flex:1; overflow-y:auto; padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.75rem; }
.cart-empty{ text-align:center; color:var(--ink-mute); padding:3rem 1rem; }
.cart-item{ display:grid; grid-template-columns:56px 1fr auto; gap:.75rem; align-items:center; background:#fff; border:2px solid var(--ink); border-radius:.9rem; padding:.6rem; }
.cart-item .thumb{ width:56px; height:56px; border-radius:.6rem; overflow:hidden; background:linear-gradient(135deg,#FFF6DC,#FFE9A8); display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.cart-item .meta{ min-width:0; }
.cart-item .meta .nm{ font-weight:700; font-size:.82rem; line-height:1.2; margin:0 0 .15rem; }
.cart-item .meta .pr{ font-size:.72rem; color:var(--ink-mute); }
.cart-item .meta .sub{ font-weight:800; font-size:.82rem; }
.cart-item .ctrl{ display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; }
.cart-qty{ display:inline-flex; align-items:center; border:2px solid var(--ink); border-radius:.5rem; overflow:hidden; }
.cart-qty button{ width:26px; height:26px; border:0; background:var(--cream-2); cursor:pointer; font-weight:800; color:var(--ink); }
.cart-qty button:hover{ background:var(--yellow); }
.cart-qty span{ min-width:26px; text-align:center; font-weight:800; font-size:.8rem; }
.cart-remove{ background:none; border:0; color:var(--ink-mute); cursor:pointer; font-size:.66rem; font-weight:700; text-transform:uppercase; }
.cart-remove:hover{ color:var(--red); }
.cart-foot{ border-top:2px solid var(--ink); padding:1.1rem 1.25rem; background:#fff; display:flex; flex-direction:column; gap:.75rem; }
.cart-total{ display:flex; align-items:center; justify-content:space-between; font-weight:800; }
.cart-total .amt{ font-family:"Anton",sans-serif; font-size:1.8rem; color:var(--red); }

/* ===== 13. WhatsApp / CTA / footer ===== */
.wa-fab{ position:fixed; bottom:5.5rem; right:1rem; z-index:50; width:58px; height:58px; border-radius:999px; background:var(--wa); color:#fff; display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 12px 30px -8px rgba(0,0,0,.4); animation:pulse-ring 2s cubic-bezier(.45,.03,.51,.95) infinite; }
@media (min-width:640px){ .wa-fab{ bottom:1.5rem; right:1.5rem; } }
@keyframes pulse-ring{ 0%{ box-shadow:0 0 0 0 rgba(31,168,85,.5); } 70%{ box-shadow:0 0 0 16px rgba(31,168,85,0); } 100%{ box-shadow:0 0 0 0 rgba(31,168,85,0); } }
@keyframes bounce-slow{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.bounce-slow{ animation:bounce-slow 3s ease-in-out infinite; }
.mobile-cta{ position:fixed; bottom:0; left:0; right:0; z-index:40; padding:.75rem; background:rgba(255,251,239,.96); backdrop-filter:blur(8px); border-top:2px solid var(--ink); display:flex; gap:.5rem; }
@media (min-width:1024px){ .mobile-cta{ display:none; } }

footer.footer{ background:var(--ink); color:var(--cream); position:relative; z-index:10; }
.footer a{ transition:color .2s; }
.footer a:hover{ color:var(--yellow); }
.footer .logo-invert{ filter:brightness(0) invert(1); }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
@media (min-width:1024px){ .footer-grid{ grid-template-columns:repeat(4,1fr); } }
.footer h4{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--yellow); margin:0 0 1rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; font-size:.9rem; color:rgba(255,251,239,.6); }
.footer ul a{ word-break:break-word; align-items:flex-start; }
.footer ul a .lucide{ margin-top:2px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-top:1.5rem; display:flex; flex-direction:column; gap:.6rem; align-items:center; justify-content:space-between; font-size:.75rem; color:rgba(255,251,239,.4); }
@media (min-width:640px){ .footer-bottom{ flex-direction:row; } }

/* announce */
.announce{ position:relative; z-index:55; background:var(--red); overflow:hidden; }
.announce .inner{ display:flex; align-items:center; justify-content:center; gap:.75rem; padding:1.05rem 0; position:relative; }
.announce .txt{ font-size:1.2rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:var(--cream); text-align:center; display:flex; align-items:center; gap:.55rem; }
@media (max-width:560px){ .announce .txt{ font-size:.92rem; } }
.announce .hl{ color:var(--yellow); }
.announce .close{ position:absolute; right:1rem; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:none; border:0; color:rgba(255,251,239,.8); cursor:pointer; }
.announce .close:hover{ background:rgba(255,255,255,.15); color:var(--cream); }

/* marcas */
.brand-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
@media (min-width:640px){ .brand-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .brand-grid{ grid-template-columns:repeat(5,1fr); gap:1.25rem; max-width:84rem; margin-inline:auto; } }
.brand-card{ display:flex; align-items:center; justify-content:center; height:13rem; padding:1.25rem; background:#fff; border:2px solid var(--ink); border-radius:1.1rem; box-shadow:0 5px 0 rgba(22,19,16,.1); transition:transform .2s, box-shadow .2s; }
.brand-card:hover{ transform:translateY(-5px); box-shadow:0 9px 0 var(--yellow); }
.brand-card img{ max-height:10rem; max-width:90%; object-fit:contain; }
.brand-more{ flex-direction:column; justify-content:center; gap:.55rem; background:var(--yellow); }
.brand-collage{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; width:100%; }
.brand-collage img{ width:100%; aspect-ratio:4/3; min-width:0; max-width:none; max-height:none; object-fit:contain; background:#fff; border:1.5px solid var(--ink); border-radius:.55rem; padding:.25rem; box-sizing:border-box; }
.brand-more .more-label{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.05rem; letter-spacing:.04em; color:var(--ink); }
.brand-card .fallback{ font-family:"Anton",sans-serif; font-size:1.6rem; text-transform:uppercase; letter-spacing:.02em; text-align:center; }

/* contacto */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:1024px){ .contact-grid{ grid-template-columns:1.3fr 1fr; } }
.map-box{ position:relative; border-radius:1.5rem; overflow:hidden; border:2px solid var(--ink); min-height:340px; }
@media (min-width:640px){ .map-box{ min-height:480px; } }
.map-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-chip{ position:absolute; top:1rem; left:1rem; background:rgba(255,251,239,.96); border:2px solid var(--ink); border-radius:1rem; padding:.7rem .9rem; display:flex; align-items:center; gap:.65rem; box-shadow:var(--shadow-card); }
.map-chip .ic{ width:40px; height:40px; border-radius:.7rem; background:var(--red); color:var(--cream); display:flex; align-items:center; justify-content:center; }
.contact-card{ padding:1.5rem; display:flex; flex-direction:column; gap:1.1rem; border:2px solid var(--ink); box-shadow:0 6px 0 rgba(22,19,16,.12); }
.contact-row .lbl{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; }
.divider{ height:1px; background:var(--line); }
.contact-link{ display:flex; align-items:center; gap:.75rem; padding:.7rem; border-radius:.7rem; background:var(--cream-2); border:2px solid var(--ink); transition:background .2s, color .2s; }
.contact-link:hover{ background:var(--yellow); }
.contact-link.wa:hover{ background:var(--wa); color:#fff; }
.contact-link.ig:hover{ background:var(--red); color:var(--cream); }

/* ===== 14. Helpers ===== */
.full{ width:100%; }
.mt-1{ margin-top:.5rem; } .mt-2{ margin-top:1rem; } .mt-3{ margin-top:1.5rem; }
.flex-center{ display:flex; align-items:center; gap:.5rem; }
.stack{ display:flex; flex-direction:column; gap:.5rem; }
.hidden{ display:none; }
.fit{ width:fit-content; }

/* íconos lucide */
svg.lucide{ width:20px; height:20px; stroke-width:2; flex-shrink:0; }
.btn .lucide{ width:16px; height:16px; }
.btn-lg .lucide{ width:18px; height:18px; }
.crumb .lucide{ width:13px; height:13px; }
.info-ico .lucide{ width:24px; height:24px; }
.pay-ico .lucide{ width:26px; height:26px; }
.cat-ico .lucide{ width:24px; height:24px; }
.icon-btn .lucide{ width:22px; height:22px; }
.faq-toggle .lucide{ width:16px; height:16px; }
.map-chip .ic .lucide{ width:20px; height:20px; }
.wa-fab .lucide{ width:27px; height:27px; }
.modal-close .lucide{ width:20px; height:20px; }
.split-card .go .lucide{ width:15px; height:15px; }
.announce .lucide{ width:24px; height:24px; }
.announce .close .lucide{ width:18px; height:18px; }
.cart-header .lucide{ width:22px; height:22px; }
.link-action .lucide{ width:15px; height:15px; }
.benefits .lucide{ width:16px; height:16px; }

/* ===== Catálogo dinámico (Supabase): carga / avisos ===== */
.cat-loading{ grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:.8rem; padding:4rem 1rem; font-weight:700; color:var(--ink-mute); font-size:1.05rem; }
.cat-spin{ width:22px; height:22px; border:3px solid var(--line); border-top-color:var(--red); border-radius:50%; animation:catspin .8s linear infinite; }
@keyframes catspin{ to{ transform:rotate(360deg); } }
.cat-notice{ grid-column:1/-1; text-align:center; padding:3rem 1.25rem; background:var(--cream-2); border:2px dashed var(--line); border-radius:1rem; }
.cat-notice-t{ font-family:"Anton","Impact",sans-serif; text-transform:uppercase; font-size:1.4rem; color:var(--ink); margin:0 0 .5rem; }
.cat-notice-d{ color:var(--ink-mute); font-weight:500; margin:0; }
.check-empty{ color:var(--ink-mute); font-size:.85rem; padding:.4rem .2rem; margin:0; }