/* estilos.css */

/*--------------------------------------------- fuente -----------------------------------------------------*/

/* --- 1. IMPORTAR LA FUENTE ELEGANTE DE GOOGLE FONTS --- */
/* Esta línea debe ser la primera en tu archivo CSS. */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap');


/*--------------------------------------------- menu principal ----------------------------------------------*/

/* --- Ajuste para que el menú fijo no tape el contenido de la página --- */
body {
    /* La altura del navbar de Bootstrap es ~56px. Unos 70px de padding es seguro. */
    padding-top: 70px; 
}

/* --- Estilos para el hover NARANJA en los links de navegación --- */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { /* Se aplica también si el link está activo */
    background-color: #FFA500; /* Naranja */
    color: white !important; /* !important asegura que sobreescriba a Bootstrap */
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out;
}

/* --- Estilos para el botón AZUL personalizado "Área Privada" --- */
.btn-custom-cta {
    background-color: #0d6efd; /* Azul primario de Bootstrap */
    color: white;
    border-radius: 50px;
    padding-left: 20px;
    padding-right: 20px;
    border: none;
    transition: background-color 0.3s ease-in-out;
}

/* --- Estilo HOVER AZUL CIELO para el botón --- */
.btn-custom-cta:hover {
    background-color: #87CEEB; /* Azul Cielo */
    color: #333; /* Texto más oscuro para buen contraste sobre fondo claro */
}






/* =====================================
   --- ESTILOS DEL PRELOADER ---       
========================================*/

/* Contenedor principal que ocupa toda la pantalla */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    background-color: #ffffff; /* Fondo blanco sólido */

    /* Usa Flexbox para centrar el círculo naranja en la página */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Transición para el desvanecimiento */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.75s ease, visibility 0.75s ease;
}

/* Clase que se añade con JS para ocultar el preloader */
#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Estilos para el CÍRCULO NARANJA */
.preloader-circle {
    width: 160px;  /* Ancho del círculo */
    height: 160px; /* Alto del círculo (debe ser igual al ancho) */
    background-color: #FFA500; /* Color naranja */
    border-radius: 50%; /* ¡La clave para hacerlo redondo! */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15); /* Sombra sutil para darle profundidad */

    /* Usa Flexbox OTRA VEZ para centrar el logo DENTRO del círculo */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Aplicamos la animación al círculo para que todo el conjunto palpite */
    animation: pulse-animation 6s infinite ease-in-out;
}

/* Estilos para el LOGO que va dentro del círculo */
.logo-preloader {
    /* Hacemos el logo un poco más pequeño que el círculo */
    width: 75%; 
    height: auto; /* Mantenemos la proporción */
}

/* Animación de "pulso" para el círculo */
@keyframes pulse-animation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}


/* =================================
   ESTILOS DEL FOOTER (ANCHO COMPLETO)
   ================================= */

/* Contenedor principal del footer. El fondo azul se extiende al 100% del ancho */
.site-footer {
    background-color: #0d6efd; /* Azul primario de Bootstrap */
    color: #ffffff;
    padding: 40px 0; /* Espaciado vertical generoso */
    font-family: sans-serif; /* Puedes cambiar la fuente si lo deseas */
    width: 100%; /* Asegura que ocupe todo el ancho */
}

/* Contenedor para la distribución en 3 columnas que AHORA se estira */
.footer-container-full-width {
    display: grid;
    /* La parrilla de 3 columnas iguales ahora ocupa todo el ancho del footer */
    grid-template-columns: repeat(3, 1fr);
    align-items: center; /* Centrado vertical de las secciones */
    /* El padding lateral evita que el contenido toque los bordes de la pantalla */
    padding: 0 30px; 
}

/* Estilos comunes para cada una de las 3 secciones */
.footer-section {
    display: flex;
    flex-direction: column;
}

/* ----- SECCIÓN IZQUIERDA (Avisos y Copyright) ----- */
.footer-left {
    align-items: center; /* Centrado horizontal del contenido */
    text-align: center;
}

.footer-left a, .footer-left p {
    margin: 5px 0; /* Espaciado entre los enlaces y el texto */
}

.copyright {
    font-size: 0.9em;
    margin-top: 15px; /* Más espacio sobre el copyright */
}

/* ----- SECCIÓN CENTRAL (Logo y Frase) ----- */
.footer-center {
    align-items: center; /* Centrado horizontal */
    text-align: center;
    /* Padding vertical de '2 renglones' y 15px horizontal como se pidió */
    padding: 2rem 15px;
}

.footer-logo {
    max-width: 180px; /* Ajusta el tamaño máximo de tu logo */
    height: auto;
    margin-bottom: 20px;
}

.footer-center h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: normal;
    font-style: italic;
    line-height: 1.5;
}

/* ----- SECCIÓN DERECHA (Contacto y Redes Sociales) ----- */
.footer-right {
    align-items: center; /* Centrado para mejor distribución en ancho completo */
    padding: 20px; /* Padding de 20px como se pidió */
}

.contact-info p {
    margin: 8px 0;
    display: flex;
    align-items: center;
}

.contact-info .fa-solid {
    margin-right: 12px; /* Espacio entre el icono y el texto */
    width: 20px; /* Para que todos los iconos ocupen el mismo espacio */
}

.social-media {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap; /* Permite que los iconos pasen a la siguiente línea si no caben */
    justify-content: center;
    gap: 15px; /* Espacio entre los iconos de redes sociales */
}

/* ----- ESTILOS GENERALES PARA ENLACES Y HOVER ----- */
.site-footer a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

.site-footer a:hover {
    color: #ffa500; /* Naranja en hover */
}

/* =================================
   DISEÑO RESPONSIVO (PARA MÓVILES)
   ================================= */
@media (max-width: 768px) {
    .footer-container-full-width {
        grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
        gap: 40px; /* Espacio entre las secciones cuando se apilan */
        padding: 0 20px; /* Reducimos el padding lateral en móviles */
    }

    /* Centramos todo el contenido en móvil para una mejor apariencia */
    .footer-left,
    .footer-center,
    .footer-right {
        align-items: center;
    }
}


/* =========================================
   ESTILOS PARA EL BOTÓN FLOTANTE DE WHATSAPP
   ========================================= */

.whatsapp-flotante {
  /* ----- Posicionamiento Fijo ----- */
  position: fixed;
  right: 15px; /* Distancia desde la derecha */
  top: 50%;    /* Posicionado a la mitad de la pantalla verticalmente */
  
  /* ----- Corrección de centrado vertical ----- */
  /* Lo subimos la mitad de su propia altura para que quede perfectamente centrado */
  transform: translateY(-50%); 
  
  /* ----- Apariencia del botón ----- */
  background-color: #25D366; /* Color verde oficial de WhatsApp */
  color: #FFFFFF;           /* Color del icono (blanco) */
  width: 60px;               /* Ancho del botón */
  height: 60px;              /* Alto del botón */
  border-radius: 50%;        /* Para hacerlo perfectamente circular */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Sombra para darle profundidad */

  /* ----- Centrado del icono dentro del círculo (Flexbox) ----- */
  display: flex;
  justify-content: center;
  align-items: center;

  /* ----- Capa y transición ----- */
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
  transition: all 0.3s ease; /* Transición suave para los efectos */
  text-decoration: none; /* Quitamos el subrayado del enlace */
}

/* Efecto al pasar el mouse por encima */
.whatsapp-flotante:hover {
  background-color: #128C7E; /* Un verde más oscuro al pasar el mouse */
  transform: translateY(-50%) scale(1.1); /* Lo hacemos un poco más grande */
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
}