/* ================== RESET ================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ================== BODY ================== */
body {
  font-family: Arial, sans-serif;
  color: #3e2f24;
  background-color: #d6c1a1; /* beige-café */
  min-height: 100vh;
}

/* ================== HEADER ================== */
header.header {
  position: relative;
  text-align: center;
  padding: 20px 0;
  background-image: url('uploads/fondo-monterrey.jpg'); /* fondo 3840x1600 */
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  height: 510px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header.header .logo {
  height: 250px;
  margin-bottom: 10px;
}

header.header .back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: rgba(218,203,178,0.85);
  padding: 8px 15px;
  border-radius: 8px;
  text-decoration: none;
  color: #3e2f24;
  font-weight: bold;
  transition: background-color 0.2s;
}

header.header .back-button:hover {
  background-color: #cbb79d;
}

header.header h1,
header.header p,
header.header h2 {
  color: white; /* texto en blanco sobre fondo */
}

/* ================== TARJETAS HABITACIONES ================== */
.habitaciones-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  padding: 30px 10px;
  flex-grow: 1;
}

.habitacion-card {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  padding: 20px;
  width: 500px;
  text-align: center;
  transition: transform 0.2s;
}

.habitacion-card:hover {
  transform: scale(1.05);
}

.habitacion-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}

.habitacion-card button {
  background-color: #dacbb2;
  border: none;
  padding: 12px 25px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}

.habitacion-card button:hover {
  background-color: #cbb79d;
}

/* ================== DETALLE HABITACION ================== */
.detalle-container {
  padding: 30px 20px;
}

.habitacion-buttons {
  text-align: center;
  margin-bottom: 20px;
}

.habitacion-buttons button {
  background-color: #dacbb2;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.habitacion-buttons button:hover {
  background-color: #cbb79d;
  transform: scale(1.05);
}

.habitacion-buttons button.active-button {
  background-color: #cbb79d;
  font-weight: bold;
  border: 2px solid #3e2f24;
}

/* ================== CARRUSEL + INCLUYE + MAPA ================== */
.detalle-flex {
  display: flex;
  flex-direction: row;   /* siempre horizontal */
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: nowrap;     /* evita que se apilen */
  overflow-x: auto;      /* scroll horizontal en móviles */
}

.detalle-left,
.detalle-center,
.detalle-right {
  flex: 1;
  min-width: 250px;
  max-width: 500px;
}

/* Carrusel */
.detalle-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.detalle-left img#carousel-img {
  width: 100%;
  height: 350px; /* altura ajustada */
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.detalle-left button#prev,
.detalle-left button#next {
  background-color: #dacbb2;
  border: none;
  font-size: 24px;
  padding: 8px 15px;
  border-radius: 8px;
  cursor: pointer;
  margin: 5px;
}

.detalle-left button#prev:hover,
.detalle-left button#next:hover {
  background-color: #cbb79d;
}

/* Incluye */
.room-includes {
  background-color: rgba(218, 203, 178, 0.3);
  padding: 15px;
  border-radius: 8px;
  text-align: left;
  line-height: 1.6;
  font-size: 1rem;
  max-width: 400px;
}

.room-includes ul {
  list-style-type: disc;
  margin-left: 25px;
}

.room-includes h3 {
  margin-bottom: 15px;
}

/* Mapa */
.detalle-right iframe {
  width: 100%;
  height: 350px;
  border: 0;
  border-radius: 8px;
}

/* ================== FOOTER ================== */
footer {
  background-color: #d6c1a1;
  color: #3e2f24;
  text-align: center;
  padding: 20px;
  font-weight: bold;
}

/* ================== WHATSAPP ================== */
.whatsapp-footer {
  margin-top: 25px;
  text-align: center;
  background-color: #dacbb2;
  padding: 12px;
  border-radius: 8px;
  font-weight: bold;
}

.whatsapp-footer a {
  text-decoration: none;
  color: #3e2f24;
}

.whatsapp-footer a:hover {
  color: #000;
}

/* ================== LEYENDA ================== */
#room-desc {
  text-align: center;
  max-width: 700px;
  margin: 20px auto;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

/* ================== RESPONSIVE ================== */
@media (max-width: 1024px) {
  .habitacion-card {
    width: 45%;
  }
}

@media (max-width: 800px) {
  .habitacion-card {
    width: 90%;
  }

  .habitacion-buttons button {
    padding: 8px 15px;
    margin: 3px;
  }
}

/* ================== MOBILE OPTIMIZATION ================== */
@media (max-width: 600px) {
  body {
    font-size: 18px;       /* más grande en móvil */
    line-height: 1.8;
  }

  .habitacion-card {
    width: 100%;
    margin: 0 10px;
    padding: 20px;         /* más espacio interno */
  }

  .habitacion-card img {
    width: 100%;
    height: auto;
  }

  .habitacion-card button,
  .habitacion-buttons button {
    width: 100%;
    padding: 18px;
    font-size: 1.2em;
    background-color: #000; /* botones negros en móvil */
    color: #fff;            /* texto blanco */
  }

  .habitacion-card button:hover,
  .habitacion-buttons button:hover {
    background-color: #333; /* gris oscuro al pasar */
  }

  #room-desc {
    font-size: 20px;
    padding: 0 15px;
    text-align: center;
  }

  /* Mantener horizontal pero permitir scroll */
  .detalle-flex {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .detalle-left,
  .detalle-center,
  .detalle-right {
    min-width: 300px;   /* más grandes en móvil */
    max-width: 95%;
  }

  .detalle-left img#carousel-img,
  .detalle-right iframe {
    height: 400px;      /* más alto en móvil */
  }

  .room-includes {
    font-size: 1.1rem;  /* texto más grande en móvil */
    line-height: 1.8;
  }
}