/* ============================================================
   TUKI HOUSE — HOJA DE ESTILOS
   Diseño mobile-first. Paleta propia: charcoal + terracota + oro.
   ============================================================ */

/* ---------- 1. Variables de marca ---------- */
:root{
  --tuki-bg:            #16110d;
  --tuki-bg-soft:       #1f1811;
  --tuki-card:          #241b14;
  --tuki-card-border:   #382a1e;
  --tuki-cream:         #f6ecdc;
  --tuki-cream-dim:     #d8c8ae;
  --tuki-brick:         #a3402a;
  --tuki-brick-dark:    #7a2e1e;
  --tuki-gold:          #cf9a44;
  --tuki-gold-light:    #e6bd72;
  --tuki-olive:         #8aa86a;
  --tuki-shadow:        0 12px 30px rgba(0,0,0,.35);
  --tuki-radius-lg:     22px;
  --tuki-radius-md:     14px;
  --tuki-radius-sm:     8px;
  --font-display:       'Baloo 2', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:          'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-width: 1180px;
}

/* ---------- 2. Reset base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--tuki-bg);
  color:var(--tuki-cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--tuki-cream); font-weight:600; }
p{ margin:0; }
.container{ width:100%; max-width:var(--max-width); margin:0 auto; padding:0 20px; }
section{ padding:64px 0; position:relative; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
::selection{ background:var(--tuki-gold); color:#171310; }

/* Textura sutil de fondo (grano) para dar calidez artesanal */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- 3. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 26px; border-radius:999px; border:2px solid transparent;
  font-weight:600; font-size:1rem; min-height:52px; line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--tuki-brick); color:var(--tuki-cream); box-shadow:var(--tuki-shadow); }
.btn-primary:hover{ background:var(--tuki-brick-dark); }
.btn-gold{ background:var(--tuki-gold); color:#211809; box-shadow:var(--tuki-shadow); }
.btn-gold:hover{ background:var(--tuki-gold-light); }
.btn-outline{ background:transparent; border-color:var(--tuki-cream-dim); color:var(--tuki-cream); }
.btn-outline:hover{ border-color:var(--tuki-gold); color:var(--tuki-gold-light); }
.btn-whatsapp{ background:#0f7a3a; color:#fff; }
.btn-whatsapp:hover{ background:#0c6630; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.45; pointer-events:none; }
.btn svg{ width:20px; height:20px; flex-shrink:0; }

/* ---------- 4. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(22,17,13,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--tuki-card-border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-emblem{ width:44px; height:44px; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text strong{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:.04em; color:var(--tuki-cream); }
.brand-text span{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tuki-gold-light); margin-top:3px; }

.nav-desktop{ display:none; }
.nav-desktop ul{ display:flex; gap:28px; }
.nav-desktop a{ font-size:.95rem; font-weight:600; color:var(--tuki-cream-dim); padding:6px 2px; border-bottom:2px solid transparent; transition:.2s; }
.nav-desktop a:hover, .nav-desktop a:focus-visible{ color:var(--tuki-gold-light); border-color:var(--tuki-gold); }

.header-actions{ display:flex; align-items:center; gap:10px; }

.cart-btn{
  position:relative; background:var(--tuki-card); border:1px solid var(--tuki-card-border);
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--tuki-cream); transition:border-color .2s;
}
.cart-btn:hover{ border-color:var(--tuki-gold); }
.cart-btn svg{ width:22px; height:22px; }
.cart-count{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
  background:var(--tuki-brick); color:#fff; border-radius:999px; font-size:.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--tuki-bg);
}

.menu-toggle{
  width:48px; height:48px; border-radius:50%; background:var(--tuki-card); border:1px solid var(--tuki-card-border);
  display:flex; align-items:center; justify-content:center;
}
.menu-toggle svg{ width:22px; height:22px; color:var(--tuki-cream); }

/* Menú móvil */
.nav-mobile{
  position:fixed; inset:0 0 0 auto; width:min(320px,84vw); background:var(--tuki-bg-soft);
  z-index:90; transform:translateX(100%); transition:transform .3s ease; padding:26px 22px;
  box-shadow:-10px 0 30px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:26px;
}
.nav-mobile.open{ transform:translateX(0); }
.nav-mobile-header{ display:flex; justify-content:flex-end; }
.nav-mobile-close{ width:40px; height:40px; border-radius:50%; background:var(--tuki-card); border:1px solid var(--tuki-card-border); display:flex; align-items:center; justify-content:center; }
.nav-mobile-close svg{ width:20px; height:20px; color:var(--tuki-cream); }
.nav-mobile ul{ display:flex; flex-direction:column; gap:6px; }
.nav-mobile a{ display:block; padding:14px 8px; font-size:1.15rem; font-weight:600; border-bottom:1px solid var(--tuki-card-border); }
.nav-mobile-footer{ margin-top:auto; }
.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.nav-backdrop.open{ opacity:1; pointer-events:auto; }
body.nav-open{ overflow:hidden; }

/* ---------- 5. Hero ---------- */
.hero{
  padding:56px 0 60px; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 15% -10%, rgba(163,64,42,.35), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(207,154,68,.18), transparent 60%),
    var(--tuki-bg);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:.34; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(22,17,13,.55) 0%, rgba(22,17,13,.82) 55%, var(--tuki-bg) 92%),
    radial-gradient(120% 90% at 15% -10%, rgba(163,64,42,.35), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(207,154,68,.22), transparent 60%);
}

/* Fondo fotográfico reutilizable para otras secciones (Por qué TUKI, Eventos) */
.section-photo-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.section-photo-bg img{ width:100%; height:100%; object-fit:cover; opacity:.24; }
.section-photo-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,17,13,.7) 0%, rgba(31,24,17,.88) 60%, var(--section-photo-base, var(--tuki-bg)) 96%);
}
#por-que-tuki, #eventos{ overflow:hidden; }
#por-que-tuki{ --section-photo-base: var(--tuki-bg-soft); }
#por-que-tuki > .container, #eventos > .container{ position:relative; z-index:1; }
.hero-flames{ position:absolute; inset:auto 0 0 0; height:180px; opacity:.5; pointer-events:none; z-index:1; }
.hero .container{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; }
.hero-emblem{ width:104px; height:104px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:.16em;
  font-family:var(--font-display); font-size:.72rem; font-weight:700; color:var(--tuki-gold-light); background:rgba(207,154,68,.1);
  border:1px solid rgba(207,154,68,.35); padding:8px 16px; border-radius:999px;
}
.hero h1{ font-size:clamp(2.1rem, 7vw, 3.6rem); letter-spacing:.01em; }
.hero h1 span{ color:var(--tuki-gold-light); }
.hero-slogan{ font-family:var(--font-display); font-size:clamp(1.05rem,3.6vw,1.4rem); color:var(--tuki-cream-dim); }
.hero-text{ max-width:560px; color:var(--tuki-cream-dim); font-size:1.02rem; }
.hero-ctas{ display:flex; flex-direction:column; width:100%; gap:14px; max-width:360px; margin-top:6px; }
.hero-stats{ display:flex; gap:28px; margin-top:18px; flex-wrap:wrap; justify-content:center; }
.hero-stat{ display:flex; flex-direction:column; align-items:center; }
.hero-stat strong{ font-family:var(--font-display); font-size:1.5rem; color:var(--tuki-gold-light); }
.hero-stat span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--tuki-cream-dim); }

/* ---------- 6. Section heading genérico ---------- */
.section-head{ text-align:center; max-width:640px; margin:0 auto 36px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.section-head .eyebrow{ margin-bottom:2px; }
.section-head h2{ font-size:clamp(1.7rem,5vw,2.4rem); }
.section-head p{ color:var(--tuki-cream-dim); }

.section-alt{ background:var(--tuki-bg-soft); }

/* ---------- 7. Productos ---------- */
.productos-nota{
  font-size:.78rem; line-height:1.4; color:var(--tuki-cream-dim); opacity:.75;
}
.productos-nota:empty{ display:none; }

.pollo-banner{
  display:flex; align-items:center; gap:14px; background:var(--tuki-card); border:1px solid var(--tuki-card-border);
  border-radius:var(--tuki-radius-md); padding:16px 18px; margin-bottom:36px;
}
.pollo-banner > span{ width:40px; height:40px; flex-shrink:0; color:var(--tuki-gold-light); }
.pollo-banner > span svg{ width:100%; height:100%; }
.pollo-banner div{ display:flex; flex-direction:column; gap:2px; }
.pollo-banner strong{ font-size:.95rem; }
.pollo-banner span:last-child, .pollo-banner div span{ font-size:.82rem; color:var(--tuki-cream-dim); }

.product-group{ margin-bottom:52px; }
.product-group:last-child{ margin-bottom:0; }
.group-head{ text-align:center; max-width:620px; margin:0 auto 18px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.group-emoji{ font-size:1.8rem; line-height:1; }
.group-head h3{ font-family:var(--font-display); font-size:1.5rem; }
.group-head p{ color:var(--tuki-cream-dim); font-size:.92rem; }

.discount-banner{
  display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  background:rgba(207,154,68,.1); border:1px solid rgba(207,154,68,.4); color:var(--tuki-gold-light);
  border-radius:999px; padding:10px 18px; margin:0 auto 20px; max-width:fit-content; font-weight:600; font-size:.85rem;
}
.discount-banner svg{ width:18px; height:18px; flex-shrink:0; }

.category-tabs{
  display:flex; gap:10px; overflow-x:auto; padding:4px 4px 18px; margin-bottom:14px;
  scrollbar-width:none;
}
.category-tabs::-webkit-scrollbar{ display:none; }
.tab-btn{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  background:var(--tuki-card); border:1px solid var(--tuki-card-border); color:var(--tuki-cream-dim);
  font-weight:600; font-size:.88rem; transition:.2s;
}
.tab-btn svg{ width:18px; height:18px; }
.tab-btn.active, .tab-btn:hover{ background:var(--tuki-brick); border-color:var(--tuki-brick); color:#fff; }

.product-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.product-card{
  background:var(--tuki-card); border:1px solid var(--tuki-card-border); border-radius:var(--tuki-radius-lg);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--tuki-shadow);
}
.product-media{
  aspect-ratio:4/3; position:relative; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 120% at 20% 15%, rgba(207,154,68,.22), transparent 60%),
    linear-gradient(160deg, #2c2115, #1b140d);
}
.product-media img{ width:100%; height:100%; object-fit:cover; }
.product-media svg{ width:56px; height:56px; color:var(--tuki-gold-light); opacity:.85; }
.product-badge{
  position:absolute; top:12px; left:12px; background:rgba(22,17,13,.75); color:var(--tuki-gold-light);
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(207,154,68,.4);
}
.product-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-body h3{ font-size:1.12rem; }
.product-desc{ color:var(--tuki-cream-dim); font-size:.92rem; }

.price-block{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:auto; padding-top:6px; }
.price-original{ font-size:.85rem; color:var(--tuki-cream-dim); text-decoration:line-through; text-decoration-color:var(--tuki-brick); opacity:.8; }
.price-final{ font-family:var(--font-display); font-size:1.5rem; color:var(--tuki-gold-light); font-weight:700; }
.price-final-solo{ font-size:1.3rem; }
.price-note{ flex-basis:100%; font-size:.7rem; letter-spacing:.02em; color:var(--tuki-olive); background:rgba(138,168,106,.18); border:1px solid rgba(138,168,106,.4); padding:3px 8px; border-radius:999px; display:inline-block; width:fit-content; }
.price-final-consultar{ font-size:1.05rem; color:var(--tuki-cream-dim); font-weight:600; }
.consultar-btn{ flex:1; font-size:.88rem; padding:12px 16px; }
.consultar-btn svg{ width:17px; height:17px; }
.price-100g{ flex-basis:100%; font-size:.76rem; color:var(--tuki-cream-dim); opacity:.85; }
.horma-nota{ display:block; font-size:.66rem; color:var(--tuki-cream-dim); opacity:.65; margin-top:2px; }

.pieza-estimada{
  display:flex; flex-direction:column; gap:3px; margin-top:8px; padding:10px 12px;
  background:var(--tuki-bg-soft); border:1px solid var(--tuki-card-border); border-radius:var(--tuki-radius-sm);
}
.pieza-estimada-linea{ font-size:.84rem; color:var(--tuki-cream); }
.pieza-estimada-linea strong{ color:var(--tuki-cream-dim); font-weight:600; }
.pieza-estimada-nota{ font-size:.7rem; color:var(--tuki-cream-dim); opacity:.85; }

.product-footer{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.is-agotado{ opacity:.55; }
.is-agotado .product-media{ filter:grayscale(.5); }
.product-agotado-ribbon{
  position:absolute; top:12px; right:12px; background:var(--tuki-brick); color:#fff;
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:6px 10px; border-radius:999px;
}

/* ============ OFERTAS VIGENTES ============
   Sección pública que llena js/ofertas.js con las ofertas ACTIVAS.
   Reutiliza la misma identidad visual que el resto del catálogo
   (tarjetas oscuras, dorado, misma tipografía) para que no se sienta
   como algo aparte del sitio. */
.ofertas-vigentes .eyebrow{ background:rgba(163,64,42,.16); border-color:rgba(163,64,42,.4); color:#ff9d7a; }
.ofertas-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px;
}
.oferta-card{
  background:var(--tuki-card); border:1px solid rgba(207,154,68,.35); border-radius:var(--tuki-radius-lg);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--tuki-shadow);
  cursor:pointer; transition:transform .2s, border-color .2s; text-align:left;
}
.oferta-card:hover{ transform:translateY(-3px); border-color:var(--tuki-gold); }
.oferta-card-media{
  position:relative; aspect-ratio:4/3; background:var(--tuki-bg-soft);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.oferta-card-media img{ width:100%; height:100%; object-fit:cover; }
.oferta-card-ribbon{
  position:absolute; top:12px; left:12px; background:var(--tuki-brick); color:#fff;
  font-size:.7rem; letter-spacing:.03em; font-weight:700; padding:5px 10px; border-radius:999px;
}
.oferta-card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; }
.oferta-card-body h3{ font-size:1.08rem; }
.oferta-card-desc{ color:var(--tuki-cream-dim); font-size:.88rem; margin:0; }
.oferta-card-precio{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.oferta-precio-original{ font-size:.85rem; color:var(--tuki-cream-dim); text-decoration:line-through; text-decoration-color:var(--tuki-brick); opacity:.8; }
.oferta-precio-final{ font-family:var(--font-display); font-size:1.5rem; color:var(--tuki-gold-light); font-weight:700; }
.oferta-card-nota{ font-size:.72rem; color:var(--tuki-olive); background:rgba(138,168,106,.18); border:1px solid rgba(138,168,106,.4); padding:3px 8px; border-radius:999px; display:inline-block; width:fit-content; }
.oferta-card-btn{ margin-top:6px; width:100%; font-size:.9rem; padding:11px 16px; }

.qty-control{
  display:flex; align-items:center; border:1px solid var(--tuki-card-border); border-radius:999px; overflow:hidden;
}
.qty-control button{ width:40px; height:44px; background:transparent; color:var(--tuki-cream); font-size:1.1rem; border:none; }
.qty-control button:active{ background:var(--tuki-card-border); }
.qty-control input{
  width:44px; text-align:center; background:transparent; border:none; color:var(--tuki-cream); font-size:.92rem;
  -moz-appearance:textfield;
}
.qty-control input::-webkit-outer-spin-button, .qty-control input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.peso-select{
  flex:0 0 auto; max-width:132px; height:44px; border-radius:999px; padding:0 14px;
  background:var(--tuki-card); border:1px solid var(--tuki-card-border); color:var(--tuki-cream);
  font-family:inherit; font-size:.85rem; font-weight:600;
}
.add-btn{ flex:1; }
.add-btn.added{ background:var(--tuki-olive); }

.empty-state{ text-align:center; padding:40px 10px; color:var(--tuki-cream-dim); }

/* ---------- 8. Carrito flotante + drawer ---------- */
.fab-cart{
  position:fixed; right:18px; bottom:18px; z-index:70; display:flex; align-items:center; gap:10px;
  background:var(--tuki-brick); color:#fff; border-radius:999px; padding:14px 20px; box-shadow:0 14px 30px rgba(0,0,0,.45);
  font-weight:700; opacity:0; transform:translateY(16px); pointer-events:none; transition:.25s ease;
}
.fab-cart.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.fab-cart svg{ width:20px; height:20px; }
.fab-cart .fab-total{ color:var(--tuki-cream); }

.cart-drawer{
  position:fixed; z-index:95; right:0; bottom:0; left:0; top:auto; max-height:88vh;
  background:var(--tuki-bg-soft); border-top:1px solid var(--tuki-card-border);
  border-radius:22px 22px 0 0; transform:translateY(100%); transition:transform .3s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateY(0); }
.cart-drawer-handle{ width:44px; height:5px; background:var(--tuki-card-border); border-radius:999px; margin:12px auto 4px; }
.cart-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 20px 14px; border-bottom:1px solid var(--tuki-card-border); }
.cart-drawer-head h3{ font-size:1.25rem; }
.cart-close{ width:38px; height:38px; border-radius:50%; background:var(--tuki-card); border:1px solid var(--tuki-card-border); display:flex; align-items:center; justify-content:center; }
.cart-close svg{ width:18px; height:18px; color:var(--tuki-cream); }
.cart-items{ padding:12px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; flex:1; }
.cart-item{ display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--tuki-card-border); padding-bottom:14px; }
.cart-item-thumb{ width:56px; height:56px; border-radius:12px; background:linear-gradient(160deg,#2c2115,#1b140d); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.cart-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-item-thumb svg{ width:26px; height:26px; color:var(--tuki-gold-light); }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h4{ font-size:.95rem; font-family:var(--font-body); font-weight:700; }
.cart-item-info span{ font-size:.8rem; color:var(--tuki-gold-light); }
.cart-item-info span s{ color:var(--tuki-cream-dim); opacity:.75; text-decoration-color:var(--tuki-brick); }
.cart-item-actions{ display:flex; align-items:center; gap:8px; }
.cart-item-remove{ width:34px; height:34px; border-radius:50%; background:transparent; border:1px solid var(--tuki-card-border); display:flex; align-items:center; justify-content:center; color:var(--tuki-cream-dim); }
.cart-item-remove svg{ width:16px; height:16px; }
.cart-drawer-footer{ padding:16px 20px 22px; border-top:1px solid var(--tuki-card-border); display:flex; flex-direction:column; gap:12px; }
.cart-total-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:1.05rem; }
.cart-total-row strong{ font-family:var(--font-display); font-size:1.5rem; color:var(--tuki-gold-light); }
.cart-envio-nota{ display:flex; flex-direction:column; gap:2px; margin:-4px 0 0; font-size:.76rem; line-height:1.35; color:var(--tuki-cream-dim); opacity:.85; }
.cart-envio-nota:empty{ display:none; margin:0; }
.cart-envio-nota span:first-child{ color:var(--tuki-olive); font-weight:600; }

.cart-payment{ display:flex; flex-direction:column; gap:8px; padding-top:4px; border-top:1px dashed var(--tuki-card-border); }
.cart-payment-titulo{ font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--tuki-cream-dim); margin:2px 0 0; }
.payment-option{ display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--tuki-card-border); border-radius:12px; cursor:pointer; transition:border-color .2s, background .2s; }
.payment-option:hover{ border-color:var(--tuki-gold); }
.payment-option:has(input:checked),
.payment-option.is-selected{ border-color:var(--tuki-gold); background:rgba(207,154,68,.08); }
.payment-option input[type="radio"]{ accent-color:var(--tuki-gold); width:17px; height:17px; flex-shrink:0; }
.payment-option-main{ display:flex; flex:1; align-items:center; justify-content:space-between; gap:10px; }
.payment-option-nombre{ font-size:.92rem; font-weight:600; color:var(--tuki-cream); }
.payment-option-tag{ font-size:.74rem; font-weight:600; color:var(--tuki-cream-dim); white-space:nowrap; }
.payment-option-tag--free{ color:var(--tuki-olive); }
.cart-payment-nota{ font-size:.76rem; line-height:1.4; color:var(--tuki-cream-dim); opacity:.85; margin:0; }
.cart-payment-nota:empty{ display:none; }
.cart-payment-estado{ font-size:.78rem; line-height:1.4; margin:0; color:var(--tuki-gold-light); min-height:0; }
.cart-payment-estado:empty{ display:none; }
.cart-payment-estado.is-error{ color:#e77; }

/* ---------- 9. Nosotros ---------- */
.about-photos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:32px; }
.about-photo{ margin:0; display:flex; flex-direction:column; gap:8px; }
.about-photo figcaption{ text-align:center; font-size:.78rem; color:var(--tuki-cream-dim); letter-spacing:.02em; }
.about-media{
  aspect-ratio:4/3; border-radius:var(--tuki-radius-lg); overflow:hidden; position:relative;
  background:
    radial-gradient(120% 120% at 15% 10%, rgba(163,64,42,.35), transparent 60%),
    linear-gradient(150deg,#2c2115,#181109);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--tuki-shadow);
}
.about-media img{ width:100%; height:100%; object-fit:cover; }
.about-media svg{ width:72px; height:72px; color:var(--tuki-gold-light); opacity:.9; }

.about-text{ max-width:760px; margin:0 auto; }
.about-text p{ color:var(--tuki-cream-dim); margin-bottom:16px; }

.confianza-card{
  display:flex; gap:16px; align-items:flex-start; background:var(--tuki-card); border:1px solid rgba(207,154,68,.35);
  border-radius:var(--tuki-radius-md); padding:20px; margin-top:24px;
}
.confianza-card svg{ width:32px; height:32px; color:var(--tuki-gold-light); flex-shrink:0; }
.confianza-card strong{ display:block; font-family:var(--font-display); font-size:1.05rem; margin-bottom:6px; color:var(--tuki-gold-light); }
.confianza-card p{ color:var(--tuki-cream-dim); font-size:.92rem; margin:0; }

.about-values{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.value-chip{ display:flex; flex-direction:column; gap:8px; background:var(--tuki-card); border:1px solid var(--tuki-card-border); border-radius:var(--tuki-radius-md); padding:16px; }
.value-chip svg{ width:26px; height:26px; color:var(--tuki-gold-light); }
.value-chip strong{ font-size:.92rem; }
.value-chip span{ font-size:.78rem; color:var(--tuki-cream-dim); }

.eventos-card{
  background:var(--tuki-card); border:1px solid rgba(207,154,68,.35); border-radius:var(--tuki-radius-lg);
  padding:28px; box-shadow:var(--tuki-shadow);
}
.eventos-grid{ display:grid; gap:16px; margin-bottom:22px; }
.eventos-card .btn{ display:flex; max-width:420px; margin:0 auto; }
@media (min-width:760px){
  .eventos-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- 9b. Reseñas de Google ---------- */
.rating-badge{
  display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap;
  width:fit-content; margin:0 auto 32px; background:var(--tuki-card); border:1px solid rgba(207,154,68,.35);
  border-radius:999px; padding:10px 20px; text-decoration:none; transition:border-color .2s;
}
.rating-badge:hover{ border-color:var(--tuki-gold); }
.rating-badge-score{ font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--tuki-gold-light); }
.rating-badge-stars{ display:inline-flex; gap:2px; }
.rating-badge-stars svg{ width:16px; height:16px; color:var(--tuki-gold); }
.rating-badge-text{ font-size:.85rem; color:var(--tuki-cream-dim); }
.reviews-grid{ display:grid; gap:16px; margin-bottom:28px; }
.review-card{
  background:var(--tuki-card); border:1px solid var(--tuki-card-border); border-radius:var(--tuki-radius-md);
  padding:22px; display:flex; flex-direction:column; gap:12px;
}
.review-stars{ color:var(--tuki-gold); letter-spacing:2px; font-size:.95rem; }
.review-quote{ color:var(--tuki-cream-dim); font-size:.92rem; line-height:1.55; flex-grow:1; }
.review-author{ font-family:var(--font-display); font-size:.88rem; color:var(--tuki-cream); font-weight:600; }
.review-author-tag{ display:block; font-family:var(--font-body); font-size:.72rem; font-weight:400; color:var(--tuki-cream-dim); opacity:.75; margin-top:2px; }
.reviews-cta{ display:flex; max-width:360px; margin:0 auto; }
@media (min-width:760px){
  .reviews-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- 10. Contacto ---------- */
.contact-grid{ display:grid; gap:16px; }
.contact-card{
  background:var(--tuki-card); border:1px solid var(--tuki-card-border); border-radius:var(--tuki-radius-md);
  padding:20px; display:flex; gap:14px; align-items:flex-start;
}
.contact-card .icon-wrap{ width:44px; height:44px; border-radius:12px; background:rgba(207,154,68,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-card svg{ width:22px; height:22px; color:var(--tuki-gold-light); }
.contact-card h3{ font-size:1rem; margin-bottom:4px; }
.contact-card p, .contact-card a{ color:var(--tuki-cream-dim); font-size:.92rem; }
.contact-card a:hover{ color:var(--tuki-gold-light); }
.contact-card--envio{ grid-column:1 / -1; }
.contact-card--envio p{ margin:0 0 8px; line-height:1.5; }
.contact-card--envio p:last-child{ margin-bottom:0; }
.hours-list{ display:flex; flex-direction:column; gap:4px; }
.hours-list li{ display:flex; justify-content:space-between; gap:10px; font-size:.9rem; color:var(--tuki-cream-dim); }
.hours-list li strong{ color:var(--tuki-cream); font-weight:600; }
.map-embed{ border-radius:var(--tuki-radius-md); overflow:hidden; border:1px solid var(--tuki-card-border); margin-top:20px; }
.map-embed iframe{ width:100%; height:260px; border:0; display:block; filter:grayscale(.3) contrast(1.05); }

/* ---------- 11. Instagram ---------- */
.insta-head{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; margin-bottom:28px; }
.insta-handle{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.4rem; color:var(--tuki-gold-light); }
.insta-handle svg{ width:26px; height:26px; }
.insta-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.insta-tile{
  aspect-ratio:1/1; border-radius:16px; overflow:hidden; position:relative;
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(163,64,42,.4), transparent 60%),
    linear-gradient(150deg,#2c2115,#1b140d);
  display:flex; align-items:center; justify-content:center;
}
.insta-tile img{ width:100%; height:100%; object-fit:cover; }
.insta-tile svg{ width:34px; height:34px; color:var(--tuki-gold-light); opacity:.85; }

/* ---------- 12. Footer ---------- */
.site-footer{ background:#100c09; padding:44px 0 100px; border-top:1px solid var(--tuki-card-border); }
@media (min-width: 640px){
  .site-footer{ padding-bottom:26px; }
}
.footer-top{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.footer-emblem{ width:56px; height:56px; }
.footer-social{ display:flex; gap:14px; }
.footer-social a{ width:42px; height:42px; border-radius:50%; background:var(--tuki-card); border:1px solid var(--tuki-card-border); display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:20px; height:20px; color:var(--tuki-cream); }
.footer-note{ margin-top:28px; text-align:center; font-size:.8rem; color:var(--tuki-cream-dim); line-height:1.7; }
.footer-note strong{ color:var(--tuki-gold-light); }

/* ---------- 13. WhatsApp flotante global ---------- */
.wa-float{
  position:fixed; left:18px; bottom:18px; z-index:70; width:58px; height:58px; border-radius:50%;
  background:#0f7a3a; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px rgba(0,0,0,.45);
  opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.wa-float.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.wa-float svg{ width:28px; height:28px; color:#fff; }

/* ---------- 14. Utilidades responsive ---------- */
@media (min-width: 640px){
  .hero-ctas{ flex-direction:row; max-width:none; }
  .about-values{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .insta-grid{ grid-template-columns:repeat(3,1fr); }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width: 860px){
  .about-photos{ grid-template-columns:1fr 1fr; max-width:760px; margin-left:auto; margin-right:auto; }
}

@media (min-width: 960px){
  .nav-desktop{ display:block; }
  .menu-toggle{ display:none; }
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  section{ padding:88px 0; }
  .hero{ padding:80px 0 90px; }
  .cart-drawer{ left:auto; width:420px; border-radius:22px 0 0 22px; top:0; max-height:100vh; }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .about-values{ grid-template-columns:repeat(3,1fr); }
}

@media (min-width: 1180px){
  .product-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- 15. Caja Tuki (suscripción mensual) ---------- */
.caja-tuki-subtitulo{ font-family:var(--font-display); font-size:1.2rem; color:var(--tuki-gold-light); margin-top:-4px; }
.caja-tuki-frase{ font-family:var(--font-display); font-size:1.02rem; color:var(--tuki-cream); }

/* --- Badge chico en el Hero --- */
.hero-caja-badge{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 12px;
  margin-top:22px; padding:10px 18px; border-radius:999px;
  background:rgba(207,154,68,.1); border:1px solid rgba(207,154,68,.4);
  transition:border-color .2s, background-color .2s;
}
.hero-caja-badge:hover{ border-color:var(--tuki-gold); background:rgba(207,154,68,.16); }
.hero-caja-badge-tag{
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:#1a140c; background:var(--tuki-gold-light); padding:4px 10px; border-radius:999px;
}
.hero-caja-badge-frase{ font-size:.88rem; color:var(--tuki-cream); }
.hero-caja-badge-cta{ font-size:.82rem; font-weight:700; color:var(--tuki-gold-light); }

/* --- Mini-sección destacada en el Home, debajo del Hero --- */
.caja-tuki-teaser{ padding-top:8px; }
.caja-teaser-head{ text-align:center; max-width:600px; margin:0 auto 28px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.caja-teaser-head h2{ font-size:clamp(1.5rem,4.4vw,2.1rem); }
.caja-teaser-subtitulo{ font-family:var(--font-display); font-size:1.1rem; color:var(--tuki-gold-light); }
.caja-teaser-head p:not(.caja-teaser-subtitulo){ color:var(--tuki-cream-dim); }

.caja-teaser-grid{ display:grid; grid-template-columns:1fr; gap:14px; max-width:960px; margin:0 auto 26px; }
.caja-teaser-card{
  display:flex; align-items:center; gap:14px; background:var(--tuki-card); border:1px solid var(--tuki-card-border);
  border-radius:var(--tuki-radius-md); padding:12px; transition:border-color .2s, transform .15s;
}
.caja-teaser-card:hover{ border-color:var(--caja-t-accent, var(--tuki-gold)); transform:translateY(-2px); }
.caja-teaser-card--olive{ --caja-t-accent: var(--tuki-olive); }
.caja-teaser-card--gold{ --caja-t-accent: var(--tuki-gold); }
.caja-teaser-card--brick{ --caja-t-accent: var(--tuki-brick); }
.caja-teaser-media{ position:relative; width:64px; height:64px; border-radius:12px; overflow:hidden; flex-shrink:0; background:linear-gradient(160deg,#2c2115,#1b140d); }
.caja-teaser-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.caja-teaser-media img[src*="hamburguesas-artesanales"]{ object-position:70% center; }
.caja-teaser-tag{
  position:absolute; bottom:-1px; left:-1px; right:-1px; text-align:center; font-size:.52rem; letter-spacing:.06em;
  text-transform:uppercase; font-weight:700; color:#1a140c; background:var(--caja-t-accent, var(--tuki-gold)); padding:2px 0;
}
/* El fondo "brick" es más oscuro que el oro/oliva: con texto oscuro no llega al contraste mínimo. */
.caja-teaser-card--brick .caja-teaser-tag{ color:var(--tuki-cream); }
.caja-teaser-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.caja-teaser-body strong{ font-family:var(--font-display); font-size:1rem; }
.caja-teaser-subtitulo{ font-size:.8rem; color:var(--tuki-cream-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.caja-teaser-precio{ font-size:.85rem; font-weight:700; color:var(--tuki-gold-light); }
.caja-teaser-precio--pendiente{ font-weight:600; color:var(--tuki-cream-dim); }
.caja-teaser-cta{ display:flex; max-width:340px; margin:0 auto; }

/* --- "¿Cómo funciona?" --- */
.caja-como-funciona{ text-align:center; max-width:760px; margin:0 auto 44px; }
.caja-pasos{ display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.caja-paso{
  display:flex; align-items:center; gap:14px; background:var(--tuki-card); border:1px solid var(--tuki-card-border);
  border-radius:var(--tuki-radius-md); padding:14px 18px; text-align:left;
}
.caja-paso-num{ font-family:var(--font-display); font-size:1.4rem; color:var(--tuki-gold-light); flex-shrink:0; width:2ch; }
.caja-paso-texto{ font-weight:600; font-size:.96rem; }
.caja-pasos-frase{ font-family:var(--font-display); font-size:1rem; color:var(--tuki-cream-dim); }
.caja-pasos-nota{ font-size:.82rem; color:var(--tuki-cream-dim); opacity:.85; max-width:520px; margin:6px auto 0; line-height:1.5; }

/* --- Las 3 cajas --- */
.caja-tuki-grid{ display:grid; grid-template-columns:1fr; gap:22px; margin-bottom:40px; }

.caja-card{
  --caja-accent: var(--tuki-gold);
  background:var(--tuki-card); border:1px solid var(--tuki-card-border); border-radius:var(--tuki-radius-lg);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--tuki-shadow); position:relative;
}
.caja-card--olive{ --caja-accent: var(--tuki-olive); }
.caja-card--gold{ --caja-accent: var(--tuki-gold); }
.caja-card--brick{ --caja-accent: var(--tuki-brick); }

.caja-card-media{
  aspect-ratio:4/3; position:relative; background:
    radial-gradient(120% 120% at 20% 15%, rgba(207,154,68,.22), transparent 60%),
    linear-gradient(160deg, #2c2115, #1b140d);
  border-bottom:4px solid var(--caja-accent);
}
.caja-card-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
/* Esta foto es una escena amplia (parrilla completa); centramos el recorte
   un poco más a la derecha para que las hamburguesas queden protagonistas. */
.caja-card-media img[src*="hamburguesas-artesanales"]{ object-position:70% center; }
.caja-card-tag{
  position:absolute; top:12px; left:12px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:#1a140c; background:var(--caja-accent); padding:5px 12px; border-radius:999px;
}
/* El fondo "brick" es más oscuro que el oro/oliva: con texto oscuro no llega al contraste mínimo. */
.caja-card--brick .caja-card-tag{ color:var(--tuki-cream); }

.caja-card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.caja-card h3{ font-family:var(--font-display); font-size:1.3rem; letter-spacing:.01em; }
.caja-card-subtitulo{ color:var(--tuki-cream-dim); font-size:.92rem; margin-top:-6px; }

.caja-resumen-list{ display:flex; flex-direction:column; gap:9px; }
.caja-resumen-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--tuki-cream); }
.caja-resumen-icon{ width:20px; height:20px; flex-shrink:0; color:var(--caja-accent); margin-top:1px; }
.caja-resumen-icon svg{ width:100%; height:100%; }

.caja-card-meta{ font-size:.74rem; color:var(--tuki-cream-dim); opacity:.8; }

.caja-card-pricing{ display:flex; flex-direction:column; gap:2px; margin-top:auto; padding-top:14px; border-top:1px solid var(--tuki-card-border); }
.caja-valor-separado-label{ font-size:.74rem; color:var(--tuki-cream-dim); }
.caja-valor-separado{ font-size:.9rem; color:var(--tuki-cream-dim); text-decoration:line-through; text-decoration-color:var(--tuki-brick); opacity:.8; margin-bottom:4px; }
.caja-precio-final-label{ font-size:.78rem; color:var(--tuki-cream-dim); }
.caja-precio-final{ font-family:var(--font-display); font-size:1.7rem; color:var(--tuki-gold-light); font-weight:700; }
.caja-ahorro{ font-size:.76rem; color:var(--tuki-olive); background:rgba(138,168,106,.18); border:1px solid rgba(138,168,106,.4); padding:3px 9px; border-radius:999px; display:inline-block; width:fit-content; margin-top:6px; }
.caja-precio-pendiente{ font-size:.86rem; color:var(--tuki-cream-dim); }

.caja-cta{ margin-top:4px; }

/* --- Detalle completo (colapsado por defecto) --- */
.caja-detalle{ margin-top:2px; }
.caja-detalle summary{
  display:flex; align-items:center; justify-content:center; gap:6px; list-style:none; cursor:pointer;
  font-size:.86rem; font-weight:700; color:var(--tuki-gold-light); padding:8px 0; text-align:center;
}
.caja-detalle summary::-webkit-details-marker{ display:none; }
.caja-detalle-cerrar{ display:none; }
.caja-detalle[open] .caja-detalle-abrir{ display:none; }
.caja-detalle[open] .caja-detalle-cerrar{ display:inline; }
.caja-detalle-chevron{ width:16px; height:16px; transition:transform .2s; }
.caja-detalle[open] .caja-detalle-chevron{ transform:rotate(180deg); }
.caja-detalle .caja-card-items{ display:flex; flex-direction:column; gap:10px; padding-top:12px; margin-top:6px; border-top:1px solid var(--tuki-card-border); }
.caja-card-items li{ display:flex; gap:10px; align-items:flex-start; }
.caja-item-check{ width:19px; height:19px; flex-shrink:0; color:var(--caja-accent); margin-top:2px; }
.caja-item-check svg{ width:100%; height:100%; }
.caja-item-texto{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.caja-item-linea{ font-size:.9rem; color:var(--tuki-cream); }
.caja-corte-rotativo{ font-size:.76rem; color:var(--tuki-cream-dim); opacity:.85; }
.caja-pizza-selects{ display:flex; flex-direction:column; gap:8px; }
.caja-pizza-select{
  width:100%; height:40px; border-radius:10px; padding:0 12px;
  background:var(--tuki-bg-soft); border:1px solid var(--tuki-card-border); color:var(--tuki-cream);
  font-family:inherit; font-size:.85rem;
}

/* --- "¿Por qué una Caja Tuki?" --- */
.caja-beneficios{ max-width:640px; margin:0 auto 44px; text-align:center; }
.caja-beneficios h3{ font-family:var(--font-display); font-size:1.25rem; margin-bottom:16px; }
.caja-beneficios-list{ display:grid; grid-template-columns:1fr; gap:10px; text-align:left; }
.caja-beneficios-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--tuki-cream-dim); }
.caja-beneficios-list svg{ width:18px; height:18px; flex-shrink:0; color:var(--tuki-gold-light); margin-top:1px; }

.caja-tuki-agregados{ text-align:center; max-width:760px; margin:0 auto 28px; }
.caja-tuki-agregados h3{ font-family:var(--font-display); font-size:1.3rem; margin-bottom:6px; }
.caja-tuki-agregados p{ color:var(--tuki-cream-dim); margin-bottom:18px; }
.caja-agregados-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.caja-agregado-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--tuki-cream-dim);
  background:var(--tuki-bg-soft); border:1px solid var(--tuki-card-border); border-radius:999px; padding:8px 14px;
}
.caja-agregado-chip svg{ width:14px; height:14px; color:var(--tuki-gold-light); flex-shrink:0; }

.caja-tuki-cierre{ text-align:center; font-family:var(--font-display); font-size:1.15rem; color:var(--tuki-gold-light); max-width:640px; margin:0 auto; }

@media (min-width:640px){
  .caja-teaser-grid{ grid-template-columns:repeat(3,1fr); }
  .caja-teaser-card{ flex-direction:column; text-align:center; align-items:center; padding:16px; }
  .caja-teaser-media{ width:100%; height:auto; aspect-ratio:4/3; border-radius:var(--tuki-radius-sm); }
  .caja-teaser-subtitulo{ white-space:normal; }
  .caja-pasos{ flex-direction:row; }
  .caja-paso{ flex:1; flex-direction:column; text-align:center; gap:6px; }
  .caja-beneficios-list{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:960px){
  .caja-tuki-grid{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
}

/* ---------- 16. Catálogo por categorías (Nivel 1 → 2 → 3) ---------- */

/* --- Nivel 1: grilla de categorías visuales --- */
#catalogoGridWrap{ margin-top:8px; }
.catalogo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.catalogo-tile{
  display:flex; flex-direction:column; text-align:left; background:var(--tuki-card); border:1px solid var(--tuki-card-border);
  border-radius:var(--tuki-radius-md); overflow:hidden; box-shadow:var(--tuki-shadow); transition:transform .15s ease, border-color .2s ease;
}
.catalogo-tile:hover{ transform:translateY(-3px); border-color:var(--tuki-gold); }
.catalogo-tile--destacada{ border-color:rgba(207,154,68,.55); }
.catalogo-tile-media{
  position:relative; aspect-ratio:4/3; display:block; background:
    radial-gradient(120% 120% at 20% 15%, rgba(207,154,68,.22), transparent 60%),
    linear-gradient(160deg, #2c2115, #1b140d);
}
.catalogo-tile-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.catalogo-tile-ribbon{
  position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:.6rem; letter-spacing:.05em;
  text-transform:uppercase; font-weight:700; color:#1a140c; background:var(--tuki-gold-light); padding:4px 6px;
}
.catalogo-tile-body{ display:flex; flex-direction:column; gap:2px; padding:12px 14px 14px; }
.catalogo-tile-emoji{ font-size:1.3rem; line-height:1; margin-bottom:2px; }
.catalogo-tile-body strong{ font-family:var(--font-display); font-size:.98rem; line-height:1.2; }
.catalogo-tile-cant{ font-size:.74rem; color:var(--tuki-cream-dim); }

/* --- Nivel 2: panel de categoría abierta --- */
/* scroll-margin-top evita que el header sticky tape el botón "Volver" al
   hacer scrollIntoView desde JS al abrir/cerrar una categoría. */
#catalogoGridWrap, .catalogo-panel{ scroll-margin-top:88px; }
.catalogo-panel{ margin-top:8px; }
.catalogo-volver{
  display:inline-flex; align-items:center; gap:6px; background:transparent; border:none; color:var(--tuki-gold-light);
  font-weight:600; font-size:.9rem; padding:8px 0 18px; margin:0;
}
.catalogo-volver svg{ width:18px; height:18px; }
.catalogo-volver:hover{ color:var(--tuki-gold); }

.catalogo-panel-head{ text-align:center; max-width:560px; margin:0 auto 18px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.catalogo-panel-emoji{ font-size:1.8rem; line-height:1; }
.catalogo-panel-head h3{ font-family:var(--font-display); font-size:1.35rem; }
.catalogo-panel-head h3 span{ color:var(--tuki-gold-light); font-size:.95rem; font-weight:600; }
.catalogo-panel-head p{ color:var(--tuki-cream-dim); font-size:.9rem; }

/* Nivel 2: grilla compacta de productos (foto chica + nombre + precio) */
.catalogo-lista{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.catalogo-producto{
  display:flex; flex-direction:column; text-align:left; width:100%; background:var(--tuki-card);
  border:1px solid var(--tuki-card-border); border-radius:var(--tuki-radius-md); overflow:hidden;
  transition:border-color .15s ease, transform .15s ease;
}
.catalogo-producto:hover{ border-color:var(--tuki-gold); transform:translateY(-2px); }
.catalogo-producto.is-agotado{ opacity:.6; }
.catalogo-producto-media{
  position:relative; aspect-ratio:4/3; display:block; background:
    radial-gradient(120% 120% at 20% 15%, rgba(207,154,68,.18), transparent 60%),
    linear-gradient(160deg, #2c2115, #1b140d);
}
.catalogo-producto-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.catalogo-producto-media svg{ width:34px; height:34px; color:var(--tuki-gold-light); opacity:.85; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.catalogo-producto-ribbon{
  position:absolute; top:8px; right:8px; background:var(--tuki-brick); color:#fff;
  font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700; padding:4px 8px; border-radius:999px;
}
.catalogo-producto-info{ display:flex; flex-direction:column; gap:4px; padding:10px 12px 12px; }
.catalogo-producto-nombre{ font-weight:600; font-size:.86rem; line-height:1.3; }
.catalogo-producto-precio{ font-size:.84rem; color:var(--tuki-gold-light); font-weight:700; }
.catalogo-producto-precio s{ color:var(--tuki-cream-dim); font-weight:400; opacity:.75; text-decoration-color:var(--tuki-brick); margin-right:2px; }
.catalogo-producto-estado{ font-size:.78rem; color:var(--tuki-cream-dim); }

/* --- Nivel 3: modal de detalle de producto --- */
.product-modal-backdrop{
  position:fixed; inset:0; z-index:94; background:rgba(10,7,5,.72); opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.product-modal-backdrop.open{ opacity:1; pointer-events:auto; }
.product-modal{
  position:fixed; z-index:96; left:50%; top:50%; width:min(440px, calc(100vw - 32px)); max-height:88vh; overflow-y:auto;
  transform:translate(-50%,-50%) scale(.96); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  border-radius:var(--tuki-radius-lg); box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.product-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.product-modal .product-card{ box-shadow:none; border-radius:var(--tuki-radius-lg); }
.product-modal .product-media{ aspect-ratio:1/1; }
.product-modal-close{
  position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%;
  background:rgba(22,17,13,.8); border:1px solid rgba(255,255,255,.15); color:var(--tuki-cream);
  display:flex; align-items:center; justify-content:center;
}
.product-modal-close svg{ width:18px; height:18px; }

@media (min-width:540px){
  .catalogo-grid{ grid-template-columns:repeat(3,1fr); }
  .catalogo-lista{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:860px){
  .catalogo-grid{ grid-template-columns:repeat(4,1fr); }
  .catalogo-lista{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:960px){
  .product-modal{ width:480px; }
}

/* Estados de foco accesibles */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--tuki-gold-light); outline-offset:2px;
}

/* Reducir animación si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}