@media (max-width: 1024px) { .welcome-grid, .wellness-layout, .contact-grid { gap: 40px; } .rooms-full-grid { grid-template-columns: 1fr; } .exp-full-grid { grid-template-columns: 1fr; } .gallery-masonry { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px) { .nav { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: var(--dark); padding: 80px 25px; transition: var(--transition); z-index: 1001; flex-direction: column; gap: 0; } .nav.active { right: 0; } .nav-link { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 1rem; } .hamburger { display: flex; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .hero h1 { font-size: 3.2rem; } .welcome-grid { grid-template-columns: 1fr; } .rooms-grid { grid-template-columns: repeat(2, 1fr); } .exp-grid { grid-template-columns: repeat(2, 1fr); } .wellness-layout { grid-template-columns: 1fr; } .room-full-card { grid-template-columns: 1fr; } .exp-full-card { grid-template-columns: 1fr; } .gallery-masonry { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .section, .section-warm { padding: 70px 0; } .btn-reserve { display: none; } .hero-content { left: 4%; right: 4%; bottom: 8%; } .hero h1 { font-size: 2.4rem; } .hero-buttons { flex-direction: column; } .hero-buttons .btn-primary, .hero-buttons .btn-outline-w { width: 100%; justify-content: center; } .hero-scroll-indicator { display: none; } .section-header h2, .welcome-content h2, .wellness-content h2 { font-size: 2.2rem; } .welcome-badge { right: 10px; bottom: -15px; padding: 18px; } .badge-num { font-size: 2rem; } .rooms-grid, .exp-grid { grid-template-columns: 1fr; } .page-hero { height: 40vh; } .page-hero-content h1 { font-size: 2.5rem; } .room-full-card { grid-template-columns: 1fr; } .exp-full-card { grid-template-columns: 1fr; } .gallery-masonry { grid-template-columns: 1fr 1fr; } .gm-item.tall { height: 280px; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-brand { justify-content: center; } .footer-socials { justify-content: center; } .contact-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .whatsapp-float { width: 46px; height: 46px; font-size: 1.3rem; bottom: 20px; right: 20px; } .back-to-top { bottom: 20px; left: 20px; width: 38px; height: 38px; } }