/* =============================================================================
ERICK RANDAL — "Corte"
O portfólio como um filme de arquitetura, numa língua dupla (corte, plano, montagem,
detalhe, ficha técnica): quadro de cinema, cortes, legendas, linha do tempo de edição e
créditos; projeto executado é "rodado", projeto no papel é "roteiro". Desenhos técnicos
entram como folhas de papel. Três modos de ver: filme, mesa de luz e roteiro.
========================================================================== */
/* tipografia (todas com licença SIL Open Font License, ver assets/fonts/LICENSE-*):
Big Shoulders para os letreiros, como créditos de cinema; Newsreader para ler; Azeret Mono para
claquetes, fichas e rótulos; Big Shoulders Stencil para o carimbo de rodado e roteiro */
@font-face { font-family: "Big Shoulders"; src: url("../fonts/big-shoulders-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Stencil"; src: url("../fonts/big-shoulders-stencil-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-var-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Azeret Mono"; src: url("../fonts/azeret-mono-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
--noite: #0b0c0b;
--noite-2: #121311;
--noite-3: #1b1c1a;
--claro: #ece9e1;
--claro-2: rgb(236 233 225 / 0.78);
--claro-3: rgb(236 233 225 / 0.68); /* 7,7:1 sobre o fundo (AAA) */
--linha: rgb(236 233 225 / 0.14);
--linha-2: rgb(236 233 225 / 0.42); /* 3,5:1: contorno de campos e controles */
--papel: #ece9e1;
--papel-2: #e2ded3;
--tinta: #1b1b19;
--tinta-2: #48463f;
--tinta-3: #58544d;
--vermelho: #ff7452; /* texto sobre o escuro: 7,3:1 (AAA) */
--vermelho-tinta: #9e2f1a; /* texto sobre o papel: 6:1 */
--vermelho-vivo: #ff5a36;
--fonte: "Newsreader", Georgia, "Times New Roman", serif;
--titulo: "Big Shoulders", "Arial Narrow", "Helvetica Neue", sans-serif;
--estencil: "Big Shoulders Stencil", "Big Shoulders", "Arial Narrow", sans-serif;
--mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--margem: clamp(16px, 4vw, 56px);
--calha: clamp(12px, 1.8vw, 28px);
--topo: 64px;
--lt: 64px; /* altura da linha do tempo */
--secao: clamp(96px, 15vh, 200px);
--ease: cubic-bezier(0.2, 0.7, 0.1, 1);
--ease-io: cubic-bezier(0.7, 0, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--noite); scroll-padding-top: calc(var(--topo) + 16px); scroll-padding-bottom: calc(var(--lt) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
margin: 0; min-height: 100vh; background: var(--noite); color: var(--claro);
font-family: var(--fonte); font-size: clamp(17px, 0.35vw + 15.4px, 19px); line-height: 1.55;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--vermelho-vivo); color: var(--noite); }
:focus { outline: none; }
:focus-visible { outline: 2px dashed var(--vermelho-vivo); outline-offset: 4px; border-radius: 1px; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; }
/* ---------- utilidades ---------- */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pulos { position: fixed; left: 12px; top: 12px; z-index: 900; display: grid; justify-items: start; gap: 6px; pointer-events: none; }
.pular { pointer-events: none; padding: 13px 16px 12px; background: var(--claro); color: var(--noite); font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; opacity: 0; transform: translateY(-12px); transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.pular:focus { pointer-events: auto; opacity: 1; transform: none; outline-color: var(--vermelho-vivo); }
.pular[aria-pressed="true"] { background: var(--vermelho-vivo); }
.kicker { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1.2 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--vermelho); }
.kicker::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.rotulo { font-family: var(--mono); font-size: 11.5px; line-height: 1.4; letter-spacing: 0.07em; text-transform: uppercase; color: var(--claro-3); }
.rotulo--claro { color: var(--claro); }
.rotulo--tinta { color: var(--tinta); }
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); padding-inline: var(--margem); }
.secao { position: relative; padding-block: var(--secao); }
.titulo-l, .titulo-m { font-family: var(--titulo); font-weight: 800; letter-spacing: -0.005em; line-height: 0.86; text-wrap: balance; }
.titulo-l { font-size: clamp(40px, 6.2vw, 108px); }
.titulo-m { font-size: clamp(28px, 3.4vw, 54px); line-height: 0.95; letter-spacing: -0.02em; }
.texto-l { font-size: clamp(19px, 1.1vw + 13px, 26px); line-height: 1.32; font-weight: 420; letter-spacing: -0.01em; text-wrap: pretty; }
.texto { max-width: 62ch; color: var(--claro-2); text-wrap: pretty; }
.texto p + p { margin-top: 1em; }
/* ---------- camadas fixas ---------- */
canvas.palco { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.grao {
position: fixed; inset: -50%; z-index: 70; pointer-events: none; opacity: 0.08; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
animation: grao 0.9s steps(6) infinite;
}
@keyframes grao { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
main { position: relative; z-index: 2; display: block; }
main:focus { outline: none; }
/* ---------- cabeçalho ---------- */
.topo { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topo); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: var(--margem); transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.topo.rolou { background: rgb(11 12 11 / 0.94); box-shadow: 0 1px 0 var(--linha); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* o 3D por movimento (celular) é oferecido só no cartaz: depois de ativado, vale para o site todo */
.topo.rolou .topo__giro { visibility: hidden; opacity: 0; pointer-events: none; }
.topo__marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca-mini { width: 34px; height: 34px; flex: none; }
.marca-mini rect { fill: none; stroke: currentColor; stroke-width: 12; }
.marca-mini path { fill: currentColor; }
.topo__nome { font-family: var(--titulo); font-weight: 800; font-size: 19px; letter-spacing: 0.02em; text-transform: uppercase; }
.topo__arq { font: 400 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--claro-3); padding-top: 2px; text-transform: uppercase; }
.topo__nav { display: flex; gap: clamp(18px, 2.6vw, 40px); margin-left: auto; }
.topo__nav a { position: relative; text-decoration: none; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 2px; }
.topo__nav a:hover { color: var(--vermelho); }
.topo__nav a[aria-current="true"]::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--vermelho-vivo); transform: translateX(-50%); }
/* som: quatro barrinhas que viram um equalizador quando o som está ligado */
.topo__som { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 2px; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--claro-2); }
.topo__som:hover, .topo__som[aria-pressed="true"] { color: var(--claro); }
.topo__som-ico { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.topo__som-ico i { width: 2px; height: 3px; background: currentColor; }
.topo__som[aria-pressed="true"] .topo__som-ico i { background: var(--vermelho-vivo); animation: equalizador 0.9s ease-in-out infinite alternate; }
.topo__som[aria-pressed="true"] .topo__som-ico i:nth-child(2) { animation-delay: -0.3s; animation-duration: 0.7s; }
.topo__som[aria-pressed="true"] .topo__som-ico i:nth-child(3) { animation-delay: -0.6s; animation-duration: 1.1s; }
.topo__som[aria-pressed="true"] .topo__som-ico i:nth-child(4) { animation-delay: -0.15s; animation-duration: 0.8s; }
@keyframes equalizador { from { height: 3px; } to { height: 12px; } }
.topo__giro { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 10px 8px; border: 1px solid var(--linha-2); }
.topo__menu { display: none; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 0; }
.topo__menu-ico { position: relative; width: 22px; height: 10px; }
.topo__menu-ico::before, .topo__menu-ico::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease), top 0.4s var(--ease); }
.topo__menu-ico::before { top: 0; }
.topo__menu-ico::after { top: 8.5px; }
.topo__menu[aria-expanded="true"] .topo__menu-ico::before { top: 4px; transform: rotate(45deg); }
.topo__menu[aria-expanded="true"] .topo__menu-ico::after { top: 4px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 45; background: var(--noite); padding: calc(var(--topo) + 32px) var(--margem) 40px; display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu__lista a { display: flex; align-items: baseline; gap: 14px; text-decoration: none; font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: clamp(48px, 15vw, 120px); line-height: 1; border-bottom: 1px solid var(--linha-2); padding-block: 10px; }
.menu__n { font: 400 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--vermelho); }
/* transição de página: corte seco para o preto com a claquete do projeto */
.corte { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: #000; color: var(--claro); clip-path: inset(0 100% 0 0); pointer-events: none; visibility: hidden; }
.corte.ativo { visibility: visible; pointer-events: auto; }
.corte__txt { display: grid; gap: 16px; justify-items: center; text-align: center; padding-inline: var(--margem); }
.corte__txt .rotulo { color: var(--vermelho); letter-spacing: 0.2em; }
.corte__txt strong { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: clamp(56px, 12vw, 200px); line-height: 0.82; }
/* ---------- botões ---------- */
.botao { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px 13px; border: 1.5px solid var(--claro); font: 500 12.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; background: rgb(11 12 11 / 0.35); color: var(--claro); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s; }
.botao:hover { background: var(--claro); color: var(--noite); }
.botao--cheio { background: var(--claro); color: var(--noite); }
.botao--cheio:hover { background: var(--vermelho-vivo); border-color: var(--vermelho-vivo); color: var(--noite); }
.botao--tinta { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.botao--tinta:hover { background: var(--tinta); color: var(--papel); }
.botao .seta { transition: transform 0.35s var(--ease); }
.botao:hover .seta { transform: translateX(4px); }
/* rodado (executado) ou roteiro (projeto): carimbo em estêncil, como numa lata de filme ou numa placa de obra */
.estado { display: inline-flex; align-items: center; gap: 9px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro-3); }
.estado b { padding: 5px 7px 3px; border: 1.5px solid currentColor; font: 700 15px/1 var(--estencil); letter-spacing: 0.08em; color: var(--claro); }
.estado--rodado b { color: var(--vermelho); }
.storyboard__argumento { font-style: italic; font-size: clamp(18px, 0.6vw + 14px, 22px); line-height: 1.35; color: var(--claro); max-width: 40ch; }
/* =============================================================================
O FILME
========================================================================== */
.filme__trilho { position: relative; height: calc((var(--telas, 0) + 1) * 100svh); }
.ancora { position: absolute; left: 0; top: calc(var(--t, 0) * 100svh); width: 1px; height: 1px; }
/* a tela é transparente: o quadro mostra o canvas 3D que fica atrás de tudo */
.filme__tela { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: var(--topo) 0 var(--lt); }
.moldura {
position: relative; isolation: isolate; overflow: hidden; container-type: size;
width: min(100vw, calc((100svh - var(--topo) - var(--lt) - 12px) * 2.39)); aspect-ratio: 2.39 / 1;
}
@media (max-aspect-ratio: 3/2) { .moldura { width: min(100vw, calc((100svh - var(--topo) - var(--lt) - 12px) * 2)); aspect-ratio: 2 / 1; } }
@media (max-aspect-ratio: 5/4) { .moldura { width: min(100vw, calc((100svh - var(--topo) - var(--lt) - 12px) * 1.7778)); aspect-ratio: 16 / 9; } }
@media (max-aspect-ratio: 1/1) { .moldura { width: 100vw; height: calc(100svh - var(--topo) - var(--lt)); aspect-ratio: auto; } }
/* até o 3D entrar, a miniatura da capa (desfocada e escura) segura o quadro; depois some devagar */
.moldura { overflow: hidden; }
.moldura__poster { position: absolute; inset: -40px; z-index: 0; background: center / cover no-repeat; filter: blur(18px) brightness(0.4); pointer-events: none; transition: opacity 1.6s var(--ease); }
.com-3d .moldura__poster, .movimento-reduzido .moldura__poster, .sem-webgl .moldura__poster { opacity: 0; }
/* link direto para um projeto ou outro modo: o cartaz pré-desenhado no HTML fica escondido */
.rota-interna #vista-inicio { display: none; }
/* cantos do quadro (marcas de enquadramento) */
.moldura__canto { position: absolute; z-index: 8; width: 18px; height: 18px; border: 0 solid rgb(236 233 225 / 0.55); pointer-events: none; }
.moldura__canto:nth-of-type(1) { left: 10px; top: 10px; border-left-width: 1.5px; border-top-width: 1.5px; }
.moldura__canto:nth-of-type(2) { right: 10px; top: 10px; border-right-width: 1.5px; border-top-width: 1.5px; }
.moldura__canto:nth-of-type(3) { left: 10px; bottom: 10px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.moldura__canto:nth-of-type(4) { right: 10px; bottom: 10px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
/* claquete: cena, plano e código de tempo, como no monitor da câmera */
.claquete { position: absolute; inset: 0 0 auto 0; z-index: 8; display: flex; gap: 22px; padding: 16px 38px 26px; background: linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0)); font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(236 233 225 / 0.72); text-shadow: 0 1px 3px rgb(0 0 0 / 0.8); pointer-events: none; }
.claquete__tc { margin-left: auto; font-variant-numeric: tabular-nums; }
.claquete__tc::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--vermelho-vivo); vertical-align: 0.5px; }
/* planos montados no DOM */
.planos { position: absolute; inset: 0; z-index: 1; }
.plano { position: absolute; inset: 0; overflow: hidden; visibility: hidden; background: var(--noite); }
.plano.ativo { visibility: visible; }
.plano img { max-width: none; }
.plano--insert img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateX(var(--x, 0)) scale(var(--zoom, 1)); }
.plano--folha { display: grid; place-items: center; padding: 7cqh 6cqw; }
/* a largura sai da altura disponível × proporção: a folha nunca deforma */
.folha-filme { position: relative; width: min(100%, calc(72cqh * var(--arn, 1))); aspect-ratio: var(--ar); padding: 2.5%; background: var(--papel); box-shadow: 0 40px 80px -40px #000; transform: scale(var(--zoom, 1)); }
.folha-filme img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.plano--planta { display: flex; align-items: center; justify-content: center; gap: 5cqw; padding: 9cqh 5cqw 15cqh; }
.planta-filme {
position: relative; flex: none; width: min(100%, calc(76cqh * var(--arn, 1))); aspect-ratio: var(--ar); background: var(--papel); box-shadow: 0 40px 80px -40px #000;
clip-path: inset(0 0 calc((1 - var(--revela, 0)) * 100%) 0); transform: scale(var(--zoom, 1)); transform-origin: 50% 40%;
}
.plano--com-quadro .planta-filme { width: min(58%, calc(76cqh * var(--arn, 1))); }
/* duas plantas lado a lado, cada uma com o seu rótulo */
.plano--duas { gap: 4cqw; }
.planta-filme__par { flex: 0 1 46%; display: grid; justify-items: center; align-content: center; gap: 1.8cqh; }
.planta-filme__par .planta-filme { width: min(100%, calc(66cqh * var(--arn, 1))); }
.planta-filme__rot { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--claro-2); }
.planta-filme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.planta-filme__amb { position: absolute; outline: 2px solid var(--vermelho-tinta); outline-offset: -1px; background: repeating-linear-gradient(-45deg, rgb(224 74 44 / 0.42) 0 1px, transparent 1px 6px); opacity: 0; transition: opacity 0.35s var(--ease); }
.planta-filme__amb.ativo { opacity: 1; }
.areas-filme { width: min(34%, 360px); font: 400 clamp(11px, 1.9cqh, 14px)/1.3 var(--mono); letter-spacing: 0.04em; color: var(--claro); }
.areas-filme li { display: flex; justify-content: space-between; gap: 18px; padding: 1.5cqh 0; border-top: 1px solid var(--linha); opacity: 0.28; transition: opacity 0.35s var(--ease), color 0.35s var(--ease); }
.areas-filme li.visto { opacity: 1; }
.areas-filme li.ativo { color: var(--vermelho); }
.areas-filme b { font-weight: 500; font-variant-numeric: tabular-nums; }
.areas-filme__cab { opacity: 1 !important; border-top: 1.5px solid var(--claro) !important; font-size: 0.82em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--claro-3); }
.areas-filme__total { border-top: 1.5px solid var(--claro) !important; font-weight: 500; }
.somado .areas-filme__total { opacity: 1; }
.plano--obra { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.obra-filme { position: relative; overflow: hidden; }
.obra-filme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.obra-filme--foto { clip-path: inset(0 0 0 calc((1 - var(--corte, 0)) * 100%)); }
.obra-filme--foto::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: calc((1 - var(--corte, 0)) * 100%); width: 2px; background: var(--vermelho-vivo); }
.obra-filme figcaption { position: absolute; z-index: 1; left: 14px; bottom: 14px; padding: 6px 9px 5px; background: rgb(0 0 0 / 0.62); font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.obra-filme--foto figcaption { left: auto; right: 14px; color: var(--claro); border-right: 2px solid var(--vermelho-vivo); }
/* chamadas presas ao 3D (estilo documentário) */
.chamadas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.chamada { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.chamada i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--claro); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35); }
.chamada i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--vermelho-vivo); }
.chamada span { position: absolute; left: 16px; top: -11px; white-space: nowrap; padding: 6px 9px 5px; background: rgb(0 0 0 / 0.66); border-left: 2px solid var(--vermelho-vivo); font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro); clip-path: inset(0 100% 0 0); transition: clip-path 0.6s var(--ease); }
.chamada.ativa span { clip-path: inset(0 0 0 0); }
/* legenda de cinema (caixa translúcida atrás de cada linha: contraste garantido) */
.legenda { position: absolute; left: 50%; bottom: max(7cqh, 44px); z-index: 5; width: min(80%, 58ch); transform: translateX(-50%); text-align: center; pointer-events: none; }
.legenda span { font-size: clamp(15px, 0.55vw + 11px, 20px); line-height: 1.5; font-weight: 450; color: #f7f4ee; background: rgb(0 0 0 / 0.62); padding: 3px 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.legenda.vazia { visibility: hidden; }
/* cenas: cartela de título e fim de cena (texto de verdade, acessível) */
.cena { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 0 6%; pointer-events: none; }
.cena__cartela, .cena__fim { grid-area: 1 / 1; max-width: 100%; display: grid; justify-items: center; gap: clamp(10px, 2.4cqh, 20px); text-align: center; opacity: 0; transition: opacity 0.25s; }
.cena[data-estado="cartela"] .cena__cartela, .cena[data-estado="fim"] .cena__fim { opacity: 1; }
.cena[data-estado="fim"] .cena__fim a { pointer-events: auto; }
.cena__n { font: 500 12px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--vermelho); }
/* a palavra mais longa (--letras, de render.js) cabe sempre; se alguém ampliar o espaçamento do
texto, ela quebra em vez de sumir na borda (WCAG 1.4.12) */
.cena__titulo { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: min(36cqh, 21cqw, calc(86cqw / (var(--letras, 1) * 0.52))); line-height: 0.8; letter-spacing: 0.005em; overflow-wrap: anywhere; }
.cena__meta, .cena__prox { font: 400 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--claro-2); }
.cena__argumento { max-width: 44ch; margin-top: 4px; font: italic 400 clamp(16px, 2.5cqh, 22px)/1.38 var(--fonte); color: var(--claro); text-wrap: balance; }
.cena__fim .botao { margin-block: 6px; }
a.cena__prox { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 4px; text-decoration: none; }
a.cena__prox:hover { color: var(--claro); }
/* cartaz: o título do filme */
.cartaz { position: absolute; inset: 0; z-index: 6; display: grid; align-content: center; justify-items: center; gap: clamp(10px, 2.6cqh, 24px); padding: 0 6%; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.cartaz.ativo { opacity: 1; }
/* véu atrás do texto do cartaz (some durante a abertura, que tem o seu próprio preto) */
.cartaz::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 58% 62% at 50% 50%, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0) 100%); transition: opacity 0.8s; }
.na-abertura .cartaz::before { opacity: 0; }
.cartaz.ativo a { pointer-events: auto; }
.cartaz__sobre { font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--claro-2); }
.cartaz__titulo { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: min(31cqh, 16.5cqw); line-height: 0.8; letter-spacing: 0.005em; text-shadow: 0 6px 60px rgb(0 0 0 / 0.5); }
.cartaz__titulo .letra { will-change: transform; }
.cartaz__tese { font: italic 400 clamp(19px, 0.9vw + 13px, 28px)/1.2 var(--fonte); color: var(--claro); text-shadow: 0 2px 30px rgb(0 0 0 / 0.6); }
.cartaz__lead { max-width: 50ch; font-size: clamp(15px, 0.5vw + 12px, 19px); line-height: 1.45; color: var(--claro-2); text-wrap: balance; }
.cartaz__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
/* rever a abertura */
.rever { position: absolute; left: 38px; bottom: 16px; z-index: 7; min-height: 32px; padding: 7px 10px 6px; border: 1px solid var(--linha-2); background: rgb(0 0 0 / 0.5); font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro-2); opacity: 0; pointer-events: none; transition: opacity 0.35s, color 0.25s, border-color 0.25s; }
.rever.ativo { opacity: 1; pointer-events: auto; }
.rever:hover { color: var(--claro); border-color: var(--claro); }
.rever[hidden] { display: none; }
/* abertura (toca sozinha; dá para pular) */
.abertura { position: absolute; inset: 0; z-index: 5; pointer-events: none; visibility: hidden; }
.abertura__preto { position: absolute; inset: 0; background: #000; visibility: hidden; opacity: 0; }
.abertura__grade, .abertura__janelas, .abertura__creditos { position: absolute; inset: 0; }
.abertura__linha { position: absolute; background: var(--claro); }
.abertura__linha.h1, .abertura__linha.h2, .abertura__linha.h3 { left: 0; right: 0; height: 1px; transform-origin: left; }
.abertura__linha.h1 { top: 22%; }
.abertura__linha.h2 { top: 50%; transform-origin: right; }
.abertura__linha.h3 { top: 78%; }
.abertura__linha.v1, .abertura__linha.v2, .abertura__linha.v3 { top: 0; bottom: 0; width: 1px; transform-origin: top; }
.abertura__linha.v1 { left: 18%; }
.abertura__linha.v2 { left: 50%; transform-origin: bottom; }
.abertura__linha.v3 { left: 82%; }
.abertura__janela { position: absolute; background-size: cover; background-position: 50% 50%; clip-path: inset(50% 50% 50% 50%); }
/* a janela do desenho é papel; cada janela traz a claquete do seu plano: traço, render, obra */
.abertura__janela--desenho { background-color: var(--papel); background-blend-mode: multiply; }
.abertura__janela b { position: absolute; left: 10px; bottom: 9px; padding: 5px 7px 4px; background: rgb(0 0 0 / 0.72); font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--claro); }
.abertura__janela--desenho b { background: var(--tinta); }
.abertura__janela.j0 { left: 0; top: 22%; width: 18%; height: 56%; }
.abertura__janela.j1 { left: 50%; top: 0; width: 32%; height: 22%; }
.abertura__janela.j2 { left: 82%; top: 50%; width: 18%; height: 50%; }
.abertura__janela.j3 { left: 18%; top: 78%; width: 32%; height: 22%; }
.abertura__creditos span { position: absolute; max-width: 30%; font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--claro); opacity: 0; }
.abertura__creditos .c0 { left: calc(18% + 14px); top: calc(22% - 34px); }
.abertura__creditos .c1 { left: calc(82% + 14px); top: calc(22% - 34px); }
.abertura__creditos .c2 { left: calc(50% + 14px); top: calc(78% + 16px); }
.abertura__fatia { position: absolute; margin: 0; }
.abertura__pular { position: absolute; right: 38px; bottom: 16px; z-index: 9; min-height: 32px; padding: 8px 12px 7px; border: 1px solid var(--linha-2); background: rgb(0 0 0 / 0.55); font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--claro-2); }
.abertura__pular:hover { color: var(--claro); border-color: var(--claro); }
.abertura__pular[hidden] { display: none; }
/* no quadro vertical (celular), a grade dos créditos se reorganiza em colunas mais largas */
@media (max-aspect-ratio: 1/1) {
.abertura__linha.h1 { top: 16%; }
.abertura__linha.h2 { top: 44%; }
.abertura__linha.h3 { top: 72%; }
.abertura__linha.v1 { left: 34%; }
.abertura__linha.v2 { left: 67%; }
.abertura__linha.v3 { display: none; }
.abertura__janela.j0 { left: 0; top: 16%; width: 34%; height: 28%; }
.abertura__janela.j1 { left: 34%; top: 0; width: 66%; height: 16%; }
.abertura__janela.j2 { left: 67%; top: 44%; width: 33%; height: 28%; }
.abertura__janela.j3 { left: 0; top: 72%; width: 67%; height: 28%; }
.abertura__creditos span { font-size: 10px; letter-spacing: 0.1em; }
.abertura__creditos .c0 { left: calc(34% + 10px); top: calc(16% + 12px); max-width: 30%; }
.abertura__creditos .c1 { left: 10px; top: calc(44% + 12px); max-width: 30%; }
.abertura__creditos .c2 { left: calc(67% + 10px); top: calc(72% + 12px); max-width: 30%; }
}
/* ---------- linha do tempo de edição ---------- */
.linha-tempo { position: fixed; inset: auto 0 0 0; z-index: 50; height: var(--lt); display: grid; grid-template-rows: auto 1fr; gap: 7px; padding: 9px var(--margem) 10px; background: var(--noite); border-top: 1px solid var(--linha); font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro-3); user-select: none; -webkit-user-select: none; }
.lt__topo { display: flex; justify-content: space-between; gap: 16px; }
.lt__tc { color: var(--claro); font-variant-numeric: tabular-nums; }
.lt__agora { color: var(--claro-2); }
.lt__dica { margin-inline: auto; color: var(--claro-3); letter-spacing: 0.06em; }
@media (hover: none) { .lt__dica { display: none; } }
.lt__trilha { position: relative; display: flex; gap: 3px; min-height: 24px; cursor: ew-resize; touch-action: pan-y; }
.lt__clipe { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; padding: 0 8px; overflow: hidden; border-radius: 3px; background: #1b1a17; color: var(--claro-3); text-decoration: none; cursor: pointer; }
.lt__clipe::before { content: ""; position: absolute; inset: 0; background: var(--img, none) center / auto 100% repeat-x; opacity: 0.25; filter: grayscale(0.5); }
.lt__clipe span { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt__clipe:hover { color: var(--claro); }
.lt__clipe[aria-current] { background: #2b2823; color: var(--claro); box-shadow: inset 0 0 0 1px var(--linha-2); }
.lt__clipe[aria-current]::before { opacity: 0.5; filter: none; }
.lt__agulha { position: absolute; left: 0; top: -6px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--vermelho-vivo); pointer-events: none; will-change: transform; }
.lt__agulha::before { content: ""; position: absolute; left: -4px; top: -1px; border: 5px solid transparent; border-top: 6px solid var(--vermelho-vivo); border-bottom: 0; }
.arrastando .lt__trilha { cursor: grabbing; }
.na-prancha .linha-tempo { display: none; }
/* ---------- lista estática (sem WebGL ou com movimento reduzido) ---------- */
.storyboard { display: none; }
.movimento-reduzido .storyboard, .sem-webgl .storyboard { display: block; }
.movimento-reduzido .filme__trilho, .sem-webgl .filme__trilho { height: 100svh; }
.movimento-reduzido .planos, .movimento-reduzido .cena, .movimento-reduzido .chamadas, .movimento-reduzido .legenda,
.sem-webgl .planos, .sem-webgl .cena, .sem-webgl .chamadas, .sem-webgl .legenda, .sem-webgl .claquete { display: none; }
.movimento-reduzido .linha-tempo, .sem-webgl .linha-tempo { display: none; }
.movimento-reduzido, .sem-webgl { --lt: 0px; }
.sem-webgl .moldura { background: #000 var(--capa, none) center / cover no-repeat; }
.sem-webgl .moldura::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.62); }
.storyboard__sobre { grid-column: 1 / -1; margin-bottom: 12px; color: var(--vermelho); }
.storyboard__titulo { grid-column: 1 / -1; margin-bottom: 48px; }
.storyboard__lista { grid-column: 1 / -1; display: grid; gap: 64px; }
.storyboard__item { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--calha); align-items: end; }
.storyboard__quadro { aspect-ratio: 2.39 / 1; overflow: hidden; background: var(--noite-2); }
.storyboard__quadro img { width: 100%; height: 100%; object-fit: cover; }
.storyboard__item > div { display: grid; gap: 14px; justify-items: start; color: var(--claro-2); }
.storyboard__item h3 { color: var(--claro); }
/* ---------- créditos (sobre) ---------- */
.creditos { position: relative; overflow: clip; padding: clamp(110px, 18vh, 200px) var(--margem); background: var(--noite); border-top: 1px solid var(--linha); }
.creditos__rolo { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; display: grid; justify-items: center; gap: 30px; text-align: center; }
.creditos__sobre { font: 500 12px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--vermelho); }
.creditos__titulo { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: clamp(60px, 10vw, 160px); line-height: 0.82; overflow-wrap: anywhere; }
.creditos__epigrafe { max-width: 30ch; font-size: clamp(20px, 1.2vw + 13px, 28px); line-height: 1.3; font-style: italic; font-weight: 380; color: var(--claro-2); text-wrap: balance; }
.creditos__foto { width: min(240px, 52vw); }
.creditos__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--noite-3); filter: grayscale(1) contrast(1.05); }
.creditos__foto figcaption { margin-top: 10px; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--claro-3); }
.creditos__bio { display: grid; gap: 1em; max-width: 58ch; font-size: clamp(16px, 0.4vw + 14px, 19px); color: var(--claro-2); text-wrap: pretty; }
.creditos__bio p:first-child { color: var(--claro); }
.creditos__lista { width: 100%; display: grid; gap: 24px; margin-top: 36px; padding-top: 44px; border-top: 1px solid var(--linha); }
.creditos__lista > div { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: baseline; }
.creditos__lista dt { text-align: right; font: 500 11px/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--claro-3); }
.creditos__lista dd { text-align: left; font-size: clamp(16px, 0.5vw + 13px, 20px); font-weight: 500; line-height: 1.45; }
.creditos__lista dd small { display: block; margin-top: 3px; font: 400 12px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--claro-3); }
.creditos__lista dd i { margin-left: 6px; font: 400 11px/1 var(--mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro-3); }
.creditos__lista dd a { text-decoration-color: var(--vermelho-vivo); }
.creditos__lista dd a:hover { color: var(--vermelho); }
/* ---------- contato ---------- */
.contato { background: var(--noite); }
.contato__fim { grid-column: 1 / -1; font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: clamp(90px, 20vw, 320px); line-height: 0.78; color: transparent; -webkit-text-stroke: 1px var(--linha-2); }
.contato__kicker { grid-column: 1 / -1; margin-top: clamp(20px, 4vh, 40px); }
.contato__titulo { grid-column: 1 / -1; margin-top: 18px; max-width: 15ch; font-family: var(--titulo); font-weight: 700; font-size: clamp(38px, 5.2vw, 88px); line-height: 0.96; letter-spacing: -0.025em; text-wrap: balance; }
.contato__lead { grid-column: 1 / span 5; margin-top: clamp(40px, 7vh, 72px); display: grid; gap: 28px; align-content: start; }
.contato__lista { display: grid; }
.contato__form { grid-column: 7 / -1; margin-top: clamp(40px, 7vh, 72px); }
.contato__linha { display: grid; grid-template-columns: 7em 1fr auto; gap: 14px; align-items: center; padding-block: 18px; border-top: 1px solid var(--linha-2); text-decoration: none; font-weight: 500; font-size: clamp(18px, 1.6vw, 26px); letter-spacing: -0.005em; }
.contato__linha:last-child { border-bottom: 1px solid var(--linha-2); }
.contato__linha--fixa { font-weight: 500; }
.contato__linha a.contato__valor { text-decoration: none; }
.contato__linha:hover .contato__valor { color: var(--vermelho); }
.contato__linha .seta { font-family: var(--mono); font-size: 14px; transition: transform 0.35s var(--ease); }
.contato__linha:hover .seta { transform: translate(3px, -3px); }
.contato__copiar { min-height: 36px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px 7px; border: 1px solid var(--linha-2); }
.contato__copiar:hover { border-color: var(--claro); }
.cf { position: relative; border: 1.5px solid var(--claro); background: rgb(11 12 11 / 0.55); }
.cf__cab { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1.5px solid var(--claro); }
.cf__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha-2); }
.cf__cel { display: grid; gap: 4px; padding: 10px 12px 8px; background: var(--noite); }
.cf__cel--largo { grid-column: 1 / -1; }
.cf__cel > span { font: 400 10px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro-3); }
.cf__cel input, .cf__cel select, .cf__cel textarea { width: 100%; border: 0; padding: 4px 0; background: transparent; color: var(--claro); font: 500 16px/1.4 var(--fonte); border-radius: 0; resize: vertical; }
.cf__cel select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--claro) 50%) no-repeat calc(100% - 6px) 55% / 6px 6px, linear-gradient(-45deg, transparent 50%, var(--claro) 50%) no-repeat 100% 55% / 6px 6px; padding-right: 20px; cursor: pointer; }
.cf__cel select option { color: var(--tinta); }
.cf__cel input::placeholder, .cf__cel textarea::placeholder { color: var(--claro-3); opacity: 0.8; }
.cf__cel:focus-within { background: var(--noite-3); box-shadow: inset 0 0 0 2px var(--vermelho-vivo); }
.cf__cel input:focus-visible, .cf__cel select:focus-visible, .cf__cel textarea:focus-visible { outline: none; }
.cf__obrig { padding: 8px 12px 0; font: 400 11px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--claro-3); }
.cf__erro { margin-top: 8px; padding: 10px 12px; border-top: 1.5px solid var(--vermelho); color: var(--vermelho); font: 500 13px/1.4 var(--mono); }
.cf__cel:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--vermelho-vivo); }
.cf__cel:has([aria-invalid="true"]) > span { color: var(--vermelho); }
.cf__acoes { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 12px 0; border-top: 1.5px solid var(--claro); }
.cf__aviso { padding: 10px 12px 14px; font-size: 10.5px; }
.rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 14px var(--margem) calc(var(--lt) + 14px); border-top: 1px solid var(--linha); background: var(--noite); font: 400 11.5px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--claro-3); }
.rodape__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.rodape__links a, .rodape__botao { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--claro-3); }
.rodape__links a:hover, .rodape__botao:hover { color: var(--claro); text-decoration: underline; }
.rodape__botao[aria-pressed="true"] { color: var(--claro); }
.rodape__botao[aria-pressed="true"]::before { content: ""; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--vermelho-vivo); }
/* ---------- figuras (páginas de projeto) ---------- */
.fig { position: relative; }
.fig__quadro { position: relative; overflow: hidden; aspect-ratio: var(--ar, 16 / 9); background: var(--noite-2); }
.fig__quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s var(--ease); }
.fig__quadro img:not(.ok) { opacity: 0; }
.gl-ativo .fig__quadro.em-3d { background: transparent; }
.gl-ativo .fig__quadro.em-3d img { opacity: 0; }
.fig__legenda { display: flex; gap: 12px; align-items: baseline; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linha); font: 400 11.5px/1.45 var(--mono); letter-spacing: 0.04em; color: var(--claro-3); }
.fig__n { color: var(--claro); white-space: nowrap; }
.fig__meio { color: var(--vermelho); white-space: nowrap; }
.fig__dica { margin-left: auto; color: var(--vermelho); white-space: nowrap; opacity: 0; transition: opacity 0.4s; }
.fig--3d:hover .fig__dica { opacity: 1; }
.fig__ampliar { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; background: transparent; border: 0; cursor: zoom-in; }
/* folha de papel: desenhos técnicos sobre a mesa escura */
.fig--folha .fig__quadro, .folha { background: var(--papel); color: var(--tinta); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.04); }
.fig--folha .fig__quadro { aspect-ratio: auto; padding: clamp(14px, 3%, 34px); }
.fig--folha .fig__quadro img { position: static; width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
/* ---------- página de projeto ---------- */
.prancha { padding-top: calc(var(--topo) + clamp(28px, 6vh, 64px)); }
.prancha__barra { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linha-2); }
.voltar { display: inline-flex; gap: 10px; align-items: center; min-height: 36px; text-decoration: none; }
.voltar:hover { color: var(--vermelho); }
/* o título do projeto é uma cartela de cinema, como no filme */
.prancha__titulo { grid-column: 1 / -1; margin-top: clamp(36px, 7vh, 80px); font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: min(clamp(72px, 13vw, 230px), calc((100vw - 2 * var(--margem)) / (var(--letras, 1) * 0.52))); line-height: 0.8; letter-spacing: 0.005em; overflow-wrap: anywhere; }
.prancha__sub { grid-column: 1 / span 7; margin-top: 22px; color: var(--claro-2); }
.prancha__tags { grid-column: 9 / -1; margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: flex-end; }
.prancha__capa { grid-column: 1 / -1; margin-top: clamp(40px, 7vh, 72px); }
.prancha__capa .fig__quadro { aspect-ratio: 2.39 / 1; }
.prancha__corpo { margin-top: clamp(64px, 11vh, 128px); align-items: start; }
.prancha__memorial { grid-column: 1 / span 7; }
.prancha__memorial h2 { margin-bottom: 22px; }
.prancha__memorial .texto p:first-child { font-size: clamp(19px, 0.8vw + 13px, 23px); line-height: 1.42; color: var(--claro); }
.prancha__lateral { grid-column: 9 / -1; }
.prancha__ficha-t { display: block; margin-bottom: 12px; }
.carimbo { position: sticky; top: calc(var(--topo) + 24px); border: 1.5px solid var(--claro); display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha-2); }
.carimbo > div { padding: 9px 12px 11px; background: var(--noite); min-width: 0; }
.carimbo .largo { grid-column: 1 / -1; }
.carimbo dt { font: 400 10px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro-3); }
.carimbo dd { margin-top: 5px; font-size: 14.5px; font-weight: 550; line-height: 1.3; }
.carimbo .titulo-cel dd { font-family: var(--titulo); font-weight: 800; font-size: 30px; line-height: 0.9; text-transform: uppercase; }
.blocos { display: grid; gap: clamp(96px, 16vh, 180px); margin-top: clamp(96px, 16vh, 180px); padding-inline: var(--margem); }
.bloco { min-width: 0; }
.vista { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-bottom: clamp(28px, 5vh, 48px); }
.vista__n { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--claro); display: grid; place-items: center; font: 500 12px/1 var(--mono); }
.vista__t { font-family: var(--titulo); font-weight: 700; font-size: clamp(24px, 2vw, 34px); letter-spacing: -0.01em; line-height: 1.1; padding-bottom: 6px; box-shadow: 0 2.5px 0 var(--claro), 0 6px 0 var(--noite), 0 7px 0 var(--claro); }
.vista__txt { grid-column: 2 / -1; color: var(--claro-2); font-size: 15px; }
.galeria { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px) var(--calha); align-items: start; }
.planta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding: clamp(18px, 3vw, 44px); }
.planta__lado { display: grid; gap: 18px; justify-items: start; }
.planta__desenho { position: relative; width: min(100%, 760px, calc(80vh * var(--arn, 1))); aspect-ratio: var(--ar); }
.planta__desenho > img { width: 100%; height: 100%; object-fit: contain; }
.planta__ret { position: absolute; pointer-events: none; background: repeating-linear-gradient(-45deg, rgb(224 74 44 / 0.5) 0 1px, transparent 1px 7px); outline: 1.5px solid #e04a2c; outline-offset: -1px; opacity: 0; transition: opacity 0.3s var(--ease); }
.planta__ret.ativo { opacity: 1; }
.planta__ponto { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; padding: 4px 6px; background: var(--papel); border: 1px solid transparent; color: var(--tinta); font: 500 clamp(8.5px, 0.75vw, 11px)/1.1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; transition: border-color 0.25s, color 0.25s; }
.planta__ponto small { font-size: 0.86em; font-weight: 400; color: var(--tinta-3); text-transform: none; }
.planta__ponto:hover, .planta__ponto.ativo, .planta__ponto:focus-visible { border-color: #e04a2c; color: var(--vermelho-tinta); }
.planta .quadro { position: sticky; top: calc(var(--topo) + 28px); }
.quadro { width: 100%; }
table.quadro { border-collapse: collapse; font-variant-numeric: tabular-nums; color: var(--tinta); }
.quadro caption { text-align: left; padding-bottom: 14px; }
.quadro th, .quadro td { padding: 0; border-top: 1px solid rgb(27 27 25 / 0.16); text-align: left; font-weight: 400; }
.quadro thead th { padding: 8px 0; font: 400 10.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); border-top: 1.5px solid var(--tinta); }
.quadro td:last-child, .quadro th:last-child { text-align: right; }
.quadro tbody button { width: 100%; padding: 11px 0; text-align: left; transition: color 0.2s; }
.quadro tbody tr.ativo button, .quadro tbody button:hover { color: var(--vermelho-tinta); }
.quadro tbody tr.ativo { background: linear-gradient(90deg, rgb(224 74 44 / 0.1), transparent); }
.quadro tfoot td { padding: 12px 0; border-top: 1.5px solid var(--tinta); font-weight: 700; }
.quadro__area { font-family: var(--mono); font-size: 14px; }
.abas__lista { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 26px; }
.abas__aba { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 550; color: var(--claro-3); }
.abas__aba span { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font: 500 10.5px/1 var(--mono); }
.abas__aba[aria-selected="true"] { color: var(--claro); }
.abas__aba[aria-selected="true"] span { background: var(--claro); color: var(--noite); border-color: var(--claro); }
.abas__aba:hover { color: var(--claro); }
.abas__painel[hidden] { display: none; }
.abas__painel .fig--folha .fig__quadro { display: grid; place-items: center; }
/* largura definida e a proporção do conteúdo (--ar): a planta reserva o espaço antes de carregar,
e nada abaixo dela é empurrado (com width e height auto, a imagem nascia sem tamanho) */
.abas__painel .fig--folha img { width: min(100%, calc(76vh * var(--ar))); height: auto; aspect-ratio: var(--ar); margin-inline: auto; }
.detalhe { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.nota { grid-column: 1 / -1; max-width: 72ch; padding: 18px 20px; border: 1.5px solid var(--claro); font: italic 400 15px/1.55 var(--fonte); color: var(--claro-2); }
.nota strong { font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vermelho); display: block; margin-bottom: 8px; }
.lista-num { counter-reset: n; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--calha); max-width: 980px; }
.lista-num li { counter-increment: n; display: grid; grid-template-columns: 3em 1fr; padding-block: 16px; border-top: 1px solid var(--linha); font-size: clamp(17px, 1.2vw, 20px); }
.lista-num li::before { content: counter(n, decimal-leading-zero); font: 500 12px/1.9 var(--mono); color: var(--vermelho); }
.texto-bloco { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--calha); }
.texto-bloco .texto p:first-child { color: var(--claro); }
.comparar__par { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--calha); align-items: start; }
.comparar__par + .comparar__par { margin-top: clamp(40px, 6vw, 72px); }
.comparar__ponto { position: absolute; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--claro); background: rgb(11 12 11 / 0.72); font: 600 12px/1 var(--mono); color: var(--claro); transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease); }
.comparar__ponto:hover, .comparar__ponto.ativo { background: var(--vermelho-vivo); border-color: var(--vermelho-vivo); color: var(--noite); transform: scale(1.12); }
.comparar__lista { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 26px; }
.comparar__lista button { display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 0 6px; border-bottom: 1px solid transparent; font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--claro-2); transition: color 0.25s, border-color 0.25s; }
.comparar__lista b { color: var(--vermelho); }
.comparar__lista button:hover, .comparar__lista button.ativo { color: var(--claro); border-bottom-color: var(--vermelho-vivo); }
.comparar__txt { margin-bottom: 28px; max-width: 52ch; color: var(--claro-2); }
.prancha__nav { margin: var(--secao) var(--margem) 0; border-top: 1.5px solid var(--claro); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.prancha__nav a { display: grid; gap: 12px; padding: clamp(24px, 4vh, 40px) 0 48px; text-decoration: none; }
.prancha__nav a + a { text-align: right; border-left: 1px solid var(--linha-2); padding-left: var(--calha); }
.prancha__nav a:first-child { padding-right: var(--calha); }
.prancha__nav strong { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 6vw, 96px); line-height: 0.85; transition: color 0.3s; overflow-wrap: anywhere; }
.prancha__nav a:hover strong { color: var(--vermelho); }
/* ---------- visor ---------- */
.visor { position: fixed; inset: 0; z-index: 180; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--noite); }
.visor[hidden] { display: none; }
.visor__barra, .visor__rodape { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px var(--margem); }
.visor__barra { border-bottom: 1px solid var(--linha-2); }
.visor__rodape { border-top: 1px solid var(--linha-2); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.visor__palco { position: relative; overflow: hidden; touch-action: none; cursor: grab; }
.visor__img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; transition: opacity 0.3s; }
.visor__img.desenho { background: var(--papel); padding: 2%; }
.visor__ctrl { display: flex; gap: 6px; }
.visor__btn { min-width: 40px; height: 36px; padding: 0 12px; border: 1px solid var(--linha-2); font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.visor__btn:hover { border-color: var(--claro); }
.visor__legenda { font: 400 12px/1.45 var(--mono); color: var(--claro-2); max-width: 70ch; }
.sem-js { padding: 120px var(--margem); max-width: 720px; }
.sem-js h1 { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: 64px; line-height: 0.85; margin-bottom: 20px; }
/* =============================================================================
ARGUMENTO, MAKING OF, CANTEIRO, QUATRO PONTOS, CRÉDITOS FINAIS E CLAQUETE
========================================================================== */
/* argumento (a ideia central do projeto), na prancha */
.prancha__argumento { grid-column: 1 / -1; display: grid; gap: 18px; margin-bottom: clamp(56px, 9vh, 104px); }
.argumento { max-width: 28ch; padding-left: 0.55em; border-left: 3px solid var(--vermelho-vivo); font: italic 400 clamp(26px, 2.4vw + 12px, 50px)/1.14 var(--fonte); letter-spacing: -0.015em; color: var(--claro); text-wrap: balance; }
/* topo: a outra língua; menu: língua e movimento */
.topo__lingua { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 36px; padding: 0 9px; border: 1px solid var(--linha-2); font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-decoration: none; color: var(--claro-2); transition: color 0.25s, border-color 0.25s; }
.topo__lingua:hover { color: var(--claro); border-color: var(--claro); }
.menu { overflow-y: auto; }
.menu__extras { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.menu__extras a, .menu__extras button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--linha-2); font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.menu__extras [aria-pressed="true"] { background: var(--claro); color: var(--noite); border-color: var(--claro); }
/* ---------- making of ---------- */
.metodo { position: relative; background: var(--noite); border-top: 1px solid var(--linha); }
.metodo__palco { --vao: clamp(32px, 4vw, 72px); position: relative; display: grid; gap: clamp(36px, 6vh, 56px); padding: var(--secao) var(--margem); }
.metodo__cab { display: grid; gap: 16px; justify-items: start; align-items: end; }
.metodo__titulo { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: clamp(56px, 8vw, 128px); line-height: 0.82; letter-spacing: 0.005em; }
.metodo__lead { max-width: 46ch; color: var(--claro-2); text-wrap: pretty; }
.metodo__etapas { display: grid; gap: clamp(56px, 10vh, 104px); }
.metodo__etapa { display: grid; gap: 20px; }
.metodo__peca { position: relative; margin: 0; }
.metodo__quadro { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #000; }
/* fundo: a própria peça, desfocada (foto vertical num quadro deitado, como no monitor da câmera) */
.metodo__quadro::before { content: ""; position: absolute; inset: -40px; background: var(--img) center / cover no-repeat; filter: blur(30px) brightness(0.3) saturate(0.8); }
.metodo__quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.metodo__peca--folha .metodo__quadro { background: var(--papel); }
.metodo__peca--folha .metodo__quadro::before { display: none; }
.metodo__peca--folha .metodo__quadro img { padding: 5%; mix-blend-mode: multiply; }
.metodo__claq { display: flex; gap: 12px; align-items: baseline; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linha); font: 400 11.5px/1.45 var(--mono); letter-spacing: 0.04em; color: var(--claro-3); }
.metodo__claq b { font-weight: 500; color: var(--vermelho); white-space: nowrap; }
.metodo__txt { display: grid; gap: 10px; max-width: 50ch; }
.metodo__nome { display: flex; align-items: baseline; gap: 14px; font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 3.4vw, 54px); line-height: 0.9; }
.metodo__n { flex: none; font: 500 12px/1 var(--mono); letter-spacing: 0.1em; color: var(--vermelho); }
.metodo__mais > div { display: grid; gap: 10px; justify-items: start; }
.metodo__txt p { color: var(--claro-2); }
.metodo__ferramenta { padding: 6px 9px 5px; border: 1px solid var(--linha-2); font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro) !important; }
/* escala gráfica: a régua de toda prancha (a primeira unidade subdividida); a agulha marca a etapa */
.escala__barra { position: relative; display: flex; height: 10px; border: 1.5px solid var(--claro); }
.escala__seg { flex: 1; }
.escala__seg:nth-child(odd) { background: var(--claro); }
.escala__seg--sub { background: repeating-linear-gradient(90deg, var(--claro) 0 25%, transparent 25% 50%) !important; }
.escala__agulha { position: absolute; top: -9px; bottom: -9px; left: calc(var(--f, 0) * 100%); width: 2px; margin-left: -1px; background: var(--vermelho-vivo); transition: left 0.2s linear; }
.escala__agulha::before { content: ""; position: absolute; left: -5px; top: -2px; border: 6px solid transparent; border-top: 7px solid var(--vermelho-vivo); border-bottom: 0; }
.escala__marcas { display: flex; justify-content: space-between; margin-top: 7px; font: 500 10.5px/1 var(--mono); color: var(--claro-3); font-variant-numeric: tabular-nums; }
.escala__nomes { display: grid; grid-template-columns: repeat(var(--etapas, 5), minmax(0, 1fr)); margin-top: 6px; }
.escala__nomes button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 4px 4px 0; text-align: left; font: 500 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro-3); transition: color 0.3s; }
.escala__nomes button::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color 0.3s, border-color 0.3s; }
.escala__nomes button:hover, .escala__nomes button[aria-current] { color: var(--claro); }
.escala__nomes button[aria-current]::before { background: var(--vermelho-vivo); border-color: var(--vermelho-vivo); }
/* em lista (celular, tela baixa ou movimento reduzido): a escala acompanha a leitura, presa no alto */
.metodo:not(.metodo--palco) .metodo__cab { order: 0; }
.metodo:not(.metodo--palco) .metodo__escala { order: 1; position: sticky; top: var(--topo); z-index: 3; margin-inline: calc(var(--margem) * -1); padding: 14px var(--margem) 6px; background: rgb(11 12 11 / 0.94); box-shadow: 0 1px 0 var(--linha); }
.metodo:not(.metodo--palco) .metodo__etapas { order: 2; }
.movimento-reduzido .metodo .metodo__escala { position: static; margin-inline: 0; padding-inline: 0; box-shadow: none; }
/* presa na tela (desktop com movimento): figura à esquerda, etapas à direita, escala embaixo */
@property --corte { syntax: ""; inherits: false; initial-value: 100%; }
.metodo--palco .metodo__trilho { height: calc(var(--etapas, 5) * 90svh + 100svh); }
.metodo--palco .metodo__palco {
position: sticky; top: 0; height: 100svh; padding: calc(var(--topo) + 22px) var(--margem) calc(var(--lt) + 16px);
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: var(--vao); row-gap: clamp(16px, 2.8vh, 30px);
}
.metodo--palco .metodo__cab { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--vao); row-gap: 12px; }
.metodo--palco .metodo__cab .kicker, .metodo--palco .metodo__titulo { grid-column: 1; }
.metodo--palco .metodo__titulo { font-size: clamp(48px, 5.2vw, 92px); }
.metodo--palco .metodo__lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-size: 16.5px; }
.metodo--palco .metodo__etapas { grid-column: 1 / -1; grid-row: 2; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0; padding-left: calc((100% - var(--vao)) * 7 / 12 + var(--vao)); }
.metodo--palco .metodo__etapa { display: block; }
.metodo--palco .metodo__peca { position: absolute; left: 0; top: 0; bottom: 0; width: calc((100% - var(--vao)) * 7 / 12); display: grid; grid-template-rows: minmax(0, 1fr) auto; --corte: 100%; clip-path: inset(0 var(--corte) 0 0); transition: --corte 0.95s var(--ease-io); }
.metodo--palco .metodo__etapa.ativa .metodo__peca, .metodo--palco .metodo__etapa.passou .metodo__peca { --corte: 0%; }
.metodo--palco .metodo__quadro { aspect-ratio: auto; height: 100%; }
.metodo--palco .metodo__claq { position: relative; z-index: 1; background: var(--noite); }
.metodo--palco .metodo__quadro img { transform: scale(1.06); transition: transform 2.4s var(--ease); }
.metodo--palco .metodo__etapa.ativa .metodo__quadro img { transform: none; }
.metodo--palco .metodo__txt { max-width: none; gap: 0; padding: 12px 0 13px; border-top: 1px solid var(--linha-2); }
.metodo--palco .metodo__etapa:last-child .metodo__txt { border-bottom: 1px solid var(--linha-2); }
.metodo--palco .metodo__nome { font-size: clamp(26px, 2.2vw, 38px); color: var(--claro-3); transition: color 0.4s var(--ease); }
.metodo--palco .metodo__etapa.ativa .metodo__nome { color: var(--claro); }
/* só a etapa ativa abre o texto (o resto continua no leitor de tela) */
.metodo--palco .metodo__mais { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.metodo--palco .metodo__mais > div { min-height: 0; overflow: hidden; }
.metodo--palco .metodo__etapa.ativa .metodo__mais { grid-template-rows: 1fr; }
.metodo--palco .metodo__mais p:first-child { padding-top: 10px; font-size: 16.5px; }
.metodo--palco .metodo__escala { grid-column: 1 / -1; grid-row: 3; }
/* ---------- canteiro: a placa de obra ---------- */
.canteiro { background: var(--noite); border-top: 1px solid var(--linha); }
.canteiro .grade { row-gap: 0; align-items: start; }
.canteiro__cab { grid-column: 1 / span 7; grid-row: 1; display: grid; gap: 18px; justify-items: start; }
.canteiro__texto { grid-column: 1 / span 6; grid-row: 2; margin-top: clamp(28px, 5vh, 52px); display: grid; gap: 1em; max-width: 56ch; color: var(--claro-2); }
.canteiro__texto .texto-l { color: var(--claro); }
.canteiro__dia { grid-column: 1 / span 6; grid-row: 3; margin-top: clamp(40px, 6vh, 64px); display: grid; gap: 14px; }
.canteiro__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); column-gap: var(--calha); border-top: 1px solid var(--linha-2); }
.canteiro__lista li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0 13px; border-bottom: 1px solid var(--linha); font-size: 17px; line-height: 1.35; }
.canteiro__lista li::before { content: ""; flex: none; width: 11px; height: 6px; border-left: 2px solid var(--vermelho); border-bottom: 2px solid var(--vermelho); transform: translateY(-4px) rotate(-45deg); }
.placa { grid-column: 8 / -1; grid-row: 1 / span 3; position: sticky; top: calc(var(--topo) + 40px); margin-top: 8px; padding: 16px; background: var(--papel); color: var(--tinta); box-shadow: 0 50px 90px -45px #000, 0 0 0 1px rgb(255 255 255 / 0.05); }
.placa__faixa { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px 9px; background: var(--vermelho-vivo); color: var(--noite); font: 700 clamp(16px, 1.3vw, 20px)/1 var(--estencil); letter-spacing: 0.12em; text-transform: uppercase; }
.placa__empresa { padding: 20px 14px 18px; border-bottom: 2px solid var(--tinta); font: 800 clamp(36px, 3.6vw, 62px)/0.88 var(--estencil); letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
.placa__dados { display: grid; grid-template-columns: 1fr 1fr; }
.placa__dados > div { min-width: 0; padding: 11px 14px 13px; border-bottom: 1px solid rgb(27 27 25 / 0.3); }
.placa__dados > div:first-child { border-right: 1px solid rgb(27 27 25 / 0.3); }
.placa__largo { grid-column: 1 / -1; border-bottom: 0 !important; }
.placa__dados dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); }
.placa__dados dd { margin-top: 5px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.placa__parafuso { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbf8f1, #9d998f 75%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.3); }
.placa__parafuso::after { content: ""; position: absolute; left: 1.5px; right: 1.5px; top: 3.75px; height: 1.5px; background: rgb(0 0 0 / 0.45); }
.placa__parafuso:nth-of-type(1) { left: 4px; top: 4px; }
.placa__parafuso:nth-of-type(2) { right: 4px; top: 4px; transform: rotate(60deg); }
.placa__parafuso:nth-of-type(3) { left: 4px; bottom: 4px; transform: rotate(-30deg); }
.placa__parafuso:nth-of-type(4) { right: 4px; bottom: 4px; transform: rotate(20deg); }
/* ---------- quatro pontos ---------- */
.pontos { background: var(--noite); border-top: 1px solid var(--linha); }
.pontos__cab { grid-column: 1 / span 9; display: grid; gap: 18px; justify-items: start; }
.pontos__nota { max-width: 52ch; font-style: italic; font-size: clamp(18px, 0.5vw + 15px, 21px); line-height: 1.45; color: var(--claro-2); }
.pontos__lista { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 8vh, 96px); border-top: 1.5px solid var(--claro); }
.ponto { display: grid; align-content: start; gap: 16px; padding: 26px var(--calha) 12px 0; border-right: 1px solid var(--linha); }
.ponto + .ponto { padding-left: var(--calha); }
.ponto:last-child { border-right: 0; }
.ponto__n { position: relative; display: block; font: 800 clamp(120px, 13vw, 230px)/0.78 var(--estencil); }
.ponto__n > span:first-child { color: transparent; -webkit-text-stroke: 1.5px var(--linha-2); }
.ponto__n-cheio { position: absolute; left: 0; top: 0; color: var(--claro); }
.ponto__t { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 2.3vw, 40px); line-height: 0.92; text-wrap: balance; }
.ponto__txt { color: var(--claro-2); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.ponto__visto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; margin-top: 4px; }
.ponto__visto .rotulo { width: 100%; }
.ponto__visto a { display: inline-flex; align-items: center; min-height: 36px; font: 500 12px/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--vermelho-vivo); text-underline-offset: 0.45em; }
.ponto__visto a:hover { color: var(--vermelho); }
/* ---------- créditos finais: planos dos projetos nas margens ---------- */
.creditos__stills { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.still { position: absolute; top: var(--y); width: clamp(140px, 12vw, 230px); margin: 0; }
.still--esq { left: clamp(16px, 3.4vw, 64px); }
.still--dir { right: clamp(16px, 3.4vw, 64px); }
.still img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(0.4) brightness(0.62); }
.still figcaption { margin-top: 7px; font: 500 10px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--claro-3); }
.creditos__baixar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.botao__tipo { padding: 3px 5px 2px; border: 1px solid currentColor; font-size: 10px; letter-spacing: 0.1em; }
@media (max-width: 1199px) { .creditos__stills { display: none; } }
/* ---------- claquete: o formulário de contato ---------- */
.claquete-form { position: relative; padding-top: 58px; }
.claquete-form__bastao { position: absolute; left: 0; right: 0; top: 18px; height: 28px; border: 1.5px solid var(--claro); background: repeating-linear-gradient(118deg, var(--claro) 0 24px, var(--noite) 24px 48px); transform-origin: 0 100%; transform: rotate(-5deg); }
.claquete-form__bastao i { position: absolute; left: 7px; bottom: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--claro); box-shadow: 0 0 0 3px var(--noite); }
.cf::before { content: ""; display: block; height: 16px; border-bottom: 1.5px solid var(--claro); background: repeating-linear-gradient(118deg, var(--claro) 0 24px, var(--noite) 24px 48px); }
.claquete-form.bateu .claquete-form__bastao { animation: bater 0.8s var(--ease) both; }
@keyframes bater { 0% { transform: rotate(-5deg); } 16% { transform: rotate(0deg); } 26% { transform: rotate(-1.2deg); } 36% { transform: rotate(0deg); } 100% { transform: rotate(-5deg); } }
/* ---------- movimento reduzido pela pessoa (o botão) ou pelo sistema ---------- */
.movimento-reduzido *, .movimento-reduzido *::before, .movimento-reduzido *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
.movimento-reduzido .grao { display: none; }
/* ---------- responsivo ---------- */
/* ---------- modos de ver: filme, mesa de luz e roteiro ---------- */
.topo__modos { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--linha-2); }
.topo__modos a { padding: 7px 9px 6px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--claro-2); transition: background-color 0.25s, color 0.25s; }
.topo__modos a:hover { color: var(--claro); }
.topo__modos a[aria-current="page"] { background: var(--claro); color: var(--noite); }
/* mesa de luz: a folha de contato com todos os planos, a capa marcada como a escolha */
.mesa__rolos { display: grid; gap: clamp(56px, 8vw, 110px); padding: clamp(40px, 6vw, 80px) var(--margem) var(--secao); }
.mesa__rolo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--calha); align-items: start; }
.mesa__cab { position: sticky; top: calc(var(--topo) + 20px); display: grid; gap: 12px; justify-items: start; }
.mesa__ficha { font: 400 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--claro-3); }
.mesa__folha { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 18px 14px; padding: clamp(12px, 1.6vw, 20px); background: var(--noite-2); border: 1px solid var(--linha); }
.mesa__quadro { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #000; cursor: zoom-in; }
.mesa__quadro img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.mesa__quadro:hover img { transform: scale(1.04); }
.mesa__plano--folha .mesa__quadro { background: var(--papel); }
.mesa__plano--folha .mesa__quadro img { object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
.mesa__plano--escolhido .mesa__quadro { outline: 2px solid var(--vermelho-vivo); outline-offset: 4px; }
.mesa__claq { margin-top: 8px; font: 400 11px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--claro-3); }
.mesa__claq b { margin-right: 8px; font-weight: 500; color: var(--vermelho); }
/* roteiro: a versão em texto, com cabeças de cena como num roteiro de cinema */
.roteiro__corpo { display: grid; gap: clamp(64px, 8vw, 120px); max-width: 780px; margin-inline: auto; padding: clamp(40px, 6vw, 80px) var(--margem) var(--secao); }
.roteiro__cena { display: grid; gap: 16px; }
.roteiro__cabeca { font: 500 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vermelho); }
.roteiro__titulo { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 6vw, 72px); line-height: 0.9; }
.roteiro__sub { font-style: italic; font-size: clamp(19px, 1vw + 14px, 24px); line-height: 1.3; color: var(--claro); }
.roteiro__ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1px; background: var(--linha-2); border: 1px solid var(--linha-2); }
.roteiro__ficha div { padding: 9px 12px 11px; background: var(--noite); }
.roteiro__ficha dt { font: 400 10.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro-3); }
.roteiro__ficha dd { margin-top: 4px; }
.roteiro__texto { display: grid; gap: 1em; max-width: 64ch; color: var(--claro-2); }
.roteiro__fala { padding-left: 1.2em; border-left: 2px solid var(--vermelho-vivo); font-style: italic; color: var(--claro); }
.roteiro__link { justify-self: start; display: inline-flex; align-items: center; min-height: 36px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--vermelho); }
.roteiro__lista { display: grid; gap: 10px; }
@media (max-width: 1180px) { .topo__arq { display: none; } }
@media (max-width: 860px) {
.topo__modos { display: none; }
.mesa__rolo { grid-template-columns: minmax(0, 1fr); }
.mesa__cab { position: static; }
.mesa__folha { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 14px 10px; }
}
@media (max-width: 1100px) {
.contato__lead, .contato__form { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
:root { --topo: 58px; --lt: 50px; }
.topo__nav, .topo__arq { display: none; }
.topo__menu { display: inline-flex; }
.topo__som { margin-left: auto; }
.topo__som-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topo__giro { position: fixed; right: var(--margem); top: auto; bottom: calc(var(--lt) + 12px); min-height: 32px; white-space: nowrap; font-size: 10px; background: rgb(11 12 11 / 0.6); }
.linha-tempo { grid-template-rows: 1fr; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px var(--margem) calc(8px + env(safe-area-inset-bottom) * 0.5); }
.lt__topo { display: contents; }
.lt__trilha { min-height: 26px; }
.lt__clipe { padding: 0 5px; }
.lt__clipe span { font-size: 9.5px; letter-spacing: 0.04em; }
.lt__clipe span { display: none; }
.lt__tc { display: none; }
.lt__agora { display: block; min-width: 8.5em; max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--claro); }
.claquete { padding: 12px 16px; gap: 12px; font-size: 9.5px; }
[data-claq-plano] { display: none; }
.moldura__canto { display: none; }
.cartaz { padding: 0 20px; }
.cartaz__titulo { font-size: min(24cqh, 19cqw); }
.cartaz__acoes .botao { padding: 12px 13px 11px; font-size: 11.5px; letter-spacing: 0.05em; }
.rever { left: 12px; bottom: 12px; font-size: 9.5px; }
.abertura__pular { right: 12px; bottom: 12px; }
.lt__dica { display: none; }
.legenda { bottom: 10cqh; width: 88%; }
.chamada span { font-size: 9.5px; left: 13px; }
.plano--planta { flex-direction: column; gap: 3cqh; padding: 7cqh 5cqw 15cqh; }
.planta-filme { width: min(100%, calc(58cqh * var(--arn, 1))); }
.plano--com-quadro .planta-filme { width: min(100%, calc(44cqh * var(--arn, 1))); }
.plano--duas { flex-direction: row; gap: 4cqw; }
.plano--duas .planta-filme__par { flex: 0 1 48%; }
.plano--duas .planta-filme { width: min(100%, calc(52cqh * var(--arn, 1))); }
.plano--duas.plano--deitadas { flex-direction: column; }
.plano--deitadas .planta-filme__par { flex: none; width: 100%; }
.plano--deitadas .planta-filme { width: min(100%, calc(28cqh * var(--arn, 1))); }
.areas-filme { width: 100%; font-size: 11px; }
.areas-filme li { padding: 1cqh 0; }
.plano--obra { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.obra-filme--foto { clip-path: inset(calc((1 - var(--corte, 0)) * 100%) 0 0 0); }
.obra-filme--foto::before { top: calc((1 - var(--corte, 0)) * 100%); bottom: auto; left: 0; right: 0; width: auto; height: 2px; }
.plano--folha { padding: 8cqh 5cqw 16cqh; }
.folha-filme { width: min(100%, calc(62cqh * var(--arn, 1))); }
.cena__titulo { font-size: min(26cqh, 22cqw, calc(86cqw / (var(--letras, 1) * 0.52))); }
.storyboard__item { grid-template-columns: 1fr; }
.creditos__lista > div { grid-template-columns: 1fr; gap: 4px; }
.creditos__lista dt, .creditos__lista dd { text-align: center; }
.contato__linha { grid-template-columns: 1fr auto; }
.contato__linha .rotulo { grid-column: 1 / -1; }
.cf__grade { grid-template-columns: 1fr; }
.cf__cab .rotulo[aria-hidden] { display: none; }
.prancha__sub, .prancha__tags, .prancha__memorial, .prancha__lateral { grid-column: 1 / -1; }
.prancha__tags { justify-content: flex-start; }
.prancha__lateral { margin-top: 56px; }
.prancha__capa .fig__quadro { aspect-ratio: 4 / 3; }
.carimbo { position: relative; top: 0; }
.galeria { grid-template-columns: 1fr; }
.planta, .detalhe, .texto-bloco { grid-template-columns: 1fr; }
.lista-num { grid-template-columns: 1fr; }
.comparar__par { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.prancha__nav strong { font-size: clamp(30px, 10vw, 56px); }
.visor__ctrl .visor__btn--zoom { display: none; }
.fig__dica { display: none; }
}
@media (max-width: 480px) {
.comparar__par { grid-template-columns: minmax(0, 1fr); }
/* a cena anterior e a seguinte, uma sobre a outra: nomes longos (TELHADO VERDE) nunca passam da borda */
.prancha__nav { grid-template-columns: minmax(0, 1fr); }
.prancha__nav a:first-child { padding-right: 0; }
.prancha__nav a + a { border-left: 0; border-top: 1px solid var(--linha-2); padding-left: 0; }
}
/* telas bem estreitas (320 a 380 px): o topo cabe numa linha só */
@media (max-width: 380px) {
.topo { gap: 8px; }
.topo__nome { font-size: 17px; }
.marca-mini { width: 30px; height: 30px; }
.topo__menu { min-width: 44px; justify-content: center; }
.topo__menu-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.placa__faixa span[aria-hidden] { display: none; }
}
@media (max-width: 1100px) {
.pontos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ponto:nth-child(2) { border-right: 0; }
.ponto:nth-child(3) { padding-left: 0; }
.ponto:nth-child(n+3) { border-top: 1px solid var(--linha); margin-top: 8px; }
.canteiro__cab, .canteiro__texto, .canteiro__dia { grid-column: 1 / span 7; }
.placa { grid-column: 8 / -1; }
}
@media (max-width: 860px) {
.topo { gap: 12px; }
.topo__nome { white-space: nowrap; }
.topo__lingua { margin-left: auto; min-height: 40px; }
.topo__som { margin-left: 4px; min-width: 44px; justify-content: center; }
.lt__clipe { min-width: 24px; }
.metodo__titulo { font-size: clamp(52px, 15vw, 88px); }
.metodo__quadro { aspect-ratio: 4 / 3.2; }
.escala__nomes { display: none; }
.metodo:not(.metodo--palco) .metodo__escala { padding-top: 16px; padding-bottom: 10px; }
.canteiro__cab, .canteiro__texto, .canteiro__dia, .placa { grid-column: 1 / -1; grid-row: auto; }
.placa { margin-top: 36px; }
.canteiro__dia { margin-top: 44px; }
.pontos__cab { grid-column: 1 / -1; }
.pontos__lista { grid-template-columns: minmax(0, 1fr); }
.ponto, .ponto + .ponto { padding: 22px 0 18px; border-right: 0; margin-top: 0; }
.ponto + .ponto { border-top: 1px solid var(--linha); }
.ponto__n { font-size: clamp(96px, 30vw, 150px); }
.argumento { font-size: clamp(24px, 6.4vw, 34px); }
.rodape { justify-content: flex-start; }
.claquete-form { padding-top: 46px; }
.claquete-form__bastao { top: 14px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
html:not(.movimento-completo) *, html:not(.movimento-completo) *::before, html:not(.movimento-completo) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
html:not(.movimento-completo) .grao { display: none; }
}
/* mais contraste (preferência do sistema, para baixa visão): textos secundários e linhas ganham
força, o vermelho sobe para 10:1 no escuro e 8:1 no papel, o grão sai e o foco fica sólido */
@media (prefers-contrast: more) {
:root {
--claro-2: var(--claro);
--claro-3: rgb(236 233 225 / 0.9);
--linha: rgb(236 233 225 / 0.42);
--linha-2: rgb(236 233 225 / 0.8);
--vermelho: #ffa58f;
--vermelho-tinta: #7a2212;
--tinta-2: #2b2925;
--tinta-3: #34322d;
}
.grao { display: none; }
:focus-visible { outline-style: solid; outline-width: 3px; }
}
@media (forced-colors: active) {
canvas.palco, .grao { display: none !important; }
.gl-ativo .fig__quadro.em-3d img { opacity: 1; }
.pular { border: 1px solid; }
}
@media print {
canvas.palco, .grao, .topo, .corte, .carregador, .linha-tempo, .filme { display: none !important; }
.storyboard { display: block !important; }
.fig__quadro img { opacity: 1 !important; }
body { background: #fff; color: #000; }
}