/* Notas — páginas de texto da Vanguard. Mesmos tokens do site (styles.css). */
:root {
  --ink:#0A0D12; --ink-2:#12161E; --line:#232C3D; --lime:#C6F04D;
  --paper:#F4F4EF; --mist:#8A93A3; --mist-2:#7E8899;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--ink); color:var(--paper); font-family:var(--display); font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased; }
a { color:var(--lime); text-underline-offset:3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:2px solid var(--lime); outline-offset:3px; border-radius:2px; }
::selection { background:var(--lime); color:var(--ink); }

.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
main .wrap > * { max-width:680px; }

/* leitura: coluna de texto + capa do carrossel presa ao lado, como prancha na parede */
.leitura { max-width:1080px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"cabeca" "capa" "corpo"; }
.cabeca { grid-area:cabeca; }
.corpo { grid-area:corpo; min-width:0; }
.capa { grid-area:capa; max-width:340px; margin:0 0 44px; }
@media (min-width:980px) {
  .leitura { grid-template-columns:minmax(0,680px) 300px; column-gap:80px; grid-template-areas:"cabeca capa" "corpo capa"; }
  .capa { position:sticky; top:36px; align-self:start; max-width:none; margin:6px 0 0; }
}

/* figuras: slide cru com marcas de corte, legenda em mono */
.quadro { position:relative; display:block; border:1px solid var(--line); line-height:0; }
.quadro::before, .quadro::after { content:""; position:absolute; width:14px; height:14px; border-color:var(--lime); border-style:solid; z-index:1; }
.quadro::before { top:-5px; left:-5px; border-width:2px 0 0 2px; }
.quadro::after { bottom:-5px; right:-5px; border-width:0 2px 2px 0; }
.quadro img { display:block; width:100%; height:auto; aspect-ratio:4/5; background:var(--ink-2); }
figcaption { font-family:var(--mono); font-size:12px; line-height:1.6; letter-spacing:.02em; color:var(--mist-2); margin-top:14px; }
figcaption a { color:var(--mist); }
.prancha { max-width:420px; margin:38px 0 34px; }

/* topo */
.top { border-bottom:1px solid var(--line); padding:22px 0; }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--paper); text-decoration:none; }
.brand span { font-weight:700; font-size:15px; letter-spacing:.12em; }
.brand em { font-style:normal; color:var(--lime); }
.top-links { display:flex; gap:20px; }
.top-links a { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist); text-decoration:none; }
.top-links a:hover, .top-links a[aria-current] { color:var(--lime); }

main { padding:64px 0 88px; }

/* trilha */
.crumbs { font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--mist-2); margin-bottom:26px; }
.crumbs a { color:var(--mist); text-decoration:underline; text-decoration-color:rgba(138,147,163,.5); text-underline-offset:3px; }
.crumbs a:hover { color:var(--lime); }

.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--lime); margin-bottom:14px; }
h1 { font-weight:800; font-stretch:112%; font-size:clamp(32px,6vw,52px); line-height:1.06; letter-spacing:-.02em; margin-bottom:22px; text-wrap:balance; }
.dek { font-size:19px; color:var(--mist); margin-bottom:34px; text-wrap:pretty; }

/* ficha técnica: a assinatura das notas — mesma prova de gráfica dos carrosséis */
.ficha { position:relative; border:1px solid var(--line); padding:18px 20px; margin-bottom:44px; display:grid; grid-template-columns:repeat(2,auto); justify-content:start; gap:14px 48px; }
@media (min-width:600px) { .ficha { grid-template-columns:repeat(4,auto); justify-content:space-between; gap:14px 24px; } }
.ficha::before, .ficha::after { content:""; position:absolute; width:14px; height:14px; border-color:var(--lime); border-style:solid; }
.ficha::before { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.ficha::after { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.ficha div { display:flex; flex-direction:column; gap:2px; }
.ficha dt { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist-2); }
.ficha dd { font-family:var(--mono); font-size:13px; color:var(--paper); }

/* resposta curta: o trecho que a máquina extrai */
.resposta { border-left:3px solid var(--lime); background:var(--ink-2); padding:20px 22px; margin-bottom:40px; }
.resposta .rotulo { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); margin-bottom:8px; }
.resposta p { color:var(--paper); margin:0; }

article h2 { font-weight:700; font-stretch:106%; font-size:clamp(22px,3.4vw,27px); line-height:1.25; margin:52px 0 14px; letter-spacing:-.01em; }
article h3 { font-weight:700; font-size:19px; margin:30px 0 8px; }
article p { color:var(--mist); margin-bottom:16px; }
article strong { color:var(--paper); font-weight:600; }
article ul, article ol { color:var(--mist); margin:0 0 18px; padding-left:22px; }
article li { margin-bottom:9px; padding-left:4px; }
article li::marker { color:var(--lime); font-family:var(--mono); }

.dado { display:block; font-weight:800; font-stretch:115%; font-size:clamp(56px,12vw,96px); line-height:1; color:var(--lime); letter-spacing:-.03em; margin:34px 0 6px; }
.dado-legenda { font-family:var(--mono); font-size:13px; color:var(--mist); margin-bottom:30px; }

.table-scroll { overflow-x:auto; margin:18px 0 24px; }
table { width:100%; border-collapse:collapse; font-size:15px; min-width:520px; }
th, td { text-align:left; padding:12px 14px; border:1px solid var(--line); vertical-align:top; }
th { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist-2); font-weight:400; }
td { color:var(--mist); }
td:first-child { color:var(--paper); }
td code { font-family:var(--mono); font-size:13px; color:var(--lime); }

/* bloco de configuração copiável */
.codigo { margin:18px 0 24px; padding:18px 20px; background:var(--ink-2); border:1px solid var(--line); border-left:3px solid var(--lime); overflow-x:auto; font-family:var(--mono); font-size:14px; line-height:1.6; color:var(--paper); white-space:pre; }
.codigo .com { color:var(--mist-2); }

/* checagem salvável */
.checagem { counter-reset:item; list-style:none; padding:0 !important; border-top:1px solid var(--line); }
.checagem li { counter-increment:item; display:grid; grid-template-columns:44px 1fr; gap:4px 12px; padding:18px 0 !important; margin:0 !important; border-bottom:1px solid var(--line); }
.checagem li::before { content:counter(item,decimal-leading-zero); font-family:var(--mono); font-size:13px; color:var(--lime); padding-top:3px; }
.checagem strong { display:block; margin-bottom:2px; }

/* perguntas frequentes */
.faq details { border-bottom:1px solid var(--line); }
.faq details:first-of-type { border-top:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; padding:18px 36px 18px 0; position:relative; font-weight:600; color:var(--paper); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:4px; top:15px; font-family:var(--mono); font-size:20px; color:var(--lime); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding-bottom:16px; }

.fontes { margin-top:52px; padding-top:22px; border-top:1px solid var(--line); }
.fontes h2 { font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mist-2); margin:0 0 12px; }
.fontes ol { font-size:14px; }
.fontes li { color:var(--mist-2); }
.aviso { font-size:14px; color:var(--mist-2) !important; font-style:italic; }

.cta { margin-top:56px; padding:28px; border:1px solid var(--line); background:var(--ink-2); }
.cta p { color:var(--mist); margin-bottom:18px; }
.cta p strong { color:var(--paper); }
.btn { display:inline-block; font-weight:700; font-size:15px; padding:13px 26px; border-radius:8px; background:var(--lime); color:var(--ink); text-decoration:none; }
.btn:hover { filter:brightness(1.06); }

/* índice de notas */
.lista { list-style:none; border-top:1px solid var(--line); }
.lista li { border-bottom:1px solid var(--line); }
.lista a { display:block; padding:26px 0; text-decoration:none; color:var(--paper); }
.lista time { font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--mist-2); }
.lista h2 { font-weight:700; font-stretch:106%; font-size:clamp(21px,3.2vw,26px); line-height:1.25; margin:6px 0 8px; }
.lista p { color:var(--mist); font-size:16px; }
.lista a:hover h2 { color:var(--lime); }

footer { border-top:1px solid var(--line); padding:28px 0; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist-2); }
footer .wrap { display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; }
footer a { color:var(--mist); text-decoration:none; }
footer a:hover { color:var(--lime); }

@media (max-width:560px) {
  body { font-size:16px; }
  main { padding:44px 0 64px; }
  .top-links { gap:14px; }
  .resposta { padding:16px 18px; }
  .cta { padding:22px 18px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }