/* =====================================================================
   DESENROLADO — Design System
   Um arquivo só. Todas as páginas carregam este.
   Mexeu aqui, mudou o site inteiro.

   As três cores da marca vieram da própria logo, amostradas pixel a pixel:
     navy   #071935   verde  #469B5E   âmbar  #F3B941
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root{

  /* --- rampas da marca ------------------------------------------- */
  --navy-900:#071935;  /* da logo */
  --navy-800:#0C2246;
  --navy-700:#14355E;
  --navy-600:#1E4676;
  --navy-200:#B9C2CF;
  --navy-100:#DDE2EA;
  --navy-050:#EFF2F6;

  --green-800:#245C34;
  --green-750:#2A6A3C;  /* mínimo para texto branco em cima (6,5:1) */
  --green-700:#2F7442;  /* mínimo para texto sobre branco (5,7:1)  */
  --green-600:#3A8850;
  --green-500:#469B5E;  /* da logo — preenchimento, não texto      */
  --green-300:#8CC49E;
  --green-100:#DCEEE3;
  --green-050:#EAF3ED;

  --amber-800:#8F6410;  /* única variante que pode virar texto claro */
  --amber-700:#A97B18;
  --amber-600:#CB9422;
  --amber-500:#F3B941;  /* da logo — preenchimento, nunca texto      */
  --amber-200:#F9DFA8;
  --amber-100:#FCF2DE;

  --red-700:#8F2413;
  --red-600:#B3301A;
  --red-100:#FBE8E3;

  /* --- neutros (viés levemente quente, para casar com o âmbar) ---- */
  --paper:#FBFAF8;
  --surface:#FFFFFF;
  --surface-2:#F4F2ED;
  --line:#E4E1DA;
  --line-strong:#CFCBC2;

  /* --- papéis semânticos ------------------------------------------ */
  --bg:var(--paper);
  --text:var(--navy-900);
  --text-2:#3A4657;
  --text-muted:#596473;      /* 5,8:1 no papel */
  --text-on-dark:#FFFFFF;
  --text-on-dark-2:#B9C2CF;

  --brand:var(--green-500);
  --action:var(--green-750);
  --action-hover:var(--green-800);
  --action-soft-bg:var(--green-050);
  --action-soft-line:var(--green-300);
  --action-text:var(--green-700);

  --highlight:var(--amber-500);   /* só preenchimento */
  --highlight-text:var(--amber-800);
  --highlight-bg:var(--amber-100);
  --highlight-line:var(--amber-200);

  /* --- status: sempre acompanhados de rótulo em texto ------------- */
  --ok:var(--green-700);      --ok-bg:var(--green-050);   --ok-line:#B6D8C3;
  --warn:var(--amber-800);    --warn-bg:var(--amber-100); --warn-line:var(--amber-200);
  --bad:var(--red-600);       --bad-bg:var(--red-100);    --bad-line:#EBC0B5;

  /* --- série de gráfico (validada para daltonismo e contraste) ---- */
  --chart-1:#2A5FA6;   /* custo fixo      */
  --chart-2:#B8851C;   /* estilo de vida  */
  --chart-3:#B3301A;   /* juros           */
  --chart-4:#7A4E9E;   /* amortização     */
  --chart-5:#3A8850;   /* poupança        */

  /* --- tipografia -------------------------------------------------- */
  --font-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* Clareza: o display carrega a voz da marca, o corpo carrega a leitura.
     A distância entre os dois é grande de propósito — quem bate o olho
     entende a hierarquia antes de ler qualquer palavra. */
  --fs-4xl:clamp(2.75rem,7vw,4.75rem);
  --fs-3xl:clamp(2.35rem,5.8vw,3.75rem);
  --fs-2xl:clamp(1.8rem,4vw,2.5rem);
  --fs-xl:clamp(1.35rem,2.7vw,1.7rem);
  --fs-lg:1.125rem;
  --fs-md:1rem;
  --fs-sm:0.9375rem;
  --fs-xs:0.8125rem;
  --fs-2xs:0.6875rem;

  --lh-display:1.04;
  --lh-tight:1.1;
  --lh-snug:1.35;
  --lh-normal:1.6;

  /* --- espaçamento (base 4) ---------------------------------------- */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px;  --sp-6:24px;  --sp-8:32px;  --sp-10:40px;
  --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;
  --sp-32:128px;

  /* --- forma ------------------------------------------------------- */
  --r-sm:6px;  --r-md:10px;  --r-lg:14px;  --r-xl:20px;
  --r-2xl:28px; --r-full:999px;

  /* --- elevação ------------------------------------------------------
     Profundidade: cada degrau é uma camada de distância da página, não
     um contorno mais escuro. Sombra difusa e de baixa opacidade, como
     objeto flutuando sobre papel. */
  --sh-1:0 1px 2px rgba(7,25,53,.05);
  --sh-2:0 1px 2px rgba(7,25,53,.05), 0 8px 20px -12px rgba(7,25,53,.22);
  --sh-3:0 1px 2px rgba(7,25,53,.06), 0 20px 44px -22px rgba(7,25,53,.38);
  --sh-4:0 2px 4px rgba(7,25,53,.06), 0 34px 68px -28px rgba(7,25,53,.44);

  /* --- movimento -------------------------------------------------------
     Uma curva só para tudo que entra e sai: começa rápido, chega devagar,
     nunca passa do ponto. É o que faz o movimento parecer físico em vez
     de programado. */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);      /* entradas longas          */
  --ease-in-out:cubic-bezier(.65,0,.35,1);  /* idas e voltas            */
  --dur-1:120ms;  --dur-2:220ms;  --dur-3:420ms;  --dur-4:720ms;

  --wrap:1080px;
  --wrap-narrow:780px;
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
/* clip, não hidden: corta o que escapa na horizontal sem transformar o
   html em contêiner de rolagem (o que quebraria position:sticky) */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:var(--fs-md); line-height:var(--lh-normal);
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--action-text)}
h1,h2,h3,h4{line-height:var(--lh-tight);letter-spacing:-.02em;text-wrap:balance;font-weight:800}
h1{font-size:var(--fs-3xl);line-height:var(--lh-display);letter-spacing:-.035em}
h2{font-size:var(--fs-2xl);letter-spacing:-.028em}
h3{font-size:var(--fs-xl);letter-spacing:-.015em}
h4{font-size:var(--fs-lg);letter-spacing:-.01em;font-weight:700}
strong,b{font-weight:700}

::selection{background:var(--amber-200);color:var(--navy-900)}
:focus-visible{outline:3px solid var(--green-600);outline-offset:2px;border-radius:var(--r-sm)}

.ds-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ds-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-6)}
.ds-wrap--narrow{max-width:var(--wrap-narrow)}
.ds-stack{display:flex;flex-direction:column}
.ds-muted{color:var(--text-muted)}

/* ---------------------------------------------------------------------
   3. MOTIVO DA MARCA — a linha que sobe
   O ícone é um vale que vira flecha ascendente. Esse ângulo vira o
   elemento estrutural do site: divisor de seção e barra de progresso.
   --------------------------------------------------------------------- */
.ds-rise{
  height:6px; border:0; margin:0;
  background:linear-gradient(90deg,
    var(--navy-700) 0%, var(--navy-700) 34%,
    var(--amber-500) 34%, var(--amber-500) 62%,
    var(--green-500) 62%, var(--green-500) 100%);
}
.ds-rise--thin{height:3px}

/* ---------------------------------------------------------------------
   4. LOGO
   --------------------------------------------------------------------- */
.ds-logo{display:inline-flex;align-items:center;gap:var(--sp-3);text-decoration:none}
.ds-logo img{height:28px;width:auto}   /* lockup compacto, proporção 7,5:1 */
.ds-logo--sm img{height:22px}
.ds-logo--lg img{height:36px}

.ds-tagline{
  font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
}
.ds-tagline i{width:6px;height:6px;border-radius:50%;display:block;flex:none;font-style:normal}
.ds-tagline i:nth-of-type(1){background:var(--green-500)}
.ds-tagline i:nth-of-type(2){background:var(--amber-500)}
.ds-tagline i:nth-of-type(3){background:var(--navy-900)}
.ds-tagline--on-dark{color:var(--text-on-dark-2)}
.ds-tagline--on-dark i:nth-of-type(3){background:#fff}

/* ---------------------------------------------------------------------
   5. SUPERFÍCIES
   --------------------------------------------------------------------- */
/* Deferência: um cartão é uma folha sobre a mesa. Sombra difusa e borda
   quase invisível — a borda existe para o modo de alto contraste, não
   para ser vista. */
.ds-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:var(--sp-8);
  box-shadow:var(--sh-2);
  transition:transform var(--dur-3) var(--ease-out),
             box-shadow var(--dur-3) var(--ease-out);
}
.ds-card + .ds-card{margin-top:var(--sp-5)}
.ds-card--flat{box-shadow:none}
.ds-card--tight{padding:var(--sp-6) var(--sp-5)}
@media(max-width:560px){.ds-card{padding:var(--sp-6) var(--sp-5)}}

.ds-panel{
  background:var(--navy-900); color:var(--text-on-dark);
  border-radius:var(--r-xl); padding:var(--sp-8);
  position:relative; overflow:hidden;
}
.ds-panel h1,.ds-panel h2,.ds-panel h3{color:#fff}
.ds-panel p{color:var(--text-on-dark-2)}
/* eco discreto do arco do ícone */
.ds-panel::after{
  content:""; position:absolute; right:-90px; top:-110px;
  width:300px; height:300px; border-radius:50%;
  border:1px solid rgba(70,155,94,.18); pointer-events:none;
}
@media(max-width:560px){.ds-panel{padding:var(--sp-6) var(--sp-5)}}

/* Ar. O espaço entre seções é o que separa um assunto do outro sem
   precisar de linha, caixa ou cor. */
.ds-section{padding-block:var(--sp-20)}
.ds-section--tall{padding-block:var(--sp-24)}
.ds-section + .ds-section{border-top:1px solid var(--line)}
@media(max-width:640px){
  .ds-section{padding-block:var(--sp-16)}
  .ds-section--tall{padding-block:var(--sp-16)}
}

/* ---------------------------------------------------------------------
   6. TIPOGRAFIA DE APOIO
   --------------------------------------------------------------------- */
.ds-eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--action-text);
  display:block; margin-bottom:var(--sp-3);
}
.ds-eyebrow--on-dark{color:var(--green-300)}
.ds-lead{font-size:var(--fs-lg);line-height:var(--lh-snug);color:var(--text-2)}
.ds-note{font-size:var(--fs-xs);line-height:1.5;color:var(--text-muted)}

/* ---------------------------------------------------------------------
   7. BOTÃO
   Variantes: primary · secondary · ghost · highlight
   Tamanhos:  sm · (padrão) · lg
   --------------------------------------------------------------------- */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:inherit; font-size:var(--fs-md); font-weight:700; line-height:1;
  padding:var(--sp-4) var(--sp-6); border-radius:var(--r-md);
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
             transform var(--dur-1) var(--ease);
  min-height:48px;                     /* alvo de toque confortável */
}
.ds-btn:active{transform:translateY(1px)}
.ds-btn:disabled,.ds-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}

.ds-btn--primary{background:var(--action);color:#fff}
.ds-btn--primary:hover:not(:disabled){background:var(--action-hover)}

.ds-btn--secondary{background:transparent;color:var(--text-2);border-color:var(--line-strong)}
.ds-btn--secondary:hover:not(:disabled){background:var(--surface-2);color:var(--text)}

.ds-btn--ghost{background:transparent;color:var(--action-text);padding-inline:var(--sp-3)}
.ds-btn--ghost:hover:not(:disabled){background:var(--action-soft-bg)}

/* âmbar carrega texto navy: 9,9:1. É o botão de maior chamada. */
.ds-btn--highlight{background:var(--amber-500);color:var(--navy-900)}
.ds-btn--highlight:hover:not(:disabled){background:var(--amber-200)}

.ds-btn--block{width:100%}
.ds-btn--sm{font-size:var(--fs-sm);padding:var(--sp-3) var(--sp-4);min-height:40px}
.ds-btn--lg{font-size:var(--fs-lg);padding:var(--sp-5) var(--sp-8);min-height:56px}

.ds-btnrow{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
.ds-btnrow .ds-btn{flex:1}
.ds-btnrow .ds-btn--secondary{flex:0 0 32%}
@media(max-width:560px){
  .ds-btnrow{flex-direction:column-reverse}
  .ds-btnrow .ds-btn,.ds-btnrow .ds-btn--secondary{flex:none;width:100%}
}

/* ---------------------------------------------------------------------
   8. CAMPO DE FORMULÁRIO
   Estados: default · focus · invalid · disabled
   --------------------------------------------------------------------- */
.ds-field{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.ds-field > label{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.ds-field .ds-hint{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.45;margin-top:-2px}
.ds-field .ds-err{font-size:var(--fs-xs);color:var(--bad);font-weight:600;display:none}
.ds-field.is-invalid .ds-err{display:block}

.ds-input,
.ds-field input[type=text],.ds-field input[type=email],
.ds-field input[type=tel],.ds-field input[type=number],.ds-field select{
  font-family:inherit; font-size:var(--fs-md); width:100%;
  padding:var(--sp-3) var(--sp-4); color:var(--text);
  background:var(--surface); border:1.5px solid var(--line-strong);
  border-radius:var(--r-md); min-height:48px;
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.ds-field input:focus,.ds-field select:focus{
  outline:none; border-color:var(--green-600);
  box-shadow:0 0 0 3px var(--action-soft-bg);
}
.ds-field.is-invalid input,.ds-field.is-invalid select{border-color:var(--bad)}
.ds-field input::placeholder{color:#9AA3B0}

/* prefixo de moeda */
.ds-money{position:relative;display:flex;align-items:center}
.ds-money .ds-prefix{
  position:absolute; left:var(--sp-4); font-family:var(--font-mono);
  font-size:var(--fs-sm); color:var(--text-muted); pointer-events:none;
}
.ds-money input{padding-left:44px}

.ds-check{display:flex;gap:var(--sp-3);align-items:flex-start;margin:var(--sp-2) 0 var(--sp-4)}
.ds-check input{margin-top:3px;width:20px;height:20px;flex:none;accent-color:var(--green-700)}
.ds-check label{font-size:var(--fs-xs);color:var(--text-2);line-height:1.5}

/* ---------------------------------------------------------------------
   9. SELO / CHIP
   --------------------------------------------------------------------- */
.ds-chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px var(--sp-3); border-radius:var(--r-full);
  border:1px solid var(--line-strong); color:var(--text-muted); background:var(--surface);
}
.ds-chip--ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.ds-chip--warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.ds-chip--bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.ds-chip--on-dark{color:var(--amber-500);background:rgba(243,185,65,.14);border-color:rgba(243,185,65,.4)}
.ds-chip .ds-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ---------------------------------------------------------------------
   10. ALERTA  (status nunca só por cor: sempre com título em texto)
   --------------------------------------------------------------------- */
.ds-alert{
  border:1px solid var(--line); border-left:4px solid var(--action);
  background:var(--surface); border-radius:var(--r-md);
  padding:var(--sp-5) var(--sp-6); margin-block:var(--sp-4);
}
.ds-alert h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.ds-alert p{font-size:var(--fs-sm);color:var(--text-2)}
.ds-alert p + p{margin-top:var(--sp-2)}
.ds-alert ul{margin:var(--sp-2) 0 0 var(--sp-5);color:var(--text-2);font-size:var(--fs-sm);display:flex;flex-direction:column;gap:6px}
.ds-alert--ok{background:var(--ok-bg);border-color:var(--ok-line);border-left-color:var(--ok)}
.ds-alert--ok h3{color:var(--ok)}
.ds-alert--warn{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--warn)}
.ds-alert--warn h3{color:var(--warn)}
.ds-alert--bad{background:var(--bad-bg);border-color:var(--bad-line);border-left-color:var(--bad)}
.ds-alert--bad h3{color:var(--bad)}

/* mensagem inline de formulário */
.ds-msg{display:none;margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.5}
.ds-msg.is-on{display:block}
.ds-msg--bad{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad)}
.ds-msg--ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}

/* ---------------------------------------------------------------------
   11. PROGRESSO EM ETAPAS  (o motivo da linha que sobe, aplicado)
   --------------------------------------------------------------------- */
.ds-steps{display:flex;gap:var(--sp-1);margin-bottom:var(--sp-6)}
.ds-steps i{flex:1;height:5px;border-radius:3px;background:var(--line);display:block;
  transition:background var(--dur-2) var(--ease)}
.ds-steps i.is-done{background:var(--green-600)}
.ds-steps i.is-current{background:var(--amber-500)}
.ds-stepno{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  display:block;margin-bottom:var(--sp-3)}

/* ---------------------------------------------------------------------
   12. NÚMEROS
   --------------------------------------------------------------------- */
.ds-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.ds-stat{background:var(--surface);padding:var(--sp-5) var(--sp-4)}
.ds-stat .ds-stat-v{font-size:1.9rem;font-weight:800;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--action-text)}
.ds-stat .ds-stat-k{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.4;margin-top:var(--sp-2)}
.ds-stat--bad .ds-stat-v{color:var(--bad)}
.ds-stat--neutral .ds-stat-v{color:var(--text)}

.ds-subtotal{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);
  background:var(--action-soft-bg);border:1px solid var(--action-soft-line);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:var(--sp-2) 0 var(--sp-1);
}
.ds-subtotal span{font-size:var(--fs-sm);font-weight:600;color:var(--action-text)}
.ds-subtotal b{font-family:var(--font-mono);font-size:var(--fs-md);font-weight:600;
  color:var(--action-text);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------
   13. TABELA  (usada pelo DRE)
   --------------------------------------------------------------------- */
.ds-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ds-table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--fs-sm)}
.ds-table th{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);font-weight:600;
  text-align:right;padding:0 var(--sp-3) var(--sp-2);
  border-bottom:2px solid var(--line-strong);
}
.ds-table th.l{text-align:left}
.ds-table td{padding:7px var(--sp-3);border-bottom:1px solid var(--line);
  text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-table td.l{text-align:left;font-family:var(--font-sans);white-space:normal}
.ds-table tr.is-item td{color:var(--text-2);font-size:var(--fs-xs)}
.ds-table tr.is-item td.l{padding-left:var(--sp-6)}
.ds-table tr.is-group td{font-weight:700;background:var(--surface-2);
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.02em}
.ds-table tr.is-group td.l{font-family:var(--font-mono);letter-spacing:.1em}
.ds-table tr.is-sub td{font-weight:700;background:var(--action-soft-bg);color:var(--action-text);
  border-top:2px solid var(--action-soft-line);border-bottom:2px solid var(--action-soft-line)}
.ds-table tr.is-final td{font-weight:700;background:var(--navy-900);color:#fff;border:0}
.ds-table td.is-neg{color:var(--bad)}
.ds-table tr.is-final td.is-neg{color:#F5A48D}

/* ---------------------------------------------------------------------
   14. GRÁFICO DE COMPOSIÇÃO
   --------------------------------------------------------------------- */
.ds-bar{display:flex;gap:2px;height:36px;border-radius:var(--r-sm);
  overflow:hidden;background:var(--surface-2);margin:var(--sp-2) 0 var(--sp-4)}
.ds-bar b{display:block;height:100%}
.ds-legend{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5)}
.ds-legend span{display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);color:var(--text-2)}
.ds-legend i{width:12px;height:12px;border-radius:3px;flex:none;display:block}
.ds-legend b{font-family:var(--font-mono);font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------
   15. RODAPÉ
   --------------------------------------------------------------------- */
.ds-legalbar{
  background:var(--surface-2);color:var(--text-muted);
  font-size:var(--fs-xs);line-height:1.45;text-align:center;
  padding:var(--sp-2) var(--sp-6);border-bottom:1px solid var(--line);
}
.ds-topbar{background:var(--navy-900);padding:var(--sp-4) 0}
.ds-footer{background:var(--surface-2);padding:var(--sp-8) 0 var(--sp-12);
  font-size:var(--fs-xs);color:var(--text-muted);line-height:1.55}
.ds-footer p{margin-bottom:var(--sp-2)}
.ds-footer strong{color:var(--text-2)}

/* ---------------------------------------------------------------------
   16. ACESSIBILIDADE E MOVIMENTO
   --------------------------------------------------------------------- */
.ds-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------------
   17. MOVIMENTO
   Três regras, e só três:
     1. Nada se move sem motivo. Movimento é hierarquia, não enfeite.
     2. Tudo entra da mesma direção, com a mesma curva, na mesma cadência.
     3. Quem pediu menos movimento no sistema não vê movimento nenhum,
        e continua vendo a página inteira.
   O conteúdo só é escondido quando o <html> tem a classe .js, que o
   próprio script coloca. Se o JavaScript falhar, a página aparece
   inteira, parada — nunca em branco.
   --------------------------------------------------------------------- */

/* --- entrada por rolagem ------------------------------------------- */
.js .ds-rv{opacity:0;transform:translate3d(0,22px,0)}
.js .ds-rv{transition:opacity var(--dur-4) var(--ease-out),
                      transform var(--dur-4) var(--ease-out)}
.js .ds-rv.is-in{opacity:1;transform:none}

/* variantes de direção — profundidade vem de camadas entrando em
   planos diferentes, não de sombra mais forte */
.js .ds-rv--up{transform:translate3d(0,36px,0)}
/* na tela estreita não existe entrada lateral: o deslocamento horizontal
   empurraria a página e criaria barra de rolagem no eixo errado */
@media(min-width:900px){
  .js .ds-rv--left{transform:translate3d(-28px,0,0)}
  .js .ds-rv--right{transform:translate3d(28px,0,0)}
}
.js .ds-rv--scale{transform:scale(.965) translate3d(0,18px,0)}
.js .ds-rv--blur{filter:blur(6px)}
.js .ds-rv--blur.is-in{filter:none}
.js .ds-rv.is-in{transform:none}

/* --- cascata: os filhos entram em sequência ------------------------- */
.js [data-cascata] > *{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity var(--dur-3) var(--ease-out),
             transform var(--dur-3) var(--ease-out)}
.js [data-cascata].is-in > *{opacity:1;transform:none}
.js [data-cascata].is-in > *:nth-child(1){transition-delay:0ms}
.js [data-cascata].is-in > *:nth-child(2){transition-delay:70ms}
.js [data-cascata].is-in > *:nth-child(3){transition-delay:140ms}
.js [data-cascata].is-in > *:nth-child(4){transition-delay:210ms}
.js [data-cascata].is-in > *:nth-child(5){transition-delay:280ms}
.js [data-cascata].is-in > *:nth-child(6){transition-delay:350ms}
.js [data-cascata].is-in > *:nth-child(n+7){transition-delay:420ms}

/* --- elevação no ponteiro ------------------------------------------- */
@media(hover:hover){
  .ds-lift{transition:transform var(--dur-3) var(--ease-out),
                      box-shadow var(--dur-3) var(--ease-out)}
  .ds-lift:hover{transform:translateY(-4px);box-shadow:var(--sh-4)}
  .ds-btn{transition:background var(--dur-2) var(--ease),
                     border-color var(--dur-2) var(--ease),
                     transform var(--dur-2) var(--ease-out),
                     box-shadow var(--dur-2) var(--ease-out)}
  .ds-btn--primary:hover:not(:disabled),
  .ds-btn--highlight:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--sh-2)}
}
.ds-btn:active:not(:disabled){transform:translateY(1px);box-shadow:none}

/* --- barra de navegação flutuante -----------------------------------
   Deferência aplicada literalmente: a barra é translúcida e desfoca o
   que passa por baixo. Ela mostra que existe conteúdo ali sem competir
   com ele. */
.ds-nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(7,25,53,.86);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
          backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(-100%);
  transition:transform var(--dur-3) var(--ease-out);
  will-change:transform;
}
.ds-nav.is-on{transform:none}
.ds-nav .ds-wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);padding-block:var(--sp-2)}
.ds-nav img{height:22px;width:auto}
/* a logo é um link: o alvo de toque tem de ter 44px mesmo com a imagem
   de 22px, então a diferença vira preenchimento invisível */
.ds-nav .ds-logo{padding-block:11px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ds-nav{background:var(--navy-900)}
}

/* --- números que contam ---------------------------------------------
   O valor final já está no HTML. O script só troca o texto enquanto
   conta; se ele não rodar, o número correto continua lá. */
.ds-count{font-variant-numeric:tabular-nums}

/* --- barra de progresso da leitura ---------------------------------- */
.ds-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:61;
  background:transparent;pointer-events:none}
.ds-progress i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--navy-600),var(--amber-500) 60%,var(--green-500));
  transition:width 90ms linear}

/* --- respiração do ponto vivo --------------------------------------- */
@keyframes ds-pulso{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.45;transform:scale(.82)}
}
.ds-chip .ds-dot{animation:ds-pulso 2.6s var(--ease-in-out) infinite}

/* --- foco do formulário: o cartão sobe um degrau -------------------- */
.ds-focuscard{transition:box-shadow var(--dur-3) var(--ease-out),
                         transform var(--dur-3) var(--ease-out)}
.ds-focuscard:focus-within{box-shadow:var(--sh-4);transform:translateY(-2px)}

/* --- FAQ que abre com altura animada -------------------------------- */
.ds-reveal{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-3) var(--ease-out)}
.ds-reveal > div{overflow:hidden}
details[open] > .ds-reveal{grid-template-rows:1fr}

/* ---------------------------------------------------------------------
   18. QUEM PEDIU MENOS MOVIMENTO
   Preferência do sistema operacional. Some o movimento, fica o conteúdo.
   --------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .js .ds-rv,
  .js [data-cascata] > *{opacity:1!important;transform:none!important;filter:none!important}
  .ds-nav{transition:none}
  .ds-lift:hover{transform:none}
}