/* ============================================================ MACA TOURS & ADVENTURES — design tokens ============================================================ */ :root{ --ink: #0d1613; --ink-soft: #142420; --sand: #f4efdd; --sand-dim: #e8e0c8; --teal: #0fa9a6; --teal-deep: #0a7b79; --lime: #c6e62f; --coral: #ff6a45; --white: #ffffff; --display: "Bricolage Grotesque", "Inter", sans-serif; --body: "Inter", -apple-system, sans-serif; --max: 1240px; --edge: clamp(20px, 5vw, 64px); } *{ box-sizing:border-box; } body.modal-open{ overflow:hidden; } html{ scroll-behavior:smooth; scroll-padding-top:88px; } body{ margin:0; background:var(--sand); color:var(--ink); font-family:var(--body); line-height:1.5; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; } h1,h2,h3,h4{ font-family:var(--display); margin:0; font-weight:600; letter-spacing:-0.01em; } p{ margin:0; } /* Refined brand typography: clear hierarchy, generous rhythm, and responsive sizing. */ body{ font-size:clamp(1rem, 0.96rem + 0.15vw, 1.08rem); } h1{ font-size:clamp(2.8rem, 6vw, 5.8rem); line-height:.98; letter-spacing:-.035em; font-weight:700; } h2{ font-size:clamp(2rem, 4vw, 3.65rem); line-height:1.04; letter-spacing:-.03em; font-weight:700; } h3{ font-size:clamp(1.25rem, 2vw, 1.75rem); line-height:1.12; } p{ line-height:1.65; } .section-head p,.intro__body p,.feature p,.transfer-note li{ max-width:68ch; } .container{ max-width:var(--max); margin:0 auto; padding:0 var(--edge); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } } :focus-visible{ outline:3px solid var(--lime); outline-offset:3px; } /* ============================================================ NAV ============================================================ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:18px var(--edge); transition:background .35s ease, padding .35s ease, box-shadow .35s ease; } .nav.is-scrolled{ background:rgba(13,22,19,0.92); backdrop-filter:blur(10px); padding:12px var(--edge); box-shadow:0 8px 30px rgba(0,0,0,.25); } .nav__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; } .nav__brand img{ height:58px; width:58px; border-radius:12px; object-fit:cover; transition:height .35s ease,width .35s ease; } .nav.is-scrolled .nav__brand img{ height:46px; width:46px; } .nav__tools{display:flex;align-items:center;gap:12px;} .language-picker{position:relative;z-index:50}.language-toggle{display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.45);background:rgba(13,22,19,.42);color:var(--white);border-radius:999px;padding:9px 12px;font:700 .78rem var(--body);cursor:pointer;min-width:52px;justify-content:center;transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .language-toggle:hover,.language-picker.is-open .language-toggle{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.8);transform:translateY(-1px);box-shadow:0 8px 25px rgba(0,0,0,.18)} .language-flag{font-size:1.22rem;line-height:1}.language-chevron{font-size:.9rem;opacity:.8;line-height:1;transform:translateY(-1px)} .language-menu{position:absolute;right:0;top:calc(100% + 10px);width:168px;padding:7px;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(16,24,21,.9);box-shadow:0 18px 45px rgba(0,0,0,.28);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-7px) scale(.98);transform-origin:top right;transition:opacity .2s ease,transform .2s ease,visibility .2s ease} .language-picker.is-open .language-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .language-menu button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--white);padding:10px 11px;border-radius:12px;font:600 .82rem var(--body);cursor:pointer;text-align:left;transition:background .18s ease,transform .18s ease}.language-menu button span{font-size:1.2rem}.language-menu button:hover,.language-menu button.is-active{background:rgba(255,255,255,.12);transform:translateX(2px)} .nav__brand-text{ font-family:var(--display); font-weight:700; color:var(--white); font-size:1.05rem; line-height:1.1; } .nav__brand-text span{ display:block; font-family:var(--body); font-weight:400; font-size:.68rem; color:var(--lime); letter-spacing:.04em; } .nav__links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; } .nav__links a{ text-decoration:none; color:var(--white); font-size:.92rem; font-weight:500; opacity:.85; transition:opacity .2s ease; padding-bottom:2px; border-bottom:1px solid transparent; } .nav__links a:hover{ opacity:1; border-color:var(--lime); } .nav__cta{ display:inline-flex; align-items:center; gap:8px; background:var(--lime); color:var(--ink); font-weight:700; font-size:.88rem; padding:10px 18px; border-radius:999px; text-decoration:none; transition:transform .2s ease, background .2s ease; white-space:nowrap; } .nav__cta:hover{ background:var(--white); transform:translateY(-1px); } .nav__burger{ display:none; cursor:pointer; } @media (max-width: 860px){ body.menu-open{overflow:hidden} .nav__links{ position:fixed; inset:0 0 0 auto; width:min(88vw,390px); height:100vh; background: radial-gradient(circle at 18% 18%, rgba(198,230,47,.15), transparent 28%), radial-gradient(circle at 88% 72%, rgba(15,169,166,.20), transparent 34%), linear-gradient(145deg,rgba(9,17,14,.98),rgba(15,32,27,.97)); flex-direction:column; justify-content:center; gap:12px; padding:96px 28px 42px; transform:translateX(110%); transition:transform .48s cubic-bezier(.22,1,.36,1); box-shadow:-24px 0 70px rgba(0,0,0,.38); overflow:hidden; isolation:isolate; } .nav__links::before{content:"MACA • TOURS & ADVENTURES";position:absolute;top:42px;left:28px;color:rgba(255,255,255,.48);font:700 .68rem var(--body);letter-spacing:.18em} .nav__links::after{content:"";position:absolute;width:180px;height:180px;right:-85px;top:-75px;border:1px solid rgba(198,230,47,.28);border-radius:50%;box-shadow:0 0 0 28px rgba(198,230,47,.04),0 0 0 56px rgba(198,230,47,.025);z-index:-1} .nav__links.is-open{ transform:translateX(0); } .nav__links li{width:100%;opacity:0;transform:translateX(24px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)} .nav__links.is-open li{opacity:1;transform:none} .nav__links.is-open li:nth-child(1){transition-delay:.04s}.nav__links.is-open li:nth-child(2){transition-delay:.08s}.nav__links.is-open li:nth-child(3){transition-delay:.12s}.nav__links.is-open li:nth-child(4){transition-delay:.16s}.nav__links.is-open li:nth-child(5){transition-delay:.20s}.nav__links.is-open li:nth-child(6){transition-delay:.24s}.nav__links.is-open li:nth-child(7){transition-delay:.28s} .nav__links a{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 16px;font-size:1.08rem;font-weight:700;letter-spacing:-.01em;border:1px solid rgba(255,255,255,.10);border-radius:17px;background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);opacity:1;transition:transform .25s ease,background .25s ease,border-color .25s ease} .nav__links a::after{content:"↗";color:var(--lime);font-size:1.05rem;opacity:.8;transition:transform .25s ease} .nav__links a:hover{background:rgba(255,255,255,.10);border-color:rgba(198,230,47,.35);transform:translateX(4px)} .nav__links a:hover::after{transform:translate(3px,-3px)} .nav__burger{display:flex;position:relative;z-index:120;width:48px;height:48px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid rgba(255,255,255,.24);border-radius:16px;background:rgba(255,255,255,.07);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:0} .nav__burger span{display:block;width:20px;height:2px;border-radius:4px;background:#fff;transition:transform .3s ease,opacity .2s ease} .nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__burger.is-open span:nth-child(2){opacity:0} .nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav__cta{display:none} } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; height:100svh; min-height:560px; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); } .hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kenburns 22s ease-in-out infinite alternate; } @keyframes kenburns{ 0%{ transform:scale(1) translate(0,0); } 100%{ transform:scale(1.12) translate(-1.5%,-1%); } } .hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,22,19,.15) 0%, rgba(13,22,19,.15) 40%, rgba(13,22,19,.88) 92%), linear-gradient(90deg, rgba(13,22,19,.55) 0%, rgba(13,22,19,0) 55%); } .hero__content{ position:relative; z-index:2; color:var(--white); padding:0 var(--edge) 72px; max-width:720px; } .hero__eyebrow{ display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--lime); font-weight:600; margin-bottom:18px; } .hero__eyebrow::before{ content:""; width:26px; height:2px; background:var(--lime); display:inline-block; } .hero h1{ font-size:clamp(2.6rem, 6.5vw, 5rem); color:var(--white); line-height:1.02; } .hero__lede{ margin-top:20px; font-size:clamp(1.02rem,1.6vw,1.2rem); color:rgba(255,255,255,.86); max-width:46ch; } .hero__actions{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:999px; text-decoration:none; font-weight:700; font-size:.95rem; cursor:pointer; border:1px solid transparent; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .btn:hover{ transform:translateY(-2px); } .btn--primary{ background:var(--coral); color:var(--white); } .btn--primary:hover{ background:#ff7f60; } .btn--ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); } .btn--ghost:hover{ border-color:var(--white); background:rgba(255,255,255,.08); } .btn--dark{ background:var(--ink); color:var(--white); } .btn--dark:hover{ background:var(--ink-soft); } .hero__scrollcue{ position:absolute; right:var(--edge); bottom:34px; z-index:2; color:rgba(255,255,255,.75); font-size:.75rem; writing-mode:vertical-rl; display:flex; align-items:center; gap:10px; letter-spacing:.08em; } .hero__scrollcue::after{ content:""; width:1px; height:46px; background:rgba(255,255,255,.5); } /* ============================================================ INTRO STRIP ============================================================ */ .intro{ padding:96px var(--edge) 80px; } .intro__grid{ max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:start; } .intro__tag{ color:var(--teal-deep); font-weight:700; font-size:.95rem; } .intro h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin-top:14px; } .intro__body{ font-size:1.05rem; color:#3c453f; max-width:56ch; } .intro__body p + p{ margin-top:14px; } .intro__stats{ display:flex; gap:36px; margin-top:28px; flex-wrap:wrap; } .intro__stat b{ display:block; font-family:var(--display); font-size:2rem; color:var(--teal-deep); } .intro__stat span{ font-size:.85rem; color:#5b6259; } @media (max-width:820px){ .intro__grid{ grid-template-columns:1fr; gap:24px; } } /* ============================================================ TRANSFER STRIP (highlighted coverage note) ============================================================ */ .transfer-note{ background:var(--ink); color:var(--white); padding:56px var(--edge); } .transfer-note__inner{ max-width:var(--max); margin:0 auto; display:flex; gap:40px; align-items:center; flex-wrap:wrap; justify-content:space-between; } .transfer-note h3{ font-size:1.5rem; max-width:30ch; color:var(--white); } .transfer-note__routes{ display:flex; gap:28px; flex-wrap:wrap; list-style:none; margin:0; padding:0; } .transfer-note__routes li{ font-size:.92rem; color:var(--sand); max-width:190px; border-left:2px solid var(--lime); padding-left:14px; } /* ============================================================ SECTION HEADS ============================================================ */ .section-head{ max-width:var(--max); margin:0 auto; padding:0 var(--edge); } .section-head__tag{ color:var(--teal-deep); font-weight:700; font-size:.9rem; } .section-head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-top:12px; max-width:20ch; } .section-head p{ margin-top:14px; color:#4a5148; max-width:58ch; font-size:1.02rem; } .section-head--light h2, .section-head--light p{ color:var(--white); } .section-head--light .section-head__tag{ color:var(--lime); } /* ============================================================ ACTIVITIES ============================================================ */ .activities{ padding:100px 0 110px; } .activities__grid{ max-width:var(--max); margin:44px auto 0; padding:0 var(--edge); display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } @media (max-width:980px){ .activities__grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .activities__grid{ grid-template-columns:1fr; } } .card{ position:relative; border-radius:18px; overflow:hidden; cursor:pointer; min-height:340px; aspect-ratio:4/5; background:var(--ink); transition:transform .35s ease; } .card:hover{ transform:translateY(-6px); } .card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .card:hover img{ transform:scale(1.06); } .card__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,22,19,0) 40%, rgba(13,22,19,.92) 100%); } .card__body{ position:absolute; left:0; right:0; bottom:0; padding:22px; color:var(--white); } .card__cat{ font-size:.74rem; color:var(--lime); font-weight:700; text-transform:uppercase; letter-spacing:.06em; } .card__title{ font-size:1.28rem; margin-top:6px; } .card__more{ margin-top:12px; display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--white); opacity:.85; } .card__more svg{ width:14px; height:14px; } /* ============================================================ CINEMATIC BREAK (full bleed feature) ============================================================ */ .feature{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; background:var(--ink); } .feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; } .feature__scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,22,19,.92) 0%, rgba(13,22,19,.55) 45%, rgba(13,22,19,.15) 75%); } .feature--right .feature__scrim{ background:linear-gradient(270deg, rgba(13,22,19,.92) 0%, rgba(13,22,19,.55) 45%, rgba(13,22,19,.15) 75%); } .feature__content{ position:relative; z-index:2; padding:0 var(--edge); max-width:560px; color:var(--white); } .feature--right .feature__content{ margin-left:auto; text-align:left; } .feature__tag{ color:var(--lime); font-weight:700; font-size:.88rem; } .feature h3{ font-size:clamp(2rem,4vw,3rem); margin-top:14px; color:var(--white); line-height:1.05; } .feature p{ margin-top:18px; color:rgba(255,255,255,.85); font-size:1.05rem; max-width:44ch; } /* ============================================================ MOMENTOS MACA — gallery ============================================================ */ .momentos{ background:var(--ink); padding:100px 0 110px; } .momentos__grid{ max-width:var(--max); margin:44px auto 0; padding:0 var(--edge); columns:4 220px; column-gap:16px; } .momentos__grid img{ width:100%; border-radius:12px; margin-bottom:16px; cursor:pointer; transition:transform .3s ease, filter .3s ease; } .momentos__grid img:hover{ transform:scale(1.02); filter:brightness(1.08); } @media (max-width:700px){ .momentos__grid{ columns:2 160px; } } .momentos__social{ max-width:var(--max); margin:40px auto 0; padding:0 var(--edge); display:flex; gap:18px; align-items:center; } .momentos__social a{ color:var(--sand); text-decoration:none; font-size:.92rem; font-weight:600; border:1px solid rgba(255,255,255,.25); padding:9px 16px; border-radius:999px; transition:border-color .2s ease, background .2s ease; } .momentos__social a:hover{ border-color:var(--lime); background:rgba(198,230,47,.08); } /* ============================================================ HOTELS ============================================================ */ .hotels{ padding:100px 0 110px; } .hotels__grid{ max-width:var(--max); margin:44px auto 0; padding:0 var(--edge); display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } @media (max-width:900px){ .hotels__grid{ grid-template-columns:1fr; } } .hotel-card{ background:var(--white); border:1px solid var(--sand-dim); border-radius:16px; padding:30px 26px; display:flex; flex-direction:column; gap:14px; } .hotel-card__badge{ width:44px; height:44px; border-radius:12px; background:var(--teal); display:flex; align-items:center; justify-content:center; color:var(--white); } .hotel-card h3{ font-size:1.3rem; } .hotel-card p{ color:#525b52; font-size:.95rem; } .hotel-card__loc{ font-size:.82rem; color:var(--teal-deep); font-weight:600; } .hotel-card a.btn{ align-self:flex-start; margin-top:6px; } .hotels__note{ max-width:var(--max); margin:28px auto 0; padding:0 var(--edge); font-size:.86rem; color:#4f574e; max-width:60ch; } /* ============================================================ REVIEWS ============================================================ */ .reviews{ background:var(--sand-dim); padding:100px 0 110px; } .reviews__wrap{ max-width:var(--max); margin:44px auto 0; padding:0 var(--edge); } .reviews__widget{ background:var(--white); border-radius:18px; padding:40px; min-height:220px; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; gap:14px; border:1px dashed #c7c0a4; } .reviews__widget img{ height:34px; } .reviews__widget p{ color:#5b6259; max-width:48ch; font-size:.95rem; } /* ============================================================ POLICIES (accordion) ============================================================ */ .policies{ padding:100px 0 110px; } .accordion{ max-width:var(--max); margin:44px auto 0; padding:0 var(--edge); } .accordion__item{ border-bottom:1px solid var(--sand-dim); } .accordion__item:first-child{ border-top:1px solid var(--sand-dim); } .accordion__trigger{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:24px 0; display:flex; justify-content:space-between; align-items:center; font-family:var(--display); font-size:1.15rem; color:var(--ink); gap:20px; } .accordion__trigger .plus{ width:26px; height:26px; flex:none; border-radius:50%; border:1px solid var(--ink); position:relative; transition:transform .3s ease, background .3s ease; } .accordion__trigger .plus::before, .accordion__trigger .plus::after{ content:""; position:absolute; background:var(--ink); top:50%; left:50%; transform:translate(-50%,-50%); } .accordion__trigger .plus::before{ width:11px; height:1.5px; } .accordion__trigger .plus::after{ width:1.5px; height:11px; transition:opacity .2s ease; } .accordion__item.is-open .plus{ background:var(--lime); } .accordion__item.is-open .plus::after{ opacity:0; } .accordion__panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; } .accordion__panel-inner{ padding:0 0 26px; color:#454d44; font-size:.98rem; max-width:70ch; } .accordion__panel-inner p + p{ margin-top:10px; } .accordion__panel-inner ul{ margin:10px 0 0; padding-left:20px; } .accordion__panel-inner li{ margin-bottom:6px; } /* ============================================================ FOOTER ============================================================ */ .footer{ background:var(--ink); color:var(--sand); padding:70px var(--edge) 30px; } .footer__top{ max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12); } .footer__brand{ display:flex; gap:14px; align-items:center; max-width:320px; } .footer__brand img{ width:52px; height:52px; border-radius:12px; } .footer__brand-text b{ font-family:var(--display); font-size:1.2rem; color:var(--white); display:block; } .footer__brand-text span{ font-size:.85rem; color:var(--sand-dim); } .footer__cols{ display:flex; gap:60px; flex-wrap:wrap; } .footer__col h3{ font-size:.85rem; color:var(--lime); margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em; } .footer__col a, .footer__col span{ display:block; color:var(--sand-dim); text-decoration:none; font-size:.92rem; margin-bottom:10px; } .footer__col a:hover{ color:var(--white); } .footer__bottom{ max-width:var(--max); margin:0 auto; padding-top:24px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.82rem; color:#7d8478; } /* ============================================================ WHATSAPP FLOAT ============================================================ */ .wa-float{ position:fixed; right:22px; bottom:22px; z-index:90; width:60px; height:60px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.3); text-decoration:none; transition:transform .2s ease; } .wa-float:hover{ transform:scale(1.08); } .wa-float svg{ width:30px; height:30px; fill:var(--white); } /* ============================================================ MODAL (vista extendida) ============================================================ */ .modal-overlay{ position:fixed; inset:0; background:rgba(13,22,19,.86); z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:5vh 20px; overflow-y:auto; opacity:0; pointer-events:none; transition:opacity .3s ease; } .modal-overlay.is-open{ opacity:1; pointer-events:auto; } .modal{ background:var(--sand); border-radius:22px; max-width:920px; width:100%; overflow:hidden; transform:translateY(24px); transition:transform .35s ease; } .modal-overlay.is-open .modal{ transform:translateY(0); } .modal__gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; max-height:340px; overflow:hidden; } .modal__gallery img{ width:100%; height:170px; object-fit:cover; } .modal__gallery img:first-child{ grid-column:1/3; grid-row:1/3; height:100%; } .modal__body{ padding:34px 38px 40px; } .modal__cat{ color:var(--teal-deep); font-weight:700; font-size:.85rem; } .modal__body h3{ font-size:1.9rem; margin-top:8px; } .modal__body p{ margin-top:16px; color:#454d44; font-size:1rem; } .modal__list{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; padding:0; list-style:none; } .modal__list li{ font-size:.92rem; color:#3c453f; padding-left:20px; position:relative; } .modal__list li::before{ content:"✓"; position:absolute; left:0; color:var(--teal-deep); font-weight:700; } .modal__actions{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; } .modal__picker{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; } .modal__pick{ display:flex; align-items:center; gap:10px; font-size:.92rem; color:#2c332d; cursor:pointer; padding:8px 10px; border-radius:10px; border:1px solid #e1e6df; transition:border-color .2s ease, background .2s ease; } .modal__pick:hover{ border-color:var(--teal-deep); } .modal__pick input{ width:17px; height:17px; accent-color:var(--teal-deep); flex:none; } .modal__pick:has(input:checked){ border-color:var(--teal-deep); background:#eef7f2; } .modal__close{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; background:rgba(13,22,19,.55); color:var(--white); border:0; cursor:pointer; font-size:1.2rem; line-height:1; z-index:2; } @media (max-width:620px){ .modal__gallery{ grid-template-columns:repeat(2,1fr); max-height:none; } .modal__gallery img{ height:130px; } .modal__gallery img:first-child{ grid-column:1/3; grid-row:auto; height:200px; } .modal__list{ grid-template-columns:1fr; } .modal__picker{ grid-template-columns:1fr; } .modal__body{ padding:26px 22px 30px; } } /* reveal-on-scroll — progressive enhancement: content is fully visible by default; JS opts elements into the hidden-then-fade state only once it has successfully run, so a JS failure never leaves content permanently invisible. */ .reveal-armed .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; } .reveal-armed .reveal.is-visible{ opacity:1; transform:translateY(0); } /* ============================================================ CINEMATIC INTERACTION LAYER — MACA Inspired by premium editorial/travel sites. ============================================================ */ html{scroll-behavior:smooth;scroll-padding-top:88px} body{overflow-x:hidden} .hero{isolation:isolate;perspective:1000px} .hero__slides{position:absolute;inset:-3%;overflow:hidden;z-index:0} .hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.25s cubic-bezier(.22,.61,.36,1),transform 7s cubic-bezier(.16,1,.3,1);will-change:transform,opacity} .hero__bg.is-active{opacity:1;transform:scale(1.01)} .hero__scrim{z-index:1;background:linear-gradient(90deg,rgba(5,13,11,.72) 0%,rgba(5,13,11,.28) 52%,rgba(5,13,11,.2) 100%),linear-gradient(0deg,rgba(5,13,11,.5),transparent 45%)} .hero__grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");mix-blend-mode:soft-light} .hero__content{z-index:3;transform:translate3d(var(--hero-x,0),calc(var(--hero-y,0) + var(--hero-content-y,0)),0);transition:transform .18s ease-out} .hero__eyebrow,.hero h1,.hero__lede,.hero__actions{opacity:0;transform:translateY(24px);animation:heroReveal .9s cubic-bezier(.16,1,.3,1) forwards} .hero__eyebrow{animation-delay:.15s}.hero h1{animation-delay:.28s}.hero__lede{animation-delay:.4s}.hero__actions{animation-delay:.52s} .hero h1{letter-spacing:-.035em;text-wrap:balance} @keyframes heroReveal{to{opacity:1;transform:translateY(0)}} .hero__scrollcue{z-index:3;gap:10px;display:flex;align-items:center} .hero__scrollcue span{width:1px;height:42px;background:rgba(255,255,255,.6);display:block;animation:scrollLine 1.8s ease-in-out infinite} @keyframes scrollLine{0%,100%{transform:scaleY(.45);transform-origin:top;opacity:.35}50%{transform:scaleY(1);transform-origin:top;opacity:1}} .hero__progress{position:absolute;z-index:3;right:var(--edge);bottom:34px;width:min(220px,28vw);height:2px;background:rgba(255,255,255,.25);overflow:hidden;border-radius:99px} .hero__progress span{display:block;height:100%;width:0;background:var(--lime);border-radius:inherit} .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,background .3s ease} .btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.18);transform:translateX(-110%) skewX(-18deg);transition:transform .55s cubic-bezier(.16,1,.3,1);z-index:-1} .btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(13,22,19,.16)} .btn:hover::after{transform:translateX(110%) skewX(-18deg)} /* Scroll reveals: blur + lift, with staggered children */ .reveal-armed .reveal{opacity:0;transform:translate3d(0,32px,0) scale(.985);filter:blur(7px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease} .reveal-armed .reveal.is-visible{opacity:1;transform:none;filter:none} .activities__grid .card:nth-child(2){transition-delay:.06s}.activities__grid .card:nth-child(3){transition-delay:.12s}.activities__grid .card:nth-child(4){transition-delay:.18s}.activities__grid .card:nth-child(5){transition-delay:.24s}.activities__grid .card:nth-child(6){transition-delay:.30s} .card{transform-style:preserve-3d;will-change:transform;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease} .card:hover{transform:translateY(-9px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 22px 50px rgba(13,22,19,.2)} .card img{transition:transform .9s cubic-bezier(.16,1,.3,1),filter .6s ease} .card:hover img{transform:scale(1.1);filter:saturate(1.08) contrast(1.03)} .card__body{transform:translateZ(24px)} .card__more{transition:gap .3s ease,opacity .3s ease,transform .3s ease}.card:hover .card__more{gap:12px;opacity:1;transform:translateX(3px)} .feature{overflow:hidden} .feature img{transform:translate3d(0,var(--feature-scroll-y,0),0) scale(1.06);transition:transform 1.4s cubic-bezier(.16,1,.3,1)} .feature.is-inview img{transform:translate3d(0,var(--feature-scroll-y,0),0) scale(1)} .feature__content{transition:transform 1s cubic-bezier(.16,1,.3,1)} .feature:not(.is-inview) .feature__content{transform:translateY(30px)} .momentos__grid img{will-change:transform;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s ease,box-shadow .5s ease} .momentos__grid img:hover{transform:scale(1.045) translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.28);filter:brightness(1.08) saturate(1.08)} .modal-overlay{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .modal{box-shadow:0 30px 100px rgba(0,0,0,.35)} .modal-overlay.is-open .modal{animation:modalIn .55s cubic-bezier(.16,1,.3,1)} @keyframes modalIn{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}} .wa-float{animation:floatPulse 2.8s ease-in-out infinite} .wa-float:hover{animation:none;transform:scale(1.1)} @keyframes floatPulse{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 0 rgba(37,211,102,.25)}50%{box-shadow:0 12px 34px rgba(0,0,0,.32),0 0 0 12px rgba(37,211,102,0)}} @media (max-width:700px){ .hero__progress{right:18px;bottom:24px;width:120px} .hero__content{transform:none!important} .card:hover{transform:translateY(-5px)} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero__bg,.hero__video,.hero__content,.btn,.card,.card img,.feature img,.feature__content,.momentos__grid img,.modal{transition:none!important;animation:none!important} .hero__bg,.hero__video{transform:none!important}.hero__bg.is-active{opacity:1} .hero__eyebrow,.hero h1,.hero__lede,.hero__actions{opacity:1;transform:none} .hero__scrollcue span,.wa-float{animation:none} } /* ============================================================ CINEMATIC SCROLL STORY — video scrubbed by page scroll ============================================================ */ .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:var(--hero-scroll-opacity,1); transform:translate3d(0,var(--hero-scroll-y,0),0) scale(var(--hero-scroll-scale,1.015)); pointer-events:none; background:var(--ink); will-change:transform,opacity; } .hero__slides .hero__bg{z-index:0} .hero__slides.is-no-video .hero__video{display:none} .cinematic-scroll{ position:relative; height:220vh; background:#07100e; } .cinematic-scroll__sticky{ position:sticky; top:0; height:100svh; min-height:600px; overflow:hidden; display:flex; align-items:flex-end; isolation:isolate; } .cinematic-scroll__media, .cinematic-scroll__media video, .cinematic-scroll__shade, .cinematic-scroll__grain{ position:absolute; inset:0; width:100%; height:100%; } .cinematic-scroll__media{z-index:0; background:#07100e; overflow:hidden} .cinematic-scroll__media video{object-fit:cover; transform:scale(1.01); will-change:transform; transition:none;} .cinematic-scroll__shade{ background: linear-gradient(90deg,rgba(3,11,9,.78) 0%,rgba(3,11,9,.35) 48%,rgba(3,11,9,.12) 100%), linear-gradient(0deg,rgba(3,11,9,.72) 0%,rgba(3,11,9,.06) 62%,rgba(3,11,9,.22) 100%); } .cinematic-scroll__grain{ pointer-events:none; opacity:.055; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); } .cinematic-scroll__copy{ position:relative; z-index:3; width:min(650px,65vw); padding:0 var(--edge) 10vh; color:var(--white); will-change:transform,opacity; } .cinematic-scroll__eyebrow{ display:flex; align-items:center; gap:10px; color:var(--lime); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; } .cinematic-scroll__eyebrow::before{content:"";width:28px;height:2px;background:var(--lime)} .cinematic-scroll__copy h2{ margin-top:18px; font-size:clamp(2.5rem,6vw,5.3rem); line-height:.98; letter-spacing:-.045em; color:var(--white); text-wrap:balance; } .cinematic-scroll__copy p{ margin-top:22px; max-width:48ch; color:rgba(255,255,255,.84); font-size:clamp(.98rem,1.4vw,1.12rem); } .cinematic-scroll__steps{ display:flex; align-items:center; gap:10px; margin-top:32px; } .cinematic-scroll__steps span{ width:30px; height:2px; border-radius:99px; background:rgba(255,255,255,.28); color:transparent; transition:width .4s ease,background .4s ease; } .cinematic-scroll__steps span.is-active{width:58px;background:var(--lime)} .cinematic-scroll__progress{ width:min(360px,45vw); height:2px; margin-top:16px; background:rgba(255,255,255,.22); overflow:hidden; border-radius:99px; } .cinematic-scroll__progress span{display:block;width:0;height:100%;background:var(--white);border-radius:inherit;transform-origin:left} .cinematic-scroll__hint{ position:absolute; right:var(--edge); bottom:7vh; z-index:3; color:rgba(255,255,255,.72); writing-mode:vertical-rl; letter-spacing:.1em; font-size:.72rem; display:flex; gap:10px; align-items:center; } .cinematic-scroll__hint span{display:block;width:1px;height:48px;background:rgba(255,255,255,.55);animation:scrollLine 1.8s ease-in-out infinite} .cinematic-scroll.is-ended .cinematic-scroll__hint{opacity:0;transition:opacity .5s ease} @media (max-width:700px){ .cinematic-scroll{height:190vh} .cinematic-scroll__sticky{min-height:100svh} .cinematic-scroll__copy{width:100%;padding:0 20px 8vh} .cinematic-scroll__copy h2{font-size:clamp(2.4rem,12vw,4rem)} .cinematic-scroll__copy p{max-width:34ch;font-size:.96rem} .cinematic-scroll__progress{width:calc(100vw - 40px);max-width:none} .cinematic-scroll__hint{right:18px;bottom:10vh} .cinematic-scroll__media video{transform:scale(1.01)} .hero__video{object-position:center} } @media (prefers-reduced-motion:reduce){ .hero__video{display:none!important} .cinematic-scroll{height:auto} .cinematic-scroll__sticky{position:relative;height:75svh} .cinematic-scroll__copy{opacity:1!important;transform:none!important} .cinematic-scroll__steps span,.cinematic-scroll__progress span{transition:none} .cinematic-scroll__hint{display:none} } /* ============================================================ TOUCH CAROUSELS — unique imagery, swipe + drag ============================================================ */ .activities__grid[data-carousel], .momentos__grid[data-carousel]{ display:flex; overflow-x:auto; overflow-y:hidden; gap:18px; padding:4px var(--edge) 22px; margin-inline:calc(var(--edge) * -1); scroll-snap-type:x proximity; scroll-padding-inline:var(--edge); scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; } .activities__grid[data-carousel]::-webkit-scrollbar, .momentos__grid[data-carousel]::-webkit-scrollbar{display:none} .activities__grid[data-carousel].is-dragging, .momentos__grid[data-carousel].is-dragging{cursor:grabbing;scroll-snap-type:none} .activities__grid[data-carousel] .card{ flex:0 0 clamp(280px,30vw,390px); min-height:470px; scroll-snap-align:start; } .momentos__grid[data-carousel]{ columns:auto; display:flex; gap:16px; } .momentos__grid[data-carousel] img{ flex:0 0 clamp(250px,28vw,360px); width:clamp(250px,28vw,360px); height:440px; object-fit:cover; scroll-snap-align:start; } @media (max-width:700px){ .activities__grid[data-carousel], .momentos__grid[data-carousel]{ gap:12px; padding-inline:20px; margin-inline:-20px; scroll-padding-inline:20px; } .activities__grid[data-carousel] .card{flex-basis:82vw;min-height:420px} .momentos__grid[data-carousel] img{flex-basis:78vw;width:78vw;height:390px} } /* ============================================================ BOOKING / REQUEST FORMS — Netlify static + WhatsApp ============================================================ */ .booking-form{margin-top:28px;background:var(--white);border:1px solid var(--sand-dim);border-radius:20px;padding:24px;box-shadow:0 18px 55px rgba(13,22,19,.08)} .booking-form h4{font-size:1.05rem;margin-bottom:14px} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .booking-form label{display:flex;flex-direction:column;gap:7px;font-size:.82rem;font-weight:700;color:#354039} .booking-form input,.booking-form select,.booking-form textarea{width:100%;border:1px solid #cfd6ce;background:#fbfcfa;border-radius:11px;padding:12px 13px;font:500 .92rem var(--body);color:var(--ink);outline:none;transition:border-color .2s ease,box-shadow .2s ease} .booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{border-color:var(--teal-deep);box-shadow:0 0 0 3px rgba(15,169,166,.12)} .form-full{grid-column:1/-1} .form-note{display:block;margin-top:12px;color:#6b746c;font-size:.78rem} .change-request{max-width:var(--max);margin:64px auto 0;padding:0 var(--edge)} .change-request__intro{max-width:680px} .change-request__intro h3{font-size:clamp(1.8rem,3vw,2.5rem);margin-top:10px} .change-request__intro p{margin-top:10px;color:#4a5148} .waiver-copy{max-width:82ch!important} /* Exclusive diving section */ .diving-section{background:var(--ink);color:var(--white);padding:100px 0 110px;overflow:hidden} .diving-section .section-head p{color:rgba(255,255,255,.78)} .diving-section__grid{max-width:var(--max);margin:44px auto 0;padding:0 var(--edge);display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} .diving-section__grid::-webkit-scrollbar{display:none} .diving-section__grid img{flex:0 0 clamp(250px,28vw,360px);width:clamp(250px,28vw,360px);height:470px;object-fit:cover;object-position:center;border-radius:16px;scroll-snap-align:start} .diving-section__cta{max-width:var(--max);margin:30px auto 0;padding:0 var(--edge)} /* Consistent portrait activity imagery */ .activities__grid[data-carousel] .card img{object-fit:cover;object-position:center center;aspect-ratio:4/5} .modal__gallery img{object-fit:cover;object-position:center center} /* Better scroll feel: no JS scroll hijacking on touch */ .activities__grid[data-carousel],.momentos__grid[data-carousel],.diving-section__grid{scroll-behavior:smooth;touch-action:pan-x;overscroll-behavior-inline:contain} @media (max-width:860px){ .nav__brand-text{display:none} .nav__brand img{height:50px;width:50px} .nav.is-scrolled .nav__brand img{height:44px;width:44px} .nav__tools{gap:8px} } @media (max-width:620px){ .form-grid{grid-template-columns:1fr} .form-full{grid-column:auto} .booking-form{padding:18px} .change-request{margin-top:46px} .diving-section__grid img{flex-basis:78vw;width:78vw;height:410px} } /* Cinematic video stability: keep the media on its own compositor layer. */ .cinematic-scroll__media video{display:block;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;transform:translateZ(0);} @media (max-width:768px){ .cinematic-scroll{min-height:185vh!important;} .cinematic-scroll__sticky{height:100svh;} .cinematic-scroll__media{contain:paint;} .cinematic-scroll__media video{object-position:center center;} } /* MACA Moments: consistent, upright presentation */ .momentos__grid img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:none!important;} .momentos__grid img{aspect-ratio:4/3;} /* Natural cinematic playback: scroll controls when playback runs, not individual frames. */ .cinematic-scroll__media{opacity:var(--scene-opacity,1);transition:opacity .7s cubic-bezier(.22,.61,.36,1);} .cinematic-scroll__copy{opacity:var(--scene-copy-opacity,1);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);} .cinematic-scroll__media video{transform:translateZ(0);} @media (max-width:700px){ .cinematic-scroll__media{transition:opacity .9s cubic-bezier(.22,.61,.36,1);} .cinematic-scroll__copy{transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);} } /* Diving background video: immersive but lightweight on the page flow. */ .diving-section{position:relative;isolation:isolate;min-height:760px;display:flex;align-items:center} .diving-section__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:-3;display:block;pointer-events:none} .diving-section__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,13,14,.28) 0%,rgba(4,13,14,.58) 55%,rgba(4,13,14,.82) 100%);z-index:-2;pointer-events:none} .diving-section__content{position:relative;z-index:1;width:100%} .diving-section__grid img{box-shadow:0 12px 32px rgba(0,0,0,.2);opacity:.72;transition:opacity .45s ease,transform .45s ease;will-change:opacity,transform}.diving-section__grid img:hover{opacity:.92;transform:translateY(-4px)} @media (max-width:620px){ .diving-section{min-height:700px;padding:82px 0 92px} .diving-section__video{object-position:center center} .diving-section__overlay{background:linear-gradient(180deg,rgba(4,13,14,.38) 0%,rgba(4,13,14,.68) 58%,rgba(4,13,14,.9) 100%)} } @media (prefers-reduced-motion: reduce){.diving-section__video{display:none}} /* ---------- Social links: premium interactive cards ---------- */ .momentos__social{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:42px} .social-pill{position:relative;display:flex;align-items:center;gap:13px;min-height:72px;padding:13px 15px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;text-decoration:none;overflow:hidden;transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease} .social-pill::before{content:"";position:absolute;inset:-70% 35% auto -20%;height:150px;background:rgba(255,255,255,.10);filter:blur(30px);opacity:.6;pointer-events:none} .social-pill:hover{transform:translateY(-5px);border-color:rgba(198,230,47,.55);background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(198,230,47,.07));box-shadow:0 18px 36px rgba(0,0,0,.22)} .social-pill__icon{position:relative;z-index:1;display:grid;place-items:center;width:43px;height:43px;flex:0 0 43px;border-radius:14px;background:rgba(255,255,255,.12);font-size:28px;font-weight:700;line-height:1} .social-pill__icon--f{font-family:Arial,sans-serif;font-size:27px} .social-pill>span:nth-child(2){position:relative;z-index:1;display:flex;flex-direction:column;min-width:0} .social-pill small{font-size:.68rem;line-height:1.2;color:rgba(255,255,255,.62);letter-spacing:.03em} .social-pill strong{font-size:1rem;line-height:1.25;color:#fff} .social-pill>b{position:relative;z-index:1;margin-left:auto;font-size:1.15rem;color:var(--lime);transition:transform .25s ease} .social-pill:hover>b{transform:translate(3px,-3px)} @media(max-width:820px){.momentos__social{grid-template-columns:1fr}.social-pill{min-height:66px}} /* ---------- Faster video loading on desktop ---------- */ .hero__video{will-change:opacity,transform;contain:layout paint} .cinematic-scroll__media video{contain:layout paint;will-change:auto} .diving-section__video{contain:layout paint} /* ============================================================ IMAGE LIGHTBOX — Activities + Diving Expands the image over the current page without opening a new window. ============================================================ */ .modal-overlay.is-image-lightbox{ background:rgba(8,14,12,.56); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); align-items:center; padding:24px; overflow:hidden; } .modal.image-lightbox{ width:auto; max-width:min(92vw,1100px); max-height:88vh; background:transparent; border-radius:0; overflow:visible; transform:scale(.97); box-shadow:none; } .modal-overlay.is-open .modal.image-lightbox{transform:scale(1)} .modal.image-lightbox .image-lightbox__frame{ position:relative; display:flex; align-items:center; justify-content:center; max-width:92vw; max-height:84vh; border-radius:20px; overflow:hidden; box-shadow:0 22px 70px rgba(0,0,0,.34); } .modal.image-lightbox .image-lightbox__frame img{ display:block; width:auto; height:auto; max-width:92vw; max-height:84vh; object-fit:contain; border-radius:20px; } .modal.image-lightbox .image-lightbox__close{ position:absolute; z-index:3; top:-18px; right:-18px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.55); background:rgba(13,22,19,.72); color:#fff; font-size:30px; line-height:1; display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.25); } .activities__grid .card img, .diving-section__grid img{cursor:zoom-in} @media (max-width:640px){ .modal-overlay.is-image-lightbox{padding:18px} .modal.image-lightbox{max-width:94vw} .modal.image-lightbox .image-lightbox__frame, .modal.image-lightbox .image-lightbox__frame img{max-width:94vw;max-height:78vh;border-radius:16px} .modal.image-lightbox .image-lightbox__close{top:-12px;right:-8px;width:42px;height:42px} } /* ---------- Smooth cinematic playback ---------- */ .cinematic-scroll__media video{image-rendering:auto;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)} @media (prefers-reduced-motion: reduce){.cinematic-scroll__media video{transform:none;-webkit-transform:none}} /* Continuous Moments + Social video background */ .momentos--video{position:relative;isolation:isolate;overflow:hidden;} .momentos--video .momentos__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block;pointer-events:none;} .momentos--video .momentos__video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,12,10,.26),rgba(5,12,10,.42));z-index:1;pointer-events:none;} .momentos--video .section-head,.momentos--video .momentos__grid,.momentos--video .momentos__social{position:relative;z-index:2;} .momentos--video .momentos__grid img{background:rgba(0,0,0,.14);} @media (max-width:700px){ .momentos--video .momentos__video{object-position:center;} } /* ---------- Desktop alignment + reliable activity cards ---------- */ @media (min-width:861px){ .nav{min-height:82px;align-items:center;padding-top:12px;padding-bottom:12px} .nav__brand{align-items:center;flex:0 0 auto} .nav__brand img{width:64px;height:64px;object-fit:cover;border-radius:14px} .nav__brand-text{line-height:1.05} .nav__links{align-items:center;gap:22px} .nav__tools{align-items:center} .language-toggle{min-width:68px;min-height:46px;padding:9px 14px} .language-flag{font-size:1.3rem} .nav__cta{min-height:46px;align-items:center} } .activities__grid .card{cursor:pointer;touch-action:manipulation} .activities__grid .card:focus-visible{outline:3px solid var(--lime);outline-offset:4px} .activities__grid .card img{pointer-events:auto} /* Keep the native video at its full supplied resolution; the browser scales it to the viewport. */ .hero__video,.cinematic-scroll__media video,.diving-section__video,.momentos--video .momentos__video{image-rendering:auto} /* Desktop brand placement: remove the tiny corner logo and place a larger brand mark below the WhatsApp CTA. */ .nav__brand--hidden{display:none!important;width:0;min-width:0} .desktop-nav-logo{display:flex;position:absolute;right:var(--edge);top:78px;width:82px;height:82px;align-items:center;justify-content:center;text-decoration:none;z-index:110} .desktop-nav-logo img{width:82px;height:82px;object-fit:contain;border-radius:16px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.28));} @media(max-width:860px){.desktop-nav-logo{display:none!important}.nav__brand--hidden{display:none!important}} /* MACA Moments: let the moving background show softly through the gallery photos. */ .momentos--video .momentos__grid img{opacity:.72;transition:opacity .35s ease,transform .45s ease,filter .35s ease;} .momentos--video .momentos__grid img:hover{opacity:.9;filter:saturate(1.05);transform:translateY(-4px);} /* Return-to-top control */ .back-to-top{position:fixed;right:24px;bottom:24px;z-index:95;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(13,22,19,.78);color:#fff;display:grid;place-items:center;font:700 1.35rem var(--body);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s ease,visibility .25s ease,transform .25s ease,background .25s ease;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.22)} .back-to-top.is-visible{opacity:1;visibility:visible;transform:none} .back-to-top:hover{background:rgba(198,230,47,.18);border-color:rgba(198,230,47,.7);transform:translateY(-2px)} @media(max-width:620px){.back-to-top{right:18px;bottom:18px;width:48px;height:48px}} /* Desktop cards remain explicitly interactive. */ .activities__grid .card{cursor:pointer} /* ============================================================ MACA NAV LOGO + BRAND MENU BUTTON ============================================================ */ .desktop-nav-logo{display:flex;position:absolute;right:var(--edge);top:76px;width:112px;height:112px;align-items:center;justify-content:center;text-decoration:none;z-index:110;pointer-events:auto} .desktop-nav-logo img{width:112px;height:112px;object-fit:contain;border-radius:0;filter:drop-shadow(0 10px 24px rgba(0,0,0,.30));} .nav__burger{position:relative!important;overflow:visible!important} .nav__burger > img{display:none} .nav__burger-badge{display:none} @media(max-width:860px){ .desktop-nav-logo{display:none!important} .nav__burger{display:flex;position:relative;z-index:120;width:62px;height:62px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.32);border-radius:18px;background:rgba(13,22,19,.72);box-shadow:0 10px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:5px;cursor:pointer} .nav__burger > img{display:block;width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.28));transition:transform .28s ease,filter .28s ease} .nav__burger:hover > img,.nav__burger:focus-visible > img{transform:scale(1.05)} .nav__burger-badge{display:flex;position:absolute;right:-5px;bottom:-5px;width:24px;height:24px;border-radius:9px;align-items:center;justify-content:center;gap:2px;background:var(--lime);border:2px solid var(--ink);box-shadow:0 5px 14px rgba(0,0,0,.28)} .nav__burger-badge i{display:block;width:3px;height:10px;border-radius:2px;background:var(--ink);transform:rotate(90deg)} .nav__burger.is-open > img{transform:scale(.96) rotate(-2deg)} } @media(min-width:861px){ .nav__burger{display:none!important} } /* ============================================================ FINAL BRAND / MENU POLISH ============================================================ */ .hero{isolation:isolate;} .hero__content{position:relative;z-index:4;} .nav__menu-watermark{position:absolute;left:50%;top:50%;width:min(460px,70%);height:auto;transform:translate(-50%,-50%);opacity:.075;pointer-events:none;z-index:-1;filter:saturate(.9) brightness(1.15);} .nav__links{isolation:isolate;} .desktop-nav-logo{display:none!important;} .nav__burger{overflow:visible!important;} .nav__burger-badge{display:none!important;} .nav__burger-lines{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;position:absolute;right:-7px;bottom:-7px;width:24px;height:24px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);box-shadow:0 5px 14px rgba(0,0,0,.28);} .nav__burger-lines i{display:block;width:10px;height:2px;border-radius:2px;background:var(--ink);} @keyframes menuInvite{0%,100%{transform:translateY(0) rotate(0deg)}20%{transform:translateY(-4px) rotate(-1deg)}40%{transform:translateY(0) rotate(1deg)}60%{transform:translateY(-2px) rotate(0deg)}80%{transform:translateY(0)}} @media(max-width:860px){ .nav__burger{animation:menuInvite 2.7s ease-in-out infinite;transform-origin:center bottom;} .nav__burger:active{animation:none;transform:scale(.94);} .nav__burger-lines{display:flex;} .nav__menu-watermark{width:min(420px,82%);opacity:.065;} } @media(prefers-reduced-motion:reduce){.nav__burger{animation:none!important}} .wa-float{bottom:22px;} .back-to-top{bottom:94px;} @media(max-width:620px){.back-to-top{right:18px;bottom:94px;width:48px;height:48px;}} /* Menu CTA: unmistakable hamburger, gentle invitation motion, no decorative lines underneath. */ .nav__burger-lines,.nav__burger > img,.nav__burger-badge{display:none!important;} @media(max-width:860px){ .nav__burger{width:62px;height:62px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;padding:0;border-radius:20px;background:rgba(13,22,19,.76);border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.14);} .nav__burger > span{display:block!important;width:28px;height:3px;border-radius:99px;background:#fff;transition:transform .25s ease,opacity .2s ease;} .nav__burger.is-open > span:nth-child(1){transform:translateY(10px) rotate(45deg)} .nav__burger.is-open > span:nth-child(2){opacity:0} .nav__burger.is-open > span:nth-child(3){transform:translateY(-10px) rotate(-45deg)} } /* The MACA mark itself is the menu control. No hamburger lines or extra badge. */ @media(max-width:860px){ .nav__burger{ display:flex!important; width:78px!important; height:78px!important; padding:4px!important; border:0!important; border-radius:50%!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; animation:menuInvite 2.6s ease-in-out infinite; transform-origin:center center; } .nav__burger > span{display:none!important;} .nav__burger > img{ display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; filter:drop-shadow(0 8px 16px rgba(0,0,0,.30)); transition:transform .25s ease,filter .25s ease; } .nav__burger:hover > img, .nav__burger:focus-visible > img{transform:scale(1.07)!important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.38));} .nav__burger:active{animation:none!important;transform:scale(.93)!important;} .hero__content{ padding-bottom:54px; max-width:100%; } .hero h1{max-width:12ch;} } @media(prefers-reduced-motion:reduce){ .nav__burger{animation:none!important;} } /* ============================================================ FINAL NAVIGATION — priority links + MACA menu button ============================================================ */ .nav{padding-right:var(--edge);} .nav__links--primary{display:flex;align-items:center;gap:24px;flex:1;justify-content:center;} .nav__links--primary li{list-style:none;} .nav__links--primary a{font-size:.9rem;font-weight:600;} .nav__burger{ display:flex!important; position:relative!important; z-index:130!important; width:72px!important; height:72px!important; flex:0 0 72px; align-items:center!important; justify-content:center!important; padding:0!important; border:0!important; border-radius:50%!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; cursor:pointer; animation:menuInvite 2.8s ease-in-out infinite; } .nav__burger > img{ display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; filter:drop-shadow(0 8px 18px rgba(0,0,0,.32)); transition:transform .25s ease,filter .25s ease; } .nav__burger:hover > img,.nav__burger:focus-visible > img{transform:scale(1.06);filter:drop-shadow(0 11px 22px rgba(0,0,0,.4));} .nav__burger:active{animation:none!important;transform:scale(.94)!important;} .nav__burger.is-open > img{transform:scale(.96) rotate(-2deg);} /* Full menu panel. The small logo is a watermark here only. */ .nav__menu-panel{ position:fixed; inset:0; z-index:105; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:110px 32px 42px; background: radial-gradient(circle at 72% 18%,rgba(198,230,47,.12),transparent 24%), radial-gradient(circle at 24% 78%,rgba(15,169,166,.16),transparent 30%), linear-gradient(145deg,rgba(7,15,12,.985),rgba(14,31,25,.98)); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-12px) scale(.985); transition:opacity .3s ease,visibility .3s ease,transform .38s cubic-bezier(.22,1,.36,1); overflow:hidden; isolation:isolate; } .nav__menu-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none;} .nav__menu-watermark-wrap{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:-1; } .nav__menu-watermark{ position:static!important; width:min(620px,70vw)!important; height:auto!important; transform:none!important; opacity:.055!important; filter:saturate(.9) brightness(1.2)!important; } .nav__menu-panel-head{position:relative;z-index:2;text-align:center;margin-bottom:22px;} .nav__menu-kicker{display:block;color:var(--lime);font-size:.7rem;font-weight:800;letter-spacing:.18em;margin-bottom:8px;} .nav__menu-label{display:block;color:#fff;font-family:var(--display);font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:-.04em;} .nav__menu-list{ position:relative;z-index:2; list-style:none; width:min(560px,92vw); margin:0;padding:0; display:grid; gap:10px; } .nav__menu-list li{list-style:none;} .nav__menu-list a{ display:flex;align-items:center;justify-content:space-between; min-height:56px; padding:13px 18px; border:1px solid rgba(255,255,255,.13); border-radius:18px; color:#fff;text-decoration:none; background:rgba(255,255,255,.055); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); font-weight:700; transition:transform .24s ease,background .24s ease,border-color .24s ease; } .nav__menu-list a::after{content:'↗';color:var(--lime);font-size:1.1rem;} .nav__menu-list a:hover{transform:translateX(5px);background:rgba(255,255,255,.10);border-color:rgba(198,230,47,.42);} @media (min-width:861px){ .nav__links--primary{order:1;} .nav__tools{order:2;} .nav__menu-panel{padding-left:12vw;padding-right:12vw;} .nav__burger{width:78px!important;height:78px!important;flex-basis:78px;} .nav__burger > img{width:78px!important;height:78px!important;} .nav__menu-list{grid-template-columns:repeat(2,minmax(0,1fr));width:min(760px,84vw);} .nav__menu-list li:last-child{grid-column:1/-1;} } @media (max-width:860px){ .nav__links--primary{display:none!important;} .nav{padding-left:20px;padding-right:20px;} .nav__tools{margin-left:auto;} .nav__cta{display:none!important;} .nav__burger{width:76px!important;height:76px!important;flex-basis:76px;} .nav__menu-panel{padding:108px 20px 30px;justify-content:center;} .nav__menu-watermark{width:min(500px,92vw)!important;opacity:.06!important;} } @media (prefers-reduced-motion:reduce){.nav__burger{animation:none!important;}} /* Keep the two floating controls visually separated on small screens. */ .wa-float{right:20px;bottom:22px;} .back-to-top{right:20px;bottom:90px;} @media(max-width:620px){.wa-float{right:18px;bottom:18px}.back-to-top{right:18px;bottom:88px;}} /* Remove the old watermark behavior from the page itself. It only exists inside .nav__menu-panel. */ .nav__links--primary .nav__menu-watermark{display:none!important;} /* Prevent the page from moving behind the full-screen menu on every device. */ body.menu-open{overflow:hidden;} /* ===== FINAL MENU BUTTON + SMOOTH VIDEO PASS ===== */ /* The attached MACA MENU artwork is the button itself on every screen size. */ .nav__burger{ display:flex !important; position:relative; flex:0 0 auto; width:104px; height:78px; padding:0; margin:0; align-items:center; justify-content:center; border:0; border-radius:22px; background:transparent; box-shadow:none; cursor:pointer; overflow:visible; animation:menuInvite 2.8s ease-in-out infinite; transform-origin:center center; } .nav__burger > img{ display:block !important; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 7px 15px rgba(0,0,0,.28)); transition:transform .24s ease,filter .24s ease; } .nav__burger:hover > img,.nav__burger:focus-visible > img{transform:scale(1.045);filter:drop-shadow(0 10px 20px rgba(0,0,0,.34));} .nav__burger:active{animation:none;transform:scale(.94);} .nav__burger.is-open > img{transform:scale(.96) rotate(-1deg);} .nav__burger-lines,.nav__burger-badge{display:none !important;} @media(max-width:1100px){ .nav__links--primary{gap:16px} .nav__burger{width:92px;height:70px} .nav__tools{gap:8px} } @media(max-width:860px){ .nav__tools{gap:7px} .nav__burger{width:86px;height:72px;} .nav__burger > img{width:100%;height:100%;} } @media(max-width:620px){ .nav__burger{width:78px;height:66px;} } /* Keep the simple mark only inside the open menu as a subtle watermark. */ .nav__menu-watermark{opacity:.065 !important;} /* HERO LOGO — single source of truth (replaces the stacked .hero__logo overrides). The hero is a two-row grid: row 1 = logo, pinned just below the fixed nav; row 2 = the text. The logo only shrinks when row 1 is short (short laptops, long translations); if even its floor does not fit, the hero grows instead of letting the logo hit the nav or the headline. */ .hero{ --hero-nav-clear:106px; --hero-logo-max:min(426px,37.6vw); --hero-logo-min:200px; display:grid; grid-template-rows:minmax(calc(var(--hero-nav-clear) + var(--hero-logo-min) + 20px),1fr) auto; height:auto; min-height:max(560px,100svh); } .hero__logo{ display:block; position:absolute; grid-area:1/1/2/2; left:50%; top:var(--hero-nav-clear); transform:translateX(-50%); height:min(var(--hero-logo-max),calc(100% - var(--hero-nav-clear) - 20px)); width:auto; margin:0; z-index:3; opacity:.58; pointer-events:none; filter:drop-shadow(0 12px 26px rgba(0,0,0,.16)); } .hero__content{grid-row:2;grid-column:1;align-self:end;justify-self:start;} @media(max-width:860px){ .hero{--hero-logo-max:min(243px,57.5vw);--hero-logo-min:150px;} .hero__logo{opacity:.56;} } /* Faster, cleaner compositing for the 4K cinematic video. */ .cinematic-scroll__media video{ transform:translate3d(0,0,0); backface-visibility:hidden; -webkit-backface-visibility:hidden; contain:paint; } /* ===== MACA video journey: autoplay backgrounds across full sections ===== */ .boat-journey, .reviews-waiver-journey{position:relative;isolation:isolate;overflow:clip;background:transparent!important} .boat-journey__video-layer{position:sticky;top:0;height:100svh;min-height:600px;margin-bottom:-100svh;z-index:0;pointer-events:none;overflow:hidden} .boat-journey__video{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transform:translateZ(0)} .boat-journey__shade{position:absolute;inset:0;background:rgba(0,0,0,.30);pointer-events:none} .boat-journey > section, .boat-journey > .transfer-note, .boat-journey > .activities, .reviews-waiver-journey > section{position:relative;z-index:1} .boat-journey .cinematic-scroll--autoplay{height:100svh!important;min-height:600px;background:transparent!important;display:flex;align-items:center} .boat-journey .cinematic-scroll--autoplay .cinematic-scroll__copy{position:relative;max-width:760px;padding:40px 24px;margin:0 auto;text-align:center;color:#fff} .boat-journey .cinematic-scroll--autoplay .cinematic-scroll__steps, .boat-journey .cinematic-scroll--autoplay .cinematic-scroll__progress, .boat-journey .cinematic-scroll--autoplay .cinematic-scroll__hint{display:none!important} .boat-journey .transfer-note{min-height:100svh;display:flex;align-items:center;background:rgba(0,0,0,.18)!important;color:#fff} .boat-journey .activities{background:rgba(255,255,255,.78)!important;backdrop-filter:blur(2px)} .reviews-waiver-journey .reviews, .reviews-waiver-journey .policies{background:transparent!important} .reviews-waiver-journey .section-head, .reviews-waiver-journey .reviews__wrap, .reviews-waiver-journey .accordion, .reviews-waiver-journey .change-request{position:relative} .reviews-waiver-journey .reviews__widget, .reviews-waiver-journey .accordion__item, .reviews-waiver-journey .change-request{background:rgba(255,255,255,.78);backdrop-filter:blur(3px)} .reviews-waiver-journey .section-head{background:rgba(255,255,255,.72);backdrop-filter:blur(3px);padding:28px;border-radius:22px} @media(max-width:700px){ .boat-journey .cinematic-scroll--autoplay{height:100svh!important;min-height:100svh} .boat-journey .transfer-note{min-height:100svh;background:rgba(0,0,0,.30)!important} .boat-journey .activities{background:rgba(255,255,255,.84)!important} .reviews-waiver-journey .section-head{padding:20px;border-radius:16px} .reviews-waiver-journey .reviews__widget,.reviews-waiver-journey .accordion__item,.reviews-waiver-journey .change-request{background:rgba(255,255,255,.86)} } /* ===== FINAL GLOBAL MENU FIX ===== The full-screen menu is intentionally outside