@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0');
/*Paleta a considerar
#EE0000
#cc2200
#d41908
#0013f6
#90b7f5
#00aaee
#0014aa
*/
:root{
    font-size: 75%;
    font-family: 'Nunito';
    --rojo-cc: #e00;
    --azul-cc: #0013f6;
    --rojo-sel: #d41908;
    --azul-sel: #0014aa;
    --blanco-cc: #fafafa;
    --celeste-sel: #90b7f5;
    --grafito: #444;
    --negro: #333;
    --gris: #666;
    --verdemar-claro: #20b2aa;
	--sombra-cc: rgba(0 0 0 / 80%);
    --sombra-box: rgba(0 0 0 / 60%);
    --newspaper: rgba(169 141 108 / 30%);
    --ancho: 90rem;
}

html, body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: var(--grafito);
}
button, a{
	all: unset;
    cursor: pointer;
}

img, video{
    width: 100%;
    border-radius: 1rem;
}

div, article, section, main{
    box-sizing: border-box;
}

h1, h2, h3, p{
    font-size: 2rem;
    margin: 0;
}
h3{
    font-size: 1.5rem;
}

p, li, a{
    font-size: 1.2rem;
    text-align: justify;
}

hr{
    border: 0.125rem solid;
    border-color: var(--rojo-cc);
    margin-block: 1rem;
}

small{
    font-size: 1rem;
}

.modal table, .horario table{
    width: 100%;
    text-align: center;
}
.modal table, .modal td, .horario td{
    border: 1px solid var(--grafito);
    border-collapse: collapse;
}
.modal th, .modal td{
    padding: .5rem;
}
.modal th{
    background-color: var(--rojo-sel);
    color: var(--blanco-cc);
    border: 1px solid var(--rojo-sel);
    border-collapse: collapse;
    font-weight: bold;
}

footer{
    padding: 0;
}

footer i{
    font-size: 1.5rem;
    vertical-align: text-bottom;
}

footer a{
    transition: color .6s;
}

footer a:hover{
    color: var(--rojo-sel);
}

footer img{
    border-radius: 0;
    height: 100%;
}

iframe{
    height: 100%;
    width: 100%;
}

.row, .col{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.col{
    flex-direction: column;
}

.color-rojo{
    color: var(--rojo-sel);
}

.btn{
    display: block;
    width: fit-content;
    color: var(--blanco-cc);
	background-color: #d41908;
	padding: .75rem 3rem;
	border-radius: 1rem;
	cursor: pointer;
	transition: opacity .6s;
    text-align: center;
}
.btn:hover{
	opacity: .6;
}

.disabled{
    cursor: not-allowed;
    opacity: .6;
    filter: grayscale(1);
}

.icons{
    font-size: 2.5rem;
    vertical-align: top;
}

.animate{
    opacity: 0;
}

/* Loader */

#loader{
    z-index: 10;
    background-color: var(--azul-cc);
    position: fixed;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    transition: opacity .4s;
}

.loader-box{
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dot-loader-1,
.dot-loader-2,
.dot-loader-3{
    background-color: var(--blanco-cc);
    border-radius: 50%;
    animation: loading 2s infinite;
    height: 1.2rem;
    width: 1.2rem;
    opacity: 0;
}

.dot-loader-2{
    animation-delay: .5s;
}

.dot-loader-3{
    animation-delay: 1s;
}

@keyframes loading{
    from {transform: scale(0, 0); opacity: 1;}
    to {transform: scale(1, 1); opacity: 0;}
}

/* Header */

header{
    z-index: 2;
    position: fixed;
    display: flex;
	flex-direction: column;
    justify-content: center;
	align-items: center;
    top: 0;
    height: 9rem;
    width: 100%;
    padding-block: .5rem .3rem;
    background-color: var(--blanco-cc);
    border-bottom: solid .2rem var(--azul-cc);
    box-shadow: 0 -.8rem 1rem 1rem rgba(0 0 0 / 25%);
    transition: all .4s, opacity 1s;
}

.header-sliderite-focus{
    background-color: transparent;
    color: var(--blanco-cc);
    border-color: transparent;
    box-shadow: 0 -.8rem 1rem 1rem rgba(0 0 0 / 0%);
}

.header-sliderite-focus img{
	filter: brightness(0) invert(1);
}

.header-sliderite-focus :is(a,p), #bienvenida{
	text-shadow: .15rem .15rem .1rem rgba(0 0 0 / 80%)
}

.header-sliderite-focus .dropDown ul{
    background-color: #333333aa;
}

.header-position{
    transform: translateY(-1rem);
    opacity: 0;
}

#header-logo{
    max-width: 80rem;
	padding-bottom: 1.5rem;
    display: flex;
	flex-direction: row;
    justify-content: center;
    align-items: center;
	gap: 1rem;
}

#header-logo div{
	padding-top: .2rem;
}

#header-logo p{
	margin: 0;
}

#header-logo p:nth-child(1n){
	font-family: "Montserrat", sans-serif;
	font-size: 1.5em;
}

#header-logo p:nth-child(2n){
	font-family: "Sacramento", cursive;
}

header img{
    height: 4em;
    width: auto;
    border-radius: 0;
	transition: all .4s;
}

header nav{
    display: flex;
    gap: 2rem;
}

header nav :is(a,p){
    cursor: pointer;
    font-size: 1.125rem;
	padding-inline: .2rem;
    position: relative;
    overflow: hidden;
    height: fit-content;
}

.dropDown ul{
    position: absolute;
    width: calc(100% - 2rem);
    top: 100%;
    background-color: #f1f1f1;
    padding: 2rem 1rem 2rem 2rem;
    margin: 0;
    border-radius: .5rem;
    transform: scaleY(0);
    transition: transform .4s ease-in-out;
    transform-origin: top;
    box-shadow: .75rem .75rem .5rem rgba(0, 0, 0, .3);
}

.dropDown{
    position: relative;
}

.dropDown:hover ul{
    transform: scaleY(1);
}

.dropDown ul li a{
    display: block;
    width: fit-content;
}

header nav a::after{
    content: '';
    width: 300%;
    height: .2rem;
    background-image: linear-gradient(90deg, var(--azul-cc) 66.6%, var(--rojo-cc) 33.3%);
    position: absolute;
    left: -200%;
    bottom: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .6s;
}

header nav a:hover::after{
    transform: scaleX(1);
    transform-origin: left;
}

.header-sliderite-focus :is(#openMenuBtn, #closeMenuBtn){
	color: var(--blanco-cc);
}

#openMenuBtn, #closeMenuBtn{
	cursor: pointer;
	font-size: 2rem;
    font-weight: bold;
	padding-right: .5rem;
	display: none;
}

#closeMenuBtn{
	position: absolute;
	z-index: 3;
	right: 0;
	top: 1rem;
}

.closeBtn{
    position: absolute;
    height: 3rem;
    width: 3rem;
    top: -1rem;
    right: -1rem;
    border-radius: 50%;
    padding: 0rem;
    display: grid;
    place-items: center;
}

/* Sliderite options */
#sliderite{
    height: 100vh;
	height: 100svh;
}

.slide-div{
    filter: opacity(.8) brightness(.2) drop-shadow(1rem 0 0 #0ae);
}

#bienvenida{
    position: absolute;
    z-index: 1;
    text-align: left;
	color: var(--blanco-cc);
	max-width: 40rem;
	padding: .5rem;
}
#bienvenida h1{
    font-size: 2.5rem;
}

#bienvenida p{
    font-size: 1.5rem;
    text-align: left;
}
/* Main */
.modal {
    z-index: 10;
    display: grid;
    place-items: center;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: var(--sombra-box);
    transition: opacity 1s;
}.modalBox{
    display: grid;
    position: relative;
    place-items: center;
    width: calc(100% - 4rem);
    max-width: 50rem;
    background-color: var(--blanco-cc);
    border-radius: 1rem;
    padding: 3rem;
    max-height: 90vh;
    height: auto;
}

.modal iframe{
    height: 50svh;
    border-radius: .5rem;
}

.modalBox img{
    height: 100%;
    object-fit: contain;
    overflow: auto;
}

main{
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.container{
    display: grid;
    place-items: center;
    padding-block: 5rem;
}

.box{
    display: grid;
    gap: 3rem;
    max-width: var(--ancho);
    padding: 5rem;
}

.c1{
    background-image: url("assets/img/informativobg.avif");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}.c2{
    background-image: url("assets/img/noticiasbg.avif");
    background-size: cover;
}.c3{
    background-image: linear-gradient(to bottom right, #aaa, #fafafa);
    position: relative;
    overflow: hidden;
}.c3::after{
    content: "";
    width: 40rem;
    height: 40rem;
    background-color: cadetblue;
    position: absolute;
    border-radius: 3rem;
    opacity: .5;
    transform: translateX(32rem) rotate(45deg);
}.c3::before{
    content: "";
    width: 50rem;
    height: 110rem;
    background-color: teal;
    position: absolute;
    border-radius: 3rem;
    opacity: .2;
    left: -18rem;
    bottom: -25rem;
    transform: rotate(45deg);
}.c4{
    background-color: var(--grafito);
    color: var(--blanco-cc);
    padding: 0;
}.c5{
    background-image: url("assets/img/colegio.avif");
    background-position: bottom;
    background-size: cover;
    padding-block: 10rem 0;
    position: relative;
}.c5::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    filter: opacity(.8) brightness(.2);
    background-color: rgb(0 170 238);
}:is(.c6,.c7){
    background-image: url(assets/img/topnoticiasbg.avif);
}.c7{
    gap: .1rem;
}

.b1{
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
    background-color: rgba(255 255 255 / 60%);
    border-radius: 2rem;
    box-shadow: 0rem 1rem 2rem rgba(0 0 0 / 40%);
}.b2{
    grid-template-rows: repeat(2, 20rem);
    grid-template-columns: repeat(2, 20rem);
    gap: .5rem;
    background-image: url("assets/img/topnoticiasbg.avif");
    transform: rotate(-4deg);
    box-shadow: 0.1rem 0.1rem 0.5rem var(--sombra-box);
}.b3{
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: 2fr 1fr;
    z-index: 1;
}.b3 .icons{
    padding: 1rem;
    background-color: var(--verdemar-claro);
    border-radius: 50%;
    color: var(--blanco-cc);
}.b4{
    grid-template-rows: 1fr;
    grid-template-columns: 2fr repeat(2, 1fr);
    padding-bottom: .5rem;
}.b5{
    width: 100%;
    color: var(--blanco-cc);
    z-index: 1;
}.b5 h1{
    font-size: 4rem;
}.b6{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    background-color: rgba(255 255 255 / 80%);
    border-radius: 1rem;
    box-shadow: 0 .2rem .5rem var(--sombra-box);
}.b7{
    padding: 3rem 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 0;
    max-width: calc(var(--ancho) - 10rem);
    place-self: center;
    grid-auto-flow: row;
}.b8{
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    padding: 1rem;
}.b9{
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}:is(.b10, .b11){
    grid-template-columns: 3fr 1fr;
    background-color: rgba(255 255 255 / 80%);
    border-radius: 1rem;
    box-shadow: 0 .2rem .5rem var(--sombra-box);
}.b11{
    grid-template-columns: 2fr 1fr;
}

.item-1{
    grid-area: 1 / 1 / 2 / 3;
}.item-2{
    grid-area: 2 / 1 / 3 / 2;
}.item-3{
    grid-area: 2 / 2 / 3 / 3;
}

.item-4{
    background-color: var(--newspaper);
    padding: 2rem 1rem;
    grid-area: 2 / 1 / 3 / 2;
}.item-5{
    grid-area: 1 / 1 / 2 / 2;
}.item-6{
    grid-area: 1 / 2 / 2 / 3;
    
}.item-7{
    grid-area: 2 / 2 / 3 / 3;
}

.item-8{
    grid-area: 1 / 1 / 2 / 2;
    gap: 3rem;
}.item-9{
    grid-area: 2 / 1 / 3 / 2;
    gap: 3rem;
}.item-10{
    grid-area: 3 / 1 / 4 / 2;
    gap: 3rem;
}.item-11{
    grid-area: 4 / 1 / 5 / 2;
    gap: 3rem;
}.item-12{
    grid-area: 1 / 2 / 5 / 3;
    background-color: var(--verdemar-claro);
    color: var(--blanco-cc);
    border-radius: 1rem;
    padding: 2rem;
}

.item-15{
    display: flex;
    flex-direction: column;
    gap: .5rem;
}.item-15 a{
    display: flex;
}:is(.item-16, .item-17) p{
    font-size: .75rem;
    color: #ccc;
    grid-area: 2 / 1 / 3 / 2;
}.item-17{
    grid-area: 2 / 3 / 3 / 4;
}.item-17 p{
    text-align: right;
}

.item-19{
    grid-area: 1 / 1 / 2 / 3;
}.item-20{
    grid-area: 1 / 3 / 3 / 4;
}.item-21{
    grid-area: 2 / 1 / 3 / 2;
}.item-22{
    grid-area: 2 / 2 / 3 / 3;
}.item-20 img{
    height: 100%;
    object-fit: cover;
}

.b7 article:nth-child(1){
    grid-area: 1/1/2/4;
}.centeritem .item-23:nth-child(2){
    grid-area: 2/1/3/4;;
}.b7 hr:nth-child(3){
    grid-area: 3/1/4/4;;
    width: 100%;
    margin: 0;
}

.item-23{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.item-23 img{
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    width: 12.5rem;
    margin-bottom: .5rem;
}.item-23 h3{
    font-size: 1.2rem;
}.item-23 :is(p,h3){
    padding-inline: .5rem;
}

.eqdirectivo{
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 0;
}.eqdirectivo .item-23:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
}.eqdirectivo p:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
    font-size: 1.25rem;
    margin-bottom: 4rem;
    align-self: center;
}.eqdirectivo hr:nth-child(3) {
    grid-area: 2 / 1 / 3 / 3;
    margin-block: 2rem;
}.eqdirectivo .item-23:nth-child(4) {
    grid-area: 3 / 1 / 4 / 2;
}.eqdirectivo p:nth-child(5) {
    grid-area: 4 / 1 / 5 / 2;
    padding-inline: 3rem;
}.eqdirectivo .item-23:nth-child(6) {
    grid-area: 3 / 2 / 4 / 3;
}.eqdirectivo p:nth-child(7) {
    grid-area: 4 / 2 / 5 / 3;
    padding-inline: 3rem;
}
.eqdirectivo .item-23:nth-child(1) img{
    width: 20rem;
}

/*.eqpie{
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: column;
}.eqpie p:nth-child(1){
    grid-area: 1 / 1 / 2 / 5;
}.eqpie .item-23:nth-child(2){
    grid-area: 2 / 2 / 3 / 3;
}.eqpie hr:nth-child(3){
    grid-area: 3 / 1 / 4 / 4;
    width: 100%;
    margin: 0;
}.eqpie .item-23:nth-child(4) {
    grid-area: 4 / 1 / 5 / 2;
}.eqpie .item-23:nth-child(5) {
    grid-area: 4 / 2 / 5 / 3;
}.eqpie .item-23:nth-child(6) {
    grid-area: 4 / 3 / 5 / 4;
}.eqpie .item-23:nth-child(7) {
    grid-area: 5 / 1 / 6 / 2;
}.eqpie .item-23:nth-child(8) {
    grid-area: 5 / 2 / 6 / 3;
}*/

.item-24{
    grid-area: 1 / 1 / 2 / 2;
    display: grid;
    padding: 2rem;
    background-color: var(--grafito);
    box-shadow: 0.2rem 0.2rem 0.5rem var(--sombra-box);
}.item-25{
    grid-area: 1 / 2 / 2 / 3;
}

.item-24 span{
    color: slategrey;
    transition: color .4s;
}.item-24 ul{
    height: 100%;
    display: grid;
}.item-24 li::marker{
    color: slategrey
}.item-24 button{
    font-size: 1.5rem;
    color: var(--blanco-cc);
    transition: transform .4s;
}.item-24 button:hover{
    transform: translateX(1.5rem);
}.item-24 button:focus{
    transform: translateX(1.5rem);
}.item-24 button:focus span{
    color: var(--verdemar-claro);
}.item-25 img{
    border-radius: 0;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
    box-shadow: 0.2rem 0.2rem 0.5rem var(--sombra-box);
    transition: opacity .4s;
}

:is(.item-26, .item-27) a{
    font-size: 1.2rem;
    margin-block: .2rem;
    transition: color .4s;
}:is(.item-26, .item-27) a:hover{
    color: var(--verdemar-claro);
}

:is(.b10, .b11) img{
    align-self: baseline;
    justify-self: center;
    border: 0.2rem solid rgba(0 0 0 / 20%);
    aspect-ratio: 1 / 1;
    object-fit: cover;
}:is(.b10, .b11) div a.btn{
    display: inline;
}

.b11 h2{
    margin-bottom: .5rem;
}

.b12 {
    grid-template-columns: 1fr;
    background-color: var(--negro);
    border-radius: 1rem;
    box-shadow: 0 .2rem .5rem var(--sombra-box);
    margin-bottom: 2rem;
    padding: 2rem;
    width: 100%;
}.b12 form{
    display: flex;
    gap: 2rem;
    width: 100%;
    align-items: center;
    margin: 0;
}.b12 form h2{
    color: var(--blanco-cc);
    font-size: 1.2rem;
}.b12 form input {
    all: unset;
    background-color: var(--blanco-cc);
    padding: 0 1rem;
    width: 100%;
    height: 2rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
    box-shadow: inset 0.1rem 0.1rem 0.5rem var(--sombra-box);
}.b12 form input[type="date"]{
    padding-top: .25rem;
}.b12 form button{
    padding: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

:has(.item-26, .item-27) .collapsibleBox{
    background-color: var(--blanco-cc);
}.collapsible, .black-btn {
    display: block;
    background-color: var(--negro);
    color: var(--blanco-cc);
    max-width: var(--ancho);
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    box-shadow: .3rem .3rem .5rem var(--sombra-box);
    border-radius: 1rem;
    margin-block: .5rem;
    text-align: center;
}:is(.collapsible, .black-btn) :is(i, span){
    font-size: 3rem;
    color: slategrey;
}:is(.collapsible,  .black-btn) span{
    font-size: 4rem;
}:is(.collapsible, .black-btn) h2{
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size: 1.5rem;
}.collapsible h2::after{
    content: "+";
    position: absolute;
    right: 0;
}.active h2::after{
    content: "-";
}.collapsibleBox{
    width: 100%;
    max-width: var(--ancho);
    max-height: 0;
    margin-block: -1.25rem 1rem;
    overflow: hidden;
    transition: max-height .6s;
    box-shadow: .2rem .2rem .5rem var(--sombra-box);
    background-color: var(--blanco-cc);
    border-radius: 0 0 1rem 1rem;
}

.card{
    position: relative;
    perspective: 60rem;
    width: 100%;
    aspect-ratio: 1 / 1;
    place-self: center;
    cursor: pointer;
}.card-inner{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform .8s;
    transform-style: preserve-3d;
}.card:hover .card-inner{
    transform: rotateY(-180deg);
}.card-front, .card-back{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /*border-radius: .75rem;*/
}.card-front{
    background-image: var(--fondo-noticia);
    background-size: cover;
    background-position: center;
}.card-back{
    display: grid;
    transform: rotateY(180deg);
    background-color: var(--newspaper);
    place-items: center;
    padding: .5rem;
    text-align: center;
}.card-back .btn{
    background-color: #444;
}

.horario table{
    font-size: 1.5rem;
    border-collapse: collapse;
    border-radius: 1rem;
    overflow: hidden;
}
.horario :is(th, tfoot){
    border: 1px solid var(--negro);
    background-color: var(--negro);
    color: #dedede
}
.horario :is(tfoot td, thead th){
    padding: .5rem;
}
.horario thead:nth-child(1){
    background-color: var(--gris);
    color: #dedede
}
.horario tbody{
    background-color: #fafafa;
    color: #333
}
.niño{
    max-width:30rem;
    position: absolute;
    bottom: -10rem; 
}

/* Media Query */
@media only screen and (max-width: 60rem){
    .niño{
        width: 20rem;
        bottom: 0rem;
    }

    .header-sliderite-focus .dropDown ul{
        background-color: unset;
        box-shadow: none;
    }

    h1, h2, #bienvenida h1{
        font-size: 2rem;
    }
    p, #bienvenida p{
        font-size: 1rem;
    }
    .icons{
        font-size: 2.5rem;
    }

	#openMenuBtn, #closeMenuBtn{
		display: block
	}

	#header-logo{
		font-size: 12px;
		padding-bottom: 0;
		padding-inline: .5rem;
		justify-content: space-between;
	}

    header nav a::after{
        all: unset;
    }

	nav{
		position: fixed;
		display: flex;
		flex-direction: column;
		background-color: rgba(0 20 170 / 95%);
        background: linear-gradient(215deg, rgba(2 0 36 / 95%) 0%, rgba(0 20 170 / 95%) 100%);
		transition: clip-path .6s;
		width: 100%;
		height: 100%;
		top: 0;
		align-items: left;
		justify-content: center;
		clip-path: circle(0% at top right);
		color: var(--blanco-cc);
    	border-color: transparent;
    	box-shadow: 0 -.8rem 1rem 1rem rgba(0 0 0 / 0%);
		text-shadow: .15rem .15rem .1rem rgba(0 0 0 / 80%)
	}

    header nav :is(a, .dropDown){
        padding-left: calc(50% - 4rem);
    }

    .dropDown ul{
        background: none;
        transform: scaleY(1);
        width: auto;
    }

	header{
		flex-direction: row;
		justify-content: space-between;
		height: 4rem;
	}

    .container{
        padding: 2rem 1rem;
    }
    .box{
        padding: 2rem;
        gap: 1rem;
        grid-template-rows: auto;
        grid-template-columns: auto;
    }
    [class*="item-"]{
        grid-area: auto;
    }
    .b2{
       transform: rotate(0);
    }
    .b5{
        padding: 2rem 0;
        text-align: center;
    }
    .horario table{
        font-size: 1rem;
    }

    .item-8, .item-10{
        flex-direction: column;
    }.item-9, .item-11{
        flex-direction: column-reverse;
    }.item-12{
        grid-area: 1 / 1 / 1 / 1;
        margin-bottom: 3rem;
    }.item-13 div{
        text-align-last: center;
        margin-bottom: 1rem;
    }.item-17 p{
        text-align: left;
    }.item-20{
        grid-area: 1 / 1;
    }

    .b4, .c4{
        padding-bottom: .5rem;
    }

    :is(.c5){
        margin-top: 5rem;
    }

    .b5 h1{
        font-size: 3rem;
    }.b7{
        grid-template-columns: repeat(1, 1fr);
    }
    .eqdirectivo{
        gap: 2rem 0;
    }.eqdirectivo :is(.item-23:nth-child(1), p:nth-child(2), hr:nth-child(3), .item-23:nth-child(4), p:nth-child(5), .item-23:nth-child(6), p:nth-child(7)){
        grid-area: auto
    }.eqdirectivo p:nth-child(2){
        margin: 0;
    }.eqdirectivo :is(p:nth-child(5), p:nth-child(7)){
        padding: 0;
    }

    .eqpie :is(p:nth-child(1), .item-23:nth-child(2), hr:nth-child(3), .item-23:nth-child(4), .item-23:nth-child(5), .item-23:nth-child(6), .item-23:nth-child(7), .item-23:nth-child(8)){
        grid-area: auto
    }

    :is(div.box.b7, div.box.b7.centeritem) > *{
        grid-area: auto;
    }
    
    .b8{
        padding: 0;
    }.collapsible h2{
        font-size: 1.2rem;
    }.item-23 h3{
        font-size: 1rem;
    }.item-24{
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }

    .b11 img{
        grid-row: var(--row);
    }

    form{
        flex-direction: column;
    }.modalBox{
        padding: 1rem;
    }
}