/* =========================================================
   Caviar Criativo — LP Identidade Visual
   Sistema de design: navy + dourado, tipografia Gogh.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* cor
     Preto neutro, sem azul. O navy da marca (#121a2a) continua sendo a cor
     institucional da Caviar, mas nesta LP o fundo é ditado pela arte do hero,
     que é preto profundo — misturar navy criava uma dominante azulada que
     brigava com a imagem. Os cinzas são levemente quentes para conversar com
     o dourado em vez de puxarem para o frio. */
  --ink:      #000000;   /* medido na arte do hero: o fundo dela é preto puro.
                            Casar exatamente evita emenda visível na borda. */
  --ink-rgb:  0 0 0;     /* mesma cor em canais, para os scrims */
  --navy:     #131211;   /* superfície escura elevada (era o navy da marca) */
  --navy-up:  #1c1a18;   /* segundo nível de elevação */
  --paper:    #f7f4ef;   /* claro quente */
  --paper-up: #ffffff;
  /* Cinza claro neutro, só da seção "O que você recebe". Ela fica entre duas
     seções pretas, então não encosta nas outras seções creme — o tom mais frio
     não cria emenda. É o que dá contraste para o realce BRANCO do mouse. */
  --paper-gray: #eceae7;
  --gold:     #d59c4e;
  --gold-1:   #d9a638;
  --gold-2:   #c0824d;
  /* O dourado da marca rende só 2.2:1 sobre o papel claro. Este bronze é a
     mesma família, mas passa em AA (5.05:1) — usar SEMPRE que for texto
     dourado sobre fundo claro. */
  --gold-ink: #8f5e1e;
  --grad-gold: linear-gradient(100deg, var(--gold-1), var(--gold-2));

  /* texto — cinzas quentes; os anteriores eram azul-acinzentados e sobre
     preto neutro liam como azul */
  --on-dark:      #f2eee8;
  --on-dark-mut:  #ada7a0;
  --on-dark-dim:  #8d867e;
  --on-light:     #16130f;
  --on-light-mut: #5f584f;

  /* linhas */
  --line-dark:  rgba(213,156,78,.16);
  --line-light: rgba(22,19,15,.12);

  /* espaço — escala generosa (LP premium respira) */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem;
  --s5:4rem;  --s6:6rem; --s7:9rem;
  --sec: clamp(5rem, 10vw, 9rem);

  /* tipo */
  --f: 'Gogh', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Menor de propósito: a headline divide a tela com a arte, não a cobre.
     O "A" precisa continuar lendo no centro. */
  --t-hero: clamp(1.95rem, 3.3vw, 3.05rem);
  --t-h2:   clamp(2rem, 4.2vw, 3.4rem);
  --t-h3:   clamp(1.15rem, 1.8vw, 1.4rem);
  --t-body: clamp(1rem, 1.1vw, 1.0938rem);
  --t-lead: clamp(1.0625rem, 1.5vw, 1.25rem);

  --shell: 1240px;
  --ease: cubic-bezier(.16,1,.3,1);
  --dur: .45s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--on-dark);
  font-family:var(--f); font-weight:400; font-size:var(--t-body);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3{ margin:0; font-weight:700; line-height:1.05; letter-spacing:-.025em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
::selection{ background:var(--gold); color:var(--ink); }

/* foco visível — qualidade percebida também é isso */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.shell{ width:min(100% - 2.5rem, var(--shell)); margin-inline:auto; }
@media (min-width:900px){ .shell{ width:min(100% - 5rem, var(--shell)); } }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink); padding:.75rem 1.25rem;
  font-weight:700; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* =========================================================
   Sistema de revelação
   O conteúdo só é escondido se o JS estiver ativo (html.js).
   Sem JS, ou com movimento reduzido, tudo aparece normalmente.
   ========================================================= */
/* Estado inicial escondido — vale só com JS ativo. A fonte da verdade é o
   atributo [data-reveal], o mesmo que o JS consulta. */
.js [data-reveal]{ opacity:0; transform:translateY(26px); }

/* Split do título: palavras em inline-block, o <em> dourado como bloco inteiro.

   O padding-bottom é o conserto do "g" de "Ignorar" saindo cortado: com
   line-height apertado, a máscara (overflow:hidden) passava rente à linha de
   base e decepava os descendentes. A margem negativa devolve o espaço para o
   layout não mudar. Quem sobe o texto no JS compensa esse padding — ver a
   constante SPLIT_Y em main.js. */
.js .split-w{ display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.24em; margin-bottom:-.24em; }
.js .split-w > span{ display:inline-block; will-change:transform; }
/* .34em: a máscara precisa acomodar o padding de .24em que o <em> em gradiente
   carrega por dentro, mais folga (ver "Texto em gradiente" no fim da folha). */
.js .split-b{ display:block; overflow:hidden;
  padding-bottom:.34em; margin-bottom:-.34em; }

html.reduced-motion [data-reveal],
html.no-anim [data-reveal]{ opacity:1 !important; transform:none !important; }
html.reduced-motion .split-w > span, html.no-anim .split-w > span,
html.reduced-motion .split-b > em,  html.no-anim .split-b > em{ transform:none !important; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- Tipografia utilitária ---------- */
.eyebrow{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.75rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
}
/* alinhado à primeira linha, não ao centro do bloco (o texto quebra no mobile) */
/* Símbolo da Caviar no lugar do ponto. Feito por MÁSCARA, não por
   background-image: assim o `background` continua sendo a COR, e as regras
   que trocam para --gold-ink nas seções claras seguem valendo sozinhas. */
.eyebrow__dot{
  width:11px; height:11px; background:var(--grad-gold);
  -webkit-mask:url("/agencia-de-marketing/assets/img/favicon-caviar.svg") center/contain no-repeat;
          mask:url("/agencia-de-marketing/assets/img/favicon-caviar.svg") center/contain no-repeat;
  flex:none; margin-top:.2em;
}

.sec-head{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.sec-title{ font-size:var(--t-h2); margin-top:var(--s3); }
.sec-sub{ margin-top:var(--s3); font-size:var(--t-lead); color:var(--on-dark-mut); max-width:52ch; }
.on-light .sec-sub{ color:var(--on-light-mut); }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem; border-radius:2px; border:1px solid transparent;
  font-family:var(--f); font-weight:700; font-size:.9375rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; position:relative; isolation:isolate;
  transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform .2s var(--ease);
  min-height:48px;
}
.btn--lg{ padding:1.15rem 2rem; font-size:1rem; min-height:56px; }
.btn--sm{ padding:.7rem 1.1rem; font-size:.8125rem; min-height:44px; }

.btn--gold{ background:var(--grad-gold); color:#160f04; }
.btn--gold::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--on-dark); opacity:0; transition:opacity var(--dur) var(--ease);
}
.btn--gold:hover::after,.btn--gold:focus-visible::after{ opacity:1; }
.btn--gold:hover,.btn--gold:focus-visible{ color:var(--ink); }

.btn--ghost{ border-color:rgba(242,238,232,.28); color:var(--on-dark); }
.btn--ghost:hover,.btn--ghost:focus-visible{ border-color:var(--gold); color:var(--gold); }

/* --------- Neon button (line-art com feixe girando na borda) ---------
   Botão só de contorno (sem preenchimento). Um feixe dourado percorre a linha
   da borda continuamente (conic-gradient rotativa recortada num anel via mask).
   A borda é 2px (mais grossa que o "Ver projetos", de 1px) para destacar. */
@property --neon-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

.neon-btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.05rem 2.5rem; min-height:56px;
  border:2px solid rgba(213,156,78,.4); border-radius:2px;
  background:transparent; color:var(--on-dark);
  font-family:var(--f); font-weight:700; font-size:1rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.neon-btn:hover, .neon-btn:focus-visible{ color:var(--gold); border-color:rgba(213,156,78,.6); }

/* Anel com feixe: conic-gradient girando, recortada só na faixa da borda (2px)
   pela combinação de máscaras (mask-composite). ::before = feixe nítido;
   ::after = mesma coisa borrada, dando o brilho neon. */
.neon-btn::before,
.neon-btn::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--neon-angle),
    rgba(213,156,78,0) 0deg, rgba(213,156,78,0) 210deg,
    rgba(213,156,78,.9) 285deg, #ffe1a8 320deg, rgba(213,156,78,.9) 345deg,
    rgba(213,156,78,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:neon-orbit 3s linear infinite;
  pointer-events:none;
}
.neon-btn::after{ filter:blur(6px); opacity:.85; }   /* halo neon */
@keyframes neon-orbit{ to{ --neon-angle:360deg; } }

@media (prefers-reduced-motion:reduce){
  .neon-btn{ transition:none; }
  .neon-btn::before,.neon-btn::after{ animation:none; }
}

/* Variante para seções claras: line-art e feixe PRETOS. */
.neon-btn--dark{ border-color:rgba(22,19,15,.45); color:var(--on-light); }
.neon-btn--dark:hover,
.neon-btn--dark:focus-visible{ color:#000; border-color:rgba(22,19,15,.75); }
.neon-btn--dark::before,
.neon-btn--dark::after{
  background:conic-gradient(from var(--neon-angle),
    rgba(22,19,15,0) 0deg, rgba(22,19,15,0) 210deg,
    rgba(22,19,15,.85) 285deg, #000 320deg, rgba(22,19,15,.85) 345deg,
    rgba(22,19,15,0) 360deg);
}
.neon-btn--dark::after{ filter:blur(5px); opacity:.55; }

/* CTA centralizado sob a esteira de depoimentos */
.depo__cta{ margin-top:clamp(2.5rem,5vw,4rem); display:flex; justify-content:center; }
@media (max-width:640px){ .depo__cta .neon-btn{ width:100%; } }

.btn .ico{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur) var(--ease); }
.btn:hover .ico{ transform:translateX(4px); }
.btn:active{ transform:scale(.985); }

/* ---------- Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.1rem 0; transition:background-color .4s var(--ease), padding .4s var(--ease),
   box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
/* Véu no topo: o logo é centralizado e a arte tem o "A" no meio, então ele
   caía sobre o ponto mais claro da imagem (medido: luminância 255, branco
   puro). Só cobre a faixa do header e dissolve — a arte abaixo fica intacta. */
.header::before{
  content:''; position:absolute; inset:0 0 auto 0; height:220%; z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgb(var(--ink-rgb) / .96) 0%,
    rgb(var(--ink-rgb) / .86) 42%,
    rgb(var(--ink-rgb) / 0) 100%);
  transition:opacity .4s var(--ease);
}
/* já grudado o header tem fundo próprio — o véu vira redundante */
.header.is-stuck::before{ opacity:0; }
/* Três colunas com as laterais de mesma largura: assim o logo fica centralizado
   na PÁGINA, não no espaço que sobra ao lado do CTA. */
.header__inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; }
.header__cta{ grid-column:3; justify-self:end; }
/* área de toque de 44px mesmo com a imagem tendo 24px de altura */
.header__logo{ grid-column:2; justify-self:center; display:flex; align-items:center; min-height:44px; }
.header__logo img{ width:132px; height:auto; }
.header.is-stuck{
  background:rgb(var(--ink-rgb) / .82); backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  padding:.6rem 0; box-shadow:0 1px 0 var(--line-dark);
}
@media (max-width:720px){ .header__cta{ display:none; } .header__logo img{ width:112px; } }

/* =========================================================
   1. HERO
   ========================================================= */
/* A dobra precisa caber eyebrow + título + sub + CTA: esta é uma LP de tráfego,
   o botão nunca pode nascer abaixo da linha d'água. */
.hero{
  position:relative; overflow:hidden; background:var(--ink);
  padding:clamp(6.5rem,12vh,8.5rem) 0 clamp(3.5rem,7vw,5rem);
  min-height:min(88vh, 780px); display:flex; align-items:stretch;
}

/* Fundo full-bleed. Se a imagem faltar, sobra o --ink e o hero segue de pé.

   --hero-shift empurra o QUADRO da imagem para a direita. O "A" da arte está no
   centro dela — sem esse deslocamento ele cairia por baixo do fim do título.
   O deslocamento vai no container, nunca num transform da <img>: o GSAP anima
   o scale dela na abertura e um transform em CSS seria sobrescrito.
   Ajustar este valor é o único botão necessário para reenquadrar a arte.
   Em 0% a imagem ocupa a tela inteira, de borda a borda — é o padrão. */
:root{ --hero-shift:0%; }

.hero__bg{ position:absolute; inset:0; z-index:0; background:var(--ink); }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center center; }
@media (min-width:1000px){ .hero__bg{ left:var(--hero-shift); } }

/* Scrim por "poças" de sombra, não por faixa lateral.

   Um gradiente lateral escurecia a coluna esquerda inteira e apagava o braço
   que está no canto inferior esquerdo. Aqui a sombra existe só onde há texto:
   uma poça no alto à esquerda (chamada) e outra embaixo à direita (ação). O
   miolo — braço esquerdo, "A" e mão direita — fica limpo. */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* Poças justas de propósito. Quando eram largas, as duas se somavam no meio
       da tela e derrubavam o "A" para 36% do brilho — o oposto do objetivo.
       Apertadas, elas cobrem só o texto e devolvem o centro à arte. */
    radial-gradient(ellipse 30% 40% at 21% 26%,
      rgb(var(--ink-rgb) / .95) 0%, rgb(var(--ink-rgb) / .72) 48%, rgb(var(--ink-rgb) / 0) 100%),
    radial-gradient(ellipse 46% 56% at 76% 73%,
      rgb(var(--ink-rgb) / .95) 0%, rgb(var(--ink-rgb) / .80) 45%, rgb(var(--ink-rgb) / 0) 100%),
    /* Reforço pontual no canto superior esquerdo do bloco de ação, onde a
       primeira linha do subtítulo roça a perna do "A". Raio curto de propósito:
       morre antes de alcançar o centro. */
    radial-gradient(ellipse 18% 16% at 66% 62%,
      rgb(var(--ink-rgb) / .60) 0%, rgb(var(--ink-rgb) / 0) 100%),
    /* costura com a seção seguinte */
    linear-gradient(to top, var(--ink) 1%, rgb(var(--ink-rgb) / 0) 26%);
}

.hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr; }
@media (min-width:1000px){
  /* Diagonal: chamada na célula 1×1, ação na 2×2. As duas células vazias são
     onde a arte respira — o braço esquerdo embaixo, a mão direita em cima. */
  .hero__inner{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    /* Ancora a chamada no topo e a ação no rodapé do hero. Medido na arte: a
       faixa escura segura vai até y50% à esquerda e começa em y60% à direita —
       encostar nos extremos mantém os dois blocos fora das mãos. */
    align-content:space-between;
    row-gap:clamp(2rem,5vh,4rem);
  }
  .hero__lead { grid-column:1; grid-row:1; }
  /* 32rem cabe os dois botões lado a lado (503px + gap) sem a coluna invadir
     o "A", que termina em ~57% da largura. */
  .hero__aside{ grid-column:2; grid-row:2; justify-self:end; max-width:32rem; }
  .hero__aside .btn--lg{ padding-inline:1.75rem; }
}

.hero__title{
  font-size:var(--t-hero); font-weight:700; margin-top:var(--s3);
  /* 1.12 e não o 1.05 herdado do h1: com quatro linhas curtas o respiro ajuda,
     e dá folga para os descendentes dentro da máscara do split. */
  line-height:1.12; letter-spacing:-.035em; max-width:24ch;
}
.hero__title em{
  font-style:normal; display:block;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* ver "Texto em gradiente" no fim da folha — o padding não é decorativo */
  padding-bottom:.24em; margin-bottom:-.24em;
}
/* No mobile o subtítulo empilha sob o título e precisa do respiro; no desktop
   ele vive na própria célula da grade e o row-gap já resolve. */
.hero__sub{ margin-top:var(--s3); font-size:var(--t-lead); color:var(--on-dark-mut); max-width:44ch; }
@media (min-width:1000px){ .hero__aside .hero__sub{ margin-top:0; } }
.hero__actions{ margin-top:clamp(1.5rem,2.5vw,2rem); display:flex; flex-wrap:wrap; gap:var(--s2); }
.hero__micro{ margin-top:var(--s3); font-size:.8125rem; color:var(--on-dark-dim); letter-spacing:.02em; }
.hero__micro span{ color:var(--gold); margin:0 .2rem; }

/* ---------- Hero: mobile ---------- */
/* Sem coluna lateral aqui: a imagem vira atmosfera atrás do texto. O scrim fica
   quase chapado porque texto sobre foto no celular é o pior caso de contraste. */
@media (max-width:999px){
  /* No celular a arte vira uma FAIXA no topo, não um fundo atrás do texto.

     Duas razões. Primeira: o texto ocupava de 13% a 92% da altura do hero, então
     clarear o scrim "por baixo dele" reprovava contraste em qualquer ajuste —
     a única saída real era separar os dois. Segunda: num recorte de 375px de
     largura o object-fit:cover mostrava só ~25% da largura da arte, e como não
     sobra altura para deslocar, o que caía na janela era o risco dourado, não
     o "A". Numa faixa de 240px o cover mostra ~87% da largura: as duas mãos e
     o "A" inteiro.

     O texto passa a viver em preto puro, sem scrim nenhum.

     --hero-band controla a altura dessa faixa: quanto maior, mais da arte
     (as duas mãos e o "A") aparece, e mais o conteúdo desce junto — o
     padding-top do hero é derivado dela para os dois andarem sempre juntos. */
  .hero{ --hero-band:clamp(320px, 52vw, 440px);
         padding-top:calc(var(--hero-band) + 1.5rem); min-height:auto; }
  .hero__inner{ gap:0; }
  .hero__actions{ gap:var(--s1); }
  .hero__actions .btn{ width:100%; padding:.8rem 1.4rem; min-height:48px; font-size:.875rem; }
  .hero__actions .neon-btn{ width:100%; padding:.8rem 1.4rem; min-height:48px; font-size:.875rem; }

  .hero__bg{ inset:0 0 auto 0; height:var(--hero-band); }
  .hero__bg img{ height:100%; object-position:center center; }

  /* só dissolve a borda de baixo da faixa no preto da página */
  .hero__scrim{
    inset:0 0 auto 0; height:var(--hero-band);
    background:linear-gradient(to bottom,
      rgb(var(--ink-rgb) / 0)   0%,
      rgb(var(--ink-rgb) / 0)  62%,
      rgb(var(--ink-rgb) / .55) 86%,
      var(--ink) 100%);
  }
}

/* =========================================================
   2. BARRA DE PROVA
   ========================================================= */
.proof{ border-block:1px solid var(--line-dark); background:rgba(213,156,78,.03); }
.proof__grid{ display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:820px){ .proof__grid{ grid-template-columns:repeat(4,1fr); } }
.proof__item{
  padding:clamp(1.75rem,3.5vw,2.75rem) var(--s3); text-align:center;
  border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
}
.proof__item:nth-child(2n){ border-right:0; }
@media (min-width:820px){
  .proof__item{ border-bottom:0; }
  .proof__item:nth-child(2n){ border-right:1px solid var(--line-dark); }
  .proof__item:last-child{ border-right:0; }
}
.proof__num{
  display:block; font-size:clamp(2.1rem,4vw,3rem); font-weight:800;
  letter-spacing:-.04em; line-height:1;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.proof__num i{ font-style:normal; }
.proof__lbl{ display:block; margin-top:.7rem; font-size:.8125rem; color:var(--on-dark-mut); letter-spacing:.02em; }

/* =========================================================
   3. SETE SEGUNDOS
   ========================================================= */
.seven{ padding:var(--sec) 0; position:relative; overflow:hidden; }
.seven__stage{ max-width:70ch; margin-inline:auto; text-align:center; }
.seven__kicker{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.seven__count{
  font-size:clamp(7rem,26vw,20rem); font-weight:800; line-height:.82; letter-spacing:-.06em;
  margin:var(--s3) 0 var(--s4);
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.seven__count i{ font-style:normal; font-size:.32em; letter-spacing:-.02em; }
.seven__h{ font-size:var(--t-h2); max-width:22ch; margin-inline:auto; }
.seven__body{ margin-top:var(--s4); }
.seven__body p{ font-size:var(--t-lead); color:var(--on-dark-mut); max-width:54ch; margin-inline:auto; }
.seven__cta{
  margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px solid var(--line-dark);
  display:flex; justify-content:center;
}
.seven__cta .btn{ max-width:100%; }

/* =========================================================
   Seções claras
   ========================================================= */
.on-light,.incluso,.proj,.depo,.faq{ background:var(--paper); color:var(--on-light); }
.incluso .sec-sub,.proj .sec-sub,.depo .sec-sub,.faq .sec-sub{ color:var(--on-light-mut); }


/* ---------- 4. Incluído ---------- */
/* Fundo cinza + realce branco que segue o mouse. O --mx/--my vem do JS
   (initMouseGlow), atualizado dentro de um requestAnimationFrame. */
.incluso{
  padding:var(--sec) 0; background:var(--paper-gray);
  position:relative; isolation:isolate;
  --mx:50%; --my:50%;          /* fallback: sem JS o brilho nem aparece */
}
/* z-index:-1 pinta acima do fundo da seção e abaixo do texto — por isso o
   isolation:isolate no pai, que impede o -1 de escapar do contexto. */
.incluso::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(560px circle at var(--mx) var(--my),
    #fff 0%, rgba(255,255,255,.55) 38%, transparent 68%);
  opacity:0; transition:opacity .5s var(--ease);
}
.incluso.is-hovered::before{ opacity:1; }

.incluso__list{ display:grid; gap:0; border-top:1px solid var(--line-light); }
/* --pad-x sangra a linha para fora do shell: o realce branco ganha respiro
   lateral em vez de cortar rente ao texto. */
.incluso__item{
  --pad-x:1.25rem;
  display:grid; gap:.5rem var(--s4);
  padding:clamp(1.75rem,3.5vw,2.5rem) var(--pad-x);
  margin-inline:calc(var(--pad-x) * -1);
  border-bottom:1px solid var(--line-light);
  grid-template-columns:auto 1fr;
  transition:background-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
/* a linha sob o cursor sobe para branco puro e ganha um leve relevo */
.incluso__item:hover{
  background:var(--paper-up);
  box-shadow:0 1px 2px rgba(22,19,15,.04), 0 8px 26px rgba(22,19,15,.07);
}
@media (min-width:860px){ .incluso__item{ grid-template-columns:5rem 24rem 1fr; align-items:baseline; } }
.incluso__n{
  font-size:.875rem; font-weight:700; letter-spacing:.06em; color:var(--gold-2);
  font-variant-numeric:tabular-nums;
}
.incluso__item h3{ font-size:var(--t-h3); letter-spacing:-.015em; }
.incluso__item p{ color:var(--on-light-mut); grid-column:2/-1; }
@media (min-width:860px){ .incluso__item p{ grid-column:auto; max-width:44ch; } }

/* O pull quote é também o CTA do meio da página: o argumento ("solução de
   marca, não opções de logo") entrega direto no convite. */
.pull{
  margin-top:clamp(3rem,6vw,4.5rem); padding:clamp(2rem,5vw,3.25rem);
  background:var(--navy); color:var(--on-dark); border-left:3px solid var(--gold);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(1.5rem,3.5vw,2.25rem);
}
/* brilho discreto atrás do CTA, alinhado ao dourado da marca */
.pull::after{
  content:''; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(560px,85%); aspect-ratio:1; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(213,156,78,.12), transparent 68%);
}
.pull > *{ position:relative; z-index:1; }

.pull__q{ font-size:clamp(1.2rem,2.4vw,1.65rem); font-weight:500; line-height:1.35;
  letter-spacing:-.02em; max-width:32ch; margin-inline:auto; }
.pull s{ color:var(--on-dark-dim); text-decoration-color:var(--gold); text-decoration-thickness:2px; }
.pull strong{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
  color:transparent; font-weight:700; }

.pull__cta{ display:grid; gap:var(--s3); justify-items:center; width:100%; }
.pull__cta .btn{ width:100%; padding:.9rem 1.75rem; min-height:52px; font-size:.95rem; }
@media (min-width:560px){ .pull__cta .btn{ width:auto; } }
.pull__micro{ font-size:.8125rem; color:var(--on-dark-dim); }
.pull__micro span{ color:var(--gold); margin:0 .2rem; }

/* ---------- 5. Método ---------- */
.metodo{ background:var(--ink); color:var(--on-dark); padding:var(--sec) 0; }
.metodo__track{ position:relative; }
.metodo__line{
  position:absolute; left:0; right:0; top:1.15rem; height:1px;
  background:var(--line-dark); display:none;
}
@media (min-width:900px){ .metodo__line{ display:block; } }
.metodo__prog{ display:block; height:100%; width:0; background:var(--grad-gold); transform-origin:left; }
.metodo__steps{ display:grid; gap:var(--s5); }
@media (min-width:900px){ .metodo__steps{ grid-template-columns:repeat(4,1fr); gap:var(--s4); } }
.step{ position:relative; padding-top:var(--s4); }
.step::before{
  content:''; position:absolute; top:calc(1.15rem - 4px); left:0;
  width:9px; height:9px; border-radius:50%; background:var(--ink);
  border:1px solid var(--gold); display:none;
}
@media (min-width:900px){ .step::before{ display:block; } .step{ padding-top:3rem; } }
.step__n{ font-size:.8125rem; font-weight:700; letter-spacing:.1em; color:var(--gold);
  font-variant-numeric:tabular-nums; }
.step__t{ font-size:var(--t-h3); margin:.6rem 0 .9rem; }
.step p{ color:var(--on-dark-mut); font-size:.9375rem; }

/* ---------- 6. Projetos ---------- */
.proj{ padding:var(--sec) 0; }
/* Galeria só de imagens: gap apertado de 10px, todas do mesmo tamanho (cada
   card = a media 4:3, colunas iguais). 6 tiles fecham o 3×2 sem sobra. */
.proj__grid{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:720px){ .proj__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .proj__grid{ grid-template-columns:repeat(3,1fr); } }
.card{ position:relative; overflow:hidden;
  perspective:1000px;   /* dá profundidade ao tilt 3D do .card__media */
}

/* --------- Spotlight nos cards de projeto ---------
   Adaptação do componente ImageSpotlight (React) para vanilla, com uma
   inversão deliberada: a referência borra a imagem POR PADRÃO e só revela um
   círculo no hover. Aqui o padrão é NÍTIDO — um portfólio precisa mostrar o
   trabalho a quem escaneia a página. O efeito (blur + escurecer, exceto sob o
   spotlight) engata só no hover. No toque, nunca engata: fica sempre nítido.

   4:3 é a proporção nativa das artes — qualquer outro recorte deceparia o
   logotipo, que está centralizado em todas elas. */
.card__media{
  position:relative; overflow:hidden; aspect-ratio:4/3; background:#e7e2da;
  --mx:50%; --my:50%;        /* posição do spotlight (JS atualiza; 50% = fallback) */
  --spot:190px;              /* raio do feixe */
  --rx:0deg; --ry:0deg;      /* tilt (JS; 0 = fallback) */
  transition:transform .3s var(--ease);
  /* Sem transform no estado ocioso de propósito: um transform a 0° ainda cria
     uma camada de composição — 5 cards à toa. O tilt entra só no hover. */
}
@media (hover:hover) and (pointer:fine){
  .card:hover .card__media{ transform:rotateX(var(--rx)) rotateY(var(--ry)); }
}
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Camada borrada+escura por cima da nítida. Fica invisível até o hover; então
   aparece mascarada com um buraco radial no cursor — onde a nítida vaza. */
.card__img--blur{
  z-index:2; opacity:0; filter:blur(7px) brightness(.5);
  transform:scale(1.06);   /* o blur encolhe as bordas; a escala cobre a folga */
  transition:opacity .4s var(--ease);
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),
    transparent 0, transparent calc(var(--spot) * .5), #000 var(--spot));
          mask-image:radial-gradient(circle at var(--mx) var(--my),
    transparent 0, transparent calc(var(--spot) * .5), #000 var(--spot));
}

/* anel sutil marcando o feixe — reforça a metáfora do "spotlight" */
.card__ring{
  position:absolute; z-index:3; top:var(--my); left:var(--mx);
  width:calc(var(--spot) * .9); aspect-ratio:1; translate:-50% -50%;
  border-radius:50%; pointer-events:none; opacity:0;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 0 40px 8px rgba(255,255,255,.12) inset;
  transition:opacity .4s var(--ease);
}

/* o efeito inteiro só existe onde há mouse de verdade */
@media (hover:hover) and (pointer:fine){
  .card:hover .card__img--blur{ opacity:1; }
  .card:hover .card__ring{ opacity:1; }
}
/* respeita quem pediu menos movimento: sem tilt (o spotlight fica, é conduzido
   pelo usuário, não é movimento autônomo) */
@media (prefers-reduced-motion:reduce){
  .card__media{ transform:none; transition:none; }
}

/* --------- Card com galeria: botão de ampliar --------- */
.card--zoom{ cursor:pointer; }
.card__expand{
  position:absolute; inset:0; z-index:4;
  display:grid; place-items:center;
  border:0; background:transparent; cursor:pointer; color:#fff;
  opacity:0; transition:opacity .35s var(--ease);
}
.card__expand svg{
  width:56px; height:56px; padding:16px; border-radius:999px;
  background:rgba(12,17,28,.55); backdrop-filter:blur(4px);
  stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round;
  transform:scale(.88); transition:transform .35s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .card--zoom:hover .card__expand{ opacity:1; }
  .card--zoom:hover .card__expand svg{ transform:scale(1); }
}
.card__expand:focus-visible{ opacity:1; outline:none; }
.card__expand:focus-visible svg{ transform:scale(1); box-shadow:0 0 0 3px var(--gold); }
/* No toque não há hover: mostra uma dica discreta e permanente. */
@media (hover:none){
  .card__expand{ opacity:1; align-items:end; justify-items:end; padding:.7rem; }
  .card__expand svg{ width:40px; height:40px; padding:11px; background:rgba(12,17,28,.5); }
}

/* --------- Lightbox / carrossel --------- */
body.lb-lock{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,2.5rem);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.lightbox__backdrop{
  position:absolute; inset:0; background:rgba(8,10,16,.88); backdrop-filter:blur(6px);
}
.lightbox__dialog{
  position:relative; z-index:1;
  width:min(1000px,100%);
  display:flex; flex-direction:column; align-items:center; gap:clamp(1rem,2.5vw,1.5rem);
}
.lightbox__stage{ position:relative; width:100%; }
.lightbox__img{
  display:block; width:100%; height:auto; max-height:78vh; object-fit:contain;
  border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateY(10px) scale(.985); opacity:.6;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.lightbox.is-open .lightbox__img{ transform:none; opacity:1; }

.lightbox__close{
  position:absolute; z-index:2;
  top:clamp(.75rem,2.5vw,1.5rem); right:clamp(.75rem,2.5vw,1.5rem);
  width:46px; height:46px; border-radius:999px; cursor:pointer;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.24); background:rgba(20,25,35,.6); color:#fff;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.lightbox__close:hover{ background:rgba(20,25,35,.95); border-color:var(--gold); color:var(--gold); }
.lightbox__close svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }

.lightbox__nav{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:48px; height:48px; border-radius:999px; cursor:pointer;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.22); background:rgba(20,25,35,.55); color:#fff;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.lightbox__nav:hover{ background:rgba(20,25,35,.95); border-color:var(--gold); color:var(--gold); }
.lightbox__nav svg{ width:24px; height:24px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.lightbox__nav--prev{ left:clamp(.5rem,2vw,1rem); }
.lightbox__nav--next{ right:clamp(.5rem,2vw,1rem); }

.lightbox__foot{ display:flex; align-items:center; gap:1.25rem; }
.lightbox__dots{ display:flex; gap:.55rem; }
.lightbox__dot{
  width:9px; height:9px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.3); transition:background .25s ease, transform .25s ease;
}
.lightbox__dot.is-active{ background:var(--gold); transform:scale(1.2); }
.lightbox__count{ color:rgba(255,255,255,.72); font-size:.85rem; letter-spacing:.05em; }

@media (max-width:560px){
  .lightbox__nav{ width:42px; height:42px; }
  .lightbox__img{ max-height:62vh; }
}
@media (prefers-reduced-motion:reduce){
  .lightbox, .lightbox__img{ transition:opacity .2s ease; }
  .lightbox__img{ transform:none; }
}

/* --------- Galeria 3D de marcas (parallax "desdobrando" no scroll) ---------
   Adaptação vanilla do componente React "3d-parallax-unfurling-gallery".
   A seção é alta (dá curso de scroll); o palco fica preso (sticky) e o JS
   (GSAP ScrollTrigger) inclina a grade em 3D e desloca cada coluna em ritmos
   diferentes. Sem JS, a grade aparece estática e legível — degrada com graça. */
/* Altura só como fallback sem JS. Com GSAP, o ScrollTrigger faz o pin (via
   position:fixed) e cria o espaço de scroll — imune ao overflow-x:hidden do
   body, que quebraria um position:sticky de CSS. */
.g3d{ position:relative; background:#050505; }
.g3d__pin{
  height:100vh; overflow:hidden;
  display:grid; place-items:center; background:#050505;
}
.g3d__scene{
  position:absolute; inset:0; display:flex; justify-content:center; align-items:center;
  perspective:1000px;
}
/* Sem altura fixa: a grade tem a altura do CONTEÚDO das colunas (7 tiles cada).
   Como esse conteúdo é mais alto que o viewport, ao centralizar no palco ele
   transborda topo e base — preenchendo a tela sem faixas vazias. Uma altura
   fixa grande faria o oposto: centralizaria um bloco menor deixando margem. */
.g3d__grid{
  display:flex; flex:none; gap:clamp(.75rem,1.6vw,1.25rem);
  width:112vw; justify-content:center; align-items:center;
  transform-style:preserve-3d; will-change:transform; backface-visibility:hidden;
}
.g3d__col{
  flex:1 1 0; display:flex; flex-direction:column; gap:clamp(1rem,2.5vw,1.5rem);
  will-change:transform;
}
.g3d__tile{
  position:relative; width:100%; aspect-ratio:1; flex:none; overflow:hidden;
  border-radius:10px; background:#111; box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.g3d__tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:.9; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .g3d__tile:hover img{ opacity:1; transform:scale(1.03); }
}
/* Vinheta: escurece as quatro bordas para o miolo "brilhar" (equivale ao
   inset-shadow duplo do componente original). */
.g3d__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:
    inset 0 120px 150px -50px #050505, inset 0 -120px 150px -50px #050505,
    inset 90px 0 120px -70px #050505, inset -90px 0 120px -70px #050505;
}
/* Título central sobre a grade, no estilo dos títulos da página. Cada linha é
   revelada pelo scroll (JS). Sem JS/reduced-motion, ficam visíveis por padrão. */
.g3d__title{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.08em; padding:1.5rem; text-align:center;
  /* caixa alta em Gogh Book, como as demais headlines */
  font-size:clamp(1.4rem, 3.6vw, 3rem); font-weight:400;
  text-transform:uppercase; letter-spacing:.03em; color:var(--on-dark);
  /* drop-shadow (e não text-shadow): renderiza a sombra ATRÁS do texto e
     funciona também no "+ 500", que é preenchido por gradiente recortado
     (background-clip:text) — onde text-shadow falha. */
  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.7))
    drop-shadow(0 8px 26px rgba(0,0,0,.6));
}
.g3d__line{ display:block; }
.g3d__line em{
  /* dourado mais claro e luminoso para leitura sobre a parede de logos */
  font-style:normal;
  background:linear-gradient(180deg,#f8d693,#e0a54c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (max-width:640px){
  /* colunas mais largas => tiles maiores => conteúdo mais alto, garantindo
     cobertura vertical na tela estreita do celular. */
  .g3d__grid{ width:230vw; }
}

/* Card de conversão: fecha a grade em 6 e coloca um CTA no meio da página,
   onde a prova visual acabou de ser entregue. */
.card--cta{
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) var(--s3); background:var(--navy); color:var(--on-dark);
  text-decoration:none; min-height:100%;
  transition:background-color var(--dur) var(--ease);
}
.card--cta:hover{ background:var(--navy-up); }
.card--cta__n{ font-size:.8125rem; font-weight:700; letter-spacing:.1em; color:var(--gold);
  font-variant-numeric:tabular-nums; }
.card--cta__t{ font-size:clamp(1.25rem,2vw,1.6rem); font-weight:700; line-height:1.2;
  letter-spacing:-.02em; max-width:14ch; }
.card--cta__l{ display:inline-flex; align-items:center; gap:.55rem; font-weight:700;
  font-size:.9375rem; color:var(--gold); }
.card--cta__l .ico{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur) var(--ease); }
.card--cta:hover .ico{ transform:translateX(4px); }

/* ---------- 7. Depoimentos ---------- */
.depo{ padding:var(--sec) 0; overflow:hidden; }

/* --------- Depoimentos: marquee (esteira) de avaliações do Google ---------
   Adaptação vanilla do componente React "testimonials-with-marquee". A esteira
   é CSS puro: dois conjuntos idênticos de cards e translateX de 0 a -50% em
   loop, então a emenda é invisível. A margem-direita (em vez de gap) mantém os
   dois conjuntos com a MESMA largura, condição para o -50% fechar certinho.
   Pausa no hover; em prefers-reduced-motion vira rolagem manual. */
.marquee{
  position:relative; width:100%; overflow:hidden;
  margin-top:clamp(2rem,4vw,3rem); padding-block:.5rem;
  --mq-gap:1.25rem;
}
.marquee__track{ display:flex; align-items:flex-start; width:max-content; animation:mq-scroll 60s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state:paused; }
@keyframes mq-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.tcard{
  flex:none; width:clamp(280px,78vw,340px); margin-right:var(--mq-gap);
  display:flex; flex-direction:column; gap:1rem;
  padding:clamp(1.5rem,2.5vw,1.75rem);
  background:var(--paper-up); border-top:2px solid var(--gold); border-radius:12px;
  box-shadow:0 12px 30px rgba(22,19,15,.06);
}
.tcard__head{ display:flex; align-items:center; gap:.75rem; }
.tcard__avatar{
  position:relative; overflow:hidden;
  width:46px; height:46px; flex:none; border-radius:999px;
  background:var(--grad-gold); color:#160f04;
}
/* iniciais como fallback: ficam atrás; se a foto falhar, aparecem */
.tcard__avatar::before{
  content:attr(data-initials); position:absolute; inset:0;
  display:grid; place-items:center; font-weight:700; font-size:.95rem; letter-spacing:.02em;
}
.tcard__avatar img{
  position:relative; width:100%; height:100%; object-fit:cover; border-radius:inherit;
}
.tcard__id{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.tcard__name{ font-size:.95rem; font-weight:700; color:var(--on-light); }
.tcard__meta{ display:flex; align-items:center; gap:.45rem;
  font-size:.78rem; color:var(--on-light-mut); }
.tcard__stars{ color:var(--gold); font-size:.82rem; letter-spacing:.06em; }
.tcard__text{ margin:0; }
.tcard__text p{ margin:0; font-size:.95rem; line-height:1.55; color:var(--on-light); }

/* Névoa nas laterais para os cards "surgirem/sumirem" no fundo claro. */
.marquee__edge{ position:absolute; top:0; bottom:0; width:12%; z-index:2; pointer-events:none; }
.marquee__edge--l{ left:0;  background:linear-gradient(to right, var(--paper), transparent); }
.marquee__edge--r{ right:0; background:linear-gradient(to left,  var(--paper), transparent); }

@media (max-width:640px){ .marquee__edge{ width:9%; } }
@media (prefers-reduced-motion:reduce){
  .marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .marquee__track{ animation:none; }
  .marquee__edge{ display:none; }
}

/* ---------- 8. Time ---------- */
/* --------- Time: foto de fundo + título central + cards na base ---------
   A foto (1920x1080, os sócios ao centro) cobre a seção via object-fit:cover,
   então adapta a qualquer tela sem distorcer. Um scrim escuro no topo e na
   base garante contraste do título e dos cards em qualquer recorte. */
.time{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; background:var(--ink); color:var(--on-dark);
  min-height:clamp(820px, calc(92vh + 200px), 1080px);
}
.time__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:50% 24%;
}
.time__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,
    rgba(5,5,5,.66), rgba(5,5,5,.22) 34%, rgba(5,5,5,.10) 52%, rgba(5,5,5,.68) 86%);
}
.time__inner{
  /* sem width:100%: deixaria de valer a largura limitada do .shell (mesma
     especificidade, declarada depois) e os cards colariam nas bordas. */
  display:flex; flex-direction:column;
  padding-top:calc(clamp(3rem,8vh,5rem) + 100px);
  padding-bottom:calc(clamp(1.5rem,5vh,3rem) + 100px);
}
.time__head{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:var(--s3);
  /* margin-top:auto empurra o título para BAIXO, ancorado logo acima dos
     cards (que têm gap fixo): ele cai sobre a área escura das roupas e
     deixa os rostos livres, em qualquer tela. */
  margin-top:auto;
}
.time__title{
  /* 19ch foi calibrado para caixa baixa; em caixa alta cada linha ocupa mais
     e o título quebrava em 4. Largura por linha + corpo menor = 2 linhas. */
  font-size:clamp(1.5rem, 3.1vw, 2.5rem); max-width:31ch;
  /* mobile: a linha mais longa ("com Especialistas de verdade") precisa de
     ~410px a 24px; em 375px de tela só há 335px, então o corpo escala por vw
     para manter as DUAS linhas em qualquer largura. */
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.65)) drop-shadow(0 8px 26px rgba(0,0,0,.5));
}
.time__cards{
  /* gap FIXO até o título acima (o auto fica no head): quanto menor, mais
     baixo o título assenta, longe dos rostos */
  margin-top:clamp(1.5rem,4vh,2.5rem);
  display:grid; grid-template-columns:1fr; gap:clamp(1rem,2.5vw,1.5rem);
}
@media (min-width:900px){
  /* vão central largo deixa a Morgana e o Victor visíveis entre os cards */
  .time__cards{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                column-gap:clamp(4rem,18vw,20rem); }
}
/* Mobile: numa seção alta e estreita, o cover mantém os rostos sempre na
   mesma fração da altura e os cards empilhados são altos, então o título
   nunca caberia abaixo dos rostos. Solução: a foto vira uma FAIXA no topo
   (título ancorado na base dela, já abaixo dos rostos) e os cards fluem por
   baixo, sobre o fundo escuro da seção. */
@media (max-width:899px){
  .time{ min-height:0; }
  .time__bg{ inset:0 0 auto 0; height:540px; }
  .time__scrim{
    inset:0 0 auto 0; height:540px;
    background:linear-gradient(to bottom,
      rgba(5,5,5,.55), rgba(5,5,5,.06) 42%, rgba(0,0,0,.88) 90%, var(--ink));
  }
  .time__inner{ padding-top:0; }
  .time__head{ margin-top:0; min-height:540px; justify-content:flex-end;
               padding-bottom:1.25rem; }
  .time__cards{ margin-top:1.75rem; }
}

.tperson{
  padding:clamp(1.25rem,2.5vw,1.75rem);
  background:rgba(10,12,16,.62);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-top:2px solid var(--gold); border-radius:4px;
}
.tperson h3{ font-size:1.125rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; }
.tperson h3 span{ font-size:.6875rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); }
.tperson p{ margin-top:.7rem; font-size:.9375rem; line-height:1.6; color:var(--on-dark-mut); }

/* ---------- 9. Para quem ---------- */
.fit{ background:var(--navy); padding:var(--sec) 0; }
.fit__grid{ display:grid; gap:var(--s5); grid-template-columns:1fr; }
@media (min-width:860px){ .fit__grid{ grid-template-columns:repeat(2,1fr); gap:var(--s6); } }
.fit__col h2{ font-size:clamp(1.5rem,2.6vw,2rem); padding-bottom:var(--s3);
  border-bottom:1px solid var(--line-dark); }
.fit__col ul{ margin-top:var(--s4); display:grid; gap:var(--s3); }
.fit__col li{ position:relative; padding-left:2rem; color:var(--on-dark-mut); }
.fit__col li::before{
  position:absolute; left:0; top:.1rem; font-weight:700; font-size:1rem;
}
.fit__col--yes li::before{ content:'+'; color:var(--gold); }
.fit__col--no li::before{ content:'–'; color:var(--on-dark-dim); }
.fit__col--no h2{ color:var(--on-dark-mut); }

/* ---------- 10. FAQ ---------- */
.faq{ padding:var(--sec) 0; }
.faq__list{ border-top:1px solid var(--line-light); }
.qa{ border-bottom:1px solid var(--line-light); }
.qa summary{
  list-style:none; cursor:pointer; padding:clamp(1.25rem,2.5vw,1.75rem) 0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  font-size:clamp(1.0625rem,1.8vw,1.25rem); font-weight:700; letter-spacing:-.015em;
  transition:color var(--dur) var(--ease); min-height:56px;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--gold-2); }
.qa summary i{
  flex:none; width:20px; height:20px; position:relative;
}
.qa summary i::before,.qa summary i::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:1.5px; background:var(--gold);
  transition:transform .35s var(--ease);
}
.qa summary i::after{ transform:rotate(90deg); }
.qa[open] summary i::after{ transform:rotate(0); }
.qa[open] summary{ color:var(--gold-2); }
.qa__a{ padding-bottom:clamp(1.25rem,2.5vw,1.75rem); }
.qa__a p{ color:var(--on-light-mut); max-width:68ch; }

/* ---------- 11. CTA final ---------- */
.final{ position:relative; padding:var(--sec) 0; overflow:hidden; text-align:center; }
.final__glow{
  position:absolute; left:50%; top:40%; translate:-50% -50%;
  width:min(1100px,120vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(213,156,78,.15), transparent 60%);
  pointer-events:none;
}
.final__inner{ position:relative; z-index:1; }
.final__h{ font-size:var(--t-h2); max-width:20ch; margin-inline:auto; }
.final__h em{ font-style:normal; background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.final__p{ margin-top:var(--s4); font-size:var(--t-lead); color:var(--on-dark-mut);
  max-width:56ch; margin-inline:auto; }
.final__actions{ margin-top:clamp(2rem,4vw,2.75rem); }
.final__micro{ margin-top:var(--s4); font-size:.8125rem; color:var(--on-dark-dim); }
.final__micro span{ color:var(--gold); margin:0 .2rem; }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--line-dark); padding:var(--s5) 0 var(--s4); }
.foot__inner{ display:grid; gap:var(--s3); justify-items:center; text-align:center; }
.foot__logo{ width:118px; opacity:.85; }
.foot__txt{ font-size:.875rem; color:var(--on-dark-mut); line-height:2.2; }
/* telefone e e-mail são alvos de toque reais: 44px de altura mínima */
.foot__txt a{ display:inline-flex; align-items:center; min-height:44px; padding-inline:.15rem;
  color:var(--on-dark); text-decoration:none; border-bottom:1px solid var(--line-dark); }
.foot__txt a:hover{ color:var(--gold); border-color:var(--gold); }
.foot__cr{ font-size:.75rem; color:var(--on-dark-dim); }

/* ---------- WhatsApp fixo (mobile) ---------- */
.wa-fixed{
  position:fixed; z-index:99; right:1rem;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  width:30%; min-width:132px; max-width:200px;
  display:none; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem .9rem; min-height:48px; border-radius:999px;
  background:var(--grad-gold); color:#160f04;
  font-weight:700; font-size:.875rem; text-decoration:none;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.wa-fixed svg{ width:18px; height:18px; flex:none; }
@media (max-width:720px){ .wa-fixed{ display:flex; } .foot{ padding-bottom:5rem; } }

/* =========================================================
   Texto em gradiente (background-clip: text)
   O dourado desses textos não é `color`: é um gradiente de FUNDO recortado no
   formato das letras, com a cor transparente. E fundo só é pintado dentro da
   caixa do elemento — qualquer descendente que passe dela fica sem tinta e
   simplesmente some. Foi o que decepava o "g" de "Ignorar" (a tinta descia
   3,1px além da caixa), e valia também para a cedilha de "solução" e o "p" de
   "pode".
   O padding estende a caixa de fundo; em elementos de bloco a margem negativa
   devolve o espaço para o layout não mudar. Em elementos inline o padding não
   afeta a altura da linha, então não precisa compensar.
   ========================================================= */
.pull strong,
.final__h em{ padding-bottom:.16em; }

/* =========================================================
   Passe de acessibilidade — fica no fim de propósito
   O dourado da marca (#d59c4e / #c0824d) rende 2.2–2.9:1 sobre o papel claro
   e reprova em AA. Todo texto dourado sobre fundo claro passa a usar
   --gold-ink (5.05:1). Estas regras precisam vir depois das declarações
   originais para vencer por ordem de cascata.
   Exceção deliberada: o .pull tem fundo navy próprio e mantém o dourado
   original, onde ele já rende 7.2:1.
   ========================================================= */
.proj .eyebrow,.depo .eyebrow,.faq .eyebrow,
.incluso > .shell > .sec-head .eyebrow,
.incluso__n,
.qa summary:hover,
.qa[open] summary{ color:var(--gold-ink); }

.proj .eyebrow__dot,.depo .eyebrow__dot,.faq .eyebrow__dot,
.incluso > .shell > .sec-head .eyebrow__dot{ background:var(--gold-ink); }

.quote p::before,.quote p::after{ color:var(--gold-ink); }
.quote{ border-top-color:var(--gold-ink); }
.qa summary i::before,.qa summary i::after{ background:var(--gold-ink); }

/* =========================================================
   SITE MULTIPÁGINA — componentes adicionais
   (herda todos os tokens e componentes da LP acima)
   ========================================================= */

/* ---------- Navegação principal ---------- */
.header__inner{ gap:1.25rem; }
.nav{ display:none; }
@media (min-width:1080px){
  .nav{ display:flex; align-items:center; gap:1.6rem; margin-left:auto; }
  .header__cta{ margin-left:.5rem; }
}
.nav__link{
  /* caixa alta em Gogh Book: tracking positivo, senão maiúsculas em peso
     leve ficam fechadas demais */
  font-size:.82rem; font-weight:400; text-transform:uppercase; letter-spacing:.09em;
  text-decoration:none; color:var(--on-dark); opacity:.82; transition:opacity .2s, color .2s;
  background:none; border:0; cursor:pointer; font-family:var(--f);
  display:inline-flex; align-items:center; gap:.35rem; padding:.4rem 0;
}
.nav__link:hover, .nav__link[aria-current="page"]{ opacity:1; color:var(--gold); }
.nav__caret{ width:10px; height:10px; stroke:currentColor; stroke-width:2.4; fill:none; transition:transform .25s var(--ease); }
.nav__drop{ position:relative; }
.nav__drop:hover .nav__caret, .nav__drop:focus-within .nav__caret{ transform:rotate(180deg); }
.nav__menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px);
  min-width:320px; padding:.55rem; z-index:110;
  background:var(--navy); border:1px solid var(--line-dark); border-radius:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
/* ponte invisível para o mouse não "cair" no vão entre o link e o painel */
.nav__menu::before{ content:''; position:absolute; left:0; right:0; top:-14px; height:14px; }
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(4px);
}
.nav__item{
  display:block; padding:.7rem .85rem; border-radius:5px; text-decoration:none;
  font-size:.82rem; font-weight:400; text-transform:uppercase; letter-spacing:.08em;
  color:var(--on-dark); transition:background-color .2s, color .2s;
}
.nav__item:hover{ background:var(--navy-up); color:var(--gold); }
.nav__item small{ display:block; margin-top:.25rem; font-size:.75rem; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--on-dark-dim); }

/* hamburger (mobile) */
.nav__toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; margin-left:auto;
  background:none; border:1px solid rgba(242,238,232,.25); border-radius:4px; cursor:pointer;
}
.nav__toggle span{ display:block; height:2px; background:var(--on-dark); border-radius:2px; transition:transform .3s var(--ease), opacity .3s; }
@media (min-width:1080px){ .nav__toggle{ display:none; } }
body.nav-open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .nav__toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* painel mobile */
.mnav{
  position:fixed; inset:0; z-index:99; background:rgb(var(--ink-rgb) / .97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:center; padding:6rem 2rem 3rem;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
  overflow-y:auto;
}
body.nav-open .mnav{ opacity:1; visibility:visible; }
body.nav-open{ overflow:hidden; }
.mnav__link{
  display:block; padding:.8rem 0; text-decoration:none;
  font-size:1.15rem; font-weight:400; text-transform:uppercase; letter-spacing:.06em;
  color:var(--on-dark);
  border-bottom:1px solid rgba(242,238,232,.08);
}
.mnav__link:active, .mnav__link:hover{ color:var(--gold); }
.mnav__group{ padding:.9rem 0 .3rem; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.mnav__link--sub{ font-size:.95rem; font-weight:400; letter-spacing:.05em;
  padding:.65rem 0 .65rem 1rem; color:var(--on-dark-mut); }
.mnav .btn{ margin-top:1.5rem; }

/* ---------- Hero interno (páginas internas) ---------- */
.phero{
  position:relative; overflow:hidden; background:var(--ink);
  /* +200px de altura, distribuídos em cima e embaixo para o conteúdo
     seguir opticamente centrado na faixa */
  padding:calc(6.5rem + var(--s5) + 100px) 0 calc(var(--s6) + 100px);
}
.phero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 85% -10%, rgba(213,156,78,.14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 110%, rgba(213,156,78,.06), transparent 60%);
}
/* Hero de serviço com foto de fundo: imagem cobre a seção, um scrim escuro
   (mais forte à esquerda, onde o texto vive) garante contraste do título e
   do corpo em qualquer imagem. */
.phero__bg{ position:absolute; inset:0; z-index:0; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; object-position:78% center; }
.phero:has(.phero__bg)::before{ display:none; }
.phero:has(.phero__bg){ background:#000; }
.phero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Véu leve: a imagem precisa aparecer. A legibilidade do texto vem
     principalmente do text-shadow abaixo, não de afogar a foto. */
  background:
    linear-gradient(to right, rgb(var(--ink-rgb) / .97) 0%, rgb(var(--ink-rgb) / .94) 48%, rgb(var(--ink-rgb) / .55) 74%, rgb(var(--ink-rgb) / .3) 100%),
    linear-gradient(to bottom, rgb(var(--ink-rgb) / .3) 0%, transparent 22%, transparent 78%, rgb(var(--ink-rgb) / .6) 100%);
}
@media (max-width:720px){
  .phero__bg img{ object-position:64% center; }
  .phero__scrim{
    background:
      linear-gradient(to bottom, rgb(var(--ink-rgb) / .72) 0%, rgb(var(--ink-rgb) / .94) 55%, var(--ink) 100%);
  }
}
.phero__inner{ position:relative; z-index:2; max-width:62rem; }
.phero h1{ font-size:clamp(2.2rem, 4.6vw, 3.7rem); letter-spacing:-.03em; }
.phero h1 em{ font-style:normal; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.phero__lead{ margin-top:var(--s3); max-width:46rem; font-size:var(--t-lead); color:var(--on-dark-mut); }
.phero__actions{ margin-top:var(--s4); display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.phero__micro{ margin-top:var(--s3); font-size:.875rem; color:var(--on-dark-dim); }
.phero__micro span{ margin:0 .5rem; }
@media (max-width:640px){
  .phero{ padding-top:calc(5.5rem + var(--s4) + 100px); }
  .phero__actions .neon-btn, .phero__actions .btn{ width:100%; }
}

/* ---------- Grid de serviços (Home) ---------- */
.svc{ background:var(--ink); padding:var(--sec) 0; }
.svc__grid{ display:grid; gap:var(--s3); grid-template-columns:1fr; margin-top:var(--s5); }
@media (min-width:700px){ .svc__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .svc__grid{ grid-template-columns:repeat(3,1fr); } }
.scard{
  position:relative; display:flex; flex-direction:column; gap:var(--s2);
  padding:clamp(1.5rem,2.5vw,2.2rem); min-height:100%;
  background:var(--navy); border:1px solid var(--line-dark); border-radius:8px;
  text-decoration:none; color:var(--on-dark);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.scard:hover{ transform:translateY(-5px); border-color:rgba(213,156,78,.5); background:var(--navy-up); }
/* ícone no topo do card */
.scard__ico{
  /* align-self é obrigatório: o .scard é flex-column e o padrão (stretch)
     esticava o ícone na largura do card, achatando a proporção. */
  align-self:flex-start;
  width:auto; height:clamp(38px, 3.4vw, 48px);
  transition:transform .4s var(--ease);
}
.scard:hover .scard__ico{ transform:scale(1.08); }
@media (prefers-reduced-motion:reduce){ .scard__ico{ transition:none; } }
.scard h3{
  /* mesmo tratamento das headlines: caixa alta em Gogh Book. O tracking
     positivo é necessário — o -.025em herdado (feito para bold em caixa
     baixa) fecharia demais as letras em maiúsculas com peso leve. */
  font-size:clamp(1.02rem, 1.55vw, 1.22rem);
  font-weight:400; text-transform:uppercase;
  letter-spacing:.035em; line-height:1.22;
}
.scard p{ font-size:.9375rem; color:var(--on-dark-mut); }
.scard__go{
  margin-top:auto; padding-top:var(--s2);
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.875rem; font-weight:700; color:var(--gold);
}
.scard__go .ico{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease); }
.scard:hover .scard__go .ico{ transform:translateX(5px); }

/* ---------- Números / estatísticas ---------- */
.stats{ background:var(--navy); border-block:1px solid var(--line-dark); padding:clamp(3.5rem,7vw,6rem) 0; }
.stats__grid{ display:grid; gap:var(--s4); grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .stats__grid{ grid-template-columns:repeat(4,1fr); } }
.stat{ text-align:center; }
.stat__n{
  /* Gogh Book (400): números leves, como as headlines. O -.03em era para o
     peso 800 — em Book fecharia demais os dígitos. */
  font-size:clamp(2.4rem, 5vw, 3.9rem); font-weight:400; letter-spacing:0; line-height:1;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__l{ margin-top:.5rem; font-size:.875rem; color:var(--on-dark-mut); }

/* ---------- "Para quem é" (checklist em seção clara) ---------- */
.who{ background:var(--paper); color:var(--on-light); padding:var(--sec) 0; }
.who .sec-sub{ color:var(--on-light-mut); }
.who .eyebrow{ color:var(--gold-ink); }
.who .eyebrow__dot{ background:var(--gold-ink); }
.who__list{ margin-top:var(--s5); display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media (min-width:820px){ .who__list{ grid-template-columns:repeat(2,1fr); gap:var(--s3) var(--s5); } }
.who__list li{
  position:relative; padding-left:2.2rem; font-size:var(--t-lead); line-height:1.5;
}
.who__list li::before{
  content:''; position:absolute; left:0; top:.32em; width:1.15rem; height:1.15rem;
  border-radius:50%; background:var(--grad-gold);
}
.who__list li::after{
  content:''; position:absolute; left:.32rem; top:.62em; width:.5rem; height:.28rem;
  border-left:2px solid #160f04; border-bottom:2px solid #160f04; transform:rotate(-45deg);
}

/* ---------- Diferenciais (cards escuros) ---------- */
.diff{ background:var(--ink); padding:var(--sec) 0; }
.diff__grid{ margin-top:var(--s5); display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media (min-width:900px){ .diff__grid{ grid-template-columns:repeat(3,1fr); } }
.diff__grid--4{ }
@media (min-width:900px){ .diff__grid--4{ grid-template-columns:repeat(4,1fr); } }
.dcard{
  padding:clamp(1.5rem,2.5vw,2rem); background:rgba(10,12,16,.62);
  border-top:2px solid var(--gold); border-radius:4px;
}
.dcard h3{ font-size:1.0625rem; }
.dcard p{ margin-top:.6rem; font-size:.9375rem; line-height:1.6; color:var(--on-dark-mut); }

/* ---------- Missão / Visão / Valores ---------- */
.mvv{ background:var(--ink); padding:var(--sec) 0; }
.mvv__grid{ margin-top:var(--s5); display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media (min-width:900px){ .mvv__grid{ grid-template-columns:repeat(3,1fr); } }
.mvv__tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--s2); }
.mvv__tag{
  padding:.45rem 1rem; border:1px solid var(--line-dark); border-radius:999px;
  font-size:.875rem; font-weight:700; color:var(--gold);
}

/* ---------- Prosa (Sobre) ---------- */
.prose{ background:var(--paper); color:var(--on-light); padding:var(--sec) 0; }
.prose .eyebrow{ color:var(--gold-ink); }
.prose .eyebrow__dot{ background:var(--gold-ink); }
.prose__grid{ display:grid; gap:var(--s5); grid-template-columns:1fr; margin-top:var(--s5); }
@media (min-width:900px){ .prose__grid{ grid-template-columns:repeat(2,1fr); gap:var(--s6); } }
.prose__block h3{ font-size:clamp(1.35rem,2.2vw,1.75rem); }
.prose__block p{ margin-top:var(--s2); color:var(--on-light-mut); font-size:var(--t-lead); line-height:1.7; }

/* ---------- Projetos: filtros + grid ---------- */
.pwrap{ background:var(--paper); color:var(--on-light); padding:var(--sec) 0; }
.pfilters{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:var(--s4); }

/* Variante escura (Home): mesmo preto do hero. Os filtros invertem — no claro
   a borda é escura, aqui precisa ser dourada para aparecer. */
.pwrap--dark{ background:var(--ink); color:var(--on-dark); }
/* eyebrow e filtros centralizados no topo da seção */
.pwrap__eyebrow{ justify-content:center; margin-bottom:var(--s3); }
.pfilters--center{ justify-content:center; }
.pwrap--dark .chip{ border-color:var(--line-dark); color:var(--on-dark-mut); }
.pwrap--dark .chip:hover{ border-color:var(--gold); color:var(--gold); }
.pwrap--dark .chip.is-active{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
/* o CTA da seção usa o botão neon claro quando o fundo é escuro */
.pwrap--dark .neon-btn--dark{ border-color:rgba(213,156,78,.4); color:var(--on-dark); }
.pwrap--dark .neon-btn--dark:hover{ border-color:rgba(213,156,78,.6); color:var(--gold); }
.pwrap--dark .neon-btn--dark::before,
.pwrap--dark .neon-btn--dark::after{
  background:conic-gradient(from var(--neon-angle),
    rgba(213,156,78,0) 0deg, rgba(213,156,78,0) 210deg,
    rgba(213,156,78,.9) 285deg, #ffe1a8 320deg, rgba(213,156,78,.9) 345deg,
    rgba(213,156,78,0) 360deg);
}
.pwrap--dark .neon-btn--dark::after{ filter:blur(6px); opacity:.85; }
.chip{
  /* retangular, sem cantos */
  padding:.6rem 1.35rem; border-radius:0; cursor:pointer;
  border:1px solid var(--line-light); background:transparent;
  font-family:var(--f); font-size:.78rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.09em; color:var(--on-light-mut);
  transition:all .25s var(--ease);
}
.chip:hover{ border-color:var(--gold-ink); color:var(--gold-ink); }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:var(--on-dark); }

/* gap enxuto: os cards quase se encostam */
.pgrid{ display:grid; gap:.4rem; grid-template-columns:1fr; }
@media (min-width:700px){ .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .pgrid{ grid-template-columns:repeat(3,1fr); } }

/* cards retangulares — inclui os que abrem galeria (.card, herdado da LP) */
.pcard, .pgrid .card, .pgrid .card__media{ border-radius:0; }
.pcard{ position:relative; overflow:hidden; }
/* Caixa 4:3 fixa em TODOS os cards: as capas vêm em proporções diferentes
   (4:3 nas identidades, 3:2 nos mockups de website). Sem isso, as de 3:2
   ficavam mais baixas que a linha do grid e sobrava faixa vazia embaixo,
   com a legenda solta. O cover recorta o excedente pelas bordas, mantendo
   o centro da arte, que é onde vive o logo. */
.pcard, .pgrid .card, .pgrid .card__media{ aspect-ratio:4 / 3; }
.pcard img, .pgrid .card__img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.pcard:hover img, .pgrid .card:hover .card__img{ transform:scale(1.04); }
.pcard__tag{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:.5rem 1rem; border-radius:0;
  font-size:.7rem; font-weight:400; text-transform:uppercase; letter-spacing:.1em;
  background:rgb(0 0 0 / .5); color:var(--on-dark);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* ---------- Hub de contato ---------- */
.hub{
  position:relative; overflow:hidden; background:var(--ink);
  min-height:100svh; display:grid; place-items:center;
  padding:calc(6rem + var(--s4)) 0 var(--s6); text-align:center;
}
.hub::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 45% at 50% 0%, rgba(213,156,78,.16), transparent 65%);
}
.hub__inner{ position:relative; width:min(100% - 2.5rem, 30rem); margin-inline:auto; }
.hub__logo{ width:min(300px, 70%); margin-inline:auto; }
.hub h1{ margin-top:var(--s4); font-size:clamp(1.6rem,3.5vw,2.2rem); }
.hub__sub{ margin-top:var(--s2); color:var(--on-dark-mut); }
.hub__links{ margin-top:var(--s4); display:grid; gap:var(--s2); }
.hub__links .neon-btn, .hub__links .btn{ width:100%; }
.hub__foot{ margin-top:var(--s4); font-size:.9rem; color:var(--on-dark-dim); }
.hub__foot a{ color:var(--on-dark-mut); }

/* ---------- Footer expandido ---------- */
.foot__cols{
  display:grid; gap:var(--s4); grid-template-columns:1fr;
  padding-bottom:var(--s4); margin-bottom:var(--s4);
  border-bottom:1px solid var(--line-dark); text-align:left;
}
@media (min-width:820px){ .foot__cols{ grid-template-columns:1.2fr 1fr 1fr; } }
.foot__h{ font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--s2); }
.foot__nav a{
  display:block; padding:.32rem 0; text-decoration:none;
  font-size:.9rem; color:var(--on-dark-mut); transition:color .2s;
}
.foot__nav a:hover{ color:var(--gold); }
.foot__about{ font-size:.9rem; color:var(--on-dark-mut); max-width:34ch; }
.foot__social{ display:flex; gap:.8rem; margin-top:var(--s3); }
.foot__social a{
  display:grid; place-items:center; width:40px; height:40px;
  border:1px solid var(--line-dark); border-radius:50%; color:var(--on-dark-mut);
  transition:color .2s, border-color .2s, transform .2s;
}
.foot__social a:hover{ color:var(--gold); border-color:var(--gold); transform:translateY(-2px); }
.foot__social svg{ width:17px; height:17px; fill:currentColor; }

/* Página interna: seção final reaproveitada sem 100vh */
.final--page{ min-height:auto; padding:var(--sec) 0; }

/* Header do site: uma linha só — o header da LP era grid de 2 colunas
   (logo + CTA); com o nav no meio precisa ser flex sem quebra. */
.header__inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; }
.header__logo{ flex:0 0 auto; }
.header__logo img{ width:clamp(150px, 13vw, 205px); height:auto; }
@media (min-width:1080px){ .nav{ gap:1.35rem; } }

/* ---------- Hero clean da Home: imagem full-bleed + headline alternante ----------
   Eyebrow no canto superior direito; headline central com efeito de troca de
   letras (random letter swap, adaptação vanilla do componente React). */
.hero2{
  position:relative; overflow:hidden; background:var(--ink);
  min-height:100svh; display:grid; place-items:center;
}
.hero2__bg{ position:absolute; inset:0; z-index:0; }
.hero2__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero2__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgb(var(--ink-rgb) / .55) 0%, rgb(var(--ink-rgb) / 0) 26%,
    rgb(var(--ink-rgb) / 0) 74%, var(--ink) 100%);
}
.hero2__eyebrow{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin:0 0 clamp(1rem, 2.6vh, 1.6rem); text-align:center;
  font-size:.8125rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 14px rgba(0,0,0,.7);
}
.hero2__eyebrow .eyebrow__dot{ flex:0 0 auto; }
@media (max-width:900px){
  .hero2__eyebrow{ font-size:.68rem; letter-spacing:.14em; }
}
.hero2__inner{
  position:relative; z-index:2; width:100%;
  /* desloca o bloco para BAIXO do clarão do feixe (que fica no centro da
     imagem): o texto dourado nunca encosta na área mais clara do fundo */
  translate:0 clamp(5rem, 22vh, 14rem);
}
.hero2__title{
  margin:0; text-align:center; color:var(--on-dark);
  /* Gogh Book (400): leve e elegante, como no rascunho */
  font-size:clamp(1.5rem, 6vw, 4.4rem); font-weight:400;
  letter-spacing:.03em; line-height:1.14;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7)) drop-shadow(0 10px 34px rgba(0,0,0,.55));
}

/* Troca de letras SEM deslocamento lateral: duas linhas sobrepostas e
   centradas de forma independente — a atual dissolve para baixo, a próxima
   desce de cima, cada letra já na sua posição final. O espaçamento vive em
   margin-right fixo por letra (não em letter-spacing), então a métrica é
   idêntica na pausa e na animação. */
.hero2__title{ letter-spacing:0; }
.swap{ position:relative; display:flex; justify-content:center; overflow:hidden; }
.swap__line{ display:flex; justify-content:center; white-space:pre; }
.swap__line--in{ position:absolute; left:0; right:0; top:0; }
.swap__l{ display:inline-block; white-space:pre; margin-right:.03em; }


/* Símbolo Caviar em line-art acima do eyebrow do hero */
.hero2__mark{
  display:block; width:clamp(43px, 5.2vw, 66px); height:auto;
  margin:0 auto clamp(1rem, 2.4vh, 1.5rem);
}
.hero2__mark-base{ stroke:var(--gold); stroke-opacity:.45; stroke-width:3; }
.hero2__mark-trace{ stroke-width:3; stroke-linecap:round; }

/* ---------- Headlines do site: CAIXA ALTA em Gogh Book ----------
   Mesmo tratamento do hero da Home aplicado a todos os títulos.
   Caixa alta em peso leve pede tracking POSITIVO: o -.025em herdado
   (pensado para bold em caixa baixa) fecharia demais as letras. */
.phero h1,
.sec-title,
.time__title,
.final__h,
.post__head h1,
.post__sec h2,
.cflow__sec h2,
.hero2__title{
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.14;
}
/* o trecho dourado acompanha o mesmo peso */
.phero h1 em,
.sec-title em,
.time__title em,
.final__h em,
.post__head h1 em{ font-weight:400; }

/* Caixa alta ocupa mais largura: um passo abaixo no tamanho evita que
   títulos longos virem blocos de 4 linhas. */
.phero h1{ font-size:clamp(1.9rem, 4vw, 3.15rem); }
.sec-title{ font-size:clamp(1.7rem, 3.6vw, 2.9rem); }
.final__h{ font-size:clamp(1.7rem, 3.6vw, 2.9rem); }

/* ---------- Hero de serviço com ARTE lateral (PNG recortado) ----------
   Diferente do .phero__bg (foto full-bleed com scrim): aqui a arte tem fundo
   transparente e se funde no preto da seção. Nenhum véu por cima dela —
   a legibilidade vem de o texto viver numa coluna própria à esquerda. */
.phero__art{
  position:absolute; z-index:0; pointer-events:none;
  /* altura AUTOMÁTICA (proporção natural da imagem) e centrada na vertical:
     com altura fixa, cover ampliava demais e contain deixava área vazia — nos
     dois casos a máscara deixava de coincidir com as bordas reais da arte. */
  right:0; top:50%; translate:0 -50%; width:min(56%, 900px); max-height:100%;
}
.phero__art img{
  /* Limite duplo: largura para imagens deitadas, ALTURA para as em retrato —
     sem o teto de altura, uma imagem alta (ex.: mockup de celular) ganhava a
     mesma largura das outras e virava um bloco gigante no desktop.
     width:auto + max-* preserva a proporção e mantém a máscara coincidindo
     com as bordas reais. */
  width:auto; height:auto; max-width:100%; max-height:66vh;
  /* centralizada no bloco da arte: com margin-left:auto ela colava na borda
     da tela e abria um vão grande até o texto. Centralizar aproxima do texto
     e afasta da borda ao mesmo tempo — e no mobile já deixa centrada. */
  margin-inline:auto; display:block;
  /* Dissolve as arestas para a arte fundir no preto da seção. Duas máscaras
     em interseção: funciona tanto para PNG recortado (com alpha) quanto para
     imagem de fundo sólido, que sem isso mostraria a borda dura do retângulo. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 16%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, #000 16%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
/* A arte ocupa a metade direita. O texto precisa ficar na coluna esquerda —
   mas .phero__inner também é .shell (margin-inline:auto), então limitar a
   largura DELE centralizaria o bloco. Limita-se cada filho: o container
   mantém a posição do grid e o texto alinha à esquerda. */
@media (min-width:901px){
  /* 46rem: o título cabe em uma linha e ainda para antes da figura do
     Pensador (que começa a ~888px em 1440) — a faixa da arte à esquerda
     é só fundo escuro, então o texto pode avançar sobre ela. */
  /* Largura fluida: o teto em rem evita linhas longas em telas grandes; o
     teto em vw garante que o texto sempre pare antes da arte, que ocupa 56%
     da direita — sem isso, em telas médias o título entra na figura. */
  .phero:has(.phero__art) .phero__inner > *{ max-width:min(46rem, 42vw); }
  /* corpo um passo menor: "SEJA VISTO. SEJA LEMBRADO." fecha em uma linha,
     como na referência, sem invadir a figura */
  .phero:has(.phero__art) h1{ font-size:clamp(1.6rem, 2.9vw, 2.45rem); }
  /* o parágrafo para antes da figura: o título pode avançar (cai sobre o
     fundo escuro da arte), mas texto corrido precisa de leitura limpa */
  .phero:has(.phero__art) .phero__lead{ max-width:min(34rem, 34vw); }
}
@media (max-width:900px){
  /* Telas estreitas: a arte sai do posicionamento absoluto e entra no FLUXO,
     abaixo do texto. Assim o hero se ajusta sozinho a qualquer proporção de
     imagem — com posição absoluta era preciso adivinhar a altura no padding,
     e uma imagem quadrada acabava cobrindo o texto. */
  .phero:has(.phero__art){ display:flex; flex-direction:column; }
  .phero:has(.phero__art) .phero__inner{ order:1; }
  .phero__art{
    order:2; position:static; translate:0;
    width:100%; height:auto; max-height:none;
    margin-top:var(--s4); opacity:.75;
  }
  .phero__art img{
    height:auto; object-position:center bottom;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 26%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 26%);
  }
}


/* Título do time em telas estreitas: corpo proporcional à largura, para as
   duas linhas nunca quebrarem em quatro. */
@media (max-width:640px){
  .time__title{ font-size:clamp(.95rem, 5vw, 1.5rem); }
}

/* ---------- Separador com gradient trace ----------
   Linha de 1px que já nasce mais brilhante no miolo (fade nas pontas), com um
   pulso dourado percorrendo em loop. Adaptação horizontal do mesmo efeito
   usado no símbolo do hero. */
.sep{
  position:relative; height:1px; overflow:hidden;
  width:min(100% - 2.5rem, var(--shell)); margin-inline:auto;
  background:linear-gradient(to right,
    transparent, rgba(213,156,78,.14) 22%, rgba(213,156,78,.34) 50%,
    rgba(213,156,78,.14) 78%, transparent);
}
@media (min-width:900px){ .sep{ width:min(100% - 5rem, var(--shell)); } }
.sep::after{
  content:''; position:absolute; top:0; bottom:0; left:-28%; width:28%;
  background:linear-gradient(to right, transparent, #f0c46a, transparent);
  filter:blur(.5px);
  animation:sep-trace 5.5s linear infinite;
}
@keyframes sep-trace{ to{ left:110%; } }
@media (prefers-reduced-motion:reduce){ .sep::after{ animation:none; opacity:0; } }

/* ---------- Cases herdados do WordPress (portfolio-item, artigo, logotipos) ---------- */
/* Cabeçalho de case: sem imagem de fundo, faixa mais curta que a dos serviços. */
.phero--case{ padding:calc(6.5rem + var(--s5)) 0 var(--s6); }

/* Galeria do case: imagens grandes empilhadas em coluna única, com as
   dimensões reais no HTML para o navegador reservar a altura certa. */
.cgal{ padding:var(--sec) 0; }
.cgal__grid{ display:grid; gap:var(--s4); max-width:min(100%, 68rem); }
.cgal__item{ margin:0; }
.cgal__item img{ width:100%; height:auto; display:block; }

/* Grade de logotipos: 3 colunas, quadros claros (os JPGs têm fundo branco). */
.pgrid--logos{ grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .pgrid--logos{ grid-template-columns:repeat(3,1fr); } }
.pcard--logo{ background:#fff; }
.pcard--logo img{ aspect-ratio:1; object-fit:cover; }

/* pcard usado como link (projetos relacionados) */
a.pcard{ display:block; text-decoration:none; color:inherit; }

/* Artigo (post do blog migrado) */
.post{ padding:calc(6.5rem + var(--s5)) 0 var(--sec); }
.post__shell{ max-width:min(100% - 2.5rem, 46rem); }
.post__head h1{ font-size:clamp(1.9rem, 4vw, 3rem); margin-top:var(--s3); }
.post__head h1 em{
  font-style:normal; background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.post__head .phero__lead{ margin-top:var(--s3); }
.post__sec{ margin-top:var(--s5); }
.post__sec h2{
  font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  padding-bottom:var(--s2); border-bottom:1px solid var(--line-dark);
}
.post__sec p{ margin-top:var(--s3); color:var(--on-dark-mut); line-height:1.75; }
.post__img{ margin:var(--s5) 0 0; }
.post__img img{ width:100%; height:auto; display:block; }
.post__rel{ margin-top:var(--s6); padding:var(--s4); border:1px solid var(--line-dark); }
.post__rel h2{ font-size:1.05rem; }
.post__rel ul{ margin-top:var(--s3); display:grid; gap:.55rem; padding-left:1.1rem; }
.post__rel a{ color:var(--gold-2); text-decoration:none; }
.post__rel a:hover{ text-decoration:underline; }
.post__fonte{ margin-top:var(--s3); font-size:.85rem; color:var(--on-dark-dim); }
.post__fonte a{ color:inherit; }

/* ---------- Case de website: texto e imagem alternados ----------
   O texto vive numa coluna estreita (leitura confortável) e as imagens
   respiram mais largas, criando o ritmo entre ler e ver. */
.cflow{ padding:var(--sec) 0; }
.cflow .shell{ display:grid; gap:var(--s5); justify-items:center; }
.cflow__sec{ max-width:44rem; width:100%; }
.cflow__sec h2{
  font-size:clamp(1.35rem, 2.6vw, 1.9rem);
  padding-bottom:var(--s2); border-bottom:1px solid var(--line-dark);
}
.cflow__sec p{ margin-top:var(--s3); color:var(--on-dark-mut); line-height:1.75; }
.cflow__img{ margin:0; width:100%; max-width:min(100%, 64rem); }
.cflow__img img{ width:100%; height:auto; display:block; }

/* Ficha técnica em linha, logo abaixo da imagem de abertura */
.cflow__ficha{
  margin:0; width:100%; max-width:min(100%, 64rem);
  display:grid; gap:var(--s3) var(--s4);
  grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));
  padding:var(--s4); border:1px solid var(--line-dark);
}
.cflow__ficha dt{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--gold-2);
}
.cflow__ficha dd{ margin:.35rem 0 0; color:var(--on-dark); font-size:.95rem; }

/* ---------- Portfólio de websites (página de criação de sites) ----------
   Cada card é uma <figure>: mockup + legenda com nome, ramo e link para o
   site publicado. A legenda fica FORA da imagem (e não sobreposta como nos
   cards do portfólio) porque aqui ela carrega um link que precisa de alvo
   confortável e de contraste garantido. */
.wsites{ padding:var(--sec) 0; }
.wgrid{
  margin-top:var(--s5); display:grid; gap:var(--s4);
  grid-template-columns:1fr;
}
@media (min-width:700px){ .wgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .wgrid{ grid-template-columns:repeat(3,1fr); } }

.wcard{ margin:0; border:1px solid var(--line-dark); background:#0b0b0b; }
.wcard img{
  width:100%; height:auto; display:block; aspect-ratio:1080 / 704;
  object-fit:cover; transition:transform .5s var(--ease);
}
.wcard:hover img{ transform:scale(1.03); }
.wcard__cap{ display:grid; gap:.15rem; padding:var(--s3); }
.wcard__nome{
  font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-dark);
}
.wcard__ramo{ font-size:.82rem; color:var(--on-dark-mut); }
.wcard__link{
  margin-top:.35rem; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.82rem; color:var(--gold-2); text-decoration:none; word-break:break-all;
}
.wcard__link:hover{ text-decoration:underline; }
.wcard__link .ico{
  width:13px; height:13px; flex:none; stroke:currentColor; stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s var(--ease);
}
.wcard__link:hover .ico{ transform:translate(2px,-2px); }

/* ---------- Hero dos cases: texto + imagem-chave do projeto ----------
   A capa entra INTEIRA (object-fit:cover num quadro 4:3, sem máscara): ela é
   o key visual da marca e precisa ser lida de relance. */
.chero__grid{ position:relative; z-index:2; display:grid; gap:var(--s5); align-items:center; }
@media (min-width:960px){
  .chero__grid{ grid-template-columns:1fr 1fr; gap:var(--s6); }
}
.chero__fig{ margin:0; }
.chero__fig img{
  width:100%; height:auto; display:block; aspect-ratio:4 / 3; object-fit:cover;
  border:1px solid var(--line-dark);
}
/* no mobile a imagem vem DEPOIS do texto, mantendo o H1 no topo da dobra */
@media (max-width:959px){
  .chero__grid{ display:flex; flex-direction:column; }
  .chero__txt{ order:1; }
  .chero__fig{ order:2; }
}

/* ---------- "Para quem é" com arte lateral (página de Instagram) ----------
   O texto ocupa a coluna da esquerda e a imagem, à direita. A lista, que na
   versão sem arte se abre em duas colunas, volta a UMA — senão as linhas
   ficariam curtas demais dentro de meia largura. */
.who__grid{ display:grid; gap:var(--s5); align-items:center; }
@media (min-width:960px){
  .who__grid{ grid-template-columns:1fr 1fr; gap:var(--s6); }
}
.who--arte .sec-head{ margin-bottom:var(--s4); }
.who--arte .who__list{ grid-template-columns:1fr; }
.who__art{ margin:0; }
.who__art img{ width:100%; height:auto; display:block; }
/* no mobile a imagem entra depois do texto */
@media (max-width:959px){
  .who__grid{ display:flex; flex-direction:column; }
  .who__txt{ order:1; }
  .who__art{ order:2; }
}

/* Home: a grade guarda projetos de todas as categorias, mas só a visão "Todos"
   aparece de saída. Os demais entram quando o filtro correspondente é clicado
   (o JS grava display explícito, por isso esta regra não briga com ele). */
.pgrid > [data-show]:not([data-show~="all"]){ display:none; }

/* ---------- Carrossel de perfis (página de Instagram) ----------
   Rolagem horizontal nativa com scroll-snap: o arrastar no toque e o encaixe
   são do navegador, sem biblioteca. As setas e os dots apenas empurram o
   scroll, então tudo continua funcionando se o JS falhar. */
.feeds{ padding:var(--sec) 0; }
.carro{ position:relative; }
.carro__trilho{
  display:flex; gap:var(--s3); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  padding-bottom:var(--s3);
  scrollbar-width:none;                 /* a barra some: a navegação são as setas/dots */
}
.carro__trilho::-webkit-scrollbar{ display:none; }
.feed{
  margin:0; flex:0 0 100%; scroll-snap-align:center;
  border:1px solid var(--line-dark); background:#0b0b0b;
}
.feed img{ width:100%; height:auto; display:block; aspect-ratio:16 / 9; object-fit:cover; }
.feed__cap{ display:grid; gap:.15rem; padding:var(--s3); }
.feed__nome{ font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-dark); }
.feed__ramo{ font-size:.82rem; color:var(--on-dark-mut); }

/* Setas: fora da imagem no desktop, sobrepostas no mobile */
.carro__nav{
  position:absolute; top:38%; z-index:2; display:grid; place-items:center;
  width:44px; height:44px; border:1px solid rgba(213,156,78,.45); border-radius:50%;
  background:rgb(0 0 0 / .55); color:var(--gold); cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .2s, color .2s, opacity .2s;
}
.carro__nav:hover{ border-color:var(--gold); color:#f0c46a; }
.carro__nav[disabled]{ opacity:.25; cursor:default; }
.carro__nav svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.carro__nav--prev{ left:.75rem; transform:scaleX(-1); }
.carro__nav--next{ right:.75rem; }
@media (min-width:1180px){
  .carro__nav--prev{ left:-1.6rem; }
  .carro__nav--next{ right:-1.6rem; }
}

.carro__dots{ display:flex; justify-content:center; gap:.5rem; margin-top:var(--s3); }
.carro__dot{
  width:9px; height:9px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(213,156,78,.3); transition:background .25s, transform .25s;
}
.carro__dot[aria-current="true"]{ background:var(--gold); transform:scale(1.25); }

@media (prefers-reduced-motion:reduce){ .carro__trilho{ scroll-behavior:auto; } }

/* CTA dentro de bloco de texto (seção de preço) */
.prose__cta{ margin-top:var(--s4); }

/* dcard usado como link (seção "Sites por segmento") */
a.dcard--link{ display:block; text-decoration:none; color:inherit; }
a.dcard--link .scard__go{ margin-top:var(--s3); display:inline-flex; align-items:center; gap:.45rem; font-size:.875rem; font-weight:700; color:var(--gold); }
a.dcard--link:hover .scard__go .ico{ transform:translateX(5px); }