/* ===== Página WhatsApp ===== */


.wh-page{ color:#eef2ff; }

.wh-hero{
  position:relative;
  min-height: 38vh;
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow:hidden;
  margin-bottom: 24px;
}
.wh-hero__bg{
  position:absolute; inset:0; z-index:-2;
  background-image: image-set(
    url("/images/room11.webp") type("image/webp"),
    url("/images/room12.jpg") type("image/jpeg")
  );
  background-position:center; background-size:cover;
  filter:saturate(1.03) contrast(1.03) brightness(.95);
}
.wh-hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 60% at 50% 35%, rgba(0,15,40,.40) 0%, rgba(0,10,30,.72) 70%, rgba(0,8,20,.90) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.55));
}
.wh-hero__inner{
  width:min(1100px,92%);
  text-align:center;
}
.wh-hero h1{ color: red; margin:0 0 3px 0; font-size:clamp(12px,3.4vw,29px); font-weight:300;
}
.wh-hero p{ margin:0 0 14px 0; color:#dbe3ff; }

.wh-cta .chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.10);
  text-decoration:none; color:#fff; font-size:13px;
  backdrop-filter: blur(8px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.wh-cta .chip:hover{ transform:translateY(-1px); background:rgba(255,255,255,.16); }

/* Secciones */
.wh-section{ width:min(1100px,92%); margin:28px auto; }
.wh-bullets{ margin:10px 0 0 0; padding-left:18px; }
.wh-bullets li{ margin:6px 0; }

/* Grid de tarjetas con capturas */
.wh-grid{
  width:min(1100px,92%); margin:20px auto 30px auto;
  display:grid; gap:16px;
  grid-template-columns: repeat(3,1fr);
}
@media (max-width:1100px){ .wh-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:680px){ .wh-grid{ grid-template-columns: 1fr; } }

.wh-card{
  margin:0; padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.wh-card img{ display:block; width:100%; height:auto; }
.wh-card figcaption{ padding:12px 14px; }
.wh-card h3{ margin:0 0 6px 0; font-size:16px; }
.wh-card p{ margin:0; color:#dbe3ff; font-size:14px; }

.wh-lead{ font-size:15px; color:#e5ebff; }




 

/* 3 columnas integradas al tema oscuro */
.three-up{
  width:min(1100px,82%);
  margin:26px auto 34px;
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3,1fr);
}
@media (max-width:1100px){ .three-up{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .three-up{ grid-template-columns:1fr; } }

/* Reusar look & feel de tarjetas */
.wh-card{
  margin:0; padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.wh-card img{ display:block; width:60%; height:auto; }
.wh-card figcaption, .wh-card .card-content{ padding:12px 14px; }
.wh-card h3{ margin:0 0 6px 0; font-size:16px; }
.wh-card p{ margin:0; color:#dbe3ff; font-size:14px; }

/* Lista centrada visualmente */
.wh-bullets{ margin:6px 0 0 0; padding-left:18px; line-height:1.45; }


.wh-card img {
  width: 75%;
  height: auto;     /* mantiene proporción */
  margin: 0 auto;   /* centra horizontalmente */
  display: block;   /* asegura que margin funcione */
}



/* Solo para la sección de tres columnas */
.three-up .wh-card img {
  width: 75% !important;
  height: auto;
  margin: 0 auto;
  display: block;
}








/* CSS */
.three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

.panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
}

.panel img {
  display: block;
  width: 100%;
  height: auto;            /* mantiene proporción */
  object-fit: cover;       /* recorte elegante si limitas altura */
}

.image-caption {
  font-size: 0.9rem;
  color: #555;
  margin-top: 8px;
}

/* Lista limpia y legible */
.wh-bullets {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.45;
}

/* Responsivo */
@media (max-width: 900px) {
  .three-up {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .three-up {
    grid-template-columns: 1fr;
  }
}