/* =============================================================
   Comercial HUECHURABA — Tema sobre Bootstrap 5.3.3
   Se carga DESPUÉS de vendor/bootstrap/bootstrap.min.css
   Índice:
     01. Variables de marca y puente a Bootstrap
     02. Base (tipografía, iconos, utilidades propias)
     03. Botones de marca
     04. Topbar
     05. Cabecera (logo, buscador, acciones)
     06. Navegación
     07. Hero
     08. Beneficios
     09. Secciones genéricas
     10. Categorías
     11. Promociones
     12. Productos
     13. Footer
     14. WhatsApp flotante
   ============================================================= */

/* ------------------------------------------------------------------
   01. VARIABLES DE MARCA Y PUENTE A BOOTSTRAP
   ------------------------------------------------------------------ */
:root {
  /* Azules institucionales */
  --azul-900: #061c33;
  --azul-800: #0a2f52;
  --azul-700: #0e3d69;
  --azul-600: #14508a;

  /* Acentos */
  --amarillo: #ffc400;
  --amarillo-600: #e6b000;
  --rojo: #e30613;
  --rojo-precio: #e30613;
  --whatsapp: #25d366;

  /* Neutros */
  --gris-50: #f7f8f9;
  --gris-100: #f4f5f7;
  --gris-200: #e6e8eb;
  --gris-300: #d5d9de;
  --texto: #1f2933;
  --texto-suave: #5b6673;

  --radio: 8px;
  --sombra: 0 6px 18px rgba(6, 42, 24, .10);
  --transicion: .22s ease;

  /* --- Puente con las variables de Bootstrap --- */
  --bs-body-font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 15px;
  --bs-body-color: var(--texto);
  --bs-body-color-rgb: 31, 41, 51;
  --bs-heading-color: var(--azul-900);
  --bs-primary: var(--azul-800);
  --bs-primary-rgb: 10, 47, 82;
  --bs-link-color: var(--azul-700);
  --bs-link-color-rgb: 13, 97, 53;
  --bs-link-hover-color: var(--azul-800);
  --bs-border-color: var(--gris-200);
  --bs-border-radius: var(--radio);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 10px;
  --bs-secondary-color: var(--texto-suave);
}

/* Contenedor un poco más ancho que el default de Bootstrap */
@media (min-width: 1200px) { .container { max-width: 1240px; } }
@media (min-width: 1320px) { .container { max-width: 1280px; } }

/* Los .row con gutter grande (g-lg-5 → 48px = márgenes de -24px) se salen
   del container mientras este no da 24px de padding a los lados, porque el
   default de Bootstrap es 12px. En el tramo en que el container aún no está
   topado (o queda centrado con menos de 12px de aire) se usa padding de 24px:
   así el contenido queda alineado y no aparece scroll horizontal. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .container { padding-inline: 24px; }
}

/* Mismo caso en el tramo lg: entre ~975px y ~1000px de ventana el container
   mide 960px y le quedan menos de 12px de aire a cada lado, así que los
   márgenes de -24px del .row se salían por la derecha. */
@media (min-width: 992px) and (max-width: 1023.98px) {
  .container { padding-inline: 24px; }
}

/* ------------------------------------------------------------------
   02. BASE
   ------------------------------------------------------------------ */
body { background: #fff; }

h1, h2, h3 { font-weight: 800; }

/* Foco visible con el amarillo de la marca */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 2px;
}

/* Sprite de iconos oculto pero disponible para <use> */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.2em;
}
.icono--relleno { fill: currentColor; stroke: none; }

/* Listas sin viñetas ni sangría (Bootstrap les da padding por defecto) */
.lista-plana { margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------------------
   03. BOTONES DE MARCA
   Usan la API de variables de Bootstrap (--bs-btn-*) en vez de
   reescribir background, hover y active a mano.
   ------------------------------------------------------------------ */
.btn-amarillo {
  --bs-btn-color: var(--texto);
  --bs-btn-bg: var(--amarillo);
  --bs-btn-border-color: var(--amarillo);
  --bs-btn-hover-color: var(--texto);
  --bs-btn-hover-bg: var(--amarillo-600);
  --bs-btn-hover-border-color: var(--amarillo-600);
  --bs-btn-active-color: var(--texto);
  --bs-btn-active-bg: #dba301;
  --bs-btn-active-border-color: #dba301;
  --bs-btn-disabled-bg: var(--amarillo);
  --bs-btn-disabled-border-color: var(--amarillo);
  --bs-btn-focus-shadow-rgb: 255, 196, 0;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: .7rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 6px;
}

.btn-rojo {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--rojo);
  --bs-btn-border-color: var(--rojo);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c00511;
  --bs-btn-hover-border-color: #c00511;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a8040f;
  --bs-btn-active-border-color: #a8040f;
  --bs-btn-focus-shadow-rgb: 227, 6, 19;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: .7rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 6px;
}

.btn-verde {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--azul-800);
  --bs-btn-border-color: var(--azul-800);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--azul-700);
  --bs-btn-hover-border-color: var(--azul-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--azul-900);
  --bs-btn-active-border-color: var(--azul-900);
  --bs-btn-focus-shadow-rgb: 10, 47, 82;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: .65rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 6px;
}

.btn-contorno {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, .55);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, .12);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .2);
  --bs-btn-active-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: .7rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 6px;
}

/* Tamaños de los botones de marca (ganan a .btn-lg / .btn-sm de Bootstrap) */
.btn-amarillo.btn-lg,
.btn-rojo.btn-lg,
.btn-verde.btn-lg,
.btn-contorno.btn-lg {
  --bs-btn-padding-y: .85rem;
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-font-size: 1rem;
}
.btn-amarillo.btn-sm,
.btn-rojo.btn-sm,
.btn-verde.btn-sm,
.btn-contorno.btn-sm {
  --bs-btn-padding-y: .6rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: .875rem;
}

/* Confirmación momentánea del botón "Agregar al carro" (js/tienda.js).
   Va después de .btn-amarillo para ganar por orden de aparición. */
.btn-agregado {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--azul-600);
  --bs-btn-border-color: var(--azul-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--azul-700);
  --bs-btn-hover-border-color: var(--azul-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--azul-700);
  --bs-btn-active-border-color: var(--azul-700);
}

/* ------------------------------------------------------------------
   04. TOPBAR
   ------------------------------------------------------------------ */
.topbar {
  background: var(--azul-900);
  color: #e5edf7;
  font-size: 13px;
}
.topbar__lista {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.topbar__lista li { display: flex; align-items: center; gap: 7px; }
.topbar__lista a {
  display: flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  transition: color var(--transicion);
}
.topbar__lista a:hover { color: var(--amarillo); }

/* ------------------------------------------------------------------
   05. CABECERA
   ------------------------------------------------------------------ */
.cabecera { background: #fff; border-bottom: 1px solid var(--gris-200); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo__icono svg { width: 52px; height: 52px; }
.logo__texto { display: flex; flex-direction: column; line-height: .92; }
.logo__nombre {
  font-size: 19px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0;
  color: var(--azul-800);
  text-transform: none;
}
.logo__marca {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--rojo);
  text-transform: uppercase;
  line-height: 1;
}
.logo__texto::after {
  content: "DISTRIBUIDORA DE PRODUCTOS DE FERRETERÍA";
  margin-top: 4px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .035em;
  color: var(--texto-suave);
}
@media (max-width: 575.98px) {
  .logo__icono svg { width: 42px; height: 42px; }
  .logo__nombre { font-size: 14px; }
  .logo__marca { font-size: 20px; }
  .logo__texto::after { font-size: 5.5px; }
}

/* Buscador */
.buscador .input-group { flex-wrap: nowrap; }
.buscador__input {
  height: 46px;
  padding: 0 16px;
  font-size: 15px;
  border: 2px solid var(--gris-300);
  border-right: 0;
  border-radius: 6px 0 0 6px;
}
.buscador__input::placeholder { color: var(--texto-suave); }
.buscador .buscador__input:focus {
  border-color: var(--azul-700);
  box-shadow: none;
}
.buscador__boton {
  width: 56px;
  display: grid;
  place-items: center;
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  border-radius: 0 6px 6px 0;
}
.buscador__boton .icono { width: 22px; height: 22px; stroke-width: 2.4; }

/* Acciones de la derecha */
.acciones__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  text-decoration: none;
  transition: color var(--transicion);
}
.acciones__item:hover { color: var(--azul-700); }
.acciones__item .icono { width: 26px; height: 26px; }
.acciones__item--wa .icono { color: var(--whatsapp); }
.acciones__texto { flex-direction: column; line-height: 1.15; text-align: left; }
.acciones__texto strong { font-size: 14px; font-weight: 700; }
.acciones__texto small { font-size: 12px; color: var(--texto-suave); }

.acciones__icono { position: relative; display: inline-flex; }
.badge-carro {
  position: absolute;
  top: -8px; right: -10px;
  min-width: 20px;
  padding: .28em .45em;
  background-color: var(--rojo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ------------------------------------------------------------------
   06. NAVEGACIÓN
   ------------------------------------------------------------------ */
.nav-huechuraba {
  background: var(--rojo);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.nav-huechuraba__categorias {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  --bs-btn-bg: #b00510;
  --bs-btn-border-color: #b00510;
  --bs-btn-hover-bg: #97040d;
  --bs-btn-hover-border-color: #97040d;
  --bs-btn-active-bg: #85030b;
  --bs-btn-active-border-color: #85030b;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
.nav-huechuraba__categorias .icono { width: 18px; height: 18px; stroke-width: 2.2; }
.nav-huechuraba__categorias::after { margin-left: .5em; vertical-align: .1em; }

.nav-huechuraba__menu {
  margin-top: 6px;
  min-width: 15rem;
  padding: .4rem;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.nav-huechuraba__menu .dropdown-item {
  padding: .55rem .9rem;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
}
.nav-huechuraba__menu .dropdown-item:hover,
.nav-huechuraba__menu .dropdown-item:focus {
  background-color: #f5f7fa;
  color: var(--azul-800);
}
.nav-huechuraba__menu .dropdown-item:active { background-color: var(--azul-800); color: #fff; }

.nav-huechuraba__toggler {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  background: #b00510;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  transition: background var(--transicion);
}
.nav-huechuraba__toggler:hover { background: #97040d; }

.nav-huechuraba__lista { margin: 0; }
.nav-huechuraba__enlace {
  display: block;
  padding: 8px 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background var(--transicion), color var(--transicion);
}
.nav-huechuraba__enlace:hover,
.nav-huechuraba__enlace.is-activo { background: rgba(0, 0, 0, .17); color: #fff; }

@media (max-width: 991.98px) {
  .nav-huechuraba__enlace {
    padding: 12px;
    background: rgba(0, 0, 0, .12);
    margin-bottom: 4px;
  }
  .nav-huechuraba__enlace:hover { background: rgba(0, 0, 0, .25); }
}

/* ------------------------------------------------------------------
   07. HERO
   ------------------------------------------------------------------ */
.hero {
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(20, 80, 138, .65), transparent 72%),
    linear-gradient(150deg, var(--azul-800) 0%, var(--azul-900) 100%);
  color: #fff;
  padding-block: 46px;
}

.hero__etiqueta {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--amarillo);
}

.hero__titulo {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -.5px;
  color: #fff;
  margin-bottom: 18px;
}
.hero__titulo-acento { display: inline; color: var(--amarillo); }

.hero__bajada {
  font-size: clamp(16px, 1.5vw, 20px);
  color: #dbe6f2;
  max-width: 38ch;
  margin-bottom: 28px;
}

.hero__ventajas li {
  font-size: 13px;
  line-height: 1.25;
  color: #e5edf7;
}
.hero__ventajas .icono {
  width: 30px; height: 30px;
  color: var(--amarillo);
  stroke-width: 1.5;
}

.hero .btn-contorno .icono { color: var(--whatsapp); }

.hero__figura {
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
.hero__figura img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ------------------------------------------------------------------
   08. BENEFICIOS
   ------------------------------------------------------------------ */
.beneficios {
  background: #fff;
  border-bottom: 1px solid var(--gris-200);
}

.beneficio {
  align-items: flex-start;
  padding: 24px 22px;
}
.beneficio__icono {
  width: 38px; height: 38px;
  color: var(--azul-800);
  stroke-width: 1.5;
}
.beneficio__titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--azul-800);
  margin-bottom: 2px;
}
.beneficio p { font-size: 13px; color: var(--texto-suave); }

/* Separadores según el número de columnas activo */
.beneficios .col .beneficio { border-top: 1px solid var(--gris-200); }
.beneficios .col:first-child .beneficio { border-top: 0; }

@media (min-width: 768px) and (max-width: 1199.98px) {
  .beneficios .col:nth-child(2n+1) .beneficio { border-left: 1px solid var(--gris-200); }
  .beneficios .col:nth-child(-n+2) .beneficio { border-top: 0; }
}

@media (min-width: 1200px) {
  .beneficios .col .beneficio {
    border-top: 0;
    border-left: 1px solid var(--gris-200);
  }
  .beneficios .col:first-child .beneficio { border-left: 0; }
}

/* ------------------------------------------------------------------
   09. SECCIONES GENÉRICAS
   ------------------------------------------------------------------ */
.seccion { padding-block: 44px; background: #fff; }

.seccion__titulo {
  position: relative;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--azul-900);
  padding-bottom: 12px;
}
.seccion__titulo::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 68px; height: 5px;
  border-radius: 3px;
  background: var(--rojo);
}

.seccion__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-700);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transicion), gap var(--transicion);
}
.seccion__enlace:hover { color: var(--azul-800); gap: 12px; }

/* ------------------------------------------------------------------
   10. CATEGORÍAS
   ------------------------------------------------------------------ */
.card-categoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 8px 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  background: #fff;
  color: var(--texto);
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.card-categoria:hover {
  border-color: var(--amarillo);
  box-shadow: var(--sombra);
  transform: translateY(-3px);
  color: var(--texto);
}
.categoria__figura {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.categoria__figura img { width: 100%; height: 100%; object-fit: contain; }
.categoria__nombre {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--texto);
}

/* En desktop las 8 categorías van en una sola fila, como la referencia */
@media (min-width: 1200px) {
  .fila-categorias > .col {
    flex: 0 0 auto;
    width: 12.5%;
  }
}

/* ------------------------------------------------------------------
   11. PROMOCIONES
   ------------------------------------------------------------------ */
.promo {
  position: relative;
  min-height: 220px;
  padding: 28px 30px;
  border-radius: var(--radio);
  overflow: hidden;
  color: #fff;
}
.promo--oscuro { background: linear-gradient(120deg, #16191c 0%, #2b2f33 100%); }
.promo--azul { background: linear-gradient(120deg, var(--azul-800) 0%, var(--azul-700) 100%); }

.promo__contenido { position: relative; z-index: 2; max-width: 56%; }
.promo--azul .promo__contenido { max-width: 56%; }

.promo__bajada {
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .88);
}

.promo__titulo {
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.promo__titulo span { color: var(--amarillo); }

.promo__imagen {
  position: absolute;
  right: 0; bottom: 0;
  width: 40%;
  height: 100%;
  object-fit: cover;
  opacity: .92;
}
.promo__marcas { max-width: 330px; border-radius: 6px; }

@media (max-width: 575.98px) {
  .promo { padding: 22px 20px; }
  .promo__contenido { max-width: 100%; }
  .promo__imagen { opacity: .35; width: 70%; }
}

/* ------------------------------------------------------------------
   12. PRODUCTOS
   ------------------------------------------------------------------ */
.producto {
  position: relative;
  gap: 6px;
  padding: 14px 14px 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  background: #fff;
  transition: box-shadow var(--transicion), border-color var(--transicion);
}
.producto:hover { border-color: var(--gris-300); box-shadow: var(--sombra); }

.producto__oferta {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  background-color: var(--rojo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.producto__figura {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  margin-bottom: 4px;
}
.producto__figura img { width: 100%; height: 100%; object-fit: contain; }

.producto__titulo {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0;
}
.producto__titulo a { color: var(--texto); text-decoration: none; }
.producto__titulo a:hover { color: var(--azul-700); text-decoration: underline; }

.producto__marca { font-size: 13px; color: var(--texto-suave); margin-bottom: 0; }

.producto__precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.producto__precio strong { font-size: 20px; color: var(--texto); }
.producto__precio del { font-size: 13px; color: #98a2ad; }

.producto__stock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-600);
}
.producto__stock .icono { width: 16px; height: 16px; stroke-width: 2; }

/* Estado de stock con pocas unidades */
.producto__stock--bajo { color: #b26a00; }
.producto__stock--bajo .icono { color: #e0a030; }

/* Producto sin stock */
.producto__stock--agotado { color: #b3261e; }
.producto__stock--agotado .icono { color: #d9534f; }

.producto .btn { margin-top: 10px; }

/* En tarjetas de 6 columnas el botón debe caber en una sola línea */
@media (min-width: 1200px) {
  .row-cols-xl-6 .producto .btn {
    font-size: .75rem;
    padding-inline: .35rem;
    white-space: nowrap;
  }
  .row-cols-xl-6 .producto .btn .icono { width: 1em; height: 1em; }
}

/* En la home y el listado el botón de compra es rojo, como en la referencia */
.producto .btn-amarillo {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--rojo);
  --bs-btn-border-color: var(--rojo);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c00511;
  --bs-btn-hover-border-color: #c00511;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a8040f;
  --bs-btn-active-border-color: #a8040f;
}

@media (max-width: 400px) {
  .producto__precio strong { font-size: 17px; }
  .producto .btn { font-size: .78rem; padding-inline: .5rem; }
}

/* El CTA principal de la ficha usa el rojo de la marca */
.ficha__info .btn-amarillo {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--rojo);
  --bs-btn-border-color: var(--rojo);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c00511;
  --bs-btn-hover-border-color: #c00511;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a8040f;
  --bs-btn-active-border-color: #a8040f;
}

/* ------------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------------ */
.footer { background: var(--azul-800); color: #dbe6f2; }

.logo--footer .logo__nombre { color: #fff; }
.logo--footer .logo__marca { color: #ff5b5b; }
.logo--footer .logo__texto::after { color: #dbe6f2; }

.footer__contacto { display: grid; gap: 12px; font-size: 13.5px; }
.footer__contacto li { line-height: 1.4; }
.footer__contacto .icono { width: 18px; height: 18px; margin-top: 2px; color: #a9c3db; }
.footer__contacto a { color: inherit; text-decoration: none; }
.footer__contacto a:hover { color: var(--amarillo); }

.footer__titulo {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.footer__lista { display: grid; gap: 9px; font-size: 13.5px; }
.footer__lista a { color: #cfe0ef; text-decoration: none; transition: color var(--transicion); }
.footer__lista a:hover { color: var(--amarillo); }

.footer__redes a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background var(--transicion), color var(--transicion);
}
.footer__redes a:hover { background: var(--amarillo); color: var(--azul-900); }
.footer__redes .icono { width: 21px; height: 21px; }

.footer__mapa {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radio);
  overflow: hidden;
}
.footer__mapa img { width: 100%; height: 100%; object-fit: cover; }

.footer__legal { background: var(--azul-900); font-size: 12.5px; }.footer__legal p { color: #b9cde0; }
.footer__legal strong { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------
   14. WHATSAPP FLOTANTE
   ------------------------------------------------------------------ */
.wa-flotante {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 1050;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .45);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.wa-flotante:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(37, 211, 102, .6);
  color: #fff;
}
.wa-flotante .icono { width: 32px; height: 32px; }

/* ------------------------------------------------------------------
   15. COMPONENTES DE BOOTSTRAP CON MARCA
   Sobrescriben Bootstrap usando su propia API de variables.
   ------------------------------------------------------------------ */

/* --- Botón outline azul (toggle de vista grilla / lista) --- */
.btn-outline-verde {
  --bs-btn-color: var(--azul-800);
  --bs-btn-border-color: var(--gris-300);
  --bs-btn-hover-color: var(--azul-900);
  --bs-btn-hover-bg: var(--gris-50);
  --bs-btn-hover-border-color: var(--azul-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--azul-800);
  --bs-btn-active-border-color: var(--azul-800);
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 10, 47, 82;
  --bs-btn-disabled-color: var(--texto-suave);
  --bs-btn-padding-x: .85rem;
  --bs-btn-padding-y: .6rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 6px;
}

/* --- Formularios --- */
.form-control:focus,
.form-select:focus {
  border-color: var(--azul-700);
  box-shadow: 0 0 0 .2rem rgba(10, 47, 82, .15);
}
.form-select { font-size: 14px; border-color: var(--gris-300); }

/* --- Breadcrumb --- */
.breadcrumb {
  --bs-breadcrumb-divider: "›";
  --bs-breadcrumb-divider-color: var(--gris-300);
  --bs-breadcrumb-item-padding-x: .4rem;
  --bs-breadcrumb-item-active-color: var(--texto);
  --bs-breadcrumb-font-size: 13px;
  margin-bottom: 0;
}
.breadcrumb a { color: var(--texto-suave); text-decoration: none; }
.breadcrumb a:hover { color: var(--azul-700); text-decoration: underline; }

/* --- Paginación --- */
.pagination {
  --bs-pagination-color: var(--azul-800);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: var(--gris-200);
  --bs-pagination-hover-color: var(--azul-900);
  --bs-pagination-hover-bg: #f5f7fa;
  --bs-pagination-hover-border-color: var(--amarillo);
  --bs-pagination-focus-color: var(--azul-900);
  --bs-pagination-focus-bg: #f5f7fa;
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(255, 196, 0, .35);
  --bs-pagination-active-color: var(--texto);
  --bs-pagination-active-bg: var(--amarillo);
  --bs-pagination-active-border-color: var(--amarillo);
  --bs-pagination-disabled-color: var(--gris-300);
  --bs-pagination-disabled-bg: var(--gris-50);
  --bs-pagination-disabled-border-color: var(--gris-200);
  --bs-pagination-font-size: 14px;
  --bs-pagination-border-radius: 6px;
  gap: 6px;
  margin-bottom: 0;
}
.pagination .page-link {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 .6rem;
  font-weight: 700;
}
.pagination .page-link .icono { width: 18px; height: 18px; stroke-width: 2.2; }

/* --- Utilidad: gira un icono (chevron anterior) --- */
.is-volteado { transform: rotate(180deg); }

/* ------------------------------------------------------------------
   16. ENCABEZADOS DE PÁGINA Y WIDGETS COMPARTIDOS
   Los usan el listado, la ficha y el carro de compras.
   ------------------------------------------------------------------ */

/* --- Banda de migas de pan (ficha, carro) --- */
.migas-bar {
  background: var(--gris-100);
  border-bottom: 1px solid var(--gris-200);
  padding-block: 14px;
}

/* --- Encabezado de página: migas + título + bajada (listado, carro) --- */
.pagina-cabecera {
  background: var(--gris-100);
  border-bottom: 1px solid var(--gris-200);
  padding-block: 22px 26px;
}

.pagina-cabecera__texto { margin-top: 14px; }

.pagina-cabecera__titulo {
  position: relative;
  display: inline-block;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  color: var(--azul-900);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.pagina-cabecera__titulo::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 68px; height: 5px;
  border-radius: 3px;
  background: var(--rojo);
}

.pagina-cabecera__bajada {
  max-width: 62ch;
  font-size: 15px;
  color: var(--texto-suave);
}
.pagina-cabecera__total { margin-top: 6px; font-size: 13.5px; color: var(--texto-suave); }
.pagina-cabecera__total strong { color: var(--azul-700); }

/* --- Variante de sección con fondo gris --- */
.seccion--gris { background: var(--gris-50); }

/* --- Selector de cantidad (input-group de Bootstrap) --- */
.cantidad__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 6px;
}
.cantidad__control { width: 11rem; }
.cantidad__input {
  text-align: center;
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cantidad__input::-webkit-outer-spin-button,
.cantidad__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 767.98px) {
  .pagina-cabecera { padding-block: 18px 20px; }
}