/* ==========================================================================
   HAUTE HAUS GUEST HOUSE — Lagoa da Conceição, Florianópolis/SC
   --------------------------------------------------------------------------
   SPEC MOCKUP — lead not signed. Haute Haus has not seen or approved this.

   The design brief is one sentence, and it is THEIRS:
     "Seu projeto arquitetônico é uma releitura do estilo praiano
      com um twist moderno e minimalista."
   This stylesheet obeys that literally. Near-monochrome. ONE accent. A modern
   grotesque at tight tracking. Hard-edged cards with hairline rules and NO
   drop shadows anywhere. Photography given whole viewports.

   From hotel-beachfront-ref-02 (HardaWebPro) exactly four mechanics are
   borrowed — the sticky nav with a single reserved action, the room carousel
   with per-night rate slots, the inline check-in/check-out/guests widget, and
   the dark footer with a WhatsApp CTA. Everything else about that reference is
   wrong for an eight-suite guest house: no gradient stacks, no badge rows, no
   busy resort sections. Restraint IS the pitch here.

   ONE ACCENT ONLY. The moment a second one appears the minimalist claim
   collapses, so --lagoa is used for the reserve CTA and for nothing else.
   Green appears exactly once, as the ground of the two-hectare band.

   CONTRAST (computed, WCAG 2.1 AA):
     charcoal #22252A on cal   #F2F0EC -> 13.9:1  OK  body and display
     concreto #8C8C88 on cal   #F2F0EC ->  2.6:1  NO  captions only at >=19px
                                                       bold, or metadata; never
                                                       body copy — enforced below
     lagoa    #4C7A80 on cal   #F2F0EC ->  3.6:1  NO as text -> the CTA is
                                                       WHITE ON LAGOA instead
     cal      #F2F0EC on lagoa #4C7A80 ->  3.6:1  — still short of 4.5:1, so
                                                       the button ground is
                                                       darkened to #3A6167:
     white    #FFFFFF on #3A6167       ->  5.6:1  OK  <- the actual CTA
     cal      #F2F0EC on charcoal      -> 13.9:1  OK  footer
     cal      #F2F0EC on verde #3F5943 ->  7.4:1  OK  two-hectare band
   The brief predicted the mid-tone teal would fail on off-white. It does.
   --lagoa-cta is the darkened value and it is what every button actually uses.
   ========================================================================== */

:root{
  --charcoal:#22252A;
  --charcoal-dk:#0F1114;
  --concreto:#8C8C88;
  --concreto-dk:#6E6E6A;   /* the darkened metadata tone that passes on cal */
  --cal:#F2F0EC;
  --areia:#E3DCD1;
  --lagoa:#4C7A80;
  --lagoa-cta:#3A6167;     /* the only tone a button ground ever uses */
  --verde:#3F5943;
  --wa:#25A55B;
  --wa-dk:#1B7E44;
  --line:rgba(34,37,42,.16);
  --line-2:rgba(34,37,42,.08);

  --g-footer:linear-gradient(180deg,var(--charcoal) 0%,var(--charcoal-dk) 100%);
  --g-hero:linear-gradient(180deg,rgba(34,37,42,.34) 0%,rgba(34,37,42,.15) 42%,rgba(34,37,42,.62) 100%);
  --g-band:linear-gradient(180deg,var(--cal) 0%,var(--areia) 100%);
  --g-verde:linear-gradient(165deg,var(--verde) 0%,#2B3E2E 100%);

  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cal);color:var(--charcoal);
  font:400 clamp(1rem,.97rem + .16vw,1.06rem)/1.7 var(--sans);
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--charcoal);text-underline-offset:3px}
a:hover{color:var(--lagoa-cta)}
h1,h2,h3,h4{
  font-family:var(--sans);font-weight:500;line-height:1.05;
  letter-spacing:-.03em;margin:0;   /* tight tracking, per the brief */
}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--lagoa-cta);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--cal)}

.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}
@media(max-width:640px){.wrap{width:min(100% - 26px,var(--wrap))}}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--charcoal);color:#fff;padding:12px 18px}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- type ---------------------------------------------------------- */
.h1{font-size:clamp(2.5rem,1.5rem + 4.4vw,5rem);font-weight:400;letter-spacing:-.045em}
.h2{font-size:clamp(1.85rem,1.3rem + 2.4vw,3.1rem);font-weight:400;letter-spacing:-.04em}
.h3{font-size:clamp(1.14rem,1.04rem + .45vw,1.4rem)}
.lede{font-size:clamp(1.04rem,1rem + .3vw,1.2rem);max-width:60ch}
/* the "single line of set-in-small-caps facts" the brief asks for, in place of
   the reference's four stacked icon badges */
.smallcaps{
  font:500 .74rem/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--concreto-dk);
}
.eyebrow{margin:0 0 14px}
.eyebrow span{
  font:500 .72rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--concreto-dk);
}
.on-dark .eyebrow span{color:rgba(242,240,236,.7)}
.muted{color:var(--concreto-dk)}
.on-dark .muted{color:rgba(242,240,236,.66)}
.rule{height:1px;background:var(--line);border:0;margin:0}

.cfm{
  display:inline-block;font:500 .78rem/1.35 var(--mono);
  background:rgba(76,122,128,.1);color:#2E4E53;
  border:1px dashed rgba(76,122,128,.5);padding:1px 7px;
}
.on-dark .cfm{background:rgba(242,240,236,.1);color:#CFE1E3;border-color:rgba(207,225,227,.5)}
.cfm-note{
  font-size:.9rem;line-height:1.62;color:var(--concreto-dk);
  border-left:2px solid var(--lagoa);padding:12px 18px;margin:0;
}
.on-dark .cfm-note{color:rgba(242,240,236,.82);border-left-color:rgba(242,240,236,.5)}

/* verbatim client copy is set apart so nobody paraphrases it by accident */
.verbatim{
  font-size:clamp(1.06rem,1rem + .4vw,1.32rem);line-height:1.55;letter-spacing:-.015em;
  border-left:2px solid var(--charcoal);padding-left:22px;margin:0 0 1.2em;max-width:56ch;
}
.on-dark .verbatim{border-left-color:rgba(242,240,236,.6)}

/* ---------- buttons — no shadows, ever ----------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--lagoa-cta);color:#fff;border:0;cursor:pointer;text-decoration:none;
  font:500 .84rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  padding:17px 30px;border-radius:0;
  transition:background .22s,color .22s,transform .22s cubic-bezier(.2,.7,.3,1);
}
.btn:hover{background:var(--lagoa);color:#fff;transform:translateY(-1px)}
.btn .ar{transition:transform .22s}
.btn:hover .ar{transform:translateX(4px)}
.btn--wa{background:var(--wa-dk)}
.btn--wa:hover{background:var(--wa)}
.btn--line{background:transparent;color:var(--charcoal);border:1px solid var(--charcoal)}
.btn--line:hover{background:var(--charcoal);color:var(--cal)}
.on-dark .btn--line{color:var(--cal);border-color:rgba(242,240,236,.5)}
.on-dark .btn--line:hover{background:var(--cal);color:var(--charcoal)}
.btn--sm{padding:12px 20px;font-size:.74rem}
.btn--full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- utility bar + nav -------------------------------------------- */
.util{border-bottom:1px solid var(--line-2);background:var(--cal)}
.util__in{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;padding:10px 0;font-size:.8rem}
.util a{text-decoration:none;color:var(--concreto-dk)}
.util a:hover{color:var(--charcoal)}
.util .lbl{font:500 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--concreto)}
.util__r{margin-left:auto;display:flex;gap:14px;align-items:center}
.langs{display:flex;gap:2px}
.langs a{
  font:500 .7rem/1 var(--sans);letter-spacing:.14em;padding:7px 9px;border:1px solid transparent;
}
.langs a.on{border-color:var(--charcoal);color:var(--charcoal)}
@media(max-width:760px){.util .hide-sm{display:none}}

.hdr{
  position:sticky;top:0;z-index:80;background:rgba(242,240,236,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2);
  transition:border-color .25s;
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:24px;padding:20px 0;transition:padding .25s}
.hdr.is-stuck .hdr__in{padding:12px 0}
.brand{
  font:400 1.42rem/1 var(--sans);letter-spacing:-.04em;color:var(--charcoal);
  text-decoration:none;flex:none;display:flex;flex-direction:column;gap:5px;
}
.brand small{font:500 .58rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--concreto-dk)}
.nav{display:flex;gap:30px;margin:0 auto;align-items:center}
.nav a{
  font:500 .78rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--charcoal);text-decoration:none;padding:6px 0;position:relative;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--charcoal);transition:right .3s cubic-bezier(.2,.7,.3,1)}
.nav a:hover::after{right:0}
.hdr__r{display:flex;align-items:center;gap:10px;flex:none}
.burger{display:none;width:42px;height:38px;border:1px solid var(--line);background:transparent;cursor:pointer;padding:11px 9px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:1px;background:var(--charcoal);transition:transform .26s,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)}
.mnav{display:none;flex-direction:column;background:var(--cal);border-bottom:1px solid var(--line)}
.mnav a{padding:16px 22px;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--charcoal);
  font:500 .8rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.mnav.open{display:flex;animation:drop .3s cubic-bezier(.2,.7,.3,1)}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:980px){.nav{display:none}.burger{display:flex}.hdr__r .btn{display:none}}

/* ---------- sections ------------------------------------------------------ */
.sec{padding:clamp(56px,7vw,120px) 0}
.sec--areia{background:var(--areia)}
.sec--band{background:var(--g-band)}
.sec--verde{background:var(--g-verde);color:rgba(242,240,236,.86)}
.sec--verde h1,.sec--verde h2,.sec--verde h3{color:var(--cal)}
.sec--charcoal{background:var(--charcoal);color:rgba(242,240,236,.82)}
.sec--charcoal h1,.sec--charcoal h2,.sec--charcoal h3{color:var(--cal)}
.sec-head{max-width:64ch;margin-bottom:clamp(30px,3.6vw,54px)}
.sec-head--row{display:flex;gap:30px;justify-content:space-between;align-items:flex-end;max-width:none;flex-wrap:wrap}

/* ---------- hero — one full-viewport photograph, flat 15% wash ----------- */
.hero{position:relative;isolation:isolate;min-height:min(94vh,860px);display:flex;align-items:flex-end;background:var(--charcoal);overflow:hidden}
.hero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--g-hero)}
.hero__in{padding:clamp(90px,11vw,160px) 0 clamp(40px,5vw,72px);color:var(--cal)}
.hero h1{color:var(--cal);max-width:14ch}
.hero .verbatim{color:rgba(242,240,236,.9);border-left-color:rgba(242,240,236,.55);margin-top:26px}
.hero .smallcaps{color:rgba(242,240,236,.72);margin-top:30px;display:flex;flex-wrap:wrap;gap:10px 26px}

/* ---------- ⭐ availability widget --------------------------------------- */
/* Their entire booking mechanism today is one dropdown — "1 Hóspede" or
   "2 Hóspedes" — and a send button. There are no date fields at all. A guest
   cannot say WHEN they want to come. This is the highest-leverage change on
   the whole lead, so it sits immediately under the hero. */
.avail{background:var(--cal);border:1px solid var(--line);margin-top:-1px}
.avail__in{display:grid;grid-template-columns:1fr 1fr .8fr 1fr auto;gap:0}
.avail .f{padding:20px 22px;border-right:1px solid var(--line-2);display:flex;flex-direction:column;gap:7px}
.avail .f:last-of-type{border-right:0}
.avail label{font:500 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--concreto-dk)}
.avail input,.avail select{
  font:400 1rem/1.3 var(--sans);color:var(--charcoal);background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:6px 0;width:100%;
}
.avail .go{display:flex}
.avail .go .btn{height:100%;border-radius:0}
@media(max-width:980px){
  .avail__in{grid-template-columns:1fr 1fr}
  .avail .f{border-right:0;border-bottom:1px solid var(--line-2)}
  .avail .go{grid-column:1 / -1}
  .avail .go .btn{width:100%;padding:18px}
}
.avail__note{padding:14px 22px;border-top:1px solid var(--line-2);font-size:.84rem;color:var(--concreto-dk)}

/* ---------- two-hectare band --------------------------------------------- */
.hectare{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:900px){.hectare{grid-template-columns:1fr}}
.bignum{
  font:400 clamp(4.5rem,3rem + 9vw,11rem)/.82 var(--sans);letter-spacing:-.06em;color:var(--cal);
}
.bignum sup{font-size:.24em;letter-spacing:.1em;vertical-align:super;opacity:.8}
.ratio{display:flex;flex-wrap:wrap;gap:0;border:1px solid rgba(242,240,236,.24);margin-top:30px}
.ratio div{flex:1 1 140px;padding:20px 22px;border-right:1px solid rgba(242,240,236,.18)}
.ratio div:last-child{border-right:0}
.ratio b{display:block;font:400 1.8rem/1 var(--sans);letter-spacing:-.03em;color:var(--cal)}
.ratio span{display:block;margin-top:8px;font:500 .66rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(242,240,236,.66)}

/* ---------- the vista system --------------------------------------------- */
.vistas{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
@media(max-width:820px){.vistas{grid-template-columns:1fr}}
.vista{background:var(--cal);position:relative;overflow:hidden}
.vista img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.vista:hover img{transform:scale(1.04)}
.vista__b{padding:22px 24px 26px}
.vista__b b{display:block;font:400 1.35rem/1.1 var(--sans);letter-spacing:-.03em}
.vista__b p{margin:10px 0 0;font-size:.92rem;color:var(--concreto-dk)}

/* ---------- room carousel ------------------------------------------------- */
.railwrap{position:relative}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);
  gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;padding-bottom:6px;
}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--concreto)}
.room{
  scroll-snap-align:start;background:var(--cal);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:border-color .24s;
}
.room:hover{border-color:var(--charcoal)}
.room__i{overflow:hidden;position:relative}
.room__i img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.room:hover .room__i img{transform:scale(1.05)}
.chipview{
  position:absolute;left:0;top:0;background:var(--charcoal);color:var(--cal);
  font:500 .64rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:9px 13px;
}
.room__b{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.room__b h3{font-size:1.22rem;letter-spacing:-.03em}
.room__b .bed{font:500 .68rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--concreto-dk)}
.amen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.amen li{font-size:.76rem;color:var(--concreto-dk);border:1px solid var(--line);padding:5px 9px}
.rate{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;
}
.rate .n{font:400 1.2rem/1 var(--sans);letter-spacing:-.02em}
.rate .u{font-size:.76rem;color:var(--concreto-dk)}
.railnav{display:flex;gap:8px;margin-top:20px}
.railnav button{
  width:44px;height:44px;border:1px solid var(--charcoal);background:transparent;cursor:pointer;
  color:var(--charcoal);font-size:1rem;transition:background .2s,color .2s;
}
.railnav button:hover{background:var(--charcoal);color:var(--cal)}

/* a flagged content defect, shown rather than silently corrected */
.defect{
  border:1px solid var(--line);background:var(--areia);padding:18px 20px;font-size:.88rem;
  color:var(--charcoal);line-height:1.6;
}
.defect b{display:block;font:500 .68rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--concreto-dk);margin-bottom:8px}

/* ---------- generic split / figures -------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:center}
.split--top{align-items:start}
.split--wide{grid-template-columns:1.15fr .85fr}
@media(max-width:900px){.split,.split--wide{grid-template-columns:1fr}}
figure{margin:0}
.shot{overflow:hidden;position:relative}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.03)}
.shot--tall img{aspect-ratio:3/4}
.cap{font-size:.78rem;color:var(--concreto-dk);margin-top:10px}
.full{width:100%;overflow:hidden}
.full img{width:100%;aspect-ratio:21/9;object-fit:cover}
@media(max-width:760px){.full img{aspect-ratio:4/3}}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px}
@media(max-width:640px){.duo{grid-template-columns:1fr}}

/* ---------- languages row ------------------------------------------------- */
.langsrow{display:flex;flex-wrap:wrap;gap:2px;border:1px solid var(--line)}
.langsrow div{flex:1 1 150px;padding:22px 20px;border-right:1px solid var(--line-2);text-align:center}
.langsrow div:last-child{border-right:0}
.langsrow b{display:block;font:400 1.2rem/1 var(--sans);letter-spacing:-.02em}
.langsrow span{display:block;margin-top:8px;font:500 .64rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--concreto-dk)}

/* ---------- forms --------------------------------------------------------- */
.form{border:1px solid var(--line);padding:clamp(24px,3vw,36px);background:var(--cal)}
.on-dark .form{background:transparent;border-color:rgba(242,240,236,.28)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font:500 .66rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--concreto-dk)}
.on-dark .field label{color:rgba(242,240,236,.64)}
.field input,.field select,.field textarea{
  font:400 1rem/1.5 var(--sans);color:var(--charcoal);background:#fff;
  border:1px solid var(--line);padding:13px 14px;width:100%;border-radius:0;
}
.field textarea{min-height:110px;resize:vertical}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.fr{grid-template-columns:1fr}}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;line-height:1.55;margin:4px 0 18px;color:var(--concreto-dk)}
.on-dark .consent{color:rgba(242,240,236,.76)}
.consent input{margin-top:4px;flex:none;width:17px;height:17px;accent-color:var(--lagoa-cta)}

/* ---------- rows / map ---------------------------------------------------- */
.rows{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.rows li{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line-2);font-size:.95rem;
}
.rows b{font:500 .66rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--concreto-dk)}
.on-dark .rows{border-top-color:rgba(242,240,236,.28)}
.on-dark .rows li{border-bottom-color:rgba(242,240,236,.14)}
.on-dark .rows b{color:rgba(242,240,236,.6)}
.map{
  position:relative;min-height:340px;overflow:hidden;border:1px solid var(--line);
  background:var(--areia);display:grid;place-items:center;text-align:center;padding:28px;
}
.map__grid{
  position:absolute;inset:0;opacity:.6;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:48px 48px;
}
.map .pin{width:14px;height:14px;border-radius:50%;background:var(--lagoa-cta);margin:0 auto 14px;
  box-shadow:0 0 0 7px rgba(76,122,128,.18);animation:pulse 2.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 7px rgba(76,122,128,.18)}50%{box-shadow:0 0 0 14px rgba(76,122,128,.05)}}

/* ---------- footer -------------------------------------------------------- */
.ftr{background:var(--g-footer);color:rgba(242,240,236,.74);padding:clamp(50px,5.5vw,88px) 0 26px}
.ftr h4{font:500 .66rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cal);margin:0 0 18px}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(26px,3vw,52px)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.92rem}
.ftr a{color:rgba(242,240,236,.86);text-decoration:none}
.ftr a:hover{color:var(--cal);text-decoration:underline}
.ftr .brand{color:var(--cal);font-size:1.6rem}
.ftr .brand small{color:rgba(242,240,236,.6)}
.wacta{border:1px solid rgba(37,165,91,.55);padding:22px 24px}
.wacta b{display:block;font:500 .68rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#7BD9A6;margin-bottom:10px}
.ftr__legal{
  margin-top:clamp(30px,3.4vw,50px);padding-top:22px;border-top:1px solid rgba(242,240,236,.14);
  display:flex;flex-wrap:wrap;gap:12px 26px;font-size:.8rem;color:rgba(242,240,236,.58);
}
@media(max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__grid{grid-template-columns:1fr}}

/* ---------- sticky CTAs --------------------------------------------------- */
.wa{
  position:fixed;right:16px;bottom:88px;z-index:90;width:54px;height:54px;
  background:var(--wa-dk);display:grid;place-items:center;transition:background .22s,transform .22s;
}
.wa svg{width:28px;height:28px;fill:#fff}
.wa:hover{background:var(--wa);transform:translateY(-2px)}
@media(min-width:861px){.wa{bottom:22px}}
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:88;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);padding-bottom:env(safe-area-inset-bottom);
}
.mbar .btn{padding:16px 12px;font-size:.72rem}
@media(min-width:861px){.mbar{display:none}}
@media(max-width:860px){body{padding-bottom:56px}}

/* ---------- LGPD ---------------------------------------------------------- */
.ck{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:120;background:var(--cal);
  border:1px solid var(--charcoal);padding:20px 22px;display:none;
}
.ck.show{display:block;animation:fadeup .4s cubic-bezier(.2,.7,.3,1)}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ck__in{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;max-width:var(--wrap);margin-inline:auto}
.ck p{font-size:.88rem;margin:0;max-width:66ch}
.ck__opts{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px;font-size:.85rem}
.ck__opts label{display:flex;align-items:center;gap:8px}
.ck__opts input{width:16px;height:16px;accent-color:var(--lagoa-cta)}
.ck__btns{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:860px){.ck{bottom:66px}}

/* ---------- motion -------------------------------------------------------- */
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .6s ease-out,transform .6s cubic-bezier(.2,.7,.3,1)}
[data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::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}
  .hero__img{transform:none!important}
  .rail{scroll-snap-type:none}
}

/* ---------- legal pages --------------------------------------------------- */
.legal{max-width:78ch;margin-inline:auto;padding:clamp(40px,5vw,72px) 0}
.legal h1{font-size:clamp(2rem,1.5rem + 2vw,3rem);margin-bottom:10px;font-weight:400}
.legal h2{font-size:1.28rem;margin:34px 0 10px;font-weight:500}
.legal table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.92rem}
.legal th,.legal td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.legal th{background:var(--areia);font:500 .7rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase}

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