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;
    height: 100%;
}
:root {
    --color-principal: #1B4146;
}
* {
	color: var(--color-principal);
	font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    font-family: "Mulish", sans-serif;
}
body {
	opacity: 0;
    height: 100%;
	min-height: 100%;
    position: relative;    
    background: -o-linear-gradient(327deg, rgba(194, 254, 246, 0.20) 0%, rgba(194, 254, 246, 0.00) 28.46%), #89B9B6;
    background: linear-gradient(123deg, rgba(194, 254, 246, 0.20) 0%, rgba(194, 254, 246, 0.00) 28.46%), #89B9B6;
}
.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: calc(100% - 4rem);
	}
}
@media only screen and (min-width: 1440px) {
	.container {
		width: 80.25rem;
	}
}
/*FLEX*/
.flex, .flex-wrap, .flex-center, .flex-spaceBetween, .flex-column {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.flex-wrap, .flex-column {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-center {
    -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;
}
/*COMUN*/
.responsive {
	display: block;
	max-width: 100%;
	max-height: 100%;
}
strong {
    font-weight: 700;
}
/*COPOS DE NIEVE*/
.snowflake {
    position: fixed;
    top: -0.625rem;
    color: white;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-animation-name: fall, sway;
    animation-name: fall, sway;
    -webkit-animation-timing-function: linear, ease-in-out;
    animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    will-change: transform;
    pointer-events: none;
}
@-webkit-keyframes fall {
    0% {
        -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(-120px, 100vh, 0) rotate(360deg);
        transform: translate3d(-120px, 100vh, 0) rotate(360deg);
        opacity: 0.7;
    }
}
@keyframes fall {
    0% {
        -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(-120px, 100vh, 0) rotate(360deg);
        transform: translate3d(-120px, 100vh, 0) rotate(360deg);
        opacity: 0.7;
    }
}
@-webkit-keyframes sway {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        margin-left: 1.563rem;
    }
  }
  @keyframes sway {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        margin-left: 1.563rem;
    }
}
/*BOLAS EN MOVIMIENTO*/
@-webkit-keyframes balanceo-leve {
  	0% { -webkit-transform: rotate(.5deg); transform: rotate(.5deg); }
  	50% { -webkit-transform: rotate(-.5deg); transform: rotate(-.5deg); }
  	100% { -webkit-transform: rotate(.5deg); transform: rotate(.5deg); }
}
@keyframes balanceo-leve {
  	0% { -webkit-transform: rotate(.5deg); transform: rotate(.5deg); }
  	50% { -webkit-transform: rotate(-.5deg); transform: rotate(-.5deg); }
  	100% { -webkit-transform: rotate(.5deg); transform: rotate(.5deg); }
}
.moverRect {
    -webkit-animation-name: balanceo-leve;
    animation-name: balanceo-leve;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate; 
    -webkit-animation-duration: 3.5s; 
    animation-duration: 3.5s; 
}
.vel1 {
    -webkit-transform-origin: 388.25px 0;
    -ms-transform-origin: 388.25px 0;
    transform-origin: 388.25px 0; 
    -webkit-animation-delay: 0s; 
    animation-delay: 0s; 
}
.vel2 {
    -webkit-transform-origin: 290px 5px;
    -ms-transform-origin: 290px 5px;
    transform-origin: 290px 5px;
    -webkit-animation-delay: -0.35s;
    animation-delay: -0.35s; 
}
.vel3 {
    -webkit-transform-origin: 495.75px 0;
    -ms-transform-origin: 495.75px 0;
    transform-origin: 495.75px 0;
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}
.vel4 {
    -webkit-transform-origin: 440px 0;
    -ms-transform-origin: 440px 0;
    transform-origin: 440px 0;
    -webkit-animation-delay: -1.05s;
    animation-delay: -1.05s;
}
.vel5 {
    -webkit-transform-origin: 379.25px 0;
    -ms-transform-origin: 379.25px 0;
    transform-origin: 379.25px 0;
    -webkit-animation-delay: -1.4s;
    animation-delay: -1.4s;
}
.vel6 {
    -webkit-transform-origin: 101.75px 0;
    -ms-transform-origin: 101.75px 0;
    transform-origin: 101.75px 0;
    -webkit-animation-delay: -1.75s;
    animation-delay: -1.75s;
}
.vel7 {
    -webkit-transform-origin: 289.75px 0;
    -ms-transform-origin: 289.75px 0;
    transform-origin: 289.75px 0;
    -webkit-animation-delay: -2.1s;
    animation-delay: -2.1s;
}
.vel8 {
    -webkit-transform-origin: 192px 0;
    -ms-transform-origin: 192px 0;
    transform-origin: 192px 0;
    -webkit-animation-delay: -2.45s;
    animation-delay: -2.45s;
}
.vel9 {
    -webkit-transform-origin: 180.75px 0;
    -ms-transform-origin: 180.75px 0;
    transform-origin: 180.75px 0;
    -webkit-animation-delay: -2.8s;
    animation-delay: -2.8s;
}
.vel10 {
    -webkit-transform-origin: 197.5px 1px;
    -ms-transform-origin: 197.5px 1px;
    transform-origin: 197.5px 1px; 
    -webkit-animation-delay: -3.15s; 
    animation-delay: -3.15s;
}
/*HEADER*/
header {
	position: absolute;
	z-index: 9;
	width: 100%;
	top: 0;
	left: 0;
    padding:1.5rem 0 2.55rem 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
header::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.8;
    z-index: -1;
    top: 0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(63.18%, #89B9B6), to(rgba(137, 185, 182, 0.00)));
    background: -o-linear-gradient(top, #89B9B6 63.18%, rgba(137, 185, 182, 0.00) 100%);
    background: linear-gradient(180deg, #89B9B6 63.18%, rgba(137, 185, 182, 0.00) 100%);
}
.logo {
    max-height: 2.3rem;
    margin: 0 auto;
}
.enlace {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 1rem;
}
nav {
    text-align: center;
}
@media only screen and (min-width: 768px) {
    .logo {
        max-height: 2.8235rem;
    }
    .logo--synvert {
        max-height: 2.5625rem;
    }
}
@media only screen and (min-width: 1024px) {
    header {
        padding: 2rem 0 0 2rem;
    }
    header::before {
        display: none;
    }
    .logo {
        margin: 0;
        height: 3.13725rem;
    }
}
/*BTNS*/
.btn {
    height: 3rem;
    color: #FFFFFF;
    border-radius: 62.5rem;
    padding: 0.5rem 1.5rem;
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: none;
    cursor: pointer;
    background-color: var(--color-principal);
    -webkit-transition: background-color 0.3s ease;
	-o-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}
.btn--donar {
    height: 2.5rem;
}
.btn:hover {
    background-color: #295F66;
}
/*PASO UNO*/
.pasos__uno {
    background: -o-linear-gradient(327deg, rgba(194, 254, 246, 0.20) 0%, rgba(194, 254, 246, 0.00) 28.46%), -o-linear-gradient(bottom, #89B9B6 0%, #89B9B6 100%), #FFF;
    background: linear-gradient(123deg, rgba(194, 254, 246, 0.20) 0%, rgba(194, 254, 246, 0.00) 28.46%), linear-gradient(0deg, #89B9B6 0%, #89B9B6 100%), #FFF;
}
.introduccion {
    margin-left: 2rem;
    position: relative;
    z-index: 1;
    pointer-events: none;
}
.nieve {
    display: none;
    pointer-events: none;
}
.inicio {
    gap: 1rem;
    position: relative;
    z-index: 1;
    padding: 0 1.5rem;
    max-width: 34rem;
    margin: 0 auto;
}
.inicio__titulo {
    font-weight: 700;
    font-size: 2.125rem;
    line-height: normal;
    font-style: normal;
}
.inicio__descripcion, .inicio__descripcion p {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}
.inicio__donar {
    position: sticky;
    bottom: 0;
    padding: 0 0 .94rem 0;
    margin-top: 1rem;
}
.inicio__donar::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 6.1875rem;
    z-index: -1;
    background: -webkit-gradient(linear, left bottom, left top, from(#89B9B6), color-stop(238.38%, rgba(137, 185, 182, 0.00)));
    background: -o-linear-gradient(bottom, #89B9B6 0%, rgba(137, 185, 182, 0.00) 238.38%);
    background: linear-gradient(0deg, #89B9B6 0%, rgba(137, 185, 182, 0.00) 238.38%);
}
.btn--inicio {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    .introduccion {
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%);
        left: 50%;
    }
    .nieve {
        display: block;
        position: relative;
        z-index: 1;
    }
    .btn--inicio {
        width: auto;
    }
    .inicio {
        padding: 0 0 2rem 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .introduccion {
        max-width: 70%;
    }
}
@media only screen and (min-width: 1024px) {
    nav {
        text-align: left;
    }    
    .pasos__uno {
        min-height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: safe center;
        -ms-flex-align: safe center;
        align-items: safe center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 2rem;
        background: -o-linear-gradient(327deg, rgba(194, 254, 246, 0.20) 0%, rgba(194, 254, 246, 0.00) 28.46%), #89B9B6;
        background: linear-gradient(123deg, rgba(194, 254, 246, 0.20) 0%, rgba(194, 254, 246, 0.00) 28.46%), #89B9B6;
    }
    .introduccion {
        position: absolute;
        top: 0;
        right: 0;
        max-height: calc(100vh - 14rem);
        height: 100%;
        margin: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        left: auto;
        width: auto;
    }
    .inicio {
        padding: 0;
        margin: 0;
    }
    .inicio__titulo {
        font-size: 2.625rem;
        font-style: normal;
        line-height: normal;
    }
    .inicio__donar {
        position: inherit;
    }
    .inicio__donar::before {
        display: none;
    }    
    .nieve {
        position: fixed;
        bottom: 0;
        right: 0;
        height: 14.5rem;
    }
}
@media only screen and (min-width: 1280px) {
    .introduccion {
        max-height: calc(100vh - 8rem);
    }
}
@media only screen and (min-width: 1440px) {
    .pasos__uno {
        padding: 0 0 0 9.64rem;
    }
}
@media only screen and (min-width: 1024px) and (max-height: 600px) {
    .pasos__uno {
        padding: 7rem 0 2rem 2rem;
    }
    .nieve {
        display: none;
    }
}
@media only screen and (min-width: 1024px) and (max-height: 660px) {
    .inicio__titulo {
        font-size: 2rem;
    }
}
/*PASO DOS*/
.pasos__dos {
	width: 100%;
	height: 100%;
    overflow: hidden;
    position: relative;
    position: absolute;
    top: 0;
    opacity: 0;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-bottom: 3.12rem;
    pointer-events: none;
}
.pasos__dos--active {
    opacity: 1;
    pointer-events: all;
    -webkit-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	transition: opacity .5s ease;
}
.arbol {
	margin: 0 auto;
	display: block;
    z-index: 1;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    height: calc(100% - 12rem);
}
.bola {
    cursor: pointer;
}
.punteado {
    opacity: 0;
	pointer-events: none;
}
.punteado--active {
    opacity: 1;
    -webkit-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s; 
}
.mensaje {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 2;
    gap: .62rem;
    width: 100%;
}
.mensaje__seleccion {
    min-width: 14.313rem;
    min-height: 4.563rem;
    padding: .75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(27, 65, 70, 0.50);
}
.mensaje__texto {
    text-align: center;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem;
    max-width: 12.25rem;
}
.mensaje__container {
    gap: .75rem;
}
.no-btn {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    text-align: center;
    font-size: .875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    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;
    opacity: 0;
    pointer-events: none;
}
.btn--active {
    opacity: 1;
    cursor: pointer;
    pointer-events: all;
    -webkit-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s; 
}
@media only screen and (min-width:1024px) {
  	.arbol {
    	height: 100%;
        position: absolute;
        left: 65%;
  	}
    .pasos__dos {
        padding-left: 2.5rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: safe center;
        -ms-flex-align: safe center;
        align-items: safe center;
        -webkit-box-orient: inherit;
        -webkit-box-direction: inherit;
        -ms-flex-direction: inherit;
        flex-direction: inherit;
        -webkit-box-pack: inherit;
        -ms-flex-pack: inherit;
        justify-content: inherit;
        padding-bottom: 0;
        background: -o-linear-gradient(327deg, rgba(194, 254, 246, 0.20) 0%, rgba(194, 254, 246, 0.00) 28.46%), #89B9B6;
        background: linear-gradient(123deg, rgba(194, 254, 246, 0.20) 0%, rgba(194, 254, 246, 0.00) 28.46%), #89B9B6;
    }
    .mensaje {
        width: auto;
    }
}
@media only screen and (min-width:1280px) {
    .arbol {
        left: 50%;
    }
    .pasos__dos {
        padding-left: 2.5rem;
    }
}
@media only screen and (min-width:1440px) {
    .pasos__dos {
        padding-left: 6rem;
    }
}
@media only screen and (min-width:1920px) {
    .pasos__dos {
        padding-left: 10rem;
    }
}
/*AGRADECIMIENTO*/
.agradecimiento {
    min-height: 100%;
    background: -o-linear-gradient(327deg, rgba(194, 254, 246, 0.20) 0%, rgba(194, 254, 246, 0.00) 28.46%), -o-linear-gradient(bottom, #89B9B6 0%, #89B9B6 100%), #FFF;
    background: linear-gradient(123deg, rgba(194, 254, 246, 0.20) 0%, rgba(194, 254, 246, 0.00) 28.46%), linear-gradient(0deg, #89B9B6 0%, #89B9B6 100%), #FFF;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 6rem 1rem 1rem 1rem;
    gap: 2rem;
}
.agradecimiento__contenido {
    gap: 1rem;
    position: relative;
    z-index: 1;
}
.agradecimiento__titulo {
    font-size: 3rem;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
}
.agradecimiento__descripcion, .agradecimiento__descripcion p {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
}
.agradecimiento__descripcion p {
    margin-bottom: 1rem;
}
.agradecimiento__descripcion p:last-child {
    margin-bottom: 0;
}
.agradecimiento__volver {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}
.redes {
    list-style-type: none;
    margin: 1rem 0 0 0;
    padding: 0;
    gap: 1rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.redes__enlace {
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    border-radius: 25rem;
    justify-content: center;
    -webkit-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    background-color: var(--color-principal);
}
.redes__enlace:hover {
    background-color: #295F66;
}
.agradecimiento__img {
    position: relative;
    z-index: 1;
}
@media only screen and (min-width: 768px) {
    .redes__enlace {
        width: 3rem;
        height: 3rem;
    }
    .agradecimiento__img {
        max-width: 34rem;
        margin: 0 auto;
    }  
}
@media only screen and (min-width: 1024px) {   
    .agradecimiento {
        -webkit-box-align: safe center;
        -ms-flex-align: safe center;
        align-items: safe center;
        -ms-flex-line-pack: inherit;
        align-content: inherit;
        padding: 2rem 3rem 0 3rem;
        gap: 2rem;
    }
    .agradecimiento__descripcion {
        max-width: 30.375rem;
        margin: 0;
    }
    .agradecimiento__titulo {
        font-size: 6.20006rem;
        line-height: 8.26681rem;
        letter-spacing: -0.124rem;
    }
    .redes {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        margin-bottom: 1rem;
    }
    .agradecimiento__img {
        max-width: 24rem;
        margin: 0;
    }    
    .agradecimiento__volver {
        -ms-flex-item-align: start;
        -ms-grid-row-align: start;
        align-self: start;
    }
}
@media only screen and (min-width: 1280px) {
    .agradecimiento {
        gap: 6.14rem;
        padding: 0 3rem;
    }
    .agradecimiento__img {
        width: 34.7rem;
        max-width: inherit;
    }
}
@media only screen and (min-width: 1440px) {
    .agradecimiento {
        padding: 0 8.21rem 0 10.94rem;
    }    
}
@media only screen and (min-width: 1920px) {
    .agradecimiento {
        padding: 0 20rem;
    }    
    .agradecimiento__img {
        width: 40rem;
    }
}
/*OVERLAY*/
.overlay {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9;
	visibility: hidden;
	opacity: 0;
	background: rgba(4, 9, 10, 0.70);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: safe center;
    -ms-flex-align: safe center;
    align-items: safe center;
	pointer-events: none;
}
.overlay--open {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	transition: transform 0.4s, opacity 0.4s;
	overflow: auto;
	height: 100%;
	min-height: 100%;
	pointer-events: all;
}
.overlay__modal {
	border-radius: .5rem;
	background: #FFFFFF;
	margin: 5rem auto;
	padding: 3rem;
	max-width: calc(100% - 2rem);
	position: relative;
}
.overlay__close {
    padding: 0;
	border: none;
	cursor: pointer;
	background-color: transparent;
	position: absolute;
	top: .75rem;
	right: .75rem;
}
.overlay__contenido {
    gap: 1rem;    
    max-width: 15.375rem;
}
.cantidad__label {
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem;
}
.cantidad__input, input {
    width: 100%;
    position: relative;
}
input {
    height: 3rem;
    padding: 0 1.5rem;
    border-radius: 0.5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(27, 65, 70, 0.50);
}
.cantidad__moneda {
	position: absolute;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	text-align: center;
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.5rem;
	letter-spacing: -0.01125rem;
}
.btn--disabled {
    opacity: .5;
    cursor: no-drop;
}
.desgravacion {
    font-size: .875rem;
    text-align: center;
}
.hide {
    display: none;
}