/* ==========================================================================
   FLORIPA STAND UP PADDLE — Florianópolis, SC
   Spec mockup. Structural spine borrowed wholesale from the "eco+" charter
   reference: sticky topbar with phone and hours, hero over water with a stat
   strip docked to its lower edge, a search widget as a floating white card,
   product cards carrying a real "from R$ X" price, a destinations grid, a
   testimonials row and a journal.

   ⚠ The eco FRAMING is borrowed too, because this operator genuinely describes
     itself as eco-tourism. The LUXURY-CHARTER REGISTER is not: this is
     paddle-and-kayak adventure, not chartered leisure.

   ⭐ THE DESIGN PROBLEM: twelve tours, twelve destinations, twelve real prices.
     This is a CATALOGUE business, and the first job is making twelve products
     comparable at a glance without exhausting anyone. So the tour card IS the
     structural system, and a filter rail turns the list into something
     browsable. Sunrise tours (three of twelve) get their own filter and their
     own treatment, because departure time is the single most decision-relevant
     attribute in the catalogue.

   ⭐ THE RARE PART: on this lead the prices, the CNPJ and the product list are
     all VERIFIED. The mockup's job is not to fill gaps but to make an existing
     catalogue legible, searchable and shareable. What is genuinely missing —
     duration on every tour, meeting points, minimum ages beyond one — is
     marked, because those are material terms.

   ⚠ Palette PROPOSED — their current site is a hosted Paytour storefront and
     no brand file was available. [CONFIRM against their logo]

   ⚠ CONTRAST (WCAG 2.1 AA):
       · Ink #12211C on Bone #FBFAF6 ≈ 15.9:1 — AAA
       · Pine #1B4D3E on Bone ≈ 8.6:1 — AAA
       · Amber #E9873A on Bone ≈ 2.6:1 — FAILS. It is a BUTTON FILL and a
         LARGE price line only; small amber text uses #B4600F (≈ 4.6:1).
       · Clear Water #3FA8A0 on Bone ≈ 2.4:1 — chips only, always with Ink
         text on a tinted ground, never as a text colour.
   ========================================================================== */

:root{
  --pine:#1B4D3E;
  --pine-dk:#0C2A22;
  --amber:#E9873A;
  --amber-lt:#F6C177;
  --amber-dk:#B4600F;
  --bone:#FBFAF6;
  --water:#3FA8A0;
  --sand:#EFE4CE;
  --ink:#12211C;
  --body:#4A5A53;
  --line:#E2DCCC;

  --g-pine:linear-gradient(165deg,var(--pine) 0%,var(--pine-dk) 100%);
  --g-amber:linear-gradient(135deg,var(--amber) 0%,var(--amber-lt) 100%);
  --g-cta:linear-gradient(135deg,var(--amber) 0%,#D0701F 100%);
  --g-water:linear-gradient(180deg,var(--water) 0%,var(--bone) 100%);
  --g-sand:linear-gradient(180deg,var(--sand) 0%,var(--bone) 100%);
  --g-scrim:linear-gradient(0deg,rgba(27,77,62,.86) 0%,rgba(27,77,62,.26) 55%,rgba(27,77,62,.04) 100%);

  --serif:"Bitter",Georgia,serif;      /* place names deserve weight */
  --sans:"Manrope","Helvetica Neue",Arial,sans-serif;

  --wrap:1320px;
  --gut:clamp(18px,4.4vw,56px);
  --r:12px;
  --r-sm:8px;
  --sh:0 8px 28px rgba(18,33,28,.10);
  --sh-lift:0 20px 46px rgba(18,33,28,.18);
  --ease:cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--body);
  font-family:var(--sans);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:600;line-height:1.14;
  letter-spacing:-.018em;color:var(--ink)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--amber-dk);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--pine);color:var(--bone);padding:12px 20px}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--n{max-width:900px}
.sec{padding-block:clamp(50px,7vw,110px);position:relative}
.sec--t{padding-block:clamp(30px,4.2vw,58px)}
.sandbg{background-image:var(--g-sand)}
.waterbg{background-image:var(--g-water)}
.pine{background-image:var(--g-pine);color:#BFD3CB}
.pine h1,.pine h2,.pine h3{color:var(--bone)}
.pine .lede{color:#A5BEB4}
.pine .eyebrow{color:var(--amber-lt)}
/* the dark, amber-lit band for the three time-of-day tours */
.night{background:#0B1A17;color:#B5C6BF}
.night h2,.night h3{color:var(--bone)}
.night .lede{color:#96AAA2}
.night .eyebrow{color:var(--amber-lt)}

.eyebrow{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--pine);margin:0 0 14px}
.h-xl{font-size:clamp(2.3rem,5.6vw,4.2rem)}
.h-lg{font-size:clamp(1.9rem,3.7vw,3rem)}
.h-md{font-size:clamp(1.35rem,2.2vw,1.85rem)}
.lede{font-size:clamp(1rem,1.32vw,1.14rem);color:var(--body);max-width:62ch}
.sec-head{max-width:62ch;margin-bottom:clamp(26px,3.4vw,46px)}
.sec-head--row{max-width:none;display:flex;flex-wrap:wrap;gap:22px;
  justify-content:space-between;align-items:flex-end}

/* ---------- [CONFIRM] ---------- */
.cfm{display:inline-block;border:1px dashed var(--amber-dk);background:rgba(233,135,58,.12);
  color:var(--amber-dk);padding:.05em .5em;border-radius:var(--r-sm);
  font-size:.85em;font-weight:700;font-style:normal}
.pine .cfm,.night .cfm,.card__i .cfm{border-color:var(--amber-lt);background:rgba(246,193,119,.2);color:var(--amber-lt)}
.cfm-note{border:1px dashed var(--amber-dk);background:rgba(233,135,58,.08);border-radius:var(--r-sm);
  padding:15px 18px;color:var(--amber-dk);font-size:.92rem;margin:0 0 22px}
.pine .cfm-note,.night .cfm-note{border-color:var(--amber-lt);background:rgba(246,193,119,.12);color:var(--amber-lt)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:999px;font-size:.83rem;font-weight:800;letter-spacing:.03em;
  background-image:var(--g-cta);color:#fff;box-shadow:var(--sh);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),filter .28s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-lift);filter:brightness(1.06)}
.btn .ar{transition:transform .28s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn--pine{background-image:var(--g-pine)}
.btn--ghost{background:transparent;background-image:none;color:var(--pine);
  border:2px solid var(--pine);box-shadow:none}
.btn--ghost:hover{background:var(--pine);color:var(--bone)}
.pine .btn--ghost,.night .btn--ghost,.hero .btn--ghost{color:var(--bone);border-color:var(--bone)}
.pine .btn--ghost:hover,.night .btn--ghost:hover,.hero .btn--ghost:hover{background:var(--bone);color:var(--pine)}
.btn--wa{background-image:linear-gradient(135deg,#25D366 0%,#12A150 100%)}
.btn--sm{padding:10px 18px;font-size:.74rem}
.btn--full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- Topbar ---------- */
.top{background:var(--pine-dk);color:#A5BEB4;font-size:.8rem;padding-block:9px}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top a:hover{color:var(--bone)}
.top__l,.top__r{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pills{display:flex;gap:5px}
.pills a{padding:3px 11px;border-radius:999px;border:1px solid rgba(251,250,246,.3)}
.pills a.on{background:var(--amber);color:#fff;border-color:var(--amber);font-weight:800}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:90;background:rgba(251,250,246,.97);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);padding-block:14px;
  transition:padding .28s var(--ease),box-shadow .28s var(--ease)}
.hdr.is-stuck{padding-block:8px;box-shadow:var(--sh)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-family:var(--serif);font-size:1.28rem;font-weight:700;color:var(--pine);line-height:1.04}
.brand small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber-dk);font-weight:800}
.nav{display:flex;align-items:center;gap:19px}
.nav a{font-size:.85rem;font-weight:700;color:var(--body);padding-block:5px;
  border-bottom:2px solid transparent;transition:.24s}
.nav a:hover{color:var(--pine);border-bottom-color:var(--amber)}
.hdr__r{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:2.5px;border-radius:2px;
  background:var(--pine);transition:.28s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:89;background:var(--bone);display:flex;flex-direction:column;
  justify-content:center;gap:0;padding:96px var(--gut) 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:.3s var(--ease)}
.mnav.on{opacity:1;visibility:visible;transform:none}
.mnav a{font-family:var(--serif);font-size:clamp(1.5rem,6.4vw,2.2rem);color:var(--ink);
  padding-block:12px;border-bottom:1px solid var(--line)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(86svh,800px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2;will-change:transform}
.hero__bg img{width:100%;height:112%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:var(--g-scrim)}
.hero__in{padding-block:0 clamp(96px,13vh,164px);max-width:860px}
.hero h1{color:var(--bone);font-size:clamp(2.2rem,5.2vw,3.9rem);text-shadow:0 2px 32px rgba(12,42,34,.55)}
.hero p{color:rgba(251,250,246,.95);max-width:52ch;margin-top:18px;font-size:1.06rem}
.hero .eyebrow{color:var(--amber-lt)}

/* ---------- Stat strip.
   Three of four values are REAL and verified; the fourth is honestly blank. -- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--bone);
  position:relative;z-index:5;margin-top:-72px;border-radius:var(--r);
  box-shadow:var(--sh-lift);overflow:hidden;border:1px solid var(--line)}
.stat{padding:22px clamp(14px,2vw,26px);border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,2rem);
  font-weight:700;color:var(--pine);line-height:1.05}
.stat span{font-size:.84rem;display:block;margin-top:5px}

/* ---------- ⭐ THE FILTER RAIL — turns twelve products into a browsable set - */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,30px)}
.filters button{font-size:.78rem;font-weight:700;padding:10px 18px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--body);transition:.24s var(--ease);
  white-space:nowrap}
.filters button:hover{border-color:var(--pine);color:var(--pine)}
/* never colour-only: the active filter fills and carries aria-pressed */
.filters button[aria-pressed="true"]{background-image:var(--g-pine);color:var(--bone);border-color:transparent}
.count{font-size:.85rem;color:var(--body);margin-bottom:16px}

/* ---------- ⭐ THE TOUR CARD — the entire structural system ---------- */
.tours{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
.tour{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tour:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.tour[hidden]{display:none}
.tour__i{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.tour__i img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tour:hover .tour__i img{transform:scale(1.05)}
/* the type tag — sunrise tours get the amber treatment, because departure time
   is the most decision-relevant attribute in the whole catalogue */
.tag{position:absolute;left:12px;top:12px;z-index:2;font-size:.68rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px;
  background:rgba(251,250,246,.95);color:var(--pine)}
.tag--sun{background-image:var(--g-amber);color:#3A2107}
.tag--moon{background:#101E2E;color:#CFE0F2}
/* the 18+ restriction is the one age policy they actually publish, so it is
   displayed prominently rather than buried in a description */
.tag--age{right:12px;left:auto;background:var(--ink);color:#fff}
.tour__b{padding:18px 19px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.tour__b h3{font-size:1.12rem;line-height:1.24}
.tour__b .gloss{font-size:.82rem;color:var(--body);margin:-4px 0 0}
.icons{display:flex;flex-wrap:wrap;gap:6px}
.icons span{font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:999px;
  background:rgba(63,168,160,.14);color:#155F5A}
.icons span.cfmchip{background:rgba(233,135,58,.12);color:var(--amber-dk);
  border:1px dashed var(--amber-dk)}
.next{font-size:.78rem;font-weight:700;color:var(--pine);display:inline-flex;align-items:center;gap:6px}
.next::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--water)}
.price{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.price b{font-family:var(--serif);font-size:1.6rem;font-weight:700;color:var(--amber-dk);line-height:1}
.price span{font-size:.76rem}
.tour .btn{margin-top:10px}

/* ---------- Search widget (charter-ref device) ---------- */
.search{background:#fff;border-radius:var(--r);box-shadow:var(--sh-lift);border:1px solid var(--line);
  padding:clamp(18px,2.4vw,28px);position:relative;z-index:4}
.search__g{display:grid;grid-template-columns:1.4fr 1fr .8fr 1fr auto;gap:14px;align-items:end}
.field label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pine);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;font:inherit;font-size:.95rem;
  background:var(--bone);border:1.5px solid var(--line);border-radius:var(--r-sm);color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber)}
.search__note{margin:13px 0 0;font-size:.8rem}

/* ---------- Destinations map rail ---------- */
.mapwrap{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:rgba(63,168,160,.12);aspect-ratio:16/9;min-height:320px}
.mapwrap__grid{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(27,77,62,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(27,77,62,.14) 1px,transparent 1px);
  background-size:38px 38px}
.pin{position:absolute;transform:translate(-50%,-50%);z-index:3;width:18px;height:18px;
  border-radius:50%;background:var(--amber);border:3px solid #fff;box-shadow:0 2px 8px rgba(18,33,28,.34);
  cursor:pointer;transition:transform .22s var(--ease)}
.pin:hover,.pin[aria-pressed="true"]{transform:translate(-50%,-50%) scale(1.35)}
.pin[aria-pressed="true"]{background:var(--pine)}
.pincard{position:absolute;left:16px;bottom:16px;right:16px;z-index:4;background:#fff;
  border-radius:var(--r-sm);padding:16px 18px;box-shadow:var(--sh-lift);max-width:380px}
.pincard b{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--ink);margin-bottom:4px}
.pincard p{font-size:.86rem;margin:0 0 10px}
.destlist{display:flex;gap:9px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;margin-top:16px}
.destlist::-webkit-scrollbar{display:none}
.destlist button{flex:0 0 auto;font-size:.8rem;font-weight:700;padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--body);white-space:nowrap;transition:.24s}
.destlist button:hover{border-color:var(--pine);color:var(--pine)}
.destlist button[aria-pressed="true"]{background-image:var(--g-pine);color:var(--bone);border-color:transparent}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#fff}
.step{padding:24px 22px;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step b{display:block;font-family:var(--serif);font-size:2rem;color:var(--amber-dk);line-height:1;margin-bottom:10px}
.step h3{font-size:1.04rem;margin-bottom:6px}
.step p{font-size:.9rem;margin:0}

/* ---------- Safety block ---------- */
.safety{display:grid;gap:0;border-top:1px solid rgba(251,250,246,.2)}
.safety li{list-style:none;display:grid;grid-template-columns:240px 1fr auto;gap:clamp(12px,2vw,26px);
  padding-block:18px;border-bottom:1px solid rgba(251,250,246,.2);align-items:baseline}
.safety b{color:var(--bone);font-size:1rem}
.safety p{margin:0;font-size:.9rem;color:#A5BEB4}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:19px 44px 19px 0;font-family:var(--serif);font-size:1.08rem;font-weight:600;
  color:var(--ink);cursor:pointer;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--amber-dk);font-size:1.6rem;transition:transform .24s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{padding:0 0 19px;margin:0;font-size:.95rem;max-width:72ch}

/* ---------- Journal + empty states ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.post:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.post__i{aspect-ratio:16/9;overflow:hidden;background:var(--sand)}
.post__i img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post:hover .post__i img{transform:scale(1.05)}
.post__b{padding:18px 20px 22px}
.post h3{font-size:1.04rem;margin-bottom:7px}
.post p{font-size:.9rem;margin:0}
/* ⚠ NO review-card, star-row or aggregate-score styling exists in this file.
   Their TripAdvisor rating and review count are unverified, and a score is
   never synthesised. */
.empty{border:2px dashed var(--amber-dk);background:rgba(233,135,58,.08);border-radius:var(--r);
  padding:clamp(26px,3.6vw,50px);text-align:center}
.empty p{max-width:60ch;margin-inline:auto;font-size:.96rem;color:var(--amber-dk)}

/* ---------- Forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,38px);box-shadow:var(--sh)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;margin:6px 0 18px}
.consent input{margin-top:5px;accent-color:var(--amber)}
.consent a{color:var(--pine);text-decoration:underline}
.dist{list-style:none;margin:20px 0 0;padding:0}
.dist li{display:flex;justify-content:space-between;gap:16px;padding-block:12px;
  border-bottom:1px solid var(--line);font-size:.93rem}
.dist li:last-child{border-bottom:0}
.dist b{color:var(--ink);font-weight:700}
.pine .dist li{border-color:rgba(251,250,246,.2)}
.pine .dist b{color:var(--bone)}

/* ---------- CTA band ---------- */
.ctaband{background-image:var(--g-cta);color:#fff;text-align:center}
.ctaband h2{color:#fff}

/* ---------- Footer ---------- */
.ftr{background-image:var(--g-pine);color:#A5BEB4;padding-block:clamp(44px,5.6vw,84px) 0}
.ftr h4{font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-lt);margin-bottom:16px}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(22px,3vw,44px)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.9rem}
.ftr a:hover{color:var(--bone)}
.ftr .brand{color:var(--bone);display:block;margin-bottom:14px}
.ftr .brand small{color:var(--amber-lt)}
.pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pay span{border:1px solid rgba(251,250,246,.3);border-radius:var(--r-sm);padding:7px 12px;font-size:.76rem}
.ftr__bot{margin-top:clamp(26px,3.4vw,48px);border-top:1px solid rgba(251,250,246,.18);
  padding-block:20px 28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  align-items:center;font-size:.8rem;color:#7D958B}

/* ---------- Sticky WhatsApp + mobile bar ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:80;width:58px;height:58px;border-radius:50%;
  background-image:linear-gradient(135deg,#25D366 0%,#12A150 100%);display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(18,161,80,.42);transition:transform .26s var(--ease)}
.wa:hover{transform:scale(1.07)}
.wa svg{width:29px;height:29px;fill:#0B2E17}
.mbar{display:none}

/* ---------- LGPD.
   Their current notice is a single "Entendi" button with no reject option and
   no granular control — that is not valid consent. This replaces it. -------- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:95;background:#fff;
  border-top:3px solid var(--amber);padding:20px var(--gut);
  transform:translateY(112%);transition:transform .36s var(--ease)}
.ck.on{transform:none}
.ck__in{max-width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1.5fr 1fr;
  gap:22px;align-items:center}
.ck p{font-size:.88rem;margin:0}
.ck a{color:var(--pine);text-decoration:underline}
.ck__opts{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px;font-size:.85rem}
.ck__opts label{display:flex;gap:8px;align-items:center}
.ck__opts input{accent-color:var(--amber)}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}

/* ---------- Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(20px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---------- Legal ---------- */
.legal{max-width:880px;margin-inline:auto;padding-block:clamp(44px,6vw,88px)}
.legal h2{margin:32px 0 12px;font-size:1.55rem}
.legal h3{margin:22px 0 10px;font-size:1.18rem}
.legal ul{padding-left:20px;display:grid;gap:8px;margin-bottom:18px}
.legal table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.92rem}
.legal th,.legal td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.legal th{background:var(--sand);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pine);font-weight:800}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:block}
  .tours{grid-template-columns:repeat(3,1fr)}
  .search__g{grid-template-columns:repeat(2,1fr)}
  .search__g .btn{grid-column:1/-1}
}
@media (max-width:900px){
  .tours,.posts{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);margin-top:-40px}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2n){border-right:0}
  .step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ck__in{grid-template-columns:1fr}
  .ck__btns{justify-content:flex-start}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .safety li{grid-template-columns:1fr;row-gap:6px}
  .sec-head--row{flex-direction:column;align-items:flex-start}
  .pincard{max-width:none}
}
@media (max-width:620px){
  body{padding-bottom:62px}
  .wa{bottom:76px;width:52px;height:52px}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:0;position:fixed;left:0;right:0;bottom:0;
    z-index:82;padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--line)}
  .mbar .btn{border-radius:0;box-shadow:none;padding:17px 8px}
  .mbar .btn:hover{transform:none}
  .tours,.posts,.stats,.steps,.search__g,.fr,.ftr__grid{grid-template-columns:1fr}
  .stat,.step{border-right:0;border-bottom:1px solid var(--line)}
  /* the filter rail scrolls horizontally rather than wrapping into four rows */
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:8px}
  .filters::-webkit-scrollbar{display:none}
  .top__in{justify-content:center;text-align:center}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
  .destlist{scroll-behavior:auto}
}

/* ---------------------------------------------------- responsive tables */
/* A data table with several prose columns has a min-content width far
   wider than a phone. Without its own scroll box it widens the whole
   document and the page scrolls sideways. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll>table{margin:0}

/* ------------------------------------------------- overflow guard
   Nothing may widen the document. Form controls and replaced elements
   cap at their container; flex/grid children get min-width:0 so they
   are allowed to shrink below their content width; and the header's
   right-hand cluster wraps on a phone rather than pushing the page
   sideways. */
input,select,textarea,img,svg,video,iframe{max-width:100%}
.form,.mapwrap,.split__t,.hdr__r,.head-right{min-width:0}
.form,.mapwrap,.split__t{max-width:100%}
@media (max-width:820px){
  .hdr__r,.head-right{flex-wrap:wrap;justify-content:flex-end;row-gap:.4rem}
}

/* ------------------------------------------- legal-header-layout
   The LGPD privacy page is generated from a shared template and uses
   .hdr__cta for its header cluster. Most stylesheets in this batch define
   .hdr__r or .head-cta instead, so on those sites the cluster had no
   layout at all - block flow, and on a long brand name it ran off the
   screen. This defines it, keeps the back-link on one line, and lets the
   row wrap before anything overflows. */
.hdr__cta,.head-cta{display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
.hdr__cta .btn,.head-cta .btn{white-space:nowrap}
.hdr__cta .lang,.head-cta .lang{display:inline-flex;gap:.35rem;flex:0 0 auto}
@media (max-width:560px){
  .hdr__in,.head-in{flex-wrap:wrap;row-gap:.55rem}
  .hdr__in>.brand,.head-in>.brand{min-width:0;max-width:100%}
  .brand__n{white-space:normal;overflow-wrap:anywhere}
  .hdr__cta,.head-cta{width:100%;justify-content:flex-start}
}