@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe:ital@0;1&family=Bad+Script&family=Handlee&display=swap');

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    background-color: rgba(253, 245, 235, 1);
    color: rgb(77, 75, 75);
}

header {
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* coloca el contenido uno debajo del otro */
    justify-content: center;
    /* centra verticalmente */
    align-items: center;
    /* centra horizontalmente */
    text-align: center;
    /* PENDIENTE */
    padding: 0px 300px;
}

header h1 {
    font-family: "Bad Script", cursive;
    font-weight: 500;
    /* grosor, ejemplo bold, 400, 700 */
    font-style: normal;
    font-size: 6vw;
    /* aumentar o disminuir tamaño letra */
    letter-spacing: -1px;
    /* espaciado entre letras */
    word-spacing: -2px;
    /* espaciado entre palabras */
    color: #03453d;
    margin: 0;
}

header h2 {
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2vw;
    color: rgb(70, 70, 70);
    margin: 0;
}

header p {
    font-size: 18px;
    margin: 0 0;
    margin: 24px;
    padding: 14px;
}

header li {
    list-style: none;
}

nav {
    position: fixed;
    /* fixed se queda siempre visible respecto a la ventana, mientras que sticky solo se pega dentro de su contenedor al hacer scroll */
    top: 0;
    background-color: rgba(253, 245, 235, 0.745);
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*border-bottom: 2px solid rgb(196, 172, 212);*/
}

nav img {
    /*height: 16%;*/
    width: 12%;
    filter: contrast(200%) saturate(70%);
    padding: 5px;
    /*background-color: rgba(255, 255, 255, 0.822)*/
}

nav ul {
    display: flex;
    gap: 35px;
    /* espacio entre elementos */
    list-style: none;
}

nav li a {
    padding: 10px;
    text-decoration: none;
    /*text-transform: uppercase;*/
    font-size: 17px;
    color: #03453d;
}

nav li a:hover {
    border-bottom: 1px solid #3d423c;
    color: #3d423c;
    background-color: #3d423c0c;
}

.titulo-servicios-habitaciones {
    margin-top: 90px;
}

.titulo-servicios-habitaciones h3 {
    margin: 50px 0;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.3vw;
    color: #03453d;
    letter-spacing: 2px;
    word-spacing: 2px;
    margin: 0;
}

.listado-servicios-habitaciones {
    display: flex;
    flex-direction: row;
    /*justify-content: center;*/
    /*align-items: center; ----REVISAR*/
    padding: 0;
    margin: 20px 50px;
}

.listado-servicios-habitaciones li {
    width: 70%;
}

.listado-servicios-habitaciones svg {
    height: 60px;
    width: 60px;
}

.listado-servicios-habitaciones p {
    font-size: 13px;
    margin: 0;
    padding: 0 10px;
}

.listado-servicios-habitaciones li::before {
    background-color: #b8aa9b;
    content: "";
    display: block;
    height: 110px;
    /*REVISAR*/
    position: absolute;
    /*top: 0;*/
    width: .5px;
}

.listado-servicios-habitaciones::after {
    content: "";
    /*position: absolute;*/
    width: .5px;
    height: 110px;
    /* igual a tus rayas */
    background-color: #b8aa9b;
}

#wrapper {
    width: 60%;
    /*height: 100%;*/
    margin: 10px auto;
    /*border: 1px solid #d9d9d9;*/
    padding: 20px;
}

/*oculta inputs*/
input[name="imagenes-habitaciones"] {
    position: absolute;
    left: -1000em;
}

/*.botones {
    display: flex;
    flex-wrap: wrap; /*permite que los labels pasen a otra línea si no caben
    justify-content: space-evenly;
    align-items: center;
    gap: 80px; recomendaciones sobre justify-content y gap:
  - Para controlar el espacio exacto entre elementos, usar:
      justify-content: center;
      gap: [valor];
  - Para distribuir elementos automáticamente en todo el contenedor, usar:
      justify-content: space-around; // o space-evenly
      No usar gap con space-around/space-evenly, puede generar espacios inesperados 
    white-space: nowrap;
    evita que el texto haga salto de línea 
}

.botones label {
    padding: 5px 5px;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-weight: bold;
    font-size: 1.3vw;
    letter-spacing: 2px;
    word-spacing: 2px;
}*/

/*estilo de label activo*/
/*input[name="imagenes-habitaciones"]:checked + label {} ----afecta solo a los inputs con ese name*/
/*Cuando un <input> está marcado (checked), aplica estos estilos al <label> que está inmediatamente después de él.*/
input:checked+label {
    text-decoration: underline;
    color: #03453d;
}

/*ocultar todos los contenedores por defecto*/
.contenedor .cont {
    display: none;
}

/*mostrar contenedor 1 cuando radio 1 esté checked*/
#esencial:checked~.contenedor .cont:nth-of-type(1) {
    display: block;
}

/*mostrar contenedor 2 cuando radio 2 esté checked*/
#vistamar:checked~.contenedor .cont:nth-of-type(2) {
    display: block;
}

/*mostrar contenedor 3 cuando radio 3 esté checked*/
#familiar:checked~.contenedor .cont:nth-of-type(3) {
    display: block;
}

.cont img {
    max-width: 40%;
    /* Ajusta ancho de la imagen */
    height: auto;
    /* Mantener proporción */
}