/* Landing Wellbi — meio: vídeo, 3 passos (tabs), CTA banner e órgãos internacionais. */

/* ── Vídeo ── */
.lp-video { background: var(--lp-white); display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 2.2vw, 32px); padding: clamp(24px, 3.5vw, 50px) 16px 0; }
.lp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; background: var(--lp-white); border: 1px solid var(--lp-border); border-radius: 9999px; box-shadow: var(--lp-shadow-xs); font: 500 16px/1.5 var(--lp-font-ui); color: var(--lp-primary); }
/* largura no FRAME (o pai .lp-video é definido → % resolve); no img o % seria circular e ele encostava à esquerda */
.lp-video__frame { position: relative; width: min(1032px, 100%); }
.lp-video__trigger { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.lp-video__frame img { display: block; width: 100%; height: auto; border-radius: clamp(8px, 1.67vw, 24px); box-shadow: 0 4px 32px rgba(22, 72, 112, 0.12); }
.lp-video__play { position: absolute; inset: 0; margin: auto; width: clamp(48px, 7vw, 100px); height: clamp(48px, 7vw, 100px); background: rgba(255, 255, 255, 0.5); clip-path: polygon(18% 0, 100% 50%, 18% 100%); border-radius: 2px; transition: background-color 0.15s ease; }
.lp-video__trigger:hover .lp-video__play { background: rgba(255, 255, 255, 0.75); }
.lp-video__iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: clamp(8px, 1.67vw, 24px); box-shadow: 0 4px 32px rgba(22, 72, 112, 0.12); }

/* ── 3 passos ── */
.lp-tabs { display: flex; width: max-content; margin: 0 auto clamp(24px, 2.8vw, 40px); padding: 4px; background: var(--lp-surface); border-radius: 12px; }
.lp-tab { padding: 5.5px 10px; border: 0; background: none; border-radius: 10px; font: 500 14px/1.43 var(--lp-font-ui); color: var(--lp-faq-ink); cursor: pointer; }
.lp-tab:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: 2px; }
.lp-tab.is-active { background: var(--lp-white); color: var(--lp-primary); box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1); }
.lp-steps .lp-section__head { align-items: flex-start; }
.lp-steps__row { position: relative; display: flex; align-items: flex-start; }
.lp-steps__row::before { content: ''; position: absolute; top: 32px; left: 15%; right: 15%; border-top: 1px solid var(--lp-border); } /* linha atrás dos chips (Figma I34:8669;34:8926) */
.lp-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 32px; }
.lp-step__chip { display: inline-flex; padding: 16px; background: var(--lp-chip); border: 2px solid var(--lp-primary); border-radius: 9999px; }
.lp-step__label { font: 600 14px/1.6 var(--lp-font-body); color: var(--lp-primary); margin-top: 8px; }
.lp-step__title { font: 700 17px/1.6 var(--lp-font-title); color: var(--lp-ink); }
.lp-step__hint { font: 400 13px/1.6 var(--lp-font-body); color: var(--lp-text-2); }
.lp-step__body { font: 400 16px/1.49 var(--lp-font-title); color: var(--lp-text-2); }

/* ── CTA banner ── */
.lp-cta { background: var(--lp-white); padding-bottom: clamp(72px, 8.33vw, 120px); }
.lp-cta__banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4.45vw, 64px); background: var(--lp-primary); border-radius: clamp(8px, 1.4vw, 20px); }
.lp-cta__decor { position: absolute; top: 0; left: 0; width: min(660px, 60%); height: auto; pointer-events: none; }
.lp-cta__copy { position: relative; }
.lp-cta__title { font: 700 clamp(28px, 2.25vw, 32px)/1.6 var(--lp-font-title); color: var(--lp-white); }
.lp-cta__sub { font: 400 16px/1.65 var(--lp-font-body); color: rgba(255, 255, 255, 0.82); max-width: 380px; margin-top: 8px; }
.lp-cta__banner .lp-btn { position: relative; flex-shrink: 0; }

/* ── Órgãos internacionais ── */
.lp-orgs__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-org { display: flex; flex-direction: column; gap: 16px; }
.lp-org__logo { align-self: flex-start; }
.lp-org__name { display: flex; align-items: center; gap: 8px; font: 700 18px/1.33 var(--lp-font-title); color: var(--lp-ink); }
.lp-org__full { font: 400 14px/1.53 var(--lp-font-body); color: var(--lp-text-2); margin-top: auto; }
.lp-org--cca { display: none; } /* Figma desktop mostra só CDC/NICE/CMA; CCA aparece no carrossel mobile */

/* ── Mobile ── */
@media (max-width: 767.98px) {
  .lp-pill { padding: 6px 12px; font-size: 14px; }
  .lp-steps__row { flex-direction: column; align-items: stretch; gap: 24px; }
  .lp-steps__row::before { content: none; }
  .lp-step { padding: 0; }
  .lp-step__chip { padding: 12px; border-width: 1.5px; }
  .lp-step__chip img { width: 24px; height: 24px; }
  .lp-step__title { font-size: 14px; }
  .lp-step__hint { font-size: 10px; }
  .lp-step__body { font-size: 14px; line-height: 1.57; }

  .lp-cta__banner { flex-direction: column; align-items: center; text-align: center; }
  .lp-cta__decor { width: 100%; }
  .lp-cta__banner .lp-btn { width: 100%; }

  .lp-orgs__cards { display: flex; } /* re-afirma o carrossel do landing-base sobre o grid desktop */
  .lp-org--cca { display: flex; }
}

/* No toque, a aba precisa de alvo confortável: com o padding do desktop ela fica com 31px de altura, abaixo
   dos 44px que o dedo pede (WCAG 2.5.5). A largura já vem do texto. */
@media (max-width: 767.98px) {
  .lp-tab { padding-block: 12px; }
}