/* ============================================================
   Pró Monitor — Design tokens (extraídos do Figma)
   ============================================================ */
:root {
  --black: #141414;
  --white: #fefefe;
  --blue: #1e40af;
  --orange: #f97316;
  --orange-600: #d46213;
  --light: #efefef;
  --logo-gray: #7f7a7a;

  --h1-size: 64px; --h1-lh: 72px;

  --font-primary: 'Zalando Sans SemiExpanded', 'Space Grotesk', sans-serif;

  /* Desktop type scale */
  --h2-size: 56px; --h2-lh: 64px;
  --h3-size: 48px; --h3-lh: 56px;
  --h4-size: 40px; --h4-lh: 48px;
  --h6-size: 24px; --h6-lh: 32px;
  --body-lg: 20px; --body-lg-lh: 32px;
  --body-md: 18px; --body-md-lh: 28px;
  --body-base: 16px; --body-base-lh: 24px;
  --body-sm: 14px; --body-sm-lh: 20px;
  --body-xs: 12px; --body-xs-lh: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-primary);
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Largura travada no celular: o iOS ignora o overflow-x: hidden do
   body para o arraste com o dedo, e qualquer coisa que passe da
   borda (ex.: elementos entrando de lado nas animações) deixava a
   página "sambar" para os lados. O clip corta sem criar um container
   de rolagem — não quebra position: sticky nem o ScrollTrigger. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* Barra de rolagem laranja */
html {
  scrollbar-color: var(--orange) rgba(20, 20, 20, 0.08);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(20, 20, 20, 0.08); }
::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--orange-600); }

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }

/* Cortina preta de transição entre páginas — cobre tudo e sobe
   (translateY) ao abrir uma página; desce e cobre antes de sair
   para outra (ver js/transition.js). */
.page-transition {
  position: fixed;
  /* Sobra acima/abaixo da tela para cobrir as faixas atrás das barras
     do Safari no iPhone (ver .equip-modal-backdrop). */
  inset: -200px 0;
  z-index: 9999;
  background: #000; /* preto 100% */
  will-change: transform;
}

/* ============================================================
   Reveal base states (animated in by GSAP, js/main.js)
   ============================================================ */
.reveal-nav,
.reveal-hero,
.reveal-up,
.reveal-intro,
.topic {
  opacity: 0;
}

/* Título e descrição do hero: ficam invisíveis até o JS quebrar
   o texto em <span class="char"> e animar letra por letra. */
.hero-title,
.hero-desc {
  visibility: hidden;
}
.word {
  display: inline-block;
  white-space: nowrap;
}
.char {
  display: inline-block;
}
.char--accent {
  color: var(--blue);
}

/* ============================================================
   HERO — Section 1
   ============================================================ */
.hero {
  position: relative;
  /* Sempre uma tela inteira. svh = altura visível no celular com a
     barra do navegador aberta (não "pula" quando ela some). */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--black);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  /* "Zoom" de sobra pro parallax — o mínimo pra cobrir o deslocamento
     do parallax (js/main.js) sem abrir fresta. Mantém o enquadramento
     original (homem + câmera) em vez de aumentar o zoom da foto. */
  height: 122%;
  top: -13%;
  object-fit: cover;
  object-position: 50% 42%;
  will-change: transform;
}

/* Gradient preto por cima da imagem para os textos ficarem legíveis */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(182deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.92) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 40%);
}

/* Navbar — fixa na tela inteira; reaparece quando o usuário sobe o
   scroll (ver toggleNavOnScroll em js/main.js). Centralização e o
   esconder/mostrar são feitos via GSAP (xPercent/yPercent) para não
   conflitar com transform em CSS. */
/* Cabeçalho — fica no topo da página e vai embora junto com o
   conteúdo ao rolar (não acompanha o scroll). Centralizado via GSAP
   xPercent para a animação de entrada (yPercent) não brigar com CSS. */
.navbar {
  position: absolute;
  /* env(): com viewport-fit=cover o iPhone desenha a página atrás da
     barra de status; o menu desce o tamanho dela (0 no desktop). */
  top: calc(19px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1300px;
  width: calc(100% - 48px);
  padding: 8px 0;
}

/* Menu fixo ao rolar para cima (js/common.js): vira uma barra preta de
   largura total presa ao topo, que desce ao rolar para cima e sobe ao
   rolar para baixo.
   No estado fixo o próprio .navbar ocupa 100% da largura e tem o fundo
   preto de verdade (não só num pseudo-elemento): é isso que o Safari
   do iPhone usa para pintar a área do relógio/status bar — sem isso o
   site aparecia por cima do menu. O ::before vira uma extensão preta
   acima da barra, cobrindo qualquer fresta no topo da tela. O conteúdo
   continua alinhado à grade de 1300px pelo padding lateral. */
.navbar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 160px;
  background: var(--black);
  opacity: 0;
  pointer-events: none;
}
body .navbar.is-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: none;
  padding: 12px max(24px, calc((100% - 1300px) / 2));
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background-color: var(--black);
  border-bottom: 1px solid rgba(254, 254, 254, 0.08);
}
.navbar.is-fixed::before { opacity: 1; }

.nav-logo { display: flex; align-items: center; height: 42px; }
.nav-logo img { height: 36px; width: auto; }
.nav-logo .nav-logo-color { height: 33px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-link {
  padding: 4px 8px;
  white-space: nowrap;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--white);
  border-radius: 4px;
  transition: color .2s ease, opacity .2s ease, background .2s ease;
}
.nav-link:hover { opacity: 0.7; }
.nav-link--mobile { display: none; }

/* Página atual: bloco branco atrás do item do menu */
.nav-link.is-active {
  background: var(--white);
  color: var(--black);
}
.nav-link.is-active:hover { opacity: 1; }

/* ---------- Submenus (Equipamentos / Tecnologia) ----------
   Desktop: abre no hover (ou foco do teclado); clicar no texto leva à
   página, clicar num tópico leva direto à seção. Celular: a setinha
   ao lado do item expande os tópicos dentro do menu. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > .nav-link { display: inline-flex; align-items: center; gap: 6px; }
.nav-chev {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.nav-sub-toggle { display: none; }
.nav-sub {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 60;
  display: flex;
  gap: 22px;
  padding: 16px;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  /* fecha com um pequeno atraso: dá tempo de levar o mouse até o painel */
  transition: opacity .2s ease .12s, transform .25s ease .12s, visibility 0s linear .37s;
}
/* "ponte" invisível entre o item e o painel para o hover não cair */
.nav-sub::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
}
.nav-sub-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nav-sub a,
.nav-sub-head {
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  color: rgba(254, 254, 254, 0.7);
  transition: color .2s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
/* Títulos das colunas (só rótulo, sem link), em caixa alta */
.nav-sub .nav-sub-head { color: #fefefe; text-transform: uppercase; cursor: default; }
.nav-sub a:hover,
.nav-sub a:focus-visible { color: var(--orange); transform: translateX(3px); outline: none; }
@media (min-width: 861px) {
  .nav-item:hover .nav-sub,
  .nav-item:focus-within .nav-sub,
  .nav-item.is-open .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .2s ease, transform .25s ease, visibility 0s;
  }
  .nav-item:hover .nav-chev,
  .nav-item:focus-within .nav-chev { transform: rotate(180deg); }
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 4px;
  background: var(--orange);
  color: var(--white);
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  white-space: nowrap;
  transition: background .25s ease, transform .25s ease;
}
.nav-cta:hover { background: var(--orange-600); transform: translateY(-2px); }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  z-index: 11;
}
.nav-burger span {
  width: 22px; height: 2px; background: var(--white); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 5;
  max-width: 1300px;
  width: calc(100% - 48px);
  margin: auto auto 0;
  padding-bottom: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.hero-badge {
  border: 1px solid var(--white);
  color: var(--white);
  opacity: 0.7;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  padding: 8px 16px;
  border-radius: 4px;
  white-space: nowrap;
}

.hero-title {
  color: var(--white);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.13;
  letter-spacing: -0.05em;
}
.hero-title-line { display: block; }
.hero-title-line em { color: var(--blue); font-style: normal; }

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
}

.hero-desc {
  color: rgba(254,254,254,0.7);
  font-weight: 300;
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  /* Evita "viúva" (palavra sozinha na última linha) — o navegador
     recalcula a quebra de linha do parágrafo inteiro. */
  text-wrap: pretty;
}
.hero-desc strong { font-weight: 700; }

.hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Botões — padrão do Figma: cantos de 4px e a seta numa caixinha
   quadrada de 22px (preta nos botões laranja, laranja no botão preto). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  white-space: nowrap;
  transition: transform .25s ease, background .25s ease, opacity .25s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--orange);
  color: var(--white);
}
.btn-primary:hover { background: var(--orange-600); }

.btn-outline {
  padding: 8px 24px;
  border: 1px solid var(--white);
  color: var(--white);
  font-weight: 300;
  opacity: 0.7;
}
.btn-outline:hover { opacity: 1; }

/* Botão grande dos formulários: texto e seta nas pontas. */
.btn-lg {
  height: 46px;
  min-width: 237px;
  padding: 12px 40px;
  justify-content: space-between;
  gap: 24px;
}

.btn-arrow,
.btn-arrow-black,
.btn-arrow-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--black);
}
.btn-arrow-orange { background: var(--orange); }
.btn-arrow img,
.btn-arrow-black img,
.btn-arrow-orange img {
  width: 10px; height: 10px;
  transform: rotate(-41deg);
  filter: brightness(0) invert(1);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(254,254,254,0.5);
  border-radius: 14px;
  z-index: 5;
}
.scroll-cue span {
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  background: var(--white);
  border-radius: 50%;
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ============================================================
   SECTION 2 — Logos
   ============================================================ */
.logos-section {
  background: #e6e6e6;
  padding: 120px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.logos-intro {
  max-width: 673px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.logos-intro h2 {
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, var(--h3-size));
  line-height: 1.15;
  color: #000;
  text-wrap: balance;
}
.logos-intro h2 strong { font-weight: 700; }

.logos-intro p {
  font-size: var(--body-base);
  line-height: var(--body-base-lh);
  color: #000;
  text-wrap: pretty;
}
.logos-intro p strong { font-weight: 700; }

/* Faixa infinita de logos. Pensada para não falhar no Safari do iPhone:
   - o esmaecido das bordas é feito com degradês por cima (::before /
     ::after) em vez de mask-image, que no iOS some com o conteúdo
     animado por baixo;
   - cada grupo de logos anima sozinho (translateX -100% do próprio
     grupo) em vez de mover a faixa inteira — camadas menores, que o
     iOS consegue desenhar sem virar um bloco em branco piscando;
   - a pausa no hover só existe onde há mouse (no toque ela "grudava"
     e travava a faixa). */
.logos-marquee {
  position: relative;
  width: 100%;
  max-width: 1300px;
  overflow: hidden;
}
.logos-marquee::before,
.logos-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 8%;
  pointer-events: none;
}
.logos-marquee::before { left: 0; background: linear-gradient(90deg, #e6e6e6, rgba(230,230,230,0)); }
.logos-marquee::after { right: 0; background: linear-gradient(270deg, #e6e6e6, rgba(230,230,230,0)); }

.logos-track {
  display: flex;
  width: max-content;
}

.logos-set {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 80px;
  padding-right: 80px;
  animation: marquee 32s linear infinite;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@media (hover: hover) {
  .logos-marquee:hover .logos-set { animation-play-state: paused; }
}

.logo-item {
  flex-shrink: 0;
  height: 50px;
  width: auto;
  object-fit: contain;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

/* ============================================================
   SECTION 3 — Processo (scrollytelling)
   ============================================================ */
.process-section {
  position: relative;
  background: var(--black);
}

.process-pin {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.process-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Imagem final já exportada do Figma (foto + degradê preto compostos).
   Usada como está, sem recriar o gradiente em CSS. */
.process-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Reforço de contraste opcional — só ganha um gradiente em telas
   menores (ver media queries), onde o texto passa a cobrir a foto toda. */
.process-bg-overlay {
  position: absolute;
  inset: 0;
}

.process-content {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  width: calc(100% - 48px);
  margin: 0 auto;
  padding: 64px 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
  padding-left: 54.7%;
}

.process-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--white);
  max-width: 572px;
}
.process-eyebrow {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(254,254,254,0.7);
}
.process-title {
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, var(--h4-size));
  line-height: 1.2;
  text-wrap: balance;
}

.process-body {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.process-line {
  position: relative;
  width: 16px;
  align-self: stretch;
  flex-shrink: 0;
  margin-top: 6px;
}
.line-track, .line-fill {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
}
.line-track { background: rgba(254,254,254,0.25); }
.line-fill {
  background: var(--orange);
  transform-origin: top center;
  transform: translateX(-50%) scaleY(0);
  height: 100%;
}
.process-line .dot {
  position: absolute;
  left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(254,254,254,0.3);
  transform: translate(-50%, -50%) scale(0.7);
  transition: background .3s ease;
}

.process-topics {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.topic {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 380px;
}
.topic-title {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: var(--white);
}
.topic-num { color: var(--orange); }
.process-title em { color: var(--orange); font-style: normal; }
.topic-desc {
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: rgba(254,254,254,0.7);
  text-wrap: pretty;
}

.process-content .btn-primary { margin-top: 8px; }

/* ============================================================
   SECTION 4 — Radares (stack de cards travando no scroll)
   ============================================================ */
.radars-section {
  background: #e6e6e6;
  padding: 120px 24px 80px;
}

.radars-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 64px;
  flex-wrap: wrap;
}

.radars-header-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 646px;
}

.badge-outline {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--black);
  opacity: 0.7;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  white-space: nowrap;
}

.radars-title {
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.12;
  color: var(--black);
  text-wrap: balance;
}

.radars-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 410px;
}
.radars-header-right p {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--black);
  text-wrap: pretty;
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--black);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  white-space: nowrap;
  transition: opacity .25s ease, transform .25s ease;
}
.btn-dark:hover { opacity: 0.85; transform: translateY(-2px); }

/* --- Lista de linhas em zigue-zague: foto + texto lado a lado, cada
   uma dentro de um cartão preto. Sem sobreposição nem mudança de cor
   de fundo — o "premium" vem da entrada suave (fade + leve escala),
   do zoom lento da foto ao entrar no viewport, e do hover com leve
   elevação do cartão + brilho na borda. --- */
.radars-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  /* Sem padding aqui (nem lateral nem embaixo) — já vem do padding
     de .radars-section, igual ao do cabeçalho (.radars-header), pra
     ficarem com as bordas exatamente alinhadas e não dobrar o
     espaço no fim da seção. */
}

.radar-row {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 300px;
  background: var(--black);
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.radar-row--reverse { flex-direction: row-reverse; }

.radar-row:hover {
  transform: translateY(-6px);
}

/* brilho sutil que acompanha a borda no hover — o toque "premium" */
.radar-row::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(249,115,22,0.55), rgba(254,254,254,0) 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 2;
}
.radar-row:hover::after { opacity: 1; }

.radar-row-img {
  position: relative;
  flex: 0 0 44%;
  overflow: hidden;
}
.radar-row-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.radar-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  padding: 56px;
}
.radar-row-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.radar-row-text h3 {
  font-weight: 500;
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  color: var(--white);
}
.radar-row-text p {
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: rgba(254,254,254,0.7);
  max-width: 420px;
  text-wrap: pretty;
}

/* ============================================================
   SECTION 5 — Por que a Pró Monitor
   Coluna de texto + lista de 6 linhas (numeradas), separadas por
   fios finos. Cada linha entra com sua própria animação, em
   ordem, ao rolar até a seção.
   ============================================================ */
.why-section {
  background: #e6e6e6;
  padding: 120px 24px;
}

.why-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 80px;
}

.why-left {
  flex: 1 1 460px;
  max-width: 524px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.why-heading {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.why-heading h2 {
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, var(--h4-size));
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: #000;
  text-wrap: balance;
}
.why-heading p {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--black);
  text-wrap: pretty;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  white-space: nowrap;
  transition: opacity .25s ease, transform .25s ease;
}
.btn-cta:hover { opacity: 0.85; transform: translateY(-2px); }

.why-list {
  flex: 1 1 460px;
  max-width: 609px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(30, 64, 175, 0.3);
}

.why-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 8px;
  border-bottom: 1px solid rgba(30, 64, 175, 0.3);
  opacity: 0;
}

.why-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--body-lg);
  line-height: 1;
}

.why-row-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.why-row-text h3 {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: var(--black);
}
.why-row-text p {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(20, 20, 20, 0.7);
  text-wrap: pretty;
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.site-footer {
  background: var(--black);
  padding: 71px 0 calc(27px + env(safe-area-inset-bottom, 0px));
}

.footer-inner {
  max-width: 1348px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding-bottom: 80px;
}

.footer-logo { width: 298px; }
.footer-logo img { height: 33px; width: auto; }

.footer-col, .footer-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-col h2 {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: var(--white);
}
.footer-contact { width: 298px; }
.footer-cta { width: 260px; }
.footer-cta h2 {
  font-weight: 400;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: var(--white);
}
.footer-cta .btn { align-self: flex-start; }

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}
.footer-list a {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(254, 254, 254, 0.7);
  transition: color .2s ease;
}
.footer-list a:hover { color: var(--white); }

/* Itens de contato com ícone laranja + rótulo (50%) + valor (70%). */
.contact-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.contact-item-icon {
  flex: 0 0 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-item-icon img { max-width: 20px; max-height: 19px; width: auto; height: auto; }
.contact-item-text {
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: rgba(254, 254, 254, 0.7);
}
.contact-item-text small {
  font-size: var(--body-xs);
  color: rgba(254, 254, 254, 0.5);
}
.contact-item-text a { transition: color .2s ease; }
.contact-item-text a:hover { color: var(--white); }
.contact-item-text .is-email { font-size: var(--body-sm); line-height: var(--body-sm-lh); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: rgba(254, 254, 254, 0.7);
}
.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-bottom-links a:hover { color: var(--white); }
.footer-bottom-links span {
  padding-left: 8px;
  border-left: 1px solid rgba(254, 254, 254, 0.3);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .nav-links { gap: 0; }
  .nav-link { padding: 4px 6px; font-size: 13px; }
  .process-content { padding-left: 32px; }
  /* Abaixo do desktop o texto passa a ocupar a largura toda por cima
     da foto — mantém o rosto ancorado à esquerda (object-position)
     e soma um reforço de preto extra só para a legibilidade do texto. */
  .process-bg img { object-position: left center; }
  .process-bg-overlay {
    background:
      linear-gradient(0deg, var(--black) 10%, rgba(20,20,20,0.2) 45%),
      linear-gradient(180deg, rgba(20,20,20,0.7) 0%, rgba(20,20,20,0.15) 40%);
  }
}

@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--white);
    border-radius: 4px;
    padding: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  .nav-link { padding: 10px 12px; color: var(--black); }
  .nav-link:hover { opacity: 1; color: var(--blue); }
  .nav-link--mobile { display: block; }
  /* Submenus no celular: setinha ao lado do item expande os tópicos */
  /* Rola se precisar, mas sem barra de rolagem visível */
  .nav-links {
    max-height: calc(100svh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-item { flex-wrap: wrap; }
  .nav-item > .nav-link { flex: 1; }
  .nav-chev { display: none; }
  .nav-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    color: var(--black);
  }
  .nav-sub-toggle svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s ease;
  }
  .nav-item.is-open .nav-sub-toggle svg { transform: rotate(180deg); }
  .nav-sub {
    position: static;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 16px;
    padding: 8px 12px 14px;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-sub::before { display: none; }
  .nav-item.is-open .nav-sub { display: flex; }
  .nav-sub a, .nav-sub-head { font-size: 12px; white-space: normal; color: rgba(20, 20, 20, 0.65); }
  .nav-sub .nav-sub-head { color: var(--black); }
  .nav-sub-head[aria-hidden="true"] { display: none; }
  /* O menu do celular já é branco: o item atual ganha um cinza claro */
  .nav-link.is-active { background: #e6e6e6; color: var(--black); }
  .nav-cta { display: none; }

  .nav-burger { display: flex; }

  /* Na barra fixa (largura total) o dropdown mantém o recuo de 24px */
  .navbar.is-fixed .nav-links { left: 24px; right: 24px; }
  .navbar.nav-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .navbar.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .navbar.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hero no tablet/celular: conteúdo empilhado como no frame
     "Mobile home" do Figma. */
  .hero-content {
    width: calc(100% - 30px);
    padding-bottom: 42px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .hero-left { gap: 8px; max-width: 100%; }
  .hero-right { gap: 16px; max-width: 100%; }
  .hero-badge { font-size: 11px; line-height: 16px; }
  .hero-title { font-size: 32px; line-height: 40px; letter-spacing: 0; }
  .hero-desc { font-size: 14px; line-height: 22px; font-weight: 400; }
  .hero-desc strong { font-weight: 400; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn-cta,
  .hero-actions .btn { font-size: 12px; line-height: 18px; height: 38px; }
  .hero-actions .btn-outline { font-weight: 400; }
  .break-desktop { display: none; }
  .scroll-cue { display: none; }

  .process-body { flex-direction: row; }
  .logos-section { padding: 80px 24px; }
  /* Logos menores no celular: faixa (e camada animada) mais curta */
  .logos-set { gap: 48px; padding-right: 48px; animation-duration: 26s; }
  .logo-item { height: 38px; }

  .radars-header { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 40px; }
  .radars-header-right { max-width: 100%; }

  /* Abaixo de 860px a foto vai para cima e o texto para baixo —
     mais legível que espremer lado a lado numa tela estreita. */
  .radar-row,
  .radar-row--reverse {
    flex-direction: column;
    min-height: 0;
  }
  .radar-row-img { flex: none; height: 260px; }
  .radar-row-body { padding: 32px; gap: 20px; }

  .why-section { padding: 80px 24px; }
  .why-inner { flex-direction: column; gap: 32px; }
  /* flex-basis (os "460px" da versão desktop) vira altura mínima
     quando a direção é coluna — sem isso sobra um vão enorme depois
     do botão. */
  .why-left { flex: 0 0 auto; max-width: 100%; }
  .why-list { flex: 0 0 auto; max-width: 100%; }
  .why-row { padding: 20px 4px; gap: 16px; }

  .site-footer { padding-top: 56px; }
  .footer-top { flex-direction: column; gap: 40px; padding-bottom: 48px; }
  .footer-logo, .footer-contact, .footer-cta { width: auto; }
}

/* Hero no tablet — mesma foto do desktop (versão compactada
   hero-bg-tablet.webp) cobrindo a seção com um zoom leve: a altura do
   hero acompanha a proporção da foto (16:9 + espaço do texto), então
   o corte é pequeno e o overlay só precisa escurecer a base. */
@media (min-width: 561px) and (max-width: 860px) {
  .hero-bg-img {
    height: 112%;
    top: -6%;
    object-fit: cover;
    object-position: 64% 35%;
  }
  .hero-bg-overlay {
    background:
      linear-gradient(180deg, rgba(20,20,20,0) 35%, rgba(20,20,20,0.5) 65%, rgba(20,20,20,0.82) 100%),
      linear-gradient(90deg, rgba(20,20,20,0.25) 0%, rgba(20,20,20,0) 45%);
  }
  /* Selo + título à esquerda; descrição + botões à direita,
     alinhados pela base como no desktop. */
  .hero-content {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
  .hero-left { flex: 0 0 auto; }
  .hero-right { flex: 0 1 340px; }
}

@media (max-width: 560px) {
  /* Hero mobile — frame "Mobile home" do Figma. A foto fica ancorada
     embaixo, um pouco mais alta que a seção (sobra pro parallax), com
     um degradê #141414 subindo da base. Só no celular: no tablet a foto
     e o overlay são os do desktop. */
  .hero-bg-img {
    inset: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 111.2%;
    top: auto;
    object-fit: cover;
    object-position: 82% 100%;
  }
  .hero-bg-overlay {
    background: linear-gradient(196deg, rgba(20,20,20,0) 30%, rgba(20,20,20,0.55) 55%, rgba(20,20,20,0.9) 80%, rgba(20,20,20,0.96) 100%);
  }

  .nav-logo img { height: 28px; }
  .nav-logo .nav-logo-color { height: 26px; }

  .process-title { font-size: 28px; }
  .topic-title { font-size: 20px; }
  .topic-desc { font-size: 16px; }

  /* Reforça o preto sobre a foto para o texto não perder contraste */
  .process-bg-overlay {
    background:
      linear-gradient(0deg, var(--black) 30%, rgba(20,20,20,0.4) 60%),
      linear-gradient(180deg, rgba(20,20,20,0.75) 0%, rgba(20,20,20,0.25) 35%);
  }

  .radars-section { padding: 80px 16px 24px; }
  .radars-stack { gap: 16px; }
  .radar-row { border-radius: 6px; }
  .radar-row-img { height: 220px; }
  .radar-row-body { padding: 24px; gap: 16px; }
  .radar-row-text h3 { font-size: 24px; line-height: 30px; }
  .radar-row-text p { font-size: 14px; line-height: 20px; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   POPUP — Política de Privacidade (todas as páginas; js/common.js)
   ============================================================ */
html.modal-open { overflow: hidden; }

.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: env(safe-area-inset-top, 0px) 24px calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
}
.privacy-modal.is-open { visibility: visible; pointer-events: auto; }

/* Faixa atrás do relógio do iPhone enquanto um popup está aberto: o
   popup começa abaixo dela (padding com env()), e ela cobre o conteúdo
   que rola por ali. A opacidade (--veil) acompanha o fundo escuro no
   JS. Altura 0 fora do iPhone. */
.privacy-modal::before,
.equip-modal::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: env(safe-area-inset-top, 0px);
  background: rgba(20, 20, 20, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: var(--veil, 0);
  pointer-events: none;
}

.privacy-backdrop {
  position: fixed;
  /* Passa 200px do topo e da base da tela: o Safari do iPhone desenha
     o site também atrás da barra de status e da barra de endereço, e
     com inset: 0 essas faixas ficavam descobertas. */
  inset: -200px 0;
  background: rgba(20, 20, 20, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
}

/* overflow: clip (não hidden) para o cabeçalho sticky funcionar contra
   a rolagem do popup; o respiro do topo é margem, não padding do
   contêiner (senão o sticky gruda abaixo do topo). */
.privacy-dialog {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin-top: 40px;
  background: var(--white);
  border-radius: 4px;
  overflow: clip;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
  opacity: 0;
}
.privacy-dialog:focus { outline: none; }

.privacy-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 40px 28px;
  background: var(--black);
  color: var(--white);
}
.privacy-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), #3b82f6 60%, var(--orange));
  transform: scaleX(var(--read, 0));
  transform-origin: left;
}
.privacy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  text-transform: uppercase;
  opacity: 0.7;
}
.privacy-eyebrow::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--orange);
}
.privacy-head h2 {
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, var(--h4-size));
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.privacy-head h2 em { color: var(--orange); font-style: normal; }
.privacy-updated {
  margin-top: 8px;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: rgba(254, 254, 254, 0.6);
}

.privacy-close {
  position: relative;
  flex-shrink: 0;
  width: 37px;
  height: 34px;
  border-radius: 2px;
  background: var(--blue);
  transition: background .25s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.privacy-close:hover { background: var(--orange); transform: rotate(90deg); }
.privacy-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.privacy-close::before,
.privacy-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 3px;
  margin: -1.5px 0 0 -11px;
  background: var(--white);
  transform: rotate(45deg);
}
.privacy-close::after { transform: rotate(-45deg); }

.privacy-body {
  padding: 40px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  color: var(--black);
}
.privacy-body p,
.privacy-body li {
  font-size: var(--body-sm);
  line-height: 22px;
  color: rgba(20, 20, 20, 0.75);
}
.privacy-body a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.privacy-body a:hover { color: var(--orange); }
.privacy-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 32px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.privacy-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.privacy-section h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
  font-size: var(--body-lg);
  line-height: 28px;
  color: var(--black);
}
.privacy-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--blue);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: var(--body-base);
}
.privacy-section > p,
.privacy-section > ul { padding-left: 46px; }
.privacy-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.privacy-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.privacy-list li::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  background: var(--black);
  transform: translateY(-3px);
}
.privacy-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
  padding: 24px;
  background: #e6e6e6;
  border-radius: 4px;
  margin-left: 46px;
}
.privacy-contact dt {
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: rgba(20, 20, 20, 0.55);
}
.privacy-contact dd {
  font-size: var(--body-sm);
  line-height: 20px;
  color: var(--black);
}
.privacy-contact .is-wide { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .privacy-modal { padding: env(safe-area-inset-top, 0px) 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
  .privacy-dialog { margin-top: 56px; }
  .privacy-head { padding: 22px 20px 20px; }
  .privacy-body { padding: 28px 20px 36px; gap: 28px; }
  .privacy-section > p,
  .privacy-section > ul { padding-left: 0; }
  .privacy-contact { margin-left: 0; grid-template-columns: 1fr; }
}

/* ============================================================
   POPUP DE EQUIPAMENTOS ("Ver detalhes" / "Ver Mais") — usado na
   página Equipamentos e nos cards de radares da home (js/common.js)
   ============================================================ */

.equip-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(40px + env(safe-area-inset-top, 0px)) 24px calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
}
.equip-modal.is-open { visibility: visible; pointer-events: auto; }

.equip-modal-backdrop {
  position: fixed;
  /* Passa 200px do topo e da base da tela: o Safari do iPhone desenha
     o site também atrás da barra de status e da barra de endereço, e
     com inset: 0 essas faixas ficavam descobertas. */
  inset: -200px 0;
  background: rgba(20, 20, 20, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
}

.equip-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: auto 0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
  opacity: 0;
}
.equip-modal-dialog:focus { outline: none; }

/* Barra do popup: no desktop só posiciona o X no canto da foto; no
   mobile vira uma barra fixa (sticky) que acompanha a rolagem. */
.modal-bar {
  position: absolute;
  top: 13px;
  right: 17px;
  z-index: 5;
  display: flex;
  align-items: center;
}
.modal-bar-title { display: none; }

.equip-modal-close {
  position: relative;
  flex-shrink: 0;
  width: 37px;
  height: 34px;
  border-radius: 2px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.equip-modal-close:hover { background: var(--orange); transform: rotate(90deg); }
.equip-modal-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.equip-modal-close::before,
.equip-modal-close::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 3px;
  background: var(--white);
  transform: rotate(45deg);
}
.equip-modal-close::after { transform: rotate(-45deg); }

.modal-hero {
  position: relative;
  aspect-ratio: 1000 / 505;
  overflow: hidden;
}
.modal-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%);
  pointer-events: none;
}
.modal-hero h2 {
  position: absolute;
  left: 48px;
  bottom: 22px;
  z-index: 1;
  font-weight: 500;
  font-size: clamp(36px, 6.4vw, 64px);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--white);
}

.modal-body {
  padding: 52px 39px 65px 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  color: var(--black);
}
.modal-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.modal-block h3 {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: var(--black);
}
.modal-block p {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(20, 20, 20, 0.7);
  text-align: justify;
  hyphens: auto;
}
.modal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 12px 4px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  font-weight: 200;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: var(--black);
}
.modal-list strong { font-weight: 500; }
.modal-list li::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  background: var(--black);
  transform: translateY(-3px);
}
.modal-closing {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: var(--black);
}
.modal-body > .btn { align-self: flex-start; }

@media (max-width: 860px) {
  /* O respiro do topo fica na margem do popup (e não no padding do
     contêiner que rola), senão o sticky da barra gruda 56px abaixo
     do topo e o texto rolado aparece por cima dela. */
  .equip-modal { padding: env(safe-area-inset-top, 0px) 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
  /* overflow: clip (e não hidden) para o sticky da barra funcionar
     contra a rolagem do popup, mantendo os cantos recortados. */
  .equip-modal-dialog { margin: 56px 0 0; border-radius: 4px; overflow: clip; }

  .modal-bar {
    position: sticky;
    top: 0;
    right: auto;
    height: 56px;
    margin-bottom: -56px;
    padding: 0 12px 0 20px;
    justify-content: space-between;
    gap: 16px;
    border-radius: 4px 4px 0 0;
    transition: background .35s ease, box-shadow .35s ease;
  }
  .modal-bar.is-stuck {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(20, 20, 20, 0.08), 0 8px 24px rgba(20, 20, 20, 0.08);
  }
  .modal-bar-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: var(--body-base);
    line-height: var(--body-base-lh);
    color: var(--black);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
  }
  .modal-bar.is-stuck .modal-bar-title { opacity: 1; transform: none; }
  .modal-bar .equip-modal-close { margin-left: auto; }
  .modal-hero { aspect-ratio: 4 / 3; }
  .modal-hero h2 { left: 24px; bottom: 16px; }
  .modal-body { padding: 36px 20px 48px; gap: 36px; }
  .modal-block p { text-align: left; hyphens: manual; }
}

/* ============================================================
   Acessibilidade / SEO
   ============================================================ */
/* Texto só para leitores de tela e buscadores (ex.: título completo do
   h1 de Tecnologia, cuja parte visível é a palavra digitada). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* "Pular para o conteúdo": invisível até receber foco pelo teclado */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 4px;
  background: var(--orange);
  color: var(--white);
  font-size: var(--body-sm);
  transform: translateY(-200%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

/* ============================================================
   POPUP — variação "horizontal" (Sinalização Viária): foto com
   título e texto por cima, lista de itens em cartões azuis com
   ícone em caixa branca, fechamento e CTA para o WhatsApp.
   ============================================================ */
.modal-hero--wide::after {
  background: linear-gradient(200deg, rgba(20, 20, 20, 0) 22%, rgba(20, 20, 20, 0.6) 58%, rgba(20, 20, 20, 0.94) 100%);
}
.modal-hero--wide img { object-position: 50% 40%; }
.modal-hero-text {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 46px;
  z-index: 1;
  max-width: 718px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.modal-hero--wide h2 { position: static; }
.modal-hero-text p {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(254, 254, 254, 0.7);
  text-align: justify;
  hyphens: auto;
}

.sign-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sign-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 32px;
  border-radius: 4px;
  background: var(--blue);
  transition: background .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.sign-list li:hover { background: #2348c4; transform: translateX(4px); }
.sign-ico {
  flex-shrink: 0;
  width: 77px;
  height: 78px;
  border-radius: 4px;
  background: #fff;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sign-ico svg {
  width: 46px;
  height: 46px;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.sign-list li:hover .sign-ico svg { transform: scale(1.08); }
.sign-list h3 {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: #fefefe;
}
.sign-list p {
  margin-top: 6px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(254, 254, 254, 0.7);
}
.modal-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.modal-cta p {
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: rgba(20, 20, 20, 0.5);
}

@media (max-width: 860px) {
  .modal-hero--wide { aspect-ratio: auto; min-height: 460px; }
  .modal-hero--wide img { position: absolute; inset: 0; }
  .modal-hero-text { left: 20px; right: 20px; bottom: 24px; }
  .modal-hero--wide h2 { font-size: 32px; line-height: 40px; }
  .modal-hero-text p { text-align: left; hyphens: manual; }
  .sign-list li { align-items: flex-start; gap: 14px; padding: 16px; }
  .sign-ico { width: 56px; height: 56px; }
  .sign-ico svg { width: 34px; height: 34px; }
  .sign-list h3 { font-size: 18px; line-height: 24px; }
}

/* Destinos dos links do menu (seções e itens): param abaixo do menu fixo */
[id] { scroll-margin-top: 90px; }