/* ==========================================================================
   Moldpar — sistema visual
   Cores do manual de marca: laranja #E74014, marinho #161A33.
   Cantos retos, linha em vez de sombra, foto grande. Nada de pílula.

   Sobre os laranjas: o #E74014 do manual é um traço, não um fundo de texto.
   Branco sobre ele dá 4,08:1 e reprova a AA; texto escuro nele também. Por isso
   há três variantes aferidas: --laranja fica em borda, filete e marcador;
   --laranja-forte é o fundo de qualquer área com texto branco (4,8:1);
   --laranja-texto é a palavra laranja sobre papel (5,0:1).
   ========================================================================== */

:root {
  --marinho: #161a33;
  --marinho-2: #1e2340;
  --marinho-3: #2a3050;
  --laranja: #e74014;        /* só traço e marcador, nunca fundo de texto */
  --laranja-forte: #d3390f;  /* fundo com texto branco: 4,8:1 */
  --laranja-texto: #c2340f;  /* sobre papel: 5,0:1 */
  --laranja-esc: #a62b0c;
  --laranja-claro: #ff7a52;  /* sobre marinho */
  --papel: #f4f4f2;
  --papel-2: #e9e9e6;
  --linha: #d8d8d4;
  --tinta: #161a33;
  --tinta-fraca: #5c6076;
  --cinza-papel: #7c8199;    /* cinza de repouso sobre papel: 3,5:1 */
  --claro: #b9bccd;
  --claro-2: #868ba3;
  --claro-3: #9aa0b5;        /* texto de apoio sobre marinho */
  --claro-4: #c9ccdb;        /* texto corrente sobre marinho */
  --placeholder: #6f7488;    /* texto de exemplo dentro de campo */
  --erro: #b3261e;
  --zap: #25d366;            /* verde do WhatsApp, cor de terceiro */
  --topo-h: 76px;
  --barra-recuo: 28px;       /* folga depois do filete, na faixa de números */
  --rap: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 16px); }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.env { max-width: 1440px; margin: 0 auto; }
.pad { padding-inline: clamp(20px, 4vw, 72px); }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .14em; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

::selection { background: var(--laranja); color: #fff; }

:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }
.marinho :focus-visible, .topo :focus-visible, .hero :focus-visible, .chamada :focus-visible {
  outline-color: #fff;
}

/* ---------- revelar ao rolar ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--rap), transform .7s var(--rap); }
.rv.vis { opacity: 1; transform: none; }

/* Quem pediu menos movimento pediu por todo ele, não só pela entrada das seções:
   os avanços de botão, os zooms de foto e as setas também param. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn:hover, .zap:hover, .pilar:hover .pilar-foto, .dupla .foto-cx:hover img,
  .btn:hover .seta, .pilar:hover .pilar-mais .seta { transform: none !important; }
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-weight: 600; font-size: 15px; padding: 16px 26px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s var(--rap), color .18s, border-color .18s, transform .18s var(--rap);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-laranja { background: var(--laranja-forte); color: #fff; }
.btn-laranja:hover { background: var(--laranja-esc); }
.btn-linha { border-color: rgba(255, 255, 255, .34); color: #fff; }
.btn-linha:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.btn-escuro { border-color: var(--marinho); color: var(--marinho); }
.btn-escuro:hover { background: var(--marinho); color: #fff; }
.btn-branco { background: #fff; color: var(--laranja-esc); }
.btn-branco:hover { background: var(--papel-2); }
.btn .seta { transition: transform .2s var(--rap); }
.btn:hover .seta { transform: translateX(4px); }

/* ---------- topo ---------- */
.topo {
  background: var(--marinho); color: #fff; position: sticky; top: 0; z-index: 40;
  transition: box-shadow .25s;
}
.topo.rolou { box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .28); }
.topo-in { display: flex; align-items: center; justify-content: space-between; height: var(--topo-h); gap: 32px; }
.topo img { height: 42px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 14.5px; font-weight: 500; color: var(--claro-4); padding: 6px 0;
  border-bottom: 2px solid transparent; transition: color .18s, border-color .18s;
}
.nav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .3); }
.nav a.on { color: #fff; border-bottom-color: var(--laranja); }
.topo-dir { display: flex; align-items: center; gap: 20px; }
.topo-fone { font-size: 12px; color: var(--claro-4); }
/* No celular "Solicite seu orçamento" quebrava em três linhas e o botão ficava
   mais alto que o próprio cabeçalho. Some o começo da frase e sobra
   "orçamento", que cabe numa linha e continua dizendo o que faz. */
@media (max-width: 620px) {
  .so-largo { display: none; }
  .topo-dir .btn { text-transform: capitalize; }
}
.menu-bt { display: none; background: none; border: 1px solid rgba(255, 255, 255, .3); color: #fff; padding: 10px 12px; cursor: pointer; }
.menu-bt span { display: block; width: 20px; height: 2px; background: #fff; margin: 4px 0; transition: transform .2s, opacity .2s; }
.menu-abre .menu-bt span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-abre .menu-bt span:nth-child(2) { opacity: 0; }
.menu-abre .menu-bt span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--marinho); color: #fff; overflow: hidden; border-bottom: 3px solid var(--laranja); }
.hero-foto { position: absolute; inset: 0; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--marinho) 0%, rgba(22, 26, 51, .96) 32%, rgba(22, 26, 51, .6) 62%, rgba(22, 26, 51, .26) 100%),
    linear-gradient(rgba(22, 26, 51, .3), rgba(22, 26, 51, 0) 30%);
}
.hero-grade {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(100deg, #000 0%, transparent 60%);
}
.hero-in { position: relative; padding-block: clamp(72px, 9vw, 132px); }
.hero-curto .hero-in { padding-block: clamp(56px, 6.5vw, 92px); }
.selo {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255, 255, 255, .26); padding: 8px 14px; font-size: 11.5px; color: #fff;
}
.h-gigante { font-size: clamp(44px, 6.6vw, 92px); font-weight: 800; letter-spacing: -.035em; line-height: .98; max-width: 15ch; }
.h-grande { font-size: clamp(38px, 5vw, 68px); font-weight: 800; letter-spacing: -.035em; line-height: 1; max-width: 17ch; }
.h-gigante em, .h-grande em { font-style: normal; color: var(--laranja-claro); }
.hero p.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--claro-4); max-width: 56ch; margin-top: 24px; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.migalha { display: flex; gap: 10px; font-size: 11.5px; color: var(--claro-2); margin-bottom: 22px; }
.migalha a { display: inline-block; padding-block: 5px; }
.migalha a:hover { color: #fff; }
.migalha .aqui { color: var(--laranja-claro); }

/* ---------- barra de números ---------- */
.barra { background: var(--laranja-forte); color: #fff; }
.barra-in { display: grid; grid-template-columns: repeat(4, 1fr); }

/* Cada célula respira depois do seu filete, mas a primeira de cada fileira
   encosta na calha da página — senão a coluna da esquerda sai do prumo com o
   resto do conteúdo. Por isso o recuo é zerado por fileira, breakpoint a
   breakpoint, e não uma vez só. */
.barra-c {
  padding: 26px 0 26px var(--barra-recuo);
  border-right: 1px solid rgba(0, 0, 0, .16);
}
.barra-c:nth-child(4n + 1) { padding-left: 0; }
.barra.tres-col .barra-c:nth-child(3n + 1) { padding-left: 0; }
.barra-c:last-child { border-right: 0; }
.barra-n { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.barra-l { font-size: 10.5px; margin-top: 7px; color: #fff; }
.barra.tres-col .barra-in { grid-template-columns: repeat(3, 1fr); }

/* ---------- seções ---------- */
.secao { padding-block: clamp(64px, 8vw, 104px); }
.secao-curta { padding-block: clamp(48px, 6vw, 76px); }
.secao-clara { background: var(--papel-2); }
.olho { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--laranja-texto); margin-bottom: 18px; }
.olho::before { content: ""; width: 26px; height: 2px; background: var(--laranja); flex-shrink: 0; }
.marinho .olho { color: var(--laranja-claro); }
.h-secao { font-size: clamp(30px, 3.6vw, 46px); max-width: 20ch; }
.sub { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6; color: var(--tinta-fraca); max-width: 62ch; margin-top: 18px; }
.sub + .sub { margin-top: 16px; }

/* ---------- grade de pilares ---------- */
.grade { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); margin-top: 48px; }
.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-4 { grid-template-columns: repeat(4, 1fr); }
.grade-5 { grid-template-columns: repeat(5, 1fr); }
.pilar {
  position: relative; background: var(--papel); padding: 34px 30px 38px;
  display: flex; flex-direction: column; gap: 14px; transition: background .2s var(--rap);
}
.pilar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--laranja);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--rap);
}
.pilar:hover { background: #fff; }
.pilar:hover::before { transform: scaleX(1); }
.pilar-n { font-size: 11px; color: var(--laranja-texto); }
.pilar h3 { font-size: 21px; }
.pilar p { font-size: 15px; line-height: 1.6; color: var(--tinta-fraca); }
.pilar-mais { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--marinho); display: flex; align-items: center; gap: 8px; }
.pilar-mais .seta { transition: transform .2s var(--rap); }
.pilar:hover .pilar-mais .seta { transform: translateX(4px); }

/* O cartão inteiro já se acende ao passar o mouse, mas só o "Ver…" de 12px era
   clicável. O link se estica por cima do cartão: alvo grande, e continua sendo
   um link só na árvore de acessibilidade. */
.pilar:has(.pilar-mais) { cursor: pointer; }
.pilar-mais::after { content: ""; position: absolute; inset: 0; }
.pilar:has(.pilar-mais:focus-visible) { outline: 2px solid var(--laranja); outline-offset: -2px; }
.pilar-mais:focus-visible { outline: 0; }
.pilar-cx { overflow: hidden; margin: -34px -30px 4px; }
.pilar-foto { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform .5s var(--rap); }
.pilar:hover .pilar-foto { transform: scale(1.04); }

/* ---------- faixa de foto ---------- */
.faixa-foto { position: relative; height: clamp(320px, 42vw, 640px); overflow: hidden; }
.faixa-foto img { width: 100%; height: 100%; object-fit: cover; }
.faixa-legenda {
  position: absolute; left: 0; bottom: 0; background: var(--marinho); color: #fff;
  padding: 18px 26px; font-size: 12px; border-top: 3px solid var(--laranja);
}

/* ---------- faixa de foto com painel de texto ---------- */
/* Um painel sólido no canto, e não um escurecimento sobre a foto toda: a foto
   da bancada é o argumento da seção, e tapá-la para caber texto seria trocar o
   forte pelo fraco. Sobre marinho cheio o contraste é o mesmo do resto do site,
   sem depender do que estiver na foto atrás. */
.faixa-in {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  background: var(--marinho); color: #fff;
  border-top: 3px solid var(--laranja);
  padding: clamp(22px, 2.4vw, 34px) clamp(26px, 3vw, 44px);
  /* largo o bastante para o título assentar em duas linhas. Estreito demais ele
     quebra em quatro e a placa vira uma tira espremida — o que estraga não é a
     área coberta, é a proporção. */
  width: min(600px, 64vw);
}
.faixa-in .olho { color: var(--laranja-claro); margin-bottom: 12px; white-space: nowrap; }
.faixa-in h2 { font-size: clamp(19px, 1.75vw, 26px); line-height: 1.18; color: #fff; }
.faixa-lista { font-size: 10px; color: var(--claro-2); margin-top: 14px; line-height: 1.7; }

/* ---------- bloco marinho ---------- */
.marinho { background: var(--marinho); color: #fff; }
.marinho h2, .marinho h3 { color: #fff; }
.marinho p { color: var(--claro); }
.iso-in { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; padding-block: clamp(48px, 6vw, 76px); }
.iso-selo { border: 1px solid rgba(255, 255, 255, .24); padding: 26px 30px; text-align: center; }
.iso-selo b { display: block; font-size: 19px; margin-top: 10px; }
.caixas { display: grid; gap: 1px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .16); margin-top: 40px; }
.caixa { background: var(--marinho); padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; transition: background .2s; }
.caixa:hover { background: var(--marinho-2); }
.caixa h3 { font-size: 18px; }
.caixa .n { font-size: 11px; color: var(--laranja-claro); }
.caixa p { font-size: 14.5px; line-height: 1.6; color: var(--claro-4); }

/* ---------- dupla texto+foto ---------- */
.dupla { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.dupla.inv { grid-template-columns: .95fr 1.05fr; }
.dupla .foto-cx { overflow: hidden; }
.dupla img { width: 100%; height: clamp(300px, 34vw, 460px); object-fit: cover; display: block; transition: transform .6s var(--rap); }
.dupla .foto-cx:hover img { transform: scale(1.03); }

/* ---------- segmentos ---------- */
/* Os segmentos são rótulos, não botões. A inversão para marinho no hover era o
   sinal mais forte de "clique aqui" que existe, e não havia para onde clicar. */
.seg {
  background: var(--papel); padding: 30px 16px 26px; text-align: center;
  font-size: 14px; font-weight: 500; transition: background .2s;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.secao-clara .seg { background: var(--papel-2); }
.seg:hover { background: #fff; }
.seg-ico { width: 44px; height: 44px; color: var(--laranja); flex-shrink: 0; }

/* ---------- faixa de clientes ---------- */
/* A fita tem duas cópias da lista e anda exatamente 50%: a emenda cai onde a
   segunda cópia já ocupa o lugar da primeira, então não há salto. As máscaras
   nas pontas evitam que os nomes apareçam e sumam de estalo.

   O ritmo não pode depender do tamanho da lista: com duração fixa, quatro
   clientes se arrastariam e vinte passariam voando. O bloco anota quantos itens
   tem a cópia em --clientes-itens e a duração sai daí, sempre no mesmo passo. */
.clientes { overflow: hidden; }
.clientes .olho { margin-bottom: 26px; }
.clientes-cx {
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.clientes-fita {
  display: flex; align-items: center; width: max-content;
  animation: correr calc(var(--clientes-itens, 12) * 3.5s) linear infinite;
}
.clientes-cx:hover .clientes-fita { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }

.cliente {
  flex-shrink: 0; padding: 0 clamp(26px, 3.4vw, 52px);
  font-size: clamp(19px, 1.9vw, 27px); font-weight: 700; letter-spacing: -.02em;
  /* #d8d8d4 dava 1,3:1 sobre o papel — o nome do cliente ficava fantasma.
     Aqui é 3,5:1, folgado para texto grande em negrito. */
  color: var(--cinza-papel); transition: color .2s;
  white-space: nowrap;
}
.cliente:hover { color: var(--tinta-fraca); }

/* Logotipo, quando vier: a altura é que iguala, não a largura — logo largo e
   logo quadrado precisam pesar o mesmo na fita. Cinza no repouso pelo mesmo
   motivo do nome em texto: a faixa é prova social, não um mostruário de marcas
   brigando entre si. */
.cliente img {
  display: block; height: clamp(28px, 3vw, 44px); width: auto;
  object-fit: contain;
  filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s;
}
.cliente:hover img { filter: none; opacity: 1; }

/* Movimento reduzido: a fita para e vira uma lista centrada, que continua
   legível. Some tudo que é repetição — as cópias existem só para a emenda e
   para dar largura — e sobra a lista uma vez só. Parado também não há ponta
   correndo para fora, então a máscara sai: ela só apagaria nome de verdade. */
@media (prefers-reduced-motion: reduce) {
  .clientes-fita {
    animation: none; flex-wrap: wrap; width: auto; max-width: 100%;
    justify-content: center; row-gap: 14px;
  }
  .clientes-cx { mask-image: none; }
  .cliente-eco { display: none; }
  /* parado, nome comprido não tem para onde correr: pode quebrar em duas linhas */
  .cliente { white-space: normal; text-align: center; padding-inline: clamp(14px, 3vw, 26px); }
}

/* ---------- linha do tempo ---------- */
.tempo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 56px; position: relative; padding-top: 40px; }
.tempo::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: var(--linha); }
.marco { position: relative; display: flex; flex-direction: column; gap: 10px; }
.marco::before { content: ""; position: absolute; top: -22px; left: 0; width: 11px; height: 11px; background: var(--laranja); }
.marco.fim::before { background: var(--marinho); }
.marco .ano { font-size: 12.5px; color: var(--laranja-texto); font-variant-numeric: tabular-nums; }
.marco.fim .ano { color: var(--marinho); }
.marco h3 { font-size: 16.5px; }
.marco p { font-size: 14px; line-height: 1.55; color: var(--tinta-fraca); }

/* ---------- chamada final ---------- */
.chamada { background: var(--laranja-forte); color: #fff; }
.chamada-in { padding-block: clamp(52px, 6vw, 78px); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.chamada h2 { font-size: clamp(26px, 3.2vw, 40px); color: #fff; }
.chamada p { font-size: 17px; line-height: 1.55; color: #fff; max-width: 56ch; margin-top: 14px; }
.chamada-acoes { display: flex; flex-direction: column; gap: 12px; min-width: 260px; }

/* ---------- formulário ---------- */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font-size: 13px; font-weight: 500; }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 15.5px; color: var(--tinta); width: 100%; box-sizing: border-box;
  border: 1px solid var(--linha); border-radius: 0; background: #fff; height: 54px; padding: 0 16px;
  transition: border-color .18s, box-shadow .18s;
}
.campo textarea { height: auto; min-height: 128px; padding: 15px 16px; line-height: 1.5; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--placeholder); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--marinho-3); }
/* o anel é desenhado com box-shadow, que sai no modo de alto contraste do
   Windows: a borda transparente segura o contorno lá */
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid transparent; outline-offset: 0;
  border-color: var(--laranja-forte); box-shadow: 0 0 0 3px rgba(211, 57, 15, .16);
}
/* o navegador só marca :invalid depois que o visitante mexe no campo */
.campo input:not(:placeholder-shown):invalid, .campo textarea:not(:placeholder-shown):invalid { border-color: var(--erro); }
/* enquanto nada foi escolhido o select está :invalid — o "Selecionar" fica na
   mesma cinza dos placeholders, em vez de parecer um campo já preenchido */
.campo select:invalid { color: var(--placeholder); }

/* o Chrome pinta campo autocompletado de amarelo; o preenchimento interno da
   sombra é a única forma de recuperar o fundo branco */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  -webkit-box-shadow: 0 0 0 60px #fff inset;
  caret-color: var(--tinta);
}

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235c6076' stroke-width='2'%3E%3Cpolyline points='6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 46px;
}
.dupla-campo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aviso-form { font-size: 12.5px; line-height: 1.55; color: var(--tinta-fraca); margin: -4px 0 0; }
.aviso-form a {
  display: inline-block; padding-block: 6px;
  text-decoration: underline; text-underline-offset: 2px; color: var(--laranja-texto);
}
.aviso-form.enviado { color: var(--tinta); font-weight: 500; }
.form-caixa {
  background: var(--papel-2); border: 1px solid var(--linha); border-top: 3px solid var(--laranja);
  padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 20px;
}
.lista-contato { border-top: 1px solid var(--linha); margin-top: 8px; }
.lista-contato .item { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--linha); }
.lista-contato .ico { width: 42px; height: 42px; background: var(--marinho); display: grid; place-items: center; flex-shrink: 0; }
.lista-contato .rot { font-size: 10.5px; color: var(--tinta-fraca); }
.lista-contato .val { font-size: 16.5px; font-weight: 600; margin-top: 3px; }
.lista-contato .val-sub { font-size: 15px; color: var(--tinta-fraca); margin-top: 2px; }
.lista-contato .val-extra { margin-top: 6px; }
.lista-contato .zap-linha { font-size: 11px; color: var(--laranja-texto); }

/* ---------- pular para o conteúdo (só aparece no foco por teclado) ---------- */
.pula {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--marinho); color: #fff; padding: 12px 20px; font-size: 14px; font-weight: 500;
  border-bottom: 2px solid var(--laranja); transition: top .16s;
}
.pula:focus-visible { top: 12px; }
main:focus { outline: 0; } /* o tabindex=-1 é só para receber o foco do link de pular */

/* ---------- rodapé ---------- */
.rodape { background: var(--marinho); color: #fff; padding-block: 64px 28px; border-top: 3px solid var(--laranja); }
.rodape-g { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; }
.rodape-logo { height: 44px; width: auto; }
.rodape-resumo { font-size: 14.5px; line-height: 1.6; color: var(--claro-3); margin-top: 18px; max-width: 34ch; }
.rodape-horario { color: var(--claro-2); }
.rodape .rodape-t { font-size: 11px; color: var(--claro-2); margin: 0 0 16px; font-weight: 500; }
.rodape ul { margin: 0; padding: 0; }
.rodape li { list-style: none; font-size: 14.5px; color: var(--claro-4); margin-bottom: 10px; }
.rodape li a { display: inline-block; padding-block: 5px; transition: color .18s; }
.rodape li a:hover { color: var(--laranja-claro); }
.rodape-base { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; font-size: 11px; color: var(--claro-2); }

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  .grade-4, .grade-5 { grid-template-columns: repeat(2, 1fr); }
  /* cinco itens em duas colunas deixam um buraco no fim da grade, e o buraco
     mostra a cor da linha: o último ocupa a sobra */
  .grade-5 > :last-child { grid-column: 1 / -1; }
  .tempo { grid-template-columns: repeat(2, 1fr); }
  .tempo::before { display: none; }
  .marco { padding-top: 8px; }
}
@media (max-width: 860px) {
  .menu-bt { display: block; }
  .nav {
    position: absolute; top: var(--topo-h); left: 0; right: 0; background: var(--marinho);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, .12); display: none;
  }
  .menu-abre .nav { display: flex; }
  .nav a { padding: 15px clamp(20px, 4vw, 72px); border-bottom: 0; border-left: 3px solid transparent; font-size: 16px; }
  .nav a.on { border-left-color: var(--laranja); border-bottom-color: transparent; }
  .topo-dir .mono { display: none; }
  .topo-dir { gap: 12px; }
  .topo-dir .btn { padding: 12px 16px; font-size: 13.5px; white-space: nowrap; }
  .grade-2, .grade-3, .grade-4, .grade-5, .rodape-g, .dupla, .dupla.inv, .iso-in, .chamada-in, .tempo {
    grid-template-columns: 1fr;
  }
  .caixas { grid-template-columns: 1fr !important; }
  .dupla-campo { grid-template-columns: 1fr; }
  .barra-in { grid-template-columns: repeat(2, 1fr); }
  .barra-c { border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .16); }
  .barra-c:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .16); }
  .barra-c:last-child { border-bottom: 0; }
  .chamada-acoes { min-width: 0; }
  .rodape-base { flex-direction: column; gap: 8px; }
  .faixa-texto { height: clamp(400px, 96vw, 480px); }
  .faixa-in { width: min(300px, 84vw); padding: 16px 18px; }
  .faixa-in h2 { font-size: 18px; }
  .faixa-lista { display: none; }
  .dupla img { height: clamp(240px, 52vw, 340px); }
}
@media (max-width: 520px) {
  /* Em uma coluna o recuo depois do filete não faz sentido: não há filete, e
     o número tem de nascer na mesma calha do resto da página. O seletor repete
     `.barra.tres-col` porque a regra de três colunas é mais específica que
     esta media query e, sem isso, venceria. */
  .barra-in, .barra.tres-col .barra-in { grid-template-columns: 1fr; }
  .barra-c, .barra-c:nth-child(odd) { border-right: 0; }
  .barra-c, .barra.tres-col .barra-c { padding-left: 0; padding-block: 20px; }
  .pilar-cx { margin-inline: -22px; }
  .pilar { padding: 26px 22px 30px; }
}

/* ---------- mapa + foto lado a lado (contato) ---------- */
.mapa-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.mapa-foto { position: relative; overflow: hidden; min-height: 340px; }
.mapa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapa { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; filter: grayscale(.25) contrast(1.04); }


/* ---------- links da lista de contato ---------- */
.lista-contato a.val { display: inline-block; padding-block: 5px; transition: color .18s; }
.lista-contato a.val:hover { color: var(--laranja-texto); }
.lista-contato .mono[href] { display: inline-block; padding-block: 5px; }

@media (max-width: 860px) {
  .mapa-linha { grid-template-columns: 1fr; }
  .mapa-foto { min-height: 240px; }
  .mapa { min-height: 300px; }
}

/* ---------- WhatsApp flutuante ---------- */
.zap {
  position: fixed; right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); z-index: 50;
  width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--zap); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
  transition: transform .2s var(--rap), box-shadow .2s;
}
.zap:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .34); }
@media (prefers-reduced-motion: reduce) { .zap { transition: none; } }

/* ==========================================================================
   Impressão
   Comprador industrial imprime página de serviço e contato para anexar a
   processo. Aqui o site vira documento: sem tinta chapada, sem navegação,
   sem foto decorativa, e com o endereço dos links à vista no papel.
   ========================================================================== */
@media print {
  @page { margin: 16mm 14mm; }

  :root { --papel: #fff; --papel-2: #fff; --tinta-fraca: #444; --linha: #999; }

  html, body { background: #fff; color: #000; font-size: 11pt; }

  /* fundo chapado consome tinta e some no laser: vira texto preto sobre branco */
  .hero, .marinho, .chamada, .barra, .rodape, .caixa, .faixa-legenda, .lista-contato .ico {
    background: #fff !important; color: #000 !important; border-color: #999 !important;
  }
  .hero h1, .hero p, .marinho h2, .marinho h3, .marinho p, .chamada h2, .chamada p,
  .caixa p, .caixa .n, .barra-n, .barra-l, .rodape li, .rodape p, .h-gigante em, .h-grande em {
    color: #000 !important;
  }

  /* o que só serve na tela */
  .topo, .zap, .pula, .menu-bt, .hero-foto, .hero-grade, .faixa-foto, .pilar-cx,
  .cena-molde, .cena-inj, .mapa, .dupla .foto-cx, .migalha, .btn, .seta, .aviso-form,
  .clientes {
    display: none !important;
  }

  /* nada de animação de entrada segurando conteúdo invisível no papel */
  .rv { opacity: 1 !important; transform: none !important; }

  .secao, .secao-curta, .hero-in, .chamada-in, .iso-in { padding-block: 12pt !important; }
  .grade, .caixas { border: 1px solid #999; background: #fff; gap: 0; }
  .pilar, .caixa, .seg { border-bottom: 1px solid #ccc; padding: 10pt 12pt; }

  /* o leitor no papel não tem como seguir um link: o endereço vai junto */
  main a[href^="http"]::after,
  main a[href^="mailto"]::after,
  main a[href^="tel"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }

  h1, h2, h3 { break-after: avoid; }
  .pilar, .caixa, .marco, .lista-contato .item, .form-caixa { break-inside: avoid; }
  img { max-width: 100% !important; }
}

/* ==========================================================================
   Papéis que estavam escritos à mão em cada página
   Havia quatro clamp() diferentes para o mesmo papel — "título de bloco
   marinho" — variando 2px nos extremos. Isso é o sistema vazando para dentro
   do conteúdo: cada página reinventava a medida. Aqui cada papel tem um nome.
   ========================================================================== */

/* o selo do topo da página empurra o título */
.selo + h1 { margin-top: 24px; }
.selo + .h-gigante { margin-top: 26px; }

/* bloco de texto sobre marinho, entre seções */
.bloco-marinho { padding-block: clamp(56px, 7vw, 92px); }
.h-bloco { font-size: clamp(27px, 3.2vw, 42px); max-width: 24ch; }
.p-bloco { font-size: 17px; line-height: 1.6; max-width: 64ch; margin-top: 16px; }

/* um botão sozinho depois de um parágrafo */
.acao-solta { margin-top: 28px; }
.btn-cheio { width: 100%; height: 56px; }

.sem-topo { padding-top: 0; }
.dupla.ao-topo { align-items: start; }
.foto-media { height: clamp(280px, 32vw, 420px); }

.iso-selo svg { margin: 0 auto; }
.iso-selo .iso-quem { font-size: 10px; color: var(--claro-2); }

.form-caixa h2 { font-size: 24px; }
.form-caixa .form-sub { font-size: 14.5px; color: var(--tinta-fraca); margin-top: 6px; }