/* ==========================================================================
   WM MATIC — Página inicial
   Carregado apenas em /index.html. Depende de tokens, base e components.
   ========================================================================== */

/* --- Hero --- */
.hero {
  background: var(--cor-carbono);
  color: var(--texto-inverso);
  padding-block: var(--esp-6) var(--esp-7);
  overflow: hidden;
  /* contexto escuro */
  --texto: var(--texto-inverso);
  --texto-forte: var(--cor-branco);
  --texto-suave: var(--texto-inverso-suave);
  --link: var(--link-inverso);
  --link-hover: var(--link-inverso-hover);
  --foco: var(--foco-inverso);
}
.hero .rotulo { color: var(--cor-laranja); }
.hero .botao--secundario:hover { color: var(--cor-carbono); }   /* fundo branco no hover: texto carbono */
.hero__grade { display: grid; gap: var(--esp-6); align-items: center; }
.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.08;
  color: var(--cor-branco);
  max-width: 20ch;
  margin-top: var(--esp-3);
}
.hero__subtitulo {
  margin-top: var(--esp-4);
  font-size: var(--fs-lg);
  color: var(--texto-inverso-suave);
  max-width: 38rem;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-6); }
.hero__figura { justify-self: center; width: min(100%, 17rem); }
.hero__figura img { width: 100%; height: auto; }
.hero__figura figcaption {
  margin-top: var(--esp-2);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--texto-inverso-suave);
}
@media (max-width: 29.99em) {
  .hero__acoes .botao { width: 100%; }
}
@media (min-width: 48em) {
  .hero { padding-block: var(--esp-7) var(--esp-8); }
  .hero__figura { width: min(100%, 24rem); }
}
@media (min-width: 64em) {
  .hero__grade { grid-template-columns: 1.15fr 0.85fr; gap: var(--esp-7); }
  .hero__figura { width: 100%; max-width: 30rem; justify-self: end; }
}

/* --- Faixa de confiança --- */
.confianca {
  background: var(--cor-nevoa);
  border-bottom: 1px solid var(--cor-linha);
  padding-block: var(--esp-6);
}
.confianca__lista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--esp-5);
}
.confianca__item { display: flex; gap: var(--esp-3); align-items: flex-start; }
.confianca__item > .icone { color: var(--cor-laranja-texto); margin-top: 0.1em; }
.confianca__item h3 { font-size: var(--fs-base); font-weight: var(--peso-negrito); }
.confianca__item h3 .selo { margin-left: var(--esp-1); }
.confianca__item p { margin-top: var(--esp-1); font-size: var(--fs-sm); color: var(--texto-suave); }
@media (min-width: 48em) { .confianca__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .confianca__lista { grid-template-columns: repeat(4, 1fr); } }

/* --- Grades de cards --- */
.grade--servicos, .grade--sintomas { list-style: none; padding: 0; }
@media (min-width: 64em) {
  .grade--servicos, .grade--sintomas { grid-template-columns: repeat(3, 1fr); }
}
.secao__rodape { margin-top: var(--esp-6); }

/* --- Sintomas --- */
.sintomas__avisos { display: grid; gap: var(--esp-4); margin-top: var(--esp-6); }
.sintomas__avisos .aviso { max-width: none; }
@media (min-width: 64em) { .sintomas__avisos { grid-template-columns: 1fr 1fr; } }

/* --- Processo --- */
@media (min-width: 64em) {
  .processo { grid-template-columns: repeat(4, 1fr); column-gap: var(--esp-5); row-gap: var(--esp-6); }
}

/* --- Sobre (resumo) --- */
.sobre-resumo__grade { display: grid; gap: var(--esp-5); }
.sobre-resumo h2 { color: var(--cor-branco); margin-top: var(--esp-3); }
.sobre-resumo .prosa p { color: var(--texto-inverso); }
@media (min-width: 64em) {
  .sobre-resumo__grade { grid-template-columns: 0.8fr 1.2fr; gap: var(--esp-8); }
}

/* --- Faixa CTA na home: sem rótulo; o título já chama a ação --- */
.faixa-cta .cluster { gap: var(--esp-3); }
@media (max-width: 29.99em) {
  .faixa-cta .cluster .botao { width: 100%; }
}