/* =============================================================
   FERRETERÍA LAGO — 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 {
  /* Verdes institucionales */
  --verde-900: #062a18;
  --verde-800: #0a4b2a;
  --verde-700: #0d6135;
  --verde-600: #15803f;

  /* Acentos */
  --amarillo: #ffc20e;
  --amarillo-600: #e9ad06;
  --rojo: #e8442b;
  --rojo-precio: #e4002b;
  --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(--verde-900);
  --bs-primary: var(--verde-800);
  --bs-primary-rgb: 10, 75, 42;
  --bs-link-color: var(--verde-700);
  --bs-link-color-rgb: 13, 97, 53;
  --bs-link-hover-color: var(--verde-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, 194, 14;
  --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(--verde-800);
  --bs-btn-border-color: var(--verde-800);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--verde-700);
  --bs-btn-hover-border-color: var(--verde-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--verde-900);
  --bs-btn-active-border-color: var(--verde-900);
  --bs-btn-focus-shadow-rgb: 10, 75, 42;
  --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-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-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(--verde-600);
  --bs-btn-border-color: var(--verde-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--verde-700);
  --bs-btn-hover-border-color: var(--verde-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--verde-700);
  --bs-btn-active-border-color: var(--verde-700);
}

/* ------------------------------------------------------------------
   04. TOPBAR
   ------------------------------------------------------------------ */
.topbar {
  background: var(--verde-900);
  color: #e7efe9;
  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: .95; }
.logo__nombre {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--verde-800);
}
.logo__marca {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--rojo);
  text-transform: uppercase;
}
@media (max-width: 575.98px) {
  .logo__icono svg { width: 42px; height: 42px; }
  .logo__nombre { font-size: 12px; letter-spacing: .12em; }
  .logo__marca { font-size: 24px; }
}

/* 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(--verde-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(--verde-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-lago {
  background: var(--amarillo);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.nav-lago__categorias { display: inline-flex; align-items: center; gap: 9px; }
.nav-lago__categorias .icono { width: 18px; height: 18px; stroke-width: 2.2; }
.nav-lago__categorias::after { margin-left: .5em; vertical-align: .1em; }

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

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

.nav-lago__lista { margin: 0; }
.nav-lago__enlace {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  border-radius: 5px;
  transition: background var(--transicion), color var(--transicion);
}
.nav-lago__enlace:hover,
.nav-lago__enlace.is-activo { background: rgba(255, 255, 255, .55); color: var(--texto); }

@media (max-width: 991.98px) {
  .nav-lago__enlace {
    padding: 12px;
    background: rgba(255, 255, 255, .5);
    margin-bottom: 4px;
  }
  .nav-lago__enlace:hover { background: #fff; }
}

/* ------------------------------------------------------------------
   07. HERO
   ------------------------------------------------------------------ */
.hero {
  background:
    radial-gradient(1000px 420px at 15% 10%, rgba(21, 128, 63, .55), transparent 70%),
    linear-gradient(160deg, var(--verde-800) 0%, var(--verde-900) 100%);
  color: #fff;
  padding-block: 44px;
}

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

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

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

.hero__figura {
  border-radius: 18px;
  overflow: hidden;
}
.hero__figura img { aspect-ratio: 3 / 2; object-fit: cover; }

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

.beneficio {
  align-items: flex-start;
  padding: 24px 22px;
}
.beneficio__icono {
  width: 38px; height: 38px;
  color: var(--verde-800);
  stroke-width: 1.5;
}
.beneficio__titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--verde-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(--verde-900);
  padding-bottom: 12px;
}
.seccion__titulo::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 68px; height: 5px;
  border-radius: 3px;
  background: var(--amarillo);
}

.seccion__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--verde-700);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transicion), gap var(--transicion);
}
.seccion__enlace:hover { color: var(--verde-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);
}

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

.promo__contenido { position: relative; z-index: 2; max-width: 62%; }
.promo--verde .promo__contenido { max-width: 100%; }

.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: 58%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: .95;
}
.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(--verde-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(--rojo-precio); }
.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(--verde-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; }

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

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

.logo--footer .logo__nombre { color: #fff; }
.logo--footer .logo__marca { color: #ff8a6d; }

.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: #a9cbb7; }
.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: #cfe2d6; 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(--verde-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(--verde-900); font-size: 12.5px; }
.footer__legal p { color: #b9d2c3; }
.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 verde (toggle de vista grilla / lista) --- */
.btn-outline-verde {
  --bs-btn-color: var(--verde-800);
  --bs-btn-border-color: var(--gris-300);
  --bs-btn-hover-color: var(--verde-900);
  --bs-btn-hover-bg: var(--gris-50);
  --bs-btn-hover-border-color: var(--verde-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--verde-800);
  --bs-btn-active-border-color: var(--verde-800);
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 10, 75, 42;
  --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(--verde-700);
  box-shadow: 0 0 0 .2rem rgba(10, 75, 42, .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(--verde-700); text-decoration: underline; }

/* --- Paginación --- */
.pagination {
  --bs-pagination-color: var(--verde-800);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: var(--gris-200);
  --bs-pagination-hover-color: var(--verde-900);
  --bs-pagination-hover-bg: #fffdf3;
  --bs-pagination-hover-border-color: var(--amarillo);
  --bs-pagination-focus-color: var(--verde-900);
  --bs-pagination-focus-bg: #fffdf3;
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(255, 194, 14, .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(--verde-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(--amarillo);
}

.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(--verde-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; }
}