/* ============================================================
   TIPOGRAFIA DO ESTÚDIO
   Hospedada no próprio domínio e reduzida aos caracteres que o site usa.
   Vale só para as páginas do estúdio: as de profissão têm [data-area] e
   mantêm a tipografia da sua área, que é o que mostra ao cliente que o
   trabalho não sai de um modelo único.
   ============================================================ */
/* A Saira faz os dois papéis: título no peso 700 e texto no 400. O contraste
   deixa de vir da diferença entre duas fontes e passa a vir do peso — que é
   desenhado, não engrossado pelo navegador. */
@font-face{
  font-family:"Saira KB";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fontes/saira-400.woff") format("woff");
}
@font-face{
  font-family:"Saira KB";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fontes/saira-700.woff") format("woff");
}
/* monoespaçada dos rótulos: a Inconsolata, hospedada aqui e recortada aos
   caracteres do site. Licença SIL Open Font — ver /fontes/OFL-Inconsolata.txt */
@font-face{
  font-family:"Inconsolata KB";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fontes/inconsolata-400.woff") format("woff");
}

/* ============================================================
   KB DESIGNER — identidade visual
   Preto grafite · cinza chumbo · dourado suave
   Playfair Display (títulos) + Inter (textos)
   ============================================================ */
:root{
  --grafite:#0B0B0D;
  --grafite-rgb:11,11,13;
  --ouro-rgb:212,175,124;
  --chumbo-rgb:31,41,55;
  --chumbo-a:#151B24;
  --chumbo-b:#10141B;
  --chumbo:#1F2937;
  --chumbo-2:#141A22;
  --ouro:#D4AF7C;
  --ouro-claro:#F0DFC1;
  --ouro-escuro:#A8793F;
  --branco:#F9F7F3;
  --cinza:#E5E7EB;

  --grad-ouro:linear-gradient(135deg,#F2E3C6 0%,#D4AF7C 46%,#AD8148 100%);

  --fg:var(--branco);
  --fg-dim:#9BA3AE;
  --fg-dim-ink:#9BA3AE;

  /* superfícies (o que é fundo) separadas da tinta (o que é texto).
     O tema claro redefine só estas variáveis — nenhuma regra muda. */
  --sup:var(--grafite);
  --sup-card:var(--grafite);
  --sup-card-alt:var(--chumbo-b);
  --sup-creme:var(--branco);
  --sup-topo:rgba(var(--grafite-rgb),.95);
  --tinta:var(--branco);
  --fg-mute:#7E8792;
  --fg-soft:#8A929D;
  --fg-fraco:#6E7681;
  --linha-fraca:rgba(229,231,235,.2);
  --linha-media:rgba(229,231,235,.28);
  --seta:rgba(var(--grafite-rgb),.6);
  --seta-forte:rgba(var(--grafite-rgb),.88);
  --mock-cel:rgba(var(--grafite-rgb),.82);
  --sombra:rgba(0,0,0,1);
  --sombra-fraca:rgba(0,0,0,.95);
  --rule:rgba(var(--ouro-rgb),.22);
  --accent:var(--ouro);

  --ff-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --ff-body:"Inter","Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(18px,5vw,64px);
  --maxw:1180px;
  --sy:0; --mx:0; --my:0;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--sup);
  color:var(--fg);
  font-family:var(--ff-body);
  font-size:16.5px;
  line-height:1.66;
  font-weight:300;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%}
::selection{background:var(--ouro);color:var(--grafite)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:2px}

/* ---------- superfícies ---------- */
.panel{position:relative;padding-block:clamp(74px,10vw,136px)}
.panel--ink{
  background:var(--sup);
  --fg:var(--branco); --fg-dim:var(--fg-dim-ink);
  --rule:rgba(var(--ouro-rgb),.22); --accent:var(--ouro);
  color:var(--fg);
}
.panel--chumbo{
  background:linear-gradient(180deg,var(--chumbo-a) 0%,var(--chumbo-b) 46%,var(--sup) 100%);
  --fg:var(--branco); --fg-dim:var(--fg-dim-ink);
  --rule:rgba(var(--ouro-rgb),.22); --accent:var(--ouro);
  color:var(--fg);
}
.panel--light{
  background:var(--sup-creme);
  --fg:var(--grafite); --fg-dim:#5D6570;
  --rule:rgba(var(--grafite-rgb),.14); --accent:var(--ouro-escuro);
  color:var(--fg);
}
.panel--light::before,
.panel--light::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--ouro-rgb),.9),transparent);
}
.panel--light::before{top:0}
.panel--light::after{bottom:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}

/* ---------- tipografia ---------- */
.eyebrow{
  font-family:var(--ff-body);
  font-size:10.5px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);
  margin:0 0 20px;
}
.eyebrow::after{
  content:"";display:block;width:34px;height:1px;
  background:var(--accent);margin-top:14px;opacity:.9;
}

h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;text-wrap:balance;margin:0}
h1{font-size:clamp(40px,6.6vw,78px);line-height:1.02;letter-spacing:-.018em}
h2{font-size:clamp(29px,4.1vw,50px);line-height:1.08;letter-spacing:-.014em}
h3{font-size:clamp(19px,2.1vw,24px);line-height:1.22;letter-spacing:-.008em}
p{margin:0 0 1.05em;max-width:64ch}
.lede{font-size:clamp(16.5px,1.9vw,19px);line-height:1.68;color:var(--fg-dim);font-weight:300}

.gold{
  color:var(--ouro);
  background:var(--grad-ouro);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.italic{font-style:italic}

/* ============================================================
   CAMADAS DECORATIVAS
   ============================================================ */
.layers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.layers i{position:absolute;inset:-25%;display:block;will-change:transform}
.layers i:nth-child(1){
  background-image:repeating-linear-gradient(118deg,rgba(var(--ouro-rgb),.11) 0 1px,transparent 1px 52px);
  transform:translate3d(calc(var(--mx) * 10px),calc(var(--sy) * -0.08px + var(--my) * 10px),0);
}
.layers i:nth-child(2){
  background-image:radial-gradient(rgba(var(--ouro-rgb),.20) 1px,transparent 1.5px);
  background-size:34px 34px;
  opacity:.5;
  transform:translate3d(calc(var(--mx) * -20px),calc(var(--sy) * -0.2px + var(--my) * -16px),0);
}
.layers i:nth-child(3){
  background-image:
    radial-gradient(38% 30% at 74% 12%,rgba(var(--ouro-rgb),.20),transparent 70%),
    radial-gradient(44% 38% at 12% 88%,rgba(var(--chumbo-rgb),.85),transparent 72%);
  transform:translate3d(calc(var(--mx) * 26px),calc(var(--sy) * -0.3px + var(--my) * 22px),0);
}
.layers--mask{
  -webkit-mask-image:radial-gradient(118% 92% at 62% 16%,#000 10%,transparent 76%);
  mask-image:radial-gradient(118% 92% at 62% 16%,#000 10%,transparent 76%);
}
.glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(42% 44% at calc(62% + var(--mx) * 7%) calc(26% + var(--my) * 7%),rgba(var(--ouro-rgb),.20),transparent 70%),
    radial-gradient(60% 50% at 4% 96%,rgba(var(--chumbo-rgb),.9),transparent 68%);
}
/* monograma de marca em marca-d'água */
.monogram{
  position:absolute;right:-6%;top:34%;translate:0 -50%;
  width:clamp(320px,38vw,580px);height:auto;
  opacity:.22;
  pointer-events:none;z-index:1;user-select:none;
  transform:translate3d(calc(var(--mx) * -16px),calc(var(--sy) * -0.14px),0);
  will-change:transform;
}
/* na home quem ocupa o centro é o palco: a marca-d'água sai para não disputar
   com os mockups. As páginas de profissão continuam com ela. */
.hero:has(.palco) .monogram{display:none}

@media (max-width:900px){
  /* no celular sobe para o topo: embaixo ficava atrás da tabela de dados, que é opaca.
     Largura reduzida porque o mínimo de 360px cobria a tela inteira. */
  .monogram{
    width:min(56vw,250px);
    right:-12%; top:3%; bottom:auto; translate:0 0;
    opacity:.12;
  }
}
@media (prefers-reduced-motion:reduce){
  .layers i,.monogram{transform:none !important}
}

/* ============================================================
   CABEÇALHO
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:60;
  background:var(--sup-topo);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid rgba(var(--ouro-rgb),.2);
}
.site-head .bar{display:flex;align-items:center;gap:22px;min-height:68px}

.brand{display:flex;align-items:center;gap:13px;text-decoration:none;margin-right:auto}
.brand{gap:4px}
.brand .brand-mark{height:52px;width:auto;display:block;flex:none;margin:-6px 0}
.brand .word{display:flex;flex-direction:column;line-height:1}
/* align-self: num flex column a imagem estica até a largura do slogan e a
   assinatura sai distorcida — era o que acontecia com a logo antiga. */
.brand .brand-word{height:19px;width:auto;align-self:flex-start;display:block;margin-bottom:0}
.brand .word small{
  font-size:8px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg-mute);margin-top:2px;padding-left:2px;
}
@media (max-width:560px){.brand .word small{display:none}}
@media (max-width:420px){
  .brand .brand-mark{height:44px}
  .brand .brand-word{height:16px}
}

.nav{display:flex;align-items:center;gap:26px}
.nav a{
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--fg-dim);padding:6px 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--ouro);transition:width .34s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{color:var(--tinta)}
.nav a:hover::after{width:100%}
@media (max-width:900px){.nav{display:none}}

/* ============================================================
   MENU DO CELULAR
   Abaixo de 900px a navegação sai da barra e vai para um painel.
   ============================================================ */
.menu-btn{
  display:none;
  width:44px;height:44px;margin-left:auto;margin-right:-8px;
  border:0;background:none;padding:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;
}
.menu-btn i{
  display:block;height:1.5px;width:22px;background:var(--fg);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s,width .3s;
}
.menu-btn i:nth-child(2){width:16px}
.menu-btn.is-aberto i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn.is-aberto i:nth-child(2){opacity:0;width:22px}
.menu-btn.is-aberto i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:22px}

.menu-painel{
  position:fixed;left:0;right:0;top:68px;bottom:0;z-index:55;
  background:var(--sup);
  border-top:1px solid rgba(var(--ouro-rgb),.2);
  padding:clamp(22px,7vw,40px) var(--gutter) 40px;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-10px);
  transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.3,1);
}
.menu-painel.is-aberto{opacity:1;transform:none}
.menu-painel[hidden]{display:none}
html.menu-travado,html.menu-travado body{overflow:hidden}

.menu-links{display:flex;flex-direction:column}
.menu-links a{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(23px,7vw,30px);line-height:1;letter-spacing:-.012em;
  color:var(--fg);text-decoration:none;
  padding:17px 0;border-bottom:1px solid var(--rule);
  transition:color .2s,padding-left .3s cubic-bezier(.2,.7,.3,1);
}
.menu-links a:hover,.menu-links a:focus-visible{color:var(--ouro);padding-left:8px}

.menu-acoes{display:flex;flex-direction:column;gap:11px;margin-top:clamp(26px,6vw,36px)}
.menu-acoes .btn{width:100%;padding-block:17px}
.menu-pe{
  margin:auto 0 0;padding-top:28px;max-width:none;
  font-family:var(--ff-body);font-size:10px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--fg-mute);
}

@media (max-width:900px){
  .menu-btn{display:flex}
  /* a barra fica só com a marca e o botão, então a marca não precisa empurrar */
  .site-head .brand{margin-right:0}
}
@media (min-width:901px){ .menu-painel{display:none} }
@media (prefers-reduced-motion:reduce){
  .menu-painel,.menu-btn i,.menu-links a{transition:none}
}

.progress{
  position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--grad-ouro);
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-body);font-size:11.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  padding:15px 24px;border:1px solid transparent;cursor:pointer;border-radius:3px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),background-color .28s,color .28s,border-color .28s,box-shadow .28s;
}
.btn--gold{
  background:var(--grad-ouro);color:var(--grafite);
  box-shadow:0 14px 36px -20px rgba(var(--ouro-rgb),.9);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 44px -18px rgba(var(--ouro-rgb),.95)}
.btn--line{border-color:var(--linha-media);color:var(--fg)}
.btn--line:hover{border-color:var(--ouro);color:var(--ouro);transform:translateY(-2px)}
.btn--sm{padding:11px 18px;font-size:10.5px}
@media (max-width:900px){.btn--head{display:none}}

/* ============================================================
   HERO + PALCO (vitrine em destaque)
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(56px,7.4vw,100px) clamp(54px,7vw,92px);
  background:
    radial-gradient(120% 72% at 50% -10%,rgba(var(--chumbo-rgb),.72),transparent 64%),
    var(--sup);
  border-bottom:1px solid rgba(var(--ouro-rgb),.2);
}
.hero h1{max-width:14ch}
.hero-lede{max-width:52ch;margin-top:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-tag{
  margin:22px 0 0;max-width:none;font-size:10px;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--fg-mute);
}

/* home: herói centrado sobre o palco. As páginas de profissão seguem alinhadas à esquerda. */
.hero-topo{text-align:center}
.hero-topo .eyebrow{margin-bottom:20px;max-width:none}
.hero-topo .eyebrow::after{margin-inline:auto}
.hero-topo h1{font-size:clamp(38px,6.1vw,82px);max-width:16ch;margin-inline:auto}
/* caixa alta na chamada. Maiúscula ocupa mais largura e não tem perna descendo
   para dar ritmo, então o corpo cede um pouco, o espacejamento abre e a
   entrelinha fecha — o contrário do que a caixa baixa pedia. */
.hero-topo h1{
  text-transform:uppercase;
  /* a Saira é semicondensada: no mesmo corpo ela ocupa menos largura que a
     geométrica anterior, então o tamanho sobe para a chamada manter a presença. */
  /* a chamada nova tem o dobro de caracteres da anterior: o corpo cede um pouco
     e a medida abre, para ela ocupar três linhas e não cinco. */
  font-size:clamp(31px,5.0vw,68px);
  letter-spacing:-.004em;
  max-width:21ch;
}
/* a quebra automática deixava o artigo "a" pendurado no fim da primeira linha.
   Abaixo de 620px a frase cabe melhor quebrando sozinha, então a some. */
.hero-topo h1 .quebra{ display:none }
@media (min-width:620px){ .hero-topo h1 .quebra{ display:inline } }
/* subtítulo: a segunda frase desce de nível em vez de dividir o título em duas
   metades do mesmo tamanho — é a diferença de corpo que cria o destaque. */
.hero-sub{
  margin:clamp(14px,1.6vw,20px) auto 0;max-width:34ch;text-wrap:balance;
  font-size:clamp(19px,2.5vw,32px);line-height:1.22;letter-spacing:-.014em;
  color:var(--ouro);
}
.hero-topo .hero-lede{max-width:56ch;margin:clamp(22px,2.6vw,30px) auto 0}
.hero-topo .hero-actions{margin-top:30px;justify-content:center}

/* ---------- palco: carrossel com a peça central em destaque ---------- */
.palco{
  --cw:min(86vw,780px);
  position:relative;z-index:2;
  margin-top:clamp(40px,5.6vw,68px);
  height:calc(var(--cw) * 0.625 + 52px);
  outline:none;touch-action:pan-y;
}
.palco-trilha{position:absolute;inset:0}
.slide{
  position:absolute;left:50%;top:50%;width:var(--cw);
  transform:translate(-50%,-50%);
  transition:transform .74s cubic-bezier(.22,.72,.26,1),opacity .55s ease,filter .55s ease;
  will-change:transform,opacity;
}
.slide:not(.is-ativa){cursor:pointer}
.palco-trilha .slide:nth-child(n+2):not([data-d]){opacity:0}
/* fundo escuro: o lateral escurece. Fundo claro: ele clareia, então precisa de
   mais presença para não sumir no marfim. */
.slide[data-d="0"]{opacity:1}
.slide[data-d="1"]{opacity:.32}
.slide[data-d="2"]{opacity:.1}
.slide[data-d="3"]{opacity:0}

/* mockup de notebook, em CSS puro */
.laptop{display:block;text-decoration:none;color:inherit}
.laptop-tela{
  display:flex;flex-direction:column;
  aspect-ratio:16/10;overflow:hidden;
  border:9px solid #141519;border-bottom-width:11px;border-radius:13px;
  background:var(--grafite);
  box-shadow:
    0 0 0 1px rgba(var(--ouro-rgb),.22),
    0 70px 120px -58px var(--sombra);
  transition:box-shadow .5s ease;
}
.slide.is-ativa .laptop-tela{
  box-shadow:
    0 0 0 1px rgba(var(--ouro-rgb),.42),
    0 80px 130px -52px var(--sombra),
    0 0 90px -30px rgba(var(--ouro-rgb),.3);
}
.laptop-barra{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:9px 13px;background:var(--chumbo-b);
  border-bottom:1px solid rgba(var(--ouro-rgb),.16);
}
.laptop-barra i{width:6px;height:6px;border-radius:50%;background:var(--linha-fraca);display:block}
.laptop-barra b{
  margin-left:7px;font-family:var(--ff-body);font-size:10px;font-weight:400;
  letter-spacing:.07em;color:var(--fg-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.laptop-tela img{display:block;width:100%;flex:1 1 auto;min-height:0;object-fit:cover;object-position:top center}
.laptop-base{
  display:block;position:relative;
  width:116%;height:13px;margin-left:-8%;
  background:linear-gradient(180deg,#2B2E35 0%,#191B20 44%,#0A0B0E 100%);
  border-radius:0 0 11px 11px / 0 0 22px 22px;
  box-shadow:0 26px 36px -24px var(--sombra-fraca);
}
.laptop-base i{
  position:absolute;left:50%;top:0;translate:-50% 0;
  width:13%;height:5px;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#0A0B0E,#262930);
}

.palco-seta{
  position:absolute;top:calc(50% - 20px);translate:0 -50%;z-index:9;
  width:clamp(42px,4vw,52px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;padding:0;
  background:var(--seta);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid rgba(var(--ouro-rgb),.3);color:var(--fg);
  transition:border-color .25s,color .25s,background-color .25s,transform .25s;
}
.palco-seta:hover{border-color:var(--ouro);color:var(--ouro);background:var(--seta-forte)}
.palco-seta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.palco-seta--ant{right:calc(50% + var(--cw) * .5 + 16px)}
.palco-seta--prox{left:calc(50% + var(--cw) * .5 + 16px)}

.palco-pe{margin-top:clamp(28px,3.6vw,42px);text-align:center}
.palco-legendas{display:grid}
.legenda{
  grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s ease,visibility .5s;
  pointer-events:none;
}
.legenda.is-ativa{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.legenda-meta{
  margin:0 0 10px;font-family:var(--ff-body);font-size:9.5px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ouro);max-width:none;
}
.legenda-t{
  margin:0 0 9px;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(20px,2.6vw,28px);line-height:1.18;letter-spacing:-.01em;max-width:none;
}
.legenda-p{
  margin:0 auto 15px;max-width:60ch;
  font-size:14.5px;line-height:1.62;color:var(--fg-dim);font-weight:300;
}
.legenda-link{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--ff-body);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ouro);
  border-bottom:1px solid rgba(var(--ouro-rgb),.42);padding-bottom:3px;
  transition:color .25s,border-color .25s;
}
.legenda-link:hover{color:var(--tinta);border-color:var(--tinta)}
.legenda-link svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5}

.palco-pontos{display:flex;justify-content:center;gap:7px;margin-top:22px}
.ponto{
  width:30px;height:24px;display:grid;place-items:center;
  border:0;background:none;padding:0;cursor:pointer;
}
.ponto i{display:block;width:26px;height:2px;background:var(--linha-fraca);transition:background .3s}
.ponto:hover i{background:rgba(var(--ouro-rgb),.6)}
.ponto.is-ativa i{background:var(--ouro)}

@media (max-width:860px){
  .palco{--cw:min(90vw,520px)}
  .palco-seta--ant{right:auto;left:4px}
  .palco-seta--prox{left:auto;right:4px}
}
@media (max-width:520px){
  .palco-seta{width:38px}
  .laptop-tela{border-width:6px;border-bottom-width:8px;border-radius:10px}
  .laptop-barra{padding:7px 10px}
  .laptop-barra b{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  .slide,.legenda{transition:none}
}

.hero-facts{
  margin-top:clamp(50px,7vw,82px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:rgba(var(--ouro-rgb),.22);
  border-block:1px solid rgba(var(--ouro-rgb),.22);
}
.hero-facts div{background:var(--sup-card);padding:22px 24px 24px}
.hero-facts dt{
  font-size:9.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ouro);margin:0 0 11px;
}
.hero-facts dd{
  margin:0;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(17px,2vw,21px);line-height:1.26;letter-spacing:-.008em;
}
@media (max-width:720px){.hero-facts{grid-template-columns:1fr}}
/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(30px,6vw,76px);align-items:start;
}
@media (max-width:880px){.manifesto-grid{grid-template-columns:1fr}}
.manifesto-grid .big{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(23px,3.2vw,36px);line-height:1.26;letter-spacing:-.014em;
  margin:0;max-width:20ch;
}
.manifesto-grid .big em{font-style:italic;color:var(--ouro-escuro)}
.three{display:flex;flex-direction:column;gap:24px;margin-top:6px}
.three > div{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;
  padding-bottom:24px;border-bottom:1px solid var(--rule);
}
.three > div:last-child{border-bottom:0;padding-bottom:0}
.three b{
  font-size:10px;font-weight:600;letter-spacing:.2em;
  color:var(--ouro-escuro);padding-top:7px;
}
.three p{margin:0;font-size:16px;color:var(--fg-dim)}
.three strong{color:var(--fg);font-weight:600}

/* ============================================================
   PROFISSÕES
   ============================================================ */
.prof-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:30px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,50px);
}
.prof-head p{margin:16px 0 0}
.prof-layout{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(22px,3.4vw,46px);align-items:start;
}
@media (max-width:920px){.prof-layout{grid-template-columns:1fr}}

.prof-list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.prof-btn{
  appearance:none;background:none;border:0;border-bottom:1px solid var(--rule);
  width:100%;text-align:left;cursor:pointer;color:var(--fg-dim);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:16px 4px 16px 0;position:relative;
  font-family:var(--ff-display);font-size:18px;font-weight:500;letter-spacing:-.006em;
  transition:color .24s,padding-left .32s cubic-bezier(.2,.7,.3,1);
}
.prof-btn::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:0;height:1px;background:var(--ouro);transition:width .32s cubic-bezier(.2,.7,.3,1);
}
.prof-btn:hover{color:var(--tinta);padding-left:8px}
.prof-btn:hover::before{width:4px}
.prof-btn[aria-selected="true"]{color:var(--tinta);padding-left:24px}
.prof-btn[aria-selected="true"]::before{width:16px}
.prof-btn .conselho{
  font-family:var(--ff-body);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  color:var(--fg-fraco);border:1px solid var(--rule);padding:4px 8px;white-space:nowrap;border-radius:2px;
}
.prof-btn[aria-selected="true"] .conselho{color:var(--ouro);border-color:rgba(var(--ouro-rgb),.5)}

.preview{
  --mock:#D4AF7C;
  border:1px solid var(--rule);border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,var(--chumbo-a),var(--sup));
  display:grid;grid-template-rows:auto minmax(0,1fr);
  min-height:438px;
  box-shadow:0 46px 100px -56px var(--sombra);
}
.preview-bar{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--rule)}
.dots{display:flex;gap:5px}
.dots span{width:7px;height:7px;border-radius:50%;background:var(--linha-fraca)}
.url{
  font-size:10.5px;letter-spacing:.04em;color:#8B939E;
  border:1px solid var(--rule);border-radius:3px;padding:5px 11px;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.preview-body{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;gap:18px}
.mock-chip{
  display:inline-block;
  font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mock);border:1px solid color-mix(in srgb,var(--mock) 50%,transparent);
  padding:5px 9px;border-radius:2px;
}
.mock-h{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(24px,3.3vw,38px);line-height:1.08;letter-spacing:-.018em;
  margin:0;color:var(--tinta);max-width:16ch;text-wrap:balance;
}
.mock-sub{margin:0;color:var(--fg-dim);max-width:48ch;font-size:15.5px}
.mock-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border-block:1px solid var(--rule);margin-top:auto;
}
.mock-cols div{background:var(--mock-cel);padding:15px 15px 17px}
.mock-cols b{
  display:block;font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mock);margin-bottom:8px;
}
.mock-cols span{font-size:13.5px;color:var(--fg-dim);line-height:1.45;display:block}
@media (max-width:620px){.mock-cols{grid-template-columns:1fr}}
.mock-foot{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.mock-cta{
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:var(--mock);color:var(--grafite);padding:12px 17px;border-radius:3px;
}
.mock-note{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-fraco)}
.fade-swap{animation:swap .44s cubic-bezier(.2,.7,.3,1)}
@keyframes swap{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade-swap{animation:none}}

/* ============================================================
   MÉTODO
   ============================================================ */
.metodo-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(32px,5vw,70px);align-items:start;
}
@media (max-width:920px){.metodo-grid{grid-template-columns:1fr}}
.steps{margin:28px 0 0;padding:0;list-style:none}
.steps li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,30px);
  padding:26px 0;border-top:1px solid var(--rule);
}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps .step-n{
  font-size:10px;font-weight:600;letter-spacing:.2em;
  color:var(--ouro-escuro);padding-top:9px;
}
.steps h3{margin:0 0 8px}
.steps p{margin:0;color:var(--fg-dim);font-size:16px}
.steps .when{
  font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  /* o painel do método é claro nos dois temas: --fg-mute é calibrado para
     fundo escuro e aqui ficava em 3,4:1. --fg-dim é o tom de apoio do painel. */
  color:var(--fg-dim);margin-top:11px;display:block;
}
.entregaveis{
  border:1px solid var(--rule);border-radius:4px;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.4));
  padding:clamp(24px,3vw,32px);
}
.entregaveis h3{margin-bottom:18px}
.entregaveis ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.entregaveis li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;font-size:15.5px;line-height:1.5}
.entregaveis li svg{margin-top:6px;flex:none}
.entregaveis .tail{
  margin:22px 0 0;padding-top:20px;border-top:1px solid var(--rule);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.7;color:var(--fg-dim);
}

/* ============================================================
   PLANOS
   ============================================================ */
.planos{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:5px;overflow:hidden;
  margin-top:clamp(32px,4vw,50px);max-width:880px;
}
@media (max-width:880px){.planos{grid-template-columns:1fr}}
.plano{
  background:var(--sup-card);padding:clamp(26px,3.2vw,38px);
  display:flex;flex-direction:column;gap:18px;transition:background-color .32s;
}
.plano:hover{background:var(--sup-card-alt)}
.plano--dest{background:linear-gradient(170deg,var(--chumbo-a),var(--sup-card))}
.plano--dest:hover{background:linear-gradient(170deg,var(--chumbo-a),var(--sup-card))}
.plano .tag{
  margin:0;font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg-mute);display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.plano--dest .tag span:last-child{color:var(--ouro)}
.plano h3{font-size:clamp(22px,2.4vw,27px)}
.preco{
  margin:0;font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(34px,4vw,46px);line-height:1;font-variant-numeric:tabular-nums;
}
.preco small{
  display:block;font-family:var(--ff-body);font-size:9.5px;font-weight:500;
  letter-spacing:.24em;color:var(--fg-mute);margin-top:12px;text-transform:uppercase;
}
.plano ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.plano li{font-size:15px;line-height:1.5;color:var(--fg-dim);padding-left:20px;position:relative}
.plano li::before{
  content:"";position:absolute;left:0;top:10px;width:9px;height:1px;background:var(--ouro);
}
.plano .btn{margin-top:auto}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(26px,5vw,66px);align-items:start;
}
@media (max-width:880px){.faq-grid{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 36px 22px 0;position:relative;
  font-family:var(--ff-display);font-weight:600;font-size:18px;letter-spacing:-.006em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:32px;width:12px;height:1px;background:var(--ouro-escuro)}
.faq summary::before{
  content:"";position:absolute;right:11.5px;top:26px;width:1px;height:12px;background:var(--ouro-escuro);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),opacity .32s;
}
.faq details[open] summary::before{transform:scaleY(0);opacity:0}
.faq details p{margin:0 0 22px;color:var(--fg-dim);font-size:16px;max-width:58ch}

/* ============================================================
   CTA + RODAPÉ
   ============================================================ */
.cta{position:relative;overflow:hidden}
.cta h2{max-width:15ch}
.cta p{margin-top:20px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta-meta{
  margin-top:clamp(42px,6vw,66px);padding-top:26px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:12px 42px;
  font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-mute);
}
.cta-quote{
  margin:clamp(34px,5vw,52px) 0 0;font-family:var(--ff-display);font-style:italic;
  font-size:clamp(17px,2.1vw,21px);line-height:1.5;color:var(--ouro);max-width:30ch;opacity:.92;
}

.site-foot{background:var(--sup);border-top:1px solid rgba(var(--ouro-rgb),.2);padding-block:28px}
.site-foot .bar{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;
  font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-fraco);
}
.foot-brand{display:flex;align-items:center;gap:6px}
.foot-brand img{height:38px;width:auto;display:block;margin:-8px 0}
.site-foot a{color:var(--fg-dim);text-decoration:none}
.site-foot a:hover{color:var(--ouro)}

.rise{transition:transform .74s cubic-bezier(.2,.7,.3,1),opacity .74s}
.rise.pending{transform:translateY(16px);opacity:.5}
@media (prefers-reduced-motion:reduce){
  .rise,.rise.pending{transform:none;opacity:1;transition:none}
}


/* ---------- paginas por profissao ---------- */
.voltar{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-dim);margin-bottom:22px;
}
.voltar:hover{color:var(--accent)}
.voltar::before{content:"";width:16px;height:1px;background:currentColor}
.regra{
  margin-top:clamp(28px,4vw,42px);border:1px solid var(--rule);border-radius:4px;
  padding:clamp(22px,3vw,30px);background:rgba(var(--ouro-rgb),.06);
}
.regra h3{margin-bottom:12px}
.regra p{margin:0;color:var(--fg-dim);font-size:16px}
.regra .fonte{
  display:block;margin-top:14px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-dim);opacity:.8;
}
.secoes{list-style:none;margin:26px 0 0;padding:0;counter-reset:sec}
.secoes li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.2vw,26px);
  padding:20px 0;border-top:1px solid var(--rule);
}
.secoes li:last-child{border-bottom:1px solid var(--rule)}
.secoes .n{
  font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--accent);padding-top:7px;
}
.secoes h3{margin:0 0 5px}
.secoes p{margin:0;color:var(--fg-dim);font-size:15.5px}
.links-irmas{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;
}
.links-irmas a{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--rule);padding:10px 15px;border-radius:3px;color:var(--fg-dim);
  transition:border-color .25s,color .25s;
}
.links-irmas a:hover{border-color:var(--accent);color:var(--accent)}
.prof-link{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ouro);border-bottom:1px solid rgba(var(--ouro-rgb),.4);padding-bottom:3px;
}
.prof-link:hover{color:#fff;border-color:#fff}


.vitrine-pe{
  margin:clamp(30px,4vw,46px) 0 0;text-align:center;
  font-family:var(--ff-body);font-size:10px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--fg-mute);max-width:none;
}

/* ============================================================
   TEMAS POR PROFISSÃO
   Cada página de profissão veste a cor e a tipografia da área.
   A home mantém a identidade da marca (grafite e dourado).
   ============================================================ */
[data-area="advocacia"]{
  --grafite:#0D1626; --grafite-rgb:13,22,38;
  --chumbo-a:#16233A; --chumbo-b:#101A2B; --chumbo-rgb:30,45,72;
  --ouro:#C2A06A; --ouro-rgb:194,160,106; --ouro-claro:#E3CFA6; --ouro-escuro:#8A6B3A;
  --grad-ouro:linear-gradient(135deg,#E6D3AC 0%,#C2A06A 46%,#8E6E3C 100%);
  --branco:#F3F1EA;
  --ff-display:"Spectral",Georgia,serif;
  --ff-body:"Inter","Helvetica Neue",Arial,sans-serif;
}
[data-area="psicologia"]{
  --grafite:#171D1A; --grafite-rgb:23,29,26;
  --chumbo-a:#232C27; --chumbo-b:#1A221E; --chumbo-rgb:45,58,50;
  --ouro:#A9C3AC; --ouro-rgb:169,195,172; --ouro-claro:#D3E2D4; --ouro-escuro:#56705A;
  --grad-ouro:linear-gradient(135deg,#D3E2D4 0%,#A9C3AC 46%,#6E8A72 100%);
  --branco:#F2EFE8;
  --ff-display:"Fraunces",Georgia,serif;
  --ff-body:"Karla","Helvetica Neue",Arial,sans-serif;
}
[data-area="fisioterapia"]{
  --grafite:#08201F; --grafite-rgb:8,32,31;
  --chumbo-a:#0F3230; --chumbo-b:#0A2625; --chumbo-rgb:16,62,60;
  --ouro:#5FC2B0; --ouro-rgb:95,194,176; --ouro-claro:#A8E3D7; --ouro-escuro:#2F6F64;
  --grad-ouro:linear-gradient(135deg,#A8E3D7 0%,#5FC2B0 46%,#2F8275 100%);
  --branco:#EDF4F2;
  --ff-display:"Outfit","Helvetica Neue",Arial,sans-serif;
  --ff-body:"Inter","Helvetica Neue",Arial,sans-serif;
}
[data-area="personal"]{
  --grafite:#121316; --grafite-rgb:18,19,22;
  --chumbo-a:#1E2026; --chumbo-b:#17181D; --chumbo-rgb:40,43,50;
  --ouro:#E8763F; --ouro-rgb:232,118,63; --ouro-claro:#F6B28B; --ouro-escuro:#A8481F;
  --grad-ouro:linear-gradient(135deg,#F6B28B 0%,#E8763F 46%,#B4531F 100%);
  --branco:#F4F2EF;
  --ff-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ff-body:"Inter","Helvetica Neue",Arial,sans-serif;
}
[data-area="enfermagem"]{
  --grafite:#0B1C24; --grafite-rgb:11,28,36;
  --chumbo-a:#123040; --chumbo-b:#0D2430; --chumbo-rgb:22,60,78;
  --ouro:#7FB8CE; --ouro-rgb:127,184,206; --ouro-claro:#BBDCE9; --ouro-escuro:#3E6B7E;
  --grad-ouro:linear-gradient(135deg,#BBDCE9 0%,#7FB8CE 46%,#48798C 100%);
  --branco:#EFF3F5;
  --ff-display:"Lora",Georgia,serif;
  --ff-body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
}
[data-area="nutricao"]{
  --grafite:#141A12; --grafite-rgb:20,26,18;
  --chumbo-a:#1F2818; --chumbo-b:#182013; --chumbo-rgb:40,52,34;
  --ouro:#9FC47C; --ouro-rgb:159,196,124; --ouro-claro:#CDE3B6; --ouro-escuro:#53703A;
  --grad-ouro:linear-gradient(135deg,#CDE3B6 0%,#9FC47C 46%,#67884A 100%);
  --branco:#F2F2E9;
  --ff-display:"Literata",Georgia,serif;
  --ff-body:"Inter","Helvetica Neue",Arial,sans-serif;
}
[data-area="odontologia"]{
  --grafite:#091C23; --grafite-rgb:9,28,35;
  --chumbo-a:#102B35; --chumbo-b:#0C2129; --chumbo-rgb:18,54,66;
  --ouro:#64B4C6; --ouro-rgb:100,180,198; --ouro-claro:#AEDCE6; --ouro-escuro:#2F6D7B;
  --grad-ouro:linear-gradient(135deg,#AEDCE6 0%,#64B4C6 46%,#357D8C 100%);
  --branco:#EEF4F5;
  --ff-display:"Manrope","Helvetica Neue",Arial,sans-serif;
  --ff-body:"Inter","Helvetica Neue",Arial,sans-serif;
}
[data-area="terapias"]{
  --grafite:#1B1620; --grafite-rgb:27,22,32;
  --chumbo-a:#2A2032; --chumbo-b:#201927; --chumbo-rgb:54,43,64;
  --ouro:#C6A678; --ouro-rgb:198,166,120; --ouro-claro:#E6D3B4; --ouro-escuro:#7D6243;
  --grad-ouro:linear-gradient(135deg,#E6D3B4 0%,#C6A678 46%,#8A6B47 100%);
  --branco:#F2EEE9;
  --ff-display:"Cormorant Garamond",Georgia,serif;
  --ff-body:"Karla","Helvetica Neue",Arial,sans-serif;
}


/* O CDC manda escrever com destaque as cláusulas que mexem com o direito do
   consumidor. Esta marca o parágrafo do arrependimento. */
.termo-destaque{
  padding:clamp(16px,2vw,20px) clamp(18px,2.2vw,22px);
  border:1px solid rgba(var(--ouro-rgb),.45);border-radius:6px;
  background:var(--sup-card-alt);
  color:var(--tinta);
}
/* o destaque pede o maior contraste possível, não a cor da marca */
.termo-destaque strong{ color:var(--tinta);font-weight:700 }

/* ============================================================
   FAIXA DE GARANTIA — depois dos planos
   O selo fica do tamanho em que o texto em relevo ainda se lê. Abaixo
   de 160px o relevo some: letra sem cor própria existe só pela sombra.
   ============================================================ */
.garantia{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(26px,3.6vw,48px);align-items:center;
  margin-top:clamp(34px,4.6vw,56px);
  padding-top:clamp(30px,4vw,44px);
  border-top:1px solid var(--rule);
}
.garantia-selo{
  width:clamp(160px,15vw,196px);height:auto;display:block;
}
.garantia-itens{
  display:grid;gap:clamp(16px,2vw,22px);margin:0;
}
.garantia-itens dt{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:5px;
}
.garantia-itens dd{
  margin:0;color:var(--fg-dim);font-size:15px;line-height:1.55;max-width:46ch;
}
@media (max-width:720px){
  .garantia{ grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px }
  .garantia-itens dd{ margin-inline:auto }
}

/* ============================================================
   SISTEMAS
   Um produto só, e caro em relação aos avulsos: ganha bloco próprio em vez de
   virar a quarta linha da tabela de serviços. O preço fica numa coluna à
   direita, separada por um fio, como numa ficha de produto.
   ============================================================ */
.sistema{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"txt preco" "tela tela";
  gap:clamp(30px,4vw,60px);align-items:start;
  margin-top:clamp(32px,4.4vw,52px);
  padding-top:clamp(30px,4vw,44px);
  border-top:1px solid var(--rule);
}
.sistema-tag{
  display:inline-block;margin:0 0 14px;padding:5px 13px;
  border:1px solid rgba(var(--ouro-rgb),.55);border-radius:3px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);max-width:none;
}
.sistema h3{ margin:0 0 14px;font-size:clamp(23px,3vw,32px) }
.sistema-p{ margin:0;color:var(--fg-dim);font-size:16px;line-height:1.62;max-width:56ch }
.sistema-lista{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;gap:11px;max-width:56ch;
}
.sistema-lista li{
  position:relative;padding-left:26px;
  color:var(--fg-dim);font-size:15.5px;line-height:1.5;
}
.sistema-lista li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:12px;height:1px;background:var(--accent);
}
.sistema-dados{
  margin:24px 0 0;padding:16px 18px;max-width:58ch;
  border-left:2px solid rgba(var(--ouro-rgb),.55);
  background:var(--sup-card-alt);
  color:var(--fg-dim);font-size:15px;line-height:1.6;
}
.sistema-dados strong{ color:var(--tinta) }
.sistema-acoes{ display:flex;flex-wrap:wrap;gap:12px;margin-top:28px }

/* separador entre o sistema em destaque e os que são feitos sob encomenda */
.sistema-outros{
  display:flex;align-items:center;gap:18px;
  margin:clamp(42px,5vw,62px) 0 0;max-width:none;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);
}
.sistema-outros::after{
  content:"";flex:1;height:1px;background:var(--rule);
}
.sistema-outros + .servicos{ margin-top:clamp(18px,2.4vw,26px);border-top:0 }

.sistema-txt{ grid-area:txt }
.sistema-preco{
  grid-area:preco;
  text-align:right;white-space:nowrap;
  padding-left:clamp(26px,3vw,40px);
  border-left:1px solid var(--linha-media);
}
/* a tela do produto ocupa a largura toda, abaixo do texto e do preço */
.sistema-tela{
  grid-area:tela;margin:clamp(10px,1.6vw,20px) 0 0;
  border:1px solid var(--rule);border-radius:8px;overflow:hidden;
  background:var(--sup-card-alt);
  box-shadow:0 44px 90px -52px var(--sombra);
}
.sistema-tela img{ display:block;width:100%;height:auto }
.sistema-tela figcaption{
  padding:13px 16px;border-top:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-mute);
}
.sistema-valor{ margin:0 }
.sistema-valor b{
  display:block;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(36px,4.4vw,52px);line-height:1;letter-spacing:-.02em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.sistema-valor small{
  display:block;margin-top:8px;font-family:var(--ff-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
}
.sistema-obs{
  margin:18px 0 0;max-width:19ch;white-space:normal;
  font-size:13.5px;line-height:1.5;color:var(--fg-mute);
}
:root[data-area] .sistema-valor b{ font-weight:700 }
:root:not([data-area]) .sistema-valor b{ font-weight:700 }
@media (max-width:820px){
  .sistema{ grid-template-columns:1fr;grid-template-areas:"txt" "preco" "tela";gap:28px }
  .sistema-preco{
    text-align:left;padding-left:0;padding-top:24px;
    border-left:0;border-top:1px solid var(--linha-media);
  }
  .sistema-obs{ max-width:40ch }
}

/* ============================================================
   ACEITE DOS TERMOS
   Janela curta antes do checkout: a lei pede que a pessoa tenha tido
   oportunidade de conhecer o contrato, não que ela role o texto inteiro
   com o cartão na mão. Fechar a janela é o "não aceito".
   ============================================================ */
.aceite-fundo{
  position:fixed;inset:0;z-index:70;
  display:grid;place-items:center;padding:20px;
  background:rgba(var(--grafite-rgb),.72);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .24s ease;
}
/* o atributo hidden esconde pela regra [hidden]{display:none} do navegador, que
   tem especificidade mínima: o display:grid acima a vencia, e a camada ficava
   cobrindo a tela inteira, invisível, engolindo todo clique da página. */
.aceite-fundo[hidden]{ display:none }
.aceite-fundo.is-aberto{ opacity:1 }
.aceite{
  position:relative;width:min(100%,480px);
  max-height:calc(100dvh - 40px);overflow:auto;
  padding:clamp(28px,4vw,38px) clamp(24px,3.4vw,34px);
  background:var(--sup-card);
  border:1px solid var(--rule);border-radius:8px;
  box-shadow:0 50px 110px -40px var(--sombra);
  transform:translateY(12px) scale(.985);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.aceite-fundo.is-aberto .aceite{ transform:none }
/* a variante miúda do selo: texto proporcionalmente maior e relevo mais fundo,
   porque é o texto fino que mata o selo em tamanho pequeno, não o tamanho */
.aceite-selo{
  width:128px;height:auto;display:block;margin:0 auto 18px;
}
.aceite{ text-align:center }
.aceite .eyebrow::after{ margin-inline:auto }
.aceite-caixa{ text-align:left }
.aceite h2{ font-size:clamp(23px,3vw,30px);margin:0 auto 12px;max-width:16ch }
/* o título recebe foco por código ao abrir, para o leitor de tela anunciar a
   janela. Como não é alcançável pelo teclado, o contorno só polui. */
.aceite h2:focus{ outline:none }
.aceite .eyebrow{ margin-bottom:14px }
.aceite-p{ margin:0;color:var(--fg-dim);font-size:15px;line-height:1.6;max-width:none }
.aceite-x{
  position:absolute;top:10px;right:12px;
  width:34px;height:34px;line-height:1;font-size:22px;
  background:none;border:0;color:var(--fg-mute);cursor:pointer;border-radius:4px;
  transition:color .2s,background .2s;
}
.aceite-x:hover{ color:var(--tinta);background:var(--linha-fraca) }
.aceite-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(var(--ouro-rgb),.4);padding-bottom:3px;
  transition:border-color .22s;
}
.aceite-link:hover{ border-bottom-color:var(--accent) }
.aceite-link svg{ width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5 }
.aceite-caixa{
  display:flex;align-items:flex-start;gap:11px;
  margin:22px 0 20px;padding:15px 16px;
  border:1px solid var(--linha-media);border-radius:6px;
  background:var(--sup-card-alt);
  cursor:pointer;font-size:15px;line-height:1.45;color:var(--tinta);
  transition:border-color .22s;
}
.aceite-caixa:hover{ border-color:rgba(var(--ouro-rgb),.5) }
.aceite-caixa input{
  width:19px;height:19px;margin:0;flex:none;
  accent-color:var(--ouro);cursor:pointer;
}
.aceite-caixa:has(input:checked){ border-color:rgba(var(--ouro-rgb),.6) }
.aceite-ir{ width:100%;justify-content:center;cursor:pointer }
/* desligado até marcar: fica visível, mas sem resposta e sem foco */
.aceite-ir[aria-disabled="true"]{
  opacity:.4;filter:saturate(.35);cursor:not-allowed;
}
.aceite-pe{
  margin:16px 0 0;text-align:center;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute);max-width:none;
}
@media (prefers-reduced-motion:reduce){
  .aceite-fundo,.aceite{ transition:none }
}

/* ============================================================
   CONVITE A ROLAR
   Em notebook de tela baixa o carrossel fica inteiro abaixo da dobra: a pessoa
   vê texto e botões e não tem como saber que há vitrine embaixo. Este é o
   único elemento fixo do site, e ele se apaga sozinho na primeira rolagem —
   depois de cumprida a função, vira estorvo.
   ============================================================ */
.rolar{
  position:relative;z-index:3;
  margin:clamp(26px,3.4vw,42px) auto 0;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  pointer-events:none;
}
.rolar-txt{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-mute);white-space:nowrap;
}
.rolar-trilho{
  position:relative;display:block;width:1px;height:34px;
  background:linear-gradient(180deg,transparent,var(--linha-media) 30%,transparent);
  overflow:hidden;
}
/* a gota desce o trilho: é o movimento que diz "para baixo", não o texto */
.rolar-trilho i{
  position:absolute;left:-1px;top:0;width:3px;height:11px;border-radius:2px;
  background:var(--ouro);
  animation:gota 1.9s cubic-bezier(.55,0,.35,1) infinite;
}
@keyframes gota{
  0%   { transform:translateY(-12px);opacity:0 }
  28%  { opacity:1 }
  72%  { opacity:1 }
  100% { transform:translateY(34px);opacity:0 }
}
/* some na primeira rolagem, sem script: a linha do tempo é a própria rolagem */
@supports (animation-timeline: scroll()){
  .rolar{
    animation:rolar-some linear both;
    animation-timeline:scroll(root block);
    animation-range:0 300px;
  }
}
@keyframes rolar-some{
  0%   { opacity:1;  transform:translateY(0) }
  100% { opacity:0;  transform:translateY(12px) }
}
/* nos navegadores sem linha do tempo de rolagem, o script marca o html */
.rolou .rolar{ opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s }
@media (prefers-reduced-motion: reduce){
  .rolar-trilho i{ animation:none;top:11px;opacity:.9 }
}
/* as chamadas depois do carrossel: a pessoa decide tendo visto a prova */
.hero-actions--pos{
  justify-content:center;
  margin-top:clamp(30px,4vw,46px);
}

/* ============================================================
   MARCA E MANUTENÇÃO — tabela de serviços avulsos
   Linha a linha, como uma tabela de preços impressa: nome e descrição à
   esquerda, valor à direita, separador pontilhado. Sem cartão nem caixa,
   porque aqui o que o cliente compara é preço, não pacote.
   ============================================================ */
.servicos{ margin-top:clamp(30px,4vw,44px);border-top:1px solid var(--rule) }
.servico{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:18px 28px;align-items:start;
  padding:clamp(22px,3vw,30px) 0;
  border-bottom:1px dotted var(--linha-media);
}
.servico:last-child{ border-bottom:1px solid var(--rule) }
.servico h3{ margin:0 0 8px }
.servico p{ margin:0;max-width:52ch;color:var(--fg-dim);font-size:15.5px;line-height:1.55 }
.servico p + p{ margin-top:3px }
.servico-valor{ text-align:right;white-space:nowrap }
.servico-valor b{
  display:block;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(30px,3.6vw,42px);line-height:1;letter-spacing:-.02em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.servico-valor small{
  display:block;margin-top:7px;font-family:var(--ff-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
}
.servico-pedir{
  display:inline-block;margin-top:12px;font-family:var(--ff-mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(var(--ouro-rgb),.4);padding-bottom:2px;
  transition:border-color .24s,opacity .24s;
}
.servico-pedir:hover{ border-bottom-color:var(--accent) }
.servico-nota{
  margin:clamp(26px,3.4vw,36px) 0 0;padding-left:18px;
  border-left:2px solid rgba(var(--ouro-rgb),.5);
  color:var(--fg-dim);font-size:15px;line-height:1.6;max-width:62ch;
}
@media (max-width:620px){
  .servico{ grid-template-columns:1fr;gap:14px }
  .servico-valor{ text-align:left }
  .servico-valor b{ font-size:34px }
  .servico-valor small{ margin-top:5px }
}

/* ============================================================
   TEMA CLARO
   Mesma identidade, superfícies invertidas: fundo marfim, tinta grafite e
   o dourado escurecido para continuar legível sobre claro. Só variáveis —
   nenhuma regra do site acima foi alterada.
   ============================================================ */
[data-tema="claro"]{
  --sup:#FAF7F4; --sup-creme:#FFFFFF; --sup-card:#FFFFFF; --sup-card-alt:#F5F2ED;
  --sup-topo:rgba(250,247,244,.90);
  --chumbo-a:#F3EFE9; --chumbo-b:#F5F2ED; --chumbo-rgb:238,231,221;
  --ouro:#76562C; --ouro-rgb:118,86,44; --ouro-escuro:#76562C;
  --grad-ouro:linear-gradient(135deg,#9B713A 0%,#76562C 46%,#5C4322 100%);
  --branco:#14161A; --tinta:#14161A;
  --fg-dim:#4C5462; --fg-dim-ink:#4C5462;
  --fg-mute:#4C5460; --fg-soft:#5C6472; --fg-fraco:#5C6472;
  --rule:rgba(20,22,26,.13);
  --linha-fraca:rgba(20,22,26,.16); --linha-media:rgba(20,22,26,.26);
  --seta:rgba(255,255,255,.78); --seta-forte:rgba(255,255,255,.96);
  --mock-cel:rgba(20,22,26,.045);
  --sombra:rgba(20,22,26,.30); --sombra-fraca:rgba(20,22,26,.24);
}
[data-tema="claro"][data-area="advocacia"]{
  --sup:#F4F6FA; --sup-creme:#FFFFFF; --sup-card:#FFFFFF; --sup-card-alt:#EDF0F5;
  --sup-topo:rgba(244,246,250,.90);
  --chumbo-a:#E9EDF3; --chumbo-b:#EDF0F5; --chumbo-rgb:221,227,238;
  --ouro:#6C5429; --ouro-rgb:108,84,41; --ouro-escuro:#6C5429;
  --grad-ouro:linear-gradient(135deg,#917137 0%,#6C5429 46%,#52401F 100%);
  --branco:#0D1626; --tinta:#0D1626;
  --fg-dim:#4C5462; --fg-dim-ink:#4C5462;
  --fg-mute:#4C5460; --fg-soft:#5C6472; --fg-fraco:#5C6472;
  --rule:rgba(13,22,38,.13);
  --linha-fraca:rgba(13,22,38,.16); --linha-media:rgba(13,22,38,.26);
  --seta:rgba(255,255,255,.78); --seta-forte:rgba(255,255,255,.96);
  --mock-cel:rgba(13,22,38,.045);
  --sombra:rgba(13,22,38,.30); --sombra-fraca:rgba(13,22,38,.24);
}
[data-tema="claro"][data-area="psicologia"]{
  --sup:#F5F8F6; --sup-creme:#FFFFFF; --sup-card:#FFFFFF; --sup-card-alt:#EEF3EF;
  --sup-topo:rgba(245,248,246,.90);
  --chumbo-a:#EBF1EC; --chumbo-b:#EEF3EF; --chumbo-rgb:225,234,226;
  --ouro:#45603F; --ouro-rgb:69,96,63; --ouro-escuro:#45603F;
  --grad-ouro:linear-gradient(135deg,#5B7F53 0%,#45603F 46%,#364A31 100%);
  --branco:#171D1A; --tinta:#171D1A;
  --fg-dim:#4C5462; --fg-dim-ink:#4C5462;
  --fg-mute:#4C5460; --fg-soft:#5C6472; --fg-fraco:#5C6472;
  --rule:rgba(23,29,26,.13);
  --linha-fraca:rgba(23,29,26,.16); --linha-media:rgba(23,29,26,.26);
  --seta:rgba(255,255,255,.78); --seta-forte:rgba(255,255,255,.96);
  --mock-cel:rgba(23,29,26,.045);
  --sombra:rgba(23,29,26,.30); --sombra-fraca:rgba(23,29,26,.24);
}
[data-tema="claro"][data-area="fisioterapia"]{
  --sup:#F4FAF9; --sup-creme:#FFFFFF; --sup-card:#FFFFFF; --sup-card-alt:#EDF5F5;
  --sup-topo:rgba(244,250,249,.90);
  --chumbo-a:#E9F3F3; --chumbo-b:#EDF5F5; --chumbo-rgb:221,238,237;
  --ouro:#1F6358; --ouro-rgb:31,99,88; --ouro-escuro:#1F6358;
  --grad-ouro:linear-gradient(135deg,#2B8A7B 0%,#1F6358 46%,#164840 100%);
  --branco:#08201F; --tinta:#08201F;
  --fg-dim:#4C5462; --fg-dim-ink:#4C5462;
  --fg-mute:#4C5460; --fg-soft:#5C6472; --fg-fraco:#5C6472;
  --rule:rgba(8,32,31,.13);
  --linha-fraca:rgba(8,32,31,.16); --linha-media:rgba(8,32,31,.26);
  --seta:rgba(255,255,255,.78); --seta-forte:rgba(255,255,255,.96);
  --mock-cel:rgba(8,32,31,.045);
  --sombra:rgba(8,32,31,.30); --sombra-fraca:rgba(8,32,31,.24);
}
[data-tema="claro"][data-area="personal"]{
  --sup:#FAF6F4; --sup-creme:#FFFFFF; --sup-card:#FFFFFF; --sup-card-alt:#F5F0ED;
  --sup-topo:rgba(250,246,244,.90);
  --chumbo-a:#F3EDE9; --chumbo-b:#F5F0ED; --chumbo-rgb:238,227,221;
  --ouro:#963F18; --ouro-rgb:150,63,24; --ouro-escuro:#963F18;
  --grad-ouro:linear-gradient(135deg,#C2511F 0%,#963F18 46%,#773213 100%);
  --branco:#121316; --tinta:#121316;
  --fg-dim:#4C5462; --fg-dim-ink:#4C5462;
  --fg-mute:#4C5460; --fg-soft:#5C6472; --fg-fraco:#5C6472;
  --rule:rgba(18,19,22,.13);
  --linha-fraca:rgba(18,19,22,.16); --linha-media:rgba(18,19,22,.26);
  --seta:rgba(255,255,255,.78); --seta-forte:rgba(255,255,255,.96);
  --mock-cel:rgba(18,19,22,.045);
  --sombra:rgba(18,19,22,.30); --sombra-fraca:rgba(18,19,22,.24);
}
[data-tema="claro"][data-area="enfermagem"]{
  --sup:#F4F8FA; --sup-creme:#FFFFFF; --sup-card:#FFFFFF; --sup-card-alt:#EDF2F5;
  --sup-topo:rgba(244,248,250,.90);
  --chumbo-a:#E9F0F3; --chumbo-b:#EDF2F5; --chumbo-rgb:221,232,238;
  --ouro:#2F5F73; --ouro-rgb:47,95,115; --ouro-escuro:#2F5F73;
  --grad-ouro:linear-gradient(135deg,#3E7D97 0%,#2F5F73 46%,#254A5A 100%);
  --branco:#0B1C24; --tinta:#0B1C24;
  --fg-dim:#4C5462; --fg-dim-ink:#4C5462;
  --fg-mute:#4C5460; --fg-soft:#5C6472; --fg-fraco:#5C6472;
  --rule:rgba(11,28,36,.13);
  --linha-fraca:rgba(11,28,36,.16); --linha-media:rgba(11,28,36,.26);
  --seta:rgba(255,255,255,.78); --seta-forte:rgba(255,255,255,.96);
  --mock-cel:rgba(11,28,36,.045);
  --sombra:rgba(11,28,36,.30); --sombra-fraca:rgba(11,28,36,.24);
}
[data-tema="claro"][data-area="nutricao"]{
  --sup:#F6F8F5; --sup-creme:#FFFFFF; --sup-card:#FFFFFF; --sup-card-alt:#F0F4EE;
  --sup-topo:rgba(246,248,245,.90);
  --chumbo-a:#EDF1EB; --chumbo-b:#F0F4EE; --chumbo-rgb:227,234,225;
  --ouro:#466330; --ouro-rgb:70,99,48; --ouro-escuro:#466330;
  --grad-ouro:linear-gradient(135deg,#5E8541 0%,#466330 46%,#354B24 100%);
  --branco:#141A12; --tinta:#141A12;
  --fg-dim:#4C5462; --fg-dim-ink:#4C5462;
  --fg-mute:#4C5460; --fg-soft:#5C6472; --fg-fraco:#5C6472;
  --rule:rgba(20,26,18,.13);
  --linha-fraca:rgba(20,26,18,.16); --linha-media:rgba(20,26,18,.26);
  --seta:rgba(255,255,255,.78); --seta-forte:rgba(255,255,255,.96);
  --mock-cel:rgba(20,26,18,.045);
  --sombra:rgba(20,26,18,.30); --sombra-fraca:rgba(20,26,18,.24);
}
[data-tema="claro"][data-area="odontologia"]{
  --sup:#F4F8FA; --sup-creme:#FFFFFF; --sup-card:#FFFFFF; --sup-card-alt:#EDF3F5;
  --sup-topo:rgba(244,248,250,.90);
  --chumbo-a:#E9F1F3; --chumbo-b:#EDF3F5; --chumbo-rgb:221,233,238;
  --ouro:#246170; --ouro-rgb:36,97,112; --ouro-escuro:#246170;
  --grad-ouro:linear-gradient(135deg,#308297 0%,#246170 46%,#1B4A55 100%);
  --branco:#091C23; --tinta:#091C23;
  --fg-dim:#4C5462; --fg-dim-ink:#4C5462;
  --fg-mute:#4C5460; --fg-soft:#5C6472; --fg-fraco:#5C6472;
  --rule:rgba(9,28,35,.13);
  --linha-fraca:rgba(9,28,35,.16); --linha-media:rgba(9,28,35,.26);
  --seta:rgba(255,255,255,.78); --seta-forte:rgba(255,255,255,.96);
  --mock-cel:rgba(9,28,35,.045);
  --sombra:rgba(9,28,35,.30); --sombra-fraca:rgba(9,28,35,.24);
}
[data-tema="claro"][data-area="terapias"]{
  --sup:#F7F5F8; --sup-creme:#FFFFFF; --sup-card:#FFFFFF; --sup-card-alt:#F1EEF4;
  --sup-topo:rgba(247,245,248,.90);
  --chumbo-a:#EEEBF1; --chumbo-b:#F1EEF4; --chumbo-rgb:230,225,234;
  --ouro:#6C5234; --ouro-rgb:108,82,52; --ouro-escuro:#6C5234;
  --grad-ouro:linear-gradient(135deg,#8E6C45 0%,#6C5234 46%,#544028 100%);
  --branco:#1B1620; --tinta:#1B1620;
  --fg-dim:#4C5462; --fg-dim-ink:#4C5462;
  --fg-mute:#4C5460; --fg-soft:#5C6472; --fg-fraco:#5C6472;
  --rule:rgba(27,22,32,.13);
  --linha-fraca:rgba(27,22,32,.16); --linha-media:rgba(27,22,32,.26);
  --seta:rgba(255,255,255,.78); --seta-forte:rgba(255,255,255,.96);
  --mock-cel:rgba(27,22,32,.045);
  --sombra:rgba(27,22,32,.30); --sombra-fraca:rgba(27,22,32,.24);
}

/* o botão dourado passa a ter tinta clara, porque o gradiente escureceu */
[data-tema="claro"] .btn--gold{color:#FFF8EC}
/* a tela do notebook e o seu bisel continuam escuros: é o aparelho, não a página */
[data-tema="claro"] .laptop-tela{background:#0B0B0D}
[data-tema="claro"] .laptop-barra{background:#F3F0EA}
/* a faixa de rolagem no topo precisa de um traço visível sobre marfim */
[data-tema="claro"] .site-head{box-shadow:0 1px 0 rgba(20,22,26,.06)}
[data-tema="claro"] .monogram{opacity:.09;filter:contrast(1.2) brightness(.78)}
[data-tema="claro"] .plano--dest{box-shadow:inset 0 0 0 1px rgba(var(--ouro-rgb),.34)}
[data-tema="claro"] .slide[data-d="1"]{opacity:.52}
[data-tema="claro"] .slide[data-d="2"]{opacity:.2}
/* a cor viva da profissão no mockup escurece para continuar legível em claro */
[data-tema="claro"] .mock-chip{
  color:color-mix(in srgb,var(--mock) 52%, #0A0C10);
  border-color:color-mix(in srgb,var(--mock) 42%,transparent);
}
[data-tema="claro"] .mock-cols b{color:color-mix(in srgb,var(--mock) 52%, #0A0C10)}

/* ============================================================
   TERMOS DE CONTRATAÇÃO
   ============================================================ */
.hero--curto{padding-block:clamp(48px,6vw,78px) clamp(44px,5.5vw,70px)}
/* o cabeçalho da página segue o mesmo eixo do texto, senão os dois blocos
   começam em colunas diferentes */
.hero--curto .wrap{max-width:calc(760px + var(--gutter) * 2)}
.hero--curto h1{font-size:clamp(32px,4.6vw,56px);max-width:16ch}
.termo-data{
  margin:22px 0 0;max-width:none;
  font-family:var(--ff-body);font-size:10px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--fg-mute);
}

.termo-corpo{max-width:calc(760px + var(--gutter) * 2)}
.termo{padding-block:clamp(26px,3.4vw,38px);border-bottom:1px solid var(--rule)}
.termo:last-child{border-bottom:0;padding-bottom:0}
.termo h2{
  display:flex;align-items:baseline;gap:16px;
  font-size:clamp(20px,2.4vw,26px);margin:0 0 14px;
}
.termo-n{
  font-family:var(--ff-body);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  color:var(--accent);flex:none;
}
.termo p{margin:0 0 .9em;font-size:16px;line-height:1.72;color:var(--fg-dim);max-width:62ch}
.termo p:last-child{margin-bottom:0}
.termo strong{color:var(--fg);font-weight:500}

.termo-lista{margin:0 0 .9em;padding:0 0 0 2px;list-style:none;display:flex;flex-direction:column;gap:11px}
.termo-lista li{
  font-size:16px;line-height:1.6;color:var(--fg-dim);
  padding-left:20px;position:relative;max-width:62ch;
}
.termo-lista li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--accent);
}

.termo-grade{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  margin:4px 0 20px;
}
.termo-grade > div{background:var(--sup-creme);padding:22px 22px 24px}
.termo-grade b{
  display:block;font-family:var(--ff-body);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
.termo-grade ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.termo-grade li{font-size:14.5px;line-height:1.5;color:var(--fg-dim);padding-left:16px;position:relative}
.termo-grade li::before{
  content:"";position:absolute;left:0;top:.66em;width:7px;height:1px;background:var(--accent);opacity:.7;
}
@media (max-width:720px){.termo-grade{grid-template-columns:1fr}}

.site-foot a{color:var(--fg-dim);text-decoration:none;border-bottom:1px solid var(--rule)}
.site-foot a:hover{color:var(--ouro);border-color:var(--ouro)}

/* ============================================================
   NAVEGAÇÃO, ROLAGEM E RENDERIZAÇÃO
   Três recursos nativos do navegador. Todos são progressivos: onde não há
   suporte, o site se comporta exatamente como antes.
   ============================================================ */

/* ---------- 1. transição entre páginas ----------
   A ida da home para uma página de profissão deixa de ser um corte seco.
   O cabeçalho e o rodapé recebem nome próprio e atravessam a troca parados,
   enquanto o conteúdo faz a passagem. */
@view-transition{ navigation:auto }

.site-head{ view-transition-name:cabecalho }
.site-foot{ view-transition-name:rodape }

::view-transition-old(root){ animation:vt-sai .26s cubic-bezier(.4,0,.7,1) both }
::view-transition-new(root){ animation:vt-entra .42s cubic-bezier(.2,.7,.3,1) both }
@keyframes vt-sai{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes vt-entra{ from{ opacity:0; transform:translateY(16px) } }

/* parados: sem fade cruzado, senão a marca pisca no meio da navegação */
::view-transition-old(cabecalho),::view-transition-new(cabecalho),
::view-transition-old(rodape),::view-transition-new(rodape){ animation:none }

/* ---------- 2. animação de entrada pela rolagem ----------
   Sai do JavaScript (que recalculava a cada quadro) e passa para a linha do
   tempo de rolagem do próprio navegador, que roda no compositor. */
@keyframes sobe{
  from{ opacity:0; transform:translateY(22px) }
  to{ opacity:1; transform:none }
}
@supports (animation-timeline: view()){
  /* Fora .hero e .cta: os dois têm overflow:hidden, o que os torna contêineres
     de rolagem. A linha do tempo de view() se ancora no contêiner mais próximo,
     e como esses dois não rolam, a animação congelaria no meio do caminho. */
  .panel:not(.cta) .wrap > *{
    animation:sobe linear both;
    animation-timeline:view();
    animation-range:entry 2% cover 20%;
  }
}

/* a barra de progresso do topo também deixa de depender do evento de rolagem */
/* O carrossel entra deitado e se endireita conforme a pessoa desce: o
   movimento é a recompensa de ter rolado, e acontece bem onde o convite
   acima apontava. Usa scroll() e não view() porque .hero tem overflow:hidden
   e serviria de âncora parada para a linha do tempo de view(). */
@supports (animation-timeline: scroll()){
  .palco{
    animation:palco-endireita linear both;
    animation-timeline:scroll(root block);
    animation-range:0 440px;
  }
}
@keyframes palco-endireita{
  from{ transform:perspective(1500px) rotateX(9deg) scale(.955) }
  to  { transform:perspective(1500px) rotateX(0deg)  scale(1) }
}

@supports (animation-timeline: scroll()){
  .progress{
    width:100%;
    transform-origin:0 50%;
    animation:progresso linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes progresso{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
}

/* ---------- 3. renderizar só o que está à vista ----------
   A home é longa. Com isto o navegador pula o desenho das seções fora da tela
   e guarda a altura real de cada uma depois da primeira passagem, então as
   âncoras continuam caindo no lugar certo. */
@supports (content-visibility: auto){
  /* Só as seções longas: nas curtas o ganho não paga o risco de a altura
     estimada deslocar as âncoras antes da primeira renderização.
     O valor é a altura do CONTEÚDO (o padding da seção soma por cima) e saiu
     de medição real; o 'auto' faz o navegador trocá-la pela altura verdadeira
     assim que a seção é desenhada uma vez. */
  #profissoes,#metodo,#planos{ content-visibility:auto }
  #profissoes{ contain-intrinsic-size:auto 980px }
  #metodo    { contain-intrinsic-size:auto 2070px }
  #planos    { contain-intrinsic-size:auto 860px }
  @media (max-width:900px){
    #profissoes{ contain-intrinsic-size:auto 1580px }
    #metodo    { contain-intrinsic-size:auto 2180px }
    #planos    { contain-intrinsic-size:auto 1270px }
  }
}


@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important }
  .panel .wrap > *{ animation:none }
  .progress{ animation:none }
  /* o carrossel fica direito desde o início, sem o movimento de endireitar */
  .palco{ animation:none;transform:none }
  .rolar{ animation:none }
}

/* ---------- o trio, só nas páginas do estúdio ---------- */
:root:not([data-area]){
  --ff-display:"Saira KB","Inter",system-ui,"Helvetica Neue",Arial,sans-serif;
  --ff-body:"Saira KB","Inter",system-ui,"Helvetica Neue",Arial,sans-serif;
  --ff-mono:"Inconsolata KB",ui-monospace,SFMono-Regular,monospace;
}
/* Só existem os pesos 400 e 700: qualquer valor intermediário faria o
   navegador inventar um peso por cima do desenho. Título em 700, e a geometria
   da Saira pede tracking mais fechado nos tamanhos grandes. */
:root:not([data-area]) h1,
:root:not([data-area]) h2,
:root:not([data-area]) h3,
:root:not([data-area]) h4,
:root:not([data-area]) .hero-facts dd,
:root:not([data-area]) .manifesto-grid .big,
:root:not([data-area]) .menu-links a,
:root:not([data-area]) .legenda-t,
:root:not([data-area]) .mock-h,
:root:not([data-area]) .preco,
:root:not([data-area]) .faq summary,
:root:not([data-area]) .servico-valor b{ font-weight:700 }
:root:not([data-area]) h1{ letter-spacing:-.028em }
:root:not([data-area]) .hero-topo h1{ letter-spacing:-.004em;line-height:1.02 }
:root:not([data-area]) h2{ letter-spacing:-.024em }
:root:not([data-area]) h3,
:root:not([data-area]) h4{ letter-spacing:-.016em }
:root:not([data-area]) .hero-topo h1{ line-height:1.05 }
/* a Saira não tem itálico desenhado: o navegador inclinaria a letra por conta
   própria, e numa geométrica isso aparece. O destaque passa a ser só a cor. */
:root:not([data-area]) .gold.italic,
:root:not([data-area]) .cta-quote{ font-style:normal }

/* ---------- títulos com presença nas páginas de profissão ----------
   Aqui a fonte de título é a da área e tem negrito desenhado, então basta
   subir o peso: 700 nos títulos, 600 no que funciona como título secundário. */
:root[data-area] h1,
:root[data-area] h2,
:root[data-area] h3,
:root[data-area] h4,
:root[data-area] .legenda-t,
:root[data-area] .mock-h,
:root[data-area] .preco,
:root[data-area] .servico-valor b,
:root[data-area] .faq summary{ font-weight:700 }
:root[data-area] .hero-facts dd,
:root[data-area] .manifesto-grid .big,
:root[data-area] .menu-links a{ font-weight:600 }

/* ---------- rótulos técnicos na monoespaçada ---------- */
.eyebrow,.hero-tag,.hero-facts dt,.cta-meta,.vitrine-pe,.menu-pe,
.steps .step-n,.steps .when,.plano .tag,.plano .preco small,
.legenda-meta,.legenda-link,.laptop-barra b,
.prof-btn .conselho,.mock-chip,.mock-cols b,.mock-note,
.termo-n,.termo-data,.brand .word small{
  font-family:var(--ff-mono);
}

/* o link de compra dentro da lista de sistemas: mesmo lugar do "pedir", com
   o peso de uma ação de compra */
.servico-pedir--comprar{
  border-bottom-color:var(--accent);
  font-weight:600;
}

/* ===================================================================
   ATALHO DE COMPRA
   -------------------------------------------------------------------
   O caminho principal passou a ser "Aplicar para um projeto": a compra
   acontece depois de uma conversa. Quem já decidiu não precisa esperar,
   então o checkout continua a um toque — mas em segundo plano, para não
   competir com o convite nem apagar o sinal de seleção.
   =================================================================== */
.atalho{
  display:block;margin-top:12px;
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.09em;
  color:var(--fg-dim);text-decoration:none;
  border-bottom:1px solid transparent;align-self:flex-start;
  transition:color .24s,border-color .24s;
}
.atalho:hover,.atalho:focus-visible{ color:var(--accent);border-bottom-color:rgba(var(--ouro-rgb),.5) }
.plano .atalho{ margin-top:10px }
.plano .btn{ margin-top:auto }
.servico-pedir + .atalho{ margin-top:10px }

/* ===================================================================
   PLANO ÂNCORA
   -------------------------------------------------------------------
   O mais completo abre a grade ocupando as duas colunas: quem lê de
   cima para baixo encontra primeiro o maior valor, e os dois planos
   abaixo passam a ser lidos a partir dele. É a ancoragem do documento
   de marca, feita pelo layout e não por etiqueta de desconto.
   =================================================================== */
.plano--topo{
  grid-column:1 / -1;
  background:linear-gradient(150deg,var(--chumbo-a) 0%,var(--sup-card) 62%);
  box-shadow:inset 0 0 0 1px rgba(var(--ouro-rgb),.30);
}
.plano--topo:hover{background:linear-gradient(150deg,var(--chumbo-a) 0%,var(--sup-card) 62%)}
.plano--topo .tag span:last-child{color:var(--ouro)}
.plano--topo .preco{font-size:clamp(38px,4.6vw,54px)}
.plano-nota{
  margin:0;padding-left:14px;border-left:2px solid rgba(var(--ouro-rgb),.5);
  color:var(--fg-dim);font-size:14px;line-height:1.55;
}
@media (min-width:881px){
  .plano--topo ul,.plano--assinatura ul{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 28px;
  }
}
/* assinatura: linha inteira, embaixo dos planos de pagamento único. O fundo
   corre ao contrário do plano completo, para os dois não parecerem o mesmo card */
.plano--assinatura{
  grid-column:1 / -1;
  background:linear-gradient(330deg,var(--chumbo-a) 0%,var(--sup-card) 62%);
}
.plano--assinatura:hover{background:linear-gradient(330deg,var(--chumbo-a) 0%,var(--sup-card) 62%)}
.plano--assinatura .tag span:last-child{color:var(--ouro)}
.plano-nota a{color:var(--ouro);text-decoration:none;border-bottom:1px solid rgba(var(--ouro-rgb),.45)}
.plano-nota a:hover{border-color:var(--ouro)}

/* ===================================================================
   OUTROS PROJETOS
   -------------------------------------------------------------------
   A vitrine principal ficou só com profissionais de conselho, para a
   hero dizer uma coisa só. O que não se encaixa nessa frase continua
   visível aqui, em escala menor: prova de trabalho sem disputar a
   mensagem.
   =================================================================== */
.outros{
  margin-top:clamp(22px,3vw,34px);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);flex-wrap:wrap;
}
.outros-t{
  margin:0;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-mute);flex:none;
}
.outros-item{
  display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--fg-dim);
  font-size:14px;line-height:1.4;padding:7px 14px 7px 7px;
  border:1px solid var(--rule);border-radius:999px;background:var(--sup-card);
  transition:border-color .24s,color .24s;
}
.outros-item img{
  width:46px;height:29px;object-fit:cover;border-radius:4px;flex:none;
  filter:saturate(.75);transition:filter .24s;
}
.outros-item b{color:var(--branco);font-weight:600}
.outros-item svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.outros-item:hover,.outros-item:focus-visible{border-color:rgba(var(--ouro-rgb),.5);color:var(--ouro)}
.outros-item:hover img{filter:saturate(1)}
@media (max-width:560px){
  .outros-item{font-size:13px}
  .outros-item img{width:40px;height:25px}
}

/* ===================================================================
   AGENDA LIMITADA
   -------------------------------------------------------------------
   Escassez declarada é sinal de seleção, não de pressa: diz quantos
   projetos cabem no mês e por quê, sem contador regressivo nem
   "últimas vagas".
   =================================================================== */
.agenda{
  margin:18px 0 0;padding-left:16px;max-width:60ch;
  border-left:2px solid rgba(var(--ouro-rgb),.55);
  color:var(--fg-dim);font-size:15px;line-height:1.6;
}
.agenda b{color:var(--branco);font-weight:600}

/* ===================================================================
   DEPOIMENTOS
   -------------------------------------------------------------------
   Cada fala carrega nome, profissão e origem. A origem é o que sustenta
   a prova: uma avaliação pública no Google e uma mensagem particular não
   valem a mesma coisa, e o leitor merece saber qual é qual.

   O cartão não tem fundo próprio de propósito. A seção vive num painel
   claro, e --sup-card é escuro no tema escuro: um cartão com fundo fixo
   aqui deixava o texto na mesma cor do fundo. Herdando o painel, as duas
   versões continuam legíveis sem tabela de exceção.
   =================================================================== */
.depos{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(32px,4vw,48px);
}
@media (max-width:900px){.depos{grid-template-columns:1fr}}
.depo{
  margin:0;padding:clamp(24px,2.8vw,32px);
  border:1px solid var(--rule);border-radius:5px;
  display:flex;flex-direction:column;gap:20px;position:relative;overflow:hidden;
}
.depo::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad-ouro);
}
.depo blockquote{
  margin:0;font-size:clamp(16px,1.5vw,17.5px);line-height:1.62;color:var(--fg);
  text-wrap:pretty;
}
.depo blockquote::before{content:"“"}
.depo blockquote::after{content:"”"}
.depo figcaption{
  margin-top:auto;display:flex;flex-direction:column;gap:5px;
  border-top:1px solid var(--rule);padding-top:17px;
}
.depo figcaption b{font-size:15.5px;font-weight:700;color:var(--fg);letter-spacing:-.01em}
.depo figcaption span{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.09em;color:var(--fg-dim);
}
.depo-fonte{display:flex;align-items:center;gap:7px;margin-top:3px}
/* o seletor precisa vencer ".depo figcaption span", senão as estrelas
   herdam o cinza de apoio e deixam de ser sinal. */
/* o painel é claro nos dois temas, mas --accent muda com o tema e no escuro
   ele é um dourado mais claro, que sobre creme cai para 3,6:1. Aqui o tom é
   fixo: o mesmo dourado em qualquer tema, legível sobre o papel. */
.depo figcaption .estrelas{ color:#8A6533;font-size:13px;letter-spacing:.08em }

/* a origem vira link para a avaliação no Google: é o que torna o depoimento
   conferível. Sem API, sem script, sem dependência de rede na renderização. */
.depo-fonte{
  display:inline-flex;align-items:center;gap:7px;margin-top:3px;
  text-decoration:none;color:var(--fg-dim);
  border-bottom:1px solid transparent;align-self:flex-start;
  transition:color .24s,border-color .24s;
}
.depo-fonte svg{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.depo-fonte:hover,.depo-fonte:focus-visible{
  color:var(--accent);border-bottom-color:rgba(var(--ouro-rgb),.45);
}
.depo-fonte:hover .estrelas{color:var(--accent)}

/* nota agregada do perfil no Google. Número escrito à mão de propósito: sem
   API não há como ler ao vivo, e um número errado é pior que nenhum — por
   isso ele leva link, para quem quiser conferir na fonte. */
.depos-nota{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  padding:9px 16px;border:1px solid var(--rule);border-radius:999px;
  /* sem fundo próprio: a seção vive num painel claro e --sup-card é escuro
     no tema escuro. Herdando o painel, os dois temas ficam legíveis. */
  text-decoration:none;color:var(--fg-dim);
  transition:border-color .24s,color .24s;
}
.depos-nota b{
  font-family:var(--ff-display);font-size:20px;font-weight:700;
  color:var(--fg);letter-spacing:-.02em;line-height:1;
}
.depos-nota .estrelas{color:#8A6533;font-size:13px;letter-spacing:.08em}
.depos-nota span:not(.estrelas){font-family:var(--ff-mono);font-size:12px;letter-spacing:.07em}
.depos-nota svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.depos-nota:hover,.depos-nota:focus-visible{border-color:rgba(var(--ouro-rgb),.5);color:var(--accent)}

/* ============================================================
   MÉTODO ÁUREO — marca oficial e o compasso que traça o arco
   ------------------------------------------------------------
   O compasso é a imagem oficial, não um desenho de linha: ícone
   chapado ao lado de uma logo em relevo dourado são duas línguas.
   O compasso pousa com um assento leve, o arco corre debaixo dele
   da esquerda para a direita e o nome entra por último. O arco passa
   pelos dois pés: girar a foto em torno da ponta seca, como o
   instrumento faz de verdade, desenhava um traço quase vertical que
   lia como fio pendurado, não como risco. Um gesto só, sem laço.
   ============================================================ */
.metodo-marca{
  display:flex;align-items:flex-end;gap:16px;
  /* o arco desce abaixo dos pés do compasso: o respiro é dele */
  margin:0 0 22px;
}
.metodo-logo{
  width:clamp(132px,16vw,176px);height:auto;display:block;
}
.compasso-foto{
  position:relative;display:block;flex:none;
  height:clamp(50px,5.4vw,60px);aspect-ratio:139/220;
}
.compasso-foto img{
  position:absolute;inset:0;width:100%;height:100%;
  transform-origin:50% 99.5%;             /* entre os pés: é onde ele pousa */
}
.compasso-foto .c-traco{
  position:absolute;left:0;top:0;width:100%;height:auto;
  aspect-ratio:139/250;overflow:visible;
  fill:none;stroke:var(--ouro-escuro);stroke-linecap:round;
}
.compasso-foto .c-traco path{
  stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-dasharray:100;stroke-dashoffset:0;opacity:.9;
}

/* repouso: tudo visível. A animação parte daqui e volta para cá,
   então a página nunca fica dependendo do observador. */
@media (prefers-reduced-motion: no-preference){
  .metodo-marca:not(.pronto) .compasso-foto img{opacity:0;transform:translateY(-5px) rotate(-5deg)}
  .metodo-marca:not(.pronto) .c-traco path{stroke-dashoffset:100}
  .metodo-marca:not(.pronto) .metodo-logo{opacity:0;transform:translateY(6px)}

  .metodo-marca .compasso-foto img{
    transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.3,1);
  }
  .metodo-marca .c-traco path{
    transition:stroke-dashoffset .9s cubic-bezier(.4,.1,.3,1) .45s;
  }
  .metodo-marca .metodo-logo{
    transition:opacity .6s ease 1.05s,transform .6s cubic-bezier(.2,.7,.3,1) 1.05s;
  }
}

/* links dentro das respostas do FAQ */
.faq p a{color:var(--ouro);text-decoration:none;border-bottom:1px solid rgba(var(--ouro-rgb),.45)}
.faq p a:hover{border-color:var(--ouro)}

/* termos: links entre cláusulas e âncora que não fica escondida sob o cabeçalho fixo */
.termo p a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(var(--ouro-rgb),.45)}
.termo p a:hover{border-color:var(--accent)}
.termo{scroll-margin-top:96px}

/* a etiqueta do plano é um <p>: sem isto o limite de 64ch dos parágrafos (que,
   em 9,5px, dá uns 300px) prendia o segundo rótulo no meio dos cards largos */
.plano .tag{max-width:none}

/* assinatura: a entrada aparece como valor, não como nota de rodapé do preço */
.adesao{
  margin:-4px 0 0;max-width:none;align-self:flex-start;
  display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  padding:9px 14px;border:1px solid rgba(var(--ouro-rgb),.5);border-radius:3px;
  background:rgba(var(--ouro-rgb),.07);color:var(--fg);font-size:14.5px;line-height:1.35;
}
.adesao b{
  font-family:var(--ff-display);font-weight:700;font-size:clamp(22px,2.4vw,26px);
  letter-spacing:-.02em;color:var(--ouro);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.outros[hidden]{display:none}

/* Método Áureo, etapa E: a prévia mostrada num outdoor */
.etapa-previa{margin:18px 0 10px;max-width:560px}
.etapa-previa img{display:block;width:100%;height:auto;border-radius:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 0 0 1px rgba(var(--ouro-rgb),.18),0 26px 50px -22px rgba(40,28,12,.45)}
.etapa-previa figcaption{margin-top:9px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute)}

/* Black Friday 2026: aparece só no período (black-friday.js) */
.bf-faixa[hidden],.bf-bonus[hidden]{display:none}
.bf-faixa{margin:0 0 26px;padding:20px 24px;border:1px solid rgba(var(--ouro-rgb),.5);border-radius:4px;
  background:linear-gradient(135deg,rgba(var(--ouro-rgb),.10),rgba(var(--ouro-rgb),.03));max-width:none}
.bf-sobre{margin:0;font-family:var(--ff-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ouro)}
.bf-titulo{margin:8px 0 6px;font-family:var(--ff-display);font-weight:700;font-size:clamp(20px,2.6vw,26px);line-height:1.2;color:var(--branco);max-width:none}
.bf-texto{margin:0;font-size:14.5px;line-height:1.55;color:var(--fg-dim);max-width:78ch}
.bf-texto b{color:var(--branco);font-weight:600}
.bf-texto a{color:var(--ouro);text-decoration:none;border-bottom:1px solid rgba(var(--ouro-rgb),.45)}
.bf-bonus{margin:2px 0 0;max-width:none;display:flex;flex-direction:column;gap:3px;padding:10px 13px;
  border-left:2px solid var(--ouro);background:rgba(var(--ouro-rgb),.07);font-size:13.5px;line-height:1.4;color:var(--fg)}
.bf-bonus b{font-family:var(--ff-mono);font-weight:400;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro)}