/* ═══════════════════════════════════════════════════════════════════════
   DISTRIBUIDORA INVERNIZZI — TEMA VISUAL v13
   Paleta tomada del feed de Instagram (@invernizzidistribuidora):
     · Bordó profundo   #8E1620  → carnes, acciones principales
     · Dorado / camel   #C9A961  → mayorista, detalles premium
     · Crema / hueso    #EBE3D2  → congelados, superficies claras
     · Negro cálido     #0D0A08  → fondo
   Tipografía: Playfair Display (display) + DM Sans (texto) — ya en uso.

   CÓMO FUNCIONA: este archivo se enlaza DESPUÉS del <style> de cada página.
   Al tener la misma especificidad y venir después, gana en la cascada y
   redefine los tokens sin tocar el CSS original de cada archivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* Fondos — negro cálido en vez de negro azulado */
  --color-bg:            #0D0A08;
  --color-bg-elevated:   #14100D;
  --color-bg-card:       #1A1512;
  --color-bg-subtle:     #221B16;
  --color-surface:       #2B221B;
  --color-border:        #382C23;
  --color-border-light:  #4E3E30;

  /* Texto — crema sobre negro cálido */
  --color-text-primary:   #F2EBDC;
  --color-text-secondary: #C0B29C;
  --color-text-muted:     #8C7F6D;

  /* Bordó — acción principal */
  --color-accent:         #8E1620;
  --color-accent-hover:   #A81C28;
  --color-accent-subtle:  rgba(142, 22, 32, 0.14);
  --color-accent-light:   #D96A70;   /* bordó legible como TEXTO sobre fondo oscuro */

  /* Dorado */
  --color-gold:           #C9A961;
  --color-gold-deep:      #A98A46;
  --color-gold-subtle:    rgba(201, 169, 97, 0.12);

  /* Crema — identidad de Congelados (reemplaza el celeste "frost") */
  --color-cream:          #EBE3D2;
  --color-frost:          #DED6C4;
  --color-frost-deep:     #C9A961;
  --color-frost-subtle:   rgba(222, 214, 196, 0.09);
  --color-frost-glow:     rgba(201, 169, 97, 0.14);

  /* Carnes */
  --color-meat-red:        #8E1620;
  --color-meat-red-subtle: rgba(142, 22, 32, 0.12);

  --color-success:  #6E8F52;
  --color-whatsapp: #25D366;

  /* Tipografía de marca — caja alta espaciada, como en el feed */
  --tracking-brand: 0.16em;
}

/* ─── 2. BASE ────────────────────────────────────────────────────────── */
body { background: var(--color-bg); color: var(--color-text-primary); }

::selection { background: var(--color-accent); color: var(--color-cream); }

/* Scrollbar en tono cálido */
* { scrollbar-color: var(--color-border-light) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--color-border-light); border-radius: 50px; }
*::-webkit-scrollbar-thumb:hover { background: var(--color-gold-deep); }

/* ─── 3. BARRA DE NAVEGACIÓN ─────────────────────────────────────────── */
.nav,
.nav.scrolled { background: rgba(13, 10, 8, 0.94); }
.nav { border-bottom-color: var(--color-border); }
.nav__cta:hover { box-shadow: 0 4px 20px rgba(142, 22, 32, 0.45); }

/* ─── 4. HERO (inicio) ───────────────────────────────────────────────── */
.hero__bg::before {
  background:
    radial-gradient(ellipse 70% 50% at 75% 30%, rgba(142, 22, 32, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 20% 70%, rgba(201, 169, 97, 0.10) 0%, transparent 60%);
}
.frost-particle { background: radial-gradient(circle, rgba(201, 169, 97, 0.35) 0%, transparent 70%); }
.hero__badge { border-color: rgba(201, 169, 97, 0.28); color: var(--color-gold); }
.hero__logo-frost-ring { border-color: rgba(201, 169, 97, 0.28); }
.hero__logo-frost-ring:nth-child(2) { border-color: rgba(201, 169, 97, 0.14); }
.hero__logo-disc { box-shadow: 0 0 60px rgba(201, 169, 97, 0.18), 0 20px 60px rgba(0, 0, 0, 0.55); }
.hero__product-emoji--burger { background: linear-gradient(135deg, rgba(142, 22, 32, 0.22), rgba(142, 22, 32, 0.06)); }
.hero__product-emoji--nugget { background: linear-gradient(135deg, rgba(201, 169, 97, 0.20), rgba(201, 169, 97, 0.05)); }

/* ─── 5. BOTONES ─────────────────────────────────────────────────────── */
.btn--primary:hover,
.nav__cta:hover { box-shadow: 0 8px 30px rgba(142, 22, 32, 0.45); }
.btn--frozen  { background: var(--color-frost-subtle); color: var(--color-frost); border: 1px solid rgba(222, 214, 196, 0.22); }
.btn--frozen:hover { background: rgba(222, 214, 196, 0.16); }
.btn--meat:hover   { background: rgba(142, 22, 32, 0.30); }

/* ─── 6. BANNER DE ANUNCIOS ──────────────────────────────────────────── */
.announcement-banner {
  background: linear-gradient(135deg, #1C0F10 0%, #2A1512 45%, #170D0B 100%);
  border-top-color: rgba(201, 169, 97, 0.25);
  border-bottom-color: rgba(201, 169, 97, 0.25);
}
.announcement-banner::before { background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(142, 22, 32, 0.18) 0%, transparent 60%); }
.announcement-banner__text strong { color: var(--color-gold); }

/* ─── 7. TARJETAS DE LÍNEA (Congelados / Carnes) ─────────────────────── */
.linea-card--frozen { background: linear-gradient(135deg, #1E1A14 0%, #231E17 60%, #191510 100%); border-color: rgba(222, 214, 196, 0.16); }
.linea-card--meat   { background: linear-gradient(135deg, #1F100F 0%, #2A1311 60%, #180C0B 100%); border-color: rgba(142, 22, 32, 0.32); }
.linea-card__icon--frozen { background: var(--color-frost-subtle); border-color: rgba(222, 214, 196, 0.18); }
.linea-card__icon--meat   { background: rgba(142, 22, 32, 0.18); border-color: rgba(142, 22, 32, 0.32); }
.linea-card__label--meat  { color: var(--color-accent-light); }
.linea-card__label--frozen { color: var(--color-frost); }
.linea-card__chip--frozen { background: var(--color-frost-subtle); color: var(--color-frost); border-color: rgba(222, 214, 196, 0.16); }
.linea-card__chip--meat   { background: rgba(142, 22, 32, 0.16); color: var(--color-accent-light); border-color: rgba(142, 22, 32, 0.28); }
.linea-card__btn--frozen  { background: var(--color-frost-subtle); color: var(--color-frost); border-color: rgba(222, 214, 196, 0.26); }
.linea-card__btn--meat    { background: rgba(142, 22, 32, 0.20); color: var(--color-accent-light); border-color: rgba(142, 22, 32, 0.38); }

/* ─── 8. SECCIÓN CTA ─────────────────────────────────────────────────── */
.cta-section::after { background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(201, 169, 97, 0.06) 0%, transparent 60%); }
.coverage__map-placeholder::before { border-color: rgba(201, 169, 97, 0.22); }

/* ─── 9. TIENDA CONGELADOS ───────────────────────────────────────────── */
.cat-btn.active .cat-btn__count { background: rgba(201, 169, 97, 0.18); color: var(--color-gold); }
.products-empty__btn { background: var(--color-gold-subtle); color: var(--color-gold); border-color: rgba(201, 169, 97, 0.35); }
.product__img { background: var(--color-cream); }
.product__tag--size { background: var(--color-frost-subtle); color: var(--color-frost); border-color: rgba(222, 214, 196, 0.24); }
.cart__minimum--ok      { background: rgba(110, 143, 82, 0.14); color: #9BBE78; }
.cart__minimum--warning { background: rgba(201, 169, 97, 0.12); color: var(--color-gold); }

/* Ofertas: en el feed los descuentos van en dorado y bordó, no en verde */
.product__price--sale { color: var(--color-gold); }
.product__discount-pct {
  background: rgba(142, 22, 32, 0.16);
  color: var(--color-accent-light);
  border-color: rgba(142, 22, 32, 0.35);
}

/* El contador del carrito va sobre fondo BLANCO: ahí sí corresponde el bordó profundo */
.nav__cart-count,
.nav__cart-count-meat { color: var(--color-accent); }

/* Barra de secciones (Inicio / Congelados / Carnes / Mayorista) — 4 pestañas en móvil */
@media (max-width: 480px) {
  #section-nav-bar a,
  #section-nav-bar > div { font-size: 0.72rem !important; padding: 10px 4px !important; gap: 0.25rem !important; }
}

/* ─── 10. CARNES FRESCAS ─────────────────────────────────────────────── */
.page-hero::before {
  background:
    radial-gradient(ellipse 60% 60% at 80% 50%, rgba(142, 22, 32, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(201, 169, 97, 0.09) 0%, transparent 60%);
}
.page-hero__badge { background: rgba(142, 22, 32, 0.18); border-color: rgba(142, 22, 32, 0.38); color: var(--color-accent-light); }
.page-hero__title em { color: var(--color-gold); }
.sticky-nav__item.active { background: rgba(142, 22, 32, 0.16); color: var(--color-accent-light); }
.cat-section__icon--vacuna  { background: rgba(142, 22, 32, 0.18); }
.cat-section__icon--cerdo   { background: rgba(201, 169, 97, 0.12); }
.cat-section__icon--ofertas { background: rgba(201, 169, 97, 0.20); }
.oferta-row { background: rgba(142, 22, 32, 0.06); }
.oferta-row td.cut-price { color: var(--color-accent-light); }
tr.oferta-row:has(.sale-badge) { background: rgba(142, 22, 32, 0.10); }
.sale-badge { background: linear-gradient(135deg, #8E1620, #C0303A) !important; box-shadow: 0 2px 8px rgba(142, 22, 32, 0.45); }
.oferta-badge { background: var(--color-gold-subtle); color: var(--color-gold); }
.price-oferta { color: var(--color-accent-light); }
.dual-badge    { background: rgba(201, 169, 97, 0.12); color: var(--color-gold); }
.milanesa-badge{ background: rgba(142, 22, 32, 0.14); color: var(--color-accent-light); }
.cart-total__amount { color: var(--color-gold); }
.cart-item__remove { background: rgba(142, 22, 32, 0.14); color: var(--color-accent-light); }
.cart-item__remove:hover { background: rgba(142, 22, 32, 0.30); }

/* ─── 11. ZONA DE REPARTO ────────────────────────────────────────────── */
/* Los colores del mapa (verde/naranja/rojo) se mantienen: son semánticos. */
.zona-hero,
.page-hero--zona { background: linear-gradient(135deg, #0D0A08 0%, #1C1310 60%, #0D0A08 100%); }
.search-input:focus { border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.16); }
.search-btn, .btn--search { background: var(--color-gold); color: #14100D; }
.leaflet-container { background: #1A1512; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--color-bg-card); color: var(--color-text-primary); }

/* ═══════════════════════════════════════════════════════════════════════
   12. COMPONENTES DE LA SECCIÓN MAYORISTA
   ═══════════════════════════════════════════════════════════════════════ */

/* Bandas crema — el recurso visual más reconocible del feed */
.band-cream {
  background: var(--color-cream);
  color: #221B16;
  position: relative;
}
/* Sobre crema el dorado no contrasta: va bordó, igual que en los posteos */
.band-cream .eyebrow      { color: var(--color-accent); }
.band-cream h2, .band-cream h3 { color: #1A1512; }
.band-cream p             { color: #4A3F33; }
.band-cream .rule         { background: var(--color-gold-deep); }

/* Marco punteado dorado — igual que las placas del feed */
.dashed-frame {
  border: 1px dashed rgba(201, 169, 97, 0.45);
  border-radius: 4px;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.band-cream .dashed-frame { border-color: rgba(169, 138, 70, 0.55); }

/* Eyebrow / kicker en caja alta espaciada */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-brand);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ─── BANDA MAYORISTA (inicio) ───────────────────────────────────────── */
.mayorista-band {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background:
    radial-gradient(ellipse 70% 100% at 20% 50%, rgba(142, 22, 32, 0.22) 0%, transparent 62%),
    linear-gradient(135deg, #1B0E0D 0%, #0D0A08 60%, #150F0B 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.mayorista-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.mayorista-band__text { flex: 1 1 380px; }
.mayorista-band__title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin: 0.7rem 0 0.8rem;
}
.mayorista-band__desc { font-size: 0.98rem; color: var(--color-text-secondary); max-width: 56ch; }
.mayorista-band__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.mayorista-band__chip {
  font-size: 0.78rem; font-weight: 600; padding: 5px 13px; border-radius: 50px;
  color: var(--color-gold); background: var(--color-gold-subtle);
  border: 1px solid rgba(201, 169, 97, 0.25);
}
.mayorista-band__btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 15px 30px; border-radius: 50px;
  background: var(--color-gold); color: #14100D;
  font-size: 0.95rem; font-weight: 700;
  transition: transform 0.2s, background 0.2s;
}
.mayorista-band__btn:hover { background: #D8BA75; transform: translateY(-2px); }
@media (max-width: 700px) {
  .mayorista-band__inner { flex-direction: column; align-items: stretch; text-align: left; }
  .mayorista-band__btn { justify-content: center; }
}

/* Filete decorativo */
.rule { display: block; width: 54px; height: 2px; background: var(--color-gold); margin: 1rem auto; }
.rule--left { margin-left: 0; margin-right: 0; }

/* Título display en caja alta, como los posteos */
.display-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.08;
}