/* Variante A — Capítulos: logomarca em destaque, seções numeradas, mais movimento. */

/* barra de progresso de leitura */
.prog{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-200),var(--gold));transform-origin:left;transform:scaleX(0)}

/* header: logo pequeno só aparece quando o logo grande sai da tela */
.hd .logo{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.hd.sem-logo .logo{opacity:0;transform:translateY(-4px);pointer-events:none}

/* ---------- hero com logomarca ---------- */
.vhero{position:relative;display:flex;align-items:center;padding:48px 0 28px;overflow:hidden;text-align:center}
.vhero .wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.vhero-luz{position:absolute;inset:-20% -10% auto;height:120%;pointer-events:none;
  background:radial-gradient(40% 36% at 50% 38%,rgba(233,214,168,.55),rgba(244,234,210,0) 70%),
             radial-gradient(30% 30% at 82% 12%,rgba(244,234,210,.7),rgba(244,234,210,0) 70%);
  will-change:transform}
.marca{position:relative;width:min(420px,78vw);margin-bottom:34px;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.marca.on{opacity:1;transform:none}
.marca img{width:100%;height:auto}
/* brilho que passa só por cima dos pixels do logo */
.marca .brilho{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(img/logo-grande.png) center/contain no-repeat;mask:url(img/logo-grande.png) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%) no-repeat;
  background-size:250% 100%;background-position:130% 0}
.marca.on .brilho{animation:brilho 2.4s var(--ease) .7s 1 both}
@keyframes brilho{to{background-position:-60% 0}}
.vhero h1{margin:14px 0 18px}
.vhero .lead{margin:0 auto;max-width:600px}
.vhero .hero-ctas{justify-content:center}
.desce{margin:28px auto 0;display:inline-flex;flex-direction:column;align-items:center;gap:12px;color:var(--gold-ink);text-decoration:none;
  opacity:0;transform:translateY(-8px);animation:desce-entra .8s var(--ease) 1.4s forwards;transition:opacity .4s var(--ease)}
.desce span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.desce-trilho{position:relative;display:block;width:1px;height:44px;background:var(--line-2);overflow:hidden}
.desce-trilho b{position:absolute;left:0;top:0;width:1px;height:22px;background:linear-gradient(180deg,rgba(184,134,11,0),var(--gold-deep));animation:desce 1.9s cubic-bezier(.65,0,.35,1) infinite}
.desce:hover .desce-trilho b{animation-duration:1.1s}
html.rolou .desce{opacity:0!important;pointer-events:none}
@keyframes desce{0%{transform:translateY(-22px)}100%{transform:translateY(44px)}}
@keyframes desce-entra{to{opacity:1;transform:none}}

/* título que sobe palavra por palavra */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform .7s var(--ease);transition-delay:calc(var(--k)*45ms)}
.split.in .w>span{transform:none}

/* ---------- capítulos ---------- */
.cap{position:relative;padding:40px 0 112px;border-top:1px solid var(--line)}
.cap-tint{background:var(--tint)}
.cap-dark{background:var(--dark);color:#a9b3ac;border-top-color:var(--dark-line);overflow:hidden}
.cap-dark h2,.cap-dark h3{color:#f3f5f3}
.cap-dark .lead{color:#a9b3ac}
.cap-fim{padding-bottom:120px}
.chap{display:flex;align-items:center;gap:14px;margin:0 0 56px;padding-top:28px}
.chap-n{font-family:var(--mono);font-size:44px;line-height:1;letter-spacing:-.04em;color:var(--gold-deep);opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chap-t{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:500;white-space:nowrap;opacity:0;transition:opacity .5s var(--ease) .15s}
.chap-l{flex:1;height:1px;background:var(--gold-200);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease) .2s}
.chap-of{font-family:var(--mono);font-size:12px;color:var(--muted);opacity:0;transition:opacity .5s var(--ease) .8s}
.chap.in .chap-n{opacity:1;transform:none}
.chap.in .chap-t,.chap.in .chap-of{opacity:1}
.chap.in .chap-l{transform:scaleX(1)}
.cap-dark .chap-n{color:var(--gold-200)}
.cap-dark .chap-t{color:#d6ddd8}
.cap-dark .chap-l{background:#3a443e}
.cap-dark .chap-of{color:#7d877f}
.gold-l{color:var(--gold-200)}

/* holofote que segue o mouse nas seções escuras */
.spot{position:absolute;inset:0;pointer-events:none;opacity:.9;
  background:radial-gradient(420px circle at var(--mx,30%) var(--my,20%),rgba(184,134,11,.16),rgba(184,134,11,0) 70%);transition:background-position .2s}
.cap-dark .wrap{position:relative}
.dark-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.cta-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}

/* trilho que se preenche com a rolagem */
.trilho{height:2px;background:var(--line);border-radius:2px;margin:0 0 26px;overflow:hidden}
.trilho i{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0)}

/* ícones que se desenham */
.desenha .ic path,.desenha .ic circle,.desenha .ic rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease) .25s}
.desenha .area.in .ic path,.desenha .area.in .ic circle,.desenha .area.in .ic rect{stroke-dashoffset:0}
.cap-tint .grid9{background:var(--surface)}

/* ---------- Instagram ---------- */
.ig-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.ig-hd h2{margin-top:0}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:935px;margin:0 auto}
.ig-post{position:relative;display:block;aspect-ratio:3/4;border-radius:4px;overflow:hidden;background:var(--tint-2);
  opacity:0;transform:translateY(12px) scale(.98);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i)*70ms)}
.ig-grid.in .ig-post{opacity:1;transform:none}
.ig-post img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ig-post:hover img{transform:scale(1.04)}
.ig-post::after{content:"";position:absolute;inset:0;background:rgba(16,21,18,0);transition:background .3s var(--ease)}
.ig-post:hover::after{background:rgba(16,21,18,.18)}
.ig-video{position:absolute;top:10px;right:10px;z-index:1;width:20px;height:20px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

/* ---------- índice lateral ---------- */
.cnav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:none;flex-direction:column;gap:10px;opacity:0;transition:opacity .4s var(--ease)}
.cnav.on{opacity:1}
.cnav a{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:18px}
.cnav i{width:8px;height:8px;border-radius:50%;border:1px solid var(--faint);background:var(--bg);transition:all .3s var(--ease)}
.cnav span{font-size:12px;color:var(--ink-2);opacity:0;transform:translateX(6px);transition:all .25s var(--ease);background:rgba(252,253,252,.9);padding:2px 8px;border-radius:99px}
.cnav a:hover span,.cnav a.ativo span{opacity:1;transform:none}
.cnav a.ativo i{background:var(--gold-deep);border-color:var(--gold-deep);transform:scale(1.25)}
.cnav.escuro i{border-color:#56615a;background:var(--dark)}
.cnav.escuro span{background:rgba(16,21,18,.85);color:#eef1ee}
@media (min-width:1180px){.cnav{display:flex}}

/* botão magnético */
.mag{will-change:transform}

@media (max-width:960px){
  .dark-grid,.cta-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  .vhero{padding:32px 0 20px}
  .marca{width:min(300px,80vw);margin-bottom:26px}
  .cap{padding:24px 0 80px}
  .chap{margin-bottom:36px;gap:10px}
  .chap-n{font-size:32px}
  .chap-of{display:none}
  .ig-grid{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .marca,.chap-n,.chap-t,.chap-of,.ig-post{opacity:1!important;transform:none!important}
  .chap-l,.trilho i{transform:none!important}
  .split .w>span{transform:none!important}
  .desenha .ic *{stroke-dashoffset:0!important}
  .marca .brilho{animation:none!important;display:none}
  .desce{animation:none!important;opacity:1;transform:none}
  .desce-trilho b{animation:none!important;transform:translateY(21px)}
  .prog{display:none}
}

/* correções da revisão por print (29/09) */
.fact b span{font-size:inherit;color:inherit;display:inline}
.etapa{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold-50);border:1px solid var(--gold-100);border-radius:99px;padding:3px 10px;margin-bottom:14px}

/* sócios: retrato (quadro reservado à foto) */
.p-retrato{display:grid;gap:56px}
.p-par{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center}
.p-par.inv{grid-template-columns:1fr 320px}
.p-par.inv .p-quadro{order:2}
.p-quadro{aspect-ratio:4/5;border-radius:6px;background:var(--dark);display:grid;place-items:center;position:relative;overflow:hidden}
.p-quadro::after{content:"";position:absolute;inset:14px;border:1px solid rgba(233,214,168,.35);border-radius:3px}
.p-quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.p-quadro span{font-family:var(--mono);font-size:44px;letter-spacing:.04em;color:var(--gold-200)}
.p-par h3{font-size:24px;line-height:1.2}
.p-par .oab{margin-bottom:14px}
.p-linha .oab,.p-par .oab{font-family:var(--mono);font-size:13px;color:var(--gold-deep);margin-top:6px}
.p-par ul{list-style:none;margin:0;padding:0}
.p-par li{position:relative;padding:3px 0 3px 16px;font-size:14.5px}
.p-par li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:1px;background:var(--gold)}
@media (max-width:960px){.p-par,.p-par.inv{grid-template-columns:1fr;gap:20px}.p-par.inv .p-quadro{order:0}.p-quadro{max-width:260px}}

/* números do escritório: odômetro */
.nums-x{margin-top:32px;padding-top:24px;border-top:1px solid var(--dark-line);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nums-x b{display:block;font-family:var(--mono);font-weight:500;font-size:34px;line-height:1;color:var(--gold-200);letter-spacing:-.02em}
.nums-x [class$="-lb"]{display:block;margin-top:10px;font-size:13px;color:#a9b3ac}
/* 1 · odômetro */
.n1 b{display:flex;align-items:flex-start;height:1em;overflow:hidden}
.n1 .pl{opacity:0;transform:translateX(-6px);transition:opacity .5s,transform .5s var(--ease) .1s}
.n1 .dg{display:inline-block;height:1em;overflow:hidden}
.n1 .dg>span{display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.8s cubic-bezier(.16,.84,.24,1);transition-delay:calc(var(--i)*90ms)}
.n1 .dg i{font-style:normal;display:block;height:1em;line-height:1}
.n1 .n1-lb{position:relative;padding-top:10px}
.n1 .n1-lb::before{content:"";position:absolute;left:0;top:0;width:36px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) 1.2s}
.n1.in .pl{opacity:1;transform:none}
.n1.in .dg>span{transform:translateY(calc(var(--d)*-1em))}
.n1.in .n1-lb::before{transform:scaleX(1)}
@media (max-width:560px){.nums-x b{font-size:28px}}
@media (prefers-reduced-motion:reduce){
  .nums-x *,.nums-x *::before,.nums-x *::after{transition:none!important;animation:none!important}
  .n1 .pl{opacity:1;transform:none}
  .n1 .dg>span{transform:translateY(calc(var(--d)*-1em))}
  .n1 .n1-lb::before{transform:none}
}

/* ===== entrada própria por capítulo (29/09): só transform/opacity/clip-path ===== */
.cap .rv{transition-duration:.8s,.9s;transition-timing-function:var(--ease),cubic-bezier(.16,.84,.24,1)}
.cap .rv.d1{transition-delay:.16s}.cap .rv.d2{transition-delay:.32s}.cap .rv.d3{transition-delay:.48s}
/* como: cascata da esquerda + fio que se desenha na etapa */
#como .stepcard.rv{transform:translateX(-36px)}
#como .etapa::after{content:"";display:block;height:1px;margin-top:6px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .6s}
#como .stepcard.in .etapa::after{transform:scaleX(1)}
#como .stepcard.d1 .etapa::after{transition-delay:.76s}#como .stepcard.d2 .etapa::after{transition-delay:.92s}
/* áreas: onda linha a linha + brilho dourado que atravessa o topo uma vez */
#areas .area{position:relative}
#areas .area.rv{transform:translateY(28px) scale(.96);transition-delay:calc(var(--i)*70ms)}
#areas .area::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transform-origin:left;opacity:0}
#areas .area.in::before{animation:area-fio 1.2s var(--ease) forwards;animation-delay:calc(var(--i)*70ms + .35s)}
@keyframes area-fio{0%{transform:scaleX(0);transform-origin:left;opacity:1}50%{transform:scaleX(1);transform-origin:left;opacity:1}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right;opacity:1}}
/* escritório: visão, missão e valores chegam da direita */
#escritorio .dcard.rv{transform:translateX(40px)}
/* sócios: cortina revela o retrato; texto vem do lado oposto */
#socios .p-par.rv{opacity:1;transform:none}
#socios .p-quadro{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s cubic-bezier(.77,0,.18,1)}
#socios .p-quadro>*{transform:scale(1.18);transition:transform 1.8s cubic-bezier(.16,.84,.24,1)}
#socios .p-texto{opacity:0;transform:translateX(32px);transition:opacity .8s var(--ease) .45s,transform .9s cubic-bezier(.16,.84,.24,1) .45s}
#socios .p-par.inv .p-texto{transform:translateX(-32px)}
#socios .p-par.in .p-quadro{clip-path:inset(0 0 0 0)}
#socios .p-par.in .p-quadro>*{transform:none}
#socios .p-par.in .p-texto{opacity:1;transform:none}
/* artigos: cortina da cor do fundo sobe revelando o cartão
   (clip-path total no próprio cartão faz o IntersectionObserver nunca disparar) */
#artigos .post{position:relative;overflow:hidden}
#artigos .post.rv{opacity:1;transform:translateY(28px);transition:transform 1s cubic-bezier(.16,.84,.24,1)}
#artigos .post::before{content:"";position:absolute;inset:-1px;z-index:2;background:var(--tint);transform-origin:top;transition:transform 1.1s cubic-bezier(.77,0,.18,1) .1s;pointer-events:none}
#artigos .post.rv.d1,#artigos .post.d1::before{transition-delay:.25s}
#artigos .post.rv.in{transform:none}
#artigos .post.in::before{transform:scaleY(0)}
/* instagram: cascata mais marcada */
.ig-post{transform:translateY(28px) scale(.92)}
/* contato: linhas do endereço em sequência; botão do WhatsApp pulsa uma vez */
#contato .addr .r,#contato .addr .sym{opacity:0;transform:translateX(-18px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
#contato .addr.in .r,#contato .addr.in .sym{opacity:1;transform:none}
#contato .addr.in>*:nth-child(2){transition-delay:.12s}#contato .addr.in>*:nth-child(3){transition-delay:.24s}
#contato .addr.in>*:nth-child(4){transition-delay:.36s}#contato .addr.in>*:nth-child(5){transition-delay:.48s}
#contato .btn-w{position:relative}
#contato .btn-w::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--gold-200);opacity:0;pointer-events:none}
#contato .rv.in .btn-w::after{animation:pulso 1.4s var(--ease) .9s 1}
@keyframes pulso{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.35,1.6)}}
@media (prefers-reduced-motion:reduce){
  .cap .rv,#como .stepcard.rv,#areas .area.rv,#escritorio .dcard.rv,#artigos .post.rv,.ig-post{transform:none!important;opacity:1!important;transition:none!important}
  #como .etapa::after{transform:none;transition:none}
  #areas .area::before,#contato .btn-w::after{animation:none!important;opacity:0}
  #artigos .post::before{display:none}
  #socios .p-quadro{clip-path:none;transition:none}#socios .p-quadro>*{transform:none;transition:none}
  #socios .p-texto,#contato .addr .r,#contato .addr .sym{opacity:1;transform:none;transition:none}
}

/* escritório em fundo claro (tint, igual a Como trabalhamos) — pedido de 29/09 */
#escritorio{overflow:hidden}
#escritorio .wrap{position:relative}
#escritorio .spot{opacity:.55}
#escritorio .dcard{background:var(--surface);border-color:var(--line)}
#escritorio .dcard:hover{border-color:var(--gold-200);background:var(--surface)}
#escritorio .dcard .h b{color:var(--ink)}
#escritorio .dcard .h span{color:var(--muted)}
#escritorio .dcard p{color:var(--body)}
#escritorio .vals span{border-color:var(--gold-200);color:var(--gold-ink);background:var(--gold-50)}
#escritorio .nums-x{border-top-color:var(--line-2)}
#escritorio .nums-x b{color:var(--gold-deep)}
#escritorio .nums-x [class$="-lb"]{color:var(--ink-2)}