/* Tema Wellbi — fim: por que agir agora, FAQ, Explicando a Dor, rodape e WhatsApp.
   Portado de landing-bottom.css. O accordion e o bloco Detalhes do WordPress (<details>/<summary> nativo):
   mesma aparencia da landing, zero JS, e o leitor de tela anuncia aberto/fechado sozinho. */

/* ── Por que agir agora ── */
.lp-why__row { display: flex; gap: clamp(16px, 2.8vw, 40px); align-items: flex-start; }
.lp-why__img { width: min(521px, 45%); margin: 0; flex-shrink: 0; }
.lp-why__img img { width: 100%; height: auto; border-radius: 16px; object-fit: cover; display: block; }
.lp-why__text { display: flex; flex-direction: column; gap: 24px; flex: 1; }
/* Seletor DESCENDENTE de proposito, igual ao da landing: ele vence .lp-callout__text por especificidade, e e
   isso que a landing mostra (o destaque em 18px escuro). Fidelidade e ao que aparece na tela, nao ao que o CSS
   de la parecia pretender. */
.lp-why__text p { font: 400 18px/1.56 var(--lp-font-title); color: var(--lp-ink); }
.lp-why__text strong { font-weight: 700; }
.lp-callout { background: var(--lp-chip); border-left: 4px solid var(--lp-primary); border-radius: 0 16px 16px 0; padding: 16px 24px; margin-top: 16px; }
.lp-callout__text { font: 400 16px/1.5 var(--lp-font-title); color: var(--lp-primary); }
.lp-callout__text strong { font-weight: 700; }
.lp-callout__src { font: italic 400 12px/1.5 var(--lp-font-title); color: var(--lp-text-2); margin-top: 8px; }

/* ── FAQ e Explicando a Dor (bloco Detalhes) ── */
.lp-faq__list { max-width: 720px; margin: 0 auto; }
.lp-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--lp-border-2); font: 500 18px/1.5 var(--lp-font-ui); color: var(--lp-faq-ink); cursor: pointer; list-style: none; }
.lp-faq__item > summary::-webkit-details-marker { display: none; }
.lp-faq__item > summary::after { content: ''; flex-shrink: 0; width: 16px; height: 16px; background: url(../images/icons/chevron-down.svg) center / 16px no-repeat; transition: transform 0.3s ease; }
.lp-faq__item[open] > summary::after { transform: rotate(180deg); }
.lp-faq__item > :not(summary) { font: 400 16px/1.6 var(--lp-font-body); color: var(--lp-text-2); margin: 0; padding-block: 12px 20px; }
/* Educacao em dor nao herda o texto secundario: o publico e quem convive com dor cronica (idade, baixa visao),
   e o #7E8388 reprova AA. Mesma decisao registrada na landing. */
.lp-pain .lp-faq__item > :not(summary) { color: var(--lp-ink); }
.lp-dor__note { max-width: 720px; margin: 24px auto 0; font: 400 14px/1.6 var(--lp-font-body); color: var(--lp-text-2); text-align: center; }
@media (prefers-reduced-motion: reduce) { .lp-faq__item > summary::after { transition: none; } }

/* ── Rodape ── */
.lp-footer { background: var(--lp-white); border-top: 1px solid var(--lp-card-border); padding-block: clamp(48px, 4.45vw, 64px); }
.lp-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding-inline: clamp(0px, 1.7vw, 24px); }
.lp-footer__brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.lp-footer__brand figure { margin: 0; }
.lp-footer__brand img { width: 112px; height: auto; display: block; }
.lp-footer__tagline { font: 400 14px/1.43 var(--lp-font-body); color: var(--lp-text-2); }
.lp-footer__col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.lp-footer__col h3 { font: 600 16px/1.5 var(--lp-font-title); color: var(--lp-ink); margin: 0; }
.lp-footer__col ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-footer__col ul a { font: 400 14px/1.43 var(--lp-font-body); color: var(--lp-text-2); text-decoration: none; }
.lp-footer__col ul a:hover { color: var(--lp-primary); }
.lp-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding: 24px clamp(0px, 1.7vw, 24px) 0; border-top: 1px solid var(--lp-border); }
.lp-footer__legal p, .lp-footer__legal a { font: 400 12px/1.33 var(--lp-font-body); color: var(--lp-text-2); text-decoration: none; }
.lp-footer__legal a:hover { color: var(--lp-primary); }

/* ── WhatsApp flutuante ── teal oficial (o verde claro da marca reprova 3:1 da WCAG 1.4.11) */
.lp-whatsapp { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background-color: #128c7e; color: #ffffff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24); transition: transform 0.15s ease; }
.lp-whatsapp svg { width: 30px; height: 30px; }
.lp-whatsapp:hover { transform: scale(1.05); color: #ffffff; }
@media (prefers-reduced-motion: reduce) { .lp-whatsapp, .lp-whatsapp:hover { transition: none; transform: none; } }

/* ── Celular ── */
@media (max-width: 767.98px) {
  .lp-why__row { flex-direction: column; gap: 16px; }
  .lp-why__img { width: 100%; }
  .lp-why__img img { border-radius: 11px; }
  .lp-why__text p { font-size: 14px; line-height: 1.57; }
  .lp-callout { padding: 16px; }
  .lp-callout__text { font-size: 12px; line-height: 1.5; }
  .lp-callout__src { font-size: 10px; }


  .lp-faq__item > summary { font-size: 16px; }

  .lp-footer__grid { display: flex; flex-direction: column; gap: 32px; }
  .lp-footer__col h3 { font-size: 14px; }
  .lp-footer__col ul a { font-size: 12px; }
  .lp-footer__legal { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 32px; }
}