/* ============================================================
   VIZ Solutions — Folha de Estilo Global (global.css)
   Substituição centralizada de estilos inline por classes e IDs
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ------------------------------------------------------------
   Tipografia Global: Todos os <p> em Open Sans Light (300)
   ------------------------------------------------------------ */
p {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 300 !important;
}

/* Negritos dentro dos parágrafos com peso semibold (600) para destaque */
p b,
p strong {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
}

/* Preserva a tipografia serif display para números e métricas especiais estruturados em <p> */
p.panel-num,
p.panel-value,
p.setor__prova,
p.panel-num b,
p.panel-value b,
p.setor__prova b {
  font-family: var(--font-display, "Instrument Serif", serif) !important;
  font-weight: 400 !important;
}

/* ------------------------------------------------------------
   1. Classes Utilitárias (Estilos inline repetidos transformados em classes)
   ------------------------------------------------------------ */

/* color:#fff (87 ocorrências) */
.u-text-white {
  color: #ffffff !important;
}

/* font-size:var(--fs-sm) (39 ocorrências) */
.u-fs-sm {
  font-size: var(--fs-sm) !important;
}

/* border-top-color:var(--line-dark) (9 ocorrências) */
.u-border-line-dark {
  border-top-color: var(--line-dark) !important;
}

/* color:var(--on-dark-soft) (9 ocorrências) */
.u-text-on-dark-soft {
  color: var(--on-dark-soft) !important;
}

/* padding-bottom:clamp(2rem,4vw,3rem) (3 ocorrências) */
.u-pb-clamp {
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}

/* padding-top:var(--s-9) (3 ocorrências) */
.u-pt-s9 {
  padding-top: var(--s-9) !important;
}

/* color:#fff;font-size:var(--fs-h3) (3 ocorrências) */
.u-text-white-h3 {
  color: #ffffff !important;
  font-size: var(--fs-h3) !important;
}

/* color:#fff;font-size:var(--fs-h4) (3 ocorrências) */
.u-text-white-h4 {
  color: #ffffff !important;
  font-size: var(--fs-h4) !important;
}

/* grid-template-columns:1fr;gap:var(--s-5);margin-top:var(--s-5) (3 ocorrências) */
.u-steps-single-col {
  grid-template-columns: 1fr !important;
  gap: var(--s-5) !important;
  margin-top: var(--s-5) !important;
}

/* font-size:var(--fs-sm);margin-bottom:2rem (2 ocorrências) */
.u-fs-sm-mb2 {
  font-size: var(--fs-sm) !important;
  margin-bottom: 2rem !important;
}

/* text-align: justify */
.u-text-justify {
  text-align: justify !important;
}

/* Justify prose content across all languages */
.prose p,
.prose li {
  text-align: justify;
}

/* ------------------------------------------------------------
   2. Regras de ID (Estilos inline únicos)
   ------------------------------------------------------------ */
/* Reservado para elementos com estilização estática exclusiva */

/* ------------------------------------------------------------
   3. Estados do Formulário e Honeypot Anti-spam
   ------------------------------------------------------------ */
.hp-field {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

.form__estado {
  margin-top: var(--s-4, 1rem);
  padding: 0.85rem 1.1rem;
  border-radius: 8px;
  font-size: var(--fs-sm, 1rem);
  line-height: 1.4;
  transition: all 0.25s ease;
}

.form__estado--sucesso {
  background: rgba(63, 208, 190, 0.12);
  border: 1px solid rgba(63, 208, 190, 0.35);
  color: #3fd0be;
}

.form__estado--erro {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}

/* ------------------------------------------------------------
   4. Acessibilidade Agêntica e Skip-link
   ------------------------------------------------------------ */
.skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10000;
  background: #0B1E1E;
  color: #3FD0BE;
  padding: 0.75rem 1.25rem;
  border: 1px solid #3FD0BE;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------
   5. Tipografia para elementos <span>
   ------------------------------------------------------------ */
span {
  font-weight: 400 !important;
}

/* ------------------------------------------------------------
   6. Responsividade Mobile: --fs-lead / .lead em 1rem (16px)
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  :root {
    --fs-lead: 1rem;
  }
  .lead,
  .\--fs-lead,
  [class*="--fs-lead"] {
    font-size: 1rem !important;
  }
}

/* ------------------------------------------------------------
   7. Espaçamento Vertical de Seções: --section-y
      Desktop e Tablet: 55px (3.4375rem)
      Mobile: 34px (2.125rem)
   ------------------------------------------------------------ */
:root {
  --fs-body: 1rem;
  --fs-sm: 1rem;
  --fs-xs: 1rem;
  --section-y: 3.4375rem;
}
@media (max-width: 767px) {
  :root {
    --section-y: 2.125rem;
  }
}

/* ------------------------------------------------------------
   8. Títulos de /como-trabalhamos em linha única
   ------------------------------------------------------------ */
.prose h2.prose__abertura {
  max-width: none !important;
  font-size: clamp(1.25rem, 2.3vw, 2.125rem) !important;
}
@media (min-width: 768px) {
  .prose h2.prose__abertura {
    white-space: nowrap !important;
  }
}
@media (max-width: 767px) {
  .prose h2.prose__abertura {
    font-size: clamp(1rem, 4.5vw, 1.3125rem) !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }
}

.prose h2.prose__fechado {
  max-width: none !important;
  white-space: nowrap !important;
}
@media (max-width: 540px) {
  .prose h2.prose__fechado {
    white-space: normal !important;
    text-wrap: balance !important;
  }
}