/* Joy Saúde e Seguros — estilos dos componentes. Valores vêm de tokens.css. */

.joy-root, .joy-root * { box-sizing: border-box; }
.joy-root { font-family: var(--font-corpo); color: var(--texto); font-size: 16px; line-height: 26px; }

/* ---------- Botão ---------- */
.joy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--alvo-toque); padding: 12px 28px;
  border: 0; border-radius: var(--raio-pill);
  font-family: var(--font-titulo); font-size: 16px; line-height: 24px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.joy-btn:active { transform: translateY(1px); }
.joy-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.joy-btn--primario { background: var(--magenta); color: var(--on-magenta); }
.joy-btn--primario:hover { background: var(--magenta-escuro); }
.joy-btn--secundario { background: var(--ambar); color: var(--on-ambar); }
.joy-btn--secundario:hover { background: var(--ambar-escuro); }
.joy-btn--lg { min-height: 56px; padding: 16px 32px; font-size: 18px; }
.joy-btn--bloco { display: flex; width: 100%; }
.joy-btn[disabled], .joy-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.joy-btn svg { width: 20px; height: 20px; flex: none; }
.joy-escuro .joy-btn:focus-visible { outline-color: var(--foco-escuro); }

/* ---------- Cartão de serviço ---------- */
.joy-servico {
  display: flex; flex-direction: column; gap: var(--esp-3);
  padding: var(--esp-6); border-radius: var(--raio-lg);
  background: var(--branco); box-shadow: var(--sombra-cartao);
}
.joy-servico--rosa { background: var(--rosa-suave); box-shadow: none; }
.joy-servico--creme { background: var(--creme-suave); box-shadow: none; }
.joy-servico__icone {
  width: 56px; height: 56px; border-radius: var(--raio-pill);
  display: grid; place-items: center; background: var(--magenta); color: var(--on-magenta);
}
.joy-servico--creme .joy-servico__icone { background: var(--ambar); color: var(--on-ambar); }
.joy-servico__icone svg { width: 28px; height: 28px; }
.joy-servico__titulo { margin: var(--esp-1) 0 0; font-family: var(--font-titulo); font-weight: 700; font-size: 20px; line-height: 26px; color: var(--magenta); }
.joy-servico--creme .joy-servico__titulo { color: var(--petroleo); }
.joy-servico__texto { margin: 0; color: var(--texto-suave); }
.joy-servico__link {
  margin-top: auto; padding-top: var(--esp-2); align-self: flex-start;
  display: inline-flex; align-items: center; min-height: var(--alvo-toque);
  font-family: var(--font-titulo); font-weight: 700; color: var(--link);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.joy-servico__link:hover { color: var(--magenta-escuro); }
.joy-servico__link:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--raio-sm); }

/* ---------- Faixa de números ---------- */
.joy-numeros {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-8) var(--esp-4);
  padding: var(--esp-8) var(--esp-6); border-radius: var(--raio-lg);
  background: var(--petroleo); color: var(--on-petroleo);
  margin: 0; list-style: none;
}
.joy-numeros--ambar { background: var(--ambar); color: var(--on-ambar); }
.joy-numeros__item { display: flex; flex-direction: column; gap: var(--esp-1); }
.joy-numeros__valor { font-family: var(--font-titulo); font-weight: 800; font-size: 40px; line-height: 44px; color: var(--ambar); }
.joy-numeros--ambar .joy-numeros__valor { color: var(--petroleo); }
.joy-numeros__rotulo { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .02em; }
@media (min-width: 768px) {
  .joy-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--esp-12) var(--esp-8); }
  .joy-numeros__valor { font-size: 56px; line-height: 60px; }
}

/* ---------- Rodapé ---------- */
.joy-rodape { background: var(--petroleo); color: var(--on-petroleo); padding: var(--esp-12) var(--esp-5) var(--esp-8); }
.joy-rodape a { color: var(--on-petroleo); text-decoration: underline; text-underline-offset: 3px; }
.joy-rodape a:focus-visible { outline: 2px solid var(--foco-escuro); outline-offset: 2px; border-radius: 4px; }
.joy-rodape__grade { display: grid; gap: var(--esp-8); max-width: var(--largura-conteudo); margin: 0 auto; }
.joy-rodape__logo { width: 160px; height: auto; display: block; }
.joy-rodape__frase { margin: var(--esp-4) 0 0; max-width: 32ch; }
.joy-rodape__titulo { margin: 0 0 var(--esp-3); font-family: var(--font-titulo); font-weight: 700; font-size: 16px; color: var(--ambar); }
.joy-rodape__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--esp-2); }
.joy-rodape__legal {
  max-width: var(--largura-conteudo); margin: var(--esp-8) auto 0; padding-top: var(--esp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  display: flex; flex-direction: column; gap: var(--esp-1); font-size: 14px; line-height: 22px;
}
@media (min-width: 768px) {
  .joy-rodape { padding: var(--esp-16) var(--esp-8) var(--esp-8); }
  .joy-rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; }
  .joy-rodape__legal { flex-direction: row; flex-wrap: wrap; gap: var(--esp-1) var(--esp-6); }
}