/* ===================================================================
   Studio Archì - spec mockup stylesheet
   LEAD, NOT A CLIENT. Nothing here is client work.

   PALETTE SOURCE
   Pulled from colours in use on studioarchi.com.br's live stylesheets
   (verified as in use; NOT verified as the formal brand palette).
   [CONFIRM against their logo files.]
     rosy taupe   #B58E78   dominant non-neutral on the current site
     sand gold    #DDB97E   secondary accent
     deep brown   #6E4B3A   dark accent
     near-black   #212121   primary text and dark fields
     off-white    #F4F4F4   alternating band
     line grey    #EBEBEB   hairline rules
   The #1863DC / #0056A7 blues in the same stylesheets are almost
   certainly framework or plugin defaults and are NOT carried over.
   [CONFIRM]

   MEASURED CONTRAST (WCAG 2.1, computed - not estimated)
     taupe  #B58E78 on #FFFFFF ......  2.96  FAILS  (AA needs 4.5)
     taupe  #B58E78 on #F4F4F4 ......  2.69  FAILS
     sand   #DDB97E on #FFFFFF ......  1.86  FAILS badly
     sand   #DDB97E on #F4F4F4 ......  1.69  FAILS badly
   The brief predicted both failures and it is right. So:
     - taupe and sand NEVER carry text. They are fills, hairlines,
       active-state rules and large display numerals only.
     - the text substitute is the brand's own deep brown:
         #6E4B3A on #FFFFFF ..........  7.69  PASSES AAA
         #6E4B3A on #F4F4F4 ..........  6.99  PASSES AAA
       No colour had to be invented - the darker accent was already
       in their palette.
   Reversed and filled pairs, all measured:
     #212121 on #FFFFFF ............. 16.10  AAA
     #212121 on #F4F4F4 ............. 14.64  AAA
     #FFFFFF on #212121 ............. 16.10  AAA
     #FFFFFF on #6E4B3A .............  7.69  AAA
     #212121 on #B58E78 .............  5.45  AA   (taupe as a CTA fill)
     #212121 on #DDB97E .............  8.68  AAA  (sand as a CTA fill)
     #DDB97E on #212121 .............  8.68  AAA  (sand on the dark band)
     #B58E78 on #212121 .............  5.45  AA   (taupe on the dark band)
   Hero reversed type sits on a measured scrim: the bottom stop is
   rgba(33,33,33,.78), which puts white type above 4.5:1 against the
   darkest photograph region behind it.
   line grey #EBEBEB on white is 1.19 - decorative only, never the
   sole indicator of a control's state.

   WHAT IS DELIBERATELY NOT BUILT
   No stat counters, no "X anos de mercado" badge, no project count,
   no m2 total, no award row. Their site publishes no founding year,
   no team, no project list and no awards, and a counter animating to
   an invented number is the single easiest way to make a technical
   practice look untechnical.
   =================================================================== */

:root{
  --taupe:#B58E78;
  --sand:#DDB97E;
  --brown:#6E4B3A;      /* the text-safe accent */
  --ink:#212121;
  --white:#FFFFFF;
  --off:#F4F4F4;
  --line:#EBEBEB;
  --muted:#5A5A5A;      /* 7.0:1 on white - body secondary */
  --maxw:1280px;
  --gut:clamp(1.2rem,4vw,3rem);
  --sans:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --disp:'Archivo','Inter',Georgia,serif;
  --rule:1px solid var(--line);
  --g-accent:linear-gradient(90deg,#B58E78 0%,#DDB97E 100%);
  --g-scrim:linear-gradient(180deg,rgba(33,33,33,0) 40%,rgba(33,33,33,.78) 100%);
  --g-dark:linear-gradient(160deg,#2B2B2B 0%,#212121 55%,#1A1A1A 100%);
  --g-warm:radial-gradient(120% 90% at 15% 0%,rgba(181,142,120,.16) 0%,rgba(181,142,120,0) 60%);
  --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.65;
  color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--brown)}
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(--brown);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.1;margin:0 0 .6rem;
  font-weight:600;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5.6vw,4.2rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.05rem,1.9vw,1.35rem)}
p{margin:0 0 1rem}

.wrap{width:min(100% - (var(--gut) * 2),var(--maxw));margin-inline:auto}
.wide{width:min(100% - (var(--gut) * 2),1560px);margin-inline:auto}
.bleed{width:100%}
section{padding-block:clamp(3.4rem,8vw,7rem)}
.band-off{background:var(--off)}
.band-dark{background:var(--g-dark);color:#fff}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark a{color:var(--sand)}
.band-dark .lede,.band-dark p{color:rgba(255,255,255,.86)}

/* ---------- typographic furniture ---------- */
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brown);margin:0 0 1rem}
.band-dark .eyebrow{color:var(--sand)}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--muted);max-width:62ch}
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule-accent{height:2px;background:var(--g-accent);border:0;width:64px;margin:0 0 1.5rem}
.num{font-family:var(--disp);font-weight:600;font-size:clamp(2.4rem,6vw,4.4rem);
  line-height:.9;color:var(--taupe);letter-spacing:-.04em}
.band-dark .num{color:var(--sand)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.small{font-size:.86rem;color:var(--muted)}

/* [CONFIRM] markers stay loud on purpose */
.cfm{background:#FFF6E6;color:#5A3D2B;border:1px dashed #A8763C;border-radius:3px;
  padding:0 .34em;font-size:.9em;font-weight:600;white-space:normal}
.cfm-block{background:#FFF6E6;border:1px dashed #A8763C;border-left-width:5px;
  padding:1rem 1.15rem;font-size:.92rem;color:#4A3223;margin:1.4rem 0}
.cfm-block p:last-child{margin-bottom:0}
.mock-note{background:rgba(255,255,255,.06);border:1px dashed rgba(221,185,126,.6);
  padding:1rem 1.15rem;font-size:.88rem;color:rgba(255,255,255,.9)}
.warn-block{background:#FFF1E8;border:1px solid rgba(110,75,58,.3);border-left:5px solid var(--brown);
  padding:1.1rem 1.2rem;font-size:.93rem;margin:1.4rem 0}
.warn-block p:last-child{margin-bottom:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font:inherit;font-size:.8rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:.95rem 1.7rem;border:1px solid transparent;cursor:pointer;
  transition:background .24s var(--ease),color .24s var(--ease),
             border-color .24s var(--ease),transform .24s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .22s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--brown)}
.btn-taupe{background:var(--taupe);color:var(--ink)}
.btn-taupe:hover{background:var(--sand)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-light:hover{background:#fff;color:var(--ink)}
.btn-sm{padding:.7rem 1.2rem;font-size:.74rem}

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

/* ---------- header: transparent over hero, solid on scroll ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:120;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),padding .3s var(--ease)}
.site-head .wide{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding-block:1.35rem;transition:padding .3s var(--ease)}
.site-head.solid{background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--line)}
.site-head.solid .wide{padding-block:.75rem}
.brand{font-family:var(--disp);font-size:1.22rem;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;color:#fff;white-space:nowrap}
.brand i{font-style:italic;font-weight:600}
.site-head.solid .brand{color:var(--ink)}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:rgba(255,255,255,.92);position:relative;padding-block:.3rem}
.site-head.solid .nav a{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--g-accent);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:1rem}
.lang{display:flex;gap:.1rem;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.12em}
.lang a{text-decoration:none;color:rgba(255,255,255,.72);padding:.2rem .4rem}
.site-head.solid .lang a{color:var(--muted)}
.lang a.on,.site-head.solid .lang a.on{color:var(--brown)}
.site-head:not(.solid) .lang a.on{color:var(--sand)}
.tel-mini{font-size:.74rem;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.92);
  text-decoration:none}
.site-head.solid .tel-mini{color:var(--ink)}
.burger{display:none;width:2.6rem;height:2.6rem;background:transparent;border:0;cursor:pointer;
  padding:0;position:relative}
.burger span{position:absolute;left:.5rem;right:.5rem;height:2px;background:#fff;
  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:.85rem}
.burger span:nth-child(2){top:1.28rem}
.burger span:nth-child(3){top:1.71rem}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.43rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.43rem) rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:110;background:var(--g-dark);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:5rem var(--gut) 3rem;
  opacity:0;visibility:hidden;transform:translateY(-1.2rem);
  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(--disp);font-size:clamp(1.5rem,7vw,2.4rem);color:#fff;
  text-decoration:none;padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.mobile-nav a:hover{color:var(--sand)}
.mobile-nav .m-foot{margin-top:1.6rem;font-size:.86rem;color:rgba(255,255,255,.78)}
@media (max-width:1080px){
  .nav,.tel-mini{display:none}
  .burger{display:block}
}

/* ---------- hero: one still, never a carousel ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;color:#fff;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-warm);
  animation:drift 22s ease-in-out infinite alternate}
.hero-in{position:relative;z-index:2;padding-block:0 clamp(3rem,9vw,6rem)}
.hero h1{color:#fff;max-width:15ch;margin-bottom:1.2rem}
.hero .lede{color:rgba(255,255,255,.94);max-width:52ch}
.hero-cta{margin-top:2rem}
.scroll-hint{position:absolute;right:var(--gut);bottom:clamp(3rem,9vw,6rem);z-index:2;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);
  writing-mode:vertical-rl}
@keyframes drift{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(3%,2%,0)}}
@media (max-width:720px){.hero{min-height:88svh}.scroll-hint{display:none}}

/* ---------- sector line ---------- */
.sectorline{padding-block:clamp(2.4rem,5vw,3.6rem);text-align:center;border-bottom:var(--rule)}
.sectorline .l1{font-family:var(--disp);font-size:clamp(.95rem,2vw,1.35rem);
  letter-spacing:.06em;margin:0 0 .5rem}
.sectorline .l1 span{white-space:nowrap}
.sectorline .l2{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brown);margin:0}

/* ---------- reveal ---------- */
.rev{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rev.in{opacity:1;transform:none}

/* ---------- case-study grid ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:2rem 0 2.4rem;
  border-top:var(--rule);border-bottom:var(--rule);padding-block:.9rem}
.filters button{font:inherit;font-size:.73rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:transparent;border:1px solid transparent;color:var(--muted);
  padding:.5rem .9rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.pgrid{display:grid;gap:clamp(1.2rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.pcard{position:relative;text-decoration:none;color:inherit;display:block;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.pcard .frame{position:relative;overflow:hidden;background:var(--off);aspect-ratio:4/5}
.pcard .frame img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease),filter .5s var(--ease)}
.pcard:hover .frame img{transform:scale(1.05)}
.pcard .meta{padding-top:1rem;border-top:2px solid transparent;transition:border-color .3s var(--ease)}
.pcard:hover .meta{border-top-color:var(--taupe)}
.pcard h3{margin:0 0 .3rem;font-size:1.08rem}
.pcard .chip{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brown);margin-bottom:.5rem}
.pcard .tab{font-size:.82rem;color:var(--muted);display:flex;gap:.6rem;flex-wrap:wrap}
.pcard[hidden]{display:none}
.pcard.pending{cursor:default}
.pcard.pending .frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(33,33,33,.1),rgba(33,33,33,.42))}
.ph-tag{position:absolute;left:.7rem;top:.7rem;z-index:2;background:rgba(33,33,33,.86);
  color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:.24rem .55rem}
.grid-empty{padding:2rem 0;color:var(--muted)}

/* ---------- método: the process spine ---------- */
.spine{margin-top:clamp(2rem,5vw,3.4rem);border-top:var(--rule)}
.step{display:grid;grid-template-columns:minmax(4.5rem,7rem) 1fr;gap:clamp(1rem,4vw,3rem);
  align-items:start;padding-block:clamp(1.6rem,3.5vw,2.6rem);border-bottom:var(--rule)}
.step .num{margin:0}
.step h3{margin:0 0 .4rem}
.step p{margin:0;color:var(--muted);max-width:56ch}
.step .src{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);
  margin-top:.6rem;display:block}
@media (max-width:620px){.step{grid-template-columns:1fr;gap:.4rem}}

/* ---------- BIM band ---------- */
.bim{position:relative;overflow:hidden}
.bim-media{position:absolute;inset:0;z-index:0;opacity:.3}
.bim-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.bim-in{position:relative;z-index:2}
.pull{font-family:var(--disp);font-size:clamp(1.4rem,3.4vw,2.5rem);line-height:1.25;
  font-weight:600;color:#fff;max-width:24ch;margin:0 0 1.2rem}
.attr{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin:0}

/* ---------- diferenciais ---------- */
.diffs{display:grid;gap:0;margin-top:clamp(2rem,5vw,3rem);border-top:var(--rule)}
.diff{display:grid;grid-template-columns:minmax(3.5rem,5rem) 1fr;gap:clamp(1rem,4vw,2.6rem);
  padding-block:clamp(1.4rem,3vw,2.2rem);border-bottom:var(--rule);align-items:baseline}
.diff .num{font-size:clamp(1.4rem,3vw,2.2rem)}
.diff h3{margin:0 0 .3rem}
.diff p{margin:0;color:var(--muted);max-width:52ch}
@media (max-width:620px){.diff{grid-template-columns:1fr;gap:.3rem}}

/* ---------- depoimentos: first-class, no cards ---------- */
.quotes{display:grid;gap:0;margin-top:clamp(2rem,5vw,3rem);border-top:var(--rule)}
.qblock{padding-block:clamp(2rem,4.5vw,3.2rem);border-bottom:var(--rule)}
.qblock blockquote{margin:0 0 1.2rem;font-family:var(--disp);font-weight:500;
  font-size:clamp(1.25rem,2.8vw,2rem);line-height:1.3;max-width:24ch;
  border-left:2px solid var(--taupe);padding-left:clamp(1rem,3vw,2rem)}
.qblock .long{font-family:var(--sans);font-size:1rem;line-height:1.65;color:var(--muted);
  max-width:60ch;margin:0 0 1.2rem;padding-left:clamp(1rem,3vw,2rem);
  border-left:1px solid var(--line)}
.qblock cite{font-style:normal;display:block;padding-left:clamp(1rem,3vw,2rem)}
.qblock cite b{display:block;font-family:var(--disp);font-size:1.02rem;font-weight:600}
.qblock cite span{display:block;font-size:.82rem;color:var(--muted);letter-spacing:.04em}
.qblock .bridge{margin-top:1rem;padding-left:clamp(1rem,3vw,2rem);font-size:.9rem;color:var(--brown)}

/* ---------- split editorial ---------- */
.split{display:grid;gap:clamp(1.6rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));align-items:center}
.split.top{align-items:start}
.imgpair{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}
.imgpair figure:first-child{grid-column:1 / -1}
.figure{position:relative;margin:0;overflow:hidden;background:var(--off)}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.figure:hover img{transform:scale(1.04)}
.figure figcaption{font-size:.78rem;color:var(--muted);padding:.5rem 0 0}
.band-dark .figure figcaption{color:rgba(255,255,255,.72)}
.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-3x4{aspect-ratio:3/4}
.r-21x9{aspect-ratio:21/9}

/* ---------- serviços list ---------- */
.svclist{border-top:var(--rule);margin-top:1.4rem}
.svclist .row{padding-block:1.3rem;border-bottom:var(--rule)}
.svclist h3{margin:0 0 .3rem}
.svclist p{margin:0;color:var(--muted)}

/* ---------- estúdio / signature ---------- */
.sig{margin-top:1.8rem;padding-top:1.4rem;border-top:var(--rule);max-width:26rem}
.sig svg{width:100%;height:auto;display:block}
.sig .cap{font-size:.82rem;color:var(--muted);margin-top:.6rem}

/* ---------- FAQ ---------- */
.faq{max-width:62rem;margin-top:clamp(1.6rem,4vw,2.6rem);border-top:var(--rule)}
.faq details{border-bottom:var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-family:var(--disp);font-size:clamp(1rem,1.8vw,1.2rem);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.3rem;top:1.55rem;width:10px;height:10px;
  border-right:2px solid var(--brown);border-bottom:2px solid var(--brown);
  transform:rotate(45deg);transition:transform .26s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details > *:not(summary){padding-bottom:1.2rem;color:var(--muted);max-width:64ch}
.faq details[open] > *:not(summary){animation:fadein .28s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- contato ---------- */
.contact-grid{display:grid;gap:clamp(1.8rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.nap{font-style:normal;line-height:1.9}
.nap dt{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brown);margin-top:1.1rem}
.nap dd{margin:0}
.nap a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--taupe)}
.nap a:hover{color:var(--brown)}
.mapthumb{display:block;position:relative;margin-top:1.6rem;text-decoration:none;
  border:var(--rule);background:var(--off)}
.mapthumb svg{width:100%;height:auto;display:block}
.mapthumb .cap{padding:.7rem .9rem;font-size:.82rem;color:var(--muted);border-top:var(--rule)}
.form-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:.98rem;padding:.75rem .2rem;
  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(--brown);outline:none;box-shadow:0 1px 0 var(--brown)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:#B3261E}
.consent{display:flex;gap:.75rem;align-items:flex-start;margin-top:1.4rem;
  font-size:.88rem;color:var(--muted)}
.consent input{margin-top:.3rem;width:1.1rem;height:1.1rem;accent-color:var(--brown);flex:0 0 auto}
.form-status{margin-top:1rem;font-size:.9rem;min-height:1.4em}

/* ---------- case-study page ---------- */
.cs-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.cs-hero .frame{position:relative}
.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.6rem,4vw,3rem)}
.cs-hero h1{color:#fff;margin-bottom:.4rem}
.cs-hero .sub{color:rgba(255,255,255,.9);font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;margin:0}
@media (max-width:720px){.cs-hero img{aspect-ratio:4/5}}
.factstrip{border-top:var(--rule);border-bottom:var(--rule);margin-block:clamp(2rem,5vw,3rem)}
.factstrip dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0;margin:0}
.factstrip div{padding:1.1rem 1.2rem 1.1rem 0;border-bottom:var(--rule)}
.factstrip dt{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brown);margin-bottom:.35rem}
.factstrip dd{margin:0;font-size:.95rem;font-variant-numeric:tabular-nums}
.seq{display:grid;gap:clamp(.8rem,2.4vw,1.6rem);margin-top:clamp(2rem,5vw,3rem)}
.seq .two{display:grid;gap:clamp(.8rem,2.4vw,1.6rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.drawnote{background:var(--off);border-left:3px solid var(--taupe);padding:1rem 1.2rem;
  font-size:.88rem;color:var(--muted)}
.prevnext{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:var(--rule);padding-top:1.6rem;margin-top:clamp(2rem,5vw,3rem)}
.prevnext a{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink)}
.prevnext a:hover{color:var(--brown)}
.crumbs{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.9rem}
.crumbs a{color:var(--brown);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-head{padding-block:clamp(7rem,14vw,10rem) clamp(1.6rem,4vw,2.6rem);border-bottom:var(--rule)}
.page-head h1{max-width:18ch}
.prose{max-width:70ch}
.prose h2{margin-top:2.4rem}
.prose ul{padding-left:1.1rem}
.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 8px 24px rgba(33,33,33,.28);
  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:#5A5A5A}
@media (max-width:720px){.wa-bubble{bottom:4.6rem}}

/* ---------- mobile action bar ---------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:125;display:none;
  background:var(--ink);border-top:1px solid rgba(255,255,255,.12)}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.95rem .5rem;color:#fff;text-decoration:none;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.mobile-bar a + a{border-left:1px solid rgba(255,255,255,.12)}
@media (max-width:720px){.mobile-bar{display:flex}body{padding-bottom:3.4rem}}

/* ---------- footer ---------- */
.site-foot{background:var(--g-dark);color:rgba(255,255,255,.82);padding-block:clamp(3rem,6vw,4.6rem) 2rem}
.site-foot .brand{color:#fff;font-size:1.5rem}
.foot-grid{display:grid;gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:2rem}
.foot-grid h4{color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;margin:0 0 .8rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:.9rem}
.site-foot a{color:rgba(255,255,255,.82);text-decoration:none}
.site-foot a:hover{color:var(--sand)}
.foot-bottom{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;font-size:.8rem;
  color:rgba(255,255,255,.66)}
.reg-line{font-size:.82rem;color:rgba(255,255,255,.72);margin-top:.9rem}

/* ---------- LGPD ---------- */
.lgpd{position:fixed;left:0;right:0;bottom:0;z-index:140;background:#fff;
  border-top:2px solid var(--ink);box-shadow:0 -8px 30px rgba(33,33,33,.16);
  padding:1.1rem 0;transform:translateY(110%);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.02rem;margin:0 0 .4rem}
.lgpd p{font-size:.88rem;color:var(--muted);margin:0 0 .8rem;max-width:74ch}
.lgpd-actions{display:flex;gap:.55rem;flex-wrap:wrap}
.lgpd-prefs{margin-top:1rem;border-top:var(--rule);padding-top:.9rem;display:grid;gap:.6rem}
.lgpd-row{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem}
.lgpd-row input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--brown);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}
  .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}
}