/* ===================================================================
   Vo Maria Marmitas - spec mockup stylesheet
   LEAD, NOT A CLIENT. Nothing here is client work.

   INSTAGRAM-ONLY LEAD. Their profile returns HTTP 200 behind a login
   wall with no readable metadata. There is no website, no published
   menu, no price, no plan tier, no cutoff, no delivery area and no
   phone number. Nothing in this build is verified.

   THE DESIGN PROBLEM: this is a logistics product wearing a
   home-cooking face, and both halves have to hold at once. The split
   is between typography and layout - the type is warm and domestic,
   the layout is strict, gridded and calendar-like. The recurring
   structural motif is the divided compartment of the marmita box
   itself, used as the layout device for the menu cards.

   PALETTE
   Instagram-only, no brand assets retrievable, so this is PROPOSED,
   not derived. [CONFIRM against their logo.]
     terracota    #B5643C   headings, CTAs, the warm anchor
     salvia       #7E9077   vegetables, healthy markers
     creme        #FAF5EC   page base
     barro        #E4D3BE   card grounds, alternating sections
     verde fundo  #2E3A2F   footer, the plan-selector panel
     manteiga     #E8B45C   the "mais popular" badge, small accents

   MEASURED CONTRAST (WCAG 2.1, computed - not estimated)
   All three accent colours fail as body text on the light grounds,
   and two of them fail as button fills as well:
     terracota #B5643C on creme #FAF5EC ....  3.98  FAILS
     terracota #B5643C on barro #E4D3BE ....  2.96  FAILS
     white            on terracota fill ....  4.33  FAILS, narrowly
     salvia    #7E9077 on creme ............  3.15  FAILS
     salvia    #7E9077 on barro ............  2.34  FAILS
     white            on salvia fill .......  3.42  FAILS
     verde            on salvia fill .......  3.49  FAILS  <- so the
       sage is a fill that can carry NO text at body size, either way.
     manteiga  #E8B45C on creme ............  1.74  FAILS badly
   The working substitutes - and the terracotta one is already in the
   brief's own gradient, as the end stop of Terracota -> #8E4526:
     --terra-ink #8E4526 on creme .........  6.38  PASSES AAA
     --terra-ink #8E4526 on barro .........  4.74  PASSES AA
     --terra-ink with WHITE text ..........  6.93  PASSES AA (buttons)
     --salvia-ink #4E5C4A on creme ........  6.55  PASSES AAA
     --salvia-ink #4E5C4A on barro ........  4.86  PASSES AA
     --salvia-lit #B7C9B1 on verde ........  6.81  PASSES AA
   And the two that work as they are:
     manteiga #E8B45C with VERDE text .....  6.31  PASSES - so the
       "mais popular" badge carries deep green, never white.
     verde    #2E3A2F on creme ............ 10.97  AAA
     verde    #2E3A2F on barro ............  8.15  AAA
     creme    #FAF5EC on verde ............ 10.97  AAA

   WHAT IS DELIBERATELY NOT BUILT
   No dish, protein, side, portion weight, plan tier, dietary line or
   price - marmita menus are generic enough that fabricated dishes
   would pass unnoticed, which is exactly why none is written. No
   calorie or macro figure. No review, rating or customer name. No
   "sem conservantes" and no "ingredientes frescos", because both are
   claims and neither is confirmed.
   NO GRANDMOTHER. No biography of Vo Maria, and no stock photograph
   of an older woman anywhere on this build - if she is real, that
   section waits for a real photograph and her consent; if she is a
   brand device, the section is cut. NO CHILDREN in any frame.
   =================================================================== */

:root{
  --terra:#B5643C;
  --terra-ink:#8E4526;   /* text-safe terracotta, and the button fill */
  --salvia:#7E9077;
  --salvia-ink:#4E5C4A;  /* text-safe sage on both light grounds */
  --salvia-lit:#B7C9B1;  /* text-safe sage on the deep green */
  --creme:#FAF5EC;
  --barro:#E4D3BE;
  --verde:#2E3A2F;
  --verde-2:#1C241D;
  --manteiga:#E8B45C;
  --muted:#5A554C;       /* 6.8:1 on creme, 5.1:1 on barro */
  --white:#FFFFFF;
  --line:rgba(46,58,47,.16);
  --line-dark:rgba(250,245,236,.22);
  --maxw:1240px;
  --gut:clamp(1.1rem,4vw,2.6rem);
  --r:14px;
  --serif:'Bitter',Georgia,'Times New Roman',serif;
  --sans:'Karla','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --g-cta:linear-gradient(90deg,#B5643C 0%,#8E4526 100%);
  --g-panel:linear-gradient(165deg,#2E3A2F 0%,#1C241D 100%);
  --g-soft:linear-gradient(180deg,#FAF5EC 0%,#E4D3BE 100%);
  --g-badge:linear-gradient(90deg,#7E9077 0%,#E8B45C 100%);
  --shadow:0 6px 20px rgba(46,58,47,.09);
  --shadow-lift:0 14px 34px rgba(46,58,47,.15);
  --ease:cubic-bezier(.22,.7,.3,1);
}

*,*::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;font-family:var(--sans);font-size:1rem;line-height:1.68;color:var(--verde);
  background:var(--creme);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--terra-ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--terra-ink);outline-offset:3px;border-radius:4px}
.band-dark a:focus-visible,.band-dark button:focus-visible,.site-foot a:focus-visible,
.panel a:focus-visible,.panel button:focus-visible{outline-color:var(--manteiga)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.16;margin:0 0 .6rem;
  color:var(--verde);letter-spacing:-.008em}
h1{font-size:clamp(2rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.35rem)}
h3{font-size:clamp(1.05rem,1.8vw,1.28rem)}
p{margin:0 0 1rem}

.wrap{width:min(100% - (var(--gut) * 2),var(--maxw));margin-inline:auto}
.wide{width:min(100% - (var(--gut) * 2),1440px);margin-inline:auto}
section{padding-block:clamp(2.8rem,7vw,5.2rem)}
.band-barro{background:var(--barro)}
.band-soft{background:var(--g-soft)}
.band-dark{background:var(--g-panel);color:rgba(250,245,236,.9)}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--creme)}
.band-dark p,.band-dark .lede{color:rgba(250,245,236,.9)}
.band-dark a{color:var(--manteiga)}

.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terra-ink);margin:0 0 .9rem}
.band-dark .eyebrow{color:var(--manteiga)}
.lede{font-size:clamp(1rem,1.5vw,1.16rem);color:var(--muted);max-width:62ch}
.band-dark .lede{color:rgba(250,245,236,.9)}
.small{font-size:.86rem;color:var(--muted)}
.band-dark .small{color:rgba(250,245,236,.8)}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* [CONFIRM] markers - on an Instagram-only lead they carry the page */
.cfm{background:#FBEEDF;color:#5A2C15;border:1px dashed var(--terra-ink);border-radius:4px;
  padding:0 .34em;font-size:.9em;font-weight:600}
.band-dark .cfm{background:rgba(232,180,92,.22);color:#FBEEDF;border-color:var(--manteiga)}
.cfm-block{background:#FBEEDF;border:1px dashed var(--terra-ink);border-left-width:5px;
  border-radius:10px;padding:1rem 1.15rem;font-size:.92rem;color:#5A2C15;margin:1.4rem 0}
.cfm-block p:last-child{margin-bottom:0}
.band-dark .cfm-block{background:rgba(232,180,92,.14);border-color:var(--manteiga);
  color:rgba(250,245,236,.94)}
.mock-note{background:rgba(250,245,236,.08);border:1px dashed rgba(232,180,92,.6);
  border-radius:10px;padding:1rem 1.15rem;font-size:.88rem;color:rgba(250,245,236,.92)}
.note-block{background:var(--white);border:1px solid var(--line);
  border-left:5px solid var(--salvia-ink);border-radius:10px;padding:1rem 1.15rem;
  font-size:.93rem;color:var(--muted);margin:1.3rem 0}
.note-block p:last-child{margin-bottom:0}
.warn-block{background:#FBEEDF;border:1px solid rgba(142,69,38,.3);
  border-left:5px solid var(--terra-ink);border-radius:10px;padding:1.05rem 1.2rem;
  font-size:.93rem;margin:1.3rem 0;color:#5A2C15}
.warn-block p:last-child{margin-bottom:0}

/* ---------- buttons: the terracotta fill is the DARK one ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;
  font-size:.9rem;font-weight:700;text-decoration:none;padding:.85rem 1.6rem;
  border:2px solid transparent;border-radius:999px;cursor:pointer;
  transition:background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),
             transform .24s var(--ease),box-shadow .24s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .22s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-terra{background:var(--terra-ink);color:#fff;box-shadow:0 6px 18px rgba(142,69,38,.28)}
.btn-terra:hover{background:var(--verde);box-shadow:var(--shadow-lift)}
.btn-verde{background:var(--verde);color:var(--creme)}
.btn-verde:hover{background:var(--terra-ink)}
.btn-ghost{background:transparent;color:var(--verde);border-color:var(--verde)}
.btn-ghost:hover{background:var(--verde);color:var(--creme)}
.btn-light{background:transparent;color:var(--creme);border-color:rgba(250,245,236,.68)}
.btn-light:hover{background:var(--creme);color:var(--verde)}
.btn-butter{background:var(--manteiga);color:var(--verde)}   /* 6.31:1 */
.btn-butter:hover{background:var(--salvia-lit)}
.btn-sm{padding:.58rem 1.1rem;font-size:.83rem}
.btn-block{width:100%}

.skip{position:absolute;left:-9999px;top:0;background:var(--verde);color:var(--creme);
  padding:.7rem 1.1rem;z-index:220}
.skip:focus{left:.6rem;top:.6rem}

/* ---------- topbar: the cutoff, which is operational not decorative ---------- */
.utility{background:var(--verde);color:rgba(250,245,236,.92);font-size:.82rem;padding:.46rem 0}
.utility .wide{display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;align-items:center}
.utility a{color:var(--manteiga);text-decoration:none}
.u-left,.u-right{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.cutoff{display:inline-flex;align-items:center;gap:.45rem;font-weight:600}
.cutoff .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--manteiga);
  flex:0 0 auto}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:120;background:rgba(250,245,236,.97);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
.site-head.solid{box-shadow:0 2px 16px rgba(46,58,47,.1)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.85rem;transition:padding .3s var(--ease)}
.site-head.solid .head-in{padding-block:.52rem}
.brand{text-decoration:none;color:var(--verde);font-family:var(--serif);font-weight:600;
  font-size:1.3rem;line-height:1.05;white-space:nowrap}
.brand small{display:block;font-family:var(--sans);font-size:.58rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--terra-ink);margin-top:.16rem}
.nav{display:flex;align-items:center;gap:1.3rem}
.nav a{font-size:.87rem;font-weight:600;text-decoration:none;color:var(--verde);
  position:relative;padding-block:.3rem}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--terra);transition:right .28s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.head-right{display:flex;align-items:center;gap:.7rem}
.lang{display:flex;align-items:center;font-size:.76rem;font-weight:700}
.lang a{text-decoration:none;color:var(--muted);padding:.2rem .38rem}
.lang a.on{color:var(--terra-ink)}
.burger{display:none;width:2.7rem;height:2.7rem;background:transparent;border:0;cursor:pointer;
  padding:0;position:relative}
.burger span{position:absolute;left:.55rem;right:.55rem;height:2px;background:var(--verde);
  border-radius:2px;transition:transform .3s var(--ease),opacity .2s linear}
.burger span:nth-child(1){top:.9rem}
.burger span:nth-child(2){top:1.3rem}
.burger span:nth-child(3){top:1.7rem}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.4rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.4rem) rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:115;background:var(--g-panel);display:flex;
  flex-direction:column;justify-content:center;gap:.2rem;padding:5rem var(--gut) 3rem;
  opacity:0;visibility:hidden;transform:translateY(-1rem);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.mobile-nav.open{opacity:1;visibility:visible;transform:none}
.mobile-nav a{font-family:var(--serif);font-size:clamp(1.4rem,6.5vw,2.1rem);color:var(--creme);
  text-decoration:none;padding:.32rem 0;border-bottom:1px solid var(--line-dark);font-weight:600}
.mobile-nav a:hover{color:var(--manteiga)}
.mobile-nav .m-foot{margin-top:1.6rem;font-size:.88rem;color:rgba(250,245,236,.82);
  font-family:var(--sans)}
@media (max-width:1120px){.nav{display:none}.burger{display:block}.head-right .btn{display:none}}

/* ---------- hero: the week ahead, not a single plate ---------- */
.hero{position:relative;overflow:hidden;background:var(--barro)}
.hero-media{position:relative}
.hero-media img{width:100%;aspect-ratio:21/9;object-fit:cover;
  max-height:min(40vh,400px)}   /* aspect-ratio alone follows the
     window WIDTH, so at 1440 this banner was 617px tall and pushed
     the h1 to y=889 - below a 900px fold */
.hero-in{padding-block:clamp(2.2rem,6vw,3.8rem)}
.hero h1{max-width:17ch;margin-bottom:.9rem}
.hero .lede{max-width:52ch}
.hero-cta{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.7rem}
@media (max-width:720px){.hero-media img{aspect-ratio:4/3}}

/* ---------- the compartment motif ----------
   The divided compartment of the marmita box, used as the layout
   device for the menu cards - a 2x2 inner grid with hairline
   dividers, which is what the box actually looks like. */
.compart{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:.7rem}
.compart div{background:var(--white);padding:.6rem .7rem;min-height:3.4rem}
.compart dt{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--salvia-ink);margin:0 0 .25rem}
.compart dd{margin:0;font-size:.88rem}
.band-barro .compart div{background:var(--creme)}

.rev{opacity:0;transform:translateY(18px);
  transition:opacity .58s var(--ease),transform .58s var(--ease)}
.rev.in{opacity:1;transform:none}

/* ---------- the plan selector: the revenue engine ---------- */
.panel{background:var(--g-panel);color:rgba(250,245,236,.92);border-radius:var(--r);
  padding:clamp(1.3rem,4vw,2.4rem);box-shadow:var(--shadow-lift)}
.panel h2,.panel h3{color:var(--creme)}
.panel .lede{color:rgba(250,245,236,.9)}
.axis{margin-top:1.5rem}
.axis .lab{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--manteiga);margin:0 0 .55rem}
.opts{display:flex;gap:.4rem;flex-wrap:wrap}
.opts button{font:inherit;font-size:.88rem;font-weight:600;background:transparent;
  border:1.5px solid var(--line-dark);color:var(--creme);padding:.55rem 1.05rem;
  border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.opts button:hover{border-color:var(--manteiga)}
.opts button[aria-pressed="true"]{background:var(--creme);border-color:var(--creme);
  color:var(--verde)}
.opts button.pending{border-style:dashed}
.summary{margin-top:1.8rem;border-top:1px solid var(--line-dark);padding-top:1.3rem;
  display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  align-items:end}
.summary .price{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.2rem);color:var(--creme);
  margin:0;line-height:1.1}
.summary .price small{display:block;font-family:var(--sans);font-size:.82rem;font-weight:500;
  color:rgba(250,245,236,.8);margin-top:.35rem}
.badge{display:inline-flex;align-items:center;gap:.35rem;background:var(--g-badge);
  color:var(--verde);border-radius:999px;padding:.24rem .8rem;font-size:.74rem;font-weight:700}
.plancards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:1.6rem}
.plancard{background:rgba(250,245,236,.07);border:1px solid var(--line-dark);border-radius:12px;
  padding:1.2rem;display:flex;flex-direction:column;gap:.5rem;position:relative}
.plancard h3{margin:0;font-size:1.1rem}
.plancard .p{font-family:var(--serif);font-size:1.3rem;color:var(--manteiga);margin:0}
.plancard ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.88rem}
.plancard .foot{margin-top:auto;padding-top:.6rem}

/* ---------- weekly menu as a real calendar strip ---------- */
.week{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:1.8rem}
.day{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem;display:flex;flex-direction:column;gap:.5rem}
.day.next{opacity:.62;border-style:dashed}
.day .d{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.day .d b{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terra-ink)}
.day .d time{font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums}
.day h3{margin:0;font-size:1.02rem}
.allerg{display:flex;gap:.28rem;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.allerg li{border:1px solid var(--line);border-radius:999px;padding:.14rem .55rem;
  font-size:.68rem;font-weight:600;color:var(--muted)}
.allerg li.gl{border-color:var(--terra-ink);color:var(--terra-ink)}
.diet{display:flex;gap:.3rem;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.diet li{background:var(--salvia);color:var(--verde);border-radius:999px;padding:.16rem .62rem;
  font-size:.7rem;font-weight:700}

/* ---------- steps ---------- */
.steps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-top:2rem;counter-reset:st}
.step{counter-increment:st;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:1.3rem}
.step::before{content:counter(st);display:inline-flex;align-items:center;justify-content:center;
  width:2.3rem;height:2.3rem;border-radius:50%;background:var(--terra-ink);color:#fff;
  font-family:var(--serif);font-weight:600;font-size:1.1rem;margin-bottom:.7rem}
.step h3{margin:0 0 .3rem;font-size:1.03rem}
.step p{margin:0;color:var(--muted);font-size:.92rem}
.band-barro .step{background:var(--creme)}

/* ---------- split editorial ---------- */
.split{display:grid;gap:clamp(1.4rem,4.5vw,3.2rem);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:center}
.split.top{align-items:start}
.figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--barro)}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.figure:hover img{transform:scale(1.04)}
.figure figcaption{font-size:.79rem;color:var(--muted);padding:.5rem .1rem 0}
.band-dark .figure figcaption{color:rgba(250,245,236,.78)}
.imgpair{display:grid;gap:.85rem;grid-template-columns:1fr 1fr}
.imgpair figure:first-child{grid-column:1 / -1}
.r-3x2{aspect-ratio:3/2}
.r-4x3{aspect-ratio:4/3}
.r-16x9{aspect-ratio:16/9}
.r-1x1{aspect-ratio:1/1}
.r-21x9{aspect-ratio:21/9}
.ph-tag{position:absolute;left:.6rem;top:.6rem;z-index:2;background:rgba(46,58,47,.88);
  color:var(--creme);font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.2rem .52rem;border-radius:4px}

/* ---------- delivery area ---------- */
.area-grid{display:grid;gap:clamp(1.4rem,4.5vw,3.2rem);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:start}
.mapthumb{border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  overflow:hidden}
.mapthumb svg{width:100%;height:auto;display:block}
.mapthumb .cap{padding:.7rem .95rem;font-size:.82rem;color:var(--muted);
  border-top:1px solid var(--line)}
.hoods{display:grid;gap:.4rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  list-style:none;margin:1.2rem 0 0;padding:0}
.hoods li{background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:.55rem .8rem;font-size:.9rem;display:flex;justify-content:space-between;gap:.5rem}
.band-barro .hoods li{background:var(--creme)}

/* ---------- forms ---------- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.1rem,3vw,1.9rem);box-shadow:var(--shadow)}
.band-barro .form-card{background:var(--creme)}
.form-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.field{display:flex;flex-direction:column;gap:.32rem;min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-size:.78rem;font-weight:700;color:var(--verde)}
.field input,.field select,.field textarea{font:inherit;font-size:.96rem;padding:.62rem .8rem;
  border:1.5px solid var(--line);border-radius:9px;background:var(--creme);color:var(--verde);
  width:100%}
.field textarea{min-height:5.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--terra-ink);
  outline:none}
.field input[aria-invalid="true"]{border-color:#A5301F;background:#FBEAEC}
.panel .field label{color:var(--manteiga)}
.panel .field input,.panel .field select,.panel .field textarea{background:rgba(250,245,236,.1);
  color:var(--creme);border-color:var(--line-dark)}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;font-size:.88rem;
  color:var(--muted)}
.panel .consent{color:rgba(250,245,236,.86)}
.consent input{margin-top:.28rem;width:1.1rem;height:1.1rem;accent-color:var(--terra-ink);
  flex:0 0 auto}
.form-status{margin-top:1rem;font-size:.9rem;min-height:1.4em}

/* ---------- FAQ ---------- */
.faq{max-width:62rem;margin-inline:auto;display:grid;gap:.5rem;margin-top:1.8rem}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:0 1.15rem;box-shadow:var(--shadow)}
.band-barro .faq details{background:var(--creme)}
.faq summary{cursor:pointer;list-style:none;padding:.95rem 2.2rem .95rem 0;font-weight:700;
  color:var(--verde);position:relative;font-family:var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.2rem;top:1.25rem;width:9px;height:9px;
  border-right:2px solid var(--terra-ink);border-bottom:2px solid var(--terra-ink);
  transform:rotate(45deg);transition:transform .26s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details > *:not(summary){padding-bottom:1rem;margin-top:-.2rem;color:var(--muted)}
.faq details[open] > *:not(summary){animation:fadein .26s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- page head ---------- */
.page-head{background:var(--g-panel);color:rgba(250,245,236,.9);
  padding-block:clamp(2.2rem,5vw,3.4rem) clamp(1.4rem,3.2vw,2.1rem)}
.page-head h1{color:var(--creme)}
.page-head .lede{color:rgba(250,245,236,.88)}
.crumbs{font-size:.8rem;color:rgba(250,245,236,.74);margin-bottom:.7rem}
.crumbs a{color:var(--manteiga);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.prose{max-width:70ch}
.prose h2{margin-top:2.2rem}
.prose ul{padding-left:1.15rem}
.prose li{margin-bottom:.45rem}

/* ---------- sticky bar and bubble ---------- */
.wa-bubble{position:fixed;right:1rem;bottom:1rem;z-index:130;width:3.4rem;height:3.4rem;
  border-radius:50%;background:#25D366;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 9px 24px rgba(46,58,47,.3);transition:transform .24s var(--ease)}
.wa-bubble:hover{transform:scale(1.07)}
.wa-bubble svg{width:1.9rem;height:1.9rem;fill:#0B2E17}
.wa-bubble[data-unconfirmed]{background:var(--salvia-ink)}
@media (max-width:720px){.wa-bubble{bottom:4.6rem}}

.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:125;display:none;background:var(--verde);
  border-top:1px solid var(--line-dark)}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.92rem .5rem;color:var(--creme);text-decoration:none;font-size:.86rem;font-weight:700}
.mobile-bar a + a{border-left:1px solid var(--line-dark)}
.mobile-bar a.hot{background:var(--g-cta);color:#fff}
@media (max-width:720px){.mobile-bar{display:flex}body{padding-bottom:3.4rem}}

/* ---------- footer ---------- */
.site-foot{background:var(--g-panel);color:rgba(250,245,236,.84);
  padding-block:clamp(2.6rem,6vw,4.2rem) 2rem}
.site-foot .brand{color:var(--creme)}
.site-foot .brand small{color:var(--manteiga)}
.foot-grid{display:grid;gap:clamp(1.4rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:2rem}
.foot-grid h4{color:var(--creme);font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 .8rem;font-family:var(--sans)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;font-size:.9rem}
.site-foot a{color:rgba(250,245,236,.84);text-decoration:none}
.site-foot a:hover{color:var(--manteiga)}
.foot-bottom{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid var(--line-dark);
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;font-size:.8rem;
  color:rgba(250,245,236,.66)}

/* ---------- LGPD ---------- */
.lgpd{position:fixed;left:0;right:0;bottom:0;z-index:140;background:var(--creme);
  border-top:3px solid var(--verde);box-shadow:0 -9px 28px rgba(46,58,47,.2);padding:1.1rem 0;
  transform:translateY(112%);transition:transform .4s var(--ease)}
.lgpd.show{transform:none}
.lgpd[aria-hidden="true"]{visibility:hidden}
.lgpd.show[aria-hidden="false"]{visibility:visible}
.lgpd h2{font-size:1.05rem;margin:0 0 .4rem}
.lgpd p{font-size:.88rem;color:var(--muted);margin:0 0 .85rem;max-width:78ch}
.lgpd-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.lgpd-prefs{margin-top:1rem;border-top:1px solid var(--line);padding-top:.9rem;display:grid;gap:.6rem}
.lgpd-row{display:flex;gap:.72rem;align-items:flex-start;font-size:.86rem}
.lgpd-row input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--terra-ink);
  flex:0 0 auto}
.lgpd-row b{display:block}
.lgpd-row small{color:var(--muted)}
@media (max-width:720px){.lgpd{bottom:3.4rem;max-height:76svh;overflow-y:auto}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .rev{opacity:1;transform:none}
}

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