/* Joy Saúde e Seguros: estilos da página (usa tokens.css e componentes.css) */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--branco); color: var(--texto); font-family: var(--font-corpo); font-size: 16px; line-height: 26px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.pular { position: absolute; left: var(--esp-5); top: -100px; z-index: 50; background: var(--petroleo); color: var(--on-petroleo); padding: var(--esp-3) var(--esp-5); border-radius: var(--raio-md); }
.pular:focus { top: var(--esp-3); }

.conteudo { width: 100%; max-width: calc(var(--largura-conteudo) + 2 * var(--esp-5)); margin-inline: auto; padding-inline: var(--esp-5); }
@media (min-width: 768px) { .conteudo { max-width: calc(var(--largura-conteudo) + 2 * var(--esp-8)); padding-inline: var(--esp-8); } }

/* ---- tipografia ---- */
.t-display, .t-h1, .t-h2, .t-h3 { font-family: var(--font-titulo); font-weight: 800; margin: 0; text-wrap: balance; }
.t-display { font-size: 34px; line-height: 40px; letter-spacing: -0.01em; color: var(--magenta); }
.t-h1 { font-size: 28px; line-height: 34px; color: var(--magenta); }
.t-h2 { font-size: 22px; line-height: 28px; color: var(--petroleo); }
.t-h3 { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--magenta); }
.t-destaque { font-size: 18px; line-height: 28px; margin: 0; color: var(--texto); }
.t-pequeno { font-size: 14px; line-height: 22px; color: var(--texto-suave); margin: 0; }
@media (min-width: 768px) {
  .t-display { font-size: 56px; line-height: 62px; letter-spacing: -0.015em; }
  .t-h1 { font-size: 40px; line-height: 48px; }
  .t-h2 { font-size: 28px; line-height: 36px; }
  .t-h3 { font-size: 20px; line-height: 28px; }
  .t-destaque { font-size: 20px; line-height: 30px; }
}
.fio { display: block; width: 40px; height: 3px; background: var(--ambar); border-radius: 2px; margin-bottom: var(--esp-4); }

/* ---- cabeçalho ---- */
.cabecalho { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--branco); border-bottom: 1px solid var(--linha); }
.cabecalho__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); min-height: 64px; }
.cabecalho__logo { display: inline-flex; align-items: center; min-height: var(--alvo-toque); }
.cabecalho__logo img { height: 40px; width: auto; }
.cabecalho__nav { display: none; gap: var(--esp-2); margin-left: auto; margin-right: var(--esp-4); }
.cabecalho__nav a { display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding: 0 var(--esp-4); border-radius: var(--raio-pill); font-family: var(--font-titulo); font-weight: 700; color: var(--petroleo); text-decoration: none; }
.cabecalho__nav a:hover { color: var(--magenta); background: var(--rosa-suave); }
.cabecalho .joy-btn { padding: 10px 20px; }
@media (min-width: 768px) {
  .cabecalho__linha { min-height: 80px; }
  .cabecalho__logo img { height: 48px; }
  .cabecalho__nav { display: flex; }
}

/* ---- seções ---- */
.secao { padding-block: var(--esp-16); scroll-margin-top: 64px; }
@media (min-width: 768px) { .secao { padding-block: var(--esp-24); scroll-margin-top: 80px; } }
.secao--rosa { background: var(--rosa-suave); }
.secao--creme { background: var(--creme-suave); }
.secao__cabeca { display: flex; flex-direction: column; gap: var(--esp-4); max-width: var(--largura-texto); margin-bottom: var(--esp-8); }
@media (min-width: 768px) { .secao__cabeca { margin-bottom: var(--esp-12); } }

/* ---- topo ---- */
.topo { padding-block: var(--esp-8) var(--esp-16); }
.topo__grade { display: grid; gap: var(--esp-8); align-items: center; }
.topo__texto { display: flex; flex-direction: column; gap: var(--esp-5); }
.topo__acoes { display: flex; flex-direction: column; gap: var(--esp-3); margin-top: var(--esp-2); }
.topo__foto { margin: 0; position: relative; isolation: isolate; }
.topo__foto::before { content: ""; position: absolute; inset: 24px -12px -12px 24px; background: var(--rosa-suave); border-radius: var(--raio-xl); z-index: -1; }
.topo__foto img { width: 100%; border-radius: var(--raio-lg); aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 560px) { .topo__acoes { flex-direction: row; flex-wrap: wrap; } }
@media (min-width: 900px) {
  .topo { padding-block: var(--esp-16) var(--esp-24); }
  .topo__grade { grid-template-columns: 1.05fr 1fr; gap: var(--esp-16); }
  .topo__foto img { border-radius: var(--raio-xl); }
}

/* ---- serviços ---- */
.servicos__grade { display: grid; gap: var(--esp-4); grid-template-columns: minmax(0, 1fr); }
.servicos__grade > * { min-width: 0; }
@media (min-width: 768px) {
  .servicos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6); }
  .servicos__grade > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .servicos__grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .servicos__grade > * { grid-column: span 2; }
  .servicos__grade > :nth-child(n + 4) { grid-column: span 3; }
}
.joy-servico .joy-servico__link { text-decoration-color: var(--ambar); }

/* ---- sobre ---- */
.sobre__texto { display: flex; flex-direction: column; gap: var(--esp-4); max-width: var(--largura-texto); }
.sobre__texto p { margin: 0; }
.mvv { display: grid; gap: var(--esp-4); margin-top: var(--esp-12); grid-template-columns: minmax(0, 1fr); padding: 0; list-style: none; }
.mvv > li { min-width: 0; display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-6); border-radius: var(--raio-lg); background: var(--creme-suave); }
.mvv .joy-servico__icone { background: var(--ambar); color: var(--on-ambar); }
.mvv p { margin: 0; color: var(--texto); }
.mvv .t-h3 { color: var(--petroleo); }
@media (min-width: 768px) { .mvv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-6); } }
.numeros { margin-top: var(--esp-12); }
.depoimento { margin: var(--esp-12) 0 0; padding: var(--esp-8) var(--esp-6); border-radius: var(--raio-xl); background: var(--rosa-suave); display: flex; flex-direction: column; gap: var(--esp-5); }
.depoimento__sinal { width: 40px; height: 40px; color: var(--magenta); }
.depoimento blockquote { margin: 0; font-family: var(--font-titulo); font-weight: 700; font-size: 18px; line-height: 28px; color: var(--petroleo); max-width: 62ch; }
.depoimento figcaption { display: flex; flex-direction: column; font-size: 14px; line-height: 22px; color: var(--texto-suave); }
.depoimento figcaption strong { font-size: 16px; color: var(--petroleo); }
@media (min-width: 768px) {
  .depoimento { padding: var(--esp-12) var(--esp-12); }
  .depoimento blockquote { font-size: 22px; line-height: 34px; }
}
.parceiras { margin-top: var(--esp-12); display: flex; flex-direction: column; gap: var(--esp-6); }
.parceiras__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-4); padding: 0; margin: 0; list-style: none; align-items: center; justify-items: center; }
.parceiras__lista img { height: 44px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (min-width: 768px) { .parceiras__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- contato ---- */
.contato__grade { display: grid; gap: var(--esp-8); }
.contato__chamada { display: flex; flex-direction: column; gap: var(--esp-5); align-items: flex-start; max-width: var(--largura-texto); }
.contato__chamada .joy-btn { width: 100%; }
.contato__lista { display: grid; gap: var(--esp-4); padding: 0; margin: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
.contato__item { min-width: 0; display: flex; gap: var(--esp-4); padding: var(--esp-5) var(--esp-6); border-radius: var(--raio-lg); background: var(--branco); }
.contato__item .joy-servico__icone { flex: none; width: 48px; height: 48px; }
.contato__item .joy-servico__icone svg { width: 24px; height: 24px; }
.contato__item h3 { margin: 0 0 var(--esp-1); font-family: var(--font-titulo); font-weight: 700; font-size: 16px; line-height: 24px; color: var(--petroleo); }
.contato__item p, .contato__item address { margin: 0; font-style: normal; color: var(--texto); overflow-wrap: anywhere; }
.contato__item a { color: var(--link); font-weight: 600; text-underline-offset: 3px; }
.contato__item .maps { display: inline-block; margin-top: var(--esp-2); }
@media (min-width: 560px) { .contato__chamada .joy-btn { width: auto; } }
@media (min-width: 900px) {
  .contato__grade { grid-template-columns: 1fr 1.1fr; gap: var(--esp-16); align-items: start; }
}

/* ---- rodapé ---- */
.joy-rodape { padding-inline: 0; }
.joy-rodape .conteudo { padding-block: 0; }
.joy-rodape .joy-rodape__grade, .joy-rodape .joy-rodape__legal { padding-inline: var(--esp-5); }
@media (min-width: 768px) { .joy-rodape .joy-rodape__grade, .joy-rodape .joy-rodape__legal { padding-inline: 0; } }

/* ---- botão flutuante de WhatsApp ---- */
.wa-flutuante { position: fixed; right: var(--esp-4); bottom: calc(var(--esp-4) + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 56px; height: 56px; border-radius: var(--raio-pill); background: var(--ambar); color: var(--on-ambar); display: grid; place-items: center; box-shadow: var(--sombra-flutuante); transition: background-color .15s ease; }
.wa-flutuante:hover { background: var(--ambar-escuro); }
.wa-flutuante svg { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) { .wa-flutuante { transition: none; } }

/* ---- ícones (Lucide, traço 2px) ---- */
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- WhatsApp verde ---- */
.joy-btn.joy-btn--wa { background: #14803F; color: #fff; }
.joy-btn.joy-btn--wa:hover { background: #0F6B34; }
.wa-flutuante { background: #14803F; color: #fff; }
.wa-flutuante:hover { background: #0F6B34; }
@media (min-width: 1024px) { .servicos__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } .servicos__grade > *, .servicos__grade > :nth-child(n + 4) { grid-column: auto; } }
@media (min-width: 768px) { .servicos__grade > :last-child { grid-column: auto; } }

/* ---- números: menores, sem quebra ---- */
.numeros .joy-numeros__valor { font-size: clamp(21px, 6vw, 26px); line-height: 32px; white-space: nowrap; }
.numeros .joy-numeros__rotulo { text-wrap: balance; }
@media (min-width: 768px) { .numeros .joy-numeros__valor { font-size: 26px; line-height: 36px; } }
@media (min-width: 1024px) { .numeros .joy-numeros__valor { font-size: 40px; line-height: 48px; } }

/* ---- crédito ---- */
.joy-rodape__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-2) var(--esp-4); }
.credito { font-size: 12px; line-height: 18px; opacity: .8; }
.credito a { color: inherit; text-underline-offset: 3px; }
.credito a:hover { opacity: 1; }

/* ---- formulário de cotação (abre o WhatsApp) ---- */
[hidden] { display: none !important; }
.cotacao { display: flex; flex-direction: column; gap: var(--esp-4); width: 100%; padding: var(--esp-6); background: var(--branco); border-radius: var(--raio-lg); box-shadow: var(--sombra-cartao); }
.cotacao .t-h3 { color: var(--petroleo); }
.campo { display: flex; flex-direction: column; gap: var(--esp-1); }
.campo label { font-family: var(--font-titulo); font-weight: 700; font-size: 14px; line-height: 22px; color: var(--petroleo); }
.campo input, .campo select { width: 100%; min-height: var(--alvo-toque); padding: 10px 14px; font: inherit; font-size: 16px; color: var(--texto); background: var(--branco); border: 2px solid var(--borda-campo); border-radius: var(--raio-md); }
.campo input:focus-visible, .campo select:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-color: var(--petroleo); }
.cotacao__erro { margin: 0; color: var(--erro); font-weight: 600; }
.cotacao .t-pequeno { margin: 0; }
.cotacao .t-pequeno a { color: var(--link); }