@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root{
    --verde: #00BD89;
    --fondoblanco: #F3F3F3;
}
body{
    background-color: var(--fondoblanco);
    font-family: "Arvo", serif;
}
/* header */
header{
    position: sticky;
    top: 0;
}
#logo{
    width: 60px;
}
#banner-titulo1{
    font-weight: lighter;
}
#boton-perfil{
    width: 28px;
    
}
#banner{
    background-image: url("../img/capitalchile/mascara-banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding: 200px 0px;
}
#boton-banner{
    background-color: var(--verde);
    border: 0px;
    border-radius: 12px;
    padding: 10px 40px;
}
#boton-banner>a{
    text-decoration: none;
}

.iconos-banner{
    width: 36px;
}
/* .iconos-banner{
    align-items: center;
} */
/* Sección Servicios */
.primera-fila-iconos>img{
    width: 100px;
}
.primera-fila-iconos{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.primera-fila-iconos>p{
    padding-top: 14px;
}
.titulo-servicios{
    color: var(--verde);
    font-weight: bold;
}
.segunda-fila-iconos{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.segunda-fila-iconos>img{
    width: 100px;
}
.segunda-fila-iconos>p{
    padding-top: 14px;
}
/* Sección Noticias */
.titulo-noticias{
    color: var(--verde);
    font-weight: bold;
}
.noticias{
    font-weight: bold;
    background-color: white;
    border-end-start-radius: 14px;
    border-end-end-radius: 14px;
    width: 90%;
}
.noticias>img{
    width: 100%;
}
.noticias>p>a{
    text-decoration: none;
    color: black;
    font-size: 20px;
}
/* Sección ubicacion */
.titulo-ubicacion{
    color: var(--verde);
    font-weight: bold;
}
.mapa{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
iframe{
    width: 100%;
}
/* footer */
footer{
    background-color: var(--verde);
    
}
.contenedor-footer>h2{
    font-weight: bold;
}
.contenedor-redes-sociales>img{
    width: 40px;
}
#logo-footer{
    width: 80%;
}
#lista-footer{
    list-style: none;
}
.titulos-nav-footer{
    font-weight: bold;
    font-size: 18px;
}
.links-menu-footer{
    text-decoration: none;
}
/* Página de registro */
.titulo-registrate{
    color: var(--verde);
    font-weight: bold;
}
#contenedor-boton-registrarme{
   display: flex;
   justify-content: center;
}
#contenedor-boton-registrarme>button{
    background-color: var(--verde);
    padding: 20px 60px;
    border: 0px;
    border-radius: 12px;
}
#contenedor-boton-registrarme>button>a{
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
}
.asterisco{
    color: red;
}
.form-control{
    width: 50%;
    padding: 10px 20px;
}
/* Página de Registro Exitoso */
.registro-exitoso{
    height: 31vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.registro-exitoso>button{
    width: 20%;
    background-color: var(--verde);
    border: none;
    border-radius: 12px;
}
#boton-registrarme{
    font-size: 20px;
}
/* Ventana iniciar sesión */
#ventana-iniciar-sesion{
    background-color: var(--fondoblanco);
    position: absolute;
    top: 20%;
    left: 32%;
    border-radius: 12px;
    padding: 30px 80px;
    width: 34%;
}
#logo-iniciar-sesion{
    width: 60px;
}
.input-iniciar-sesion{
    width: 100%;
}
#boton-cerrar{
    position: absolute;
    right: 20px;
    top: 20px;
}
#boton-cerrar:hover{
    color: rgb(236, 0, 0);
}
.boton-iniciar-sesion{
    background-color: var(--verde) !important;
    padding: 20px 40px;
    font-size: 18px;
}
.contenedor-registro{
    padding-left: 10%;
    padding-right: 10%;
}
.abrir-ventana{
    display: none;
}
.oscurecer-header{
    filter:brightness(0.5);
}
.oscurecer-contenedor-registro{
    background-color: rgb(255, 255, 255);
    filter:brightness(0.5);
}

.oscurecer-footer{
    filter:brightness(0.5);
}
.oscurecer-main{
    background-color: rgb(255, 255, 255);
    filter:brightness(0.5);
}
