/* ========================================================================== Albion Intercâmbios — Intercâmbio London Winter 2027 Design system: British wayfinding meets winter travel. Palette: Albion Navy #012169 / Pillar Red #C8102E / Paper White / Ice Mist. Type: Montserrat (single family, hierarchy by weight + spacing + case). ========================================================================== */ /* ---- Self-hosted Montserrat fallback (Google Fonts loads first in ) ---- */ @font-face{font-family:'Montserrat Local';src:url('../assets/fonts/montserrat-400.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal} @font-face{font-family:'Montserrat Local';src:url('../assets/fonts/montserrat-600.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal} @font-face{font-family:'Montserrat Local';src:url('../assets/fonts/montserrat-700.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal} @font-face{font-family:'Montserrat Local';src:url('../assets/fonts/montserrat-800.woff2') format('woff2');font-weight:800;font-display:swap;font-style:normal} :root{ --navy:#012169; --navy-800:#04246b; --navy-900:#021545; --navy-ink:#0b1c34; --red:#c8102e; --red-600:#a90c26; --white:#ffffff; --ice:#eef3fb; --ice-2:#e6eefa; --sky:#d7e4f6; --frost:#7cb2e8; --gold:#e8a33d; /* warmth, used only as a whisper */ --ink:#0d1c33; --muted:#5a6a85; --muted-2:#8693a9; --line:rgba(1,33,105,.12); --line-strong:rgba(1,33,105,.20); --card:#ffffff; --shadow-sm:0 2px 8px -3px rgba(2,18,55,.18); --shadow:0 16px 40px -20px rgba(2,18,55,.35); --shadow-lg:0 30px 60px -25px rgba(2,18,55,.45); --radius:18px; --radius-lg:26px; --radius-sm:12px; --maxw:1180px; --gutter:clamp(20px,5vw,64px); --sans:'Montserrat','Montserrat Local',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;font-family:var(--sans);color:var(--ink);background:var(--white); line-height:1.65;font-weight:400;font-size:clamp(15px,.4vw + 14px,17px); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit} h1,h2,h3,h4{margin:0;line-height:1.1;font-weight:800;letter-spacing:-.02em} p{margin:0 0 1em} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:3px solid var(--frost);outline-offset:3px;border-radius:6px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- layout helpers ---------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(64px,9vw,128px)} .section--ice{background:var(--ice)} .section--navy{background:var(--navy);color:#eaf1fb} .section--tight{padding-block:clamp(48px,7vw,92px)} /* section intro */ .eyebrow{ display:inline-flex;align-items:center;gap:.55em; font-weight:700;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase; color:var(--red);margin:0 0 .9rem; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--red);display:inline-block} .section--navy .eyebrow{color:var(--frost)} .section--navy .eyebrow::before{background:var(--frost)} .s-head{max-width:760px;margin-bottom:clamp(36px,5vw,60px)} .s-head h2{font-size:clamp(1.9rem,1rem + 3vw,3rem);letter-spacing:-.03em} .s-head p{margin-top:1rem;font-size:1.08rem;color:var(--muted)} .section--navy .s-head p{color:#bccbe4} .s-head--center{margin-inline:auto;text-align:center} .s-head--center .eyebrow{justify-content:center} /* ---------- buttons ---------- */ .btn{ --bg:var(--red);--fg:#fff; display:inline-flex;align-items:center;justify-content:center;gap:.6em; padding:.95em 1.55em;border-radius:999px;font-weight:700;font-size:.96rem; background:var(--bg);color:var(--fg);border:2px solid transparent;cursor:pointer; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s; box-shadow:0 12px 26px -12px rgba(200,16,46,.6);white-space:nowrap; } .btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(200,16,46,.7);background:var(--red-600)} .btn svg{width:1.15em;height:1.15em;fill:currentColor} .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none} .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;box-shadow:none} .btn--navy{background:var(--navy);box-shadow:0 12px 26px -14px rgba(1,33,105,.7)} .btn--navy:hover{background:var(--navy-800)} .btn--light{background:#fff;color:var(--navy)} .btn--light:hover{background:#eef3fb} .btn--lg{padding:1.1em 2em;font-size:1.02rem} /* ========================================================================== OUTROS DESTINOS (Cape Town) ========================================================================== */ .badge-new{display:inline-block;margin-left:.6em;background:var(--red);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.12em;padding:.35em .7em;border-radius:999px;vertical-align:middle;transform:translateY(-2px)} .plan{display:grid;gap:1px;margin:0 0 1.5rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line)} .plan div{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.15rem;background:var(--card)} .plan div:nth-child(even){background:var(--ice)} .plan .lbl{color:var(--muted);font-weight:600;font-size:.92rem} .plan .val{color:var(--navy);font-weight:800;letter-spacing:-.01em;white-space:nowrap} /* ========================================================================== HEADER / NAV ========================================================================== */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:60; transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease); padding-block:18px; } .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px} .site-header.is-stuck{background:rgba(2,18,55,.94);backdrop-filter:blur(12px);box-shadow:0 8px 30px -18px #000;padding-block:10px} .brand{display:flex;align-items:center;gap:12px;z-index:2} .brand img{height:53px;width:auto;transition:height .35s var(--ease)} .is-stuck .brand img{height:45px} .nav{display:flex;align-items:center;gap:2px} .nav a{ padding:.5em .52em;border-radius:999px;font-weight:600;font-size:.84rem;color:#eaf1fb; position:relative;transition:color .2s,background .2s;white-space:nowrap; } .nav a::after{content:"";position:absolute;left:50%;bottom:.35em;width:0;height:2px;background:var(--red);transition:width .25s var(--ease),left .25s var(--ease)} .nav a:hover,.nav a.active{color:#fff} .nav a:hover::after,.nav a.active::after{width:calc(100% - 1.7em);left:.85em} .nav__cta{margin-left:8px} .nav-toggle{display:none;background:none;border:0;cursor:pointer;width:46px;height:46px;border-radius:12px;align-items:center;justify-content:center;color:#fff} .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s} .nav-toggle span{position:relative} .nav-toggle span::before{position:absolute;top:-7px} .nav-toggle span::after{position:absolute;top:7px} body.nav-open .nav-toggle span{background:transparent} body.nav-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg)} body.nav-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg)} /* ========================================================================== HERO ========================================================================== */ .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;color:#fff;isolation:isolate;overflow:hidden} .hero__bg{position:absolute;inset:0;z-index:-2} .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;animation:heroZoom 18s var(--ease) forwards} @keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}} .hero__scrim{position:absolute;inset:0;z-index:-1; background: linear-gradient(180deg,rgba(2,18,55,.55) 0%,rgba(2,18,55,.12) 30%,rgba(2,18,55,.25) 62%,rgba(2,18,55,.82) 100%), linear-gradient(95deg,rgba(2,18,55,.7) 0%,rgba(2,18,55,.18) 48%,transparent 75%); } .hero .wrap{padding-block:140px 110px;width:100%} .hero__inner{max-width:680px} .hero__kicker{display:inline-flex;align-items:center;gap:.6em;background:var(--red);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;padding:.5em 1em;border-radius:999px;margin-bottom:1.1rem} .hero h1{font-size:clamp(2.8rem,1.2rem + 7vw,5.6rem);letter-spacing:-.04em;line-height:.96;text-shadow:0 4px 30px rgba(0,0,0,.35)} .hero h1 em{font-style:normal;color:var(--frost);display:block} .hero__sub{font-size:clamp(1.05rem,.6rem + 1vw,1.35rem);font-weight:500;max-width:34ch;margin:1.3rem 0 0;color:#eaf1fb;text-shadow:0 2px 16px rgba(0,0,0,.4)} .hero__meta{display:flex;flex-wrap:wrap;gap:14px;margin:2rem 0 0;align-items:center} .hero__badge{display:inline-flex;align-items:center;gap:.55em;border:2px solid rgba(255,255,255,.55);padding:.6em 1.1em;border-radius:12px;font-weight:700;letter-spacing:.02em} .hero__badge svg{width:1.2em;height:1.2em;fill:#fff} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem} .hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:1;color:#fff;opacity:.85;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase} .hero__scroll span{width:24px;height:38px;border:2px solid rgba(255,255,255,.6);border-radius:14px;position:relative} .hero__scroll span::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;background:#fff;border-radius:3px;transform:translateX(-50%);animation:scrollDot 1.8s var(--ease) infinite} @keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}} /* ========================================================================== PROGRAMA (intro + facts) ========================================================================== */ .prog{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center} .prog__text p{color:var(--muted);font-size:1.06rem} .prog__text .lead{font-size:clamp(1.15rem,.7rem + 1vw,1.4rem);color:var(--ink);font-weight:500;line-height:1.45;margin-bottom:1.4rem} .prog__media{position:relative} .prog__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:4/5;object-fit:cover;width:100%} .prog__media--logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;min-height:100%} .prog__media--logo img{width:auto;max-width:min(72%,290px);aspect-ratio:auto;object-fit:contain;border-radius:0;box-shadow:none;filter:drop-shadow(0 16px 32px rgba(2,18,55,.20))} .prog__badge{display:inline-flex;align-items:baseline;gap:.5em;background:var(--navy);color:#fff;padding:.85rem 1.4rem;border-radius:14px;box-shadow:var(--shadow);font-weight:600;font-size:.92rem;letter-spacing:.02em} .prog__badge strong{font-size:1.7rem;line-height:1;color:#fff} .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(40px,5vw,64px)} .fact{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.3rem;box-shadow:var(--shadow-sm)} .fact__ic{width:44px;height:44px;border-radius:12px;background:var(--ice);display:grid;place-items:center;margin-bottom:.9rem;color:var(--navy)} .fact__ic svg{width:22px;height:22px;fill:var(--navy)} .fact strong{display:block;font-size:1.05rem;letter-spacing:-.01em} .fact span{color:var(--muted);font-size:.92rem} /* ========================================================================== OBJETIVOS (icon grid) ========================================================================== */ .goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px} .goal{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .goal:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} .goal__ic{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),#0a3a8c)} .goal__ic svg{width:22px;height:22px;fill:#fff} .goal h3{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.2rem} .goal p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.45} /* ========================================================================== INVERNO (why winter) ========================================================================== */ .winter{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px);align-items:center} .winter__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)} .winter__media img{width:100%;aspect-ratio:4/5;object-fit:cover} .winter__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(1,33,105,.55))} .snowflake{position:absolute;fill:var(--frost);opacity:.92;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))} .winter__list{display:grid;gap:14px} .wcard{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-left:none;border-radius:var(--radius);padding:1.15rem 1.3rem;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease)} .wcard:hover{transform:translateX(6px)} .wcard__n{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--ice-2);color:var(--navy);font-weight:800;display:grid;place-items:center;font-size:1.1rem} .wcard h3{font-size:1.04rem;margin-bottom:.15rem} .wcard p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.4} .section--navy .wcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#eaf1fb} .section--navy .wcard p{color:#bccbe4} .section--navy .wcard__n{background:rgba(124,178,232,.18);color:#cfe0f7} /* ========================================================================== PRÓXIMA VIAGEM (highlight band) ========================================================================== */ .trip{position:relative;overflow:hidden;background-size:cover;background-position:center;background-attachment:fixed} .trip::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(120deg,rgba(1,18,55,.96) 0%,rgba(1,25,80,.9) 45%,rgba(2,30,95,.78) 100%)} .trip > .wrap{position:relative;z-index:1} .trip__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center} .trip__dates{display:flex;gap:18px;flex-wrap:wrap} .dpill{flex:1 1 160px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:1.4rem 1.5rem;backdrop-filter:blur(4px)} .dpill span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--frost);font-weight:700} .dpill strong{display:block;font-size:clamp(1.8rem,1rem + 2vw,2.6rem);line-height:1.05;margin-top:.3rem;color:#fff} .dpill em{font-style:normal;color:#bccbe4;font-size:.92rem} .trip__count{margin-top:18px;display:inline-flex;align-items:center;gap:.6em;background:var(--red);color:#fff;font-weight:700;padding:.7em 1.2em;border-radius:999px} .trip__list{display:grid;gap:14px} .trip__item{display:flex;gap:14px;align-items:flex-start} .trip__item .ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center} .trip__item .ic svg{width:20px;height:20px;fill:#cfe0f7} .trip__item h3{font-size:1rem;color:#fff;margin-bottom:.1rem} .trip__item p{margin:0;color:#bccbe4;font-size:.93rem} /* ========================================================================== GRUPOS (comparison) ========================================================================== */ .groups{display:grid;grid-template-columns:1fr 1fr;gap:24px} .gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .gcard__age{display:inline-flex;align-items:center;gap:.5em;font-weight:800;font-size:.85rem;letter-spacing:.04em;color:#fff;background:var(--navy);padding:.5em 1em;border-radius:999px;margin-bottom:1.2rem} .gcard--alt .gcard__age{background:var(--red)} .gcard h3{font-size:1.5rem;margin-bottom:.3rem} .gcard .sub{color:var(--muted);margin-bottom:1.3rem} .gcard li{display:flex;gap:.7em;align-items:flex-start;padding:.5em 0;border-top:1px solid var(--line);color:var(--ink);font-size:.96rem} .gcard li:first-of-type{border-top:none} .gcard li svg{flex:0 0 auto;width:20px;height:20px;margin-top:.15em;fill:var(--navy)} .gcard--alt li svg{fill:var(--red)} /* ========================================================================== ESCOLA + FAMÍLIA (split feature) ========================================================================== */ .feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center} .feature--rev .feature__media{order:2} .feature__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative} .feature__media img{width:100%;aspect-ratio:5/4;object-fit:cover} .feature__media .chip{position:absolute;left:18px;top:18px;background:rgba(2,18,55,.85);color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.04em;padding:.5em 1em;border-radius:999px;backdrop-filter:blur(4px)} .feature__text p{color:var(--muted);font-size:1.05rem} .benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1.4rem} .benefit{display:flex;gap:.7em;align-items:center;background:var(--ice);border-radius:12px;padding:.8em 1em;font-weight:600;font-size:.93rem} .benefit svg{flex:0 0 auto;width:20px;height:20px;fill:var(--navy)} .section--ice .benefit{background:#fff;border:1px solid var(--line)} /* ========================================================================== CARD GRID (passeios / cidades) ========================================================================== */ .cardgrid{display:grid;gap:clamp(14px,1.6vw,20px)} .cardgrid--p{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))} .cardgrid--c{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .pcard{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow-sm);cursor:pointer;background:var(--navy-900)} .cardgrid--c .pcard{aspect-ratio:4/3} .pcard img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,18,55,0) 38%,rgba(2,18,55,.86) 100%)} .pcard:hover img{transform:scale(1.07)} .pcard__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.1rem 1.15rem;color:#fff} .pcard__cap .k{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--frost);font-weight:700;margin-bottom:.2rem} .pcard__cap h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em} .pcard__cap p{margin:.35rem 0 0;font-size:.86rem;color:#cdd9ed;opacity:0;max-height:0;transition:opacity .35s var(--ease),max-height .35s var(--ease)} .pcard:hover .pcard__cap p,.pcard:focus-visible .pcard__cap p{opacity:1;max-height:80px} .pcard__zoom{position:absolute;top:12px;right:12px;z-index:1;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:.3s var(--ease)} .pcard:hover .pcard__zoom{opacity:1;transform:scale(1)} .pcard__zoom svg{width:16px;height:16px;fill:#fff} /* ========================================================================== ROTEIRO — signature route timeline ========================================================================== */ .route{position:relative;max-width:880px;margin-inline:auto} .route__line{position:absolute;left:31px;top:14px;bottom:14px;width:3px;background:linear-gradient(180deg,var(--frost),rgba(124,178,232,.25));border-radius:3px} .stop{position:relative;display:grid;grid-template-columns:64px 1fr;gap:6px;padding-block:10px;align-items:flex-start} .stop__dot{position:relative;z-index:1;width:64px;display:flex;justify-content:center} .stop__dot i{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--frost);margin-top:24px;display:grid;place-items:center} .stop--travel .stop__dot i{border-color:var(--red);width:34px;height:34px;margin-top:16px;background:var(--red)} .stop--host .stop__dot i{border-color:#2e9e5b} .stop--travel .stop__dot i svg{width:18px;height:18px;fill:#fff} .stop--flight .stop__dot i{border-color:var(--navy);width:34px;height:34px;margin-top:16px;background:var(--navy)} .stop--flight .stop__dot i svg{width:17px;height:17px;fill:#fff} .stop__card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.25rem;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .stop__card:hover{transform:translateX(5px);box-shadow:var(--shadow)} .stop__date{display:flex;align-items:baseline;gap:.6em;margin-bottom:.3rem;flex-wrap:wrap} .stop__date .day{font-weight:800;color:var(--navy);font-size:1.05rem;letter-spacing:-.01em} .stop__date .dow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)} .stop__date .badge{margin-left:auto;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25em .7em;border-radius:999px} .badge--class{background:var(--ice-2);color:var(--navy)} .badge--trip{background:#fbe2e6;color:var(--red-600)} .badge--fly{background:#dde7fb;color:var(--navy)} .badge--host{background:#e6f3ec;color:#1f7a45} .badge--free{background:#eef2f7;color:#5a6a85} .stop__card p{margin:0;color:var(--ink);font-size:.96rem} .stop__card .cls{color:var(--navy);font-weight:700} .route__note{margin-top:24px;text-align:center;color:var(--muted);font-size:.92rem;font-style:italic} /* ========================================================================== GALERIA (photo wall) ========================================================================== */ .gallery{columns:4 200px;column-gap:14px} .gallery figure{margin:0 0 14px;break-inside:avoid;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;position:relative;background:var(--navy-900)} .gallery img{width:100%;transition:transform .6s var(--ease),filter .4s} .gallery figure::after{content:"";position:absolute;inset:0;background:rgba(1,33,105,0);transition:background .35s} .gallery figure:hover img{transform:scale(1.06)} .gallery figure:hover::after{background:rgba(1,33,105,.12)} /* ========================================================================== DEPOIMENTOS (videos + quotes) ========================================================================== */ .videos{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:clamp(36px,5vw,56px)} .vcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)} .vcard__frame{position:relative;background:#000;aspect-ratio:9/13;max-height:560px} .vcard video{width:100%;height:100%;object-fit:cover;display:block} .vcard__meta{padding:1.1rem 1.3rem;display:flex;align-items:center;gap:.7em} .vcard__meta .av{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800} .vcard__meta h3{font-size:1.05rem;margin:0} .vcard__meta span{font-size:.85rem;color:var(--muted)} .quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px} .quote{background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem);position:relative;overflow:hidden} .quote--red{background:var(--red)} .quote__mark{font-size:5rem;line-height:.5;font-weight:800;opacity:.18;position:absolute;top:.4em;left:.3em} .quote p{font-size:clamp(1.1rem,.7rem + 1vw,1.35rem);font-weight:500;font-style:italic;line-height:1.45;position:relative;margin:0 0 1rem} .quote cite{font-style:normal;font-weight:700;color:#dbe6fa;font-size:.92rem} .quote--red cite{color:#ffe2e6} /* ========================================================================== SOBRE (about — editorial) ========================================================================== */ .about{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,72px);align-items:center} .about__media{position:relative} .about__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:4/5;object-fit:cover;width:100%} .about__crest{position:absolute;right:-16px;bottom:-16px;background:#fff;border-radius:20px;padding:1rem 1.2rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:.7em} .about__crest img{height:40px;width:auto;box-shadow:none;border-radius:0;aspect-ratio:auto} .about__text p{color:#cdd9ee} .about__text .lead{color:#fff;font-size:clamp(1.15rem,.7rem + 1vw,1.45rem);font-weight:500;line-height:1.45;margin-bottom:1.2rem} .about__sign{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:14px} .about__sign .nm{font-weight:800;color:#fff} .about__sign .rl{font-size:.86rem;color:#bccbe4} .cliffs-note{display:inline-flex;align-items:center;gap:.6em;background:rgba(124,178,232,.16);color:#dbe6fa;font-size:.84rem;padding:.55em 1em;border-radius:999px;margin-bottom:1.4rem;font-weight:600} /* ========================================================================== PARCEIRO (Allegra) ========================================================================== */ .partner{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,56px);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.8rem,4vw,3rem);box-shadow:var(--shadow-sm)} .partner__logo{background:#fff;border-radius:var(--radius);display:grid;place-items:center;padding:1.4rem;box-shadow:var(--shadow-sm);border:1px solid var(--line)} .partner__logo img{max-width:260px} .partner h3{font-size:clamp(1.4rem,.9rem + 1.5vw,2rem);margin-bottom:.5rem} .partner p{color:var(--muted)} .pservices{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.2rem} .pservices span{display:inline-flex;align-items:center;gap:.5em;background:var(--ice);border-radius:999px;padding:.55em 1em;font-weight:600;font-size:.9rem} .pservices svg{width:18px;height:18px;fill:var(--navy)} /* ========================================================================== CONTATO + FOOTER ========================================================================== */ .contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:stretch} .contact__card{display:grid;gap:14px;align-content:start} .crow{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:1.1rem 1.3rem;transition:background .25s,transform .25s var(--ease)} .crow:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)} .crow .ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--red);display:grid;place-items:center} .crow .ic svg{width:22px;height:22px;fill:#fff} .crow .k{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--frost);font-weight:700} .crow .v{font-weight:600;color:#fff;font-size:1.02rem;word-break:break-word} .contact__map{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);min-height:340px;border:1px solid rgba(255,255,255,.14)} .contact__map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.2) contrast(1.05)} .contact__cta{margin-top:clamp(36px,5vw,56px);text-align:center;background:linear-gradient(135deg,var(--red),#e23b52);border-radius:var(--radius-lg);padding:clamp(2rem,5vw,3.4rem);color:#fff} .contact__cta h3{font-size:clamp(1.6rem,1rem + 2vw,2.6rem);margin-bottom:.6rem} .contact__cta p{color:#ffe2e6;max-width:46ch;margin-inline:auto;margin-bottom:1.6rem;font-size:1.05rem} .contact__cta .btn{box-shadow:0 14px 30px -12px rgba(0,0,0,.4)} .footer{background:var(--navy-900);color:#aebed8;padding-block:clamp(48px,7vw,72px) 28px} .footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)} .footer__brand img{height:46px;width:auto;margin-bottom:1rem} .footer__brand p{max-width:36ch;font-size:.95rem;color:#9fb1cf} .footer h4{color:#fff;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem} .footer__col a{display:block;padding:.35em 0;color:#aebed8;font-size:.95rem;transition:color .2s,transform .2s var(--ease)} .footer__col a:hover{color:#fff;transform:translateX(4px)} .footer__social{display:flex;gap:12px;margin-top:1rem} .footer__social a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background .25s,transform .25s var(--ease)} .footer__social a:hover{background:var(--red);transform:translateY(-3px)} .footer__social svg{width:20px;height:20px;fill:#fff} .footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:.85rem;color:#8295b4} .footer__bottom a{color:#aebed8} /* ---------- back to top + floating whatsapp ---------- */ .to-top{position:fixed;right:20px;bottom:20px;z-index:50;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s var(--ease)} .to-top.show{opacity:1;visibility:visible;transform:none} .to-top svg{width:22px;height:22px;fill:#fff} .wa-float{position:fixed;right:20px;bottom:78px;z-index:50;width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(37,211,102,.7);transition:transform .3s var(--ease)} .wa-float:hover{transform:scale(1.08)} .wa-float svg{width:30px;height:30px;fill:#fff} /* ---------- lightbox ---------- */ .lb{position:fixed;inset:0;z-index:200;background:rgba(2,12,33,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s} .lb.open{opacity:1;visibility:visible} .lb img{max-width:92vw;max-height:84vh;border-radius:10px;box-shadow:0 30px 80px -20px #000} .lb__cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#fff;font-weight:600;letter-spacing:.02em} .lb__btn{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;width:54px;height:54px;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background .2s} .lb__btn:hover{background:rgba(255,255,255,.25)} .lb__btn svg{width:26px;height:26px;fill:#fff} .lb__close{top:20px;right:20px} .lb__prev{left:18px;top:50%;transform:translateY(-50%)} .lb__next{right:18px;top:50%;transform:translateY(-50%)} /* ========================================================================== REVEAL ANIMATION ========================================================================== */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .hero__bg img{animation:none} .hero__scroll span::after,.wa-float{animation:none} } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1080px){ .facts{grid-template-columns:repeat(2,1fr)} } @media (max-width:1120px){ .nav{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);flex-direction:column;justify-content:flex-start; background:var(--navy-900);padding:90px 28px 32px;gap:6px;transform:translateX(100%);visibility:hidden; transition:transform .35s var(--ease),visibility 0s .35s;box-shadow:-20px 0 60px -20px #000;align-items:stretch; z-index:65;overflow-y:auto;-webkit-overflow-scrolling:touch} body.nav-open .nav{transform:none;visibility:visible;transition:transform .35s var(--ease)} .nav-scrim{position:fixed;inset:0;background:rgba(2,12,33,.55);opacity:0;visibility:hidden; transition:opacity .35s var(--ease),visibility 0s .35s;z-index:55} body.nav-open .nav-scrim{opacity:1;visibility:visible;transition:opacity .35s var(--ease)} .nav a{padding:.85em 1em;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0} .nav a::after{display:none} .nav__cta{margin:14px 0 0} .nav__cta .btn{width:100%} .nav-toggle{display:flex;z-index:70} .site-header,.site-header.is-stuck{background:rgba(2,18,55,.97);-webkit-backdrop-filter:none;backdrop-filter:none} } @media (max-width:960px){ .prog,.winter,.trip__grid,.groups,.feature,.about,.partner,.contact,.videos,.quotes{grid-template-columns:1fr} .trip{background-attachment:scroll} .feature--rev .feature__media{order:0} .prog__media,.about__media,.winter__media{max-width:520px;margin-inline:auto} .about__crest{right:12px} .gallery{columns:3 160px} .footer__top{grid-template-columns:1fr 1fr} .footer__brand{grid-column:1 / -1} } @media (max-width:620px){ :root{--gutter:20px} .facts,.benefits{grid-template-columns:1fr 1fr} .cardgrid--p{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .gallery{columns:2 140px} .hero__cta{flex-direction:column;align-items:stretch} .hero__cta .btn{width:100%} .stop{grid-template-columns:48px 1fr} .stop__dot{width:48px} .route__line{left:23px} .quote__mark{font-size:3.5rem} .to-top{right:14px;bottom:14px} .wa-float{right:14px;bottom:70px} .footer__bottom{flex-direction:column;text-align:center} } @media (max-width:380px){ .facts{grid-template-columns:1fr} .benefits{grid-template-columns:1fr} }