/* ============================================================ GERARD RIERA LUXURY CONCIERGE — main.css ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --k:#090807;--k2:#111009;--k3:#1a1815;--k4:#222018;--k5:#2c2920; --g:#b8952a;--g2:#d4af50;--g3:#edd97a; --ga:rgba(184,149,42,.12);--gb:rgba(184,149,42,.06); --c:#f4f0e6;--c2:#e8e2d2;--c3:#d4cdb8; --dim:rgba(244,240,230,.82);--dimmer:rgba(244,240,230,.88);--dimmest:rgba(244,240,230,.65); --fd:'Fraunces',Georgia,'Times New Roman',serif;--fs:'Manrope','Helvetica Neue',Arial,sans-serif; --nav:72px;--ease:cubic-bezier(.16,1,.3,1); } /* overflow-x:hidden was only ever set on body — it does NOT contain any position:fixed/absolute element that extends past the viewport edge (fixed/absolute elements escape a body-level clip and can still make the element itself horizontally scrollable/swipeable on a real phone, even though body.scrollWidth looks perfectly clean). Setting it on html too closes that gap outright, whichever element ends up being the culprit on a given page. overscroll-behavior-x additionally kills iOS/Android's elastic side-to-side rubber-band drag at the edges, which on its own is easy to mistake for "the page scrolls sideways" even when there's no real overflow at all. */ html{scroll-behavior:smooth;overflow-x:hidden;overscroll-behavior-x:none} body{background:var(--k);color:var(--c);font-family:var(--fs);font-weight:300;line-height:1.65;color:#f4f0e6;overflow-x:hidden;overscroll-behavior-x:none} ::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--k)}::-webkit-scrollbar-thumb{background:var(--g);border-radius:2px} /* Cursor: standard */ /* LOADER */ /* ANNOUNCE */ .ann{position:sticky;top:0;z-index:600;color:#090807!important;background:linear-gradient(90deg,var(--g),var(--g2) 50%,var(--g));background-size:200%;animation:annGrad 7s linear infinite;padding:8px 0;text-align:center;z-index:400;position:relative} @keyframes annGrad{0%{background-position:0%}100%{background-position:200%}} .ann span{font-size:10px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--k)} /* NAV */ .nav{position:sticky;top:0;left:0;right:0;z-index:500;height:var(--nav);transition:all .5s var(--ease)} .nav-bg{position:absolute;inset:0;background:rgba(9,8,7,0);backdrop-filter:blur(0px);border-bottom:1px solid rgba(184,149,42,0);transition:all .5s var(--ease)} .nav.scrolled .nav-bg{background:rgba(9,8,7,.95);backdrop-filter:blur(28px);border-bottom-color:rgba(184,149,42,.1)} .nav-in{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:10px} .logo{font-family:var(--fd);font-size:22px;font-weight:400;color:var(--c);text-decoration:none;letter-spacing:.8px;white-space:nowrap;flex-shrink:0} .logo b{color:var(--g2);font-weight:500} .nav-ul{display:flex;align-items:center;list-style:none;flex-shrink:0} .nav-ul>li{position:relative} .nav-ul>li>a{display:block;padding:8px 10px;font-size:9.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);text-decoration:none;transition:color .2s;white-space:nowrap} .nav-ul>li>a:hover{color:var(--g2)} .nav-ul li:hover>.drop{opacity:1;visibility:visible;transform:translateY(0)} .drop{position:absolute;top:calc(100% + 4px);left:0;min-width:190px;background:var(--k2);border:1px solid rgba(184,149,42,.15);border-top:2px solid var(--g);padding:5px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .2s var(--ease)} .drop a{display:block;padding:10px 16px;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(244,240,230,.85);text-decoration:none;transition:all .2s} .drop a:hover{color:var(--g2);padding-left:22px;background:var(--gb)} .lang-switch{font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);text-decoration:none;border:1px solid rgba(184,149,42,.2);padding:6px 12px;transition:all .25s;white-space:nowrap;flex-shrink:0} .lang-switch:hover{border-color:var(--g2);color:var(--g2)} .nav-cta{background:transparent;border:1px solid rgba(184,149,42,.32);color:var(--g2);padding:9px 19px;font-family:var(--fs);font-size:9.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;text-decoration:none;transition:all .3s;white-space:nowrap;display:inline-flex;align-items:center;flex-shrink:0} .nav-cta:hover{background:var(--g);color:var(--k);border-color:var(--g)} .hbg{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;position:relative;z-index:10020} .hbg span{display:block;width:22px;height:1px;background:var(--c);transition:all .3s var(--ease);transform-origin:center} .hbg.open span:nth-child(1){transform:translateY(6px) rotate(45deg)} .hbg.open span:nth-child(2){opacity:0;transform:scaleX(0)} .hbg.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* MOBILE MENU */ body.no-scroll{overflow:hidden} .mob{position:fixed;inset:0;background:var(--k);z-index:10010;display:flex;flex-direction:column;padding:calc(var(--nav)+22px) 26px 34px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s var(--ease),visibility .35s var(--ease),transform .35s var(--ease)} .mob.open{opacity:1;visibility:visible;transform:translateY(0)} .mob-a{display:block;padding:13px 0;font-family:var(--fd);font-size:22px;font-weight:300;font-style:italic;letter-spacing:.2px;color:var(--c);text-decoration:none;border-bottom:1px solid rgba(184,149,42,.08);transition:color .2s} .mob-a:hover{color:var(--g2)} .mob-sub{padding:2px 0 0 0} .mob-sub a{display:block;padding:9px 0;font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);text-decoration:none;transition:color .2s} .mob-sub a:hover{color:var(--g2)} /* LAYOUT */ .W{max-width:1380px;margin:0 auto;padding:0 36px} .S{padding:112px 0}.Sm{padding:72px 0}.Ss{padding:48px 0} .tc{text-align:center}.pt{padding-top:0} /* TYPOGRAPHY */ .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:16px} .eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--g);flex-shrink:0} .tag{font-size:9.5px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--g2)} .hxl{font-family:var(--fd);font-size:clamp(56px,8.5vw,128px);font-weight:300;line-height:.9;letter-spacing:-1px;color:#ffffff!important} .hxl em{font-style:italic;color:var(--g2);letter-spacing:0} .hl{color:#f4f0e6;font-family:var(--fd);font-size:clamp(34px,4.8vw,68px);font-weight:300;line-height:1.0;letter-spacing:-.5px} .hl em{font-style:italic} .hm{font-family:var(--fd);font-size:clamp(24px,2.8vw,42px);font-weight:300;line-height:1.08;letter-spacing:-.2px} .hs{font-family:var(--fd);font-size:clamp(19px,2vw,30px);font-weight:300;letter-spacing:-.1px} .body-txt{font-size:15px;font-weight:300;line-height:1.9;color:rgba(244,240,230,.92)} .small-txt{font-size:12.5px;font-weight:300;line-height:1.82;color:var(--dimmer)} .gld{color:var(--g2)} .divg{width:36px;height:1px;background:var(--g);margin:18px 0} /* BUTTONS */ .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 32px;font-family:var(--fs);font-size:10.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;text-decoration:none;border:none;transition:all .3s var(--ease);white-space:nowrap;position:relative;overflow:hidden;min-height:44px} .bg{background:var(--g);color:var(--k)}.bg:hover{background:var(--g2);transform:translateY(-2px);box-shadow:0 12px 34px rgba(184,149,42,.3)} .bo{background:transparent;color:var(--g2);border:1px solid rgba(184,149,42,.3)}.bo:hover{background:var(--g);color:var(--k);border-color:var(--g);transform:translateY(-2px)} .bw{background:var(--k);color:var(--g2);border:none}.bw:hover{background:var(--k2)} .bfull{width:100%;justify-content:center;padding:16px} .bsm{padding:9px 19px;font-size:9.5px;min-height:36px} /* Disabled/loading — used while a form submits, so the button reads as "busy" rather than just inert, and can't be double-tapped. */ .btn:disabled,.btn.loading{opacity:.65;cursor:not-allowed;transform:none!important;box-shadow:none!important;pointer-events:none} .btn.loading{color:transparent!important} .btn.loading::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;border-radius:50%;animation:btnSpin .7s linear infinite;color:var(--k)} .bo.loading::after,.bw.loading::after{color:var(--g2)} @keyframes btnSpin{to{transform:rotate(360deg)}} /* Keyboard focus — visible on every interactive element, not just a default browser outline that often gets suppressed by resets. Only shows for keyboard/programmatic focus (:focus-visible), so mouse/touch clicks stay clean. */ a:focus-visible,button:focus-visible,.btn:focus-visible,.finp:focus-visible,.fsel:focus-visible,.fta:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--g2);outline-offset:2px;border-radius:1px; } .finp:focus-visible,.fsel:focus-visible,.fta:focus-visible{outline-offset:0} /* HERO */ .hero{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center} .hero-bg{position:absolute;inset:0} .hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transform-origin:center} .hero-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(9,8,7,.55) 0%,rgba(9,8,7,.2) 52%,rgba(9,8,7,.45) 100%)} .hero-grain{position:absolute;inset:0;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px;pointer-events:none} .hero-orb{position:absolute;border-radius:50%;pointer-events:none;animation:orbf 16s ease-in-out infinite} .hero-orb1{width:650px;height:650px;background:radial-gradient(circle,rgba(184,149,42,.065) 0%,transparent 65%);top:-120px;right:-80px} .hero-orb2{width:320px;height:320px;background:radial-gradient(circle,rgba(212,175,80,.045) 0%,transparent 65%);bottom:80px;left:-60px;animation-delay:-8s;animation-direction:reverse} @keyframes orbf{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-15px) scale(1.03)}} .hero-cnt{position:relative;z-index:2;padding:80px 0 68px} .hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(184,149,42,.08);border:1px solid rgba(184,149,42,.2);padding:7px 15px;margin-bottom:34px} .hero-dot{width:6px;height:6px;border-radius:50%;background:var(--g2);animation:dotp 2.5s ease-in-out infinite} @keyframes dotp{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(212,175,80,.45)}50%{opacity:.35;box-shadow:0 0 0 7px rgba(212,175,80,0)}} .hero-stats{display:flex;gap:46px;padding-top:48px;border-top:1px solid rgba(184,149,42,.1);margin-top:48px;flex-wrap:wrap} .stat-n{font-family:var(--fd);font-size:46px;font-weight:300;color:var(--g2);line-height:1;letter-spacing:-.5px} .stat-l{font-size:9px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--dimmer);margin-top:5px} /* MARQUEE */ .mq-wrap{overflow:hidden;border-top:1px solid rgba(184,149,42,.07);border-bottom:1px solid rgba(184,149,42,.07);background:var(--k2)} .mq{display:flex;animation:mrun 30s linear infinite;white-space:nowrap} .mq:hover{animation-play-state:paused} .mq-it{display:inline-flex;align-items:center;gap:17px;padding:14px 24px;text-decoration:none;flex-shrink:0} .mq-it span{font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:rgba(244,240,230,.82);transition:color .2s;white-space:nowrap} .mq-it:hover span{color:var(--g2)} .mq-sep{width:3px;height:3px;border-radius:50%;background:rgba(184,149,42,.28);flex-shrink:0} @keyframes mrun{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* SECTION HEADERS */ .sec-hdr{margin-bottom:52px} .sec-split{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:52px} /* SERVICES GRID */ .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(184,149,42,.08)} .svc-card{border-right:1px solid rgba(184,149,42,.08);border-bottom:1px solid rgba(184,149,42,.08);padding:38px 24px;text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:background .3s;display:block} .svc-card:hover{background:var(--k2)}.svc-card:hover .sc-ico{transform:scale(1.1) rotate(-4deg);color:var(--g2)}.svc-card:hover .sc-nm{color:var(--g2)}.svc-card:hover .sc-arr{opacity:1;transform:none} .sc-ico{font-size:25px;display:block;margin-bottom:14px;color:var(--g);transition:all .4s var(--ease)} .sc-nm{font-family:var(--fd);font-size:18px;font-weight:300;display:block;margin-bottom:6px;transition:color .2s} .sc-ds{font-size:11.5px;font-weight:300;line-height:1.75;color:var(--dimmer)} .sc-arr{position:absolute;top:16px;right:16px;font-size:16px;color:var(--g2);opacity:0;transform:translate(-4px,4px);transition:all .3s var(--ease)} /* CITY GRID */ .city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px} .city-card{position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block;aspect-ratio:3/4} .city-card.w2{grid-column:span 2;aspect-ratio:auto;min-height:290px} .city-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)} .city-card:hover .city-img{transform:scale(1.07)} .city-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,8,7,.93) 0%,rgba(9,8,7,.28) 55%,rgba(9,8,7,.07) 100%);transition:all .4s} .city-card:hover .city-ov{background:linear-gradient(to top,rgba(9,8,7,.97) 0%,rgba(9,8,7,.46) 55%,rgba(9,8,7,.14) 100%)} .city-body{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;justify-content:flex-end} .city-badge{align-self:flex-start;background:var(--g);color:var(--k);font-size:8px;font-weight:500;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;margin-bottom:auto;opacity:1;transform:none;transition:all .28s .06s} .city-card:hover .city-badge{opacity:1;transform:none} .city-nm{font-family:var(--fd);font-size:27px;font-weight:300;font-style:italic;line-height:1} .city-card.w2 .city-nm{font-size:38px} .city-sub{font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);display:block;margin:4px 0 9px;transition:color .3s} .city-card:hover .city-sub{color:var(--g2)} .city-tags{display:flex;gap:5px;flex-wrap:wrap} .ct{font-size:7.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--g2);border:1px solid rgba(212,175,80,.22);padding:3px 7px;opacity:1;transform:none;transition:all .25s var(--ease)} .city-card:hover .ct{opacity:1;transform:none} .city-card:hover .ct:nth-child(2){transition-delay:.05s} .city-card:hover .ct:nth-child(3){transition-delay:.1s} /* PROPS */ .props-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(184,149,42,.07)} .prop{background:var(--k);padding:46px 36px} .prop-no{font-family:var(--fd);font-size:76px;font-weight:300;color:rgba(184,149,42,.05);line-height:1;margin-bottom:-12px} .prop-title{font-family:var(--fd);font-size:21px;font-weight:300;margin-bottom:11px} /* PAGE HERO */ .pg-hero{min-height:48vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;padding-bottom:58px} .pg-hero-img{position:absolute;inset:0} .pg-hero-img img{width:100%;height:100%;object-fit:cover} .pg-hero-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,8,7,.92) 0%,rgba(9,8,7,.4) 52%,rgba(9,8,7,.1) 100%)} .pg-hero-cnt{position:relative;z-index:2} .breadcrumb{display:flex;align-items:center;gap:8px;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);margin-bottom:18px} .breadcrumb a{color:inherit;text-decoration:none;transition:color .2s} .breadcrumb a:hover{color:var(--g2)} .bc-s{color:var(--g)} /* DETAIL GRID (clubs/restaurants/beach) */ .detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px} /* Grid items default to min-width:auto, meaning CSS Grid refuses to shrink a track below its content's intrinsic (min-content) width — normally invisible, but the "Próximos eventos" cards added this session use a nested auto-fill/minmax(150px,1fr) grid, and THAT combination genuinely cannot shrink below roughly 2×150px+gap. On mobile (single column, ~340px available) that pushed the .rv child to ~406px, wider than its own grid track — which nothing here clips, so it inflated the page's whole layout viewport and every fixed-position element (nav overlay, WhatsApp/Geri/Tickets floats) along with it. This is the real root cause of the mobile "extra margin / sideways scroll" reports — not a screenshot artifact, not any single float's positioning. min-width:0 is the standard fix: it lets the grid item actually shrink to its track's real size, so the nested grid — and everything downstream of it — wraps/reflows to fit instead of forcing overflow. */ .detail-grid>*{min-width:0} .city-section{background:var(--k2);border:1px solid rgba(184,149,42,.08);overflow:hidden} .city-sec-hdr{padding:24px 24px 18px;border-bottom:1px solid rgba(184,149,42,.08);display:flex;align-items:center;gap:12px} .city-sec-flag{font-size:20px} .city-sec-nm{font-family:var(--fd);font-size:21px;font-weight:300} .city-sec-img{height:130px;overflow:hidden} .city-sec-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .city-section:hover .city-sec-img img{transform:scale(1.04)} .venue-list{padding:18px 24px;display:flex;flex-direction:column} .venue{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(184,149,42,.05);text-decoration:none;color:inherit} .venue:last-child{border-bottom:none} .venue:hover .v-nm{color:var(--g2)} .venue:hover .v-arrow{opacity:1;transform:none} .v-nm{font-size:14px;font-weight:300;transition:color .2s} .v-detail{font-size:10.5px;color:var(--dimmer);display:block;margin-top:2px} .v-arrow{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--g2);opacity:1;transform:none;transition:all .22s;flex-shrink:0} /* FESTIVALS */ .fest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .fest-card{background:var(--k2);border:1px solid rgba(184,149,42,.08);overflow:hidden;text-decoration:none;color:inherit;display:block;transition:border-color .3s,transform .4s var(--ease)} .fest-card:hover{border-color:rgba(184,149,42,.32);transform:translateY(-7px);box-shadow:0 22px 55px rgba(0,0,0,.5)} .fest-img{height:175px;position:relative;overflow:hidden} .fest-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)} .fest-card:hover .fest-img img{transform:scale(1.07)} .fest-img-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(9,8,7,.2),rgba(9,8,7,.6))} .fest-ico{position:absolute;font-size:38px;z-index:2;bottom:14px;left:18px} .fest-body{padding:20px} .fest-meta{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--g2);margin-bottom:6px;display:block} .fest-nm{font-family:var(--fd);font-size:20px;font-weight:300;display:block;margin-bottom:8px} .fest-ds{font-size:12px;color:var(--dimmer);line-height:1.8} /* EVENTOS */ .ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .ev-card{background:var(--k2);padding:34px 26px;text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:background .3s;display:block} .ev-card::before{content:'';position:absolute;left:0;top:0;width:2px;height:0;background:var(--g);transition:height .35s var(--ease)} .ev-card:hover::before{height:100%} .ev-card:hover{background:var(--k3)} .ev-ico{font-size:24px;display:block;margin-bottom:13px} .ev-nm{font-family:var(--fd);font-size:19px;font-weight:300;display:block;margin-bottom:7px} .ev-ds{font-size:12px;color:var(--dimmer);line-height:1.8} /* ACTIVIDADES */ .act-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(184,149,42,.07)} .act-it{background:var(--k);padding:30px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:inherit;transition:background .3s;position:relative} .act-it::before{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--g);transform:scaleX(0);transition:transform .28s var(--ease)} .act-it:hover{background:var(--k2)}.act-it:hover::before{transform:scaleX(1)}.act-it:hover .act-ico{transform:scale(1.18) rotate(-4deg)}.act-it:hover .act-nm{color:var(--g2)} .act-ico{font-size:24px;transition:transform .35s var(--ease)} .act-nm{font-size:9.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);transition:color .25s} /* FLEET */ .fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .fleet-card{position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block;aspect-ratio:4/3} .fleet-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .fleet-card:hover img{transform:scale(1.07)} .fleet-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,8,7,.9) 0%,rgba(9,8,7,.18) 100%);transition:all .3s} .fleet-card:hover .fleet-ov{background:linear-gradient(to top,rgba(9,8,7,.95) 0%,rgba(9,8,7,.3) 100%)} .fleet-body{position:absolute;bottom:0;left:0;right:0;padding:20px} .fleet-nm{font-family:var(--fd);font-size:20px;font-weight:300;font-style:italic;display:block;margin-bottom:4px} .fleet-sub{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);display:block;transition:color .25s} .fleet-card:hover .fleet-sub{color:var(--g2)} .fleet-lbl{position:absolute;top:13px;left:13px;background:var(--g);color:var(--k);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;opacity:0;transition:opacity .3s} .fleet-card:hover .fleet-lbl{opacity:1} /* OTROS */ .otros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .otro-card{background:var(--k2);border:1px solid rgba(184,149,42,.08);padding:40px 28px;text-decoration:none;color:inherit;text-align:center;display:block;transition:all .4s var(--ease);position:relative;overflow:hidden} .otro-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(184,149,42,.055),transparent 65%);opacity:0;transition:opacity .4s} .otro-card:hover{border-color:rgba(184,149,42,.28);transform:translateY(-7px);box-shadow:0 22px 60px rgba(0,0,0,.5)}.otro-card:hover::before{opacity:1}.otro-card:hover .oi{transform:scale(1.12);color:var(--g2)} .oi{font-size:34px;display:block;margin-bottom:16px;transition:all .35s;color:var(--g)} .on{font-family:var(--fd);font-size:21px;font-weight:300;margin-bottom:9px;display:block} .od{font-size:12px;color:var(--dimmer);line-height:1.8} /* CURIOSIDADES */ .ctabs{display:flex;border:1px solid rgba(184,149,42,.11);overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap} .ctabs::-webkit-scrollbar{display:none} .ctab{padding:12px 18px;font-size:9.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);background:transparent;border:none;border-right:1px solid rgba(184,149,42,.09);transition:all .2s;white-space:nowrap;display:flex;align-items:center;gap:7px;font-family:var(--fs);flex-shrink:0} .ctab:last-child{border-right:none} .ctab:hover{background:var(--ga);color:var(--c)} .ctab.active{background:var(--g);color:var(--k)} .ctab .fl{font-size:14px} .curio-pg{display:none} .curio-pg.active{display:block;animation:fadeUp .35s var(--ease) both} .curio-hero{position:relative;height:330px;overflow:hidden;border:1px solid rgba(184,149,42,.08);border-top:none} .curio-hero img{width:100%;height:100%;object-fit:cover;transition:transform 8s linear} .curio-hero:hover img{transform:scale(1.04)} .curio-hero-ov{position:absolute;inset:0;background:linear-gradient(to right,rgba(9,8,7,.93) 0%,rgba(9,8,7,.45) 55%,rgba(9,8,7,.12) 100%)} .curio-hero-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:44px} .cfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(184,149,42,.08);border:1px solid rgba(184,149,42,.08);border-top:none} .cfact{background:var(--k2);padding:26px 22px} .cfact-n{font-family:var(--fd);font-size:32px;font-weight:300;color:var(--g2);line-height:1;margin-bottom:5px} .cfact-l{font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer)} .curio-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px} .curio-card{background:var(--k2);border:1px solid rgba(184,149,42,.08);padding:26px 22px;transition:border-color .3s,transform .3s var(--ease);position:relative} .curio-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--g);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)} .curio-card:hover{border-color:rgba(184,149,42,.26);transform:translateY(-4px)}.curio-card:hover::before{transform:scaleX(1)} .curio-ico{font-size:22px;margin-bottom:11px;display:block} .curio-t{font-family:var(--fd);font-size:16px;font-weight:300;margin-bottom:7px;display:block} .curio-tx{font-size:12.5px;color:var(--dimmer);line-height:1.82} .curio-quote{background:var(--ga);border:1px solid rgba(184,149,42,.17);border-left:3px solid var(--g2);padding:18px 22px;margin-top:16px} .curio-quote p{font-size:13px;font-style:italic;color:var(--dim);line-height:1.8} .cq-src{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--g2);display:block;margin-top:7px} .curio-tips{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(184,149,42,.07);margin-top:16px} .ctip{background:var(--k2);padding:20px 18px} .ctip-l{font-size:8.5px;letter-spacing:2px;text-transform:uppercase;color:var(--g2);margin-bottom:7px;display:block} .ctip-v{font-size:12.5px;color:var(--dim);line-height:1.65} /* BLOG CARDS */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .blog-card{background:var(--k2);border:1px solid rgba(184,149,42,.08);overflow:hidden;text-decoration:none;color:inherit;display:block;transition:border-color .3s,transform .35s var(--ease)} .blog-card:hover{border-color:rgba(184,149,42,.28);transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.5)} .blog-card:hover .bc-img img{transform:scale(1.06)} .bc-img{height:195px;overflow:hidden;position:relative} .bc-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)} .bc-body{padding:20px} .bc-meta{font-size:8.5px;letter-spacing:2px;text-transform:uppercase;color:var(--g2);display:block;margin-bottom:7px} .bc-title{font-family:var(--fd);font-size:18px;font-weight:300;line-height:1.25;margin-bottom:9px} .bc-exc{font-size:12px;color:var(--dimmer);line-height:1.75} .bc-more{display:inline-block;margin-top:12px;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--g2)} /* SINGLE POST */ .post-content{max-width:760px;margin:0 auto} .post-content h2{font-family:var(--fd);font-size:clamp(22px,2.5vw,32px);font-weight:300;margin:36px 0 14px;color:var(--c)} .post-content h3{font-family:var(--fd);font-size:clamp(18px,2vw,24px);font-weight:300;margin:26px 0 10px;color:var(--g2)} .post-content p{font-size:15px;font-weight:300;line-height:1.9;color:var(--dim);margin-bottom:18px} .post-content strong{color:var(--c);font-weight:500} .post-content ul{list-style:none;margin:12px 0 18px 0} .post-content ul li{font-size:14px;color:var(--dim);padding:5px 0 5px 18px;position:relative;border-bottom:1px solid rgba(184,149,42,.06)} .post-content ul li::before{content:'✦';position:absolute;left:0;font-size:7px;color:var(--g);top:9px} .post-content a{color:var(--g2);text-decoration:none;border-bottom:1px solid rgba(212,175,80,.3);transition:border-color .2s} .post-content a:hover{border-bottom-color:var(--g2)} .post-content img{max-width:100%;height:auto;margin:24px 0;border:1px solid rgba(184,149,42,.1)} /* CONTACT FORM */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:68px;align-items:start} /* Same min-width:auto grid-item trap as .detail-grid above — applied defensively to every other multi-column grid on the site, since any of them could develop the identical issue the moment a nested auto-fill/ minmax grid or a long unbroken string ends up inside one. Safe with no visual downside: it only ever takes effect when content would otherwise force real overflow, in which case it makes that content wrap/shrink to fit instead. */ .svc-grid>*,.city-grid>*,.props-grid>*,.fest-grid>*,.ev-grid>*,.act-grid>*,.fleet-grid>*,.otros-grid>*,.cfacts>*,.curio-cards>*,.curio-tips>*,.blog-grid>*,.contact-grid>*,.frow>*,.foot-grid>*,.hero-grid>*,.trip-city-grid>*,.trip-sliders>*{min-width:0} .cd{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid rgba(184,149,42,.07)} .cd-ico{font-size:15px;flex-shrink:0;margin-top:2px} .cd-l{font-size:9px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--g2);margin-bottom:3px} .cd-v{font-size:14px;color:var(--c);text-decoration:none;transition:color .2s} a.cd-v:hover{color:var(--g2)} .fbox{background:var(--k2);border:1px solid rgba(184,149,42,.11);padding:38px} .flbl{display:block;font-size:9px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--g2);margin-bottom:6px} .finp,.fsel,.fta{width:100%;min-height:44px;background:rgba(184,149,42,.04);border:1px solid rgba(184,149,42,.12);color:var(--c);padding:11px 13px;font-family:var(--fs);font-size:13px;font-weight:300;outline:none;transition:border-color .2s,box-shadow .2s;appearance:none;margin-bottom:6px} .finp:focus,.fsel:focus,.fta:focus{border-color:var(--g2);box-shadow:0 0 0 3px rgba(184,149,42,.12)} .finp::placeholder,.fta::placeholder{color:rgba(244,240,230,.82)} .fsel option{background:var(--k3)} .fta{height:95px;resize:vertical;min-height:95px} .frow{display:grid;grid-template-columns:1fr 1fr;gap:11px} .cptag{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:9px 14px;min-height:36px;border:1px solid rgba(184,149,42,.15);color:var(--dimmer);transition:all .2s;background:transparent;font-family:var(--fs)} .cptag:hover,.cptag.sel{background:var(--g);color:var(--k);border-color:var(--g)} /* Inline field validation — a red ring on the exact field that's wrong, plus a small message right under it, instead of only a banner at the top of the form the visitor has to reconcile with which input broke. */ .finp.err,.fsel.err,.fta.err{border-color:#e0645f;box-shadow:0 0 0 3px rgba(224,100,95,.12)} .ferr-msg{display:none;font-size:11.5px;color:#f0a0a0;margin:-2px 0 12px;line-height:1.4} .ferr-msg.show{display:block} .f-ok{background:var(--k2);border:1px solid rgba(184,149,42,.22);padding:48px 34px;text-align:center;display:none} .f-ok.show{display:block} /* CTA BAND */ .cta-band{background:var(--g);padding:64px 0} .cta-in{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap} /* FOOTER */ footer{background:var(--k2);border-top:1px solid rgba(184,149,42,.08);padding:76px 0 38px} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:52px} .foot-logo{font-family:var(--fd);font-size:25px;font-weight:300;color:var(--c);margin-bottom:13px;display:block} .foot-logo b{color:var(--g2);font-weight:400} .foot-bd{font-size:12.5px;font-weight:300;line-height:1.85;color:var(--dimmer);margin-bottom:20px} .socials{display:flex;gap:7px} .soc{width:33px;height:33px;border:1px solid rgba(184,149,42,.17);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:var(--dimmer);text-decoration:none;transition:all .22s} .soc:hover{border-color:var(--g2);color:var(--g2)} .fh{font-size:9px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--g2);margin-bottom:18px} .ful{list-style:none} .ful li{margin-bottom:7px} .ful a{font-size:12px;font-weight:300;color:var(--dimmer);text-decoration:none;transition:color .2s} .ful a:hover{color:var(--g2)} .foot-btm{border-top:1px solid rgba(184,149,42,.06);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} .foot-copy{font-size:10.5px;color:rgba(244,240,230,.82)} /* FLOATING */ /* bottom:28px — Geri's floating launcher (formerly stacked below this, at bottom:28px) is retired (display:none in geri.css), so WhatsApp reclaims the base spot instead of leaving a gap under it. */ .wa-float{position:fixed;bottom:28px;right:28px;z-index:400;display:flex;flex-direction:column;align-items:flex-end;gap:8px} .wa-tip{background:var(--k2);border:1px solid rgba(184,149,42,.17);color:var(--c);font-size:11px;padding:7px 12px;white-space:nowrap;opacity:0;transform:translateX(7px);transition:all .25s var(--ease);pointer-events:none} .wa-float:hover .wa-tip{opacity:1;transform:none} .wa-btn{width:50px;height:50px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:21px;animation:wap 3.5s ease-in-out infinite} .wa-btn:hover{transform:scale(1.1)!important;animation:none} @keyframes wap{0%,100%{box-shadow:0 5px 22px rgba(37,211,102,.32)}50%{box-shadow:0 5px 44px rgba(37,211,102,.52),0 0 0 8px rgba(37,211,102,.07)}} /* bottom:90px — stacks directly above .wa-float's new position (28px bottom + 50px tall + ~12px gap). */ .btt{position:fixed;bottom:90px;right:28px;width:38px;height:38px;background:var(--k2);border:1px solid rgba(184,149,42,.15);display:flex;align-items:center;justify-content:center;color:var(--g2);font-size:13px;opacity:0;transition:all .3s;z-index:400} .btt.vis{opacity:1}.btt:hover{background:var(--g);color:var(--k)} /* On mobile this collided with the WhatsApp button's 6s auto-shown label (see .wa-tip below) — 4 floating widgets (WhatsApp, Tickets, Geri, this) fighting over two small corners is exactly the "grotesque"/cluttered feeling on a small screen. Back-to-top is the least essential of the four (native scroll/status-bar-tap covers it), so it's mobile-only dropped rather than repositioned. */ @media(max-width:600px){.btt{display:none}} /* SCROLL REVEAL */ .rv{opacity:1;transform:none} .rv-l{opacity:1;transform:none} .rv-r{opacity:1;transform:none} .sg{opacity:1;transform:none} /* PAGER */ .pager{display:flex;gap:6px;margin-top:36px;justify-content:center} .pg-a{padding:8px 13px;background:var(--k2);border:1px solid rgba(184,149,42,.1);color:var(--dimmer);font-size:12px;text-decoration:none;transition:all .2s} .pg-a:hover,.pg-a.on{background:var(--g);color:var(--k);border-color:var(--g)} /* ANIMATIONS */ @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* RESPONSIVE */ @media(max-width:1100px){.svc-grid{grid-template-columns:repeat(2,1fr)}.city-grid{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1fr 1fr}.curio-cards{grid-template-columns:1fr 1fr}.cfacts{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}.curio-tips{grid-template-columns:1fr 1fr}.blog-grid{grid-template-columns:1fr 1fr}} @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px}.otros-grid{grid-template-columns:1fr 1fr}.ev-grid{grid-template-columns:1fr 1fr}.props-grid{grid-template-columns:1fr}.fest-grid{grid-template-columns:1fr 1fr}.fleet-grid{grid-template-columns:1fr 1fr}.act-grid{grid-template-columns:repeat(2,1fr)}.curio-cards{grid-template-columns:1fr}} @media(max-width:768px){.nav-ul,.nav-cta,.lang-switch{display:none}.hbg{display:flex}.ann{display:none}.S{padding:64px 0}.W{padding:0 18px}.city-grid{grid-template-columns:1fr 1fr}.svc-grid,.otros-grid,.ev-grid,.fest-grid,.fleet-grid,.blog-grid{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr;gap:22px}.foot-btm{flex-direction:column}.hero-stats{gap:24px}.frow{grid-template-columns:1fr}.cfacts{grid-template-columns:1fr 1fr}.curio-hero{height:200px}.curio-hero-body{padding:22px}.sec-split{flex-direction:column;align-items:flex-start}body{cursor:auto}#CR,#CR2{display:none}.act-grid{grid-template-columns:repeat(2,1fr)}.curio-tips{grid-template-columns:1fr 1fr}} @media(max-width:480px){.city-grid{grid-template-columns:1fr}.cfacts{grid-template-columns:1fr}.curio-tips{grid-template-columns:1fr}.hero-stats{flex-direction:column;gap:18px}.contact-grid{gap:30px}} /* ── FOOTER REDESIGN ─────────────────────────────────────────── */ .footer{margin-top:0} .foot-top{background:var(--k2);border-top:1px solid rgba(184,149,42,.12);padding:72px 0 56px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px} .foot-logo{font-family:var(--fd);font-size:26px;font-weight:300;color:#fff;text-decoration:none;display:inline-block;margin-bottom:14px} .foot-logo b{color:var(--g2);font-weight:500} .foot-tagline{font-size:13px;color:rgba(244,240,230,.88);line-height:1.75;margin-bottom:20px} .foot-socials{display:flex;gap:10px;margin-bottom:16px} .foot-soc{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(184,149,42,.2);color:rgba(244,240,230,.82);text-decoration:none;transition:all .25s} .foot-soc:hover{background:var(--g);color:var(--k);border-color:var(--g)} .foot-contact-info{display:flex;flex-direction:column;gap:4px} .foot-contact-info a,.foot-contact-info span{font-size:12px;color:rgba(244,240,230,.82);text-decoration:none;transition:color .2s} .foot-contact-info a:hover{color:var(--g2)} .foot-h{font-family:var(--fd);font-size:13px;font-weight:400;color:var(--c);letter-spacing:.5px;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid rgba(184,149,42,.1)} .foot-ul{list-style:none;display:flex;flex-direction:column;gap:8px} .foot-ul li a{font-size:12.5px;color:rgba(244,240,230,.82);text-decoration:none;transition:color .2s;display:block} .foot-ul li a:hover{color:var(--g2)} .foot-cta-text{font-size:13px;color:rgba(244,240,230,.88);line-height:1.65;margin-bottom:20px} .foot-wa-btn{display:flex;align-items:center;gap:8px;background:#25D366;color:#fff;text-decoration:none;padding:12px 20px;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;transition:background .25s} .foot-wa-btn:hover{background:#1ebe5d} .foot-contact-btn{display:block;padding:11px 20px;border:1px solid rgba(184,149,42,.25);color:var(--g2);text-decoration:none;font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;text-align:center;transition:all .25s;margin-bottom:14px} .foot-contact-btn:hover{background:var(--g);color:var(--k);border-color:var(--g)} .foot-lang a{font-size:11px;color:rgba(244,240,230,.82);text-decoration:none;transition:color .2s} .foot-lang a:hover{color:var(--g2)} .foot-bottom{background:var(--k);border-top:1px solid rgba(184,149,42,.06);padding:20px 0} .foot-btm-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .foot-copy{font-size:11px;color:rgba(244,240,230,.82)} .foot-copy a{color:inherit;text-decoration:none} .foot-cities{font-size:10px;color:rgba(244,240,230,.82);letter-spacing:1px} .foot-admin-link{font-size:12px;color:rgba(184,149,42,.2);text-decoration:none;transition:color .2s} .foot-admin-link:hover{color:var(--g2)} @media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}} @media(max-width:600px){.foot-grid{grid-template-columns:1fr;gap:32px}.foot-btm-inner{flex-direction:column;text-align:center}} /* ── GLOBAL TEXT VISIBILITY FIX ─────────────────────────────── */ h1,h2,h3,h4{color:#f4f0e6} p{color:rgba(244,240,230,.9)} .body,.pg-body{color:rgba(244,240,230,.9)!important} .tag{color:var(--g2)!important} .eyebrow span{color:var(--g2)!important} section p,section li,.sec-text{color:rgba(244,240,230,.88)!important} .hero-sub,.pg-sub{color:#ffffff!important} .hero .body-txt,.hero p{color:#ffffff!important;opacity:1!important;text-shadow:0 1px 8px rgba(0,0,0,.5)} .hero .hxl{text-shadow:0 2px 20px rgba(0,0,0,.4)} #hDesc{color:#ffffff!important;opacity:1!important} #hTitle,#hBadge,#hCtas{opacity:1!important} .card-body p{color:rgba(244,240,230,.85)} .svc-desc,.city-desc,.feat-desc{color:rgba(244,240,230,.88)!important} .city-sec-btns{display:flex;gap:8px;padding:14px 16px;border-top:1px solid rgba(184,149,42,.12);background:rgba(184,149,42,.03)} .city-sec-btns .btn{flex:1;text-align:center;font-size:10px;letter-spacing:2px;padding:9px 12px} /* ── Cookie Consent Banner ──────────────────────────────────────── */ #gr-cookie-banner{position:fixed;bottom:-100%;left:0;right:0;z-index:9990;padding:0 16px 16px;pointer-events:none;transition:bottom .4s cubic-bezier(.22,.61,.36,1)} #gr-cookie-banner.gr-cb-in{bottom:0;pointer-events:all} .gr-cb-inner{max-width:900px;margin:0 auto;background:#1a1916;border:1px solid rgba(184,149,42,.25);padding:20px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap} .gr-cb-top{flex:1;min-width:200px} .gr-cb-title{display:block;font-size:15px;font-weight:500;color:var(--c);margin-bottom:6px} .gr-cb-text{font-size:12px;color:var(--dimmer);line-height:1.6;margin:0} .gr-cb-text a{color:var(--g2)} .gr-cb-btns{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0} .gr-cb-btn{padding:9px 18px;font-family:var(--fs);font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border:1px solid;transition:all .2s;white-space:nowrap} .gr-cb-accept{background:var(--g);color:var(--k);border-color:var(--g)} .gr-cb-accept:hover{background:var(--g2);border-color:var(--g2)} .gr-cb-reject{background:transparent;color:var(--dimmer);border-color:rgba(184,149,42,.25)} .gr-cb-reject:hover{color:var(--c);border-color:rgba(184,149,42,.5)} .gr-cb-manage{background:transparent;color:var(--g2);border-color:rgba(184,149,42,.4)} .gr-cb-manage:hover{background:rgba(184,149,42,.08)} /* ── Cookie Preferences Panel ──────────────────────────────────── */ #gr-cookie-panel{position:fixed;inset:0;z-index:9995;opacity:0;transition:opacity .3s} #gr-cookie-panel.gr-cp-in{opacity:1} .gr-cp-overlay{position:absolute;inset:0;background:rgba(0,0,0,.75)} .gr-cp-box{position:absolute;bottom:0;left:50%;transform:translateX(-50%) translateY(30px);width:100%;max-width:560px;background:#1a1916;border:1px solid rgba(184,149,42,.25);border-bottom:none;transition:transform .3s;max-height:90vh;display:flex;flex-direction:column} #gr-cookie-panel.gr-cp-in .gr-cp-box{transform:translateX(-50%) translateY(0)} .gr-cp-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid rgba(184,149,42,.12)} .gr-cp-title{font-size:14px;font-weight:500;color:var(--c)} .gr-cp-close{background:none;border:none;color:var(--dimmer);cursor:pointer;font-size:16px;padding:4px 8px;transition:color .2s} .gr-cp-close:hover{color:var(--c)} .gr-cp-body{overflow-y:auto;flex:1;padding:8px 0} .gr-cp-row{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid rgba(184,149,42,.06)} .gr-cp-info{flex:1} .gr-cp-info strong{display:block;font-size:13px;color:var(--c);margin-bottom:3px} .gr-cp-info p{font-size:11px;color:var(--dimmer);margin:0;line-height:1.5} .gr-toggle{position:relative;flex-shrink:0;cursor:pointer} .gr-toggle input{position:absolute;opacity:0;width:0;height:0} .gr-toggle-track{display:block;width:44px;height:24px;background:rgba(184,149,42,.15);border:1px solid rgba(184,149,42,.25);border-radius:12px;transition:all .25s;position:relative} .gr-toggle input:checked ~ .gr-toggle-track{background:var(--g);border-color:var(--g)} .gr-toggle input:disabled ~ .gr-toggle-track{opacity:.5;cursor:not-allowed} .gr-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .25s} .gr-toggle input:checked ~ .gr-toggle-track .gr-toggle-thumb{transform:translateX(20px)} .gr-cp-footer{display:flex;gap:8px;padding:16px 24px;border-top:1px solid rgba(184,149,42,.12)} .gr-cp-footer .gr-cb-btn{flex:1;text-align:center;justify-content:center} /* Mobile cookie banner — was 3 full-width buttons stacked vertically (title + paragraph + 3 wrapped rows), eating nearly half the viewport on first load, before the visitor has seen anything else. Reject and Accept stay equally prominent (GDPR: no dark pattern) side by side; "manage" becomes a small text link instead of a third full button. */ @media(max-width:600px){ .gr-cb-inner{padding:14px 16px;gap:10px} .gr-cb-title{display:none} .gr-cb-text{font-size:11.5px;line-height:1.5} .gr-cb-btns{width:100%;gap:8px} .gr-cb-reject{order:1;flex:1 1 0;padding:11px 10px;font-size:9.5px;letter-spacing:1px;min-height:40px} .gr-cb-accept{order:2;flex:1 1 0;padding:11px 10px;font-size:9.5px;letter-spacing:1px;min-height:40px} .gr-cb-manage{order:3;flex:0 0 100%;background:none;border:none;padding:2px 0 0;font-size:10.5px;letter-spacing:.5px;text-transform:none;text-decoration:underline;text-underline-offset:2px;color:var(--dimmer);min-height:auto} } /* ── FAQ ────────────────────────────────────────────────────── */ .faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:2px} .faq-item{border:1px solid rgba(184,149,42,.12);background:var(--k2);border-radius:4px;overflow:hidden;transition:border-color .25s} .faq-item[open]{border-color:rgba(184,149,42,.28)} .faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-family:var(--fd);font-size:clamp(15px,1.4vw,17px);font-weight:400;color:var(--c);cursor:pointer;list-style:none;user-select:none;transition:color .2s} .faq-q::-webkit-details-marker{display:none} .faq-q::after{content:'+';;font-size:20px;font-family:var(--fs);font-weight:300;color:var(--g);flex-shrink:0;transition:transform .25s} .faq-item[open] .faq-q::after{transform:rotate(45deg)} .faq-q:hover{color:var(--g2)} .faq-a{padding:0 24px 20px;color:var(--dimmest);font-size:14px;line-height:1.75} .faq-a p{margin:0} .faq-a strong{color:var(--g2);font-weight:500} /* ── Language-specific font overrides ───────────────────────── */ :lang(zh) { --fd: 'Noto Serif SC', 'Fraunces', Georgia, serif; --fs: 'Noto Sans SC', 'Manrope', sans-serif; } :lang(zh) .hxl,:lang(zh) .hl,:lang(zh) .hm,:lang(zh) .hs { font-weight: 300; letter-spacing: 0; } :lang(zh) body { font-weight: 300; line-height: 1.8; } :lang(ar) { --fd: 'Cairo', sans-serif; --fs: 'Cairo', sans-serif; } :lang(ar) body { font-weight: 400; line-height: 1.9; font-size: 15px; } :lang(ar) .hxl,:lang(ar) .hl,:lang(ar) .hm,:lang(ar) .hs { font-weight: 400; letter-spacing: 0; font-style: normal; } :lang(ar) .logo { font-family: 'Cairo', sans-serif; font-weight: 500; letter-spacing: 0; } :lang(ar) .mob-a { font-style: normal; font-family: 'Cairo', sans-serif; } :lang(ar) .btn,:lang(ar) .nav-cta,:lang(ar) .bsm { letter-spacing: 0; font-family: 'Cairo', sans-serif; } :lang(ar) .tag,:lang(ar) .stat-l,:lang(ar) .city-sub,:lang(ar) .ct { letter-spacing: 0; } :lang(ar) .ann span { letter-spacing: 0; } :lang(ar) .eyebrow { flex-direction: row-reverse; } :lang(ar) .sc-arr { right: auto; left: 16px; } /* ── RTL (Arabic layout) ────────────────────────────────────── */ [dir="rtl"] { direction: rtl; text-align: right; } [dir="rtl"] .nav-in { flex-direction: row-reverse; } [dir="rtl"] .nav-ul { flex-direction: row-reverse; } [dir="rtl"] .nav-ul>li>a::after { left: auto; right: 50%; } [dir="rtl"] .nav-ul>li>a:hover::after { left: auto; right: 14%; } [dir="rtl"] .drop { right: auto; left: 0; } [dir="rtl"] .drop a:hover { padding-left: 16px; padding-right: 22px; } [dir="rtl"] .lang-drop { right: auto; left: 0; } [dir="rtl"] .mob { text-align: right; } [dir="rtl"] .mob-sub { padding-right: 0; } [dir="rtl"] .hero-cnt { text-align: right; } [dir="rtl"] .hero-badge { flex-direction: row-reverse; } [dir="rtl"] .hero-stats { flex-direction: row-reverse; } [dir="rtl"] .eyebrow { flex-direction: row-reverse; } [dir="rtl"] .eyebrow::before { order: 1; } [dir="rtl"] .sec-hdr { text-align: right; } [dir="rtl"] .sec-split { flex-direction: row-reverse; } [dir="rtl"] .cta-in { flex-direction: row-reverse; } [dir="rtl"] .venue { flex-direction: row-reverse; } [dir="rtl"] .v-arrow { transform: rotate(180deg); } [dir="rtl"] .venue-list { text-align: right; } [dir="rtl"] .curio-tips { direction: rtl; } [dir="rtl"] .breadcrumb { flex-direction: row-reverse; } [dir="rtl"] .breadcrumb::before { display: none; } [dir="rtl"] .ann-inner { direction: rtl; } [dir="rtl"] .pg-hero-cnt { text-align: right; } [dir="rtl"] .city-body { text-align: right; } [dir="rtl"] .city-badge { align-self: flex-end; } [dir="rtl"] .city-tags { flex-direction: row-reverse; } [dir="rtl"] .sc-arr { right: auto; left: 16px; } [dir="rtl"] .svc-card { text-align: right; } [dir="rtl"] .wa-float { right: auto; left: 28px; } [dir="rtl"] .prop { text-align: right; } [dir="rtl"] .foot-grid { text-align: right; } [dir="rtl"] .foot-ul { text-align: right; } [dir="rtl"] .foot-btm { flex-direction: row-reverse; } [dir="rtl"] .foot-contact-info { text-align: right; } [dir="rtl"] .faq-q { text-align: right; flex-direction: row-reverse; } [dir="rtl"] .blog-meta { flex-direction: row-reverse; } [dir="rtl"] .act-it { text-align: right; } [dir="rtl"] .gr-scroll { left: auto; right: 50%; transform: translateX(50%); } /* ── Page transition overlay ──────────────────────────────────── */ #gr-pg{position:fixed;inset:0;background:var(--k);z-index:950;opacity:0;pointer-events:none;transition:opacity .28s var(--ease)} #gr-pg.on{opacity:1;pointer-events:all} /* ── Nav hover underline ──────────────────────────────────────── */ .nav-ul>li>a{position:relative} .nav-ul>li>a::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:1px;background:var(--g2);opacity:.6;transition:width .3s var(--ease),left .3s var(--ease)} .nav-ul>li>a:hover::after{width:72%;left:14%} /* ── Hero scroll indicator ────────────────────────────────────── */ .gr-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:5;opacity:0;animation:grScrollIn .5s var(--ease) 1.6s forwards;transition:opacity .4s var(--ease)} .gr-scroll span{font-size:7.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(212,175,80,.5)} .gr-scroll-bar{width:1px;height:36px;background:rgba(212,175,80,.15);position:relative;overflow:hidden;border-radius:1px} .gr-scroll-run{position:absolute;top:-100%;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent,var(--g));animation:grScrollRun 2s ease-in-out 2s infinite} @keyframes grScrollIn{to{opacity:.8}} @keyframes grScrollRun{0%{top:-100%}100%{top:120%}} /* ── Eyebrow diamond ──────────────────────────────────────────── */ .eyebrow{display:flex;align-items:center;gap:9px} .eyebrow::before{content:'';display:block;width:5px;height:5px;background:var(--g);transform:rotate(0deg) scale(0);opacity:0;flex-shrink:0;transition:opacity .35s .15s,transform .4s .15s var(--ease)} .eyebrow.gr-in::before{opacity:1;transform:rotate(45deg) scale(1)} /* ── City card gold tint on hover ─────────────────────────────── */ .city-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(184,149,42,0),rgba(184,149,42,.09));opacity:0;transition:opacity .55s var(--ease);z-index:3;pointer-events:none} .city-card:hover::after{opacity:1} /* ── Props hover ──────────────────────────────────────────────── */ .prop{transition:transform .35s var(--ease)} .prop:hover{transform:translateX(5px)} .prop-no{transition:color .3s,text-shadow .3s} .prop:hover .prop-no{color:var(--g2);text-shadow:0 0 22px rgba(212,175,80,.28)} /* ── FAQ smooth expand ────────────────────────────────────────── */ .faq-a{overflow:hidden} /* ── Custom cursor (desktop) ─────────────────────────────────── */ .gr-cr,.gr-ring{position:fixed;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);will-change:left,top} .gr-cr{width:7px;height:7px;background:var(--g);z-index:9999;transition:transform .15s var(--ease),opacity .2s} .gr-ring{width:28px;height:28px;border:1px solid rgba(184,149,42,.38);z-index:9998} .gr-cr.hov{transform:translate(-50%,-50%) scale(2.4);opacity:.4} .gr-ring.hov{border-color:rgba(184,149,42,.9);transform:translate(-50%,-50%) scale(.6)} @media(pointer:coarse){.gr-cr,.gr-ring{display:none}} /* ── Scroll progress bar ─────────────────────────────────────── */ #gr-spb{position:fixed;top:0;left:0;height:1.5px;background:linear-gradient(90deg,var(--g),var(--g2));z-index:601;width:0;pointer-events:none;transition:width .07s linear} /* ── Heading em shimmer ──────────────────────────────────────── */ @keyframes grShimmer{0%,100%{background-position:200% center}60%{background-position:-50% center}} .hl em{background:linear-gradient(90deg,var(--g) 20%,#f5e49e 50%,var(--g) 80%);background-size:250% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:grShimmer 5.5s ease-in-out infinite} /* ── Service card shine sweep ────────────────────────────────── */ .svc-card::before{content:'';position:absolute;top:0;left:-85%;width:48%;height:100%;background:linear-gradient(90deg,transparent,rgba(184,149,42,.07),transparent);transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none} .svc-card:hover::before{left:165%} /* ── Venue hover accent ──────────────────────────────────────── */ .venue{transition:background .2s,box-shadow .2s} .venue:hover{background:rgba(184,149,42,.04);box-shadow:inset 0 0 0 1px rgba(184,149,42,.12)} .venue:hover .v-nm{color:var(--g2)} /* ── Button ripple ───────────────────────────────────────────── */ @keyframes grRipple{to{transform:scale(5);opacity:0}} .btn .gr-rpl{position:absolute;border-radius:50%;width:50px;height:50px;margin:-25px 0 0 -25px;background:rgba(184,149,42,.2);animation:grRipple .55s ease-out forwards;pointer-events:none} /* ── Stat number pulse on load ───────────────────────────────── */ @keyframes grStatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .stat-n.counted{animation:grStatIn .4s var(--ease) forwards} /* ════════════════════════════════════════════════════════════ HOME V2 — LUXURY MOTION PACK ════════════════════════════════════════════════════════════ */ /* Accesibilidad: respetar reduced motion */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html{scroll-behavior:auto} } /* ── Hero: reveal de líneas del titular ─────────────────────── */ .hx-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .hx-inner{display:block;transform:translateY(112%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)} .hx-inner.in{transform:translateY(0)} /* ── Hero: velo dorado inferior + viñeta ────────────────────── */ .hero-ov{background: radial-gradient(ellipse 120% 90% at 50% 110%,rgba(184,149,42,.10),transparent 55%), linear-gradient(135deg,rgba(9,8,7,.55) 0%,rgba(9,8,7,.2) 52%,rgba(9,8,7,.45) 100%)} /* ── Hero: badge con barrido de luz ─────────────────────────── */ .hero-badge{position:relative;overflow:hidden} .hero-badge::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(237,217,122,.14),transparent);transform:skewX(-20deg);animation:badgeSweep 4.5s ease-in-out 2.2s infinite} @keyframes badgeSweep{0%{left:-80%}42%,100%{left:160%}} /* ── Hero: línea dorada que se dibuja bajo las stats ────────── */ .hero-stats{position:relative;border-top:none} .hero-stats::before{content:'';position:absolute;top:0;left:0;height:1px;width:100%;background:linear-gradient(90deg,var(--g2),rgba(184,149,42,.08));transform:scaleX(0);transform-origin:left;animation:statLine 1.4s var(--ease) 1.1s forwards} @keyframes statLine{to{transform:scaleX(1)}} .stat-n.counted{text-shadow:0 0 28px rgba(212,175,80,.35)} .hero-stats>div{position:relative;transition:transform .4s var(--ease)} .hero-stats>div:hover{transform:translateY(-3px)} .hero-stats>div:hover .stat-n{color:var(--g3)} .stat-n{transition:color .3s} /* ── Hero: botón WhatsApp directo ───────────────────────────── */ .btn.bwa{background:rgba(37,211,102,.12);color:#4be085;border:1px solid rgba(37,211,102,.35)} .btn.bwa:hover{background:#25D366;color:#fff;border-color:#25D366;transform:translateY(-2px);box-shadow:0 12px 34px rgba(37,211,102,.25)} /* This is the homepage hero's 3rd CTA (Book / Destinations / WhatsApp) on all 10 language homepages — on mobile it visually collided with the floating WhatsApp button below it (same action, two competing controls) and made the hero's very first choice 3 buttons deep. The floating WhatsApp widget already covers this action on every page, so it's redundant here specifically on mobile; desktop keeps all 3. */ @media(max-width:600px){.btn.bwa{display:none}} /* ── Marquee: fundido en los bordes + separador diamante ────── */ .mq-wrap{position:relative} .mq-wrap::before,.mq-wrap::after{content:'';position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none} .mq-wrap::before{left:0;background:linear-gradient(to right,var(--k2),transparent)} .mq-wrap::after{right:0;background:linear-gradient(to left,var(--k2),transparent)} .mq-sep{width:4px;height:4px;transform:rotate(45deg);border-radius:0;background:rgba(212,175,80,.4)} .mq-it span{transition:color .25s,text-shadow .25s} .mq-it:hover span{text-shadow:0 0 18px rgba(212,175,80,.4)} /* ── Service cards: marco dorado + tilt 3D ──────────────────── */ .svc-grid{perspective:1200px} .svc-card{transform-style:preserve-3d;will-change:transform;transition:background .3s,transform .5s var(--ease)} .svc-card::after{content:'';position:absolute;inset:8px;border:1px solid rgba(212,175,80,0);transition:border-color .4s,inset .4s var(--ease);pointer-events:none} .svc-card:hover::after{border-color:rgba(212,175,80,.22);inset:5px} .svc-card .sc-ico,.svc-card .sc-nm,.svc-card .sc-ds{transform:translateZ(24px)} /* ── City cards: caption flotante + brillo de borde ─────────── */ .city-body>div{transform:translateY(0);transition:transform .45s var(--ease)} .city-card:hover .city-body>div{transform:translateY(-5px)} .city-card{isolation:isolate} .city-card::before{content:'';position:absolute;inset:0;border:1px solid rgba(212,175,80,0);z-index:4;transition:border-color .45s,inset .45s var(--ease);pointer-events:none} .city-card:hover::before{border-color:rgba(212,175,80,.3);inset:7px} .city-img{filter:saturate(.92)} .city-card:hover .city-img{filter:saturate(1.05)} /* ── Props: número que se enciende + línea lateral ──────────── */ .prop{position:relative;overflow:hidden} .prop::before{content:'';position:absolute;left:0;top:0;width:2px;height:0;background:linear-gradient(to bottom,var(--g2),transparent);transition:height .5s var(--ease)} .prop:hover::before{height:100%} /* ── Blog cards: meta dorada animada ────────────────────────── */ .bc-more{position:relative;transition:letter-spacing .3s var(--ease)} .blog-card:hover .bc-more{letter-spacing:3.5px;color:var(--g3)} .bc-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(9,8,7,.35),transparent 50%);opacity:0;transition:opacity .4s} .blog-card:hover .bc-img::after{opacity:1} /* ── CTA band: oro vivo animado + barrido de luz ────────────── */ .cta-band{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--g) 0%,var(--g2) 40%,#e3c568 55%,var(--g2) 70%,var(--g) 100%);background-size:220% auto;animation:ctaGold 9s ease-in-out infinite} @keyframes ctaGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .cta-band::before{content:'';position:absolute;top:0;left:-40%;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,250,230,.22),transparent);transform:skewX(-22deg);animation:ctaSheen 6.5s ease-in-out 1.5s infinite;pointer-events:none} @keyframes ctaSheen{0%{left:-40%}45%,100%{left:140%}} /* ── FAQ: borde vivo al abrir ───────────────────────────────── */ .faq-item{position:relative} .faq-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--g2);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)} .faq-item[open]::before{transform:scaleY(1)} /* ── Botones magnéticos (JS aplica transform) ───────────────── */ .btn,.nav-cta{will-change:transform} /* ── WhatsApp float: etiqueta visible + brillo ──────────────── */ .wa-tip{opacity:1;transform:none;animation:waTipHide .4s ease 6s forwards} @keyframes waTipHide{to{opacity:0;transform:translateX(7px)}} .wa-float:hover .wa-tip{animation:none;opacity:1;transform:none} /* On mobile this auto-expanding label was the direct cause of the .btt collision above (it temporarily makes .wa-float ~75px tall instead of ~50px) and, on a small screen, an unprompted expanding text bubble reads as pushy rather than helpful — same reasoning already applied to Geri's tip (geri.css hides it on mobile too). */ @media(max-width:600px){.wa-tip{display:none}} /* ── Reveal genérico un poco más elegante ───────────────────── */ .sec-hdr .hl,.sec-split .hl{will-change:transform} /* ════════════════════════════════════════════════════════════ HOME V3 — HERO EVENTS WIDGET, LEAD/GEO POPUPS, LANG BANNER ════════════════════════════════════════════════════════════ */ /* ── Hero: two-column grid (text + live events) ─────────────── */ .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .82fr;gap:56px;align-items:center;padding:80px 0 68px} .hero-grid .hero-cnt{position:static;padding:0} @media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:34px;padding:120px 0 56px}} /* ── Hero events widget ──────────────────────────────────────── */ .hero-events{background:rgba(17,16,9,.58);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(184,149,42,.24);padding:22px;position:relative;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45)} .hero-events::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--g2),transparent)} .he-hdr{display:flex;align-items:center;gap:9px;margin-bottom:16px} .he-dot{width:7px;height:7px;border-radius:50%;background:#ff5c5c;flex-shrink:0;animation:dotp 2s ease-in-out infinite} .he-lbl{font-size:10px;font-weight:600;letter-spacing:2.3px;text-transform:uppercase;color:var(--g2)} .he-list{display:flex;flex-direction:column;gap:1px} .he-item{display:flex;align-items:center;gap:14px;padding:10px 8px;text-decoration:none;color:inherit;border-radius:2px;transition:background .25s,transform .3s var(--ease),box-shadow .3s var(--ease)} .he-item:hover{background:rgba(184,149,42,.08);transform:translateX(3px);box-shadow:0 12px 30px rgba(0,0,0,.35)} .he-item:hover .he-arr{transform:translateX(3px);opacity:1} .he-item:hover .he-title{color:var(--g2)} .he-item:hover .he-img img{transform:scale(1.1)} .he-img{width:60px;height:60px;overflow:hidden;flex-shrink:0;border:1px solid rgba(184,149,42,.18);box-shadow:0 8px 20px rgba(0,0,0,.35)} .he-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)} .he-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .he-venue{font-size:8.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--g2);opacity:.85} .he-title{font-family:var(--fd);font-size:14.5px;font-weight:400;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s} .he-time{font-size:10px;color:var(--dimmer)} .he-arr{font-size:13px;color:var(--g2);opacity:.45;transition:all .25s;flex-shrink:0} .he-more{display:block;margin-top:14px;padding-top:14px;border-top:1px solid rgba(184,149,42,.14);font-size:9.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--g2);text-decoration:none;text-align:center;transition:letter-spacing .25s} .he-more:hover{letter-spacing:3px} /* ── Modal system (shared: lead popup + geo popup) ───────────── */ .gr-modal{position:fixed;inset:0;z-index:9970;opacity:0;visibility:hidden;transition:opacity .35s var(--ease);display:flex;align-items:center;justify-content:center;padding:20px} .gr-modal.show{opacity:1;visibility:visible} .gr-modal-overlay{position:absolute;inset:0;background:rgba(5,4,3,.78);backdrop-filter:blur(4px)} .gr-modal-box{position:relative;width:100%;max-width:440px;background:linear-gradient(165deg,#141209,#0c0b08);border:1px solid rgba(184,149,42,.28);padding:38px 34px;transform:translateY(24px) scale(.97);transition:transform .4s var(--ease);box-shadow:0 40px 100px rgba(0,0,0,.6)} .gr-modal.show .gr-modal-box{transform:translateY(0) scale(1)} .gr-modal-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--g2),transparent)} .gr-modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;background:transparent;border:1px solid rgba(184,149,42,.2);color:var(--dimmer);cursor:pointer;font-size:12px;transition:all .2s} .gr-modal-close:hover{border-color:var(--g2);color:var(--g2);transform:rotate(90deg)} .gr-modal-badge{font-size:9.5px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--g2);margin-bottom:14px} .gr-modal-title{font-family:var(--fd);font-size:clamp(24px,3vw,30px);font-weight:300;line-height:1.15;color:var(--c);margin-bottom:12px} .gr-modal-sub{font-size:13px;line-height:1.75;color:var(--dimmer);margin-bottom:24px} .gr-modal-form{display:flex;flex-direction:column} .gr-modal-form .finp{margin-bottom:11px} .gr-modal-err{color:#ff7a7a;font-size:11.5px;margin-top:8px;display:none} .gr-modal-err.show{display:block} .gr-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0} .gr-modal-ok{display:none;text-align:center;padding:14px 0} .gr-modal-ok.show{display:block} .gr-modal-ok-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(184,149,42,.12);border:1px solid var(--g2);color:var(--g2);font-size:20px;margin-bottom:14px} .gr-modal-ok p{font-size:14px;color:var(--c)} .gr-modal-wa{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding:12px;font-size:11.5px;font-weight:500;letter-spacing:1px;color:#4be085;text-decoration:none;border:1px solid rgba(37,211,102,.28);transition:all .25s} .gr-modal-wa:hover{background:rgba(37,211,102,.1);border-color:#25D366} /* ── Geo popup: city link list ───────────────────────────────── */ .gr-geo-links{display:flex;flex-direction:column;gap:2px;margin-top:6px} .gr-geo-link{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(184,149,42,.05);border:1px solid rgba(184,149,42,.12);color:var(--c);text-decoration:none;font-family:var(--fd);font-size:16px;font-weight:300;transition:all .25s} .gr-geo-link:hover{background:rgba(184,149,42,.12);border-color:rgba(184,149,42,.32);padding-left:20px} .gr-geo-link span{color:var(--g2);font-family:var(--fs);font-size:13px;transition:transform .25s} .gr-geo-link:hover span{transform:translateX(4px)} /* ── Language suggestion banner ──────────────────────────────── */ .gr-lang-banner{position:fixed;left:50%;bottom:-100px;transform:translateX(-50%);z-index:9960;display:flex;align-items:center;gap:18px;background:#141209;border:1px solid rgba(184,149,42,.28);padding:14px 18px;box-shadow:0 20px 50px rgba(0,0,0,.5);transition:bottom .5s var(--ease);max-width:calc(100% - 32px)} .gr-lang-banner.show{bottom:24px} .glb-txt{font-size:12.5px;color:var(--c);white-space:nowrap} .glb-btns{display:flex;align-items:center;gap:10px;flex-shrink:0} .glb-go{background:var(--g);color:var(--k);text-decoration:none;font-size:10.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:8px 16px;white-space:nowrap;transition:background .2s} .glb-go:hover{background:var(--g2)} .glb-x{background:transparent;border:none;color:var(--dimmer);cursor:pointer;font-size:12px;padding:6px;flex-shrink:0} .glb-x:hover{color:var(--c)} @media(max-width:600px){.gr-lang-banner{flex-wrap:wrap;left:16px;right:16px;transform:none;max-width:none}.gr-lang-banner.show{bottom:16px}.glb-txt{white-space:normal;flex:1 1 100%}} /* ── Modal responsive ─────────────────────────────────────────── */ @media(max-width:480px){.gr-modal-box{padding:30px 24px}} /* ════════════════════════════════════════════════════════════ TRIP PLANNER — /planifica-tu-viaje.php ════════════════════════════════════════════════════════════ */ .trip-app{max-width:920px;margin:0 auto} .trip-intro{margin-bottom:52px} .trip-intro .hl{margin-top:10px} .trip-intro .hl em{color:var(--g2);font-style:italic} .trip-step{margin-bottom:64px} .trip-step-hdr{display:flex;align-items:center;gap:16px;margin-bottom:28px} .trip-step-num{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(184,149,42,.35);color:var(--g2);font-family:var(--fd);font-size:16px;flex-shrink:0} /* City picker */ .trip-city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .trip-city-card{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid rgba(184,149,42,.12);cursor:pointer;padding:0;background:none;display:block} .trip-city-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);filter:saturate(.85) brightness(.8)} .trip-city-card:hover img{transform:scale(1.06)} .tcc-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,8,7,.85),rgba(9,8,7,.15));transition:background .3s} .tcc-nm{position:absolute;bottom:12px;left:12px;right:12px;font-family:var(--fd);font-size:15px;font-weight:400;color:var(--c);z-index:2} .tcc-check{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--g);color:var(--k);display:flex;align-items:center;justify-content:center;font-size:11px;opacity:0;transform:scale(.5);transition:all .25s var(--ease);z-index:2} .trip-city-card.sel{border-color:var(--g2)} .trip-city-card.sel .tcc-ov{background:linear-gradient(to top,rgba(184,149,42,.55),rgba(9,8,7,.15))} .trip-city-card.sel .tcc-check{opacity:1;transform:scale(1)} /* Sliders */ .trip-sliders{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .trip-cap-note{display:block;font-size:11px;color:var(--dimmer);font-style:italic;margin-top:6px} .trip-slider-box{background:var(--k2);border:1px solid rgba(184,149,42,.1);padding:26px 24px} .trip-slider-lbl{display:block;font-size:9.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--g2);margin-bottom:10px} .trip-slider-val{font-family:var(--fd);font-size:32px;font-weight:300;color:var(--c);margin-bottom:16px} .trip-range{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:rgba(184,149,42,.2);outline:none;cursor:pointer} .trip-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--g);border:2px solid var(--k);box-shadow:0 0 0 1px rgba(184,149,42,.4);transition:transform .2s} .trip-range::-webkit-slider-thumb:hover{transform:scale(1.15)} .trip-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--g);border:2px solid var(--k);box-shadow:0 0 0 1px rgba(184,149,42,.4);cursor:pointer} .trip-slider-minmax{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--dimmer)} /* Result */ .trip-result{border-top:1px solid rgba(184,149,42,.12);padding-top:56px} .trip-tier-badge{display:inline-flex;align-items:center;background:rgba(184,149,42,.1);border:1px solid rgba(184,149,42,.3);color:var(--g2);font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:7px 15px;margin-bottom:16px} .trip-result .hm em{color:var(--g2);font-style:italic} /* Accommodation card — full-bleed photo with a gradient scrim behind the text, like a miniature pg-hero. More elegant than a flat icon+text row. */ .trip-stay-card{position:relative;overflow:hidden;min-height:200px;display:flex;align-items:flex-end;border:1px solid rgba(184,149,42,.18);margin-bottom:32px;box-shadow:0 20px 50px rgba(0,0,0,.35)} .tsc-img{position:absolute;inset:0} .tsc-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)} .tsc-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,8,7,.92) 0%,rgba(9,8,7,.55) 45%,rgba(9,8,7,.15) 100%)} .tsc-body{position:relative;z-index:2;padding:24px 26px} .tsc-lbl{display:block;font-size:9px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--g2);margin-bottom:6px} .tsc-nm{display:block;font-family:var(--fd);font-size:clamp(19px,2.4vw,24px);font-weight:400;color:#fff;margin-bottom:5px;line-height:1.25} .tsc-price{display:block;font-size:12px;color:rgba(244,240,230,.82);letter-spacing:.3px} .trip-days{display:flex;flex-direction:column;gap:2px;margin-bottom:32px} /* Day card — content left, photo with gradient blend on the right (desktop) */ .trip-day-card{display:flex;background:var(--k2);border:1px solid rgba(184,149,42,.08);overflow:hidden;transition:border-color .3s} .trip-day-card:hover{border-color:rgba(184,149,42,.2)} .tdc-body{flex:1;min-width:0;padding:22px 24px} .tdc-num{font-family:var(--fd);font-size:14px;color:var(--g2);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px} .tdc-row{display:flex;align-items:flex-start;gap:10px;padding:5px 0;font-size:13px;color:var(--dim);line-height:1.6} .tdc-ico{flex-shrink:0;font-size:14px;width:20px;text-align:center} .tdc-row strong{color:var(--c);font-weight:500;font-family:var(--fd);font-size:14px} .tdc-people{font-size:11px;color:var(--dimmer)} .tdc-transport{border-top:1px solid rgba(184,149,42,.06);margin-top:6px;padding-top:11px;color:var(--dimmer);font-size:12px} .tdc-img{position:relative;width:220px;flex-shrink:0;overflow:hidden} .tdc-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)} .tdc-img-ov{position:absolute;inset:0;background:linear-gradient(to right,var(--k2) 0%,rgba(17,16,9,.35) 30%,transparent 70%)} @media(max-width:700px){ .trip-day-card{flex-direction:column} .tdc-img{width:100%;height:150px;order:-1} .tdc-img-ov{background:linear-gradient(to bottom,transparent 40%,var(--k2) 100%)} } .trip-budget-bar{margin-bottom:40px} .trip-budget-bar-track{height:8px;background:rgba(184,149,42,.1);border-radius:4px;overflow:hidden} .trip-budget-bar-fill{height:100%;background:linear-gradient(90deg,var(--g),var(--g2));border-radius:4px;width:0;transition:width .5s var(--ease)} .trip-budget-bar-fill.over{background:linear-gradient(90deg,#c25a3a,#e0793f)} .trip-budget-bar-labels{display:flex;justify-content:space-between;margin-top:9px;font-size:12px;color:var(--dimmer)} .trip-budget-bar-labels strong{color:var(--c);font-weight:500} .trip-budget-note{font-size:11px;color:var(--dimmer);margin-top:10px;font-style:italic} .trip-cta-box{text-align:center;background:var(--k2);border:1px solid rgba(184,149,42,.15);padding:40px 30px} .trip-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} @media(max-width:900px){ .trip-city-grid{grid-template-columns:repeat(3,1fr)} .trip-sliders{grid-template-columns:1fr} } @media(max-width:600px){ .trip-city-grid{grid-template-columns:repeat(2,1fr)} } /* ════════════════════════════════════════════════════════════ TRIP PLANNER PROMO — used on city pages ════════════════════════════════════════════════════════════ */ .trip-promo-band{background:var(--k2);border-top:1px solid rgba(184,149,42,.1);border-bottom:1px solid rgba(184,149,42,.1);padding:36px 0} .trip-promo-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap} .trip-promo-txt .hm{margin:8px 0 6px;color:var(--c)} .trip-promo-txt .body-txt{max-width:520px} .trip-promo-hero{position:relative;min-height:340px;display:flex;align-items:center;overflow:hidden} .trip-promo-hero-img{position:absolute;inset:0} .trip-promo-hero-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)} .trip-promo-hero-ov{position:absolute;inset:0;background:linear-gradient(115deg,rgba(9,8,7,.94) 20%,rgba(9,8,7,.62) 55%,rgba(9,8,7,.3) 100%)} .trip-promo-hero-cnt{position:relative;z-index:2;padding:56px 0} .trip-promo-hero-cnt .tag{color:var(--g2)} .trip-promo-hero-cnt .hl{margin:12px 0 14px;max-width:600px} .trip-promo-hero-cnt .hl em{color:var(--g2);font-style:italic} .trip-promo-hero-cnt .body-txt{max-width:460px;margin-bottom:24px} @media(max-width:700px){ .trip-promo-in{flex-direction:column;align-items:flex-start} .trip-promo-hero{min-height:300px} } /* ════════════════════════════════════════════════════════════ LEAD POPUP → desktop sliding panel (left, above tickets FAB) + mobile compact notice that opens the modal on tap ════════════════════════════════════════════════════════════ */ /* Desktop (≥769px): not a centered modal — a panel anchored bottom-left, sitting above the tickets floating button (24px + 56px + gap ≈ 96px). */ @media(min-width:769px){ #grLeadModal{ inset:auto; left:24px; bottom:96px; right:auto; top:auto; width:360px; height:auto; display:block; padding:0; pointer-events:none; /* only the box itself is interactive while hidden/showing */ } #grLeadModal.show{ pointer-events:auto; } #grLeadModal .gr-modal-overlay{ display:none; } /* no page-dimming backdrop for a panel */ #grLeadModal .gr-modal-box{ width:100%; max-width:100%; margin:0; transform:translateY(28px); transition:transform .5s var(--ease), opacity .35s var(--ease); box-shadow:0 24px 60px rgba(0,0,0,.55); } #grLeadModal.show .gr-modal-box{ transform:translateY(0); } .gr-lead-notice, .gr-geo-notice{ display:none !important; } /* desktop shows panels/modals directly, no notice step */ } /* Mobile / tablet (≤768px): compact, auto-dismissing (10s) tappable notice instead of an automatic popup. Lead and geo notices reuse the same slot — they never overlap in time (geo fires ~9s in and self-hides by ~19s, lead fires at 30s). */ .gr-lead-notice, .gr-geo-notice{ position:fixed; left:16px; bottom:-100px; z-index:9965; display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,#141209,#0c0b08); border:1px solid rgba(184,149,42,.32); padding:12px 16px; box-shadow:0 16px 40px rgba(0,0,0,.5); cursor:pointer; transition:bottom .5s var(--ease); max-width:calc(100% - 96px); /* clears the WhatsApp FAB on the right */ font-family:var(--fs); } .gr-lead-notice.show, .gr-geo-notice.show{ bottom:88px; } /* clears the tickets FAB (bottom:16px, 56px tall on mobile) */ .gr-lead-notice:active, .gr-geo-notice:active{ transform:scale(.97) } .gln-ico, .ggn-ico{ font-size:16px; flex-shrink:0 } .gln-txt, .ggn-txt{ font-size:12px; color:var(--c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } /* ════════════════════════════════════════════════════════════ GERI CTA — inline "Hablar con el Agente Virtual" band on city and event pages (includes/geri_cta.php). Replaces the sitewide floating launcher with an explicit, contextual invitation. ════════════════════════════════════════════════════════════ */ .geri-cta-band{ padding:56px 0; background:var(--k2); border-top:1px solid rgba(184,149,42,.1); border-bottom:1px solid rgba(184,149,42,.1); } .geri-cta-box{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; background:var(--k); border:1px solid rgba(184,149,42,.18); padding:36px 40px; } .geri-cta-av{ flex-shrink:0; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(184,149,42,.14),rgba(184,149,42,.05)); border:1px solid rgba(184,149,42,.3); color:var(--g2); } .geri-cta-txt{ flex:1 1 340px; min-width:0; } .geri-cta-title{ font-family:var(--fd); font-size:22px; font-weight:400; font-style:italic; color:var(--c); margin:6px 0 8px; } .geri-cta-box .body-txt{ max-width:560px; margin:0; } .geri-cta-btn{ flex-shrink:0; white-space:nowrap; } @media(max-width:700px){ .geri-cta-box{ flex-direction:column; align-items:flex-start; text-align:left; padding:28px 24px; } .geri-cta-btn{ width:100%; text-align:center; } } [dir="rtl"] .geri-cta-box{ text-align:right; } [dir="rtl"] .geri-cta-btn{ text-align:center; } /* ════════════════════════════════════════════════════════════ MOBILE CAROUSELS — Servicios / Destinos / Blog These three shared grids (.svc-grid, .city-grid, .blog-grid — used across all 10 homepages, ciudades.php/cities.php and curiosidades.php/curiosities.php) used to collapse to a single stacked column on mobile: 8 service cards, 7 city cards or 3 blog cards all dumped one under another, ~2000px of scroll before the visitor reaches anything else. That's the "agobia" pattern — everything at once, nothing guiding the eye. Below 768px they become horizontal swipe carousels instead: one card in focus, the next peeking at the right edge as an obvious invitation to keep browsing. Pure CSS scroll-snap — native momentum + snap, no JS, works with the browser's own touch handling (buttery smooth, no jank). Vertical space used drops to a single card's height per section. ════════════════════════════════════════════════════════════ */ @media(max-width:768px){ .svc-grid,.city-grid,.blog-grid{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:12px; margin:0 -18px; /* bleed past .W's side padding so cards can reach the screen edge */ padding:2px 18px 8px; border:none; } .svc-grid::-webkit-scrollbar,.city-grid::-webkit-scrollbar,.blog-grid::-webkit-scrollbar{ display:none; height:0; } .svc-grid>.svc-card,.city-grid>.city-card,.blog-grid>.blog-card{ scroll-snap-align:start; scroll-snap-stop:always; flex:0 0 80%; min-width:0; } /* Each card now stands alone (no longer a fragment of an edge-to-edge grid), so it needs its own visible border + rounded corners to read as a distinct, swipeable "card". */ .svc-card{ border:1px solid rgba(184,149,42,.16); border-radius:6px; background:var(--k2); padding:30px 22px; } .city-card, .city-card.w2{ aspect-ratio:3/4; border-radius:6px; border:1px solid rgba(184,149,42,.16); flex-basis:80%; } .city-card.w2 .city-nm{ font-size:27px; } /* was 38px for the desktop double-width Londres card — no longer double-width here */ .blog-card{ flex-basis:80%; } }