/* Landing (web 01a–01d). Medidas da prancha em 1440 px; só tokens (var(--okf-*)). */
body.landing { overflow-x: hidden; }
.l-caixa { width: min(1280px, 100% - 2 * var(--okf-space-4)); margin-inline: auto; }
@media (min-width: 720px) { .l-caixa { width: min(1280px, 100% - 80px); } }
.l-secao { padding-top: 88px; }
.l-h1 { font-family: var(--okf-family-display); font-weight: 600; font-size: clamp(44px, 5.6vw, 80px);
        line-height: 1.02; letter-spacing: -0.02em; }
.l-h2 { font-family: var(--okf-family-display); font-weight: 600; font-size: clamp(32px, 3.4vw, 48px);
        line-height: 1.1; letter-spacing: -0.01em; }
.l-h2-largo { max-width: 780px; }
.l-rotulo { margin: 0 0 var(--okf-space-3); font: var(--okf-font-label); letter-spacing: .1em; text-transform: uppercase;
            color: var(--okf-verde-strong); }
.l-lead { margin: 0; font-size: 20px; line-height: 1.55; color: var(--okf-ink-muted); max-width: 610px; }
.l-corpo { margin: 0; font-size: 18px; line-height: 1.6; }
.l-apoio { margin: 0; font-size: 17px; line-height: 1.6; color: var(--okf-ink-muted); max-width: 520px; }
.l-btn-grande { min-height: 58px; padding: 0 28px; border-radius: var(--okf-radius-md); font-size: 18px; }
.l-btn-pilula { min-height: 46px; border-radius: var(--okf-radius-pill); font-size: 16px; padding: 0 22px; }
.l-btn-claro { background: var(--okf-surface-raised); }

/* ---------------------------------------------------------------- topo */
.l-topo { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--okf-surface) 92%, transparent);
          backdrop-filter: blur(8px); }
.l-topo-linha { display: flex; align-items: center; gap: var(--okf-space-8); min-height: 88px; }
.l-marca { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; flex: none; }
.l-marca img { width: 230px; height: auto; }

.l-nav { display: flex; gap: var(--okf-space-8); margin-left: auto; margin-right: auto; }
.l-nav a, .l-entrar { font: var(--okf-font-heading); font-size: 16px; text-decoration: none; }
.l-nav a:hover, .l-entrar:hover { color: var(--okf-azul); }
.l-topo-acoes { display: flex; align-items: center; gap: var(--okf-space-8); }

/* ---------------------------------------------------------------- 01a abertura */
.l-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--okf-space-8); align-items: center;
          padding: 72px 0 40px; }
.l-hero-texto { display: flex; flex-direction: column; gap: 28px; }
.l-selo { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--okf-space-2); margin: 0;
          padding: 10px 18px; border-radius: var(--okf-radius-pill); background: var(--okf-verde-soft);
          color: var(--okf-verde-strong); font: var(--okf-font-label); font-size: 15px; }
.l-hero-acoes { display: flex; flex-wrap: wrap; gap: var(--okf-space-4); }
.l-quem { display: flex; align-items: center; gap: var(--okf-space-4); }
.l-quem p { margin: 0; font-size: 14px; font-weight: 600; color: var(--okf-ink-muted); max-width: 250px; }
.l-rostos { display: flex; }
.l-rosto { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; border-radius: 50%;
           box-shadow: 0 0 0 3px var(--okf-surface); font: var(--okf-font-heading); font-size: 17px; }
.l-rosto:first-child { margin-left: 0; }
.l-rosto-neutro { background: var(--okf-surface-sunken); color: var(--okf-ink); }
.l-rosto-sol { background: var(--okf-sol); color: var(--okf-ink); }
:root[data-tema="escuro"] .l-rosto-sol { color: var(--okf-on-petroleo); }

.l-hero-arte { position: relative; min-height: 640px; display: grid; place-items: center; }
.l-bola { position: absolute; border-radius: 50%; }
.l-bola-azul { width: 600px; height: 600px; right: -20px; top: 10px; background: var(--okf-azul-soft); }
.l-bola-coral { width: 290px; height: 290px; right: -110px; bottom: -20px; background: var(--okf-coral-soft); }
.l-bola-sol { width: 118px; height: 118px; left: -20px; bottom: 30px; background: var(--okf-sol-soft); }
.l-celular { position: relative; width: 330px; padding: 12px; border-radius: 48px; background: var(--okf-petroleo);
             box-shadow: 0 30px 60px color-mix(in srgb, var(--okf-petroleo) 18%, transparent); margin-left: 120px; }
:root[data-tema="escuro"] .l-celular { background: var(--okf-surface-sunken); box-shadow: inset 0 0 0 2px var(--okf-line); }
.l-tela { min-height: 640px; padding: 26px 18px; border-radius: 38px; background: var(--okf-surface); }
.l-tela p { margin: 0; }
.l-cel-familia { display: flex; align-items: center; gap: var(--okf-space-2); font: var(--okf-font-heading); font-size: 14px; }
.l-cel-data { margin-top: 20px !important; font: var(--okf-font-caption); color: var(--okf-ink-muted); }
.l-cel-oi { font-family: var(--okf-family-display); font-weight: 600; font-size: 25px; margin-top: 2px !important; }
.l-cel-criancas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--okf-space-2); margin-top: var(--okf-space-4); }
.l-cel-crianca { display: flex; gap: var(--okf-space-2); padding: 10px; border-radius: var(--okf-radius-md);
                 background: var(--okf-surface-raised); box-shadow: var(--okf-shadow-card); }
.l-cel-crianca strong { display: block; font-size: 13px; }
.l-cel-crianca span { display: block; font-size: 11px; color: var(--okf-ink-muted); }
.l-rosto-p { display: grid !important; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
             font-size: 13px !important; font-weight: 800; color: inherit; }
.l-rosto-p.l-rosto-sol { color: var(--okf-ink) !important; }
.l-chip-hora { display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: var(--okf-radius-pill);
               background: var(--okf-azul-soft); color: var(--okf-azul); font-style: normal; font-size: 10px; font-weight: 800; }
.l-cel-secao { margin-top: 22px !important; margin-bottom: 10px !important; font: var(--okf-font-heading); font-size: 14px; }
.l-cel-item { margin-top: var(--okf-space-3); padding: 12px 14px; border-radius: var(--okf-radius-md);
              background: var(--okf-surface-raised); box-shadow: var(--okf-shadow-card); }
.l-cel-item p:first-child { font-weight: 800; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.l-cel-sub { margin-top: 4px !important; font-size: 12px; color: var(--okf-ink-muted); font-weight: 600; }
.l-cel-mochila { margin-top: 8px !important; padding: 6px 10px; border-radius: var(--okf-radius-sm); background: var(--okf-sol-soft);
                 font-size: 12px; font-weight: 700; }
.l-agora { padding: 2px 8px; border-radius: var(--okf-radius-pill); background: var(--okf-coral-soft);
           color: var(--okf-coral-strong); font-size: 11px; font-weight: 800; }
.l-flutua { position: absolute; display: flex; gap: var(--okf-space-3); align-items: center; padding: 16px 18px;
            border-radius: var(--okf-radius-md); background: var(--okf-surface-raised);
            box-shadow: 0 12px 32px color-mix(in srgb, var(--okf-petroleo) 14%, transparent); }
.l-flutua strong { display: block; font-size: 14px; line-height: 1.35; font-weight: 800; }
.l-flutua span:not(.l-flutua-ic) { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--okf-ink-muted); }
.l-flutua-checkin { width: 330px; left: 0; top: 170px; }
.l-flutua-saude { width: 275px; right: -10px; bottom: 90px; }
.l-flutua-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; }
.l-flutua-saude .l-flutua-ic { border-radius: var(--okf-radius-sm); }
.l-ic-verde { background: var(--okf-verde-strong); color: var(--okf-on-verde); }
.l-ic-vermelho-soft { background: var(--okf-vermelho-soft); color: var(--okf-vermelho); }

/* ---------------------------------------------------------------- 01b para quem, como funciona */
.l-grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.l-perfil { padding: 28px 28px 32px; border-radius: var(--okf-radius-lg); }
.l-perfil h3 { margin: 24px 0 14px; font: var(--okf-font-heading); font-size: 21px; line-height: 1.4; }
.l-perfil p { margin: 0; font-size: 15px; line-height: 1.6; }
.l-perfil-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--okf-radius-md);
               background: var(--okf-surface-raised); }
.l-fundo-azul { background: var(--okf-azul-soft); }
.l-fundo-coral { background: var(--okf-coral-soft); }
.l-fundo-verde { background: var(--okf-verde-soft); }
.l-fundo-sol { background: var(--okf-sol-soft); }
.l-cabeca-dupla { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--okf-space-8); }
.l-cabeca-dupla .l-h2 { max-width: 700px; }
.l-grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.l-recurso { padding: 28px; border-radius: var(--okf-radius-lg); background: var(--okf-surface-raised); box-shadow: var(--okf-shadow-card); }
.l-recurso h3 { margin: 20px 0 12px; font: var(--okf-font-heading); font-size: 21px; }
.l-recurso p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--okf-ink-muted); }
.l-recurso-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--okf-radius-md); }
.l-ic-sol { background: var(--okf-sol); color: var(--okf-ink); }
:root[data-tema="escuro"] .l-ic-sol { color: var(--okf-on-petroleo); }
.l-ic-vermelho { background: var(--okf-vermelho); color: var(--okf-on-verde); }
.l-ic-coral { background: var(--okf-coral); color: var(--okf-ink); }
.l-ic-azul { background: var(--okf-azul); color: var(--okf-on-verde); }
.l-ic-petroleo { background: var(--okf-petroleo); color: var(--okf-on-petroleo); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .l-rosto-sol, :root:not([data-tema]) .l-ic-sol { color: var(--okf-on-petroleo); }
  :root:not([data-tema]) .l-celular { background: var(--okf-surface-sunken); box-shadow: inset 0 0 0 2px var(--okf-line); }
}

/* ---------------------------------------------------------------- 01c check-in */
.l-checkin { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 72px; align-items: center; margin-top: 104px;
             padding: 64px; border-radius: 36px; background: var(--okf-verde-soft); }
.l-checkin-cartao { display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: 32px;
                    background: var(--okf-surface-raised); box-shadow: 0 20px 44px color-mix(in srgb, var(--okf-verde-strong) 14%, transparent); }
.l-aqui { display: flex; align-items: center; gap: var(--okf-space-3); padding: 14px 18px; border-radius: var(--okf-radius-md);
          background: var(--okf-coral-soft); }
.l-aqui > .ic { color: var(--okf-coral-strong); width: 24px; height: 24px; }
.l-aqui span { display: block; font: var(--okf-font-caption); font-weight: 800; text-transform: uppercase; color: var(--okf-verde-strong); }
.l-aqui strong { font-size: 16px; }
.l-cheguei { display: flex; align-items: center; justify-content: center; gap: var(--okf-space-3); min-height: 92px;
             border-radius: var(--okf-radius-pill); background: var(--okf-verde-strong); color: var(--okf-on-verde);
             font-family: var(--okf-family-display); font-weight: 600; font-size: 30px;
             box-shadow: 0 12px 24px color-mix(in srgb, var(--okf-verde-strong) 25%, transparent); }
.l-cheguei .ic { width: 28px; height: 28px; }
.l-saindo { display: grid; place-items: center; min-height: 56px; border-radius: var(--okf-radius-pill);
            box-shadow: inset 0 0 0 2px var(--okf-line); font: var(--okf-font-heading); }
.l-checkin-cartao p { margin: 0; text-align: center; font: var(--okf-font-caption); font-size: 13px; color: var(--okf-ink-muted); }
.l-checkin-texto { display: flex; flex-direction: column; gap: 20px; }
.l-checkin-texto .l-rotulo { margin: 0; }
.l-chips { display: flex; flex-wrap: wrap; gap: var(--okf-space-2); margin: 8px 0 0; padding: 0; list-style: none; }
.l-chips li { padding: 10px 16px; border-radius: var(--okf-radius-pill); background: var(--okf-surface-raised); font: var(--okf-font-label); }

/* ---------------------------------------------------------------- diferencial (bloco escuro) */
.l-diferencial { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--okf-space-8); align-items: center;
                 padding: 80px 64px; border-radius: 36px; background: var(--okf-petroleo); color: var(--okf-on-petroleo); }
.l-diferencial .l-rotulo { color: var(--okf-verde); }
.l-diferencial .l-h2 { margin-bottom: 24px; }
.l-diferencial .l-corpo { opacity: .88; max-width: 620px; }
.l-diferencial-arte { width: 100%; max-width: 440px; justify-self: center; }
.d-azul { fill: var(--okf-azul); }
.d-azul-claro { fill: color-mix(in srgb, var(--okf-azul) 70%, var(--okf-surface-raised)); }
.d-coral { fill: var(--okf-coral); }
.d-coral-claro { fill: color-mix(in srgb, var(--okf-coral) 80%, var(--okf-surface-raised)); }
.d-verde { fill: var(--okf-verde); stroke: var(--okf-petroleo); stroke-width: 14; }
.d-sol { fill: var(--okf-sol); stroke: var(--okf-petroleo); stroke-width: 10; }
.d-check { fill: none; stroke: var(--okf-on-verde); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
/* No escuro o token petróleo vira claro: o bloco passa a ser um cartão elevado. */
:root[data-tema="escuro"] .l-diferencial { background: var(--okf-surface-raised); color: var(--okf-ink); }
:root[data-tema="escuro"] .d-verde, :root[data-tema="escuro"] .d-sol { stroke: var(--okf-surface-raised); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .l-diferencial { background: var(--okf-surface-raised); color: var(--okf-ink); }
  :root:not([data-tema]) .d-verde, :root:not([data-tema]) .d-sol { stroke: var(--okf-surface-raised); }
}

/* ---------------------------------------------------------------- 01d segurança */
.l-seguranca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--okf-space-8); align-items: start; }
.l-seguranca .l-h2 { margin-bottom: 24px; max-width: 520px; }
.l-tabela-cartao { padding: 20px 24px; border-radius: 28px; background: var(--okf-surface-raised); box-shadow: var(--okf-shadow-card);
                   overflow-x: auto; }
.l-tabela { width: 100%; border-collapse: collapse; min-width: 520px; }
.l-tabela th, .l-tabela td { padding: 16px 8px; text-align: center; border-bottom: 1px solid var(--okf-line);
                             font-size: 14px; font-weight: 700; color: var(--okf-ink-muted); }
.l-tabela tr:last-child th, .l-tabela tr:last-child td { border-bottom: 0; }
.l-tabela thead th { font-size: 13px; }
.l-tabela th:first-child { text-align: left; }
.l-tabela tbody th { font: var(--okf-font-heading); color: var(--okf-ink); }
.l-tabela td.sim { color: var(--okf-verde-strong); font-weight: 800; }

/* ---------------------------------------------------------------- 01d testers */
.l-testar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center;
            padding: 64px; border-radius: 36px; background: var(--okf-sol-soft); }
.l-testar-texto { display: flex; flex-direction: column; gap: 20px; padding-left: 24px; }
.l-testar-texto img { width: 100px; height: auto; }
.l-checks { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; font-weight: 700; }
.l-checks .ic { color: var(--okf-verde-strong); margin-right: 10px; }
.l-form-cartao { padding: 36px; border-radius: 32px; background: var(--okf-surface-raised);
                 box-shadow: 0 20px 44px color-mix(in srgb, var(--okf-sol) 25%, transparent); }
.l-form { display: flex; flex-direction: column; gap: 22px; }
.l-form label { display: flex; flex-direction: column; gap: 10px; font: var(--okf-font-label); }
.l-form input, .l-form select { min-height: 54px; padding: 0 16px; border: 1px solid var(--okf-line); border-radius: var(--okf-radius-md);
                                background: var(--okf-surface); color: var(--okf-ink); font: var(--okf-font-body); font-size: 16px; }
.l-form input::placeholder { color: var(--okf-ink-muted); }
.l-form-dupla { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 14px; }
.l-form .btn { width: 100%; }
.l-form-nota { margin: 0; text-align: center; font-size: 13px; color: var(--okf-ink-muted); }
.l-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.l-ok { display: flex; flex-direction: column; align-items: center; gap: var(--okf-space-4); text-align: center; padding: 12px 0; }
.l-ok .btn { width: 100%; }

/* ---------------------------------------------------------------- rodapé */
.l-rodape { margin-top: 120px; border-top: 1px solid var(--okf-line); }
.l-rodape-linha { display: flex; justify-content: space-between; align-items: center; gap: var(--okf-space-6); flex-wrap: wrap;
                  padding: 56px 0; }
.l-rodape .l-marca img { width: 260px; }
.l-rodape-links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.l-rodape-links a { font: var(--okf-font-heading); font-size: 16px; text-decoration: none; }
.l-rodape-links span { font-size: 14px; color: var(--okf-ink-muted); font-weight: 600; }

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1180px) {
  .l-hero { grid-template-columns: 1fr; }
  .l-hero-arte { max-width: 620px; width: 100%; justify-self: center; }
  .l-grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-checkin { grid-template-columns: 1fr; padding: 40px; }
  .l-checkin-cartao { max-width: 440px; }
  .l-testar { gap: 40px; padding: 48px 40px; }
  .l-testar-texto { padding-left: 0; }
}
@media (max-width: 900px) {
  .l-nav { display: none; }
  .l-topo-acoes { margin-left: auto; gap: var(--okf-space-4); }
  .l-grade-3 { grid-template-columns: 1fr 1fr; }
  .l-cabeca-dupla { flex-direction: column; align-items: flex-start; gap: var(--okf-space-4); }
  .l-diferencial, .l-seguranca, .l-testar { grid-template-columns: 1fr; }
  .l-diferencial { padding: 48px 32px; }
  .l-diferencial-arte { max-width: 320px; }
}
@media (max-width: 600px) {
  .l-secao { padding-top: 64px; }
  .l-topo-linha { min-height: 68px; }
  .l-marca img { width: 172px; }

  .l-entrar { font-size: 15px; }
  .l-btn-pilula { min-height: 40px; padding: 0 16px; font-size: 15px; }
  .l-hero { padding-top: 32px; }
  .l-hero-acoes .btn { width: 100%; }
  .l-lead { font-size: 18px; }
  .l-hero-arte { min-height: 560px; transform: scale(.86); transform-origin: top center; margin-bottom: -80px; }
  .l-celular { margin-left: 0; }
  .l-flutua-checkin { left: -24px; width: 280px; top: 150px; }
  .l-flutua-saude { right: -24px; width: 250px; bottom: 40px; }
  .l-bola-azul { width: 440px; height: 440px; right: -60px; }
  .l-grade-4, .l-grade-3 { grid-template-columns: 1fr; margin-top: 28px; }
  .l-checkin { padding: 24px; margin-top: 64px; gap: 32px; }
  .l-checkin-cartao { padding: 20px; }
  .l-cheguei { min-height: 76px; font-size: 26px; }
  .l-diferencial { padding: 36px 24px; }
  .l-testar { padding: 28px 20px; }
  .l-form-cartao { padding: 24px 20px; }
  .l-form-dupla { grid-template-columns: 1fr; }
  .l-rodape { margin-top: 72px; }
  .l-rodape-links { gap: 16px 20px; }
}

/* ---------------------------------------------------------------- privacidade */
.l-texto-longo { max-width: 760px; padding: 48px 0 24px; }
.l-texto-longo .l-h2 { margin-bottom: 20px; }
.l-texto-longo h2:not(.l-h2) { margin: 40px 0 12px; font: var(--okf-font-title); }
.l-texto-longo ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; }
.l-texto-longo p { line-height: 1.6; }
.l-esquerda { text-align: left; }