/* ============================================================
   Páginas internas — Contato e Trabalhe Conosco
   (carregado depois de style.css)
   ============================================================ */
body.page-inner { background: var(--black); }

/* ---------- Cabeçalho escuro com título centralizado ---------- */
.page-hero {
  position: relative;
  background: var(--black);
  padding: 143px 24px 65px;
  min-height: 466px;
  display: flex;
  justify-content: center;
}
.page-hero .navbar { top: calc(25px + env(safe-area-inset-top, 0px)); }

.page-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: var(--white);
  text-transform: uppercase;
  opacity: 0.7;
}
.eyebrow::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--orange);
}

.page-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.page-title {
  color: var(--white);
  font-weight: 500;
  font-size: clamp(36px, 5vw, var(--h1-size));
  line-height: 1.125;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.page-title em { color: var(--orange); font-style: normal; }
.page-title--contato { max-width: 454px; }
.page-title--trabalhe { max-width: 831px; }

.page-desc {
  color: var(--white);
  opacity: 0.7;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  max-width: 562px;
  text-wrap: balance;
}
/* Quebra fixa como no Figma: "…do seu município," / "órgão ou trecho concedido." */
.page-desc--contato { max-width: none; text-wrap: wrap; }
@media (min-width: 861px) {
  .page-desc--contato { white-space: nowrap; }
}

/* ---------- Área clara com o conteúdo ---------- */
.page-body {
  background: var(--white);
  padding: 67px 24px;
}
.page-body-inner {
  max-width: 1300px;
  margin: 0 auto;
}

/* ---------- Formulário (cartão cinza claro) ---------- */
.form-card {
  background: rgba(20, 20, 20, 0.1);
  border-radius: 4px;
  padding: 64px 40px;
}
.form-card-title {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: #000;
}

.form-grid {
  display: grid;
  gap: 32px 40px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.field--full { grid-column: 1 / -1; }
.field label,
.field .field-label {
  font-weight: 500;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: #000;
}
.field label em,
.field .field-label em { color: var(--orange); font-style: normal; }

.field input,
.field textarea,
.field select,
.file-input {
  width: 100%;
  border: 0.5px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 10px;
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: var(--black);
  transition: border-color .2s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(0, 0, 0, 0.5); }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--blue); }
.field textarea { height: 111px; resize: none; }

/* Upload de currículo: cartão com ícone ilustrativo (documento com
   seta), título, formatos aceitos e um botão "Procurar". O <input> fica
   por cima de tudo, invisível — clicar ou soltar um arquivo em
   qualquer ponto funciona. Com arquivo escolhido: ícone de check,
   nome e tamanho do arquivo e "Trocar". */
.field .file-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 8px;
  border: 1px dashed rgba(0, 0, 0, 0.28);
  background: rgba(30, 64, 175, 0.025);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.file-input input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-icon {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: rgba(30, 64, 175, 0.08);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, color .25s ease;
}
.file-ico {
  position: absolute;
  width: 22px;
  height: 22px;
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.file-ico--done { opacity: 0; transform: scale(.6); }
.file-ico-arrow { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.file-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.file-title {
  font-weight: 500;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-hint {
  font-size: 11px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-action {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 4px;
  background: var(--black);
  color: var(--white);
  font-size: 11px;
  line-height: 16px;
  transition: background .25s ease;
}

.field .file-input:hover,
.field .file-input.is-drag {
  border-color: var(--blue);
  background: rgba(30, 64, 175, 0.06);
}
.file-input:hover .file-ico-arrow,
.file-input.is-drag .file-ico-arrow { transform: translateY(-1.5px); }
.file-input:hover .file-action { background: var(--blue); }
.field .file-input:focus-within { border-color: var(--blue); border-style: solid; }

.field .file-input.has-file {
  border-style: solid;
  border-color: rgba(30, 64, 175, 0.45);
}
.file-input.has-file .file-icon { background: var(--blue); color: var(--white); }
.file-input.has-file .file-ico--upload { opacity: 0; transform: scale(.6); }
.file-input.has-file .file-ico--done { opacity: 1; transform: none; }
/* Campo estreito (coluna de 220px no desktop): sem o botão "Procurar",
   para o título e o nome do arquivo não serem cortados — o campo
   inteiro continua clicável. */
.field .file-input { container-type: inline-size; }
@container (max-width: 260px) {
  .file-action { display: none; }
}

.consent {
  display: flex;
  align-items: center;
  gap: 32px;
  font-weight: 500;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: #000;
  cursor: pointer;
}
.consent-link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.consent-link:hover { color: var(--orange); }
.consent input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.consent input:checked { background: var(--orange); border-color: var(--orange); }
.consent input:checked::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.btn-lg { border: none; cursor: pointer; font-family: var(--font-primary); }

/* ============================================================
   CONTATO — dois cartões lado a lado
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.contact-form .form-grid {
  grid-template-columns: repeat(2, minmax(0, 220px));
  max-width: 480px;
}
.contact-form .btn-lg { align-self: flex-start; }

.contact-card {
  background: var(--black);
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 64px;
  overflow: hidden;
}
.contact-card-photo {
  position: relative;
  aspect-ratio: 616 / 269;
  overflow: hidden;
  background: #fff;
}
.contact-card-photo img {
  position: absolute;
  width: 111.53%;
  max-width: none;
  left: -5.84%;
  top: -18.99%;
}
.contact-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.contact-card .contact-items {
  gap: 24px;
  padding: 0 40px 56px;
  opacity: 0.7;
}
.contact-card .contact-item { gap: 24px; }
.contact-card .contact-item-text { color: var(--white); }
.contact-card .contact-item-text .is-email { color: var(--white); }

/* ============================================================
   TRABALHE CONOSCO
   ============================================================ */
.careers-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 60px;
}
.careers-intro h2 {
  max-width: 646px;
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, var(--h2-size));
  line-height: 1.14;
  color: var(--black);
  letter-spacing: -0.02em;
}
.careers-intro p {
  max-width: 410px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--black);
  text-wrap: pretty;
}

.careers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 410px;
  grid-template-rows: 204px 204px;
  gap: 6px;
  margin-bottom: 104px;
}

.area-card {
  position: relative;
  background: var(--black);
  border-radius: 4px;
  padding: 27px 23px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.area-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 20%) var(--my, 0%), rgba(30, 64, 175, 0.28), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.area-card:hover { transform: translateY(-4px); }
.area-card:hover::before { opacity: 1; }

.area-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.area-icon svg { width: 26px; height: 26px; overflow: visible; }

.area-card-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.area-card h3 {
  font-weight: 400;
  font-size: var(--body-lg);
  line-height: 32px;
  color: #fff;
}
.area-card p {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(255, 255, 255, 0.7);
  max-width: 379px;
}

/* ---------- Ícones animados (traço fino, movimentos sutis) ---------- */
.area-icon svg * { vector-effect: non-scaling-stroke; }

/* Engenharia: a engrenagem avança um dente (45°) e pausa — como tem
   8 dentes, voltar a 0° no fim do ciclo é idêntico a 45°: loop sem salto. */
.ico-gear {
  transform-box: view-box;
  transform-origin: 12px 12px;
  animation: icoTick 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes icoTick {
  0%, 20% { transform: rotate(0deg); }
  65%, 100% { transform: rotate(45deg); }
}

/* Tecnologia: um traço de luz percorre o contorno do chip */
.ico-trace {
  stroke-dasharray: 22 78;
  animation: icoTrace 2.6s linear infinite;
}
@keyframes icoTrace { to { stroke-dashoffset: -100; } }
.ico-core { animation: icoPulse 2.6s ease-in-out infinite; }
@keyframes icoPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Operações: sinal de monitoramento — ondas saindo do ponto central */
.ico-ping {
  transform-box: view-box;
  transform-origin: 12px 12px;
  animation: icoPing 2.4s cubic-bezier(.22, 1, .36, 1) infinite;
}
.ico-ping--b { animation-delay: 1.2s; }
@keyframes icoPing {
  0% { transform: scale(.25); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* Administrativo: barras subindo em sequência */
.ico-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: icoGrow 2.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
.ico-bar--2 { animation-delay: .15s; }
.ico-bar--3 { animation-delay: .3s; }
@keyframes icoGrow {
  0%, 100% { transform: scaleY(.35); }
  40%, 70% { transform: scaleY(1); }
}

/* No hover do cartão os ícones ficam um pouco mais rápidos */
.area-card:hover .ico-gear { animation-duration: 1.3s; }
.area-card:hover .ico-trace { animation-duration: 1.6s; }
.area-card:hover .ico-ping { animation-duration: 1.6s; }

/* ---------- Cartão "Seu Talento. Novos Desafios" ---------- */
.talent-card {
  position: relative;
  grid-column: 3;
  grid-row: 1 / span 2;
  border-radius: 4px;
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  padding: 0 34px 28px;
}

/* Fundo animado — "aurora atrás de vidro canelado":
   - .talent-glow: faixas de luz azul, suaves e inclinadas, que
     deslizam na horizontal em loop infinito (o padrão se repete a
     cada 230px, então a translação de -230px fecha o ciclo sem salto);
   - .talent-glow--soft: segunda camada mais larga, lenta e difusa,
     dá profundidade e faz a luz "respirar";
   - .talent-flutes: listras verticais finas e fixas por cima, em
     blend overlay — simulam o vidro e riscam a luz que passa atrás. */
.talent-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #0a0e16;
}

.talent-glow {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: -45%;
  width: calc(190% + 250px);
  background-image: radial-gradient(ellipse 30% 36% at 50% 44%,
    rgba(147, 197, 253, 1) 0%,
    rgba(59, 130, 246, .95) 24%,
    rgba(37, 99, 235, .6) 48%,
    rgba(30, 64, 175, 0) 76%);
  background-size: 250px 100%;
  background-repeat: repeat-x;
  filter: blur(18px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 22%, #000 62%, transparent 88%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 22%, #000 62%, transparent 88%);
  will-change: transform;
  animation: auroraDrift 4.6s linear infinite;
}
.talent-glow--soft {
  background-image: radial-gradient(ellipse 46% 44% at 50% 42%,
    rgba(37, 99, 235, .6) 0%,
    rgba(30, 64, 175, .28) 45%,
    rgba(30, 64, 175, 0) 75%);
  background-size: 380px 100%;
  width: calc(190% + 380px);
  filter: blur(30px);
  animation: auroraDriftSoft 11s linear infinite, auroraBreathe 6s ease-in-out infinite;
}
/* skew positivo = faixas inclinadas como "\" (topo à esquerda) */
@keyframes auroraDrift {
  from { transform: translateX(0) skewX(16deg); }
  to   { transform: translateX(-250px) skewX(16deg); }
}
@keyframes auroraDriftSoft {
  from { transform: translateX(0) skewX(10deg); }
  to   { transform: translateX(-380px) skewX(10deg); }
}
@keyframes auroraBreathe {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

.talent-flutes {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.14) 0px,
      rgba(255,255,255,0) 2px,
      rgba(0,0,0,.38) 4px,
      rgba(255,255,255,0) 6px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.25) 0px,
      rgba(0,0,0,0) 5px,
      rgba(255,255,255,.10) 9px,
      rgba(0,0,0,0) 13px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Mesmo degradê do Figma: transparente → preto na base */
.talent-fade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(20,20,20,.85) 88%, rgba(20,20,20,1) 100%);
  pointer-events: none;
}

.talent-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.talent-content h3 {
  font-weight: 500;
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  color: #fff;
}

/* Formulário de currículo: 4 colunas de 220px centralizadas */
.careers-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.careers-form .form-card-title { text-align: center; }
.careers-form .form-grid {
  width: 100%;
  max-width: 1000px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.careers-form .consent { grid-column: 1 / -1; }
.careers-form .btn-lg { grid-column: 1 / -1; justify-self: center; }

/* ============================================================
   A EMPRESA
   ============================================================ */
.page-hero--empresa { min-height: 0; padding-bottom: 36px; }
.page-title--empresa { max-width: 633px; }
/* Mesma largura do título (o balance deixava as duas linhas curtas) */
.page-desc--empresa { max-width: 580px; text-wrap: pretty; }

.empresa-banner {
  display: block;
  width: 100%;
  aspect-ratio: 1403 / 371;
  min-height: 220px;
  object-fit: cover;
}

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

/* ---------- Nossa História ---------- */
.empresa-history { padding: 84px 0 88px; }
.history-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
}
.badge-history {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid var(--white);
  border-radius: 4px;
  opacity: 0.7;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: var(--white);
  white-space: nowrap;
  font-weight: 400;
}
.badge-history img { width: 16px; height: auto; }

.history-text {
  max-width: 814px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.history-lead {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: var(--white);
}
.history-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: rgba(254, 254, 254, 0.7);
}

.history-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 75px;
}
.stat-card,
.mv-card {
  min-height: 295px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stat-card {
  background: var(--blue);
  border-radius: 4px;
  padding: 38px 31px 28px;
  color: #fff;
}
.stat-number {
  display: block;
  font-weight: 500;
  font-size: 80px;
  line-height: 88px;
  letter-spacing: -0.03em;
}
.stat-label,
.stat-desc {
  font-weight: 200;
  font-size: var(--body-base);
  line-height: var(--body-base-lh);
}
.stat-desc { max-width: 333px; }

.mv-card {
  background: #e6e6e6;
  padding: 44px 25px 29px 27px;
  color: #000;
}
.mv-num {
  font-weight: 200;
  font-size: var(--body-base);
  line-height: var(--body-base-lh);
}
.mv-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 378px;
}
.mv-text h3 {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
}
.mv-text p {
  font-size: var(--body-base);
  line-height: var(--body-base-lh);
  text-align: justify;
  hyphens: auto;
}

/* ---------- Onde estamos ---------- */
.empresa-where { padding: 36px 0 179px; }
.where-inner {
  max-width: 1247px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.where-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.where-head h2 {
  max-width: 660px;
  font-weight: 500;
  font-size: clamp(32px, 4vw, var(--h3-size));
  line-height: 1.17;
  color: var(--white);
}
.where-list {
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.where-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding: 16px 0;
  border-bottom: 0.5px solid rgba(254, 254, 254, 0.5);
}
.where-name {
  display: flex;
  align-items: center;
  gap: 80px;
  flex-shrink: 0;
}
.where-num {
  width: 43px;
  height: 40px;
  border-radius: 2px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: var(--white);
}
.where-name h3 {
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  color: var(--white);
}
.where-row p {
  max-width: 557px;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: rgba(254, 254, 254, 0.7);
  text-align: justify;
  hyphens: auto;
}

/* ---------- Nossos valores ---------- */
.empresa-values {
  background: #e6e6e6;
  padding: 95px 0;
}
.values-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
}
.values-left {
  max-width: 484px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.eyebrow--dark {
  color: var(--black);
  padding-left: 0;
}
.values-left h2 {
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, var(--h2-size));
  line-height: 1.14;
  color: #000;
}
.values-list {
  flex: 0 1 609px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.value-card {
  background: var(--blue);
  border-radius: 4px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s ease;
}
.value-card:hover { transform: translateX(6px); background: #2348c4; }
.value-card h3 {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: var(--white);
}
.value-card p {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(254, 254, 254, 0.7);
}

@media (max-width: 1100px) {
  .history-cards { grid-template-columns: 1fr 1fr; }
  .stat-card { grid-column: 1 / -1; }
  .where-row { flex-direction: column; gap: 16px; }
  .where-name { gap: 24px; }
  .where-row p { max-width: none; }
}
@media (max-width: 860px) {
  .history-top { flex-direction: column; gap: 32px; }
  .history-lead { font-size: 20px; line-height: 28px; }
  .history-body { font-size: var(--body-base); line-height: var(--body-base-lh); }
  .empresa-history { padding: 56px 0 64px; }
  .history-cards { margin-top: 48px; }
  .empresa-where { padding: 24px 0 96px; }
  .where-inner { gap: 48px; }
  .where-name h3 { font-size: 24px; line-height: 32px; }
  .values-inner { flex-direction: column; gap: 40px; }
  .values-list { flex-basis: auto; width: 100%; }
  .empresa-values { padding: 72px 0; }
}
@media (max-width: 560px) {
  .history-cards { grid-template-columns: 1fr; }
  .stat-card, .mv-card { min-height: 240px; }
  .stat-number { font-size: 64px; line-height: 72px; }
  .mv-text p, .where-row p { text-align: left; hyphens: manual; }
  .value-card { padding: 20px 24px; }
}

/* ============================================================
   TECNOLOGIA
   ============================================================ */
.page-hero--tech { min-height: 0; padding: 200px 24px 122px; }
.page-hero--tech .page-hero-inner { width: 100%; max-width: 1300px; }
.page-hero--tech .page-hero-text { gap: 80px; width: 100%; }
.page-desc--tech { max-width: 544px; }

/* Palavra digitada: altura fixa para o layout não pular enquanto
   o texto cresce/apaga. O tamanho é ajustado no JS para a palavra
   mais longa ("Monitoramento.") sempre caber na largura. */
.type-word {
  --type-size: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--type-size) * 1.05);
  font-weight: 500;
  font-size: var(--type-size);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--white);
  white-space: nowrap;
}
.type-word em { color: var(--orange); font-style: normal; }
.type-cursor {
  display: inline-block;
  width: 0.07em;
  height: 0.8em;
  margin-left: 0.06em;
  background: var(--orange);
  transform: translateY(0.02em);
}
.type-cursor.is-blinking { animation: typeBlink 1s steps(1) infinite; }
@keyframes typeBlink { 50% { opacity: 0; } }

/* ---------- Acordeão de tecnologias ---------- */
.tech-acc {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 198px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Camadas do item, de baixo para cima:
   .acc-ring (contorno girando + brilho desfocado) → ::before (fundo
   preto, recuado 1.5px, deixando só a borda do anel à mostra) →
   ::after (halo do cursor) → conteúdo. Sem overflow:hidden, para o
   brilho poder vazar para fora da borda. */
.acc-item {
  position: relative;
  background: #000;
  border-radius: 4px;
  padding: 0 32px;
  isolation: isolate;
}
.acc-item::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: 3px;
  background: #000;
  pointer-events: none;
}
/* Halo azul suave que segue o cursor dentro do item */
.acc-item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(30, 64, 175, 0.16), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.acc-item:hover::after { opacity: 1; }
.acc-head,
.acc-panel { position: relative; z-index: 3; }
/* O botão do acordeão fica dentro de um <h3> (estrutura de títulos para
   o Google/leitores de tela) — o h3 não muda nada no visual. */
.acc-heading { font: inherit; margin: 0; }

/* Contorno girando: dois "cometas" (azul e laranja) num gradiente
   cônico cujo ângulo é animado. A cópia desfocada por trás cria o
   brilho leve que escapa pela borda. */
@property --acc-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.acc-ring,
.acc-ring::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--acc-angle),
    transparent 0deg,
    rgba(30, 64, 175, 0) 50deg,
    rgba(59, 130, 246, .55) 112deg,
    rgba(147, 197, 253, .8) 128deg,
    transparent 131deg,
    transparent 180deg,
    rgba(249, 115, 22, 0) 230deg,
    rgba(249, 115, 22, .5) 292deg,
    rgba(253, 186, 116, .75) 308deg,
    transparent 311deg);
  pointer-events: none;
}
/* Gira só no item aberto: os fechados (invisíveis) não ficam
   redesenhando o gradiente a cada quadro — pesava no iPhone. */
.acc-item.is-open .acc-ring,
.acc-item.is-open .acc-ring::after { animation: accSpin 8s linear infinite; }
.acc-ring {
  z-index: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.acc-ring::after {
  content: '';
  inset: 0;
  filter: blur(8px);
  opacity: .35;
}
.acc-item.is-open .acc-ring { opacity: .85; }
@keyframes accSpin { to { --acc-angle: 360deg; } }

.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 48px 0;
  color: var(--white);
  text-align: left;
  cursor: pointer;
}
.acc-num {
  flex-shrink: 0;
  width: 43px;
  height: 40px;
  border-radius: 2px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  transition: transform .45s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.acc-title {
  flex: 1;
  font-weight: 400;
  font-size: clamp(20px, 2.3vw, 32px);
  line-height: 1.25;
  text-transform: uppercase;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.acc-item:not(.is-open) .acc-title { opacity: .75; }
.acc-head:hover .acc-title { transform: translateX(6px); opacity: 1; }
.acc-head:hover .acc-num { transform: scale(1.06); }
.acc-head:focus-visible { outline: none; }
.acc-head:focus-visible .acc-toggle { box-shadow: 0 0 0 2px var(--orange); }

/* + quando fechado, X quando aberto */
.acc-toggle {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  background: rgba(140, 139, 139, 0.3);
  transition: background .3s ease;
}
.acc-toggle i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  background: #fff;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.acc-toggle i:last-child { transform: rotate(90deg); }
.acc-item.is-open .acc-toggle i:first-child { transform: rotate(45deg); }
.acc-item.is-open .acc-toggle i:last-child { transform: rotate(135deg); }
.acc-head:hover .acc-toggle { background: var(--orange); }

/* Altura animada sem medir em JS: grid-template-rows 0fr → 1fr */
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .7s cubic-bezier(.22,1,.36,1);
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel-inner {
  min-height: 0;
  overflow: hidden;
}
.acc-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 40px;
}

.acc-intro {
  max-width: 618px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.acc-intro h4 {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: var(--white);
}
.acc-intro p {
  max-width: 606px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(254, 254, 254, 0.7);
}

.acc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.acc-card {
  min-height: 160px;
  background: var(--blue);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  transition: transform .4s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.acc-card:hover { transform: translateY(-4px); background: #2348c4; }
.acc-card h5 {
  font-weight: 400;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: #fff;
}
.acc-card p {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(255, 255, 255, 0.7);
}

/* Centro de Operações Integradas: foto da sala de controle a 20% sobre
   o preto (aparece ao abrir), cards 2 + 3 com ícone em caixa branca. */
.acc-bg {
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: 3px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.acc-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}
.acc-item.is-open .acc-bg { opacity: 1; }
.acc-item--coi .acc-intro,
.acc-item--coi .acc-intro p { max-width: 699px; }
.acc-cards--coi { grid-template-columns: repeat(6, 1fr); }
.acc-cards--coi .acc-card { grid-column: span 2; min-height: 248px; }
.acc-cards--coi .acc-card:nth-child(-n+2) { grid-column: span 3; }
.acc-cards--coi .acc-card p { max-width: 440px; }
.acc-card-ico {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background: #fff;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.acc-card-ico svg {
  width: 32px;
  height: 32px;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.acc-card:hover .acc-card-ico svg { transform: scale(1.1); }

/* Conteúdo entra em cascata ao abrir, sai rápido ao fechar */
.acc-intro,
.acc-card {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .25s ease, translate .25s ease, transform .4s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.acc-item.is-open .acc-intro,
.acc-item.is-open .acc-card {
  opacity: 1;
  translate: 0 0;
  transition: opacity .6s ease calc(.15s + var(--i, 0) * .08s), translate .7s cubic-bezier(.22,1,.36,1) calc(.15s + var(--i, 0) * .08s), transform .4s cubic-bezier(.22,1,.36,1), background .3s ease;
}

/* ---------- CTA azul ---------- */
.tech-cta {
  background: var(--blue);
  padding: 107px 24px;
  display: flex;
  justify-content: center;
}
.tech-cta-inner {
  max-width: 788px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.tech-cta h2 {
  font-weight: 500;
  font-size: clamp(36px, 5vw, var(--h1-size));
  line-height: 1.125;
  letter-spacing: -0.03em;
  color: var(--white);
}
.tech-cta h2 em { color: var(--orange); font-style: normal; }
.tech-cta p {
  max-width: 788px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--white);
  opacity: 0.7;
  margin-top: -8px;
}

@media (max-width: 1024px) {
  .acc-cards { grid-template-columns: repeat(2, 1fr); }
  .acc-cards--coi .acc-card,
  .acc-cards--coi .acc-card:nth-child(-n+2) { grid-column: auto; min-height: 0; }
  .acc-cards--coi .acc-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .page-hero--tech { padding: 140px 20px 80px; }
  .page-hero--tech .page-hero-text { gap: 40px; }
  .tech-acc { padding: 0 16px 96px; gap: 16px; }
  .acc-item { padding: 0 20px; }
  .acc-head { gap: 20px; padding: 28px 0; }
  .acc-body { padding-bottom: 28px; }
  .tech-cta { padding: 80px 20px; }
}
@media (max-width: 560px) {
  /* Sem a cópia desfocada do contorno no celular: redesenhar um blur
     do tamanho do card aberto a cada quadro travava a rolagem. */
  .acc-ring::after { display: none; }
  /* Título final em no máximo 3 linhas: o tamanho acompanha a largura
     da tela para "Tecnologia conectada" caber numa linha só. */
  .tech-cta h2 { font-size: clamp(26px, 8.2vw, 36px); }
  .acc-cards { grid-template-columns: 1fr; }
  .acc-card { min-height: 0; gap: 16px; }
  .acc-num { width: 36px; height: 34px; font-size: 18px; }
  /* "VIDEOMONITORAMENTO" não cabia em 20px e empurrava o + para
     fora da tela. */
  .acc-item { padding: 0 16px; }
  .acc-head { gap: 12px; }
  .acc-title { font-size: 15px; min-width: 0; overflow-wrap: break-word; }
}

/* ============================================================
   EQUIPAMENTOS
   ============================================================ */
.page-title--equip { max-width: 935px; }
.page-desc--equip { max-width: 680px; text-wrap: pretty; }

/* ---------- Controle de velocidade ---------- */
.equip-speed {
  background: #e6e6e6;
  padding: 102px 24px 125px;
}
.equip-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 38px;
}
.equip-head h2 {
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, var(--h2-size));
  line-height: 1.14;
  color: var(--black);
}
.equip-head p {
  max-width: 362px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--black);
  text-align: justify;
  hyphens: auto;
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--black);
  border-radius: 4px;
  overflow: hidden;
  min-height: 660px;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.product-card:hover { transform: translateY(-6px); }
.product-media {
  position: relative;
  aspect-ratio: 646 / 413;
  overflow: hidden;
  border-radius: 6px;
  margin-top: 1px;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.product-card:hover .product-media img { transform: scale(1.1); }
.product-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 42px;
  padding: 24px 19px 34px;
}
.product-text {
  max-width: 555px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.product-text h3 {
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: #fff;
}
.product-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;
}
.product-body .btn { align-self: flex-start; }

/* ---------- Fiscalização urbana e semafórica ---------- */
.equip-urban {
  background: var(--black);
  padding: 0 24px 0 0;
}
/* A foto ocupa a altura toda da seção, colada na borda esquerda
   (Figma: 686 × 870); a altura vem do conteúdo à direita. */
.urban-inner {
  display: grid;
  grid-template-columns: minmax(0, 686px) minmax(0, 648px);
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  max-width: 1374px;
}
.urban-media {
  position: relative;
  overflow: hidden;
  border-radius: 0 6px 6px 0;
}
.urban-media img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}
.urban-content {
  padding: 92px 0 109px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.urban-content h2 {
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--white);
}
.urban-content > div > p {
  max-width: 368px;
  margin-top: 16px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(254, 254, 254, 0.7);
  text-align: justify;
}
.urban-list {
  list-style: none;
  width: 100%;
  max-width: 420px;
  margin-top: -40px;
}
.urban-list li {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 32px 16px 0;
  border-bottom: 0.5px solid rgba(254, 254, 254, 0.5);
  font-size: var(--body-lg);
  line-height: 32px;
  color: var(--white);
  transition: padding-left .4s cubic-bezier(.22,1,.36,1), color .3s ease;
}
.urban-list li:hover { padding-left: 8px; }
.urban-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--body-base);
  line-height: 1;
  transition: background .3s ease;
}
.urban-list li:hover .urban-num { background: var(--orange); }

/* ---------- Estrutura que sustenta a operação (pin + cards subindo) ---------- */
.equip-stage {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--black);
}
.stage-bg {
  position: absolute;
  inset: 0;
}
.stage-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
}
.stage-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.7);
}
.stage-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.stage-center-inner {
  max-width: 590px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.stage-center h2 {
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, var(--h2-size));
  line-height: 1.14;
  color: #fff;
}

@media (max-width: 560px) {
  /* Título do topo em 3 linhas (em 36px "tornam a fiscalização" não
     cabia e virava 4) e "Estrutura que sustenta a operação" em 2: o
     tamanho acompanha a largura da tela. */
  .page-title--equip,
  .stage-center h2 { font-size: clamp(26px, 8.2vw, 36px); }
}
.stage-center p {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: rgba(254, 254, 254, 0.7);
  margin-bottom: -6px;
}

/* Cards de vidro: começam abaixo da tela e atravessam até sair pelo
   topo (JS anima o translateY). Posições horizontais do Figma. */
.stage-card {
  position: absolute;
  top: 0;
  z-index: 2;
  width: min(441px, 31.5vw);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(110vh);
  will-change: transform;
}
.stage-card--1 { left: 4.7%; }
.stage-card--2 { left: 64.9%; }
.stage-card--3 { left: 15.1%; }
.stage-card-num {
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: rgba(255, 255, 255, 0.7);
}
.stage-card h3 {
  margin-top: 8px;
  font-weight: 500;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  color: #fff;
}
.stage-card > div > p {
  margin-top: 16px;
  font-size: var(--body-base);
  line-height: var(--body-base-lh);
  color: rgba(255, 255, 255, 0.7);
  text-align: justify;
  hyphens: auto;
}
.stage-tags {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.stage-tags li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--black);
  font-weight: 200;
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: var(--white);
}
.stage-tags li::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--white);
}

/* ---------- CTA final ---------- */
.equip-cta {
  background: #e6e6e6;
  padding: 62px 24px;
  display: flex;
  justify-content: center;
}
.equip-cta-inner {
  max-width: 908px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.equip-cta h2 {
  font-weight: 500;
  font-size: clamp(36px, 5vw, var(--h1-size));
  line-height: 1.125;
  letter-spacing: -0.03em;
  color: var(--black);
}
.equip-cta p {
  margin-top: -8px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--black);
  opacity: 0.7;
}

@media (max-width: 1024px) {
  .product-card { min-height: 0; }
  .urban-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stage-card { width: min(380px, 40vw); padding: 28px; }
  .stage-card--2 { left: auto; right: 4%; }
}
@media (max-width: 860px) {
  .equip-speed { padding: 64px 20px 80px; }
  .equip-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .product-grid { grid-template-columns: 1fr; }
  .equip-urban { padding: 0 0 80px; }
  .equip-urban .urban-content { padding: 40px 20px 0; }
  .urban-inner { grid-template-columns: 1fr; }
  .urban-media { aspect-ratio: 4 / 3; border-radius: 0; }
  .urban-content { padding: 40px 20px 0; }
  .urban-list { max-width: none; }
  .stage-card,
  .stage-card--1,
  .stage-card--2,
  .stage-card--3 { left: 20px; right: 20px; width: auto; }
  .stage-card { padding: 24px; }
  .equip-cta { padding: 64px 20px; }
  .product-text p, .equip-head p, .stage-card > div > p, .urban-content > div > p { text-align: left; hyphens: manual; }
}

@media (prefers-reduced-motion: reduce) {
  .type-cursor { animation: none !important; }
  .acc-panel, .acc-intro, .acc-card { transition: none !important; }
  .acc-ring, .acc-ring::after { animation: none !important; }
  .talent-glow,
  .ico-gear, .ico-trace, .ico-core, .ico-ping, .ico-bar {
    animation: none !important;
  }
  .ico-ping { opacity: .5; }
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 1100px) {
  .careers-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .talent-card {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 360px;
  }
  .careers-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .page-hero { padding: 132px 20px 64px; min-height: 0; }
  .page-body { padding: 48px 20px; }
  .careers-intro { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
  .careers-grid { margin-bottom: 64px; }
  .form-card { padding: 40px 24px; }
}

@media (max-width: 560px) {
  .careers-grid { grid-template-columns: 1fr; }
  .area-card { min-height: 190px; }
  .contact-form .form-grid,
  .careers-form .form-grid { grid-template-columns: 1fr; }
  .consent { gap: 16px; align-items: flex-start; }
  .contact-card .contact-items { padding: 0 16px 32px; }
  .talent-card { padding: 0 24px 24px; }
  /* "Seu Talento. / Novos Desafios." sempre em 2 linhas: o tamanho
     acompanha a largura da tela. */
  .talent-content h3 { font-size: clamp(26px, 8.6vw, 40px); line-height: 1.2; }
}

/* Formulários: campo-armadilha anti-spam (invisível) e confirmação
   exibida depois do envio (js/pages.js). */
.form-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form-status {
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: var(--blue);
}

/* ---------- Sinalização viária (3 cards que abrem popups) ---------- */
.equip-signs {
  background: #e6e6e6;
  padding: 82px 24px 90px;
}
.equip-head--signs p { max-width: 450px; }
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card--sign { min-height: 0; }
.product-card--sign .product-media { aspect-ratio: 428 / 413; }
.product-card--sign .product-body { padding: 24px; }

/* ---------- Iluminação pública (mesma estrutura da fiscalização urbana) ---------- */
.equip-urban--light .urban-content { padding: 74px 0; max-width: 583px; }
.equip-urban--light .urban-content h2 {
  max-width: 510px;
  font-size: clamp(32px, 3.4vw, var(--h4-size));
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.equip-urban--light .urban-content > div > p { max-width: none; }
.equip-urban--light .urban-list { max-width: 470px; margin-top: -16px; }
.equip-urban--light .urban-media img { object-position: 50% 50%; }

@media (max-width: 1024px) {
  .product-grid--3 { gap: 8px; }
  .product-card--sign .product-body { padding: 20px; }
}
@media (max-width: 860px) {
  .equip-signs { padding: 64px 20px 80px; }
  .product-grid--3 { grid-template-columns: 1fr; }
  .product-card--sign .product-media { aspect-ratio: 4 / 3; }
  .equip-urban--light .urban-content { padding: 40px 20px 0; max-width: none; }
  .equip-urban--light .urban-list { max-width: none; }
}