@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
    --main-color: #2033b9;
    --second-color: #00c1cf;
    --thirt-color: #02024b;
    --fourty-color: #e5e5e5;
    --yellow: #ffc813;
    --orange: #ec6608;
    --green: #23c932;
    --blue: #1d71b8;
    --red: #ff3333;
}

html, body {
    height: 100%;
    margin: 0;
}

main {
    flex: 1;
}


body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--fourty-color);
    height: 100%;
    margin: 0;
}

/*Background*/
.bg-uncuyo-blue {
    background-color: var(--main-color);
}

.bg-uncuyo-grey {
    background-color: var(--fourty-color);
}

.bg-uncuyo-grey-light {
    background-color: #fafafa;

    box-shadow: 0 2rem 3rem rgba(0, 0, 0, .55),
    0 1rem 1.5rem rgba(0, 0, 0, .4);

    animation: slideIn .45s ease-out,
    pulse 1.5s ease-in-out infinite;

    animation-fill-mode: both;
}


.bg-uncuyo-dark-blue {
    background-color: var(--thirt-color);
}

.bg-blanco {
    background-color: white;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.bg-blanco1 {
    background-color: white;
}

.bg-blue-50 {
    background-color: var(--blue);
}

/*Botones*/

.btn-blue {
    background-color: var(--main-color);
}

.btn-blue:hover {
    background-color: var(--thirt-color);
}

.btn-borde-azul {
    border: 1px solid #02024b;
    color: var(--thirt-color);
}

.btn-borde-azul:hover {
    color: var(--main-color);
    border: 1px solid #2033b9;
}

.btn-borde-azul-oscuro {
    border: 1px solid #02024b;
    color: var(--fourty-color);
    background-color: var(--thirt-color) !important;
}

.btn-borde-azul-oscuro:hover {
    color: var(--fourty-color);
    border: 1px solid #2033b9;
    background-color: var(--main-color) !important;
}

.btn-borde-blanco {
    border: 1px solid #fff;
    color: var(--fourty-color);
}

.btn-borde-blanco:hover {
    color: var(--second-color);
    border: 1px solid #00c1cf;
}

/*Textos*/

h4 {
    font-family: 'Montserrat Alternates', sans-serif;
}

.a-link {
    font-size: 20px;
    text-decoration: none !important;
    color: var(--fourty-color);
}

.a-link:hover {
    color: var(--second-color);
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.a-link-blue {
    font-size: 20px;
    text-decoration: none !important;
    color: var(--thirt-color) !important;
}

.a-link:hover, .a-link-blue:hover {
    color: var(--second-color) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.text-grey {
    color: var(--fourty-color);

}

.text-blue-dark, .text-blue-dark-titulo {
    color: var(--thirt-color);
}

.link:hover {
    color: var(--second-color);
}

.text-blue-main {
    color: var(--main-color);
}

.text-negrita {
    font-weight: 800 !important;
}

.border-dark:hover {
    border: var(--main-color);
}

.text-justify {
    text-align: justify;
}

/*Listas*/

.custom-list {
    list-style-type: disc;
    padding-left: 1.5rem;
}

.custom-list li::marker {
    color: var(--main-color);
}


/*Estilos Navbar*/

.logo-uncuyo {
    height: 40px;
    width: auto;
    padding-left: 6rem !important;
}


/* Estilos personalizados para dropdowns */
.dropdown-menu {
    background-color: rgba(51, 51, 51, 0.4);
    border: none;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}

.dropdown-item {
    color: white;
    padding: 0.75rem 1.25rem;
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.dropdown-divider {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Estilos para el Menú Hamburguesa */

/* Estilo base para los enlaces principales del menú móvil */
.mobile-link {
    display: block; /* Ocupa todo el ancho */
    padding: 10px 15px;
    color: white;
    font-size: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    text-decoration: none !important;
}

/* Efecto al pasar el cursor sobre los enlaces */
.mobile-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--second-color);
}

/* Estilo para los botones que abren los submenús */
.mobile-link-dropdown {
    padding: 10px 15px;
    color: white;
    font-size: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    text-decoration: none !important;
}

.mobile-link-dropdown:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Estilo para los enlaces dentro de los submenús */
.mobile-link-sub {
    display: block;
    padding: 8px 15px;
    color: #e0e0e0;
    font-size: 0.9rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    text-decoration: none !important;

}

.mobile-link-sub:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--second-color);
}


/*Estilos footer*/

.bg-footer {
    background-color: var(--main-color);
}

.footer-title {
    color: var(--fourty-color);
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
    text-decoration: underline;
}

.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
    padding-top: 20px;
    color: rgba(255, 255, 255, 0.6);
}

/*---Estilos personalizados de index---*/
/*Contenedor uncuyoAcredita*/

.overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente con opacidad */
    background-image: linear-gradient(to right,
    rgba(2, 2, 75, 0.8),
    rgba(0, 53, 124, 0.7),
    rgba(0, 99, 161, 0.6),
    rgba(0, 146, 188, 0.5),
    rgba(0, 193, 207, 0.4));
    z-index: 1;
}


/* 🔹 Ajustes responsivos */
@media (max-width: 768px) {
    section.bg-uncuyo-grey .col-md-6:first-child {
        padding-right: 1rem;
    }

    section.bg-uncuyo-grey .col-md-6:last-child {
        padding-left: 1rem;
        margin-top: 1.5rem; /* separa la imagen del texto en móvil */
    }
}


/* 🔹 Imagen de portada - Competencias Digitales UNCUYO */
.imagen_competencias {
    max-width: 500px;
!important; /* Tamaño máximo en pantallas grandes */
    height: auto;
!important; /* Mantiene proporciones */
    display: block;
!important; /* Evita espacios laterales */
    margin: 0 auto;
!important; /* Centra la imagen */
    object-fit: contain;
!important; /* Evita deformaciones */
    transition: transform 0.3s ease-in-out;
!important; /* Efecto suave */

}

/* 🔹 Ajustes responsive */
@media (max-width: 1024px) {
    /* Pantallas medianas */
    .imagen_competencias {
        max-width: 500px;
    !important;
    }

    .dual-bg {
        background: linear-gradient(to bottom, #2033b9 0% 17%, /* azul UNCUYO - sólido hasta 15% */ #02024b 15% 70%, /* azul oscuro - sólido de 15% a 70% */ #e5e5e5 70% 100% /* gris - sólido de 70% al final */);
    !important
    }
}

@media (max-width: 1024px) {
    /* Tablets */
    .imagen_competencias {
        max-width: 500px;
    !important;
    }

    .dual-bg {
        background: linear-gradient(to bottom, #2033b9 0% 15%, #02024b 15% 68%, #e5e5e5 68% 100%);
    !important
    }
}


/*Contenido Areas*/
.dual-bg {
    background: linear-gradient(
            to bottom,
            #2033b9 0% 23%, #02024b 15% 67%, #e5e5e5 67% 100%
    );
!important
}

.group {
    height: 22rem;
    width: 17rem;

}

/* Estilos para el efecto de giro de la tarjeta */

.iconos {
    width: 7rem;
}

.flip-card {
    background-color: transparent;
    perspective: 500px;
    height: 25rem;
    display: flex;
    justify-content: center;
}

.flip-card-inner {
    position: relative;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    height: 20rem;
    width: 17rem;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front {
    background-color: white;
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 50px;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/*SVG pentagono*/

svg path:hover {
    fill: var(--second-color);
    cursor: pointer;
}

.svgmacro {
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 0px auto;
    height: 550px;
}

.disabled {
    pointer-events: none;
}


/* --- NUEVOS ESTILOS PARA LA TRANSICIÓN DEL CARRUSEL --- */

/* Contenedor de los slides */
.slides-container {
    position: relative; /* Necesario para posicionar los slides */
    min-height: 100px; /* Evita que el contenedor colapse */
}

/* Estilo para cada slide individual */
.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    /* Estado inicial: invisible y con transición */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Estilo para el slide activo (visible) */
.carousel-slide.is-active {
    opacity: 1;
    position: relative; /* Hacemos que el slide activo ocupe espacio */
}

/*---------------------------------------------------------------*/


/* Para tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .logo-uncuyo {
        height: 35px;
        margin-left: 8px;
    }

    .content-fluid {
        width: 60% !important;
    }

    .bg-white {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

}

/* Para tablets pequeñas (600px - 768px) */
@media (max-width: 1024px) {
    .logo-uncuyo {
        height: 30px;
        margin-left: 6px;
        padding-left: 0rem !important;
    }

    .institucional-section {
        background-position: center right !important;
        min-height: 45vh !important;
    }

    .w-100-sm {
        width: 100% !important;
    }

    /* Fondo transparente en móviles */
    .bg-blanco {
        background-color: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Centrado del texto en móviles */
    .div-texto {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
        text-align: center;
    }

    /* Texto blanco en móviles */
    .div-texto .text-blue-dark-titulo {
        color: white !important;
    }

    /*.imagen_competencias {
        width: 700px;
        height: 200px;
    }*/
    /*
    .dual-bg {
        background: linear-gradient(
                to bottom,
                #2033b9 0% 20%,
                #02024b 20% 65%,
                #e5e5e5 65% 100%
        );
    }*/
    .div-institucional .text-blue-dark {
        margin: 10px 10px !important;
        padding: 10px 10px !important;
        text-align: justify !important;
    }

    .content-text .text-blue-dark {
        text-align: justify !important;
    }

    .svgmacro {
        height: 400px;
    }


    .institucional-section {
        min-height: 60vh !important;
        display: flex;
        align-items: center;
    }

    .bg-white {
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.95) !important;

    }

    .content-fluid {
        position: relative !important;
        width: 100% !important;
        padding: 2rem !important;
        justify-content: center !important;
    }

    .bg-white {
        border-radius: 20px !important;
        height: auto !important;
        max-width: 500px;
        margin: 0 auto;
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px);
    }


    .overlay-gradient {
        z-index: 1;
    }

    /*Nuevos Estilos Carousel*/
    .carousel-widget {
        width: 100% !important;
        min-height: 90px !important; /* Altura de la tarjeta */
        position: relative !important;
        padding: 1rem 0px !important; /* Reducimos el padding lateral para más espacio para el texto */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .carousel-item-content {
        display: flex !important;
        flex-direction: row !important; /* Ícono y texto en fila */
        align-items: center !important; /* Alinea verticalmente el ícono y el texto */
        justify-content: center !important; /* Centra el conjunto horizontalmente */
        text-align: left !important; /* Alinea el texto a la izquierda */

    }

    .carousel-item-icon {

        margin: 0 !important;
    }

    .carousel-item-text-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centra el texto verticalmente en su propio contenedor */
    }

    .carousel-item-area {
        font-size: 0.8rem !important;
        margin-bottom: 0.1rem !important; /* Espacio mínimo debajo de "AREA 1" */
        line-height: 0.5; /* Para evitar espacio extra */
    }

    .carousel-item-title {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }


    /* --- ESTILOS PARA LAS FLECHAS --- */
    .carousel-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        cursor: pointer;
        z-index: 10;
        font-size: 1.5rem; /* Hacemos las flechas un poco más grandes para que sean visibles */
        color: #666; /* Un color gris para que no sea tan intrusivo */
    }

    .carousel-prev {
        left: 5px !important; /* <-- CLAVE: Más cerca del borde izquierdo */

    }

    .carousel-next {
        right: 5px !important; /* <-- CLAVE: Más cerca del borde derecho */
    }

}


/* Para móviles (320px - 600px) */
@media (max-width: 600px) {
    .logo-uncuyo {
        height: 25px;
        margin-left: 4px;
        padding-left: 0rem !important;
    }

    .institucional-section {
        background-position: center right !important;
    }

    .bg-blanco {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        background-color: transparent !important;
    }

    .btn-blue {
        margin: 0 !important;
        padding: 10px !important;
    }

    .btn-borde-blanco {
        width: 20px;
    }

    .text-blue-dark {
        margin-inline-start: 0 !important;
        margin: 1.5rem !important;
        text-align: center !important;
    }

    .link {
        display: block;
        margin: 1rem !important;
    }

    .grid {
        justify-content: center !important;
    }

    /*Contenido Areas*/
    .dual-bg {
        background: linear-gradient(
                to bottom,
                #2033b9 0% 11%,
                #02024b 10% 35%,
                #e5e5e5 25% 100%
        );
    }

    .bg-white {
        height: 13rem !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .content-fluid {
        padding: 1rem !important;
    }

    .flip-card-inner {
        border-radius: 1rem;
    }

    .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .btn-borde-blanco {
        width: 100%;
    }

    .carousel-prev .btn, .carousel-next .btn {
        width: 0 !important;
    }

}

/* Para móviles muy pequeños (hasta 320px) */
@media (max-width: 320px) {
    .logo-uncuyo {
        height: 20px;
        margin-left: 2px;
        padding-left: 0rem !important;
    }

    .institucional-section {
        background-position: center right !important;
    }

    .bg-blanco {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        background-color: transparent !important;
    }

    .btn-blue {
        margin: 0 !important;
        padding: 0 !important;
    }

    .text-blue-dark {
        margin-inline-start: 0 !important;
        margin: 1.5rem !important;
        text-align: center !important;
    }


    .svgmacro {
        max-width: 300px;
    }

    .content-fluid {
        padding: 0.5rem !important;
    }

    .bg-white {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 300px;
    }

    .my-5 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .fs-3 {
        font-size: 1.5rem !important;
    }

}

/*Institucional*/

.hero-section {
    background-size: cover;
    background-position: center;
    min-height: 55vh;
    text-align: center;
    align-content: center;
}

.hero-section .d-flex {
    position: relative; /* importante para estar sobre el overlay */
    z-index: 2;
}

/* Estilos para el contenedor del acordeón personalizado */

/* Estilos para cada ítem del acordeón */
.accordion-custom .accordion-item {
    background-color: #ffffff; /* Fondo blanco */
    border: none;
    border-radius: 20px !important;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    transform: translateY(0);
}

/* Estilos para la cabecera del acordeón */
.accordion-custom .accordion-header {
    margin: 0;
}

/* Estilos para el botón del acordeón */
.accordion-custom .accordion-question {
    background-color: #ffffff; /* Fondo blanco */
    color: #0d2c6c; /* Azul oscuro */
    font-size: 1.25rem; /* fs-4 */
    font-weight: 500; /* fw-medium */
    padding: 1.5rem 2rem;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accordion-item.active .accordion-question {
    background-color: var(--main-color);
    color: var(--fourty-color);
}

/* Estilo del botón cuando está desplegado (activo) */
.accordion-custom .accordion-button:not(.collapsed) {
    background-color: var(--main-color); /* Un azul muy claro para el estado activo */
    color: var(--fourty-color);
}

/* Cambiar el ícono por defecto de Bootstrap por (+) y (-) */
.accordion-custom .accordion-question::after {
    content: "+";
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
    margin-left: 0;
    transition: transform 0.2s ease-in-out;
}

.accordion-custom .accordion-item.active .accordion-question::after {
    content: "−";
}

/* Estilos para el cuerpo del acordeón */
.accordion-custom .accordion-body {
    padding: 1rem 2rem 2rem; /* Ajuste del padding */
    color: #343a40; /* Un color de texto legible */
    background-color: #ffffff;
    font-size: 1.1rem; /* Un poco más grande para mejor lectura */
    line-height: 1.6;
}

/* Estilos para los textos en negrita y elementos internos */
.accordion-custom .accordion-body strong,
.accordion-custom .accordion-body .text-negrita {
    color: #0056b3; /* Un azul más vibrante para destacar */
}


/*----------------------------------------------------------------------*/

/*ESTILOS ITINERARIO*/

/* --- Estilos base para la página del itinerario --- */


.itinerary-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header --- */
.itinerary-main-header {
    background-color: #ffffff;
    padding: 15px 0;
    border-bottom: 1px solid var(--fourty-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.itinerary-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.itinerary-main-header nav {
    display: flex;
    gap: 25px;
}

.itinerary-main-header nav a {
    text-decoration: none;
    color: var(--thirt-color);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: color 0.3s, border-bottom-color 0.3s;
}

.itinerary-main-header nav a:hover {
    color: var(--main-color);
}

.itinerary-main-header nav a.active {
    color: var(--main-color);
    border-bottom-color: var(--main-color);
}

.itinerary-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--main-color);
}

.itinerary-header-actions a {
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.itinerary-btn-login {
    background-color: #eaf0ff;
    color: var(--main-color);
}

.itinerary-btn-session {
    background-color: var(--main-color);
    color: white;
}

.itinerary-search-icon {
    font-size: 1.2rem;
    cursor: pointer;
}


/* --- Hero Section --- */
.itinerary-hero-section {
    background-size: cover;
    background-position: center;
    color: white;
    text-align: justify;
    padding: 100px 20px;
    position: relative;
}

.itinerary-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 36, 106, 0.6);
    z-index: 1;
}

.itinerary-hero-content {
    position: relative;
    z-index: 2;
}

.itinerary-hero-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.itinerary-hero-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    text-align: justify;
}


/* --- Itinerary Section (Scoped Styles) --- */
#itinerary-page-section {
    padding: 80px 0;
}

#itinerary-page-section .itinerary-intro-content {
    text-align: left;
    margin-bottom: 60px;
}

#itinerary-page-section .itinerary-intro-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    color: var(--main-color);
    margin: 0 0 15px 0;
}

/* --- Timeline (Scoped) --- */
#itinerary-page-section .itinerary-timeline {
    position: relative;
}

#itinerary-page-section .itinerary-timeline::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 15px;
    bottom: 15px;
    width: 4px;
    background-color: #B2B2BC;
    z-index: 1;
}

#itinerary-page-section .itinerary-timeline-item {
    margin-bottom: 70px;
    position: relative;
    padding-left: 170px;
}

#itinerary-page-section .itinerary-timeline-item:last-child {
    margin-bottom: 0;
}

#itinerary-page-section .itinerary-timeline-item:last-child::after {
    content: '';
    position: absolute;
    left: 50px;
    top: 50px;
    width: 4px;
    height: calc(100% - 40px);
    background-color: rgb(178, 178, 188);
    z-index: 1;
}

#itinerary-page-section .itinerary-timeline-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--fourty-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 3.5rem;
    position: absolute;
    left: 0;
    top: 0;
    transition: background-color 0.5s ease;
    z-index: 2;
}

#itinerary-page-section .itinerary-timeline-item.is-active .itinerary-timeline-icon {
    background-color: var(--main-color);
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 51, 185, 0.4);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(32, 51, 185, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(32, 51, 185, 0);
    }
}

#itinerary-page-section .itinerary-timeline-icon.has-cards {
    cursor: pointer;
    animation: pulse-animation 2s infinite;
}

#itinerary-page-section .itinerary-timeline-content h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--main-color);
    font-size: 1.7rem;
    margin: 5px 0 10px 0;
}

#itinerary-page-section .itinerary-timeline-content p {
    margin-bottom: 30px;

}


/* --- Detail Cards --- */
#itinerary-page-section .itinerary-details-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s ease-in-out, opacity 0.5s ease-in-out, margin-top 0.6s ease-in-out;
}

#itinerary-page-section .itinerary-details-cards.cards-visible {
    max-height: 400px;
    opacity: 1;
    margin-top: 30px;
}

#itinerary-page-section .itinerary-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#itinerary-page-section .itinerary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

#itinerary-page-section .itinerary-card-icon {
    padding: 40px 20px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#itinerary-page-section .itinerary-card-icon i {
    font-size: 4.5rem;
    color: #666;
}

#itinerary-page-section .itinerary-card span {
    display: block;
    background-color: var(--main-color);
    color: white;
    padding: 20px 10px;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}


/* --- Modal Styles --- */
.itinerary-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.itinerary-modal-overlay.modal-visible {
    opacity: 1;
    visibility: visible;
}

.itinerary-modal-content {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 15px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.itinerary-modal-overlay.modal-visible .itinerary-modal-content {
    transform: scale(1);
}

.itinerary-modal-content h4 {
    font-family: 'Montserrat', sans-serif;
    color: var(--main-color);
    font-size: 1.8rem;
    margin: 0 0 20px 0;
}

.itinerary-modal-content p {
    white-space: pre-wrap; /* Respeta saltos de línea y espacios */
    line-height: 1.7;
    margin-bottom: 30px;
}

.itinerary-modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: #aaa;
    cursor: pointer;
    border: none;
    background: none;
}

.itinerary-modal-close-btn:hover {
    color: var(--thirt-color);
}

/* Justifica el texto principal del modal */
#itinerary-modal-text {
    text-align: justify;
}

/* Anula la justificación para las listas dentro del modal */
#itinerary-modal-text ul {
    text-align: left;
}


/* --- CTA Button --- */
#itinerary-page-section .itinerary-cta-container {
    text-align: center;
    margin-top: 60px;
}

#itinerary-page-section .itinerary-cta-button {
    color: var(--main-color);
    border: 2px solid var(--main-color);
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

#itinerary-page-section .itinerary-cta-button:hover {
    background-color: var(--main-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(10, 36, 106, 0.3);
}

/* --- Animaciones de Scroll --- */
#itinerary-page-section .itinerary-timeline-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#itinerary-page-section .itinerary-timeline-content.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
    .itinerary-header-content, .itinerary-main-header nav {
        flex-direction: column;
        gap: 15px;
    }

    .itinerary-hero-content h1 {
        font-size: 2.5rem;
    }

    #itinerary-page-section .itinerary-timeline::before,
    #itinerary-page-section .itinerary-timeline-item:last-child::after {
        left: 30px;
    }

    #itinerary-page-section .itinerary-timeline-item {
        padding-left: 100px;
    }

    #itinerary-page-section .itinerary-timeline-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    #itinerary-page-section .itinerary-details-cards {
        grid-template-columns: 1fr;
    }
}

.acreditacion-text {
    /* Justificado a la izquierda */
    margin-top: 20px; /* Separación con el texto de arriba, si la necesitas */
    padding-right: 20px; /* Un poco de padding a la derecha si lo requiere el layout general */
    text-align: justify;
}

.acreditacion-link {
    color: #3f51b5; /* Este es un azul similar al del icono, puedes ajustarlo si tienes el valor exacto */
    text-decoration: underline; /* Subrayado para que parezca un link tradicional */
    margin-left: 5px; /* Pequeño espacio entre el texto y el link */
}


@media (max-width: 768px) {
    /* --- Header Responsivo --- */
    .itinerary-header-content {
        flex-direction: column;
        gap: 20px;
    }

    .itinerary-main-header nav {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .itinerary-main-header nav a {
        border-bottom-width: 1px;
        padding-bottom: 10px;
        width: 100%;
        text-align: center;
    }

    .itinerary-header-actions {
        flex-direction: column;
        width: 100%;
    }

    .itinerary-header-actions a {
        width: 100%;
        text-align: center;
    }


    /* --- Hero Responsivo --- */
    .itinerary-hero-content h1 {
        font-size: 2.5rem;
    }

    .itinerary-hero-content p {
        font-size: 1rem;
    }

    /* --- Sección Itinerario Responsiva --- */
    #itinerary-page-section {
        padding: 60px 0;
    }

    #itinerary-page-section .itinerary-intro-content h2 {
        font-size: 2rem;
    }

    /* --- Timeline Responsivo --- */
    #itinerary-page-section .itinerary-timeline-item {
        padding-left: 100px;
        margin-bottom: 50px;
    }

    #itinerary-page-section .itinerary-timeline-icon {
        width: 70px;
        height: 70px;
        font-size: 2.5rem;
        left: -10px;
    }

    #itinerary-page-section .itinerary-timeline::before,
    #itinerary-page-section .itinerary-timeline-item:last-child::after {
        left: 25px;
    }

    #itinerary-page-section .itinerary-timeline-content h3 {
        font-size: 1.4rem;
    }

    /* --- Tarjetas Responsivas (CORRECCIÓN) --- */
    #itinerary-page-section .itinerary-details-cards {
        grid-template-columns: 1fr; /* Apila las tarjetas */
        gap: 20px; /* Menos espacio entre tarjetas apiladas */
    }

    /* Aumenta la altura máxima para que quepan las 3 tarjetas apiladas */
    #itinerary-page-section .itinerary-details-cards.cards-visible {
        max-height: 1200px; /* Altura suficiente para 3 tarjetas grandes + gaps */
    }

    #itinerary-page-section .itinerary-card-icon i {
        font-size: 3.5rem; /* Iconos de tarjeta un poco más pequeños */
    }

    /* --- Modal Responsivo --- */
    .itinerary-modal-content {
        padding: 25px;
        width: 85%;
    }

    .itinerary-modal-content h4 {
        font-size: 1.5rem;
    }
}

/*----------------------------------------------------------------------*/

/*----PREGUNTAS FRECUENTES----*/

/* --- Sección Principal de FAQ --- */


/* --- Header --- */
.faq-main-header {
    background-color: #ffffff;
    padding: 15px 0;
    border-bottom: 1px solid var(--fourty-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.faq-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.faq-main-header nav a {
    text-decoration: none;
    color: var(--thirt-color);
    font-weight: 500;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: color 0.3s, border-bottom-color 0.3s;
    margin: 0 15px;
}

.faq-main-header nav a:hover {
    color: var(--main-color);
}

.faq-main-header nav a.active {
    color: var(--main-color);
    border-bottom-color: var(--main-color);
}

.faq-title-header {
    text-align: center;
    margin-bottom: 50px;
}

.faq-title-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--thirt-color);
}

.faq-title-header p {
    font-size: 1.1rem;
    color: #555;
}

/* --- Contenedor Principal Blanco --- */
.faq-main-content-wrapper {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 50px 40px;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-card {
    background-color: #f8f9fa; /* Un gris muy sutil para las tarjetas */
    border-radius: 8px;
    border: 1px solid var(--fourty-color);
    border-left: 5px solid var(--fourty-color);
    transition: border-left-color 0.3s ease, border-color 0.3s ease;
}

.faq-card:hover {
    border-left-color: var(--main-color);
}

.faq-card.active {
    border-left-color: var(--main-color);
    border-color: #d0d8ff;
}

.faq-question {
    display: flex;
    align-items: center;
    padding: 20px;
    cursor: pointer;
}

.faq-question-icon {
    font-size: 1.2rem;
    margin-right: 15px;
    width: 20px;
    text-align: center;
    color: var(--main-color);
}

.faq-question h3 {
    margin: 0;
    flex-grow: 1;
    font-size: 1.1rem;
    font-weight: 500;
    padding-right: 20px;
}

.faq-toggle-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
    content: '';
    position: absolute;
    background-color: var(--main-color);
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.faq-toggle-icon::before {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.faq-toggle-icon::after {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.faq-card.active .faq-toggle-icon::after {
    transform: translateX(-50%) rotate(90deg);
}

.faq-card.active .faq-toggle-icon::before {
    transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    padding: 0 20px 0 60px;
    color: #555;
    font-weight: 400;
}

.faq-answer p {
    margin: 0;
    padding-bottom: 20px;
    border-top: 1px solid var(--fourty-color);
    padding-top: 20px;
}

/* --- SEPARADOR SUTIL --- */
.faq-separator {
    border: 0;
    height: 1px;
    background-color: var(--fourty-color);
    margin: 40px 0;
}

.faq-contact-info {
    text-align: center;
}

.faq-contact-info h2 {
    font-weight: 700;
    margin: 0 0 15px 0;
}

.faq-contact-info p, .faq-contact-info li {
    color: #555;
    margin-bottom: 10px;
}

.faq-contact-info a {
    color: var(--main-color);
    font-weight: bold;
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: break-all;
}

.faq-contact-info a:hover {
    text-decoration: underline;
}

.faq-contact-info ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.faq-final-cta {
    text-align: center;
}

.faq-final-cta p {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
}

.faq-final-cta-icon {
    margin-top: 25px;
    font-size: 2.5rem;
    color: var(--main-color);
    opacity: 0.8;
}

@media (max-width: 768px) {
    .faq-page-section {
        padding: 60px 0;
    }

    .faq-main-content-wrapper {
        padding: 30px 20px;
    }

    .faq-title-header h1 {
        font-size: 2rem;
    }

    .faq-question h3 {
        font-size: 1rem;
    }

    .faq-answer {
        padding: 0 20px;
    }
}


/* Seccion competencia*/

.area-img {
    width: 15vw;
    max-width: 150px;
}

.area-img-4 {
    width: 30vw;
    max-width: 250px;
    margin-left: 100px;
    margin-right: auto;
}

.mapa_insignia {
    width: 100%;
    max-width: 70rem;
}


@media (max-width: 768px) {

    /* tablets */
    .area-img {
        width: 100px;
    }

    .area-img-4 {
        width: 150px;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    /* celulares */
    .area-img {
        width: 80px;
    }

    .area-img-4 {
        width: 150px;
    }


    .mapa_insignia {
        max-width: 100%;
    }


}


/* SECCION PROGRESO DE ACTIVIDADES*/
.area-indicator-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px; /* antes 15px */
    padding: 8px 10px; /* antes 15px */
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    position: relative;
    z-index: 10;
}

.area-step {
    padding: 5px 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
    background-color: #e9ecef;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.area-step:hover {
    background-color: #f8f9fa;
    transform: translateY(-1px);
}

.area-step.active {
    background-color: #ffc107;
    color: #212529;
}

@media (max-width: 768px) {
    .area-indicator-bar {
        gap: 6px;
        padding: 6px;
    }

    .area-step {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
}


/*----------ESTILO ACTIVIDADES: responsive----------------*/
/*AREA 3: RESPONSIVE*/
/* Para Celulares (hasta 768px) */
@media (max-width: 768px) {

    header.bg-white {
        height: auto !important; /* Altura automática */
        min-height: initial !important; /* Reseteamos cualquier altura mínima que pueda tener */
    }

    /* 2. Mantenemos las reglas de seguridad para el párrafo, por si acaso */
    header p.text-muted {
        width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    .contenedor-blanco {
        min-height: 85vh !important;
    }

    .slide-title-responsive {
        font-size: 1.2rem !important;
        padding: 0 10px;
        width: 90%;
    }

    .slide-subtitle-responsive {
        font-size: 0.95rem !important;
        padding: 0 10px;
        width: 90%;
    }

    #deco-line {
        width: 80px !important;
        height: 6px !important;
    }

}

.simulation {
    background-color: white;
}

.text-opciones {
    color: black;
    border-color: black;
}

.text-opciones:hover {
    background-color: var(--main-color);
    color: white;
}

@media (max-width: 576px) {
    .slide-title-responsive {
        font-size: 1rem !important;
    }

    .slide-subtitle-responsive {
        font-size: 0.85rem !important;
    }

    #deco-line {
        width: 60px !important;
        height: 5px !important;
    }

    .color-box {
        width: 36px !important;
        height: 36px !important;
    }

    .opcion-btn {
        padding: 0.65rem !important;
    }

}

@media (max-width: 768px) {
    .simulation {
        border-radius: 0px !important;
    }

    /*AREA 2: RESPONSIVE*/
    /* Para Tablets (hasta 992px) */
    @media (max-width: 992px) {
        .card-body {
            max-height: 120vh;
        }
    }

    /* Para Celulares (hasta 768px) */
    @media (max-width: 768px) {
        /* 1. Barra de progreso adaptable */
        .area-indicator-bar {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .area-indicator-bar::-webkit-scrollbar {
            display: none;
        }

        .area-step {
            flex-shrink: 0;
        }

        .container-fluid {
            padding: 1rem !important; /* Menos padding en los costados */
        }

        header h4 {
            font-size: 1.2rem; /* Título un poco más pequeño */
        }

        header .fs-3 {
            font-size: 1.5rem !important; /* Ícono un poco más pequeño */
        }

        header.bg-white {
            height: auto !important; /* Altura automática */
            min-height: initial !important; /* Reseteamos cualquier altura mínima que pueda tener */
        }

        header p.text-muted {
            width: 100% !important;
            white-space: normal !important;
            overflow-wrap: break-word !important;
            box-sizing: border-box !important;
        }

        .row.g-3 {
            margin-top: 1.5rem; /* Añade espacio entre el header y los paneles */
        }

        .row > .col-md-6:first-child {
            margin-bottom: 1rem; /* Espacio entre paneles cuando se apilan */
        }

        #notifications-list, #details-content {
            max-height: none; /* Quitamos la altura fija para que el contenido fluya */
        }

        .modal-footer {
            display: flex;
            flex-direction: column-reverse;
            align-items: stretch;
        }

        .modal-footer .btn {
            width: 100%;
            margin-bottom: 0.5rem;
        }

        .modal-footer .btn:last-child {
            margin-bottom: 0;
        }

        .modal-footer small {
            margin-bottom: 1rem;
            text-align: center;
            width: 100%;
        }
    }

    /*Actividad 1*/
    .bg-purple {
        background-color: #8b5cf6 !important;
    }

    .icon-container {
        width: 48px !important;
        height: 48px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fallback-icon {
        font-size: 24px;
        font-weight: bold;
    }
}

.a-link1 {
    color: black !important;
}

.a-link1:hover {
    color: var(--main-color) !important;
}

/* --- [INICIO] CÓDIGO RESPONSIVO CORREGIDO --- */
/* --- Estilos para Tablets (hasta 992px) --- */
@media (max-width: 991.98px) {


    .desktop-icon {
        min-height: 180px;
    }

}

/* --- Estilos para Celulares (hasta 768px) --- */
@media (max-width: 767.98px) {

    .container-fluid.videollamada {
        padding: 0 !important;
    }

    /* ---- Escena 1: Videollamada (Correcciones) ---- */
    /* 2. Ajustamos los bordes redondeados para que las secciones apiladas
       parezcan una sola tarjeta coherente. */
    /* 6. Reducimos el tamaño de la fuente en los mensajes. */
    .bg-light p.fs-5 {
        font-size: 1rem !important;
        line-height: 1.4;
    }

    /* 7. Hacemos el botón principal un poco más pequeño. */
    #start-task-btn {
        font-size: 1rem;
        padding: 0.75rem;
    }

    /* ---- Escena 2: Escritorio Virtual (Mismos ajustes de antes) ---- */
    #desktop-scene.m-4 {
        margin: 1rem !important;
    }

    .desktop-icon {
        min-height: auto;
        padding: 1rem !important;
        height: 20rem !important;
    }

    .desktop-icon .h6 {
        font-size: 0.95rem;
    }

    .desktop-icon .small {
        font-size: 0.85rem;
    }

    /* ---- Barra de Progreso ---- */
    .area-step {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }

    /* ---- Modal ---- */
    .modal-body p.fs-5 {
        font-size: 1rem !important;
    }
}

@media (max-width: 1024px) {

}

@media (max-width: 767.98px) {
    #desktop-options {
        margin-top: 1rem !important;
    }
}

@media (max-width: 600px) {
    #desktop-scene .bg-white-area {
        height: 16rem !important;

    }
}

/*Fondo blanco index acredita*/
@media (max-width: 600px) {
    .bg-resp {
        height: 17rem !important;
    }
}

@media (max-width: 767.98px) {
    .bg-resp {
        height: 18rem !important;
    }
}

@media (min-width: 992px) {
    .bg-resp {
        min-height: 45vh !important;
    }

    .institucional-section {
        min-height: 45vh !important;
    }
}


.screen {
    height: 100vh;
}

.bg-white-resp1 {
    margin: 0 !important;
    max-width: none !important;

}

.bg-white-area1 {
    background-color: white;
}


/*Actividad 4*/
@media (max-width: 767.98px) {


    .bg-white-resp {
        margin-top: 0 !important;
        height: 55vh !important;
    }

    .bg-white-resp1 {
        margin-top: 0 !important;
        height: 65vh !important;
    }

    .bg-white-4 {
        height: 55vh !important;
    }
}


/*Institucional*/
@media (min-width: 992px) {
    .accordion-custom .accordion-question {
        text-align: left;
    }
}

@media (max-width: 767.98px) {

    .accordion-custom .accordion-question {

        text-align: left !important;
    }

    .accordion-custom .accordion-question::after {
        margin-left: 0 !important;
        margin-right: 10px !important;
    }
}

/*Acordeon*/
@media (max-width: 767.98px) {

    .div-institucional .accordion-question {
        margin: 0 !important;
        padding-left: 40px !important;
    }
}


@media (max-width: 767.98px) {

    .btn-borde-azul-oscuro.boton {
        font-size: 15px !important;
    }
}


/* --- Estilos responsive para botones --- */
@media (max-width: 768px) {
    .botones-responsive {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .botones-responsive .btn {
        width: 85%;
        font-size: 1rem !important;
        padding: 0.75rem 1rem !important;
    }

    .empty-state h3 {
        font-size: 1.1rem;
    }

    .empty-state p {
        font-size: 0.95rem;
    }

    .empty-state .btn {
        width: 85%;
        font-size: 1rem;
    }
}

@media (max-width: 767.98px) {
    .inbox-sidebar {
        width: 100%;
        max-width: 100%;
    }

    #email-content {
        width: 100%;
    }

    #back-to-inbox-btn {
        display: inline-block !important;
    }
}

@media (max-width: 767.98px) {
    .results-header h2 {
        font-size: 1.4rem !important;
    }

    .results-header h3 {
        font-size: 1.2rem !important;
    }
}

/* Formato de slides con links. */
.carousel-slide-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease;
}

.carousel-slide-link:hover {
    text-decoration: none;
    color: inherit;
    transform: translateY(-2px);
}

.carousel-slide-link:hover .carousel-slide {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.carousel-slide {
    cursor: pointer;
    transition: all 0.2s ease;
}


/*Introducccion*/
.interlineado {
    line-height: 1.6;
}

/*Transiciones*/


/* Scroll suave global */
html {
    scroll-behavior: smooth;
}

/* Estado inicial de las secciones - TODAS de abajo hacia arriba */
section.section-hidden {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Estado visible de las secciones */
section.section-visible {
    opacity: 1;
    transform: translateY(0);
}

/* BOTÓN FLOTANTE SCROLL TO TOP */

.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: none;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
    background: #003366;
}

.scroll-to-top i {
    font-size: 1.5rem;
    color: #003366;
    transition: color 0.3s ease;
}

.scroll-to-top:hover i {
    color: white;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .scroll-to-top {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }

    .scroll-to-top i {
        font-size: 1.2rem;
    }
}