/* Site rznfilms.com, versão 2 ("quadro de blocos", direção de arte da skill taste: dense-tiles, 20/10/2026).
   Cores e tamanhos SÓ nas variáveis da seção 1 (cores tiradas da foto de referência do Johnata). Seções:
   1. Variáveis  2. Fontes  3. Base  4. Barra e menu  5. Botões e tiras de cor  6. Abertura (folha de fotos + painel)
   7. Trabalhos (faixas)  8. Sobre (mosaico)  9. Clientes (blocos)  10. Contato (campo lima)  11. Rodapé (blocos)
   12. Página de trabalho  13. Sobre (página)  14. Texto simples  15. Movimento  16. Tablet e celular.
   Regras da casa: sem gradiente, sem sombra, sem vidro, sem linhas finas, no máximo 5 tamanhos de letra. Animação só com
   transform/opacity e desligada em "reduzir movimento". Nada de style="" no HTML (a CSP do site bloqueia). */

/* ===== 1. Variáveis (mexer aqui muda o site inteiro) ===== */
:root {
  --bg: #1B1B1B;            /* fundo da página */
  --surface: #262626;       /* blocos: um degrau acima do fundo */
  --ink: #F4F4F1;           /* texto sobre o fundo escuro */
  --muted: #B8B8B3;         /* texto de apoio (contraste 8:1) */
  --lima: #E8B931;          /* COR DE DESTAQUE (âmbar cinema; o nome "lima" é histórico, era #DAF99D) */
  --lima-2: #D4A622;        /* blocos dentro do campo lima (um degrau abaixo) */
  --lima-3: #F3CF62;        /* bloco em foco dentro do campo lima */
  --branco: #FFFFFF;
  --cinza: #D6D6D6;
  --grafite: #2E2E2E;
  --on-claro: #1B1B1B;      /* texto sobre lima, branco e cinza */
  --f-d: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;  /* títulos */
  --f-t: "Barlow", Arial, Helvetica, sans-serif;                 /* texto */
  --margem: clamp(16px, 1.6vw, 24px);
  --gap: 8px;
  --t-peq: 16px;                                     /* pequeno */
  --t-corpo: 18px;                                   /* texto corrido */
  --t-lead: clamp(20px, 1.4vw + 12px, 24px);         /* frase de apoio */
  --t-titulo: clamp(40px, 4.6vw, 66px);              /* título de seção */
  --t-grande: clamp(56px, 8.4vw, 128px);             /* título da página */
  --seccao: clamp(96px, 12vw, 200px);                /* espaço entre seções */
  --entrada: 1.1s;
}

/* ===== 2. Fontes (arquivos locais, licença OFL) ===== */
@font-face { font-family: "Barlow Condensed"; src: url(../fontes/barlow-condensed-700.woff2) format("woff2"); font-weight: 700; font-display: swap }
@font-face { font-family: "Barlow"; src: url(../fontes/barlow-400.woff2) format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Barlow"; src: url(../fontes/barlow-500.woff2) format("woff2"); font-weight: 500; font-display: swap }

/* ===== 3. Base ===== */
*, *::before, *::after { box-sizing: border-box }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-corpo)/1.55 var(--f-t); -webkit-font-smoothing: antialiased; overflow-x: clip }
img, video { display: block; max-width: 100% }
a { color: inherit }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0 }
ul { padding: 0; list-style: none }
h1, h2 { font: 700 var(--t-titulo)/.9 var(--f-d); letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance }
p { text-wrap: pretty }
::selection { background: var(--lima); color: var(--on-claro) }
:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px }
.pular { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--branco); color: var(--on-claro); padding: 10px 16px }
.pular:focus { left: 8px }
.lead { font-size: var(--t-lead); line-height: 1.4; max-width: 34ch }
.titulo { font: 700 var(--t-titulo)/.9 var(--f-d) }
.titulo-grande { font: 700 var(--t-grande)/.86 var(--f-d); letter-spacing: -.02em; text-transform: uppercase }
.pequeno { font-size: var(--t-peq); line-height: 1.5 }
.link-forte { display: inline-block; margin-top: 16px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--lima) }
.link-forte:hover { background: var(--lima); color: var(--on-claro); text-decoration-color: transparent }
.logo { width: 92px; height: auto }
.logo-escuro { filter: invert(1) }

/* ===== 4. Barra e menu (barra simples: logo, três links e uma ação) ===== */
.barra { position: relative; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--margem) }
.marca { position: relative; z-index: 2; display: block }
.menu { display: flex; align-items: center; gap: 32px }
.menu ul { display: flex; gap: 32px }
.menu a:not(.botao) { text-decoration: none; font-weight: 500; padding: 8px 0; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 8px }
.menu a:not(.botao):hover, .menu a[aria-current="page"] { text-decoration-color: var(--lima) }
.menu-btn { display: none; position: relative; z-index: 2; min-height: 44px; padding: 0 20px; background: var(--lima); color: var(--on-claro); border: 0; font: 500 var(--t-corpo) var(--f-t); cursor: pointer }

/* ===== 5. Botões e tiras de cor ===== */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; background: var(--lima); color: var(--on-claro); border: 0; border-radius: 0; font: 500 var(--t-corpo) var(--f-t); text-decoration: none; cursor: pointer; transition: background .25s, transform .25s }
.botao:hover { background: var(--branco) }
.botao:active { transform: scale(.98) }

/* ===== 6. Abertura: folha de fotos com um painel de texto ===== */
.folha { position: relative; height: 100svh; min-height: 640px; overflow: hidden; padding: var(--margem) }
.folha-grade { --linha: 10.4svh; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(10, var(--linha)); gap: 12px; height: 100% }
.quadro { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; text-decoration: none; background: var(--surface) }
.q-img { position: relative; flex: 1; min-height: 0; overflow: hidden }
.q-img img, .q-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1) }
a.quadro:hover .q-img img { transform: scale(1.05) }
.q-tira { flex: none; display: flex; align-items: center; height: 28px; padding: 0 10px; font: 500 var(--t-peq)/1 var(--f-t) }
.painel { grid-column: 3 / span 2; grid-row: 3 / span 4; background: var(--branco); color: var(--on-claro); container-type: inline-size; min-height: 0 }
.painel-in { height: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px 20px }
.painel .logo { width: 72px }
.painel h1 { margin-top: 18px; font-size: min(var(--t-titulo), 14.2cqi); line-height: .88 }
.painel-frase { margin-top: 14px; font-size: var(--t-lead); line-height: 1.25; max-width: 24ch }
.painel .botao { margin-top: auto; background: var(--lima) }
.painel .botao:hover { background: var(--on-claro); color: var(--lima) }
.painel-links { display: flex; gap: 20px; margin-top: 16px; font-weight: 500 }
.painel-links a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px }
.painel-links a:hover { text-decoration-color: var(--on-claro); background: var(--lima) }

/* ===== 6b. Título gigante (largura toda), palavra que troca e faixa de logos ===== */
.gigante { padding: clamp(20px, 2.4vw, 32px) var(--margem) 0; container-type: inline-size }
.gigante-h1 { font-size: 12.4cqi; line-height: .86; white-space: nowrap; letter-spacing: -.01em }
.gigante-kw { display: block; margin-top: 14px; font: 500 var(--t-lead)/1.2 var(--f-t); letter-spacing: 0; text-transform: none; white-space: normal; color: var(--muted) }
.gigante-troca { margin: 12px 0 var(--margem); font: 700 var(--t-titulo)/.95 var(--f-d); text-transform: uppercase }
.troca { color: var(--lima); display: inline-block; transition: opacity .35s, transform .35s }
.troca.sai { opacity: 0; transform: translateY(-.3em) }
.logos { overflow: hidden; margin-top: clamp(32px, 5vw, 64px); padding: 12px 0; background: var(--surface) }
.logos-trilho { display: flex; width: max-content; animation: logos-corre 40s linear infinite }
.logos:hover .logos-trilho { animation-play-state: paused }
.lg { flex: none; display: flex; align-items: center; justify-content: center; width: clamp(200px, 22vw, 320px); height: clamp(120px, 11vw, 170px) }
.lg img { height: 100%; width: auto; object-fit: contain }
@keyframes logos-corre { to { transform: translateX(-25%) } }

/* ===== 7. Trabalhos: uma faixa de quadros por projeto ===== */
.trabalhos { display: grid; grid-template-columns: minmax(220px, 21%) minmax(0, 1fr); gap: var(--margem); padding: var(--seccao) var(--margem) 0 }
.trilho { position: sticky; top: 24px; align-self: start }
.trilho-txt { margin-top: 20px; max-width: 24ch; font-size: var(--t-corpo) }
.faixas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 45px; min-width: 0 }
.faixa { min-width: 0 }
.faixa-fotos { display: flex; gap: var(--gap); height: 190px; overflow: hidden; margin-right: calc(var(--margem) * -1); text-decoration: none }
.fq { flex: none; height: 100%; overflow: hidden }
.fq img { height: 100%; width: auto; max-width: none; transition: opacity .4s, transform .8s cubic-bezier(.16, 1, .3, 1) }
.faixa-fotos:hover .fq img { transform: scale(1.04) }
.faixas:hover .faixa:not(:hover) .fq img { opacity: .4 }
.fq-fim { width: 300px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px }
.fq-nome { font: 700 var(--t-lead)/.95 var(--f-d); text-transform: uppercase }
.fq-ver { font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px }
.faixa-legenda { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; margin-top: 10px; font-size: var(--t-peq) }
.faixa-legenda a { justify-self: start; font-weight: 500; text-decoration: none }
.faixa-legenda a:hover { text-decoration: underline; text-underline-offset: 4px }
.faixa-n { justify-self: end }

/* ===== 7b. Portfólio em alvenaria: colunas de quadros com alturas diferentes ===== */
.alv-topo { padding: clamp(24px, 4vw, 56px) var(--margem) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end }
.alv-topo .titulo-grande { grid-column: 1 / span 7 }
.alv-topo .lead { grid-column: 9 / -1 }
.alv { columns: 3; column-gap: var(--gap); padding: clamp(24px, 4vw, 48px) var(--margem) 0 }
.alv-q { display: block; position: relative; margin-bottom: var(--gap); break-inside: avoid; overflow: hidden; text-decoration: none; background: var(--surface) }
.alv-q img { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.16, 1, .3, 1) }
.alv-q:hover img { transform: scale(1.04) }
.alv-tira { display: block; padding: 8px 10px; font: 500 var(--t-peq)/1.2 var(--f-t) }

/* ===== 8. Sobre (mosaico): foto larga com papel, bloco lima com o ponto do logo e os fatos ===== */
.sobre-bloco { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: var(--seccao) var(--margem) 0 }
.sobre-bloco .titulo { grid-column: 1 / -1 }
.sobre-bloco .lead { grid-column: 1 / span 6; margin-top: 24px }
.sobre-bloco .link-forte { grid-column: 8 / -1; align-self: end; justify-self: start }
.mosaico { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: 72px; align-items: start }
.m-foto { grid-column: 1 / span 8; position: relative; aspect-ratio: 16 / 10; overflow: hidden }
.m-foto img { width: 100%; height: 100%; object-fit: cover }
.m-papel { position: absolute; top: 0; right: 0; width: 320px; max-width: 62ch; padding: 20px; background: var(--branco); color: var(--on-claro); font-size: var(--t-corpo); line-height: 1.4 }
.m-cor { grid-column: 9 / -1; aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: space-between; padding: 22px }
.m-ponto { width: 34%; height: auto }
.fatos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px }
.fatos dt { font-size: var(--t-peq) }
.fatos dd { font-weight: 500 }

/* ===== 9. Clientes: blocos grandes com as marcas ===== */
.provas { padding: var(--seccao) var(--margem) 0 }
.provas-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 240px); gap: var(--gap) }
.pb { display: flex; background: var(--surface); padding: 22px; text-decoration: none }
.pb-titulo { grid-column: span 2; align-items: flex-start }
.pb-logo { align-items: center; justify-content: center }
.pb-logo img { width: min(100%, 240px); max-width: none; height: auto }
.pb-link { flex-direction: column; justify-content: space-between; container-type: inline-size; overflow-wrap: anywhere }
.pb-grande { font: 700 min(var(--t-titulo), 16cqi)/.9 var(--f-d); text-transform: uppercase }

/* ===== 10. Contato: campo lima, faixa de fotos em movimento, tipos de vídeo e barra do formulário ===== */
.campo { margin-top: var(--seccao); background: var(--lima); color: var(--on-claro); padding: 48px 0 clamp(56px, 6vw, 96px); overflow: hidden }
.p-contato .campo { margin-top: 0; min-height: calc(100svh - 120px) }
.mq { overflow: hidden }
.mq-trilho { display: flex; gap: var(--gap); width: max-content }
.mq-foto { flex: none; height: 150px }
.mq-foto img { height: 100%; width: auto; max-width: none }
.campo-miolo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 72px var(--margem) 0 }
.campo .titulo { grid-column: 1 / span 7; color: var(--on-claro) }
.campo-frase { grid-column: 8 / -1; align-self: end; font-size: var(--t-lead); line-height: 1.3; max-width: 26ch }
.barra-form { grid-column: 1 / -1; margin-top: 40px }
.tipos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); margin-bottom: 16px }
.tipos-rot { font-weight: 500; margin-right: 12px }
.chip { min-height: 44px; padding: 0 20px; background: var(--lima-2); color: var(--on-claro); border: 0; font: 500 var(--t-corpo) var(--f-t); cursor: pointer; transition: background .2s, color .2s, transform .2s }
.chip:hover { background: var(--lima-3) }
.chip:active { transform: scale(.97) }
.chip[aria-pressed="true"] { background: var(--on-claro); color: var(--lima) }
.form-corpo { display: grid; grid-template-columns: 1fr 1.7fr .6fr; gap: var(--gap) }
.cel { display: flex; flex-direction: column; min-width: 0; min-height: 120px; padding: 16px 20px; background: var(--lima-2); transition: background .2s }
.cel:focus-within { background: var(--lima-3) }
.cel label { display: flex; justify-content: space-between; font-weight: 500; font-size: var(--t-peq) }
.contador { font-weight: 400 }
.cel input, .cel textarea { width: 100%; margin-top: 6px; padding: 0; background: transparent; border: 0; color: var(--on-claro); font: 400 var(--t-corpo)/1.4 var(--f-t); resize: none; outline: none }
.cel textarea { height: 3.9em }
.cel input::placeholder, .cel textarea::placeholder { color: #4B5A2B; opacity: 1 }
.dica { min-height: 20px; margin-top: auto; padding-top: 4px; font-size: var(--t-peq); line-height: 1.3 }
.cel.erro .dica { color: #7A1A12; font-weight: 500 }
.cel.ok .dica { color: #1F4D1B }
.dica button { border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0 }
.cel-enviar { align-items: center; justify-content: center; background: var(--on-claro); color: var(--lima); border: 0; font: 500 var(--t-corpo) var(--f-t); cursor: pointer; transition: background .2s, color .2s, transform .2s }
.cel-enviar:hover { background: var(--branco); color: var(--on-claro) }
.cel-enviar:active { transform: scale(.98) }
.cel-enviar:disabled { opacity: .6; cursor: wait }
.isca { position: absolute; left: -10000px; width: 0; height: 0; overflow: hidden } /* campo-isca invisível anti-robô */
.form-aviso { min-height: 24px; margin-top: 12px; font-weight: 500 }
.form-aviso.erro { color: #7A1A12 }
.barra-form .pequeno { margin-top: 4px; max-width: 70ch }
.barra-form .pequeno a { text-decoration: underline }
.barra-form.enviado .tipos, .barra-form.enviado .form-corpo, .barra-form.enviado .pequeno, .barra-form.enviado .form-aviso { display: none }
.form-sucesso { display: none; padding: 40px 0 }
.barra-form.enviado .form-sucesso { display: block }
.form-sucesso svg { width: 72px; height: 72px; color: var(--on-claro) }
.form-sucesso h3 { margin-top: 16px; font: 700 var(--t-titulo)/.9 var(--f-d); text-transform: uppercase }
.form-sucesso p { margin-top: 12px; font-size: var(--t-lead) }
/* 10b. Contato em versão ESCURA (mais leve que o campo todo âmbar): fundo grafite, âmbar só nos detalhes. Para voltar ao campo âmbar, apague este bloco. */
.campo { background: var(--surface); color: var(--ink) }
.campo .titulo { color: var(--ink) }
.chip { background: var(--grafite); color: var(--ink); border: 1px solid #4A4A4A }
.chip:hover { background: #3A3A3A }
.chip[aria-pressed="true"] { background: var(--lima); color: var(--on-claro); border-color: var(--lima) }
.cel { background: var(--grafite); border-bottom: 3px solid transparent }
.cel:focus-within { background: #353535; border-bottom-color: var(--lima) }
.cel input, .cel textarea { color: var(--ink) }
.cel input::placeholder, .cel textarea::placeholder { color: #8F8F8A }
.cel.erro .dica, .form-aviso.erro { color: #FF9C8F }
.cel.ok .dica { color: #A8D98F }
.cel-enviar { background: var(--lima); color: var(--on-claro) }
.cel-enviar:hover { background: var(--branco) }
.campo .pequeno a { text-decoration-color: var(--lima); text-underline-offset: 4px }
.form-sucesso svg { color: var(--lima) }

/* ===== 11. Rodapé: blocos ===== */
.rodape { padding: var(--gap) var(--margem) var(--margem) }
.rod-grade { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1.2fr; gap: var(--gap) }
.rt { background: var(--surface); padding: 24px; min-height: 240px }
.rt-marca { display: flex; flex-direction: column; justify-content: space-between }
.rt-marca p { max-width: 24ch; font-size: var(--t-lead); line-height: 1.3 }
.rt-titulo { margin-bottom: 14px; font: 500 var(--t-corpo)/1.3 var(--f-t); text-transform: none; letter-spacing: 0; color: var(--muted) }
.rt li + li { margin-top: 6px }
.rt a { text-decoration: none }
.rt a:hover { text-decoration: underline; text-underline-offset: 4px }
.rt-legal { display: flex; flex-direction: column; justify-content: space-between; color: var(--muted) }

/* ===== 12. Página de trabalho ===== */
.obra-topo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--margem) }
.obra-titulo { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 22px 24px }
.obra-titulo h1 { font-size: var(--t-grande); line-height: .86 }
.obra-titulo .link-forte { margin: 0 0 6px; flex: none }
.obra-titulo .link-forte:hover { background: var(--on-claro); color: var(--lima) }
.obra-midia { grid-column: 1 / span 8 }
.player { position: relative; aspect-ratio: 16 / 9; background: var(--surface); overflow: hidden }
.player > img, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0 }
.player button { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer }
.player button span { display: grid; place-items: center; width: 96px; height: 64px; background: var(--lima); color: var(--on-claro); transition: background .2s, transform .2s }
.player button:hover span { background: var(--branco); transform: scale(1.06) }
.player svg { width: 28px; height: 28px }
.obra-texto { grid-column: 9 / -1; padding: 28px; background: var(--surface); display: flex; flex-direction: column; justify-content: space-between }
.obra-texto p { font-size: var(--t-lead); line-height: 1.35 }
.b-quadro { display: grid; gap: var(--gap); padding: var(--gap) var(--margem) 0 }
.b-linha { display: grid; gap: var(--gap) }
.b-1 { grid-template-columns: 1fr; height: clamp(240px, 42vw, 640px) }
.b-2a { grid-template-columns: 7fr 5fr; height: clamp(220px, 30vw, 460px) }
.b-2b { grid-template-columns: 5fr 7fr; height: clamp(220px, 30vw, 460px) }
.b-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); height: clamp(180px, 22vw, 340px) }
.b-foto { overflow: hidden; min-width: 0 }
.b-foto img { width: 100%; height: 100%; object-fit: cover }
.obra-fim { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); padding: var(--gap) var(--margem) 0 }
.of-prox { display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; text-decoration: none }
.of-img { position: relative; overflow: hidden }
.of-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.of-txt, .of-cta { display: flex; flex-direction: column; justify-content: space-between; padding: 24px; text-decoration: none }
.of-peq { font-weight: 500 }
.of-nome { font: 700 var(--t-titulo)/.9 var(--f-d); text-transform: uppercase }
.of-prox:hover .of-nome, .of-cta:hover .of-nome { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px }

/* ===== 13. Sobre (página): título grande, vídeo, fatos, história em colunas, serviços ===== */
.sobre-topo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--gap); padding: clamp(24px, 4vw, 64px) var(--margem) 0 }
.sobre-topo .titulo-grande { grid-column: 1 / -1 }
.sobre-topo .lead { grid-column: 1 / span 8; margin: 12px 0 40px }
.st-video { grid-column: 1 / span 8; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface) }
.st-video video { width: 100%; height: 100%; object-fit: cover }
.fatos-lima { grid-column: 9 / -1; align-content: space-between; padding: 24px; grid-template-columns: 1fr }
.sobre-texto { column-count: 3; column-gap: var(--margem); padding: var(--seccao) var(--margem) 0 }
.sobre-texto p { break-inside: avoid; margin-bottom: 1.2em; max-width: 62ch }
.servicos { padding: var(--seccao) var(--margem) 0 }
.servicos .link-forte { margin-top: 24px }
.serv-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 40px }
.serv-grade li { min-height: 160px; padding: 20px; font: 700 var(--t-lead)/.95 var(--f-d); text-transform: uppercase }

/* ===== 14. Texto simples (privacidade e 404) ===== */
.texto-simples { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: clamp(24px, 4vw, 64px) var(--margem) 0 }
.texto-simples .titulo-grande { font-size: clamp(48px, 6vw, 96px) }
.texto-simples > .titulo-grande { grid-column: 1 / span 5 }
.texto-simples > :not(.titulo-grande):not(.ts-esq):not(.ts-dir) { grid-column: 7 / -1 }
.texto-simples .ts-esq { grid-column: 1 / span 5 }
.texto-simples .ts-dir { grid-column: 7 / -1 }
.texto-simples .ts-foto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 32px }
.texto-simples .ts-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover }
.texto-simples h2 { margin-top: 40px; font-size: var(--t-lead); line-height: 1.2; text-transform: none; letter-spacing: 0 }
.texto-simples h2:first-of-type { margin-top: 0 }
.texto-simples p { margin-top: 8px; max-width: 64ch }
.texto-simples a { text-decoration: underline }
.p-texto .rodape { margin-top: var(--seccao) }

/* ===== 14b. Cores dos blocos (vêm depois dos componentes para valer sobre o fundo padrão) ===== */
.cor-lima { background: var(--lima); color: var(--on-claro) }
.cor-branco { background: var(--branco); color: var(--on-claro) }
.cor-cinza { background: var(--cinza); color: var(--on-claro) }
.cor-grafite { background: var(--grafite); color: var(--ink) }

/* ===== 15. Movimento (só transform e opacity; sem JS ou com "reduzir movimento" tudo aparece parado) ===== */
.js [data-r]:not(.visto) { opacity: 0; transform: translateY(28px) }
.js [data-r] { transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 70ms) }
.js .folha .quadro, .js .folha .painel { opacity: 0; transform: translateY(32px) }
.js .carregado .folha .quadro, .js .carregado .folha .painel { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 70ms) }
.js .folha .q-reel .q-img { clip-path: inset(0 0 0 100%) }
.js .folha .q-reel video { transform: scale(1.12) }
.js .carregado .folha .q-reel .q-img { clip-path: inset(0); transition: clip-path var(--entrada) cubic-bezier(.77, 0, .175, 1) .15s }
.js .carregado .folha .q-reel video { transform: none; transition: transform 1.6s cubic-bezier(.16, 1, .3, 1) .15s }
.mq-trilho { animation: deriva 90s linear infinite }
@keyframes deriva { to { transform: translateX(calc(-50% - var(--gap) / 2)) } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .js [data-r]:not(.visto), .js .folha .quadro, .js .folha .painel { opacity: 1; transform: none }
  .js .folha .q-reel .q-img { clip-path: none }
  .js .folha .q-reel video { transform: none }
  .mq-trilho, .logos-trilho { animation: none }
  *, *::before, *::after { transition-duration: .01ms !important }
}

/* ===== 16. Tablet e celular (cada tamanho é uma composição própria) ===== */
@media (max-width: 1100px) {
  .folha { height: auto; min-height: 0; overflow: visible; padding: 0 var(--margem) var(--margem) }
  .folha-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(0, auto); gap: var(--gap) }
  .painel { grid-column: 1 / -1; grid-row: 1; order: -1 }
  .painel .botao { margin-top: 28px }
  .painel h1 { font-size: min(var(--t-grande), 15cqi) }
  .quadro { aspect-ratio: 4 / 5 }
  .q-reel { grid-column: 1 / -1; aspect-ratio: 16 / 10 }
  .trabalhos { grid-template-columns: 1fr }
  .trilho { position: static }
  .rod-grade { grid-template-columns: 1fr 1fr }
  .rt-marca { grid-column: 1 / -1; min-height: 200px }
  .sobre-texto { column-count: 2 }
  .serv-grade { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 900px) {
  .alv { columns: 2 }
  .alv-topo .titulo-grande, .alv-topo .lead { grid-column: 1 / -1 }
  .alv-topo .lead { margin-top: 16px }
  .barra { padding-block: 14px }
  .menu-btn { display: block }
  .js .menu { display: none }
  .js .menu.aberto { display: flex; position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 28px; padding: 90px var(--margem) var(--margem); background: var(--bg) }
  .js .menu.aberto ul { flex-direction: column; gap: 12px }
  .js .menu.aberto a:not(.botao) { font: 700 var(--t-grande)/.9 var(--f-d); text-transform: uppercase }
  .menu { flex-wrap: wrap; gap: 12px 24px }
  .mosaico { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: 48px }
  .mosaico > * { grid-column: 1; min-width: 0 }
  .m-foto { aspect-ratio: 4 / 3 }
  .m-papel { position: static; width: auto; margin-top: 0; max-width: 62ch }
  .m-foto { overflow: visible }
  .m-foto img { height: auto; aspect-ratio: 4 / 3 }
  .m-cor { aspect-ratio: 3 / 2 }
  .sobre-bloco .lead, .sobre-bloco .link-forte { grid-column: 1 / -1 }
  .sobre-bloco .link-forte { margin-top: 12px }
  .provas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px }
  .pb-titulo { grid-column: 1 / -1; min-height: 120px }
  .pb-logo img { width: 150px }
  .campo .titulo, .campo-frase { grid-column: 1 / -1 }
  .campo-frase { margin-top: 16px }
  .form-corpo { grid-template-columns: 1fr }
  .cel { min-height: 0 }
  .cel-enviar { min-height: 64px }
  .mq-foto { height: 110px }
  .obra-titulo { flex-direction: column; align-items: flex-start }
  .obra-midia, .obra-texto, .st-video, .fatos-lima, .sobre-topo .lead { grid-column: 1 / -1 }
  .obra-texto { gap: 20px }
  .obra-fim { grid-template-columns: 1fr }
  .of-prox { grid-template-columns: 1fr }
  .of-img { aspect-ratio: 16 / 9 }
  .b-2a, .b-2b, .b-3 { grid-template-columns: 1fr 1fr; height: auto }
  .b-3 .b-foto:first-child { grid-column: 1 / -1 }
  .b-linha .b-foto { aspect-ratio: 16 / 10 }
  .b-1 { height: auto }
  .b-1 .b-foto { aspect-ratio: 16 / 10 }
  .texto-simples > * { grid-column: 1 / -1 !important }
  .texto-simples h2:first-of-type { margin-top: 32px }
  .sobre-texto { column-count: 1 }
}
@media (max-width: 600px) {
  .gigante-h1 { white-space: normal; font-size: clamp(56px, 20vw, 96px) }
  .lg { width: 170px; height: 110px }
  .faixa-fotos { display: grid; grid-template-columns: 1fr 1fr; height: auto; margin-right: 0 }
  .fq { height: auto; aspect-ratio: 16 / 10 }
  .fq img { width: 100%; height: 100% }
  .fq:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 16 / 9 }
  .faixa-fotos[data-n="2"] .fq:nth-child(2) { grid-column: 1 / -1 }
  .fq:nth-child(n+4):not(.fq-fim) { display: none }
  .fq-fim { grid-column: 1 / -1; width: auto; aspect-ratio: auto; flex-direction: row; align-items: center; padding: 14px 16px; min-height: 56px }
  .faixa-legenda { grid-template-columns: 1fr auto }
  .faixa-legenda span:nth-child(2) { display: none }
  .rod-grade { grid-template-columns: 1fr }
  .rt { min-height: 0 }
  .serv-grade li { min-height: 110px }
  .obra-titulo h1 { font-size: clamp(44px, 14vw, 64px) }
}