/* ==========================================================================
AIJA CREATIVE · DESIGN SYSTEM
Campo em degradê vermelho · acento em luz · tipografia editorial
Contraste verificado WCAG 2.1 no pior tom do campo (#5C0E18)
========================================================================== */
/* ---------------------------------------------------------------
1. TOKENS
--------------------------------------------------------------- */
:root{
/* CAMPO: o degradê. Do mais profundo ao mais claro. */
--well: #0C0206; /* poço de mídia, imagem e vídeo sempre aqui */
--f0: #1A0408;
--f1: #2A0610;
--f2: #3A0912; /* vinho, tom médio do campo */
--f3: #4A0B16;
--f4: #5C0E18; /* crimson escuro, pico do campo */
/* LUZ: o acento migrou de vermelho para luz.
Vermelho sobre campo vermelho não acende (2.9:1). Luz acende. */
--light: #FFFFFF; /* 13.72:1 filamentos, cursor, bloom */
--hot: #FFC9C0; /* 9.38:1 labels pequenos, estado ativo */
--flare: #FF4A55; /* 4.16:1 linhas e acentos grandes (≥24px) */
/* TIPOGRAFIA */
--bone: #F2F0EC; /* 12.05:1 texto primário */
--mist: #C4ADAD; /* 6.48:1 texto secundário (cinza aquecido) */
--dim: #8E7476; /* 3.21:1 hairline e texto grande apenas */
--hair: rgba(255,255,255,.13);
--hair-soft: rgba(255,255,255,.07);
--glass: rgba(255,255,255,.05);
/* MOTION */
--t-fast: 180ms;
--t-base: 420ms;
--t-slow: 900ms;
--t-cinema: 1400ms;
--ease: cubic-bezier(.16,1,.3,1);
--ease-io: cubic-bezier(.65,0,.35,1);
/* TIPO */
--display:"Archivo","Helvetica Neue",Arial,sans-serif;
--text:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
/* LAYOUT */
--gut: clamp(18px,4.4vw,86px);
--max: 1480px;
--nav-h: 74px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* ---------------------------------------------------------------
2. O CAMPO: degradê vermelho em camadas + grain
O grain é obrigatório: sem ele o degradê faz banding e parece barato.
--------------------------------------------------------------- */
body{
margin:0;
background:var(--f0);
color:var(--bone);
font-family:var(--text);
font-size:16px;line-height:1.55;font-weight:400;letter-spacing:-.005em;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
min-height:100vh;
}
/* camada 1: o degradê de fundo, fixo.
O degradê ficava se movendo devagar, 34 segundos em laço infinito, para
sempre. Movimento embaixo de uma camada em mix-blend-mode (a camada 2,
logo abaixo) obriga o navegador a refazer a mistura da tela inteira a cada
quadro, sem parar, mesmo com a página parada e ninguém olhando. Era o custo
de fundo que fazia tudo o mais parecer lento. O degradê ficou: só parou de
se mexer, e a escala final virou o estado fixo, que é o enquadramento mais
bonito dos dois. */
body::before{
content:"";position:fixed;inset:-20vh -10vw;z-index:-2;pointer-events:none;
transform:translate3d(-1.2%,-0.8%,0) scale(1.04);
background:
radial-gradient(90% 60% at 12% 4%, #5C0E18 0%, rgba(92,14,24,0) 58%),
radial-gradient(80% 55% at 88% 26%, #4A0B16 0%, rgba(74,11,22,0) 55%),
radial-gradient(110% 70% at 50% 96%,#3A0912 0%, rgba(58,9,18,0) 62%),
radial-gradient(60% 40% at 78% 68%, #5C0E18 0%, rgba(92,14,24,0) 52%),
linear-gradient(176deg,#1A0408 0%,#2A0610 34%,#3A0912 62%,#1F050A 100%);
}
/* camada 2: grain + vinheta. Mata o banding.
Continua em soft-light, que é o que dá o acabamento caro ao degradê. Agora
isso custa uma composição só, na abertura, porque o que está embaixo dela
parou de se mexer. */
body::after{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background-image:
radial-gradient(130% 100% at 50% 50%, rgba(0,0,0,0) 42%, rgba(6,1,3,.62) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
background-size:auto, 200px 200px;
opacity:.9;
mix-blend-mode:soft-light;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* [hidden] é declarado pelo user-agent com especificidade zero; qualquer
regra de classe o sobrepõe. O !important é o que mantém o filtro do
portfólio funcionando. Não remover. */
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0}
::selection{background:var(--flare);color:#120306}
/* cursor customizado só em ponteiro fino */
@media (hover:hover) and (pointer:fine){
body.cur-on,body.cur-on *{cursor:none}
}
/* foco visível: nunca removido */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--hot);outline-offset:4px;border-radius:3px;
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:16px;z-index:200;background:var(--well);
color:var(--bone);padding:12px 20px;border:1px solid var(--hot);
font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:top var(--t-base) var(--ease)}
.skip:focus{top:16px}
/* ---------------------------------------------------------------
3. NAV PILL FLUTUANTE
--------------------------------------------------------------- */
.progress{
position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
background:linear-gradient(90deg,rgba(255,74,85,.2),var(--flare) 55%,var(--light));
box-shadow:0 0 14px 1px rgba(255,74,85,.7);
}
.nav{
position:fixed;top:14px;left:50%;transform:translateX(-50%);
z-index:110;width:calc(100% - 2*clamp(12px,3vw,40px));max-width:1180px;
}
.nav-pill{
display:flex;align-items:center;gap:clamp(8px,1.4vw,20px);
padding:8px 8px 8px clamp(16px,2.4vw,34px);
border-radius:999px;
background:linear-gradient(100deg,rgba(92,14,24,.62),rgba(42,6,16,.80) 62%,rgba(74,11,22,.66));
border:1px solid rgba(255,255,255,.15);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -1px 0 rgba(0,0,0,.35),
0 18px 44px -18px rgba(0,0,0,.85);
backdrop-filter:blur(22px) saturate(150%);
-webkit-backdrop-filter:blur(22px) saturate(150%);
transition:box-shadow var(--t-base) var(--ease),background var(--t-base) var(--ease);
}
.nav.stuck .nav-pill{
background:linear-gradient(100deg,rgba(70,11,20,.86),rgba(26,4,8,.92) 62%,rgba(58,9,18,.86));
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 52px -20px rgba(0,0,0,.95);
}
.nav-brand{
font-family:var(--display);font-weight:800;font-size:14px;
letter-spacing:.2em;margin-right:auto;white-space:nowrap;
}
.nav-brand span{color:var(--flare)}
.nav-links{display:flex;align-items:center;gap:clamp(10px,1.7vw,30px);list-style:none;margin:0;padding:0}
.nav-links a{
position:relative;display:block;padding:9px 2px;
font-size:14px;font-weight:400;color:var(--bone);white-space:nowrap;
transition:color var(--t-base) var(--ease);
}
.nav-links a::after{
content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;
background:var(--light);box-shadow:0 0 8px rgba(255,255,255,.8);
transition:right var(--t-base) var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-links a[aria-current="page"]{color:var(--hot)}
.nav-icons{display:flex;align-items:center;gap:7px;margin-left:8px}
.ic{
position:relative;
width:46px;height:46px;border-radius:999px;flex:0 0 46px;
display:grid;place-items:center;
background:#0A0206;border:1px solid rgba(255,255,255,.1);
color:var(--bone);
transition:background var(--t-base) var(--ease),transform var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;
stroke-linecap:round;stroke-linejoin:round;
transition:transform var(--t-base) var(--ease)}
.ic:hover{background:#160309;border-color:rgba(255,74,85,.55);
box-shadow:0 0 26px -4px rgba(255,74,85,.65);transform:translateY(-2px)}
.ic--go:hover svg{transform:translate(2px,-2px)}
.ic--menu .bar{display:block;width:17px;height:1.6px;background:currentColor;
border-radius:2px;transition:transform var(--t-base) var(--ease),opacity var(--t-fast) linear}
.ic--menu .bar+.bar{margin-top:5px}
body.menu-open .ic--menu .bar:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
body.menu-open .ic--menu .bar:nth-child(2){opacity:0}
body.menu-open .ic--menu .bar:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
/* --- WhatsApp: o botão primário. Recebe luz, os outros não. --- */
.ic--wa{
background:linear-gradient(158deg,#3A0912,#0A0206 72%);
border-color:rgba(255,74,85,.55);
box-shadow:0 0 24px -7px rgba(255,74,85,.75);
}
.ic--wa svg{fill:currentColor;stroke:none;width:19px;height:19px}
.ic--wa::before{ /* halo lento, sinaliza sem gritar */
content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
border:1px solid rgba(255,74,85,.55);opacity:0;
animation:halo 3.4s var(--ease-io) infinite;
}
@keyframes halo{
0% {opacity:.55;transform:scale(1)}
70% {opacity:0; transform:scale(1.28)}
100%{opacity:0; transform:scale(1.28)}
}
.ic--wa:hover{
background:linear-gradient(158deg,#4A0B16,#160309 72%);
border-color:var(--flare);
box-shadow:0 0 38px -6px rgba(255,74,85,.95);
}
.ic--wa .lbl{display:none}
@media(min-width:900px){
.ic--wa{
width:auto;flex-basis:auto;padding:0 19px;gap:9px;
grid-auto-flow:column;place-items:center;
}
.ic--wa .lbl{
display:inline;font-size:10.5px;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
}
/* --- Chip de idioma: mostra só o atual, abre as três opções --- */
.lang{position:relative;margin-left:6px;flex:0 0 auto}
.lang-btn{
display:flex;align-items:center;gap:6px;height:34px;padding:0 11px;
border:1px solid var(--hair);border-radius:999px;
font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
color:var(--mist);
transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
background var(--t-base) var(--ease);
}
.lang-btn:hover{color:var(--bone);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.lang-btn svg{width:9px;height:9px;stroke:currentColor;stroke-width:2.2;fill:none;
stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-base) var(--ease)}
.lang-btn[aria-expanded="true"]{color:var(--hot);border-color:rgba(255,74,85,.45)}
.lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lang-menu{
position:absolute;top:calc(100% + 10px);right:0;min-width:158px;z-index:130;
list-style:none;margin:0;padding:6px;
background:rgba(10,2,6,.96);
backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
border:1px solid var(--hair);border-radius:14px;
box-shadow:0 22px 48px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.1);
}
.lang-menu button{
display:block;width:100%;text-align:left;padding:10px 12px;border-radius:9px;
font-size:13px;color:var(--mist);
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.lang-menu button:hover{background:rgba(255,255,255,.07);color:var(--bone)}
.lang-menu button[aria-current="true"]{color:var(--hot)}
.lang-menu button[aria-current="true"]::after{content:" ·";color:var(--flare)}
/* --- Barra sugestiva de idioma: aparece uma vez, some ao tocar --- */
.langbar{
position:fixed;left:0;right:0;bottom:0;z-index:115;
display:flex;align-items:center;justify-content:center;gap:8px 18px;flex-wrap:wrap;
padding:13px 54px 13px 18px;
background:rgba(10,2,6,.95);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-top:1px solid rgba(255,74,85,.38);
transform:translateY(110%);transition:transform 520ms var(--ease);
}
.langbar.on{transform:none}
.langbar p{margin:0;font-size:13px;color:var(--mist);max-width:none}
.langbar .go{
font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
color:var(--bone);border:1px solid rgba(255,74,85,.55);border-radius:999px;
padding:9px 17px;transition:background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.langbar .go:hover{background:rgba(255,74,85,.14);box-shadow:0 0 26px -6px rgba(255,74,85,.8)}
.langbar .x{
position:absolute;right:14px;top:50%;transform:translateY(-50%);
width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
color:var(--dim);font-size:17px;line-height:1;
transition:color var(--t-base) var(--ease),background var(--t-base) var(--ease);
}
.langbar .x:hover{color:var(--bone);background:rgba(255,255,255,.07)}
/* --- Botão WhatsApp fora da barra (CTA final e contato) --- */
.btn--wa{border-color:rgba(255,74,85,.55);background:rgba(255,74,85,.09)}
.btn--wa:hover{background:rgba(255,74,85,.17);box-shadow:0 0 40px -8px rgba(255,74,85,.9)}
.btn--wa svg{width:17px;height:17px;fill:currentColor;stroke:none;flex:0 0 auto}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media(max-width:1080px){ .nav-links{display:none} }
@media(max-width:520px){
.ic{width:42px;height:42px;flex-basis:42px}
.nav-brand{font-size:12px}
.lang-btn{height:32px;padding:0 9px;font-size:10.5px}
.lang{margin-left:2px}
}
@media(max-width:400px){
.nav-pill{gap:6px;padding-left:12px}
.lang-btn{padding:0 7px}
}
/* ---------------------------------------------------------------
4. OVERLAY DE MENU
--------------------------------------------------------------- */
/* O menu ocupa a tela inteira e precisa caber na tela inteira, incluindo a
linha de contato lá embaixo. Duas regras garantem isso:
justify-content:center empurra o excedente para fora nas DUAS pontas quando
o conteúdo é mais alto que a caixa, e o que sai por cima fica inalcançável,
mesmo com rolagem. Por isso o alinhamento é ao topo e a centralização vem
do margin-block:auto da lista, que só centraliza quando sobra espaço e
encolhe para zero quando não sobra.
E overflow-y:auto para o caso de tela muito baixa: em vez de cortar, rola.
overscroll-behavior:contain impede que a rolagem vaze para a página atrás. */
.menu{
position:fixed;inset:0;z-index:105;
background:linear-gradient(165deg,#3A0912 0%,#1A0408 58%,#0C0206 100%);
clip-path:inset(0 0 100% 0);
/* visibility atrasa até o fim do fechamento, senão a animação de saída não aparece */
transition:clip-path 620ms var(--ease-io), visibility 0s linear 620ms;
display:flex;flex-direction:column;justify-content:flex-start;
padding:calc(var(--nav-h) + 28px) var(--gut) 28px;
visibility:hidden;
overflow-y:auto;overscroll-behavior:contain;
}
body.menu-open .menu{
clip-path:inset(0 0 0 0);visibility:visible;
transition:clip-path 620ms var(--ease-io), visibility 0s linear 0s;
}
.menu::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,transparent,var(--flare),var(--light),var(--flare),transparent);
box-shadow:0 0 24px 2px rgba(255,74,85,.8);opacity:0;
transition:opacity var(--t-base) var(--ease);
}
body.menu-open .menu::before{opacity:1}
/* margin-block:auto centraliza quando há espaço e some quando não há.
É o que substitui o justify-content:center sem criar excedente inalcançável. */
.menu-list{list-style:none;margin:0;padding:0;max-width:var(--max);width:100%;
margin-inline:auto;margin-block:auto;flex:0 0 auto}
.menu-list li{overflow:hidden;border-bottom:1px solid var(--hair-soft)}
/* O tamanho da tipografia obedece ao MENOR entre a largura e a altura da tela.
Só com vw, uma tela larga e baixa (um notebook comum) gerava seis itens de
88px que sozinhos passavam da altura disponível e empurravam a linha de
contato para fora. Com 7.4vh no cálculo, os seis itens mais o rodapé cabem. */
.menu-list a{
display:flex;align-items:baseline;gap:clamp(12px,2.4vw,34px);
padding:clamp(8px,1.6vh,20px) 0;
font-family:var(--display);font-weight:800;font-stretch:88%;
font-size:clamp(26px,min(7.4vw,7.4vh),88px);line-height:1.04;letter-spacing:-.035em;
color:var(--dim);
transform:translateY(105%);
transition:color var(--t-base) var(--ease),transform 620ms var(--ease),padding-left var(--t-base) var(--ease);
}
body.menu-open .menu-list a{transform:translateY(0)}
body.menu-open .menu-list li:nth-child(1) a{transition-delay:120ms}
body.menu-open .menu-list li:nth-child(2) a{transition-delay:180ms}
body.menu-open .menu-list li:nth-child(3) a{transition-delay:240ms}
body.menu-open .menu-list li:nth-child(4) a{transition-delay:300ms}
body.menu-open .menu-list li:nth-child(5) a{transition-delay:360ms}
.menu-list a:hover,.menu-list a:focus-visible{color:var(--bone);padding-left:clamp(10px,1.6vw,26px)}
.menu-list a[aria-current="page"]{color:var(--hot)}
.menu-list .n{
font-family:var(--text);font-size:11px;font-weight:500;letter-spacing:.24em;
color:var(--flare);flex:0 0 auto;
}
/* flex:0 0 auto impede que o rodapé seja espremido pela lista acima dele:
ele reserva a própria altura antes de qualquer outra coisa. */
.menu-foot{
max-width:var(--max);width:100%;margin:clamp(18px,3.4vh,44px) auto 0;
flex:0 0 auto;
display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;
font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.menu-foot a:hover{color:var(--bone)}
.menu-lang{display:flex;gap:14px}
.menu-lang button{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.menu-lang button[aria-pressed="true"]{color:var(--hot)}
/* ---------------------------------------------------------------
5. LAYOUT E TIPOGRAFIA
--------------------------------------------------------------- */
main{padding:0 var(--gut)}
.sec{max-width:var(--max);margin:0 auto;padding-block:clamp(64px,11vh,150px)}
.sec--line{border-top:1px solid var(--hair-soft)}
.eyebrow{
display:flex;align-items:baseline;gap:14px;
font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);
margin-bottom:clamp(22px,4vh,48px);
}
.eyebrow b{font-family:var(--display);font-weight:700;font-size:11px;
color:var(--flare);letter-spacing:.12em}
.eyebrow i{flex:1;height:1px;background:var(--hair);font-style:normal}
.d-xl{font-family:var(--display);font-weight:800;font-stretch:86%;
font-size:clamp(40px,9.6vw,142px);line-height:.96;letter-spacing:-.04em;margin:0;
text-wrap:balance}
.d-l{font-family:var(--display);font-weight:800;font-stretch:90%;
font-size:clamp(30px,6vw,80px);line-height:.98;letter-spacing:-.032em;margin:0 0 26px;
text-wrap:balance}
.d-m{font-family:var(--display);font-weight:700;font-stretch:94%;
font-size:clamp(20px,2.7vw,36px);line-height:1.02;letter-spacing:-.028em;margin:0 0 14px}
.d-s{font-family:var(--display);font-weight:700;font-size:clamp(16px,1.5vw,20px);
line-height:1.15;letter-spacing:-.02em;margin:0 0 10px}
.thin{font-weight:200;color:var(--mist)}
.flare{color:var(--flare)}
p{margin:0 0 16px;color:var(--mist);max-width:62ch}
.lead{color:var(--bone);font-size:clamp(16px,1.5vw,20px);line-height:1.45;max-width:52ch}
.small{font-size:13.5px;line-height:1.5}
strong{color:var(--bone);font-weight:500}
.label{font-family:var(--text);font-size:10px;font-weight:500;letter-spacing:.26em;
text-transform:uppercase;color:var(--hot);margin:0 0 12px}
.grid{display:grid;gap:clamp(22px,3.3vw,54px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
gap:clamp(22px,4vw,74px);align-items:start}
.split--tight{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
@media(max-width:880px){.g2,.g3,.split,.split--tight{grid-template-columns:1fr}}
/* ---------------------------------------------------------------
6. BOTÕES
--------------------------------------------------------------- */
.btn{
display:inline-flex;align-items:center;gap:14px;
padding:15px 28px;border:1px solid rgba(255,255,255,.26);
font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone);
background:rgba(12,2,6,.52);
transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.btn i{width:18px;height:1px;background:currentColor;flex:0 0 auto;
transition:width var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.btn:hover{border-color:var(--flare);background:rgba(255,74,85,.10);
box-shadow:0 0 34px -6px rgba(255,74,85,.6);color:var(--light)}
.btn:hover i{width:32px;background:var(--flare)}
.btn--solid{background:var(--well);border-color:transparent}
.btn--solid:hover{background:#160309}
/* ---------------------------------------------------------------
7. HERO
--------------------------------------------------------------- */
.hero{
max-width:var(--max);margin:0 auto;
min-height:clamp(560px,92vh,1000px);
padding-top:calc(var(--nav-h) + 6vh);padding-bottom:6vh;
display:flex;flex-direction:column;justify-content:flex-end;position:relative;
}
.hero--short{min-height:clamp(380px,62vh,680px)}
.beam{
height:1px;width:0;margin-bottom:clamp(20px,3.6vh,40px);
background:linear-gradient(90deg,transparent,var(--flare) 16%,var(--light) 62%,transparent);
box-shadow:0 0 20px 2px rgba(255,74,85,.6);
animation:beam var(--t-cinema) var(--ease) forwards;
}
@keyframes beam{from{width:0;opacity:0}22%{opacity:1}to{width:100%;opacity:1}}
/* wordmark recortado: o showreel corre dentro das letras */
.knock{position:relative;width:100%;aspect-ratio:1000/232;margin-bottom:clamp(18px,3.2vh,34px)}
.knock-media{position:absolute;inset:0;overflow:hidden;background:#2A0610}
.knock-media video,.knock-media img{width:100%;height:100%;object-fit:cover}
/* O degradê é maior que a caixa e desliza dentro dela. O deslize é feito com
transform, não com background-position: transform o compositor resolve na
placa de vídeo, background-position obriga a repintar o degradê inteiro a
cada quadro, 24 segundos sem parar, enquanto a página estiver aberta. */
.knock-media .fake{
position:absolute;inset:-14% -22%;
background:
radial-gradient(58% 120% at 16% 28%,rgba(255,74,85,.95),transparent 60%),
radial-gradient(70% 130% at 80% 72%,#7A0C14,transparent 62%),
linear-gradient(104deg,#1A0408,#4A0B16 40%,#E31B2B 66%,#2A0610);
animation:drift 24s var(--ease-io) infinite alternate;
will-change:transform;
}
@keyframes drift{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(4%,0,0)}}
.knock-plate{position:absolute;inset:0;width:100%;height:100%}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;
gap:clamp(18px,3vw,50px);flex-wrap:wrap;margin-top:clamp(20px,3.4vh,42px)}
.hero-foot p{max-width:34ch;margin:0}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;
margin-top:clamp(20px,3vh,36px)}
.hero-tags span{font-family:var(--display);font-weight:600;font-size:clamp(11px,1.15vw,14px);
letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.hero-tags em{font-style:normal;color:var(--flare)}
/* ---------------------------------------------------------------
8. POÇO DE MÍDIA: a trava que salva o portfólio
Toda imagem e vídeo vive num poço quase preto. Sem isso o campo
vermelho compete com a mídia e o trabalho perde força.
--------------------------------------------------------------- */
.well{
position:relative;overflow:hidden;background:var(--well);
border:1px solid var(--hair-soft);
box-shadow:inset 0 0 90px 20px rgba(0,0,0,.75),0 24px 60px -30px rgba(0,0,0,.9);
}
.well>img,.well>video{width:100%;height:100%;object-fit:cover;
transition:transform var(--t-slow) var(--ease),filter var(--t-slow) var(--ease)}
.well .ph{position:absolute;inset:0;
background:linear-gradient(138deg,#0C0206,#1A0408 46%,#2A0610 78%,#3A0912);
transition:transform var(--t-slow) var(--ease),filter var(--t-slow) var(--ease)}
.well .ph::after{
content:attr(data-ph);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.18);
white-space:nowrap;
}
/* ---------------------------------------------------------------
9. PORTFÓLIO: grade quebrada
--------------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:clamp(14px,2.2vw,34px);
padding-bottom:22px;border-bottom:1px solid var(--hair-soft);margin-bottom:clamp(24px,4vh,48px)}
.filters button{
position:relative;padding:6px 0;font-size:11px;letter-spacing:.22em;
text-transform:uppercase;color:var(--dim);transition:color var(--t-base) var(--ease);
}
.filters button::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
background:var(--flare);box-shadow:0 0 8px rgba(255,74,85,.9);
transition:right var(--t-base) var(--ease)}
.filters button:hover{color:var(--bone)}
.filters button[aria-pressed="true"]{color:var(--hot)}
.filters button[aria-pressed="true"]::after{right:0}
.reel{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.5vw,20px)}
.work{position:relative;display:block}
.work .well{width:100%;height:100%}
.work:hover .ph,.work:hover img,.work:hover video{transform:scale(1.045);filter:brightness(1.22) saturate(1.15)}
.work .meta{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.work .meta b{display:block;font-family:var(--display);font-weight:700;
font-size:clamp(13px,1.35vw,18px);letter-spacing:-.02em;color:var(--bone)}
.work .meta s{display:block;height:1px;width:0;background:var(--light);margin:6px 0;
box-shadow:0 0 8px rgba(255,255,255,.9);transition:width var(--t-base) var(--ease)}
.work:hover .meta s{width:52px}
.work .meta em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.22em;
text-transform:uppercase;color:var(--mist);opacity:0;transform:translateY(6px);
transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.work:hover .meta em{opacity:1;transform:none}
.work::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to top,rgba(6,1,3,.86),rgba(6,1,3,.18) 46%,transparent 72%)}
.w-full{grid-column:span 12;aspect-ratio:21/9}
.w-tall{grid-column:span 5;aspect-ratio:4/5}
.w-wide{grid-column:span 7;aspect-ratio:16/10;align-self:end}
.w-half{grid-column:span 6;aspect-ratio:3/2}
.w-in {grid-column:2/9;aspect-ratio:16/9}
.w-off {grid-column:6/13;aspect-ratio:5/4}
@media(max-width:820px){
.w-full,.w-tall,.w-wide,.w-half,.w-in,.w-off{grid-column:span 12;aspect-ratio:16/10}
.w-tall{aspect-ratio:4/5}
}
/* ---------------------------------------------------------------
10. SERVIÇOS: capítulos
--------------------------------------------------------------- */
.chap{
display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.85fr);
gap:clamp(14px,3vw,46px);align-items:center;
padding:clamp(18px,3vh,32px) clamp(0px,1.4vw,20px);
border-top:1px solid var(--hair-soft);
transition:background var(--t-base) var(--ease);
}
.chap:last-child{border-bottom:1px solid var(--hair-soft)}
.chap:hover{background:linear-gradient(90deg,rgba(255,74,85,.09),transparent 66%)}
.chap .n{
font-family:var(--display);font-weight:800;font-stretch:78%;
font-size:clamp(36px,6.2vw,84px);line-height:.8;letter-spacing:-.05em;
color:transparent;-webkit-text-stroke:1px var(--dim);
transition:-webkit-text-stroke-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.chap:hover .n{-webkit-text-stroke-color:var(--flare);color:rgba(255,74,85,.14)}
.chap h3{font-family:var(--display);font-weight:700;font-stretch:92%;
font-size:clamp(19px,3vw,38px);line-height:1;letter-spacing:-.03em;margin:0}
.chap p{font-size:13px;color:var(--mist);margin:0;line-height:1.45}
@media(max-width:820px){.chap{grid-template-columns:auto 1fr}.chap p{grid-column:1/-1}}
/* ---------------------------------------------------------------
11. STATEMENT AI / CRIATIVIDADE
--------------------------------------------------------------- */
.stmt{position:relative;padding:clamp(44px,9vh,110px) 0;overflow:hidden}
.stmt::before{
content:"";position:absolute;left:-8%;top:50%;width:116%;height:60%;
transform:translateY(-50%);pointer-events:none;
background:radial-gradient(ellipse at 32% 50%,rgba(255,74,85,.30),transparent 62%);
filter:blur(52px);
}
.stmt h2{position:relative;font-family:var(--display);font-weight:800;font-stretch:86%;
font-size:clamp(30px,7.6vw,104px);line-height:.96;letter-spacing:-.04em;margin:0}
.stmt h2+h2{color:var(--dim);margin-top:8px}
.stmt h2 em{font-style:normal;color:var(--flare)}
/* ---------------------------------------------------------------
12. PROCESSO
--------------------------------------------------------------- */
.proc{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--hair-soft)}
.proc>div{background:rgba(12,2,6,.42);padding:clamp(16px,2.4vw,26px) 14px;
transition:background var(--t-base) var(--ease)}
.proc>div:hover{background:rgba(12,2,6,.78)}
.proc b{display:block;font-family:var(--display);font-weight:800;
font-size:clamp(22px,3.2vw,42px);line-height:1;margin-bottom:14px;
color:transparent;-webkit-text-stroke:1px var(--dim);
transition:-webkit-text-stroke-color var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.proc>div:hover b{-webkit-text-stroke-color:var(--flare);color:var(--flare)}
.proc span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
@media(max-width:820px){.proc{grid-template-columns:repeat(2,1fr)}}
/* ---------------------------------------------------------------
13. INDÚSTRIAS
--------------------------------------------------------------- */
.ind{list-style:none;margin:0;padding:0}
.ind li{
display:flex;align-items:baseline;gap:16px;padding:clamp(9px,1.5vh,15px) 0;
border-bottom:1px solid var(--hair-soft);
font-family:var(--display);font-weight:700;font-stretch:90%;
font-size:clamp(19px,3vw,40px);line-height:1;letter-spacing:-.032em;color:var(--dim);
transition:color var(--t-base) var(--ease),padding-left var(--t-base) var(--ease);
cursor:default;
}
.ind li:hover{color:var(--bone);padding-left:clamp(8px,1.4vw,20px)}
.ind li i{font-style:normal;font-family:var(--text);font-size:9.5px;letter-spacing:.2em;
color:var(--flare);opacity:0;transition:opacity var(--t-base) var(--ease)}
.ind li:hover i{opacity:1}
/* ---------------------------------------------------------------
14. CASE STUDY
--------------------------------------------------------------- */
.case{border-top:1px solid var(--hair-soft);padding-block:clamp(38px,7vh,84px)}
.case-head{display:flex;justify-content:space-between;align-items:baseline;
gap:20px;flex-wrap:wrap;margin-bottom:clamp(20px,3.4vh,38px)}
.case-head .tag{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--flare)}
.case .well{aspect-ratio:16/9;margin-bottom:clamp(22px,3.6vh,44px)}
.case-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,52px)}
@media(max-width:880px){.case-cols{grid-template-columns:1fr}}
.case-cols h4{font-family:var(--text);font-size:10px;font-weight:500;letter-spacing:.24em;
text-transform:uppercase;color:var(--hot);margin:0 0 12px;
padding-bottom:10px;border-bottom:1px solid var(--hair-soft)}
.case-cols p{font-size:14px;margin:0}
.kpis{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);margin-top:clamp(22px,3.4vh,40px);
padding-top:clamp(20px,3vh,32px);border-top:1px solid var(--hair-soft)}
.kpi b{display:block;font-family:var(--display);font-weight:800;font-stretch:88%;
font-size:clamp(30px,4.4vw,58px);line-height:1;letter-spacing:-.04em;color:var(--light)}
.kpi span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
/* ---------------------------------------------------------------
15. FORMULÁRIO EDITORIAL
--------------------------------------------------------------- */
.sentence{
font-family:var(--display);font-weight:600;font-stretch:94%;
font-size:clamp(19px,2.7vw,36px);line-height:1.62;letter-spacing:-.022em;
color:var(--dim);max-width:24ch;margin:0;
}
.sentence .fld{
display:inline-block;min-width:6ch;max-width:100%;
font:inherit;color:var(--bone);text-align:left;
background:transparent;border:0;border-bottom:1px solid var(--dim);
padding:0 .22em 2px;
transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.sentence .fld::placeholder{color:var(--dim);opacity:1}
.sentence .fld:hover{border-color:var(--mist)}
.sentence .fld:focus{outline:none;border-color:var(--flare);
box-shadow:0 8px 22px -10px rgba(255,74,85,.9)}
.sentence select.fld{appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--flare) 50%),
linear-gradient(135deg,var(--flare) 50%,transparent 50%);
background-position:calc(100% - 9px) .62em,calc(100% - 4px) .62em;
background-size:5px 5px;background-repeat:no-repeat;padding-right:1.1em}
.sentence select.fld option{background:#1A0408;color:var(--bone);font-size:15px}
.form-err{display:block;font-family:var(--text);font-size:12px;letter-spacing:.04em;
color:var(--flare);margin-top:14px;min-height:18px}
.channels{display:grid;gap:1px;background:var(--hair-soft);margin-top:clamp(26px,4vh,50px)}
.channels a{display:flex;justify-content:space-between;align-items:center;gap:18px;
background:rgba(12,2,6,.42);padding:18px 20px;
transition:background var(--t-base) var(--ease),padding-left var(--t-base) var(--ease)}
.channels a:hover{background:rgba(12,2,6,.8);padding-left:28px}
.channels .k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.channels .v{font-family:var(--display);font-weight:700;font-size:clamp(14px,1.6vw,19px);
letter-spacing:-.02em;color:var(--bone)}
/* ---------------------------------------------------------------
16. CTA FINAL
--------------------------------------------------------------- */
.cta{position:relative;max-width:var(--max);margin:0 auto;
padding-block:clamp(70px,15vh,190px);text-align:left;overflow:hidden;
border-top:1px solid var(--hair-soft)}
.cta::before{
content:"";position:absolute;left:50%;top:52%;width:min(76vw,900px);height:min(46vh,440px);
transform:translate(-50%,-50%);pointer-events:none;
background:radial-gradient(ellipse at center,rgba(255,74,85,.42),rgba(122,12,20,.16) 40%,transparent 68%);
filter:blur(64px);
}
.cta h2{position:relative;font-family:var(--display);font-weight:800;font-stretch:84%;
font-size:clamp(34px,8.4vw,124px);line-height:.96;letter-spacing:-.038em;margin:0 0 clamp(26px,4.6vh,52px)}
.cta h2 .thin{color:var(--dim)}
.cta .btn{position:relative}
/* ---------------------------------------------------------------
17. RODAPÉ
--------------------------------------------------------------- */
/* Sem desfoque de fundo: o rodapé é uma faixa da largura da tela inteira,
e desfocar essa área toda custa mais do que o efeito entrega sobre um
fundo que já é quase preto. */
footer{border-top:1px solid var(--hair);background:rgba(6,1,3,.72);margin-top:0}
.foot-in{max-width:var(--max);margin:0 auto;padding:clamp(38px,6vh,66px) var(--gut) 26px;
display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));
gap:clamp(24px,3.4vw,54px)}
/* Os pontos de quebra do rodapé são ditados pela faixa de posicionamento:
a coluna da marca nunca pode ficar menor que a linha mais longa (297px).
4 colunas acima de 1000px, 2 colunas até 740px, 1 coluna abaixo disso. */
@media(max-width:999px){.foot-in{grid-template-columns:1fr 1fr}}
@media(max-width:739px){.foot-in{grid-template-columns:1fr}}
.foot-brand{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.14em;margin-bottom:10px}
.foot-brand span{color:var(--flare)}
.foot-in h5{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
font-weight:500;margin:0 0 16px}
.foot-in ul{list-style:none;margin:0;padding:0}
.foot-in li{margin-bottom:9px}
.foot-in li a,.foot-in p a{font-size:13.5px;color:var(--mist);transition:color var(--t-base) var(--ease)}
.foot-in li a:hover,.foot-in p a:hover{color:var(--bone)}
.foot-bar{max-width:var(--max);margin:0 auto;padding:20px var(--gut) 34px;
border-top:1px solid var(--hair-soft);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.foot-fil{height:1px;background:linear-gradient(90deg,transparent,var(--flare),transparent);
opacity:.5;animation:pulse 5s var(--ease-io) infinite}
@keyframes pulse{0%,100%{opacity:.22}50%{opacity:.72}}
/* ---------------------------------------------------------------
18. CURSOR
--------------------------------------------------------------- */
/* Sem mix-blend-mode aqui, e o motivo importa. Um elemento com blend não pode
ficar sozinho numa camada da placa de vídeo: a cada quadro o navegador tem
que ler o que está embaixo dele, misturar e recompor. Eram seis desses
(núcleo, anel e quatro rastros) andando juntos por cima de uma camada de
grão em soft-light e de uma barra com desfoque de fundo. O resultado era o
cursor atrasando em relação à mão. Sobre um fundo escuro, screen com branco
dá quase o mesmo resultado que o branco puro: o brilho aqui vem do
box-shadow, que é composto e não custa nada por quadro. */
#cur,#ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
will-change:transform}
#cur{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;
box-shadow:0 0 10px 2px rgba(255,74,85,.95),0 0 30px 8px rgba(122,12,20,.6)}
#ring{width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;
font-family:var(--text);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
color:#fff;opacity:0;transform:scale(.4);background:rgba(255,74,85,0);
transition:opacity var(--t-fast) var(--ease),width var(--t-base) var(--ease),
height var(--t-base) var(--ease),margin var(--t-base) var(--ease),
background var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.trail{position:fixed;top:0;left:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;
background:var(--flare);pointer-events:none;z-index:9998;
box-shadow:0 0 6px 1px rgba(255,74,85,.55);
will-change:transform}
/* ---------------------------------------------------------------
19. REVEAL
--------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(24px);
transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:80ms}.rv-d2{transition-delay:160ms}.rv-d3{transition-delay:240ms}
/* ---------------------------------------------------------------
20. MOBILE
Recomposto, não comprimido.
--------------------------------------------------------------- */
@media(max-width:640px){
:root{--nav-h:66px}
.d-xl{font-size:clamp(38px,13vw,70px);line-height:1;letter-spacing:-.032em}
.d-l{font-size:clamp(28px,9.5vw,50px);line-height:1.02}
.cta h2{font-size:clamp(32px,12vw,62px);line-height:1}
.stmt h2{font-size:clamp(28px,11vw,58px);line-height:1}
.hero{min-height:auto;padding-top:calc(var(--nav-h) + 8vh);padding-bottom:9vh}
.hero-foot{flex-direction:column;align-items:flex-start}
.work .meta em{opacity:1;transform:none} /* hover não existe: sempre visível */
.work .meta s{width:38px}
.ind li i{opacity:1}
.sentence{max-width:none;line-height:1.75}
.btn{width:100%;justify-content:space-between}
}
/* ---------------------------------------------------------------
21. REDUCED MOTION
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
.rv{opacity:1;transform:none}
.beam{width:100%}
.menu-list a{transform:none}
#cur,#ring,.trail{display:none!important}
body.cur-on,body.cur-on *{cursor:auto!important}
}
/* ---------------------------------------------------------------
22. IMPRESSÃO
--------------------------------------------------------------- */
@media print{
body::before,body::after,.nav,.menu,.progress,#cur,#ring,.trail{display:none!important}
body{background:#fff;color:#000}
}
/* --- Canal primário na página de contato --- */
.channels a.primary{
background:linear-gradient(90deg,rgba(255,74,85,.13),rgba(12,2,6,.42) 70%);
border-left:2px solid var(--flare);
}
.channels a.primary:hover{background:linear-gradient(90deg,rgba(255,74,85,.22),rgba(12,2,6,.7) 70%)}
.channels a.primary .k{color:var(--hot)}
/* ===============================================================
23. VÍDEO: fachada do YouTube + lightbox
O iframe do YouTube pesa ~1 MB e faz dezenas de requisições.
Aqui a página carrega só a miniatura (que vem do próprio YouTube,
de graça). O iframe só nasce quando a pessoa clica.
=============================================================== */
.work[data-yt]{cursor:pointer}
/* Sem backdrop-filter aqui. O Portfólio tem 24 blocos, e cada desfoque de
fundo obriga o navegador a ler a região atrás do selo e desfocá-la: eram 24
dessas leituras só para abrir a página. Sobre a miniatura, que já é escura,
um preto translúcido um pouco mais forte dá o mesmo resultado e custa zero. */
.work .play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);
z-index:3;width:64px;height:64px;border-radius:50%;
display:grid;place-items:center;pointer-events:none;
background:rgba(12,2,6,.66);border:1px solid rgba(255,255,255,.5);
transition:transform var(--t-base) var(--ease),background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.work .play::after{
content:"";width:0;height:0;margin-left:4px;
border-left:15px solid var(--bone);
border-top:9px solid transparent;border-bottom:9px solid transparent;
transition:border-left-color var(--t-base) var(--ease);
}
.work:hover .play{
transform:translate(-50%,-50%) scale(1.12);
background:rgba(255,74,85,.24);border-color:var(--flare);
box-shadow:0 0 44px -6px rgba(255,74,85,.9);
}
.work:hover .play::after{border-left-color:var(--light)}
@media(max-width:640px){ .work .play{width:52px;height:52px} }
.work .dur{
position:absolute;right:12px;top:12px;z-index:3;
font-size:9.5px;letter-spacing:.16em;color:var(--bone);
background:rgba(12,2,6,.82);border:1px solid var(--hair);
padding:4px 8px;
}
/* --- Lightbox --- */
.lb{
position:fixed;inset:0;z-index:200;display:none;
align-items:center;justify-content:center;padding:clamp(14px,4vw,64px);
}
.lb.on{display:flex}
.lb-bg{
position:absolute;inset:0;background:rgba(4,1,2,.93);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
opacity:0;transition:opacity var(--t-base) var(--ease);
}
.lb.in .lb-bg{opacity:1}
/* varredura de luz vermelha: a transição "entrar no filme" */
.lb-wipe{
position:absolute;inset:0;pointer-events:none;z-index:3;
background:linear-gradient(100deg,transparent 42%,rgba(255,74,85,.5) 50%,
rgba(255,255,255,.9) 52%,rgba(255,74,85,.5) 54%,transparent 62%);
transform:translateX(-110%);
}
.lb.in .lb-wipe{animation:wipe 900ms var(--ease-io) forwards}
@keyframes wipe{to{transform:translateX(110%)}}
.lb-box{
position:relative;z-index:2;width:100%;max-width:1240px;
opacity:0;transform:scale(.94) translateY(14px);
transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
}
.lb.in .lb-box{opacity:1;transform:none}
.lb-frame{
position:relative;aspect-ratio:16/9;width:100%;background:#000;
border:1px solid var(--hair);overflow:hidden;
box-shadow:0 40px 120px -40px rgba(0,0,0,1),0 0 90px -30px rgba(255,74,85,.45);
}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-head{
display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
flex-wrap:wrap;margin-bottom:16px;
}
.lb-head h3{
font-family:var(--display);font-weight:800;font-stretch:90%;
font-size:clamp(19px,2.6vw,34px);line-height:1;letter-spacing:-.03em;margin:0;
}
.lb-head .cat{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--flare);margin-bottom:8px}
.lb-close{
width:44px;height:44px;border-radius:50%;flex:0 0 44px;
display:grid;place-items:center;
background:rgba(12,2,6,.7);border:1px solid var(--hair);color:var(--bone);
transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
.lb-close:hover{background:rgba(255,74,85,.18);border-color:var(--flare);transform:rotate(90deg)}
.lb-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.lb-foot{
margin-top:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.lb-foot a{color:var(--mist);transition:color var(--t-base) var(--ease)}
.lb-foot a:hover{color:var(--bone)}
body.lb-open{overflow:hidden}
/* ===============================================================
24. DUAS PRODUTORAS: bloco comparativo na página Sobre
=============================================================== */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-soft);margin-top:clamp(26px,4vh,48px)}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.duo>div{background:rgba(12,2,6,.5);padding:clamp(22px,3vw,38px);position:relative}
.duo>div.this{background:linear-gradient(155deg,rgba(255,74,85,.10),rgba(12,2,6,.62) 62%)}
.duo .mark{
font-family:var(--display);font-weight:800;font-size:clamp(17px,1.9vw,23px);
letter-spacing:.14em;margin-bottom:6px;
}
.duo .mark em{font-style:normal;color:var(--flare)}
.duo .role{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--hot);margin-bottom:20px}
.duo>div:not(.this) .role{color:var(--dim)}
.duo ul{list-style:none;margin:0 0 22px;padding:0}
.duo li{
font-size:13.5px;color:var(--mist);padding:9px 0 9px 20px;position:relative;
border-bottom:1px solid rgba(255,255,255,.05);line-height:1.4;
}
.duo li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:1px;background:var(--dim)}
.duo>div.this li::before{background:var(--flare);box-shadow:0 0 7px rgba(255,74,85,.9)}
.duo .when{font-size:12.5px;color:var(--bone);line-height:1.45;margin:0 0 20px;max-width:none}
.duo .go{
display:inline-flex;align-items:center;gap:11px;
font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
border-bottom:1px solid var(--dim);padding-bottom:6px;
transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.duo .go:hover{color:var(--light);border-color:var(--flare)}
.duo .go i{width:16px;height:1px;background:currentColor;transition:width var(--t-base) var(--ease)}
.duo .go:hover i{width:26px;background:var(--flare)}
.duo .here{
font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--hot);
display:inline-flex;align-items:center;gap:9px;
}
.duo .here::before{
content:"";width:6px;height:6px;border-radius:50%;background:var(--flare);
box-shadow:0 0 10px 2px rgba(255,74,85,.9);
}
/* mídia de case study: mesma fachada de vídeo do portfólio */
.case-media{display:block;position:relative;aspect-ratio:16/9;margin-bottom:clamp(22px,3.6vh,44px)}
.case-media .well{width:100%;height:100%}
/* nome da marca sobre cada projeto do portfólio */
.work .meta .brand{
display:block;font-size:9px;font-weight:500;letter-spacing:.26em;
text-transform:uppercase;color:var(--hot);margin-bottom:5px;
text-shadow:0 1px 8px rgba(6,1,3,.9);
}
/* marca no cabeçalho do case study */
.case-head .brand{
display:block;font-family:var(--display);font-weight:800;
font-size:clamp(13px,1.5vw,17px);letter-spacing:.16em;
color:var(--bone);margin-bottom:8px;
}
/* ===============================================================
25. INSIGHTS: índice editorial
=============================================================== */
.news-lead{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
gap:clamp(20px,3.4vw,56px);align-items:end;
padding-bottom:clamp(26px,4vh,48px);border-bottom:1px solid var(--hair-soft);
margin-bottom:clamp(22px,3.4vh,40px);
}
@media(max-width:880px){.news-lead{grid-template-columns:1fr}}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair-soft)}
@media(max-width:980px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.news-grid{grid-template-columns:1fr}}
.post{
display:flex;flex-direction:column;
background:rgba(12,2,6,.46);padding:clamp(20px,2.4vw,30px);
transition:background var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.post:hover{background:rgba(12,2,6,.82);transform:translateY(-3px)}
.post--big{grid-column:span 3}
@media(max-width:980px){.post--big{grid-column:span 2}}
@media(max-width:620px){.post--big{grid-column:span 1}}
.post-tag{
display:inline-flex;align-items:center;gap:9px;
font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--hot);
margin-bottom:16px;
}
.post-tag::before{content:"";width:16px;height:1px;background:var(--flare);
box-shadow:0 0 7px rgba(255,74,85,.9)}
.post h3{
font-family:var(--display);font-weight:700;font-stretch:96%;
font-size:clamp(17px,1.85vw,23px);line-height:1.14;letter-spacing:-.024em;
margin:0 0 12px;color:var(--bone);
transition:color var(--t-base) var(--ease);
}
.post--big h3{font-size:clamp(24px,3.6vw,46px);line-height:1.02;letter-spacing:-.034em;max-width:20ch}
.post:hover h3{color:var(--light)}
.post p{font-size:13.5px;line-height:1.5;color:var(--mist);margin:0 0 18px;max-width:46ch}
.post--big p{font-size:clamp(14px,1.4vw,17px);max-width:56ch}
.post-meta{
margin-top:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
padding-top:16px;border-top:1px solid rgba(255,255,255,.05);
}
.post-meta .read{color:var(--mist)}
.post-arrow{
display:inline-flex;align-items:center;gap:10px;margin-left:auto;color:var(--bone);
font-size:10px;letter-spacing:.2em;text-transform:uppercase;
}
.post-arrow i{width:16px;height:1px;background:currentColor;transition:width var(--t-base) var(--ease)}
.post:hover .post-arrow i{width:28px;background:var(--flare)}
/* ===============================================================
26. ARTIGO
=============================================================== */
.crumb{
display:flex;gap:10px;align-items:center;flex-wrap:wrap;
font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
margin-bottom:clamp(20px,3vh,34px);
}
.crumb a{color:var(--mist);transition:color var(--t-base) var(--ease)}
.crumb a:hover{color:var(--bone)}
.crumb span{color:var(--dim)}
.art-head{max-width:22ch;margin-bottom:clamp(22px,3.4vh,42px)}
.art-head h1{
font-family:var(--display);font-weight:800;font-stretch:92%;
font-size:clamp(29px,4.9vw,64px);line-height:1.02;letter-spacing:-.036em;margin:0;
max-width:none;text-wrap:balance;
}
.art-meta{
display:flex;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap;align-items:center;
padding:16px 0;border-block:1px solid var(--hair-soft);
font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
margin-bottom:clamp(26px,4vh,48px);
}
.art-meta .hot{color:var(--hot)}
.art-body{display:grid;grid-template-columns:minmax(0,1fr) 240px;
gap:clamp(28px,5vw,80px);align-items:start}
@media(max-width:1000px){.art-body{grid-template-columns:1fr}}
.prose{max-width:66ch}
.prose > p{font-size:17.5px;line-height:1.72;color:var(--mist);margin:0 0 22px;max-width:none}
.prose > p.lead-p{font-size:clamp(18px,2vw,22px);line-height:1.55;color:var(--bone);margin-bottom:32px}
.prose h2{
font-family:var(--display);font-weight:700;font-stretch:94%;
font-size:clamp(21px,2.6vw,31px);line-height:1.12;letter-spacing:-.026em;
color:var(--bone);margin:clamp(38px,5vh,56px) 0 16px;scroll-margin-top:110px;
}
.prose h3{
font-family:var(--display);font-weight:600;font-size:clamp(16px,1.6vw,19px);
color:var(--bone);margin:30px 0 12px;letter-spacing:-.015em;
}
.prose ul,.prose ol{margin:0 0 24px;padding-left:20px;color:var(--mist)}
.prose li{font-size:17px;line-height:1.6;margin-bottom:11px;padding-left:4px}
.prose li::marker{color:var(--flare)}
.prose strong{color:var(--bone);font-weight:500}
.prose a{color:var(--hot);border-bottom:1px solid rgba(255,201,192,.35);
transition:border-color var(--t-base) var(--ease)}
.prose a:hover{border-color:var(--hot)}
.prose blockquote{
margin:clamp(28px,4vh,44px) 0;padding:0 0 0 clamp(18px,2.4vw,30px);
border-left:2px solid var(--flare);
}
.prose blockquote p{
font-family:var(--display);font-weight:600;font-stretch:96%;
font-size:clamp(18px,2.2vw,26px);line-height:1.34;letter-spacing:-.02em;
color:var(--bone);margin:0;
}
.prose table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:15px}
.prose th{
text-align:left;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--hot);font-weight:500;padding:0 14px 12px 0;border-bottom:1px solid var(--hair);
}
.prose td{padding:13px 14px 13px 0;border-bottom:1px solid rgba(255,255,255,.05);
color:var(--mist);vertical-align:top}
.prose td:first-child{color:var(--bone)}
.prose hr{border:0;height:1px;background:var(--hair-soft);margin:clamp(34px,5vh,52px) 0}
.note-box{
border:1px solid rgba(255,74,85,.32);
background:linear-gradient(140deg,rgba(255,74,85,.08),transparent 62%);
padding:clamp(18px,2.4vw,26px);margin:clamp(28px,4vh,42px) 0;
}
.note-box b{
display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
color:var(--hot);margin-bottom:10px;font-weight:500;
}
.note-box p{margin:0;font-size:15px;line-height:1.6}
/* sumário lateral */
.toc{position:sticky;top:calc(var(--nav-h) + 26px)}
@media(max-width:1000px){
.toc{position:static;border:1px solid var(--hair-soft);padding:18px 20px;margin-bottom:32px}
}
.toc b{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
color:var(--dim);font-weight:500;margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{counter-increment:t;margin-bottom:2px}
.toc a{
display:flex;gap:10px;padding:7px 0;font-size:13px;line-height:1.35;color:var(--mist);
border-top:1px solid rgba(255,255,255,.05);
transition:color var(--t-base) var(--ease),padding-left var(--t-base) var(--ease);
}
.toc a::before{content:counter(t,decimal-leading-zero);color:var(--dim);
font-size:10px;letter-spacing:.1em;flex:0 0 auto;padding-top:2px}
.toc a:hover{color:var(--bone);padding-left:6px}
.toc a:hover::before{color:var(--flare)}
/* fim do artigo */
.art-end{
margin-top:clamp(40px,6vh,72px);padding-top:clamp(26px,4vh,40px);
border-top:1px solid var(--hair);max-width:66ch;
}
.art-end h2{
font-family:var(--display);font-weight:800;font-stretch:90%;
font-size:clamp(22px,3.2vw,38px);line-height:1.04;letter-spacing:-.03em;
margin:0 0 14px;color:var(--bone);
}
.art-end p{font-size:15.5px;margin-bottom:24px}
.related{margin-top:clamp(44px,7vh,84px);padding-top:clamp(24px,3.6vh,40px);
border-top:1px solid var(--hair-soft)}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair-soft)}
@media(max-width:720px){.related-grid{grid-template-columns:1fr}}
/* ===============================================================
27. EQUIPES E ESTRUTURA
=============================================================== */
.grid4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair-soft)}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid4{grid-template-columns:1fr}}
.grid4--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.grid4--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid4--4{grid-template-columns:1fr}}
.cell{
background:rgba(12,2,6,.46);padding:clamp(20px,2.4vw,30px);
position:relative;transition:background var(--t-base) var(--ease);
}
.cell:hover{background:rgba(12,2,6,.82)}
.cell .n{
font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.18em;
color:var(--flare);display:block;margin-bottom:18px;
}
.cell h3{
font-family:var(--display);font-weight:700;font-stretch:96%;
font-size:clamp(16px,1.7vw,20px);line-height:1.14;letter-spacing:-.02em;
color:var(--bone);margin:0 0 9px;
}
.cell p{font-size:13.5px;line-height:1.5;color:var(--mist);margin:0;max-width:38ch}
/* ===============================================================
28. FUNDADOR
=============================================================== */
.founder{
display:grid;grid-template-columns:clamp(150px,17vw,220px) minmax(0,1fr);
gap:clamp(22px,3.6vw,54px);align-items:start;
}
@media(max-width:760px){.founder{grid-template-columns:1fr;gap:24px}}
.founder-photo{
position:relative;aspect-ratio:1;overflow:hidden;border-radius:50%;
background:var(--well);border:1px solid var(--hair);
box-shadow:0 0 0 6px rgba(255,74,85,.07),0 24px 60px -28px rgba(0,0,0,.95);
max-width:220px;
}
@media(max-width:760px){.founder-photo{max-width:150px}}
.founder-photo img{width:100%;height:100%;object-fit:cover}
.founder-photo .ph{
position:absolute;inset:0;display:grid;place-items:center;
background:radial-gradient(circle at 40% 30%,#3A0912,#0C0206 72%);
}
.founder-photo .ph span{
font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,42px);
letter-spacing:.06em;color:rgba(255,255,255,.24);
}
.founder-name{
font-family:var(--display);font-weight:800;font-stretch:94%;
font-size:clamp(24px,3.4vw,40px);line-height:1.02;letter-spacing:-.03em;
margin:0 0 6px;color:var(--bone);
}
.founder-role{
font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
color:var(--hot);margin-bottom:22px;
}
.founder p{font-size:16px;line-height:1.68;max-width:62ch;margin:0 0 24px}
/* botão discreto de link externo */
.linkbtn{
display:inline-flex;align-items:center;gap:11px;
padding:11px 18px;border:1px solid var(--hair);border-radius:999px;
font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);
transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
background var(--t-base) var(--ease);
}
.linkbtn:hover{color:var(--bone);border-color:rgba(255,74,85,.5);background:rgba(255,74,85,.08)}
.linkbtn svg{width:15px;height:15px;fill:currentColor;stroke:none;flex:0 0 auto}
.linkbtn i{width:14px;height:1px;background:currentColor;transition:width var(--t-base) var(--ease)}
.linkbtn:hover i{width:22px;background:var(--flare)}
.linkrow{display:flex;flex-wrap:wrap;gap:10px}
/* ===============================================================
29. PLACAS VISUAIS: composições cinematográficas em CSS
Zero requisição, zero kB. Cada artigo tem uma placa própria.
Aceitam ser substituídas por ![]()
sem alteração de layout.
=============================================================== */
.plate{
position:relative;overflow:hidden;isolation:isolate;
background:var(--well);width:100%;height:100%;
}
.plate::after{ /* grain, unifica com o resto do site */
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.plate .art{ /* camada de desenho */
position:absolute;inset:0;z-index:1;
transition:transform 1.1s var(--ease),filter 1.1s var(--ease);
}
.post:hover .plate .art,.fig:hover .plate .art{transform:scale(1.05);filter:brightness(1.2) saturate(1.15)}
.plate .vign{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(to top,rgba(6,1,3,.72),rgba(6,1,3,.05) 52%,rgba(6,1,3,.3));
}
.plate .tag{
position:absolute;left:14px;top:13px;z-index:4;
font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--hot);
background:rgba(6,1,3,.74);padding:5px 9px;
border:1px solid rgba(255,255,255,.12);
}
/* 01: LUZ: feixes horizontais */
.plate[data-plate="1"] .art{
background:
repeating-linear-gradient(93deg,rgba(255,255,255,.5) 0 1px,transparent 1px 26px),
radial-gradient(70% 120% at 22% 45%,rgba(255,74,85,.85),transparent 62%),
linear-gradient(120deg,#12030 6,#3A0912 46%,#0C0206);
background:
repeating-linear-gradient(93deg,rgba(255,255,255,.5) 0 1px,transparent 1px 26px),
radial-gradient(70% 120% at 22% 45%,rgba(255,74,85,.85),transparent 62%),
linear-gradient(120deg,#120306,#3A0912 46%,#0C0206);
filter:blur(.4px);
}
/* 02: GRADE: perspectiva */
.plate[data-plate="2"] .art{
background:
repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 34px),
repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 34px),
radial-gradient(50% 70% at 50% 58%,rgba(255,74,85,.7),transparent 66%),
linear-gradient(160deg,#1A0408,#2A0610 58%,#0C0206);
}
/* 03: DIVISÃO: costura de luz ao centro */
.plate[data-plate="3"] .art{
background:
linear-gradient(90deg,transparent 48.6%,rgba(255,255,255,.95) 49.6%,rgba(255,74,85,.9) 50.4%,transparent 51.4%),
linear-gradient(90deg,#0C0206 0 50%,#4A0B16 50% 100%),
radial-gradient(60% 90% at 50% 50%,rgba(255,74,85,.5),transparent 70%);
}
/* 04: SELO: anéis concêntricos */
.plate[data-plate="4"] .art{
background:
repeating-radial-gradient(circle at 50% 52%,rgba(255,255,255,.16) 0 1px,transparent 1px 22px),
radial-gradient(38% 54% at 50% 52%,rgba(255,74,85,.85),transparent 68%),
linear-gradient(150deg,#1A0408,#120306 62%,#0C0206);
}
/* 05: VARREDURA: bandas diagonais */
.plate[data-plate="5"] .art{
background:
repeating-linear-gradient(58deg,rgba(255,255,255,.13) 0 2px,transparent 2px 30px),
linear-gradient(58deg,rgba(255,74,85,.85) 0%,transparent 46%),
linear-gradient(200deg,#3A0912,#0C0206 66%);
}
/* 06: TIRA DE FILME: quadros e perfurações */
.plate[data-plate="6"] .art{
background:
repeating-linear-gradient(90deg,transparent 0 46px,rgba(6,1,3,.9) 46px 52px),
repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 3px,transparent 3px 9px) ,
radial-gradient(70% 100% at 72% 40%,rgba(255,74,85,.8),transparent 64%),
linear-gradient(140deg,#2A0610,#0C0206);
background-size:auto,10px 100%,auto,auto;
background-position:0 0,0 0,0 0,0 0;
background-repeat:repeat,no-repeat,no-repeat,no-repeat;
}
/* ---------- placa dentro do card do índice ---------- */
.post{padding:0;overflow:hidden}
.post-body{padding:clamp(18px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.post-media{position:relative;aspect-ratio:16/10;flex:0 0 auto}
.post-media img{width:100%;height:100%;object-fit:cover}
/* destaque: imagem à esquerda, texto à direita */
.post--big{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}
.post--big .post-media{aspect-ratio:auto;min-height:clamp(230px,32vw,420px)}
.post--big .post-body{justify-content:center;padding:clamp(22px,3vw,44px)}
@media(max-width:820px){
.post--big{grid-template-columns:1fr}
.post--big .post-media{aspect-ratio:16/10;min-height:0}
}
/* ---------- figura dentro do artigo ---------- */
.fig{margin:clamp(30px,4.4vh,50px) 0}
.fig-media{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--hair-soft)}
.fig-media img{width:100%;height:100%;object-fit:cover}
.fig figcaption{
margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--dim);
padding-left:14px;border-left:1px solid rgba(255,74,85,.45);max-width:56ch;
}
/* figura lateral: texto contorna no desktop */
.fig--side{float:right;width:min(46%,320px);margin:8px 0 24px clamp(20px,2.6vw,36px)}
.fig--side .fig-media{aspect-ratio:4/5}
@media(max-width:820px){
.fig--side{float:none;width:100%;margin:clamp(26px,4vh,40px) 0}
.fig--side .fig-media{aspect-ratio:16/9}
}
.prose::after{content:"";display:block;clear:both}
.foot-bar a{color:var(--dim);transition:color var(--t-base) var(--ease)}
.foot-bar a:hover{color:var(--bone)}
/* linha institucional do rodapé: discreta, nunca dominante */
.foot-legal{
max-width:var(--max);margin:0 auto;
padding:0 var(--gut) 34px;margin-top:-18px;
font-size:10.5px;line-height:1.6;letter-spacing:.04em;
color:var(--dim);
}
@media(max-width:640px){ .foot-legal{font-size:10px;padding-bottom:28px} }
/* tabelas dos artigos em telas estreitas: evita aperto sem mudar o design */
@media(max-width:620px){
.prose table{font-size:13.5px}
.prose th{font-size:9px;letter-spacing:.16em;padding-right:10px}
.prose td{padding:11px 10px 11px 0;hyphens:auto}
.prose td:first-child{font-weight:500}
}
@media(max-width:400px){
.prose table{font-size:12.5px}
.prose th,.prose td{padding-right:8px}
}
/* nenhum elemento pode estourar a viewport */
img,video,table,pre,blockquote{max-width:100%}
/* ===============================================================
30. RESPIRO VISUAL: bandas e blocos imagem+texto
=============================================================== */
/* banda cinematográfica larga: corta o texto sem roubar a cena */
.band{margin:clamp(28px,4.6vh,54px) 0}
.band-media{position:relative;aspect-ratio:32/9;overflow:hidden;border:1px solid var(--hair-soft)}
.band-media img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.band-media{aspect-ratio:16/9}}
.band figcaption{
margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--dim);
padding-left:14px;border-left:1px solid rgba(255,74,85,.45);max-width:58ch;
}
/* texto de um lado, imagem do outro: alterna a direção */
.duplex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
gap:clamp(24px,4vw,64px);align-items:center}
.duplex--flip{grid-template-columns:minmax(0,.92fr) minmax(0,1fr)}
.duplex--flip .duplex-media{order:-1}
@media(max-width:880px){
.duplex,.duplex--flip{grid-template-columns:1fr}
.duplex--flip .duplex-media{order:0}
}
.duplex-media{position:relative;aspect-ratio:5/4;overflow:hidden;border:1px solid var(--hair-soft)}
.duplex-media img{width:100%;height:100%;object-fit:cover}
.duplex-media figcaption{
position:absolute;left:0;right:0;bottom:0;z-index:4;
padding:14px 16px;font-size:11.5px;line-height:1.45;color:var(--mist);
background:linear-gradient(to top,rgba(6,1,3,.92),rgba(6,1,3,0));
}
.duplex .lead{margin-bottom:18px}
/* rótulo acima de uma grade */
.grid-label{
display:flex;align-items:center;gap:14px;
font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
margin:clamp(22px,3.4vh,36px) 0 16px;
}
.grid-label i{flex:1;height:1px;background:var(--hair-soft);font-style:normal}
/* descrição curta em cada etapa do processo: dá corpo ao bloco */
.proc p{
margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--dim);
max-width:26ch;transition:color var(--t-base) var(--ease);
}
.proc>div:hover p{color:var(--mist)}
.proc>div{display:flex;flex-direction:column}
@media(max-width:820px){ .proc p{font-size:13px;max-width:none} }
/* ===============================================================
31. TOPO DO ARTIGO: manchete dentro da imagem
Padrão de portal: a imagem carrega a manchete em vez de vir depois
de um bloco de tipografia gigante. Ganha espaço, tira o vazio e a
pessoa entende o assunto de uma olhada só.
=============================================================== */
.art-hero{
position:relative;overflow:hidden;
border:1px solid var(--hair-soft);
min-height:clamp(300px,44vh,500px);
display:flex;align-items:flex-end;
margin-bottom:clamp(26px,4.2vh,48px);
}
.art-hero-media{position:absolute;inset:0;z-index:0}
.art-hero-media img{width:100%;height:100%;object-fit:cover}
.art-hero-in{
position:relative;z-index:2;width:100%;
padding:clamp(22px,3.2vw,44px);
background:linear-gradient(to top,rgba(6,1,3,.95),rgba(6,1,3,.78) 46%,rgba(6,1,3,.12));
}
.art-hero-cat{
display:inline-flex;align-items:center;gap:10px;
font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--hot);
margin-bottom:14px;
}
.art-hero-cat::before{content:"";width:16px;height:1px;background:var(--flare);
box-shadow:0 0 7px rgba(255,74,85,.9)}
.art-hero h1{
font-family:var(--display);font-weight:800;font-stretch:94%;
font-size:clamp(23px,3.1vw,40px);line-height:1.08;letter-spacing:-.028em;
color:var(--bone);margin:0 0 12px;max-width:26ch;text-wrap:balance;
}
.art-hero-dek{
font-size:clamp(14px,1.45vw,17px);line-height:1.5;color:var(--mist);
max-width:58ch;margin:0 0 18px;
}
.art-hero-meta{
display:flex;gap:clamp(12px,2vw,26px);flex-wrap:wrap;align-items:center;
padding-top:14px;border-top:1px solid rgba(255,255,255,.15);
font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);
}
.art-hero-meta .sep{color:var(--dim)}
@media(max-width:640px){
.art-hero{min-height:0}
.art-hero-media{position:relative;aspect-ratio:16/10}
.art-hero-in{background:rgba(6,1,3,.55);padding-top:20px}
.art-hero{display:block}
.art-hero h1{font-size:clamp(22px,6.6vw,30px);max-width:none}
.art-hero-dek{font-size:15px}
}
/* Preenchimento próprio: .post roda com padding zero no índice, onde quem
preenche é .post-body. O card de relacionados não tem .post-body. */
.related-grid .post{padding:clamp(20px,2.4vw,28px)}
/* ===============================================================
32. HERO: wordmark e banner de destaques
Duas colunas: à esquerda o wordmark recortado, à direita o banner
com rodízio de destaques do portfólio.
=============================================================== */
/* 1.05fr / 1fr deixa 512 das 1000 unidades do viewBox visíveis na coluna do
wordmark. É exatamente a janela para a qual a geometria do SVG no index foi
calculada (folgas de 54 esq, 56 dir, 31 topo, 31 base). Mudar esta proporção
sem refazer a conta do SVG encosta letra na borda. */
.knock{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
gap:2px;aspect-ratio:1000/268;
}
.knock-mark{position:relative;overflow:hidden}
.knock-mark .knock-media{position:absolute;inset:0;overflow:hidden;background:#2A0610}
.knock-mark .knock-plate{position:absolute;inset:0;width:100%;height:100%}
.knock-banner{
position:relative;overflow:hidden;background:var(--well);
border:1px solid var(--hair-soft);
}
.knock-banner .slide{
position:absolute;inset:0;opacity:0;
transition:opacity 1100ms var(--ease);
}
.knock-banner .slide.is-on{opacity:1}
.knock-banner .slide img{width:100%;height:100%;object-fit:cover}
.knock-banner::after{ /* leve escurecimento nas bordas, integra ao campo */
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(105deg,rgba(6,1,3,.55),transparent 42%);
}
/* pontinhos discretos indicando quantas imagens existem */
.knock-dots{
position:absolute;right:12px;bottom:11px;z-index:4;display:flex;gap:6px;
}
.knock-dots i{
width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.32);
transition:background var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.knock-dots i.on{background:var(--flare);transform:scale(1.3);
box-shadow:0 0 9px 1px rgba(255,74,85,.9)}
@media(max-width:820px){
.knock{grid-template-columns:1fr;aspect-ratio:auto;gap:6px}
/* 512/268 repete a mesma janela do desktop: o slice corta a chapa vazia
à direita e as letras ocupam a faixa inteira em vez de ficar encolhidas. */
.knock-mark{aspect-ratio:512/268}
.knock-banner{aspect-ratio:16/9}
}
/* Banner de destaques: link para o portfólio, legenda sobre a imagem. */
a.knock-banner{display:block;text-decoration:none}
.knock-banner .slide img{width:100%;height:100%;object-fit:cover}
.knock-label{
position:absolute;left:14px;top:13px;z-index:5;
font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--hot);
background:rgba(6,1,3,.76);padding:5px 10px;border:1px solid rgba(255,255,255,.12);
}
.knock-banner .slide-cap{
position:absolute;left:0;right:0;bottom:0;z-index:4;
padding:26px 16px 14px;
background:linear-gradient(to top,rgba(6,1,3,.95),rgba(6,1,3,.55) 55%,transparent);
}
.knock-banner .slide-cap b{
display:block;font-size:9px;font-weight:500;letter-spacing:.26em;
text-transform:uppercase;color:var(--hot);margin-bottom:4px;
}
.knock-banner .slide-cap em{
display:block;font-style:normal;font-family:var(--display);font-weight:700;
font-size:clamp(13px,1.35vw,17px);line-height:1.15;letter-spacing:-.02em;color:var(--bone);
}
.knock-banner:hover .slide.is-on img{transform:scale(1.04)}
.knock-banner .slide img{transition:transform var(--t-slow) var(--ease)}
.knock-banner:hover{border-color:rgba(255,74,85,.4)}
.knock-dots{bottom:14px}
/* ===============================================================
33. UTILITÁRIOS DE ESPAÇAMENTO
Substituem os atributos style="" que existiam no HTML. Sem eles a
Content-Security-Policy precisaria de style-src 'unsafe-inline',
que é o vetor mais comum de injeção de estilo. Não reintroduzir
style inline no HTML.
=============================================================== */
.gap-t-0 {margin-top:0}
.gap-t-18 {margin-top:18px}
.gap-t-34 {margin-top:34px}
.gap-t-m {margin-top:clamp(24px,4vh,44px)}
.gap-b-22 {margin-bottom:22px}
.gap-b-s {margin-bottom:clamp(22px,3.4vh,40px)}
.gap-b-m {margin-bottom:clamp(24px,4vh,44px)}
.gap-b-l {margin-bottom:clamp(26px,4vh,46px)}
.gap-b-xl {margin-bottom:clamp(26px,4vh,50px)}
.no-rule {border-top:0;padding-top:0}
.pad-nav {padding-top:calc(var(--nav-h) + 4vh)}
.measure-64 {max-width:64ch}
.inert {pointer-events:none}
/* fora da tela mas ainda no fluxo de foco do formulário (honeypot) */
.offscreen {position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* eixo de largura da Archivo no wordmark do hero */
.wordmark-w {font-stretch:86%}
/* ===============================================================
34. POSICIONAMENTO NO RODAPÉ
A frase institucional ocupa a coluna larga do rodapé em todas as
páginas. Texto real, não imagem, é o que motor de busca e resposta
por IA conseguem ler e citar.
=============================================================== */
/* Faixa de posicionamento, logo abaixo do wordmark do rodapé.
Três frases, uma por linha. A 13px a mais longa mede 297px e a coluna da
marca oferece de 312 a 411px, conforme a tela. */
.foot-claim{
margin:14px 0 0;
font-size:13px;line-height:1.62;color:var(--mist);
border-left:1px solid var(--hair);padding-left:14px;
}
.foot-claim span{display:block}
.foot-claim .l1{color:var(--bone)}
/* Nenhuma das três pode partir. Abaixo de 360px a tela é estreita demais
e o texto volta a quebrar normalmente, para não estourar a caixa. */
@media(min-width:360px){
.foot-claim span{white-space:nowrap}
}
.foot-claim b,.foot-claim strong{color:var(--bone);font-weight:500}
/* ===============================================================
35. LINHA DO TEMPO: trajetória na página Sobre
Três marcos lado a lado, régua horizontal ligando os pontos.
Formato horizontal para não alongar uma página que já é longa.
Abaixo de 860px vira coluna, com a régua na vertical.
=============================================================== */
.tl{
list-style:none;margin:clamp(26px,3.6vh,44px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(16px,2.2vw,34px);position:relative;
}
/* a régua atravessa os três pontos */
.tl::before{
content:"";position:absolute;left:0;right:0;top:6px;height:1px;
background:linear-gradient(90deg,var(--hair),rgba(255,74,85,.55));
}
.tl-item{position:relative;padding-top:30px}
.tl-item::before{
content:"";position:absolute;left:0;top:3px;
width:7px;height:7px;border-radius:50%;background:var(--dim);
}
.tl-item.is-now::before{background:var(--flare);box-shadow:0 0 12px 2px rgba(255,74,85,.75)}
.tl-year{
font-family:var(--display);font-weight:800;
font-size:clamp(34px,3.9vw,54px);line-height:.98;letter-spacing:-.035em;
color:var(--dim);
}
.tl-item.is-now .tl-year{color:var(--light)}
.tl-date{
display:block;margin:8px 0 16px;
font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mist);
font-family:var(--display);font-weight:500;
}
.tl-item h3{
font-family:var(--display);font-weight:600;
font-size:clamp(16px,1.35vw,19px);line-height:1.22;letter-spacing:-.012em;
margin:0 0 9px;color:var(--bone);
}
.tl-item p{margin:0;font-size:13.5px;line-height:1.58}
.tl-tag{
display:inline-block;margin-top:14px;
font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--hot);
border:1px solid var(--hair);padding:6px 10px;line-height:1.4;
}
/* fecho: a frase que resume a trajetória */
.tl-close{
margin-top:clamp(26px,3.6vh,42px);
padding:clamp(22px,3vw,34px) clamp(22px,3vw,36px);
border:1px solid var(--hair);background:rgba(6,1,3,.32);
}
.tl-close b{
display:block;
font-family:var(--display);font-weight:700;
font-size:clamp(21px,2.5vw,31px);line-height:1.1;letter-spacing:-.022em;
color:var(--light);margin-bottom:10px;
}
.tl-close p{margin:0;font-size:14px;color:var(--mist);max-width:82ch}
/* quatro colunas só cabem em tela larga; abaixo disso, duas, depois uma */
@media(max-width:1080px) and (min-width:861px){
.tl{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,38px) 34px}
.tl::before{display:none}
.tl-item{padding-top:26px;border-top:1px solid var(--hair-soft)}
.tl-item::before{top:-3px}
}
@media(max-width:860px){
.tl{grid-template-columns:1fr;gap:0}
.tl::before{left:0;right:auto;top:6px;bottom:14px;height:auto;width:1px;
background:linear-gradient(180deg,var(--hair),rgba(255,74,85,.55))}
.tl-item{padding:0 0 26px 22px}
.tl-item::before{top:9px}
.tl-item + .tl-item{padding-top:6px}
.tl-year{font-size:clamp(34px,9vw,48px)}
}
/* ===============================================================
36. REDES SOCIAIS NO RODAPÉ
Ícone em disco antes do nome. Os glifos são SVG inline: nenhuma
requisição extra e nenhuma dependência de serviço de terceiro.
=============================================================== */
.soc li{margin-bottom:11px}
.soc a{display:inline-flex;align-items:center;gap:11px}
.soc-ic{
flex:0 0 auto;width:24px;height:24px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.07);border:1px solid var(--hair);
transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.soc-ic svg{width:13px;height:13px;fill:var(--mist);
transition:fill var(--t-base) var(--ease)}
.soc a:hover .soc-ic{background:var(--bone);border-color:var(--bone)}
.soc a:hover .soc-ic svg{fill:#0C0206}
.soc a:focus-visible .soc-ic{background:var(--bone);border-color:var(--bone)}
.soc a:focus-visible .soc-ic svg{fill:#0C0206}
/* ===============================================================
37. VITRINE DE VÍDEO DA HOME
Sai da caixa de 1480px e ocupa a largura inteira da tela. As peças
ficam empilhadas, uma por vez na vertical, cada uma rodando um loop
mudo. O