/* 
    DERECHOS RESERVADOS: LUMIERES ADS.

    DESARROLLADORES:
        - FULL-STACK: ING. GABRIEL ALEGRÍA.
        - FRONT-END: MTS. ING. RAÚL PORTILLO.

    RECURSO: CONFIGURACIÓN GLOBAL, ESTILOS, LETRA, COLORES PARA EL SITIO WEB (FRECUENT_ROUTES).

    PROHÍBIDO LA DISTRIBUCIÓN DE ESTE APLICATIVO O SOLUCIONES CÓDIFICADAS.
*/

/* -----------------------------------
   SECTION: RUTAS FRECUENTES
   ----------------------------------- */
.routes-section {
  padding: 60px 0;
  background-color: #ffffff;
  text-align: center;
}

.routes-section .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.routes-section .section-title {
  font-family: "Montserrat", sans-serif;
  font-size: 3.4em;
  background-image: linear-gradient(90deg, rgba(196, 60, 117, 1) 47%, rgba(26, 63, 122, 1) 78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 50px;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

.routes-subtitle {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8em;
  color: var(--primary-color-pink);
  text-align: left;
  margin-top: 100px;
  margin-bottom: 25px;
  font-weight: bold;
  padding-left: 10px;
}

/* Ciudades: usa auto-fit para adaptarse al contenedor en desktop */
.cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  justify-content: center;
  margin-bottom: 50px;
}

/* Rutas principales: en desktop mostrar en grid (6 columnas adaptables) */
.main-routes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 25px;
  justify-content: center;
}

.city-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* IMPORTANTE: para que la imagen respete border-radius */
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.city-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Imagen: mantener en su contenedor, no desbordar, cubrir con crop si es necesario */
.city-image {
  width: 100%;
  height: 180px;       /* valor base para desktop */
  object-fit: cover;   /* rellena y recorta si es necesario */
  display: block;
}

/* Información interna */
.city-info {
  padding: 15px 20px;
}

.city-name {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2em;
  color: var(--primary-color-blue, #1a3f7a);
  margin-bottom: 5px;
  font-weight: bold;
}

.city-routes-count {
  font-family: "Montserrat", sans-serif;
  font-size: 0.85em;
  color: var(--primary-color-dark, #333);
}

/* Route card (no imagen habitualmente) */
.route-card {
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 15px 20px;
  text-align: left;
  transition: background-color 0.3s ease;
}

.route-card:hover {
  background-color: #e0e0e0;
}

.route-name {
  font-size: 1.1em;
  color: var(--primary-blue, #1a3f7a);
  margin-bottom: 5px;
  font-weight: bold;
}

.route-details {
  font-size: 0.9em;
  color: #555;
}

.cities-grid,
.main-routes-grid {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Mantener scroll-snap como comportamiento por defecto (se puede quitar en desktop) */
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 15px;
  scroll-padding-inline-end: 15px;
}

/* -----------------------------------
   LAPTOPS (ej. 1024px a 1439px)
   Ajustes tipográficos y tamaño de imágenes
   ----------------------------------- */
@media (min-width: 1024px) and (max-width: 1439px) {
  .routes-section .section-title {
    font-family: "Montserrat", sans-serif;
    font-size: 3em;
    font-weight: bold;
    text-transform: uppercase;
  }
  .routes-section {
    padding: 50px 0;
  }
  .routes-subtitle {
    font-size: 1.6em;
    margin-top: 35px;
    margin-bottom: 20px;
  }
  .cities-grid {
    gap: 25px;
    margin-bottom: 40px;
  }
  .city-image {
    height: 160px; /* ajuste para laptops */
  }
  .city-info {
    padding: 12px 18px;
  }
  .city-name {
    font-size: 1.1em;
  }
  .city-routes-count {
    font-size: 0.8em;
  }
  .main-routes-grid {
    gap: 18px;
  }
  .route-card {
    padding: 12px 18px;
  }
  .route-name {
    font-size: 1em;
  }
  .route-details {
    font-size: 0.85em;
  }
}

/* -----------------------------------
   TABLETS (768px a 1023px)
   Aquí aplicamos la solución de scroll horizontal (NO modificada).
   Ajuste: aseguramos que la imagen no se desborde y tenga altura ideal.
   ----------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .routes-section {
    padding: 40px 0;
  }
  .routes-section .container {
    padding: 0 15px;
  }
  .routes-section .section-title {
    font-size: 2.6em;
    margin-bottom: 35px;
  }
  .routes-subtitle {
    font-size: 1.4em;
    margin-top: 30px;
    margin-bottom: 20px;
    text-align: center;
    padding-left: 0;
  }

  /* CONTENEDORES transformados a scrollers horizontales */
  .cities-grid,
  .main-routes-grid {
    display: flex;             /* scroll horizontal */
    overflow-x: scroll;
    gap: 20px;
    padding-inline: 15px;
    justify-content: flex-start; /* clave: evita centrar y cortar la primera tarjeta */
  }

  /* Añadimos pseudo-espacios en los extremos para que primera/última tarjeta queden completas */
  .cities-grid::before,
  .cities-grid::after,
  .main-routes-grid::before,
  .main-routes-grid::after {
    content: "";
    flex: 0 0 15px;
  }

  /* Cards: anchos predecibles para tablets (evita cortes) */
  .cities-grid .city-card {
    flex: 0 0 320px;    /* ancho fijo para asegurar tarjeta completa */
    min-width: 280px;
    scroll-snap-align: start;
  }

  .main-routes-grid .route-card {
    flex: 0 0 300px;
    min-width: 260px;
    scroll-snap-align: start;
  }

  /* Imagen en card para tablets */
  .city-image {
    height: 140px;
    object-position: center center;
  }

  /* Tipografía y paddings adaptados */
  .city-info {
    padding: 10px 15px;
  }
  .city-name { font-size: 1.05em; }
  .city-routes-count { font-size: 0.78em; }

  .main-routes-grid { gap: 15px; }
  .route-card { padding: 10px 15px; }
  .route-name { font-size: 0.95em; }
  .route-details { font-size: 0.8em; }
}

/* -----------------------------------
   SMARTPHONES (<= 767px)
   También scroll horizontal (NO modificado). Ajustes para imagenes móviles.
   ----------------------------------- */
@media (max-width: 767px) {
  .routes-section {
    padding: 30px 0;
  }
  .routes-section .container {
    padding: 0 10px;
  }
  .routes-section .section-title {
    font-size: 2.2em;
    margin-bottom: 25px;
  }
  .routes-subtitle {
    font-size: 1.2em;
    margin-top: 25px;
    margin-bottom: 15px;
    text-align: center;
    padding-left: 0;
  }

  /* contenedores: scroller horizontal */
  .cities-grid,
  .main-routes-grid {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-inline: 10px;
    justify-content: flex-start;
  }

  .cities-grid::before,
  .cities-grid::after,
  .main-routes-grid::before,
  .main-routes-grid::after {
    content: "";
    flex: 0 0 10px;
  }

  /* CARD ancho en móviles: ocupa la mayor parte del viewport para verse completa */
  .cities-grid .city-card {
    flex: 0 0 88%;
    min-width: 240px;
    scroll-snap-align: start;
  }

  .main-routes-grid .route-card {
    flex: 0 0 80%;
    min-width: 220px;
    scroll-snap-align: start;
  }

  /* Imagen: altura reducida en móviles para mantener ratio */
  .city-image {
    height: 120px;
    object-position: center center;
  }

  .city-info { padding: 8px 12px; }
  .city-name { font-size: 1em; }
  .city-routes-count { font-size: 0.75em; }

  .main-routes-grid { gap: 10px; }
  .route-card { padding: 8px 12px; }
  .route-name { font-size: 0.9em; }
  .route-details { font-size: 0.75em; }
}

/* -----------------------------------
   PEQUEÑOS AJUSTES ADICIONALES (si hay bordes / imágen SVG)
   ----------------------------------- */
/* Asegurar que imágenes SVG o pequeñas no excedan el contenedor */
.city-card img {
  max-width: 100%;
  height: auto;
}