/* ─────────────────────────────────────────────────────────────
   BMR — site
   Mesma gramática do gerador de peças (../template/modelo.html):
   grade de 4 colunas VISÍVEL, recuo de 28 px da linha da coluna,
   canto reto, e o amarelo como área — um módulo inteiro, não uma palavra.
   Cor e tipografia saem do Guia de Marca v1.0 (p.22-31).
   ───────────────────────────────────────────────────────────── */

@font-face{font-family:'RT Dromo';src:url('/fontes/RTDromo-Light.woff2') format('woff2');
           font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'RT Dromo';src:url('/fontes/RTDromo-Medium.woff2') format('woff2');
           font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'RT Dromo';src:url('/fontes/RTDromo-Bold.woff2') format('woff2');
           font-weight:700;font-style:normal;font-display:swap}

:root{
  --preto:#171717;      /* base do sistema */
  --offwhite:#F4F1EA;   /* tinta de leitura */
  --amarelo:#FFF660;    /* acento: só sobre escuro */
  --grafite:#212121;    /* superfície elevada */
  --cinza:#C7C3B8;      /* tinta secundária */
  --muted:#9C9890;      /* anotação e rótulo — 6,24:1 sobre o preto */
  --fio:rgba(244,241,234,.09);   /* a linha da grade, exposta */
  --fio-forte:rgba(244,241,234,.16);

  --fonte:'RT Dromo','Helvetica Neue',Arial,sans-serif;
  --recuo:28px;                        /* o recuo do gerador, igual em tudo */
  --margem:clamp(0px,4vw,72px);
  --largura:1440px;
}
@media (max-width:640px){ :root{ --recuo:20px } }

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
body{
  background:var(--preto);color:var(--offwhite);
  font-family:var(--fonte);font-weight:300;font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--amarelo);outline-offset:-2px}

/* ── a folha e a malha ──────────────────────────────────────── */
.folha{max-width:var(--largura);margin:0 auto;border-left:1px solid var(--fio);
       border-right:1px solid var(--fio)}
@media (min-width:1px){ body{padding:0 var(--margem)} }

.malha{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--fio)}
.malha:last-child{border-bottom:none}
.mod{padding:var(--recuo);border-right:1px solid var(--fio);min-width:0;
     display:flex;flex-direction:column}
.mod:last-child{border-right:none}
.mod.sem-fio{border-right:none}
.c1{grid-column:span 1} .c2{grid-column:span 2} .c3{grid-column:span 3} .c4{grid-column:span 4}
.alto{min-height:clamp(160px,19vw,260px)}
.fim{justify-content:flex-end}
.centro{justify-content:center}

@media (max-width:900px){
  .malha{grid-template-columns:repeat(2,1fr)}
  .c3,.c4{grid-column:span 2}
  .mod:nth-child(2n){border-right:none}
}
@media (max-width:560px){
  .malha{grid-template-columns:1fr}
  .c1,.c2,.c3,.c4{grid-column:span 1}
  .mod{border-right:none;border-bottom:1px solid var(--fio)}
  .mod:last-child{border-bottom:none}
}

/* módulos que ganham fio embaixo dentro da mesma malha */
.mod.fio-abaixo{border-bottom:1px solid var(--fio)}

/* ── tipografia ─────────────────────────────────────────────── */
.display{font-weight:500;font-size:clamp(42px,7.2vw,92px);line-height:.96;
         letter-spacing:-.04em;margin-left:-.06em;text-wrap:balance}
/* manchete de frase inteira: cai de corpo para caber em três linhas */
.display.frase-longa{font-size:clamp(34px,4.9vw,64px);line-height:1;letter-spacing:-.035em;
                     max-width:24ch;text-wrap:pretty}
h2{font-weight:500;font-size:clamp(28px,4vw,52px);line-height:1;letter-spacing:-.035em;
   margin-left:-.04em;text-wrap:balance}
h3{font-weight:500;font-size:19px;line-height:1.2;letter-spacing:-.015em}
.amarelo{color:var(--amarelo)}
em{font-style:normal;color:var(--amarelo)}
.lide{font-size:clamp(16px,1.3vw,19px);line-height:1.4;color:var(--cinza);max-width:46ch}
p{max-width:62ch}
.corpo{font-size:16px;line-height:1.45;color:var(--cinza)}

.rot{font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
     color:var(--muted);line-height:1.4}
.rot.acento{color:var(--amarelo)}
.num{font-weight:700;font-size:11px;letter-spacing:.16em;color:var(--amarelo);line-height:1}

/* ── o módulo amarelo: o acento é área ──────────────────────── */
.amarelo-mod{background:var(--amarelo);color:var(--preto);border-right-color:transparent}
.amarelo-mod .rot,.amarelo-mod .num{color:var(--preto);opacity:.72}
.amarelo-mod a{color:var(--preto)}
.amarelo-mod .mono{width:26px;height:56px}
.amarelo-mod .mono path{fill:#171717}

/* ── botões: canto reto, área de toque 52 ───────────────────── */
.botao{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;
       min-height:56px;padding:0 22px;font-weight:500;font-size:16px;letter-spacing:-.01em;
       border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
.botao .seta{font-weight:300;opacity:.7}
.botao.primario{background:var(--amarelo);color:var(--preto)}
.botao.primario:hover{background:var(--offwhite)}
.botao.secundario{border-color:var(--fio-forte);color:var(--offwhite)}
.botao.secundario:hover{border-color:var(--offwhite);background:var(--grafite)}
.botao.pequeno{min-height:44px;padding:0 16px;font-size:14px;gap:12px}
.botao.cheio{width:100%}
.botao[disabled]{opacity:.5;cursor:default}
@media (max-width:560px){ .botao{width:100%} }   /* no celular o botão ocupa o módulo */

/* ── cabeçalho ──────────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:60;background:var(--preto);border-bottom:1px solid var(--fio)}
.topo .folha{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;
             border-bottom:none}
.topo .marca{display:flex;align-items:center;padding:0 var(--recuo);
             border-right:1px solid var(--fio);min-height:60px}
.topo .marca img{height:17px;width:auto}
.topo nav{grid-column:span 3;display:flex;align-items:stretch;justify-content:flex-end}
.topo nav a{display:inline-flex;align-items:center;padding:0 22px;font-size:14.5px;
            color:var(--muted);border-left:1px solid var(--fio);transition:color .15s}
.topo nav a:hover{color:var(--offwhite)}
.topo nav a[aria-current="page"]{color:var(--offwhite)}
.topo nav a.acao{background:var(--amarelo);color:var(--preto);font-weight:500}
.topo nav a.acao:hover{background:var(--offwhite)}
@media (max-width:640px){
  .topo .folha{grid-template-columns:auto 1fr}
  .topo nav{grid-column:span 1}
  .topo nav a.some{display:none}
  .topo nav a{padding:0 16px}
}

/* ── ficha: rótulo em cima, valor embaixo, nas 4 colunas ────── */
.ficha{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--fio)}
.ficha > div{padding:18px var(--recuo);border-right:1px solid var(--fio)}
.ficha > div:last-child{border-right:none}
.ficha b{display:block;margin-top:7px;font-weight:500;font-size:15px;color:var(--offwhite);
         letter-spacing:-.01em}
.ficha b.acento{color:var(--amarelo)}
@media (max-width:900px){
  .ficha{grid-template-columns:repeat(2,1fr)}
  .ficha > div:nth-child(2n){border-right:none}
  .ficha > div:nth-child(-n+2){border-bottom:1px solid var(--fio)}
}
@media (max-width:420px){
  .ficha{grid-template-columns:1fr}
  .ficha > div{border-right:none;border-bottom:1px solid var(--fio)}
  .ficha > div:last-child{border-bottom:none}
}

/* ── listas dentro de módulo ────────────────────────────────── */
.itens{list-style:none;display:flex;flex-direction:column}
.itens li{padding:11px 0;border-bottom:1px solid var(--fio);font-size:15px;color:var(--cinza)}
.itens li:first-child{padding-top:0}
.itens li:last-child{border-bottom:none}
.par{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.par .marca-sim{color:var(--amarelo);font-weight:500;line-height:1.45}
.par .marca-nao{color:var(--muted);font-weight:500;line-height:1.45}

/* O cabeçalho é grudento: sem esta folga, a âncora esconde o título
   da seção atrás dele. */
#servicos,#resultados,#conversar{scroll-margin-top:61px}

/* ── serviços: uma jornada em três tempos ──────────────────── */
/* cada núcleo carrega a própria marca; a ordem quem conta são os
   rótulos de tempo e a seta entre os módulos. */

/* o recado de fundador para fundador: é o único parágrafo amarelo do site,
   e é curto de propósito — em amarelo, texto longo cansa (guia p.25, regra 05) */
.nota-founder{max-width:34ch}
.nota-founder p{font-weight:300;font-size:16px;line-height:1.4;color:var(--amarelo);
                letter-spacing:-.01em;text-wrap:pretty}
.nota-founder a{font-weight:500;text-decoration:underline;text-underline-offset:3px;
                text-decoration-thickness:1px}
.nota-founder a:hover{background:var(--amarelo);color:var(--preto);text-decoration:none}
.nota-founder footer{margin-top:16px;padding-top:14px;border-top:1px solid var(--fio);
                     display:flex;flex-direction:column;gap:3px}
.nota-founder footer b{font-weight:500;font-size:14.5px;color:var(--offwhite);
                       letter-spacing:-.01em}
.nota-founder footer span{font-size:12.5px;color:var(--muted);line-height:1.35}
.malha.tres{grid-template-columns:repeat(3,1fr)}
.servico{padding:0}
.servico .visual{aspect-ratio:3/1;overflow:hidden;background:var(--preto);
                 border-bottom:1px solid var(--fio)}
.servico .visual img{width:100%;height:100%;object-fit:contain;padding:0 var(--recuo);
                     transition:opacity .3s}
.servico:hover .visual img{opacity:.85}
.servico .conteudo{padding:var(--recuo);display:flex;flex-direction:column;flex:1}
/* a seta que liga uma etapa na seguinte, na própria linha da grade */
.servico{position:relative}
.servico:not(:last-child)::after{
  content:"→";position:absolute;top:0;right:0;transform:translate(50%,-50%);
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--amarelo);color:var(--preto);font-size:15px;font-weight:500;z-index:2}
.servico .rot .num{margin-right:8px}
.servico h3{margin-top:14px;font-size:clamp(22px,1.9vw,27px);letter-spacing:-.03em}
.servico .entrega{margin-top:12px;font-weight:500;font-size:17.5px;line-height:1.3;
                  color:var(--offwhite);letter-spacing:-.02em}
.servico .itens{margin-top:20px}
@media (max-width:980px){
  .malha.tres{grid-template-columns:1fr}
  .servico{border-right:none;border-bottom:1px solid var(--fio)}
  .servico:last-child{border-bottom:none}
  .servico:not(:last-child)::after{top:auto;bottom:0;right:50%;
                                   transform:translate(50%,50%) rotate(90deg)}
}

/* ── carrossel de logos ─────────────────────────────────────── */
.carrossel{display:flex;align-items:stretch;border-bottom:1px solid var(--fio);overflow:hidden}
.trilho{display:flex;width:max-content;animation:desfilar 42s linear infinite}
.carrossel:hover .trilho{animation-play-state:paused}
.fila{display:flex;align-items:center;list-style:none}
.fila li{display:flex;align-items:center;justify-content:center;
         height:78px;padding:0 clamp(24px,3vw,44px);border-right:1px solid var(--fio)}
/* o logo do cliente entra em offwhite: o sistema é de três cores, e cor de
   cliente dentro dele vira ruído (guia p.25, regra 08) */
/* A altura de cada logo não é igual: é calculada para IGUALAR A MASSA
   ÓPTICA (área × densidade de tinta). Wordmark comprido e fino pesa
   diferente de emblema quadrado — altura igual é o que faz a fila
   parecer desalinhada. O valor de cada um vem no --h, no próprio HTML. */
.fila .logo{height:var(--h,24px);width:auto;max-width:180px;object-fit:contain;
            filter:brightness(0) invert(1);opacity:.6;transition:opacity .2s}
.carrossel:hover .fila .logo{opacity:.85}
/* enquanto não existe arquivo de logo, o nome ocupa o lugar dele */
.fila .nome{font-weight:500;font-size:17px;letter-spacing:-.02em;color:var(--muted);
            white-space:nowrap;transition:color .2s}
.carrossel:hover .fila .nome{color:var(--cinza)}
@keyframes desfilar{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  .trilho{animation:none;width:100%;overflow-x:auto}
  .trilho .fila[aria-hidden]{display:none}
}
@media (max-width:560px){
  .fila li{height:64px}
}

/* ── grafismo ───────────────────────────────────────────────── */
.grafismo{background:url('/marca/grafismo-padrao.svg') center/cover;min-height:100%}

/* ── trabalhos ──────────────────────────────────────────────── */
.obra{display:flex;flex-direction:column;border-right:1px solid var(--fio);
      transition:background .15s}
.obra:hover{background:var(--grafite)}
.obra:last-child{border-right:none}
.obra .capa{aspect-ratio:4/3;overflow:hidden;background:var(--grafite);position:relative}
.obra .tem-filme{position:absolute;left:0;bottom:0;padding:8px 12px;background:var(--amarelo);
                 color:var(--preto);font-size:10.5px;letter-spacing:.14em}
.obra .capa img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.obra:hover .capa img{filter:saturate(1)}
.obra .pe{padding:18px var(--recuo) 22px;display:flex;flex-direction:column;gap:9px;
          border-top:1px solid var(--fio)}
.obra .linha{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.obra h3{font-size:17px}
@media (max-width:900px){ .obra:nth-child(2n){border-right:none} }
@media (max-width:560px){ .obra{border-right:none;border-bottom:1px solid var(--fio)} }

/* ── formulário ─────────────────────────────────────────────── */
form{display:flex;flex-direction:column}
label{display:flex;flex-direction:column;gap:9px;padding:16px 0;border-bottom:1px solid var(--fio)}
label:first-of-type{padding-top:0}
input,textarea{
  font-family:var(--fonte);font-weight:300;font-size:16px;color:var(--offwhite);
  background:transparent;border:none;padding:0;line-height:1.4}
input{min-height:26px}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus{outline:none}
label:focus-within .rot{color:var(--amarelo)}
textarea{resize:vertical;min-height:88px}
.ajuda{font-size:13px;color:var(--muted);margin-top:2px}
.aviso{font-size:14px;line-height:1.4;color:#FF8A5B;padding:14px 0}
.aviso:empty{display:none}
.pronto{display:flex;flex-direction:column;gap:16px;align-items:flex-start}

/* ── o campo amarelo: o regime "evento" do guia (p.23) ─────────
   Campo amarelo inteiro com tipo preto — 15,88:1. A regra dura é a 01
   da p.25: offwhite NUNCA sobre amarelo (1,00:1). Por isso aqui tudo
   que era offwhite vira preto, e o botão inverte: fundo preto. */
.campo-amarelo{background:var(--amarelo);color:var(--preto);
               border-bottom-color:rgba(23,23,23,.16)}
.campo-amarelo .mod{border-right-color:rgba(23,23,23,.16)}
.campo-amarelo h2,
.campo-amarelo .pronto h2{color:var(--preto)}
.campo-amarelo .rot,
.campo-amarelo .rot.acento{color:rgba(23,23,23,.62)}
.campo-amarelo .lide,
.campo-amarelo .corpo{color:rgba(23,23,23,.78)}
.campo-amarelo a{color:var(--preto);text-decoration:underline;text-underline-offset:3px;
                 text-decoration-thickness:1px}
.campo-amarelo a:hover{background:var(--preto);color:var(--amarelo);text-decoration:none}
.campo-amarelo .regua-amarela{background:var(--preto)}

/* o formulário dentro do campo */
.campo-amarelo label{border-bottom-color:rgba(23,23,23,.2)}
.campo-amarelo input,
.campo-amarelo textarea{color:var(--preto);caret-color:var(--preto)}
.campo-amarelo input::placeholder,
.campo-amarelo textarea::placeholder{color:rgba(23,23,23,.62)}  /* 4,81:1 — o piso é 4,5 */
.campo-amarelo label:focus-within .rot{color:var(--preto)}
.campo-amarelo .ajuda{color:rgba(23,23,23,.6)}
.campo-amarelo .aviso{color:var(--preto);font-weight:500}
.campo-amarelo :focus-visible{outline-color:var(--preto)}

/* o botão inverte: preto com tinta offwhite, 15,89:1 */
.campo-amarelo .botao.primario{background:var(--preto);color:var(--offwhite)}
.campo-amarelo .botao.primario:hover{background:var(--grafite)}
.campo-amarelo .botao.secundario{border-color:rgba(23,23,23,.35);color:var(--preto)}
.campo-amarelo .botao.secundario:hover{background:var(--preto);color:var(--offwhite);
                                       border-color:var(--preto)}

/* ── rodapé ─────────────────────────────────────────────────── */
.rodape{border-top:1px solid var(--fio)}
.rodape img{align-self:flex-start}
.rodape ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:16px}
.rodape ul a,.rodape ul span{font-size:15px;color:var(--cinza)}
.rodape ul a:hover{color:var(--amarelo)}
.creditos{display:flex;flex-wrap:wrap;gap:8px 28px;padding:16px var(--recuo);
          border-top:1px solid var(--fio);font-size:12.5px;color:var(--muted);
          letter-spacing:.02em}

/* some da tela, continua existindo para leitor de tela e para o Google */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
           clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }