/* ==========================================================================
   COMPONENTS.CSS — Estilos de componentes reutilizables
   ==========================================================================
   Contiene los estilos de cada pieza de interfaz:
     - Botones
     - Header / marca
     - Navegación (incluido menú móvil)
     - Hero (banner principal)
     - Cabecera interna de páginas (page-hero)
     - Tarjetas (cards)
     - Formularios
     - Footer
   Las variables usadas se definen en main.css.
   ========================================================================== */

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-fast);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

/* Botón sólido (acción principal): fondo verde, hover azul oscuro */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-secondary);
}

/* Botón de contorno (acciones secundarias): blanco, borde/texto verde,
   hover verde con texto blanco */
.btn--ghost {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: var(--border-width) solid var(--color-primary);
}

.btn--ghost:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ==========================================================================
   HEADER / MARCA
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Franja superior de marca: integra la paleta del logo (azul -> verde -> dorado) */
.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary) 50%, var(--color-accent));
  pointer-events: none;
}

.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  min-height: var(--header-height);
}

.site-brand {
  display: flex;
  align-items: center;
}

/* Identidad visual del header: solo el wordmark del nombre.
   Altura fija + width auto conserva la proporción original
   (no se deforma). Los tamaños por breakpoint están en
   responsive.css. */
.site-brand img {
  display: block;
  object-fit: contain;
}

.site-brand__name-img {
  height: 34px;
  width: auto;
}

.site-brand:hover {
  text-decoration: none;
}

/* ==========================================================================
   NAVEGACIÓN (menú escritorio + móvil)
   --------------------------------------------------------------------------
   En escritorio el menú es una fila horizontal. En móvil se convierte en
   panel deslizante controlado por assets/js/navigation.js
   (se dispara con los atributos data-nav-toggle y data-nav-menu).
   ========================================================================== */
.site-nav {
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 1px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  padding-top: 2px;
  list-style: none;
}

.site-nav__list li {
  display: flex;
  align-items: center;
}

.site-nav__list a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-secondary);
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
}

.site-nav__list a:hover {
  color: var(--color-primary);
  background-color: var(--color-surface);
  text-decoration: none;
}

/* Enlace de la página actual */
.site-nav__list .is-active {
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

/* Botón hamburguesa: oculto por defecto, visible en móvil
   (ver responsive.css). */
.site-nav__toggle {
  display: none;
}

/* ==========================================================================
   HERO (banner principal de la portada)
   --------------------------------------------------------------------------
   Carrusel de imágenes de la empresa (order: fachada primero, luego los
   estantes de licores). Las fotos van de fondo con un velo sutil encima
   para la legibilidad del texto. Botones anterior/siguiente y puntos
   indicadores (ver components.js -> initHeroCarousel). La primera
   diapositiva lleva la clase .hero__slide--active en el HTML.
   Altura media: --hero-height (main.css), escalada por breakpoint en
   responsive.css. El contenido se centra y el overlay difumina de forma
   sutil la zona del texto para que conviva con los letreros de las fotos.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--hero-height);
  padding: clamp(2.5rem, 7vw, 6rem) clamp(1.25rem, 7vw, 8rem);
  background: linear-gradient(135deg, var(--color-secondary-dark), var(--color-secondary) 45%, var(--color-primary));
  color: var(--color-white);
  text-align: left;
}

/* Carrusel de fondo: las diapositivas se apilan y se cruzan con fundido */
.hero__carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.hero__slide--active {
  opacity: 1;
}

.hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  /* cover rellena el contenedor sin deformar; el centrado (object-position)
     evita recortes raros y no agranda la imagen más de lo necesario. */
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

/* Velo de legibilidad en capas (radial + lineal, sin caja dura):
   1) elipse pequeña y más oscura JUSTO detrás del título/descripción;
   2) elipse amplia detrás de todo el bloque de texto;
   3) sombreado general muy ligero.
   Todo se disuelve progresivamente hacia los bordes para que la
   fotografía y el cartel de la fachada se sigan viendo con claridad. */
.hero__carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42rem 30rem at 22% 38%, rgba(20, 23, 51, 0.78), rgba(20, 23, 51, 0.34) 58%, transparent 100%),
    linear-gradient(90deg, rgba(20, 23, 51, 0.76) 0%, rgba(20, 23, 51, 0.50) 36%, rgba(20, 23, 51, 0.14) 64%, rgba(20, 23, 51, 0.06) 100%),
    linear-gradient(180deg, rgba(20, 23, 51, 0.18), rgba(20, 23, 51, 0.45));
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(20, 23, 51, 0.44));
  pointer-events: none;
}

.hero__inner {
  /* Contenido centrado sobre el carrusel (estilo clásico). La legibilidad
     sobre las letras propias de las fotografías (p. ej. el cartel de la
     fachada) se resuelve con el degradado radial suave del overlay, que
     crea una zona limpia justo detrás del texto sin tapar la foto. */
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  margin-top: -40px;
}

/* Botones de navegación del carrusel (anterior / siguiente) */
.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.hero__nav:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.75);
}

.hero__nav svg {
  display: block;
}

.hero__nav--prev { left: var(--spacing-sm); }
.hero__nav--next { right: var(--spacing-sm); }

/* Indicadores del carrusel (puntos) */
.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--spacing-md);
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
}

.hero__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
}

.hero__dot:hover {
  transform: scale(1.15);
}

.hero__dot--active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  margin-bottom: 1.125rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background-color: rgba(20, 23, 51, 0.52);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 12px rgba(20, 23, 51, 0.3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
}

.hero__badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 0 5px rgba(200, 162, 75, 0.18);
}

.hero h1 {
  color: var(--color-white);
  font-size: clamp(2.6rem, 4.1vw, 4rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.08;
  text-shadow: 0 1px 3px rgba(20, 23, 51, 0.55),
               0 5px 20px rgba(20, 23, 51, 0.4);
  max-width: 660px;
  margin: 0;
}

.hero__title-strong,
.hero__title-light {
  display: block;
}

.hero__title-strong {
  font-weight: var(--font-weight-extra);
}

.hero__title-dot {
  color: var(--color-accent);
}

.hero__rule {
  display: block;
  width: 100px;
  height: 4px;
  margin: 1.5rem 0;
  background: linear-gradient(90deg, var(--color-accent), rgba(255, 255, 255, 0.35));
  border-radius: var(--radius-pill);
}

.hero__lead {
  font-size: clamp(1rem, 0.75vw + 0.875rem, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 4px rgba(20, 23, 51, 0.55),
               0 2px 14px rgba(20, 23, 51, 0.45);
  max-width: 590px;
  margin: 0 0 1.25rem;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.hero__proof li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.375rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero__actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* Botones proporcionados al hero (padding 14px/24px, texto 16px).
   Sombra suave para separarlos de la fotografía y darles presencia. */
.hero__actions .btn {
  min-height: 50px;
  padding: 0.875rem 1.5rem;
  font-size: var(--font-size-base);
  box-shadow: 0 12px 28px rgba(20, 23, 51, 0.28);
}

/* Botón de contorno claro: se usa sobre fondos oscuros (hero, footer) */
.btn--outline-light {
  background-color: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.btn--outline-light:hover {
  background-color: var(--color-white);
  color: var(--color-secondary);
}

/* ==========================================================================
   CABECERA INTERNA DE PÁGINAS (page-hero)
   --------------------------------------------------------------------------
   Título corto para páginas como Nosotros, Servicios, etc.
   ========================================================================== */
.page-hero {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding-block: var(--spacing-lg);
  text-align: center;
  box-shadow: inset 0 -3px 0 var(--color-accent);
}

.page-hero h1 {
  color: var(--color-white);
  margin-bottom: var(--spacing-xs);
}

.page-hero p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
}

.page-hero.has-contact-hero-image {
  background-image:
    linear-gradient(rgba(28, 34, 80, 0.68), rgba(28, 34, 80, 0.78)),
    var(--contact-hero-image);
  background-position: center 52%;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-hero.has-contact-hero-image h1 {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
}

/* ==========================================================================
   TARJETAS (cards)
   --------------------------------------------------------------------------
   Se usa en listados de servicios, productos y destacados.
   Duplicar <article class="card"> en el HTML para añadir más.
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base),
              transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md), inset 0 3px 0 var(--color-primary);
  transform: translateY(-4px);
}

.card img {
  border-radius: var(--radius-sm);
}

.card h3 {
  margin-bottom: var(--spacing-xs);
}

.card p {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.card .btn {
  margin-top: auto; /* Empuja el botón hacia abajo en tarjetas de altura variable */
  align-self: flex-start;
}

/* ==========================================================================
   FORMULARIOS
   --------------------------------------------------------------------------
   .form-field / .form-status los comparten el formulario de visita
   comercial (página Trabaja con nosotros) y cualquier formulario futuro.
   ========================================================================== */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-field label {
  font-weight: var(--font-weight-medium);
}

.form-field input,
.form-field textarea {
  padding: 0.625rem 0.75rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(75, 112, 72, 0.18);
  outline: none;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Mensaje de estado del formulario (lo rellena assets/js/components.js) */
.form-status {
  min-height: 1.5rem;
  font-weight: var(--font-weight-medium);
}

.form-status.is-error { color: #b3261e; }
.form-status.is-success { color: var(--color-primary); }

/* ==========================================================================
   FORMULARIO DE VISITA COMERCIAL (Servicios)
   --------------------------------------------------------------------------
   Sección con información a la izquierda y formulario a la derecha.
   ========================================================================== */
.visit-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.visit-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.visit-info__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  box-shadow: var(--shadow-md);
}

.visit-info__icon img {
  width: 32px;
  height: 32px;
}

.visit-info__title {
  font-size: var(--font-size-xl);
  color: var(--color-secondary);
}

.visit-info__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  margin-bottom: 0;
}

.visit-info__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.visit-info__benefits li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.visit-info__benefits li::before {
  content: "✓";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
}

.visit-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.visit-form .form-field,
.visit-form input,
.visit-form select,
.visit-form textarea {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.privacy-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  margin-block: 0.25rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.privacy-consent input {
  width: 18px;
  height: 18px;
  margin: 0.2rem 0 0;
  accent-color: var(--color-primary);
}

.privacy-consent a {
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alcohol-advisory {
  display: grid;
  gap: 0.3rem;
  margin: 1rem auto 1.25rem;
  padding: 0.7rem 1rem;
  border-block: 2px solid var(--color-accent);
  color: var(--color-secondary);
  text-align: center;
  font-size: clamp(0.7rem, 1.4vw, 0.9rem);
  line-height: 1.4;
}

.visit-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

.visit-form select {
  padding: 0.625rem 0.75rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-text);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  appearance: auto;
}

.visit-form select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(75, 112, 72, 0.18);
  outline: none;
}

.visit-form__btn {
  margin-top: var(--spacing-xs);
  align-self: flex-start;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--color-secondary);
  color: rgba(255, 255, 255, 0.9);
  padding-block: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  box-shadow: inset 0 3px 0 var(--color-primary);
}

.site-footer a {
  color: var(--color-accent);
}

.site-footer a:hover {
  color: var(--color-accent-light);
}

.site-footer__title {
  color: var(--color-white);
  font-size: var(--font-size-md);
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
  padding-bottom: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.site-footer__title--sub {
  display: block;
  width: fit-content;
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  border-bottom-width: 1px;
}

.site-footer__legal-links a {
  overflow-wrap: anywhere;
}

.site-footer__links li {
  margin-bottom: var(--spacing-xs);
}

.site-footer__copy {
  text-align: center;
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.2);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

/* Rejilla propia del footer: en escritorio suma la columna
   "Horario de atención" junto a "Contacto" (5 columnas).
   Breakpoints en responsive.css. */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

/* Leyenda de consumo responsable (bebidas alcohólicas) */
.site-footer__responsible {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.site-footer__responsible-title {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.25rem;
}

.site-footer__responsible-text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.site-footer__responsible-text span {
  display: block;
}

/* Footer más compacto: aprovecha el ancho disponible sin alterar el layout global. */
.site-footer {
  padding-block: 1.5rem 1.1rem;
}

.site-footer > .container {
  width: min(100% - 2rem, 1680px);
  padding-inline: 0;
}

.site-footer__grid {
  gap: 1.1rem 1.75rem;
}

.site-footer__title {
  font-size: 1rem;
  margin-bottom: 0.45rem;
}

.site-footer__title--sub {
  margin-top: 0.65rem;
  font-size: 0.85rem;
}

.site-footer__grid p,
.site-footer__grid address,
.site-footer__links a,
.site-footer .social-links a {
  font-size: 0.9rem;
  line-height: 1.45;
}

.site-footer__links li {
  margin-bottom: 0.2rem;
}

.site-footer__responsible {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
}

.site-footer__responsible-text {
  font-size: 0.78rem;
  line-height: 1.45;
}

.site-footer__copy {
  padding-top: 0.65rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
}

@media (min-width: 1200px) {
  .site-footer__grid--full {
    grid-template-columns: minmax(160px, 1fr) minmax(190px, 1.2fr) minmax(120px, 0.8fr) minmax(300px, 1.8fr) minmax(190px, 1.1fr);
    align-items: start;
  }

  .site-footer__legal-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .site-footer__legal-links li {
    margin: 0;
  }
}

@media (max-width: 1023px) {
  .site-footer > .container {
    width: min(100% - 2rem, 900px);
    padding-inline: 0;
  }

  .site-footer__legal-links {
    display: grid;
    gap: 0.2rem;
  }
}

/* ==========================================================================
   HORARIO DE ATENCIÓN
   --------------------------------------------------------------------------
   Dos presentaciones alimentadas por assets/js/schedule.js:
     - .schedule-mini  → lista compacta en la columna del footer.
     - .hours-*        → tarjetas visuales en la página Servicios.
   ========================================================================== */

/* --- Footer: lista compacta --- */
.schedule-mini {
  list-style: none;
  display: grid;
  gap: 0.875rem;
}

.schedule-mini__item {
  display: grid;
  gap: 0.125rem;
}

.schedule-mini__days {
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.schedule-mini__time {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.schedule-mini__item--closed .schedule-mini__time {
  font-style: italic;
}

/* --- Servicios: sección con tarjetas por grupo de días --- */
.hours-section__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-sm);
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: var(--color-white);
}

.hours-section__icon img {
  width: 32px;
  height: 32px;
}

.hours-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  text-align: left;
}

.hours-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base),
              transform var(--transition-base);
}

.hours-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.hours-card__days {
  color: var(--color-secondary);
  font-size: var(--font-size-base);
  margin-bottom: 0;
}

.hours-card__shifts {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0;
}

.hours-card__shift {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Tarjeta de día cerrado: apagada y sin elevación al pasar el cursor */
.hours-card--closed {
  background-color: var(--color-surface);
  border-top-color: var(--color-border);
}

.hours-card--closed:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

.hours-card--closed .hours-card__days {
  color: var(--color-text-muted);
}

.hours-card__closed {
  align-self: flex-start;
  padding: 0.125rem 0.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   ANIMACIONES (revelado al hacer scroll)
   --------------------------------------------------------------------------
   Los elementos con .reveal empiezan invisibles y se muestran con la clase
   .is-visible, que añade assets/js/animations.js cuando el elemento entra
   en la pantalla. Si no se quiere animar un elemento, no usar .reveal.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow),
              transform var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   ESTADÍSTICAS (contadores animados)
   --------------------------------------------------------------------------
   Franja de marca (azul -> verde) con los hitos de la empresa. Los números
   los anima assets/js/counters.js mediante los atributos data-count y
   data-suffix.
   ========================================================================== */
.stats {
  position: relative;
  z-index: 3;
  margin-top: -58px;
  background: transparent;
  color: var(--color-text);
  padding-block: 0 var(--spacing-lg);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  overflow: hidden;
  border: var(--border-width) solid rgba(227, 231, 234, 0.86);
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 60px rgba(20, 23, 51, 0.16);
}

.stat {
  position: relative;
  text-align: center;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22%;
  right: 0;
  bottom: 22%;
  width: 1px;
  background-color: var(--color-border);
}

.stat:nth-child(2)::after {
  display: none;
}

.stat:nth-child(-n + 2) {
  border-bottom: var(--border-width) solid var(--color-border);
}

.stat__number {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-extra);
  color: var(--color-secondary);
  line-height: 1.1;
}

.stat__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.stat__label::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin: 0.625rem auto 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

/* ==========================================================================
   CONÓCENOS / HISTORIA (línea de tiempo)
   --------------------------------------------------------------------------
   Sección que cuenta la historia de la empresa (origen, fundación y legado
   de José Elías Acosta Ortiz). Diseño "mobile first":
     - Base (móvil): línea vertical a la izquierda y una sola columna.
     - >=1024px: la línea pasa al centro y los hitos alternan izquierda/
       derecha (ver responsive.css).
   No hay fotografías históricas todavía: cada etapa usa una composición
   gráfica propia (marcador dorado sobre la línea, año destacado y citas).
   Cuando existan fotos, se agregan con <img loading="lazy"> dentro de
   .timeline__card usando assets/images/empresa/ o assets/images/instalaciones/.
   El marcado de referencia vive en components/historia.html y se reutiliza
   en index.html y pages/nosotros.html.
   ========================================================================== */
.history {
  background-color: var(--color-background);
  padding-block: var(--spacing-xl);
}

/* Frase central de la sección: mensaje destacado con acento dorado */
.history__quote {
  max-width: 780px;
  margin: var(--spacing-md) auto 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 3px solid var(--color-accent);
  border-bottom: var(--border-width) solid var(--color-border);
  background: linear-gradient(180deg, rgba(200, 162, 75, 0.10), transparent 70%);
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.5vw + 0.75rem, 1.5rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-align: center;
  color: var(--color-secondary);
}

/* -------- Línea de tiempo -------- */
.timeline {
  position: relative;
  max-width: 1000px;
  margin: var(--spacing-xl) auto 0;
}

/* Línea vertical: dorado -> verde. En móvil queda a la izquierda
   (left: 8px); en escritorio se centra desde responsive.css. */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  width: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--color-accent), var(--color-primary));
}

/* Cada hito ocupa todo el ancho; el gutter izquierdo deja sitio a la
   línea y al marcador (36px = 8px de línea + 16px de punto + aire). */
.timeline__item {
  position: relative;
  padding-left: 36px;
  margin-bottom: var(--spacing-md);
}

/* Marcador circular dorado sobre la línea */
.timeline__dot {
  position: absolute;
  top: 0;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-accent);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 3px var(--color-accent);
}

/* Período de la etapa: dorado (solo acento), mayúsculas espaciadas */
.timeline__period {
  display: inline-block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Tarjeta del hito: fondo blanco, borde suave, elevación sutil */
.timeline__card {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base),
              transform var(--transition-base);
}

.timeline__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.timeline__card h3 {
  color: var(--color-secondary);
  margin-bottom: var(--spacing-xs);
}

.timeline__card p {
  color: var(--color-text-muted);
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

/* Cita de apoyo dentro de una etapa (p. ej. "Dejarlo todo…") */
.timeline__note {
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  border-top: var(--border-width) dashed var(--color-border);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
}

/* Hito destacado: la fundación (1962). Borde dorado + año en grande. */
.timeline__item--featured .timeline__card {
  border-color: rgba(200, 162, 75, 0.45);
  box-shadow: var(--shadow-md), inset 0 3px 0 var(--color-accent);
  background:
    radial-gradient(28rem 12rem at 85% 0%, rgba(200, 162, 75, 0.14), transparent 60%),
    var(--color-white);
}

.timeline__item--featured .timeline__card:hover {
  box-shadow: var(--shadow-lg), inset 0 3px 0 var(--color-accent);
}

/* Año de la fundación: elemento dorado de gran tamaño */
.timeline__year {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extra);
  font-size: clamp(2.25rem, 3vw + 1rem, 3.25rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

/* Último hito: sin margen inferior */
.timeline__item:last-child {
  margin-bottom: 0;
}

/* ========================================================================== 
   SERVICIOS DEL INICIO
   ========================================================================== */
.section-marker {
  display: block;
  width: 64px;
  height: 4px;
  margin: 0 auto var(--spacing-sm);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-primary) 0 68%, var(--color-accent) 68% 100%);
}

.section-marker--left {
  width: 58px;
  height: 3px;
  margin: var(--spacing-sm) 0 0;
}

.section-eyebrow {
  margin: 0 0 var(--spacing-xs);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.services {
  padding-block: 3rem;
  scroll-margin-top: calc(var(--header-height) + var(--spacing-sm));
  background-color: var(--color-white);
}

.services__header {
  max-width: 720px;
  margin: 0 auto var(--spacing-md);
  text-align: center;
}

.services .section__title {
  margin-bottom: var(--spacing-xs);
}

.services .section__title::after {
  display: none;
}

.services .section__lead {
  margin-bottom: 0;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  max-width: 1080px;
  margin-inline: auto;
}

.service-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 40px;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 144px;
  padding: 1.25rem;
  overflow: hidden;
  color: var(--color-text);
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 26px rgba(38, 41, 90, 0.06);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.service-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -1px;
  bottom: -1px;
  width: 42%;
  height: 38%;
  background-color: rgba(75, 112, 72, 0.08);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transition: width var(--transition-base), background-color var(--transition-base);
}

.service-card:hover,
.service-card:focus-visible {
  color: var(--color-text);
  text-decoration: none;
  border-color: rgba(75, 112, 72, 0.38);
  box-shadow: 0 14px 32px rgba(38, 41, 90, 0.10);
  transform: translateY(-3px);
}

.service-card:hover::after,
.service-card:focus-visible::after {
  width: 50%;
  background-color: rgba(75, 112, 72, 0.12);
}

.service-card__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  box-shadow: 0 8px 18px rgba(75, 112, 72, 0.2);
}

.service-card__icon img {
  width: 34px;
  height: 34px;
}

.service-card__copy {
  min-width: 0;
}

.service-card__title,
.service-card__description {
  display: block;
}

.service-card__title {
  margin-bottom: 0.25rem;
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.service-card__description {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.65;
}

.service-card__arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-primary);
  background-color: #eef4ee;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  transition: color var(--transition-base), background-color var(--transition-base), transform var(--transition-base);
}

.service-card:hover .service-card__arrow,
.service-card:focus-visible .service-card__arrow {
  color: var(--color-white);
  background-color: var(--color-primary);
  transform: translateX(3px);
}

/* ========================================================================== 
   DISTRIBUCIÓN EN EL TOLIMA (cobertura y red de distribución)
   --------------------------------------------------------------------------
   Conserva el mapa y los datos de distribution-data.js, pero reúne el
   contenido en una sola narrativa compacta de cobertura regional.
   ========================================================================== */
.distribution {
  padding-block: 3rem;
  scroll-margin-top: calc(var(--header-height) + var(--spacing-sm));
  background: linear-gradient(180deg, #f7fafc 0%, var(--color-white) 100%);
  border-top: var(--border-width) solid rgba(227, 231, 234, 0.72);
  border-bottom: var(--border-width) solid rgba(227, 231, 234, 0.72);
}

.distribution__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "map"
    "content";
  gap: var(--spacing-md);
  align-items: center;
}

/* ---------- Mapa del Tolima ---------- */
.distribution__map {
  grid-area: map;
  position: relative;
  padding: 0;
}

.distribution__map-frame {
  position: relative;
  max-width: 350px;
  margin-inline: auto;
  aspect-ratio: 1;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

.distribution__map-source {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.distribution__map-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.distribution__map-badge {
  position: absolute;
  right: var(--spacing-xs);
  bottom: var(--spacing-sm);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 3px solid var(--color-white);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  box-shadow: 0 8px 20px rgba(38, 41, 90, 0.16);
}

.distribution__map-badge img {
  width: 22px;
  height: 22px;
}

/* ---------- Contenido ---------- */
.distribution__content {
  grid-area: content;
  max-width: 620px;
  margin-inline: auto;
}

.distribution__header {
  grid-area: header;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}

.distribution__title {
  margin: 0;
  color: var(--color-secondary);
  font-size: 1.75rem;
  font-weight: var(--font-weight-extra);
}

.distribution__heading {
  margin: 0 0 0.35rem;
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.distribution__text {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}

.distribution__network-note {
  margin: 0 0 var(--spacing-sm);
  padding-left: var(--spacing-sm);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.65;
}

/* La cifra se calcula desde la lista real de municipios. */
.distribution__stats {
  display: grid;
  grid-template-columns: 48px auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm);
  color: var(--color-text);
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 9px 24px rgba(38, 41, 90, 0.07);
}

.distribution__stats-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
}

.distribution__stats-icon img {
  width: 26px;
  height: 26px;
}

.distribution__stats-count {
  min-width: 2ch;
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: var(--font-weight-extra);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}

.distribution__stats-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  text-transform: uppercase;
}

.distribution__stats-region {
  display: block;
  color: var(--color-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.distribution__coverage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.distribution__coverage-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 76px;
  padding: 0.75rem;
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 7px 18px rgba(38, 41, 90, 0.05);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.distribution__coverage-item:hover {
  border-color: rgba(75, 112, 72, 0.34);
  box-shadow: 0 10px 24px rgba(38, 41, 90, 0.09);
  transform: translateY(-2px);
}

.distribution__coverage-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.distribution__coverage-icon--green {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
}

.distribution__coverage-icon--blue {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
}

.distribution__coverage-icon--gold {
  background: linear-gradient(135deg, var(--color-accent), #9c7b33);
}

.distribution__coverage-icon img {
  width: 22px;
  height: 22px;
}

.distribution__coverage-copy {
  min-width: 0;
}

.distribution__coverage-copy strong {
  display: block;
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

.distribution__coverage-note {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.distribution__cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: var(--spacing-sm) 0 0;
}

.distribution__cta .btn {
  width: 100%;
}

/* ---------- Capa animada del mapa ---------- */
.distribution__route {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s ease 0.5s;
}

.is-animating .distribution__route {
  stroke-dashoffset: 0;
}

.distribution__dot-group {
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.is-animating .distribution__dot-group {
  opacity: 1;
  transform: scale(1);
}

.distribution__dot {
  fill: var(--color-accent);
  stroke: var(--color-white);
  stroke-width: 1.5;
}

.distribution__dot-halo {
  fill: var(--color-accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: distribution-pulse 2.8s ease-out infinite;
  animation-play-state: paused;
}

.is-animating .distribution__dot-group .distribution__dot-halo {
  animation-play-state: running;
}

@keyframes distribution-pulse {
  0% { transform: scale(0.75); opacity: 0.35; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Modal de municipios ----------
   Hoja inferior en móvil y diálogo centrado en escritorio (ver
   responsive.css). Abre con .is-open (lo añade distribution.js). */
.distribution-modal {
  position: fixed;
  inset: 0;
  z-index: 1100; /* Por encima del header y los botones flotantes */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--spacing-xs);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.distribution-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.distribution-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(38, 41, 90, 0.66);
}

.distribution-modal__panel {
  position: relative;
  width: 100%;
  max-width: 920px;
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(24px);
  transition: transform var(--transition-base);
}

.distribution-modal.is-open .distribution-modal__panel {
  transform: translateY(0);
}

.distribution-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
  border-bottom: var(--border-width) solid var(--color-border);
}

.distribution-modal__eyebrow {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.distribution-modal__title {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--color-secondary);
}

.distribution-modal__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.distribution-modal__close:hover,
.distribution-modal__close:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.distribution-modal__list {
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xs);
}

.distribution-modal__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background-color var(--transition-fast), padding-left var(--transition-fast);
}

.distribution-modal__item:hover {
  background-color: var(--color-surface);
  padding-left: 1rem;
}

.distribution-modal__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.product-card__icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: var(--color-white);
}

.product-card__icon img {
  width: 40px;
  height: 40px;
}

/* Variante verde WhatsApp: destaca el canal primario en la página
   "Trabaja con nosotros" */
.product-card__icon--whatsapp {
  background: linear-gradient(135deg, var(--color-whatsapp), var(--color-whatsapp-dark));
}

.product-card h3 {
  color: var(--color-secondary);
  margin-bottom: 0;
}

.product-card p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Lista de chips (marcas, categorías) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: auto; /* Empuja los chips y el enlace hacia abajo */
}

.chip {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  font-size: var(--font-size-xs);
}

.product-card .btn {
  margin-top: var(--spacing-sm);
  align-self: flex-start;
}

/* ========================================================================== 
   MARCAS / ALIADOS
   --------------------------------------------------------------------------
   Las marcas se administran desde el panel. Los monogramas son el respaldo
   visual para registros que todavía no tienen un logo cargado.
   ========================================================================== */
.brands {
  padding-block: 3.5rem;
  scroll-margin-top: calc(var(--header-height) + var(--spacing-sm));
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-white), #f7fafb 72%, var(--color-white));
}

.brands__header {
  max-width: 720px;
  margin: 0 auto var(--spacing-md);
  text-align: center;
}

.brands__header .section__title {
  margin-bottom: var(--spacing-sm);
}

.brands__header .section__lead {
  margin-bottom: 0;
}

.brands__carousel {
  max-width: 1120px;
  margin-inline: auto;
}

.brands__viewport {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.brands__viewport::-webkit-scrollbar {
  display: none;
}

.brands__viewport:focus-visible {
  outline-offset: 5px;
}

.brands__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 164px;
  gap: 0.75rem;
  width: max-content;
  min-width: 100%;
  padding: 0.25rem 0.25rem 0.75rem;
}

.brands__list--status {
  display: block;
  width: 100%;
}

.brands__list--centered {
  justify-content: center;
}

.brand-card {
  position: relative;
  min-height: 156px;
  display: grid;
  grid-template-rows: 88px minmax(2.5em, auto);
  align-content: center;
  justify-items: center;
  gap: 0.4rem;
  padding: 0.9rem;
  overflow: hidden;
  scroll-snap-align: start;
  text-align: center;
  background-color: #fdfefe;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 22px rgba(38, 41, 90, 0.06);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.brand-card:hover {
  border-color: rgba(75, 112, 72, 0.34);
  box-shadow: 0 13px 28px rgba(38, 41, 90, 0.10);
  transform: translateY(-3px);
}

.brand-card__mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-primary);
  background-color: #eef4ee;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extra);
  align-self: center;
}

.brand-card__media {
  position: relative;
  width: 100%;
  height: 88px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.brand-card__media--white {
  background-color: var(--color-white);
}

.brand-card__media--transparent {
  background-color: transparent;
}

.brand-card__logo-frame {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  overflow: hidden;
  border-radius: 7px;
  transform: translate(var(--brand-logo-x, 0), var(--brand-logo-y, 0)) scale(var(--brand-logo-scale, 1));
  transform-origin: center;
}

.brand-card__logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

.brand-card--has-image {
  padding-inline: 0.9rem;
}

.brand-card--has-image .brand-card__name {
  font-size: 0.75rem;
}

.brand-card--logo-only {
  grid-template-rows: 112px;
}

.brand-card--logo-only .brand-card__media {
  height: 112px;
}

.brand-card__name--visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-card[data-tone="blue"] .brand-card__mark {
  color: var(--color-secondary);
  background-color: #f0f1f8;
}

.brand-card[data-tone="gold"] .brand-card__mark {
  color: #80631f;
  background-color: #faf5e8;
}

.brand-card__name {
  min-height: 2.5em;
  display: grid;
  align-items: center;
  max-width: 100%;
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.brand-card__meta {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  line-height: 1.2;
}

.brands__loading,
.brands__empty {
  grid-column: 1 / -1;
  width: min(100%, 520px);
  margin-inline: auto;
  padding: var(--spacing-md);
  color: var(--color-text-muted);
  text-align: center;
}

.brands__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--spacing-sm);
}

.brands__controls[hidden] {
  display: none;
}

.brands__control {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  color: var(--color-secondary);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  font-size: 1.1rem;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.brands__control:hover:not(:disabled),
.brands__control:focus-visible:not(:disabled) {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.brands__control:disabled {
  cursor: default;
  opacity: 0.35;
}

.brands__progress {
  width: 84px;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
}

.brands__progress span {
  display: block;
  width: 24%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: translateX(0);
  transition: transform var(--transition-base);
}

/* ==========================================================================
   CONTACTO (datos + mapa)
   ========================================================================== */
.contact {
  background:
    radial-gradient(50rem 26rem at 85% 10%, rgba(200, 162, 75, 0.16), transparent 60%),
    linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
  color: var(--color-white);
  padding-block: var(--spacing-xl);
}

.contact .section__title {
  color: var(--color-white);
}

.contact .section__lead {
  color: rgba(255, 255, 255, 0.88);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.contact__items {
  display: grid;
  gap: var(--spacing-sm);
}

.contact__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.contact__item img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 10px;
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

.contact__item strong {
  display: block;
  color: var(--color-white);
}

.contact__item span,
.contact__item a {
  color: rgba(255, 255, 255, 0.9);
}

.contact__item a:hover {
  color: var(--color-accent);
}

/* Botón verde oficial de WhatsApp */
.btn--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-whatsapp);
  color: var(--color-white);
}

.btn--whatsapp img {
  width: 20px;
  height: 20px;
}

.btn--whatsapp:hover {
  background-color: var(--color-whatsapp-dark);
  color: var(--color-white);
}

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  line-height: 0;
}

.map-frame iframe {
  width: 100%;
  height: 420px;
  border: 0;
}

/* ==========================================================================
   REDES SOCIALES FLOTANTES
   --------------------------------------------------------------------------
   Rail vertical fijo en la esquina inferior derecha con los tres perfiles:
   WhatsApp (canal directo -> mayor prioridad visual, más grande y con
   pulso), Facebook e Instagram (secundarios y discretos). El tooltip se
   muestra en CSS en hover y focus (teclado). Se incluye en todas las
   páginas (ver components/footer.html).
   ========================================================================== */
.social-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.social-float__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: transform var(--transition-fast), box-shadow var(--transition-base);
}

.social-float__btn img {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.social-float__btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}

/* Tooltip en CSS puro (hover y focus desde teclado) */
.social-float__btn::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.social-float__btn:hover::after,
.social-float__btn:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* WhatsApp: canal directo de contacto -> mayor prioridad visual */
.social-float__btn--whatsapp {
  width: 60px;
  height: 60px;
  background-color: var(--color-whatsapp);
  animation: pulse-whatsapp 2.4s ease-out infinite;
}

.social-float__btn--whatsapp img {
  width: 32px;
  height: 32px;
}

.social-float__btn--whatsapp:hover {
  background-color: var(--color-whatsapp-dark);
}

@keyframes pulse-whatsapp {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Facebook: perfil secundario */
.social-float__btn--facebook {
  background-color: var(--color-facebook);
}

.social-float__btn--facebook:hover {
  background-color: var(--color-facebook-dark);
}

/* Instagram: perfil secundario con degradado oficial */
.social-float__btn--instagram {
  background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-float__btn--instagram:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 24px rgba(188, 24, 136, 0.4);
}

/* ==========================================================================
   BOTÓN VOLVER ARRIBA
   --------------------------------------------------------------------------
   Lo crea assets/js/components.js (initBackToTop) y lo inserta al inicio
   del rail .social-float. Aparece al hacer scroll y respeta
   prefers-reduced-motion (ver main.css).
   ========================================================================== */
.to-top {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-primary);
  font-size: 1.25rem;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

/* Respaldo: si la página no incluye .social-float, el botón queda fijo
   en la esquina inferior izquierda (el rail ocupa la derecha). */
.to-top--float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 997;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

/* ==========================================================================
   REDES SOCIALES EN EL FOOTER
   --------------------------------------------------------------------------
   Columna "Síguenos en nuestras redes" (ver components/footer.html).
   ========================================================================== */
.social-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: rgba(255, 255, 255, 0.9);
  transition: color var(--transition-fast);
}

.social-links a:hover {
  color: var(--color-white);
}

.social-links img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.social-links__badge {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.social-links__badge--whatsapp { background-color: var(--color-whatsapp); }
.social-links__badge--facebook { background-color: var(--color-facebook); }

.social-links__badge--instagram {
  background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* ==========================================================================
   SELECCIÓN DE IDIOMA (botón ES/EN en el menú)
   --------------------------------------------------------------------------
   Botón para alternar entre español e inglés en todo el sitio.
   Muestra la bandera del idioma al que se va a cambiar + la etiqueta.
   ========================================================================== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold, 600);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
}

.lang-switch img {
  width: 18px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.lang-switch:hover {
  color: var(--color-primary);
  background-color: var(--color-surface);
  text-decoration: none;
}

.site-nav__list .lang-switch {
  display: inline-flex;
}