/* ==========================================================================
   ISLAND VIBE NOMADS / "NÔMADES VIBE DA ILHA" — Florianópolis, SC
   @nomades.vibedailha
   --------------------------------------------------------------------------
   SPEC MOCKUP — lead not signed, and this is the emptiest lead in the batch
   by a distance. https://www.instagram.com/nomades.vibedailha/ returns a
   JavaScript login shell: no bio, no follower count, no posts, no link in bio,
   no Open Graph metadata, no contact button. There is no website, no address,
   no phone, no rate, no bed count and no confirmed trading name.

   So this stylesheet builds a STRUCTURE and a TIER, not a set of facts, and it
   is designed to make the empty slots legible rather than to hide them. The
   .slot component below exists precisely for that: a fully working pricing
   table with the client's data visibly missing is a more persuasive artefact
   than a filled-in guess, and it is the honest one.

   ⚠ EVEN THE NAME IS UNCONFIRMED. The lead sheet says "Island Vibe Nomads";
   the handle says "nomades.vibedailha". Nothing here sets a wordmark in stone.

   TIER AND TONE: this is a hostel for the international digital-nomad crowd —
   the loudest, most social and most design-literate segment in the batch. It
   should read closer to a good coworking brand than to a hotel: high-contrast
   type, bold flat colour, oversized display numerals for the monthly rate, a
   visible community calendar, and photography weighted toward SOCIAL SPACE —
   the long table, the rooftop, the hammock — rather than toward bedding.
   From hotel-beachfront-ref-02 only four mechanics are kept: the sticky nav
   with one reserved booking action, the inline availability widget, the
   rate-bearing accommodation cards, and the dark footer with a WhatsApp CTA.
   Everything else about that hushed-resort reference is wrong here.

   PALETTE IS PROVISIONAL AND PRESENTED AS SUCH. Nothing could be sampled —
   no site, no accessible profile, no signage. [CONFIRM against their grid.]

   CONTRAST (computed, WCAG 2.1 AA):
     noite   #1A1D24 on branco #FDFBF8 -> 15.5:1  OK  body and display
     grafite #454B54 on branco #FDFBF8 ->  8.4:1  OK  secondary
     coral   #FF6B4A on branco #FDFBF8 ->  2.9:1  NO — the brief predicted this
       and it is right. Coral is a FILL. Coral as text uses the darkened value:
     coral-t #C33F20 on branco #FDFBF8 ->  5.3:1  OK
     white   #FFFFFF on coral  #FF6B4A ->  2.9:1  NO — so every filled CTA sits
       on the darkened ground instead:
     white   #FFFFFF on #D14A28          ->  4.6:1  OK  <- the actual button
     verde   #25A87E on branco #FDFBF8 ->  2.8:1  NO as text — fills only;
     white   #FFFFFF on #1B7E5E          ->  4.9:1  OK  <- community/WhatsApp
     branco  #FDFBF8 on noite  #1A1D24 -> 15.5:1  OK  footer
   ========================================================================== */

:root{
  --noite:#1A1D24;
  --noite-dk:#000000;
  --coral:#FF6B4A;
  --coral-cta:#D14A28;    /* every filled coral CTA ground */
  --coral-txt:#C33F20;    /* coral as small text */
  --laranja:#FF9A3C;
  --verde:#25A87E;
  --verde-cta:#1B7E5E;
  --areia:#F0E9DE;
  --branco:#FDFBF8;
  --grafite:#454B54;
  --line:rgba(26,29,36,.14);
  --line-2:rgba(26,29,36,.07);

  --g-footer:linear-gradient(180deg,var(--noite) 0%,var(--noite-dk) 100%);
  --g-hero:linear-gradient(180deg,rgba(26,29,36,.15) 0%,rgba(26,29,36,.78) 100%);
  --g-cta:linear-gradient(135deg,var(--coral-cta) 0%,#A83A1C 130%);
  --g-warm:linear-gradient(135deg,var(--coral) 0%,var(--laranja) 100%);
  --g-com:linear-gradient(150deg,var(--verde-cta) 0%,var(--noite) 100%);
  --g-soft:linear-gradient(180deg,var(--areia) 0%,var(--branco) 100%);

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

  --wrap:1220px;
  --sh:0 2px 8px rgba(26,29,36,.06),0 16px 40px rgba(26,29,36,.09);
  --sh-lift:0 8px 20px rgba(26,29,36,.1),0 28px 60px rgba(26,29,36,.15);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--branco);color:var(--grafite);
  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(--coral-txt);text-underline-offset:3px}
a:hover{color:var(--coral-cta)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.025em;margin:0;color:var(--noite);text-transform:uppercase}
h4{text-transform:none}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--coral-cta);outline-offset:3px}
.on-dark :focus-visible{outline-color:#fff}

.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(--noite);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 — high contrast, bold, declarative ---------------------- */
.h1{font-size:clamp(2.5rem,1.5rem + 4.4vw,5rem)}
.h2{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.2rem)}
.h3{font-size:clamp(1.14rem,1.02rem + .5vw,1.44rem)}
.lede{font-size:clamp(1.05rem,1rem + .32vw,1.24rem);max-width:60ch;font-family:var(--sans)}
.eyebrow{font:700 .74rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--coral-txt);margin:0 0 14px}
.on-dark .eyebrow{color:var(--laranja)}
.muted{color:var(--grafite)}
.on-dark .muted{color:rgba(253,251,248,.72)}

.cfm{
  display:inline-block;font:700 .78rem/1.35 var(--mono);
  background:rgba(255,107,74,.15);color:var(--coral-txt);
  border:1px dashed rgba(195,63,32,.5);border-radius:4px;padding:1px 7px;
}
.on-dark .cfm{background:rgba(255,154,60,.18);color:#FFD2A8;border-color:rgba(255,210,168,.55)}
.cfm-note{
  font-size:.9rem;line-height:1.62;color:var(--grafite);
  border-left:3px solid var(--coral);background:rgba(255,107,74,.08);padding:13px 17px;margin:0;
}
.on-dark .cfm-note{color:rgba(253,251,248,.86);background:rgba(255,255,255,.07);border-left-color:var(--laranja)}

/* ⭐ THE SLOT COMPONENT.
   The whole point of this build: a working component with the data visibly
   missing. Used for every rate, bed count, speed and address on the site. */
.slot{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:2px dashed var(--coral);border-radius:8px;background:rgba(255,107,74,.07);
  color:var(--coral-txt);font:700 .82rem/1.3 var(--mono);padding:10px 14px;text-align:center;
}
.slot--big{font-size:clamp(1.1rem,1rem + .6vw,1.5rem);padding:16px 20px;width:100%}
.on-dark .slot{border-color:var(--laranja);background:rgba(255,154,60,.12);color:#FFD2A8}

/* ---------- buttons ------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--g-cta);color:#fff;border:0;cursor:pointer;text-decoration:none;
  font:700 .86rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:17px 28px;border-radius:999px;
  transition:filter .22s,transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s;
}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:var(--sh);color:#fff}
.btn .ar{transition:transform .22s}
.btn:hover .ar{transform:translateX(4px)}
.btn--wa{background:linear-gradient(135deg,var(--verde-cta) 0%,#14614a 130%)}
.btn--dark{background:var(--noite)}
.btn--ghost{background:transparent;color:var(--noite);border:2px solid var(--noite)}
.btn--ghost:hover{background:var(--noite);color:#fff;filter:none}
.on-dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.on-dark .btn--ghost:hover{background:#fff;color:var(--noite)}
.btn--sm{padding:11px 18px;font-size:.74rem}
.btn--full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- utility bar + nav -------------------------------------------- */
.util{background:var(--noite);color:rgba(253,251,248,.84);font-size:.81rem}
.util__in{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;padding:9px 0}
.util a{color:rgba(253,251,248,.9);text-decoration:none}
.util a:hover{color:#fff;text-decoration:underline}
.util__r{margin-left:auto;display:flex;gap:14px;align-items:center}
/* all three languages carry EQUAL visual weight — EN is a co-primary market
   here, not a translation afterthought */
.langs{display:flex;border:1px solid rgba(253,251,248,.3);border-radius:999px;overflow:hidden}
.langs a{font:700 .72rem/1 var(--sans);letter-spacing:.1em;padding:8px 13px;text-decoration:none}
.langs a.on{background:var(--coral-cta);color:#fff}
@media(max-width:900px){.util .hide-sm{display:none}}

.hdr{
  position:sticky;top:0;z-index:80;background:rgba(253,251,248,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2);transition:box-shadow .25s;
}
.hdr.is-stuck{box-shadow:0 5px 20px rgba(26,29,36,.09)}
.hdr__in{display:flex;align-items:center;gap:20px;padding:16px 0;transition:padding .25s}
.hdr.is-stuck .hdr__in{padding:9px 0}
.brand{
  font-family:var(--display);font-size:1.16rem;line-height:1.1;color:var(--noite);
  text-decoration:none;flex:none;display:flex;flex-direction:column;gap:5px;
  text-transform:uppercase;letter-spacing:-.02em;
}
.brand small{font:600 .56rem/1.3 var(--sans);letter-spacing:.16em;color:var(--coral-txt);text-transform:none}
.nav{display:flex;gap:20px;margin-left:auto;align-items:center}
.nav a{font:600 .84rem/1 var(--sans);color:var(--noite);text-decoration:none;padding:7px 0;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--g-warm);transition:right .28s 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:44px;height:40px;border:2px solid var(--noite);border-radius:10px;background:transparent;cursor:pointer;padding:10px 9px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--noite);border-radius:2px;transition:transform .26s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none;flex-direction:column;background:#fff;border-bottom:1px solid var(--line)}
.mnav a{padding:15px 22px;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--noite);font-weight:600}
.mnav.open{display:flex;animation:drop .3s cubic-bezier(.2,.7,.3,1)}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(max-width:1060px){.nav{display:none}.burger{display:flex}.hdr__r .btn--ghost{display:none}}

/* ---------- sections ------------------------------------------------------ */
.sec{padding:clamp(52px,6.5vw,106px) 0}
.sec--areia{background:var(--areia)}
.sec--soft{background:var(--g-soft)}
.sec--noite{background:var(--noite);color:rgba(253,251,248,.86)}
.sec--noite h1,.sec--noite h2,.sec--noite h3{color:#fff}
.sec--com{background:var(--g-com);color:rgba(253,251,248,.9)}
.sec--com h1,.sec--com h2,.sec--com h3{color:#fff}
.sec-head{max-width:64ch;margin-bottom:clamp(28px,3.4vw,48px)}
.sec-head--row{display:flex;gap:28px;justify-content:space-between;align-items:flex-end;max-width:none;flex-wrap:wrap}

/* ---------- hero ---------------------------------------------------------- */
.hero{position:relative;isolation:isolate;min-height:min(90vh,780px);display:flex;align-items:flex-end;background:var(--noite);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(80px,10vw,150px) 0 clamp(40px,5vw,72px);color:#fff}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:rgba(255,255,255,.9);margin-top:18px}

/* ---------- ⭐ three-way comparison ------------------------------------- */
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.compare{grid-template-columns:1fr}}
.plan{
  background:#fff;border:2px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .26s,box-shadow .26s,border-color .26s;
}
.plan:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
/* the monthly column is the product — it is visually the loudest */
.plan--month{border-color:var(--coral);box-shadow:var(--sh)}
.plan__top{padding:24px 24px 20px;border-bottom:1px solid var(--line-2)}
.plan--month .plan__top{background:var(--g-warm);color:#fff}
.plan--month .plan__top h3{color:#fff}
.plan__top h3{font-size:1.3rem}
.plan__top .sub{font:600 .72rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-top:8px;display:block;opacity:.85}
.plan__price{padding:22px 24px;border-bottom:1px solid var(--line-2);text-align:center}
/* oversized display numeral for the monthly rate — the thing a nomad reads */
.plan__price .num{font-family:var(--display);font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);line-height:1;color:var(--noite);display:block}
.plan__price .per{display:block;margin-top:8px;font:600 .72rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--grafite)}
.plan ul{list-style:none;margin:0;padding:22px 24px;display:grid;gap:12px;flex:1;font-size:.92rem}
.plan ul li{display:flex;gap:10px;align-items:flex-start}
.plan ul li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--coral);margin-top:8px}
.plan--month ul li::before{background:var(--verde)}
.plan__cta{padding:0 24px 24px}

/* ---------- availability widget ------------------------------------------ */
.avail{background:#fff;border:2px solid var(--line);border-radius:18px;overflow:hidden}
.avail__in{display:grid;grid-template-columns:1fr 1fr .7fr 1fr auto;gap:0}
.avail .f{padding:18px 18px;border-right:1px solid var(--line-2);display:flex;flex-direction:column;gap:6px}
.avail .f:last-of-type{border-right:0}
.avail label{font:700 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--grafite)}
.avail input,.avail select{font:400 .98rem/1.3 var(--sans);color:var(--noite);background:transparent;border:0;border-bottom:2px solid var(--line);padding:6px 0;width:100%}
.avail .go{display:flex}
.avail .go .btn{height:100%;border-radius:0;width:100%}
@media(max-width:1000px){
  .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{padding:18px}
}
.avail__note{padding:13px 18px;border-top:1px solid var(--line-2);font-size:.84rem;color:var(--grafite);background:var(--areia)}

/* ---------- community calendar ------------------------------------------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
@media(max-width:1000px){.cal{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.cal{grid-template-columns:repeat(2,1fr)}}
.day{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:14px;
  padding:18px 14px;display:flex;flex-direction:column;gap:10px;min-height:150px;
  transition:background .24s,transform .24s,border-color .24s;
}
.day:hover{background:rgba(255,255,255,.12);transform:translateY(-3px);border-color:var(--laranja)}
.day b{font:700 .7rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--laranja)}
.day .ev{font-size:.86rem;color:#fff}

/* ---------- amenity grid -------------------------------------------------- */
.amen{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1000px){.amen{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.amen{grid-template-columns:repeat(2,1fr)}}
.amen > div{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:20px 14px;text-align:center;transition:transform .24s,box-shadow .24s}
.amen > div:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.amen .ic{width:42px;height:42px;margin:0 auto 12px;border-radius:12px;display:grid;place-items:center;background:var(--areia);color:var(--noite);font-size:1.1rem}
.amen b{display:block;font:700 .86rem/1.3 var(--sans)}
.amen span{display:block;margin-top:8px}

/* ---------- cards / grids ------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards--2{grid-template-columns:1fr 1fr}
@media(max-width:960px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards,.cards--2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .26s,box-shadow .26s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.card__i{overflow:hidden;position:relative}
.card__i img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__i img{transform:scale(1.06)}
.card__b{padding:20px 20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.card__b h3{font-size:1.16rem}
.card__b p{font-size:.9rem;margin:0}

/* ---------- Instagram feed ------------------------------------------------ */
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ig a{display:block;border-radius:12px;overflow:hidden;aspect-ratio:1/1}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .35s}
.ig a:hover img{transform:scale(1.08);filter:saturate(1.12)}
@media(max-width:760px){.ig{grid-template-columns:repeat(3,1fr)}}

/* ---------- accordion ----------------------------------------------------- */
.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__b{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;background:transparent;
  border:0;cursor:pointer;text-align:left;padding:20px 2px;
  font-family:var(--display);font-size:clamp(.98rem,.92rem + .3vw,1.16rem);color:var(--noite);text-transform:uppercase;letter-spacing:-.01em}
.acc__b .pm{flex:none;width:26px;height:26px;position:relative}
.acc__b .pm::before,.acc__b .pm::after{content:"";position:absolute;left:4px;right:4px;top:12px;height:3px;background:var(--coral);border-radius:2px;transition:transform .25s}
.acc__b .pm::after{transform:rotate(90deg)}
.acc__b[aria-expanded="true"] .pm::after{transform:rotate(0)}
.acc__p{padding:0 2px 22px;font-size:.95rem}
.acc__p[hidden]{display:none}

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

/* ---------- rows / map / forms ------------------------------------------- */
.rows{list-style:none;margin:24px 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:center;padding:13px 0;border-bottom:1px solid var(--line-2);font-size:.95rem}
.rows b{font:700 .7rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--grafite)}
.on-dark .rows{border-top-color:rgba(255,255,255,.24)}
.on-dark .rows li{border-bottom-color:rgba(255,255,255,.12)}
.on-dark .rows b{color:rgba(253,251,248,.62)}
.map{position:relative;min-height:320px;overflow:hidden;border-radius:18px;border:2px dashed var(--coral);
  background:rgba(255,107,74,.05);display:grid;place-items:center;text-align:center;padding:28px}

.form{background:#fff;border:2px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,34px)}
.on-dark .form{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font:700 .66rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--grafite)}
.on-dark .field label{color:rgba(253,251,248,.66)}
.field input,.field select,.field textarea{font:400 1rem/1.5 var(--sans);color:var(--noite);background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 14px;width:100%}
.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:.86rem;line-height:1.55;margin:4px 0 18px}
.on-dark .consent{color:rgba(253,251,248,.78)}
.consent input{margin-top:4px;flex:none;width:17px;height:17px;accent-color:var(--coral-cta)}

/* ---------- footer -------------------------------------------------------- */
.ftr{background:var(--g-footer);color:rgba(253,251,248,.76);padding:clamp(46px,5.4vw,84px) 0 26px}
.ftr h4{font:700 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--laranja);margin:0 0 16px}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(24px,3vw,48px)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem}
.ftr a{color:rgba(253,251,248,.88);text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr .brand{color:#fff;font-size:1.3rem}
.ftr .brand small{color:var(--laranja)}
.wacta{border:2px solid rgba(37,168,126,.55);border-radius:14px;padding:22px 24px}
.wacta b{display:block;font:700 .7rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#7BE0BC;margin-bottom:10px}
.ftr__legal{margin-top:clamp(26px,3.2vw,46px);padding-top:22px;border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:.8rem;color:rgba(253,251,248,.6)}
@media(max-width:960px){.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:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--verde) 0%,var(--verde-cta) 100%);display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(27,126,94,.42);transition:transform .24s}
.wa svg{width:29px;height:29px;fill:#fff}
.wa:hover{transform:scale(1.08)}
@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:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(253,251,248,.97);
  border-top:1px solid var(--line);backdrop-filter:blur(8px)}
.mbar .btn{padding:14px 12px;font-size:.74rem}
@media(min-width:861px){.mbar{display:none}}
@media(max-width:860px){body{padding-bottom:76px}}

/* an unconfirmed contact channel renders, disabled, and says why */
[data-unconfirmed]{opacity:.6;cursor:not-allowed;filter:grayscale(.4)}

/* ---------- LGPD — greenfield, so it is built right from the first line --- */
.ck{position:fixed;left:12px;right:12px;bottom:12px;z-index:120;background:#fff;border:2px solid var(--noite);
  border-radius:18px;box-shadow:0 18px 50px rgba(26,29,36,.26);padding:18px 20px;display:none}
.ck.show{display:block;animation:fadeup .4s cubic-bezier(.2,.7,.3,1)}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ck__in{display:flex;flex-wrap:wrap;gap:18px;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:16px;margin-top:10px;font-size:.85rem}
.ck__opts label{display:flex;align-items:center;gap:7px}
.ck__opts input{width:16px;height:16px;accent-color:var(--coral-cta)}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px}
@media(max-width:860px){.ck{bottom:82px}}

/* ---------- motion -------------------------------------------------------- */
[data-rv]{opacity:0;transform:translateY(20px);transition:opacity .58s ease-out,transform .58s 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}
}

/* ---------- legal pages --------------------------------------------------- */
.legal{max-width:78ch;margin-inline:auto;padding:clamp(40px,5vw,72px) 0}
.legal h1{font-size:clamp(1.9rem,1.45rem + 2vw,2.8rem);margin-bottom:10px}
.legal h2{font-size:1.2rem;margin:34px 0 10px}
.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:700 .74rem/1.3 var(--sans);letter-spacing:.12em;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}
}