:root{ --gold:#C9A96E; --gold-light:#D4BC8B; --gold-dark:#A8864A; --dark:#1a1a1a; --dark-soft:#2d2d2d; --cream:#FAF7F2; --cream-dark:#F0EBE3; --white:#FFFFFF; --text:#3a3a3a; --text-light:#6b6b6b; --text-lighter:#999; --blue-sea:#2E6B8A; --green-olive:#5A7247; --shadow-sm:0 2px 8px rgba(0,0,0,0.08); --shadow-md:0 4px 20px rgba(0,0,0,0.12); --shadow-lg:0 8px 40px rgba(0,0,0,0.16); --radius:12px; --radius-lg:20px;} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:'Inter', -apple-system, sans-serif; color:var(--text); background:var(--white); overflow-x:hidden; line-height:1.6;} .loader{ position:fixed; inset:0; background:var(--dark); z-index:10000; display:flex; align-items:center; justify-content:center; flex-direction:column; transition:opacity 0.6s, visibility 0.6s;} .loader.hidden{opacity:0;visibility:hidden} .loader-text{ font-family:'Playfair Display', serif; color:var(--gold); font-size:2rem; letter-spacing:4px; animation:pulse 1.5s infinite;} .loader-bar{ width:120px;height:2px; background:rgba(255,255,255,0.1); margin-top:20px; border-radius:2px; overflow:hidden;} .loader-bar::after{ content:''; display:block; width:40%; height:100%; background:var(--gold); animation:loading 1.2s infinite;} @keyframes loading{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}} .navbar{ position:fixed; top:0; width:100%; z-index:1000; padding:20px 40px; display:flex; justify-content:space-between; align-items:center; transition:all 0.4s; background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);} .navbar.scrolled{ background:rgba(26,26,26,0.95); backdrop-filter:blur(20px); padding:12px 40px; box-shadow:0 2px 20px rgba(0,0,0,0.3);} .nav-logo{ font-family:'Playfair Display', serif; color:var(--white); font-size:1.4rem; font-weight:600; letter-spacing:2px; text-decoration:none; display:flex; align-items:center; gap:12px;} .nav-logo .logo-icon{ width:36px; height:36px; border:2px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8rem; color:var(--gold);} .nav-links{ display:flex; gap:20px; align-items:center; list-style:none; flex-wrap:nowrap;} .nav-links a{ color:rgba(255,255,255,0.85); text-decoration:none; font-size:0.8rem; font-weight:400; letter-spacing:1px; text-transform:uppercase; transition:color 0.3s; position:relative; white-space:nowrap;} .nav-links a::after{ content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--gold); transition:width 0.3s;} .nav-links a:hover{color:var(--gold)} .nav-links a:hover::after{width:100%} .btn-reserve-nav{ background:var(--gold); color:var(--dark); padding:10px 24px; border-radius:30px; font-weight:600; font-size:0.8rem; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; transition:all 0.3s;} .btn-reserve-nav:hover{ background:var(--gold-light); transform:translateY(-1px); box-shadow:0 4px 15px rgba(201,169,110,0.4);} .lang-switcher{ color:rgba(255,255,255,0.7); font-size:0.8rem; cursor:pointer; letter-spacing:1px; border:1px solid rgba(255,255,255,0.2); padding:6px 12px; border-radius:20px; transition:all 0.3s; background:none; font-family:'Inter', sans-serif;} .lang-switcher:hover{ border-color:var(--gold); color:var(--gold);} .hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:5px;} .hamburger span{ width:24px; height:2px; background:white; transition:all 0.3s;} .hero{ height:100vh; min-height:700px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;} .hero-bg{ position:absolute; inset:0; background:url('images/jpg/hero-piscina-palmera-sol.jpg') 35% center / cover no-repeat; z-index:0;} .hero-bg::after{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 30% 50%, rgba(201,169,110,0.1) 0%, transparent 50%), radial-gradient(ellipse at 85% 30%, rgba(0,0,0,0.35) 0%, transparent 55%), radial-gradient(ellipse at 100% 50%, rgba(0,0,0,0.3) 0%, transparent 50%);} .hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.15); box-shadow:inset 0 0 150px 30px rgba(0,0,0,0.25); z-index:1;} .hero-pattern{ position:absolute; inset:0; z-index:1; opacity:0.03; background-image:repeating-linear-gradient( 45deg, transparent, transparent 35px, rgba(255,255,255,1) 35px, rgba(255,255,255,1) 36px );} .hero-content{ position:relative; z-index:2; text-align:center; max-width:900px; padding:0 20px;} .hero-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(201,169,110,0.15); border:1px solid rgba(201,169,110,0.4); padding:8px 20px; border-radius:30px; color:var(--gold-light); font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; margin-bottom:30px; backdrop-filter:blur(10px);} .hero h1{ font-family:'Playfair Display', serif; font-size:clamp(2.5rem, 6vw, 4.5rem); color:white; font-weight:600; line-height:1.15; margin-bottom:20px; text-shadow:0 2px 40px rgba(0,0,0,0.3);} .hero h1 em{ font-style:italic; color:var(--gold-light);} .hero-subtitle{ font-family:'Cormorant Garamond', serif; color:rgba(255,255,255,0.8); font-size:clamp(1.1rem, 2vw, 1.4rem); font-weight:300; margin-bottom:16px; letter-spacing:1px;} .hero-features{ display:flex; justify-content:center; gap:30px; margin:30px 0 40px; flex-wrap:wrap;} .hero-feature{ color:rgba(255,255,255,0.7); font-size:0.85rem; display:flex; align-items:center; gap:8px; letter-spacing:0.5px;} .hero-feature i{color:var(--gold);font-size:0.9rem} .hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap;} .btn-primary{ background:var(--gold); color:var(--dark); padding:16px 40px; border-radius:40px; font-weight:600; font-size:0.85rem; letter-spacing:2px; text-transform:uppercase; text-decoration:none; transition:all 0.3s; display:inline-flex; align-items:center; gap:10px; border:none; cursor:pointer;} .btn-primary:hover{ background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 30px rgba(201,169,110,0.4);} .btn-secondary{ background:transparent; color:white; padding:16px 40px; border-radius:40px; font-weight:500; font-size:0.85rem; letter-spacing:2px; text-transform:uppercase; text-decoration:none; transition:all 0.3s; border:1px solid rgba(255,255,255,0.3); display:inline-flex; align-items:center; gap:10px;} .btn-secondary:hover{ border-color:var(--gold); color:var(--gold); background:rgba(201,169,110,0.1);} .hero-scroll{ position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,0.5); font-size:0.7rem; letter-spacing:3px; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px; animation:float 2s infinite;} .hero-scroll .line{ width:1px; height:40px; background:linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);} @keyframes float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}} .stats-bar{ background:var(--dark); padding:0; position:relative; z-index:10;} .stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); max-width:1200px; margin:0 auto;} .stat-item{ padding:30px; text-align:center; border-right:1px solid rgba(255,255,255,0.08); transition:background 0.3s;} .stat-item:last-child{border-right:none} .stat-item:hover{background:rgba(201,169,110,0.05)} .stat-icon{ color:var(--gold); font-size:1.3rem; margin-bottom:10px;} .stat-value{ font-family:'Playfair Display', serif; color:white; font-size:1.6rem; font-weight:600;} .stat-label{ color:rgba(255,255,255,0.5); font-size:0.75rem; letter-spacing:1.5px; text-transform:uppercase; margin-top:4px;} .section{padding:100px 20px} .section-dark{background:var(--cream)} .container{max-width:1200px;margin:0 auto} .section-header{ text-align:center; margin-bottom:60px;} .section-tag{ display:inline-block; color:var(--gold); font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; margin-bottom:12px; font-weight:500;} .section-title{ font-family:'Playfair Display', serif; font-size:clamp(2rem, 4vw, 2.8rem); color:var(--dark); font-weight:600; margin-bottom:16px;} .section-subtitle{ font-family:'Cormorant Garamond', serif; color:var(--text-light); font-size:1.15rem; max-width:600px; margin:0 auto;} .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;} .about-images{ position:relative; height:500px;} .about-img-main{ width:75%; height:400px; border-radius:var(--radius-lg); position:absolute; overflow:hidden; top:0; left:0; display:flex; align-items:center; justify-content:center; color:white; font-family:'Playfair Display', serif; font-size:1.2rem; box-shadow:var(--shadow-lg);} .about-img-small{ width:55%; height:280px; border-radius:var(--radius); position:absolute; overflow:hidden; bottom:0; right:0; border:6px solid white; display:flex; align-items:center; justify-content:center; color:white; font-family:'Playfair Display', serif; font-size:1rem; box-shadow:var(--shadow-lg);} .about-rating{ position:absolute; bottom:30px; left:30px; background:white; padding:16px 24px; border-radius:var(--radius); box-shadow:var(--shadow-md); display:flex; align-items:center; gap:12px; z-index:2;} .rating-score{ background:var(--gold); color:white; width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem;} .rating-text{font-size:0.85rem} .rating-text strong{display:block;color:var(--dark)} .rating-text span{color:var(--text-light);font-size:0.75rem} .about-text h3{ font-family:'Playfair Display', serif; font-size:2rem; color:var(--dark); margin-bottom:20px; line-height:1.3;} .about-text p{ color:var(--text-light); margin-bottom:16px; line-height:1.8;} .about-highlights{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px;} .highlight-item{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--cream); border-radius:var(--radius); transition:all 0.3s;} .highlight-item:hover{background:var(--cream-dark);transform:translateX(4px)} .highlight-item i{color:var(--gold);font-size:1.1rem;width:20px} .highlight-item span{font-size:0.9rem;font-weight:500} .gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(2, 260px); gap:12px;} .gallery-item{ border-radius:var(--radius); overflow:hidden; position:relative; cursor:pointer; transition:transform 0.4s;} .gallery-item:hover{transform:scale(1.02)} .gallery-item:first-child{grid-column:span 2;grid-row:span 2} .gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s;} .gallery-item:hover img{transform:scale(1.08)} .gallery-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%); opacity:0; transition:opacity 0.3s; display:flex; align-items:flex-end; padding:20px;} .gallery-item:hover .gallery-overlay{opacity:1} .gallery-overlay span{ color:white; font-size:0.85rem; font-weight:500;} .gallery-more{ text-align:center; margin-top:30px;} .lightbox{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:9999; align-items:center; justify-content:center; flex-direction:column;} .lightbox.active{display:flex} .lightbox img{ max-width:90vw; max-height:80vh; object-fit:contain; border-radius:8px;} .lightbox-caption{ color:white; font-family:'Playfair Display', serif; font-size:1.1rem; margin-top:16px; text-align:center;} .lightbox-close{ position:absolute; top:20px; right:30px; color:white; font-size:2rem; cursor:pointer; background:none; border:none; z-index:10; opacity:0.8; transition:opacity 0.3s;} .lightbox-close:hover{opacity:1} .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); color:white; font-size:2.5rem; cursor:pointer; background:rgba(255,255,255,0.1); border:none; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background 0.3s;} .lightbox-nav:hover{background:rgba(255,255,255,0.2)} .lightbox-prev{left:20px} .lightbox-next{right:20px} .lightbox-counter{ position:absolute; bottom:20px; color:rgba(255,255,255,0.6); font-size:0.85rem;} .gallery-full{ display:none; position:fixed; inset:0; background:var(--dark); z-index:9998; overflow-y:auto; padding:80px 20px 40px;} .gallery-full.active{display:block} .gallery-full-close{ position:fixed; top:20px; right:30px; color:white; font-size:1.5rem; cursor:pointer; background:rgba(255,255,255,0.1); border:none; width:44px; height:44px; border-radius:50%; z-index:10; display:flex; align-items:center; justify-content:center;} .gallery-full-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;} .gallery-full-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; cursor:pointer; transition:transform 0.3s, opacity 0.3s;} .gallery-full-grid img:hover{transform:scale(1.03);opacity:0.9} .btn-outline{ display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border:2px solid var(--gold); color:var(--gold-dark); border-radius:40px; text-decoration:none; font-weight:600; font-size:0.85rem; letter-spacing:1.5px; text-transform:uppercase; transition:all 0.3s; background:none; cursor:pointer;} .btn-outline:hover{ background:var(--gold); color:white;} .amenities-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px;} .amenity-card{ background:white; padding:36px 28px; border-radius:var(--radius-lg); text-align:center; transition:all 0.4s; border:1px solid rgba(0,0,0,0.05);} .amenity-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--gold);} .amenity-icon{ width:70px; height:70px; border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:1.5rem; color:var(--gold-dark); transition:all 0.3s;} .amenity-card:hover .amenity-icon{ background:var(--gold); color:white;} .amenity-card h4{ font-family:'Playfair Display', serif; font-size:1.1rem; margin-bottom:10px; color:var(--dark);} .amenity-card p{ color:var(--text-light); font-size:0.9rem; line-height:1.6;} .experiences-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;} .exp-card{ border-radius:var(--radius-lg); overflow:hidden; position:relative; height:380px; cursor:pointer; transition:transform 0.4s;} .exp-card:hover{transform:translateY(-8px)} .exp-bg{ position:absolute; inset:0; transition:transform 0.4s;} .exp-card:hover .exp-bg{transform:scale(1.05)} .exp-card:nth-child(1) .exp-bg{background:url('images/jpg/golf-oliva-nova-aerea.jpg') center/cover} .exp-card:nth-child(2) .exp-bg{background:url('images/jpg/playa-oliva.jpg') center/cover} .exp-card:nth-child(3) .exp-bg{background:url('images/jpg/hipica-oliva-nova.jpg') center/cover} .exp-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%); z-index:1;} .exp-content{ position:absolute; bottom:0; left:0; right:0; padding:30px; z-index:2;} .exp-tag{ display:inline-block; background:rgba(201,169,110,0.3); color:var(--gold-light); padding:4px 14px; border-radius:20px; font-size:0.7rem; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:12px;} .exp-content h4{ font-family:'Playfair Display', serif; color:white; font-size:1.4rem; margin-bottom:8px;} .exp-content p{ color:rgba(255,255,255,0.7); font-size:0.9rem; line-height:1.5;} .exp-distance{ color:var(--gold-light); font-size:0.8rem; margin-top:8px; display:flex; align-items:center; gap:6px;} .reviews-header-flex{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:50px;} .reviews-score-big{ display:flex; align-items:center; gap:20px;} .score-circle{ width:80px; height:80px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; color:white; font-family:'Playfair Display', serif; font-size:1.8rem; font-weight:700;} .score-text h3{ font-family:'Playfair Display', serif; font-size:1.4rem; color:var(--dark);} .score-text p{ color:var(--text-light); font-size:0.9rem;} .reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:24px;} .review-card{ background:white; padding:32px; border-radius:var(--radius-lg); border:1px solid rgba(0,0,0,0.06); transition:all 0.3s;} .review-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px);} .review-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;} .review-author{ display:flex; align-items:center; gap:12px;} .review-avatar{ width:44px; height:44px; border-radius:50%; background:var(--cream-dark); display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--gold-dark); font-size:0.9rem;} .review-name{font-weight:600;font-size:0.95rem;color:var(--dark)} .review-date{font-size:0.8rem;color:var(--text-lighter)} .review-source{ font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--text-lighter); padding:4px 10px; border:1px solid rgba(0,0,0,0.1); border-radius:20px;} .review-stars{color:var(--gold);font-size:0.85rem;margin-bottom:12px} .review-text{ color:var(--text-light); font-size:0.95rem; line-height:1.7; font-style:italic;} .included-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; max-width:900px; margin:0 auto;} .included-item{ text-align:center; padding:30px 20px; border-radius:16px; background:var(--cream); transition:transform 0.3s;} .included-item:hover{ transform:translateY(-4px);} .included-item i{ font-size:2rem; color:var(--gold); margin-bottom:14px;} .included-item h4{ font-family:'Playfair Display', serif; color:var(--dark); margin-bottom:8px; font-size:1.05rem;} .included-item p{ font-size:0.88rem; color:var(--text-light); line-height:1.5;} .booking-section{ background:url('images/jpg/piscina-atardecer-palmera.jpg') center/cover no-repeat fixed; padding:100px 20px; position:relative; overflow:hidden;} .booking-section::before{ content:''; position:absolute; inset:0; background:rgba(26,26,26,0.85);} .booking-content{ position:relative; z-index:1; text-align:center; max-width:800px; margin:0 auto;} .booking-content .section-tag{color:var(--gold)} .booking-content .section-title{color:white} .booking-content .section-subtitle{color:rgba(255,255,255,0.6)} .booking-options{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-top:50px; max-width:700px; margin-left:auto; margin-right:auto;} .booking-option{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-lg); padding:36px 28px; text-align:center; transition:all 0.4s; text-decoration:none; display:block;} .booking-option:hover{ background:rgba(201,169,110,0.1); border-color:var(--gold); transform:translateY(-4px);} .booking-option-icon{ font-size:2.5rem; margin-bottom:16px;} .booking-option h4{ font-family:'Playfair Display', serif; color:white; font-size:1.2rem; margin-bottom:8px;} .booking-option p{ color:rgba(255,255,255,0.5); font-size:0.85rem;} .booking-direct{ margin-top:40px; padding-top:40px; border-top:1px solid rgba(255,255,255,0.08);} .booking-direct p{ color:rgba(255,255,255,0.5); font-size:0.9rem; margin-bottom:20px;} .booking-direct .btn-primary{ font-size:0.9rem; padding:18px 48px;} .location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;} .location-map{ height:450px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);} .location-map iframe{width:100%;height:100%;border:0} .location-info h3{ font-family:'Playfair Display', serif; font-size:1.8rem; color:var(--dark); margin-bottom:20px;} .location-info p{ color:var(--text-light); line-height:1.8; margin-bottom:20px;} .location-distances{ list-style:none; display:flex; flex-direction:column; gap:12px;} .location-distances li{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--cream); border-radius:var(--radius); font-size:0.9rem;} .location-distances li i{ color:var(--gold); width:20px; text-align:center;} .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px;} .contact-form{ background:white; padding:40px; border-radius:var(--radius-lg); box-shadow:var(--shadow-md);} .contact-form h3{ font-family:'Playfair Display', serif; font-size:1.5rem; margin-bottom:24px; color:var(--dark);} .form-group{margin-bottom:20px} .form-group label{ display:block; font-size:0.8rem; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:var(--text-light); margin-bottom:8px;} .form-group input, .form-group textarea, .form-group select{ width:100%; padding:14px 18px; border:1px solid rgba(0,0,0,0.1); border-radius:var(--radius); font-family:'Inter', sans-serif; font-size:0.95rem; transition:border-color 0.3s; background:var(--cream);} .form-group input:focus, .form-group textarea:focus, .form-group select:focus{ outline:none; border-color:var(--gold); background:white;} .form-group textarea{resize:vertical;min-height:100px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .contact-methods{ display:flex; flex-direction:column; gap:24px; justify-content:center;} .contact-card{ display:flex; align-items:center; gap:20px; padding:24px; background:white; border-radius:var(--radius); border:1px solid rgba(0,0,0,0.06); text-decoration:none; color:var(--text); transition:all 0.3s;} .contact-card:hover{ border-color:var(--gold); transform:translateX(8px); box-shadow:var(--shadow-sm);} .contact-icon{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0;} .contact-icon.whatsapp{background:#25D366;color:white} .contact-icon.email{background:var(--gold);color:white} .contact-icon.phone{background:var(--blue-sea);color:white} .contact-card h4{font-size:0.95rem;color:var(--dark);margin-bottom:4px} .contact-card p{font-size:0.85rem;color:var(--text-light)} footer{ background:var(--dark); padding:60px 20px 30px; color:rgba(255,255,255,0.5);} .footer-top{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; max-width:1200px; margin:0 auto; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08);} .footer-brand .nav-logo{margin-bottom:16px} .footer-brand p{ font-size:0.9rem; line-height:1.6; max-width:300px;} .footer-links h5{ color:white; font-family:'Playfair Display', serif; margin-bottom:16px; font-size:1rem;} .footer-links ul{list-style:none} .footer-links li{margin-bottom:10px} .footer-links a{ color:rgba(255,255,255,0.5); text-decoration:none; font-size:0.85rem; transition:color 0.3s;} .footer-links a:hover{color:var(--gold)} .footer-bottom{ max-width:1200px; margin:20px auto 0; display:flex; justify-content:space-between; align-items:center; font-size:0.8rem;} .footer-social{display:flex;gap:12px} .footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.5); text-decoration:none; transition:all 0.3s;} .footer-social a:hover{ border-color:var(--gold); color:var(--gold);} .lightbox{ position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:9999; display:none; align-items:center; justify-content:center; flex-direction:column; padding:40px;} .lightbox.active{display:flex} .lightbox-close{ position:absolute; top:20px; right:30px; color:white; font-size:2rem; cursor:pointer; background:none; border:none; opacity:0.7; transition:opacity 0.3s;} .lightbox-close:hover{opacity:1} .lightbox-placeholder{ max-width:80vw; max-height:70vh; background:linear-gradient(135deg, #d4bc8b, #a8864a); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; padding:60px; color:white; font-family:'Playfair Display', serif; font-size:1.5rem;} .mobile-menu{ position:fixed; inset:0; background:rgba(26,26,26,0.98); z-index:9998; display:none; flex-direction:column; align-items:center; justify-content:center; gap:30px;} .mobile-menu.active{display:flex} .mobile-menu a{ color:white; text-decoration:none; font-family:'Playfair Display', serif; font-size:1.5rem; letter-spacing:2px; transition:color 0.3s;} .mobile-menu a:hover{color:var(--gold)} .mobile-close{ position:absolute; top:20px; right:30px; background:none; border:none; color:white; font-size:2rem; cursor:pointer;} .reveal{ opacity:0; transform:translateY(30px); transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1);} .reveal.active{ opacity:1; transform:translateY(0);} @media (max-width:1440px){ .nav-links{display:none} .hamburger{display:flex} .about-grid, .location-grid, .contact-grid{grid-template-columns:1fr} .experiences-grid{grid-template-columns:1fr} .gallery-grid{ grid-template-columns:1fr 1fr; grid-template-rows:220px 220px 220px; gap:8px;} .gallery-item:first-child{grid-column:span 2;grid-row:auto;height:220px} .gallery-item{height:220px} .gallery-full-grid{grid-template-columns:repeat(2, 1fr)} .stats-grid{grid-template-columns:repeat(2, 1fr)} .booking-options{grid-template-columns:1fr} .footer-top{grid-template-columns:1fr} .reviews-header-flex{flex-direction:column;align-items:flex-start;gap:20px} .exp-card{min-height:280px} .hero-features{flex-wrap:wrap;justify-content:center} .hero-cta{flex-direction:column;align-items:center;gap:12px} .lightbox-nav{width:40px;height:40px;font-size:1.5rem} .lightbox-prev{left:10px} .lightbox-next{right:10px}} @media (max-width:640px){ .gallery-grid{ grid-template-columns:1fr; grid-template-rows:auto; gap:8px;} .gallery-item, .gallery-item:first-child{ grid-column:auto; height:200px;} .gallery-full-grid{grid-template-columns:1fr} .hero{min-height:100vh} .hero h1{font-size:2rem;letter-spacing:1px} .hero-subtitle{font-size:0.95rem} .hero-badge{font-size:0.7rem;padding:6px 16px} .hero-features{gap:8px} .hero-feature{font-size:0.75rem;padding:6px 10px} .section{padding:60px 16px} .section-title{font-size:1.6rem} .stats-grid{grid-template-columns:1fr 1fr;gap:12px} .about-images{height:auto;position:static;display:flex;flex-direction:column;gap:12px} .about-img-main, .about-img-small{ position:static; width:100%; height:220px;} .about-rating{position:static;margin-top:8px;align-self:flex-start} .about-highlights{grid-template-columns:1fr} .amenities-grid{grid-template-columns:1fr} .exp-card{min-height:240px} .form-row{grid-template-columns:1fr} .reviews-grid{grid-template-columns:1fr} .included-grid{grid-template-columns:repeat(2, 1fr);gap:16px} .booking-section{padding:60px 16px} .navbar{padding:14px 16px} .navbar.scrolled{padding:10px 16px} .nav-logo{font-size:1.1rem;letter-spacing:1px} .lightbox img{max-width:95vw;max-height:70vh}} .calendar-wrapper{ background:var(--cream); padding:40px; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); max-width:720px; margin:0 auto;} .calendar-nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;} .calendar-btn{ background:var(--gold); border:none; color:white; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:1rem; transition:all 0.3s;} .calendar-btn:hover{ background:var(--gold-dark); transform:scale(1.1);} .calendar-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; margin-bottom:30px;} .calendar-day{ aspect-ratio:auto; min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius); font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.2s;} .calendar-day.header{ background:var(--dark); color:white; font-weight:600; cursor:default;} .calendar-day.available{ background:#E8F5E9; color:var(--green-olive);} .calendar-day.available:hover{ background:#C8E6C9;}   .calendar-day.occupied{background:#e53e3e;color:white;cursor:default} .calendar-day.other-month{ opacity:0.3; cursor:default;} .calendar-day.selected-checkin{ background:var(--gold) !important; color:white !important; box-shadow:0 0 0 2px var(--gold); font-weight:600;} .calendar-day.selected-checkout{ background:var(--gold) !important; color:white !important; box-shadow:0 0 0 2px var(--gold); font-weight:600;} .calendar-day.selected-range{ background:rgba(184, 157, 105, 0.2) !important; color:var(--dark) !important;} .calendar-legend{ display:flex; flex-wrap:wrap; gap:24px; justify-content:center; margin-top:30px; padding-top:20px; border-top:1px solid var(--cream-dark);} .legend-item{ display:flex; align-items:center; gap:8px; font-size:0.9rem;} .legend-dot{ width:16px; height:16px; border-radius:4px;} .faq-container{ max-width:800px; margin:0 auto;} .faq-item{ margin-bottom:12px; border-radius:var(--radius); overflow:hidden; background:var(--cream); transition:all 0.3s;} .faq-item:hover{ box-shadow:var(--shadow-md);} .faq-question{ width:100%; padding:20px; background:var(--cream); border:none; text-align:left; font-size:1rem; font-family:'Inter', sans-serif; font-weight:500; color:var(--text); cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:all 0.3s;} .faq-question:hover{ background:var(--cream-dark);} .faq-question i{ color:var(--gold); transition:transform 0.3s;} .faq-item.active .faq-question{ background:var(--gold); color:white;} .faq-item.active .faq-question i{ transform:rotate(180deg); color:white;} .faq-answer{ max-height:0; overflow:hidden; transition:max-height 0.3s ease;} .faq-item.active .faq-answer{ max-height:500px;} .faq-answer p{ padding:0 20px 20px 20px; color:var(--text); line-height:1.6;} .cancellation-policy{ background:rgba(201,169,110,0.08); border-left:4px solid var(--gold); padding:30px; border-radius:var(--radius); margin-top:50px;} .cancellation-list{ list-style:none; margin-top:16px;} .cancellation-list li{ padding:12px 0; border-bottom:1px solid rgba(201,169,110,0.2); color:var(--text); line-height:1.6;} .cancellation-list li:last-child{ border-bottom:none;} .trust-badges{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:20px; margin-bottom:40px; padding:24px; background:var(--cream); border-radius:var(--radius-lg);} .trust-badge{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px; text-align:center; font-size:0.9rem; color:var(--text); background:white; border-radius:var(--radius); border:1px solid var(--cream-dark);} .trust-badge i{ font-size:1.8rem; color:var(--gold);} .activity-card{ background:white; padding:24px; border-radius:var(--radius); border:1px solid var(--cream-dark); text-align:center; transition:all 0.3s;} .activity-card:hover{ border-color:var(--gold); box-shadow:var(--shadow-md); transform:translateY(-4px);} .activity-icon{ font-size:2.5rem; color:var(--gold); margin-bottom:12px;} .activity-card h4{ font-family:'Playfair Display', serif; font-size:1.1rem; color:var(--dark); margin-bottom:8px;} .activity-card p{ font-size:0.9rem; color:var(--text-light); line-height:1.5;} @media (max-width:768px){ .calendar-wrapper{ padding:24px;} .calendar-grid{ gap:4px;} .calendar-day{ font-size:0.75rem; aspect-ratio:1;} .calendar-legend{ gap:12px; font-size:0.8rem;} .trust-badges{ grid-template-columns:repeat(2, 1fr);}}