/* =========================================================
   hyze. audiovisual — site
   Tokens e regras: ver hyze-briefing-site.md
   Movimento: tudo que anima fica sob .mov (ligado quando o
   sistema não pede movimento reduzido ou o botão do rodapé liga).
   ========================================================= */

:root{
  --roxo:#9D01FF;
  --preto:#06010B;
  --corte:#000;
  --branco:#fff;
  --nevoa:#8E8E93;
  --sup:#0E0A14;
  --linha:rgba(255,255,255,.07);
  --roxo-linha:rgba(157,1,255,.42);
  --roxo-fio:rgba(157,1,255,.75);
  --texto:#D6D6D8;
  --sans:'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --pad:clamp(20px,4.5vw,56px);
  --max:1280px;
  --topo:60px;
  --brilho:0 0 12px 2px rgba(157,1,255,.45),0 0 34px 9px rgba(157,1,255,.14);
  --ease:cubic-bezier(.16,.84,.3,1);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;scroll-padding-top:calc(var(--topo) + 8px)}
html.mov{scroll-behavior:smooth}
body{
  background:var(--preto);color:var(--branco);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
input{font:inherit;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:1px solid var(--roxo);outline-offset:3px}
::selection{background:rgba(157,1,255,.55);color:#fff}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.nevoa{color:var(--nevoa)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h2{font-size:clamp(2rem,3.6vw,2.75rem);font-weight:700;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
h3{font-size:clamp(1.25rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.2}
p{color:var(--texto);max-width:62ch}
.lead{font-size:clamp(1.0625rem,1.2vw,1.125rem);color:#E6E6E8;line-height:1.6}

/* ---------- degradês (valores exatos do briefing) ---------- */
.grad-sobe{background:
  radial-gradient(155% 170% at 50% 116%,rgba(157,1,255,.44) 0%,rgba(128,0,224,.26) 20%,rgba(84,0,152,.145) 40%,rgba(44,0,82,.07) 62%,transparent 84%),
  linear-gradient(180deg,rgba(140,0,235,.05) 0%,rgba(140,0,235,.10) 100%),#06010B}
.grad-canto{background:
  radial-gradient(130% 155% at 100% -6%,rgba(157,1,255,.40) 0%,rgba(124,0,218,.23) 20%,rgba(80,0,146,.13) 40%,rgba(42,0,78,.06) 62%,transparent 84%),
  linear-gradient(200deg,rgba(140,0,235,.08) 0%,rgba(140,0,235,.03) 100%),#06010B}
.grad-lado{background:
  radial-gradient(120% 150% at -6% 48%,rgba(157,1,255,.38) 0%,rgba(120,0,212,.22) 22%,rgba(78,0,142,.12) 42%,rgba(40,0,76,.06) 64%,transparent 85%),
  linear-gradient(90deg,rgba(140,0,235,.07) 0%,rgba(140,0,235,.02) 100%),#06010B}
.grad-sopro{background:
  radial-gradient(88% 105% at 50% 46%,rgba(157,1,255,.26) 0%,rgba(118,0,208,.15) 28%,rgba(70,0,128,.075) 50%,transparent 88%),#06010B}

/* ---------- marca ---------- */
.marca{display:inline-flex;align-items:baseline;font-weight:700;letter-spacing:-.062em;line-height:.84;white-space:nowrap}
.marca .pt{display:block;width:.22em;height:.22em;border-radius:50%;background:var(--roxo);margin-left:.125em;flex:none}
.lockup{display:inline-flex;flex-direction:column;align-items:flex-end}
.assin{font-weight:400;text-transform:lowercase;color:#C9C9CC;letter-spacing:.38em;margin-right:-.38em}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:48px;padding:0 20px;border-radius:2px;
  font-size:15px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  border:1px solid rgba(255,255,255,.24);
  transition:background-color .18s,border-color .18s,color .18s;
}
.btn:hover{border-color:#fff}
.btn svg{width:16px;height:16px;flex:none}
.btn.claro{background:#fff;border-color:#fff;color:var(--preto)}
.btn.claro:hover{background:#E8E3EF;border-color:#E8E3EF}
.btn.roxo{background:var(--roxo);border-color:var(--roxo);color:#fff}
.btn.roxo:hover{background:#8C00E6;border-color:#8C00E6}

/* ---------- colchetes de enquadramento ---------- */
.cantos{position:absolute;inset:0;pointer-events:none;z-index:3;--ci:5%;--cl:18px}
.cantos i{position:absolute;width:var(--cl);height:var(--cl)}
.cantos i::before,.cantos i::after{content:"";position:absolute;background:var(--roxo-linha)}
.cantos i::before{height:1px;width:100%}
.cantos i::after{width:1px;height:100%}
.cantos i:nth-child(1){top:var(--ci);left:var(--ci)}
.cantos i:nth-child(2){top:var(--ci);right:var(--ci)}
.cantos i:nth-child(3){bottom:var(--ci);left:var(--ci)}
.cantos i:nth-child(4){bottom:var(--ci);right:var(--ci)}
.cantos i:nth-child(1)::before,.cantos i:nth-child(1)::after{top:0;left:0}
.cantos i:nth-child(2)::before,.cantos i:nth-child(2)::after{top:0;right:0}
.cantos i:nth-child(3)::before,.cantos i:nth-child(3)::after{bottom:0;left:0}
.cantos i:nth-child(4)::before,.cantos i:nth-child(4)::after{bottom:0;right:0}
.cantos i:nth-child(odd)::before{transform-origin:left center}
.cantos i:nth-child(even)::before{transform-origin:right center}
.cantos i:nth-child(-n+2)::after{transform-origin:center top}
.cantos i:nth-child(n+3)::after{transform-origin:center bottom}

/* ---------- fio de timecode ---------- */
.fio{position:relative;height:1px;background:rgba(255,255,255,.1);--p:var(--alvo,0)}
.fio b{position:absolute;left:0;top:0;height:1px;width:calc(var(--p) * 100%);background:var(--roxo-fio)}
.fio u{position:absolute;top:-4px;left:calc(var(--p) * 100%);width:1px;height:9px;background:rgba(255,255,255,.6)}
.fio-rot{display:flex;justify-content:space-between;margin-top:10px;color:var(--nevoa)}
.mov .fio:not(.on){--p:0}
.mov .fio b{transition:width 1.4s var(--ease)}
.mov .fio u{transition:left 1.4s var(--ease)}

/* =========================================================
   TOPO
   ========================================================= */
.topo{position:fixed;inset:0 0 auto 0;height:var(--topo);z-index:50;background:rgba(6,1,11,.94)}
.topo .wrap{height:100%;display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
.topo .marca{font-size:24px}
.tc-vivo{display:flex;align-items:center;gap:9px;color:var(--nevoa);font-variant-numeric:tabular-nums}
.tc-vivo i{width:6px;height:6px;border-radius:50%;background:var(--roxo);box-shadow:var(--brilho)}
.topo nav{display:flex;gap:clamp(16px,2vw,28px);margin-left:auto;font-size:14.5px;color:#C9C9CC}
.topo nav a{padding:6px 0;transition:color .18s}
.topo nav a:hover{color:#fff}
.topo .btn{min-height:40px;padding:0 16px;font-size:14px}
.topo-fio{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.1)}
.topo-fio b{position:absolute;inset:0;background:var(--roxo-fio);transform-origin:left center;transform:scaleX(0)}
.topo-fio u{position:absolute;left:0;top:-4px;width:1px;height:9px;background:rgba(255,255,255,.6)}
@media (max-width:900px){.topo nav{display:none}.topo .btn{margin-left:auto}}
@media (max-width:420px){.tc-vivo{display:none}}

/* =========================================================
   ABERTURA
   ========================================================= */
.hero{
  position:relative;min-height:100vh;min-height:100svh;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--topo) + 96px) 0 clamp(64px,11vh,128px);
}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:.62}
.hero-veu{position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(6,1,11,.7) 0%,rgba(6,1,11,.15) 38%,rgba(6,1,11,.35) 62%,rgba(6,1,11,.92) 100%)}
.hero-brilho{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(150% 150% at 50% 100%,rgba(157,1,255,.5) 0%,rgba(128,0,224,.3) 20%,rgba(84,0,152,.16) 40%,rgba(44,0,82,.07) 62%,transparent 84%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%)}
.hero:not(.com-video) .hero-veu{display:none}

.visor{position:absolute;inset:var(--topo) 0 0 0;pointer-events:none;z-index:0}
.visor .cantos{--ci:clamp(14px,2.6vw,36px);--cl:clamp(20px,3vw,44px)}
.terco{position:absolute;background:rgba(255,255,255,.05)}
.terco.v{top:0;bottom:0;width:1px}
.terco.h{left:0;right:0;height:1px}
.terco.v1{left:33.333%}.terco.v2{left:66.666%}
.terco.h1{top:33.333%}.terco.h2{top:66.666%}

.hud{position:absolute;inset:var(--topo) 0 0 0;pointer-events:none;z-index:1;color:#C9C9CC;--hi:calc(clamp(14px,2.6vw,36px) + clamp(12px,1.4vw,18px))}
.hud > *{position:absolute;display:flex;align-items:center;gap:9px}
.hud-rec{top:var(--hi);left:var(--hi)}
.hud-rec i{width:8px;height:8px;border-radius:50%;background:var(--roxo);box-shadow:var(--brilho)}
.hud-tc{top:var(--hi);right:var(--hi);font-variant-numeric:tabular-nums}
.hud-fmt{bottom:var(--hi);left:var(--hi);color:var(--nevoa)}

.hero-conteudo{position:relative;z-index:2;display:grid;gap:clamp(36px,5vw,56px);width:100%}
@media (min-width:1200px){
  .hero-conteudo{grid-template-columns:auto minmax(0,27rem);align-items:end;justify-content:space-between}
}
.olho{display:flex;align-items:center;gap:10px;color:#C9C9CC;margin-bottom:clamp(20px,3vw,32px)}
.olho i{width:6px;height:6px;border-radius:50%;background:var(--roxo)}
.marca-hero{font-size:clamp(5.5rem,17vw,14rem)}
.marca-hero .nm{display:block}
.assin-hero{font-size:clamp(.8rem,1.3vw,1.15rem);margin-top:1.1em}
.hero h1{font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.22;max-width:24ch;text-wrap:balance}
.hero h1 span{color:rgba(255,255,255,.52)}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:520px){.acoes .btn{flex:1 1 100%}}

/* assinatura de abertura — 2 s a 24 fps, uma vez */
.mov .marca-hero .pt{animation:ponto-entra .75s var(--ease) both}
.mov .marca-hero .nm{animation:nome-entra .67s .58s var(--ease) both}
.mov .assin-hero{animation:surge .5s 1.2s ease-out both}
.mov .hero .olho,.mov .hero-texto{animation:surge .6s .9s ease-out both}
.mov .visor .cantos i::before{animation:traco-x .5s 1.05s var(--ease) both}
.mov .visor .cantos i::after{animation:traco-y .5s 1.05s var(--ease) both}
.mov .terco.v{animation:traco-y 1s 1.25s var(--ease) both}
.mov .terco.h{animation:traco-x 1s 1.25s var(--ease) both}
.mov .hud{animation:surge .5s 1.5s ease-out both}
.mov .hud-rec i{animation:rec 2.6s ease-in-out 2s infinite}
.mov .hero-brilho{animation:respira 8s ease-in-out infinite alternate}

@keyframes ponto-entra{
  0%{opacity:0;transform:scale(3.2)}
  10%{opacity:1}
  33%{opacity:1}
  67%{opacity:.4;transform:scale(1)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes nome-entra{from{opacity:0;transform:translateX(.16em)}to{opacity:1;transform:none}}
@keyframes surge{from{opacity:0}to{opacity:1}}
@keyframes traco-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes traco-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rec{0%,62%,100%{opacity:1}76%{opacity:.35}}
@keyframes respira{from{opacity:1}to{opacity:.85}}

/* =========================================================
   SEÇÕES
   ========================================================= */
.sec{position:relative;isolation:isolate;padding:clamp(80px,9vw,128px) 0}

/* fundos de seção: ficam num ::before que passa um pouco da borda e se
   dissolve em cima e embaixo — uma seção derrete na outra, sem corte */
.sec::before{
  content:"";position:absolute;inset:-96px 0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 240px,#000 calc(100% - 240px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 240px,#000 calc(100% - 240px),transparent 100%);
}
.fundo-corte::before{background:#000}
.fundo-lado::before{background:
  radial-gradient(120% 150% at -6% 48%,rgba(157,1,255,.42) 0%,rgba(120,0,212,.24) 22%,rgba(78,0,142,.13) 42%,rgba(40,0,76,.06) 64%,transparent 85%)}
.fundo-direita::before{background:
  radial-gradient(110% 140% at 106% 40%,rgba(157,1,255,.36) 0%,rgba(120,0,212,.2) 22%,rgba(78,0,142,.11) 42%,rgba(40,0,76,.05) 64%,transparent 85%),#030007}
.fundo-sopro::before{background:
  radial-gradient(62% 72% at 26% 60%,rgba(157,1,255,.3) 0%,rgba(118,0,208,.17) 28%,rgba(70,0,128,.08) 50%,transparent 88%)}
@media (max-width:1039px){.fundo-sopro::before{background:
  radial-gradient(90% 60% at -10% 30%,rgba(157,1,255,.28) 0%,rgba(118,0,208,.15) 30%,rgba(70,0,128,.07) 52%,transparent 88%)}}
.fundo-canto::before{background:
  radial-gradient(130% 155% at 100% -6%,rgba(157,1,255,.46) 0%,rgba(124,0,218,.27) 20%,rgba(80,0,146,.15) 40%,rgba(42,0,78,.07) 62%,transparent 84%)}
.fundo-sobe::before{background:
  radial-gradient(155% 150% at 50% 100%,rgba(157,1,255,.5) 0%,rgba(128,0,224,.3) 20%,rgba(84,0,152,.16) 40%,rgba(44,0,82,.07) 62%,transparent 84%)}

/* número de capítulo, em contorno, apoiado no fio de abertura da seção */
.fio .cap{
  position:absolute;right:0;bottom:16px;pointer-events:none;user-select:none;
  font-size:clamp(3.5rem,8vw,7rem);font-weight:800;letter-spacing:-.05em;line-height:.74;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.18);font-variant-numeric:tabular-nums;
  clip-path:inset(0);
}
.mov .fio .cap{transition:clip-path 1.2s var(--ease) .2s,opacity 1.2s ease .2s}
.mov .fio:not(.on) .cap{clip-path:inset(100% 0 0 0);opacity:0}

/* conteúdo entra suave quando chega na tela — uma vez, deslocamento curto */
.mov .rv{opacity:.18;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rd,0ms)}
.mov .rv.rv-in{opacity:1;transform:none}
.sec > .wrap > .fio:first-child{margin-bottom:clamp(56px,7vw,88px)}
.sec-cab{margin-bottom:clamp(40px,5.5vw,72px);display:grid;gap:22px}
@media (min-width:1000px){
  .sec-cab.duas{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:56px}
  .sec-cab.duas .tc{grid-column:1 / -1;margin-bottom:-4px}
}
.tc{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--nevoa);font-variant-numeric:tabular-nums}
.tc b{color:var(--roxo);font-weight:400}

/* ---------- modelo ---------- */
.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.numero{position:relative;padding:30px clamp(16px,3vw,40px) 0 0}
.numero::before{content:"";position:absolute;top:-5px;left:0;width:1px;height:9px;background:rgba(255,255,255,.6)}
.numero .big{display:block;font-size:clamp(3.5rem,7vw,6rem);font-weight:800;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.numero .rot{display:block;font-size:clamp(1.0625rem,1.5vw,1.25rem);font-weight:600;letter-spacing:-.015em;margin:14px 0 18px}
.numero .mono{display:block;color:var(--nevoa);margin-bottom:10px}
.numero p{font-size:16px}
@media (max-width:800px){
  .numeros{grid-template-columns:1fr;gap:44px}
  .numero{padding-top:0}
  .numero::before{display:none}
  .numeros-fio{display:none}
}

/* ---------- trabalhos ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{
  display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 15px;border-radius:2px;
  border:1px solid rgba(255,255,255,.14);font-size:14px;color:#C9C9CC;transition:border-color .18s,color .18s;
}
.chip:hover{border-color:rgba(255,255,255,.4);color:#fff}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{border-color:#fff;color:#fff}
.chip[aria-pressed="true"]::before,.chip[aria-checked="true"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--roxo)}

.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(190px,19vw,290px);gap:clamp(8px,1.1vw,14px);grid-auto-flow:dense}
.card{position:relative;display:block;overflow:hidden;border-radius:3px;background:var(--sup);width:100%;height:100%}
.card.largo{grid-column:span 2}
.card.alto{grid-row:span 2}
.card[hidden]{display:none}
.card-midia{position:absolute;inset:0}
.card-midia img{width:100%;height:100%;object-fit:cover;transition:filter .25s}
.card:hover .card-midia img{filter:brightness(1.08)}
.card-veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,1,11,0) 42%,rgba(6,1,11,.88) 100%)}
.card-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(16px,1.6vw,22px);display:grid;gap:6px}
.card-titulo{display:block;font-size:clamp(1rem,1.3vw,1.125rem);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.card-meta{display:block;color:var(--nevoa);font-size:10.5px}
.card-play{position:absolute;top:clamp(16px,1.6vw,22px);left:clamp(16px,1.6vw,22px);z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:border-color .2s}
.card-play svg{width:12px;height:12px;margin-left:2px}
.card:hover .card-play,.card:focus-visible .card-play{border-color:var(--roxo)}
.card .cantos{--cl:16px}
.card .cantos i::before{transform:scaleX(0);transition:transform .22s var(--ease)}
.card .cantos i::after{transform:scaleY(0);transition:transform .22s var(--ease)}
.card:hover .cantos i::before,.card:focus-visible .cantos i::before{transform:scaleX(1)}
.card:hover .cantos i::after,.card:focus-visible .cantos i::after{transform:scaleY(1)}
.card .cantos i:nth-child(2n)::before,.card .cantos i:nth-child(2n)::after{transition-delay:.04s}
.card:focus-visible{outline-offset:2px}

.ph{position:absolute;inset:0;display:grid;place-items:center}
.ph svg{width:clamp(48px,5vw,72px);height:auto;opacity:.9}
.ph-rot{position:absolute;top:clamp(16px,1.6vw,22px);right:clamp(16px,1.6vw,22px);text-align:right;color:rgba(255,255,255,.34);font-size:10px;line-height:1.7}
.card.video .ph-rot{top:clamp(16px,1.6vw,22px)}

@media (max-width:900px){.grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .grade{grid-template-columns:1fr;grid-auto-rows:250px}
  .card.largo{grid-column:auto}
}
.vazio-filtro{padding:48px 0;color:var(--nevoa)}

/* ---------- equipe ---------- */
.equipe{display:grid;gap:clamp(40px,5vw,72px)}
@media (min-width:1040px){
  .equipe{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .diagrama-caixa{position:sticky;top:calc(var(--topo) + 40px)}
}
.diagrama{width:100%;height:auto;display:block;overflow:visible}
@media (max-width:1039px){.diagrama-caixa{display:none}}
.dg-anel{fill:none;stroke:rgba(255,255,255,.05)}
.dg-linha{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke .2s}
.dg-pt{fill:#06010B;stroke:rgba(255,255,255,.4);stroke-width:1;transition:stroke .2s,fill .2s}
.dg-no.nucleo .dg-pt{fill:var(--roxo);stroke:var(--roxo)}
.dg-nome{fill:#fff;font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-.01em}
.dg-tag{fill:var(--nevoa);font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.dg-centro{fill:#06010B;stroke:var(--roxo-linha)}
.dg-marca{fill:#fff;font-family:var(--sans);font-weight:700;font-size:25px;letter-spacing:-1.55px}
.dg-no.ativo .dg-linha{stroke:var(--roxo-fio)}
.dg-no.ativo .dg-pt{stroke:var(--roxo)}
.mov .diagrama:not(.on) .dg-linha{stroke-dashoffset:1}
.mov .diagrama .dg-linha{transition:stroke-dashoffset .9s var(--ease) var(--d),stroke .2s}
.mov .diagrama:not(.on) .dg-pt,.mov .diagrama:not(.on) text{opacity:0}
.mov .diagrama .dg-pt,.mov .diagrama .dg-no text{transition:opacity .4s ease-out calc(var(--d) + .55s),stroke .2s,fill .2s}

.frentes{border-bottom:1px solid var(--linha)}
.frente{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:18px;align-items:start;padding:18px 0;border-top:1px solid var(--linha)}
.frente h3{font-size:1.0625rem;margin:3px 0 4px}
.frente p{font-size:15.5px;line-height:1.5}
.frente .tag{color:var(--nevoa);padding-top:7px}
.ico{width:44px;height:44px;border-radius:50%;border:1px solid var(--roxo-linha);display:grid;place-items:center;color:var(--roxo);transition:border-color .2s}
.ico svg{width:22px;height:22px}
.frente.ativo .ico{border-color:var(--roxo)}
@media (max-width:520px){.frente{grid-template-columns:44px minmax(0,1fr)}.frente .tag{display:none}.ico{width:44px;height:44px}}

/* ---------- monte a equipe ---------- */
.eventos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,4vw,44px)}
.eventos .chip{min-height:42px;padding:0 16px;font-size:14.5px}
.monte{display:grid;gap:clamp(32px,4vw,56px)}
@media (min-width:1040px){.monte{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.monte-rot{display:flex;justify-content:space-between;color:var(--nevoa);padding-bottom:12px}
.toggles{border-bottom:1px solid var(--linha)}
.tg{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:15px 2px;border-top:1px solid var(--linha);transition:color .15s}
.tg-rec{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:border-color .15s}
.tg-rec::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--roxo);opacity:0;transition:opacity .15s}
.tg-nome{font-size:16px;font-weight:500;color:#9C9CA2}
.tg-tag{color:#5E5E64}
.tg[aria-pressed="true"] .tg-rec{border-color:var(--roxo)}
.tg[aria-pressed="true"] .tg-rec::after{opacity:1}
.tg[aria-pressed="true"] .tg-nome{color:#fff}
.tg[aria-pressed="true"] .tg-tag{color:var(--roxo)}
.tg:hover .tg-nome{color:#fff}
.tg.sub{padding-left:32px;border-top-style:dashed}
.tg.sub .tg-rec{width:14px;height:14px;margin-left:2px}
.tg.sub .tg-rec::after{width:6px;height:6px}
.tg.sub .tg-nome{font-size:15px}
.tg:disabled{opacity:.35;cursor:default}
.tg:disabled:hover .tg-nome{color:#9C9CA2}
.sub-op{margin-top:10px;font-size:14.5px!important;color:#C9C9CC}
.sub-op .mono{color:var(--roxo);margin-right:10px}

.ficha{position:relative;border:1px solid var(--linha);border-radius:3px;padding:clamp(24px,3.4vw,44px)}
.ficha .cantos{--ci:14px;--cl:18px}
.ficha-topo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:var(--nevoa)}
.ficha-topo b{color:#fff;font-weight:400}
.ficha-n{display:flex;align-items:flex-end;gap:16px;margin:22px 0 10px}
.ficha-n strong{font-size:clamp(3.5rem,6vw,5rem);font-weight:800;letter-spacing:-.05em;line-height:.82;font-variant-numeric:tabular-nums}
.ficha-n span{font-size:17px;font-weight:600;letter-spacing:-.01em;padding-bottom:6px}
.ficha-resumo{font-size:16px;margin-bottom:24px}
.ficha-equipe{font-size:14.5px;color:#C9C9CC;padding:14px 0 26px;border-top:1px solid var(--linha)}
.fases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-top:22px;border-top:1px solid var(--linha)}
.fase .mono{display:block;color:var(--nevoa);margin-bottom:14px}
.fase li{position:relative;padding-left:15px;font-size:14.5px;line-height:1.45;color:#E2E2E4;margin-bottom:10px}
.fase li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--roxo)}
.fase li.vazia{color:#5E5E64}
.fase li.vazia::before{background:#3A3A40}
@media (max-width:640px){.fases{grid-template-columns:1fr;gap:18px}}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0 14px}
.campo{display:grid;gap:8px}
.campo .mono{color:var(--nevoa);font-size:10.5px}
.campo input{height:50px;padding:0 14px;border-radius:2px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:16px;width:100%;min-width:0}
.campo input:focus{outline:none;border-color:var(--roxo)}
.campo input::placeholder{color:#5E5E64}
@media (max-width:520px){.campos{grid-template-columns:1fr}}
.ficha .btn{width:100%;min-height:52px;font-size:15.5px}
.ficha-nota{font-size:13px;color:var(--nevoa);margin-top:12px}

/* ---------- processo ---------- */
.passos{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);padding-top:44px;--prog:0}
.trilho{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.1)}
.trilho b{position:absolute;inset:0;background:var(--roxo-fio);transform-origin:left center;transform:scaleX(var(--prog))}
.passo{position:relative}
.passo-pt{position:absolute;top:-49px;left:0;width:11px;height:11px;border-radius:50%;background:var(--preto);border:1px solid rgba(255,255,255,.35);transition:background-color .2s,border-color .2s,box-shadow .2s}
.passo .mono{display:block;color:var(--nevoa);margin-bottom:12px;font-variant-numeric:tabular-nums}
.passo h3{margin-bottom:8px;color:#9C9CA2;transition:color .2s}
.passo p{font-size:15.5px}
.passo.on .passo-pt{background:var(--roxo);border-color:var(--roxo);box-shadow:var(--brilho)}
.passo.on h3{color:#fff}
@media (max-width:860px){
  .passos{grid-template-columns:1fr;padding:0 0 0 36px;gap:40px}
  .trilho{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .trilho b{transform-origin:center top;transform:scaleY(var(--prog))}
  .passo-pt{top:4px;left:-36px}
}

/* ---------- a produtora ---------- */
.pilares{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.pilar{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:grid;gap:10px;align-content:start}
.pilar .mono{display:flex;align-items:center;gap:9px;color:var(--nevoa)}
.pilar .mono::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--roxo)}
.pilar h3{font-size:1.25rem}
.pilar p{font-size:15.5px}
@media (max-width:1000px){.pilares{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}}
@media (max-width:560px){.pilares{grid-template-columns:1fr}}
.rede p{font-size:16px;margin-top:10px}
.direcao{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 40px;margin-top:clamp(48px,6vw,72px);padding-top:22px;border-top:1px solid var(--linha)}
.direcao .mono{color:var(--nevoa);font-size:10.5px}
.direcao p{font-size:15px;font-weight:500;color:#E2E2E4;max-width:none}
.direcao p span{font-weight:400;color:var(--nevoa);margin-left:10px}
@media (max-width:560px){.direcao{flex-direction:column;align-items:flex-start;gap:8px}}
.rede{margin-top:clamp(56px,7vw,88px);display:grid;gap:22px}
@media (min-width:1000px){.rede{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start;column-gap:56px}}
.rede ul{display:flex;flex-wrap:wrap;gap:10px}
.rede li{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;border:1px solid var(--linha);border-radius:2px;font-size:15px;color:#E2E2E4}
.rede li::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.4)}

/* ---------- depoimentos ---------- */
.depos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
@media (max-width:900px){.depos{grid-template-columns:1fr}}
.depo{border-top:1px solid var(--linha);padding-top:26px;display:grid;gap:22px;align-content:start}
.depo svg{width:30px;height:auto}
.depo blockquote{font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;line-height:1.45}
.depo figcaption{font-size:14px;color:#9C9CA2}
.depo figcaption span{color:var(--roxo);margin:0 7px}

/* ---------- contato ---------- */
.contato{padding-bottom:clamp(64px,8vw,104px)}
.contato-grid{display:grid;gap:48px}
@media (min-width:1040px){.contato-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:center}}
.contato h2{font-size:clamp(2.75rem,6.4vw,5rem);font-weight:800;letter-spacing:-.045em;line-height:.95;margin:22px 0 26px}
.contato .lead{max-width:44ch}
.contato .acoes{margin-top:34px}
.padrao{width:100%;max-width:340px;aspect-ratio:1;display:block}
@media (max-width:1039px){.padrao{display:none}}
.canais{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:clamp(64px,8vw,104px);border-top:1px solid var(--linha)}
.canal{padding:22px 20px 0 0;display:grid;gap:8px;align-content:start}
.canal .mono{color:var(--nevoa);font-size:10.5px}
.canal a,.canal span:last-child{font-size:16px;font-weight:500}
.canal a{transition:color .18s}
.canal a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--roxo);text-underline-offset:4px}
@media (max-width:860px){.canais{grid-template-columns:1fr 1fr;row-gap:28px}}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha);padding:44px 0 56px}
.rodape .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.rodape .marca{font-size:34px}
.rodape .assin{font-size:10.5px;margin-top:10px}
.selo{width:112px;height:112px}
.selo text{font-family:var(--sans)}
.rodape-info{display:grid;gap:8px;justify-items:end;color:var(--nevoa);text-align:right}
.mov-toggle{display:inline-flex;align-items:center;gap:9px;color:var(--nevoa);padding:6px 0;transition:color .18s}
.mov-toggle:hover{color:#fff}
.mov-toggle i{width:7px;height:7px;border-radius:50%;border:1px solid currentColor}
.mov .mov-toggle i{background:var(--roxo);border-color:var(--roxo)}
@media (max-width:700px){.rodape-info{justify-items:start;text-align:left}}

/* ---------- botão fixo de WhatsApp ---------- */
.zap{
  position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:60;
  width:58px;height:58px;border-radius:50%;background:var(--roxo);color:#fff;
  display:grid;place-items:center;box-shadow:var(--brilho);transition:background-color .18s;
}
.zap:hover{background:#8C00E6}
.zap svg{width:27px;height:27px}
.zap-rot{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;
  background:#fff;color:var(--preto);font-size:14px;font-weight:600;padding:9px 14px;border-radius:2px;
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.zap:hover .zap-rot,.zap:focus-visible .zap-rot{opacity:1}
@media (hover:none){.zap-rot{display:none}}

/* ---------- caixa (lightbox) ---------- */
.caixa{border:0;padding:0;background:transparent;color:#fff;width:min(1180px,94vw);max-width:none;max-height:94vh;margin:auto;overflow:visible}
.caixa::backdrop{background:rgba(3,0,6,.92)}
.caixa[open]{display:flex;flex-direction:column;gap:16px}
.caixa-midia{position:relative;width:100%;aspect-ratio:16/9;max-height:80vh;background:#000;border-radius:3px;overflow:hidden}
.caixa.vertical{width:min(460px,94vw)}
.caixa.vertical .caixa-midia{aspect-ratio:9/16}
.caixa-midia iframe,.caixa-midia video,.caixa-midia > img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.caixa-fotos{position:absolute;inset:0;overflow-y:auto;display:grid;gap:8px;padding:8px;background:#000}
.caixa-fotos img{width:100%;height:auto}
.caixa-pend{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--nevoa)}
.caixa-rodape{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.caixa-rodape h3{font-size:1.25rem}
.caixa-rodape .mono{color:var(--nevoa);display:block;margin-top:6px}
.caixa-fechar{color:#C9C9CC;padding:10px 0;flex:none}
.caixa-fechar:hover{color:#fff}
.caixa-rodape > div:first-child{flex:1;min-width:0}
.caixa-nav{display:flex;gap:10px}
.caixa-nav[hidden]{display:none}
.caixa.modo-foto .caixa-midia{aspect-ratio:3/2}
.caixa.retrato{width:min(560px,94vw)}
.caixa.retrato .caixa-midia{aspect-ratio:2/3}

/* ---------- fotografia: folha de contato ---------- */
.fotos-bloco{margin-top:clamp(64px,8vw,104px)}
.fotos-bloco[hidden]{display:none}
.fotos-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px;margin-bottom:22px}
.fotos-cab p{font-size:15px;color:var(--nevoa);margin-top:6px}
.fotos-ctrl{display:flex;align-items:center;gap:10px}
.fotos-cont{color:var(--nevoa);margin-right:6px;font-variant-numeric:tabular-nums}
.seta{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#fff;transition:border-color .18s,opacity .18s}
.seta:hover:not(:disabled){border-color:#fff}
.seta:disabled{opacity:.3;cursor:default}
.seta svg{width:16px;height:16px}
.fotos{position:relative;display:flex;gap:clamp(8px,1vw,12px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.fotos::-webkit-scrollbar{display:none}
.foto-item{flex:none;display:grid;gap:10px;scroll-snap-align:start}
.foto-item figcaption{color:var(--nevoa);font-size:10.5px}
.quadro{position:relative;display:block;height:clamp(240px,30vw,420px);width:auto;aspect-ratio:3/2;border-radius:3px;overflow:hidden;background:#0B0810}
.quadro.v{aspect-ratio:2/3}
.quadro img{width:100%;height:100%;object-fit:cover;transition:filter .25s}
.quadro:hover img{filter:brightness(1.08)}
.quadro .cantos{--cl:16px}
.quadro .cantos i::before{transform:scaleX(0);transition:transform .22s var(--ease)}
.quadro .cantos i::after{transform:scaleY(0);transition:transform .22s var(--ease)}
.quadro:hover .cantos i::before,.quadro:focus-visible .cantos i::before{transform:scaleX(1)}
.quadro:hover .cantos i::after,.quadro:focus-visible .cantos i::after{transform:scaleY(1)}
.ph-ico{display:grid;color:rgba(255,255,255,.2)}
.fotos-fio{margin-top:22px}
.fotos-fio b,.fotos-fio u{transition:none!important}