@font-face {
    font-family : Beclave;
    src: url(../fonts/Beclave_Demo.ttf);
}
@font-face {
    font-family : Metropolis;
    src: url(../fonts/Metropolis-Regular.otf);
}

/* Reset global */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;   /* importante */
  width: 100%;    /* importante */
}


body {
    background-color: #f2f1eb;
}

h1, h2, h3, h4, h5, h6, legend, button{
    font-family: Metropolis;
    font-weight: bold;
}

p, label, input, select, a, table, span {
    font-family: Metropolis;
    color: #49280c;
}

.header_principal {
        display: flex;
        align-items: center;
        background-color: #49280c;
    }
    .logo {
    width: 50%;
    margin:auto;
    }
    .label_rango {
        display: flex;
        align-items: center;
        font-size: 1.1rem;
        justify-content: space-between;
    }
    .label_rango input {
        font-size: 1rem;
        border: none;
        padding: .5rem;
        border-radius: 0.5rem;
        width: 50%;
    }
    .label_rango select{
        font-size: 1rem;
        border: none;
        padding: 0.5rem;
        border-radius: 0.5rem;
        width: 75%;
    }
    fieldset {
        border: none;
        margin-top: 1rem;
        width: 95%;
    }
    legend {
        font-size: 1.2rem;
    }
    
    input[type="checkbox"] {
          /* Escala el checkbox al doble de su tamaño original */
          transform: scale(1.5);
          transform: border(none);
          /* Ajusta márgenes para evitar que se superponga con otros elementos */
          margin: 10px;
    }
    .amenidades {
        font-size: 1rem;
        display: flex;
        align-items: center;
    }
    .amenidades_principal {
        display: flex;
        justify-content: center;
    }
    .amenidades_check1{
        margin-left: 10%;
    }
    .titulo_rango {
        text-align:center;
        width: 80%;
        margin: auto;
        border-top: solid 1px black;
    }
    .buscar_principal {
        margin-top:.5rem;
        display: flex;
        width: 100%;
    }
    .buscar {
        border:none;
        font-size: 1rem;
        padding: .5rem;
        width:100%;
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
        margin-left: 0%;
    }
    button {
        font-size: 1rem;
        padding: .5rem;
        border: none;
        border-top-right-radius: 2rem;
        border-bottom-right-radius: 2rem;
        cursor: pointer;
        background-color: #49280c;
        color: white;
    }
    
    .rango_precio {
        width:100%;
        margin-bottom:.5rem;
    }
    
    #precio_rango {
        width: 70%;
        margin-left:15%;
        accent-color: #49280c; /* cambia el color del thumb y la barra */
        font-family: Metropolis;
        margin-bottom:.5rem;
    }
    .crea {
        text-align: center;
    }
    
    .crea img {
        width: 50%;
        margin:auto;
    }
    .servicios {
        display: flex;
    }
    .servicios img {
        width: 50%;
    }
    footer {
        text-align:center;
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-weight: bold;
    }
    
    footer a {
        text-decoration: none;
        color: #49280c;
    }
    
    /* Estilos para pantallas pequeñas */
@media screen and (max-width: 768px){
    .header_principal {
        display: flex;
    }
    
    .label_rango {
        display: flex;
        align-items: center;
        font-size: 1.1rem;
        justify-content: space-between;
    }
    .label_rango input {
        font-size: 1rem;
        border: none;
        padding: .5rem;
        border-radius: 0.5rem;
        width: 64%;
    }
    .label_rango select{
        font-size: 1rem;
        border: none;
        padding: 0.5rem;
        border-radius: 0.5rem;
        width: 70%;
    }
    fieldset {
        margin-top: 1rem;
        width: 93%;
    }
    legend {
        font-size: 1.2rem;
    }
    
    input[type="checkbox"] {
          /* Escala el checkbox al doble de su tamaño original */
          transform: scale(1.2);
          transform: border(none);
          /* Ajusta márgenes para evitar que se superponga con otros elementos */
          margin: 5px;
          border: none;
    }
    .amenidades {
        font-size: 1rem;
        display: flex;
        align-items: center;
    }
    .amenidades_principal {
        display: flex;
        margin-left: .2rem;
        margin-right: .2rem;
        justify-content: space-between;
    }
    .buscar {
        border:none;
        font-size: 1rem;
        padding: .5rem;
        width: 70%;
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
        margin-left: 5%;
    }
    button {
        font-size: 1rem;
        padding: .5rem;
        border: none;
        border-top-right-radius: 2rem;
        border-bottom-right-radius: 2rem;
        cursor: pointer;
        background-color:#49280c;
        color: white;
    }
}