/* TK23 · site institucional · celular primeiro */
:root{
  --preto:#0E0E0F;
  --papel:#F2F0EA;
  --red:#E4262C;
  --cinza:#8a8883;
  --linha:rgba(242,240,234,.14);
  --pad:clamp(20px,5vw,72px);
  --titulo:"Archivo","Archivo Black","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--preto);color:var(--papel);font-family:var(--mono);font-size:16px;line-height:1.55;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mono{font-family:var(--mono)}
.red{color:var(--red)}
.texto{font-size:1rem;max-width:46ch;color:rgba(242,240,234,.82)}
.rotulo{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:1rem}
.titulo{font-family:var(--titulo);font-stretch:125%;font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;font-size:clamp(2rem,9vw,5.5rem)}

/* corte a 6° */
.cut{position:relative}
.cut::after{content:"";position:absolute;right:-4%;bottom:0;width:46vw;height:1px;background:var(--red);transform-origin:right center;transform:rotate(-6deg);pointer-events:none}

/* topo */
.topo{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);padding-top:max(14px,env(safe-area-inset-top));background:linear-gradient(180deg,rgba(14,14,15,.85),rgba(14,14,15,0))}
.topo__logo img{width:88px;height:auto}
.topo__nav{display:flex;gap:1.1rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.topo__nav a{padding:6px 0;border-bottom:1px solid transparent}
.topo__nav a:hover{border-color:var(--red)}

/* abertura */
.abertura{position:relative;height:100svh;min-height:520px;overflow:hidden;display:flex;align-items:flex-end;background:#000}
.abertura__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.abertura__veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,15,.35) 0%,rgba(14,14,15,.1) 40%,rgba(14,14,15,.85) 100%)}
.abertura__conteudo{position:relative;padding:0 var(--pad) 84px;width:100%}
.abertura__micro{font-size:.68rem;letter-spacing:.2em;margin-bottom:1rem;color:rgba(242,240,234,.8)}
.abertura__titulo{font-family:var(--titulo);font-stretch:125%;font-weight:900;text-transform:uppercase;line-height:.92;font-size:clamp(2.1rem,9.6vw,5.4rem);letter-spacing:-.02em}
.abertura__sub{margin-top:1.1rem;max-width:52ch;font-size:clamp(.92rem,2.4vw,1.08rem);color:rgba(242,240,234,.88)}
.abertura__botoes{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.abertura__en{margin-top:1rem;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.controles{position:absolute;right:var(--pad);top:max(76px,calc(env(safe-area-inset-top) + 64px));display:flex;gap:.6rem;z-index:2}
.btn-ctrl{display:flex;align-items:center;gap:.5rem;padding:10px 14px;border:1px solid var(--linha);background:rgba(14,14,15,.55);backdrop-filter:blur(6px);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;min-height:44px}
.btn-ctrl:hover{border-color:var(--red)}
.ico{width:10px;height:12px;display:inline-block;border-left:3px solid var(--papel);border-right:3px solid var(--papel)}
.ico--play{border:0;border-left:11px solid var(--papel);border-top:6px solid transparent;border-bottom:6px solid transparent;width:0;height:0}
.abertura__seta{position:absolute;left:var(--pad);bottom:26px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,240,234,.7)}

/* manifesto */
.manifesto{padding:clamp(80px,16vw,200px) var(--pad);overflow:hidden}
.manifesto__linha{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.32em;font-size:clamp(.95rem,4.2vw,2.2rem);line-height:2.2}
.manifesto__linha--red{color:var(--red)}

/* nome */
.nome{display:grid;gap:2rem;padding:clamp(60px,10vw,140px) var(--pad);border-top:1px solid var(--linha)}
.quadros{margin-top:2rem;display:flex;align-items:baseline;gap:1rem}
.quadros__num{font-family:var(--titulo);font-stretch:125%;font-weight:900;font-size:clamp(4rem,18vw,9rem);line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.quadros__leg{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza)}

/* frentes */
.frentes{display:grid;gap:0;padding:clamp(40px,8vw,100px) var(--pad) clamp(70px,10vw,140px);border-top:1px solid var(--linha)}
.frente{padding:2rem 0;border-bottom:1px solid var(--linha)}
.frente__titulo{font-family:var(--titulo);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(3rem,16vw,8rem);line-height:.9;margin-bottom:1.2rem}
.lista li{padding:.35rem 0;font-size:.95rem;color:rgba(242,240,234,.82)}
.lista li::before{content:"— ";color:var(--red)}
.frentes__nota{margin-top:2rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cinza)}

/* trabalhos */
.trabalhos{padding:clamp(60px,10vw,140px) 0 0}
.secao-cab{padding:0 var(--pad) 2rem}
.secao-cab .texto{margin-top:1.2rem}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:#161617;display:block}
.tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .3s,transform .6s}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,15,0) 45%,rgba(14,14,15,.9));pointer-events:none}
.tile__txt{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:.5rem}
.tile__txt b{font-family:var(--titulo);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(.8rem,3.4vw,1.15rem);line-height:1.05}
.tile__txt i{font-style:normal;font-size:.7rem;color:var(--red)}
.tile:hover img,.tile.ativo img{filter:none;transform:scale(1.04)}
.tile.ativo .tile__txt i,.tile:hover .tile__txt i{color:var(--papel)}
.tile.vazio img{opacity:0}
.tile.vazio::before{content:"FRAME (a preencher)";position:absolute;inset:0;display:grid;place-items:center;font-size:.68rem;letter-spacing:.16em;color:var(--cinza);text-align:center;padding:1rem}

/* letreiro */
.letreiro{overflow:hidden;white-space:nowrap;border-block:1px solid var(--linha);padding:14px 0;margin-top:2px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cinza)}
.letreiro__trilho{display:inline-block;animation:corre 38s linear infinite}
.letreiro__trilho span{padding-right:1rem}
@keyframes corre{to{transform:translateX(-50%)}}

/* bastidores */
.bastidores{padding:clamp(60px,10vw,140px) 0 clamp(80px,12vw,160px)}
.faixa{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 12px;scrollbar-width:thin;scrollbar-color:var(--red) transparent;-webkit-overflow-scrolling:touch}
.foto{flex:0 0 76vw;max-width:420px;aspect-ratio:3/4;scroll-snap-align:start;position:relative;background:#161617;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover}
.foto figcaption{position:absolute;left:10px;bottom:10px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;background:var(--preto);padding:3px 8px}
.foto.vazio img{display:none}
.foto.vazio::before{content:"FOTO (a preencher)";position:absolute;inset:0;display:grid;place-items:center;font-size:.68rem;letter-spacing:.16em;color:var(--cinza)}

/* contato */
.contato{padding:clamp(80px,12vw,160px) var(--pad);border-top:1px solid var(--linha)}
.contato__titulo{font-family:var(--titulo);font-stretch:125%;font-weight:900;text-transform:uppercase;line-height:.88;font-size:clamp(3.4rem,18vw,11rem);margin-bottom:1.5rem}
.contato__texto{margin-bottom:2rem}
.contato__botoes{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.6rem;border:1px solid var(--papel);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;transition:background .2s,color .2s}
.btn:hover{background:var(--papel);color:var(--preto)}
.btn--red{background:var(--red);border-color:var(--red);color:var(--papel)}
.btn--red:hover{background:var(--papel);border-color:var(--papel);color:var(--preto)}
.btn[aria-disabled="true"]{opacity:.6}
.contato__dados{margin-top:2rem;font-size:.75rem;letter-spacing:.14em;color:var(--cinza)}

/* rodapé */
.rodape{padding:40px var(--pad) max(40px,env(safe-area-inset-bottom));border-top:1px solid var(--linha);display:grid;gap:.8rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.rodape img{width:96px}
.rodape__peq{color:var(--cinza);font-size:.68rem}

/* entrada */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.reveal.on{opacity:1;transform:none}

/* topo: botão de orçamento */
.topo__nav a.topo__cta{padding:8px 14px;background:var(--red);color:var(--papel);border:0}
.topo__nav a.topo__cta:hover{background:var(--papel);color:var(--preto)}
.topo__nav a:not(.topo__cta){display:none}

/* serviços */
.servicos{padding:clamp(60px,10vw,140px) 0 clamp(40px,6vw,80px)}
.cards{display:grid;gap:2px;padding:0 var(--pad)}
.card{display:flex;flex-direction:column;gap:1rem;padding:1.6rem;background:#151516;border-top:2px solid var(--red)}
.card__n{font-size:.75rem;letter-spacing:.2em;color:var(--red)}
.card__titulo{font-family:var(--titulo);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,5.5vw,1.8rem);line-height:1}
.card .lista{flex:1}
.btn--linha{border-color:var(--linha);align-self:flex-start}
.btn--linha:hover{border-color:var(--papel)}
.servicos__nota{padding:1.6rem var(--pad) 0;font-size:.78rem;letter-spacing:.06em;color:var(--cinza)}
.servicos__nota a{color:var(--papel);border-bottom:1px solid var(--red)}

/* como funciona */
.como{padding:clamp(60px,10vw,140px) 0;border-top:1px solid var(--linha)}
.passos{list-style:none;display:grid;gap:2px;padding:0 var(--pad)}
.passo{padding:1.4rem 0;border-top:1px solid var(--linha)}
.passo__n{display:block;font-family:var(--titulo);font-stretch:125%;font-weight:900;font-size:2.4rem;line-height:1;color:var(--red);margin-bottom:.6rem}
.passo h3{font-family:var(--titulo);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:1.1rem;margin-bottom:.4rem}
.passo p{color:rgba(242,240,234,.8);font-size:.95rem;max-width:34ch}
.como__cta{margin:2rem var(--pad) 0}

/* formulário */
.form{display:grid;gap:1rem;max-width:760px;margin-bottom:2rem}
.campo{display:grid;gap:.4rem}
.campo span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:1rem;color:var(--papel);background:#151516;border:1px solid var(--linha);border-radius:0;padding:14px;min-height:52px;width:100%}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--papel) 50%),linear-gradient(135deg,var(--papel) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--red);outline:0}
.form__erro{color:var(--red);font-size:.8rem}
.form__btn{justify-self:start}

/* janela do vídeo */
.tile__play{position:absolute;top:12px;left:12px;z-index:1;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;background:var(--red);padding:4px 8px}
.janela{position:fixed;inset:0;z-index:80;background:rgba(14,14,15,.94);display:grid;place-items:center;padding:16px}
.janela[hidden]{display:none}
.janela__caixa{width:min(1100px,100%);display:grid;gap:12px}
.janela__topo{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.janela__titulo{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.janela__fechar{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;padding:10px 0;min-height:44px}
.janela__video{position:relative;aspect-ratio:16/9;background:#000;max-height:76svh}
.janela__video.vertical{aspect-ratio:9/16;height:72svh;width:auto;max-width:100%;justify-self:center}
.janela__video iframe,.janela__video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.janela__cta{justify-self:start}

/* botão flutuante (celular) */
.flutua{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:60;padding:14px 20px;background:var(--red);color:var(--papel);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.45);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .25s,transform .25s}
.flutua.on{opacity:1;transform:none;pointer-events:auto}

/* tablet e desktop */
@media (min-width:760px){
  .topo__logo img{width:120px}
  .topo__nav{gap:2rem;font-size:.78rem}
  .nome{grid-template-columns:1.2fr 1fr;align-items:end}
  .frentes{grid-template-columns:1fr 1fr;column-gap:4vw}
  .frente{border-bottom:0;border-top:1px solid var(--linha)}
  .frentes__nota{grid-column:1/-1}
  .grade{grid-template-columns:repeat(4,1fr)}
  .tile{aspect-ratio:3/4}
  .foto{flex-basis:30vw}
  .topo__nav a:not(.topo__cta){display:inline}
  .cards{grid-template-columns:repeat(2,1fr)}
  .passos{grid-template-columns:repeat(4,1fr);column-gap:2vw}
  .form{grid-template-columns:1fr 1fr}
  .campo--largo,.form__erro,.form__btn{grid-column:1/-1}
  .controles{top:auto;bottom:26px}
  .flutua{display:none}
  .abertura__conteudo{padding-bottom:96px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .letreiro__trilho{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}

@media (min-width:1100px){.cards{grid-template-columns:repeat(4,1fr)}}