/* ===========================================================================
   PIETRA FLAT — Estr. Dom João Becker, 1389, Praia dos Ingleses, Florianópolis
   Spec mockup. LEAD, not signed. Nothing here is client work.

   THEIR SITE SERVES GOOGLE AN EMPTY DIV. flatpietra.com.br is a React SPA
   whose served HTML is `<div id="root"></div>`, a GTM snippet, four Google
   Font families and a floating WhatsApp button. Eleven well-named unit
   types, each with a written tagline, fully localised into PT / EN / ES,
   exist only inside a JavaScript bundle. Everything in this build was read
   out of that bundle's own string tables.

   THE INVENTORY IS ORGANISED BY VIEW. Vista Mar, Vista Lateral Mar, Vista
   Jardim. That is the property's own logic, so it is the design's primary
   axis: view chips before layout, layout before capacity, capacity before
   rate.

   PALETTE — proposed, NOT extracted. There was no rendered CSS to sample:
   the page returns an empty shell. [CONFIRM against their logo and
   photography.] Their four loaded typefaces (Montserrat, Poppins, Raleway,
   Roboto) are consolidated here to two.

     --basalt #33383D  nav, footer, body copy
     --blue   #25647E  sea cues, section accents
     --calc   #EDE7DE  warm limestone section grounds
     --amber  #C98B3E  the ONE reserved CTA colour
     --garden #4F6B52  garden-view category cue
     --stone  #FBFAF8  page base

   CONTRAST — measured, not assumed (WCAG 2.1 AA / eMAG):
     basalt #33383D on stone #FBFAF8 = 11.35:1 ✓ AAA  body + headings
     basalt          on calc  #EDE7DE =  9.63:1 ✓ AAA
     calc            on basalt        =  9.63:1 ✓ AAA  reversed copy
     white           on basalt        = 11.84:1 ✓ AAA
     blue   #25647E on stone          =  6.29:1 ✓ AA   links, small headings
     blue            on calc          =  5.33:1 ✓ AA
     white           on blue          =  6.56:1 ✓ AA   blue button is safe
     blue            on basalt        =  1.81:1 ✗ FAILS — blue never carries
              text on the dark field. Reversed sea accent uses
              --blue-pale #8FB6CE = 5.50:1 ✓
     amber  #C98B3E on stone          =  2.78:1 ✗✗ FAILS
     amber           on calc          =  2.36:1 ✗✗ FAILS
     white           on amber         =  2.90:1 ✗✗ FAILS as a button label
     basalt          on amber         =  4.09:1 ✗ still short of AA
           -> the amber CTA takes --ink #1D2124, measured 5.59:1 ✓ AA on
              amber. That is the only text colour allowed on amber.
              Amber-coloured text on a light ground uses --amber-deep
              #8A5A1C (5.66:1 on stone, 4.80:1 on calc ✓ AA). Reversed amber
              on the dark footer uses --amber-pale #E0B274 = 8.33:1 ✓ AAA.
     garden #4F6B52 on stone          =  5.66:1 ✓ AA
     white           on garden        =  5.90:1 ✓ AA
     garden          on calc          =  4.80:1 ✓ AA (tight) — on the
              limestone ground the garden chip uses --garden-deep #41583F
              = 6.35:1 ✓ AA to keep margin.
   =========================================================================== */

:root{
  --basalt:#33383D;
  --ink:#1D2124;             /* the only text colour on amber — 5.59:1 */
  --blue:#25647E;
  --blue-deep:#1F5468;
  --blue-pale:#8FB6CE;       /* sea accent on dark — 5.50:1 */
  --calc:#EDE7DE;
  --amber:#C98B3E;
  --amber-2:#A96F2C;
  --amber-deep:#8A5A1C;      /* amber text on light — 5.66:1 */
  --amber-pale:#E0B274;      /* amber on dark — 8.33:1 */
  --garden:#4F6B52;
  --garden-deep:#41583F;     /* garden text on limestone — 6.35:1 */
  --stone:#FBFAF8;
  --muted:#5E6469;
  --line:rgba(51,56,61,.14);
  --line-d:rgba(237,231,222,.2);

  --grad-dark:linear-gradient(180deg,#33383D 0%,#1D2124 100%);
  --grad-sea:linear-gradient(150deg,#25647E 0%,#33383D 100%);
  --grad-cta:linear-gradient(135deg,#C98B3E 0%,#A96F2C 100%);
  --grad-calc:linear-gradient(180deg,#EDE7DE 0%,#FBFAF8 100%);
  --scrim:linear-gradient(0deg,rgba(29,33,36,.9) 0%,rgba(37,100,126,.42) 48%,rgba(29,33,36,.18) 100%);

  --disp:"Cormorant Garamond","Georgia",serif;
  --sans:"Montserrat","Helvetica Neue",Arial,system-ui,sans-serif;

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

*,*::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(--stone);color:var(--basalt);
  font-family:var(--sans);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (max-width:900px){body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}}

h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.08;
  letter-spacing:-.01em;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.85rem,3.7vw,3rem)}
h3{font-size:clamp(1.1rem,1.9vw,1.45rem)}
h4{font-family:var(--sans);margin:0}
p{margin:0 0 1.05em}
img{max-width:100%;display:block;height:auto}
a{color:var(--blue);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

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

/* ── bands ──────────────────────────────────────────────────────────────── */
.sec{padding:clamp(52px,7.4vw,112px) 0}
.sec--calc{background:var(--grad-calc)}
.sec--dark{background:var(--grad-dark);color:var(--calc)}
.sec--sea{background:var(--grad-sea);color:var(--calc)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,
.sec--sea h1,.sec--sea h2,.sec--sea h3{color:#fff}
.sec--dark p,.sec--sea p{color:#D9D3C9}

.eyebrow{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;
  color:var(--blue);margin:0 0 13px}
.sec--calc .eyebrow{color:var(--blue-deep)}
.sec--dark .eyebrow,.sec--sea .eyebrow,.hero .eyebrow{color:var(--amber-pale)}
.lede{font-size:clamp(1rem,1.6vw,1.18rem);color:var(--muted);max-width:66ch}
.sec--dark .lede,.sec--sea .lede{color:#CFCAC1}
.rule{height:1px;border:0;width:72px;background:var(--amber);margin:0 0 20px}

/* ── [CONFIRM] markers ──────────────────────────────────────────────────── */
.cfm{background:#F8ECCF;color:#4A3608;border:1px solid #A98527;border-radius:4px;
  padding:.06em .42em;font-size:.88em;font-style:normal}
.sec--dark .cfm,.sec--sea .cfm,.ftr .cfm,.hero .cfm,.avail .cfm{
  background:#3A3423;color:#F4E6C2;border-color:#8B7434}

.flag{border:1px solid #A98527;border-left-width:4px;background:#F8ECCF;color:#4A3608;
  padding:18px 20px;margin:22px 0;font-size:.94rem;border-radius:var(--r)}
.flag strong{color:#2F2205}
.sec--dark .flag,.sec--sea .flag{background:rgba(201,139,62,.13);color:#EFE1C4;border-color:var(--amber)}
.sec--dark .flag strong,.sec--sea .flag strong{color:#fff}
.flag--sea{border-color:var(--blue-deep);background:#E4EDF1;color:#0F2F3C}
.flag--sea strong{color:#081C24}

/* ── 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:.16em;text-transform:uppercase;
  border-radius:999px;
  background:var(--grad-cta);color:var(--ink);          /* ink on amber — 5.59:1 */
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07);
  box-shadow:0 15px 30px -15px rgba(169,111,44,.95)}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--sea{background:var(--blue);color:#fff}
.btn--out{background:none;border:1.4px solid var(--basalt);color:var(--basalt)}
.btn--out:hover{background:rgba(51,56,61,.06);box-shadow:none}
.sec--dark .btn--out,.sec--sea .btn--out,.hero .btn--out,.ftr .btn--out{
  border-color:rgba(255,255,255,.62);color:#fff}
.btn--sm{padding:10px 18px;font-size:.63rem}
[data-unconfirmed]{opacity:.62;cursor:not-allowed;filter:grayscale(.4)}

/* ── topbar ─────────────────────────────────────────────────────────────── */
.topbar{background:var(--ink);color:#B3ADA3;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:#EFEAE2;text-decoration:none}
.topbar a:hover{color:var(--amber-pale)}
.langs{margin-left:auto;display:flex;gap:2px;align-items:center}
.langs a{padding:3px 7px;color:#8A857D;text-decoration:none;letter-spacing:.11em;font-weight:700}
.langs a[aria-current="true"]{color:var(--amber-pale)}
.langs i{font-style:normal;color:#3C3A35}

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(251,250,248,.96);
  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(29,33,36,.5)}
.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(--ink)}
.mark b{font-family:var(--disp);font-size:1.6rem;font-weight:600;letter-spacing:.04em}
.mark span{font-size:.5rem;letter-spacing:.34em;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(--basalt);text-decoration:none;font-size:.73rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;padding:6px 0;
  border-bottom:1.5px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--amber);color:var(--amber-deep)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:9px;cursor:pointer}
.burger span{display:block;width:23px;height:1.6px;background:var(--basalt);margin:6px 0;
  transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}
@media (max-width:1040px){
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--stone);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.06rem;font-family:var(--disp);letter-spacing:.06em;text-transform:none}
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--ink);overflow:hidden;
  min-height:clamp(460px,72svh,720px);display:flex;align-items:flex-end}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(40px,6vw,86px)}
.hero h1{color:#fff;max-width:15ch}
.hero .tag{font-family:var(--disp);font-size:clamp(1.2rem,2.4vw,1.9rem);color:#F2E9D8;
  margin:14px 0 0;font-style:italic}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ── availability widget ────────────────────────────────────────────────── */
.avail{background:#fff;border-radius:var(--r);box-shadow:0 30px 60px -34px rgba(29,33,36,.6);
  padding:clamp(20px,2.6vw,30px);position:relative;z-index:5;
  border-top:4px solid var(--amber);margin-top:clamp(-64px,-4.4vw,-36px)}
.avail h2{font-size:clamp(1.2rem,2vw,1.55rem);margin-bottom:6px}
.avail__grid{display:grid;gap:14px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.avail__acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.avail__out{margin-top:16px;background:var(--calc);border-left:4px solid var(--blue);
  border-radius:var(--r);padding:16px 18px;font-size:.9rem;white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--basalt)}
.avail__out[hidden]{display:none}

/* ── 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%,180px),1fr))}
.badges li{background:var(--stone);padding:24px 20px;text-align:center}
.sec--calc .badges li{background:#FCFAF7}
.badges svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.5;
  margin:0 auto 12px;display:block}
.badges b{display:block;font-family:var(--disp);font-size:1.14rem;margin-bottom:5px}
.badges span{font-size:.8rem;color:var(--muted);line-height:1.45;display:block}

/* ── view system ────────────────────────────────────────────────────────── */
.views{display:grid;gap:clamp(14px,2vw,22px);list-style:none;margin:30px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.views li{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.views li:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(29,33,36,.55)}
.views figure{margin:0;aspect-ratio:4/3;overflow:hidden}
.views img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.views li:hover img{transform:scale(1.05)}
.views div{padding:22px}
.views h3{margin-bottom:8px}
.views p{font-size:.89rem;color:var(--muted);margin:0}

/* view chips — the primary axis */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;padding:6px 12px;border-radius:999px;
  background:#E4EDF1;color:#0F2F3C}
.chip--lateral{background:#EAF0F3;color:#1F3D4A}
.chip--jardim{background:#E6EDE6;color:#28331F}
.chip--layout{background:var(--calc);color:#463F35}
.chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}

.filters{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0;list-style:none;padding:0}
.filters button{border:1.3px solid var(--line);background:#fff;cursor:pointer;font:inherit;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--basalt);padding:10px 18px;border-radius:999px;
  transition:background .25s,border-color .25s,color .25s}
.filters button[aria-pressed="true"]{background:var(--basalt);border-color:var(--basalt);color:#fff}

/* ── unit cards ─────────────────────────────────────────────────────────── */
.units{display:grid;gap:clamp(14px,2vw,22px);list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.unit{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)}
.unit:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(29,33,36,.55)}
.unit figure{margin:0;aspect-ratio:3/2;overflow:hidden;position:relative}
.unit img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.unit:hover img{transform:scale(1.05)}
.unit__chips{position:absolute;left:12px;top:12px;display:flex;flex-wrap:wrap;gap:6px;z-index:2}
.unit__b{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.unit__b h3{font-size:1.16rem}
.unit__b .tl{font-family:var(--disp);font-style:italic;font-size:1rem;color:var(--muted);margin:0}
.facts{display:grid;gap:7px;list-style:none;margin:0;padding:0;font-size:.82rem;color:var(--muted)}
.facts li{display:flex;gap:9px;align-items:center}
.facts svg{width:15px;height:15px;fill:none;stroke:var(--blue);stroke-width:1.7;flex:0 0 auto}
.rate{margin-top:auto;display:inline-flex;align-items:baseline;gap:7px;
  font-family:var(--disp);font-size:1.2rem;color:var(--amber-deep);font-weight:600}
.rate small{font-family:var(--sans);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.unit .btn{align-self:flex-start}

/* ── comparison table ───────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;margin-top:26px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff}
table.cmp{width:100%;border-collapse:collapse;font-size:.9rem;min-width:820px}
table.cmp caption{text-align:left;padding:16px 18px;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line)}
table.cmp th,table.cmp td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
table.cmp thead th{background:var(--basalt);color:#fff;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;border-bottom:0;position:sticky;top:0}
table.cmp tbody th{font-weight:600;color:var(--ink);font-size:.94rem;
  position:sticky;left:0;background:#fff;z-index:1;min-width:220px}
table.cmp tbody tr:nth-child(odd) td,table.cmp tbody tr:nth-child(odd) th{background:#FCFAF7}
table.cmp tbody tr:hover td,table.cmp tbody tr:hover th{background:#F3EFE9}
table.cmp .grp th{background:var(--calc);font-family:var(--disp);font-size:1.05rem;
  letter-spacing:.02em;text-transform:none;color:var(--ink)}

/* ── amenity slots (deliberately empty) ─────────────────────────────────── */
.amen{display:grid;gap:1px;background:var(--line);list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.amen li{background:#fff;padding:24px 18px;text-align:center;font-size:.85rem;color:var(--muted)}
.amen b{display:block;font-family:var(--disp);font-size:1.06rem;color:var(--ink);margin-bottom:7px}

/* ── split / trio / gallery ─────────────────────────────────────────────── */
.split{display:grid;gap:clamp(26px,4vw,58px);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:4/3;object-fit:cover}

.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%,250px),1fr))}
.trio li{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sec--dark .trio li,.sec--sea .trio li{background:rgba(255,255,255,.06);border-color:var(--line-d)}
.trio img{width:100%;aspect-ratio:16/10;object-fit:cover}
.trio div{padding:20px 22px}
.trio h3{margin-bottom:8px}
.trio p{font-size:.88rem;margin:0}

.mason{columns:3 250px;column-gap:14px;margin:28px 0 0}
.mason figure{margin:0 0 14px;break-inside:avoid;border-radius:var(--r);overflow:hidden;
  position:relative}
.mason img{width:100%;transition:transform .6s var(--ease)}
.mason figure:hover img{transform:scale(1.05)}
.mason figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(29,33,36,.84);
  color:#EFEAE2;font-size:.63rem;letter-spacing:.09em;padding:8px 10px;text-transform:uppercase}

/* ── offer band ─────────────────────────────────────────────────────────── */
.offer{background:#fff;border:1px solid var(--line);border-left:5px solid var(--amber);
  border-radius:var(--r);padding:clamp(22px,3vw,34px);display:grid;gap:14px;max-width:660px}
.offer h3{font-size:1.4rem}
.offer .rate{margin:0}

/* ── map ────────────────────────────────────────────────────────────────── */
.map{width:100%;height:auto;background:#2A2E33;border-radius:var(--r);display:block;
  border:1px solid var(--line-d)}
.map .grid{stroke:rgba(237,231,222,.13);stroke-width:1;fill:none}
.map .sea{fill:rgba(37,100,126,.4)}
.map .sand{fill:rgba(237,231,222,.16)}
.map .pin{fill:var(--amber);stroke:#fff;stroke-width:1.4}
.map text{font:600 11px "Montserrat",Arial,sans-serif;fill:#D9D3C9}

/* ── 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--dark label,.sec--sea label{color:#C4BFB6}
input,select,textarea{width:100%;padding:13px 14px;font:inherit;font-size:.95rem;
  border:1px solid var(--line);background:#fff;color:var(--basalt);border-radius:8px;
  transition:border-color .2s,box-shadow .2s}
.sec--dark input,.sec--dark select,.sec--dark textarea,
.sec--sea input,.sec--sea select,.sec--sea textarea{
  background:rgba(255,255,255,.08);border-color:var(--line-d);color:#fff}
.sec--dark option,.sec--sea option{color:var(--basalt)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,100,126,.24)}
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:#25647E}
.consent label{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:400;
  color:var(--muted);margin:0}
.sec--dark .consent label,.sec--sea .consent label{color:#CFCAC1}
.formnote{font-size:.8rem;color:var(--muted)}
.sec--dark .formnote,.sec--sea .formnote{color:#C4BFB6}

/* ── footer ─────────────────────────────────────────────────────────────── */
.ftr{background:var(--grad-dark);color:#B3ADA3;padding:0 0 30px;font-size:.88rem}
.ftr__hero{position:relative;overflow:hidden;min-height:230px;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,#1D2124 6%,rgba(29,33,36,.2) 100%)}
.ftr__hero div{position:relative;z-index:2;width:100%;padding:clamp(28px,4vw,50px) 0}
.ftr__wa{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);color:#fff;
  border-radius:var(--r);padding:20px 24px;margin:26px 0}
.ftr__wa b{font-family:var(--disp);font-size:1.3rem;flex:1;min-width:200px;color:#fff}
.ftr__wa .btn{background:#fff;color:var(--ink)}
.ftr a{color:#EFEAE2;text-decoration:none}
.ftr a:hover{color:var(--amber-pale)}
.ftr h4{color:#fff;font-size:.63rem;letter-spacing:.22em;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,60px)}
.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:.77rem;color:#8A857D;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(--ink);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -3px 16px -6px rgba(0,0,0,.6)}
@media (max-width:900px){.stick{display:grid}}
.stick a{display:flex;align-items:center;justify-content:center;gap:8px;height:62px;
  text-decoration:none;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.stick .w{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);color:#fff}
.stick .p{background:var(--grad-cta);color:var(--ink)}
.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(--ink);color:#CFCAC1;
  padding:18px var(--gut);border-top:3px solid var(--amber);font-size:.89rem;
  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.2rem}
.ck__opts{display:flex;flex-wrap:wrap;gap:18px;font-size:.85rem}
.ck__opts label{text-transform:none;letter-spacing:0;color:#CFCAC1;font-weight:400;
  display:flex;gap:8px;align-items:center;margin:0;font-size:.85rem}
.ck__opts input{width:auto;accent-color:#C98B3E}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px}
.ck__btns .btn{padding:11px 19px;font-size:.63rem}

/* ── 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}
  *,*::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}
  .tablewrap{overflow:visible}}

/* ---------------------------------------------------- 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:1040px){
  .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}
}