/*====================================================================/
/--- ESTILOS PARA EL PRIMER MENÚ (FONDO AZUL Y ENLACES ROJOS) --- /
/====================================================================*/

/* Color hexadecimal del primer menú constante */
.menu-superior-custom {
    background-color: #151635 !important;
}

/* --- ESTILOS DE REDES SOCIALES EN CÍRCULOS --- */
.enlace-red-circular {
    width: 36px;
    height: 36px;
    background-color: #ff3b30;          /* Fondo rojo del círculo */
    border: 2px solid #ff3b30;         /* Borde rojo para mantener el tamaño estable */
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

/* Iconos de las redes (ahora nacen BLANCOS dentro del círculo rojo) */
.enlace-red-circular i,
.enlace-red-circular .bi-x-svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-size: 1rem;
    transition: color 0.3s ease, fill 0.3s ease;
}

/* --- EFECTO HOVER: Quita el círculo y pinta el icono de rojo --- */
.enlace-red-circular:hover {
    background-color: transparent;     /* Desaparece el fondo rojo */
    border-color: transparent;         /* Desaparece el borde rojo */
    transform: scale(1.1);             /* Pequeño impulso visual opcional */
}


/* Al hacer hover, el símbolo interno pasa a ser ROJO */
.enlace-red-circular:hover i,
.enlace-red-circular:hover .bi-x-svg {
    color: #ff3b30 !important;
    fill: #ff3b30 !important;
}

 /* ==========================================
    TÍTULO CENTRALIZADO EN EL PRIMER MENÚ
 ========================================== */
        
        /* Estilo general del texto del título */
        .header-titulo-central {
            font-size: 1.15rem;
            letter-spacing: 1px;
            /* Degradado de texto opcional usando tus colores corporativos (Blanco a Rojo suave) */
            background: linear-gradient(135deg, #ffffff 0%, #ffe5e5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Evita que los botones colapsables tapen los elementos interactivos laterales */
        .z-index-top {
            z-index: 5;
        }

        /* --- LOGICA DE POSICIONAMIENTO RESPONSIVO --- */
        @media (min-width: 992px) {
            /* En PC bloqueamos el título exactamente en el centro del menú absoluto */
            .titulo-central-wrap {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                pointer-events: none; /* Permite que el clic pase a través si el menú colapsa */
                z-index: 1;
            }
        }

        @media (max-width: 991px) {
            /* En celulares y tablets se quita el absoluto y se centra como bloque regular */
            .titulo-central-wrap {
                width: 100%;
                text-align: center;
                order: 3; /* Envía el título abajo de las redes sociales en entornos móviles */
                margin-top: 10px;
                margin-bottom: 5px;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                padding-top: 8px;
            }
            .header-titulo-central {
                font-size: 1rem; /* Un poco más pequeño en teléfonos */
            }
        }


/* Mantener los iconos de contacto (reloj, sobre, teléfono) siempre en rojo */
.info-contacto i {
    color: #ff3b30 !important;
    font-size: 1.2rem;
}

/* --- NUEVOS ESTILOS PARA LAS DOS LÍNEAS DE TEXTO --- */
.info-contacto .titulo-linea {
    font-size: 0.85rem;
    line-height: 1.2;
}

.info-contacto .texto-contraste {
    color: #b0b3b8 !important; /* Blanco en contraste (gris claro elegante) */
    font-size: 0.8rem;
    line-height: 1.2;
}



/* --- EFECTO HOVER PARA ENLACES DE CONTACTO --- */
.enlace-contacto {
    transition: opacity 0.2s ease;
}

/* Al pasar el cursor, el texto secundario brilla pasando de gris a blanco puro */
.enlace-contacto:hover .texto-contraste {
    color: #ffffff !important;
}

/* Efecto opcional: reduce ligeramente la opacidad de los iconos al hacer hover */
.enlace-contacto:hover i {
    opacity: 0.85;
}

/*====================================================================/
/--- ESTILOS PARA EL SEGUNDO MENÚ (FONDO BLANCO Y ENLACES NEGROS) --- /
/====================================================================*/

/* ==========================================================================
   1. ESTILOS BASE (ESCRITORIO ESTÁNDAR > 1024px)
   ========================================================================== */

#menuSecundario .nav-link {
    color: #8a95a5 !important;
    font-size: 1.15rem !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 6px !important; 
    border-bottom: 3px solid transparent; 
    transition: color 0.2s ease, border-color 0.2s ease;
}

#menuSecundario .nav-link:hover {
    color: #ff3b30 !important;
    border-bottom-color: #000000; 
}

/*#menuSecundario .nav-link.active,
#menuSecundario .dropdown:has(.show) .nav-link,
#menuSecundario .dropdown:has(.active) > .nav-link {
    color: #ff3b30 !important;                  
    border-bottom: 3px solid #000000 !important; 
}*/

/* --- NUEVO ESTADO ACTIVO CONTROLADO Y BLINDADO --- */
#menuSecundario .nav-link.cambio-activo,
#menuSecundario .nav-link.active {
    color: #ff3b30 !important;                  /* Texto Rojo Corporativo */
    border-bottom: 3px solid #000000 !important; /* Línea inferior negra sólida */
}

.titulo-brand-cursivo {
    font-family: "Bradley Hand ITC", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 2.35rem;
    font-weight: 700;
    color: #8a95a5; 
    letter-spacing: 0.5px;
    line-height: 1;
    padding-left: 15px;
    border-left: 2px solid #e9ecef; 
    transition: color 0.3s ease;
}

.titulo-brand-cursivo:hover {
    color: #ff3b30;
}

/* Indicadores de submenú > */
#menuSecundario .dropdown-toggle::after { display: none !important; }
#menuSecundario .dropdown-toggle::before {
    content: ">";
    display: inline-block;
    margin-left: 8px;              
    font-size: 0.85rem;            
    font-family: monospace, sans-serif; 
    order: 2;                      
    transition: transform 0.25s ease; 
}
#menuSecundario .dropdown-toggle { display: inline-flex; align-items: center; }
#menuSecundario .dropdown-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }

.custom-dropdown-menu {
    border: 1px solid #eeeeee !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-radius: 6px !important;
    padding: 8px 0 !important;
}
.custom-dropdown-menu .dropdown-item {
    color: #8a95a5 !important; 
    font-size: 1rem !important;
    font-weight: 600;
    padding: 10px 20px !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.custom-dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa !important; 
    color: #ff3b30 !important;             
}
.custom-dropdown-menu .dropdown-item.active {
    background-color: rgba(255, 59, 48, 0.05) !important; 
    color: #ff3b30 !important;                             
}

.menu-segundo-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid #eeeeee; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
}

.btn-acceder-menu {
    background-color: #ff3b30 !important; 
    border: 2px solid #ff3b30 !important;
    color: #ffffff !important;
    border-radius: 50px !important;       
    font-size: 0.95rem;
    padding: 8px 20px;
    display: inline-block;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.btn-acceder-menu:hover {
    background-color: transparent !important;
    color: #ff3b30 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.2) !important;
}


/* ==========================================================================
   2. TRATAMIENTO PARA CANAIMA Y TABLETS (Media Query: <= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .titulo-brand-cursivo {
        font-size: 1.6rem;
        padding-left: 10px;
    }

    #menuSecundario .nav-link {
        font-size: 1.1rem !important;
        padding: 12px 15px !important;
        border-bottom: 1px solid #f1f3f5 !important; 
        display: flex;
        justify-content: space-between; 
    }

    #menuSecundario .nav-link.active,
    #menuSecundario .dropdown:has(.show) .nav-link,
    #menuSecundario .dropdown:has(.active) > .nav-link {
        border-bottom: 1px solid #ff3b30 !important; 
        background-color: rgba(255, 59, 48, 0.02);
    }

    .menu-segundo-sticky .navbar-collapse {
        max-height: 55vh; 
        overflow-y: auto;
        padding: 10px;
        background-color: #ffffff; 
    }

    .custom-dropdown-menu {
        border: none !important;
        box-shadow: none !important;
        padding-left: 15px !important; 
        background-color: #f8f9fa;
    }

    .btn-acceder-menu {
        display: block !important;
        width: 100%;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 10px;
        padding: 12px 20px;
        font-size: 1rem;
    }

    .btn-acceder-menu:hover {
        transform: none !important;
    }
}


/* ==========================================================================
   3. VISTA CELULAR COMÚN / REDMI 9 (Media Query: <= 400px)
   ========================================================================== */
@media (max-width: 400px) {
    /* Achicamos el título para que no choque con el botón de hamburguesa del Redmi 9 */
    .titulo-brand-cursivo {
        font-size: 1.2rem; 
        letter-spacing: 0px;
        padding-left: 8px;
    }

    /* Reducimos sutilmente el tamaño de fuente del menú móvil */
    #menuSecundario .nav-link {
        font-size: 1rem !important;
        padding: 10px 12px !important;
    }

    /* El botón de acceder se vuelve ligeramente más compacto verticalmente */
    .btn-acceder-menu {
        padding: 10px 15px;
        font-size: 0.95rem;
        margin-top: 10px;
    }
}



            /* ==========================================
           SECCIÓN HERO COMPACTA Y RESPONSIVA
           ========================================== */
        .hero-section {
            background: linear-gradient(135deg, #FFDE4D 0%, #FFB22C 35%, #FF7F3E 70%, #8B2635 100%) !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            min-height: auto;
            padding: 20px 0;
            display: flex;
            align-items: center;
            overflow: hidden;
            width: 100%;
        }

        /* TIPOGRAFÍA FLUIDA INTERACTIVA: Cambia sola según el tamaño de la pantalla */
        .hero-titulo {
            color: #151635 !important;
            /* clamp(Mínimo, Escala Dinámica, Máximo) -> Nunca se desborda en móviles */
            font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
            letter-spacing: -0.5px;
            line-height: 1.2;
        }

        .hero-subtitulo {
            color: #212529 !important;
            font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
            text-align: justify;
            text-justify: inter-word;
            line-height: 1.6;
            font-weight: 500;
            max-width: 540px; /* Evita líneas de texto demasiado largas en pantallas gigantes */
        }

        /* Badge Adaptado */
        .badge-custom {
            background-color: #151635 !important;
            color: #ffffff !important;
            font-size: 0.8rem !important;
            font-weight: 700;
            border-radius: 50px !important;
            display: inline-block;
        }

        /* Botones Adaptados a Entornos Táctiles */
        .btn-hero-primary {
            background-color: #151635 !important;
            border: 2px solid #151635 !important;
            color: #ffffff !important;
            transition: all 0.25s ease !important;
            font-size: 0.95rem;
        }
        .btn-hero-primary:hover {
            background-color: transparent !important;
            color: #151635 !important;
            transform: translateY(-2px);
        }

        .btn-hero-secondary {
            background-color: rgba(255, 255, 255, 0.2) !important;
            border: 2px solid #ffffff !important;
            color: #ffffff !important;
            transition: all 0.25s ease !important;
            font-size: 0.95rem;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .btn-hero-secondary:hover {
            background-color: #ffffff !important;
            color: #151635 !important;
            transform: translateY(-2px);
        }

        /* Imagen Adaptativa Proporcional */
        .img-hero {
            max-height: auto;
            width: 100%;
            max-width: 460px; /* Centra y acota la imagen en tablets */
            object-fit: cover;
            border: 1px solid #ffffff;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            transition: transform 0.3s ease;
        }
        .img-hero:hover {
            transform: scale(1.02);
        }

        /* --- CONTROL DE ALTURAS GENERAL POR FIJACIÓN --- */
        .contenido-principal-web {
            margin-top: 0px;
            transition: margin-top 0.1s ease;
        }
        body.fijado .hero-section {
            /* Compensa dinámicamente el salto en cualquier resolución */
            padding-top: calc(40px + 75px);
        }

        /* --- ANIMACIONES DE ENTRADA SUAVE --- */
        .animate-fade-in-left { animation: fadeInLeft 0.8s ease-out forwards; }
        .animate-fade-in-right { animation: fadeInRight 0.8s ease-out forwards; }

        @keyframes fadeInLeft {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes fadeInRight {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* --- AJUSTES ESPECÍFICOS MEDIA QUERIES --- */
        @media (max-width: 991px) {
            .hero-section { 
                padding: 30px 0; 
            }
            .img-hero { 
                max-height: 240px; 
                margin-bottom: 10px; /* Añade espacio cuando se posiciona arriba */
            }
            /* En pantallas de tablets o celulares centra los textos automáticamente */
            .hero-subtitulo {
                margin-left: auto;
                margin-right: auto;
            }
        }
        
        @media (max-width: 575px) {
            /* En teléfonos muy pequeños, los botones ocupan todo el ancho para facilitar el clic */
            .hero-section .d-grid .btn {
                width: 100%;
                margin-bottom: 5px;
            }
        }

        /* ==========================================
           SECCIÓN DE SERVICIOS (ESTILOS Y TARJETAS)
           ========================================== */
        .services-section {
            width: 100%;
            border-bottom: 1px solid #f1f3f5;
        }

        /* Badge superior del encabezado */
        .badge-servicios {
            background-color: rgba(21, 22, 53, 0.08) !important; /* Variante de tu azul oscuro */
            color: #151635 !important;
            font-size: 0.85rem !important;
            font-weight: 700;
            border-radius: 50px !important;
            display: inline-block;
        }

        /* Tarjeta Base */
        .card-servicio {
            background-color: #f8f9fa !important; /* Fondo gris claro premium */
            border-radius: 12px !important;
            transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease !important;
            will-change: transform, box-shadow;
        }

        /* --- EFECTO HOVER DE ELEVACIÓN Y ENFOQUE --- */
        .card-servicio:hover {
            transform: translateY(-8px); /* Eleva la tarjeta suavemente */
            box-shadow: 0 15px 35px rgba(21, 22, 53, 0.12) !important; /* Añade una sombra profunda */
            background-color: #ffffff !important; /* Cambia a blanco puro al enfocarse para resaltar */
        }

        /* Contenedor Circular del Icono (Azul Claro Tecnológico) */
        .icono-servicio-wrap {
            width: 55px;
            height: 55px;
            min-width: 55px;
            min-height: 55px;
            background-color: #151635; /* Azul claro brillante de alto contraste */
            transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
        }


        /* Icono Interno (Cambiado de Rojo a Blanco Puro) */
        .icono-servicio-wrap i {
            color: #ffffff !important; /* Blanco limpio y elegante */
            font-size: 1.4rem;
            transition: color 0.3s ease;
        }

        /* --- EFECTO HOVER DE TRANSICIÓN AL PASAR EL MOUSE --- */
        .card-servicio:hover .icono-servicio-wrap {
            transform: scale(1.08) rotate(8deg);
            background-color: #0056b3; /* El círculo cambia a un azul profundo al activarse */
        }

        .card-servicio:hover .icono-servicio-wrap i {
            color: #ffffff !important; /* El icono se mantiene en blanco puro con excelente contraste */
        }

        /* Ajuste de lectura del texto */
        .card-text-custom {
            font-size: 0.95rem;
            line-height: 1.6;
        }

        /* Fuerza el justificado de los textos de la etiqueta P de forma limpia */
        .text-justify-custom {
            text-align: justify !important;
            text-justify: inter-word; /* Distribuye el espacio entre palabras estéticamente */
        }

        /* Estilo general para el título convertido en enlace */
        .titulo-servicio-link {
            color: #212529 !important; /* Nace en el negro/gris oscuro de Bootstrap */
            text-decoration: none !important; /* Elimina la línea de subrayado tradicional */
            transition: color 0.25s ease;
            display: inline-block;
        }

        /* --- INTERACCIÓN SUTIL: El título pasa a rojo corporativo al hacer hover --- */
        .titulo-servicio-link:hover {
            color: #ff3b30 !important; /* Rojo vivo corporativo */
        }

        /* EFECTO PRO: Si el usuario pasa el mouse por CUALQUIER zona de la tarjeta, el título también se ilumina */
        .card-servicio:hover .titulo-servicio-link {
            color: #ff3b30 !important;
        }

        /* Ajustes responsivos: En celulares el texto justificado puede verse tosco, lo alineamos mejor */
        @media (max-width: 767px) {
            .text-justify-custom {
                text-align: center !important; /* Se centra en pantallas de teléfonos para mejor lectura táctil */
            }
        }



/* ==========================================
PIE DE PÁGINA (CON RECORTE ONDULADO)
========================================== */
        .footer-custom {
            background-color: #151635 !important;
            width: 100%;
            position: relative;
            /* Le damos un margen superior para que no pise el texto de la sección de arriba */
            margin-top: 100px; 
            padding-top: 40px; 
        }

        /* --- CONTENEDOR DE ONDA BLINDADO --- */
        .wave-container {
            position: absolute;
            /* Empuja el SVG hacia arriba, sacándolo del footer para que pise el fondo blanco */
            top: -79px; 
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            z-index: 10; /* Fuerza a que se dibuje por encima de todo */
        }

        .wave-container svg {
            position: relative;
            display: block;
            width: 100%;
            height: 80px; /* Altura de la onda, puedes subirlo a 100px si quieres que sea más pronunciada */
        }

        /* Pintamos el cuerpo del vector con el azul oscuro estricto de tu paleta */
        .wave-container .wave-path {
            fill: #151635;
        }

        /* Estilización interna del contenido (Se mantiene) */
        .footer-titulo { font-size: 1.5rem; letter-spacing: -0.5px; }
        .footer-subtitulo { font-size: 1.1rem; padding-bottom: 8px; }
        .footer-texto { font-size: 0.9rem; line-height: 1.6; text-align: justify;
            text-justify: inter-word; }

        .footer-link {
            color: #b0b3b8 !important; text-decoration: none; font-size: 0.95rem; font-weight: 500;
            transition: color 0.2s ease, padding-left 0.2s ease;
        }
        .footer-link:hover { color: #ffffff !important; padding-left: 4px; }
        .footer-custom i.text-danger-custom { color: #ff3b30 !important; font-size: 1.1rem; }
        .footer-copyright-border { border-top: 1px solid rgba(255, 255, 255, 0.08); }

        /* Redes Sociales del Footer */
        .redes-sociales-footer .enlace-red-circular {
            width: 36px; height: 36px; min-width: 36px; min-height: 36px; flex-shrink: 0;
            background-color: #ff3b30 !important; border: 2px solid #ff3b30 !important;
            display: flex !important; align-items: center; justify-content: center;
            transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
        }
        .redes-sociales-footer .enlace-red-circular:hover {
            background-color: transparent !important; border-color: transparent !important; transform: scale(1.15);
        }

        /* Corrección responsiva: reduce el tamaño de la onda en pantallas móviles */
        @media (max-width: 767px) {
            .footer-custom { padding-top: 60px; }
            .wave-container svg { height: 40px; }
        }



/*======================================================/
/--1. ESTILOS LOGIN BASE (ESCRITORIO ESTÁNDAR / GENERAL)/
/===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fondo de pantalla completa con degradado de 4 colores exacto */
.login-body {
    background: linear-gradient(135deg, #FFDE4D 0%, #FFB22C 35%, #FF7F3E 70%, #8B2635 100%) !important;
    min-height: 100vh;
    font-family: sans-serif;
    overflow-x: hidden;
}

/* Tarjeta contenedora con efecto cristal (Glassmorphism) */
.card-login-wrap {
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(10px);           
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Tipografías y Colores */
.text-navy-custom {
    color: #151635 !important;
}

.text-navy-muted {
    color: rgba(21, 22, 53, 0.75) !important;
    font-size: 0.95rem;
}

.header-login-titulo {
    letter-spacing: -0.5px;
}

/* Botón Volver Rediseñado y Centrado */
.btn-volver-centrado {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 16px;
    border-radius: 50px;
    color: #151635 !important;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-volver-centrado:hover {
    background: #ffffff !important;
    color: #ff3b30 !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
}

.btn-volver-centrado i {
    font-size: 1rem;
    line-height: 1;
}

/* Botón Volver Home Alternativo */
.btn-volver-home {
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-volver-home:hover {
    background: #ffffff !important;
    color: #ff3b30 !important; 
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
    transform: translateX(-3px);
}

.btn-volver-home i {
    font-size: 1.1rem;
    line-height: 1;
}

/* Estilos de los campos de texto e inputs */
.form-container .form-label {
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.form-container .form-control {
    padding: 10px 12px;
    font-size: 0.95rem;
    color: #212529;
    border: 1px solid #ced4da;
    background-color: #ffffff;
}

.form-container .form-control:focus {
    border-color: #151635 !important;
    box-shadow: 0 0 0 0.2rem rgba(21, 22, 53, 0.1) !important;
}

/* Elementos del Formulario */
.btn-outline-light-custom {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    transition: background-color 0.2s;
}

.link-login {
    color: #ff3b30 !important;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.link-login:hover {
    color: #8B2635 !important; 
}

.check-custom:checked {
    background-color: #151635 !important;
    border-color: #151635 !important;
}

/* Botón de Enviar (Login) */
.btn-login-submit {
    background-color: #151635 !important;
    border: none;
    color: #ffffff !important;
    padding: 12px;
    font-size: 1rem;
    border-radius: 6px;
    display: block;
    width: 100%;
    transition: background-color 0.25s ease, transform 0.2s ease !important;
}

.btn-login-submit:hover {
    background-color: #ff3b30 !important; 
    transform: translateY(-1px);
}

/* Clases Utilitarias */
.text-sm { font-size: 0.85rem; }
.select-none { user-select: none; }

/* Animación de entrada suave */
.animate-fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   2. ADAPTACIÓN PARA LA CANAIMA (Media Query: <= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* El verdadero reto de la Canaima son sus 600px de alto. 
       Reducimos los márgenes superiores e internos para evitar scroll vertical innecesario */
    .card-login-wrap {
        padding: 20px !important; /* Estrecha el contenedor por dentro */
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    .header-login-titulo {
        font-size: 1.75rem !important; /* Título ligeramente más compacto */
    }

    /* Ajustamos los inputs para que no consuman tanto espacio vertical */
    .form-container .form-control {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    .btn-login-submit {
        padding: 10px;
        font-size: 0.95rem;
    }
}


/* ==========================================================================
   3. ADAPTACIÓN PARA EL REDMI 9 (Media Query: <= 400px)
   ========================================================================== */
@media (max-width: 400px) {
    /* En celulares el espacio horizontal es reducido. Estrechamos la tarjeta */
    .card-login-wrap {
        padding: 15px 12px !important;
        border-radius: 8px !important; /* Suaviza las esquinas en móviles */
    }

    /* Reducción de fuentes del encabezado para evitar saltos de línea antiestéticos */
    .header-login-titulo {
        font-size: 1.45rem !important;
    }

    .text-navy-muted {
        font-size: 0.85rem;
    }

    /* Optimizamos los enlaces de "Olvidé mi contraseña" o "Registrarme" para el dedo */
    .link-login {
        display: inline-block;
        padding: 5px 0; /* Mayor área de toque */
        font-size: 0.8rem;
    }

    /* El botón submit se vuelve más grande y alto para presionarlo fácilmente en el Redmi 9 */
    .btn-login-submit {
        padding: 14px;
        font-size: 1rem;
    }

    /* Desactivamos los desplazamientos del hover en móviles para evitar parpadeos extraños */
    .btn-volver-centrado:hover, 
    .btn-volver-home:hover {
        transform: none !important;
    }
}

/* ==========================================
BOTÓN VOLVER ARRIBA (BACK TO TOP)
========================================== */
.btn-volver-arriba {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999999 !important; /* Capa absoluta superior inmune a interferencias */
    
    /* Paleta Corporativa */
    background-color: #151635 !important; /* Fondo Círculo Azul */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    
    /* Centrado Geométrico */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    
    /* Estado Inicial: Oculto con animación de escala */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.7); 
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.3s, 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.2s;
}

/* Icono Interno */
.btn-volver-arriba .flecha-arriba {
    color: #ff3b30 !important; /* Flecha Roja */
    font-size: 1.1rem;
    line-height: 1;
    display: block;
    transform: translateY(-1px); /* Ajuste óptico de centrado */
    transition: color 0.2s ease;
}

/* CLASE ACTIVA: Se inyecta por JS de forma instantánea al hacer scroll */
.btn-volver-arriba.mostrar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

/* Efecto Interactividad (Desktop / Computadoras) */
.btn-volver-arriba:hover {
    background-color: #ff3b30 !important; /* Fondo pasa a Rojo */
}
.btn-volver-arriba:hover .flecha-arriba {
    color: #ffffff !important; /* Icono pasa a Blanco */
}

/* --- RESPONSIVO: CANAIMA (<= 1024px) --- */
@media (max-width: 1024px) {
    .btn-volver-arriba {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

/* --- RESPONSIVO: REDMI 9 (<= 400px) --- */
@media (max-width: 400px) {
    .btn-volver-arriba {
        bottom: 15px;
        right: 15px;
        width: 42px;
        height: 42px;
    }
    /* Desactivación de hover en teléfonos para evitar bugs visuales tras pulsar */
    .btn-volver-arriba:hover {
        background-color: #151635 !important;
    }
    .btn-volver-arriba:hover .flecha-arriba {
        color: #ff3b30 !important;
    }
}.btn-volver-arriba {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999999 !important; /* Capa absoluta superior inmune a interferencias */
    
    /* Paleta Corporativa */
    background-color: #151635 !important; /* Fondo Círculo Azul */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    
    /* Centrado Geométrico */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    
    /* Estado Inicial: Oculto con animación de escala */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.7); 
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.3s, 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.2s;
}

/* Icono Interno */
.btn-volver-arriba .flecha-arriba {
    color: #ff3b30 !important; /* Flecha Roja */
    font-size: 1.1rem;
    line-height: 1;
    display: block;
    transform: translateY(-1px); /* Ajuste óptico de centrado */
    transition: color 0.2s ease;
}

/* CLASE ACTIVA: Se inyecta por JS de forma instantánea al hacer scroll */
.btn-volver-arriba.mostrar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

/* Efecto Interactividad (Desktop / Computadoras) */
.btn-volver-arriba:hover {
    background-color: #ff3b30 !important; /* Fondo pasa a Rojo */
}
.btn-volver-arriba:hover .flecha-arriba {
    color: #ffffff !important; /* Icono pasa a Blanco */
}

/* --- RESPONSIVO: CANAIMA (<= 1024px) --- */
@media (max-width: 1024px) {
    .btn-volver-arriba {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

/* --- RESPONSIVO: REDMI 9 (<= 400px) --- */
@media (max-width: 400px) {
    .btn-volver-arriba {
        bottom: 15px;
        right: 15px;
        width: 42px;
        height: 42px;
    }
    /* Desactivación de hover en teléfonos para evitar bugs visuales tras pulsar */
    .btn-volver-arriba:hover {
        background-color: #151635 !important;
    }
    .btn-volver-arriba:hover .flecha-arriba {
        color: #ff3b30 !important;
    }
}


/*
/SECCION NOSOTROS
*/

/* ==========================================================================
           1. ESTILOS BASE Y VARIABLES CORPORATIVAS
           ========================================================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            background-color: #FFFDF9; /* Fondo Blanco Marfil unificado */
            color: #151635; /* Azul oscuro corporativo */
            line-height: 1.6;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        /* Seccion de introduccion con el Lema Institucional */
        .seccion-lema {
            text-align: center;
            margin-bottom: 60px;
            padding: 30px;
            background: rgba(21, 22, 53, 0.02);
            border-radius: 8px;
            border-left: 4px solid #ff3b30; /* Tu Rojo Corporativo */
        }

        .texto-lema {
            font-size: 1.35rem;
            color: #151635;
            font-weight: 600;
            font-style: italic;
            max-width: 900px;
            margin: 0 auto;
        }

        /* Contenedor en cuadrícula para Misión y Visión */
        .grid-institucional {
            display: flex;
            gap: 30px;
            justify-content: space-between;
        }

        .tarjeta-institucional {
            background-color: #ffffff;
            border: 1px solid #eeeeee;
            padding: 40px;
            border-radius: 12px;
            flex: 1;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
            transition: transform 0.3s ease;
        }

        .tarjeta-institucional:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
        }

        .titulo-seccion {
            color: #151635;
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* El Rojo Corporativo decorando el inicio del título */
        .titulo-seccion::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 24px;
            background-color: #ff3b30;
            border-radius: 4px;
        }

        /* Justificación perfecta siguiendo tus estándares */
        .parrafo-justificado {
            text-align: justify;
            text-justify: inter-word;
            color: rgba(21, 22, 53, 0.85);
            font-size: 1.05rem;
            -webkit-hyphens: auto;
            hyphens: auto;
        }

        /* ==========================================================================
           2. VISTA TABLET / CANAIMA (Media Query: <= 1024px)
           ========================================================================== */
        @media (max-width: 1024px) {
            .container {
                padding: 30px 15px;
            }

            .seccion-lema {
                margin-bottom: 40px;
                padding: 20px;
            }

            .texto-lema {
                font-size: 1.2rem;
            }

            .tarjeta-institucional {
                padding: 25px; /* Menor padding para ahorrar los 600px de alto de la Canaima */
            }

            .titulo-seccion {
                font-size: 1.5rem;
            }

            .parrafo-justificado {
                font-size: 0.95rem;
            }
        }

        /* ==========================================================================
           3. VISTA CELULAR / REDMI 9 (Media Query: <= 768px)
           ========================================================================== */
        @media (max-width: 768px) {
            /* Transformamos las dos columnas en una lista vertical fluida */
            .grid-institucional {
                flex-direction: column;
                gap: 20px;
            }

            .texto-lema {
                font-size: 1.1rem;
                text-align: justify; /* Cambia a justificado en móvil para evitar saltos raros */
            }

            .tarjeta-institucional {
                border-radius: 8px;
            }
        }



/*==========================================================================
/   ESTILOS CSS EXCLUSIVOS (Añade a tu hoja de estilos principal)
   ========================================================================== */

/* --- CONFIGURACIÓN BASE PARA ESCRITORIO Y CANAIMA --- */
.seccion-directiva {
    margin: 40px auto;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}

.titulo-principal-directiva {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #151635; /* Tu Azul Oscuro Corporativo */
    margin-bottom: 40px;
}

/* Cuadrícula Inteligente: Fuerza exactamente 2 tarjetas por línea */
.grid-directiva {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas exactas */
    gap: 40px 30px; /* 40px de espacio vertical, 30px horizontal */
}

/* Tarjeta estructurada verticalmente (Texto abajo de la foto) */
.tarjeta-directivo {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    padding: 35px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra la foto en el eje horizontal */
    text-align: center;  /* Centra encabezados; la reseña se justifica abajo */
    transition: all 0.3s ease;
}

.tarjeta-directivo:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border-color: rgba(21, 22, 53, 0.1);
}

/* Círculo contenedor de imagen (Estándar Inteligente) */
.foto-wrapper {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #FFFDF9; /* Tu blanco marfil de fondo */
    box-shadow: 0 4px 12px rgba(21, 22, 53, 0.12);
    margin-bottom: 20px; /* Separa la foto del nombre inferior */
    flex-shrink: 0;
}

.foto-directivo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la imagen perfectamente proporcionada en el círculo */
    display: block;
}

.contenido-directivo {
    width: 100%;
}

.nombre-directivo {
    font-size: 1.25rem;
    font-weight: 700;
    color: #151635;
    margin-bottom: 3px;
}

.cargo-directivo {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ff3b30; /* Tu Rojo Corporativo */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

/* Reseña Justificada y con guiones automáticos para lectura limpia */
.resena-directivo {
    text-align: justify;
    text-justify: inter-word;
    color: rgba(21, 22, 53, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* --- ADAPTACIÓN ADICIONAL PARA LA CANAIMA (Pantallas <= 1024px) --- */
@media (max-width: 1024px) {
    .titulo-principal-directiva { font-size: 1.7rem; }
    .grid-directiva { gap: 30px 20px; }
    .tarjeta-directivo { padding: 25px 20px; }
    .foto-wrapper { width: 120px; height: 120px; margin-bottom: 15px; }
    .nombre-directivo { font-size: 1.15rem; }
    .resena-directivo { font-size: 0.9rem; }
}

/* --- ADAPTACIÓN COMPLETA PARA EL REDMI 9 (Pantallas <= 768px) --- */
@media (max-width: 768px) {
    /* En celulares el espacio es estrecho; colapsa a 1 sola foto por línea */
    .grid-directiva {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .tarjeta-directivo {
        max-width: 450px;
        margin: 0 auto; /* Centra las tarjetas en la pantalla móvil */
        padding: 30px 20px;
    }
}


/*======================================================/
/--- SECCION DISCIPULADO --- --- SECCION DISCIPULADO ---/
/======================================================*/

/* --- VARIABLES DE COLOR Y FUENTES --- */
        :root {
            --primary-color: #1a365d; /* Azul institucional / teológico */
            --secondary-color: #744210; /* Dorado / Bronce ministerial */
            --text-color: #2d3748; /* Gris oscuro para lectura cómoda */
            --bg-light: #f7fafc; /* Fondo suave para la página */
            --bg-card: #ffffff; /* Fondo del contenedor principal */
            --quote-bg: #ebf8ff; /* Fondo del lema */
            --quote-border: #3182ce; /* Borde del lema */
        }

body:has(.seccion-introduccion) {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-color);
            line-height: 1.6;
            padding: 20px;
}

/* --- ESTILOS BASE (ESCRITORIO / DESKTOP) --- */
.seccion-introduccion {
    background-color: #FFFDF9; /* Tu Blanco Marfil base */
    padding: 60px 20px;
    width: 100%;
}

.contenedor-intro {
    max-width: 850px; /* Ancho óptimo para no fatigar la vista al leer textos largos */
    margin: 0 auto;
    text-align: center;
    padding: 40px;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.titulo-intro {
    color: #151635; /* Tu Azul Oscuro Corporativo */
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.contenido-texto {
    margin-bottom: 35px;
}

/* Justificación perfecta siguiendo tus lineamientos previos */
.parrafo-intro {
    text-align: justify;
    text-justify: inter-word;
    color: rgba(21, 22, 53, 0.85);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.parrafo-intro strong {
    color: #151635;
    font-weight: 700;
}

/* --- 2. ENCABEZADO DE LA PRESENTACIÓN --- */

        .header {
            text-align: center;
            border-bottom: 2px solid var(--secondary-color);
            padding-bottom: 20px;
            margin-bottom: 30px;
            /*border-bottom: 2px dashed var(--secondary-color);*/
        }

        .header h1 {
            color: var(--primary-color);
            /*color: #151635;*/
            font-size: 2.4rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }

        .header h2 {
            color: var(--secondary-color);
            /*color: #ff3b30; /* Tu Rojo Corporativo */
            font-size: 1.3rem;
            font-weight: 300;
            font-style: italic;
        }

/*--- 3. ELEMENTOS DE TEXTO Y TÍTULOS DE SECCIÓN ---*/

h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    /*color: #151635;*/
    margin-top: 35px;
    margin-bottom: 15px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Indicador decorativo rojo antes de cada h3 */
h3::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 20px;
    background-color: #ff3b30;
    border-radius: 3px;
}

/* Justificación tipográfica */
p {
   /* color: rgba(21, 22, 53, 0.85);
    text-align: justify;
    text-justify: inter-word;*/
    text-align: justify;
    margin-bottom: 20px;
    font-size: 1.05rem;
    -webkit-hyphens: auto;
    hyphens: auto;
}

strong {
    color: #151635;
    font-weight: 700;
}

/* --- LÍNEA DIVISORIA --- */
hr {
    border: none;
    height: 1px;
    /*background-color: #eeeeee;*/
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(116, 66, 16, 0.4), rgba(0, 0, 0, 0));
    margin: 40px 0;
}
       

/* --- SECCIÓN DEL LEMA (BLOQUE DE CITA) --- */
        blockquote {
            background-color: var(--quote-bg);
            border-left: 5px solid var(--quote-border);
            /*border-left: 4px solid #ff3b30; /* Borde Rojo Corporativo */
            padding: 20px;
            /*padding: 25px 30px;*/
            margin: 25px 0;
            border-radius: 0 8px 8px 0;
            font-style: italic;
        }

        blockquote p {
            color: var(--primary-color);
            /*color: #151635;*/
            font-size: 1.09rem;
            font-weight: 500;
            font-style: italic;
            margin-bottom: 0;
            line-height: 1.6;
            text-align: justify;
            text-justify: inter-word;
        }

/*--- 5. LISTADO DE PILARES REESTRUCTURADO ---*/
.pilares-list {
    list-style: none;
    padding: 0;
    margin: 25px 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pilares-list li {
    background-color: var(--bg-light);
    /*background-color: #FFFDF9; /* Fondo marfil sutil para los ítems */
    border: 1px solid #f1f3f5;
    border-left: 4px solid #151635; /* Tu Rojo Corporativo */
    padding: 20px 25px;
    border-radius: 8px;
    text-align: justify;
    font-size: 1rem;
    color: rgba(21, 22, 53, 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
    margin-bottom: 12px;
}

/* Resalta el título interno de cada pilar en su propia línea */
.pilares-list li strong {
    color: var(--primary-color);
    display: block;
    font-size: 1.15rem;
    color: #151635;
    margin-bottom: 4px;
}

/* Icono o viñeta estilizada antes del título del pilar */
.pilares-list li strong::before {
    content: "➔ ";
    color: #ff3b30;
    margin-right: 6px;
    font-family: monospace;
}

/*--- 6. RECUADRO LLAMADO A LA ACCIÓN FINAL ---*/

        /* --- LLAMADO A LA ACCIÓN FINAL --- */
        .footer-callout {
            background-color: var(--primary-color);
            /*background-color: #151635; /* Fondo Azul Oscuro Corporativo */
            color: #ffffff;
            text-align: center;
            padding: 20px;
            border-radius: 6px;
            margin-top: 35px;
            font-weight: bold;
            font-size: 1.25rem;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(21, 22, 53, 0.2);
        }

/* ==========================================================================
   7. ADAPTACIÓN VISTA CANAIMA (Media Query: <= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .container {
        margin: 20px auto;
        padding: 25px; /* Comprime el padding interno para la pantalla de 600px de alto */
    }

    .header { margin-bottom: 30px; }
    .header h1 { font-size: 1.95rem; }
    .header h2 { font-size: 1.15rem; }

    h3 { font-size: 1.3rem; margin-top: 25px; }
    p { font-size: 0.98rem; }
    
    blockquote { padding: 20px; margin: 20px 0; }
    blockquote p { font-size: 1.05rem; }

    .pilares-list li { padding: 15px 20px; }
    .pilares-list li strong { font-size: 1.08rem; }
    
    hr { margin: 25px 0; }
    .footer-callout { font-size: 1.15rem; padding: 20px; margin-top: 30px; }
}


/* ==========================================================================
   8. ADAPTACIÓN VISTA REDMI 9 (Media Query: <= 400px)
   ========================================================================== */
@media (max-width: 400px) {
    .container {
        padding: 15px 12px;
        border-radius: 0; /* Ocupa todo el ancho líquido de la pantalla móvil */
        border: none;
        margin: 0;
    }

    .header h1 { font-size: 1.55rem; }
    .header h2 { font-size: 1rem; }

    h3 { font-size: 1.15rem; }
    p { font-size: 0.95rem; }

    blockquote { padding: 15px; border-left-width: 3px; }
    blockquote p { font-size: 0.98rem; }

    .pilares-list { gap: 15px; }
    .pilares-list li { padding: 15px; }
    .pilares-list li strong { font-size: 1.02rem; }

    .footer-callout { font-size: 1.05rem; padding: 18px; }
}

/* ===========================================================/
/--- ESTILOS AREA MINISTERIO ---  ESTILOS AREA MINISTERIO --- /
/============================================================*/

/* --- CONFIGURACIÓN BASE (ESCRITORIO) --- */
.seccion-intro-ministerio {
    background-color: #FFFDF9; /* Fondo Blanco Marfil corporativo */
    padding: 60px 20px;
    width: 100%;
}

/* --- CONTENEDOR PRINCIPAL --- */
        .container__2 {
            max-width: 800px;
            margin: 40px auto;
            background-color: var(--bg-card);
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
        }

.etiqueta-corporativa {
    color: #ff3b30; /* Tu Rojo Corporativo */
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 12px;
}

.linea-decorativa {
    width: 70px;
    height: 4px;
    background-color: #151635;
    margin: 25px auto;
    border-radius: 2px;
}

/* Recuadro de Cita / Lema Destacado */
.llamado-lema {
    background-color: rgba(21, 22, 53, 0.02);
    border-left: 4px solid #ff3b30;
    padding: 20px;
    font-size: 1.15rem;
    font-weight: 600;
    font-style: italic;
    color: #151635;
    border-radius: 0 8px 8px 0;
    text-align: center;
    margin-top: 30px;
}

/* --- ADAPTACIÓN ADICIONAL PARA LA CANAIMA (Pantallas <= 1024px) --- */
@media (max-width: 1024px) {
    .seccion-intro-ministerio {
        padding: 40px 15px; /* Comprime el padding vertical para optimizar los 600px de alto */
    }
    
    .titulo-ministerio { font-size: 2rem; }
    .linea-decorativa { margin: 15px auto; }
    .parrafo-ministerio { font-size: 1rem; line-height: 1.6; }
    .llamado-lema { font-size: 1.05rem; padding: 15px; }
}

/* --- ADAPTACIÓN COMPLETA PARA EL REDMI 9 (Pantallas <= 400px) --- */
@media (max-width: 400px) {
    .titulo-ministerio { font-size: 1.5rem; }
    .etiqueta-corporativa { font-size: 0.8rem; letter-spacing: 1px; }
    
    .parrafo-ministerio {
        font-size: 0.95rem;
        text-align: justify; /* Evita espacios irregulares toscos */
    }
    
    .llamado-lema {
        font-size: 0.95rem;
        padding: 12px;
        text-align: justify; /* Mejor lectura vertical en smartphones */
    }

/*=================================================/
/--- SECCION DE FAMILIA --- SECCION DE FAMILIA --- /
/=================================================*/

/*.seccion-intro-familia,
.seccion-intro-familia * {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}*/

/*--- BOTÓN LLAMATIVO DE ALTA CONVERSIÓN ---*/
.zona-boton-accion {
    text-align: center !important;
    margin-top: 40px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    display: block !important;
}

/*.btn-llamativo-familia {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background-color: #ff3b30 !important; /* Rojo base */
  /*  color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 16px 40px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3) !important;
    cursor: pointer !important;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}*/

/*.btn-llamativo-familia .icono-flecha {
    font-style: normal !important;
    font-family: monospace, sans-serif !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    display: inline-block !important;
    transition: transform 0.2s ease !important;
}*/

/* Botón estilizado acorde a tu paleta (Azul que pasa a Rojo) */
.btn-llamativo-familia {
    display: inline-block;
    background-color: #151635;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 35px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(21, 22, 53, 0.2);
    transition: all 0.3s ease;
}

.btn-llamativo-familia:hover {
    background-color: #ff3b30;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 59, 48, 0.3);
}

/* Interactividad exclusiva en Computadoras */
@media (min-width: 1025px) {
    .btn-llamativo-familia:hover {
        background-color: #151635 !important; /* Cambia a tu Azul Oscuro */
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 24px rgba(21, 22, 53, 0.35) !important;
    }

    .btn-llamativo-familia:hover .icono-flecha {
        transform: translateX(4px) !important;
    }
}

/* ==========================================================================
   5. ADAPTACIÓN PARA LA CANAIMA (Pantallas <= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .seccion-intro-familia { 
        padding: 40px 15px !important; /* Reduce altura para los 600px de la Canaima */
    }
    .titulo-familia { 
        font-size: 2rem !important; 
    }
    .linea-decorativa { 
        margin: 15px auto !important; 
    }
    .parrafo-familia { 
        font-size: 1rem !important; 
        line-height: 1.65 !important; 
    }
    .llamado-lema { 
        font-size: 1.05rem !important; 
        padding: 15px !important; 
    }
    .zona-boton-accion { 
        margin-top: 30px !important; 
    }
    .btn-llamativo-familia { 
        padding: 14px 35px !important; 
        font-size: 1rem !important; 
    }
}

/* ==========================================================================
   6. ADAPTACIÓN PARA EL REDMI 9 (Pantallas <= 768px y móviles)
   ========================================================================== */
@media (max-width: 768px) {
    .titulo-familia { 
        font-size: 1.65rem !important; 
    }
    .etiqueta-corporativa { 
        font-size: 0.8rem !important; 
        letter-spacing: 1px !important; 
    }
    .parrafo-familia { 
        font-size: 0.98rem !important; 
        text-align: justify !important; 
    }
    .llamado-lema { 
        font-size: 0.98rem !important; 
        padding: 15px !important; 
        text-align: justify !important; 
    }
    
    .zona-boton-accion { 
        margin-top: 25px !important; 
        padding: 0 5px !important; 
    }
    
    /* El botón ocupa el ancho completo para evitar errores de clic con el pulgar */
    .btn-llamativo-familia { 
        display: flex !important; 
        width: 100% !important; 
        padding: 16px 20px !important; 
        font-size: 1.05rem !important; 
    }
    
    /* Anula los efectos hover tridimensionales que rompen la fluidez táctil en el Redmi 9 */
    .btn-llamativo-familia:hover {
        transform: none !important;
        background-color: #ff3b30 !important; /* Mantiene el rojo fijo */
        box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3) !important;
    }
    .btn-llamativo-familia:hover .icono-flecha { 
        transform: none !important; 
    }


/*================================================================/
/--- SECCION DE ESTUDIOS GLOBAL --- SECCION DE ESTUDIOS GLOBAL ---/
/================================================================*/

/* ==========================================================================
   1. VARIABLES DE COLOR CORPORATIVAS Y CONFIGURACIÓN RAÍZ
   ========================================================================== */
:root {
    --primary-color: #151635;      /* Tu Azul Oscuro Corporativo */
    --secondary-color: #ff3b30;    /* Tu Rojo Corporativo */
    --text-color: rgba(21, 22, 53, 0.85); 
    --bg-light: #FFFDF9;           /* Fondo general Blanco Marfil */
    --bg-card: #ffffff;            /* Fondo blanco puro para tarjetas */
}

/* --- RESETEO LOCAL E INMUNIDAD DE CASCADA (Evita colisiones externas) --- */
.seccion-estudios-global,
.seccion-estudios-global * {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    background-color: var(--bg-light);
    color: var(--primary-color);
    line-height: 1.7;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ==========================================================================
   3. PRESENTACIÓN INTRODUCTORIA DE ESTUDIOS
   ========================================================================== */
.seccion-estudios {
    background-color: var(--bg-light) !important;
    padding: 60px 20px !important;
    width: 100% !important;
    display: block !important;
}

.contenedor-estudios {
    max-width: 1100px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.etiqueta-estudios {
    color: var(--secondary-color) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: block !important;
    margin-bottom: 12px !important;
}

.titulo-estudios {
    color: var(--primary-color) !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 20px !important;
}

.resalto-rojo { 
    color: var(--secondary-color) !important; 
}

.linea-division {
    width: 70px !important;
    height: 4px !important;
    background-color: var(--primary-color) !important;
    margin: 25px auto !important;
    border-radius: 2px !important;
    display: block !important;
}

.introduccion-texto-estudios {
    max-width: 850px !important;
    margin: 0 auto 50px auto !important;
    display: block !important;
}

.parrafo-estudios {
    text-align: justify !important;
    text-justify: inter-word !important;
    color: var(--text-color) !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    margin-bottom: 20px !important;
    word-wrap: break-word !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
}

.parrafo-estudios strong {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   4. CUADRÍCULA DE 3 COLUMNAS PARA LAS TARJETAS ACADÉMICAS
   ========================================================================== */
.grid-areas-estudio {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 elementos por línea */
    gap: 30px !important;
    width: 100% !important;
}

.tarjeta-area-estudio {
    background-color: var(--bg-card) !important;
    border: 1px solid #eeeeee !important;
    padding: 30px 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

.tarjeta-area-estudio:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 24px rgba(21, 22, 53, 0.06) !important;
    border-color: rgba(21, 22, 53, 0.1) !important;
}

.icono-area-estudio {
    font-size: 2.2rem !important;
    margin-bottom: 15px !important;
    display: block !important;
}

.nombre-area-estudio {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin-bottom: 8px !important;
}

.descripcion-area-estudio {
    text-align: justify !important;
    text-justify: inter-word !important;
    font-size: 0.93rem !important;
    line-height: 1.5 !important;
    color: rgba(21, 22, 53, 0.75) !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
}

/* ==========================================================================
   5. BOTÓN FLOTANTE SCROLL TO TOP (UNIVERSAL)
   ========================================================================== */
.btn-volver-arriba {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999999 !important;
    background-color: var(--primary-color) !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.7); 
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.3s, 
                transform 0.3s, 
                background-color 0.2s;
}

.btn-volver-arriba .flecha-arriba {
    color: var(--secondary-color) !important;
    font-size: 1.1rem;
    line-height: 1;
}

.btn-volver-arriba.mostrar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

.btn-volver-arriba:hover { 
    background-color: var(--secondary-color) !important; 
}
.btn-volver-arriba:hover .flecha-arriba { 
    color: #ffffff !important; 
}

/* ==========================================================================
   6. ADAPTACIÓN PARA LA CANAIMA (Pantallas <= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .seccion-estudios-global { padding: 40px 15px !important; }
    .titulo-estudios { font-size: 2rem !important; }
    .introduccion-texto-estudios { margin-bottom: 35px !important; }
    .parrafo-estudios { font-size: 1rem !important; line-height: 1.65 !important; }
    .titulo-brand-cursivo { font-size: 1.6rem; padding-left: 10px; }
    #menuSecundario .nav-link { font-size: 1.05rem !important; padding: 8px 12px !important; }
    
    /* Pasa la cuadrícula de 3 columnas a 2 columnas para pantallas compactas */
    .grid-areas-estudio { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 20px !important; 
    }
    .tarjeta-area-estudio { padding: 25px 20px !important; }
    .nombre-area-estudio { font-size: 1.15rem !important; }
    .descripcion-area-estudio { font-size: 0.88rem !important; }
    
    .btn-volver-arriba { bottom: 20px; right: 20px; width: 45px; height: 45px; }
}

/* ==========================================================================
   7. ADAPTACIÓN PARA EL REDMI 9 (Pantallas <= 768px y smartphones)
   ========================================================================== */
@media (max-width: 768px) {
    .titulo-estudios { font-size: 1.65rem !important; }
    .etiqueta-estudios { font-size: 0.8rem !important; letter-spacing: 1px !important; }
    .parrafo-estudios { font-size: 0.98rem !important; }
    
    #menuSecundario .nav-link {
        font-size: 1.1rem !important;
        padding: 12px 15px !important;
        border-bottom: 1px solid #f1f3f5 !important; 
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    /* Colapso total a 1 sola columna vertical ergonómica para el pulgar */
    .grid-areas-estudio { 
        grid-template-columns: 1fr !important; 
        gap: 20px !important; 
    }
    .tarjeta-area-estudio { 
        max-width: 400px !important; 
        margin: 0 auto !important; 
        width: 100% !important; 
    }
    
    .btn-volver-arriba { bottom: 15px; right: 15px; width: 42px; height: 42px; }
    .btn-volver-arriba:hover { background-color: var(--primary-color) !important; }
    .btn-volver-arriba:hover .flecha-arriba { color: var(--secondary-color) !important; }
}

@media (max-width: 400px) {
    .titulo-brand-cursivo { font-size: 1.2rem; padding-left: 8px; }
}