* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Josefin Sans", sans-serif, "Noto Sans JP", sans-serif;
}

a {
    color: #ececec;
    text-decoration: none;
}

img {
    max-width: 100%;
}

.active {
    text-decoration: underline;


}

.container {
    margin: 0 auto;
    max-width: 1200px;
    background-color: white;
    overflow-x: hidden;
}

body {
    background-color: white;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-height: 100dvh;

}

header {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: end;
    padding: 1rem;
    padding-top: 1.5rem;
    background-color: transparent;
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;

}

.img-container {
    max-width: 100%;
}

section {
    scroll-margin-top: 1rem;
}

html {
    scroll-behavior: smooth;
}



/* NAV MOBILE */

.logo {
    width: 65vw;
    margin-bottom: 0;
    padding-top: .3rem;
    color: rosybrown;
    margin-left: 1rem;

}



.portada {
    position: relative;
    z-index: 1;
    height: 100vh;
    overflow: hidden;
}

.portada-img {
    position: absolute;
    height: 100vh;
    object-fit: cover;
    bottom: 0;
}

.portada-titulo {
    position: absolute;
    bottom: 8%;
    z-index: 1000;
    right: 7%;
}


.btn-eng {
    top: 31px;
    font-size: 1.4rem;
    right: 50px;
    margin-right: 0.3rem;
    position: fixed;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}


.redes {
    font-size: 1.4rem;
    display: flex;
    justify-content: end;
    align-items: end;
    gap: 1.1rem;
    margin-top: 2.2rem;

}

.nav-link {
    color: white;
    transition: color .2s, 1s ease;

}

.nav-link:hover {
    color: rosybrown;

    font-style: italic;
    transform: scale(1.1);
}


.s:hover {
    color: darkgreen;
}

.y:hover {
    color: red;
}

.ig:hover {
    color: purple
}

.f:hover {
    color: blue;
}

.nav-list {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 3.5rem;
    /*  margin-top: .3rem; */
    margin-bottom: 0;
    font-size: 1.4rem;
    font-family: "Noto Sans JP", sans-serif;
}



.nav-list li a:hover {
    color: rosybrown;
    transition: color .3s;
    font-style: italic;
}

.abrir-menu,
.cerrar-menu {
    display: block;
    border: 0;
    font-size:
        /* 1.25rem; */
        2rem;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-self: end;
    /* color: #ececec; */
    margin-bottom: 1.2rem;

}

.abrir-menu {
    color: #cfa6a6;
}

.cerrar-menu {
    color: #ececec;
}


.nav {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    max-height: 0;
    align-items: end;
    gap: 1rem;
    position: absolute;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    padding: 2rem;
    padding-right: 1rem;
    transition: opacity 1s ease-in-out, max-height 1s ease-in-out, visibility 0s 1s;
}

.nav.visible {
    opacity: 1;
    visibility: visible;
    max-height: 100vh;
    transition: opacity 1s ease-in-out, max-height 1s ease-in-out;
}

.contact {
    margin-right: 0;
}

.fade-in {
    opacity: 0;
    /*    transform: translateY(20px); */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.show {
    opacity: 1;
    /*   transform: translateY(0); */
}


.fade-in1 {
    opacity: 0;
    transform: translateX(-100px);
    transition: transform 1s ease-out;
}

.fade-in1.show {
    opacity: 1;
    transform: translateX(0);
}

.fade-in2 {
    opacity: 0;
    transform: translateX(100px);
    transition: transform 1s ease-out;
}

.fade-in2.show {
    opacity: 1;
    transform: translateX(0);
}


/* GRILLA DE FOTOS GALERIA */
.photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 10px;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 1rem;
    margin-top: 1rem;
    justify-content: center;
    align-self: center;
}

.photo-grid img {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.3s ease;
    object-fit: cover;
}

.photo-grid img:hover {
    transform: scale(1.05);
}


/* Diferenciación de clases */
.photo-grid img.vertical {
    grid-row: span 2;
    /* Las imágenes verticales ocupan dos filas */
}

.photo-grid img.horizontal {
    grid-column: span 1;
    /* Las imágenes horizontales ocupan dos columnas */
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;


}

.modal.active {
    display: flex;
}

.slider1 .swiper-wrapper {
    display: flex;
}

.slider1 .swiper {
    width: 100%;
    max-width: 800px;
}

.slider1 .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 500px;
    overflow: hidden;
}




.slider1 .swiper-slide img {
    width: auto;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
}


.modal .close-button {
    position: absolute;
    top: 25px;
    right: 20px;
    color: rgb(178, 153, 178);
    font-size: 40px;
    font-weight: bold;
    font-family: "swiper-icons";
    cursor: pointer;
    z-index: 1100;
}

.modal .close-button:hover {
    font-family: 35px;
    transition: 0.3s;
}


.slider1 .swiper-button-next,
.slider1 .swiper-button-prev {
    color: rgb(178, 153, 178);
    padding: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease;

}

.slider1 .swiper-button-next:hover,
.slider1 .swiper-button-prev:hover {
    transform: scale(1.1);
}


.slider1 .swiper-pagination-bullet {
    background-color: whitesmoke;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.slider1 .swiper-pagination-bullet-active {
    background-color: rgb(178, 153, 178);
    opacity: 1;
    transform: scale(1.2);
}


.slider1 .swiper-button-next::after,
.slider1 .swiper-button-prev::after {
    font-size: 30px;
}


/* Íconos de navegación */
/* .swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 30px;

} */

/* seccion bio */
.bio,.galeria,
.discografia,
.videos,
.prensa,
.docencia,
.clasesycursos {
    margin-top: 1rem;
    width: 90vw;
    border-top: 2px solid rosybrown;
    padding-top: 1rem;
}


.docencia {
    margin-top: 0;
}

.videos {
    border: 0;
}

.bio-titulo,
.discografia-titulo,
.videos-titulo,
.prensa-titulo,
.clases-cursos,
.clases-cursos-en {
    color: rgb(54, 26, 54);
    font-size: 2.5rem;
    display: flex;
    justify-content: start;
    font-weight: 400;
    font-family: "Josefin Sans", sans-serif;
}

.clasesycursos {
    display: flex;
    flex-direction: column;
}

.clases-cursos {
    font-size: 2.2rem;
    text-wrap: nowrap;
    justify-content: start;

}

.clases-cursos-en {
    font-size: 2rem;
    text-wrap: nowrap;
    justify-content: start;
}

.bio-parrafo,
.audio-parrafo,
.clases-parrafo1 {
    display: flex;
    text-align: start;
    justify-content: start;
    font-family: "Noto Sans JP", sans-serif;
    padding-bottom: 0;
    padding-top: 0;
}

.clases-parrafo,
.audio-parrafo1 {
    display: inline;
    text-align: start;
    font-family: "Noto Sans JP", sans-serif;
    padding-bottom: 0;
    padding-top: 0;
    color: whitesmoke;
    margin-bottom: 4rem;
}

.audio-parrafo1 {
    margin-top: .0;
    margin-bottom: 1rem;
}

.clases-parrafo span {
    font-weight: bold;
    margin-right: 0.5rem;
    display: inline;

}

.wrapp-audio span,
.wrapp-canto span,
.wrapp-canto2 span {
    font-weight: bold;
    margin-right: 0.5rem;
    display: inline;
    color: whitesmoke;
    font-size: 1.1rem;
    color: whitesmoke;

}

.wrapp-canto span,
.wrapp-canto2 span {
    color: rgb(54, 26, 54);
}

.wrapp-canto .toggle-icon,
.wrapp-canto2 .toggle-icon {
    color: rgb(54, 26, 54);
}

.wrapp-canto .toggle-icon:hover,
.wrapp-canto2 .toggle-icon {
    color: rgb(54, 26, 54);
}

.span-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.objetivos {
    padding-left: .2rem;
}

.bi-plus-lg {
    margin-left: .5rem;
    cursor: pointer;
    color: whitesmoke;
    transition: color .3s, transform .3s;
}

.bi-plus-lg:hover {
    color: rgb(178, 153, 178);
    transform: scale(1);
}

#toggle-paragraph {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#toggle-paragraph.show {
    display: block;
    opacity: 1;
}

.audio-parrafo1 {
    color: whitesmoke;
}

.audio-parrafo2 {
    display: flex;
    text-align: start;
    padding: 1.2rem;
    justify-content: start;
    align-items: center;
    padding-inline: .3rem;
    font-family: "Noto Sans JP", sans-serif;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    border-radius: 5px;
    color: #33404f;
    background-color: whitesmoke;
    font-size: 1.1rem;
}

.btn-clases2,
.btn-clases-wrapp {
    padding: .5rem;
    background-color: whitesmoke;
    border: 1px solid whitesmoke;
    border-radius: .5rem;
    color: #33404f;
    margin-left: .2rem;
    font-size: 20px;
    margin-top: 1rem;
    transition: color .3s, background-color .3s, transform .3s;
    cursor: pointer;
}

.btn-clases-wrapp {
    font-size: 16px;
}

.btn-clases2:hover,
.btn-clases-wrapp:hover {
    color: whitesmoke;
    background-color: transparent;
    transform: scale(1.1);
}

.clases-parrafo1 {
    margin-bottom: 1rem;

}

.wrapp-intro {
    margin-top: 1rem;
}

.intro-span {
    color: rgb(54, 26, 54);
}

.introduccion {
    color: black;
    text-align: start;
    padding: .5rem;
    align-items: center;
    padding-inline: .3rem;
    font-weight: 500;
    font-size: 1.5rem;
}

.bio-parrafo1 {
    display: flex;
    text-align: start;
    padding: 1rem;
    justify-content: start;
    align-items: center;
    padding-inline: .3rem;
    font-family: "Noto Sans JP", sans-serif;
    /*    border-bottom: 1px solid rgb(54, 26, 54); */
    padding-top: 0;

}

.bio-foto {
    border-radius: 10px;
}

/* SECCION DISCOGRAFIA */
.discos-grilla {
    margin-top: 1rem;
    padding: .5rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 1.5rem;
    flex-direction: column;
}

.discos-grilla img {
    border-radius: 10px;
}

.hoy,.hoy1,
.otra,
.escuadron,
.cuchi,
.delfi {
    border-bottom: 1px solid rgb(178, 153, 178);
}
.hoy,.otra,.hoy1{
padding-bottom:  1rem;
}
.hoy-titulo h4,
.otra-titulo h4,
.escuadron-titulo h4,
.diarios h4,
.radios h4,
.cuchi-titulo h4,
.delfi-titulo h4 {
    margin-top: 1rem;
    font-size: 1.8rem;
    color: rgb(54, 26, 54);
    font-weight: 300;
    font-family: "Josefin sans", sans-serif;
}

.canto-contenido,
.audio-contenido {
    margin-top: 1rem;
    font-size: 1.8rem;
    color: rgb(54, 26, 54);
    font-weight: 300;
    font-family: "Josefin sans", sans-serif;
}

.diarios h4 {
    margin-top: 1rem;
    font-size: 1.8rem;
    color: rgb(54, 26, 54);
    font-weight: 400;
}

.radios h4 {
    margin-top: 2rem;
    font-weight: 400;
}

.hoy-parrafo,
.otra-parrafo,
.escuadron-parrafo,
.cuchi-parrafo,
.delfi-parrafo,
.link-nota {
    display: flex;
    text-align: start;
    margin-top: .5rem;
    margin-bottom: 1.5rem;
    font-family: "Noto Sans JP", sans-serif;
    padding-right: .5rem;

}

.hoy-parrafo {
    margin-bottom: .5rem;
}

.escuadron-span,
.cuchi-span,
.otra-span,
.delfi-span {
    display: flex;
    text-align: start;
    margin-top: .5rem;
    margin-bottom: .5rem;
    font-family: "Noto Sans JP", sans-serif;
    color: rgb(54, 26, 54);
}

.participaciones-titulo,
.clases-canto,
.clases-audio,
.clases-canto1,
.testimonios,
.canto-tango {
    color: whitesmoke;
    font-size: 2rem;
    font-weight: 300;
    margin-top: 1rem;
    margin-bottom: .5rem;
    padding-top: .5rem;
    font-family: "Josefin sans", sans-serif;
    /*   margin-left: .5rem; */
}

.clases-audio {
    color: whitesmoke;
    font-weight: 400;
}

.audio-contenido {
    color: whitesmoke;
}

.participaciones-titulo,
.testimonios {
    color: rgb(54, 26, 54);
    font-weight: 400;
}

.clases-canto1,
.canto-tango {
    color:
        /*  wheat */
        rgb(54, 26, 54);
    font-weight: 400;
}

.testimonios {
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;

}

.clases-canto {
    color: rgb(54, 26, 54);
    font-size: 2rem;
    font-weight: 400;
    margin-top: 1rem;
    margin-bottom: .5rem;
    padding-top: .5rem;
    font-family: "Josefin sans", sans-serif;
    margin-left: .5rem;
}





.clases-audio1 {
    color: rgb(54, 26, 54);
    font-size: 2rem;
    font-weight: 400;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    padding-right: 1rem;
    font-family: "Josefin sans", sans-serif;
    margin-left: .5rem;
    text-wrap: balance;
    display: flex;
}

.link-nota {
    color: whitesmoke;
    margin-left: .2rem;
    /* font-weight: 600; */
    margin-top: 1rem;
    background-color: rgb(54, 26, 54);
    display: inline-block;
    padding: .3rem .6rem;
    padding-top: .2rem;
    text-align: center;
    border-radius: 5px;
    border: 1px solid rgb(54, 26, 54);
    transition: color .3s, background-color .3s, transform .3s;
    cursor: pointer;
}

.link-nota:hover {
    transform: scale(1.05);
    background-color: transparent;
    color: rgb(54, 26, 54);

}


/* SECCION VIDEOS */
.videos {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.grilla-videos {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /*    background-color: rosybrown; */
    padding: 1rem;
}

.videos-wrapp {
    background-color: rgba(240, 233, 233, 0.932);
    padding-bottom: 1rem;
}

.videos-titulo {
    padding-top: 1rem;
    margin-left: 2vw;


}

.grilla-videos iframe {
    max-width: 100%;

}

.videos-sub {
    margin-top: .3rem;
    margin-bottom: .2rem;

}

.videos-btn,
.prensa-btn {
    padding: .5rem;
    background-color: rgb(54, 26, 54);
    border: 1px solid rgb(54, 26, 54);
    border-radius: .5rem;
    color: whitesmoke;
    margin-left: .5rem;
    font-size: 20px;
    margin-top: .5rem;
    transition: color .3s, background-color .3s, transform .3s;
    cursor: pointer
}

.prensa-btn {
    margin-left: .2rem;
}

.videos-btn:hover,
.prensa-btn:hover {
    color: rgb(54, 26, 54);
    background-color: transparent;
    border: 1px solid rgb(54, 26, 54);
    transform: scale(1.05);

}

.btn-clases,
.btn-clases3,
.btn-clases0 {
    padding: .5rem;
    background-color: rgb(54, 26, 54);
    border: 1px solid rgb(54, 26, 54);
    border-radius: .5rem;
    color: whitesmoke;
    margin-left: .2rem;
    font-size: 20px;
    margin-top: .5rem;
    transition: color .3s, background-color .3s, transform .3s;
    cursor: pointer
}

.btn-clases0 {
    margin-left: .42rem;

}

.btn-clases3 {
    background-color: rgb(54, 26, 54);
    color: whitesmoke;
}

.btn-clases3:hover {
    color: rgb(54, 26, 54);
    background-color: transparent;
    transform: scale(1.1);
}

.btn-clases:hover,
.btn-clases0:hover {
    color: rgb(54, 26, 54);
    background-color: transparent;
    transform: scale(1.1);
}

/* SECCION PRENSA */
.diarios,
.radios {
    border-bottom: 1px solid rosybrown;
    /* font-weight:lighter; */
}

.nota {
    margin-bottom: 1rem;
}

.grilla-prensa img {
    border: 1px solid rgb(54, 26, 54);
    border-radius: 5px;
    box-shadow: 1px 1px 1px 1px rgb(183, 162, 183);
}

.prensa-sub {
    color: rgb(54, 26, 54);
    margin-top: 1.5rem;
    margin-bottom: .3rem;
    font-size: 1.3rem;
}

/* SECTION CONTACTO */
.contacto {
    margin-top: 1.2rem;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.img-wrapper {
    height: auto;
    overflow: hidden;
    background-color: rgb(54, 26, 54);
}

.contacto-titulo,
.contacto-titulo-en {
    position: absolute;
    top: 47%;
    /*   top:2vw; */
    right: 4%;
    z-index: 999;
    letter-spacing: .2rem;
    color: rgb(54, 26, 54);
    font-size: 10vw;
    display: flex;
    justify-content: start;
    font-weight: 400;
    font-family: "Josefin Sans", sans-serif;

}

.contacto-titulo-en {
    right: 7%;
    top: 50%;
}

.contacto-parrafo,
.contacto-parrafo-en {
    position: absolute;
    bottom: 6%;
    z-index: 999;
    right: 3%;
    text-wrap: balance;
    text-align: end;
}
.contacto-parrafo-en{
    right: 6.2%;
}

.resalta,
.resalta-en {
    color: rgb(54, 26, 54);
    font-weight: 600;

}


.redes2,
.redes2-en {
    position: absolute;
    z-index: 999;
    top: 65%;
    right: 10%;
    color: rgb(54, 26, 54);
    font-size: 4.8vw;
    display: flex;
    justify-content: end;
    align-items: end;
    gap: 1rem;
    margin-top: .5rem;

}

.nav-link1 {
    color: rgb(54, 26, 54);
    transition: color .2s, 1s ease;
}

.nav-link1:hover {
    transform: scale(1.1);
}

.s:hover {
    color: darkgreen;
}

.y:hover {
    color: red;
}

.ig:hover {
    color: purple
}

.f:hover {
    color: blue;
}

.w:hover {
    color: green;
}

.m:hover {
    color: #ececec;
}



/* FOOTER MOBILE */
.footer {
    background-color: rgb(54, 26, 54);
    color: #ececec;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    text-align: center;
    padding-bottom: 1.5rem;
    position: relative;
}


.logo-footer {
    width: 10rem;
    margin-top: 1rem;
    margin-left: 1rem;
}

.footer-parrafo {
    display: flex;
    text-align: start;
    text-wrap: nowrap;
}

.footer-parrafo a{
    text-align: start;
}
.encabezado {
    margin-bottom: 1rem;
    margin-left: .9rem;
}


.copi {
    font-size: .8rem;
    margin-left: 1rem;
    margin-top: .5rem;
}

.btn-footer {
    position: fixed;
    right: 5%;
    font-size: 2rem;
    cursor: pointer;
    bottom: 0;

}
.btn-eng.show {
    opacity: 1;
    pointer-events: auto;
} 
#arriba{
    background-color:rgb(104, 56, 104) ;
    padding: .2rem;
    border: none;
    border-radius: 5px;
    color: whitesmoke;
    font-size: 1.1rem;
    right:25px;
    bottom: 23px;
    position: fixed;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}
#arriba:hover{
    color: rgb(178, 153, 178);
    background-color: transparent;
    border: 1px solid rgb(178, 153, 178);
}
#arriba.show{
    opacity: 1;
    pointer-events: auto;
}
@media screen and (min-width: 768px) {

    /* PORTADA */
    .logo {
        width: 320px;

    }

    /* DISCOGRAFIA */
    .discos-grilla {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .discos-grilla img {
        width: 100%;
    }

    .otra img {
        width: 100%;
    }

    /* VIDEOS */
    .grilla-videos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        padding: 2rem;
        padding-bottom: .5rem;
        margin-bottom: .5rem;
    }

    /* PRENSA */

    .grilla-prensa {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1.7rem;
    }

    /* CONTACTO */
    .contacto-titulo,
    .contacto-titulo-en {
        font-size: 5rem;
        font-weight: 300;
        color: rgb(54, 26, 54);
        margin-bottom: 1rem;
        font-family: "Josefin Sans", sans-serif;
        letter-spacing: .3rem;
        top: 54%;
        position: absolute;
    }

    .contacto-titulo-en {
        right: 5%;
    }

    .redes2 {
        margin-top: 2.3rem;
        gap: 1.5rem;
        right: 12%;
    }

    .contacto-parrafo,
    .contacto-parrafo-en {
        font-size: 1.5rem;
        right: 8%;
        bottom: 9%;

    }

    /* titulo clases y cursos */
    .d-img {
        position: absolute;
        width: 100%;
        height: 100vh;
        object-fit: cover;
        bottom: 0;
        margin-bottom: 0;
        object-position: bottom;
    }
}

@media screen and (min-width: 1200px) {

    section {
        scroll-margin-top: 1rem;
    }

    header {
        padding-right: 2.5rem;
    }


    .portada-titulo {
        bottom: 2%;
        right: 3%;
    }

    .portada-img {
        position: absolute;
        width: 100%;
        object-position: center;
    }

    .portada {
        height: 100vh;
    }

    .logo {
        width: 320px;
        margin-left: 1rem;
        padding-top: .3rem;
    }

    .nav-link {
        color: #ececec;
        font-size: 1.3rem;
    }

    .redes {
        font-size: 1rem;
        display: flex;
        justify-content: end;
        align-items: end;
        gap: 1.1rem;
        margin-bottom: 1rem;
        margin-top: 1.3rem;
    }

    .btn-eng {
        top: 31px;
        right: 70px;
    }



    .nav {
        padding-right: 2.5rem;
    }

    .nav-list {
        gap: 2rem;
    }


    /* SECCION BIO */

    .bio,
    .discografia,
    .videos,.galeria {
        width: 90vw;
        border-top: 2px solid rosybrown;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding-top: 1rem;
    }

    .clasesycursos {
        border-top: 2px solid rosybrown;
        margin-top: 2rem;
    }

    .bio-encabezado {
        display: grid;
      /*   grid-template-columns: 1fr 1fr; */
        gap: 1.5rem;
        justify-content: center;
        align-content: start;

    }

    .bio-titulo,
    .discografia-titulo,
    .videos-titulo,
    .prensa-titulo,
    .clases-cursos,
    .clases-cursos-en {
        font-size: 5rem;
        font-weight: 300;
        color: rgb(54, 26, 54);
        margin-bottom: 1rem;
        display: flex;
        justify-self: start;
        align-self: start;
        font-family: "Josefin Sans", sans-serif;
    }

    .bio-foto {
        border-radius: 10px;
    }

    .bio-parrafo {
        display: flex;
        text-align: start;
        padding: .5rem;
        padding-top: 0;
        justify-content: center;
        padding-left: 1rem;
        padding-inline: .3rem;
        font-family: "Noto Sans JP", sans-serif;
        padding-bottom: 0;
    }

    .bio-parrafo1 {
        display: flex;
        text-align: start;
        padding: .5rem;
        padding-top: 0;
        justify-content: center;
        padding-left: 1rem;
        padding-inline: .3rem;
        font-family: "Noto Sans JP", sans-serif;
        /*    border-bottom: 1px solid rgb(54, 26, 54); */
    }



    .intro-span {
        font-size: 2rem;
    }

    .wrapp-intro {
        padding: .5rem;
        padding-left: 0;
        padding-bottom: 1rem;
        border-radius: 5px;
        /*  margin-left: .5rem; */
        margin-right: .5rem;
        margin-bottom: .5rem;
    }
   


    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        margin-top: 0;
    } 

    .slider1 .swiper-container {
        width: 50%;
        margin: 0 auto;
        overflow: hidden;
    }

    .slider1 .swiper-wrapper {
        width: 100%;
    }



    .modal.active {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .discos-grilla {
        margin-top: 1rem;
        padding: .5rem;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
    }

    /* DISCOGRAFIA */
    .discos-grilla {
        gap: 1rem;
    }

    .hoy,.hoy1,
    .otra,
    .escuadron,
    .cuchi,
    .delfi {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 3rem;
        margin-bottom: 3rem;
        background-color: rgba(240, 233, 233, 0.932);
        padding: .7rem;
        border-radius: 10px;
        border-bottom: none;
    }

    .hoy,.hoy1 {
        margin-bottom: 5rem;
        margin-top: 1rem;
    }
.hoy img, .hoy iframe{
    align-self:  center;
}
.hoy1 img,.hoy1 iframe{
    height: 500px;
    object-fit:cover;
    object-position: center;
    max-width: 100%;
}
    .hoy-titulo h4,
    .otra-titulo h4,
    .escuadron-titulo h4,
    .cuchi-titulo h4,
    .delfi-titulo h4 {
        font-size: 1.5rem;
        margin-top: .3rem;
    }

    .escuadron-titulo h4 {
        text-wrap: nowrap;
    }

    .canto-contenido h3,
    .audio-contenido h3 {
        margin-top: 0;
        font-size: 2.5rem;
    }

    .participaciones-titulo {
        display: flex;
        font-size: 3rem;
        justify-self: start;
        align-self: start;
    }

    .hoy-parrafo,
    .otra-parrafo,
    .escuadron-parrafo,
    .cuchi-parrafo,
    .delfi-parrafo {
        font-size: .9rem;
        padding-inline: .3rem;
        padding-right: .5rem;
    }

    .otra-parrafo {
        margin-bottom: .5rem;
    }

    .escuadron-titulo {
        text-wrap: balance;
    }

    .escuadron img,
    .escuadron iframe {
        display: grid;
        align-self: center;
        margin-bottom: 1rem;
    }

    /* SECCION VIDEOS */
    .videos {
        display: grid;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .videos-wrapp {
        padding-bottom: 1rem;
    }

    .grilla-videos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        padding: 2rem;
        padding-bottom: .5rem;
        margin-bottom: .5rem;
    }

    .grilla-clases1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.7rem;
        padding-top: 1rem;
    }

    .videos-btn {
        display: grid;
        justify-self: start;
        margin-left: 2.2vw;
    }

    .videos-wrapp {
        background-color: rgba(240, 233, 233, 0.932);
    }

    .videos-titulo {
        padding-top: 1rem;
        margin-bottom: 0;
    }

    .videos-sub {
        color: rgb(54, 26, 54);
    }

    /* SECCION PRENSA */

    .diarios h4,
    .radios h4 {
        color: rgb(54, 26, 54);
        font-weight: 400;
        font-family: "Josefin sans", sans-serif;
        font-size: 3rem;
        justify-content: start;
        align-self: start;

    }

    .prensa {
        width: 90vw;
        border-top: 2px solid rosybrown;
        display: grid;
        padding-top: 1rem;
    }

    .grilla-prensa {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.7rem;
    }

    .prensa-sub {
        font-size: 1.5rem;
    }

    /* SECCION CONTACTO */
    .img-wrapper {
        width: 100%;
        height: 600px;
        overflow: hidden;
    }

    .img-wrapper img {
        max-width: 100%;
    }

    .contacto-titulo,
    .contacto-titulo-en {
        font-size: 5rem;
        font-weight: 300;
        color: rgb(54, 26, 54);
        margin-bottom: 1rem;
        font-family: "Josefin Sans", sans-serif;
        letter-spacing: .3rem;
        top: 54%;
        right: 13%;
        position: absolute;
    }

.contacto-titulo-en {   
    right: 16%;
}
    .redes2,
    .redes2-en {
        font-size: 1.5rem;
        gap: 1.9rem;
        right: 21%;
        top: 72% ;
        margin-top: .5rem;
    }

    

    .contacto-parrafo,
    .contacto-parrafo-en {
        font-size: 1.5rem;
        right: 3.2%;
        bottom: 9.5%;
        left: unset;
        display: flex;
        text-align: end;


    }

    .resalta-en ,.resalta{
        margin-left: .2rem;
    }

    /* FOOTER */
    .logo-footer {
        width: 10rem;
    }

    .footer-parrafo {
        font-size: 1rem;
        margin-top: 1rem;
    }

    .copi {
        font-size: 1rem;
        margin-top: 1rem;
        margin-bottom: .5rem;
    }
}

/* SECCION DOCENCIA INDEX MOBLE */

.docencia {
    padding-top: 0;
    overflow: hidden;
    border-top: none;
    width: 100%;
    display: flex;
    flex-direction: column;

}

.nati-cursos-desktop {
    display: none;

}

.btn-clases-cursos {
    background-color: rgb(178, 153, 178);
    padding: .5rem;
    padding-bottom: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    margin-left: .5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

}

.wrapp-cursos {
    display: flex;
    justify-content: start;
    flex-direction: column;
}

.wrapp-cursos p {
    padding-left: .5rem;
    padding-right: .5rem;
}

.video-clases video {
    width: 100%;
    height: auto;
}

.alumnos {
    padding: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 10px;
    border: 1px solid rgb(54, 26, 54);
    width: 90vw;
    margin-top: 2rem;
}

.portada-d {
    position: relative;
    z-index: 1;
    height: 100vh;
    overflow: hidden;
    object-fit: cover;
}

.clases-canto {
    text-wrap: balance;

}

.d-img {
    position: absolute;
    height: 100vh;
    object-fit: cover;
    margin-bottom: 0;
    object-position: bottom;
}

.portada-docencia {
    color: whitesmoke;
    font-size: 2rem;
    display: flex;
    justify-content: start;
    align-self: start;
    font-weight: 400;
    font-family: "Josefin Sans", sans-serif;
    position: absolute;
    z-index: 1000;
    bottom: 8%;
    right: 2%;
    text-wrap: nowrap;
    max-width: 100%;
}

.audio-parrafo,
.clases-parrafo {
    margin-bottom: 1rem;
}

.clases-parrafo {
    color: rgb(54, 26, 54);
}

.audio-parrafo,
.clases-parrafo1 {
    color: rgb(54, 26, 54)
}

.img-audio {
    gap: 2rem;
    display: grid;
    margin-bottom: 1rem;
}

.canto-tango {
    margin-top: 1rem;
    margin-bottom: .5rem;
}


.canto-contenido {
    margin-bottom: 1rem;
    margin-top: 2rem;

}

.wrapp-canto {
    background-color: rgb(178, 153, 178);
    margin-bottom: 0;
    margin-top: 0;
    padding: 1rem;
}

.wrapp-canto p {
    padding-left: .2rem;
}

.wrapp-canto video,
.wrapp-canto2 video,
.wrapp-audio video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 1rem;
}

.wrapp-audio2 {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background-color: #586676;
    padding-bottom: 2rem;
    gap: 1rem;
}

.wrapp-audio p {
    padding-left: .2rem;
}

.wrapp-audio {
    margin-bottom: 0;
    background-color: #33404f;
    margin-top: 0;
    padding: 1rem;
}

.wrapp-audio p,
.wrapp-canto2 p {
    padding-left: .2rem;
}


.wrapp-canto2 {
    padding: 1rem;
    background-color: rgba(240, 233, 233, 0.932);
    padding-bottom: 1rem;
}

.grilla-clases {
    margin-top: 0;
    margin-bottom: 0;
}

/* SWIPPER */
.slider2 .swiper {
    width: 80vw;
    z-index: 0;
    padding-bottom: 2.5rem;
    margin-top: 2rem;
    overflow: hidden;
}

.slider2 .swiper-slide {
    background-color: rgba(240, 233, 233, 0.932);
    padding: 1.5rem 2rem 2rem 2.4rem;
    border-radius: .5rem;
    border: 1px solid rgba(228, 205, 205, 0.932);
    transition: .2s;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

@media (hover: hover) {
    .slider2 .swiper-slide:hover {
        border-color: rgb(54, 26, 54);
    }
}

.slider2 .swiper-button-next,
.slider2 .swiper-button-prev {
    top: 45%;
}

.slider2 .swiper-button-next::after,
.slider2 .swiper-button-prev::after {
    /*   font-size: 1rem;
    color: rgb(54, 26, 54);  */
    display: none;
}

.slider2 .swiper-pagination-bullet {
    background-color: rgb(54, 26, 54);
    opacity: 1;
}

.slider2 .swiper-pagination-bullet-active {
    background-color: rgba(240, 233, 233, 0.932);
}

.comment-header {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.comment-icon {
    font-size: .75rem;
    width: 1.4rem;
    height: 1.4rem;
    background-color: rgb(178, 153, 178);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: black;
}

.comment-name {
    font-size: .9rem;
    font-family: "Josefin Sans", sans-serif;
}

.comment-type {
    font-size: .8rem;
    color: black;
    margin-top: auto;
    font-family: "Josefin Sans", sans-serif;
}

.comment-body {
    font-size: .9rem;
    line-height: 1.3;
    font-family: "Noto Sans JP", sans-serif;
}

.comment-type span {
    display: block;
    font-size: .8rem;
    color: black;
}


/* FOOTER DOCENCIA MOBILE */
.redes-footer {
    font-size: 1rem;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 2rem;
    margin-top: 1rem;
    margin-left: 1.5rem;
    margin-bottom: 1rem;

}

@media screen and (min-width: 768px) {
    .portada-docencia {
        font-size: 3rem;
    }
}

@media screen and (min-width: 1200px) {

    .portada-docencia {
        font-size: 5rem;
        font-weight: 300;
        color: whitesmoke;
        margin-bottom: 1rem;
        display: flex;
        justify-self: start;
        align-self: start;
        font-family: "Josefin Sans", sans-serif;
        bottom: 4%;
        letter-spacing: .3rem;
        flex-direction: row;
        padding: 0;
        right: 2%;
        text-wrap: nowrap;
    }

    .wrapp-canto {
        background-color:
            /*  #33404f */
            rgb(178, 153, 178);
        /*  margin-bottom: 5rem; */
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 2.5rem;
    }

    .wrapp-canto video {
        margin-top: 3rem;
        border-radius: 10px;
        display: grid;
    }

    .wrapp-canto2 {
        background-color: rgba(240, 233, 233, 0.932);
        margin-top: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        gap: 1.3rem;
    }

    .wrapp-canto2 video {
        margin-top: 1rem;
        border-radius: 10px;

    }

    .wrapp-audio {
        margin-bottom: 0;
        background-color: #33404f;
        margin-top: 0;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .wrapp-audio video {
        margin-top: 1rem;
        border-radius: 10px;
    }

    .wrapp-audio2 {
        margin-bottom: 0;
        background-color: #586676;
        padding-top: 2rem;
        padding-bottom: 3rem;
        padding-left: 2rem;
        padding-right: 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.3rem;
    }

    .audio-contacto {
        padding-top: 1.5rem;
        display: grid;
        grid-column: 1 / 4;
        width: 80%;
        justify-self: center;
    }

    .audio-parrafo2 {
        display: grid;
        text-align: center;
        padding: 1.2rem;
         justify-content: center;
        align-items: center;
        padding-inline: .3rem;
        font-family: "Noto Sans JP", sans-serif;
        padding-bottom: .5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: .5rem;
        border-radius: 5px;
        color: #33404f;
        background-color: whitesmoke;
        font-size: 1.2rem;
  /*       box-shadow: 1px 1px 1px 1px #e2e8f0; */
    }

    .btn-clases2 {
        padding: .5rem;
        background-color: whitesmoke;
        border: 1px solid whitesmoke;
        border-radius: .5rem;
        color: #33404f;
        margin-left: .2rem;
        font-size: 20px;
        margin-top: 1rem;
        transition: color .3s, background-color .3s, transform .3s;
        cursor: pointer;

    }

    .btn-clases2:hover {
        background-color: transparent;
        color: whitesmoke;
    }

    .alumnos {
        margin-top: 2rem;
        width: 90vw;

    }

    .nati-cursos-desktop {
        display: initial;
        border-radius: 5px;
    }

    .portada-d {
        height: 100vh;
        width: 100%;
        object-fit: cover;
    }

    .d-img {
        position: absolute;
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: top;
    }

    .btn-clases-cursos {
        display: grid;
        grid-template-columns: 1fr 1fr 2fr;
        gap: 2rem;
        margin-top: 0;
        margin-left: 0;
        padding: 1rem;
        width: 100%;
    }


    .video-clases {
        display: grid;
        align-self: center;
        width: 100%;
    }

    .video-tango {
        background-color: rgb(178, 153, 178);
        display: grid;
        align-self: end;
        width: 100%;
    }

    .video-clases iframe {
        border-radius: 5px;
    }

    .canto-contenido,
    .audio-contenido {
        margin-top: 2rem;
        font-size: 2rem;
        /*    padding-left: .5rem; */
        margin-bottom: 1rem;
    }

    .audio-contenido {
        color: whitesmoke;
    }

    .clases-canto1,
    .clases-audio,
    .testimonios,
    .canto-tango {
        color: whitesmoke;
        font-size: 2.5rem;
        font-weight: 300;
        margin-top: 1rem;
        margin-bottom: .5rem;
        padding-top: .5rem;
        font-family: "Josefin sans", sans-serif;
        margin-left: 0;
    }

    .canto-tango {
        margin-top: 1rem;
        color: rgb(54, 26, 54);
        font-weight: 400;
        padding-left: 0;
        margin-left: 0;
        margin-bottom: 1rem;
    }

    .clases-audio {
        color: whitesmoke;
        font-weight: 400;
        margin-bottom: 1rem;
    }

    .clases-canto1 {
        color: rgb(54, 26, 54);
        font-weight: 400;
        margin-left: 0;
    }

    .testimonios {
        font-size: 3.5rem;
        margin-bottom: 3rem;
        color: rgb(54, 26, 54);
    }

    .clases-audio {
        text-wrap: nowrap;
    }

    /* testimonios swiper */

    .slider2 .swiper-button-next::after,
    .slider2 .swiper-button-prev::after {
        font-size: 1rem;
        color: rgb(54, 26, 54);
        display: inherit;
    }

    .slider2 .swiper {
        width: 100%;
    }

    /* FOOTER DOCENCIA */
    .redes-footer {
        margin-top: 1rem;
        margin-bottom: 1.5rem;
        margin-left: 1rem;
    }

    .copi {
        margin-top: 1.3rem;
        margin-left: 1rem;
    }

    .footer-parrafo {
        margin-top: .5rem;
    }
    .btn-eng.show {
        opacity: 1;
        pointer-events: auto;
    } 
    #arriba{
        background-color:rgb(104, 56, 104) ;
        padding: .2rem;
        border: none;
        border-radius: 5px;
        color: whitesmoke;
        font-size: 1.5rem;
        right: 2%;
        bottom:5%;
        position: fixed;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
    }
    #arriba.show{
        opacity: 1;
        pointer-events: auto;
    }
}