/* Gerado a partir de DESIGN.md v2. Nenhum hex fora de :root. */

:root{
  --bg:#FFFFFF;            --bg-rgb:255,255,255;
  --bg-subtle:#F6F8FB;     --bg-subtle-rgb:246,248,251;
  --surface:#FFFFFF;       --surface-rgb:255,255,255;

  --heading:#0B1F33;       --heading-rgb:11,31,51;
  --label:#24374F;         --label-rgb:36,55,79;
  --body:#5B6B84;          --body-rgb:91,107,132;

  --accent:#4B3BF5;        --accent-rgb:75,59,245;
  --accent-hover:#3D2FD1;  --accent-hover-rgb:61,47,209;
  --accent-active:#2F24A8; --accent-active-rgb:47,36,168;
  --accent-soft:#EEEDFE;   --accent-soft-rgb:238,237,254;

  --border:#E3EAF2;        --border-rgb:227,234,242;
  --border-strong:#C9D5E3; --border-strong-rgb:201,213,227;

  --success:#0E8C46;       --success-rgb:14,140,70;
  --danger:#C0392B;        --danger-rgb:192,57,43;
  --disabled-bg:#EEF2F7;   --disabled-fg:#9AA8BC;

  --shadow-sm:0 1px 2px rgba(50,50,93,.08), 0 1px 1px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(50,50,93,.10), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:0 12px 28px rgba(50,50,93,.14), 0 4px 8px rgba(0,0,0,.06);

  --r-sm:4px; --r:6px; --r-lg:8px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --container:1080px; --gutter:20px;
  --t:120ms cubic-bezier(.4,0,.2,1);
  --t-shadow:150ms ease-out;

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B1220;            --bg-rgb:11,18,32;
    --bg-subtle:#121A2B;     --bg-subtle-rgb:18,26,43;
    --surface:#121A2B;       --surface-rgb:18,26,43;
    --heading:#EAF0F8;       --heading-rgb:234,240,248;
    --label:#C3CFE0;         --label-rgb:195,207,224;
    --body:#9AAAC2;          --body-rgb:154,170,194;
    --accent:#8E86FF;        --accent-rgb:142,134,255;
    --accent-hover:#A9A3FF;  --accent-hover-rgb:169,163,255;
    --accent-active:#C2BDFF; --accent-active-rgb:194,189,255;
    --accent-soft:#1B2044;   --accent-soft-rgb:27,32,68;
    --border:#23304A;        --border-rgb:35,48,74;
    --border-strong:#35466A; --border-strong-rgb:53,70,106;
    --success:#3DD07E;       --success-rgb:61,208,126;
    --danger:#FF8A7A;        --danger-rgb:255,138,122;
    --disabled-bg:#1A2337;   --disabled-fg:#5D6B86;
    --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* ---------- tipografia ---------- */

h1,h2,h3{color:var(--heading);margin:0}
h1{font-size:40px;font-weight:300;line-height:1.12;letter-spacing:-.7px;margin-bottom:var(--s4);max-width:20ch}
h1.display{font-size:48px;line-height:1.08;letter-spacing:-.9px}
h2{font-size:26px;font-weight:400;line-height:1.25;letter-spacing:-.3px;margin:var(--s9) 0 var(--s3)}
h2:first-of-type{margin-top:var(--s7)}
h3{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.1px;margin:var(--s5) 0 var(--s2)}
.card h3{margin-top:0}

p{margin:0 0 14px;max-width:66ch}
.lede{font-size:18px;line-height:1.6;margin-bottom:var(--s5);max-width:60ch}
.small{font-size:14px;line-height:1.55}
.muted{color:var(--body)}
.updated{font-size:14px;color:var(--body);margin:calc(var(--s4) * -1) 0 var(--s5)}

ul,ol{margin:0 0 14px;padding-left:22px;max-width:66ch}
li{margin:0 0 7px}

strong{color:var(--heading);font-weight:500}

.eyebrow{
  display:block;font-size:12.5px;font-weight:500;letter-spacing:.5px;
  text-transform:uppercase;color:var(--body);margin-bottom:var(--s2);
}

hr{border:0;border-top:1px solid var(--border);margin:var(--s8) 0}

/* ---------- link ---------- */

a{color:var(--accent);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
a:active{color:var(--accent-active)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;text-decoration:none}
a:visited{color:var(--accent)}

/* ---------- cabeçalho ---------- */

header.site{
  border-bottom:1px solid var(--border);
  background:var(--bg);
  position:sticky;top:0;z-index:20;
}
header.site .wrap{display:flex;align-items:center;gap:var(--s5);min-height:64px;flex-wrap:wrap}

.brand{
  font-weight:600;font-size:16px;color:var(--heading);
  letter-spacing:-.2px;white-space:nowrap;
}
.brand:hover{color:var(--heading);text-decoration:none}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-sm)}

nav.main{margin-left:auto;display:flex;gap:var(--s5);flex-wrap:wrap}
nav.main a{
  color:var(--body);font-size:14px;font-weight:400;
  padding:6px 0;position:relative;
}
nav.main a:hover{color:var(--heading);text-decoration:none}
nav.main a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
nav.main a.on{color:var(--heading);font-weight:500}
nav.main a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--accent);
}

/* ---------- conteúdo ---------- */

main{padding:var(--s8) 0 var(--s9)}
section{margin:0}

/* ---------- botões ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 20px;
  background:var(--accent);color:var(--bg);
  border:1px solid var(--accent);border-radius:var(--r);
  font-family:var(--font);font-size:16px;font-weight:500;line-height:1;
  cursor:pointer;
  transition:background var(--t),border-color var(--t),box-shadow var(--t-shadow),transform var(--t);
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--bg);text-decoration:none;box-shadow:var(--shadow-sm)}
.btn:active{background:var(--accent-active);border-color:var(--accent-active);box-shadow:none;transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn[aria-disabled="true"]{background:var(--disabled-bg);border-color:var(--disabled-bg);color:var(--disabled-fg);cursor:not-allowed;box-shadow:none;transform:none}

.btn.ghost{background:transparent;color:var(--accent);border-color:var(--border-strong)}
.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn.ghost:active{background:var(--accent-soft);transform:translateY(1px)}
.btn.ghost[aria-disabled="true"]{background:transparent;border-color:var(--border);color:var(--disabled-fg)}

.btn-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin:var(--s5) 0}

/* ---------- cards ---------- */

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:var(--s5) 0}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--s5);
}
.card p{max-width:none}
.card p:last-child{margin-bottom:0}
.card.linked{transition:border-color var(--t),box-shadow var(--t-shadow)}
.card.linked:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.card:focus-within{outline:2px solid var(--accent);outline-offset:2px}

.price{
  font-size:28px;font-weight:500;line-height:1.1;letter-spacing:-.4px;
  color:var(--heading);font-variant-numeric:tabular-nums;
  margin:var(--s1) 0 var(--s1);
}
.price .cur{font-size:14px;font-weight:400;letter-spacing:0;color:var(--body)}

.tag{
  display:inline-block;font-size:12.5px;font-weight:500;
  letter-spacing:.5px;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  padding:3px 8px;border-radius:var(--r-sm);margin-bottom:var(--s3);
}

.note{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);
  margin:var(--s5) 0;
}
.note p:last-child{margin-bottom:0}

/* ---------- tabela ---------- */

table{width:100%;border-collapse:collapse;margin:var(--s5) 0;font-size:15px}
caption{text-align:left;font-size:14px;color:var(--body);padding-bottom:var(--s2)}
th{
  text-align:left;padding:12px 14px;
  font-size:12.5px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;
  color:var(--body);background:var(--bg-subtle);
  border-bottom:1px solid var(--border-strong);
}
td{
  padding:12px 14px;vertical-align:top;
  border-bottom:1px solid var(--border);color:var(--body);
}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- definições ---------- */

dl.meta{margin:var(--s5) 0;max-width:66ch}
dl.meta dt{font-weight:500;color:var(--heading);margin-top:var(--s3)}
dl.meta dd{margin:2px 0 0;color:var(--body)}

/* ---------- formulário ---------- */

label{display:block;font-size:14px;font-weight:500;color:var(--label);margin-bottom:6px}
input,textarea,select{
  width:100%;max-width:420px;min-height:44px;
  padding:10px 12px;
  font-family:var(--font);font-size:16px;color:var(--heading);
  background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--r);
  transition:border-color var(--t),box-shadow var(--t);
}
input:hover,textarea:hover,select:hover{border-color:var(--body)}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);
}
input:disabled,textarea:disabled,select:disabled{background:var(--disabled-bg);color:var(--disabled-fg);cursor:not-allowed}
.field-error{color:var(--danger);font-size:14px;margin-top:4px}

/* ---------- rodapé ---------- */

footer.site{
  border-top:1px solid var(--border);
  background:var(--bg-subtle);
  padding:var(--s7) 0 var(--s6);
  font-size:14px;line-height:1.6;
}
footer.site .cols{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer.site strong{
  display:block;color:var(--heading);
  font-size:12.5px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:var(--s3);
}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:8px}
footer.site a{color:var(--body)}
footer.site a:hover{color:var(--heading)}
footer.site address{font-style:normal;color:var(--body);margin:0}
.legalbar{
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--border);font-size:13px;
}
.legalbar p{max-width:none}
.cards-accepted{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s3)}
.cards-accepted span{
  border:1px solid var(--border);background:var(--surface);
  border-radius:var(--r-sm);padding:4px 10px;
  font-size:12px;font-weight:500;color:var(--body);
}

/* ---------- responsivo ---------- */

@media (min-width:781px){
  :root{--gutter:24px}
}

@media (max-width:780px){
  h1.display{font-size:34px;letter-spacing:-.6px}
  h1{font-size:30px;letter-spacing:-.5px}
  h2{font-size:22px;margin-top:var(--s7)}
  main{padding:var(--s6) 0 var(--s7)}
}

@media (max-width:600px){
  header.site .wrap{min-height:auto;padding-top:var(--s3);padding-bottom:var(--s3);gap:var(--s3)}
  nav.main{margin-left:0;width:100%;gap:var(--s4);justify-content:flex-start}
  nav.main a{padding:11px 0;min-height:44px;display:inline-flex;align-items:center}
  .btn{width:100%}
  .btn-row{flex-direction:column}

  /* tabelas empilham: cada linha vira bloco, cabeçalho repetido por data-label */
  table,thead,tbody,tr,td{display:block;width:100%}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  tr{
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:var(--s3) var(--s4);margin-bottom:var(--s3);background:var(--surface);
  }
  td{border:0;padding:8px 0;text-align:left}
  td.num{text-align:left}
  tbody tr:last-child td{border-bottom:0}
  td::before{
    content:attr(data-label);
    display:block;
    font-size:12.5px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;
    color:var(--body);margin-bottom:2px;
  }
  td:not([data-label])::before{content:none}
}

@media (max-width:420px){
  :root{--gutter:16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

@media print{
  header.site,nav.main{position:static}
  a{color:inherit;text-decoration:underline}
}