html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:#fff0;-webkit-box-sizing:border-box;box-sizing:border-box}
html {
    font-size: 16px;
}
@font-face {
    font-family: 'NovaKlasse';
    src: url("../fonts/novaklasse-semibold.otf");
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
:root {
	--color-principal: #075578;
	--color-amarillo: #E8C547;
	--color-verde: #00DF82;
	--fuente-regular: "Work Sans", sans-serif;
	--fuente-novaSemibold: "NovaKlasse", sans-serif;
}
* {
	color: var(--color-principal);
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5rem;
	font-family: var(--fuente-regular);
	-webkit-font-feature-settings: 'ss02' on;
    font-feature-settings: 'ss02' on;
}
html, body {
	height: 100%;
	min-height: 100%;
}
body {
	opacity: 0;
}
.body--overflow {
	overflow: hidden;
}
/*CONTAINER*/
.container {
	z-index: 1;
    margin: 0 auto;
	width: calc(100% - 2rem);
    position: relative;
}
@media only screen and (min-width: 768px) {
	.container {
		width: 44rem;
	}
}
@media only screen and (min-width: 1024px) {
	.container {
		width: 60rem;
	}
}
@media only screen and (min-width: 1280px) {
	.container {
		width: 74rem;
	}
}
@media only screen and (min-width: 1440px) {
	.container {
		width: 80.125rem;
	}
}
/*FLEX*/
.flex, .flex-wrap, .flex-center, .flex-spaceBetween, .flex-column, .flex-wrapReverse {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.flex-wrap, .flex-column, .flex-spaceBetween, .flex-center {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-wrapReverse {
	-ms-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;
}
.flex-center, .flex-spaceBetween {
    -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.flex-spaceBetween {
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; 
}
.flex-column {
	-webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
/*GRID*/
.grid {
  	display: -ms-grid;
  	display: grid;
  	-ms-grid-columns: 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr;
  	grid-template-columns: repeat(12, 1fr);
 	gap: 1rem;
  	margin: 0;
}
[class*="col"]{
  	-ms-grid-column-span: 12;
  	grid-column: span 12;
}
.cols1 { -ms-grid-column-span: 1; grid-column: span 1; }
.cols2 { -ms-grid-column-span: 2; grid-column: span 2; }
.cols3 { -ms-grid-column-span: 3; grid-column: span 3; }
.cols4 { -ms-grid-column-span: 4; grid-column: span 4; }
.cols5 { -ms-grid-column-span: 5; grid-column: span 5; }
.cols6 { -ms-grid-column-span: 6; grid-column: span 6; }
.cols7 { -ms-grid-column-span: 7; grid-column: span 7; }
.cols8 { -ms-grid-column-span: 8; grid-column: span 8; }
.cols9 { -ms-grid-column-span: 9; grid-column: span 9; }
.cols10 { -ms-grid-column-span: 10; grid-column: span 10; }
.cols11 { -ms-grid-column-span: 11; grid-column: span 11; }
.cols12 { -ms-grid-column-span: 12; grid-column: span 12; }

@media only screen and (min-width: 768px) {
	.grid {
		gap: 1.5rem;
	}
  	.colm1 { -ms-grid-column-span: 1; grid-column: span 1; }
  	.colm2 { -ms-grid-column-span: 2; grid-column: span 2; }
  	.colm3 { -ms-grid-column-span: 3; grid-column: span 3; }
  	.colm4 { -ms-grid-column-span: 4; grid-column: span 4; }
  	.colm5 { -ms-grid-column-span: 5; grid-column: span 5; }
  	.colm6 { -ms-grid-column-span: 6; grid-column: span 6; }
  	.colm7 { -ms-grid-column-span: 7; grid-column: span 7; }
  	.colm8 { -ms-grid-column-span: 8; grid-column: span 8; }
  	.colm9 { -ms-grid-column-span: 9; grid-column: span 9; }
  	.colm10 { -ms-grid-column-span: 10; grid-column: span 10; }
  	.colm11 { -ms-grid-column-span: 11; grid-column: span 11; }
  	.colm12 { -ms-grid-column-span: 12; grid-column: span 12; }
}
@media only screen and (min-width: 1024px) {
  	.coll1 { -ms-grid-column-span: 1; grid-column: span 1; }
  	.coll2 { -ms-grid-column-span: 2; grid-column: span 2; }
  	.coll3 { -ms-grid-column-span: 3; grid-column: span 3; }
  	.coll4 { -ms-grid-column-span: 4; grid-column: span 4; }
  	.coll5 { -ms-grid-column-span: 5; grid-column: span 5; }
  	.coll6 { -ms-grid-column-span: 6; grid-column: span 6; }
  	.coll7 { -ms-grid-column-span: 7; grid-column: span 7; }
  	.coll8 { -ms-grid-column-span: 8; grid-column: span 8; }
  	.coll9 { -ms-grid-column-span: 9; grid-column: span 9; }
  	.coll10 { -ms-grid-column-span: 10; grid-column: span 10; }
  	.coll11 { -ms-grid-column-span: 11; grid-column: span 11; }
 	.coll12 { -ms-grid-column-span: 12; grid-column: span 12; }
}
@media only screen and (min-width: 1440px) {
  	.collg1 { -ms-grid-column-span: 1; grid-column: span 1; }
  	.collg2 { -ms-grid-column-span: 2; grid-column: span 2; }
  	.collg3 { -ms-grid-column-span: 3; grid-column: span 3; }
  	.collg4 { -ms-grid-column-span: 4; grid-column: span 4; }
  	.collg5 { -ms-grid-column-span: 5; grid-column: span 5; }
  	.collg6 { -ms-grid-column-span: 6; grid-column: span 6; }
  	.collg7 { -ms-grid-column-span: 7; grid-column: span 7; }
  	.collg8 { -ms-grid-column-span: 8; grid-column: span 8; }
  	.collg9 { -ms-grid-column-span: 9; grid-column: span 9; }
  	.collg10 { -ms-grid-column-span: 10; grid-column: span 10; }
  	.collg11 { -ms-grid-column-span: 11; grid-column: span 11; }
 	.collg12 { -ms-grid-column-span: 12; grid-column: span 12; }
}
/*COMUN*/
.responsive {
	display: block;
	max-width: 100%;
	max-height: 100%;
}
strong, strong a {
	font-weight: 600;
}
.nova, .nova h2 {
	font-size: 2rem;
	font-style: normal;
	font-weight: 400;
	line-height: 115%;
	max-width: 100%;
	word-break: break-word;
	font-family: var(--fuente-novaSemibold);
}
.nova--green, .nova--green h2 {
	font-size: 2.25rem;
	max-width: 100%;
	color: var(--color-verde);
}
@media only screen and (min-width: 768px) {
	.nova, .nova h2 {
		font-size: 2.25rem;
	}
	.nova--faqs h2 {
		font-size: 2.625rem;
	}
}
@media only screen and (min-width: 1280px) {
	.nova, .nova h2 {
		font-size: 2.625rem;
	}
}
@media only screen and (min-width: 1920px) {
	.nova, .nova h2 {
		font-size: 3rem;
	}
}
/*BTN*/
.btn {
    margin: 0;
    border: none;
	line-height: 1;
	padding: 0.188rem .75rem 0 .75rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  	-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
	gap: 1rem;
	font-size: 0.875rem;
	height: 3rem;
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
	cursor: pointer;
	text-transform: uppercase;
	background-color: var(--color-amarillo);
	font-family: var(--fuente-novaSemibold);
	-webkit-transition: background-color .5s;
  	-o-transition: background-color .5s;
  	transition: background-color .5s;
	-webkit-font-variant-ligatures: no-common-ligatures;
    font-variant-ligatures: no-common-ligatures;
  	-webkit-font-feature-settings: "liga" off, "kern" off, "clig" off;
    font-feature-settings: "liga" off, "kern" off, "clig" off;
}
.arrow {
	line-height: 1;
	margin-top: -0.188rem;
	font-size: 1.375rem;
	font-family: var(--fuente-novaSemibold);
}
.btn:hover {
	background-color: #DBBA43;
}
.btn--white {
	background-color: #FFFFFF;
}
.btn--white:hover {
	background-color: #FBFBFB;
}
.btn--seleccion {
	height: 4rem;
	color: #FFFFFF;
	background-color: #075578;
}
.btn--seleccion:hover {
	background-color: #064663;
}
.btn--seleccion .arrow {
	color: #FFFFFF;
}
@media only screen and (min-width: 1280px) {
	.btn {
		height: 4rem;
		font-size: 1rem;
		padding: 0.188rem 2rem 0 2rem;
	}
	.arrow {
		font-size: 1.375rem;
	}
}
/*HEADER*/
header {
	position: relative;
}
nav {
	padding: 0.75rem 1rem;
	gap: 1rem;
	position: fixed;
	top: 0;
	background-color: #FFFFFF;
	z-index: 9;
	width: 100%;
	left: 0;
	right: 0;
	border-bottom: 1px solid #DDD;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.idiomas {
	list-style-type: none;
	margin: 0;
	padding: 0;
	gap: .5rem;
}
.idiomas__li {
	gap: .5rem;
}
.idiomas__li:last-child .sep {
	display: none;	
}
.idiomas__btn {
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
	color: var(--color-principal);
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5rem;
	cursor: pointer;
	text-transform: uppercase;
}
.idiomas__btn--active {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}
.menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	gap: .75rem;
	width: 100%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.menu__enlaces {
	padding: 0;
	margin: 0;
	border: none;
	cursor: pointer;
	background-color: transparent;
	color: var(--color-principal);
	font-size: 1rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.5rem; 
	text-transform: uppercase;
}
.logo {
	height: 1.9375rem;
}
.idiomas--desktop {
	display: none;
}
.nav__contenido {
	width: 100%;
}
.header__logo {
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
	background-color: transparent;
}
@media only screen and (min-width: 768px) {
	nav {
		height: 5.5rem;
		padding: 0 2rem;
	}
	.nav__contenido {
		gap: 2rem;
	}
	.menu {
		width: auto;
		gap: 2rem;
	}
	.logo {
		height: 2.3125rem;
	}
	.idiomas--mobile {
		display: none;
	}
	.idiomas--desktop {
		display: block;
	}
	.nav__contenido {
		width: auto;
	}
}
/*PRINCIPAL*/
.principal {
	margin-top: 6.038rem;
}
.principal__container {
	position: relative;
}
.principal__img {
	width: 100%;
	display: block;
}
.principal__container--textos {
	background-image: url("../img/dibujos-hero.svg");
	background-size: cover;
	background-position: right top;
	background-repeat: no-repeat;
	gap: 1.5rem;
	padding: 4.09rem 1rem 4.09rem 1.5rem;
}
.principal__btns {
	gap: .5rem;
}
.nova--principal {
	color: #FFFFFF;
	font-size: 2.25rem;
	font-style: normal;
	font-weight: 400;
	line-height: 115%;
}
.textos {
	gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
	.principal {
		margin-top: 5.5rem;
	}
	.principal__container {
		width: 50%;
	}
	.principal__img {
		position: absolute;
		height: 100%;
    	width: 100%;
		right: 0;
		top: 0;
		-o-object-fit: cover;
		object-fit: cover;
	}
	.principal__container--textos {
		padding: 5.37rem 1.75rem 5.44rem 1.75rem;
	}
	.principal__btns {
		gap: 1rem;
	}
	.nova--principal {
		font-size: 2.625rem;
	}
}
@media only screen and (min-width: 1024px) {
	.principal__container--textos {
		padding: 4.56rem 2.38rem 4.5rem 0;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;	
	}
	.textos {
		max-width: 26rem;
	}
	.nova--principal {
		font-size: 3rem;
	}
}
@media only screen and (min-width: 1280px) {
	.principal__container--textos {
		padding: 8.12rem 4.63rem 6.96rem 0;	
	}
	.textos {
		gap: 1.92rem;
		max-width: 32rem;
	}
	.nova--principal {
		font-size: 3.5rem;
	}
}
@media only screen and (min-width: 1440px) {
	
}
@media only screen and (min-width: 1920px) {
	.principal__container--textos {
		padding: 12.63rem 4.81rem 10.71rem 0;	
	}
	.textos {		
		max-width: 42.5625rem;
	}
	.nova--principal {
		font-size: 4.5rem;
	}
}
/*BOCETO*/
.proyecto {
	padding: 4rem 0;
}
.proyecto__container {
	gap: 3rem;
}
.proyecto__item {
	width: 100%;
}
.proyecto__info {
	gap: 1.5rem;
	text-align: center;
}
.proyecto__titulo {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5rem;
	text-transform: uppercase;
}
.boceto {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.boceto__imagen {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}
.boceto__inferior {
    z-index: 1;
}
.boceto__superior {
    z-index: 2;
    -webkit-clip-path: inset(0 0 0 65%);
    clip-path: inset(0 0 0 65%);
    -webkit-transition: -webkit-clip-path 0s;
    transition: -webkit-clip-path 0s;
    -o-transition: clip-path 0s;
    transition: clip-path 0s;
    transition: clip-path 0s, -webkit-clip-path 0s;
}
.boceto__slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 65%;
    width: 4px;
    cursor: ew-resize;
    -webkit-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    transform: translateX(-2px);
    z-index: 10;
	background-image: url("../img/slider.svg");
}
.boceto__slider::before {
	content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.272rem;
	height: 2.272rem;
    background-image: url("../img/control-drag.svg");
}
.mensaje {
	position: absolute;
	z-index: 2;
	bottom: 50%;
	right: 42%;
}
.mensaje__texto {
	font-style: normal;
	font-weight: 400;
	font-size: 1.14913rem;
	line-height: 1.197rem;
	width: 7.375rem;
	font-family: "Caveat", cursive;
	color: var(--color-principal);
	-webkit-text-stroke-width: 0.25px;
	-webkit-text-stroke-color: var(--color-principal);
}
.mensaje__flecha {
	-ms-flex-item-align: end;
    align-self: flex-end;
	width: 3.19338rem;
}
@media only screen and (min-width: 768px) {
	.proyecto {
		padding: 6.25rem 0;
	}
	.mensaje__texto {
		font-size: 1.86rem;
		line-height: 1.9375rem;		
		width: 11.9375rem;
	}
	.mensaje__flecha {
		width: 6.02525rem;
	}
}
@media only screen and (min-width: 1024px) {
	.proyecto__item {
		-webkit-box-flex: 1;
	    -ms-flex: 1;
	    flex: 1;
	}
	.proyecto__info {
		text-align: left;
	}
	.btn--proyecto {
		-ms-flex-item-align: start;
		align-self: flex-start;
	}
}
@media only screen and (min-width: 1440px) {
	.proyecto {
		padding: 8.75rem 0;
	}
	.mensaje__flecha {
		width: 7.87213rem;
	}
}
/*BENEFICIOS*/
.beneficios {
	background-color: #0095D6;
	padding-top: 4rem;
}
.beneficios__fondo {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 12.5rem;
	width: 100%;
	overflow: hidden;
	margin-top: 3.12rem;
}
.beneficios__cuadro {
	width: 100%;
	background-color: #FFFFFF;
}
.beneficios__container {
	width: 100%;
	position: relative;
}
.beneficios__container--img {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.beneficios__container--lft {
	padding: 3rem 2rem;
	gap: 1.5rem;
	text-align: center;
}
.beneficios__encab {
	color: var(--color-verde);
	font-size: 1rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.21725rem;
	text-transform: uppercase;
}
.beneficios__container--img {
	height: 22.4375rem;
	width: 100%;
}
.btn--beneficios {
	height: 3.246rem;
	font-size: .8115rem;
}
.arrow--beneficios {
	font-size: 1.11581rem;
}
.beneficios__texto, .beneficios__texto p {
	color: #FFFFFF;
	font-size: 1.125rem;
	line-height: 1.5rem;
}
.flex--half {
	margin: 3rem 0 1.5rem 0;
}
.flex--half:last-child {
	margin: 0;
}
.flex--beneficios {
	width: 100%;
}
@media only screen and (min-width: 768px) {
	.beneficios {
		padding-top: 6.25rem;
	}
}
@media only screen and (min-width: 1024px) {
	.container--beneficios {
		gap: 3rem 1.5rem;
	}
	.beneficios__fondo {
		margin-top: 5.8rem;
		height: 16rem;
	}
	.beneficios__container {
		-webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;  
		-ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
	}
	.beneficios__container--lft {
		text-align: left;
		padding: 7.756rem 3.02rem;
	}
	.beneficios__container--img {
		height: auto;
		width: auto;
	}
	.btn--beneficios {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.flex--half {
		-webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;  
		margin: 0;
	}
}
@media only screen and (min-width: 1280px) {
	.container--beneficios {
		gap: 3rem;
	}
	.beneficios__fondo {
		margin-top: 10.37rem;
		height: 21.75rem;
	}
	.beneficios__container--lft {
		gap: 2rem;
		padding: 9.59rem 3.72rem;
	}
	.btn--beneficios {
		height: 4rem;
		font-size: 1rem;		
	}
	.arrow--beneficios {
		font-size: 1.375rem;
	}
}
@media only screen and (min-width: 1440px) {
	.beneficios__fondo {
		margin-top: 7.25rem;
	}
	.beneficios__container--lft {
		gap: 2rem;
		padding: 11.16rem 5.23rem;
	}
}
@media only screen and (min-width: 1920px) {
	.beneficios__container--lft {
		padding: 8.56rem 5.23rem;
	}
}
/*FAQS*/
.faqs {
	padding: 4rem 0;
}
.container--faqs {
	gap: 3rem;
}
.faqs__info {
	gap: 1rem;
}
.faqs__container {
	gap: .5rem;
	padding: 1.5rem;
	background-color: var(--color-amarillo);
}
.faq__button {
	width: 100%;
	font-weight: 600;
	text-align: left;
	border: none;
	padding: 0;
	background-color: transparent;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	cursor: pointer;
}
.faq__svg {
	-ms-flex-negative: 0;
	flex-shrink: 0;
}
.faq__button--active .faq__svg {
	transform: rotate(-180deg);
}
.faqs__encabezado {
	text-align: center;
}
.faq__titulo {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 700;
}
.faqs__encabezado {
	gap: 1rem;
}
@media only screen and (min-width: 768px) {
	.faqs {
		padding: 6.25rem 0 4rem 0;
	}
}
@media only screen and (min-width: 1024px) {
	.faqs {
		padding: 6.25rem 0;
	}
	.faqs__encabezado {
		text-align: left;
	}
}
@media only screen and (min-width: 1024px) {
	.faqs {
		padding: 7.5rem 0;
	}
}
@media only screen and (min-width: 1440px) {
	.faqs {
		padding: 8.75rem 0;
	}
}
/*FOOTER*/
.footer__contenido {
	gap: 1.5rem;
	padding: 3rem 0;	
	border-top: 1px solid rgba(7, 85, 120, 0.20);
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.footer__contacto {
	width: 100%;
}
.contacto {
	max-width: 60%;
	margin: 0 auto;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.footer__enlaces {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5rem;
	text-decoration: none;
}
.redes {
	width: 100%;
	gap: 2.31rem;
	list-style-type: none;
	margin: 0;
	padding: 0;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.footer__imgs {
	gap: 1.5rem;
	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.footer__logos {
	max-height: 2.27388rem;
	-webkit-filter: brightness(0) saturate(100%) invert(22%) sepia(26%) saturate(3800%) hue-rotate(163deg) brightness(95%) contrast(90%);
    filter: brightness(0) saturate(100%) invert(22%) sepia(26%) saturate(3800%) hue-rotate(163deg) brightness(95%) contrast(90%);
}
@media only screen and (min-width: 768px) {
	.footer__contenido {
		-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	}
	.footer__contacto {
		width: auto;
	}
	.redes {
		width: auto;
	}
}
@media only screen and (min-width: 1024px) {
	.contacto {
		max-width: none;
	}
	.sep::before {
		content: "•";
		font-weight: bold;
		font-size: 1rem;
		margin: 0 .5rem;
	}
}
.sep--idiomas::before {
	font-weight: 400;
	margin: 0;
	content: "•";
	font-size: 1rem;
}
/*DONACION*/
.donacion {
	height: 100%;
	width: 100%;
	padding-top: 6.038rem;
}
.seleccion {
	height: calc(100% - 4rem);
	width: 100%;
	background-image: url("../img/imagen-3d.webp");
	background-size: cover;
	background-repeat: none;
	background-position: center;
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
  	position: relative;
}
.cuadros {
	height: 4rem;
	background-color: #00DF82;
	justify-content: center;	
	-webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.cuadros__mensaje {
	color: #043A53;
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	text-align: center;
}
.seleccionado__contenido {
	gap: 1rem;
}
.box {
	height: 100%;
	width: 100%;
	padding: 0;
	position: relative;
	background-color: transparent;
	cursor: pointer;
	width: calc(100% / 8);
	height: calc(100% / 13);
	border: none;	
	background-color: rgba(255,255,255,.7);
	border-left: 1px solid #9FA9AD;
	border-top: 1px solid #9FA9AD;
	-webkit-transition: background-color .5s, border-color .3s;
    -o-transition: background-color .5s, border-color .3s;
    transition: background-color .5s, border-color .3s;
}
.box--active, .box:hover {
	background-color: transparent;
}
.box--active {
	border: 3px solid #00DF82;
}
.no-left {
	border-left: none;
}
.no-right {
	border-right: none;
}
.no-top {
	border-top: none;
}
.no-bottom {
	border-bottom: none;
}
.seleccion--inactiva .box {
	outline: 0;
	border: none;
	background-color: transparent;
	pointer-events: none;
}
.cuadros--opacity {
	opacity: 0;
}
@media only screen and (min-width: 768px) {
	.donacion {
		padding-top: 5.5rem;
	}
	.cuadros__mensaje {
		font-size: 1.25rem;
	}
	.seleccionado__contenido {
		gap: 2rem;
	}
}
@media only screen and (min-width: 1024px) {
	.donacion {
		padding: 7.94rem 2rem 3.31rem 2rem;
	}
	.box {
		width: calc(100% / 27);
		height: calc(100% / 13);
	}
}
/*AGRADECIMIENTO*/
.agradecimiento {
	width: 100%;
	height: 50%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("../img/dibujos-hero.svg");
  	background-size: cover;
  	background-position: right top;
  	background-repeat: no-repeat;
}
.agradecimiento__container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}
.textos--agradecimiento {
	max-width: 80%;
}
.redes--footer {
	gap: 1rem;
}
.btn-redes {
	background-color: #FFFFFF;
	border-radius: 100%;
	height: 2.5rem;
	width: 2.5rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	cursor: pointer;
}
.agradecimiento__volver {
	margin-top: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	display: block;
	color: #FFFFFF;
}
.donacion--agradecimiento .box {
	display: none;
}
.agradecimiento__descripcion p {
	color: #FFFFFF;
	font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
	.btn-redes {
		height: 3.5rem;
		width: 3.5rem;
	}
	.agradecimiento__volver {
		margin-top: 1.5rem;
	}
}
@media only screen and (min-width: 1024px) {
	.agradecimiento {
		width: 50%;
		height: 100%;
	}
	.textos--agradecimiento {
		max-width: 70%;
	}
}
/*VIDEO*/
.overlay {
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
	background-color: rgba(0,0,0,0.9);
	opacity: 0;
	pointer-events: none;
	-webkit-transform: scale(0);
  	transform: scale(0);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  	-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.overlay--open {
	z-index: 9;
	opacity: 1;
	pointer-events: all;
	-webkit-transform: scale(1);
  	transform: scale(1);
}
.overlay__container {
	position: relative;
	height: 90%;
	width: 90%;
	margin: 0 auto;
}
.container-video {
	position: relative;
	width: 90%;
	overflow: hidden;
	padding-top: 56.25%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
}
.cerrar {
	position: absolute;
	right: 2rem;
	top: 2rem;
	background-color: transparent;
	border: none;
	cursor: pointer;
	z-index: 9;
}
.hide {
	display: none;
}