@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Yeseva+One&display=swap');

:root {
    --color-blanco: #ffffff;

    /* --main-color-1: #F26353; */
    --main-color-1: #65C2CB;
    --main-color-2: #84c3be;
    --main-color-3: #3D3D3D;
    --main-color-4: #293133;


    --text-color-1: #000000;
    --text-color-2: #ffffff;
}

body{
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

html {
font-size: 62.5%;
}

a {
color: var(--main-color-1);
text-decoration: none;
}

ul, li, ol {
    list-style: none;
    padding: 0;
}

ol {
    padding: 0 !important;
}

h1, h2, h3, h4 {
    text-align: left;
    font-family: "Yeseva One", serif;
    font-weight: 400;
    font-style: normal;
}

h2 {
    font-size: 5rem;
    color: black;
    font-weight: 500;
    width: 90%;
    text-align: left;
    margin: 1rem 0 3rem 0;
    line-height: 1;
}

h2 span {
    color: var(--main-color-1);
}

h5 {
    font-size: 2rem;
    color: grey;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
}

h6 {
    font-size: 2rem;
    color: black;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;

}

P, li {
    font-family: "poppins", sans-serif;
    font-optical-sizing: auto;
    font-size: 1.6rem;
    line-height: 1.5;
}

.flex{
    display: flex;
    align-items: center;
}

.contenidoBloqueSeccion {
    width: 75%;
    margin: 0 auto;
    padding: 10rem 0;
}

.boton{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 32px;
    margin-top: 30px;

    background: var(--main-color-1);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 15px;

    border: 2px solid var(--main-color-1);
    border-radius: 50px;

    transition: all .3s ease;
    cursor: pointer;
}

.boton:hover{
    background: #fff;
    color: var(--main-color-1);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(101, 194, 203, .25);
}



/* cabecera index */

.display {
    display: block;
}

.logo {
    width: 100%;
    max-width: 130px;
    padding: 1rem;
    cursor: pointer;
}

.navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    background: #fff;
    z-index: 9999;

    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

main{
    padding-top: 100px;
}

.navContainer {
    justify-content: space-between;
    padding: 0 10rem 0 7rem;
}

.navbar-collapse {
    margin-left: auto;
}

.navbar-nav {
    gap: 4rem;
    margin: 0;
}

.nav li a {
    color: black;
    font-size: 14px;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
}

/* PIE */

.whatsapp{
    position: fixed;
    bottom: 25px;
    right: 25px;

    width: 65px;
    height: 65px;

    border-radius: 50%;
    background: #25D366;

    display: flex;
    justify-content: center;
    align-items: center;

    box-shadow: 0 8px 20px rgba(0,0,0,.25);

    transition: .3s;

    z-index: 9999;
}

.whatsapp:hover{
    transform: scale(1.1);
}

.whatsapp img{
    width: 34px;
    height: 34px;
}



/* INDEX  */

.carruselInicio {
    position: relative;
    min-height: 72vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 12rem 8rem 8rem;
    isolation: isolate;
}

.carruselSlide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.04);
    animation: carruselInicio 20s infinite;
    z-index: -3;
}

.carruselSlide1 {
    background-image: url("1erActoMatilda_010326_0212.JPG");
}

.carruselSlide2 {
    background-image: url("1erActoMatilda_010326_0355.JPG");
    animation-delay: 5s;
}

.carruselSlide3 {
    background-image: url("1erActoMatilda_010326_0348.JPG");
    animation-delay: 10s;
}

.carruselSlide4 {
    background-image: url("1erActoMatilda_010326_0539.JPG");
    animation-delay: 15s;
}

.carruselCapa {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .5) 42%, rgba(255, 255, 255, .18) 100%),
        rgba(255, 255, 255, .1);
    backdrop-filter: blur(.5px);
    z-index: -1;
}

.carruselTexto {
    max-width: 62rem;
}

.carruselTexto h1 {
    color: #06101e;
    font-size: clamp(4.6rem, 7vw, 9rem);
    line-height: .95;
    margin: 0;
}

.carruselTexto p {
	display: inline-block;
	color: #fff;
	font-size: clamp(2rem, 2.4vw, 3.2rem);
	font-weight: 600;
	line-height: 1.3;
	margin: 2rem 0 0;
	padding: .45rem 1.2rem .55rem;
	background: var(--main-color-2);
	border-bottom: .35rem solid var(--main-color-1);
	box-sizing: border-box;
}

@keyframes carruselInicio {
    0% {
        opacity: 0;
        transform: scale(1.04);
    }

    6%,
    25% {
        opacity: 1;
        transform: scale(1);
    }

    31%,
    100% {
        opacity: 0;
        transform: scale(1.04);
    }
}

.marqueeInicio {
    overflow: hidden;
    background: var(--main-color-2);
    border-top: 1px solid rgba(255, 255, 255, .45);
    border-bottom: 4px solid var(--main-color-1);
    color: var(--text-color-2);
    padding: 1.7rem 0 1.4rem;
}

.marqueeContenido {
    display: flex;
    width: max-content;
    animation: marqueeInicio 24s linear infinite;
}

.marqueeGrupo {
    display: flex;
    flex: 0 0 auto;
    gap: 3.4rem;
    padding-right: 3.4rem;
}

.marqueeGrupo span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    font-family: "Josefin Sans", sans-serif;
    font-size: clamp(1.7rem, 2vw, 2.4rem);
    font-weight: 700;
    letter-spacing: .22rem;
    line-height: 1;
    white-space: nowrap;
}

.marqueeGrupo span::after {
    content: "·";
    color: white;
    margin-left: 3.4rem;
}

@keyframes marqueeInicio {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-33.333%);
    }
}

.quienesSomosInicio {
    width: 100%;
}

.quienesSomosInicio .contenidoBloqueSeccion {
    display: flex;
    justify-content: space-between;
    gap: 10rem;
}

.quienesSomosInicio img {
    width: 100%;
    max-width: 500px;
}

.clasesInicio {
    background-color: whitesmoke;
}

.clasesInicio .contenidoBloqueSeccion > div {
    width: 100%;
}

.profesores {
    background: linear-gradient(135deg, #f4fbfb 0%, #ffffff 55%, #edf8f8 100%);
}

.profesores .contenidoBloqueSeccion {
    text-align: center;
}

.profesores h1 {
    margin: 1rem auto 1.5rem;
    color: var(--main-color-4);
    font-size: clamp(3.6rem, 5vw, 5.8rem);
    text-align: center;
}

.profesores h1 span {
    color: var(--main-color-1);
}

.profesoresIntro {
    max-width: 65rem;
    margin: 0 auto;
}

.profesoresGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    margin-top: 6rem;
}

.profesorCard {
    position: relative;
    padding: 2rem 2rem 2.8rem;
    overflow: hidden;
    border: 1px solid rgba(101, 194, 203, .22);
    border-radius: 2.4rem;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 1.2rem 3rem rgba(41, 49, 51, .08);
    text-align: left;
    transition: transform .4s ease, box-shadow .4s ease;
}

.profesorCard::after {
    content: "";
    position: absolute;
    right: -4rem;
    bottom: -5rem;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    background: rgba(101, 194, 203, .12);
    transition: transform .4s ease;
}

.profesorCard:hover {
    transform: translateY(-1rem);
    box-shadow: 0 2rem 4rem rgba(41, 49, 51, .15);
}

.profesorCard:hover::after {
    transform: scale(1.35);
}

.profesorFoto {
    position: relative;
    z-index: 1;
    width: 15rem;
    height: 18rem;
    margin: 0 auto 2.5rem;
    overflow: hidden;
    border-radius: 1.4rem;
}

.profesorFoto img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: saturate(.85);
    transition: transform .6s ease, filter .6s ease;
}

.profesorCard:hover .profesorFoto img {
    transform: scale(1.08);
    filter: saturate(1.1);
}

.profesorInfo {
    position: relative;
    z-index: 1;
}

.profesorDisciplina {
    color: var(--main-color-1);
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .25rem;
}

.profesorInfo h2 {
    width: auto;
    margin: 1rem 0;
    font-size: 2.8rem;
}

.profesorInfo p {
    margin-bottom: 0;
    font-size: 1.4rem;
}

.clasesTarjetas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6rem;
    margin-top: 4rem;
}

.tarjetaClase {
    position: relative;
    min-height: 15rem;
    padding: 2.4rem;
    overflow: hidden;
    border: 1px solid rgba(101, 194, 203, .25);
    border-radius: 1.8rem;
    background: linear-gradient(145deg, #ffffff 0%, #f2fbfb 100%);
    box-shadow: 0 1rem 2.5rem rgba(41, 49, 51, .08);
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.tarjetaClase::after {
    content: "";
    position: absolute;
    right: -3rem;
    bottom: -4rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: rgba(101, 194, 203, .14);
}

.tarjetaClase:hover {
    transform: translateY(-.7rem);
    background: linear-gradient(145deg, #65c2cb 0%, #84c3be 100%);
    box-shadow: 0 1.6rem 3rem rgba(41, 49, 51, .16);
}

.numeroClase {
    display: block;
    color: var(--main-color-1);
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .15rem;
}

.tarjetaClase h3 {
    position: relative;
    z-index: 1;
    margin: 3rem 0 .8rem;
    color: var(--main-color-4);
    font-family: "Yeseva One", serif;
    font-size: 2.2rem;
    font-weight: 400;
}

.tarjetaClase p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.4;
}

.tarjetaClase:hover .numeroClase,
.tarjetaClase:hover h3,
.tarjetaClase:hover p {
    color: #fff;
}

.tiraFotos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.marcoFoto {
    min-width: 0;
    overflow: hidden;
}

.marcoFoto > div {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform .45s ease;
}

.marcoFoto:hover > div {
    transform: scale(1.08);
}

.listaValores{
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.listaValores li{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    line-height: 1.5;
}

.listaValores li::before{
    content: "";
    width: 28px;
    height: 28px;
    flex-shrink: 0;

    background-image: url("sombrero_azul.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* CLASES */

.seccionHorarios {
    max-width: 1500px;
    margin: 13rem auto 6rem;
    padding: 0 1.2rem;
}

.horariosCabecera {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 6rem;
}

.horariosEtiqueta {
    color: var(--main-color-1);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .7rem;
    margin: 0 0 1.8rem;
}

.horariosCabecera h1 {
    color: #06101e;
    font-size: 5.6rem;
    line-height: 1;
    margin: 0;
}

.horariosCabecera h1 span {
    color: var(--main-color-1);
    font-style: italic;
}

.horariosSubtitulo {
    color: #246a72;
    font-size: 1.9rem;
    margin: 1.4rem 0 0;
}

.horariosLeyenda {
    display: flex;
    justify-content: flex-end;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 1.2rem;
    max-width: 380px;
    padding-top: 2.8rem;
}

.chip {
    appearance: none;
    background: transparent;
    border: 1px solid var(--main-color-2);
    border-radius: 999px;
    color: #057d83;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    padding: .9rem 1.4rem;
    white-space: nowrap;
}

.chip:hover,
.chip-activo {
    box-shadow: 0 0 0 2px rgba(24, 173, 168, .22);
    transform: translateY(-1px);
}

.chip::before {
    content: "";
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: currentColor;
}

.chip-canto {
    background: var(--main-color-2);
    border-color: var(--main-color-2);
    color: #ffffff;
}

.chip-musical {
    background: #d9f5f3;
    border-color: #8edbd7;
    color: #087b82;
}

.chip-adultos {
    background: #b9e9e6;
    border-color: var(--main-color-3);
    color: #087b82;
}

.chip-juvenil {
    background: var(--main-color-4);
    border-color: var(--main-color-4);
    color: #ffffff;
}

.chip-infantil {
    background: #e9fbfa;
    border-color: var(--main-color-1);
    color: var(--main-color-1);
}

.chip-jubilados {
    background: #edf6f5;
    border-color: #86bbb8;
    color: var(--main-color-4);
}

.chip-gpro {
    background: #8bd8d4;
    border-color: var(--main-color-2);
    color: #064f52;
}

.chip-danza {
    background: var(--main-color-1);
    border-color: #0f8f8b;
    color: #ffffff;
}

.tablaHorarios {
    min-width: 1180px;
}

.horariosMovil {
    display: none;
}

.modalHorarios { width: min(96vw, 110rem); max-width: none; max-height: 92vh; padding: 1rem; overflow: visible; border: 0; border-radius: 1.4rem; background: #fff; box-shadow: 0 2rem 6rem rgba(0,0,0,.4); }
.modalHorarios::backdrop { background: rgba(20,28,30,.82); backdrop-filter: blur(.4rem); }
.modalHorarios img { display: block; max-width: 100%; max-height: calc(92vh - 2rem); object-fit: contain; }
.cerrarModalHorarios { position: absolute; top: -1.4rem; right: -1.4rem; display: grid; width: 3.8rem; height: 3.8rem; place-items: center; border: 0; border-radius: 50%; background: #65c2cb; color: #293133; font-size: 3rem; line-height: 1; cursor: pointer; }

/* Tarifas */
.seccionTarifas { background: linear-gradient(135deg, #f4fbfb, #fff 52%, #edf8f8); }
.tarifasCabecera { max-width: 70rem; margin: 0 auto 4rem; text-align: center; }
.tarifasCabecera h2 { width: auto; margin: 0 0 1.5rem; color: #293133; font-size: clamp(4rem, 5vw, 5.5rem); text-align: center; }
.tarifasCabecera h2 span { color: #65c2cb; }
.tarifasCabecera p { margin: 0; color: #4c5557; }
.tarifasMatricula { display: flex; align-items: baseline; justify-content: center; gap: 2rem; margin: 0 auto 3rem; padding: 2rem; border-radius: 1.6rem; background: #293133; color: #fff; }
.tarifasMatricula span { color: #8ce5e7; font-family: "Josefin Sans", sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: .2rem; }
.tarifasMatricula strong { font-family: "Yeseva One", serif; font-size: 3.4rem; font-weight: 400; }
.tarifasGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem; }
.tarifaTarjeta { padding: 2.6rem 2rem; border: 1px solid rgba(101,194,203,.28); border-radius: 1.8rem; background: #fff; box-shadow: 0 1rem 2.5rem rgba(41,49,51,.08); }
.tarifaTarjeta h3 { margin: 0 0 1.2rem; color: #293133; font-size: 2.8rem; line-height: 1; }
.tarifaAclaracion { min-height: 4rem; margin: 0 0 1.5rem; color: #397b80; font-family: "Josefin Sans", sans-serif; font-size: 1.3rem; font-weight: 700; }
.tarifaTarjeta ul { margin: 0; }
.tarifaTarjeta li { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: 1.1rem 0; border-top: 1px solid #d9eeee; font-family: "Josefin Sans", sans-serif; font-size: 1.35rem; }
.tarifaTarjeta li strong { color: #293133; }
.tarifaTarjeta li span { color: #148b91; font-weight: 700; white-space: nowrap; }
.tarifaTarjeta li small { grid-column: 1 / -1; color: #687779; font-size: 1.15rem; }
.tarifasMovil { display: none; }
.modalTarifas { width: min(96vw, 64rem); max-width: none; max-height: 92vh; padding: 1rem; overflow: visible; border: 0; border-radius: 1.4rem; background: #fff; box-shadow: 0 2rem 6rem rgba(0,0,0,.4); }
.modalTarifas::backdrop { background: rgba(20,28,30,.82); backdrop-filter: blur(.4rem); }
.modalTarifas img { display: block; max-width: 100%; max-height: calc(92vh - 2rem); object-fit: contain; }
.cerrarModalTarifas { position: absolute; top: -1.4rem; right: -1.4rem; display: grid; width: 3.8rem; height: 3.8rem; place-items: center; border: 0; border-radius: 50%; background: #65c2cb; color: #293133; font-size: 3rem; line-height: 1; cursor: pointer; }

.filaHorario {
    display: grid;
    grid-template-columns: 15rem repeat(10, minmax(7rem, 1fr));
}

.horas {
    color: var(--main-color-1);
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    height: 2.8rem;
    margin-bottom: 1.2rem;
    margin-left: 15rem;
    position: relative;
}

.horas span {
    left: var(--posicion);
    position: absolute;
    top: 1rem;
    text-align: center;
    transform: translateX(-50%);
}

.horas span:not(:first-child)::before {
    content: "";
    position: absolute;
    top: -1.4rem;
    left: 50%;
    width: 1px;
    height: .9rem;
    background: var(--main-color-1);
}

.horas span:nth-child(odd):not(:first-child) {
    color: #bcd7d8;
}

.horas span:first-child {
    display: none;
}

.horas span:nth-child(2) {
    --posicion: 0%;
}

.horas span:nth-child(3) {
    --posicion: 10%;
}

.horas span:nth-child(4) {
    --posicion: 20%;
}

.horas span:nth-child(5) {
    --posicion: 30%;
}

.horas span:nth-child(6) {
    --posicion: 40%;
}

.horas span:nth-child(7) {
    --posicion: 50%;
}

.horas span:nth-child(8) {
    --posicion: 60%;
}

.horas span:nth-child(9) {
    --posicion: 70%;
}

.horas span:nth-child(10) {
    --posicion: 80%;
}

.horas span:nth-child(11) {
    --posicion: 90%;
}

.horas span:nth-child(12) {
    --posicion: 100%;
}

.filaHorario {
    min-height: 13.5rem;
    border: 1px solid #a9e5e3;
    border-radius: 2.6rem;
    overflow: hidden;
}

.filaHorario + .filaHorario {
    margin-top: 1rem;
}

.diaHorario {
    padding: 2rem;
    color: #15202b;
    font-family: "Yeseva One", serif;
    font-size: 2.3rem;
    border-right: 1px solid #d1efee;
}

.diaHorario::after {
    content: "";
    display: block;
    width: 4rem;
    height: 1px;
    margin-top: .9rem;
    background: var(--main-color-1);
}

.eventosHorario {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(10, minmax(7rem, 1fr));
    grid-template-rows: repeat(2, 4.7rem);
    gap: 1.2rem 0;
    align-content: center;
    padding: 1.5rem 0;
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(10% - 1px),
        #d1efee calc(10% - 1px),
        #d1efee 10%
    );
}

.clase {
    grid-column: var(--inicio) / span var(--duracion);
    grid-row: var(--fila);
    border: 1px solid var(--main-color-2);
    border-radius: 1.1rem;
    color: #087b82;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: .9rem 1.4rem;
    font-family: "Josefin Sans", sans-serif;
    overflow: hidden;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

.clase strong {
    display: block;
    font-size: 1.3rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clase small {
    display: block;
    font-size: 1.05rem;
    line-height: 1.2;
    margin-top: .4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.canto {
    background: var(--main-color-2);
    color: #ffffff;
    border-color: #319c98;
}

.musical {
    background: #d9f5f3;
    border-color: #8edbd7;
    color: #087b82;
}

.adultos {
    background: #b9e9e6;
    border-color: var(--main-color-3);
    color: #087b82;
}

.juvenil {
    background: var(--main-color-4);
    border-color: var(--main-color-4);
    color: #ffffff;
}

.danza {
    background: var(--main-color-1);
    border-color: #0f8f8b;
    color: #ffffff;
}

.gpro {
    background: #8bd8d4;
    border-color: var(--main-color-2);
    color: #064f52;
}

.jubilados {
    background: #edf6f5;
    border-color: #86bbb8;
    color: var(--main-color-4);
}

.clase-apagada {
    background: #eeeeee;
    border-color: #b8bfc0;
    color: #111111;
    opacity: .72;
}

@media (max-width: 1250px) {
    .seccionHorarios {
        overflow-x: auto;
        padding-bottom: 2rem;
    }

    .horariosCabecera {
        min-width: 1180px;
    }
}

@media (max-width: 768px) {
    .carruselInicio {
        min-height: 64vh;
        padding: 10rem 2.4rem 5rem;
    }

    .carruselCapa {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .58) 58%, rgba(255, 255, 255, .24) 100%),
            rgba(255, 255, 255, .1);
    }

    .seccionHorarios {
        margin-top: 10rem;
    }

    .horariosCabecera h1 {
        font-size: 4.2rem;
    }
}

/* Rediseño moderno de profesores */
.profesores {
    position: relative;
    overflow: hidden;
    background: var(--main-color-4);
}

.profesores::before,
.profesores::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(101, 194, 203, .25);
    border-radius: 50%;
    pointer-events: none;
}

.profesores::before {
    width: 42rem;
    height: 42rem;
    top: -22rem;
    right: -8rem;
}

.profesores::after {
    width: 25rem;
    height: 25rem;
    bottom: -15rem;
    left: -8rem;
}

.profesores .contenidoBloqueSeccion {
    position: relative;
    z-index: 1;
}

.profesores .horariosEtiqueta {
    color: var(--main-color-1);
}

.profesores h1 {
    max-width: 70rem;
    margin: 1rem 0 1.5rem;
    color: #fff;
    font-size: clamp(4rem, 7vw, 7.2rem);
    letter-spacing: -.2rem;
    line-height: .95;
    text-align: left;
}

.profesoresIntro {
    max-width: 58rem;
    margin: 0;
    color: rgba(255, 255, 255, .72);
}

.profesoresGrid {
    gap: 1.5rem;
    margin-top: 6rem;
}

.profesorCard {
    display: flex;
    flex-direction: column;
    min-height: 39rem;
    padding: 1.4rem;
    border: 0;
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: none;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}

.profesorCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .45rem;
    background: var(--main-color-1);
}



.profesorCard:hover {
    transform: translateY(-1.2rem);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, .25);
}

.profesorFoto {
    width: 100%;
    height: 22rem;
    margin: 0 0 2.2rem;
    border-radius: .8rem;
    box-shadow: none;
    background: var(--main-color-1);
}

.profesorFoto img {
    filter: grayscale(20%) saturate(.8);
}

.profesorCard:hover .profesorFoto img {
    filter: grayscale(0) saturate(1.1);
}

.profesorInfo {
    padding: 0 .8rem .8rem;
}

.profesorDisciplina {
    font-size: 1.1rem;
}

.profesorInfo h2 {
    margin: .8rem 0 1rem;
    color: var(--main-color-4);
    font-size: 2.6rem;
}

.profesorInfo p {
    color: #626b6c;
}

/* Restauración del diseño anterior de profesores */
.profesores {
    background: linear-gradient(135deg, #f4fbfb 0%, #ffffff 55%, #edf8f8 100%);
}

.profesores::before,
.profesores::after,
.profesorCard::before {
    display: none;
}

.profesores h1 {
    max-width: none;
    margin: 1rem auto 1.5rem;
    color: var(--main-color-4);
    font-size: clamp(3.6rem, 5vw, 5.8rem);
    letter-spacing: normal;
    line-height: 1;
    text-align: center;
}

.profesoresIntro {
    max-width: 65rem;
    margin: 0 auto;
    color: inherit;
}

.profesoresGrid {
    gap: 2.5rem;
    margin-top: 6rem;
}

.profesorCard {
    display: block;
    min-height: auto;
    padding: 2rem 2rem 2.8rem;
    border: 1px solid rgba(101, 194, 203, .22);
    border-radius: 2.4rem;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 1.2rem 3rem rgba(41, 49, 51, .08);
    transition: transform .4s ease, box-shadow .4s ease;
}

.profesorCard::after {
    right: -4rem;
    bottom: -5rem;
    background: rgba(101, 194, 203, .12);
}

.profesorCard:hover {
    transform: translateY(-1rem);
    box-shadow: 0 2rem 4rem rgba(41, 49, 51, .15);
}

.profesorFoto {
    width: 15rem;
    height: 18rem;
    margin: 0 auto 2.5rem;
    border-radius: 1.4rem;
    box-shadow: .8rem .8rem 0 var(--main-color-1);
}

.profesorFoto img {
    filter: saturate(.85);
}

.profesorCard:hover .profesorFoto img {
    filter: saturate(1.1);
}

.profesorInfo {
    padding: 0;
}

.profesorDisciplina {
    font-size: 1.2rem;
}

.profesorInfo h2 {
    margin: 1rem 0;
    color: black;
    font-size: 2.8rem;
}

.profesorInfo p {
    color: inherit;
}

/* Fotos flotantes y enlaces sociales de profesores */
.profesoresGrid {
    margin-top: 10rem;
}

.profesorCard {
    overflow: visible;
    padding-top: 13rem;
}

.profesorFoto {
    position: absolute;
    top: -7rem;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    margin: 0;
    transition: transform .4s ease;
}

.profesorCard:hover .profesorFoto {
    transform: translateX(-50%) rotate(-3deg) scale(1.04);
}

.profesorInstagram {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-top: 2rem;
    color: var(--main-color-4);
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .08rem;
    transition: color .3s ease, transform .3s ease;
}

.profesorInstagram svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.profesorInstagram .instagramPunto {
    fill: currentColor;
    stroke: none;
}

.profesorInstagram:hover {
    color: var(--main-color-1);
    transform: translateX(.4rem);
}

.profesorCard::after {
    display: none;
}

.profesorFoto {
    box-shadow: none;
}

/* Hero de matrícula */
.heroMatricula {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(41, 49, 51, .98) 0%, rgba(41, 49, 51, .91) 48%, rgba(101, 194, 203, .82) 100%),
        url("1erActoMatilda_010326_0348.JPG") center / cover;
}

.heroMatricula::before {
    content: "";
    position: absolute;
    width: 42rem;
    height: 42rem;
    right: -12rem;
    top: -19rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    box-shadow: 0 0 0 3rem rgba(255, 255, 255, .04), 0 0 0 7rem rgba(255, 255, 255, .03);
}

.heroMatricula::after {
    content: "✦";
    position: absolute;
    right: 12%;
    bottom: 15%;
    color: rgba(255, 255, 255, .7);
    font-size: 3rem;
    animation: matriculaBrillo 3s ease-in-out infinite;
}

.heroMatricula .contenidoBloqueSeccion {
    position: relative;
    z-index: 1;
    padding-top: 12rem;
    padding-bottom: 12rem;
    text-align: center;
}

.matriculaEtiqueta {
    margin: 0 0 2rem;
    color: #b9f4f5;
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .45rem;
}

.heroMatricula h2 {
    width: auto;
    max-width: 85rem;
    margin: 0 auto 2.5rem;
    color: #fff;
    font-size: clamp(4rem, 6vw, 7rem);
    line-height: .98;
    text-align: center;
}

.heroMatricula h2 span {
    color: #8ce5e7;
}

.heroMatricula h4 {
    max-width: 62rem;
    margin: 0 auto 2rem;
    color: rgba(255, 255, 255, .82);
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: .08rem;
    line-height: 1.5;
    text-align: center;
}

.matriculaEmail {
    display: block;
    width: fit-content;
    margin: 0 auto;
    color: #fff;
    font-family: "Josefin Sans", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    transition: color .3s ease;
}

.matriculaEmail:hover {
    color: #b9f4f5;
}

.heroMatricula .boton {
    margin-top: 3.5rem;
    padding: 1.7rem 3.5rem;
    border-color: #fff;
    background: #fff;
    color: var(--main-color-4);
    box-shadow: 0 1.2rem 2.5rem rgba(0, 0, 0, .2);
}

.heroMatricula .boton:hover {
    border-color: #8ce5e7;
    background: #8ce5e7;
    color: var(--main-color-4);
}

@keyframes matriculaBrillo {
    0%, 100% { transform: scale(1) rotate(0); opacity: .55; }
    50% { transform: scale(1.3) rotate(15deg); opacity: 1; }
}

/* Página de trabajo en curso */
.paginaTrabajando { min-height: 100vh; overflow: hidden; background: #293133; }
.pantallaTrabajando { position: relative; display: grid; min-height: 100vh; place-items: center; overflow: hidden; padding: 3rem 5%; box-sizing: border-box; background: radial-gradient(circle at 85% 20%, rgba(101,194,203,.22), transparent 30%), #293133; color: #fff; }
.trabajandoDecoracion { position: absolute; right: -8rem; bottom: -11rem; width: 52rem; height: 52rem; background: url('sombrero_azul.png') center / contain no-repeat; opacity: .1; transform: rotate(-14deg); }
.trabajandoContenido { position: relative; z-index: 1; width: min(100%, 72rem); text-align: center; }
.trabajandoLogo img { width: 16rem; filter: brightness(0) invert(1); }
.trabajandoCodigo { margin: 4rem 0 1rem; color: #8ce5e7; font-family: "Josefin Sans", sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: .4rem; }
.trabajandoContenido h1 { margin: 0 auto 2rem; color: #fff; font-size: clamp(4rem, 7vw, 8rem); line-height: .98; text-align: center; }
.trabajandoContenido h1 span { color: #65c2cb; }
.trabajandoTexto { max-width: 57rem; margin: 0 auto; color: rgba(255,255,255,.78); font-size: 1.7rem; }
.trabajandoTexto .trabajandoEmail { font-family: inherit; font-size: inherit; font-weight: 700; color: #65c2cb; }
.trabajandoTexto .trabajandoEmail:hover { color: #8ce5e7; }
.trabajandoAcciones { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin-top: 3rem; }
.trabajandoAcciones .boton { margin-top: 0; background: #65c2cb; color: #293133; }
.trabajandoAcciones .boton:hover { background: #fff; color: #293133; }
.trabajandoEmail { color: #fff; font-family: "Josefin Sans", sans-serif; font-size: 1.5rem; }
.trabajandoEmail:hover { color: #8ce5e7; }
.trabajandoVolver { display: inline-block; margin-top: 3rem; color: rgba(255,255,255,.65); font-family: "Josefin Sans", sans-serif; font-size: 1.4rem; }
.trabajandoVolver:hover { color: #fff; }

/* Contacto */
.contactoHero { position: relative; overflow: hidden; background: #293133; color: #fff; }
.contactoFondo { position: absolute; top: -20rem; right: -8rem; width: 58rem; height: 58rem; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 7rem rgba(101,194,203,.08), 0 0 0 15rem rgba(101,194,203,.04); }
.contactoContenido { position: relative; z-index: 1; padding-top: 13rem; padding-bottom: 12rem; text-align: center; }
.contactoEtiqueta { margin: 0 0 2rem; color: #8ce5e7; font-family: "Josefin Sans", sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: .4rem; }
.contactoHero h1 { margin: 0 auto 2.5rem; color: #fff; font-size: clamp(4.5rem, 7vw, 7.5rem); line-height: .98; text-align: center; }
.contactoHero h1 span { color: #65c2cb; }
.contactoIntro { max-width: 66rem; margin: 0 auto; color: rgba(255,255,255,.8); font-size: 1.7rem; }
.contactoDatos { background: linear-gradient(135deg, #f4fbfb, #fff 58%, #edf8f8); }
.contactoDatos .contenidoBloqueSeccion { padding-top: 8rem; padding-bottom: 9rem; }
.contactoTarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.contactoTarjeta { position: relative; display: flex; min-height: 0; flex-direction: column; align-items: flex-start; overflow: hidden; padding: 2.5rem 2.5rem 2.2rem; border: 0; border-radius: .8rem; background: #fff; color: #293133; box-shadow: 0 .8rem 2rem rgba(41,49,51,.09); transition: transform .3s ease, box-shadow .3s ease; }
.contactoTarjeta::before { content: ""; position: absolute; inset: 0 0 auto; height: .7rem; background: #65c2cb; }
.contactoTarjeta:nth-child(2)::before { background: #293133; }
.contactoTarjeta:nth-child(3)::before { background: #84c3be; }
.contactoTarjeta:hover { transform: translateY(-.6rem); box-shadow: 0 1.8rem 3rem rgba(41,49,51,.16); }
.contactoIcono { display: grid; width: 4.5rem; height: 4.5rem; place-items: center; margin-bottom: 2rem; border-radius: 50%; background: #65c2cb; color: #293133; font-size: 2.2rem; }
.contactoIcono svg { width: 2.8rem; height: 2.8rem; display: block; fill: currentColor; }
.contactoIconoInstagram svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.contactoIconoInstagram .instagramPunto { fill: currentColor; stroke: none; }
.contactoAcento { display: block; width: 3.5rem; height: .35rem; margin-bottom: 1.8rem; border-radius: 1rem; background: #65c2cb; }
.contactoTarjeta:nth-child(2) .contactoAcento { background: #293133; }
.contactoTarjeta:nth-child(3) .contactoAcento { background: #84c3be; }
.contactoTarjeta:nth-child(2) .contactoAcento { background: #293133; }
.contactoTarjeta:nth-child(3) .contactoAcento { background: #84c3be; }
.contactoTipo { color: #65aeb5; font-family: "Josefin Sans", sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: .2rem; }
.contactoTarjeta strong { margin: .7rem 0 1.5rem; font-family: "Josefin Sans", sans-serif; font-size: 1.8rem; line-height: 1.2; overflow-wrap: anywhere; }
.contactoAccion { margin-top: 0; color: #293133; font-family: "Josefin Sans", sans-serif; font-size: 1.3rem; font-weight: 700; }
.contactoTarjeta:hover .contactoAccion, .contactoMatricula .contactoAccion:hover { color: #65aeb5; }
.contactoMatricula { background: #293133; color: #fff; }
.contactoMatricula .contactoAccion { color: #8ce5e7; }
.contactoNota { max-width: 75rem; margin: 8rem auto 0; text-align: center; }
.contactoNota h2 { width: auto; margin: 0 0 1.5rem; color: #293133; font-size: 3.5rem; text-align: center; }
.contactoNota p { margin: 0; color: #4c5557; }

/* Pie de página */
.piePagina { position: relative; overflow: hidden; padding: 6rem 12.5% 2rem; background: #1e2527; color: #fff; }
.pieDecoracion { position: absolute; top: 50%; right: -4rem; width: 30rem; height: 30rem; background: url('sombrero_azul.png') center / contain no-repeat; opacity: .09; transform: translateY(-50%) rotate(-10deg); pointer-events: none; }
.pieContenido, .pieLegal { position: relative; z-index: 1; }
.pieContenido { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 5rem; align-items: start; }
.pieMarca img { width: 15rem; height: auto; filter: brightness(0) invert(1); }
.pieMarca p { max-width: 28rem; margin: 1.5rem 0 0; color: rgba(255,255,255,.68); font-size: 1.4rem; }
.pieEnlaces, .pieContacto { display: flex; flex-direction: column; gap: 1rem; }
.pieEnlaces a, .pieContacto a { color: rgba(255,255,255,.78); font-family: "Josefin Sans", sans-serif; font-size: 1.5rem; transition: color .25s ease, transform .25s ease; }
.pieEnlaces a:hover, .pieContacto a:hover { color: #65c2cb; transform: translateX(.4rem); }
.pieContacto span { color: #65c2cb; font-family: "Josefin Sans", sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: .2rem; text-transform: uppercase; }
.pieLegal { display: flex; justify-content: space-between; gap: 2rem; margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.45); font-family: "Josefin Sans", sans-serif; font-size: 1.2rem; }

/* Carrusel de fotos de quienes somos */
.historiaEscuela { background: #f4fbfb; }
.historiaContenido { text-align: center; }
.historiaContenido h1 { margin: 1rem auto 2.5rem; color: var(--main-color-4); font-size: clamp(3.6rem, 5vw, 5.8rem); line-height: 1; }
.historiaContenido h1 span { color: var(--main-color-1); }
.historiaTexto { max-width: 78rem; margin: 0 auto; }
.historiaTexto p { margin: 0 0 1.8rem; }
.historiaDestacados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 4rem; }
.historiaDestacados div { display: flex; flex-direction: column; gap: .8rem; padding: 2.5rem 2rem; border: 1px solid rgba(101,194,203,.3); border-radius: 1.5rem; background: #fff; }
.historiaDestacados p { margin: 0; color: #626b6c; }
.historiaDestacados .historiaDestacadoTitulo { color: var(--main-color-4); font-family: "Josefin Sans", sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: .12rem; text-transform: uppercase; }
.historiaFestival { max-width: 70rem; margin: 4rem auto 0; padding: 2.5rem; border-radius: 1.5rem; background: var(--main-color-4); color: #fff; }
.historiaFestival h2 { width: auto; margin: 0; color: var(--main-color-1); font-size: 2.4rem; }
.historiaFestival p { margin: 1rem 0 0; color: rgba(255,255,255,.82); }

.galeriaEscuela { background: #293133; color: #fff; }
.galeriaEscuela .contenidoBloqueSeccion { text-align: center; }
.galeriaEscuela h1 { margin: 1rem auto 1.5rem; color: #fff; font-size: clamp(3.6rem, 5vw, 5.8rem); text-align: center; }
.galeriaEscuela h1 span { color: #65c2cb; }
.galeriaIntro { max-width: 80rem; margin: 0 auto 4rem; color: rgba(255,255,255,.8); }
.galeriaCarrusel { position: relative; max-width: 100rem; margin: auto; padding-bottom: 5rem; }
.galeriaVentana { overflow: hidden; border-radius: 2rem; box-shadow: 0 2rem 5rem rgba(0,0,0,.25); }
.galeriaPista { position: relative; aspect-ratio: 16 / 8; }
.galeriaSlide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease; }
.galeriaSlide.is-active { opacity: 1; visibility: visible; }
.galeriaSlide img { width: 100%; height: 100%; display: block; object-fit: cover; }
.galeriaSlide figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 5rem 2.5rem 2rem; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-family: "Josefin Sans", sans-serif; font-size: 1.8rem; text-align: left; }
.galeriaFlecha { position: absolute; top: 43%; z-index: 2; width: 4.5rem; height: 4.5rem; border: 0; border-radius: 50%; background: #fff; color: #293133; font-size: 2.5rem; cursor: pointer; transition: transform .25s ease, background .25s ease; }
.galeriaFlecha:hover { transform: scale(1.1); background: #65c2cb; }
.galeriaAnterior { left: -2.2rem; }
.galeriaSiguiente { right: -2.2rem; }
.galeriaPuntos { position: absolute; bottom: 1rem; left: 0; right: 0; display: flex; justify-content: center; gap: .8rem; }
.galeriaPuntos button { width: .9rem; height: .9rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; }
.galeriaPuntos button.is-active { width: 2.4rem; border-radius: 1rem; background: #65c2cb; }