/* ================================================================
   MODAL — Layout dos columnas PC / una columna móvil
   ================================================================ */

/* Overlay */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:3000;
  background:rgba(13,37,53,0.8); backdrop-filter:blur(5px);
  align-items:center; justify-content:center; padding:16px;
  overflow-y:auto;
}
.modal-overlay.open { display:flex; animation:mFadeIn 0.2s ease; }
@keyframes mFadeIn { from{opacity:0} to{opacity:1} }

/* Caja principal — ancha en PC */
.modal-box {
  background:#fff; border-radius:20px; width:100%;
  max-width:1100px;           /* más ancha que antes */
  max-height:92vh;
  overflow:hidden;            /* el scroll va por columna */
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,0.35);
  animation:mSlideUp 0.28s ease;
  display:flex; flex-direction:column;
}
@keyframes mSlideUp {
  from{transform:translateY(24px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* Botón cerrar — flotante arriba derecha */
.modal-close {
  position:absolute; top:14px; right:14px; z-index:20;
  width:38px; height:38px; border-radius:50%;
  background:rgba(13,37,53,0.75); backdrop-filter:blur(4px);
  color:white; border:none; cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.modal-close:hover { background:var(--ocean); transform:rotate(90deg); }

/* ── Layout dos columnas ── */
.modal-layout {
  display:grid;
  grid-template-columns:1fr 1fr;   /* 50/50 en PC */
  height:100%; max-height:92vh;
  overflow:hidden;
}

/* Columna izquierda — media */
.modal-col-media {
  display:flex; flex-direction:column;
  background:#000; overflow:hidden;
  border-radius:20px 0 0 20px;
  min-height:0;
}

/* Columna derecha — info, scrollable */
.modal-col-info {
  overflow-y:auto; padding:28px 28px 24px;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,109,143,0.25) transparent;
}
.modal-col-info::-webkit-scrollbar { width:4px; }
.modal-col-info::-webkit-scrollbar-thumb { background:rgba(0,109,143,0.25); border-radius:10px; }

/* ── Carrusel dentro de col-media ── */
.carousel {
  position:relative; flex:1; overflow:hidden;
  min-height:0; background:#000; user-select:none;
}

/* Slides — visibilidad por clase */
.carousel-slide { display:none; width:100%; height:100%; align-items:center; justify-content:center; }
.carousel-slide.active { display:flex; }

/* Fotos: llenan toda la columna */
.carousel-slide.type-foto { height:100%; }
.carousel-slide.type-foto img {
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}

/* Videos: adaptativos (respeta proporción vertical u horizontal) */
.carousel-slide.type-video { height:auto; flex:none; background:#000; }
.carousel-slide.type-video video {
  width:100%; height:auto; max-height:65vh; display:block;
  object-fit:contain; background:#000;
}

/* Sin fotos */
.carousel-empty {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:rgba(255,255,255,0.3); gap:12px;
}
.carousel-empty i { font-size:3rem; }
.carousel-empty p { font-size:.9rem; }

/* Flechas */
.carousel-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background:rgba(13,37,53,0.6); backdrop-filter:blur(4px);
  border:none; color:#fff; font-size:.9rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s; z-index:10;
}
.carousel-arrow:hover { background:rgba(13,37,53,0.9); }
.carousel-prev { left:10px; }
.carousel-next { right:10px; }

/* Contador */
.carousel-counter {
  position:absolute; top:10px; right:10px;
  background:rgba(13,37,53,0.55); backdrop-filter:blur(4px);
  color:#fff; font-size:.7rem; font-weight:600;
  padding:3px 9px; border-radius:20px; z-index:10; letter-spacing:.4px;
}

/* ── Miniaturas ── */
.carousel-thumbs {
  display:flex; gap:5px; padding:8px 10px;
  overflow-x:auto; background:#111; flex-shrink:0;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent;
}
.carousel-thumbs::-webkit-scrollbar { height:3px; }
.carousel-thumbs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:10px; }

.carousel-thumb {
  flex:0 0 60px; height:44px; border-radius:6px;
  overflow:hidden; border:2px solid transparent;
  cursor:pointer; padding:0; background:#333;
  transition:border-color .18s, transform .15s;
}
.carousel-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.carousel-thumb.active { border-color:#fff; transform:scale(1.07); }
.carousel-thumb:hover:not(.active) { border-color:rgba(255,255,255,.4); }
.thumb-video-icon {
  width:100%; height:100%;
  background:linear-gradient(135deg,#0d2535,#164a6e);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem;
}

/* ── Info header ── */
.modal-info-header { margin-bottom:4px; }
.modal-location {
  color:var(--ocean); font-size:.85rem; font-weight:600;
  display:flex; align-items:center; gap:5px; margin-bottom:8px;
}
.modal-title {
  font-family:'Montserrat',sans-serif; font-size:1.55rem;
  color:var(--dark); line-height:1.25; margin-bottom:8px;
}
.modal-rating {
  display:flex; align-items:center; gap:6px; margin-bottom:10px;
}
.modal-rating i { color:#f5a623; font-size:.9rem; }
.modal-rating strong { font-size:.9rem; color:var(--dark); }
.modal-rating span { font-size:.82rem; color:var(--gray); }
.modal-price { margin-top:4px; }
.modal-price strong {
  font-family:'Montserrat',sans-serif; font-size:1.7rem; color:var(--dark);
}
.modal-price span { font-size:.8rem; color:var(--gray); margin-left:4px; }

.modal-divider { height:1px; background:var(--border); margin:16px 0; }

.modal-desc { color:var(--gray); line-height:1.7; font-size:.88rem; margin-bottom:16px; }

/* Amenidades */
.modal-amenities {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:8px; margin-bottom:0;
}
.modal-amenity {
  background:var(--sand); border-radius:10px; padding:9px 12px;
  display:flex; align-items:center; gap:7px;
  font-size:.8rem; color:var(--dark); font-weight:500;
}
.modal-amenity i { color:var(--ocean); font-size:.88rem; width:14px; }

/* ── Botones contacto — 2×2 grid ── */
.modal-contact-title {
  font-family:'Montserrat',sans-serif; font-size:1rem;
  margin-bottom:10px; color:var(--dark);
}
.modal-contact-btns {
  /* Ahora son solo 2 acciones: Compartir (secundario) y Reservar por
     WhatsApp (primario, ocupa más espacio visual). Las redes sociales
     ya viven en el botón flotante y en el footer, no hace falta
     repetirlas acá adentro. */
  display:grid; grid-template-columns:1fr 1.4fr;
  gap:8px; margin-bottom:0;
}
.contact-btn {
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px;
  padding:13px 10px; border-radius:12px; text-decoration:none;
  font-weight:700; font-size:.85rem; transition:all .2s;
  border:none; cursor:pointer; white-space:nowrap;
}
.contact-btn i { font-size:1rem; }
.btn-whatsapp  { background:#25d366; color:#fff; }
.btn-whatsapp:hover  { background:#1db954; transform:translateY(-2px); }
.btn-compartir { background:var(--sand); color:var(--dark); border:2px solid var(--border); }
.btn-compartir:hover { background:var(--border); transform:translateY(-2px); }

/* ── Comentarios ── */
.comments-section { padding-bottom:8px; }
.comments-title {
  font-family:'Montserrat',sans-serif; font-size:1.1rem;
  margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.comment-list { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.comment-item {
  background:var(--sand); border-radius:12px; padding:14px 16px;
  border:1px solid var(--border);
}
.comment-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.comment-avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--ocean-light); display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:700; font-size:.9rem; flex-shrink:0;
}
.comment-name  { font-weight:600; font-size:.85rem; color:var(--dark); }
.comment-date  { font-size:.72rem; color:var(--gray); margin-left:auto; }
.comment-stars { color:#f5a623; font-size:.78rem; }
.comment-text  { color:var(--gray); font-size:.85rem; line-height:1.6; }

.comment-form { background:var(--sand); border-radius:14px; padding:16px; border:1px solid var(--border); }
.comment-form-title { font-weight:600; margin-bottom:3px; color:var(--dark); font-size:.9rem; }
.comment-form-sub   { font-size:.76rem; color:var(--gray); margin-bottom:10px; }
.star-rating { display:flex; gap:3px; margin-bottom:10px; }
.star-rating i { font-size:1.2rem; color:#ddd; cursor:pointer; transition:color .15s; }
.star-rating i.active { color:#f5a623; }

.comment-name-input,
.comment-input {
  width:100%; border:2px solid var(--border); border-radius:10px;
  padding:10px 12px; font-family:'Montserrat',sans-serif; font-size:.85rem;
  color:var(--dark); outline:none; transition:border-color .2s;
  background:#fff; box-sizing:border-box;
}
.comment-name-input { margin-bottom:8px; }
.comment-input { resize:vertical; min-height:70px; }
.comment-name-input:focus,
.comment-input:focus { border-color:var(--ocean); }

.btn-submit-comment {
  margin-top:10px; background:var(--ocean); color:#fff;
  border:none; padding:10px 22px; border-radius:10px;
  font-family:'Montserrat',sans-serif; font-weight:600; cursor:pointer;
  font-size:.85rem; transition:all .2s; display:flex; align-items:center; gap:7px;
}
.btn-submit-comment:hover { background:var(--dark); transform:translateY(-1px); }

/* ================================================================
   RESPONSIVE — Móvil: una sola columna
   ================================================================ */
@media (max-width: 768px) {
  .modal-box {
    max-width:100%; max-height:96vh; border-radius:16px;
    display:flex; flex-direction:column;
  }
  .modal-layout {
    grid-template-columns:1fr;   /* una columna */
    overflow-y:auto; max-height:96vh;
  }
  .modal-col-media {
    border-radius:16px 16px 0 0;
    min-height:260px;
  }
  .carousel { min-height:260px; }
  .carousel-slide.type-foto { height:260px; }
  .carousel-slide.type-video video { max-height:55vw; }

  .modal-col-info {
    overflow-y:visible; padding:18px 16px 20px;
  }
  .modal-contact-btns {
    gap:5px;
  }
  .modal-title { font-size:1.3rem; }
  .modal-price strong { font-size:1.4rem; }
}

@media (max-width: 420px) {
  .contact-btn { font-size:.78rem; padding:11px 6px; }
  .carousel-thumbs { padding:6px 8px; }
  .carousel-thumb { flex:0 0 50px; height:38px; }
}

/* ── FIX: columna media fija al scrollear ── */
@media (min-width: 769px) {
  .modal-layout {
    overflow:hidden;
    height:92vh;
  }
  .modal-col-media {
    position:sticky;
    top:0;
    height:92vh;
    max-height:92vh;
  }
  .modal-col-info {
    height:92vh;
    max-height:92vh;
    overflow-y:auto;
  }
}

/* ── FIX: foto llena toda la columna sin espacio blanco ── */
@media (min-width: 769px) {
  .carousel {
    flex:1;
    height:100%;
  }
  .carousel-slide.type-foto {
    height:100%;
  }
  .carousel-slide.type-foto img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  .modal-col-media {
    height:92vh;
  }
}

/* ── FIX: eliminar espacio gris debajo de fotos horizontales ── */
@media (min-width: 769px) {
  .carousel-slide.type-foto {
    position:absolute;
    inset:0;
    height:100%;
  }
  .carousel-slide.type-foto img {
    object-fit:cover;
    object-position:center;
    height:100%;
    width:100%;
  }
  .carousel {
    position:relative;
  }
}