/* Agência Confronto · edição Revelação
   O preto fosco é o palco; a luz desce do alto (o feixe) e revela, num plano de marfim, a pessoa e a mensagem.
   Sem halo, sem partículas, sem linhas finas, sem vidro: a luz é plano e linha.
   O feixe é a única linha da página e a única transição de cor (transparente → dourado): é a luz da marca. */
@font-face{font-family:Cinzel;src:url(../fonts/Cinzel-400.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Cinzel;src:url(../fonts/Cinzel-500.ttf);font-weight:500;font-display:swap}
@font-face{font-family:Cinzel;src:url(../fonts/Cinzel-600.ttf);font-weight:600;font-display:swap}
@font-face{font-family:Cinzel;src:url(../fonts/Cinzel-700.ttf);font-weight:700;font-display:swap}

:root{
  --preto:#0F0F0F; --preto2:#1A1815; --marfim:#EFE8DA; --marfim2:#E6DDCB;
  --env:#C19D65; --luz:#DCC089; --ouro:#C6A667; --ouroP:#7A5C22;
  --texto:#E6E0D6; --pedra:#9C958B; --tinta:#5D5546;
  --margem:clamp(20px,6vw,96px);
  --topo:84px;
  --gap:52px;                      /* respiro do feixe: ele para antes da figura (aprovado) */
  /* escala: seis tamanhos fazem o trabalho visível */
  --t-display:clamp(33px,5vw,72px); /* título do início (cada frase numa linha) */
  --t-h2:clamp(25px,4.2vw,60px);
  --t-h3:clamp(22px,1.9vw,28px);
  --t-lead:clamp(20px,1.65vw,25px);
  --t-body:clamp(17px,1.25vw,19px);
  --t-small:14px;
  --t-dito:clamp(22px,2.6vw,36px); /* frase destacada (parágrafo), não título */
  --t-gigante:clamp(72px,7.6vw,110px);
  --sec:clamp(96px,11vw,170px);    /* distância entre seções */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--topo)}
body{font-family:Cinzel,Georgia,serif;font-size:var(--t-body);line-height:1.55;background:var(--preto);color:var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:700;line-height:1.06;letter-spacing:-.01em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
.escuro{background:var(--preto);color:var(--texto)}
.escuro h1 span,.escuro h2 span,.escuro h3 span{color:var(--env)}
.claro{background:var(--marfim);color:var(--preto)}
.claro h2 span,.claro h3 span{color:var(--ouroP)}
section{position:relative}
.lead{font-size:var(--t-lead);font-weight:500;line-height:1.45}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* botões: chapados, cantos retos */
.btn{display:inline-block;font-size:var(--t-small);font-weight:700;letter-spacing:.16em;padding:20px 32px;transition:background .3s,color .3s,transform .2s}
.btn:active{transform:translateY(1px)}
.btn.claro{background:var(--marfim);color:var(--preto)}
.btn.claro:hover,.btn.claro:focus-visible{background:var(--luz)}
.btn.linha{background:var(--preto2);color:var(--luz)}
.btn.linha:hover,.btn.linha:focus-visible{background:#2a2621;color:var(--marfim)}
.btn.escuro-btn{background:var(--preto);color:var(--marfim)}
.btn.escuro-btn:hover,.btn.escuro-btn:focus-visible{background:#2a2621}
.acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.acoes.centro{justify-content:center}
:focus-visible{outline:2px solid var(--luz);outline-offset:4px}

/* topo: barra chapada */
.topo{position:fixed;inset:0 0 auto 0;height:var(--topo);z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 var(--margem);background:var(--preto)}
.marca img{height:44px;width:auto}
.topo nav{display:flex;gap:clamp(18px,3vw,44px);font-size:var(--t-small);font-weight:600;letter-spacing:.14em;color:var(--texto)}
.topo nav a{transition:color .25s}
.topo nav a:hover,.topo nav a:focus-visible{color:var(--luz)}
.topo nav .destaque{color:var(--env)}

/* o fio de luz: acompanha a rolagem e liga as seções; no feed, a luz corre sem parar */
.fio{position:fixed;left:clamp(14px,1.8vw,30px);top:calc(var(--topo) + 28px);bottom:28px;z-index:9;width:20px}
.fio-trilho{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(193,157,101,.22)}
.fio-luz{position:absolute;inset:0;transform-origin:top;transform:scaleY(0);background:linear-gradient(to bottom,rgba(220,192,137,0),var(--luz) 10%,var(--ouro))} /* taste-skill-ignore: o feixe */
.no-caminho .fio-luz{background:linear-gradient(to bottom,var(--ouro) 0%,var(--luz) 50%,var(--ouro) 100%);background-size:100% 30%;animation:corre 4s linear infinite} /* taste-skill-ignore: o feixe */
@keyframes corre{from{background-position:0 0}to{background-position:0 100%}}
.fio ol{list-style:none;position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}
.fio a{display:block;width:10px;height:10px;border-radius:50%;background:#4a4134;position:relative;transition:background .3s,transform .3s}
.fio a.passou{background:var(--env)}
.fio a.ativo{background:var(--luz);transform:scale(1.4)}
.fio a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fio a:hover span,.fio a:focus-visible span{width:auto;height:auto;clip:auto;overflow:visible;left:22px;top:50%;transform:translateY(-50%);font-size:var(--t-small);font-weight:600;letter-spacing:.12em;color:var(--luz);background:var(--preto);padding:6px 10px}
@media (max-width:1100px){.fio{display:none}}

/* 1 · o escuro: cada frase do título numa linha; o escudo 3D sob a luz do alto */
.hero{min-height:90svh;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:center;gap:24px;padding:calc(var(--topo) + 32px) var(--margem) 96px}
.hero h1{font-size:var(--t-display)}
.hero h1 span{white-space:nowrap}
.hero h1 .l1{white-space:nowrap}
.hero .lead{color:var(--texto);margin-top:30px;max-width:30ch}
.hero-escudo{position:relative;aspect-ratio:1;width:100%;max-width:640px;justify-self:center}
.hero-escudo canvas,.escudo-fallback{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)} /* taste-skill-ignore: máscara do render 3D, não preenchimento */
.escudo-fallback{display:none}
.sem-3d .escudo-fallback{display:block}
.sem-3d canvas{display:none}

/* convite para descer: a luz escorre e aponta a próxima seção */
.desce{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;padding:8px 14px}
.desce span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.desce i{display:block;width:2px;height:60px;background:linear-gradient(to bottom,rgba(220,192,137,0),var(--luz));transform-origin:top;animation:escorre 2.4s ease-in-out infinite} /* taste-skill-ignore: o feixe */
@keyframes escorre{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* o escuro e a luz: título de um lado, a lista do outro, em letra grande */
.grade2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,120px);align-items:start;padding:var(--sec) var(--margem)}
.apagado .grade2{padding-top:clamp(40px,6vw,96px)}
.lista{list-style:none;display:grid;gap:clamp(18px,2vw,28px)}
.lista li{font-size:var(--t-lead);font-weight:500;line-height:1.35}
.escuro .lista li{color:var(--texto)}
.claro .lista li{color:var(--preto)}

/* 2 e 3 · a virada: o feixe desce, para no centro e se abre em plano de marfim */
.virada{height:240svh;background:var(--preto);view-timeline-name:--virada}
.palco{position:sticky;top:0;height:100svh;overflow:hidden}
.plano{position:absolute;inset:0;background:var(--marfim);clip-path:inset(0 0 0 0)}
.frase{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--margem);color:var(--preto)}
.frase h2{font-size:clamp(32px,8.4vw,110px)}
.frase h2 span{color:var(--ouroP)}
.frase p{font-size:var(--t-lead);font-weight:500;line-height:1.5;max-width:42ch;margin-top:34px;color:var(--preto)}
@supports (animation-timeline: view()){
  .plano{animation:abrir linear both;animation-timeline:--virada;animation-range:contain 0% contain 80%}
  .frase{animation:aparecer linear both;animation-timeline:--virada;animation-range:contain 62% contain 92%}
}
@keyframes abrir{
  0%{clip-path:inset(0 calc(50% - 1px) 100% calc(50% - 1px));background:var(--luz)}
  45%{clip-path:inset(0 calc(50% - 1px) 0 calc(50% - 1px));background:var(--luz)}
  55%{background:var(--marfim)}
  100%{clip-path:inset(0 0 0 0);background:var(--marfim)}
}
@keyframes aparecer{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.estatico .plano,.estatico .frase{animation:none!important}

/* método: os números grandes em dourado são da identidade (manual: número 400, dourado) */
.metodo{padding:var(--sec) var(--margem)}
.metodo .lead{margin-top:18px;color:var(--preto)}
.frentes{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(48px,6vw,90px)}
.frentes li{min-width:0}
.frentes b{display:block;font-size:var(--t-gigante);font-weight:400;line-height:1;color:var(--ouroP)}
.frentes h3{margin-top:24px}
.frentes p{margin-top:12px;color:var(--preto)}
.trilha{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:clamp(48px,6vw,90px);font-size:var(--t-small);font-weight:700;letter-spacing:.14em;color:var(--ouroP)}
.trilha i{display:block;width:clamp(30px,6vw,90px);height:2px;background:linear-gradient(to right,rgba(198,166,103,.2),var(--ouro))} /* taste-skill-ignore: o feixe na trilha */

/* case e sobre: a foto mora no recorte; o feixe para antes dela */
.case,.sobre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center;padding:calc(var(--sec) * .8) var(--margem)}
.recorte-foto{position:relative;margin:0}
.recorte-foto .moldura{aspect-ratio:4/5;overflow:hidden}
.recorte-foto.alto .moldura{aspect-ratio:3/4}
.recorte-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.recorte-foto:hover img{transform:scale(1.02)}
.recorte-foto::before{content:"";position:absolute;left:50%;top:calc(-70px - var(--gap));width:2px;height:70px;margin-left:-1px;background:linear-gradient(to bottom,rgba(198,166,103,0),var(--ouro));z-index:1} /* taste-skill-ignore: o feixe */
.recorte-foto figcaption{font-size:var(--t-small);font-weight:600;letter-spacing:.08em;margin-top:14px;color:var(--tinta)}
.case-texto .lead{color:var(--ouroP);font-weight:700;margin-top:24px}
.case-texto p:not(.lead),.sobre-texto p{margin-top:22px;color:var(--preto)}
.case-texto .btn{margin-top:40px}
.sobre{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.sobre blockquote{font-size:var(--t-lead);font-weight:600;line-height:1.4;margin-top:30px;color:var(--ouroP)}
.sobre .valores{font-size:var(--t-small);font-weight:700;letter-spacing:.12em;line-height:2;color:var(--ouroP);margin-top:34px}

/* contato: de volta ao palco; a assinatura do conceito */
.contato{text-align:center;padding:0 var(--margem) 56px}
.feixe-fixo{width:2px;height:clamp(110px,14vw,190px);margin:0 auto var(--gap);background:linear-gradient(to bottom,rgba(220,192,137,0),var(--luz))} /* taste-skill-ignore: o feixe */
.contato-simbolo{width:clamp(110px,11vw,160px);margin:0 auto 46px}
.contato h2{font-size:var(--t-h2)}
.contato-dados{margin-top:34px;font-size:var(--t-small);font-weight:700;letter-spacing:.1em;color:var(--pedra)}
.contato-dados a{text-transform:lowercase;color:var(--texto);transition:color .25s}
.contato-dados a:hover,.contato-dados a:focus-visible{color:var(--luz)}
.contato-legal{margin-top:14px;font-size:var(--t-small);font-weight:600;letter-spacing:.06em;color:var(--pedra)}
.contato .desce{position:static;transform:none;margin:64px auto 0;width:max-content}

/* o caminho continua: feed que não acaba (peças, filmes e pausas) */
.caminho{padding:var(--sec) var(--margem) 0}
.caminho h2{font-size:var(--t-h2)}
.caminho .lead{margin-top:20px;color:var(--preto)}
.caminho .lead a{color:var(--ouroP)}
.feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(10px,1.4vw,20px);margin-top:56px}
.peca{display:block;overflow:hidden;min-width:0;background:var(--preto)}
.peca img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .6s}
.peca:hover img,.peca:focus-visible img{transform:scale(1.025)}
.filme{grid-row:span 2;position:relative;overflow:hidden;background:var(--preto);min-width:0}
.filme video{width:100%;height:100%;object-fit:cover}
.filme figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:rgba(15,15,15,.82);font-size:var(--t-small);font-weight:700;letter-spacing:.1em;color:var(--texto)}
.pausa{grid-column:1/-1;position:relative;background:var(--preto);color:var(--texto);text-align:center;padding:clamp(90px,10vw,140px) var(--margem) clamp(60px,8vw,110px)}
.pausa-feixe{position:absolute;left:50%;top:0;width:2px;height:clamp(44px,5vw,72px);margin-left:-1px;background:linear-gradient(to bottom,rgba(220,192,137,0),var(--luz))} /* taste-skill-ignore: o feixe */
.pausa .dito{font-size:var(--t-dito);font-weight:700;line-height:1.25;max-width:30ch;margin:0 auto}
.pausa .dito span{color:var(--env)}
.pausa .btn{margin-top:38px}
.sentinela{height:150px;display:flex;justify-content:center;padding-top:30px}
.sentinela i{display:block;width:2px;height:80px;background:linear-gradient(to bottom,var(--ouro),rgba(198,166,103,0));transform-origin:top;animation:escorre 2.4s ease-in-out infinite} /* taste-skill-ignore: o feixe */

/* sempre à mão, porque a página não termina: voltar ao topo e WhatsApp */
.flutua{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,28px);z-index:11;display:none;flex-direction:column;align-items:flex-end;gap:10px}
.flutua.ver{display:flex}
@media (prefers-reduced-motion:no-preference){.flutua.ver{animation:chega .35s ease both}}
@keyframes chega{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.flutua a{display:block;font-size:var(--t-small);font-weight:700;letter-spacing:.14em;padding:15px 22px;background:var(--preto);color:var(--marfim);transition:background .25s,color .25s}
.flutua a.wa{background:var(--marfim);color:var(--preto)}
.flutua a:hover,.flutua a:focus-visible{background:var(--luz);color:var(--preto)}

/* entrada das partes de cada seção (só com movimento permitido; sem script, tudo aparece) */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
  .js .rv.in{opacity:1;transform:none}
}

@media (max-width:900px){
  :root{--topo:68px;--t-display:8.6vw}
  .marca img{height:34px}
  .topo nav{font-size:13px;letter-spacing:.12em}
  .topo nav a:not(.destaque){display:none}
  .hero{grid-template-columns:1fr;padding-top:calc(var(--topo) + 20px)}
  .hero-escudo{max-width:420px;order:-1;margin-bottom:-10px}
  .grade2,.case,.sobre{grid-template-columns:1fr}
  .case-texto,.sobre-texto{order:-1}
  .recorte-foto{margin-top:calc(70px + var(--gap))}
  .frentes{grid-template-columns:1fr}
  .virada{height:200svh}
  .contato-dados{letter-spacing:.04em;overflow-wrap:anywhere}
  .flutua a{padding:12px 16px}
  .frentes li{display:grid;grid-template-columns:auto 1fr;column-gap:24px;align-items:start}
  .frentes b{grid-row:span 2;font-size:72px}
  .frentes h3{margin-top:6px}
}
@media (max-width:700px){.feed{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .plano,.frase,.desce i,.sentinela i,.no-caminho .fio-luz{animation:none!important}
}
/* a primeira frase do título fica em marfim; só a segunda em dourado */
.escuro h1 .l1{color:var(--texto)}
/* atalhos visíveis sobre o preto e sobre o marfim */
.flutua a{background:var(--preto2);color:var(--luz)}
.flutua a.wa{background:var(--env);color:var(--preto)}
@media (max-width:900px){.flutua{flex-direction:row;gap:8px}.flutua a{padding:10px 14px;font-size:13px}}

/* "Quando você é" pequeno acima; o estado grande, numa cor só (pedido do Matheus; exceção à regra de rótulos) */
.kick{font-size:var(--t-small);font-weight:600;letter-spacing:.3em;margin-bottom:22px}
.escuro .kick{color:var(--env)} .claro .kick{color:var(--ouroP)}
.grade2 h2.grande{font-size:clamp(38px,5.4vw,78px)}
.metodo h2.grande{font-size:clamp(34px,5.4vw,78px)}

/* conteúdo com começo e fim: os filmes 3D e três peças (a versão sem fim foi descartada) */
.conteudo{padding:calc(var(--sec) * .8) var(--margem)}
.filmes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:56px}
.filmes .filme{margin:0;grid-row:auto}
.filmes video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--preto)}
.filmes figcaption{position:static;background:none;padding:14px 0 0;color:var(--preto);font-size:var(--t-small);font-weight:700;letter-spacing:.06em}
.pecas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(28px,3vw,44px)}
.conteudo > .btn{margin-top:44px}
.contato{padding-bottom:clamp(64px,8vw,110px)}
@media (max-width:700px){
  .filmes{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--margem) * -1);padding-right:var(--margem)}
  .filmes .filme{scroll-snap-align:start}
  .pecas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pecas .peca:nth-child(3){display:none}
}