/* ==========================================================================
   WM MATIC — Componentes
   Depende de tokens.css e base.css. Nomenclatura BEM simplificada.
   Índice: ícone · skip link · header · navegação · menu móvel · botões ·
   links · selos · dado pendente · trilha · cabeçalho de página ·
   resposta direta · cards · etapas · FAQ · avisos · faixa CTA ·
   formulários · barra de contato · footer
   ========================================================================== */

/* --- Ícone (sprite SVG) --- */
.icone {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone--lg { width: 2rem; height: 2rem; stroke-width: 1.75; }

/* --- Skip link --- */
.skip-link {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: var(--z-skip);
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-carbono);
  color: var(--cor-branco);
  font-weight: var(--peso-semi);
  border-radius: var(--raio);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--curva);
}
.skip-link:focus { transform: translateY(0); color: var(--cor-branco); outline-color: var(--cor-laranja); }

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--cor-branco);
  border-bottom: 1px solid var(--cor-linha);
}
.site-header__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--altura-header);
}
.site-header__marca {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  flex-shrink: 0;
}
.site-header__marca img { width: 9.5rem; height: auto; } /* 152px — proporção 200x57 */

/* --- Navegação principal --- */
.nav__lista { list-style: none; padding: 0; }
.nav__link {
  display: flex;
  align-items: center;
  min-height: var(--alvo-toque);
  padding-inline: var(--esp-2);
  color: var(--texto-forte);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-semi);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { color: var(--cor-laranja-texto); }
.nav__link[aria-current="page"] {
  color: var(--cor-laranja-texto);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
.nav__item--sub { position: relative; }
.nav__sub { list-style: none; padding: 0; }
.nav__sub a {
  display: flex;
  align-items: center;
  min-height: var(--alvo-toque);
  padding: var(--esp-2) var(--esp-3);
  color: var(--texto);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--peso-medio);
}
.nav__sub a:hover { color: var(--cor-laranja-texto); background: var(--fundo-alt); }
.nav__sub a[aria-current="page"] { color: var(--cor-laranja-texto); font-weight: var(--peso-semi); }
.nav__sub-botao {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-height: var(--alvo-toque);
  padding: 0;
  background: none;
  border: 0;
  color: var(--texto-forte);
  border-radius: var(--raio-sm);
}
.nav__sub-botao .icone { transition: transform var(--dur) var(--curva); }
.nav__sub-botao[aria-expanded="true"] .icone { transform: rotate(180deg); }
.nav__cta { margin-top: var(--esp-4); }

.menu-botao {
  display: none;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alvo-toque);
  padding: 0 var(--esp-3);
  background: none;
  border: 2px solid var(--cor-grafite);
  border-radius: var(--raio);
  color: var(--texto-forte);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-semi);
  font-size: var(--fs-sm);
}
.menu-botao .icone-fechar { display: none; }
.menu-botao[aria-expanded="true"] .icone-abrir { display: none; }
.menu-botao[aria-expanded="true"] .icone-fechar { display: block; }

/* Sem JS (móvel e desktop): navegação visível como lista; submenu acessível via /servicos/ */
html:not(.js) .site-header__barra { flex-wrap: wrap; padding-block: var(--esp-2); }
html:not(.js) .nav { flex-basis: 100%; }
html:not(.js) .nav__lista { display: flex; flex-wrap: wrap; column-gap: var(--esp-2); }
html:not(.js) .nav__sub { display: none; }
html:not(.js) .nav__cta { margin-top: var(--esp-2); }

/* Com JS, abaixo de 75em (1200px): menu recolhido em painel */
@media (max-width: 74.99em) {
  .js .menu-botao { display: inline-flex; }
  .js .nav {
    position: fixed;
    inset: var(--altura-header) 0 0 0;
    z-index: var(--z-menu);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--esp-4) var(--gutter) var(--esp-7);
    background: var(--cor-branco);
    border-top: 1px solid var(--cor-linha);
  }
  .js .nav:not(.is-aberto) { display: none; }
  .js .nav__lista > li { border-bottom: 1px solid var(--cor-linha); }
  .js .nav__link { font-size: var(--fs-lg); min-height: 3.25rem; }
  .js .nav__sub { padding: 0 0 var(--esp-3) var(--esp-3); }
  .js .nav__sub a { font-size: var(--fs-base); }
  .js .nav__cta .botao { width: 100%; }
}
html.menu-aberto { overflow: hidden; }

/* Desktop */
@media (min-width: 75em) { /* header completo: medido, não cabe sem quebra abaixo de ~1200px */
  .site-header__barra { min-height: var(--altura-header-desktop); }
  .site-header__marca img { width: 11.5rem; } /* 184px */
  .nav { display: flex; align-items: center; gap: var(--esp-4); }
  html .nav__lista { display: flex; align-items: center; gap: var(--esp-1); flex-wrap: nowrap; }
  html:not(.js) .nav { flex-basis: auto; }
  html:not(.js) .site-header__barra { flex-wrap: nowrap; }
  .nav__cta { margin-top: 0; }
  .nav__cta .botao { white-space: nowrap; padding-inline: var(--esp-4); }
  .nav__item--sub { display: flex; align-items: center; }
  .js .nav__sub-botao { display: inline-flex; }
  .js .nav__sub {
    position: absolute;
    top: calc(100% + var(--esp-2));
    left: 0;
    min-width: 21.5rem;
    padding: var(--esp-2);
    background: var(--cor-branco);
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-3);
  }
  .js .nav__sub:not(.is-aberto) { display: none; }
  .nav__sub a { border-radius: var(--raio-sm); }
}

/* --- Botões --- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--alvo-toque);
  padding: var(--esp-2) var(--esp-5);
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-family: var(--fonte-titulo);
  font-size: 0.9375rem;
  font-weight: var(--peso-negrito);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
.botao:hover { text-decoration: none; }
.botao:active { transform: translateY(1px); }
/* Laranja com texto carbono: 6,23:1. Texto branco sobre #FF6A00 (2,87:1) é PROIBIDO. */
.botao--primario { background: var(--cor-laranja); color: var(--cor-carbono); }
.botao--primario:hover { background: var(--cor-laranja-claro); color: var(--cor-carbono); }
.botao--escuro { background: var(--cor-carbono); color: var(--cor-branco); }
.botao--escuro:hover { background: var(--cor-grafite); color: var(--cor-branco); }
.botao--secundario { background: transparent; color: var(--texto-forte); border-color: currentColor; }
.botao--secundario:hover { background: var(--texto-forte); color: var(--fundo); }
.secao--escura .botao--secundario:hover, .contexto-escuro .botao--secundario:hover, .faixa-cta .botao--secundario:hover, .site-footer .botao--secundario:hover { color: var(--cor-carbono); }
.botao--lg { min-height: 3.25rem; padding-inline: var(--esp-6); font-size: 1rem; }
.botao--bloco { width: 100%; }
/* Pendente: ação que depende de dado não confirmado. Não é link nem botão: não recebe foco. */
.botao--pendente,
.botao[aria-disabled="true"] {
  background: var(--cor-nevoa);
  color: var(--cor-texto-suave);
  border: 2px dashed var(--cor-linha-forte);
  cursor: not-allowed;
  font-weight: var(--peso-semi);
}
.secao--escura .botao--pendente, .contexto-escuro .botao--pendente, .faixa-cta .botao--pendente, .site-footer .botao--pendente, .barra-contato .botao--pendente {
  background: transparent;
  color: var(--texto-inverso-suave);
  border-color: var(--texto-inverso-suave);
}

/* --- Links auxiliares --- */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-semi);
  text-decoration: none;
}
.link-seta .icone { transition: transform var(--dur) var(--curva); }
.link-seta:hover { text-decoration: underline; }
.link-seta:hover .icone { transform: translateX(3px); }

/* --- Selos de conteúdo (informativos, não decorativos) --- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 0.125rem var(--esp-2);
  border: 1px solid currentColor;
  border-radius: var(--raio-sm);
  font-size: var(--fs-xs);
  font-weight: var(--peso-semi);
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}
.selo--pendente { color: var(--cor-laranja-texto); background: var(--cor-pendente-fundo); }
.selo--ilustrativo { color: var(--cor-texto-suave); background: var(--cor-branco); }
.selo--validacao { color: var(--cor-info); background: var(--cor-info-fundo); }
.selo--tecnico { color: var(--cor-grafite); background: var(--cor-nevoa); }
.secao--escura .selo, .contexto-escuro .selo, .faixa-cta .selo, .site-footer .selo { background: transparent; color: var(--texto-inverso-suave); }
.secao--escura .selo--pendente, .contexto-escuro .selo--pendente, .faixa-cta .selo--pendente, .site-footer .selo--pendente { color: var(--cor-laranja); }

/* --- Dado pendente (placeholder explícito no HTML) --- */
.dado-pendente {
  color: var(--texto-suave);
  font-style: italic;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

/* --- Trilha de navegação (breadcrumbs) --- */
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  font-size: var(--fs-sm);
}
.trilha li { display: inline-flex; align-items: center; }
.trilha li + li::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin-inline: var(--esp-3);
  border-top: 1.5px solid var(--texto-suave);
  border-right: 1.5px solid var(--texto-suave);
  transform: rotate(45deg);
}
.trilha a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem; /* ≥ 24px (WCAG 2.5.8), com espaçamento */
  color: var(--texto-suave);
}
.trilha a:hover { color: var(--link); }
.trilha [aria-current="page"] { color: var(--texto-forte); font-weight: var(--peso-semi); }

/* --- Cabeçalho de página interna --- */
.cabecalho-pagina {
  padding-block: var(--esp-5) var(--esp-7);
  background: var(--fundo-alt);
  border-bottom: 1px solid var(--cor-linha);
}
.cabecalho-pagina .trilha { margin-bottom: var(--esp-5); }
.cabecalho-pagina h1 { max-width: 22ch; }
.cabecalho-pagina h1 + * { margin-top: var(--esp-4); }

/* --- Resposta direta (bloco de abertura objetivo, favorece leitura e extração) --- */
.resposta-direta {
  max-width: var(--medida);
  padding: var(--esp-4) var(--esp-5);
  background: var(--cor-branco);
  border-left: 4px solid var(--cor-laranja);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: var(--fs-lg);
  color: var(--texto-forte);
  box-shadow: var(--sombra-1);
}

/* --- Cards --- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5);
  background: var(--cor-branco);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-lg);
  transition: box-shadow var(--dur) var(--curva), border-color var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.card__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: var(--cor-carbono);
  background: var(--cor-nevoa);
  border-radius: var(--raio);
}
.card__titulo { font-size: var(--fs-h4); }
.card__titulo a { color: var(--texto-forte); text-decoration: none; }
/* Card inteiro clicável a partir de um único link (sem links duplicados para leitor de tela) */
.card__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__titulo a:focus-visible { outline: none; }
.card:has(.card__titulo a:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.card__texto { color: var(--texto-suave); }
.card__mais {
  margin-top: auto;
  padding-top: var(--esp-2);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--cor-laranja-texto);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-semi);
  font-size: var(--fs-sm);
}
.card:has(.card__titulo a) { cursor: pointer; }
.card:has(.card__titulo a):hover {
  border-color: var(--cor-grafite);
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}
.card:has(.card__titulo a):hover .card__titulo a { color: var(--cor-laranja-texto); }

.card--sintoma { border-left: 4px solid var(--cor-laranja); }
.card--sintoma .card__icone { background: var(--cor-pendente-fundo); color: var(--cor-laranja-texto); }

/* --- Etapas do processo --- */
.etapas {
  list-style: none;
  padding: 0;
  counter-reset: etapa;
  display: grid;
  gap: var(--esp-4);
}
.etapas > li {
  counter-increment: etapa;
  position: relative;
  padding-left: 3.5rem;
  min-height: 2.5rem;
}
.etapas > li::before {
  content: counter(etapa);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--cor-laranja);
  border-radius: 50%;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-display);
  color: var(--texto-forte);
}
.etapas h3 { font-size: var(--fs-lg); }
.etapas p { color: var(--texto-suave); margin-top: var(--esp-1); }
@media (min-width: 48em) {
  .etapas--grade { grid-template-columns: repeat(2, 1fr); column-gap: var(--esp-6); }
}

/* --- FAQ (details/summary nativo: funciona sem JS) --- */
.faq { border-top: 1px solid var(--cor-linha); max-width: var(--container-estreito); }
.faq__item { border-bottom: 1px solid var(--cor-linha); }
.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--alvo-toque);
  padding-block: var(--esp-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-lg);
  font-weight: var(--peso-semi);
  color: var(--texto-forte);
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::after {
  content: "";
  flex-shrink: 0;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: var(--esp-2);
  border-right: 2px solid var(--cor-laranja-texto);
  border-bottom: 2px solid var(--cor-laranja-texto);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--curva);
}
.faq__item[open] > .faq__pergunta::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq__pergunta:hover { color: var(--cor-laranja-texto); }
.faq__resposta { padding-bottom: var(--esp-5); color: var(--texto); }
.faq__resposta > * + * { margin-top: var(--esp-3); }

/* --- Avisos --- */
.aviso {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-4);
  border: 1px solid currentColor;
  border-left-width: 4px;
  border-radius: var(--raio);
  max-width: var(--medida);
}
.aviso > .icone { margin-top: 0.15em; }
.aviso__conteudo { color: var(--texto-forte); }
.aviso__conteudo > * + * { margin-top: var(--esp-2); }
.aviso__titulo { font-family: var(--fonte-titulo); font-weight: var(--peso-negrito); font-size: var(--fs-base); }
.aviso--info { color: var(--cor-info); background: var(--cor-info-fundo); }
.aviso--alerta { color: var(--cor-erro); background: var(--cor-erro-fundo); }
.aviso--pendente { color: var(--cor-laranja-texto); background: var(--cor-pendente-fundo); border-style: dashed; border-left-style: solid; }
.aviso--sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.aviso--erro { color: var(--cor-erro); background: var(--cor-erro-fundo); }

/* --- Faixa de CTA --- */
.faixa-cta {
  background: var(--fundo-escuro);
  color: var(--texto-inverso);
  padding-block: var(--esp-7);
  border-top: 4px solid var(--cor-laranja);
}
.faixa-cta__conteudo { display: grid; gap: var(--esp-5); align-items: center; }
.faixa-cta h2 { color: var(--cor-branco); max-width: 24ch; }
.faixa-cta p { color: var(--texto-inverso-suave); max-width: var(--medida); margin-top: var(--esp-3); }
@media (min-width: 64em) {
  .faixa-cta__conteudo { grid-template-columns: 1fr auto; gap: var(--esp-7); }
}

/* --- Formulários --- */
.formulario { display: grid; gap: var(--esp-5); max-width: 36rem; }
.campo { display: grid; gap: var(--esp-2); }
.campo__rotulo { font-weight: var(--peso-semi); color: var(--texto-forte); }
.campo__rotulo .obrigatorio { color: var(--cor-erro); font-weight: var(--peso-texto); font-size: var(--fs-sm); }
.campo__ajuda { font-size: var(--fs-sm); color: var(--texto-suave); }
.campo__erro {
  display: flex;
  gap: var(--esp-2);
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--peso-semi);
  color: var(--cor-erro);
}
.campo__erro:empty { display: none; }
.entrada {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: var(--esp-2) var(--esp-3);
  background: var(--cor-branco);
  color: var(--cor-carbono);
  border: 1.5px solid var(--cor-linha-forte);   /* 6,33:1 — WCAG 1.4.11 */
  border-radius: var(--raio);
  font-size: 1rem; /* ≥16px evita zoom automático no iOS */
  transition: border-color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva);
}
textarea.entrada { min-height: 8rem; resize: vertical; }
.entrada:hover { border-color: var(--cor-carbono); }
.entrada:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--cor-carbono); }
.entrada[aria-invalid="true"] { border-color: var(--cor-erro); border-width: 2px; }
.campo--opcao { display: flex; gap: var(--esp-3); align-items: flex-start; }
.campo--opcao input {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.15em;
  flex-shrink: 0;
  accent-color: var(--cor-carbono);
}

/* --- Barra fixa de contato (móvel) --- */
.barra-contato {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-barra);
  display: flex;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--gutter) calc(var(--esp-2) + env(safe-area-inset-bottom, 0px));
  background: var(--cor-carbono);
  border-top: 1px solid rgb(232 237 241 / 0.16);
}
.barra-contato .botao { flex: 1; }
body.tem-barra-contato { padding-bottom: calc(var(--altura-barra-contato) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 64em) {
  .barra-contato { display: none; }
  body.tem-barra-contato { padding-bottom: 0; }
}

/* --- Footer --- */
.site-footer {
  background: var(--fundo-escuro);
  color: var(--texto-inverso);
  padding-block: var(--esp-7) var(--esp-5);
  border-top: 4px solid var(--cor-laranja);
  font-size: var(--fs-sm);
}
.site-footer__grade { display: grid; gap: var(--esp-6); }
.site-footer__marca img { width: 12.5rem; height: auto; }
.site-footer__slogan { margin-top: var(--esp-3); color: var(--texto-inverso-suave); }
.site-footer h2 {
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--cor-branco);
  margin-bottom: var(--esp-3);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--texto-inverso);
  text-decoration: none;
}
.site-footer li a:hover { color: var(--cor-laranja); text-decoration: underline; }
.site-footer__nap { font-style: normal; display: grid; gap: var(--esp-2); }
.site-footer__nap .rotulo-dado { color: var(--texto-inverso-suave); }
.site-footer__base {
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-7);
  padding-top: var(--esp-5);
  border-top: 1px solid rgb(232 237 241 / 0.16);
  color: var(--texto-inverso-suave);
  font-size: var(--fs-xs);
}
@media (min-width: 48em) {
  .site-footer__grade { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .site-footer__grade { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
  .site-footer__base { grid-template-columns: 1fr auto; }
}