/* ===========================================================================
   POUSADA OASYS FLORIPA — Florianópolis, SC
   [CONFIRM neighbourhood — the handle gives only "floripa"]
   Spec mockup. LEAD, not signed. Nothing here is client work.

   NO WEBSITE EXISTS. The only public presence is @oasys.floripa, behind a
   login wall, so not one business fact could be verified. Everything known
   comes from a single line in the source spreadsheet: "an independent
   lifestyle accommodation catering to vacationers and tourists."

   THE FEED IS THE BUSINESS, so the design argues that literally: the
   Instagram grid sits HIGH on the page, directly under the availability
   widget, not buried above the footer where the design reference puts its
   social links. The pitch is not "replace your feed" — it is "your feed is
   already your website; give it a storefront that takes bookings."

   The blanks are the pitch too. Three room cards ship as declared
   placeholders priced "Sob consulta", because showing a prospect exactly
   what they need to hand over is worth more than a polished fiction.

   PALETTE — proposed. Nothing sampled; there is nothing to sample from.
   [CONFIRM against their logo and photography.]

     --terra #C1603F  primary, CTAs
     --clay  #E5B79A  secondary surfaces, chips
     --bone  #F7F2EA  page background
     --olive #3B4034  nav, footer, headings
     --ink   #211E1A  body text

   CONTRAST — measured, not assumed (WCAG 2.1 AA / eMAG). The brief asked
   specifically whether terracotta clears 4.5:1 on bone. It does not:
     ink   #211E1A on bone #F7F2EA = 14.89:1 ✓ AAA  body text
     olive #3B4034 on bone         =  9.57:1 ✓ AAA  headings
     bone          on olive        =  9.57:1 ✓ AAA  reversed copy
     white         on olive        = 10.67:1 ✓ AAA
     terra #C1603F on bone         =  3.76:1 ✗ FAILS body text
     white         on terra        =  4.19:1 ✗ FAILS as a button label
     ink           on terra        =  3.96:1 ✗ FAILS too — neither text
              colour rescues the proposed hex, so the CTA FILL IS DARKENED
              to --terra-btn #A24C2F, where white measures 5.82:1 ✓ AA.
              The brief's own fallback was #A24C2F; it holds.
              Terracotta TEXT on bone uses --terra-deep #8E4128 = 6.42:1 ✓
     terra         on olive        =  2.55:1 ✗ — reversed accent is
              --terra-pale #E0A183 = 4.87:1 ✓ AA on olive.
     clay  #E5B79A on bone         =  1.63:1 ✗✗ — a FILL colour only.
     ink           on clay         =  9.15:1 ✓ AAA, which is why every clay
              chip carries ink text and never white.
     clay          on olive        =  5.88:1 ✓ AA  — clay reads reversed.
   =========================================================================== */

:root{
  --terra:#C1603F;           /* ornament and fills only — fails as text */
  --terra-btn:#A24C2F;       /* white on it — 5.82:1 */
  --terra-deep:#8E4128;      /* terracotta text on light — 6.42:1 */
  --terra-pale:#E0A183;      /* terracotta on olive — 4.87:1 */
  --clay:#E5B79A;
  --bone:#F7F2EA;
  --olive:#3B4034;
  --olive-2:#2C3027;
  --ink:#211E1A;
  --muted:#5A5349;
  --line:rgba(33,30,26,.15);
  --line-d:rgba(247,242,234,.22);

  --grad-cta:linear-gradient(135deg,#C1603F 0%,#A24C2F 100%);
  --grad-dark:linear-gradient(180deg,#3B4034 0%,#2C3027 100%);
  --grad-wash:linear-gradient(180deg,#F7F2EA 0%,rgba(229,183,154,.12) 100%);
  --scrim:linear-gradient(0deg,rgba(33,30,26,.9) 0%,rgba(33,30,26,.3) 42%,rgba(33,30,26,0) 62%);

  --disp:"Bricolage Grotesque","Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:"DM Sans","Inter","Helvetica Neue",Arial,system-ui,sans-serif;

  --wrap:1280px;
  --gut:clamp(18px,4.4vw,58px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.66;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (max-width:900px){body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}}

h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.02;letter-spacing:-.03em;
  margin:0;text-wrap:balance;color:var(--olive)}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.8rem)}
h3{font-size:clamp(1.06rem,1.9vw,1.36rem)}
h4{font-family:var(--sans);margin:0}
p{margin:0 0 1.05em}
img{max-width:100%;display:block;height:auto}
a{color:var(--terra-deep);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--terra-deep);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;background:var(--olive);color:#fff;padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}

/* ── bands ──────────────────────────────────────────────────────────────── */
.sec{padding:clamp(52px,7.2vw,108px) 0}
.sec--wash{background:var(--grad-wash)}
.sec--clay{background:var(--clay)}
.sec--olive{background:var(--olive);color:var(--bone)}
.sec--dark{background:var(--grad-dark);color:var(--bone)}
.sec--olive h1,.sec--olive h2,.sec--olive h3,
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:#fff}
.sec--olive p,.sec--dark p{color:#DCD7CC}

.eyebrow{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;
  color:var(--terra-deep);margin:0 0 13px}
.sec--olive .eyebrow,.sec--dark .eyebrow,.hero .eyebrow{color:var(--terra-pale)}
.lede{font-size:clamp(1rem,1.6vw,1.16rem);color:var(--muted);max-width:64ch}
.sec--olive .lede,.sec--dark .lede{color:#D3CEC3}
.sec--clay .lede{color:#4A3E30}
.rule{height:3px;border:0;width:60px;background:var(--terra);margin:0 0 20px;border-radius:2px}

/* ── [CONFIRM] markers ──────────────────────────────────────────────────── */
.cfm{background:#FBEBCB;color:#463405;border:1px solid #A6841C;border-radius:5px;
  padding:.06em .42em;font-size:.88em;font-style:normal}
.sec--olive .cfm,.sec--dark .cfm,.ftr .cfm,.hero .cfm,.avail .cfm{
  background:#3A3722;color:#F5E9C4;border-color:#89773A}

.flag{border:1px solid #A6841C;border-left-width:4px;background:#FBEBCB;color:#463405;
  padding:18px 20px;margin:22px 0;font-size:.94rem;border-radius:var(--r)}
.flag strong{color:#2E2103}
.sec--olive .flag,.sec--dark .flag{background:rgba(229,183,154,.15);color:#F0E5D6;
  border-color:var(--clay)}
.sec--olive .flag strong,.sec--dark .flag strong{color:#fff}
.flag--terra{border:2px solid var(--terra-deep);border-left-width:6px;background:#FBE7DE;color:#4B1B0D}
.flag--terra strong{color:#331007}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border:0;cursor:pointer;text-decoration:none;font:inherit;
  font-size:.73rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  border-radius:999px;
  background:var(--terra-btn);color:#fff;              /* white on #A24C2F — 5.82:1 */
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 15px 30px -15px rgba(193,96,63,.95)}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--olive{background:var(--olive);color:#fff}
.btn--out{background:none;border:1.5px solid var(--olive);color:var(--olive)}
.btn--out:hover{background:rgba(59,64,52,.07);box-shadow:none}
.sec--olive .btn--out,.sec--dark .btn--out,.ftr .btn--out{
  border-color:rgba(255,255,255,.6);color:#fff}
.btn--sm{padding:10px 18px;font-size:.63rem}
[data-unconfirmed]{opacity:.62;cursor:not-allowed;filter:grayscale(.4)}

/* ── topbar ─────────────────────────────────────────────────────────────── */
.topbar{background:var(--olive-2);color:#ADB2A5;font-size:.76rem}
.topbar__in{max-width:var(--wrap);margin:0 auto;padding:8px var(--gut);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.topbar a{color:#EDE9E0;text-decoration:none}
.topbar a:hover{color:var(--terra-pale)}
.langs{margin-left:auto;display:flex;gap:2px;align-items:center}
.langs a{padding:3px 9px;color:#848A7C;text-decoration:none;letter-spacing:.12em;font-weight:700;
  border-radius:999px}
.langs a[aria-current="true"]{color:var(--ink);background:var(--clay)}
.langs i{font-style:normal;color:#2A2F26}

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(247,242,234,.97);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
@supports (backdrop-filter:blur(6px)){.hdr{backdrop-filter:blur(9px)}}
.hdr.is-stuck{box-shadow:0 2px 20px -10px rgba(33,30,26,.45)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:16px;transition:padding .3s var(--ease)}
.hdr.is-stuck .hdr__in{padding-block:8px}
.mark{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--olive)}
.mark b{font-family:var(--disp);font-size:1.34rem;font-weight:700;letter-spacing:-.04em}
.mark span{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);margin-top:6px}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.4vw,22px)}
.nav a{color:var(--olive);text-decoration:none;font-size:.73rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;padding:6px 0;
  border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{border-bottom-color:var(--terra);color:var(--terra-deep)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:9px;cursor:pointer}
.burger span{display:block;width:23px;height:2px;background:var(--olive);margin:6px 0;
  border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:1000px){
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--bone);flex-direction:column;
    justify-content:center;gap:22px;transform:translateY(-100%);
    transition:transform .4s var(--ease);margin:0;z-index:70}
  .nav.is-open{transform:none}
  .nav a{font-size:1.1rem;font-family:var(--disp);letter-spacing:-.02em;text-transform:none}
}

/* ── split hero — type panel + full-bleed image ─────────────────────────── */
.hero{display:grid;grid-template-columns:1fr;background:var(--bone)}
@media (min-width:900px){.hero{grid-template-columns:1fr 1fr}}
.hero__type{padding:clamp(38px,5.5vw,80px) var(--gut);display:flex;flex-direction:column;
  justify-content:center;background:var(--bone)}
@media (min-width:900px){
  .hero__type{padding-left:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)))}
}
.hero__type h1{color:var(--olive);max-width:11ch}
.hero__type h1 em{font-style:normal;color:var(--terra-deep)}
.hero__type p{color:var(--muted);max-width:36ch;margin:18px 0 0;font-size:clamp(1rem,1.6vw,1.14rem)}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__pic{position:relative;min-height:52svh;overflow:hidden;background:var(--olive-2)}
@media (min-width:900px){.hero__pic{min-height:76svh}}
.hero__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__pic::after{content:"";position:absolute;inset:0;background:var(--scrim);opacity:.55}

/* ── availability widget ────────────────────────────────────────────────── */
.avail{background:#fff;border-radius:var(--r);box-shadow:0 28px 56px -34px rgba(33,30,26,.5);
  padding:clamp(20px,2.6vw,30px);border-top:4px solid var(--terra);
  margin-top:clamp(-54px,-3.6vw,-28px);position:relative;z-index:5}
.avail h2{font-size:clamp(1.14rem,2vw,1.48rem);margin-bottom:6px}
.avail__grid{display:grid;gap:14px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr))}
.avail__acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.avail__out{margin-top:16px;background:var(--bone);border-left:4px solid var(--olive);
  border-radius:12px;padding:16px 18px;font-size:.9rem;white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink)}
.avail__out[hidden]{display:none}

/* ── instagram grid — the signature section, placed high ────────────────── */
.igrid{display:grid;gap:10px;list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(50% - 5px,170px),1fr))}
.igrid figure{margin:0;position:relative;overflow:hidden;border-radius:12px}
.igrid img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .55s var(--ease)}
.igrid a{display:block}
.igrid a:hover img{transform:scale(1.07)}
.igrid figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(33,30,26,.85);
  color:#EDE9E0;font-size:.6rem;letter-spacing:.09em;padding:6px 9px;text-transform:uppercase}
.igate{border:1px dashed var(--terra-deep);background:#FBE7DE;color:#4B1B0D;border-radius:var(--r);
  padding:20px 22px;font-size:.9rem}

/* ── trust badges ───────────────────────────────────────────────────────── */
.badges{display:grid;gap:1px;background:var(--line);list-style:none;margin:28px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.badges li{background:var(--bone);padding:24px 22px}
.badges svg{width:24px;height:24px;fill:none;stroke:var(--terra-deep);stroke-width:1.6;
  margin-bottom:12px;display:block}
.badges b{display:block;font-family:var(--disp);font-size:1.06rem;margin-bottom:5px;
  color:var(--olive);letter-spacing:-.02em}
.badges span{font-size:.8rem;color:var(--muted);line-height:1.45;display:block}

/* ── room rail ──────────────────────────────────────────────────────────── */
.rail{display:flex;gap:20px;overflow-x:auto;padding:4px 4px 20px;margin:26px -4px 0;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;list-style:none}
.rail li{flex:0 0 clamp(250px,29vw,320px);scroll-snap-align:start;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)}
.rail li:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(33,30,26,.5)}
.rail figure{margin:0;aspect-ratio:3/2;overflow:hidden}
.rail img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rail li:hover img{transform:scale(1.05)}
.rail__b{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.rail__b h3{font-size:1.1rem}
.railctl{display:flex;gap:9px;margin-top:4px}
.railctl button{width:40px;height:40px;border:1.4px solid var(--olive);background:none;
  cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:background .2s}
.railctl button:hover{background:rgba(59,64,52,.08)}
.railctl svg{width:16px;height:16px;fill:none;stroke:var(--olive);stroke-width:2}

.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.chips li{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  background:var(--clay);color:var(--ink);border-radius:999px;padding:5px 11px}
.price{margin-top:auto;font-family:var(--disp);font-size:1.1rem;color:var(--terra-deep);
  font-weight:700;letter-spacing:-.02em}
.price small{font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;display:block;margin-top:3px}

/* ── common-area trio ───────────────────────────────────────────────────── */
.trio{display:grid;gap:clamp(14px,2vw,22px);list-style:none;margin:28px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.trio li{position:relative;overflow:hidden;border-radius:var(--r);min-height:340px;
  display:flex;align-items:flex-end;background:var(--olive-2)}
.trio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.trio li:hover img{transform:scale(1.05)}
.trio li::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(33,30,26,.92) 0%,rgba(33,30,26,.28) 55%,rgba(33,30,26,0) 82%)}
.trio div{position:relative;z-index:2;padding:22px;color:#fff}
.trio h3{color:#fff;font-size:1.14rem}
.trio p{color:#DCD7CC;font-size:.86rem;margin:8px 0 0}

/* plain card variant */
.cards{display:grid;gap:clamp(14px,2vw,22px);list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.cards li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.sec--olive .cards li,.sec--dark .cards li{background:rgba(255,255,255,.06);
  border-color:var(--line-d)}
.cards h3{margin-bottom:8px}
.cards p{font-size:.88rem;margin:0}

/* ── split ──────────────────────────────────────────────────────────────── */
.split{display:grid;gap:clamp(26px,4vw,56px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split figure{margin:0;border-radius:var(--r);overflow:hidden}
.split img{width:100%;aspect-ratio:3/4;object-fit:cover}
.split--wide img{aspect-ratio:16/9}

/* ── distance ladder + map ──────────────────────────────────────────────── */
.ladder{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:1px;background:var(--line-d)}
.ladder li{background:var(--olive);padding:16px 20px;display:flex;flex-wrap:wrap;gap:8px 16px;
  align-items:baseline}
.ladder b{font-family:var(--disp);font-size:1.1rem;color:#fff;flex:1;min-width:180px;
  letter-spacing:-.02em}
.ladder span{color:var(--clay);font-size:.94rem;font-weight:700}

.map{width:100%;height:auto;background:#31352B;border-radius:var(--r);display:block;
  border:1px solid var(--line-d)}
.map .sea{fill:rgba(229,183,154,.14)}
.map .land{fill:rgba(247,242,234,.09)}
.map .road{fill:none;stroke:rgba(224,161,131,.55);stroke-width:2.6;stroke-linecap:round}
.map .pin{fill:var(--terra);stroke:#fff;stroke-width:1.4}
.map text{font:600 11px "DM Sans",Arial,sans-serif;fill:#DCD7CC}

/* ── bilingual band ─────────────────────────────────────────────────────── */
.lang-band{display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  background:var(--clay);color:var(--ink);border-radius:var(--r);
  padding:clamp(22px,3vw,32px)}
.lang-band b{font-family:var(--disp);font-size:clamp(1.2rem,2.4vw,1.7rem);flex:1;min-width:240px;
  letter-spacing:-.03em;color:#33291E}
.lang-band p{margin:0;font-size:.92rem;color:#4A3E30;flex-basis:100%}

/* ── empty reviews band ─────────────────────────────────────────────────── */
.revs{border:1px dashed #A6841C;background:#FBEBCB;color:#463405;border-radius:var(--r);
  padding:24px 26px;font-size:.92rem;margin-top:24px}
.revs h3{color:#2E2103;margin-bottom:8px}

/* ── forms ──────────────────────────────────────────────────────────────── */
.form{display:grid;gap:14px;max-width:660px}
.f2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
label{display:block;font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-bottom:6px}
.sec--olive label,.sec--dark label{color:#C6C9BC}
input,select,textarea{width:100%;padding:13px 14px;font:inherit;font-size:.95rem;
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;
  transition:border-color .2s,box-shadow .2s}
.sec--olive input,.sec--olive select,.sec--olive textarea,
.sec--dark input,.sec--dark select,.sec--dark textarea{
  background:rgba(255,255,255,.08);border-color:var(--line-d);color:#fff}
.sec--olive option,.sec--dark option{color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--terra-deep);
  box-shadow:0 0 0 3px rgba(193,96,63,.28)}
textarea{min-height:96px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.85rem}
.consent input{width:auto;margin-top:4px;flex:0 0 auto;accent-color:#A24C2F}
.consent label{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:400;
  color:var(--muted);margin:0}
.sec--olive .consent label,.sec--dark .consent label{color:#D3CEC3}
.formnote{font-size:.8rem;color:var(--muted)}
.sec--olive .formnote,.sec--dark .formnote{color:#C6C9BC}

/* ── footer ─────────────────────────────────────────────────────────────── */
.ftr{background:var(--grad-dark);color:#AEB3A6;padding:0 0 30px;font-size:.87rem}
.ftr__hero{position:relative;overflow:hidden;min-height:200px;display:flex;align-items:flex-end}
.ftr__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.ftr__hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,#2C3027 8%,rgba(44,48,39,.2) 100%)}
.ftr__hero div{position:relative;z-index:2;width:100%;padding:clamp(26px,4vw,48px) 0}
.ftr__wa{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);border-radius:var(--r);
  padding:22px 24px;color:#fff;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.ftr__wa b{font-family:var(--disp);font-size:1.24rem;color:#fff;flex:1;min-width:220px;
  letter-spacing:-.03em}
.ftr__wa .btn{background:#fff;color:var(--ink)}
.ftr a{color:#EDE9E0;text-decoration:none}
.ftr a:hover{color:var(--terra-pale)}
.ftr h4{color:#fff;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 14px;font-weight:700}
.ftr__grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  padding-top:clamp(34px,5vw,58px)}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:8px}
.ftr__legal{border-top:1px solid var(--line-d);margin-top:38px;padding-top:24px;
  font-size:.76rem;color:#878C7D;display:grid;gap:9px}

/* ── sticky bar + WhatsApp ──────────────────────────────────────────────── */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;
  grid-template-columns:1fr 1fr;background:var(--olive-2);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -3px 16px -6px rgba(0,0,0,.55)}
@media (max-width:900px){.stick{display:grid}}
.stick a{display:flex;align-items:center;justify-content:center;gap:8px;height:60px;
  text-decoration:none;font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.stick .w{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);color:#fff}
.stick .p{background:var(--terra-btn);color:#fff}
.stick svg{width:20px;height:20px;fill:currentColor}

.wa{position:fixed;right:16px;bottom:16px;z-index:66;width:54px;height:54px;border-radius:50%;
  border:0;cursor:pointer;background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
  display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:27px;height:27px;fill:#0B2E17}
@media (max-width:900px){.wa{display:none}}

/* ── cookie banner ──────────────────────────────────────────────────────── */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--olive-2);color:#D3CEC3;
  padding:18px var(--gut);border-top:3px solid var(--terra);font-size:.88rem;
  transform:translateY(115%);transition:transform .45s var(--ease)}
.ck.is-on{transform:none}
.ck__in{max-width:1140px;margin:0 auto;display:grid;gap:14px}
.ck h4{margin:0;color:#fff;font-family:var(--disp);font-size:1.16rem;letter-spacing:-.02em}
.ck__opts{display:flex;flex-wrap:wrap;gap:18px;font-size:.85rem}
.ck__opts label{text-transform:none;letter-spacing:0;color:#D3CEC3;font-weight:400;
  display:flex;gap:8px;align-items:center;margin:0;font-size:.85rem}
.ck__opts input{width:auto;accent-color:#C1603F}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px}
.ck__btns .btn{padding:11px 19px;font-size:.62rem}

/* ── reveals ────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .rail{scroll-snap-type:none;scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
}

@media print{.hdr,.topbar,.wa,.stick,.ck{display:none}body{background:#fff;color:#000}}

/* ---------------------------------------------------- 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}
}

/* ------------------------------------------- offcanvas-visibility-guard
   backdrop-filter on the sticky header makes the header the containing
   block for its position:fixed children, so this panel's top:0 is the
   header's top edge and not the viewport's. translateY(-100%) therefore
   leaves its bottom edge inside the screen at scroll 0. Visibility takes
   it out of the render tree while closed; the delay lets the slide finish
   before it disappears. */
@media (max-width:1000px){
  .nav{visibility:hidden;transition:transform .32s cubic-bezier(.22,.9,.3,1),
    visibility 0s linear .32s}
  .nav.is-open{visibility:visible;transition:transform .32s cubic-bezier(.22,.9,.3,1),
    visibility 0s}
}

/* ------------------------------------------- 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}
}