/* ==========================================================================
   JOAQUINA BEACH HOTEL — Av. Prefeito Acacio Garibaldi S'Thiago, 2323
   Praia da Joaquina, Florianópolis/SC
   --------------------------------------------------------------------------
   SPEC MOCKUP — lead not signed.

   THE DEPARTURE FROM THE REFERENCE IS THE WHOLE POINT.
   hotel-beachfront-ref-02 (HardaWebPro Resort) supplies the mechanics — utility
   topbar, sticky nav with one filled booking CTA, about block plus a four-icon
   trust row, rate-bearing room carousel, inline check-in/check-out strip, dark
   footer with a green WhatsApp CTA. But that reference sells LUXURY: glass
   cards, gradients, an aspirational resort fantasy.

   This hotel is honestly and usefully not that. Their own room copy says
   "estilo simples com piso frio". Their best reviews say "acomodações simples,
   mas bem limpas e suficientes para praia" and "em frente ao mar, por um preço
   excelente". Dressing that as a luxury resort would misrepresent them and
   lose the guests who actually book.

   So: CONFIDENT, SPORTY AND PLAIN. Flat colour blocks. No glassmorphism, no
   frosted cards, no soft shadows pretending to be depth. Chunky sans headings,
   high-contrast type, wide image bleeds, square corners.

   COLOUR is theirs, read from their live CSS. The steel-blue/olive-sand pairing
   is genuinely unusual and separates this from every other blue hotel site on
   the island — so the sand is used properly, as a surface, not as a tint.

   CONTRAST (computed, WCAG 2.1 AA):
     slate  #3A3A3A on off-white #F7F7F7 -> 10.0:1  OK  body
     steel  #2D5C88 on off-white #F7F7F7 ->  6.4:1  OK  headings, links
     steel  #2D5C88 on sand      #ADA669 ->  2.3:1  NO  — never text on sand
     red    #BC0C06 on white     #FFFFFF ->  6.9:1  OK  passes at body size,
       but still reserved for CTAs only, per the brief
     white  #FFFFFF on red       #BC0C06 ->  6.9:1  OK  button labels
     sand   #ADA669 on off-white #F7F7F7 ->  2.2:1  NO  ⚠ FAILS BADLY.
       Dune sand is a SURFACE and a RULE. It never carries copy. Enforced
       throughout: --sand appears only in backgrounds, borders and dividers.
     white  #FFFFFF on steel     #2D5C88 ->  6.4:1  OK  reversed body
     ink    #23313D on sand      #ADA669 ->  6.6:1  OK  text ON a sand surface
   ========================================================================== */

:root{
  --steel:#2D5C88;
  --steel-dk:#1E3F5E;
  --sand:#ADA669;
  --sand-lt:#C4BE8C;
  --red:#BC0C06;
  --red-dk:#980A05;
  --off:#F7F7F7;
  --slate:#3A3A3A;
  --ink:#23313D;
  --wa:#25A55B;
  --wa-dk:#1B7E44;
  --line:rgba(45,92,136,.18);
  --line-2:rgba(45,92,136,.09);

  --g-hero:linear-gradient(0deg,rgba(45,92,136,.65) 0%,rgba(45,92,136,.25) 45%,rgba(45,92,136,0) 55%);
  --g-footer:linear-gradient(170deg,var(--steel) 0%,var(--steel-dk) 100%);
  --g-cta:linear-gradient(135deg,var(--red) 0%,var(--red-dk) 100%);

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

  --wrap:1220px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--off);color:var(--slate);
  font:400 clamp(1rem,.97rem + .16vw,1.06rem)/1.68 var(--sans);
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--steel);text-underline-offset:3px}
a:hover{color:var(--steel-dk)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:0;color:var(--steel)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.on-steel :focus-visible{outline-color:#fff}

.wrap{width:min(100% - 40px,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(--steel);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 — chunky, high contrast, no decoration ------------------ */
.h1{font-size:clamp(2.4rem,1.5rem + 3.9vw,4.6rem)}
.h2{font-size:clamp(1.85rem,1.35rem + 2.2vw,2.9rem)}
.h3{font-size:clamp(1.14rem,1.04rem + .45vw,1.4rem)}
.lede{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);max-width:62ch}
.eyebrow{font:700 .72rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin:0 0 12px}
.on-steel .eyebrow{color:var(--sand-lt)}
.muted{color:#6A6F74}
.on-steel .muted{color:rgba(255,255,255,.74)}

.cfm{
  display:inline-block;font:700 .78rem/1.35 var(--mono);
  background:rgba(188,12,6,.09);color:var(--red-dk);
  border:1px dashed rgba(188,12,6,.45);padding:1px 7px;
}
.on-steel .cfm{background:rgba(255,255,255,.14);color:#FFD9D7;border-color:rgba(255,217,215,.5)}
.cfm-note{
  font-size:.9rem;line-height:1.62;color:#5C6165;
  border-left:4px solid var(--sand);background:rgba(173,166,105,.14);padding:13px 17px;margin:0;
}
.on-steel .cfm-note{color:rgba(255,255,255,.86);background:rgba(255,255,255,.08);border-left-color:var(--sand)}

/* ---------- buttons — flat, square, no gloss ----------------------------- */
.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:800 .88rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  padding:17px 30px;border-radius:2px;
  transition:filter .2s,transform .2s cubic-bezier(.2,.7,.3,1);
}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px);color:#fff}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}
.btn--wa{background:linear-gradient(135deg,var(--wa) 0%,var(--wa-dk) 100%)}
.btn--steel{background:var(--steel)}
.btn--ghost{background:transparent;color:var(--steel);border:2px solid var(--steel)}
.btn--ghost:hover{background:var(--steel);color:#fff;filter:none}
.on-steel .btn--ghost{color:#fff;border-color:rgba(255,255,255,.65)}
.on-steel .btn--ghost:hover{background:#fff;color:var(--steel)}
.btn--sm{padding:11px 18px;font-size:.76rem}
.btn--full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- utility bar + nav -------------------------------------------- */
.util{background:var(--steel);color:rgba(255,255,255,.88);font-size:.81rem}
.util__in{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;padding:9px 0}
.util a{color:#fff;text-decoration:none}
.util a:hover{text-decoration:underline}
.util__r{margin-left:auto;display:flex;gap:14px;align-items:center}
.langs{display:flex;border:1px solid rgba(255,255,255,.4);overflow:hidden}
.langs a{font:700 .72rem/1 var(--sans);letter-spacing:.1em;padding:7px 11px;text-decoration:none}
.langs a.on{background:var(--sand);color:var(--ink)}
@media(max-width:860px){.util .hide-sm{display:none}}

.hdr{
  position:sticky;top:0;z-index:80;background:#fff;border-bottom:3px solid var(--sand);
  transition:box-shadow .22s;
}
.hdr.is-stuck{box-shadow:0 4px 18px rgba(45,92,136,.14)}
.hdr__in{display:flex;align-items:center;gap:20px;padding:15px 0;transition:padding .22s}
.hdr.is-stuck .hdr__in{padding:9px 0}
.brand{font:800 1.28rem/1.05 var(--sans);letter-spacing:-.03em;color:var(--steel);text-decoration:none;flex:none;display:flex;flex-direction:column;gap:4px}
.brand small{font:700 .56rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#7C8288}
.nav{display:flex;gap:20px;margin-left:auto;align-items:center}
.nav a{font:600 .87rem/1 var(--sans);color:var(--slate);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(--red);transition:right .25s 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(--steel);background:transparent;cursor:pointer;padding:10px 9px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--steel);transition:transform .24s,opacity .18s}
.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:3px solid var(--sand)}
.mnav a{padding:15px 22px;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--slate);font-weight:600}
.mnav.open{display:flex;animation:drop .28s cubic-bezier(.2,.7,.3,1)}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(max-width:1020px){.nav{display:none}.burger{display:flex}.hdr__r .btn--ghost{display:none}}

/* ---------- sections ------------------------------------------------------ */
.sec{padding:clamp(50px,6.4vw,102px) 0}
.sec--white{background:#fff}
.sec--sand{background:var(--sand)}
.sec--sand h2,.sec--sand h3{color:var(--ink)}
.sec--sand .eyebrow{color:var(--ink)}
.sec--sand p{color:var(--ink)}
.sec--steel{background:var(--steel);color:rgba(255,255,255,.9)}
.sec--steel h1,.sec--steel h2,.sec--steel 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 — surf-forward, wide bleed ------------------------------ */
.hero{position:relative;isolation:isolate;min-height:min(88vh,760px);display:flex;align-items:flex-end;background:var(--steel-dk);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(34px,4vw,58px);color:#fff}
.hero h1{color:#fff;max-width:15ch}
.hero .lede{color:rgba(255,255,255,.92);margin-top:14px}

/* "hoje na Joaquina" conditions strip — nobody else on that beach does this */
.surf{
  display:flex;flex-wrap:wrap;gap:0;border:2px solid rgba(255,255,255,.4);
  margin-top:26px;background:rgba(30,63,94,.55);backdrop-filter:blur(3px);
}
.surf div{flex:1 1 140px;padding:14px 18px;border-right:1px solid rgba(255,255,255,.28)}
.surf div:last-child{border-right:0}
.surf b{display:block;font:800 1.15rem/1 var(--sans);color:#fff}
.surf span{display:block;margin-top:6px;font:700 .64rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ---------- availability strip ------------------------------------------- */
.avail{background:#fff;border:3px solid var(--sand)}
.avail__in{display:grid;grid-template-columns:1fr 1fr .8fr auto;gap:0}
.avail .f{padding:18px 20px;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:#6A6F74}
.avail input,.avail select{font:400 1rem/1.3 var(--sans);color:var(--slate);background:transparent;border:0;border-bottom:2px solid var(--line);padding:6px 0;width:100%}
.avail .go{display:flex}
.avail .go .btn{height:100%;width:100%;border-radius:0}
@media(max-width:900px){
  .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 20px;border-top:1px solid var(--line-2);font-size:.84rem;color:#6A6F74;background:var(--off)}

/* ---------- trust badges -------------------------------------------------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);background:#fff}
.trust div{padding:26px 20px;border-right:1px solid var(--line-2);text-align:center}
.trust div:last-child{border-right:0}
.trust .ic{width:44px;height:44px;margin:0 auto 12px;display:grid;place-items:center;background:var(--sand);color:var(--ink);font-size:1.15rem}
.trust b{display:block;font:800 .98rem/1.3 var(--sans);color:var(--steel)}
.trust span{display:block;margin-top:6px;font-size:.81rem;color:#6A6F74}
@media(max-width:860px){
  .trust{grid-template-columns:1fr 1fr}
  .trust div{border-bottom:1px solid var(--line-2)}
  .trust div:nth-child(2n){border-right:0}
}

/* ---------- distance ladder — their single strongest sales asset --------- */
.ladder{position:relative;padding:34px 0 10px}
.ladder__rail{position:absolute;left:0;right:0;top:52px;height:4px;background:var(--line)}
.ladder__fill{position:absolute;left:0;top:52px;height:4px;background:var(--red);width:0;transition:width 1.4s cubic-bezier(.2,.7,.3,1)}
.ladder__row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.stop{padding-top:34px;position:relative}
.stop .dot{position:absolute;top:46px;left:0;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--steel)}
.stop:first-child .dot{background:var(--red);border-color:var(--red)}
.stop b{display:block;font:800 clamp(1.4rem,1.1rem + 1.2vw,2.1rem)/1 var(--sans);color:var(--steel);margin-top:24px}
.stop span{display:block;margin-top:8px;font:700 .68rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#6A6F74}
@media(max-width:820px){
  .ladder__row{grid-template-columns:1fr 1fr}
  .ladder__rail,.ladder__fill,.stop .dot{display:none}
  .stop{padding-top:0;border-left:4px solid var(--sand);padding-left:16px}
  .stop b{margin-top:0}
}

/* ---------- room carousel + amenity matrix ------------------------------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-thumb{background:var(--sand)}
.room{scroll-snap-align:start;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.room:hover{border-color:var(--sand);transform:translateY(-3px)}
.room__i{overflow:hidden;position:relative}
.room__i img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.room:hover .room__i img{transform:scale(1.05)}
.room__b{padding:20px;display:flex;flex-direction:column;gap:11px;flex:1}
.room__b h3{font-size:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font:600 .74rem/1 var(--sans);color:var(--steel);border:1px solid var(--line);padding:6px 9px;background:var(--off)}
.rateline{margin-top:auto;padding-top:13px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between}
.rateline .n{font:800 1.05rem/1 var(--sans);color:var(--steel)}
.railnav{display:flex;gap:8px;margin-top:18px}
.railnav button{width:46px;height:46px;border:2px solid var(--steel);background:transparent;cursor:pointer;color:var(--steel);transition:background .2s,color .2s}
.railnav button:hover{background:var(--steel);color:#fff}

/* THE AMENITY MATRIX. Their own copy says "ALGUNS quartos possuem
   ar-condicionado, TV, frigobar e cofre". That hedge is honest and it is
   preserved: no room card may imply every room has A/C. Every cell here is a
   [CONFIRM] until the front desk fills it in — getting this wrong generates
   refund arguments at check-in. */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:#fff}
table.matrix{width:100%;border-collapse:collapse;font-size:.9rem;min-width:680px}
table.matrix th,table.matrix td{border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);padding:13px 14px;text-align:left}
table.matrix th:last-child,table.matrix td:last-child{border-right:0}
table.matrix thead th{background:var(--steel);color:#fff;font:700 .7rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
table.matrix tbody th{font:700 .92rem/1.35 var(--sans);white-space:nowrap;background:var(--off);color:var(--steel)}
table.matrix tr:last-child th,table.matrix tr:last-child td{border-bottom:0}

/* ---------- feature bands ------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,62px);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;position:relative}
.shot img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.shot--tall img{aspect-ratio:4/5}
.shot:hover img{transform:scale(1.03)}
.cap{font-size:.78rem;color:#6A6F74;margin-top:9px}
.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}}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.trio{grid-template-columns:1fr}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.duo{grid-template-columns:1fr}}

/* ---------- around here cards -------------------------------------------- */
.spots{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1000px){.spots{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.spots{grid-template-columns:1fr}}
.spot{position:relative;overflow:hidden;display:block;text-decoration:none;color:inherit}
.spot img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.spot:hover img{transform:scale(1.06)}
.spot__b{position:absolute;inset:auto 0 0 0;padding:32px 16px 14px;color:#fff;
  background:linear-gradient(0deg,rgba(30,63,94,.92) 0%,rgba(30,63,94,0) 100%)}
.spot__b b{display:block;font:800 1.06rem/1.2 var(--sans)}
.spot__b span{display:block;margin-top:6px;font:700 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-lt)}

/* ---------- reviews ------------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{background:#fff;border:1px solid var(--line);border-top:5px solid var(--sand);padding:26px 24px}
.quote p{font-size:.98rem;line-height:1.6;color:var(--slate);margin:0 0 16px}
.quote .who{font:700 .72rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#6A6F74}

/* ---------- gallery ------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.filters button{font:700 .78rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  background:#fff;border:2px solid var(--line);padding:12px 18px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filters button[aria-pressed="true"]{background:var(--steel);color:#fff;border-color:var(--steel)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gal figure{overflow:hidden;aspect-ratio:1/1}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.06)}
.gal figure[hidden]{display:none}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}

/* ---------- rows / map / forms ------------------------------------------- */
.rows{list-style:none;margin:22px 0 0;padding:0;border-top:2px solid var(--line)}
.rows li{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line-2);font-size:.95rem}
.rows b{font:700 .68rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#6A6F74}
.on-steel .rows{border-top-color:rgba(255,255,255,.35)}
.on-steel .rows li{border-bottom-color:rgba(255,255,255,.15)}
.on-steel .rows b{color:rgba(255,255,255,.66)}
.map{position:relative;min-height:320px;overflow:hidden;border:1px solid var(--line);background:#DFE5EA;display:grid;place-items:center;text-align:center;padding:26px}
.map__grid{position:absolute;inset:0;opacity:.55;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:46px 46px}
.map .pin{width:16px;height:16px;border-radius:50%;background:var(--red);margin:0 auto 12px;box-shadow:0 0 0 8px rgba(188,12,6,.18);animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 8px rgba(188,12,6,.18)}50%{box-shadow:0 0 0 15px rgba(188,12,6,.04)}}

.form{background:#fff;border:1px solid var(--line);padding:clamp(22px,3vw,32px)}
.on-steel .form{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font:700 .66rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#6A6F74}
.on-steel .field label{color:rgba(255,255,255,.7)}
.field input,.field select,.field textarea{font:400 1rem/1.5 var(--sans);color:var(--slate);background:#fff;border:2px solid var(--line);padding:12px 14px;width:100%;border-radius:0}
.field textarea{min-height:108px;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 16px;color:#6A6F74}
.on-steel .consent{color:rgba(255,255,255,.8)}
.consent input{margin-top:4px;flex:none;width:17px;height:17px;accent-color:var(--red)}

/* ---------- footer -------------------------------------------------------- */
.ftr{background:var(--g-footer);color:rgba(255,255,255,.8);padding:clamp(46px,5.4vw,84px) 0 26px}
.ftr h4{font:700 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-lt);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(255,255,255,.9);text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr .brand{color:#fff;font-size:1.5rem}
.ftr .brand small{color:var(--sand-lt)}
.wacta{border:2px solid rgba(37,165,91,.6);padding:22px 24px}
.wacta b{display:block;font:700 .7rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7BD9A6;margin-bottom:10px}
.ftr__legal{margin-top:clamp(26px,3.2vw,46px);padding-top:22px;border-top:1px solid rgba(255,255,255,.2);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:.8rem;color:rgba(255,255,255,.66)}
@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:86px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--wa) 0%,var(--wa-dk) 100%);display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(27,126,68,.4);transition:transform .22s}
.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:0;
  padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:3px solid var(--sand)}
.mbar .btn{padding:16px 12px;font-size:.74rem;border-radius:0}
@media(min-width:861px){.mbar{display:none}}
@media(max-width:860px){body{padding-bottom:56px}}

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

/* ---------- LGPD ---------------------------------------------------------- */
.ck{position:fixed;left:12px;right:12px;bottom:12px;z-index:120;background:#fff;border:3px solid var(--steel);
  box-shadow:0 18px 44px rgba(30,63,94,.28);padding:18px 20px;display:none}
.ck.show{display:block;animation:fadeup .36s 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(--red)}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px}
@media(max-width:860px){.ck{bottom:66px}}

/* ---------- motion -------------------------------------------------------- */
[data-rv]{opacity:0;transform:translateY(20px);transition:opacity .55s ease-out,transform .55s 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}
  .ladder__fill{width:100%!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.28rem;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(--off);font:700 .72rem/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}
}

/* ------------------------------------------- header-cta-phone-guard
   .hdr__r is flex:none and the mobile breakpoint hides only the secondary
   button, so the language switcher + primary text CTA + burger overflow a
   390px row by 76-112px. The sticky .mbar (below 860px) and the floating
   WhatsApp button already carry these actions at this width, so the
   header's text CTAs come out and nothing is lost. */
@media (max-width:560px){
  .hdr__r .btn{display:none}
  .hdr__r{gap:8px}
}

/* ------------------------------------------- legal-header-wrap
   The LGPD privacy page uses .hdr__cta where the rest of the site uses
   .hdr__r, so the phone guard above does not reach it. Its CTA is
   "Voltar ao site" - with no nav and no burger on that page, it is the
   only explicit way back - so the row wraps and the brand shrinks rather
   than the link being hidden. */
@media (max-width:560px){
  .hdr__in,.head-in{flex-wrap:wrap;row-gap:.5rem}
  .hdr__cta,.head-cta{min-width:0;flex-wrap:wrap;justify-content:flex-end}
  .brand{min-width:0}
  .brand__n{white-space:normal;overflow-wrap:anywhere}
}

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