/* ==========================================================================
   CONCEITO ESTÉTICA AVANÇADA — Multi Open Shopping, Rio Tavares, Florianópolis
   Spec mockup. Ref: aesthetic-clinic-medspa-ref-02 (Lumière) — the clinical
   tier, chosen because this lead advertises Toxina Botulínica and Ácido
   Hialurônico and sells on "rigor científico".

   ⚠ TWO DEVICES FROM THE REFERENCES ARE SURGICALLY REMOVED AND HAVE NO STYLES
     IN THIS FILE, IN ANY FORM:
       · the BEFORE & AFTER gallery
       · the "FROM R$ X / BOOK NOW" price cards and the promo bar
     Both are prohibited advertising for medical procedures in Brazil. The whole
     point of this build is to demonstrate that a clinical aesthetics site
     converts hard without either.

   Lumière's "Board Certified" seal becomes a RESPONSÁVEL TÉCNICO badge carrying
   the professional's council and registration — the Brazilian equivalent, and
   completely absent from Conceito's live site.

   Cooler and more clinical than the other two wellness leads in this batch, so
   Conceito, Valena and Samatva do not converge.
   ========================================================================== */

:root{
  --graphite:#1A1D21;
  --porcelain:#FBFAF8;
  --steel:#5B6B76;
  --nude:#C9A38C;
  --nude-lt:#E0C4B1;
  --mist:#E8EAEA;
  --signal:#0E1113;

  --g-soft:linear-gradient(180deg,var(--porcelain) 0%,var(--mist) 100%);
  --g-dark:linear-gradient(180deg,var(--signal) 0%,var(--graphite) 100%);
  --g-nude:linear-gradient(120deg,var(--nude) 0%,var(--nude-lt) 100%);
  --g-tech:linear-gradient(150deg,var(--steel) 0%,var(--graphite) 100%);

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;

  --wrap:1280px;
  --gut:clamp(16px,4.4vw,58px);
  --r:4px;
  --ease:cubic-bezier(.25,.6,.35,1);
  --sh1:0 2px 14px rgba(26,29,33,.07);
  --sh2:0 18px 44px -16px rgba(26,29,33,.24);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--porcelain);color:var(--graphite);
  font-family:var(--sans);font-size:16.5px;font-weight:400;line-height:1.76;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.008em}
p{margin:0 0 1.05em}
:focus-visible{outline:2px solid var(--nude);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--n{max-width:880px}
.sec{padding-block:clamp(56px,8vw,120px);position:relative}
.sec--t{padding-block:clamp(40px,5.4vw,76px)}
.soft{background-image:var(--g-soft)}
.mistbg{background:var(--mist)}
.dark{background-image:var(--g-dark);color:var(--porcelain)}
.dark h1,.dark h2,.dark h3{color:#fff}
.tech{background-image:var(--g-tech);color:var(--porcelain)}
.tech h2,.tech h3{color:#fff}

.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--nude);margin:0 0 14px}
.dark .eyebrow,.tech .eyebrow{color:var(--nude-lt)}
.h-xl{font-size:clamp(2.2rem,5.4vw,3.9rem)}
.h-lg{font-size:clamp(1.85rem,3.8vw,2.8rem)}
.h-md{font-size:clamp(1.4rem,2.4vw,1.95rem)}
.lede{font-size:clamp(1rem,1.35vw,1.12rem);color:var(--steel);max-width:62ch}
.dark .lede,.tech .lede{color:rgba(251,250,248,.8)}
.sec-head{max-width:64ch;margin-bottom:clamp(28px,3.8vw,52px)}
.rule{height:1px;width:64px;background:var(--nude);border:0;margin:20px 0 0}

/* ---------- Confirm markers ---------- */
.cfm{display:inline;background:rgba(201,163,140,.2);color:#7C5540;
  border-bottom:1px dashed var(--nude);padding:.05em .32em;
  font-size:.88em;font-weight:600;font-style:normal}
.dark .cfm,.tech .cfm{background:rgba(255,255,255,.18);color:var(--nude-lt);border-bottom-color:var(--nude-lt)}
.cfm-block{display:block;background:rgba(201,163,140,.11);border:1px dashed var(--nude);
  border-left:3px solid var(--nude);padding:15px 18px;color:#7C5540;
  font-size:.92rem;line-height:1.64;margin:0 0 18px;font-weight:500}
.dark .cfm-block,.tech .cfm-block{background:rgba(255,255,255,.12);color:var(--nude-lt)}
/* compliance callouts are never de-emphasised */
.warn{display:block;background:rgba(91,107,118,.12);border-left:4px solid var(--steel);
  padding:16px 19px;font-size:.93rem;line-height:1.66;margin:0 0 18px}
.dark .warn,.tech .warn{background:rgba(255,255,255,.1);border-left-color:var(--nude-lt)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;
  border-radius:var(--r);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background-image:var(--g-nude);color:#fff;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),filter .26s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(201,163,140,.75);filter:brightness(1.05)}
.btn .ar{transition:transform .26s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--ghost{background-image:none;background:transparent;color:var(--graphite);
  border:1px solid rgba(26,29,33,.28)}
.dark .btn--ghost,.tech .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{border-color:var(--nude);color:var(--nude);box-shadow:none}
.dark .btn--ghost:hover,.tech .btn--ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.1)}
.btn--wa{background-image:none;background:#25D366}
.btn--steel{background-image:none;background:var(--steel)}
.btn--sm{padding:11px 20px;font-size:.66rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- Utility bar. NO PROMO BAR — deliberate. ---------- */
.util{background:var(--graphite);color:rgba(251,250,248,.8);font-size:.76rem;letter-spacing:.04em;
  position:relative;z-index:92}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:10px;flex-wrap:wrap}
.util__l{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.util svg{width:14px;height:14px;stroke:var(--nude);fill:none;stroke-width:1.8;vertical-align:-2px;margin-right:6px}
.util__r{display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1px solid rgba(251,250,248,.3)}
.lang a{padding:5px 10px;font-size:.66rem;letter-spacing:.14em;color:rgba(251,250,248,.75);transition:.24s}
.lang a.on{background-image:var(--g-nude);color:#fff}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:90;background:rgba(251,250,248,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(26,29,33,.1);padding-block:16px;
  transition:padding .24s var(--ease),box-shadow .24s}
.hdr.is-stuck{padding-block:10px;box-shadow:0 4px 22px -14px rgba(26,29,33,.35)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;flex-direction:column;line-height:1.08}
.brand__n{font-family:var(--serif);font-size:1.4rem;font-weight:500;letter-spacing:.02em;
  transition:font-size .24s var(--ease)}
.hdr.is-stuck .brand__n{font-size:1.24rem}
.brand__s{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);margin-top:4px}
.nav{display:flex;align-items:center;gap:22px}
/* every nav item is a REAL anchor — the live site uses "#" as a dropdown trigger,
   which breaks keyboard and screen-reader navigation */
.nav a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  padding-block:6px;position:relative;transition:color .26s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--nude);
  transition:width .3s var(--ease)}
.nav a:hover{color:var(--graphite)}
.nav a:hover::after{width:100%}
.burger{display:none;width:42px;height:42px;position:relative;border:1px solid rgba(26,29,33,.2)}
.burger span{position:absolute;left:11px;width:20px;height:1.5px;background:var(--graphite);transition:.26s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:20.5px}.burger span:nth-child(3){top:26px}
.burger.on span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:89;background:var(--porcelain);display:flex;flex-direction:column;
  justify-content:center;gap:2px;padding:96px var(--gut) 40px;
  clip-path:inset(0 0 100% 0);transition:clip-path .46s var(--ease)}
.mnav.on{clip-path:inset(0 0 0 0)}
.mnav a{font-family:var(--serif);font-size:clamp(1.5rem,6.6vw,2.2rem);color:var(--graphite);
  padding-block:11px;border-bottom:1px solid rgba(26,29,33,.12)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(86svh,760px);display:flex;align-items:center;
  overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.72)}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(14,17,19,.9) 0%,rgba(14,17,19,.62) 46%,rgba(14,17,19,.2) 100%)}
.hero__in{max-width:660px;padding-block:clamp(90px,12vh,140px) clamp(120px,16vh,180px)}
.hero h1{color:#fff;font-size:clamp(2rem,4.8vw,3.5rem)}
.hero p{color:rgba(255,255,255,.9);max-width:48ch;margin-top:18px}
/* the responsável técnico badge REPLACES Lumière's "Board Certified" seal */
.rt{position:absolute;right:var(--gut);top:clamp(70px,10vh,120px);z-index:3;
  background:var(--porcelain);border-top:3px solid var(--nude);padding:20px 22px;max-width:260px;
  box-shadow:var(--sh2)}
.rt__l{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);margin-bottom:9px}
.rt h3{font-size:1.05rem;margin-bottom:8px}
.rt p{margin:0;font-size:.84rem;color:var(--steel)}

/* ---------- Four-column trust card over the hero's lower edge ---------- */
.trust{position:relative;margin-top:clamp(-72px,-8vh,-50px);z-index:5}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(26,29,33,.12);
  border:1px solid rgba(26,29,33,.12);box-shadow:var(--sh2)}
.trust__c{background:var(--porcelain);padding:24px 20px}
.trust__c svg{width:22px;height:22px;stroke:var(--nude);fill:none;stroke-width:1.4;margin-bottom:12px}
.trust__c h3{font-size:1rem;margin-bottom:7px}
.trust__c p{margin:0;font-size:.84rem;color:var(--steel)}

/* ---------- ⭐ Goal rail + treatment grid ---------- */
.goals{position:sticky;top:64px;z-index:20;background:var(--porcelain);
  padding-block:14px;border-block:1px solid rgba(26,29,33,.12);margin-bottom:clamp(24px,3.4vw,40px)}
.goals__in{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.goals__in::-webkit-scrollbar{display:none}
.goals button{flex:none;padding:10px 18px;border-radius:99px;font-size:.74rem;font-weight:600;
  letter-spacing:.06em;border:1px solid rgba(26,29,33,.22);background:transparent;color:var(--steel);
  white-space:nowrap;transition:.2s var(--ease)}
.goals button[aria-pressed="true"]{background-image:var(--g-nude);border-color:transparent;color:#fff}
.goals button:hover{border-color:var(--nude);color:var(--nude)}
.goals button[aria-pressed="true"]:hover{color:#fff}

.tx{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.txc{background:#fff;border:1px solid rgba(26,29,33,.12);display:flex;flex-direction:column;
  overflow:hidden;transition:opacity .2s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.txc:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.txc[hidden]{display:none}
.txc__img{aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.txc__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.txc:hover .txc__img img{transform:scale(1.05)}
.txc__b{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.txc__n{font-size:1.14rem}
/* NOTE: the card describes the MECHANISM, never the outcome. There is no price
   line, no before/after thumbnail and no "resultados em X sessões" claim. */
.txc__d{font-size:.89rem;color:var(--steel);margin:0;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;
  border:1px solid rgba(91,107,118,.3);color:var(--steel)}
.chip--f{border-color:rgba(201,163,140,.5);color:#7C5540;background:rgba(201,163,140,.12)}
.chip--c{border-color:rgba(91,107,118,.4);background:rgba(91,107,118,.1)}
.chip--med{border-color:rgba(26,29,33,.4);background:var(--graphite);color:#fff}

/* ---------- Technology band ---------- */
.techs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16)}
.techc{background:rgba(14,17,19,.55);padding:26px 22px;display:flex;flex-direction:column;gap:10px}
.techc h3{font-size:1.16rem;color:#fff}
.techc p{margin:0;font-size:.9rem;color:rgba(251,250,248,.78);flex:1}
.anvisa{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--nude-lt);
  border-top:1px solid rgba(255,255,255,.18);padding-top:11px}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,36px)}
.step{border-top:2px solid var(--nude);padding-top:20px}
.step b{display:block;font-family:var(--serif);font-size:2.2rem;color:var(--nude);line-height:1}
.step h3{font-size:1.05rem;margin:12px 0 8px}
.step p{margin:0;font-size:.92rem;color:var(--steel)}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.split--rev .split__t{order:2}
.fig{overflow:hidden}
.fig img{width:100%;height:100%;object-fit:cover}
.facts{list-style:none;margin:20px 0 0;padding:0}
.facts li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;
  border-bottom:1px solid rgba(26,29,33,.12);font-size:.96rem}
.dark .facts li,.tech .facts li{border-bottom-color:rgba(255,255,255,.2)}
.facts li:last-child{border-bottom:0}
.facts b{flex:none;min-width:150px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);padding-top:3px}
.dark .facts b,.tech .facts b{color:var(--nude-lt)}

/* ---------- Team — ships as [CONFIRM] ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
.mem{background:#fff;border:1px dashed var(--nude);padding:26px}
.mem__ph{width:64px;height:64px;border-radius:50%;background:var(--mist);display:grid;place-items:center;
  margin-bottom:16px}
.mem__ph svg{width:26px;height:26px;stroke:var(--steel);fill:none;stroke-width:1.4}
.mem h3{font-size:1.1rem}
.mem ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px;font-size:.88rem}
.mem b{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
  margin-bottom:3px}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid rgba(26,29,33,.14)}
.faq summary{padding:17px 40px 17px 0;font-family:var(--serif);font-size:1.1rem;cursor:pointer;
  position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  color:var(--nude);font-size:1.5rem;transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{padding:0 0 18px;margin:0;font-size:.95rem;color:var(--steel);max-width:70ch}

/* ---------- Map / contact ---------- */
.map{aspect-ratio:16/11;position:relative;overflow:hidden;border:1px solid rgba(26,29,33,.14);
  background:linear-gradient(135deg,var(--mist),#DADDDD);display:grid;place-items:center;
  text-align:center;padding:24px}
.map__grid{position:absolute;inset:0;opacity:.45;
  background-image:linear-gradient(rgba(91,107,118,.18) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(91,107,118,.18) 1px,transparent 1px);
  background-size:36px 36px}
.map > div{position:relative;z-index:2}
.form{display:grid;gap:15px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field label{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;font:inherit;font-size:.96rem;
  background:#fff;border:1px solid rgba(26,29,33,.18);color:var(--graphite);border-radius:var(--r)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--nude)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.85rem;color:var(--steel)}
.consent input{margin-top:5px;accent-color:var(--nude);flex:none}

/* ---------- Footer ---------- */
.ftr{background-image:var(--g-dark);color:rgba(251,250,248,.76);padding-block:clamp(50px,6.6vw,86px) 0}
.ftr h4{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--nude-lt);
  margin-bottom:17px;font-weight:600}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,48px)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.89rem}
.ftr a:hover{color:#fff}
.ftr .brand__n{color:#fff;font-family:var(--serif);font-size:1.45rem}
.ftr__rt{margin-top:28px;padding-top:22px;border-top:1px solid rgba(251,250,248,.18);font-size:.86rem}
.ftr__bot{margin-top:22px;border-top:1px solid rgba(251,250,248,.18);padding-block:20px 30px;
  display:flex;flex-wrap:wrap;gap:13px;justify-content:space-between;align-items:center;font-size:.78rem}

/* ---------- Floating (TWO numbers: treatments + depilação) ---------- */
.float{position:fixed;right:18px;bottom:18px;z-index:80;display:grid;gap:10px}
.float a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  transition:transform .26s var(--ease);position:relative;background:#25D366}
.float a.dep{background:var(--nude)}
.float a:hover{transform:scale(1.07)}
.float svg{width:27px;height:27px;fill:#fff}
.float span{position:absolute;right:62px;top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--graphite);color:#fff;font-size:.7rem;letter-spacing:.08em;padding:6px 11px;
  opacity:0;pointer-events:none;transition:opacity .22s}
.float a:hover span{opacity:1}
.mbar{display:none}

/* ---------- LGPD ---------- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--porcelain);
  border-top:2px solid var(--nude);padding:20px var(--gut);box-shadow:0 -8px 30px rgba(26,29,33,.16);
  transform:translateY(110%);transition:transform .42s var(--ease)}
.ck.on{transform:none}
.ck__in{max-width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1.4fr 1fr;
  gap:22px;align-items:center}
.ck p{font-size:.86rem;margin:0;color:var(--steel)}
.ck a{color:var(--nude);text-decoration:underline}
.ck__opts{display:flex;flex-wrap:wrap;gap:15px;margin-top:11px;font-size:.81rem;color:var(--steel)}
.ck__opts label{display:flex;gap:8px;align-items:center}
.ck__opts input{accent-color:var(--nude)}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}

/* ---------- Reveal — precise and short ---------- */
[data-rv]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---------- Legal ---------- */
.legal{max-width:840px;margin-inline:auto;padding-block:clamp(50px,6.4vw,96px)}
.legal h2{margin:34px 0 12px;font-size:1.5rem}
.legal h3{margin:22px 0 10px;font-size:1.14rem}
.legal ul{padding-left:20px;display:grid;gap:8px;margin-bottom:18px}
.legal table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.9rem}
.legal th,.legal td{border:1px solid rgba(26,29,33,.16);padding:11px 13px;text-align:left;vertical-align:top}
.legal th{background:var(--mist);font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .tx,.techs,.team{grid-template-columns:repeat(2,1fr)}
  .trust__in{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav,.util__r .lang{display:none}
  .burger{display:block}
  .split,.ck__in{grid-template-columns:1fr}
  .split--rev .split__t{order:0}
  .ck__btns{justify-content:flex-start}
  .rt{position:static;max-width:none;margin:0 var(--gut) 0;display:block}
  .hero__in{padding-bottom:clamp(60px,8vh,100px)}
  .trust{margin-top:0}
}
@media (max-width:768px){
  body{padding-bottom:64px}
  .float{bottom:78px;right:14px}
  .float a{width:50px;height:50px}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:82;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--graphite)}
  .mbar .btn{width:100%;padding:13px 8px;font-size:.66rem}
  .tx,.techs,.team,.trust__in,.steps,.fr{grid-template-columns:1fr}
  .goals{top:58px}
}
@media (max-width:520px){.ftr__grid{grid-template-columns:1fr}.util__l{font-size:.7rem;gap:12px}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
}

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

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

/* ------------------------------------------- header-cta-wrap-guard
   At phone width this CTA wrapped onto a second line, grew the header's
   right-hand cluster to 59px tall 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){
  .hdr__in > .btn{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}
}