/* ===================================================================
   To na Arara Brecho - spec mockup stylesheet
   LEAD, NOT A CLIENT. Nothing here is client work.

   INSTAGRAM-ONLY LEAD. There is no website to read from and the
   Instagram profile sits behind a login wall, so every business fact
   in this build is [CONFIRM] - including the address, the hours and
   the phone number, all of which come from secondary sources.

   PALETTE
   No brand file was obtainable, so this is a PROPOSAL drawn from the
   arara concept - arara is the clothes rail - and a second-hand
   retail register. [CONFIRM against their logo.]
     ink         #1E1B18   garment names, rules, footer
     paper       #F6F1E7   page ground
     oxblood     #6E2230   the VENDIDA state, and nothing else
     dusty rose  #C98E8A   primary CTA, drops, "reservada"
     sage grey   #9AA394   condition scale, metadata
     brass       #A98B4E   swing-tag eyelets, hairlines
     cream card  #FDFBF6   product cards on the paper ground

   MEASURED CONTRAST (WCAG 2.1, computed - not estimated)
   The brief predicts dusty rose is too light for body text on paper.
   It is - and two more fail that the brief does not mention:
     rose  #C98E8A on paper #F6F1E7 ....  2.42  FAILS
     rose  #C98E8A on cream #FDFBF6 ....  2.63  FAILS
     white          on rose ...........  2.72  FAILS  <- so the rose
       CTA carries INK text (6.30), never white. Not flagged anywhere.
     sage  #9AA394 on paper ...........  2.32  FAILS  <- and the
       condition scale is exactly where metadata lives, so it needed
       fixing rather than noting.
     brass #A98B4E on paper ...........  2.87  FAILS
   Text-safe substitutes, same hues, nothing invented:
     --rose-ink #9C5450 on paper ......  4.91  PASSES AA
     --sage-ink #5B6856 on paper ......  5.24  PASSES AA
     --brass-ink #7A6432 on paper .....  5.05  PASSES AA
     --brass-lit #CBA96E on ink .......  7.70  on oxblood 4.88
   And the pairs that carry the build:
     ink     #1E1B18 on paper ......... 15.23  AAA
     ink     #1E1B18 on cream ......... 16.57  AAA
     oxblood #6E2230 on paper .........  9.64  AAA  <- VENDIDA reads
     paper           on oxblood .......  9.64  AAA
     white           on oxblood ....... 10.86  AAA
     ink             on rose fill .....  6.30  AA
     ink             on sage fill .....  6.56  AA
     ink             on brass fill ....  5.30  AA

   THE WOVEN PAGE TEXTURE is drawn in CSS at 3% opacity over the paper
   ground. Measured against the flat colour it moves body contrast by
   less than 0.1 - ink on paper stays above 15:1 - so it never takes
   copy below AA, which the brief requires it not to.

   WHAT IS DELIBERATELY NOT BUILT
   No star rating, no review count, no follower count, no "desde
   20XX", no "X mil pecas vendidas", no press mention. None of it is
   verified and none of it appears.
   NO GARMENT, BRAND, SIZE, MEASUREMENT, CONDITION GRADE OR PRICE IS
   INVENTED. The rail ships as structure with visible placeholders -
   a stock photograph beside a piece number and a price would read as
   an actual item for sale, and someone would try to buy it.
   =================================================================== */

:root{
  --ink:#1E1B18;
  --paper:#F6F1E7;
  --cream:#FDFBF6;
  --oxblood:#6E2230;
  --rose:#C98E8A;
  --rose-ink:#9C5450;    /* text-safe rose on the light grounds */
  --sage:#9AA394;
  --sage-ink:#5B6856;    /* text-safe sage on the light grounds */
  --brass:#A98B4E;
  --brass-ink:#7A6432;   /* text-safe brass on the light grounds */
  --brass-lit:#CBA96E;   /* text-safe brass on the dark grounds */
  --muted:#5A544C;       /* 7.4:1 on paper */
  --line:rgba(30,27,24,.14);
  --line-dark:rgba(246,241,231,.2);
  --maxw:1280px;
  --gut:clamp(1.1rem,4vw,2.6rem);
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Jost','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --g-card:linear-gradient(180deg,#FDFBF6 0%,#F6F1E7 100%);
  --g-dark:linear-gradient(160deg,#1E1B18 0%,#6E2230 100%);
  --g-cta:linear-gradient(90deg,#C98E8A 0%,#A98B4E 100%);
  --g-scale:linear-gradient(90deg,#9AA394 0%,#F6F1E7 100%);
  --shadow:0 6px 20px rgba(30,27,24,.08);
  --shadow-lift:0 14px 34px rgba(30,27,24,.14);
  --ease:cubic-bezier(.22,.7,.3,1);
}

/* the woven paper texture - measured at under 0.1 contrast impact */
.weave{
  background-image:
    repeating-linear-gradient(0deg,rgba(30,27,24,.03) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(30,27,24,.03) 0 1px,transparent 1px 4px);
}

*,*::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(--ink);
  background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--rose-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(--oxblood);outline-offset:3px;border-radius:3px}
.band-dark a:focus-visible,.band-dark button:focus-visible,.site-foot a:focus-visible{
  outline-color:var(--brass-lit)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0 0 .6rem;
  letter-spacing:-.005em;color:var(--ink)}
h1{font-size:clamp(2rem,5.4vw,3.6rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.4rem)}
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),1520px);margin-inline:auto}
section{padding-block:clamp(2.8rem,7vw,5.4rem)}
.band-cream{background:var(--cream)}
.band-dark{background:var(--g-dark);color:var(--paper)}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--cream)}
.band-dark p,.band-dark .lede{color:rgba(246,241,231,.9)}
.band-dark a{color:var(--brass-lit)}

.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-ink);margin:0 0 .9rem}
.band-dark .eyebrow{color:var(--brass-lit)}
.lede{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--muted);max-width:62ch}
.small{font-size:.85rem;color:var(--muted)}
.band-dark .small{color:rgba(246,241,231,.78)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.rule-brass{height:1px;background:var(--g-cta);border:0;width:96px;margin:0 0 1.4rem}

/* [CONFIRM] markers - on an Instagram-only lead they are most of the page */
.cfm{background:#FBEEDD;color:#4E3A14;border:1px dashed var(--brass-ink);border-radius:3px;
  padding:0 .34em;font-size:.9em;font-weight:600}
.band-dark .cfm{background:rgba(203,169,110,.22);color:#F7EBD5;border-color:var(--brass-lit)}
.cfm-block{background:#FBEEDD;border:1px dashed var(--brass-ink);border-left-width:5px;
  border-radius:9px;padding:1rem 1.15rem;font-size:.92rem;color:#4E3A14;margin:1.4rem 0}
.cfm-block p:last-child{margin-bottom:0}
.band-dark .cfm-block{background:rgba(203,169,110,.14);border-color:var(--brass-lit);
  color:rgba(246,241,231,.94)}
.mock-note{background:rgba(246,241,231,.08);border:1px dashed rgba(203,169,110,.62);
  border-radius:9px;padding:1rem 1.15rem;font-size:.88rem;color:rgba(246,241,231,.92)}
.note-block{background:var(--cream);border:1px solid var(--line);border-left:5px solid var(--sage-ink);
  border-radius:9px;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:#FBEAEC;border:1px solid rgba(110,34,48,.26);border-left:5px solid var(--oxblood);
  border-radius:9px;padding:1.05rem 1.2rem;font-size:.93rem;margin:1.3rem 0;color:#3A1219}
.warn-block p:last-child{margin-bottom:0}

/* ---------- buttons: the rose fill carries INK, measured 6.30 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;
  font-size:.82rem;font-weight:600;letter-spacing:.06em;text-decoration:none;
  padding:.82rem 1.5rem;border:1.5px 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-rose{background:var(--rose);color:var(--ink);box-shadow:0 5px 16px rgba(201,142,138,.34)}
.btn-rose:hover{background:var(--brass);box-shadow:var(--shadow-lift)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--oxblood)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:transparent;color:var(--cream);border-color:rgba(246,241,231,.66)}
.btn-light:hover{background:var(--cream);color:var(--ink)}
.btn-sm{padding:.55rem 1.05rem;font-size:.76rem}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}

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

/* ---------- utility bar + header ---------- */
.utility{background:var(--ink);color:rgba(246,241,231,.9);font-size:.8rem;padding:.42rem 0}
.utility .wide{display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;align-items:center}
.utility a{color:var(--brass-lit);text-decoration:none}
.u-left,.u-right{display:flex;gap:.85rem;flex-wrap:wrap;align-items:center}
.status{display:inline-flex;align-items:center;gap:.4rem;font-weight:600}
.status .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--brass-lit);
  flex:0 0 auto}
.site-head{position:sticky;top:0;z-index:120;background:rgba(246,241,231,.97);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
.site-head.solid{box-shadow:0 2px 16px rgba(30,27,24,.1)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.8rem;transition:padding .3s var(--ease)}
.site-head.solid .head-in{padding-block:.5rem}
.brand{text-decoration:none;color:var(--ink);font-family:var(--serif);font-weight:600;
  font-size:1.24rem;line-height:1.05;white-space:nowrap}
.brand small{display:block;font-family:var(--sans);font-size:.58rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass-ink);margin-top:.16rem}
.nav{display:flex;align-items:center;gap:1.25rem}
.nav a{font-size:.85rem;font-weight:500;text-decoration:none;color:var(--ink);
  position:relative;padding-block:.3rem}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--rose);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:600}
.lang a{text-decoration:none;color:var(--muted);padding:.2rem .38rem}
.lang a.on{color:var(--oxblood)}
.pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--rose);color:var(--ink);
  border-radius:999px;padding:.3rem .8rem;font-size:.76rem;font-weight:600;text-decoration:none}
.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(--ink);
  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-dark);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(--cream);
  text-decoration:none;padding:.32rem 0;border-bottom:1px solid var(--line-dark);font-weight:600}
.mobile-nav a:hover{color:var(--brass-lit)}
.mobile-nav .m-foot{margin-top:1.6rem;font-size:.88rem;color:rgba(246,241,231,.82);
  font-family:var(--sans)}
@media (max-width:1120px){.nav{display:none}.burger{display:block}.head-right .btn{display:none}}

/* ---------- hero: the rail itself ---------- */
.hero{position:relative;min-height:clamp(440px,72vh,640px);display:flex;align-items:flex-end;
  overflow:hidden;color:var(--cream);background:var(--ink)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(30,27,24,.12) 28%,rgba(30,27,24,.84) 100%)}
.hero-in{position:relative;z-index:2;padding-block:0 clamp(2.2rem,6vw,4rem)}
.hero h1{color:var(--cream);max-width:16ch;margin-bottom:.8rem}
.hero .rule{font-family:var(--serif);font-size:clamp(1.05rem,2.2vw,1.5rem);font-style:italic;
  color:var(--brass-lit);margin:0 0 1rem}
.hero .live{font-size:.92rem;color:rgba(246,241,231,.92);margin:0}
.hero-cta{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.6rem}
@media (max-width:720px){.hero{min-height:68svh}}

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

/* ---------- the arara: a rail, not a grid ----------
   A grid lies about a thrift shop - it implies restock and size
   options. A rail does not: it runs out. */
.railwrap{position:relative;margin-top:1.8rem}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(228px,1fr);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:1.6rem .3rem 1.4rem;
  background-image:linear-gradient(180deg,transparent 0 22px,var(--brass) 22px 24px,
                   transparent 24px 100%)}
.rail > *{scroll-snap-align:start}
.rail:focus-visible{outline:3px solid var(--oxblood);outline-offset:2px}
.railnav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.6rem}
.railnav button{font:inherit;font-size:.9rem;width:2.5rem;height:2.5rem;border-radius:50%;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  transition:background .2s,color .2s}
.railnav button:hover{background:var(--ink);color:var(--paper)}

/* the swing tag: the recurring UI object */
.tag{position:relative;background:var(--g-card);border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);
  transform-origin:50% -22px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tag:hover{transform:rotate(-1.2deg);box-shadow:var(--shadow-lift)}
.tag::before{content:"";position:absolute;left:50%;top:-24px;width:1px;height:24px;
  background:var(--brass);transform:translateX(-.5px)}
.tag::after{content:"";position:absolute;left:50%;top:5px;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--brass);background:var(--paper);
  transform:translateX(-50%)}
.tag .shot{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sage)}
.tag .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tag:hover .shot img{transform:scale(1.04)}
.tag .body{padding:1rem;display:flex;flex-direction:column;gap:.42rem;flex:1;
  padding-top:1.5rem}
.tag .num{font-family:var(--serif);font-size:.9rem;font-style:italic;color:var(--brass-ink);
  margin:0}
.tag h3{margin:0;font-size:1rem}
.tag .price{font-family:var(--serif);font-size:1.12rem;font-weight:600;margin:0}
.tag .foot{margin-top:auto;padding-top:.6rem}
.tag[hidden]{display:none}
.tag.sold{opacity:1}
.tag.sold .shot img{filter:grayscale(.75)}

/* states - never colour alone, every one carries its text */
.state{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;
  padding:.2rem .7rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;align-self:flex-start}
.state.disp{background:var(--sage);color:var(--ink)}
.state.res{background:var(--rose);color:var(--ink)}
.state.sold{background:var(--oxblood);color:var(--cream)}
.badge-unica{position:absolute;left:.55rem;top:.55rem;z-index:2;background:var(--ink);
  color:var(--cream);font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.22rem .55rem;border-radius:4px}
.ph-tag{position:absolute;right:.55rem;top:.55rem;z-index:2;background:rgba(30,27,24,.88);
  color:var(--cream);font-size:.58rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:.2rem .5rem;border-radius:4px}

/* the measurements table on a tag - real table markup */
table.med{border-collapse:collapse;width:100%;font-size:.8rem;
  font-variant-numeric:tabular-nums;margin:0}
table.med th,table.med td{padding:.24rem .3rem;border-bottom:1px solid var(--line);
  text-align:left}
table.med th{font-weight:600;color:var(--sage-ink);white-space:nowrap}
table.med caption{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage-ink);padding-bottom:.3rem}

/* the vertical fallback, for anyone who cannot drag a rail */
.railfall{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  margin-top:1.4rem}

/* ---------- garimpo filters: size first, on purpose ---------- */
.filters{display:grid;gap:1rem;margin:1.8rem 0;padding-block:1.1rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fgroup{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.fgroup .flab{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-ink);min-width:9rem}
.fgroup button{font:inherit;font-size:.82rem;font-weight:500;background:var(--cream);
  border:1.5px solid var(--line);color:var(--ink);padding:.42rem .9rem;border-radius:999px;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.fgroup button:hover{border-color:var(--rose)}
.fgroup button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);
  color:var(--paper)}
@media (max-width:640px){.fgroup{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem}
  .fgroup .flab{min-width:auto;position:sticky;left:0;background:var(--paper);padding-right:.4rem}}
.toggle-sold{display:inline-flex;gap:.6rem;align-items:center;font-size:.88rem;
  color:var(--muted)}
.toggle-sold input{width:1.1rem;height:1.1rem;accent-color:var(--oxblood)}

/* ---------- the condition scale: the trust engine ---------- */
.scale{display:grid;gap:0;margin-top:2rem;border-top:1px solid var(--line)}
.grade{display:grid;grid-template-columns:minmax(3rem,4rem) 1fr;gap:1.2rem;
  padding-block:1.3rem;border-bottom:1px solid var(--line);align-items:start}
.grade .bars{display:flex;gap:.2rem;align-items:flex-end;height:2.2rem}
.grade .bars i{width:.5rem;background:var(--sage-ink);border-radius:2px;display:block}
.grade h3{margin:0 0 .3rem}
.grade p{margin:0;color:var(--muted);font-size:.94rem}
.grade .txt{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage-ink);display:block;margin-top:.4rem}
.grade.flaw{background:#FBEEDD;border-radius:9px;padding-inline:1rem;
  border-bottom-color:transparent;margin-block:.5rem}
@media (max-width:560px){.grade{grid-template-columns:1fr;gap:.5rem}}

/* ---------- measurement diagram ---------- */
.diagram{background:var(--cream);border:1px solid var(--line);border-radius:12px;
  padding:1.2rem;box-shadow:var(--shadow)}
.diagram svg{width:100%;height:auto;display:block}
.sizewrap{overflow-x:auto;margin-top:1.6rem;border:1px solid var(--line);border-radius:10px;
  background:var(--cream)}
table.size{border-collapse:collapse;width:100%;min-width:560px;font-size:.9rem;
  font-variant-numeric:tabular-nums}
table.size caption{text-align:left;padding:.95rem 1.05rem;font-weight:700;color:var(--oxblood);
  letter-spacing:.1em;text-transform:uppercase;font-size:.75rem}
table.size th,table.size td{padding:.65rem .9rem;border-bottom:1px solid var(--line);
  text-align:left}
table.size thead th{background:var(--ink);color:var(--cream);font-weight:600;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase}
table.size tbody th{font-weight:700}
table.size tbody tr:nth-child(even){background:rgba(154,163,148,.1)}

/* ---------- 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:12px;background:var(--sage)}
.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(246,241,231,.76)}
.r-3x2{aspect-ratio:3/2}
.r-4x3{aspect-ratio:4/3}
.r-3x4{aspect-ratio:3/4}
.r-16x9{aspect-ratio:16/9}
.r-1x1{aspect-ratio:1/1}

/* ---------- drop countdown ---------- */
.drop{background:var(--cream);border:2px dashed var(--rose);border-radius:14px;
  padding:clamp(1.2rem,3vw,2rem);display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:center}
.drop .when{font-family:var(--serif);font-size:clamp(1.2rem,3vw,1.8rem);margin:0}
.drop .cd{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.drop .cd span{background:var(--ink);color:var(--cream);border-radius:8px;padding:.5rem .8rem;
  font-variant-numeric:tabular-nums;font-weight:600;font-size:.92rem}

/* ---------- hours table ---------- */
.hours{border-collapse:collapse;width:100%;max-width:26rem;font-size:.94rem;margin-top:1rem}
.hours th,.hours td{padding:.5rem .3rem;border-bottom:1px solid var(--line);text-align:left}
.hours th{font-weight:600;color:var(--muted)}
.hours td{font-variant-numeric:tabular-nums}

/* ---------- FAQ ---------- */
.faq{max-width:62rem;margin-inline:auto;display:grid;gap:.5rem;margin-top:1.8rem}
.faq details{background:var(--cream);border:1px solid var(--line);border-radius:11px;
  padding:0 1.15rem;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:.95rem 2.2rem .95rem 0;font-weight:600;
  color:var(--ink);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(--rose-ink);border-bottom:2px solid var(--rose-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}}

/* ---------- forms ---------- */
.form-card{background:var(--cream);border:1px solid var(--line);border-radius:12px;
  padding:clamp(1.1rem,3vw,1.9rem);box-shadow:var(--shadow)}
.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:600;color:var(--ink)}
.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(--paper);color:var(--ink);
  width:100%}
.field textarea{min-height:5.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--oxblood);
  outline:none}
.field input[aria-invalid="true"]{border-color:var(--oxblood);background:#FBEAEC}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;font-size:.88rem;
  color:var(--muted)}
.consent input{margin-top:.28rem;width:1.1rem;height:1.1rem;accent-color:var(--oxblood);
  flex:0 0 auto}
.form-status{margin-top:1rem;font-size:.9rem;min-height:1.4em}

/* ---------- store card / map ---------- */
.mapthumb{display:block;margin-top:1.5rem;border:1px solid var(--line);border-radius:12px;
  background:var(--cream);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)}
.dist{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:1.4rem}
.dist .d{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:.9rem;
  text-align:center}
.dist .d b{display:block;font-family:var(--serif);font-size:1.15rem}
.dist .d span{display:block;font-size:.84rem;color:var(--muted);margin-top:.2rem}

/* ---------- page head ---------- */
.page-head{background:var(--g-dark);color:rgba(246,241,231,.9);
  padding-block:clamp(2.2rem,5vw,3.4rem) clamp(1.4rem,3.2vw,2.1rem)}
.page-head h1{color:var(--cream)}
.page-head .lede{color:rgba(246,241,231,.88)}
.crumbs{font-size:.8rem;color:rgba(246,241,231,.74);margin-bottom:.7rem}
.crumbs a{color:var(--brass-lit);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}

/* ---------- floating WhatsApp ---------- */
.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(30,27,24,.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(--sage-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(--ink);
  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(--cream);text-decoration:none;font-size:.84rem;font-weight:600}
.mobile-bar a + a{border-left:1px solid var(--line-dark)}
.mobile-bar a.hot{background:var(--rose);color:var(--ink)}
@media (max-width:720px){.mobile-bar{display:flex}body{padding-bottom:3.4rem}}

/* ---------- footer ---------- */
.site-foot{background:var(--g-dark);color:rgba(246,241,231,.84);
  padding-block:clamp(2.6rem,6vw,4.2rem) 2rem}
.site-foot .brand{color:var(--cream)}
.site-foot .brand small{color:var(--brass-lit)}
.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(--cream);font-size:.68rem;font-weight:700;letter-spacing:.22em;
  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(246,241,231,.84);text-decoration:none}
.site-foot a:hover{color:var(--brass-lit)}
.site-foot .hours th,.site-foot .hours td{border-bottom-color:var(--line-dark);
  color:rgba(246,241,231,.86)}
.site-foot .hours th{color:rgba(246,241,231,.7)}
.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(246,241,231,.66)}

/* ---------- LGPD ---------- */
.lgpd{position:fixed;left:0;right:0;bottom:0;z-index:140;background:var(--cream);
  border-top:3px solid var(--oxblood);box-shadow:0 -9px 28px rgba(30,27,24,.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:76ch}
.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(--oxblood);
  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}
  .tag:hover{transform:none}
  .rail{scroll-snap-type:none;scroll-behavior:auto}
}

/* ---------------------------------------------------- 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-wrap-guard
   At phone width this CTA wrapped onto a second line, grew the header's
   right-hand cluster to 139px and pushed it over the brand. The same action
   is in the sticky bar at the bottom of the screen, so it comes out of
   the header here. Brand, language switcher and burger keep the row. */
@media (max-width:560px){
  .head-right .pill{display:none}
}

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