/* Tema Wellbi — meio: video, 3 passos, CTA e orgaos internacionais. Portado de landing-mid.css. */

/* ── Video ── */
.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); }
.lp-pill::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; background: url(../images/icons/play.svg) center / 16px no-repeat; }
/* 720px (era 1032px): pedido do cliente — no desktop o video tomava a tela e empurrava os passos */
.lp-video__frame { position: relative; width: min(720px, 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; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.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; }
/* painel secundario escondido no CSS (sem piscar antes do JS); o JS libera com .is-shown. No editor, os dois
   ficam visiveis — senao ninguem conseguiria editar os passos do colaborador. */
.lp-tabpanel--secondary { display: none; }
.lp-tabpanel--secondary.is-shown, .editor-styles-wrapper .lp-tabpanel--secondary { display: flex; }
.editor-styles-wrapper .lp-tabpanel + .lp-tabpanel { margin-top: 40px; }
@keyframes lp-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lp-steps__row.is-entering { animation: lp-panel-in 0.28s ease-out both; }
@media (prefers-reduced-motion: reduce) { .lp-steps__row.is-entering { animation: none; } .lp-tab { transition: none; } }
.lp-steps__row::before { content: ''; position: absolute; top: 32px; left: 15%; right: 15%; border-top: 1px solid var(--lp-border); }
.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; margin: 0; background: var(--lp-chip); border: 2px solid var(--lp-primary); border-radius: 9999px; }
.lp-step__chip img { width: 32px; height: 32px; display: block; }
.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 ── */
.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%); margin: 0; pointer-events: none; }
.lp-cta__decor img { width: 100%; height: auto; display: block; }
.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 .wp-block-buttons { position: relative; flex-shrink: 0; }

/* ── Orgaos 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; margin: 0; }
.lp-org__logo img { height: 40px; width: auto; display: block; }
.lp-org--nice .lp-org__logo img { height: 28px; } /* o logo do NICE e baixo e largo — 28px, como na landing */
.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__name img { display: inline-block; height: 16px; width: auto; }
.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; }

/* ── Celular ── */
@media (max-width: 767.98px) {
  .lp-pill { padding: 6px 12px; font-size: 14px; }
  .lp-tab { padding-block: 12px; } /* alvo de toque de 44px (WCAG 2.5.5) */
  .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 .wp-block-buttons,
  .lp-cta__banner .wp-block-button,
  .lp-cta__banner .wp-block-button__link { width: 100%; }

  .lp-org--cca { display: flex; }
}