@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap'); 

/* ===== VARIABLES ===== */
:root {
  --image-width: 350px;
  --image-height: 350px;
  --gap-size: 40px;
  --border-radius: 15px;
  --primary-color: #021741; /* azul fuerte Marenta */
  --third-color: #ffffff;
  --card-glow-hover: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
*:focus { outline: none !important; }

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--primary-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  color: #fff;
}

/* ===== HEADER ===== */
header {
  width: 100%;
  text-align: center;
  padding: 80px 20px 40px;
}

.titulo-principal {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3em, 10vw, 6em);
  font-weight: 700;
  color: #f0f0f0;
  margin-bottom: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ===== GALERÍA ===== */
.galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-size);
  padding: 40px 20px 100px;
}

/* ===== HOTEL CARD ===== */
.hotel-card {
  background: rgba(255, 255, 255, 0.03); 
  border-radius: var(--border-radius);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  width: var(--image-width);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hotel-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--card-glow-hover);
  background: rgba(255, 255, 255, 0.05);
}

/* ===== IMÁGENES (CORREGIDO) ===== */
.hotel-card img {
  width: 100%;
  height: var(--image-height);
  object-fit: contain;
  
  /* Se eliminó mix-blend-mode para que no se oscurezcan con el fondo */
  mix-blend-mode: normal; 
  
  /* Filtros desactivados para mantener el color real */
  filter: none; 
  
  transition: all 0.4s ease;
  display: block;
}

.hotel-card:hover img {
  transform: scale(1.05);
  /* Un ligero aumento de brillo al pasar el mouse, sin alterar el color */
  filter: brightness(1.1);
}

/* ===== BOTONES ===== */
.botones {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.botones a {
  text-decoration: none;
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  padding-bottom: 4px;
}

.botones a:hover {
  border-bottom-color: var(--third-color);
  transform: translateY(-2px);
}

/* ===== FOOTER ===== */
footer {
  width: 100%;
  font-family: 'Poppins', sans-serif;
  padding: 40px 20px;
  background: rgba(0, 0, 0, 0.2);
  margin-top: auto;
}

.footer-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-bar p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {
  .titulo-principal { font-size: 3em; }
  .hotel-card { width: 300px; }
}