/*
 * Finance X Capital: estilos compartilhados do site principal.
 * Decisões e contraste: design-system/finance-x-capital/MASTER.md
 * Ordem: tokens, base, layout, tipografia, componentes, movimento.
 */

/* ---------- Tokens ---------- */
:root{
  color-scheme: light;

  /* Marca */
  --navy-900:#08172B; --navy-800:#0B1E36; --navy-700:#102A4C; --navy-600:#16365F; --navy-500:#1E477A;
  --gold-300:#ECDBAE; --gold-400:#D8B968; --gold-500:#C9A24B; --gold-600:#B68A33; --gold-700:#8A6420;

  /* Texto e superfícies */
  --ink:#0E1726; --slate-700:#33445C; --slate-500:#5C6B82; --slate-400:#7C8AA0; --slate-300:#AEB9C9;
  --surface:#FFFFFF; --surface-2:#F6F8FB; --surface-3:#EDF1F7;
  --line:#E5E9F0; --line-2:#D7DEE9;
  --success:#1E7F5C;

  /* Papéis */
  --text:var(--ink); --text-2:var(--slate-700); --text-3:var(--slate-500);
  --link:var(--navy-700); --link-hover:var(--navy-600);
  --focus:var(--navy-500); --focus-on-dark:var(--gold-400);

  /* Tipografia */
  --font-display:"Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display:clamp(2.25rem, 1.65rem + 2.4vw, 3.5rem);
  --fs-h2:clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  --fs-h3:clamp(1.25rem, 1.18rem + .3vw, 1.375rem);
  --fs-lead:clamp(1.125rem, 1.09rem + .15vw, 1.1875rem);
  --fs-body:clamp(1rem, .975rem + .1vw, 1.0625rem);
  --fs-small:.875rem;
  --fs-label:.8125rem;

  /* Espaçamento: escala fixa 8 a 128 */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;
  --section-y:clamp(var(--s-6), 4rem + 3vw, var(--s-8));

  /* Forma */
  --r-1:4px; --r-2:8px;
  --shadow-float:0 12px 32px -8px rgba(8,23,43,.18), 0 2px 6px rgba(8,23,43,.06);

  /* Layout */
  --maxw:1200px; --gutter:24px; --side:16px; --measure:68ch;

  /* Movimento */
  --dur-1:150ms; --dur-2:250ms; --ease:cubic-bezier(.2,0,0,1); --reveal-y:12px;
}
@media (min-width:768px){ :root{ --side:32px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0; background:var(--surface); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
img{ border-radius:var(--r-2); }
a{ color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; transition:color var(--dur-1) var(--ease); }
a:hover{ color:var(--link-hover); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-1); }
.on-dark :focus-visible, .on-dark:focus-visible, .section--dark :focus-visible{ outline-color:var(--focus-on-dark); }
::selection{ background:var(--gold-300); color:var(--navy-900); }
.tnum{ font-variant-numeric:tabular-nums; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.skip{
  position:absolute; left:var(--s-2); top:-100px; z-index:1000;
  background:var(--navy-900); color:#fff; padding:var(--s-1) var(--s-2); border-radius:var(--r-1);
  font-weight:600; text-decoration:none;
}
.skip:focus{ top:var(--s-2); color:#fff; outline-color:var(--focus-on-dark); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:calc(var(--maxw) + 2 * var(--side)); margin-inline:auto; padding-inline:var(--side); }
.grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter); row-gap:var(--s-4); }
.grid > *{ grid-column:1 / -1; }
@media (min-width:1024px){
  /* O span vai no fim da coluna para que .col-start-N possa definir o início sem anular a largura. */
  .col-4{ grid-column:auto / span 4; } .col-5{ grid-column:auto / span 5; } .col-6{ grid-column:auto / span 6; }
  .col-7{ grid-column:auto / span 7; } .col-8{ grid-column:auto / span 8; }
  .col-start-7{ grid-column-start:7; } .col-start-8{ grid-column-start:8; } .col-start-9{ grid-column-start:9; }
}
@media (min-width:768px) and (max-width:1023.98px){ .md-col-6{ grid-column:span 6; } }

.section{ padding-block:var(--section-y); }
.section--alt{ background:var(--surface-2); }
.section--dark{ background:var(--navy-900); color:#fff; }
.section + .section:not(.section--alt):not(.section--dark){ border-top:1px solid var(--line); }
.section-head{ max-width:44rem; margin-bottom:var(--s-5); }
.section-head p{ margin-top:var(--s-2); }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; color:var(--text); margin:0; letter-spacing:-.015em; text-wrap:balance; }
h1,.display{ font-size:var(--fs-display); line-height:1.08; letter-spacing:-.025em; }
h2{ font-size:var(--fs-h2); line-height:1.15; }
h3{ font-size:var(--fs-h3); line-height:1.3; letter-spacing:-.01em; }
h4{ font-family:var(--font-body); font-size:var(--fs-body); line-height:1.4; letter-spacing:0; }
p{ margin:0; max-width:var(--measure); }
p + p{ margin-top:var(--s-2); }
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--text-2); }
.small{ font-size:var(--fs-small); line-height:1.5; color:var(--text-3); }
.label{
  display:block; font-size:var(--fs-label); line-height:1.4; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-700);
}
.on-dark, .section--dark{ --text:#fff; --text-2:var(--slate-300); --text-3:var(--slate-400); --link:#fff; --link-hover:var(--gold-300); }
.on-dark .label, .section--dark .label{ color:var(--gold-400); }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-1);
  min-height:48px; padding:12px var(--s-3);
  font:600 .9375rem/1.2 var(--font-body); letter-spacing:.005em; text-decoration:none; text-align:center;
  border:1px solid transparent; border-radius:var(--r-1); cursor:pointer;
  transition:background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn--primary{ background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-700); }
.btn--primary:hover{ background:var(--gold-400); color:var(--navy-900); }
.on-dark .btn--primary, .section--dark .btn--primary{ border-color:var(--gold-500); }
.btn--secondary{ background:transparent; color:var(--navy-700); border-color:var(--navy-700); }
.btn--secondary:hover{ background:var(--navy-700); color:#fff; }
.on-dark .btn--secondary, .section--dark .btn--secondary{ color:#fff; border-color:rgba(255,255,255,.72); }
.on-dark .btn--secondary:hover, .section--dark .btn--secondary:hover{ background:#fff; color:var(--navy-900); border-color:#fff; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4); }
@media (max-width:479.98px){ .btn-row .btn{ width:100%; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:var(--s-1); list-style:none; margin:0 0 var(--s-3); padding:0; font-size:var(--fs-small); color:var(--text-3); }
.breadcrumb li + li::before{ content:"›"; margin-right:var(--s-1); color:var(--text-3); }
.breadcrumb a{ color:inherit; display:inline-block; padding-block:2px; }
.breadcrumb [aria-current="page"]{ color:var(--text-2); }

/* ---------- Card ---------- */
.card{ display:block; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-2); padding:var(--s-4); color:inherit; text-decoration:none; }
.card h3 + p{ margin-top:var(--s-1); color:var(--text-2); }
a.card{ transition:border-color var(--dur-1) var(--ease); }
a.card:hover{ border-color:var(--navy-700); color:inherit; }

/* ---------- Ficha técnica (elemento de assinatura) ---------- */
.termsheet{ margin:0; border-top:1px solid var(--line-2); }
.termsheet > div{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-1); padding:var(--s-2) 0; border-bottom:1px solid var(--line); }
.termsheet dt{ font-size:var(--fs-label); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); line-height:1.4; }
.termsheet dd{ margin:0; color:var(--text); font-variant-numeric:tabular-nums; }
@media (min-width:768px){ .termsheet > div{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s-3); align-items:baseline; } }

/* ---------- Passos numerados ---------- */
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; display:grid; gap:var(--s-4); }
.steps > li{ counter-increment:step; display:grid; grid-template-columns:48px minmax(0,1fr); gap:var(--s-2); padding-top:var(--s-3); border-top:1px solid var(--line-2); }
.steps > li::before{ content:counter(step, decimal-leading-zero); grid-row:1 / span 2; font:600 1.125rem/1.3 var(--font-display); color:var(--gold-700); font-variant-numeric:tabular-nums; }
.steps > li > *{ grid-column:2; }
.steps h3{ font-size:1.125rem; }
.steps p{ margin-top:var(--s-1); color:var(--text-2); }
@media (min-width:1024px){ .steps--4{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gutter); } .steps--4 > li{ grid-template-columns:1fr; } .steps--4 > li::before{ grid-row:auto; } .steps--4 > li > *{ grid-column:1; } }

/* ---------- FAQ (details nativo, funciona sem JS) ---------- */
.faq{ border-top:1px solid var(--line-2); max-width:52rem; }
.faq details{ border-bottom:1px solid var(--line-2); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  min-height:56px; padding:var(--s-2) 0; cursor:pointer; list-style:none;
  font:600 1.0625rem/1.4 var(--font-body); color:var(--text);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:none; width:16px; height:16px;
  background:linear-gradient(currentColor,currentColor) center/16px 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 16px no-repeat;
  color:var(--navy-700); transition:transform var(--dur-2) var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > div{ padding:0 0 var(--s-3); color:var(--text-2); }

/* ---------- Página de texto jurídico ---------- */
.legal-hero{ padding-block:var(--s-6) var(--s-5); background:var(--surface-2); }
.legal-hero .lead{ margin-top:var(--s-2); }
.section--legal{ padding-top:var(--s-6); }
.legal-toc ol{ margin:var(--s-2) 0 0; padding:0; list-style:none; border-top:1px solid var(--line-2); font-size:var(--fs-small); }
.legal-toc li{ border-bottom:1px solid var(--line); }
.legal-toc a{ display:block; padding:10px 0; color:var(--text-2); text-decoration:none; }
.legal-toc a:hover{ color:var(--link); text-decoration:underline; }
@media (min-width:1024px){ .legal-toc{ position:sticky; top:96px; align-self:start; max-height:calc(100vh - 120px); overflow-y:auto; } }
.legal-body{ color:var(--text-2); }
.legal-body h2{ font-size:var(--fs-h3); margin:var(--s-5) 0 var(--s-2); color:var(--text); scroll-margin-top:96px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-size:1.0625rem; margin:var(--s-3) 0 var(--s-1); }
.legal-body p + p, .legal-body ul + p, .legal-body p + ul{ margin-top:var(--s-2); }
.legal-body ul{ margin:var(--s-2) 0 0; padding-left:1.25rem; }
.legal-body li + li{ margin-top:var(--s-1); }
.legal-body strong{ color:var(--text); font-weight:600; }

/* ---------- Movimento de entrada (Blur Fade portado, sem blur em loop) ---------- */
.js [data-reveal]{ opacity:0; filter:blur(6px); transform:translateY(var(--reveal-y)); transition:opacity 500ms var(--ease), filter 500ms var(--ease), transform 500ms var(--ease); transition-delay:calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-in{ opacity:1; filter:none; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:0s !important; animation-duration:0s !important; animation-iteration-count:1 !important; }
  .js [data-reveal]{ opacity:1; filter:none; transform:none; }
}