/* ===========================================================================
   POUSADA BANGALÔS DA MOLE — Praia Mole (inferred), Florianópolis, SC
   Spec mockup. LEAD, not signed. Nothing here is client work.

   ⚠️ THE OYO QUESTION COMES FIRST. Their only public presence is the
   Instagram handle @oyopousadabangalosdamole, behind a login wall. The "oyo"
   prefix strongly suggests affiliation with OYO Rooms. Whether that
   affiliation is current, former or never determines the whole engagement:
   branding, rate control and distribution may all be contractually
   restricted. This build assumes INDEPENDENT and says so, prominently, on
   the page itself. Nothing about OYO — no name, no mark, no colour — appears
   anywhere in this build.

   THE PRODUCT IS BUNGALOWS, NOT ROOMS. That is the one structural fact the
   name guarantees, and it is what every aggregator flattens into the same
   thumbnail grid as a corridor room. So the signature section here is a
   drawn top-down SITE PLAN with data-driven markers — private door, private
   outdoor space, no shared hallway, legible in three seconds.

   PALETTE — proposed. No site, no fetchable feed, nothing sampled.
   [CONFIRM against their logo and photography — and note that if the OYO
   affiliation is live, their colours may be contractually mandated.]

     --slate #33444F  nav, footer, headings
     --glass #7FA8A0  secondary surfaces, site-plan markers
     --sand  #C7BBA6  rules and accents
     --coral #E2664F  the single CTA colour
     --off   #F6F4F0  page background
     --ink   #1B2229  body text

   CONTRAST — measured, not assumed (WCAG 2.1 AA / eMAG):
     ink   #1B2229 on off #F6F4F0 = 14.62:1 ✓ AAA  body text
     slate #33444F on off         =  9.19:1 ✓ AAA  headings
     off           on slate       =  9.19:1 ✓ AAA  reversed copy
     off           on ink         = 14.62:1 ✓ AAA
     coral #E2664F on off         =  3.06:1 ✗ FAILS at body size — exactly as
              the brief predicted. Coral is restricted to large display type,
              button fills and non-text ornament.
     white         on coral       =  3.36:1 ✗ FAILS as a button label, so
              the CORAL CTA TAKES INK TEXT, measured 4.78:1 ✓ AA. That is the
              only text colour allowed on coral.
              Coral-coloured text on a light ground uses --coral-deep
              #B04127 = 5.26:1 ✓ AA.
     coral         on slate       =  3.00:1 ✗ FAILS reversed too. On the dark
              bands the accent is --coral-pale #F0A08C = 4.86:1 ✓ AA.
     glass #7FA8A0 on off         =  2.39:1 ✗ FAILS. Secondary text on light
              uses --glass-deep #3F6B62 = 5.48:1 ✓ AA; white on that deep
              green = 6.02:1 ✓. Glass reversed on ink = 6.13:1 ✓ AA, which is
              why the site-plan markers sit on a dark ground.
     sand  #C7BBA6 on off         =  1.72:1 ✗✗ — a RULE and ornament colour on
              light, never type. On slate 5.33:1 ✓ and on ink 8.48:1 ✓, so it
              carries small labels on the dark bands only.
   =========================================================================== */

:root{
  --slate:#33444F;
  --slate-2:#212D35;
  --glass:#7FA8A0;
  --glass-deep:#3F6B62;      /* green text on light — 5.48:1 */
  --sand:#C7BBA6;
  --coral:#E2664F;
  --coral-2:#C24A36;
  --coral-deep:#B04127;      /* coral text on light — 5.26:1 */
  --coral-pale:#F0A08C;      /* coral accent on dark — 4.86:1 */
  --off:#F6F4F0;
  --ink:#1B2229;             /* the only text colour on coral — 4.78:1 */
  --muted:#59626B;
  --line:rgba(27,34,41,.13);
  --line-d:rgba(199,187,166,.24);

  --grad-cta:linear-gradient(135deg,#E2664F 0%,#C24A36 100%);
  --grad-dark:linear-gradient(180deg,#33444F 0%,#212D35 100%);
  --grad-off:linear-gradient(180deg,#FFFFFF 0%,#F6F4F0 100%);
  --scrim:linear-gradient(0deg,rgba(27,34,41,.95) 0%,rgba(27,34,41,.88) 38%,rgba(27,34,41,.72) 62%,rgba(27,34,41,.58) 82%,rgba(27,34,41,.5) 100%);

  --disp:"Archivo","Barlow","Helvetica Neue",Arial,sans-serif;
  --sans:"Barlow","Inter","Helvetica Neue",Arial,system-ui,sans-serif;

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

*,*::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(--off);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.64;
  -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:700;line-height:1.05;
  letter-spacing:-.022em;margin:0;text-wrap:balance;color:var(--slate)}
h1{font-size:clamp(2.2rem,5.6vw,4rem)}
h2{font-size:clamp(1.7rem,3.5vw,2.7rem)}
h3{font-size:clamp(1.06rem,1.9vw,1.38rem)}
h4{font-family:var(--sans);margin:0}
p{margin:0 0 1.05em}
img{max-width:100%;display:block;height:auto}
a{color:var(--glass-deep);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--coral-deep);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(--slate);color:#fff;padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}

/* ── bands ──────────────────────────────────────────────────────────────── */
.sec{padding:clamp(50px,7vw,104px) 0}
.sec--off{background:var(--grad-off)}
.sec--slate{background:var(--slate);color:var(--off)}
.sec--ink{background:var(--grad-dark);color:var(--off)}
.sec--slate h1,.sec--slate h2,.sec--slate h3,
.sec--ink h1,.sec--ink h2,.sec--ink h3{color:#fff}
.sec--slate p,.sec--ink p{color:#D6D1C8}

.eyebrow{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;
  color:var(--coral-deep);margin:0 0 12px}
.sec--slate .eyebrow,.sec--ink .eyebrow,.hero .eyebrow{color:var(--coral-pale)}
.lede{font-size:clamp(1rem,1.6vw,1.16rem);color:var(--muted);max-width:66ch}
.sec--slate .lede,.sec--ink .lede{color:#CFCAC1}
.rule{height:2px;border:0;width:64px;background:var(--sand);margin:0 0 20px}

/* ── [CONFIRM] markers ──────────────────────────────────────────────────── */
.cfm{background:#FBEBD6;color:#4A3208;border:1px solid #A97F27;border-radius:4px;
  padding:.06em .42em;font-size:.88em;font-style:normal}
.sec--slate .cfm,.sec--ink .cfm,.ftr .cfm,.hero .cfm,.avail .cfm{
  background:#39331F;color:#F5E5C0;border-color:#8A7638}

.flag{border:1px solid #A97F27;border-left-width:4px;background:#FBEBD6;color:#4A3208;
  padding:18px 20px;margin:22px 0;font-size:.94rem;border-radius:var(--r)}
.flag strong{color:#2E1F04}
.sec--slate .flag,.sec--ink .flag{background:rgba(199,187,166,.13);color:#EEE7D8;
  border-color:var(--sand)}
.sec--slate .flag strong,.sec--ink .flag strong{color:#fff}
/* the franchise flag gets the loudest treatment on the page */
.flag--oyo{border:2px solid var(--coral-deep);border-left-width:6px;background:#FBE6E1;color:#4E1A0F}
.flag--oyo strong{color:#33100A}
.flag--glass{border-color:var(--glass-deep);background:#E7EFED;color:#17302B}
.flag--glass strong{color:#0C1D1A}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border:0;cursor:pointer;text-decoration:none;font:inherit;
  font-size:.73rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  border-radius:var(--r);
  background:var(--grad-cta);color:var(--ink);        /* ink on coral — 4.78:1 */
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 14px 28px -14px rgba(194,74,54,.9)}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--slate{background:var(--slate);color:#fff}
.btn--out{background:none;border:1.5px solid var(--slate);color:var(--slate)}
.btn--out:hover{background:rgba(51,68,79,.07);box-shadow:none}
.sec--slate .btn--out,.sec--ink .btn--out,.hero .btn--out,.ftr .btn--out{
  border-color:rgba(255,255,255,.62);color:#fff}
.btn--sm{padding:10px 17px;font-size:.63rem}
[data-unconfirmed]{opacity:.62;cursor:not-allowed;filter:grayscale(.4)}

/* ── topbar ─────────────────────────────────────────────────────────────── */
.topbar{background:var(--ink);color:#A9AFB5;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:#EDEAE4;text-decoration:none}
.topbar a:hover{color:var(--coral-pale)}
.langs{margin-left:auto;display:flex;gap:2px;align-items:center}
.langs a{padding:3px 8px;color:#828A91;text-decoration:none;letter-spacing:.12em;font-weight:700;
  border-radius:999px}
.langs a[aria-current="true"]{color:var(--ink);background:var(--sand)}
.langs i{font-style:normal;color:#39424A}

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(246,244,240,.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(27,34,41,.55)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:13px 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(--slate)}
.mark b{font-family:var(--disp);font-size:1.24rem;font-weight:700;letter-spacing:-.02em}
.mark span{font-size:.5rem;letter-spacing:.32em;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(--slate);text-decoration:none;font-size:.74rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:600;padding:6px 0;
  border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{border-bottom-color:var(--coral);color:var(--coral-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(--slate);margin:6px 0;
  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:960px){
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--off);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)}
}

/* ── split hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;display:grid;grid-template-columns:1fr;background:var(--ink)}
@media (min-width:880px){.hero{grid-template-columns:1fr 1fr}}
.hero__pane{position:relative;min-height:46svh;overflow:hidden}
@media (min-width:880px){.hero__pane{min-height:min(72svh,640px)}}
.hero__pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__pane::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.hero__in{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(26px,4vw,54px);
  color:#fff}
/* The copy carries its own ground. The pane gradient is anchored to the
   pane's height, so a long headline lifts the lede to where that gradient
   has faded and the sunlit pool comes through at 2.92:1. */
.hero__in::before{content:"";position:absolute;z-index:-1;
  top:-56px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:linear-gradient(0deg,rgba(27,34,41,.94) 0%,rgba(27,34,41,.9) 58%,
             rgba(27,34,41,.72) 82%,rgba(27,34,41,0) 100%);pointer-events:none}
@media (min-width:880px){
  .hero__in{left:50%;transform:translateX(-50%);width:min(940px,92vw);text-align:center}
  .hero__pane .hero__in{position:static;transform:none;width:auto;text-align:left}
}
.hero h1{color:#fff;max-width:16ch}
.hero p{color:#D6D1C8;max-width:46ch;margin:16px 0 0}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media (min-width:880px){.hero__acts{justify-content:center}}
.hero__band{position:relative;z-index:4;background:var(--ink);
  padding:clamp(26px,4vw,52px) 0 clamp(84px,9vw,128px);   /* the availability card below is
     lifted -52px; without this clearance that lift lands on the hero buttons */
  
  text-align:center}
.hero__band h1{margin-inline:auto;color:#fff}   /* the band is var(--ink); without this the h1 inherits the
     default dark heading ink and measures 1.59:1 on it */
.hero__band p{margin-inline:auto}
.hero__band .hero__acts{justify-content:center}

/* ── availability widget ────────────────────────────────────────────────── */
.avail{background:#fff;border-radius:var(--r);box-shadow:0 26px 54px -32px rgba(27,34,41,.6);
  padding:clamp(20px,2.6vw,30px);border-top:4px solid var(--coral);
  margin-top:clamp(-56px,-3.6vw,-28px);position:relative;z-index:5}
.avail h2{font-size:clamp(1.16rem,2vw,1.5rem);margin-bottom:6px}
.avail__grid{display:grid;gap:14px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.avail__acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.avail__out{margin-top:16px;background:var(--off);border-left:4px solid var(--glass-deep);
  border-radius:var(--r);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}

/* ── 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:#fff;padding:24px 20px}
.badges svg{width:26px;height:26px;fill:none;stroke:var(--glass-deep);stroke-width:1.6;
  margin-bottom:12px;display:block}
.badges b{display:block;font-family:var(--disp);font-size:1.08rem;margin-bottom:6px;
  color:var(--slate)}
.badges span{font-size:.82rem;color:var(--muted);line-height:1.45;display:block}

/* ===== SITE PLAN — the signature section ================================= */
.plan{background:var(--grad-dark);border-radius:var(--r);padding:clamp(18px,2.6vw,30px);
  border:1px solid var(--line-d)}
.plan__note{font-size:.84rem;color:var(--sand);margin:0 0 16px}
.plan svg{width:100%;height:auto;display:block;border-radius:var(--r)}
.plan .ground{fill:#2A3941}
.plan .grass{fill:rgba(127,168,160,.16)}
.plan .path{fill:none;stroke:rgba(199,187,166,.55);stroke-width:7;stroke-linecap:round}
.plan .pathline{fill:none;stroke:rgba(199,187,166,.9);stroke-width:1.2;stroke-dasharray:6 7}
.plan .sea{fill:rgba(127,168,160,.34)}
.plan .common{fill:rgba(199,187,166,.2);stroke:rgba(199,187,166,.6);stroke-width:1.4}
.plan text{font:600 12px "Barlow",Arial,sans-serif;fill:#D6D1C8}
.plan text.small{font-size:10.5px;fill:#AFB6AF}

/* Markers are NATIVE HTML BUTTONS overlaid on the drawn plan, not SVG shapes.
   That is deliberate: a native button is keyboard-operable, focusable and
   nameable everywhere, which SVG pseudo-buttons reliably are not. The plan
   is the accessibility risk area on this build, so it uses the boring,
   correct element. */
.plan__stage{position:relative}
.pin{position:absolute;transform:translate(-50%,-50%);cursor:pointer;
  width:38px;height:38px;border-radius:9px;border:2px solid var(--off);
  background:var(--glass);color:#14201C;
  font-family:var(--disp);font-weight:700;font-size:.95rem;line-height:1;
  display:grid;place-items:center;
  transition:background .25s var(--ease),transform .25s var(--ease)}
.pin:hover{transform:translate(-50%,-50%) scale(1.1)}
.pin[aria-pressed="true"]{background:var(--coral);color:var(--ink)}
.pin:focus-visible{outline:3px solid var(--coral-pale);outline-offset:3px}

.plan__card{margin-top:18px;background:#fff;border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-columns:1fr;color:var(--ink)}
@media (min-width:640px){.plan__card{grid-template-columns:minmax(0,240px) 1fr}}
.plan__card img{width:100%;height:100%;min-height:170px;object-fit:cover}
.plan__card div{padding:20px 22px;display:flex;flex-direction:column;gap:11px}
.plan__card h3{color:var(--slate)}
.plan__card p{font-size:.9rem;color:var(--muted);margin:0}

/* the mandatory plain-list fallback */
.plan__list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.plan__list li{background:rgba(255,255,255,.06);border:1px solid var(--line-d);
  border-radius:var(--r);padding:14px 18px;color:#D6D1C8;font-size:.9rem}
.plan__list b{color:#fff;display:block;font-family:var(--disp);font-size:1.02rem;margin-bottom:4px}

/* ── unit cards ─────────────────────────────────────────────────────────── */
.units{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%,280px),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(27,34,41,.55)}
.unit figure{margin:0;aspect-ratio:3/2;overflow:hidden}
.unit img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.unit:hover img{transform:scale(1.05)}
.unit__b{padding:20px;display:flex;flex-direction:column;gap:11px;flex:1}
.unit__b h3{font-size:1.1rem}
.unit__b p{font-size:.88rem;color:var(--muted);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.chips li{font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  background:#E7EFED;color:#17302B;border-radius:999px;padding:5px 11px}
.price{margin-top:auto;font-family:var(--disp);font-size:1.06rem;color:var(--coral-deep);
  font-weight:700}
.price small{font-family:var(--sans);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;display:block;margin-top:3px}
.unit .btn{align-self:flex-start}

/* ── trio / gallery / instagram ─────────────────────────────────────────── */
.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/2;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%,240px),1fr))}
.trio li{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sec--slate .trio li,.sec--ink .trio li{background:rgba(255,255,255,.06);border-color:var(--line-d)}
.trio img{width:100%;aspect-ratio:4/5;object-fit:cover}
.trio div{padding:20px}
.trio h3{margin-bottom:8px}
.trio p{font-size:.88rem;margin:0}

.igrid{display:grid;gap:8px;list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(50% - 4px,150px),1fr))}
.igrid figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r)}
.igrid img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .5s var(--ease)}
.igrid figure:hover img{transform:scale(1.06)}
.igrid figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(27,34,41,.84);
  color:#EDEAE4;font-size:.6rem;letter-spacing:.08em;padding:6px 8px;text-transform:uppercase}
.igate{border:1px dashed var(--sand);background:rgba(199,187,166,.12);border-radius:var(--r);
  padding:20px 22px;font-size:.9rem}

/* ── distance ladder ────────────────────────────────────────────────────── */
.ladder{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:1px;background:var(--line-d)}
.ladder li{background:var(--slate);padding:15px 18px;display:flex;flex-wrap:wrap;gap:8px 16px;
  align-items:baseline}
.ladder b{font-family:var(--disp);font-size:1.02rem;color:#fff;flex:1;min-width:160px}
.ladder span{color:var(--sand);font-size:.88rem}

.map{width:100%;height:auto;background:#2A3941;border-radius:var(--r);display:block;
  border:1px solid var(--line-d)}
.map .sea{fill:rgba(127,168,160,.34)}
.map .land{fill:rgba(199,187,166,.13)}
.map .road{fill:none;stroke:rgba(199,187,166,.55);stroke-width:3;stroke-linecap:round}
.map .pin{fill:var(--coral);stroke:#fff;stroke-width:1.4}
.map text{font:600 11px "Barlow",Arial,sans-serif;fill:#D6D1C8}

/* ── empty reviews band ─────────────────────────────────────────────────── */
.revs{border:1px dashed #A97F27;background:#FBEBD6;color:#4A3208;border-radius:var(--r);
  padding:24px 26px;font-size:.92rem;margin-top:24px}
.revs h3{color:#2E1F04;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--slate label,.sec--ink label{color:var(--sand)}
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:8px;
  transition:border-color .2s,box-shadow .2s}
.sec--slate input,.sec--slate select,.sec--slate textarea,
.sec--ink input,.sec--ink select,.sec--ink textarea{
  background:rgba(255,255,255,.08);border-color:var(--line-d);color:#fff}
.sec--slate option,.sec--ink option{color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--coral-deep);
  box-shadow:0 0 0 3px rgba(226,102,79,.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:#33444F}
.consent label{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:400;
  color:var(--muted);margin:0}
.sec--slate .consent label,.sec--ink .consent label{color:#CFCAC1}
.formnote{font-size:.8rem;color:var(--muted)}
.sec--slate .formnote,.sec--ink .formnote{color:var(--sand)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.ftr{background:var(--grad-dark);color:#B4BAC0;padding:clamp(46px,7vw,88px) 0 30px;font-size:.88rem}
.ftr a{color:#EDEAE4;text-decoration:none}
.ftr a:hover{color:var(--coral-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))}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:8px}
.ftr__wa{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);border-radius:var(--r);
  padding:22px 24px;color:#fff;display:grid;gap:12px}
.ftr__wa b{font-family:var(--disp);font-size:1.2rem;color:#fff}
.ftr__wa .btn{background:#fff;color:var(--ink);justify-self:start}
.ftr__legal{border-top:1px solid var(--line-d);margin-top:38px;padding-top:24px;
  font-size:.77rem;color:#8B9298;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(--coral);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.1rem}
.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:#E2664F}
.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}}

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