/* ==========================================================================
   ESTILOS COMPONENTE: MAIN FOOTER (ANCHO INFINITO Y TEXTOS AL CENTRO)
   ========================================================================== */

/* 1. CONFIGURACIÓN DEL COMPONENTE */
dojo-footer {
  display: block;
  width: 100%;
  margin: 0 auto !important; /* Asegura el centrado absoluto en el HTML */
  padding: 0;
}

/* 2. EL CONTENEDOR BASE CON FONDO INFINITO SEGURO
   En lugar de forzar un ancho de 100vw que rompe la pantalla hacia la derecha,
   usamos un sombreado masivo hacia los lados que pinta de blanco el fondo
   de extremo a extremo del monitor, sin importar el contenedor padre.
*/
.main-footer {
  background-color: #ffffff !important;
  color: #700b0b;
  font-family: 'Segoe UI', sans-serif;
  width: 100%;
  margin: 0 auto !important;
  padding: 0;
  box-sizing: border-box;
  
  /* PINTA EL FONDO DE BLANCO DE MANERA INFINITA HACIA AMBOS LADOS */
  box-shadow: -2000px 0 0 #ffffff, 2000px 0 0 #ffffff;
}

/* Reseteo para evitar que reglas externas muevan los textos */
.main-footer *, 
.main-footer ::before, 
.main-footer ::after {
  box-sizing: border-box !important;
}

/* --- [BLOQUE SUPERIOR: CALL TO ACTION] --- */
.footer-cta-container {
  text-align: center !important;
  padding: 50px 20px;
  background-color: #ffffff;
  width: 100%;
}

.cta-logo {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  letter-spacing: 1px;
  text-align: center !important;
}

.cta-subtitle {
  font-size: 1rem;
  color: #000000; /* Celeste */
  font-weight: 600;
  margin: 0 0 25px 0;
  text-align: center !important;
}

.btn-cta-gold {
  display: inline-block;
  background-color: #ffcc00;
  color: #0c1424;
  text-decoration: none;
  font-weight: 700;
  padding: 12px 30px;
  border-radius: 6px;
  transition: transform 0.2s, background-color 0.2s;
  margin: 0 auto;
}


/* --- [BLOQUE CENTRAL: 4 COLUMNAS EN PC] --- */
.footer-links-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* CAMBIADO DE 5 A 4 */
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto !important; /* Centra el bloque entero en la pantalla */
  padding: 40px 20px 60px 20px;
  width: 100%;
  
  /* Asegura el centrado de los divs y sus textos */
  justify-content: center !important;
  justify-items: center !important; 
  text-align: center !important;     
}

/* --- [CENTRADO ABSOLUTO DE CONTENIDO] --- */
.footer-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;    /* Centra las cajas de los textos en PC */
  text-align: center !important;     /* Centra el texto mismo */
  width: 100%;
}

.column-title {
  color: #000000 !important;        /* Celeste */
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 20px 0;
  width: 100% !important;
  text-align: center !important;     /* Centra títulos */
}

.footer-link-item {
  margin-bottom: 12px;
  width: 100% !important;
  text-align: center !important;     /* Centra contenedor de enlaces */
}

.footer-link-item a {
  color: #700b0b !important;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
  display: block !important;         /* Toma todo el ancho para poder centrarse */
  width: 100% !important;
  text-align: center !important;     /* Clava el texto al medio de su columna */
}

.footer-link-item a:hover {
  color: #51c4d3 !important;
  text-decoration: underline;
}

.btn-teach-us {
  display: inline-block !important;
  margin-top: 15px;
  background-color: #1e6f9f;
  color: #ffffff !important;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center !important;
  align-self: center !important;     /* Centra el botón azul en su respectiva columna */
}

/* --- [BARRA INFERIOR: COPYRIGHT + LOGO] --- */
.footer-bottom-bar {
  border-top: 1px solid rgba(112, 11, 11, 0.1);
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 30px 20px;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}

.copyright-text {
  color: #718096;
  font-size: 0.85rem;
  margin: 0;
}

.footer-logo-jka {
  height: auto;
  max-width: 180px;
  display: block;
}

/* ==========================================================================
   VISTA RESPONSIVA
   ========================================================================== */

@media (max-width: 992px) {
  .footer-links-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas en Tablets */
  }
}

@media (max-width: 768px) {
  .main-footer {
    box-shadow: none; /* Quitamos el truco en celulares */
    background-color: #ffffff !important;
  }
  
  .footer-links-grid {
    grid-template-columns: 1fr !important; /* 1 columna vertical en móvil */
    padding: 30px 20px;
    gap: 35px;
  }
  
  .footer-bottom-bar {
    flex-direction: column !important;
    text-align: center !important;
    gap: 20px;
  }
}

/* ==========================================================================
   Mapa
   ========================================================================== */

/* Contenedor del mapa: alineación centralizada */
.map-container {
  max-width: 1200px;         /* Ajustado al ancho simétrico del footer */
  width: 90%;
  margin: 50px auto !important; /* Lo clava al centro horizontal de la pantalla */
  padding: 0 5px;
  box-sizing: border-box;
}

/* Estilo estético del recuadro del mapa */
.map-container iframe {
  width: 90% !important;
  border-radius: 8px;        /* Bordes redondeados sutiles */
}