/* Acordeón personalizado para Plan de Estudios */
    .accordion-button.active-semester {
        background-color: var(--color-secondary) !important;
        color: #fff !important;
    }

    .accordion-button.bg-transparent {
        background-color: transparent !important;
        color: var(--color-title) !important;
    }

    .accordion-button .material-symbols-outlined.rotate-180 {
        transform: rotate(180deg);
        transition: transform 0.2s;
    }

    /* Acordeón personalizado para Plan de Estudios */
    .accordion-button.\!text-white {
        color: #fff !important;
    }

    .accordion-button.\!bg-primary {
        background-color: var(--color-primary) !important;
    }

    .accordion-button .material-symbols-outlined.rotate-180 {
        transform: rotate(180deg);
        transition: transform 0.2s;
    }

    /* <!-- Aquí se define CSS personalizado, incluyendo variables CSS como --color-primary (#ff9304) y reglas específicas como .scroll-snap-container. Comentario: Esta es la primera sección que moveremos a un archivo CSS externo. --> */

    :root {
        --color-primary: #079d5a;
        --color-secondary: #063c88;
        /* --color-primary: #afeb00;
        --color-secondary: #190f6e;    */
        --color-background: #fff;
        --color-background-light: #f8fafc;
        --color-text-primary: #fff;
        --color-text-secondary: #767676;
        --color-text-dark: #f0f0f0;
        --color-title: #333333;
        --color-card-border-1: var(--color-primary);
        --color-card-border-2: #118ab2;
        --color-card-border-3: #06d6a0;
        --color-card-border-4: #ffd166;
        --color-card-border-5: #ef476f;
        --color-card-border-6: var(--color-secondary);
        --color-testimonial-bg: #f8f9fa;
        --color-testimonial-text: #212529;
        --color-testimonial-name: var(--color-secondary);
        --dark-color-testimonial-bg: var(--accent-dark);
        --dark-color-testimonial-text: #e9ecef;
        --dark-color-testimonial-name: var(--color-primary);
        --why-us-icon-bg: #e5e5e5;
        --dark-why-us-icon-bg: #3a3a3a;
        --color-whatsapp: #25D366;

    }

    .scroll-snap-container {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }

    /* Estilos para indicadores del carrusel hero */
    .slide-indicator {
        transition: all 0.3s ease !important;
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-sizing: border-box;
    }

    .slide-indicator.active {
        width: 1rem;
        height: 1rem;
        background-color: white !important;
        border-color: white;
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    }

    .slide-indicator:not(.active) {
        background-color: rgba(255, 255, 255, 0.4) !important;
        border-color: rgba(255, 255, 255, 0.3);
    }

    /* Sección: galería ancha responsiva
       - Usa `gallery-wide` en el contenedor de la galería para permitir que
         ocupe más ancho que el viewport y siga centrada.
    */
    .gallery-wide {
        width: clamp(100vw, calc(100% + 8rem), 140vw);
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 1rem;
        padding-right: 1rem;
        position: relative;
    }

    .scroll-snap-item {
        scroll-snap-align: start;
    }

    .why-us-icon {
        background-color: #ffffff;
        color: var(--color-secondary);
    }

    .dark .why-us-icon {
        background-color: #ffffff;
        color: var(--color-primary);
    }

    .why-us-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .why-us-card-body {
        flex-grow: 1;
        min-height: 5rem;
    }

    .why-us-card-footer {
        margin-top: auto;
    }

    .testimonial-card {
        background-color: var(--color-testimonial-bg);
        border-left: 5px solid var(--color-primary);
    }

    .dark .testimonial-card {
        background-color: var(--dark-color-testimonial-bg);
        border-left-color: var(--color-primary);
    }

    /* Testimonial border color alternates */
    .testimonial-border-3 {
        border-left-color: var(--color-card-border-3) !important;
    }

    .testimonial-border-4 {
        border-left-color: var(--color-card-border-4) !important;
    }

    .testimonial-border-5 {
        border-left-color: var(--color-card-border-5) !important;
    }

    .testimonial-border-6 {
        border-left-color: var(--color-card-border-6) !important;
    }

    .accordion-button:not(.collapsed) {
        color: var(--color-primary);
        background-color: var(--color-secondary);
    }

    .accordion-button:not(.collapsed) .material-symbols-outlined {
        transform: rotate(180deg);
    }

    .faq-bg {
        background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1557821552-17105176677c?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
        background-size: cover;
        background-position: center;
    }

    /* Fondos carrousel*/
    .hero-bg-iprl {
        background-image: url('../assets/img/hero-bg-iprl.webp');
        background-size: cover;
        background-position: center;
    }

    .hero-bg-sh {
        background-image: url('../assets/img/hero-bg-sh.png');
        background-size: cover;
        background-position: center;
    }

    .hero-bg-msa {
        background-image: url('../assets/img/hero-bg-maestria-seguridad-ambiente.png');
        background-size: cover;
        background-position: center;
    }

    .hero-bg-ergo {
        background-image: url('../assets/img/hero-bg-maestria-especialidad-ergonomia.png');
        background-size: cover;
        background-position: center;
    }

    .hero-bg-diplomado-si {
        background-image: url('../assets/img/hero-bg-diplomado-seguridad-industrial.png');
        background-size: cover;
        background-position: center;
    }

    .hero-bg-diplomado-ergo {
        background-image: url('../assets/img/hero-bg-diplomado-ergonomia-cargas.png');
        background-size: cover;
        background-position: center;
    }

    .hero-bg-library {
        background-image: url('../assets/img/hero-bg-library.png');
        background-size: cover;
        background-position: center;
    }

    .hero-bg-contact {
        background-image: url('../assets/img/hero-bg-contact.png');
        background-size: cover;
        background-position: center;
    }

    .hero-bg-online {
        background-image: url('../assets/img/hero-bg-online.webp');
        background-size: cover;
        background-position: center;
    }


    /* Estilos para dropdown con CSS puro */
    .dropdown-group:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Menú móvil con checkbox hack */
    #mobile-menu-toggle:checked~.mobile-menu {
        display: block;
    }

    /* Para escritorio: siempre visible */
    @media (min-width: 768px) {
        .mobile-menu {
            display: flex !important;
        }

        /* Mejoras para dropdown en desktop */
        .group:hover .group-hover\:opacity-100 {
            opacity: 1 !important;
        }

        .group:hover .group-hover\:visible {
            visibility: visible !important;
        }

        .group:hover .group-hover\:translate-y-0 {
            transform: translateY(0) !important;
        }
    }

    /* Transiciones suaves */
    .dropdown-menu {
        transition: all 0.2s ease-in-out;
    }

    /* Asegurar que el dropdown esté por encima de todo */
    .relative.group .absolute {
        z-index: 50;
    }

    /* Color classes for carousel slide elements */
    .text-color-1 {
        color: var(--color-card-border-1) !important;
    }

    .text-color-2 {
        color: var(--color-card-border-2) !important;
    }

    .text-color-3 {
        color: var(--color-card-border-3) !important;
    }

    .text-color-4 {
        color: var(--color-card-border-4) !important;
    }

    .text-color-5 {
        color: var(--color-card-border-5) !important;
    }

    .text-color-6 {
        color: var(--color-card-border-6) !important;
    }

    /* Card Hover Effect - Elevación y aumento de sombra */
    .card-hover {
        display: block;
        text-decoration: none;
        color: inherit;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    }

    .dark .card-hover:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    }

    /* Icon colors alternating with card border colors */
    .icon-border-1 {
        color: var(--color-card-border-1) !important;
    }

    .icon-border-2 {
        color: var(--color-card-border-2) !important;
    }

    .icon-border-3 {
        color: var(--color-card-border-3) !important;
    }

    .icon-border-4 {
        color: var(--color-card-border-4) !important;
    }

    .icon-border-5 {
        color: var(--color-card-border-5) !important;
    }

    .icon-border-6 {
        color: var(--color-card-border-6) !important;
    }