/* Style the home hero section */
#root_hero {
    background-color: var(--clr_base_800);
    color: var(--clr_base_100);
    text-align: center;
}

#root_hero_c1 {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

#root_hero_c1 h1 {
    font-size: 5rem;
    line-height: 110%;
    letter-spacing: 0.4rem;
    padding-bottom: 0.5rem;
}

#root_hero_c1 p:nth-child(2) {
    font-size: 1.8rem;
    padding-bottom: 3rem;
}

#root_hero_c1 p:nth-child(3) {
    font-size: 1.2rem;
    line-height: 150%;
}

#root_hero_c2 > div {
    width: 100%;
    margin-inline: auto;

    display: grid;
    gap: 2rem 2rem;
    grid-template-columns: repeat(2, 1fr);
}

#root_hero_c2 div a {
    text-decoration: none;
}

#root_hero_c2 div a div {
    background-color: rgba(255, 255, 255, 90%);
    color: var(--clr_base_900);

    display: flex;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;

    padding-inline: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;

    -webkit-backdrop-filter: blur(0.5rem) brightness(95%);
    backdrop-filter: blur(0.5rem) brightness(95%);
    filter: opacity(0.8);
}
#root_hero_c2 a:hover div, #root_hero_c2 a:focus-visible div {filter: opacity(1);}
#root_hero_c2 a:focus-visible {outline: none;}

#root_hero_c2 div a div p:nth-child(1) {
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
}

#root_hero_c2 div a div p:nth-child(2) {
    cursor: pointer;
    padding-left: 1.5rem;
    padding-right: 2.5rem;
    transition: all 350ms cubic-bezier(0, 0, 0.11, 1)
}
#root_hero_c2 div a:hover div p:nth-child(2), #root_hero_c2 div a:focus-visible div p:nth-child(2) {
    padding-left: 4rem;
    padding-right: 0rem;
}



@media (max-width: 1400px) {
    #root_hero_c1 {
        padding-top: 7rem;
        padding-bottom: 6rem;
    }

    #root_hero_c1 h1 {
        font-size: 4rem;
    }
}



@media (max-width: 768px) {
    #root_hero_c1 h1 {font-size: 3rem;}

    #root_hero_c1 p:nth-child(2) {
        font-size: 1.3rem;
        padding-bottom: 2rem;
    }
    
    #root_hero_c1 p:nth-child(3) {font-size: 1rem;}

    #root_hero_c2 div {gap: 1rem;}

    #root_hero_c2 div a div p:nth-child(2), #root_hero_c2 div a div:hover p:nth-child(2),
    #root_hero_c2 div a div:focus-visible p:nth-child(2) {
        padding: 0rem;
        font-size: 0rem;
        visibility: hidden;
    }
}



@media (max-width: 576px) {
    #root_hero_c1 {
        padding-top: 8rem;
        padding-bottom: 3.5rem;
    }

    #root_hero_c1 h1 {font-size: 2.75rem;}
    
    #root_hero_c1 p:nth-child(2) {
        font-size: 1.1rem;
        text-wrap: balance;
        padding-bottom: 2.5rem;
    }

    #root_hero_c1 p:nth-child(3) {
        font-size: 0.9rem;
        text-align: left;
    }
}









/* Style the no violence image */
#root_inbal_acompana img {
    border-radius: 0rem 0rem 0.5rem 0.5rem;
    overflow: hidden;
    box-shadow: 0rem 0rem 0.5rem 0.3rem hsl(210 90% 15% / 0.10);
    transform-origin: top;
    width: 100%;
    height: auto;
    cursor: pointer;
}
#root_inbal_acompana:focus-within a {outline: none;}
#root_inbal_acompana:focus-within img {
    outline: 3px solid var(--clr_base_800);
}



@media (max-width: 576px) {
    #root_inbal_acompana img {border-radius: 0rem;}
}









/* Style the home academy section */
#root_academias {
    padding-top: 7rem;
    text-align: center;
}

#root_academias > div:nth-child(1) {padding-bottom: 1.5rem;}

#root_academias > div:nth-child(1) p {font-size: 1.2rem;}

#root_academias .cont-grid-4 {gap: 0rem;}

#root_academias div.card-layered > div:nth-child(2) {padding: 1rem;}

#root_academias > div:nth-child(2) h3, #root_academias > div:nth-child(2) p {
    color: var(--clr_base_900);
}

#root_academias > div:nth-child(2) h3 {
    padding-top: 0.8rem;
    padding-bottom: 0.5rem;
}



@media (max-width: 1200px) {
    #root_academias .cont-grid-4 {grid-template-columns: repeat(6, 1fr);}
    #root_academias .cont-grid-4 div {grid-column: span 2;}
    #root_academias .cont-grid-4 div:nth-child(7) {
        grid-column: 2 / span 2;
        grid-row: 3;
    }
    #root_academias .cont-grid-4 div:nth-child(8) {
        grid-column: 4 / span 2;
        grid-row: 3;
    }
}



@media (max-width: 768px) {
    #root_academias {padding-top: 4rem;}
    #root_academias .cont-grid-4 {grid-template-columns: repeat(2, 1fr);}
    #root_academias .cont-grid-4 div {grid-column: span 1;}
    #root_academias .cont-grid-4 div:nth-child(7) {
        grid-column: 1;
        grid-row: 4;
    }
    #root_academias .cont-grid-4 div:nth-child(8) {
        grid-column: 2;
        grid-row: 4;
    }
}



@media (max-width: 576px) {
    #root_academias {padding-top: 3rem;}

    #root_academias h2 {padding-bottom: 0.5rem;}

    #root_academias h2, #root_academias > div:nth-child(1) > p {text-align: left;}

    #root_academias > div:nth-child(1) p {font-size: 1rem;}

    #root_academias > div:nth-child(2) {gap: 2rem 0rem;}

    #root_academias > div:nth-child(2) h3 {
        font-size: 1.2rem;
        text-align: left;
        padding-top: 0.5rem;
        padding-bottom: 0.25rem;
    }
    
    #root_academias > div:nth-child(2) h3+p {
        font-size: 0.85rem;
        text-align: left;
    }

    #root_academias > div:nth-child(2) > div:nth-child(odd) div.card-layered > div:nth-child(2) {
        padding-inline-end: 0.75rem;
        padding-inline-start: 0rem;
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    #root_academias > div:nth-child(2) > div:nth-child(even) div.card-layered > div:nth-child(2) {
        padding-inline-start: 0.75rem;
        padding-inline-end: 0rem;
        padding-top: 0rem;
        padding-bottom: 0rem;
    }
}



@media (max-width: 400px) {
    #root_academias .cont-grid-4 p {font-size: 0.9rem;}
}









/* Style the home school section */
#root_la_escuela {padding-top: 6rem;}

#root_la_escuela h2 {padding-bottom: 2.5rem;}

#root_la_escuela h3 {
    font-size: 1.8rem;
    font-weight: 300;
    text-align: left;
    padding-bottom: 1rem;
}

#root_la_escuela p {line-height: 140%;}

#root_la_escuela_c1 {
    padding-top: 3rem;
    padding-bottom: 7rem;
    align-items: flex-start;
}

#root_la_escuela_c1 div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#root_la_escuela_c1 p {
    padding-bottom: 1rem;
}

#root_la_escuela_c1 a {
    margin-inline-end: 0rem;
    margin-bottom: 0rem;
}



@media (max-width: 992px) {
    #root_la_escuela .cont-grid-2 .utils-pad-lef5 {
        padding-left: 2rem;
    }
    #root_la_escuela .cont-grid-2 .utils-pad-rig5 {
        padding-right: 2rem;
    }
    #root_la_escuela div .utils-pad-top7 {
        padding-top: 3rem;
    }
    #root_la_escuela div .utils-pad-bot7 {
        padding-bottom: 3rem;;
    }
}



@media (max-width: 768px) {
    #root_la_escuela {padding-top: 4rem;}
    #root_la_escuela h2 {padding-bottom: 1.5rem;}
    
    #root_la_escuela .cont-grid-2 .utils-pad-lef5 {
        padding-left: 0rem;
    }
    #root_la_escuela .cont-grid-2 .utils-pad-rig5 {
        padding-right: 0rem;
    }
    #root_la_escuela .cont-grid-2 .utils-pad-top7 {
        padding-top: 3rem;
    }
    #root_la_escuela .cont-grid-2 .utils-pad-bot7 {
        padding-bottom: 3rem;
    }
}



@media (max-width: 576px) {
    #root_la_escuela {padding-top: 3rem;}

    #root_la_escuela h2 {
        font-size: 1.75rem;
        padding-bottom: 0rem;
    }

    #root_la_escuela h3 {
        font-weight: 500;
        font-size: 1.3rem;
        padding-top: 0.5rem;
    }

    #root_la_escuela > div > div:nth-child(n+4):nth-child(-n+5) h3 {padding-top: 1rem;}
    #root_la_escuela > div:nth-child(3) h3 {padding-top: 2rem;}

    #root_la_escuela_c1 {padding-top: 0rem;}

    #root_la_escuela .cont-grid-2 .utils-pad-top7 {
        padding-top: 0rem;
    }
    #root_la_escuela .cont-grid-2 .utils-pad-bot7 {
        padding-bottom: 0rem;
    }
    #root_la_escuela .cont-grid-2 div:nth-child(3) {
        grid-row: 4;
    }
    #root_la_escuela .cont-grid-2 div:nth-child(4) {
        grid-row: 3;
    }
}









/* Style the home school section */
#root_exposiciones {
    background-color: var(--clr_base_900);
    color: var(--clr_base_100);
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#root_exposiciones h2 {font-weight: 500;}

#root_exposiciones h3 {
    padding-bottom: 1rem;
    font-weight: 500;
}

#root_exposiciones > div > p:nth-of-type(1) {
    font-size: 1.2rem;
    text-align: center;
    padding-bottom: 3rem;
}

#root_exposiciones_c1 div > p:nth-child(3) {
    padding-top: 1rem;
    padding-bottom: 1rem;
    line-height: 140%;
}

#root_exposiciones_c1 div > p:nth-child(4) {
    font-size: 0.9rem;
    text-align: right;
    font-style: italic;
}



@media (max-width: 576px) {
    #root_exposiciones h2 {
        font-size: 1.75rem;
        padding-bottom: 0.5rem;
    }

    #root_exposiciones h3 {
        text-align: left;
        padding-top: 2.5rem;
    }

    #root_exposiciones > div > p:nth-of-type(1) {
        padding-bottom: 0rem;
    }

    #root_exposiciones_c1 div > p:nth-child(3) {padding-bottom: 0.5rem;}
}









/* Style the home video section */
#root_video {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.art-video-cont {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    border: none;
    background-color: var(--clr_base_200);
}
.art-video-cont:focus-visible {outline: solid 5px var(--clr_base_800)}

.art-video-cont img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0rem;
    left: 0rem;
}

.art-video-cont .art-video-nest {
    width: 6rem;
    height: 4rem;
    background-color: var(--clr_base_100);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    z-index: 1;
    border-radius: 0.5rem;
    opacity: 0.7;
}

.art-video-cont .art-video-nest:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent var(--clr_base_900);
}

.art-video-cont img, .art-video-cont .art-video-nest {cursor: pointer;}

.art-video-cont img, .art-video-cont iframe, .art-video-cont .art-video-nest, .art-video-cont .art-video-nest:before {
    position: absolute;
}

.art-video-cont .art-video-nest, .art-video-cont .art-video-nest:before {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.art-video-cont iframe {
    height: 100%;
    width: 100%;
    top: 0rem;
    left: 0rem;
}

.art-video-cont .art-video-nest:hover, .art-video-cont:focus-visible .art-video-nest {opacity: 1;}



@media (max-width: 576px) {
    #root_video {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}