/* Cartão da Gente — ajustes da página inicial (faixa dos check-ups e "Seja nosso parceiro"). */

/* "Conheça os check-ups." em faixa azul com letras brancas */
.checkups-faixa { background: linear-gradient(120deg, var(--blue), var(--navy)); color: #fff; border-radius: var(--radius); padding: 26px 30px; align-items: center }
.checkups-faixa h3 { color: #fff }
.checkups-faixa .overline { color: #cfe0fb }
.checkups-faixa > span { color: #dbe8fb }
@media (max-width: 760px) { .checkups-faixa { padding: 22px 20px } }

/* Seja nosso parceiro */
.parceiro-section { background: #fff }
.parceiro-copy h2 { font-size: clamp(2.5rem, 3.8vw, 3.625rem); line-height: 1.16; margin: 22px 0; letter-spacing: -.055em; max-width: 480px }
.parceiro-copy h2 em { color: var(--blue) }
.parceiro-copy > p { color: var(--muted); font-size: 1rem; line-height: 1.9; max-width: 410px }
.parceiro-section .form-card { background: var(--paper) }
.parceiro-vantagens { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px }
.parceiro-vantagens li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: .9375rem }
.parceiro-vantagens .icon { width: 20px; height: 20px; flex: none; color: var(--blue) }

/* Nota do cartão: "4 check-ups por mês!" numa linha (o 4 em destaque, junto do texto)
   e o valor do plano numa etiqueta azul logo abaixo. */
.nota-oferta { gap: 14px; padding: 16px 20px }
.nota-oferta > div { gap: 9px }
.nota-oferta .nota-titulo { display: flex; align-items: baseline; gap: 6px; font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.1; white-space: nowrap }
.nota-oferta .nota-numero { font-family: "Gente Display", sans-serif; font-size: 2rem; font-weight: 700; line-height: .9; letter-spacing: -.04em; color: var(--blue) }
.nota-oferta .nota-preco { display: flex; align-items: center; gap: 8px; white-space: nowrap }
.nota-oferta .nota-preco > small { font-size: .8125rem; color: var(--muted) }
.nota-oferta .nota-preco b { display: inline-flex; align-items: baseline; gap: 3px; padding: 6px 12px; border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--navy)); color: #fff; font-family: "Gente Display", sans-serif;
  font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; box-shadow: 0 6px 16px #2474e540 }
@media (max-width: 760px) {
  .nota-oferta { padding: 12px 14px; gap: 10px }
  .nota-oferta .nota-titulo { font-size: .875rem }
  .nota-oferta .nota-numero { font-size: 1.625rem }
  .nota-oferta .nota-preco b { font-size: 1.125rem; padding: 5px 10px }
  .nota-oferta .nota-preco > small { font-size: .75rem }
}

/* Cards dos check-ups em azul */
.checkup-card { background: linear-gradient(160deg, var(--blue), var(--navy)); border-color: transparent; color: #fff }
.checkup-card:hover { border-color: transparent; box-shadow: 0 18px 36px #0b448133 }
.checkup-card h3, .checkup-card .card-index { color: #fff }
.checkup-card > .overline { color: #bcd3f5 }
.checkup-card ul { border-color: #ffffff2e }
.checkup-card li { color: #e3edfb }
.checkup-card li:before { background: #8fc0ff }
.checkup-card .icon-box { background: #ffffff1f; color: #fff }

/* Página Seja nosso parceiro: formulário logo no topo, sem hero */
.parceiro-topo { background: var(--paper); padding: 48px 0 80px }
.parceiro-topo .lead-layout { align-items: start; gap: 56px }
.parceiro-copy h1 { font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1.12; letter-spacing: -.05em; margin: 16px 0 14px; color: var(--navy) }
.parceiro-copy h1 em { color: var(--blue); font-style: normal }
.parceiro-copy > p { color: var(--muted); font-size: 1rem; line-height: 1.75; max-width: 440px; margin: 0 }
.parceiro-vantagens { margin-top: 22px }
.parceiro-whats { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: .9375rem; color: var(--muted); text-decoration: none }
.parceiro-whats strong { color: var(--blue) }
.parceiro-whats .icon { width: 20px; height: 20px; color: var(--blue) }
.parceiro-whats:hover strong { text-decoration: underline }
.parceiro-topo .form-card { background: #fff }
.parceiro-form-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px }
.parceiro-form-titulo { font-size: 1.375rem; letter-spacing: -.03em; margin: 0; color: var(--navy) }
@media (max-width: 900px) {
  .parceiro-topo { padding: 28px 0 56px }
  .parceiro-topo .lead-layout { gap: 24px }
  .parceiro-vantagens { display: none }
  .parceiro-whats { margin-top: 16px }
}

/* "Peça seu Cartão da Gente." em destaque forte (pedido do cliente):
   - título maior, com "Cartão da Gente." numa etiqueta azul que pulsa (cresce e brilha);
   - borda em degradê azul girando em volta do formulário e brilho pulsando;
   - ponto "ao vivo" ao lado de "Vamos começar". Tudo nas cores do site. */
@property --pedido-angulo { syntax: "<angle>"; inherits: false; initial-value: 0deg }
.form-card-destaque { position: relative; border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              conic-gradient(from var(--pedido-angulo), var(--blue), var(--sky), #cfe3ff, var(--sky), var(--blue)) border-box;
  animation: pedido-borda 4s linear infinite, pedido-brilho 2.4s ease-in-out infinite }
.form-heading .pedido-titulo { font-size: clamp(2.125rem, 3vw, 2.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -.045em; margin: 14px 0 6px }
.pedido-titulo em { display: inline-block; margin-top: 4px; padding: .06em .38em .12em; border-radius: 14px; font-style: normal; color: #fff;
  /* o mesmo azul do botão "Enviar meu cadastro", com um reflexo que passa por ele */
  background: linear-gradient(100deg, var(--blue) 0%, var(--blue) 38%, #6aaeff 50%, var(--blue) 62%, var(--blue) 100%); background-size: 250% 100%;
  box-shadow: 0 8px 22px #368cff59; transform-origin: left center;
  animation: pedido-cor 3s linear infinite, pedido-pulso 2.4s ease-in-out infinite }
.pedido-ao-vivo { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-weight: 700 }
.pedido-ao-vivo i { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--sky); flex: none; box-shadow: 0 0 0 3px #368cff33 }
.pedido-ao-vivo i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sky); animation: pedido-ponto 1.4s ease-out infinite }
@keyframes pedido-borda { to { --pedido-angulo: 360deg } }
@keyframes pedido-brilho {
  0%, 100% { box-shadow: 0 18px 60px #082e4914, 0 0 0 0 #368cff00, 0 0 24px #368cff33 }
  50% { box-shadow: 0 18px 60px #082e4920, 0 0 0 10px #368cff3d, 0 0 70px #368cff99 }
}
@keyframes pedido-pulso {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 22px #368cff59 }
  50% { transform: scale(1.06); box-shadow: 0 10px 34px #368cffb3, 0 0 0 6px #368cff33 }
}
@keyframes pedido-cor { to { background-position: -200% 0 } }
@keyframes pedido-ponto { 0% { transform: scale(1); opacity: .8 } 100% { transform: scale(3.2); opacity: 0 } }
@media (max-width: 760px) {
  .form-heading .pedido-titulo { font-size: 1.875rem }
  .pedido-titulo em { border-radius: 11px }
}
@media (prefers-reduced-motion: reduce) {
  .form-card-destaque, .pedido-titulo em, .pedido-ao-vivo i::after { animation: none }
  .form-card-destaque { box-shadow: 0 0 0 8px #368cff3d, 0 0 50px #368cff66 }
}

/* "O que está incluído": os 4 check-ups, numerados como os cards */
.faq-checkups { margin: 14px 0 0; padding-left: 1.4em; display: grid; gap: 8px; color: var(--muted); line-height: 1.6 }
.faq-checkups li::marker { color: var(--blue); font-weight: 700 }
.faq-checkups strong { color: var(--navy) }

/* "Como funciona" com 4 passos: 4 colunas no computador, 2 no tablet (no celular fica 1) */
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
@media (min-width: 601px) and (max-width: 999px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px } }

/* Subtítulo de cada check-up ("Coração", "Ossos e articulações"...) */
.checkup-card .checkup-sub { display: block; margin-top: 4px; font-size: .8125rem; color: #bcd3f5 }

/* Seja parceiro: "por que é seguro" (texto do cliente) na coluna da esquerda.
   No computador: título e explicação à esquerda, formulário à direita.
   No celular: título, formulário e depois a explicação. */
.parceiro-topo .lead-layout { grid-template-areas: "copy form" "explica form"; grid-template-rows: auto 1fr; row-gap: 22px }
.parceiro-topo .parceiro-copy { grid-area: copy }
.parceiro-topo .form-card { grid-area: form }
.parceiro-explica { grid-area: explica; max-width: 520px }
.parceiro-seguro { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; color: var(--ink); font-size: 1.0625rem; line-height: 1.6 }
.parceiro-seguro .icon { width: 30px; height: 30px; flex: none; color: var(--blue) }
.parceiro-passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; gap: 16px }
.parceiro-passos li { counter-increment: passo; position: relative; padding-left: 48px; display: grid; gap: 4px; color: var(--muted); font-size: .9375rem; line-height: 1.6 }
.parceiro-passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700; font-size: .9375rem }
.parceiro-passos li > strong { color: var(--navy); font-size: 1rem }
.parceiro-passos li strong strong, .parceiro-passos li span strong { color: var(--navy) }
.parceiro-resumo { margin-top: 24px; padding: 20px 22px; border-radius: 18px; background: linear-gradient(150deg, var(--blue), var(--navy)); color: #fff }
.parceiro-resumo .overline { color: #cfe0fb; display: block; margin-bottom: 12px }
.parceiro-resumo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.parceiro-resumo li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; line-height: 1.5 }
.parceiro-resumo li .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #8fc0ff }
.parceiro-resumo strong { color: #fff }
@media (max-width: 800px) {
  .parceiro-topo .lead-layout { grid-template-areas: "copy" "form" "explica"; grid-template-rows: auto; row-gap: 24px }
  .parceiro-explica { max-width: none }
}


/* ---------------------------------------------------------------- Landing de pré-venda
   Cabeçalho só com a logo (sem menu, para não tirar a atenção do formulário) */
.landing-page .header .nav, .landing-page .header .menu { display: none !important }
.pv-hero { position: relative; overflow: hidden; padding: 64px 0 80px; background: radial-gradient(ellipse at 15% 20%, #2474e540, transparent 60%), var(--navy) }
.pv-layout { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 470px); gap: 64px; align-items: center }
.pv-copy { color: #fff }
.pv-selo { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: #ffffff17; border: 1px solid #ffffff33;
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #dbe8fb }
.pv-selo i { width: 9px; height: 9px; border-radius: 50%; background: #5ee0a0; box-shadow: 0 0 0 4px #5ee0a033 }
.pv-copy h1 { margin: 22px 0 14px; font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.08; letter-spacing: -.05em; color: #fff }
.pv-copy h1 em { font-style: normal; color: var(--sky) }
.pv-lead { margin: 0 0 26px; font-size: 1.125rem; line-height: 1.6; color: #c9dbf7; max-width: 520px }
.pv-beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 540px }
.pv-beneficios li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; line-height: 1.5; color: #e6efff }
.pv-beneficios .icon { width: 22px; height: 22px; flex: none; margin-top: 1px; color: #5ee0a0 }
.pv-beneficios strong { color: #fff }
.pv-preco { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 0; color: #c9dbf7 }
.pv-preco b { padding: 8px 16px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), var(--sky)); color: #fff;
  font-family: "Gente Display", sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; box-shadow: 0 10px 26px #368cff55 }
.pv-form { position: relative; border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--pedido-angulo), var(--blue), var(--sky), #cfe3ff, var(--sky), var(--blue)) border-box;
  animation: pedido-borda 4s linear infinite, pedido-brilho 2.4s ease-in-out infinite }
.pv-form .pv-titulo { margin: 12px 0 4px; font-size: 1.75rem; letter-spacing: -.04em; color: var(--navy) }
.pv-form .form-heading p { margin: 0 0 18px; color: var(--muted) }
.pv-ok { text-align: center; padding: 10px 4px }
.pv-ok-icone { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e7f8ef; color: #18a35b; margin-bottom: 14px }
.pv-ok-icone .icon { width: 32px; height: 32px }
.pv-ok h2 { margin: 0 0 10px; font-size: 1.625rem; letter-spacing: -.03em; color: var(--navy) }
.pv-ok p { margin: 0 0 12px; color: var(--muted); line-height: 1.6 }
.pv-ok .btn { margin-top: 10px }
@media (max-width: 900px) {
  .pv-hero { padding: 32px 0 56px }
  .pv-layout { grid-template-columns: 1fr; gap: 28px }
  .pv-lead { margin-bottom: 18px }
  .pv-preco { margin-top: 20px }
  .pv-preco b { font-size: 1.625rem }
}
@media (prefers-reduced-motion: reduce) { .pv-form { animation: none } }

/* Política de Privacidade */
.politica { padding: 56px 0 90px }
.politica-texto { max-width: 780px }
.politica-texto h1 { margin: 16px 0 18px; font-size: clamp(2.25rem, 3.6vw, 3rem); letter-spacing: -.05em; color: var(--navy) }
.politica-texto h2 { margin: 34px 0 10px; font-size: 1.375rem; letter-spacing: -.03em; color: var(--navy) }
.politica-texto p, .politica-texto li { color: var(--muted); font-size: 1rem; line-height: 1.75 }
.politica-texto ul { padding-left: 1.2em; display: grid; gap: 6px }
.politica-texto strong { color: var(--ink) }
.politica-texto a:not(.btn) { color: var(--blue) }
.politica-data { margin-top: 36px; font-size: .875rem }
