/*TIPOGRAFIAS*/
/*RALEWAY - HEADINGS*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500&display=swap');
/*font-family: 'Raleway', sans-serif;*/

/*INTER - GENERAL*/
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
/*font-family: 'Inter', sans-serif;*/

/*PALETA CROM{ATICA*/
:root{--primary: #A8E000;
    --primary_2:#D3F094;
    --primary_3: #ECFFB2;
    --secondary: #C366FF;
    --secondary_2: #E2B5FE;
    --secondary_3: #F4E2FF;
    --texts: #353535;
    --texts_2: #8E8E8E;
    --texts_on_desabled: #9E9E9E;
    --disabled: #E0E0E0;
    --error: #B00020;
    --texts_on_error: #FFF;
}

/*ESTILOS TIPOGRÁFICOS*/
h1 {
    font-family: 'Raleway', sans-serif;
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 3.75rem;
}

h2{
        font-family: 'Raleway', sans-serif;
        font-size: 2.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2.8125rem;
        letter-spacing: 0.01563rem;
        height: fit-content;
    }
    
h3{
    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.1875rem;
}

h4{
    font-family: 'Raleway', sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.9375rem;
    letter-spacing: 0.00188rem;
}

.subtitle{
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.00938rem;
    height: fit-content;
}

.body{
    font-family: 'Inter';
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0.03125rem;
}

.button{
    font-family: 'Inter',sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0.07813rem;
}

.caption{
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: 0.025rem;
}

.overline{
    font-family: 'Inter', sans-serif;
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 400;
    line-height: 0.875rem;
    letter-spacing: 0.00781rem;
}

/*COMPONENTES*/

.top-bar-home{
    background: var(--primary, #A8E000);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14);
    width: 26.875rem;
    height: 3.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    display: grid;
    grid-template-columns:  95% 5%;
    align-content: center;
    
}
.top-bar-home h4 {padding-left: 3.5rem;
}
.top-bar-home img{width:1.5rem;
align-self: center;
}

.buscar-home{
background: #FFF;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
width: 26.875rem;
height: 3.5rem;
padding-left: 1rem;
padding-right: 1rem;
display: grid;
grid-template-columns:  95% 5%;
align-content: center;

}

.buscar-home img{
    width:1.5rem;
    align-self: center;
}

main{
    width: 24.875rem;
    margin-right: 1rem;
    margin-left: 1rem;}

.mapa-home{
    margin-top: 0.5rem;
   width: fit-content;
}



/*GENERAL*/
body{
margin-left: 0;
margin-right:0;
display: grid;
background-color: var(--texts);
}


div.contenedor {display:grid;
    
}


.contenedor{
    color: var(--texts, #353535);
    padding-left: 1rem;
    padding-right: 1rem;
   /* padding-top: 10.75rem;*/
   padding-top: 4.38rem;
    padding-bottom: 10.75rem;
    background-color: #FFF;
    display: grid;
    gap: 1rem;
    justify-self: center;
    width: 28.875rem;
    height: 58.25rem;
   /* justify-content: center;*/
/*width: 26.875rem;
height: 58.25rem;
vertical-align: middle;*/text-align: center;
}

div.boton-skip{justify-self: start;
align-self: flex-start;
padding-left: 1rem;
margin-bottom: 4rem;}
div.boton-skip p.button a{text-decoration: none;
color: var(--primary);
;}
figure{justify-self: center;
margin-bottom: 4rem;
margin-top: 0;}
figure img{margin-bottom: 2rem;}
figure figcaption h2{padding: 0 0 9rem 0;}



.circulo{width: 1rem; 
    height: 1rem; 
    background-color: var(--disabled); 
    border-radius: 50%;}
.circulo-activo{width: 1rem; 
    height: 1rem; 
    background-color: var(--primary); 
    border-radius: 50%;}
.circulos{display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 0.5rem;
    justify-self: center;}

.boton{background-color: var(--primary);
    display: inline-flex;
     justify-content: center;
    align-items: center;
    border-radius: 0.65rem;
    width: fit-content; 
    height: fit-content;
    justify-self: center;}

.boton .button {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;}

    .boton .button a{text-decoration: none;
    color: var(--texts);}
/*.contenedor .subtitle {text-align: center;}*/