/* ═══════════════════════════════════════════
   RESPONSIVE — Tablet (768px) y Desktop (1024px)
═══════════════════════════════════════════ */

/* ─── Tablet ─── */
@media (min-width: 768px) {

  section        { padding: 88px 48px; }
  #strip         { padding: 28px 48px; }
  #cta-final     { padding: 88px 48px; }

  /* Header */
  .header-links  { display: flex; }
  .hamburger     { display: none; }

  /* Hero */
  #hero          { padding: 0 48px 64px; }
  .hero-title    { font-size: clamp(60px, 8vw, 90px); }
  .hero-sub      { max-width: 380px; }
  .hero-stats    {
    flex-direction: row; align-items: flex-end;
    gap: 24px; bottom: 64px; right: 48px;
  }
  .stat {
    border-right: none;
    border-left: 1px solid rgba(58,118,212,0.4);
    padding: 0 0 0 16px; text-align: left;
  }

  /* Rooms */
  .rooms-scroll  { margin: 0; padding: 0 0 20px; }
  .room-card     { flex: 0 0 280px; }

  /* Albercas */
  .alberca-features { grid-template-columns: repeat(4, 1fr); }

  /* Servicios */
  .servicios-grid { grid-template-columns: repeat(3, 1fr); }

  /* Galería */
  .galeria-grid  {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 220px 180px;
  }
  .g-item:first-child {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    height: 100%;
  }

  /* Pillars */
  .pillars { grid-template-columns: repeat(4, 1fr); }

  /* Ubicación */
  .ubicacion-info   { flex-direction: row; flex-wrap: wrap; }
  .ubicacion-row    { flex: 1; min-width: 200px; }
  .map-placeholder  { height: 320px; }

  /* CTA Final */
  .cta-actions      { flex-direction: row; justify-content: center; }
  .btn-cta-call,
  .btn-cta-wa       { width: auto; }

  /* Footer */
  .footer-cols { grid-template-columns: repeat(4, 1fr); }

  /* Modal (centrado tipo dialog) */
  #room-modal {
    left: 50%; right: auto;
    bottom: 50%; top: auto;
    transform: translate(-50%, 50%) scale(0.95);
    visibility: hidden;
    width: 480px;
    border-radius: var(--radius-lg);
    max-height: 80vh;
    transition: transform 0.4s var(--ease-out), visibility 0s 0.4s;
  }
  #room-modal.open {
    transform: translate(-50%, 50%) scale(1);
    visibility: visible;
    transition: transform 0.4s var(--ease-out), visibility 0s 0s;
  }
}

/* ─── Desktop ─── */
@media (min-width: 1024px) {

  section    { padding: 96px 80px; }
  #strip     { padding: 32px 80px; }
  #cta-final { padding: 96px 80px; }
  #hero      { padding: 0 80px 72px; }

  /* Rooms */
  .rooms-scroll { gap: 20px; }
  .room-card    { flex: 0 0 320px; }

  /* Galería */
  .galeria-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 260px 180px;
  }
  .g-item:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    height: 100%;
  }

  /* ─── Modal: layout horizontal en desktop ─── */
  #room-modal {
    width: 880px;
    height: 560px;
    max-height: 88vh;
    border-radius: var(--radius-lg);
    overflow: hidden;
    bottom: 50%; top: auto;
    left: 50%; right: auto;
    transform: translate(-50%, 50%) scale(0.95);
  }
  #room-modal.open {
    transform: translate(-50%, 50%) scale(1);
  }

  /* Ocultar el drag handle en desktop (no se usa swipe) */
  .modal-drag { display: none; }

  /* Contenedor principal: fotos izquierda + info derecha */
  #room-modal .modal-grid {
    position: absolute;
    top: 0; left: 0;
    width: 52%;
    height: 100%;
    max-height: 88vh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 55% 22.5% 22.5%;
    gap: 3px;
    overflow: hidden;
  }

  #room-modal .modal-body {
    margin-left: 52%;
    height: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 32px 28px 40px;
    scrollbar-width: none;
  }
  #room-modal .modal-body::-webkit-scrollbar { display: none; }

  /* Ajustes tipográficos para el panel derecho */
  #room-modal .modal-name  { font-size: 28px; }
  #room-modal .modal-price { font-size: 20px; margin-bottom: 14px; }
  #room-modal .modal-desc  { font-size: 12px; margin-bottom: 18px; }

  /* Grid: foto principal ocupa las 2 columnas en la fila 1 */
  #room-modal .modal-grid-main {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Botones lado a lado en desktop */
  #room-modal .modal-actions {
    flex-direction: row;
    gap: 10px;
  }
  #room-modal .modal-call,
  #room-modal .modal-wa { flex: 1; padding: 12px 10px; font-size: 11px; }
}