/* Landing Wellbi — fim: por que agir agora, depoimentos, FAQ e footer. */

/* ── 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%); border-radius: 16px; object-fit: cover; }
.lp-why__text { display: flex; flex-direction: column; gap: 24px; flex: 1; }
.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; }

/* ── Depoimentos ── */
.lp-testimonials__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.lp-quote { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.lp-quote--strong { box-shadow: var(--lp-shadow-card-strong); }
.lp-quote__mark { font: 700 56px/0.7 var(--lp-font-title); color: var(--lp-primary); }
.lp-quote__text { font: italic 400 15px/1.7 var(--lp-font-body); color: var(--lp-text-2); }
.lp-quote__author { display: flex; align-items: center; gap: 14px; padding-top: 8px; margin-top: auto; }
.lp-quote__avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; background: var(--lp-chip); font: 700 14px/1.6 var(--lp-font-body); color: var(--lp-primary); }
.lp-quote__name { display: block; font: 700 14px/1.6 var(--lp-font-body); color: var(--lp-ink); }
.lp-quote__role { display: block; font: 400 12.8px/1.6 var(--lp-font-body); color: var(--lp-text-2); }
.lp-dots--desktop { display: flex; margin-top: 40px; } /* Figma desktop mostra dots nos depoimentos */

/* ── FAQ ── */
.lp-faq__list { max-width: 720px; margin: 0 auto; }
.lp-faq__q { margin: 0; }
.lp-faq__q button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 0; background: none; border: 0; border-bottom: 1px solid var(--lp-border-2); font: 500 18px/1.5 var(--lp-font-ui); color: var(--lp-faq-ink); text-align: left; cursor: pointer; }
.lp-faq__q img { flex-shrink: 0; transition: transform 0.3s ease; }
.lp-faq__q button[aria-expanded='true'] img { transform: rotate(180deg); }
.lp-faq__a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.3s ease, visibility 0.3s ease; }
.lp-faq__a.is-open { grid-template-rows: 1fr; visibility: visible; }
.lp-faq__a p { overflow: hidden; font: 400 16px/1.6 var(--lp-font-body); color: var(--lp-text-2); }
.lp-faq__a.is-open p { padding-block: 4px 20px; }

/* ── Footer ── */
.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__tagline { font: 400 14px/1.43 var(--lp-font-body); color: var(--lp-text-2); }
.lp-footer__social { display: flex; gap: 12px; }
.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; }
/* escopo em ul: sem isso a cor cinza vazava pro texto do botão "Agendar demo" (branco → cinza sujo sobre azul) */
.lp-footer__col ul a { font: 400 14px/1.43 var(--lp-font-body); color: var(--lp-text-2); }
.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 { font: 400 12px/1.33 var(--lp-font-body); color: var(--lp-text-2); }
.lp-footer__legal ul { display: flex; gap: 16px; }
.lp-footer__legal a { font: 400 12px/1.33 var(--lp-font-body); color: var(--lp-text-2); }
.lp-footer__legal a:hover { color: var(--lp-primary); }

/* ── Mobile ── */
@media (max-width: 767.98px) {
  .lp-why__row { flex-direction: column; gap: 16px; }
  .lp-why__img { width: 100%; 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-testimonials__cards { display: flex; } /* re-afirma o carrossel do landing-base sobre o grid desktop */
  /* teto, nao largura fixa — ver o comentario do [data-carousel] em landing-base.css */
  .lp-testimonials__cards > .lp-card { flex-basis: min(349px, 100% - 24px); padding: 16px; }
  .lp-quote__text { font-size: 14px; line-height: 1.57; }
  .lp-dots--desktop { margin-top: 24px; }

  .lp-faq__q button { font-size: 16px; line-height: 1.5; }

  .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; }
}

/* ── Explicando a Dor ── */
/* O texto das respostas NAO herda --lp-text-2 (#7E8388). Aquele token reprova AA — 3.83:1 no branco e
   3.65:1 no fundo alternado — e o desvio esta registrado como decisao de fidelidade ao Figma para copy de
   MARKETING. Conteudo de educacao em dor e outra coisa: o publico e justamente quem convive com dor cronica,
   perfil correlacionado com idade e baixa visao. Aqui vale o texto principal, que passa com folga. */
.lp-pain .lp-faq__a p { color: var(--lp-ink); }
/* A seção reusa .lp-faq__* (padrao de disclosure da casa), entao so a nota de isencao precisa de estilo.
   Ela nao e decorativa: e o que separa conteudo educativo de orientacao clinica individual. */
.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; }

/* ===== Contato flutuante (WhatsApp) ===== */
/* Teal green oficial e nao o verde claro da marca: com o claro o glifo branco fica em 1.98:1 e o botao em
   1.90:1 contra o fundo da pagina — os dois abaixo dos 3:1 da WCAG 1.4.11 para objeto grafico. */
.lp-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  /* abaixo do menu fixo (50) e do link de pular pro conteudo (100): o botao nao pode cobrir a navegacao
     nem o atalho de acessibilidade */
  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);
}

@media (prefers-reduced-motion: reduce) {
  .lp-whatsapp,
  .lp-whatsapp:hover {
    transition: none;
    transform: none;
  }
}