/* ============================================================
   Arte de Reformar — folha de estilo única
   Ordem: fontes · tokens · base · utilitários · componentes ·
          seções · rodapé · overlays · luz · responsivo
   ============================================================ */

/* ── fontes ────────────────────────────────────────────────
   Auto-hospedadas. São os arquivos variáveis do Google Fonts com o eixo de peso
   cortado no que esta folha realmente usa e o repertório em Latin-1 +
   pontuação: 83,4 kB viraram 42,5 kB, e saíram duas origens de terceiro do
   caminho crítico. `swap`: o texto aparece na fonte de sistema e troca quando a
   web font chega — nunca some.
   ATENÇÃO: o eixo é 600–800 em Archivo e 400–600 em Inter. Usar um peso fora
   dessa faixa não quebra, mas também não muda nada: o navegador prende no
   extremo. Para abrir a faixa é preciso refazer o subset (receita no LEIA-ME). */
@font-face{
  font-family:"Archivo";
  src:url(../fonts/archivo-latin.woff2?v=20260907) format("woff2");
  font-weight:600 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url(../fonts/inter-latin.woff2?v=20260907) format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
}

/* Métricas de fallback — o que impede o tranco quando a web font troca.
   Não são fontes novas: é a Arial do sistema, esticada para ocupar exatamente o
   mesmo espaço que Inter e Archivo. O texto aparece na hora, na fonte do
   sistema, e quando a nossa chega o layout não anda um pixel. Custa 0 kB, e é o
   que substitui o `preload` — que adiantava a fonte às custas da folha de
   estilo, e por isso atrasava a primeira pintura.

   Estes números NÃO são de memória: saíram dos próprios arquivos, com
   fontTools, comparando com a Arial do macOS.
     size-adjust       = largura média das letras da nossa fonte ÷ a da Arial
     ascent/descent    = as métricas da nossa fonte ÷ o size-adjust
   Se um dia a fonte mudar, recalcule — número de fallback chutado piora o CLS
   em vez de melhorar (foi o que aconteceu na primeira tentativa aqui). */
@font-face{
  font-family:"Inter Fallback";src:local("Arial");
  size-adjust:104.33%;ascent-override:92.85%;descent-override:23.12%;line-gap-override:0%;
}
@font-face{
  font-family:"Archivo Fallback";src:local("Arial");
  size-adjust:103.49%;ascent-override:84.84%;descent-override:20.29%;line-gap-override:0%;
}

/* ── tokens ────────────────────────────────────────────── */
:root{
  --ink:#14181d;
  --ink-2:#1d232b;
  --slate:#5d6773;
  --slate-2:#8a939e;
  --paper:#fff;
  --sand:#f7f5f2;
  --sand-2:#efebe5;
  --line:#e5e1db;
  --line-dark:#333c47;

  --brand:#e26e43;        /* superfície e acento; NÃO sustenta texto branco (3,21:1) */
  --brand-dk:#b64c25;     /* ação e fundo com texto branco: 5,19:1 */
  --brand-dk2:#9c3f1c;    /* hover da ação: 6,69:1 */
  --brand-lt:#fdf0ea;
  --wa:#25d366;

  --r-sm:8px;
  --r:14px;
  --r-lg:20px;

  --sh-1:0 1px 2px rgba(20,24,29,.05), 0 2px 8px rgba(20,24,29,.04);
  --sh-2:0 4px 12px rgba(20,24,29,.07), 0 18px 40px rgba(20,24,29,.09);
  --sh-3:0 20px 60px rgba(20,24,29,.22);

  --f-head:"Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap:1180px;
  --pad:24px;
  --sec-y:clamp(64px, 8vw, 112px);
  --ease:cubic-bezier(.22,.9,.3,1);
}

/* ── reset e base ──────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* clip (e nao hidden) porque o painel do menu mobile e position:fixed:
   fora da tela ele criava 320px de rolagem horizontal, e overflow-x:hidden
   no body nao corta descendente fixed. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--f-head);
  color:var(--ink);
  margin:0;
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:700;
}
h1{font-size:clamp(2.15rem,4.4vw,3.5rem);font-weight:800;letter-spacing:-.035em;
   line-height:1.06;text-wrap:balance}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.028em}
h3{font-size:1.2rem;letter-spacing:-.015em}
h4{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
p{margin:0}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}

svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
.ic-wa{fill:currentColor;stroke:none}

:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:12px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r-sm)
}
.skip:focus{left:12px}

/* ── utilitários ───────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.eyebrow{
  font-family:var(--f-head);font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-dk);
  margin:0 0 14px;display:flex;align-items:center;gap:10px
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brand);flex:none}
.eyebrow--light{color:#f0a184}
.eyebrow--light::before{background:var(--brand)}

/* Sublinhado de destaque. text-decoration em vez de pseudo-elemento posicionado:
   acompanha o tamanho da fonte e não depende de empilhamento nem de quebra de linha. */
.mark{
  white-space:nowrap;
  text-decoration:underline solid var(--brand);
  text-decoration-thickness:.085em;
  text-underline-offset:.14em;
  text-decoration-skip-ink:none;
}

/* ── botões ────────────────────────────────────────────── */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border-radius:var(--r-sm);
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  font-family:var(--f-head);font-weight:600;font-size:.94rem;
  letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background .18s var(--ease), color .18s var(--ease);
}
.btn svg{width:19px;height:19px;flex:none}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}

.btn--brand{--bg:var(--brand)}
.btn--brand{--bg:var(--brand-dk)}
.btn--brand:hover{--bg:var(--brand-dk2)}
.btn--dark{--bg:var(--ink)}
.btn--dark:hover{--bg:#000}
.btn--ghost{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.28)}
.btn--ghost:hover{--bg:rgba(255,255,255,.09);--bd:rgba(255,255,255,.5)}

.btn--lg{padding:15px 26px;font-size:1rem}
.btn--full{width:100%}

/* ── topbar ────────────────────────────────────────────── */
.topbar{background:var(--ink);color:#a9b2bd;font-size:.82rem}
.topbar__in{display:flex;justify-content:space-between;align-items:center;
            gap:18px;min-height:38px;flex-wrap:wrap}
.topbar__area,.topbar__links a{display:inline-flex;align-items:center;gap:7px}
.topbar__links{display:flex;gap:22px}
.topbar__links a{text-decoration:none;transition:color .16s}
.topbar__links a:hover{color:#fff}
.topbar svg{width:15px;height:15px;color:var(--brand);flex:none}

/* ── header ────────────────────────────────────────────── */
.hd{
  position:sticky;top:0;z-index:90;background:rgba(255,255,255,.92);
  border-bottom:1px solid transparent;transition:border-color .22s, box-shadow .22s
}
.hd.is-stuck{border-bottom-color:var(--line);box-shadow:0 4px 20px rgba(20,24,29,.06)}
.hd__in{display:flex;align-items:center;justify-content:space-between;
        gap:24px;min-height:72px}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{width:auto;height:42px}
.brand__txt{display:flex;flex-direction:column;font-family:var(--f-head);line-height:1}
.brand__txt b{font-size:.72rem;font-weight:600;letter-spacing:.2em;color:var(--slate)}
.brand__txt i{font-size:1.16rem;font-weight:800;letter-spacing:-.02em;
              font-style:normal;color:var(--ink);margin-top:3px}

/* O blur do cabeçalho fica num pseudo-elemento, não no .hd: `backdrop-filter`
   torna o elemento bloco contentor de descendentes `position:fixed`, e o menu
   off-canvas é filho dele — ficava preso na altura do cabeçalho. */
.hd::before{content:"";position:absolute;inset:0;z-index:-1;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
  text-decoration:none;font-size:.93rem;font-weight:500;color:var(--ink-2);
  position:relative;padding:4px 0;transition:color .16s
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--brand);transition:right .25s var(--ease)
}
.nav a:not(.btn):hover{color:var(--ink)}
.nav a:not(.btn):hover::after{right:0}
.nav a.nav__cta{margin-left:6px;color:#fff}   /* `.nav a` vencia por especificidade e o texto saía escuro */
.nav__cta::after{display:none}

.burger{display:none;width:44px;height:44px;flex-direction:column;
        justify-content:center;align-items:center;gap:5px;border-radius:var(--r-sm)}
.burger span{display:block;width:22px;height:2px;background:var(--ink);
             border-radius:2px;transition:transform .25s var(--ease), opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── hero ──────────────────────────────────────────────── */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero__grid{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 100%);
}
.hero__glow{
  position:absolute;z-index:0;width:760px;height:760px;left:-180px;top:-320px;
  background:radial-gradient(circle, rgba(226,110,67,.22), transparent 62%);
  pointer-events:none
}
.hero__in{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);align-items:center;
  padding-block:clamp(56px,8vw,104px)
}
.hero h1{color:#fff}
.hero .lede{
  margin:22px 0 0;max-width:53ch;font-size:1.09rem;
  line-height:1.68;color:#b9c1cb
}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}

.chips{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;
       padding-top:26px;border-top:1px solid rgba(255,255,255,.11)}
.chips li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:#aab3bf}
.chips svg{width:17px;height:17px;color:var(--brand);stroke-width:2.4;flex:none}

.hero__shot{margin:0;position:relative}
.hero__shot img{
  width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-3);
  border:1px solid rgba(255,255,255,.1);aspect-ratio:4/3.2;object-fit:cover
}
.hero__shot figcaption{
  position:absolute;left:16px;right:16px;bottom:16px;
  background:rgba(20,24,29,.82);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:10px 14px;border-radius:10px;font-size:.82rem;color:#dfe4ea;
  border:1px solid rgba(255,255,255,.09)
}

/* ── casca de seção ────────────────────────────────────── */
.sec{padding-block:var(--sec-y)}
.sec--sand{background:var(--sand);border-block:1px solid var(--line)}
.sec--dark{background:var(--ink);color:#b9c1cb}
.sec--dark h2,.sec--dark h3{color:#fff}

.sec__hd{max-width:58ch;margin-bottom:clamp(38px,4.5vw,58px)}
.sec__sub{margin-top:16px;font-size:1.05rem;color:var(--slate);line-height:1.66}
.sec__hd--light .sec__sub{color:#98a2ae}
.sec__note{margin-top:34px;font-size:.96rem;color:var(--slate)}
.sec__note a{color:var(--brand-dk);font-weight:600;text-underline-offset:3px}

/* ── serviços ──────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px 32px;box-shadow:var(--sh-1);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease),
             border-color .24s var(--ease)
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#d6d0c7}
.card__ic{
  display:grid;place-items:center;width:50px;height:50px;border-radius:12px;
  background:var(--brand-lt);color:var(--brand-dk);margin-bottom:20px
}
.card__ic svg{width:25px;height:25px}
.card__lead{margin:12px 0 20px;color:var(--slate);font-size:.97rem;line-height:1.62}
.card__list{display:grid;gap:11px;padding-top:20px;border-top:1px solid var(--line)}
.card__list li{position:relative;padding-left:24px;font-size:.94rem;color:var(--ink-2)}
.card__list li::before{
  content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;
  border-radius:2px;background:var(--brand);opacity:.85
}

/* ── processo ──────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:28px 24px 26px
}
.step__n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:#fff;font-family:var(--f-head);font-weight:700;
  font-size:.92rem;margin-bottom:18px
}
.step h3{margin-bottom:9px}
.step p{font-size:.94rem;color:var(--slate);line-height:1.62}

/* ── galeria ───────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal__i{
  position:relative;overflow:hidden;border-radius:var(--r);padding:0;aspect-ratio:4/3;
  background:var(--sand-2);border:1px solid var(--line);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease)
}
.gal__i img{width:100%;height:100%;object-fit:cover;
            transition:transform .5s var(--ease)}
/* O véu vira opaco ANTES de o texto começar, e não ao longo dele.
   Medido em 375px, onde a legenda fica sempre visível: com o degradê antigo
   (`transparent` → `.9` ao longo de toda a caixa) a primeira linha caía onde o
   véu tinha ~23% e o pior pixel da foto era rgb(247,229,186) — 1,24:1, reprova
   AA em três das seis fotos. O teto claro das fotos de gesso é justamente o
   fundo mais hostil que existe para texto branco. Com a rampa concentrada nos
   primeiros 30% da caixa, a linha de cima passa a cair sobre ~76% de véu.
   Isto é anterior à camada de luz: a versão sem luz mede exatamente o mesmo. */
.gal__i::after{
  content:attr(data-cap);
  position:absolute;left:0;right:0;bottom:0;padding:28px 15px 13px;
  font-size:.82rem;line-height:1.4;color:#fff;text-align:left;
  background:linear-gradient(rgba(20,24,29,0) 0%,
                             rgba(20,24,29,.88) 30%,
                             rgba(20,24,29,.94) 100%);
  opacity:0;transform:translateY(8px);
  transition:opacity .26s var(--ease), transform .26s var(--ease)
}
/* Sem hover (toque), a legenda nunca apareceria — e ela é a única explicação
   técnica do que a foto mostra. Em telas sem hover, fica sempre visível. */
@media (hover:none){
  .gal__i::after{opacity:1;transform:none}
}
.gal__i:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.gal__i:hover img{transform:scale(1.06)}
.gal__i:hover::after,.gal__i:focus-visible::after{opacity:1;transform:translateY(0)}

/* ── pilares ───────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{
  background:#1d232b;border:1px solid var(--line-dark);
  border-radius:var(--r);padding:30px 28px
}
.pillar__ic{
  display:grid;place-items:center;width:48px;height:48px;border-radius:12px;
  background:rgba(226,110,67,.14);color:var(--brand);margin-bottom:20px
}
.pillar__ic svg{width:24px;height:24px}
.pillar h3{margin-bottom:10px}
.pillar p{font-size:.95rem;line-height:1.65;color:#9ba5b1}

/* ── faixa cta ─────────────────────────────────────────── */
.band{background:var(--brand-dk);color:#fff}   /* era --brand: 3,21:1 com texto branco */
.band__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;padding-block:clamp(38px,5vw,58px)
}
.band h2{color:#fff;max-width:22ch}
.band p{margin-top:11px;color:rgba(255,255,255,.95);max-width:48ch;font-size:1.02rem}

/* ── contato ───────────────────────────────────────────── */
.contato{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
         gap:clamp(34px,5vw,64px);align-items:start}

.vias{display:grid;gap:18px;margin-top:34px}
.vias li{display:flex;align-items:flex-start;gap:14px}
.vias__ic{
  display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:var(--sand);border:1px solid var(--line);color:var(--brand-dk);flex:none
}
.vias__ic svg{width:20px;height:20px}
.vias div{display:flex;flex-direction:column;gap:1px}
.vias b{font-family:var(--f-head);font-size:.78rem;letter-spacing:.09em;
        text-transform:uppercase;color:var(--slate);font-weight:600}  /* --slate-2 dava 3,11:1 */
.vias a,.vias div>span{font-size:1.02rem;color:var(--ink);text-decoration:none;font-weight:500}
.vias a:hover{color:var(--brand-dk);text-decoration:underline;text-underline-offset:3px}

.form{
  background:var(--sand);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);display:grid;gap:16px;box-shadow:var(--sh-1)
}
.form h3{margin-bottom:2px}
.form label{display:grid;gap:7px}
.form label>span{font-size:.86rem;font-weight:600;color:var(--ink-2)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form input,.form select,.form textarea{
  font:inherit;font-size:.98rem;width:100%;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);transition:border-color .16s, box-shadow .16s
}
.form textarea{resize:vertical;min-height:112px;line-height:1.6}
.form input::placeholder,.form textarea::placeholder{color:#a8b0ba}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(226,110,67,.16)
}
.form .is-bad{border-color:#d64545;background:#fff7f7}
.form__err{
  font-size:.9rem;color:#a52c2c;background:#fdeded;border:1px solid #f4c7c7;
  border-radius:var(--r-sm);padding:10px 13px;margin:0
}
.form__ok{
  margin-top:14px;padding:16px 18px;border-radius:var(--r-sm);
  background:#eef7ef;border:1px solid #cfe7d2;color:#1f5b2a;font-size:.95rem;line-height:1.55
}
.form__ok a{color:var(--brand-dk);font-weight:600}
.form__ok[hidden]{display:none}
.form__alt{font-size:.88rem;color:var(--slate);text-align:center;margin:0}

/* ── chamada contextual ───────────────────────────────────
   A página convencia no meio e só oferecia ação no fim. Estes dois blocos
   colocam a conversa a um toque nos dois momentos em que a pessoa decide:
   logo depois de ver as obras, e logo depois de entender como funciona. */
.cta-ctx{
  margin-top:clamp(30px,4vw,46px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,34px);
  padding:clamp(22px,3vw,32px) clamp(22px,3vw,34px);
  background:var(--brand-lt);border:1px solid #f3d9cc;border-radius:var(--r-lg)
}
.cta-ctx__t{margin:0;font-family:var(--f-head);font-size:clamp(1.15rem,2vw,1.42rem);
            font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.cta-ctx__s{margin:6px 0 0;color:var(--slate);max-width:44ch}
.cta-ctx .btn{flex:none}
@media (max-width:620px){
  .cta-ctx{flex-direction:column;align-items:stretch;text-align:left}
  .cta-ctx .btn{width:100%}
}

.steps__cta{
  margin:clamp(26px,3.4vw,38px) 0 0;text-align:center;color:var(--slate);font-size:1.02rem
}
.steps__cta a{color:var(--brand-dk);font-weight:600;text-underline-offset:3px}

.form__alt a{color:var(--brand-dk);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ── rodapé ────────────────────────────────────────────── */
.ft{background:var(--ink);color:#8f99a5;padding-top:clamp(48px,6vw,72px);font-size:.94rem}
.ft__in{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:40px;padding-bottom:44px}
.ft__brand p{margin-top:16px;max-width:38ch;line-height:1.62}
.brand--ft img{height:38px}
.brand--ft .brand__txt b{color:#7b858f}
.brand--ft .brand__txt i{color:#fff}
.ft h4{color:#fff;margin-bottom:16px}
.ft__nav,.ft__ct{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.ft__nav a,.ft__ct a{text-decoration:none;transition:color .16s}
.ft__nav a:hover,.ft__ct a:hover{color:var(--brand)}
.ft__base{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:22px;border-top:1px solid var(--line-dark);
  font-size:.85rem;color:#8b95a1   /* #6d7783 dava 3,92:1 */
}
.ft__base p{margin:0}

/* ── fab whatsapp ──────────────────────────────────────── */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:80;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--wa);color:#fff;box-shadow:0 8px 24px rgba(37,211,102,.42);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease)
}
.fab svg{width:29px;height:29px;fill:currentColor;stroke:none}
.fab:hover{transform:scale(1.07);box-shadow:0 12px 30px rgba(37,211,102,.5)}

/* O rótulo é um balão à esquerda, não uma pílula que estica o botão: assim o
   alvo de toque fica nos mesmos 56px nos dois estados e o encolhimento anda só
   em opacity e transform. Fundo --ink com texto branco = 15,9:1, e ele passa por
   cima de seção clara, escura e foto sem que o contraste dependa do que estiver
   embaixo. Some depois do primeiro scroll (`.fab--min`, posta pelo main.js). */
/* Balão claro, e não escuro: o herói também é --ink, e um balão --ink em cima
   dele desaparece justamente onde o rótulo mais precisa aparecer. Branco com
   texto --ink dá 15,9:1 e se destaca sobre seção clara, seção escura e foto. */
.fab__txt{
  position:absolute;right:calc(100% + 10px);top:50%;
  transform:translateY(-50%);
  background:var(--paper);color:var(--ink);border:1px solid var(--line);
  font-family:var(--f-head);font-size:.86rem;font-weight:600;line-height:1;
  letter-spacing:-.01em;white-space:nowrap;
  padding:11px 14px;border-radius:var(--r-sm);
  box-shadow:var(--sh-2);
  transition:opacity .2s var(--ease), transform .2s var(--ease)
}
.fab--min .fab__txt{
  opacity:0;transform:translateY(-50%) translateX(14px);pointer-events:none
}

/* ── lightbox ──────────────────────────────────────────── */
/* <dialog>: `showModal()` dá foco preso, Esc nativo e o resto da página inerte —
   antes eram 39 elementos ainda tabuláveis atrás da foto ampliada. */
.lb{
  position:fixed;inset:0;z-index:150;display:grid;
  max-width:100%;max-height:100%;width:100%;height:100%;border:0;
  grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:clamp(14px,3vw,40px);
  background:rgba(12,15,19,.94);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)
}
.lb:not([open]){display:none}
.lb::backdrop{background:rgba(12,15,19,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lb__fig{margin:0;display:grid;justify-items:center;gap:16px;min-width:0}
.lb__fig img{
  max-width:min(880px,100%);max-height:76vh;width:auto;
  border-radius:var(--r);box-shadow:var(--sh-3)
}
.lb__fig figcaption{color:#cbd2da;font-size:.94rem;text-align:center;max-width:56ch}
.lb__nav,.lb__x{
  color:#fff;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.1);transition:background .16s, transform .16s
}
.lb__nav{width:50px;height:50px;font-size:2rem;line-height:0;padding-bottom:5px}
.lb__x{position:absolute;top:18px;right:18px;width:44px;height:44px;font-size:1.7rem;
       line-height:0;padding-bottom:4px}
.lb__nav:hover,.lb__x:hover{background:rgba(255,255,255,.22);transform:scale(1.07)}

/* ── revelação ao rolar ────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);
    transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ══ a obra acende ═════════════════════════════════════════
   Gesso não se vende como gesso: vende-se como luz. Sobre cada foto vai uma
   camada composta de gradientes — a fita de LED da sanca, os spots embutidos e
   o brilho terracota que cai na parede. Zero asset novo, zero 3D.

   Três decisões que sustentam o resto:

   1. O QUE ESTÁ ESCRITO AQUI É O ESTADO ACESO. Apagar é uma classe
      (`html.lume-armed`) que o JavaScript põe e tira. Sem JS, com movimento
      reduzido, ou se o anime.js faltar, a página aparece acesa e completa.
   2. SÓ `opacity` E `transform` se movem. Nada de `filter` nem de `box-shadow`
      animado — o "frio" da foto no início é uma camada `multiply` que some, não
      um filtro sobre a imagem.
   3. NENHUMA LUZ CAI SOBRE TEXTO. As camadas vivem dentro da foto, e a legenda
      é pintada depois delas (`figcaption` e `::after` vêm por último), então
      fica fora do grupo de mesclagem. Contraste medido não muda com a luz. */

/* isolation: contém a mesclagem dentro da foto — sem isso o `screen` vazaria
   para o fundo escuro da seção. `.lume` NÃO pode virar contexto de empilhamento
   (nada de z-index/transform nela), senão os filhos mesclariam com o vazio dela
   em vez de com a fotografia. */
.hero__shot,.gal__i{isolation:isolate}
.lume{position:absolute;inset:0;overflow:hidden;pointer-events:none;
      border-radius:var(--r-lg)}
.gal__i .lume{border-radius:0}      /* o próprio botão já recorta */
.lume>*{position:absolute;display:block}

/* a foto antes de a luz existir: escura e puxada para o azul */
.lume__cold{inset:0;opacity:0;mix-blend-mode:multiply;
            background:linear-gradient(180deg,#5a6b93,#2f3855)}

/* a fita de LED na sanca — barra difusa colada no alto do recorte.
   O topo do enquadramento é o teto nas seis fotos, então a luz cai certo em
   todos os recortes (o `object-fit:cover` muda o corte entre 4/3.2 e 16/10). */
.lume__cove{left:-6%;right:-6%;top:-15%;height:48%;transform-origin:50% 0;
  mix-blend-mode:screen;
  background:radial-gradient(58% 100% at 50% 0%,
    rgba(255,206,148,.70), rgba(240,152,84,.26) 46%, transparent 74%)}

/* o brilho terracota espalhando pela parede */
.lume__wash{left:-20%;right:-20%;top:-12%;bottom:-28%;transform-origin:50% 16%;
  mix-blend-mode:screen;
  background:radial-gradient(52% 48% at 50% 16%,
    rgba(226,110,67,.40), rgba(226,110,67,.13) 54%, transparent 78%)}

/* os spots embutidos. `--x`/`--y` vêm do HTML; a margem negativa de 7,5% é
   metade da largura, e em porcentagem toda margem resolve contra a LARGURA —
   é o que centra o círculo nos dois eixos sem usar transform (que o anime.js
   sobrescreve durante a sequência). */
.lume__spot{left:var(--x);top:var(--y);width:15%;aspect-ratio:1;
  margin:-7.5% 0 0 -7.5%;mix-blend-mode:screen;
  background:radial-gradient(circle,
    rgba(255,226,190,.82), rgba(255,182,112,.28) 38%, transparent 68%)}

/* o único estado "apagado" que existe, e ele é temporário */
html.lume-armed .lume__cold{opacity:1}
html.lume-armed .lume__cove,
html.lume-armed .lume__wash,
html.lume-armed .lume__spot{opacity:0}

/* Cinto e suspensório: com movimento reduzido a obra já nasce acesa, e este
   bloco vence até estilo inline, caso o anime.js seja iniciado por engano. */
@media (prefers-reduced-motion:reduce){
  .lume__cold{opacity:0 !important}
  .lume__cove,.lume__wash,.lume__spot{opacity:1 !important;transform:none !important}
}

/* ══ responsivo ════════════════════════════════════════ */
@media (max-width:1060px){
  .cards,.pillars{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  .topbar__area{display:none}
  .topbar__in{justify-content:center}
  .hero__in{grid-template-columns:1fr}
  /* Aqui havia `order:-1`, que jogava a foto para cima do texto e empurrava o
     botão do WhatsApp para 841px numa tela de 812 — o CTA principal nascia
     fora da tela. Na ordem do documento, a primeira dobra passa a mostrar o
     argumento e a ação; a foto entra logo abaixo, e é ela que acende. */
  .hero__shot{max-width:520px}
  .hero__shot img{aspect-ratio:16/10}
  .contato{grid-template-columns:1fr}
  .ft__in{grid-template-columns:1fr 1fr;gap:34px}
  .ft__brand{grid-column:1/-1}
  .gal{grid-template-columns:repeat(2,1fr)}

  .burger{display:flex}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,84vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;
    background:var(--paper);padding:92px 24px 32px;
    box-shadow:-20px 0 50px rgba(20,24,29,.2);
    transform:translateX(100%);
    /* Fechado precisa sair da ordem de tabulação: sem isto, um Tab entra no
       painel invisível e o navegador arrasta o layout para revelá-lo. */
    visibility:hidden;
    transition:transform .3s var(--ease), visibility .3s;
    transition-behavior:allow-discrete;
    overflow-y:auto;z-index:95
  }
  .nav.is-open{transform:none;visibility:visible}
  .nav a:not(.btn){padding:14px 4px;border-bottom:1px solid var(--line);font-size:1.02rem}
  .nav a:not(.btn)::after{display:none}
  .nav__cta{margin:20px 0 0;justify-content:center;padding:14px 20px}
  body.nav-open{overflow:hidden}
}

@media (max-width:640px){
  body{font-size:16px}
  :root{--pad:18px}
  .topbar__links{gap:14px;font-size:.78rem}
  .topbar__links a:last-child{display:none}
  .cards,.pillars,.steps{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .band__in{flex-direction:column;align-items:flex-start}
  .band .btn{width:100%}
  .hero__cta .btn{flex:1 1 100%}
  .chips{gap:9px}
  .chips li{flex:1 1 100%}
  .ft__in{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .lb{grid-template-columns:1fr}
  .lb__nav{position:fixed;bottom:24px}
  .lb__nav--prev{left:24px}
  .lb__nav--next{right:24px}
  .fab{width:52px;height:52px;right:16px;bottom:16px}
}

/* ── impressão ─────────────────────────────────────────── */
@media print{
  .topbar,.hd,.fab,.lb,.band,.form{display:none}
  .hero,.sec--dark{background:#fff;color:#000}
  .hero h1,.sec--dark h2,.sec--dark h3{color:#000}
}