/* --- INICIO: CSS DE CABECERA COMPLETO Y CORREGIDO --- */

/* -- Estilos Base (MÓVIL POR DEFECTO) -- */
.whatsapp-flotante-contacto {
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center; 
  text-align: center;
  margin-top: 20px; 
  
  /* IMPORTANTE: Quitamos el 'margin-left' de aquí.
    En móvil, esto se centrará automáticamente 
    si está dentro de un contenedor centrado.
  */
}

.whatsapp-link-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #2596be;
  margin-bottom: 0px; 
}

.whatsapp-icono {
  width: clamp(40px, 5vw, 50px); 
  height: auto; 
  vertical-align: middle;
  margin-right: 15px; 
}

.whatsapp-numero {
  font-size: clamp(1.8rem, 5vw, 2.3rem); 
  font-weight: bold;
  white-space: nowrap; 
}

.whatsapp-texto-cta {
  text-align: center;
  text-decoration: none;
  color: #2596be;
  font-weight: 700;
  margin-top: -5px; 
  margin-left: 0; 
  font-size: clamp(1rem, 3vw, 1.375rem); 
}

.whatsapp-flotante-contacto a:hover {
  text-decoration: none;
}


/* === NUEVA SECCIÓN: Solo para Escritorio === */

/* Asumimos que la pantalla de "escritorio" 
  comienza en 769px. Si sigue viéndose mal, 
  podemos cambiar este número (ej. 992px).
*/
@media (min-width: 769px) {
  
  .whatsapp-flotante-contacto {
    /* Aquí aplicamos el margen izquierdo SOLO en pantallas 
      grandes, donde está al lado de los iconos sociales.
    */
    margin-left: 30px;
  }
  
}

.social-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Permite que los iconos bajen si no caben */
  gap: 20px; 
  margin-top: 2px;
}
.social-icons img {
  /* CORRECCIÓN: Hacemos el tamaño responsivo */
  width: clamp(35px, 8vw, 40px); 
  height: auto;
  transition: transform 0.3s;
}
.social-icons img:hover {
  transform: scale(1.2);
}

.footer-phone-number{
	color:#000!important;
}
/* --- INICIO: @MEDIA QUERY PARA MÓVILES (Tu solicitud) --- */
@media (max-width: 768px) {
  
  /* Este CSS se aplica al *contenido* de tus bloques de HTML
     cuando la pantalla es pequeña. */
  
  /* Hacemos los iconos sociales un poco más pequeños en móvil */
  .social-icons {
      gap: 15px;
      margin-top: 10px; /* Menos espacio */
  }
  .social-icons img {
      width: 35px;
      height: 35px;
  }

  /* Hacemos el bloque de WhatsApp más compacto */
  .whatsapp-flotante-contacto {
      margin-top: 10px; /* Menos espacio */
  }
  .whatsapp-icono {
      width: 40px;
      margin-right: 8px;
  }
  .whatsapp-numero {
      font-size: 1.3rem; /* Tamaño más controlado en móvil */
  }
  .whatsapp-texto-cta {
      font-size: 1rem;
  }
}
/* --- FIN: CSS DE CABECERA COMPLETO --- */




/* --- Contenedor Principal del Footer --- */
.footer-container-custom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    align-items: start;
    gap: 20px;
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
    box-sizing: border-box;
}

/* --- Estilo de cada Columna --- */
.footer-column-custom {
    font-family: Arial, sans-serif;
    color: #000;
    line-height: 1.6;
}

/* CAMBIO 1: Hacemos que esta clase centre TODO su contenido,
   incluyendo el bloque del teléfono */
.footer-col-center {
    display: flex;
    flex-direction: column;
    align-items: center; /* Esto centrará todo horizontalmente */
    text-align: center;
}

/* Columna 1: Logo */
.logo-col {
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-logo {
    max-width: 300px; /* CAMBIO 2: Hice el logo más grande (de 250px a 300px) */
    height: auto;
}

/* Títulos de las columnas */
.footer-title {
    font-family: 'Roboto', sans-serif;
    font-size: 30px; 
    font-weight: 100;
    color: #41549B;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Párrafos de dirección (Columna 2) */
.footer-column-custom p {
    margin: 0 0 5px 0;
    font-size: 25px;
    font-weight: 700;
    color: #000000;
}

/* Columna 3: Contacto */
.footer-contact-info {
    display: flex;
    align-items: center;
    /* Ya no necesitamos 'justify-content' aquí 
       porque el padre '.footer-col-center' lo está centrando */
}

.footer-wa-icon {
    width: 60px; 
    height: auto;
    margin-right: 10px;
}

/* Número de teléfono (Columna 3) */
.footer-phone-number {
    font-size: 36px;
    font-weight: 700;
    color: #2596be;
    text-decoration: none;
}

/* --- Adaptación para Móviles --- */
@media (max-width: 768px) {
    .footer-container-custom {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .logo-col {
        margin: 0 auto;
    }

    .footer-contact-info {
        justify-content: center;
    }
}

}
/* ============================================= */
/* --- ESTILO GLOBAL PARA BOTÓN CTA --- */
/* ============================================= */

.cta-button {
    background-color: #2596be !important;
    color: #ffffff !important;
    padding: 10px 47.5px !important;
    border-radius: 0px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.3s ease !important;
}

.cta-button:hover {
    background-color: #0E057B !important;
    color: #ffffff !important; /* Aseguramos que el texto siga blanco */
}

/* ============================================= */
/* --- ESTILO GLOBAL PARA BOTONES --- */
/* ============================================= */

.cta-button,
.button {
    background-color: #2596be !important;
    color: #ffffff !important;
    padding: 20px 47.5px !important;
    border-radius: 0px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.3s ease !important;
}

.cta-button:hover,
.button:hover {
    background-color: #0E057B !important;
    color: #ffffff !important; /* Aseguramos que el texto siga blanco */
}