/* Unipeças — estilos base compartilhados entre as 6 páginas.
   Extraído dos blocos <style> idênticos de cada página (sem alteração visual). */

html { scroll-behavior: smooth; }
body { background: #FFFFFF; }

.blueprint-grid {
  background-image:
    linear-gradient(#0F12160d 1px, transparent 1px),
    linear-gradient(90deg, #0F12160d 1px, transparent 1px);
  background-size: 32px 32px;
}
.blueprint-grid-dark {
  background-image:
    linear-gradient(#FFFFFF14 1px, transparent 1px),
    linear-gradient(90deg, #FFFFFF14 1px, transparent 1px);
  background-size: 32px 32px;
}

/* .reveal fica visível por padrão (sem JS). Só quando <html class="js"> está
   presente (adicionada por um <script> inline no <head>) é que o conteúdo é
   ocultado até entrar na viewport, evitando depender de JavaScript para exibir
   o conteúdo. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

.photo-slot {
  background: linear-gradient(180deg, #E7E8EA, #DADCDF);
  border-top: 3px solid #E14E22;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.photo-slot .slot-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #4A5568;
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }

input:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid #E14E22;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   V2 — blocos editoriais da Home
   Escritos em CSS próprio (e não em utilitários Tailwind) porque o build
   local é gerado a partir das classes já usadas; classes novas exigiriam
   recompilar tailwind-build.css. Nada aqui altera a V1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SETORES ATENDIDOS — mesma informação, mais hierarquia e menos altura morta.
   Uma única linha laranja no topo da grade (e não uma por célula), nome em
   tipografia display, e duas células em grafite para dar composição à faixa.
   -------------------------------------------------------------------------- */
.setores-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(15,18,22,.2);
  border: 2px solid rgba(15,18,22,.2);
  border-top: 3px solid #E14E22;
}
.setor { background: #FFFFFF; padding: 18px 18px 20px; display: flex; align-items: center; }
.setor p {
  margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.18rem; line-height: 1.14; letter-spacing: .005em; color: #0F1216;
}
.setor-alt { background: #0F1216; }
.setor-alt p { color: #FFFFFF; }
@media (min-width: 640px) { .setores-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .setores-grid { grid-template-columns: repeat(6, 1fr); }
  .setor { padding: 22px 18px 24px; min-height: 96px; align-items: flex-end; }
  .setor p { font-size: 1.26rem; }
}

/* Pilares operacionais: com os quatro cards simétricos, o rótulo mono precisa
   travar no rodapé — senão ele flutua na altura do parágrafo de cada card. */
.pilar { display: flex; flex-direction: column; }
.pilar .pilar-tag { margin-top: auto; padding-top: 6px; }

/* --------------------------------------------------------------------------
   Ritmo vertical da Home V2.
   O tailwind-build.css é gerado a partir das classes já usadas nas 6 páginas,
   e várias variações de padding que este ritmo pede (py-6, lg:py-16, lg:py-20,
   pt-12/pb-12) simplesmente não existem lá. Em vez de recompilar o build por
   causa de espaçamento, o ritmo fica declarado aqui, explícito e legível.
   -------------------------------------------------------------------------- */
.sec-y     { padding-top: 44px; padding-bottom: 44px; }
.sec-y-sm  { padding-top: 38px; padding-bottom: 38px; }
.sec-y-xs  { padding-top: 22px; padding-bottom: 22px; }
@media (min-width: 1024px) {
  /* Na junção entre duas seções de tom diferente o filete e a troca de fundo
     já fazem a separação — não é preciso somar 160 px de respiro. */
  .sec-y    { padding-top: 72px; padding-bottom: 72px; }
  .sec-y-sm { padding-top: 44px; padding-bottom: 52px; }
  .sec-y-xs { padding-top: 22px; padding-bottom: 22px; }
}

/* Rótulo técnico sobreposto a uma mídia. Discreto, sempre em mono. */
.media-tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(15,18,22,.78);
  border-top: 2px solid #E14E22;
  padding: 6px 12px;
  max-width: calc(100% - 16px);
}

/* --------------------------------------------------------------------------
   OPERAÇÃO — fotografia real da Unipeças, sem tratamento gráfico.
   Fica no fim da seção "Modelo operacional", como segundo nível da mesma
   ideia: a foto é prova do pilar 02.
   -------------------------------------------------------------------------- */
.op-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: rgba(15,18,22,.2);
  border: 2px solid rgba(15,18,22,.2);
  border-top: 0;
}
.op-media { position: relative; overflow: hidden; background: #E7E8EA; aspect-ratio: 16 / 9; }
.op-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 34% 46%; }
.op-panel {
  background: #0F1216; color: #FFFFFF;
  padding: 26px 24px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.op-panel .op-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #E14E22; display: flex; align-items: center; gap: 9px;
}
.op-panel .op-eyebrow::before { content: ""; width: 14px; height: 3px; background: #E14E22; flex: none; }
.op-panel h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.14; margin: 0; }
.op-panel .op-caption { font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.6; color: rgba(255,255,255,.55); margin: 0; }
/* Tablet: em coluna única o 16:9 da foto institucional custa 395 px. Em 2:1
   ela continua sendo a maior imagem da página sem dominar a rolagem. */
@media (min-width: 640px) and (max-width: 1023px) {
  .op-media { aspect-ratio: 2 / 1; }
}
@media (min-width: 1024px) {
  .op-grid { grid-template-columns: 8fr 4fr; }
  .op-panel { padding: 32px 30px; }
  .op-panel h3 { font-size: 1.72rem; }
}

/* --------------------------------------------------------------------------
   APLICAÇÕES INDUSTRIAIS — composição editorial única, fundo grafite.
   Quatro células numa só grade de 12 colunas, unidas por filete de 1px:
   vídeo (8) + foto vertical (4) na primeira faixa, foto larga (5) + texto (7)
   na segunda. O texto vive dentro da composição, não acima dela.
   -------------------------------------------------------------------------- */
.apl-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px 24px; margin-bottom: 16px;
}
.apl-nota {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; color: rgba(255,255,255,.55);
}
.apl-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16);
}
.apl-cell { position: relative; overflow: hidden; background: #0B0D10; }
.apl-cell img, .apl-cell video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* O poster fica em fluxo (é ele que ocupa a célula); o vídeo é sobreposto. */
.apl-video .apl-video-poster { position: relative; z-index: 0; }
.apl-video video {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; transition: opacity .45s ease;
}
.apl-video video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .apl-video video { transition: none; } }
.apl-video  { aspect-ratio: 16 / 9; }
.apl-foto-a { aspect-ratio: 4 / 5; }
.apl-foto-b { aspect-ratio: 2.27 / 1; }
.apl-texto {
  background: #14181E; padding: 20px 20px;
  display: flex; flex-direction: column; justify-content: center; gap: 11px;
}
.apl-texto h2 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.6rem; line-height: 1.1; margin: 0; color: #FFFFFF; text-wrap: balance;
}
.apl-texto p { font-size: .89rem; line-height: 1.55; color: rgba(255,255,255,.62); margin: 0; max-width: 46ch; }
.apl-texto a { font-size: .875rem; font-weight: 600; color: #E14E22; text-decoration: none; }
.apl-texto a:hover { color: #FFFFFF; }

/* Tablet: coluna única deixava a foto vertical com quase 900 px de altura e
   a seção com ~1960 px. Em duas colunas, a foto vertical divide a faixa com
   o texto e a seção volta a caber. */
@media (min-width: 640px) and (max-width: 1023px) {
  .apl-grid   { grid-template-columns: repeat(2, 1fr); }
  .apl-video  { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 16 / 9; }
  .apl-foto-a { grid-column: 1 / span 1; grid-row: 2; aspect-ratio: 1 / 1; }
  .apl-texto  { grid-column: 2 / span 1; grid-row: 2; }
  .apl-foto-b { grid-column: 1 / span 2; grid-row: 3; aspect-ratio: 2.6 / 1; }
}

/* Celular: o recorte é vertical por causa do desktop, mas em coluna única
   uma proporção 4/3 mostra o mesmo mecanismo em 80 px a menos de altura. */
@media (max-width: 639px) {
  .apl-foto-a { aspect-ratio: 4 / 3; }
  .op-panel { padding: 22px 20px; }
}

@media (min-width: 1024px) {
  .apl-grid { grid-template-columns: repeat(12, 1fr); }
  .apl-video  { grid-column: 1 / span 8; aspect-ratio: 16 / 9; }
  .apl-foto-a { grid-column: 9 / span 4; aspect-ratio: auto; }
  .apl-foto-b { grid-column: 1 / span 7; aspect-ratio: auto; min-height: 190px; }
  .apl-texto  { grid-column: 8 / span 5; padding: 22px 26px; }
  .apl-texto h2 { font-size: 1.85rem; }
}

/* Sem JS, com movimento reduzido ou em tela pequena, o <video> nunca recebe
   src (ver main.js): o atributo poster permanece visível e a composição não
   muda de forma nenhuma. Não é preciso CSS adicional para esses casos. */

/* --------------------------------------------------------------------------
   CORRENTES DE ENGENHARIA — faixa de segmentos.
   Duas colunas rotuladas, separadas por um filete vertical: à esquerda UM
   exemplo de aplicação (fotografia panorâmica + legenda), à direita a tabela
   de segmentos. São os dois rótulos, e não um disclaimer, que impedem a
   leitura de que a foto representa os seis segmentos.
   Estrutura própria: a Home usa mosaico de mídia; aqui são duas colunas de
   naturezas diferentes lado a lado.
   -------------------------------------------------------------------------- */
.eng-seg-y { padding-top: 36px; padding-bottom: 40px; }

.eng-seg { display: grid; grid-template-columns: 1fr; gap: 30px; }
.eng-col { display: flex; flex-direction: column; }

.eng-label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.8);
}
.eng-label::before { content: ""; width: 12px; height: 3px; background: #E14E22; flex: none; }

.eng-foto { margin: 0; }
.eng-foto img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-bottom: 2px solid #E14E22;
}
.eng-foto figcaption { padding-top: 11px; display: flex; flex-direction: column; gap: 3px; }
.eng-foto-titulo {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 1.1rem; line-height: 1.1; color: #FFFFFF;
}
.eng-foto-sub {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .07em; color: rgba(255,255,255,.45);
}

.eng-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 22px;
}
.eng-lista li {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 1.06rem; line-height: 1.2; color: #FFFFFF;
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,.14);
}

/* As duas colunas entram já no tablet: em coluna única a fotografia sozinha
   custava 396 px de altura e a faixa passava de 660 px. */
@media (min-width: 768px) {
  .eng-seg { grid-template-columns: 7fr 5fr; gap: 0; }
  /* O filete vertical é o que separa as duas naturezas de informação. */
  .eng-col-seg { border-left: 1px solid rgba(255,255,255,.16); margin-left: 24px; padding-left: 24px; }
  .eng-foto img { aspect-ratio: 2.2 / 1; }
  .eng-lista { grid-template-columns: 1fr; flex: 1; align-content: space-between; }
  .eng-lista li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
}

@media (min-width: 1024px) {
  .eng-seg-y { padding-top: 44px; padding-bottom: 48px; }
  .eng-col-seg { margin-left: 36px; padding-left: 36px; }
  .eng-foto img { aspect-ratio: 2.6 / 1; }
  .eng-lista li { font-size: 1.14rem; padding: 12px 0; }
}

/* --------------------------------------------------------------------------
   CORRENTES DE ROLO — tira de aplicações.
   Três fotografias do mesmo componente em escalas diferentes (peça, conjunto,
   instalação), cada uma rotulada pela função mecânica visível. Os setores
   ficam numa linha separada, com rótulo próprio: assim três funções nunca
   são lidas como representação dos seis setores.
   Terceira solução do sistema — nem o mosaico da Home, nem as duas colunas
   de Correntes de Engenharia.
   -------------------------------------------------------------------------- */
.rolo-y { padding-top: 38px; padding-bottom: 40px; }

.rolo-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 24px; margin-bottom: 16px;
}
.rolo-nota {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em;
  color: rgba(255,255,255,.42); margin: 0;
}

/* Celular: a primeira aplicação ocupa a largura toda e as outras duas dividem
   a linha de baixo. Evita três fotografias grandes empilhadas. */
.rolo-tira {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16);
}
.rolo-item { position: relative; margin: 0; overflow: hidden; background: #0B0D10; aspect-ratio: 1 / 1; }
.rolo-item-a { grid-column: 1 / span 2; aspect-ratio: 16 / 9; }
.rolo-item img { display: block; width: 100%; height: 100%; object-fit: cover; }

.rolo-setores { margin-top: 22px; }
.rolo-setores-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 10px;
}
.rolo-setores ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(255,255,255,.14); border-top: 2px solid #E14E22;
}
.rolo-setores li {
  background: #0F1216; padding: 11px 12px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: .98rem; line-height: 1.18; color: rgba(255,255,255,.92);
}

@media (min-width: 640px) {
  .rolo-setores ul { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .rolo-tira { grid-template-columns: repeat(3, 1fr); }
  .rolo-item, .rolo-item-a { aspect-ratio: 3 / 2; }
  .rolo-item-a { grid-column: auto; }
}
@media (min-width: 1024px) {
  .rolo-y { padding-top: 44px; padding-bottom: 50px; }
  .rolo-setores ul { grid-template-columns: repeat(6, 1fr); }
  .rolo-setores li { padding: 13px 14px; font-size: 1.02rem; }
}

/* --------------------------------------------------------------------------
   RODAS DENTADAS — quarta solução do sistema.
   Aqui a fotografia de aplicação não forma faixa editorial: ela entra como
   primeira célula da própria tabela de especificação, tratada como referência
   técnica ao lado dos dados. É a leitura certa para a página mais orientada a
   produto do site — a imagem contextualiza sem disputar espaço com as rodas
   reais, que continuam sozinhas na área de catálogo.
   -------------------------------------------------------------------------- */
.rd-spec {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.15);
}
.rd-spec-foto { position: relative; margin: 0; overflow: hidden; background: #0B0D10; aspect-ratio: 16 / 9; }
.rd-spec-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Faixa de segmentos: tipográfica e curta. É ela que quebra a cauda clara. */
.rd-set-y { padding-top: 30px; padding-bottom: 32px; }
.rd-set-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 20px; margin-bottom: 14px;
}
.rd-set-nota {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.42); margin: 0;
}
.rd-set {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px 0;
  border-top: 2px solid #E14E22;
}
.rd-set li {
  padding: 12px 0;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 1rem; line-height: 1.18; color: rgba(255,255,255,.92);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}

@media (min-width: 640px) {
  .rd-set { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .rd-spec { grid-template-columns: repeat(2, 1fr); }
  .rd-spec-foto { aspect-ratio: auto; min-height: 300px; }
}
/* No tablet a célula esticava até 439 px e a fotografia ganhava presença
   demais frente aos cards de produto. Limitar a 380 px compacta a linha e
   reduz o espaço morto na célula de dados vizinha, sem deixar vão. */
@media (min-width: 768px) and (max-width: 1023px) {
  .rd-spec-foto img { height: 380px; }
}
@media (min-width: 1024px) {
  .rd-set-y { padding-top: 40px; padding-bottom: 44px; }
  /* A fotografia fica um pouco mais estreita que as três colunas de dados:
     é referência, não protagonista. */
  .rd-spec { grid-template-columns: 0.82fr 1fr 1fr 1fr; }
  .rd-spec-foto { min-height: 340px; }
  .rd-set { grid-template-columns: repeat(6, 1fr); }
  .rd-set li { font-size: 1.04rem; padding: 13px 0; }
}

/* --------------------------------------------------------------------------
   SOBRE — página institucional.
   Característica própria dentro do sistema V2: fotografia documental real da
   Unipeças, sem gradação. Onde as páginas de produto usam acervo tratado em
   grafite, aqui as imagens aparecem como foram feitas. As legendas descrevem
   apenas o que está no quadro.
   -------------------------------------------------------------------------- */
.sobre-foto { position: relative; margin: 0; overflow: hidden; background: #E7E8EA; }
.sobre-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sobre-foto figcaption { max-width: calc(100% - 12px); }

/* --- Estrutura e atendimento: fotografia âncora + números --- */
.sobre-estrutura {
  display: grid; grid-template-columns: 1fr; gap: 26px;
}
.sobre-foto-a { aspect-ratio: 4 / 3; border-top: 3px solid #E14E22; }
.sobre-painel { display: flex; flex-direction: column; justify-content: center; }
.sobre-frase {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 1.5rem; line-height: 1.18; color: #0F1216; margin: 0 0 26px; max-width: 26ch;
}
.sobre-numeros { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: rgba(15,18,22,.18); border-top: 2px solid #E14E22; }
.sobre-numeros li { background: #F1F2F4; padding: 14px 0 16px; display: flex;
  align-items: baseline; gap: 14px; }
.sobre-numeros .n {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 2.4rem; line-height: 1; color: #0F1216; min-width: 3.2ch;
}
.sobre-numeros .n i { font-style: normal; font-size: .55em; vertical-align: super; }
.sobre-numeros .r {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: #4A5568;
}

/* --- Como operamos: sequência editorial + fotografia --- */
.sobre-operamos { display: grid; grid-template-columns: 1fr; gap: 26px; }
.sobre-foto-b { aspect-ratio: 4 / 3; border-top: 3px solid #E14E22; }
.sobre-modos { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: rgba(15,18,22,.18);
  border-top: 1px solid rgba(15,18,22,.18); border-bottom: 1px solid rgba(15,18,22,.18); }
.sobre-modos li { background: #FFFFFF; padding: 16px 0; display: grid;
  grid-template-columns: 46px 1fr; gap: 0 8px; align-items: start; }
.sobre-modos .n {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 1.5rem; line-height: 1; color: #E14E22; padding-top: 2px;
}
.sobre-modos h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.2rem; line-height: 1.15; margin: 0 0 5px; color: #0F1216; }
.sobre-modos p { font-size: .875rem; line-height: 1.58; color: #4A5568; margin: 0; max-width: 68ch; }

/* --- Apoio técnico: declaração + fotografia menor --- */
.sobre-apoio { display: grid; grid-template-columns: 1fr; gap: 26px; }
.sobre-apoio-frase {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1.55rem; line-height: 1.25; margin: 0; color: #FFFFFF;
}
.sobre-foto-c { aspect-ratio: 4 / 3; border-top: 3px solid #E14E22; }

@media (min-width: 768px) {
  .sobre-estrutura { grid-template-columns: 5fr 7fr; gap: 30px; align-items: center; }
  .sobre-foto-a { aspect-ratio: 0.90; }
  .sobre-operamos { grid-template-columns: 4fr 8fr; gap: 30px; align-items: start; }
  .sobre-foto-b { aspect-ratio: 0.80; }
  .sobre-apoio { grid-template-columns: 8fr 4fr; gap: 30px; align-items: center; }
  .sobre-foto-c { aspect-ratio: 0.85; }
  .sobre-modos li { grid-template-columns: 54px 1fr; padding: 18px 0; }
}
@media (min-width: 1024px) {
  .sobre-estrutura { gap: 40px; }
  .sobre-operamos { gap: 40px; }
  .sobre-apoio { grid-template-columns: 8fr 3fr; gap: 40px; }
  .sobre-frase { font-size: 1.72rem; }
  .sobre-apoio-frase { font-size: 1.95rem; }
  .sobre-numeros .n { font-size: 2.7rem; }
  .sobre-modos h3 { font-size: 1.26rem; }
}

/* --------------------------------------------------------------------------
   CONTATO — o telefone repetido no bloco "Onde estamos" é um canal de contato
   e tinha 14 px de altura de toque. Ganha área clicável sem mudar de aparência.
   -------------------------------------------------------------------------- */
.alvo-toque { display: inline-block; padding: 9px 0; margin: -9px 0; }

/* "Onde estamos" segue direto os cards de canal — não precisa de respiro no
   topo. Declarado aqui para vencer .sec-y-sm, que é carregado depois do build
   do Tailwind. */
.sec-y-sm.sem-topo { padding-top: 0; }

/* ============================================================================
   HERO — fotografia de aplicação como atmosfera (index.html apenas). Aprovada.
   iStock-2256314781.jpg, corrigida de dominante azul/ciano e desaturada
   seletivamente; scrim grafite por cima; grid técnico por cima do scrim.
   ============================================================================ */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  z-index: 0;
}
.hero-photo-mobile { object-position: 60% 30%; }
.hero-photo-desktop { object-position: 76% 40%; }

@media (min-width: 900px) {
  .hero-photo-desktop { display: block; }
}
@media (max-width: 899px) {
  .hero-photo-mobile { display: block; }
}
/* Faixa 900–1279px: mesma foto, mesmo tratamento, mesma intensidade — só a
   janela do object-position desloca discretamente para a direita, afastando
   a massa da roda/corrente do botão "Baixar catálogo (PDF)". Em 1440 (>=1280)
   a posição original (76% 40%), já aprovada, permanece intocada. */
@media (min-width: 900px) and (max-width: 1279px) {
  .hero-photo-desktop { object-position: 10% 40%; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg,
    #0B0D10 0%,
    #0B0D10E0 30%,
    #0B0D10A8 52%,
    #0B0D1070 75%,
    #0B0D1052 100%);
}
@media (max-width: 899px) {
  .hero-scrim {
    background: linear-gradient(175deg,
      #0B0D10E8 0%,
      #0B0D10D8 45%,
      #0B0D10A0 72%,
      #0B0D1080 100%);
  }
}

.hero-grid-over-photo { z-index: 1; }
