/* EDois Films — site público (vitrine). Etapas 2b (plano em /root/edois_vitrine_trab/PLANO_DESIGN_2B.md), 2c e 2d (28/10/2026).
   Princípio: o ponto vermelho da logo é a luz de gravação — o site é um estúdio escuro e só acende vermelho o que está
   no ar (REC) ou o que é a vez do visitante agir (botão).
   2d (pedido do dono): "site vivo" — o site é a demonstração do produto e precisa parecer uma peça editada. Todo efeito
   em linguagem de vídeo (corte, foco, zoom, legenda, timeline, luz). A rolagem é do JS (GSAP + Lenis, no bundle); aqui
   ficam a abertura do hero (CSS: roda antes do JS e sem ele), os estados e o hover. Movimento reduzido: tudo parado. */
/* Fontes: endereço SEM versão (o CSS não leva ?v) e o /static/vitrine/ tem cache de 1 ano — fonte nova entra com
   NOME de arquivo novo. font-display: optional — sem troca depois do 1º quadro (a troca dava CLS 0,06 no hero). */
@font-face {
  font-family: Inter;
  src: url("../fonts/inter-300-800.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* paleta aprovada */
  --estudio: #111417;
  --palco: #181C21;
  --luz: #EEF1F4;
  --regua: #9AA3AD;
  --rec: #FF010B;
  --acao: #D32F2F;
  --acao-hover: #B71C1C;
  /* derivados neutros (nunca cor com significado) */
  --linha: rgba(238, 241, 244, .10);
  --campo: rgba(238, 241, 244, .05);
  --veu: rgba(8, 10, 12, .84);
  --erro: #FB923C;
  --ok: #4ADE80;
  /* tipografia */
  --texto: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* espaço, base 4 */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; --e9: 112px;
  --gutter: 16px;
  --largura: 1200px;
  --raio: 10px;
  --secao: var(--e8);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }      /* .ctl e .botao têm display próprio, que venceria o [hidden] do navegador */
html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
/* Lenis (o CSS que ele pede): com ele ligado, a rolagem suave é dele, não do navegador */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
[tabindex="-1"]:focus { outline: none; }
body { margin: 0; background: var(--estudio); color: var(--regua); font: 400 16px/1.6 var(--texto); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--luz); text-underline-offset: 3px; }
h1, h2, h3 { color: var(--luz); margin: 0; }
h2 { font: 800 clamp(1.875rem, 1.2rem + 2.8vw, 3rem)/1.06 var(--texto); letter-spacing: -.025em; }
h3 { font: 600 clamp(1.1875rem, 1.1rem + .3vw, 1.375rem)/1.25 var(--texto); }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; border-radius: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* o <use> herda do elemento onde é usado, não do <svg> do sprite: o traço do Tabler mora aqui */
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: var(--gutter); top: -60px; z-index: 60; background: var(--luz); color: var(--estudio); padding: var(--e2) var(--e4); border-radius: var(--raio); }
.pular:focus { top: var(--e3); }

/* topo */
.topo { position: sticky; top: 0; z-index: 40; background: rgba(17, 20, 23, .96); border-bottom: 1px solid var(--linha); }
.topo-faixa { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); height: 60px; display: flex; align-items: center; gap: var(--e3); }
.topo-marca { display: flex; align-items: center; gap: var(--e3); color: var(--luz); text-decoration: none; font-weight: 600; margin-right: auto; }
.topo-marca img { width: 30px; }
.menu-botao { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--linha); border-radius: var(--raio); color: var(--luz); cursor: pointer; }
.menu { display: none; position: absolute; left: 0; right: 0; top: 60px; background: var(--palco); border-bottom: 1px solid var(--linha); }
.menu.aberto { display: block; }
.menu ul { padding: var(--e2) var(--gutter) var(--e4); }
.menu a { display: block; padding: var(--e3) var(--e1); color: var(--regua); text-decoration: none; font-weight: 500; }
.menu a:hover { color: var(--luz); }

/* botões: hover (tom), foco (anel), ativo (afunda), desabilitado */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 46px; padding: 0 var(--e5); border-radius: var(--raio); font: 600 15px/1 var(--texto); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, transform .08s; }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.botao-acao { background: var(--acao); color: #fff; }
.botao-acao:hover { background: var(--acao-hover); color: #fff; }
.botao-claro { background: var(--luz); color: var(--estudio); }
.botao-claro:hover { background: #fff; color: var(--estudio); }

/* hero: duas colunas no desktop — à esquerda o título (300 + 800), subtítulo e botões; à direita o showreel com os
   cantos do visor. No celular: título, showreel, botões. O fundo (vídeo do estúdio ou poster) fica a 40%. */
.hero { position: relative; min-height: calc(88svh - 60px); display: grid; align-items: center; padding: var(--e8) var(--gutter) calc(var(--e8) + var(--e4)); overflow: hidden; isolation: isolate; }
.hero-fundo { position: absolute; inset: 0; z-index: -1; opacity: .4; }
.hero-fundo img, .hero-fundo video { width: 100%; height: 100%; object-fit: cover; }
.hero-fundo video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.hero-fundo video.tocando { opacity: 1; }
.visor { position: absolute; inset: var(--e5); pointer-events: none; }
.canto { position: absolute; width: 28px; height: 28px; border: 0 solid rgba(238, 241, 244, .55); }
.c1 { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.c2 { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.c3 { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.c4 { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.hero-grade { width: 100%; max-width: var(--largura); margin: 0 auto; display: grid; gap: var(--e6); }
.hero-texto { display: grid; gap: var(--e4); }
.hero-titulo { font: 800 clamp(2.125rem, 1.2rem + 3.6vw, 3.5rem)/1.05 var(--texto); letter-spacing: -.035em; text-wrap: balance; }
.hero-l1, .hero-l2 { display: block; }
.hero-l1 { font-weight: 300; letter-spacing: -.03em; }
.hero-sub { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); max-width: 46ch; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e3); }
.rec { position: absolute; right: calc(var(--e5) + var(--e4)); bottom: calc(var(--e5) + var(--e3)); display: flex; align-items: center; gap: var(--e2); color: var(--luz); font-size: 13px; font-weight: 500; margin: 0; }
.rec-luz { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 0 rgba(255, 1, 11, .6); }
/* indicador de rolagem: uma timeline com a agulha correndo */
.rolar { position: absolute; left: 50%; bottom: calc(var(--e5) + var(--e3)); transform: translateX(-50%); display: none; align-items: center; gap: var(--e3); margin: 0; color: var(--regua); font: 500 12px/1 var(--texto); letter-spacing: .16em; text-transform: uppercase; }
.rolar-trilho { position: relative; width: 56px; height: 2px; background: rgba(238, 241, 244, .18); overflow: hidden; }
.rolar-cabeca { position: absolute; top: 0; bottom: 0; left: 0; width: 14px; background: var(--luz); }

/* showreel: um player compacto 16:9 com o visor; a montagem corta seco entre as capas, com zoom lento, timecode e a
   tarja do trabalho (como numa transmissão) */
.reel { display: grid; gap: var(--e3); min-width: 0; }
.reel-tela { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: #000; cursor: pointer; box-shadow: 0 32px 80px -36px rgba(0, 0, 0, .9); }
.reel-plano { position: absolute; inset: 0; margin: 0; visibility: hidden; }
.reel-plano.atual { visibility: visible; }
.reel-plano img { width: 100%; height: 100%; object-fit: cover; }
.reel-tela video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel.com-video .reel-plano { display: none; }
.reel-tela .canto { width: 18px; height: 18px; border-color: rgba(238, 241, 244, .7); }
.reel-tela .c1 { top: 10px; left: 10px; } .reel-tela .c2 { top: 10px; right: 10px; }
.reel-tela .c3 { bottom: 10px; left: 10px; } .reel-tela .c4 { bottom: 10px; right: 10px; }
.reel-hud { position: absolute; top: 18px; left: 38px; right: 38px; contain: layout paint; display: flex; justify-content: space-between; margin: 0; color: var(--luz); font: 600 11px/1 var(--texto); letter-spacing: .12em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.reel-rotulo { display: flex; align-items: center; gap: 6px; }
.reel-rotulo .rec-luz { width: 7px; height: 7px; }
.reel-tarja { position: absolute; left: 36px; bottom: 18px; max-width: calc(100% - 72px); display: grid; gap: 2px; padding: var(--e2) var(--e3); background: rgba(8, 10, 12, .86); border-left: 3px solid var(--rec); color: var(--luz); font: 600 13px/1.25 var(--texto); }
.reel-tarja span { color: var(--regua); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.reel.com-video .reel-tarja { display: none; }
.reel-acoes { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.botao-reel { background: none; border-color: rgba(238, 241, 244, .28); color: var(--luz); min-height: 44px; padding: 0 var(--e4) 0 var(--e3); }
.botao-reel:hover { background: var(--luz); color: var(--estudio); }
.botao-reel .icone { width: 18px; height: 18px; }
.reel-pausa .icone-continuar, .reel-pausa[aria-pressed="true"] .icone:not(.icone-continuar) { display: none; }
.reel-pausa[aria-pressed="true"] .icone-continuar { display: block; }

/* a abertura (≤ 1,6 s; uma vez, em CSS — roda antes do JS e sem ele): o visor se desenha, as linhas do título entram
   com o puxão de foco (borrado → nítido), o showreel chega com um zoom curto, a REC acende e passa a pulsar.
   O poster NÃO tem fade: ele é o maior elemento do hero (o LCP); transparente, o navegador não o conta. */
@media (prefers-reduced-motion: no-preference) {
  .visor .canto { animation: desenha .35s cubic-bezier(.2, .7, .2, 1) both; }
  .visor .c2 { animation-delay: .05s; } .visor .c3 { animation-delay: .1s; } .visor .c4 { animation-delay: .15s; }
  .hero-l1 { animation: foco .6s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .hero-l2 { animation: foco .65s cubic-bezier(.2, .7, .2, 1) .3s both; }
  .hero-sub { animation: foco .5s cubic-bezier(.2, .7, .2, 1) .5s both; }
  .acoes { animation: entra .5s cubic-bezier(.2, .7, .2, 1) .65s both; }
  .reel-tela { animation: zoom .7s cubic-bezier(.2, .7, .2, 1) .35s both; }
  .reel-tela .canto { animation: desenha .3s cubic-bezier(.2, .7, .2, 1) .85s both; }
  .reel-acoes { animation: entra .4s cubic-bezier(.2, .7, .2, 1) .8s both; }
  .rec { animation: aparece .2s ease-out 1s both; }
  .rec-luz { animation: acende .6s ease-out 1s both, pulsa 2s ease-in-out 1.6s infinite; }
  .rolar { animation: aparece .4s ease-out 1.2s both; }
  .rolar-cabeca { animation: varre 2.4s cubic-bezier(.6, 0, .4, 1) 1.6s infinite; }
  /* montagem do reel (o JS liga .montagem e corta): cada plano entra com zoom lento e a tarja abre da esquerda */
  .reel.montagem .reel-plano.atual img { animation: lento 2.8s linear both; }
  .reel.montagem .reel-plano.atual .reel-tarja { animation: tarja .45s cubic-bezier(.2, .7, .2, 1) .2s both; }
  .reel.pausado .reel-plano img, .reel.pausado .reel-tarja { animation-play-state: paused; }
}
@keyframes desenha { from { width: 0; height: 0; opacity: 0; } }
@keyframes pulsa { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 1, 11, .45); } 50% { opacity: .55; box-shadow: 0 0 0 6px rgba(255, 1, 11, 0); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes acende { 0% { opacity: 0; } 30% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 1, 11, .6); } 100% { box-shadow: 0 0 0 12px rgba(255, 1, 11, 0); } }
@keyframes entra { from { opacity: .01; transform: translateY(10px); } }
@keyframes foco { from { opacity: .01; filter: blur(12px); transform: translateY(12px); } }
@keyframes zoom { from { opacity: .01; transform: scale(.9); } }
@keyframes lento { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes tarja { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes varre { from { transform: translateX(-14px); } to { transform: translateX(56px); } }

/* seções: separação por espaço e tom, sem linhas */
.secao { max-width: var(--largura); margin: 0 auto; padding: var(--secao) var(--gutter); }
.secao h2 { margin-bottom: var(--e6); }
.palco { max-width: none; background: var(--palco); }
.palco > * { max-width: calc(var(--largura) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }

/* fotos do dono (horizontais, 1376 × 768); sem a foto, o quadro do visor vazio segura o lugar */
.foto { width: 100%; aspect-ratio: 1376 / 768; object-fit: cover; border-radius: var(--raio); }
/* quadro: a moldura das imagens de seção — o .zoom leva o zoom do hover, a <img> o parallax (com 14% de sobra só
   quando há movimento), a .tarja é a legenda de TV que entra no hover */
.quadro { position: relative; overflow: hidden; border-radius: var(--raio); background: var(--palco); }
.quadro .zoom { transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
.quadro .foto { display: block; border-radius: 0; }
.movimento .quadro .foto { scale: 1.14; }
.servico-quadro:hover .zoom { scale: 1.04; }
.tarja { position: absolute; left: var(--e4); bottom: var(--e4); display: flex; align-items: center; gap: var(--e3); margin: 0; padding: var(--e2) var(--e3); background: rgba(8, 10, 12, .86); border-left: 3px solid var(--rec); color: var(--luz); font: 600 14px/1.2 var(--texto); clip-path: inset(0 100% 0 0); transition: clip-path .45s cubic-bezier(.2, .7, .2, 1); }
.tarja b { color: var(--regua); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.servico-quadro:hover .tarja { clip-path: inset(0 0 0 0); }
.foto-vazia { position: relative; background: var(--palco); }
.foto-vazia .cantos::before, .foto-vazia .cantos::after { content: ""; position: absolute; width: 22px; height: 22px; border: 0 solid rgba(238, 241, 244, .22); }
.foto-vazia .cantos::before { top: var(--e4); left: var(--e4); border-top-width: 2px; border-left-width: 2px; }
.foto-vazia .cantos::after { bottom: var(--e4); right: var(--e4); border-bottom-width: 2px; border-right-width: 2px; }

/* serviços: cada um com a sua imagem, em linhas (imagem/texto alternados no desktop, empilhados no celular), sem
   caixa; serviço sem imagem vira linha só de texto (nunca um vazio) */
.servicos-lista { display: grid; gap: var(--e8); }
.servico { display: grid; gap: var(--e5); align-items: center; }
.servico-texto { max-width: 52ch; }
.servico h3 { display: flex; align-items: center; gap: var(--e3); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--e3); }
.icone-servico { width: 28px; height: 28px; color: var(--luz); }
.servico-detalhe { margin-top: var(--e3); }

/* portfólio: carrossel com scroll-snap, filtro em cima, controles embaixo */
.portfolio-topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e4) var(--e6); margin-bottom: var(--e6); }
.portfolio-topo h2 { margin: 0; }
.filtros { display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.filtro { flex: none; min-height: 40px; padding: 0 var(--e4); border-radius: 999px; border: 1px solid var(--linha); background: none; color: var(--regua); font: 500 14px/1 var(--texto); cursor: pointer; transition: background-color .15s, color .15s; }
.filtro:hover { color: var(--luz); border-color: rgba(238, 241, 244, .24); }
.filtro[aria-pressed="true"] { background: var(--luz); border-color: var(--luz); color: var(--estudio); }
.trilho { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--e4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: var(--e1); }
.trilho::-webkit-scrollbar { display: none; }
.trilho:focus-visible { outline-offset: 6px; }
.slide { scroll-snap-align: start; min-width: 0; }
.slide[hidden] { display: none; }
.trabalho-video { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--raio) var(--raio) 0 0; overflow: hidden; background: var(--estudio); cursor: pointer; aspect-ratio: 16 / 9; }
.trabalho-video img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); transition: filter .2s; }
.sem-capa { display: block; width: 100%; height: 100%; background: var(--estudio); }
.play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgba(17, 20, 23, .7); color: var(--luz); transition: background-color .2s, transform .2s; }
.play .icone { width: 22px; height: 22px; margin-left: 3px; }
.trabalho-video:hover img, .trabalho-video:focus-visible img { filter: brightness(1); }
.trabalho-video:hover .play, .trabalho-video:focus-visible .play { background: var(--acao); transform: scale(1.06); }
.trabalho-video:focus-visible { outline-offset: -3px; }
.legenda { position: relative; background: var(--estudio); border-left: 3px solid var(--luz); border-radius: 0 0 var(--raio) var(--raio); padding: var(--e3) var(--e4); }
.legenda h3 { font-size: 1rem; line-height: 1.3; }
.legenda p { display: flex; justify-content: space-between; gap: var(--e4); font-size: 14px; margin-top: var(--e1); }
.duracao { font-variant-numeric: tabular-nums; color: var(--luz); }
.trabalho-desc { font-size: 14px; margin-top: var(--e3); }
.controles { display: flex; align-items: center; gap: var(--e4); margin-top: var(--e5); }
/* timeline do portfólio: a agulha mostra quanto do trilho já passou */
.linha-tempo { display: none; position: relative; flex: 1; min-width: 60px; height: 2px; background: rgba(238, 241, 244, .16); overflow: hidden; }
.js .linha-tempo { display: block; }
.linha-tempo-cabeca { position: absolute; inset: 0; background: var(--luz); transform-origin: 0 50%; transform: scaleX(0); }
/* preso (desktop, com movimento): a seção trava na rolagem e o trilho anda na horizontal com ela */
.palco { overflow-x: clip; }
.palco-preso { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--e8); padding-bottom: var(--e7); }
.palco-preso > * { width: 100%; }
.carrossel.preso .trilho { overflow: visible; scroll-snap-type: none; grid-auto-columns: min(36vw, 500px); will-change: transform; }
.carrossel.preso .slide { scroll-snap-align: none; }
.ctl { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linha); background: none; color: var(--luz); cursor: pointer; transition: background-color .15s; }
.ctl:hover { background: var(--campo); }
.ctl:active { transform: translateY(1px); }
.ctl[disabled] { opacity: .3; cursor: default; transform: none; }
.ctl-pausa .icone-continuar, .ctl-pausa[aria-pressed="true"] .icone:not(.icone-continuar) { display: none; }
.ctl-pausa[aria-pressed="true"] .icone-continuar { display: block; }
.contador { min-width: 5.5em; text-align: center; font-variant-numeric: tabular-nums; color: var(--luz); font-size: 14px; letter-spacing: .06em; }
.vazio a { color: var(--luz); }

/* sobre */
.sobre { display: grid; gap: var(--e6); align-items: center; }
.sobre-quadro .foto { aspect-ratio: 1376 / 768; }
.sobre-texto p { font-size: 1.0625rem; max-width: 62ch; }
.sobre-texto p + p { margin-top: var(--e4); }

/* depoimentos: uma citação por vez, sem caixa */
.carrossel-um .trilho { grid-auto-columns: 100%; }
.depoimento blockquote { margin: 0; max-width: 34ch; }
.depoimento blockquote p { color: var(--luz); font: 600 clamp(1.25rem, 1rem + 1.4vw, 1.875rem)/1.35 var(--texto); }
.credito { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e5); font-size: 15px; }
.credito img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.credito strong { color: var(--luz); font-weight: 600; display: block; }

/* contato */
.contato { display: grid; gap: var(--e7); }
.contato h2 { grid-column: 1 / -1; margin-bottom: 0; }
.form { display: grid; gap: var(--e4); }
.campo { display: grid; gap: var(--e2); }
.campo label { color: var(--luz); font-weight: 500; font-size: 15px; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 46px; padding: 10px var(--e3); border-radius: var(--raio); border: 1px solid var(--linha); background: var(--campo); color: var(--luz); font: 400 16px/1.4 var(--texto); transition: border-color .15s; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--regua) 50%), linear-gradient(135deg, var(--regua) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.campo select option { background: var(--palco); color: var(--luz); }
.campo textarea { resize: vertical; }
.campo input::placeholder { color: #6F7882; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: rgba(238, 241, 244, .22); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--luz); }
.campo [aria-invalid="true"] { border-color: var(--erro); }
.erro-campo { color: var(--erro); font-size: 14px; }
.campo-isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile:empty { display: none; }
.enviar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); }
.aviso-privacidade { font-size: 14px; }
.form-retorno { min-height: 1.6em; font-weight: 500; }
.form-retorno.ok { color: var(--ok); }
.form-retorno.erro { color: var(--erro); }
.contato-direto { display: grid; gap: var(--e4); align-content: start; }
/* botão de envio: a luz pisca enquanto envia (está gravando), o "check" se traça quando chega */
.botao-enviar { min-width: 196px; }
.enviar-luz, .enviar-ok { display: none; }
.botao-enviar.enviando { background: var(--acao-hover); }
.botao-enviar.enviando .enviar-luz { display: block; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pisca .9s ease-in-out infinite; }
.botao-enviar.enviado, .botao-enviar.enviado:hover { background: #15803D; }
.botao-enviar.enviado .enviar-ok { display: block; width: 18px; height: 18px; stroke-width: 2.25; stroke-dasharray: 22; animation: traca .5s ease-out both; }
@keyframes pisca { 50% { opacity: .2; } }
@keyframes traca { from { stroke-dashoffset: 22; } }
.contato-direto-titulo { color: var(--luz); font-weight: 600; }
.canal { display: inline-flex; align-items: center; gap: var(--e3); color: var(--luz); text-decoration: none; min-height: 44px; }
.canal:hover span { text-decoration: underline; }

/* rodapé: uma faixa */
.rodape { max-width: var(--largura); margin: 0 auto; padding: var(--e7) var(--gutter); display: grid; gap: var(--e5); font-size: 14px; }
.rodape-marca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e5); }
.rodape-marca img { width: 30px; }
.rodape-marca strong { color: var(--luz); font-weight: 600; }
.rec-rodape { position: static; animation: none; }
.rodape-redes { display: flex; gap: var(--e2); }
.rodape-redes a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--luz); border: 1px solid var(--linha); transition: background-color .15s; }
.rodape-redes a:hover { background: var(--campo); }

/* vídeo em modal: cresce a partir da capa */
.video { width: min(100vw - 2 * var(--gutter), 1040px); max-width: none; padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--palco); color: var(--luz); }
.video::backdrop { background: var(--veu); }
.video[open] { animation: cresce .22s cubic-bezier(.2, .7, .2, 1); }
.video-topo { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e2) var(--e2) var(--e4); }
.video-titulo { font: 600 1rem/1.3 var(--texto); margin-right: auto; }
.video-fechar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--raio); border: 1px solid var(--linha); background: none; color: var(--luz); cursor: pointer; }
.video-fechar:hover { background: var(--campo); }
.video-quadro { aspect-ratio: 16 / 9; background: #000; }
.video-quadro iframe, .video-quadro video { width: 100%; height: 100%; border: 0; display: block; }

/* cursor (desktop com mouse, com movimento): um ponto que vira "play" sobre os vídeos; some nos campos (lá volta o
   cursor de texto do sistema) */
html.cursor-ativo, html.cursor-ativo * { cursor: none; }
html.cursor-ativo :is(input, textarea, select, iframe) { cursor: auto; }
.cursor { position: fixed; left: 0; top: 0; z-index: 70; width: 10px; height: 10px; margin: -5px 0 0 -5px; display: grid; place-items: center; border-radius: 50%; background: var(--luz); color: #fff; pointer-events: none; opacity: 0; transition: width .22s cubic-bezier(.2, .7, .2, 1), height .22s cubic-bezier(.2, .7, .2, 1), margin .22s cubic-bezier(.2, .7, .2, 1), background-color .22s, opacity .15s; }
.cursor .icone { width: 22px; height: 22px; margin-left: 3px; opacity: 0; transition: opacity .15s; }
.cursor.visivel { opacity: 1; }
.cursor.play { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: var(--acao); }
.cursor.play .icone { opacity: 1; }
.cursor.some { opacity: 0; }
@keyframes cresce { from { opacity: 0; transform: translate(var(--de-x, 0), var(--de-y, 0)) scale(.6); } }

@media (min-width: 720px) {
  :root { --gutter: 24px; }
  .menu-botao { display: none; }
  .menu { display: block; position: static; background: none; border: 0; }
  .menu ul { display: flex; gap: var(--e1); padding: 0; }
  .menu a { padding: var(--e2) var(--e3); border-radius: var(--raio); }
  .menu a:hover { background: var(--campo); }
  .trilho { grid-auto-columns: calc((100% - var(--e5)) / 2); gap: var(--e5); }
  .carrossel-um .trilho { grid-auto-columns: 100%; }
  .form { grid-template-columns: 1fr 1fr; }
  .campo-largo { grid-column: 1 / -1; }
  .rodape { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 1000px) {
  :root { --gutter: 40px; --secao: var(--e9); }
  .hero { min-height: calc(100svh - 60px); padding-bottom: var(--e9); }
  .visor { inset: var(--e6); }
  .rec { right: calc(var(--e6) + var(--e5)); bottom: calc(var(--e6) + var(--e4)); }
  .rolar { display: flex; bottom: calc(var(--e6) + var(--e4)); }
  .hero-grade.com-reel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "texto reel" "acoes reel"; column-gap: var(--e8); row-gap: var(--e6); align-items: center; }
  .com-reel .hero-texto { grid-area: texto; align-self: end; }
  .com-reel .reel { grid-area: reel; }
  .com-reel .acoes { grid-area: acoes; align-self: start; }
  .servico:has(.servico-quadro) { grid-template-columns: 1fr 1fr; gap: var(--e8); }
  .servico:has(.servico-quadro):nth-child(even) .servico-quadro { order: 2; }
  .trilho { grid-auto-columns: calc((100% - 2 * var(--e5)) / 3); }
  .sobre { grid-template-columns: 1fr 1fr; gap: var(--e8); }
  .contato { grid-template-columns: 7fr 5fr; column-gap: var(--e8); }
  .contato-direto { padding-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tarja { clip-path: none; display: none; }
}