/* ═══════════════════════════════════════════════════════════════════════════
   FUNIL DE CADASTRO — /onboarding/funil
   Recorte do protótipo "Kieduca Cadastro v2" (Claude Design).

   🔑 MOBILE-FIRST DE VERDADE: a base é o celular e o desktop apenas amplia,
      via @media (min-width:761px). A maior parte do tráfego vem de anúncio no
      feed, ou seja, celular — escrever desktop primeiro e "consertar" depois
      inverte quem é o caso principal.

   🔑 CTA É AZUL (#2563EB) COM TEXTO BRANCO. O amarelo da marca é acento
      decorativo (selo, estrela) — nunca cor de ação.

   🔑 SOMBRA EMPILHADA (box-shadow:0 3px 0 <tom escuro>), nunca difusa: é a
      assinatura visual do produto. Em :active o botão afunda 2px.

   Este arquivo carrega DEPOIS de global.css e landing.css (entra pelo hook
   'head'), então vence sem precisar de !important — exceto no [hidden], onde
   a regra do navegador perde para qualquer display: de classe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Raiz e estrutura ─────────────────────────────────────────────────────── */
.kd-raiz{ min-height:100vh; display:flex; flex-direction:column; box-sizing:border-box; }
.kd-raiz *,
.kd-raiz *::before,
.kd-raiz *::after{ box-sizing:border-box; }

/* 🔴 O [hidden] do navegador é `display:none` sem peso nenhum: qualquer
      .kd-tela{display:grid} o derruba e as treze telas aparecem empilhadas.
      Esta é a única regra do arquivo que precisa de !important. */
.kd-raiz [hidden]{ display:none !important; }

.kd-wrap{ flex:1; width:100%; margin:0 auto; max-width:100%; padding:26px 16px 104px; }

.kd-tela{ animation:kdIn .3s cubic-bezier(.2,.9,.3,1) both; }
.kd-tela[data-tela="3"]{ max-width:640px; margin:0 auto; }
.kd-tela[data-tela="4"]{ max-width:760px; margin:0 auto; }
.kd-tela[data-tela="5"]{ max-width:700px; margin:0 auto; }
.kd-tela[data-tela="6"]{ max-width:780px; margin:0 auto; }
.kd-tela[data-tela="7"]{ max-width:720px; margin:0 auto; }
.kd-tela[data-tela="8"]{ max-width:720px; margin:0 auto; }
.kd-tela[data-tela="9"]{ max-width:720px; margin:0 auto; }
.kd-tela[data-tela="10"]{ max-width:560px; margin:0 auto; }
.kd-tela[data-tela="11"]{ max-width:460px; margin:0 auto; padding-top:18px; }
.kd-tela[data-tela="13"]{ max-width:840px; margin:0 auto; }

.kd-centro{ text-align:center; }
.kd-col{ width:100%; }

/* Centralização vertical das telas 1 e 2 — as duas em que a página tem pouco
   conteúdo e encostar tudo no topo deixaria um vazio embaixo. */
.kd-vcenter{ display:flex; align-items:center; min-height:calc(100vh - 210px); }
.kd-authgrid{ display:grid; grid-template-columns:minmax(0,1fr); gap:26px;
              align-items:center; align-content:center; min-height:calc(100vh - 210px); }

/* ── Tipografia ───────────────────────────────────────────────────────────── */
.kd-h1{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:25px;
        letter-spacing:-.03em; line-height:1.15; margin:0 0 7px; text-wrap:balance; color:#0D183D; }
.kd-tela[data-tela="1"] .kd-h1{ line-height:1.08; margin-bottom:10px; }
.kd-tela[data-tela="2"] .kd-h1{ line-height:1.12; margin-bottom:8px; }

.kd-sub{ font-size:15px; line-height:1.6; color:#5A6080; margin:0 0 20px; text-wrap:pretty; }
.kd-sub--hero{ line-height:1.55; }
.kd-sub--estreito{ max-width:520px; margin-left:auto; margin-right:auto; }
.kd-label{ display:block; font-weight:700; font-size:14px; margin-bottom:8px; color:#0D183D; }
.kd-nota{ font-size:12.5px; color:#8189A6; margin-top:9px; }
.kd-fecho{ font-size:15px; font-weight:700; margin:18px 0 0; text-wrap:pretty; }

/* ── Cartões, pílulas e ícones ────────────────────────────────────────────── */
.kd-card{ background:#fff; border:1px solid #E5E8F2; box-shadow:0 3px 0 #E5E8F2;
          padding:22px 18px; border-radius:18px; }
.kd-card--estreito{ text-align:left; }
.kd-card-mascote{ display:block; object-fit:contain; margin-bottom:13px; }

.kd-pill{ display:inline-flex; align-items:center; gap:8px; background:#E6F0FF;
          border:1px solid #DBEAFE; border-radius:999px; padding:7px 14px; margin-bottom:16px;
          font-weight:700; font-size:12.5px; color:#1E40AF; }
.kd-pill--sombra{ box-shadow:0 2px 0 #DBEAFE; margin-bottom:14px; }

.kd-ico{ display:block; flex-shrink:0; }

.kd-check{ width:18px; height:18px; flex-shrink:0; margin-top:1px; border-radius:5px;
           background:#E7F6EE; color:#1F8A5B; font-size:10px; font-weight:800;
           display:inline-flex; align-items:center; justify-content:center; }
.kd-check--neutro{ background:#EEF0F7; color:#8189A6; }

/* ── Botões ───────────────────────────────────────────────────────────────── */
.kd-cta{ background:#2563EB; border:none; color:#FFFFFF;
         font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:16px;
         padding:16px 26px; border-radius:13px; cursor:pointer; box-shadow:0 3px 0 #0D183D;
         transition:background .14s; white-space:nowrap; }
.kd-cta:active{ transform:translateY(2px); box-shadow:0 1px 0 #0D183D; }
.kd-cta[disabled]{ background:#E5E8F2; color:#8189A6; box-shadow:0 3px 0 #DCE0E8;
                   cursor:not-allowed; transform:none; }
.kd-cta--bloco{ width:100%; display:flex; align-items:center; justify-content:center; gap:11px; }
.kd-tela[data-tela="1"] .kd-cta--bloco{ font-size:16.5px; padding:17px; }
.kd-tela[data-tela="2"] .kd-cta--bloco{ margin-top:20px; padding:16px; }
.kd-cta--link{ display:block; text-align:center; text-decoration:none; font-size:15px; padding:15px; }

.kd-cta-secundario{ display:block; text-align:center; background:#fff; border:1.5px solid #0D183D;
                    color:#0D183D; font-weight:800; font-size:15px; padding:14px;
                    border-radius:13px; text-decoration:none; }

.kd-voltar-solto{ text-align:center; margin-top:14px; }
.kd-voltar-solto button{ background:none; border:none; font-family:'Plus Jakarta Sans',sans-serif;
                         font-weight:700; font-size:14px; color:#8189A6; cursor:pointer; padding:8px 12px; }

/* ── Campos ───────────────────────────────────────────────────────────────── */
.kd-field{ width:100%; font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; color:#0D183D;
           background:#F8FAFD; border:1.5px solid #E5E8F2; border-radius:12px; padding:16px; }
.kd-field:focus{ outline:none; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.16); }
.kd-telefone{ display:flex; gap:8px; }
.kd-telefone .kd-field{ flex:1; min-width:0; font-size:16px; padding:15px 16px; }
.kd-ddi{ display:inline-flex; align-items:center; gap:6px; background:#F6F7FB;
         border:1.5px solid #E5E8F2; border-radius:12px; padding:15px 13px;
         font-weight:800; font-size:15px; color:#353A5B; flex-shrink:0; }
.kd-privacidade{ display:flex; align-items:flex-start; gap:9px; margin-top:14px;
                 font-size:12.5px; line-height:1.5; color:#8189A6; text-wrap:pretty; }
.kd-privacidade .kd-check{ width:17px; height:17px; }

/* ── Tela 1 · reforço, prova social e coluna de apoio ─────────────────────── */
.kd-reforco{ display:flex; align-items:center; justify-content:center; gap:16px;
             margin-top:16px; padding-top:14px; border-top:1px solid #EEF0F7; }
.kd-check-linha{ display:inline-flex; align-items:center; gap:6px;
                 font-size:12px; font-weight:700; color:#1F8A5B; }
.kd-check-linha .kd-check{ width:15px; height:15px; margin-top:0; border-radius:4px; font-size:9px; }

.kd-ja-tem{ text-align:center; margin-top:14px; font-size:14px; color:#5A6080; }
.kd-ja-tem a{ font-weight:800; color:#1E40AF; text-decoration:none; }

.kd-stats{ display:flex; align-items:center; justify-content:space-around; gap:12px;
           margin-top:22px; padding:16px; background:#F6F7FB; border:1px solid #E5E8F2;
           border-radius:16px; text-align:center; }
.kd-stats--solto{ background:none; border:none; padding:0; margin-top:20px; gap:14px; }
.kd-stat-valor{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:19px;
                color:#1E40AF; line-height:1; }
.kd-stat-valor--g{ font-size:20px; }
.kd-stat-rotulo{ font-size:11px; font-weight:600; color:#8189A6; margin-top:3px; text-wrap:pretty; }
.kd-stats--solto .kd-stat-rotulo{ font-size:11.5px; }

.kd-authaside{ display:none; text-align:left; }
.kd-aside-mascote{ display:block; object-fit:contain; margin-bottom:14px; }
.kd-aside-titulo{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:19px;
                  letter-spacing:-.02em; line-height:1.25; margin-bottom:14px; text-wrap:balance; }
.kd-aside-perks{ display:flex; flex-direction:column; gap:10px; }
.kd-perk{ display:flex; align-items:flex-start; gap:9px;
          font-size:13.5px; line-height:1.5; color:#353A5B; text-wrap:pretty; text-align:left; }
.kd-aside-depo{ margin-top:18px; padding:14px; background:#E6F0FF; border:1px solid #DBEAFE; border-radius:14px; }
.kd-aside-depo p{ font-size:13.5px; line-height:1.55; color:#353A5B; margin:0 0 8px; text-wrap:pretty; }
.kd-aside-depo-autor{ font-size:12px; font-weight:800; color:#1E40AF; }

/* ── Tela 3 · opções de resposta única ────────────────────────────────────── */
.kd-opcoes{ display:flex; flex-direction:column; gap:10px; }
.kd-opcao{ display:flex; align-items:center; gap:12px; width:100%; padding:16px 14px;
           border-radius:15px; cursor:pointer; transition:all .14s;
           border:1.5px solid #E5E8F2; background:#fff; box-shadow:0 2px 0 #E5E8F2;
           font-family:'Plus Jakarta Sans',sans-serif; }
.kd-opcao.is-on{ border-color:#0D183D; background:#E6F0FF; box-shadow:0 3px 0 #DBEAFE; }
.kd-opcao-txt{ flex:1; text-align:left; font-weight:700; font-size:15.5px; color:#0D183D; }
.kd-radio{ width:21px; height:21px; flex-shrink:0; border-radius:50%; display:inline-flex;
           align-items:center; justify-content:center; font-size:11px;
           border:1.5px solid #E5E8F2; background:#fff; color:#FFFFFF; }
.kd-opcao.is-on .kd-radio{ border-color:#0D183D; background:#2563EB; }
.kd-opcao.is-on .kd-radio::after{ content:"●"; }

/* ── Telas 4 e 5 · múltipla escolha ───────────────────────────────────────── */
.kd-grupos{ display:flex; flex-direction:column; gap:12px; }
.kd-grupo{ background:#fff; border:1px solid #E5E8F2; border-radius:16px; padding:14px;
           box-shadow:0 2px 0 #E5E8F2; }
.kd-grupo-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.kd-grupo-nome{ display:flex; align-items:center; gap:9px; min-width:0;
                font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:14px;
                letter-spacing:-.01em; text-wrap:pretty; text-align:left; }
.kd-todas{ background:none; border:none; font-family:'Plus Jakarta Sans',sans-serif;
           font-weight:800; font-size:12px; color:#1E40AF; cursor:pointer; white-space:nowrap; padding:4px; }

.kd-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.kd-tela[data-tela="5"] .kd-chips{ gap:8px; }
.kd-chip{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:13.5px;
          padding:11px 15px; border-radius:999px; cursor:pointer; transition:all .14s;
          border:1.5px solid #E5E8F2; background:#fff; color:#353A5B; }
.kd-chip[aria-pressed="true"]{ font-weight:800; border-color:#0D183D; background:#2563EB;
                               color:#FFFFFF; box-shadow:0 2px 0 #0D183D; }

/* ── Tela 6 · vitrine ─────────────────────────────────────────────────────── */
.kd-tools{ display:grid; gap:10px; text-align:left; grid-template-columns:repeat(2,minmax(0,1fr)); }
.kd-tool{ display:flex; align-items:center; gap:11px; background:#fff; border:1px solid #E5E8F2;
          border-radius:14px; padding:13px; box-shadow:0 2px 0 #E5E8F2;
          font-weight:700; font-size:13.5px; line-height:1.3; text-wrap:pretty; }
.kd-faixa-navy{ display:inline-flex; align-items:center; gap:9px; background:#0D183D; color:#FFE28A;
                border-radius:13px; padding:13px 20px; margin-top:18px; box-shadow:0 3px 0 #000;
                font-weight:800; font-size:14px; text-align:left; text-wrap:pretty; }

/* ── Telas 7, 8 e 9 · vídeos ──────────────────────────────────────────────── */
/* ⚠️ 16:9 no demonstrativo, 9:16 nos depoimentos. Trocar as duas proporções é
      o erro clássico: o vídeo vertical numa faixa 16:9 aparece cortado. */
/* ⚠️ padding-top:56.25%, NÃO aspect-ratio. O aspect-ratio só existe a partir do
      Safari 15 (iOS 15); em iPhone mais antigo a caixa colapsa para ALTURA ZERO
      e o vídeo simplesmente não aparece — sem erro, sem espaço em branco, sem
      nada que denuncie. A conta 9/16=56.25% é a técnica que os depoimentos aqui
      do lado já usam e funciona em qualquer navegador.
      Pelo mesmo motivo top/left/right/bottom em vez de `inset`, que também é
      recente (Safari 14.1) — sem ele o iframe perde o posicionamento. */
.kd-video-16x9{ position:relative; background:#0D183D; border-radius:18px; overflow:hidden;
                box-shadow:0 18px 40px -22px rgba(20,23,43,.45); padding-top:56.25%; }
.kd-video-16x9 iframe{ border:0; position:absolute; top:0; left:0; right:0; bottom:0;
                       width:100%; height:100%; }

.kd-video-9x16{ max-width:328px; margin:0 auto; }
.kd-video-moldura{ position:relative; padding-top:177.78%; background:#0D183D; border-radius:20px;
                   overflow:hidden; box-shadow:0 18px 40px -22px rgba(20,23,43,.45); }
.kd-video-moldura iframe{ border:0; position:absolute; top:0; left:0; height:100%; width:100%; }

/* ── Tela 11 · carregando ─────────────────────────────────────────────────── */
.kd-spinner{ position:relative; width:72px; height:72px; margin:0 auto 18px; }
.kd-spinner-anel{ position:absolute; top:0; right:0; bottom:0; left:0; border:5px solid #EEF0F7; border-top-color:#2563EB;
                  border-radius:50%; animation:kdSpin 1s linear infinite; }
.kd-spinner img{ position:absolute; top:17px; right:17px; bottom:17px; left:17px; object-fit:contain; }
.kd-passos{ display:flex; flex-direction:column; gap:11px; text-align:left; background:#fff;
            border:1px solid #E5E8F2; border-radius:16px; padding:16px; box-shadow:0 2px 0 #E5E8F2; }
.kd-passo{ display:flex; align-items:center; gap:11px; }
.kd-passo-marca{ width:20px; height:20px; flex-shrink:0; border-radius:6px; display:inline-flex;
                 align-items:center; justify-content:center; font-size:11px; font-weight:800;
                 background:#EEF0F7; color:transparent; }
.kd-passo-txt{ font-size:14px; font-weight:600; color:#8189A6; }
.kd-passo.is-ativo .kd-passo-marca{ background:#E6F0FF; color:#1E40AF; }
.kd-passo.is-ativo .kd-passo-txt{ font-weight:700; color:#353A5B; }
.kd-passo.is-feito .kd-passo-marca{ background:#E7F6EE; color:#1F8A5B; }
.kd-passo.is-feito .kd-passo-marca::after{ content:"✓"; }
.kd-passo.is-feito .kd-passo-txt{ font-weight:700; color:#0D183D; }

/* ── Tela 13 · planos ─────────────────────────────────────────────────────── */
.kd-planos-topo{ text-align:center; margin-bottom:22px; }
.kd-planos-topo .kd-sub{ max-width:440px; margin-left:auto; margin-right:auto; margin-bottom:0; }
.kd-plans{ display:grid; gap:14px; align-items:start; grid-template-columns:minmax(0,1fr); }
/* Sem o card gratuito sobra um só: uma coluna e largura limitada, para ele não
   esticar de ponta a ponta nem encostar na esquerda no desktop. */
.kd-plans.is-solo{ grid-template-columns:minmax(0,1fr); max-width:420px; margin:0 auto; }
.kd-plano{ background:#fff; border-radius:20px; padding:22px; }
/* 🔴 O Premium vem PRIMEIRO, inclusive no celular: abrir com "R$ 0" depois de
      doze telas construindo valor joga o argumento fora. */
.kd-plano--premium{ position:relative; border:2px solid #2563EB; box-shadow:0 4px 0 #0D183D; order:1; }
.kd-plano--gratis{ border:1.5px solid #E5E8F2; box-shadow:0 3px 0 #E5E8F2; order:2; }
/* 2026-09-27: anual e mensal empilhados, sem abas (tela 13). O bloco ocupa o
   lugar do card premium único — mesma ordem, uma coluna da grade. */
.kd-plans-pagos{ display:flex; flex-direction:column; gap:26px; order:1; min-width:0; }
/* Preço cheio riscado acima do preço atual ("de R$ 397 por R$ 297"). */
.kd-ancora{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin:12px 0 -2px;
  font-size:14px; font-weight:600; color:#8189A6; }
.kd-ancora s{ font-family:'Bricolage Grotesque',sans-serif; font-size:19px; font-weight:700; color:#A3AAC2;
  text-decoration:line-through; text-decoration-color:#E5484D; text-decoration-thickness:2px; }
/* ── Retorno: planos no topo da tela 1 para quem já os viu (01-entrada.php) ── */
.kd-retorno{ grid-column:1 / -1; max-width:840px; width:100%; margin:0 auto 8px; text-align:center; }
.kd-retorno-ola{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:24px; color:#0D183D; margin:0 0 4px; }
.kd-retorno-sub{ font-size:15px; color:#5B6485; margin:0 0 18px; }
.kd-retorno .kd-plans, .kd-retorno .kd-cupom{ text-align:left; }
.kd-retorno-ou{ display:flex; align-items:center; gap:12px; margin:26px 0 6px; font-size:13px; font-weight:700;
  color:#8189A6; text-transform:uppercase; letter-spacing:.08em; }
.kd-retorno-ou::before,.kd-retorno-ou::after{ content:""; flex:1; height:1px; background:#E5E8F2; }
 · onboarding/planos3/precheckout-*.php) ── */
.kd-pre-topo{ max-width:760px; margin:0 auto 22px; text-align:center; }
.kd-pre-ola{ font-size:14px; font-weight:700; color:#2563EB; margin:0 0 12px; }
.kd-pre-etapas{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.kd-pre-etapas li{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#8189A6;
  padding:6px 12px 6px 6px; border-radius:999px; background:#F3F5FA; }
.kd-pre-etapas li.is-atual{ background:#E3ECFD; color:#0D183D; }
.kd-pre-num{ flex:none; width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:800; background:#fff; color:#8189A6; border:1.5px solid #D9DEEA; }
.kd-pre-etapas li.is-atual .kd-pre-num{ background:#2563EB; color:#fff; border-color:#2563EB; }
.kd-pre{ max-width:760px; margin:36px auto 0; padding:28px 22px; border-radius:24px; background:#fff;
  border:1.5px solid #E5E8F2; }
.kd-pre-h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:21px; letter-spacing:-.02em;
  color:#0D183D; margin:0 0 18px; text-align:center; }
.kd-pre-passos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.kd-pre-passos li{ display:flex; gap:12px; align-items:flex-start; }
.kd-pre-passos .kd-pre-num{ width:30px; height:30px; font-size:13px; background:#0D183D; color:#FFE28A; border-color:#0D183D; }
.kd-pre-passos strong{ display:block; font-size:15px; color:#0D183D; margin:4px 0 2px; }
.kd-pre-passos p{ margin:0; font-size:13.5px; line-height:1.45; color:#5B6485; }
.kd-pre-dica{ display:flex; gap:10px; align-items:flex-start; margin:20px 0 0; padding:14px 16px; border-radius:14px;
  background:#FFF8E1; border:1px solid #FFE28A; font-size:14px; color:#4A3F17; }
.kd-pre-dica p{ margin:0; line-height:1.45; }
.kd-pre-dica b{ color:#0D183D; word-break:break-all; }
.kd-pre-garantias{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid #EEF0F7;
  display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.kd-pre-garantias li{ display:flex; gap:10px; align-items:center; font-size:18px; }
.kd-pre-garantias strong{ display:block; font-size:13.5px; color:#0D183D; }
.kd-pre-garantias small{ display:block; font-size:12.5px; color:#8189A6; }
@media (min-width:720px){
  .kd-pre{ padding:32px 36px; }
  .kd-pre-passos{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kd-pre-passos li{ flex-direction:column; gap:8px; }
  .kd-pre-garantias{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* ── Benefícios sob os planos (só /planos · onboarding/planos/beneficios.php) ── */
.kd-benef{ max-width:760px; margin:44px auto 0; padding:34px 22px 26px; border-radius:24px;
  background:linear-gradient(180deg,#F1F5FD 0%,#F7F9FD 100%); border:1px solid #E4EAF7; }
.kd-benef-topo{ text-align:center; margin-bottom:18px; }
.kd-benef-pill{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#2563EB; background:#E3ECFD; padding:6px 12px; border-radius:999px; }
.kd-benef-lista{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.kd-benef-item{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #E7ECF6;
  border-radius:16px; padding:14px 16px; }
.kd-benef-icone{ flex:none; width:38px; height:38px; border-radius:11px; background:#EEF3FD;
  display:inline-flex; align-items:center; justify-content:center; font-size:19px; }
.kd-benef-item strong{ display:block; font-size:15px; color:#0D183D; margin:1px 0 3px; }
.kd-benef-item p{ margin:0; font-size:13.5px; line-height:1.45; color:#5B6485; }
.kd-benef-numeros{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:22px 0 0; }
.kd-benef-numeros div{ text-align:center; padding:12px 6px; }
.kd-benef-numeros strong{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:24px; font-weight:800; color:#2563EB; }
.kd-benef-numeros span{ font-size:12.5px; color:#5B6485; }
.kd-benef-rodape{ text-align:center; font-size:12.5px; font-weight:600; color:#8189A6; margin:18px 0 0; }
@media (min-width:720px){
  .kd-benef{ padding:40px 36px 30px; }
  .kd-benef-lista{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kd-benef-numeros{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.kd-ancora b{ font-family:'Bricolage Grotesque',sans-serif; font-size:19px; font-weight:800; color:#0D183D; }
.kd-selo{ position:absolute; top:-12px; left:20px; background:#0D183D; color:#FFE28A;
          font-weight:800; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
          padding:5px 11px; border-radius:999px; }
.kd-periodo{ display:inline-flex; background:#F6F7FB; border:1px solid #E5E8F2; border-radius:999px;
             padding:4px; gap:2px; margin-bottom:14px; }
.kd-periodo button{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px;
                    padding:7px 18px; border-radius:999px; cursor:pointer; border:none;
                    background:none; color:#8189A6; transition:background .15s, color .15s; }
.kd-periodo button.is-ativo{ background:#2563EB; color:#FFFFFF; }
.kd-plano-nome{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:20px; letter-spacing:-.02em; }
.kd-preco-linha{ display:flex; align-items:flex-end; gap:7px; flex-wrap:wrap; margin:8px 0 4px; }
.kd-preco{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:35px;
           line-height:1; letter-spacing:-.03em; }
.kd-plano--gratis .kd-preco{ margin:9px 0 4px; }
.kd-preco-pre{ font-size:15px; font-weight:700; color:#5B6485; padding-bottom:6px; }
.kd-preco-por{ font-size:13.5px; font-weight:700; color:#8189A6; padding-bottom:4px; }
.kd-economia{ background:#E7F6EE; color:#1F8A5B; font-weight:800; font-size:11.5px;
              padding:4px 9px; border-radius:999px; margin-bottom:4px; }
.kd-economia:empty{ display:none; }
.kd-plano-perks{ display:flex; flex-direction:column; gap:10px; margin:16px 0 20px; }
.kd-plano-tag{ font-size:11px; font-weight:800; letter-spacing:.12em; color:#8189A6; text-transform:uppercase; }
.kd-plano-nota{ font-size:13px; font-weight:600; color:#8189A6; margin-bottom:18px; }

/* ── Barra de navegação ───────────────────────────────────────────────────── */
/* No celular ela é fixa: o padding-bottom soma env(safe-area-inset-bottom) para
   o CTA não ficar embaixo da faixa do iPhone. O padding-bottom:104px do
   .kd-wrap é o que impede a barra de cobrir o fim do conteúdo. */
.kd-foot{ display:flex; align-items:center; gap:10px;
          position:fixed; left:0; right:0; bottom:0; z-index:20;
          background:rgba(248,250,253,.97); backdrop-filter:blur(10px);
          border-top:1px solid #E5E8F2; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); margin:0; }
.kd-foot .kd-cta{ flex:1; }
.kd-voltar{ flex-shrink:0; background:#fff; border:1.5px solid #E5E8F2; color:#0D183D;
            font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px;
            width:52px; height:52px; border-radius:13px; cursor:pointer; }
.kd-pular{ flex-shrink:0; background:none; border:none; font-family:'Plus Jakarta Sans',sans-serif;
           font-weight:700; font-size:14px; color:#8189A6; cursor:pointer;
           padding:14px 10px; white-space:nowrap; }

/* ── Transição ────────────────────────────────────────────────────────────── */
.kd-transicao{ animation:kdIn .3s cubic-bezier(.2,.9,.3,1) both;
               min-height:62vh; display:flex; align-items:center; justify-content:center; padding:0 16px; }

/* ── Maquete (loop de 4s) ─────────────────────────────────────────────────── */
/* ⚠️ width:100% + flex:0 0 auto são obrigatórios: dentro do contêiner flex da
      transição, sem eles a janela encolhe até a largura do conteúdo e fica
      deformada (estreita e alta). */
.kd-mk{ position:relative; flex:0 0 auto; width:100%; max-width:320px; margin:0 auto;
        background:#fff; border:1px solid #E5E8F2; border-radius:14px; overflow:hidden;
        box-shadow:0 18px 40px -24px rgba(20,23,43,.45); animation:kdChrome 4s ease-in-out infinite; }
.kd-mk-brilho-area{ position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; pointer-events:none; z-index:3; }
.kd-mk-sweep{ width:38%; height:100%; animation:kdSweep 4s ease-in-out infinite;
              background:linear-gradient(90deg,transparent,rgba(37,99,235,.09),transparent); }
.kd-mk-chrome{ display:flex; align-items:center; gap:6px; padding:9px 11px; border-bottom:1px solid #EEF0F7; }
.kd-mk-ponto{ width:7px; height:7px; border-radius:99px; background:#E5E8F2; }
.kd-mk-url{ flex:1; height:15px; background:#F6F7FB; border-radius:5px; margin-left:5px; }
.kd-mk-avatar{ width:15px; height:15px; border-radius:99px; background:#DBEAFE; }
.kd-mk-corpo{ display:grid; grid-template-columns:62px 1fr; min-height:168px; }
.kd-mk-side{ background:#F8FAFD; border-right:1px solid #EEF0F7; padding:10px 8px;
             display:flex; flex-direction:column; gap:6px; animation:kdSlideL 4s ease-in-out infinite; }
.kd-mk-side-titulo{ height:7px; width:70%; background:#E5E8F2; border-radius:99px; }
.kd-mk-side-item{ height:16px; background:#EEF0F7; border-radius:5px; }
.kd-mk-side-item.is-ativo{ background:#DBEAFE; }
.kd-mk-side-rodape{ margin-top:auto; height:30px; border-radius:7px;
                    background:linear-gradient(150deg,#1E40AF,#0D183D); }
.kd-mk-conteudo{ padding:11px; }
.kd-mk-greet{ display:flex; align-items:center; gap:8px; border-radius:9px; padding:9px 10px;
              margin-bottom:10px; background:linear-gradient(120deg,#DBEAFE,#F8FAFD);
              animation:kdGreet 4s ease-in-out infinite; }
.kd-mk-greet img{ object-fit:contain; flex-shrink:0; }
.kd-mk-greet-txt{ min-width:0; flex:1; }
.kd-mk-saudacao{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:10.5px;
                 color:#0D183D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kd-mk-caret{ display:inline-block; width:1.5px; height:9px; background:#2563EB;
              margin-left:2px; vertical-align:-1px; animation:kdCaret 4s steps(1,end) infinite; }
.kd-mk-greet-linha{ height:5px; width:56%; background:#fff; border-radius:99px; margin-top:4px; opacity:.7; }
.kd-mk-trilho{ height:7px; background:#EEF0F7; border-radius:99px; margin-bottom:9px; overflow:hidden; }
.kd-mk-bar{ height:100%; background:#2563EB; border-radius:99px;
            animation:kdResize 4s cubic-bezier(.2,.9,.3,1) infinite; }
.kd-mk-ladrilhos{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.kd-mk-tile{ height:34px; border:1px solid #EEF0F7; border-radius:7px;
             animation:kdTile 4s ease-in-out infinite both; }

/* ── Animações ────────────────────────────────────────────────────────────── */
@keyframes kdIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes kdSpin{ to{ transform:rotate(360deg); } }
@keyframes kdChrome{ 0%{ opacity:0; transform:scale(.965); } 12%,100%{ opacity:1; transform:none; } }
@keyframes kdSlideL{ 0%,6%{ opacity:0; transform:translateX(-14px); } 20%,100%{ opacity:1; transform:none; } }
@keyframes kdGreet{ 0%,16%{ opacity:0; transform:translateY(8px); } 30%,100%{ opacity:1; transform:none; } }
@keyframes kdTile{ 0%{ opacity:0; transform:scale(.7); } 55%{ opacity:1; transform:scale(1.06); } 70%,100%{ opacity:1; transform:scale(1); } }
@keyframes kdResize{ 0%,30%{ width:34%; } 46%,100%{ width:100%; } }
@keyframes kdSweep{ 0%,20%{ transform:translateX(-120%); } 60%,100%{ transform:translateX(220%); } }
@keyframes kdCaret{ 0%,42%{ opacity:0; } 46%,62%{ opacity:1; } 66%,100%{ opacity:0; } }

/* Quem pediu menos movimento vê a janela JÁ MONTADA — o estado final da
   animação — em vez de nada. Congelar não é o mesmo que esconder. */
@media (prefers-reduced-motion:reduce){
  .kd-raiz *,
  .kd-raiz *::before,
  .kd-raiz *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
                     animation-fill-mode:forwards !important; transition-duration:.001ms !important; }
  .kd-mk-bar{ width:100%; }
  .kd-mk-caret{ opacity:0; }
}

/* ── Desktop: o celular ampliado ──────────────────────────────────────────── */
@media (min-width:761px){
  .kd-wrap{ padding:44px 22px 48px; max-width:900px; }
  .kd-h1{ font-size:30px; }
  .kd-sub{ font-size:16.5px; }
  .kd-card{ padding:30px; border-radius:20px; }
  .kd-tools{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kd-plans{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .kd-plans.is-solo{ grid-template-columns:minmax(0,1fr); }
  /* Mensal e anual lado a lado, metade cada (2026-09-27). O grátis, se houver,
     vai para a linha de baixo, centralizado. */
  .kd-plans.kd-plans--lado{ grid-template-columns:minmax(0,1fr); max-width:840px; margin:0 auto; }
  .kd-plans-pagos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:stretch; }
  .kd-plans-pagos .kd-plano{ display:flex; flex-direction:column; }
  .kd-plans-pagos .kd-cta{ margin-top:auto; }
  .kd-plans--lado .kd-plano--gratis{ width:100%; max-width:410px; justify-self:center; }
  .kd-authaside{ display:block; }
  .kd-authgrid{ grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:34px; }
  .kd-vcenter, .kd-authgrid{ min-height:calc(100vh - 200px); }

  /* A barra deixa de ser fixa: no desktop não há teclado virtual subindo nem
     polegar alcançando só o rodapé, e uma faixa colada embaixo numa tela larga
     parece erro de layout. */
  .kd-foot{ position:static; background:none; backdrop-filter:none; border-top:none;
            padding:0; margin:32px auto 0; max-width:420px; justify-content:center; }
  .kd-foot .kd-cta{ flex:0 0 auto; }
}