/* ===================================================================
   Studio Hall Arquitetura e Interiores - spec mockup stylesheet
   LEAD, NOT A CLIENT. Nothing here is client work.

   PALETTE
   Their live site is Wix and exposes only Wix defaults - #FFFFFF,
   #000000, greys and Wix's own UI blue #116DFF. No brand palette is
   recoverable from it, so this is a PROPOSAL, not an extraction.
   [CONFIRM against their logo files.]
     ink black   #0C0C0D   primary dark field and display type
     graphite    #25262A   secondary dark
     warm grey   #8B8B88   secondary text and rules
     bone        #F3F1EC   page background
     sand        #E4DFD6   alternating band
     brass       #9C7B3F   accent: CTAs, active nav, hairlines, turn-key chip
     white       #FFFFFF   reversed type
   #116DFF and #3899EC are deliberately NOT carried over. They are Wix
   UI colours, not Studio Hall's.

   MEASURED CONTRAST (WCAG 2.1, computed - not estimated)
   The brief says brass "on ink passes for large text only, never body
   copy". Measured, that is wrong in a useful direction and wrong in an
   unhelpful one, so both are recorded:
     brass #9C7B3F on ink #0C0C0D ....  4.95  PASSES AA normal text
     brass #9C7B3F on bone #F3F1EC ...  3.50  FAILS AA normal (large only)
     brass #9C7B3F on sand #E4DFD6 ...  2.98  FAILS even large text
     brass #9C7B3F on white .........  3.95  FAILS AA normal
   So brass is safe as text ONLY on the dark fields. On bone and sand it
   is a fill, a hairline and a chip - never a letterform - and where a
   brass-coloured word is needed on a light field the darker
     --brass-ink #7A6031 on bone ....  5.25  PASSES AA
     --brass-ink #7A6031 on sand ....  4.46  PASSES AA
   is used instead. Same hue, same family, no new colour invented.

   The warm grey has the same problem and the brief does not flag it:
     warm grey #8B8B88 on bone ......  3.03  FAILS body text
     warm grey #8B8B88 on ink .......  5.72  PASSES
   so on light fields secondary text uses
     --muted #6A6A67 on bone ........  4.81  PASSES AA
   and #8B8B88 survives only as a rule colour and as secondary text on
   the dark fields, where it measures fine.

   On ink, the light brass
     --brass-lit #B79157 on ink .....  6.70  AAA
     --brass-lit #B79157 on graphite   5.18  AA
   carries eyebrows and small accents.

   Structural pairs, all measured:
     ink   #0C0C0D on bone .......... 17.32  AAA
     ink   #0C0C0D on sand .......... 14.73  AAA
     white on ink .................. 19.55  AAA
     white on graphite ............. 15.12  AAA
     bone  #F3F1EC on ink .......... 17.32  AAA
     ink   #0C0C0D on brass fill ....  4.95  AA  (chip and CTA text)
     white on brass fill ...........  3.95  FAILS - so the brass CTA
                                             carries INK text, not white
   Hero reversed type sits on a measured scrim whose bottom stop is
   rgba(12,12,13,.80).

   WHAT IS DELIBERATELY NOT BUILT
   No stat counters, no project count, no m2 total, no "clientes
   atendidos" figure, no award row, no star rating, no testimonial. The
   only date their site publishes is 2018, as the year Francini Portella
   began practising - which is not the same fact as a studio founding
   date, and is not animated into a counter here.
   =================================================================== */

:root{
  --ink:#0C0C0D;
  --graphite:#25262A;
  --wgrey:#8B8B88;
  --bone:#F3F1EC;
  --sand:#E4DFD6;
  --brass:#9C7B3F;
  --brass-ink:#7A6031;   /* text-safe brass on light fields */
  --brass-lit:#B79157;   /* text-safe brass on dark fields  */
  --muted:#6A6A67;       /* text-safe secondary on light fields */
  --white:#FFFFFF;
  --line:rgba(12,12,13,.12);
  --line-dark:rgba(243,241,236,.16);
  --maxw:1320px;
  --gut:clamp(1.2rem,4vw,3.2rem);
  --sans:'Jost','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --disp:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --g-scrim:linear-gradient(180deg,rgba(12,12,13,0) 38%,rgba(12,12,13,.80) 100%);
  --g-brass:linear-gradient(90deg,#9C7B3F 0%,rgba(156,123,63,0) 100%);
  --g-ink:linear-gradient(165deg,#25262A 0%,#0C0C0D 60%,#0C0C0D 100%);
  --g-glow:radial-gradient(120% 80% at 20% 0%,rgba(156,123,63,.15) 0%,rgba(156,123,63,0) 62%);
  --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.7;font-weight:300;
  color:var(--ink);background:var(--bone);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--brass-ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brass-ink);outline-offset:4px}
.band-ink a:focus-visible,.band-ink button:focus-visible,.site-foot a:focus-visible,
.site-head:not(.solid) a:focus-visible{outline-color:var(--brass-lit)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1.08;margin:0 0 .7rem;
  letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,7vw,5.4rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.15rem,2.1vw,1.5rem)}
p{margin:0 0 1rem}

.wrap{width:min(100% - (var(--gut) * 2),var(--maxw));margin-inline:auto}
.wide{width:min(100% - (var(--gut) * 2),1600px);margin-inline:auto}
section{padding-block:clamp(3.6rem,9vw,7.5rem)}
.band-sand{background:var(--sand)}
.band-ink{background:var(--g-ink);color:var(--bone)}
.band-ink h2,.band-ink h3,.band-ink h1{color:var(--white)}
.band-ink p{color:rgba(243,241,236,.86)}
.band-ink a{color:var(--brass-lit)}

.eyebrow{font-size:.68rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:var(--brass-ink);margin:0 0 1.1rem}
.band-ink .eyebrow{color:var(--brass-lit)}
.lede{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--muted);max-width:60ch;font-weight:300}
.band-ink .lede{color:rgba(243,241,236,.88)}
.small{font-size:.85rem;color:var(--muted)}
.band-ink .small{color:rgba(243,241,236,.72)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.rule-accent{height:1px;background:var(--g-brass);border:0;width:120px;margin:0 0 1.6rem}
.num{font-family:var(--disp);font-weight:400;font-size:clamp(2.2rem,5.4vw,4rem);line-height:.85;
  color:var(--brass-ink);letter-spacing:-.03em}
.band-ink .num{color:var(--brass-lit)}

/* [CONFIRM] markers stay loud - they are the point of a spec mockup */
.cfm{background:#FBF3E2;color:#4A3A18;border:1px dashed #9C7B3F;border-radius:2px;
  padding:0 .34em;font-size:.9em;font-weight:500}
.band-ink .cfm{background:rgba(156,123,63,.2);color:#F0E3CB;border-color:var(--brass-lit)}
.cfm-block{background:#FBF3E2;border:1px dashed #9C7B3F;border-left-width:4px;
  padding:1.05rem 1.2rem;font-size:.92rem;color:#4A3A18;margin:1.5rem 0;font-weight:300}
.cfm-block p:last-child{margin-bottom:0}
.band-ink .cfm-block{background:rgba(156,123,63,.12);border-color:var(--brass-lit);
  color:rgba(243,241,236,.92)}
.mock-note{background:rgba(243,241,236,.06);border:1px dashed rgba(183,145,87,.6);
  padding:1rem 1.2rem;font-size:.88rem;color:rgba(243,241,236,.9);font-weight:300}
.note-block{background:var(--white);border-left:3px solid var(--brass);padding:1.05rem 1.2rem;
  font-size:.93rem;color:var(--muted);margin:1.4rem 0}
.note-block p:last-child{margin-bottom:0}

/* ---------- buttons: brass fills carry INK text, measured 4.95 ---------- */
.btn{display:inline-flex;align-items:center;gap:.65rem;font:inherit;font-size:.72rem;
  font-weight:500;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  padding:1rem 1.9rem;border:1px solid transparent;cursor:pointer;
  transition:background .26s var(--ease),color .26s var(--ease),
             border-color .26s var(--ease),transform .26s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .22s var(--ease)}
.btn:hover .ar{transform:translateX(6px)}
.btn-brass{background:var(--brass);color:var(--ink)}
.btn-brass:hover{background:var(--brass-lit)}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:var(--graphite)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--bone)}
.btn-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.66)}
.btn-light:hover{background:var(--white);color:var(--ink)}
.btn-sm{padding:.7rem 1.25rem;font-size:.68rem}
.textlink{font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.2rem}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);
  padding:.75rem 1.1rem;z-index:200}
.skip:focus{left:.6rem;top:.6rem}

/* ---------- header ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:120;
  transition:background .32s var(--ease),box-shadow .32s var(--ease)}
.site-head .wide{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding-block:1.4rem;transition:padding .32s var(--ease)}
.site-head.solid{background:rgba(243,241,236,.97);box-shadow:0 1px 0 var(--line)}
.site-head.solid .wide{padding-block:.7rem}
.brand{font-family:var(--disp);font-size:1.5rem;font-weight:400;letter-spacing:.02em;
  text-decoration:none;color:var(--white);white-space:nowrap;line-height:1}
.brand small{display:block;font-family:var(--sans);font-size:.54rem;font-weight:400;
  letter-spacing:.4em;text-transform:uppercase;opacity:.8;margin-top:.22rem}
.site-head.solid .brand{color:var(--ink)}
.nav{display:flex;align-items:center;gap:1.7rem}
.nav a{font-size:.68rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;color:rgba(255,255,255,.9);position:relative;padding-block:.35rem}
.site-head.solid .nav a{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--brass);transition:right .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.head-right{display:flex;align-items:center;gap:1.1rem}
.lang{display:flex;align-items:center;font-size:.66rem;font-weight:500;letter-spacing:.16em}
.lang a{text-decoration:none;color:rgba(255,255,255,.66);padding:.2rem .4rem}
.site-head.solid .lang a{color:var(--muted)}
.lang a.on{color:var(--brass-lit)}
.site-head.solid .lang a.on{color:var(--brass-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:1px;background:var(--white);
  transition:transform .3s var(--ease),opacity .2s linear,background .3s var(--ease)}
.site-head.solid .burger span{background:var(--ink)}
.burger span:nth-child(1){top:.95rem}
.burger span:nth-child(2){top:1.34rem}
.burger span:nth-child(3){top:1.73rem}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.39rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.39rem) rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:110;background:var(--g-ink);
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:5.5rem var(--gut) 3rem;
  opacity:0;visibility:hidden;transform:translateY(-1rem);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s}
.mobile-nav.open{opacity:1;visibility:visible;transform:none}
.mobile-nav a{font-family:var(--disp);font-size:clamp(1.7rem,8vw,2.8rem);color:var(--white);
  text-decoration:none;padding:.3rem 0;border-bottom:1px solid var(--line-dark)}
.mobile-nav a:hover{color:var(--brass-lit)}
.mobile-nav .m-foot{margin-top:1.8rem;font-size:.86rem;color:rgba(243,241,236,.78)}
@media (max-width:1120px){.nav{display:none}.burger{display:block}.head-right .btn{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  color:var(--white);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:var(--g-scrim)}
.hero-glow{position:absolute;inset:0;z-index:1;background:var(--g-glow);
  animation:drift 26s ease-in-out infinite alternate}
.hero-in{position:relative;z-index:2;padding-block:0 clamp(3rem,10vw,6.5rem)}
.hero h1{color:var(--white);max-width:14ch;margin-bottom:1.3rem}
.hero .lede{color:rgba(255,255,255,.94);max-width:48ch}
.hero-cta{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-top:2.2rem}
.hero-cta .textlink{color:var(--brass-lit)}
@keyframes drift{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(3%,2%,0)}}
@media (max-width:720px){.hero{min-height:90svh}}

/* ---------- service-area line ---------- */
.arealine{padding-block:clamp(2.2rem,5vw,3.4rem);text-align:center;
  border-bottom:1px solid var(--line)}
.arealine p{margin:0;font-family:var(--disp);font-size:clamp(1rem,2.2vw,1.5rem);
  letter-spacing:.04em;color:var(--ink)}
.arealine .sub{font-family:var(--sans);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass-ink);margin-top:.6rem}

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

/* ---------- project grid ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.3rem;margin:2.2rem 0 2.6rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:.9rem}
.filters button{font:inherit;font-size:.68rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;background:transparent;border:1px solid transparent;color:var(--muted);
  padding:.55rem 1rem;cursor:pointer;transition:color .2s,border-color .2s}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink);border-color:var(--brass)}
.pgrid{display:grid;gap:clamp(1.4rem,3.4vw,2.8rem);
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.pcard{position:relative;text-decoration:none;color:inherit;display:block}
.pcard[hidden]{display:none}
.pcard .frame{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:4/5}
.pcard .frame img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.pcard:hover .frame img{transform:scale(1.05)}
.pcard .meta{padding-top:1.1rem}
.pcard h3{margin:0 0 .25rem}
.pcard .typo{font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-ink);margin:0 0 .5rem}
.pcard .tab{font-size:.85rem;color:var(--muted);margin:0;display:flex;gap:.7rem;flex-wrap:wrap}
.pcard.pending{cursor:default}
.pcard.pending .frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,13,.12),rgba(12,12,13,.5))}
.chip-tk{position:absolute;right:.7rem;top:.7rem;z-index:3;background:var(--brass);
  color:var(--ink);font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:.32rem .7rem}
.ph-tag{position:absolute;left:.7rem;top:.7rem;z-index:2;background:rgba(12,12,13,.86);
  color:var(--bone);font-size:.58rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding:.26rem .6rem}

/* ---------- turn key: the commercial centre ---------- */
.tk-hero{position:relative;overflow:hidden}
.tk-media{position:absolute;inset:0;z-index:0;opacity:.26}
.tk-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) contrast(1.05)}
.tk-in{position:relative;z-index:2}
.tk-h{font-family:var(--disp);font-size:clamp(1.8rem,4.6vw,3.6rem);line-height:1.12;
  color:var(--white);max-width:19ch;margin:0 0 1.6rem}
.deliverables{border-top:1px solid var(--line-dark);margin-top:2.4rem;max-width:44rem}
.deliverables li{list-style:none;border-bottom:1px solid var(--line-dark);
  padding-block:1rem;display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:baseline}
.deliverables{padding:0;margin-left:0}
.deliverables li span.i{font-family:var(--disp);font-size:1.15rem;color:var(--brass-lit)}
.deliverables li b{font-weight:500;letter-spacing:.02em;color:var(--white)}
.phases{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:var(--line-dark);border:1px solid var(--line-dark);margin-top:2.6rem}
.phase{background:var(--ink);padding:1.4rem 1.2rem}
.phase .n{font-family:var(--disp);font-size:1.6rem;color:var(--brass-lit);display:block;
  line-height:1;margin-bottom:.5rem}
.phase b{display:block;font-weight:500;color:var(--white);font-size:1rem;margin-bottom:.2rem}
.phase span{font-size:.84rem;color:rgba(243,241,236,.72)}

/* ---------- founder / team ---------- */
.split{display:grid;gap:clamp(1.8rem,5vw,4.5rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center}
.split.top{align-items:start}
.split.narrow{grid-template-columns:minmax(240px,.75fr) minmax(300px,1.25fr)}
@media (max-width:820px){.split.narrow{grid-template-columns:1fr}}
.figure{position:relative;margin:0;overflow:hidden;background:var(--sand)}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.figure:hover img{transform:scale(1.04)}
.figure figcaption{font-size:.78rem;color:var(--muted);padding:.55rem 0 0}
.band-ink .figure figcaption{color:rgba(243,241,236,.72)}
.imgstack{display:grid;gap:.8rem}
.r-3x4{aspect-ratio:3/4}
.r-4x5{aspect-ratio:4/5}
.r-3x2{aspect-ratio:3/2}
.r-16x9{aspect-ratio:16/9}
.r-1x1{aspect-ratio:1/1}
.r-21x9{aspect-ratio:21/9}
.portrait-hold{background:#FBF3E2;border:1px dashed #9C7B3F;display:flex;align-items:center;
  justify-content:center;padding:1.2rem}
.band-ink .portrait-hold{background:rgba(156,123,63,.1)}
.portrait-hold svg{width:100%;height:auto}
.sig{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line);max-width:27rem}
.band-ink .sig{border-top-color:var(--line-dark)}
.sig svg{width:100%;height:auto;display:block}
.sig .cap{font-size:.82rem;color:var(--muted);margin-top:.7rem}
.band-ink .sig .cap{color:rgba(243,241,236,.75)}

/* ---------- VR facade: click-to-load, nothing fires before consent ---------- */
.vr{position:relative;background:var(--ink);overflow:hidden;aspect-ratio:16/9}
.vr img{width:100%;height:100%;object-fit:cover;opacity:.62}
.vr .over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.9rem;text-align:center;padding:1.4rem;
  background:linear-gradient(180deg,rgba(12,12,13,.28),rgba(12,12,13,.62))}
.vr .ring{width:3.6rem;height:3.6rem;border:1px solid var(--brass-lit);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--brass-lit);
  transition:transform .3s var(--ease)}
.vr button:hover .ring{transform:scale(1.08)}
.vr button{background:transparent;border:0;color:var(--white);font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:0}
.vr .lbl{font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.vr .drag{position:absolute;left:0;right:0;bottom:.9rem;font-size:.72rem;
  color:rgba(243,241,236,.8);text-align:center;margin:0}
.vr-status{margin-top:.9rem;font-size:.88rem;color:var(--muted)}
.band-ink .vr-status{color:rgba(243,241,236,.82)}

/* ---------- soluções list ---------- */
.svclist{border-top:1px solid var(--line);margin-top:1.6rem}
.band-ink .svclist{border-top-color:var(--line-dark)}
.svclist .row{padding-block:1.5rem;border-bottom:1px solid var(--line)}
.band-ink .svclist .row{border-bottom-color:var(--line-dark)}
.svclist h3{margin:0 0 .45rem}
.svclist p{margin:0;color:var(--muted);font-size:.97rem}
.band-ink .svclist p{color:rgba(243,241,236,.84)}

/* ---------- processo ---------- */
.spine{margin-top:clamp(2rem,5vw,3.4rem);border-top:1px solid var(--line)}
.band-ink .spine{border-top-color:var(--line-dark)}
.step{display:grid;grid-template-columns:minmax(4rem,6.5rem) 1fr;gap:clamp(1rem,4vw,3rem);
  align-items:start;padding-block:clamp(1.5rem,3.4vw,2.4rem);border-bottom:1px solid var(--line)}
.band-ink .step{border-bottom-color:var(--line-dark)}
.step h3{margin:0 0 .35rem}
.step p{margin:0;color:var(--muted);max-width:56ch}
.band-ink .step p{color:rgba(243,241,236,.84)}
@media (max-width:620px){.step{grid-template-columns:1fr;gap:.4rem}}

/* ---------- blog teaser ---------- */
.posts{display:grid;gap:clamp(1.2rem,3vw,2.2rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2.2rem}
.post{background:var(--white);border:1px solid var(--line);padding:1.5rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.post:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(12,12,13,.1)}
.post .k{font-size:.64rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-ink);display:block;margin-bottom:.6rem}
.post h3{margin:0 0 .5rem;font-size:1.2rem}
.post p{margin:0;font-size:.9rem;color:var(--muted)}

/* ---------- e-book block ---------- */
.ebook{display:grid;gap:clamp(1.6rem,4vw,3.2rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center}

/* ---------- forms ---------- */
.form-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-size:.64rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:.98rem;font-weight:300;
  padding:.7rem .1rem;border:0;border-bottom:1px solid var(--ink);background:transparent;
  color:var(--ink);width:100%;border-radius:0}
.field textarea{min-height:6.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-bottom-color:var(--brass-ink);outline:none;box-shadow:0 1px 0 var(--brass-ink)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:#A5301F}
.band-ink .field label{color:rgba(243,241,236,.76)}
.band-ink .field input,.band-ink .field select,.band-ink .field textarea{
  color:var(--bone);border-bottom-color:rgba(243,241,236,.4)}
.consent{display:flex;gap:.8rem;align-items:flex-start;margin-top:1.5rem;
  font-size:.87rem;color:var(--muted);font-weight:300}
.band-ink .consent{color:rgba(243,241,236,.84)}
.consent input{margin-top:.32rem;width:1.05rem;height:1.05rem;accent-color:var(--brass-ink);
  flex:0 0 auto}
.form-status{margin-top:1.1rem;font-size:.9rem;min-height:1.4em}

/* ---------- contato ---------- */
.contact-grid{display:grid;gap:clamp(1.8rem,5vw,4.5rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.nap{font-style:normal;line-height:1.9}
.nap dt{font-size:.64rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-ink);margin-top:1.2rem}
.nap dd{margin:0}
.nap a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass)}
.nap a:hover{color:var(--brass-ink)}
.mapthumb{display:block;margin-top:1.7rem;border:1px solid var(--line);background:var(--white)}
.mapthumb svg{width:100%;height:auto;display:block}
.mapthumb .cap{padding:.75rem .95rem;font-size:.82rem;color:var(--muted);
  border-top:1px solid var(--line)}

/* ---------- case-study page ---------- */
.cs-hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden}
.cs-hero img{width:100%;aspect-ratio:21/9;object-fit:cover}
.cs-hero .scrim{position:absolute;inset:0;background:var(--g-scrim)}
.cs-hero .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding-block:0 clamp(1.8rem,4.5vw,3.4rem)}
.cs-hero h1{color:var(--white);margin-bottom:.5rem}
.cs-hero .sub{color:rgba(255,255,255,.9);font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;margin:0}
@media (max-width:720px){.cs-hero img{aspect-ratio:4/5}}
.factstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-block:clamp(2rem,5vw,3.2rem)}
.factstrip dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:0}
.factstrip div{padding:1.15rem 1.2rem 1.15rem 0;border-bottom:1px solid var(--line)}
.factstrip dt{font-size:.62rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-ink);margin-bottom:.4rem}
.factstrip dd{margin:0;font-size:.94rem;font-variant-numeric:tabular-nums}
.factstrip .tk dd{color:var(--ink);font-weight:500}
.seq{display:grid;gap:clamp(1rem,2.6vw,2rem);margin-top:clamp(2rem,5vw,3.2rem)}
.seq .two{display:grid;gap:clamp(1rem,2.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.beforeafter{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--line);border:1px solid var(--line);margin-top:1.6rem}
.beforeafter div{background:var(--white);padding:1.2rem}
.beforeafter b{display:block;font-weight:500;margin-bottom:.3rem}
.beforeafter span{font-size:.86rem;color:var(--muted)}
.prevnext{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:1.7rem;margin-top:clamp(2rem,5vw,3.2rem)}
.prevnext a{font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:var(--ink)}
.prevnext a:hover{color:var(--brass-ink)}
.crumbs{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin-bottom:1rem}
.cs-hero .crumbs{color:rgba(255,255,255,.78)}
.crumbs a{color:var(--brass-ink);text-decoration:none}
.cs-hero .crumbs a{color:var(--brass-lit)}
.crumbs a:hover{text-decoration:underline}
.page-head{padding-block:clamp(7.5rem,15vw,11rem) clamp(1.8rem,4vw,2.8rem);
  border-bottom:1px solid var(--line)}
.page-head h1{max-width:16ch}
.prose{max-width:70ch}
.prose h2{margin-top:2.6rem}
.prose ul{padding-left:1.1rem}
.prose li{margin-bottom:.5rem}

/* ---------- floating WhatsApp: this number IS published ---------- */
.wa-bubble{position:fixed;right:1rem;bottom:1rem;z-index:130;width:3.5rem;height:3.5rem;
  border-radius:50%;background:#25D366;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(12,12,13,.32);transition:transform .24s var(--ease)}
.wa-bubble:hover{transform:scale(1.07)}
.wa-bubble svg{width:1.95rem;height:1.95rem;fill:#0B2E17}
@media (max-width:720px){.wa-bubble{bottom:4.7rem}}

.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:1rem .5rem;color:var(--bone);text-decoration:none;font-size:.68rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase}
.mobile-bar a + a{border-left:1px solid var(--line-dark)}
@media (max-width:720px){.mobile-bar{display:flex}body{padding-bottom:3.5rem}}

/* ---------- footer ---------- */
.site-foot{background:var(--g-ink);color:rgba(243,241,236,.82);
  padding-block:clamp(3.2rem,7vw,5rem) 2rem}
.site-foot .brand{color:var(--white)}
.foot-grid{display:grid;gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:2.4rem}
.foot-grid h4{color:var(--white);font-size:.64rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;margin:0 0 .9rem;font-family:var(--sans)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.9rem}
.site-foot a{color:rgba(243,241,236,.82);text-decoration:none}
.site-foot a:hover{color:var(--brass-lit)}
.foot-bottom{margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;font-size:.8rem;
  color:rgba(243,241,236,.64)}
.reg-line{font-size:.82rem;color:rgba(243,241,236,.74);margin-top:.9rem}

/* ---------- LGPD: this one must gate live Google Ads tags ---------- */
.lgpd{position:fixed;left:0;right:0;bottom:0;z-index:140;background:var(--bone);
  border-top:1px solid var(--ink);box-shadow:0 -10px 34px rgba(12,12,13,.2);padding:1.15rem 0;
  transform:translateY(112%);transition:transform .42s var(--ease)}
.lgpd.show{transform:none}
.lgpd[aria-hidden="true"]{visibility:hidden}
.lgpd.show[aria-hidden="false"]{visibility:visible}
.lgpd h2{font-size:1.1rem;margin:0 0 .45rem}
.lgpd p{font-size:.88rem;color:var(--muted);margin:0 0 .9rem;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:.95rem;display:grid;gap:.65rem}
.lgpd-row{display:flex;gap:.75rem;align-items:flex-start;font-size:.86rem}
.lgpd-row input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--brass-ink);
  flex:0 0 auto}
.lgpd-row b{display:block;font-weight:500}
.lgpd-row small{color:var(--muted)}
@media (max-width:720px){.lgpd{bottom:3.5rem;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}
  .hero-glow{animation: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}
}