@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.header-principal {
  padding: 20px;
  font-family: 'Poppins', sans-serif;
}

/* =========================================
   CONTENEDOR PRINCIPAL
========================================= */

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Esto elimina la expansión hacia los lados */
}

.conteiner { /* Corregido: ahora coincide con tu HTML ("conteiner") */
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centra el camión y la parada en la pantalla */
  align-items: center;
  gap: 50px; /* Crea un espacio de 50px entre el camión y la parada */
  
  position: relative; /* CRUCIAL: Mantiene la imagen de fondo atrapada aquí adentro */
  min-height: 80vh; /* Le damos altura al contenedor para que el fondo se aprecie bien */
  padding: 20px;
}


.tlaxcal {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
}

.tlaxcal img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  
  /* Cambiamos 'circle' por 'ellipse' y reducimos el área negra para que difumine más */
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 99%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 99%);
}

.camion, .parada {
  z-index: 1; 
}

.camion img {
  height: 200px;
  width: 300px;
  object-fit: contain; 
}

.parada img{
  height: 500px;
  width: 600px;
  object-fit: contain; 
}

.titulo-buscala {
    font-size: 4rem; /* Tamaño grande */
    color: #424574; /* Combina con tus iconos */
    font-weight: 600;
    text-align: center;
    margin: 0 0 15px 0; /* Margen solo abajo para separarlo del camión */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra para darle profundidad */
    z-index: 2;
    position: relative;
}

.imgmap {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.linea {
  width: 80%; /* La línea ocupará el 80% del ancho de la pantalla */
  height: 3px; /* El grosor de la línea */
  background-color: #000000; /* El mismo color de tus íconos */
  margin: 40px auto; /* 40px de separación arriba y abajo, 'auto' la centra horizontalmente */
  border-radius: 5px; /* La hace un poco transparente para que sea un detalle sutil y no corte el diseño de golpe */
}

.columna-info {
  display: flex;
  flex-direction: row; 
  justify-content: center; 
  align-items: flex-start; 
  gap: 120px; /* Separación entre cada bloque de icono */
  margin-top: 20px;
  padding-bottom: 50px;
}

/* Cada bloque individual (Icono + Texto) */
.mapa, .paradai, .recorrido {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  color: #555555;
  text-align: center;
  width: 250px; /* Aumentamos el ancho para que el texto respire mejor */
}

/* =========================================
   ESTILO PARA LOS TEXTOS DE INFORMACIÓN
========================================= */
.columna-info p {
  font-size: 1rem; /* Tamaño de letra normal */
  color: #555555; /* Un gris oscuro para que sea fácil de leer pero no compita con el icono */
  margin-top: 5px; /* Separación extra entre el icono y el texto */
  line-height: 1.5; /* Espacio entre las líneas de texto para mayor claridad */
}

.infomap{
    margin-top: 40px;
    margin-left: 30px;
}

.columna-info i {
  font-size: 5rem; /* ¡Aquí está la magia! Súbelo a 6rem o 7rem si los quieres gigantes */
  color: #424574; 
  margin-bottom: 15px; 
  transition: transform 0.3s ease; 
}

.columna-info i:hover {
  transform: scale(1.1); 
}

.tlaxmap img {
  height: 500px;
  width: 600px;
}

.lineasdeb {
  display: flex;
  flex-direction: row;
  align-items: center; /* Centra el texto y la imagen verticalmente */
  justify-content: center;
  gap: 50px; /* Separación entre la imagen y el texto */
  padding: 60px 20px;
  max-width: 1200px; /* Evita que se estire demasiado en pantallas gigantes */
  margin: 0 auto; /* Centra toda la sección en la página */
}

/* 2. Lado Izquierdo: El Mapa */
.tlaxmap {
  flex: 1; /* Le dice que ocupe la mitad del espacio disponible */
  display: flex;
  justify-content: flex-end; /* Empuja la imagen un poco hacia el centro */
}

.tlaxmap img {
  max-width: 100%; /* Evita que la imagen se desborde de su caja */
  width: 500px; /* Un tamaño base para el mapa, ajústalo si es necesario */
  border-radius: 15px; /* Un toque moderno a las esquinas del mapa */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Sombra suave para que resalte */
}

/* 3. Lado Derecho: Textos y Botón */
.infotext {
  flex: 1; /* Ocupa la otra mitad del espacio */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alinea el texto y el botón a la izquierda */
}

.infotext h1 {
  font-size: 2.2rem;
  color: #333333;
  margin-bottom: 30px;
  line-height: 1.4; /* Mejora la lectura separando las líneas */
}

/* 4. Diseño del Botón "Descargar" */
.infotext button {
  background-color: #0d6efd; /* Color azul llamativo */
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 12px 35px;
  border: none; /* Quitamos el borde feo que traen los botones por defecto */
  border-radius: 50px; /* Bordes circulares tipo píldora */
  cursor: pointer; /* Cambia la flechita por una mano al pasar el mouse */
  transition: all 0.3s ease; /* Transición suave para el hover */
  box-shadow: 0 4px 6px rgba(13, 110, 253, 0.3); /* Sombra azulada */
}

/* Efecto al pasar el mouse por el botón */
.infotext button:hover {
  background-color: #0b5ed7; /* Un azul ligeramente más oscuro */
  transform: translateY(-3px); /* El botón "salta" un poquito hacia arriba */
  box-shadow: 0 6px 12px rgba(13, 110, 253, 0.4);
}

#redTransporte {
  position: absolute; /* Se pega al documento, no a tu cámara */
  top: 0;
  left: 0;
  z-index: -9999; /* Lo manda al fondo absoluto */
  pointer-events: none; /* No estorba los clics */
}


@media (max-width: 900px) {
    /* Contenedor principal: Pasa de fila a columna */
    .conteiner {
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px;
    }

    /* Ajuste de imágenes para que no se desborden */
    .camion img, 
    .parada img {
        width: 100%;
        max-width: 300px; /* Tamaño máximo para móviles */
        height: auto; /* Mantiene la proporción */
    }

    .titulo-buscala {
        font-size: 3rem; /* Letra un poco más pequeña en móviles */
    }

    /* Columnas de información: Pasan de fila a columna */
    .columna-info {
        flex-direction: column;
        gap: 50px;
        align-items: center;
    }

    .infomap {
        margin-left: 0; /* Quitamos el margen izquierdo en móviles para centrarlo */
    }

    /* Sección inferior (Mapa y descarga): Pasa de fila a columna */
    .lineasdeb {
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px;
        text-align: center; /* Centramos el texto en móviles */
    }

    .infotext {
        align-items: center; /* Centramos el botón en móviles */
    }

    .infotext h1 {
        font-size: 1.6rem; /* Ajustamos el tamaño del título inferior */
    }

    .tlaxmap img {
        width: 100%;
        max-width: 350px;
        height: auto;
    }
}