html {
    scroll-behavior: smooth;
}

body {
    background-color: rgb(250, 250, 250);
    font-family: 'Montserrat', sans-serif;
}

/* .cursor {
    z-index: 99999;
    position: fixed;
    background-color: colors;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    pointer-events: none;
    animation: colors 5s infinite;
}

@keyframes colors {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

.cursor::before {
    content: '';
    position: absolute;
    background: blueviolet;
    width: 50px;
    height: 50px;
    opacity: 0.2;
    transform: translate(-30%, -30%);
    border-radius: 50%;
} */

/* ------------ NAVBAR --------- */

.navbar {
    background-color: rgb(250, 250, 250);
}


.underline {
    color: var(--blue-dark);
    display: inline-block;
    position: relative;
    font-weight: 500;
    font-size: 20px;
}

.underline:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: rgb(27, 12, 235);
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: 0.3s ease-out;
}

.underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom;
}

.ul-1:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: rgb(255, 174, 0);
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: 0.3s ease-out;
}

.ul-2:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: rgb(199, 53, 16);
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: 0.3s ease-out;
}

.ul-3:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: rgb(70, 175, 0);
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: 0.3s ease-out;
}

.ul-4:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: rgb(149, 0, 179);
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: 0.3s ease-out;
}

.active .underline:after {
    transform: scaleX(1);
}

/* --------------------- FIN NAVBAR ----------------------- */




/* -------------------- DIV PRINCIPAL --------------------- */


.imagen-fondo {
    background-image: url('../img/murales/687-patagonia-tierra-generosa.jpg');
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: auto;
    position: relative;
}

.imagen-fondo-biografia {
    background-image: url('../img/murales/75-la-vision-de-don-bosco-2.jpg');
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: auto;
    position: relative;
}


.sombra-principal {
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    position: absolute;
    width: fit-content;
    bottom: 0;
}

.sombra-biografia {
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    position: absolute;
    width: fit-content;
    bottom: 0;
}

.sin-estilo {
    z-index: 2;
    text-decoration: none;
    color: none;
    background: none;
    left: 0;
    background-color: none;
}

.quote {
    z-index: 1;
    color: rgb(31, 31, 31);
    font-weight: 300;
    font-style: italic;
}

.quote-principal {
    z-index: 1;
    color: rgb(31, 31, 31);
    font-weight: 300;
    font-style: italic;
}

.div-nombre {
    z-index: 1;
    max-width: 700px;
}

.div-nombre-principal {
    z-index: 1;
    max-width: 700px;
}

.div-nombre h1 {
    z-index: 1;
    font-size: 70px;
    font-weight: 700;
}

h2 {
    z-index: 1;
    font-size: 50px;
    font-weight: 600;
}

.title-general {
    z-index: 1;
    font-size: 54px;
    font-weight: 700;
}

.div-nombre h3 {
    z-index: 1;
    font-weight: 400;
}

.div-nombre-principal h1 {
    z-index: 1;
    font-size: 70px;
    font-weight: 700;
}

.div-nombre-principal h3 {
    z-index: 1;
    font-weight: 400;
}

/* ----------------------- FIN DIV PRINCIPAL --------------- */


/* ----------------- TEXTO CAMBIA COLOR ------------------------ */

.texto-cambia-color {

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: changeColor 15s infinite;

}

@keyframes changeColor {

    0%,
    100% {
        color: #fd8a8a;
    }

    12.5% {
        color: #8d9f91;
    }

    25% {
        color: #e0869e;
    }

    37.5% {
        color: #a8d1d1;
    }

    50% {
        color: #9ea1d4;
    }

    62.5% {
        color: #ffc34a;
    }

    75% {
        color: #f6aa90;
    }

    87.5% {
        color: #215a6d;
    }

}

/* --------------- FIN TEXTO CAMBIA COLOR ----------------------- */

/* ------------------------ DIV CUADROS -------------------- */

.div-imagen {
    max-width: fit-content;
    position: relative;
    transition: transform .5s;
}

.div-imagen:hover {
    transform: scale(1.02);
}

.div-img {
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 45vh;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.div-img-mural {
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 45vh;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.carousel-inner {
    background-color: transparent;
    /*     background-image: url('../img/fondo-random-2.jpg');
 */
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: auto;
    position: relative;
}

.carousel-inner-cuadros {
    background-image: url('../img/fondo-random-2.jpg');
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: auto;
    position: relative;
}

.entrevistas {
    background-image: url('../img/fondo-random-2.jpg');
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: auto;
    position: relative;
}

.carousel-inner::before {
    /*     content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); */
}

.carousel-inner-bio {
    background-color: white;
    background-image: url('../img/murales/75-la-vision-de-don-bosco-2.jpg');
    background-size: cover;
    background-position: left top;
    width: 100%;
    height: 80vh;
    position: relative;
}

.carousel-inner-bio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

/* --------- SCROLL ESTILO -------------------- */

.scrollable-bio {
    max-height: 50vh;
    /*Establece la altura máxima que desees */
    overflow: auto;
}

::-webkit-scrollbar {
    width: 8px;
    /* Ancho del riel del scrollbar */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Color de fondo del riel */
    border-radius: 5px;
    /* Radio de borde del riel */
}

::-webkit-scrollbar-thumb {
    background: #888;
    /* Color del pulgar */
    border-radius: 5px;
    /* Radio de borde del pulgar */
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Color del pulgar al pasar el cursor sobre él */
}

/* --------- FIN SCROLL ESTILO ------------- */



/*  -------------------- IMAGENES CUADROS ---------------------- */

.div-imagen-senadora {
    background-image: url('../img/cuadros/544-la-senadora.jpg');
}

.div-imagen-ninos {
    background-image: url('../img/cuadros/115-los-ninos-nos-miran.jpg');
}

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

.div-imagen-hermanos {
    background-image: url('../img/cuadros/68-que-bueno-sentirnos-hermanos.jpg');
}

.div-imagen-tarde {
    background-image: url('../img/cuadros/705-llegada-la-tarde-el-señor-dijo.jpg');
}

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

.div-imagen-comunicandonos {
    background-image: url('../img/cuadros/comunicandonos-hoy.jpg');
}

.div-imagen-bigbang {
    background-image: url('../img/cuadros/253-bigbang.jpg');
}



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


.div-imagen-maria-adela {
    background-image: url('../img/cuadros/maria-adela.jpg');
}

.div-imagen-kona-ta-iell {
    background-image: url('../img/cuadros/529-kona-ta-iell.jpg');
}

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



.div-imagen-pillan-kushe {
    background-image: url('../img/cuadros/552-pillan-kushe.jpg');
}

.div-imagen-entre-el-cielo-y-la-tierra {
    background-image: url('../img/cuadros/618-entre-el-cielo-y-la-tierra.jpg');
}


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

.div-imagen-los-angeles-traviesos {
    background-image: url('../img/cuadros/662-los-angeles-traviesos.jpg');
}

.div-imagen-al-cielo-en-patineta {
    background-image: url('../img/cuadros/716-al-cielo-en-patineta.jpg');
}

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


.div-imagen-jugando-al-gallito-ciego {
    background-image: url('../img/cuadros/634-jugando-al-gallito-ciego.jpg');
}

.div-imagen-descubriendo-otros-fantasmas {
    background-image: url('../img/cuadros/732-descubriendo-otros-fantasmas.jpg');
}

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



.div-imagen-el-senor-con-las-manos-sucias {
    background-image: url('../img/cuadros/677-el-senor-con-las-manos-sucias.jpg');
}

.div-imagen-el-senor-con-las-manos-en-la-masa {
    background-image: url('../img/cuadros/678-el-senor-con-las-manos-en-la-masa.jpg');
}

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



.div-imagen-cabeceando-jugadas {
    background-image: url('../img/cuadros/733-cabeceando-jugadas.jpg');
}

.div-imagen-desde-lo-profundo-de-la-tierra {
    background-image: url('../img/cuadros/734-desde-lo-profundo-de-la-tierra.jpg');
}

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



.div-imagen-tangentes-de-miami-a-comodoro {
    background-image: url('../img/cuadros/742-tangentes-de-miami-a-comodoro.jpg');
}

.div-imagen-la-otra-cara-olla-popular {
    background-image: url('../img/cuadros/746-la-otra-cara-olla-popular.jpg');
}

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



.div-imagen-los-corredores-del-olvido {
    background-image: url('../img/cuadros/767-los-corredores-del-olvido.jpg');
}

.div-imagen-los-ninos-nos-miran {
    background-image: url('../img/cuadros/807-los-ninos-nos-miran.jpg');
}

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



.div-imagen-2-x-4-callejero {
    background-image: url('../img/cuadros/829-2-x-4-callejero.jpg');
}

.div-imagen-volver-a-empezar {
    background-image: url('../img/cuadros/840-volver-a-empezar.jpg');
}

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



/* ---------------------- FIN IMAGENES CUADROS --------------------- */






/*  -------------------- IMAGENES MURALES ---------------------- */

.div-imagen-rectorado {
    background-image: url('../img/murales/53-unp-rectorado.jpg');
}

.div-imagen-cristo {
    background-image: url('../img/murales/75-la-vision-de-don-bosco-detalle.jpg');
}

.div-imagen-anunciacion {
    background-image: url('../img/murales/79-la-anunciacion-ambon-catedral.jpg');
}

.div-imagen-todas-manos {
    background-image: url('../img/murales/80-todas-las-manos-altar-catedral.jpg');
}

.div-imagen-pescadores {
    background-image: url('../img/murales/81-pescadores-de-hombres-altar-catedral.jpg');
}

.div-imagen-trigo-pan {
    background-image: url('../img/murales/82-el-trigo-y-el-pan-de-vida.jpg');
}

.div-imagen-vino {
    background-image: url('../img/murales/83-las-vides-y-el-vino-altar-catedral.jpg');
}

.div-imagen-campo-trabajo {
    background-image: url('../img/murales/94-campo-y-trabajo-sociedad-rural.jpg');
}

.div-imagen-vida-trabajo {
    background-image: url('../img/murales/95-vida-y-trabajo-municipalidad.jpg');
}

.div-imagen-aeropuerto {
    background-image: url('../img/murales/433-patagonia-tu-destino-es-levantar-vuelo-aeropuerto.jpg');
}

.div-imagen-patagonia-tierra {
    background-image: url('../img/murales/687-patagonia-tierra-generosa-2.jpg');
}


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


/* ---------------------- FIN IMAGENES MURALES --------------------- */




.sombra-img {
    position: absolute;
    width: fit-content;
    height: 33%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
    bottom: 0;
    left: 0;
}

.texto-img {
    position: absolute;
    left: 3rem;
    bottom: 2rem;
    color: white;
    font-size: 22px;
}

.texto-img-mural {
    position: absolute;
    left: 10%;
    bottom: 2rem;
    color: white;
    font-size: 28px;
}

/* --------------- FIN DIV CUADROS -------------------- */

/* ---------------- DIV VIDEOS ------------------------- */

/* .carousel-inner-videos {
    height: 80vh;
} */

/* --------------- FIN DIV VIDEOS ---------------------- */

/* @media (max-width: 767px) {
    .cursor {
        z-index: 99999;
        position: none;
        background-color: transparent;
        width: 0px;
        height: 0px;
        border-radius: 0%;
        pointer-events: none;
        animation: none;
    }

    .cursor::before {
        content: '';
        position: none;
        background: transparent;
        width: 0px;
        height: 0px;
        opacity: 0;
        border-radius: 0%;
    }
} */


/* ----------- ENTREVISTAS ------------- */

.text-entrevistas {
    font-weight: 400;
}

/* --------- FIN ENTREVISTAS -------------- */

/* ----- FOOTER ----------- */


.footer-text {
    font-size: 20px;
}


/* ---------------- MATERIAL ICONS -------------- */

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}


/* -------------- MEDIA QUERIES ------------------ */

@media (max-width: 600px) {

    .div-nombre h1 {
        font-size: 55px;
        font-weight: 700;
    }


    .div-nombre h3 {
        font-size: 18px;
        font-weight: 400;
    }

    .quote {
        font-size: 18px;
        font-weight: 300;
        font-style: italic;
    }

    .texto-img {
        position: absolute;
        left: 3rem;
        bottom: 2rem;
        color: white;
        font-size: 18px;
    }
}

@media (max-width: 607px) {

    .title-general {
        z-index: 1;
        font-size: 50px;
        font-weight: 700;
    }

    .div-nombre-principal h1 {
        font-size: 60px;
        font-weight: 700;
    }


    .div-nombre-principal h3 {
        font-size: 22px;
        font-weight: 400;
    }

    .quote-principal {
        font-size: 22px;
        font-weight: 300;
        font-style: italic;
    }

}

@media (max-width: 457px) {

    .footer-text {
        font-size: 18px;
    }

    .title-general {
        z-index: 1;
        font-size: 42px;
        font-weight: 700;
    }

    .div-nombre-principal h1 {
        font-size: 48px;
        font-weight: 700;
    }


    .div-nombre-principal h3 {
        font-size: 20px;
        font-weight: 400;
    }

    .quote-principal {
        font-size: 20px;
        font-weight: 300;
        font-style: italic;
    }

}

@media (max-width: 330px) {

    .title-general {
        z-index: 1;
        font-size: 40px;
        font-weight: 700;
    }

    .div-nombre-principal h1 {
        font-size: 45px;
        font-weight: 700;
    }


    .div-nombre-principal h3 {
        font-size: 18px;
        font-weight: 400;
    }

    .quote-principal {
        font-size: 18px;
        font-weight: 300;
        font-style: italic;
    }

}

@media (max-width: 375px) {

    .texto-img {
        position: absolute;
        left: 3rem;
        bottom: 1rem;
        color: white;
        font-size: 15px;
    }
}

@media (max-width: 1250px) {

    .texto-img {
        position: absolute;
        left: 3rem;
        bottom: 1rem;
        color: white;
        font-size: 18px;
    }
}

@media (max-width: 1020px) {

    .texto-img {
        position: absolute;
        left: 3rem;
        bottom: 1rem;
        color: white;
        font-size: 15px;
    }
}

@media (max-width: 991px) {

    .texto-img {
        position: absolute;
        left: 3rem;
        bottom: 1rem;
        color: white;
        font-size: 22px;
    }
}

@media (max-width: 670px) {

    .texto-img {
        position: absolute;
        left: 3rem;
        bottom: 1rem;
        color: white;
        font-size: 20px;
    }
}

@media (max-width: 350px) {
    .bio-text {
        font-size: 12px;
    }

    .bio-title {
        font-size: 36px;
    }
}

@media (max-width: 474px) {
    .bio-text {
        font-size: 18px;
    }

    .bio-title {
        font-size: 36px;
    }

    .texto-img-mural {
        font-size: 22px;
    }

    .carousel-inner-videos {
        height: 55vh;
    }
}

@media (max-width: 1000px) {
    .bio-text {
        min-width: 60vh;
    }
}

@media (min-width: 1920px) {
    .carousel-inner-videos {
        height: 85vh;
    }
}