/* ===========================================================================
   PARADISO — Mercato e Caffè — Florianópolis, SC
   Spec mockup. LEAD, not signed. Nothing here is client work.

   THE THINNEST LEAD IN THE BATCH. The source spreadsheet carried no
   description at all — not one descriptive word — and the only confirmed
   surface is the Instagram handle @paradisomercatoecaffe, which serves a
   login wall. Everything we think we know is parsed from that handle:
   mercato (market) + e caffè (and café). We do not know whether Paradiso is
   a deli, a café, a trattoria or a roaster.

   So the design answers the question rather than assuming it. The page has
   TWO SPINES: a café side on cream, a mercato side on charcoal, entered
   through a 50/50 split hero with two doors. The whole layout is the
   argument — "nobody knows what you are" — made visible.

   PALETTE — proposed from the category and ref-02's energy. No logo was
   captured, nothing was sampled. [CONFIRM against their logo.]

     --charcoal #22262A  hero, mercato bands, footer
     --cream    #F6F1E6  café base
     --basil    #2E6B4F  primary brand green — buttons, rules, active states
     --tomato   #C63A2B  accent — price pills, badges, "novidades" only
     --olive    #77807A  secondary text
     --brass    #C79A4A  hairline dividers, wordmark lockup

   CONTRAST — measured, not assumed (WCAG 2.1 AA / eMAG):
     charcoal on cream    = 13.52:1 ✓ AAA  body + headings
     cream    on charcoal = 13.52:1 ✓ AAA  reversed copy
     white    on charcoal = 15.23:1 ✓ AAA
     basil    on cream    =  5.59:1 ✓ AA   links and small headings OK
     white    on basil    =  6.30:1 ✓ AA   the primary button is safe
     basil    on charcoal =  2.42:1 ✗ FAILS — basil NEVER carries text on the
              dark bands. Reversed green uses --basil-pale #7FB99B = 6.76:1 ✓
     tomato   on cream    =  4.61:1 ✓ AA   — but only just, so it stays on
              badges and large type, never on paragraphs
     white    on tomato   =  5.20:1 ✓ AA   the price pill label is safe
     tomato   on charcoal =  2.93:1 ✗ FAILS — the brief predicted this exact
              pairing and it does fail. Reversed accent uses
              --tomato-pale #E8897C = 6.02:1 ✓
     olive    on cream    =  3.62:1 ✗ FAILS body text. Secondary type on cream
              uses --olive-deep #5D665F = 5.28:1 ✓ AA
     olive    on charcoal =  3.74:1 ✗ FAILS. Secondary type on charcoal uses
              --stone #B7BFB8 (measured 9.31:1 against charcoal) ✓ AAA
     brass    on cream    =  2.29:1 ✗ — a HAIRLINE and ornament colour on
              cream, never type
     brass    on charcoal =  5.91:1 ✓ AA  — the wordmark lockup and dividers
              on the dark bands are fine in brass
   =========================================================================== */

:root{
  --charcoal:#22262A;
  --charcoal-2:#14181B;
  --cream:#F6F1E6;
  --cream-2:#EBE3D4;
  --basil:#2E6B4F;
  --basil-2:#1E4A36;
  --basil-pale:#7FB99B;      /* green text on charcoal — 6.76:1 */
  --tomato:#C63A2B;
  --tomato-2:#9E2A1F;
  --tomato-pale:#E8897C;     /* accent text on charcoal — 6.02:1 */
  --olive:#77807A;
  --olive-deep:#5D665F;      /* secondary text on cream — 5.28:1 */
  --stone:#B7BFB8;           /* secondary text on charcoal — 9.31:1 */
  --brass:#C79A4A;
  --line:rgba(34,38,42,.14);
  --line-d:rgba(199,154,74,.3);

  --grad-cta:linear-gradient(135deg,#2E6B4F 0%,#1E4A36 100%);
  --grad-pill:linear-gradient(135deg,#C63A2B 0%,#9E2A1F 100%);
  --grad-dark:linear-gradient(180deg,#22262A 0%,#14181B 100%);
  --grad-cream:linear-gradient(180deg,#F6F1E6 0%,#EBE3D4 100%);
  --scrim-d:linear-gradient(0deg,rgba(20,24,27,.94) 0%,rgba(20,24,27,.5) 50%,rgba(20,24,27,.2) 100%);
  --scrim-l:linear-gradient(0deg,rgba(246,241,230,.96) 0%,rgba(246,241,230,.7) 46%,rgba(246,241,230,.3) 100%);

  --serif:"Playfair Display","Georgia","Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;

  --wrap:1280px;
  --gut:clamp(18px,4.5vw,60px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--cream);color:var(--charcoal);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (max-width:860px){body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}}

h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.08;
  letter-spacing:-.015em;margin:0;text-wrap:balance;color:var(--charcoal)}
h1{font-size:clamp(2.15rem,5.6vw,4rem)}
h2{font-size:clamp(1.7rem,3.5vw,2.7rem)}
h3{font-size:clamp(1.06rem,1.8vw,1.36rem)}
h4{font-family:var(--sans);margin:0}
p{margin:0 0 1.05em}
img{max-width:100%;display:block;height:auto}
a{color:var(--basil);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--basil);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;background:var(--charcoal);color:var(--cream);
  padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}

/* ── section bands ──────────────────────────────────────────────────────── */
.sec{padding:clamp(52px,7.4vw,110px) 0;position:relative}
.sec--cream{background:var(--grad-cream)}
.sec--dark{background:var(--grad-dark);color:var(--cream)}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:var(--cream)}
.sec--dark p{color:var(--stone)}
.sec--dark a{color:var(--basil-pale)}

/* marble veining on the café bands, butcher-paper grain on the mercato bands.
   Both are CSS-generated — no image request, no weight. */
.sec--cream::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(114deg,transparent 0 78px,rgba(34,38,42,.028) 78px 79px,transparent 79px 172px),
    repeating-linear-gradient(72deg,transparent 0 132px,rgba(199,154,74,.05) 132px 133px,transparent 133px 240px);
}
.sec--dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(199,154,74,.035) 3px 4px),
    repeating-linear-gradient(90deg,transparent 0 5px,rgba(246,241,230,.02) 5px 6px);
}
.sec>.wrap{position:relative;z-index:1}

.eyebrow{font-family:var(--sans);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  font-weight:700;color:var(--basil);margin:0 0 12px}
.sec--dark .eyebrow{color:var(--basil-pale)}
.lede{font-size:clamp(1rem,1.6vw,1.16rem);color:var(--olive-deep);max-width:66ch}
.sec--dark .lede{color:var(--stone)}
.rule{height:1px;border:0;width:64px;background:var(--brass);margin:0 0 20px}
.sec--dark .rule{background:var(--brass)}

/* ── [CONFIRM] markers ──────────────────────────────────────────────────── */
.cfm{background:#FCEFC7;color:#4E3A05;border:1px solid #B08A1E;border-radius:3px;
  padding:.06em .4em;font-size:.88em;font-style:normal;font-family:var(--sans)}
.sec--dark .cfm,.ftr .cfm,.hero .cfm{background:#3B3520;color:#F6E4B6;border-color:#8A742E}

.flag{border:1px solid #B08A1E;border-left-width:4px;background:#FCEFC7;color:#4E3A05;
  padding:18px 20px;margin:22px 0;font-size:.94rem;border-radius:var(--r)}
.flag strong{color:#2F2303}
.sec--dark .flag{background:rgba(199,154,74,.12);color:#F0E2C4;border-color:var(--brass)}
.sec--dark .flag strong{color:#fff}
.flag--basil{border-color:var(--basil);background:#E7F0EA;color:#123123}
.flag--basil strong{color:#0A1E15}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border:0;cursor:pointer;text-decoration:none;font:inherit;
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;border-radius:2px;
  background:var(--grad-cta);color:#fff;                /* 6.30:1 */
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.09);
  box-shadow:0 14px 26px -14px rgba(30,74,54,.9)}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--out{background:none;border:1px solid var(--charcoal);color:var(--charcoal)}
.btn--out:hover{background:rgba(34,38,42,.06);border-color:var(--basil);color:var(--basil);box-shadow:none}
.sec--dark .btn--out,.hero__pane--dark .btn--out,.ftr .btn--out{
  border-color:var(--brass);color:var(--cream)}
.sec--dark .btn--out:hover{background:rgba(199,154,74,.14);border-color:var(--brass);color:#fff}
.btn--sm{padding:9px 16px;font-size:.64rem}
[data-unconfirmed]{opacity:.62;cursor:not-allowed;filter:grayscale(.4)}

/* ── topbar ─────────────────────────────────────────────────────────────── */
.topbar{background:var(--charcoal-2);color:var(--stone);font-size:.76rem}
.topbar__in{max-width:var(--wrap);margin:0 auto;padding:8px var(--gut);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.topbar a{color:var(--cream);text-decoration:none}
.topbar a:hover{color:var(--brass)}
.langs{margin-left:auto;display:flex;gap:2px;align-items:center}
.langs a{padding:2px 6px;color:#8B948C;text-decoration:none;letter-spacing:.1em}
.langs a[aria-current="true"]{color:var(--brass);font-weight:700}
.langs i{font-style:normal;color:#414A44}

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(246,241,230,.97);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
@supports (backdrop-filter:blur(6px)){.hdr{backdrop-filter:blur(8px)}}
.hdr.is-stuck{box-shadow:0 2px 20px -10px rgba(34,38,42,.55)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:16px;transition:padding .3s var(--ease)}
.hdr.is-stuck .hdr__in{padding-block:8px}
.mark{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--charcoal)}
.mark b{font-family:var(--serif);font-size:1.5rem;font-weight:700;letter-spacing:.01em}
.mark span{font-size:.5rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--olive-deep);margin-top:6px}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.5vw,22px)}
.nav a{color:var(--charcoal);text-decoration:none;font-size:.76rem;letter-spacing:.06em;
  padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap}
.nav a:hover{border-bottom-color:var(--brass);color:var(--basil)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:9px;cursor:pointer}
.burger span{display:block;width:23px;height:1.5px;background:var(--charcoal);margin:6px 0;
  transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (max-width:900px){
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--cream);flex-direction:column;
    justify-content:center;gap:22px;transform:translateY(-100%);
    transition:transform .4s var(--ease);margin:0;z-index:70}
  .nav.is-open{transform:none}
  .nav a{font-size:1.1rem;font-family:var(--serif)}
}

/* ── HERO — the two doors ───────────────────────────────────────────────── */
.hero{position:relative;display:grid;grid-template-columns:1fr;background:var(--charcoal)}
@media (min-width:880px){.hero{grid-template-columns:1fr 1fr}}
.hero__pane{position:relative;min-height:58svh;display:flex;align-items:flex-end;overflow:hidden}
@media (min-width:880px){.hero__pane{min-height:80svh}}
.hero__pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__pane--light::after{content:"";position:absolute;inset:0;background:var(--scrim-l)}
.hero__pane--dark::after{content:"";position:absolute;inset:0;background:var(--scrim-d)}
.hero__in{position:relative;z-index:2;padding:clamp(28px,4vw,60px);width:100%}
.hero__pane--light .hero__in{color:var(--charcoal)}
.hero__pane--dark .hero__in{color:var(--cream)}
.hero__pane--dark h2{color:var(--cream)}
.hero__in .kick{display:block;font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.2rem);
  line-height:1;margin-bottom:12px}
.hero__pane--light .kick{color:var(--basil)}
.hero__pane--dark .kick{color:var(--brass)}
.hero__in p{max-width:34ch;margin:0 0 22px}
.hero__pane--light p{color:#3A4239}
.hero__pane--dark p{color:var(--stone)}
/* the diagonal seam, desktop only */
@media (min-width:880px){
  .hero__pane--light{clip-path:polygon(0 0,100% 0,calc(100% - 90px) 100%,0 100%)}
  .hero__pane--dark{margin-left:-90px;clip-path:polygon(90px 0,100% 0,100% 100%,0 100%)}
  .hero__pane--dark .hero__in{padding-left:calc(clamp(28px,4vw,60px) + 90px)}
}
/* wordmark bridging the seam */
.hero__mark{position:absolute;z-index:5;left:50%;top:clamp(18px,4vw,40px);transform:translateX(-50%);
  text-align:center;font-family:var(--serif);color:var(--cream);
  text-shadow:0 2px 18px rgba(20,24,27,.85)}
.hero__mark b{display:block;font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:.02em}
.hero__mark span{display:block;font-family:var(--sans);font-size:.54rem;letter-spacing:.4em;
  text-transform:uppercase;color:var(--brass);margin-top:6px}
@media (max-width:879px){.hero__mark{display:none}}

.heronote{background:#FCEFC7;color:#4E3A05;border-bottom:3px solid var(--brass);
  padding:16px var(--gut);font-size:.92rem;text-align:center}
.heronote strong{color:#2F2303}

/* ── trust strip ────────────────────────────────────────────────────────── */
.trust{display:grid;gap:1px;background:var(--line);list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.trust li{background:var(--cream);padding:26px 20px;text-align:center}
.trust svg{width:26px;height:26px;fill:none;stroke:var(--basil);stroke-width:1.5;
  margin:0 auto 12px;display:block}
.trust b{display:block;font-family:var(--serif);font-size:1.02rem;margin-bottom:6px}
.trust span{font-size:.8rem;color:var(--olive-deep);line-height:1.45;display:block}

/* ── café: destaques rail ───────────────────────────────────────────────── */
.rail{display:flex;gap:18px;overflow-x:auto;padding:4px 4px 20px;margin:26px -4px 0;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;list-style:none}
.rail li{flex:0 0 clamp(230px,26vw,288px);scroll-snap-align:start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.rail li:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(34,38,42,.6)}
.rail figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.rail img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rail li:hover img{transform:scale(1.05)}
.rail__b{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.rail__b p{font-size:.86rem;color:var(--olive-deep);margin:0}
.railctl{display:flex;gap:8px;margin-top:6px}
.railctl button{width:38px;height:38px;border:1px solid var(--charcoal);background:none;
  cursor:pointer;border-radius:2px;display:grid;place-items:center;transition:background .2s}
.railctl button:hover{background:rgba(34,38,42,.07)}
.railctl svg{width:16px;height:16px;fill:none;stroke:var(--charcoal);stroke-width:2}

.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.9rem;
  font-weight:600;background:var(--grad-pill);color:#fff;   /* 5.20:1 */
  padding:5px 12px;border-radius:2px;align-self:flex-start;letter-spacing:-.02em}
.badge{display:inline-block;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#fff;background:var(--tomato);padding:4px 9px;border-radius:2px}

/* allergen chips */
.alg{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:0;padding:0}
.alg li{font-size:.57rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:4px 8px;border-radius:2px;background:#E7E2D5;color:#3A3428}
.sec--dark .alg li{background:rgba(246,241,230,.14);color:#E4DECF}
.alg li.veg{background:#E1EDE5;color:#123123}
.alg li.gl{background:#F7DED9;color:#5B1810}
.sec--dark .alg li.veg{background:rgba(127,185,155,.2);color:#CFE7DA}
.sec--dark .alg li.gl{background:rgba(232,137,124,.2);color:#F6D8D2}

/* ── accordion cardápio ─────────────────────────────────────────────────── */
.acc{margin:34px 0 0;border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__h{width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left;
  padding:20px 4px;display:flex;align-items:center;gap:14px;color:inherit}
.acc__h b{font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.4rem);flex:1}
.acc__h .n{font-family:var(--mono);font-size:.74rem;color:var(--olive-deep)}
.acc__h .cx{width:14px;height:14px;flex:0 0 auto;position:relative}
.acc__h .cx::before,.acc__h .cx::after{content:"";position:absolute;background:var(--basil);
  transition:transform .3s var(--ease)}
.acc__h .cx::before{inset:6px 0;height:2px}
.acc__h .cx::after{inset:0 6px;width:2px}
.acc__h[aria-expanded="true"] .cx::after{transform:scaleY(0)}
.acc__p{padding:0 4px 22px;display:grid;gap:14px}
.acc__p[hidden]{display:none}
.mrow{display:grid;gap:6px 16px;grid-template-columns:1fr auto;align-items:baseline;
  padding-bottom:12px;border-bottom:1px dotted var(--line)}
.mrow b{font-family:var(--serif);font-size:1.02rem}
.mrow .d{grid-column:1/-1;font-size:.86rem;color:var(--olive-deep);margin:0}
.mrow .pill{grid-row:1;grid-column:2}
.mrow .alg{grid-column:1/-1}
.mrow .btn{grid-column:1/-1;justify-self:start;margin-top:4px}

/* ── mercato: category tiles ────────────────────────────────────────────── */
.tiles{display:grid;gap:1px;background:var(--line-d);list-style:none;margin:30px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.tile{background:var(--charcoal);position:relative}
.tile__b{width:100%;background:none;border:0;cursor:pointer;font:inherit;color:inherit;
  padding:26px 22px;display:block;text-align:left;
  transition:background .3s var(--ease)}
.tile__b:hover{background:rgba(199,154,74,.09)}
.tile__b svg{width:100%;height:auto;max-width:150px;margin-bottom:16px;display:block}
.tile__b b{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-bottom:7px}
.tile__b span{display:block;font-family:var(--serif);font-size:1.24rem;color:var(--cream)}
.tile__b .cnt{font-family:var(--mono);font-size:.7rem;color:var(--stone);
  letter-spacing:0;text-transform:none;margin-top:9px;display:block}
.tile__b[aria-expanded="true"]{background:rgba(199,154,74,.14)}

/* shelf-label product cards */
.shelf{grid-column:1/-1;background:var(--charcoal-2);padding:26px clamp(20px,3vw,34px)}
.shelf[hidden]{display:none}
.shelf__g{display:grid;gap:14px;list-style:none;margin:0 0 20px;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr))}
.lbl{background:var(--cream);color:var(--charcoal);padding:16px 16px 14px;border-radius:2px;
  border-left:4px solid var(--tomato);display:grid;gap:5px;
  transition:transform .25s var(--ease)}
.lbl:hover{transform:translateY(-3px)}
.lbl b{font-family:var(--sans);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;line-height:1.35}
.lbl .org{font-size:.72rem;color:var(--olive-deep);letter-spacing:.03em}
.lbl .pr{font-family:var(--mono);font-size:1.06rem;font-weight:600;color:#8E2418;
  letter-spacing:-.02em;margin-top:3px}   /* 7.72:1 on cream */

/* ── prato do dia ───────────────────────────────────────────────────────── */
.split{display:grid;gap:clamp(26px,4vw,58px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split figure{margin:0;border-radius:var(--r);overflow:hidden}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ── trio / gallery ─────────────────────────────────────────────────────── */
.trio{display:grid;gap:clamp(14px,2vw,22px);list-style:none;margin:28px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.trio li{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sec--dark .trio li{background:rgba(246,241,230,.05);border-color:var(--line-d)}
.trio img{width:100%;aspect-ratio:4/3;object-fit:cover}
.trio div{padding:20px}
.trio h3{margin-bottom:8px}
.trio p{font-size:.88rem;margin:0}

.mason{columns:3 240px;column-gap:14px;margin:28px 0 0}
.mason figure{margin:0 0 14px;break-inside:avoid;border-radius:var(--r);overflow:hidden;position:relative}
.mason img{width:100%;transition:transform .6s var(--ease)}
.mason figure:hover img{transform:scale(1.05)}
.mason figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(20,24,27,.82);
  color:var(--cream);font-size:.66rem;letter-spacing:.06em;padding:8px 10px}

/* ── instagram strip ────────────────────────────────────────────────────── */
.igrid{display:grid;gap:8px;list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(50% - 4px,150px),1fr))}
.igrid a{display:block;position:relative;overflow:hidden;border-radius:2px}
.igrid img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .5s var(--ease)}
.igrid a:hover img{transform:scale(1.07)}

/* ── steps ──────────────────────────────────────────────────────────────── */
.how{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  list-style:none;margin:22px 0 0;padding:0;background:var(--line);counter-reset:s}
.sec--dark .how{background:var(--line-d)}
.how li{background:var(--cream);padding:24px 20px;counter-increment:s}
.sec--dark .how li{background:var(--charcoal)}
.how li::before{content:"0" counter(s);display:block;font-family:var(--mono);
  color:var(--tomato);font-size:.76rem;letter-spacing:.1em;margin-bottom:9px}
.sec--dark .how li::before{color:var(--tomato-pale)}
.how b{display:block;font-family:var(--serif);font-size:1.06rem;margin-bottom:6px}
.how span{font-size:.87rem;color:var(--olive-deep);line-height:1.5}
.sec--dark .how span{color:var(--stone)}

/* ── hours table ────────────────────────────────────────────────────────── */
.hours{width:100%;border-collapse:collapse;margin-top:20px;font-size:.9rem}
.hours caption{text-align:left;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--olive-deep);padding-bottom:12px}
.sec--dark .hours caption{color:var(--stone)}
.hours th,.hours td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
.sec--dark .hours th,.sec--dark .hours td{border-color:var(--line-d)}
.hours th{font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.hours td{font-family:var(--mono);font-size:.86rem}
.hours td:first-child{font-family:var(--sans)}

/* map placeholder */
.map{width:100%;height:auto;background:#1B1F22;border-radius:var(--r);display:block}
.map .grid{stroke:rgba(199,154,74,.16);stroke-width:1;fill:none}
.map .blk{fill:rgba(246,241,230,.06)}
.map .pin{fill:var(--tomato);stroke:var(--cream);stroke-width:1.4}
.map text{font:600 11px "Inter",Arial,sans-serif;fill:var(--stone)}

/* ── numbers band — ships EMPTY by instruction ──────────────────────────── */
.nums{display:grid;gap:1px;background:var(--line-d);list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.nums li{background:var(--charcoal);padding:28px 20px;text-align:center}
.nums b{display:block;font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.4rem);
  color:var(--brass);margin-bottom:8px}
.nums span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}

/* ── reviews (empty by instruction) ─────────────────────────────────────── */
.revs{display:grid;gap:clamp(14px,2vw,20px);list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.revs li{border:1px dashed #B08A1E;background:#FCEFC7;color:#4E3A05;
  border-radius:var(--r);padding:24px;font-size:.9rem}
.revs h3{color:#2F2303;margin-bottom:8px}

/* ── forms ──────────────────────────────────────────────────────────────── */
.form{display:grid;gap:14px;max-width:640px}
.f2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
label{display:block;font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:var(--olive-deep);margin-bottom:6px}
.sec--dark label{color:var(--stone)}
input,select,textarea{width:100%;padding:13px 14px;font:inherit;font-size:.94rem;
  border:1px solid var(--line);background:#fff;color:var(--charcoal);border-radius:2px;
  transition:border-color .2s,box-shadow .2s}
.sec--dark input,.sec--dark select,.sec--dark textarea{
  background:rgba(246,241,230,.07);border-color:var(--line-d);color:var(--cream)}
.sec--dark option{color:var(--charcoal)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--basil);
  box-shadow:0 0 0 3px rgba(46,107,79,.25)}
textarea{min-height:96px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.85rem}
.consent input{width:auto;margin-top:4px;flex:0 0 auto;accent-color:#2E6B4F}
.consent label{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:400;
  color:var(--olive-deep);margin:0}
.sec--dark .consent label{color:var(--stone)}
.formnote{font-size:.79rem;color:var(--olive-deep)}
.sec--dark .formnote{color:var(--stone)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.ftr{background:var(--grad-dark);color:var(--stone);padding:clamp(46px,7vw,90px) 0 30px;
  font-size:.89rem;border-top:1px solid var(--line-d)}
.ftr a{color:var(--cream);text-decoration:none}
.ftr a:hover{color:var(--brass)}
.ftr h4{color:var(--cream);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  margin:0 0 14px;font-weight:700}
.ftr__grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:8px}
.ftr .age{border:1px solid var(--brass);color:var(--brass);display:inline-block;
  padding:7px 13px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;border-radius:2px;margin-top:10px}
.ftr__legal{border-top:1px solid var(--line-d);margin-top:40px;padding-top:24px;
  font-size:.77rem;color:#8B948C;display:grid;gap:9px}

/* ── sticky bar + WhatsApp ──────────────────────────────────────────────── */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;
  grid-template-columns:1fr 1fr;background:var(--charcoal-2);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -3px 16px -6px rgba(0,0,0,.6)}
@media (max-width:860px){.stick{display:grid}}
.stick a{display:flex;align-items:center;justify-content:center;gap:8px;height:62px;
  text-decoration:none;font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#fff}
.stick .p{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%)}
.stick .s{background:var(--grad-cta)}
.stick svg{width:20px;height:20px;fill:currentColor}

.wa{position:fixed;right:16px;bottom:16px;z-index:66;width:54px;height:54px;border-radius:50%;
  border:0;cursor:pointer;background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
  display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
  transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:27px;height:27px;fill:#0B2E17}
@media (max-width:860px){.wa{bottom:calc(72px + env(safe-area-inset-bottom,0px))}}

/* ── cookie banner ──────────────────────────────────────────────────────── */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--charcoal-2);
  color:var(--stone);padding:18px var(--gut);border-top:3px solid var(--brass);
  font-size:.89rem;transform:translateY(115%);transition:transform .45s var(--ease)}
.ck.is-on{transform:none}
.ck__in{max-width:1140px;margin:0 auto;display:grid;gap:14px}
.ck h4{margin:0;color:var(--cream);font-family:var(--serif);font-size:1.06rem}
.ck__opts{display:flex;flex-wrap:wrap;gap:18px;font-size:.85rem}
.ck__opts label{text-transform:none;letter-spacing:0;color:var(--stone);font-weight:400;
  display:flex;gap:8px;align-items:center;margin:0;font-size:.85rem}
.ck__opts input{width:auto;accent-color:#2E6B4F}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px}
.ck__btns .btn{padding:11px 19px;font-size:.64rem}

/* ── reveals ────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .rail{scroll-snap-type:none;scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
}

@media print{.hdr,.topbar,.wa,.stick,.ck{display:none}body{background:#fff;color:#000}}

/* ---------------------------------------------------- responsive tables */
/* A data table with several prose columns has a min-content width far
   wider than a phone. Without its own scroll box it widens the whole
   document and the page scrolls sideways. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll>table{margin:0}

/* ------------------------------------------------- overflow guard
   Nothing may widen the document. Form controls and replaced elements
   cap at their container; flex/grid children get min-width:0 so they
   are allowed to shrink below their content width; and the header's
   right-hand cluster wraps on a phone rather than pushing the page
   sideways. */
input,select,textarea,img,svg,video,iframe{max-width:100%}
.form,.mapwrap,.split__t,.hdr__r,.head-right{min-width:0}
.form,.mapwrap,.split__t{max-width:100%}
@media (max-width:820px){
  .hdr__r,.head-right{flex-wrap:wrap;justify-content:flex-end;row-gap:.4rem}
}

/* ------------------------------------------- offcanvas-visibility-guard
   backdrop-filter on the sticky header makes the header the containing
   block for its position:fixed children, so this panel's top:0 is the
   header's top edge and not the viewport's. translateY(-100%) therefore
   leaves its bottom edge inside the screen at scroll 0. Visibility takes
   it out of the render tree while closed; the delay lets the slide finish
   before it disappears. */
@media (max-width:900px){
  .nav{visibility:hidden;transition:transform .32s cubic-bezier(.22,.9,.3,1),
    visibility 0s linear .32s}
  .nav.is-open{visibility:visible;transition:transform .32s cubic-bezier(.22,.9,.3,1),
    visibility 0s}
}

/* ------------------------------------------- legal-header-layout
   The LGPD privacy page is generated from a shared template and uses
   .hdr__cta for its header cluster. Most stylesheets in this batch define
   .hdr__r or .head-cta instead, so on those sites the cluster had no
   layout at all - block flow, and on a long brand name it ran off the
   screen. This defines it, keeps the back-link on one line, and lets the
   row wrap before anything overflows. */
.hdr__cta,.head-cta{display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
.hdr__cta .btn,.head-cta .btn{white-space:nowrap}
.hdr__cta .lang,.head-cta .lang{display:inline-flex;gap:.35rem;flex:0 0 auto}
@media (max-width:560px){
  .hdr__in,.head-in{flex-wrap:wrap;row-gap:.55rem}
  .hdr__in>.brand,.head-in>.brand{min-width:0;max-width:100%}
  .brand__n{white-space:normal;overflow-wrap:anywhere}
  .hdr__cta,.head-cta{width:100%;justify-content:flex-start}
}