/* Fuente Inter para una apariencia moderna y legible */
    body {
        font-family: 'Inter', sans-serif;
        transition: background-color 0.3s ease-in-out;
        scroll-behavior: smooth;
        background-color: #FDFDFD; /* Fondo principal */
        color: #4A5568; /* Texto principal */
        padding-top: 112px; /* Ajustado para el header fijo */
        overflow-x: hidden; /* Evita el desbordamiento horizontal */
    }

    /* Colores pasteles personalizados */
    :root {
        --primary-pastel: #659383; /* Verde azulado principal */
        --accent-soft: #507A6B; /* Acento suave */
        --accent-light: #B0D9C8; /* Acento claro */
        --bg-page: #FDFDFD; /* Fondo de página */
        --bg-content: #F5F5F5; /* Fondo de contenido */
        --text-dark: #4A5568; /* Texto oscuro */
        --highlight-yellow: #FFD700; /* Amarillo para resaltar (hover) */
        --light-green-pastel: #E0F2F0; /* Verde pastel muy claro */
        --lighter-pastel: #e6f7f3; /* Un pastel aún más claro para hover de tarjetas */
        --grey-banner-bg: #CCCCCC; /* Nuevo color plomo para el fondo del banner */
    }

    .bg-primary-pastel { background-color: var(--primary-pastel); }
    .text-primary-pastel { color: var(--primary-pastel); }
    .bg-accent-soft { background-color: var(--accent-soft); }
    .bg-accent-light { background-color: var(--accent-light); }
    .bg-bg-page { background-color: var(--bg-page); }
    .bg-bg-content { background-color: var(--bg-content); }
    .text-text-dark { color: var(--text-dark); }
    .text-highlight-yellow { color: var(--highlight-yellow); }
    .bg-light-green-pastel { background-color: var(--light-green-pastel); }
    .bg-lighter-pastel { background-color: var(--lighter-pastel); }
    .bg-grey-banner { background-color: var(--grey-banner-bg); } /* Clase para el fondo plomo del banner */

    /* Gradiente sutil para el encabezado */
    .header-gradient {
        background-image: linear-gradient(to right, var(--primary-pastel), var(--accent-light));
        transition: background-image 0.5s ease-in-out;
    }

    /* Efecto de sombra y transición para las tarjetas y otros elementos interactivos */
    .card-effect {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
    }
    .card-effect:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 15px 30px rgba(245, 245, 245, 0.15);
        background-color: #B0D9C8;

        .card-body{
            color: #f1f1f1;            
        }
    }

    .perfil{
        border-radius: 40px;
        width: 80px;
    }
    
    .neg{
        font-weight: bold;
    }

    div .col{
        margin-bottom: 10px;
    }
    .noti_img{
        border-radius: 10px;
        width: 100%;
    }
    .hiper_conv{
        text-decoration: none;
        color: #212529;
        text-align: center;
    }
    /* ########### banner de la página*/ 
    /* MENOR A 768 #######>*/

    /* Animación de carga para el contenido principal */
    @keyframes fadeInScale {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }
    .animate-fade-in-scale {
        animation: fadeInScale 0.6s ease-out forwards;
    }

    /* Estilo para el botón de desplazamiento suave */
    .scroll-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: var(--primary-pastel);
        color: white;
        padding: 10px 15px;
        border-radius: 50%;
        font-size: 1.5rem;
        line-height: 1;
        /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */ /* Se eliminó el box-shadow */
        transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        cursor: pointer;
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
    }
    .scroll-to-top.show {
        opacity: 1;
        pointer-events: auto;
    }
    .scroll-to-top:hover {
        background-color: var(--accent-soft);
        transform: translateY(-3px);
    }

    /* Estilos para el efecto de aparecer al desplazarse */
    .hidden-on-scroll {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    }
    .visible-on-scroll {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Efecto de enfoque para los inputs del formulario */
    input:focus, textarea:focus {
        outline: none;
        border-color: var(--primary-pastel);
        box-shadow: 0 0 0 0.25rem rgba(101, 147, 131, 0.25);
    }

    /* Estilos para la ventana modal de la galería */
    .modal-gallery .modal-dialog {
        max-width: 90vw; /* Permite modales más anchos para imágenes */
        height: 90vh; /* Hace el modal lo suficientemente alto */
        display: flex; /* Usa flex para centrar el diálogo */
        align-items: center;
        justify-content: center;
        margin: auto; /* Centra el modal */
    }
    .modal-gallery .modal-content {
        height: 100%; /* El contenido llena la altura del diálogo */
        display: flex;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.8); /* Fondo semitransparente oscuro */
        border: none;
    }
    .modal-gallery .modal-body {
        flex-grow: 1; /* Permite que el cuerpo ocupe el espacio disponible */
        display: flex; /* Mantiene flex para centrar el hijo directo */
        justify-content: center;
        align-items: center;
        padding: 0;
        overflow: hidden; /* Oculta el desbordamiento si la imagen es ligeramente más grande */
        min-height: 100px; /* Altura mínima para imágenes pequeñas */
        max-height: 85vh; /* Altura máxima para evitar desbordamiento en pantallas pequeñas */
    }
    .modal-gallery #galleryCarousel {
        height: 100%;
        width: 100%;
    } 
    .modal-gallery .carousel-inner {
        height: 100%; /* Asegura que el carrusel interno ocupe toda la altura */
    }
    .modal-gallery .carousel-item {
        height: 100%; /* Cada elemento ocupa toda la altura */
        /* No se usa display: flex aquí para evitar conflictos con el posicionamiento de Bootstrap */
        /* Bootstrap ya maneja el posicionamiento de los elementos activos/inactivos */
    }
    .modal-gallery .carousel-item img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block; /* Asegura que la imagen se comporte como un elemento de bloque */
        margin: auto; /* Centra la imagen dentro del elemento del carrusel */
        animation: zoomIn 0.3s ease-out forwards;
    }
    .modal-gallery .modal-footer {
        background-color: rgba(0, 0, 0, 0.8);
        border-top: none;
        color: #ccc;
        text-align: center;
        justify-content: center;
    }
    .modal-gallery .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%); /* Hace el icono blanco */
        opacity: 1;
    }
    .modal-gallery .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    }
    .modal-gallery .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }

    /* Animaciones para el modal */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes zoomIn {
        from { transform: scale(0.8); }
        to { transform: scale(1); }
    }

    /* Estilos para los botones de filtro de la galería */
    .filter-btn {
        background-color: #e2e8f0; /* gray-200 */
        color: #4a5568; /* gray-700 */
        padding: 0.5rem 1rem;
        border-radius: 9999px; /* rounded-full */
        font-weight: 600; /* font-semibold */
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        border: none; /* Eliminar el borde */
    }
    .filter-btn:hover {
        background-color: var(--accent-light);
        color: #2d3748; /* gray-900 */
    }
    .filter-btn.active {
        background-color: var(--primary-pastel);
        color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* Nuevo estilo para la imagen en la sección "Sobre Nosotros" */
    .about-us-image {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    .about-us-image:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    /* Animación de desvanecimiento de derecha a izquierda para párrafos */
    @keyframes slideInFromRight {
        from { opacity: 0; transform: translateX(50px); }
        to { opacity: 1; transform: translateX(0); }
    }
    .slide-in-rtl-initial {
        opacity: 0;
        transform: translateX(50px);
    }
    .slide-in-rtl-animate {
        animation: slideInFromRight 0.8s ease-out forwards;
    }

    /* Nuevo estilo para el texto de la sección "Sobre Nosotros" al pasar el puntero */
    .about-us-text-hover {
        transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
    }
    .about-us-text-hover:hover {
        color: var(--primary-pastel);
        transform: translateX(5px);
    }

    /* Estilo para el título y mensaje de bienvenida en el encabezado al pasar el puntero */
    .header-title-hover {
        transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
    }
    .header-title-hover:hover {
        color: var(--accent-light);
        transform: scale(1.02);
    }

    /* Nuevo estilo para el título y párrafos de la sección de bienvenida al pasar el puntero */
    .welcome-text-hover {
        transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
    }
    .welcome-text-hover:hover {
        color: var(--accent-soft);
        transform: translateY(-3px);
    }


    /* Aumentar la separación entre secciones */
    main section {
        margin-bottom: 0px; /* 48px (3rem de mb-5) + 30px adicionales */
        padding: 0 10%;
    }

    /* Asegurar que la última sección no tenga un margen inferior excesivo */
    main section:last-of-type {
        margin-bottom: 0;
    }

    /* Estilos para el scrollbar */
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track {
        background: var(--primary-pastel);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--accent-light); /* Color del scrollbar */
        border-radius: 10px;
        transition: background 0.3s ease-in-out;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--accent-soft); /* Color al pasar el ratón */
    }

    /* Estilos para el mapa de Google */
    .google-map-container {
        position: relative;
        padding-bottom: 50%; /* Ajustado para que el mapa sea más alto */
        height: 0;
        overflow: hidden;
        border-radius: 0.5rem; /* rounded-lg */
        margin-top: 1rem; /* Ajuste de margen */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
    }

    .google-map-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* Estilo para la línea dorada debajo del menú seleccionado */
    .navbar-nav .nav-link {
        position: relative;
        overflow: hidden; /* Asegura que la línea no se desborde */
    }

    .navbar-nav .nav-link::after {
        content: '';
            position: absolute;
            bottom: 0;
            left: 50%; /* Centra la línea */
            transform: translateX(-50%); /* Ajusta para centrar la línea */
            width: 0; /* Ancho inicial 0 */
            height: 4px; /* Grosor de la línea */
            background-color: var(--highlight-yellow); /* Color dorado */
            transition: width 0.3s ease-in-out; /* Transición para el ancho */
    }

    .navbar-nav .nav-link.active-underline::after {
        width: 100%; /* Ancho completo al estar activo */
    }

    /* Estilos adicionales para los íconos de redes sociales */
    .social-icons a {
        color: inherit; /* Hereda el color del texto del padre */
        margin-left: 0.5rem; /* Espacio entre íconos */
        transition: color 0.3s ease-in-out;
    }

    .social-icons a:hover {
        color: var(--highlight-yellow); /* Cambia de color al pasar el ratón */
    }

    /* Estilos para el nuevo footer de 3 columnas */
    .footer-column h5 {
        color: var(--accent-light); /* Color para los títulos de columna */
        margin-bottom: 1rem;
        font-weight: bold;
    }

    .footer-column p, .footer-column a {
        color: white; /* Color del texto para el footer */
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 0.5rem;
    }

    .footer-column a:hover {
        color: var(--highlight-yellow); /* Color al pasar el ratón en enlaces del footer */
        text-decoration: none;
    }

    .footer-bottom-bar {
        background-color: var(--accent-soft); /* Un tono ligeramente más oscuro para la barra inferior */
        color: white;
        padding: 0.75rem 0;
        font-size: 0.85rem;
    }

    #marq {             
        color: #FFD700;
        font-style: italic;
        overflow: hidden;
        vertical-align: auto;
        white-space: nowrap;
    }
    #orig {
        display: inline-block; 
        transform: translatex(0); 
        animation: marquesina 35s infinite normal linear 1s; 
    }
    /*#copia{
    background-color: lime; 
    }*/
    @keyframes marquesina {
        0% {transform: translatex(0); }
        100% {transform: translatex(-50%); }
    }

    .btn-admin{        
        background-color: var(--primary-pastel) !important;
        color: #fff;
        margin-bottom: 10px;
        text-decoration: none;
        width:100%;
    }
   .btn-admin :hover{      
        color: goldenrod;
        text-decoration: none;
        transition: 1s;
    }
    .btn-admin a{        
        color: #fff;
        text-decoration: none;
    }

    .btn-admin-pnp{        
        background-color: #8caea2 !important;
        color: #3f5c52;
        margin-bottom: 10px;
        text-decoration: none;
        width:100%;
    }
    .btn-admin-pnp :hover{                
        color: goldenrod;
        text-decoration: none;
        transition: 1s;
    }
    .btn-admin-pnp a{        
        color: #3f5c52;
        text-decoration: none;
    }

    .btn-admin-fam{        
        background-color: #c5d7d1 !important;
        color: #3f5c52;
        margin-bottom: 10px;
        text-decoration: none;
        width:100%;
    }
    .btn-admin-fam :hover{                
        color: goldenrod;
        text-decoration: none;
        transition: 1s;
    }    
    .btn-admin-fam a{        
        color: #3f5c52;
        text-decoration: none;
    }
    
    .btn-admin-ac{        
        background-color: #d8e4e0 !important;
        color: #3f5c52;
        margin-bottom: 10px;
        text-decoration: none;
        width:100%;
    }
    .btn-admin-ac :hover{                
        color: goldenrod;
        text-decoration: none;
        transition: 1s;
    }    
    .btn-admin-ac a{        
        color: #3f5c52;
        text-decoration: none;
    }

    .img-admin{
        border-radius: 30px 30px 50px 50px;
        padding-top: 10px;
        width: 100%;
    }
    .img-admin2{
        border-radius: 20px 0px 70px 0px;
        
        width: 100%;
    }

    .panel{     
    /* background-color: #fff;*/
    border: 1px solid transparent;
    background-image: linear-gradient(#659383, #659383),
                    linear-gradient(#659383, #659383),
                    linear-gradient(#659383, #659383),
                    linear-gradient(#659383, #659383);           
    background-repeat: no-repeat;
    background-size: 20px 48%, 35% 20px, 0px 18%, 15% 10px, calc(100% - 8px) calc(100% - 8px);
    background-position: right top, right top, 4px;
   /*  padding: 10px; */
    height: auto;
    }
    .inside{
    margin:10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-color: transparent;
    }
        

/* ################### CARRUSEL EN INDEX ############*/

    iframe{
        height: 300px;
    }

    .sinformato{
        text-decoration: none;
    }