/* ==========================================================================
   ILHA FORMOSA — Florianópolis/SC
   @pastelariailhaformosa
   --------------------------------------------------------------------------
   SPEC MOCKUP — lead not signed. Ilha Formosa has not seen or approved this.

   ⚠ THE FORMAT IS UNRESOLVED AND THE DESIGN SAYS SO.
   The lead sheet calls them "a traditional local seafood restaurant". Their own
   Instagram handle says PASTELARIA. Those are two different businesses with two
   different sites, two different menus and two different SEO strategies. Until
   that is answered, this build is the HYBRID path, and a visible amber banner
   under the hero carries the question. Both paths are pre-wired: the menu
   module can promote the pastel rail or the plates section by swapping one
   flag in script.js.

   The reference is restaurant-ref-01 (Verdeo): dark full-bleed hero with the
   dish bleeding off the right edge, a five-icon trust strip beneath, a priced
   menu grid as the centre of gravity, a dark reservation band, a dark
   three-column footer with opening hours. That SEQUENCE is borrowed; the tone
   is not. Verdeo is airy forest-green bistro. This is warm, salted and
   slightly rough: Atlantic navy against shell-white, hand-lettered display,
   a kraft grain on the cream bands, and an AZULEJO tile motif drawn in CSS —
   Azorean tilework is genuine Florianópolis coastal heritage and the honest
   ornament here, where a generic leaf flourish would be borrowed from nothing.

   CONTRAST (computed, WCAG 2.1 AA):
     navy   #123A4F on shell #F7F2E7 -> 10.8:1  OK  headings, body
     salt   #6C7A82 on shell #F7F2E7 ->  3.6:1  NO body — metadata only
       -> darkened for real secondary text:
     salt-d #55636B on shell #F7F2E7 ->  5.3:1  OK
     gold   #E0A030 on navy  #123A4F ->  5.9:1  OK  large text and prices
     navy   #123A4F on gold  #E0A030 ->  5.9:1  OK  <- gold buttons take NAVY
       text, never white. The brief warned this pairing was the likeliest
       failure, and white on gold is exactly the failure it warned about:
     white  #FFFFFF on gold  #E0A030 ->  2.0:1  NO — never used.
     terra  #B4552F on shell #F7F2E7 ->  4.9:1  OK
     shell  #F7F2E7 on navy  #123A4F -> 10.8:1  OK  reversed body
   ========================================================================== */

:root{
  --navy:#123A4F;
  --navy-dk:#0B2431;
  --shell:#F7F2E7;
  --shell-dk:#EFE5D2;
  --gold:#E0A030;
  --gold-dk:#C4841C;
  --lime:#7FA05A;
  --wa:#25A55B;
  --wa-dk:#1B7E44;
  --salt:#6C7A82;
  --salt-dk:#55636B;
  --terra:#B4552F;
  --terra-dk:#8E3F20;
  --line:rgba(18,58,79,.16);
  --line-2:rgba(18,58,79,.08);

  --g-navy:linear-gradient(180deg,var(--navy) 0%,var(--navy-dk) 100%);
  --g-gold:linear-gradient(135deg,var(--gold) 0%,var(--terra) 130%);
  --g-band:linear-gradient(180deg,var(--shell) 0%,var(--shell-dk) 100%);
  --g-terra:linear-gradient(160deg,var(--terra) 0%,#7E3719 100%);
  --g-scrim:linear-gradient(180deg,rgba(11,36,49,0) 38%,rgba(11,36,49,.84) 100%);

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

  --wrap:1200px;
}

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

.wrap{width:min(100% - 42px,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(--navy);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}

/* the kraft/paper grain on the cream bands — pure CSS, no image request */
.grain{position:relative}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle at 12% 22%,rgba(18,58,79,.035) 0 1px,transparent 1px),
    radial-gradient(circle at 68% 61%,rgba(180,85,47,.035) 0 1px,transparent 1px),
    radial-gradient(circle at 41% 83%,rgba(18,58,79,.03) 0 1px,transparent 1px);
  background-size:23px 23px,31px 31px,17px 17px;
}

/* ---------- azulejo motif, drawn in CSS ---------------------------------- */
/* Azorean tilework is real Florianópolis coastal heritage. Rendered as a
   repeating conic/radial pattern so it scales, tints and costs nothing. */
.azulejo{
  height:22px;width:100%;
  background:
    radial-gradient(circle at 50% 50%,var(--navy) 0 3px,transparent 3.5px) 0 0/22px 22px,
    radial-gradient(circle at 0 0,transparent 0 7px,rgba(18,58,79,.28) 7px 8px,transparent 8.5px) 0 0/22px 22px,
    radial-gradient(circle at 100% 100%,transparent 0 7px,rgba(18,58,79,.28) 7px 8px,transparent 8.5px) 0 0/22px 22px;
  opacity:.5;
}
.azulejo--gold{
  background:
    radial-gradient(circle at 50% 50%,var(--gold) 0 3px,transparent 3.5px) 0 0/22px 22px,
    radial-gradient(circle at 0 0,transparent 0 7px,rgba(224,160,48,.4) 7px 8px,transparent 8.5px) 0 0/22px 22px,
    radial-gradient(circle at 100% 100%,transparent 0 7px,rgba(224,160,48,.4) 7px 8px,transparent 8.5px) 0 0/22px 22px;
  opacity:.75;
}

/* ---------- type ---------------------------------------------------------- */
.h1{font-size:clamp(2.5rem,1.6rem + 3.9vw,4.6rem)}
.h2{font-size:clamp(1.9rem,1.35rem + 2.3vw,3rem)}
.h3{font-size:clamp(1.2rem,1.08rem + .5vw,1.5rem)}
.lede{font-size:clamp(1.04rem,1rem + .3vw,1.2rem);max-width:62ch}
.eyebrow{font:600 .72rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--terra);margin:0 0 14px}
.on-navy .eyebrow{color:var(--gold)}
.muted{color:var(--salt-dk)}
.on-navy .muted{color:rgba(247,242,231,.72)}

.cfm{
  display:inline-block;font:600 .78rem/1.35 var(--mono);
  background:rgba(224,160,48,.2);color:#7A4C05;
  border:1px dashed var(--gold-dk);border-radius:3px;padding:1px 7px;
}
.on-navy .cfm{background:rgba(224,160,48,.2);color:#F6DFB1;border-color:var(--gold)}
.cfm-note{
  font-size:.9rem;line-height:1.62;color:var(--salt-dk);
  border-left:3px solid var(--gold);background:rgba(224,160,48,.11);padding:13px 17px;margin:0;
}
.on-navy .cfm-note{color:rgba(247,242,231,.86);background:rgba(224,160,48,.13);border-left-color:var(--gold)}

/* ⚠ the format-question banner — mockup only, removed once answered */
.format-flag{
  background:var(--g-gold);color:var(--navy);
  padding:16px 20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;
  text-align:center;font:600 .95rem/1.5 var(--sans);
}
.format-flag b{font-weight:700}

/* ---------- buttons ------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--g-gold);color:var(--navy);border:0;cursor:pointer;text-decoration:none;
  font:700 .92rem/1 var(--sans);letter-spacing:.02em;padding:16px 28px;border-radius:4px;
  transition:filter .22s,transform .22s cubic-bezier(.2,.7,.3,1);
}
/* gold buttons carry NAVY text, never white — white on gold is 2.0:1 */
.btn:hover{filter:brightness(1.07);transform:translateY(-2px);color:var(--navy)}
.btn .ar{transition:transform .22s}
.btn:hover .ar{transform:translateX(4px)}
.btn--wa{background:linear-gradient(135deg,var(--wa) 0%,var(--wa-dk) 130%);color:#fff}
.btn--wa:hover{color:#fff}
.btn--navy{background:var(--navy);color:var(--shell)}
.btn--navy:hover{color:var(--shell)}
.btn--ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn--ghost:hover{background:var(--navy);color:var(--shell);filter:none}
.on-navy .btn--ghost{color:var(--shell);border-color:rgba(247,242,231,.55)}
.on-navy .btn--ghost:hover{background:var(--shell);color:var(--navy)}
.btn--sm{padding:11px 17px;font-size:.83rem}
.btn--full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- header -------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:80;background:rgba(247,242,231,.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(18,58,79,.1)}
.hdr__in{display:flex;align-items:center;gap:22px;padding:16px 0;transition:padding .25s}
.hdr.is-stuck .hdr__in{padding:9px 0}
.brand{
  font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--navy);
  text-decoration:none;flex:none;display:flex;flex-direction:column;gap:5px;
}
.brand small{font:600 .58rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--salt-dk);font-family:var(--sans)}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{font:500 .89rem/1 var(--sans);color:var(--navy);text-decoration:none;padding:7px 0;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);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}
.langs{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.langs a{font:700 .72rem/1 var(--sans);letter-spacing:.08em;padding:7px 11px;text-decoration:none;color:var(--salt-dk)}
.langs a.on{background:var(--navy);color:var(--shell)}
.burger{display:none;width:44px;height:40px;border:1px solid var(--line);border-radius:4px;background:transparent;cursor:pointer;padding:11px 10px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--navy);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:#fff;border-bottom:1px solid var(--line)}
.mnav a{padding:15px 22px;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--navy);font-weight:500}
.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:980px){.nav{display:none}.burger{display:flex}.hdr__r .btn--ghost{display:none}}

/* ---------- sections ------------------------------------------------------ */
.sec{padding:clamp(52px,6.5vw,106px) 0}
.sec--band{background:var(--g-band)}
.sec--navy{background:var(--g-navy);color:rgba(247,242,231,.86)}
.sec--navy h1,.sec--navy h2,.sec--navy h3{color:var(--shell)}
.sec--terra{background:var(--g-terra);color:rgba(247,242,231,.9)}
.sec--terra h1,.sec--terra h2,.sec--terra h3{color:#fff}
.sec-head{max-width:66ch;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 — Verdeo's move: photo bleeding off the right edge ------ */
.hero{background:var(--g-navy);color:var(--shell);position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,3.6vw,56px);align-items:center}
.hero__t{padding:clamp(52px,7vw,110px) 0}
.hero h1{color:var(--shell);max-width:14ch}
.hero .lede{color:rgba(247,242,231,.88);margin-top:18px}
.hero__img{position:relative;align-self:stretch;min-height:340px}
.hero__img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* bleeds off the right edge of the viewport, as in the reference */
  width:calc(100% + 50vw);max-width:none;
}
.hero__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,36,49,.9) 0%,rgba(11,36,49,0) 42%)}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero__img{order:-1;min-height:260px}
  .hero__img img{width:100%}
  .hero__img::after{background:linear-gradient(180deg,rgba(11,36,49,.2) 0%,rgba(11,36,49,.85) 100%)}
  .hero__t{padding:28px 0 clamp(40px,6vw,64px)}
}

/* ---------- trust strip --------------------------------------------------- */
.trust{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);background:#fff}
.trust div{padding:24px 18px;border-right:1px solid var(--line-2);text-align:center}
.trust div:last-child{border-right:0}
.trust .ic{width:42px;height:42px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:rgba(224,160,48,.2);color:var(--terra);font-size:1.15rem}
.trust b{display:block;font:600 .92rem/1.35 var(--sans)}
.trust span{display:block;margin-top:6px;font-size:.79rem;color:var(--salt-dk)}
@media(max-width:900px){
  .trust{grid-template-columns:1fr 1fr}
  .trust div{border-bottom:1px solid var(--line-2)}
  .trust div:nth-child(2n){border-right:0}
}
@media(max-width:420px){.trust{grid-template-columns:1fr}.trust div{border-right:0}}

/* ---------- menu — the conversion engine --------------------------------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--gold)}
.dish{
  scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;transition:border-color .24s,transform .24s;
}
.dish:hover{border-color:var(--gold);transform:translateY(-3px)}
.dish__i{overflow:hidden;position:relative;aspect-ratio:4/5}
.dish__i img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.dish:hover .dish__i img{transform:scale(1.05)}
.dish__b{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.dish__b h3{font-size:1.1rem}
.dish__b > p{font-size:.88rem;color:var(--salt-dk);margin:0}
.price{
  display:inline-flex;align-items:center;background:var(--g-gold);color:var(--navy);
  font:700 .92rem/1 var(--mono);padding:9px 14px;border-radius:999px;align-self:flex-start;
}
.railnav{display:flex;gap:8px;margin-top:18px}
.railnav button{width:44px;height:44px;border:1px solid var(--navy);border-radius:4px;background:transparent;cursor:pointer;color:var(--navy);transition:background .2s,color .2s}
.railnav button:hover{background:var(--navy);color:var(--shell)}

/* allergen chips — state is never colour-only, every chip carries its word */
.aller{display:flex;flex-wrap:wrap;gap:5px}
.aller span{
  font:600 .66rem/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--line);background:var(--shell-dk);color:var(--navy);
  padding:5px 8px;border-radius:3px;white-space:nowrap;
}
.aller .veg{background:rgba(127,160,90,.18);border-color:rgba(127,160,90,.55);color:#3F5A26}
.aller .gl{background:rgba(224,160,48,.18);border-color:var(--gold-dk);color:#7A4C05}

/* accordion cardápio — every panel ships OPEN, JS collapses */
.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(1.12rem,1rem + .5vw,1.42rem);color:var(--navy);
}
.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:2px;background:var(--terra);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}
.acc__p[hidden]{display:none}
.mlist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.mlist li{
  display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:start;
  padding:16px 0;border-bottom:1px dashed var(--line);
}
.mlist li:last-child{border-bottom:0}
.mlist .nm{font:600 .98rem/1.4 var(--sans)}
.mlist .ds{font-size:.86rem;color:var(--salt-dk);margin:4px 0 8px}
.mlist .pr{font:700 1rem/1 var(--mono);color:var(--terra);white-space:nowrap;justify-self:end}
.mlist .act{grid-column:1 / -1}

/* ---------- steps --------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:#fff;counter-reset:s}
.steps > div{padding:30px 26px;border-right:1px solid var(--line-2)}
.steps > div:last-child{border-right:0}
.steps b{
  counter-increment:s;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--navy);color:var(--gold);font:700 .95rem/1 var(--mono);margin-bottom:14px;
}
.steps b::before{content:counter(s)}
.steps h3{font-size:1.18rem;margin-bottom:8px}
.steps p{font-size:.92rem;color:var(--salt-dk);margin:0}
@media(max-width:820px){.steps{grid-template-columns:1fr}.steps > div{border-right:0;border-bottom:1px solid var(--line-2)}}

/* ---------- split / gallery ----------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center}
.split--top{align-items:start}
.split--wide{grid-template-columns:1.12fr .88fr}
@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--tall img{aspect-ratio:3/4}
.shot:hover img{transform:scale(1.04)}
.cap{font-size:.78rem;color:var(--salt-dk);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}}

.gal{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.gal figure{overflow:hidden;position:relative;aspect-ratio:1/1}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.07)}
.gal figure:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media(max-width:820px){.gal{grid-template-columns:repeat(3,1fr)}
  .gal figure:nth-child(1){grid-column:span 2;grid-row:span 1;aspect-ratio:1/1}}
@media(max-width:480px){.gal{grid-template-columns:repeat(2,1fr)}}

.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ig a{display:block;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.1)}
@media(max-width:760px){.ig{grid-template-columns:repeat(3,1fr)}}

/* ---------- empty structural placeholders -------------------------------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev{border:2px dashed var(--gold-dk);background:rgba(224,160,48,.09);padding:26px 22px;min-height:150px;
  display:flex;flex-direction:column;justify-content:center;gap:10px}
.rev .stars{font-size:1.1rem;color:var(--gold-dk);letter-spacing:.2em;opacity:.4}
@media(max-width:860px){.revs{grid-template-columns:1fr}}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.num b{display:block;font:700 clamp(1.9rem,1.4rem + 2vw,2.9rem)/1 var(--mono);color:var(--shell)}
.num span{display:block;margin-top:8px;font-size:.86rem;color:rgba(247,242,231,.78)}
@media(max-width:760px){.nums{grid-template-columns:repeat(2,1fr)}}

/* ---------- allergen block ------------------------------------------------ */
.allerblock{background:#fff;border:1px solid var(--line);padding:clamp(22px,3vw,34px)}
.allerblock h3{font-size:1.1rem;margin:22px 0 8px}
.allerblock h3:first-of-type{margin-top:0}
.allerblock ul{margin:0 0 14px;padding-left:1.15em}
.allerblock li{margin-bottom:6px;font-size:.94rem}

/* ---------- 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:baseline;padding:13px 0;border-bottom:1px solid var(--line-2);font-size:.95rem}
.rows b{font:600 .7rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--salt-dk)}
.on-navy .rows{border-top-color:rgba(247,242,231,.24)}
.on-navy .rows li{border-bottom-color:rgba(247,242,231,.12)}
.on-navy .rows b{color:rgba(247,242,231,.62)}
.map{position:relative;min-height:330px;overflow:hidden;border:1px solid var(--line);background:var(--shell-dk);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:46px 46px}
.map .pin{width:16px;height:16px;border-radius:50%;background:var(--terra);margin:0 auto 12px;box-shadow:0 0 0 8px rgba(180,85,47,.16);animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 8px rgba(180,85,47,.16)}50%{box-shadow:0 0 0 15px rgba(180,85,47,.04)}}

.form{background:#fff;border:1px solid var(--line);padding:clamp(22px,3vw,34px)}
.on-navy .form{background:rgba(255,255,255,.06);border-color:rgba(247,242,231,.24)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font:600 .68rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--salt-dk)}
.on-navy .field label{color:rgba(247,242,231,.66)}
.field input,.field select,.field textarea{font:400 1rem/1.5 var(--sans);color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:4px;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;color:var(--salt-dk)}
.on-navy .consent{color:rgba(247,242,231,.78)}
.consent input{margin-top:4px;flex:none;width:17px;height:17px;accent-color:var(--terra)}

/* ---------- footer -------------------------------------------------------- */
.ftr{background:var(--g-navy);color:rgba(247,242,231,.78);padding:clamp(46px,5.4vw,84px) 0 26px}
.ftr h4{font:600 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.ftr__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(24px,3vw,52px)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem}
.ftr a{color:rgba(247,242,231,.88);text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr .brand{color:var(--shell);font-size:1.6rem}
.ftr .brand small{color:var(--gold)}
.ftr .hr{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;padding:6px 0;border-bottom:1px solid rgba(247,242,231,.1)}
.ftr .hr b{font-weight:600;color:var(--shell)}
.age18{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--gold);
  color:var(--gold);font:700 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:10px 14px;border-radius:3px;
}
.ftr__legal{margin-top:clamp(26px,3.2vw,44px);padding-top:22px;border-top:1px solid rgba(247,242,231,.15);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:.8rem;color:rgba(247,242,231,.6)}
@media(max-width:820px){.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(--wa) 0%,var(--wa-dk) 100%);display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(27,126,68,.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(247,242,231,.97);
  border-top:1px solid var(--line);backdrop-filter:blur(8px)}
.mbar .btn{padding:14px 12px;font-size:.85rem}
@media(min-width:861px){.mbar{display:none}}
@media(max-width:860px){body{padding-bottom:76px}}

/* an unconfirmed contact channel is disabled, never faked */
[data-unconfirmed]{opacity:.6;cursor:not-allowed;filter:grayscale(.4)}

/* ---------- LGPD ---------------------------------------------------------- */
.ck{position:fixed;left:12px;right:12px;bottom:12px;z-index:120;background:#fff;border:1px solid var(--navy);
  border-radius:6px;box-shadow:0 18px 50px rgba(11,36,49,.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(--terra)}
.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 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}
.legal h2{font-size:1.32rem;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(--shell-dk);font:600 .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}
}

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