/* ==========================================================================
   RESPONSIVE.CSS — Adaptación a todas las pantallas
   ==========================================================================
   Enfoque: "mobile first" en la base (main.css) y se va mejorando el
   diseño con media queries de ancho mínimo.

   Puntos de corte usados en el proyecto:
     - Móvil pequeño:  < 400px
     - Móvil:          400px – 767px
     - Tablet:         768px – 1023px
     - Laptop:         1024px – 1279px
     - Escritorio:     >= 1280px

   REGLA: no añadir estilos "de escritorio" aquí para luego deshacerlos
   en móvil. Si un componente necesita estilos por debajo del primer
   punto de corte, escribir una media query propia con max-width.
   ========================================================================== */

/* ==========================================================================
   MÓVIL (base): todo lo que va antes de los @media es el diseño móvil
   ========================================================================== */

/* El grid de varias columnas pasa a 1 columna en móvil */
.grid--2,
.grid--3,
.grid--4,
.contact__grid {
  grid-template-columns: 1fr;
}

/* Indicadores de cobertura: 1 columna en móvil */
.distribution__coverage {
  grid-template-columns: 1fr;
}

/* Estadísticas: 2 columnas en móvil (el resto se define más abajo) */
.stats__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Evita que textos, formularios y tarjetas fuerzen el ancho de su grid. */
.stats__grid > *,
.visit-wrapper > *,
.visit-info,
.visit-form {
  min-width: 0;
}

/* Secciones con algo menos de respiro vertical en pantallas pequeñas */
.section {
  padding-block: var(--spacing-md);
}

/* El bloque central del Inicio conserva un ritmo compacto y continuo. */
.services,
.distribution {
  padding-block: 3rem;
}

.brands {
  padding-block: 3.5rem;
}

/* ==========================================================================
   MÓVIL (<= 767px): tipografía del HERO compacta
   --------------------------------------------------------------------------
   El título, la descripción y los botones se reducen en móvil para que el
   bloque quepa con aire en el hero sin tapar demasiado la fotografía.
   ========================================================================== */
@media (max-width: 767px) {
  .hero {
    align-items: center;
    padding: 2rem 1.25rem 4.5rem;
  }

  .hero__inner {
    max-width: 34rem;
  }

  .hero__badge {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.625rem;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 10vw, 3rem);
    line-height: 1.1;
    margin-bottom: 0.75rem;
  }

  .hero__rule {
    width: 76px;
    margin: 1rem 0;
  }

  .hero__lead {
    margin-bottom: 1.25rem;
  }

  .hero__proof {
    gap: 0.5rem;
    margin-bottom: 1.25rem;
  }

  .hero__proof li {
    min-height: 30px;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
  }

  .hero__actions {
    gap: var(--spacing-xs);
  }

  .hero__actions .btn {
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-sm);
  }

}

@media (max-width: 479px) {
  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero__actions .btn {
    justify-content: center;
  }

  .service-card {
    grid-template-columns: 52px minmax(0, 1fr) 34px;
    gap: 0.75rem;
    padding: var(--spacing-sm);
  }

  .service-card__icon {
    width: 52px;
    height: 52px;
  }

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

  .service-card__arrow {
    width: 34px;
    height: 34px;
  }

  .distribution__title {
    font-size: 1.55rem;
  }

  .distribution__stats {
    grid-template-columns: 44px auto minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.75rem;
  }

  .distribution__stats-icon {
    width: 44px;
    height: 44px;
  }

  .distribution__stats-count {
    font-size: 2.15rem;
  }

  .distribution__stats-region {
    font-size: var(--font-size-base);
  }
}

/* ==========================================================================
   MÓVIL GRANDE (>= 480px)
   ========================================================================== */
@media (min-width: 480px) {
  /* Horario de Servicios: 2 tarjetas por fila en móviles anchos */
  .hours-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .distribution__map-frame {
    max-width: 390px;
  }
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  /* La altura también responde al alto útil de tablets en horizontal. */
  :root {
    --hero-height: clamp(620px, calc(100svh - var(--header-height)), 720px);
  }

  .section {
    padding-block: var(--spacing-lg);
  }

  .services,
  .distribution,
  .brands {
    padding-block: 4rem;
  }

  /* Las rejillas empiezan a usar varias columnas */
  .grid--2,
  .grid--4,
  .contact__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 2 columnas (Contacto | Horario quedan lado a lado) */
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Horario de Servicios: 3 tarjetas por fila */
  .hours-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Indicadores de cobertura en 2 columnas (2x2) y botón a tamaño natural */
  .distribution__coverage {
    grid-template-columns: repeat(2, 1fr);
  }

  .distribution__map-frame {
    max-width: 430px;
  }

  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-card {
    min-height: 156px;
  }

  .brands__list {
    grid-auto-columns: 174px;
  }

  .visit-form__row {
    grid-template-columns: 1fr 1fr;
  }

  .distribution__cta {
    flex-direction: row;
    align-items: center;
  }

  .distribution__cta .btn {
    width: auto;
  }

  /* Modal de municipios: diálogo centrado con lista en 2 columnas */
  .distribution-modal {
    align-items: center;
    padding: var(--spacing-sm);
  }

  .distribution-modal__panel {
    max-height: 85vh;
    border-radius: var(--radius-lg);
  }

  .distribution-modal__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   LAPTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  /* Conserva presencia visual sin superar la ventana en laptops. */
  :root {
    --hero-height: clamp(680px, calc(100svh - var(--header-height)), 820px);
  }

  .visit-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Footer: tres columnas para conservar legibilidad en escritorio compacto. */
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Horario de Servicios: los 5 grupos en una sola fila */
  .hours-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .stat:nth-child(-n + 2) {
    border-bottom: 0;
  }

  /* Distribución: mapa a la izquierda y contenido a la derecha */
  .distribution__grid {
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas:
      "map header"
      "map content";
    grid-template-rows: auto 1fr;
    column-gap: 3rem;
    row-gap: var(--spacing-sm);
  }

  .distribution__map-frame {
    max-width: 470px;
  }

  .distribution__content {
    margin-inline: 0;
  }

  .distribution__header {
    align-self: end;
    margin-inline: 0;
  }

  .distribution__title {
    font-size: 2.25rem;
  }

  .brands__list {
    grid-auto-columns: 176px;
  }

  /* Modal de municipios: lista en 3 columnas en escritorio */
  .distribution-modal__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .site-footer > .container > .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);
  }
}

/* ==========================================================================
   ESCENARIO MÓVIL: menú hamburguesa
   --------------------------------------------------------------------------
   Solo activo por debajo de 768px. En pantallas mayores se usa el menú
   horizontal normal (definido en components.css).
   ========================================================================== */
@media (max-width: 767px) {
  .site-nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    align-items: center;
  }

  /* Las tres líneas del "hamburguesa" */
  .site-nav__burger,
  .site-nav__burger::before,
  .site-nav__burger::after {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-secondary);
    transition: transform var(--transition-base);
  }

  .site-nav__burger::before {
    content: "";
    transform: translateY(-5px);
  }

  .site-nav__burger::after {
    content: "";
    transform: translateY(3px);
  }

  /* El menú se convierte en panel desplegable debajo del header.
     La clase .is-open la añade assets/js/navigation.js */
  .site-nav__list {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    background-color: var(--color-white);
    border-bottom: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
  }

  .site-nav__list.is-open {
    max-height: 320px;
  }

  .site-nav__list a {
    border-top: var(--border-width) solid var(--color-border);
    border-radius: 0;
    padding: var(--spacing-sm);
  }

  /* Reducir tamaños de tipografía en móvil */
  h1 { font-size: var(--font-size-xl); }
  h2 { font-size: var(--font-size-lg); }

  .hero {
    padding-block: var(--spacing-sm);
  }

  /* Carrusel del hero en móvil: botones y puntos más compactos */
  .hero__nav {
    width: 40px;
    height: 40px;
  }

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

  .hero__dots {
    bottom: 0.25rem;
  }

  .stat__number {
    font-size: var(--font-size-xxl);
  }

  /* Redes sociales flotantes: más pegadas al borde, con separación
     suficiente y tamaño táctil cómodo (>= 44px). El rail completo cabe
     sin tapar el menú ni el contenido. */
  .social-float {
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }

  .social-float__btn {
    width: 44px;
    height: 44px;
  }

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

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

  /* Identidad visual del header: se reduce en móvil. La altura con
     width:auto conserva la proporción del wordmark. */
  .site-brand__name-img {
    height: 26px;
  }

  /* La imagen actual incluye margen blanco dentro del archivo. Este encuadre
     acerca la franja fotográfica sin deformarla y conserva visible el camión. */
  .page-hero.has-contact-hero-image {
    background-position: center, 80% 52%;
    background-size: cover, auto 235%;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .page-hero.has-contact-hero-image {
    background-position: center, 70% 52%;
    background-size: cover, auto 235%;
  }
}

/* En móvil y tablet el carrusel sigue siendo automático y conserva sus
   indicadores; se retiran las flechas laterales para no cubrir el texto. */
@media (max-width: 1100px) {
  .social-float__btn--instagram,
  .social-float__btn--facebook {
    display: none;
  }

  .social-float {
    right: 12px;
    bottom: 12px;
  }
}

@media (max-width: 900px) {
  .hero__nav {
    display: none;
  }
}

/* Los puntos mantienen su aspecto pequeño, pero ofrecen una zona táctil
   cómoda para seleccionar cada diapositiva. */
.hero__dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
}

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

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

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

.lang-switch {
  min-height: 44px;
}

@media (max-width: 767px) {
  .site-footer__links a,
  .social-links a {
    min-height: 44px;
  }
}

/* ==========================================================================
   CONÓCENOS / HISTORIA (línea de tiempo) en LAPTOP Y ESCRITORIO
   --------------------------------------------------------------------------
   En escritorio la línea vertical pasa al centro y los hitos alternan
   izquierda/derecha. En móvil y tablet se conserva la base de
   components.css: una sola columna con la línea a la izquierda.
   ========================================================================== */
@media (min-width: 1024px) {
  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline__item {
    width: 50%;
    padding-left: 0;
  }

  /* Hitos impares a la izquierda (contenido alineado a la derecha) */
  .timeline__item:nth-child(odd) {
    text-align: right;
    padding-right: var(--spacing-lg);
  }

  /* Hitos pares a la derecha (contenido alineado a la izquierda) */
  .timeline__item:nth-child(even) {
    margin-left: 50%;
    padding-left: var(--spacing-lg);
  }

  /* El marcador se reubica sobre la línea central */
  .timeline__dot {
    left: auto;
  }

  .timeline__item:nth-child(odd) .timeline__dot {
    right: -8px;
  }

  .timeline__item:nth-child(even) .timeline__dot {
    left: -8px;
  }
}

/* ==========================================================================
   MÓVIL PEQUEÑO (< 400px)
   ========================================================================== */
@media (max-width: 399px) {
  /* Hero: algo más bajo solo en pantallas muy pequeñas. */
  :root {
    --hero-height: 560px;
  }

  .site-brand__name-img {
    height: 22px;
  }
}