/* ==========================================================================
   Movimento Chargeback Legal — Design System v0.1
   Arquivo único de tokens + componentes. Prefixo de classes: nenhum (site
   pequeno), nomes em português, BEM simplificado: .bloco, .bloco__parte, .bloco--variacao
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Cor — marca */
  --tinta: #0B1830;          /* navy profundo: textos fortes, seções escuras, rodapé */
  --tinta-2: #13254A;        /* superfície escura elevada */
  --andrade: #26388F;        /* azul do logo: cor primária, links, botões */
  --andrade-700: #1C2A6E;    /* hover/pressed */
  --andrade-100: #DCE2F5;
  --andrade-50: #EEF1FA;     /* fundos de destaque suave */

  /* Cor — neutros (levemente azulados, nunca cinza puro) */
  --papel: #F6F7FA;          /* fundo alternado de seções */
  --branco: #FFFFFF;
  --linha: #DDE2EC;          /* bordas e divisórias */
  --texto: #1B2438;          /* texto corrido */
  --texto-2: #4A5468;        /* texto secundário, legendas */
  --texto-3: #6B7488;        /* metadados (mín. 4.5:1 sobre branco) */

  /* Cor — semânticas (uso restrito ao significado) */
  --recuperado: #0F7A5A;     /* valores recuperados, decisões favoráveis */
  --recuperado-50: #E6F4EE;
  --prazo: #A04B08;          /* prazos, alertas de urgência */
  --prazo-50: #FDF1E4;
  --risco: #B42318;          /* erro de formulário, risco de bloqueio de CNPJ */
  --risco-50: #FDECEA;
  --whatsapp: #128C4A;       /* SOMENTE no botão de WhatsApp */
  --whatsapp-700: #0D6E3A;

  /* Tipografia */
  --fonte-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --fonte-texto: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-dado: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Escala tipográfica (razão ~1.25, fluida entre 375px e 1280px) */
  --t-xs: 0.8125rem;                                   /* 13px  metadados, rótulos */
  --t-sm: 0.9375rem;                                   /* 15px  legendas, UI */
  --t-base: 1.0625rem;                                 /* 17px  texto corrido */
  --t-lg: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);  /* lead / H4 */
  --t-xl: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);     /* H3 */
  --t-2xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);    /* H2 */
  --t-3xl: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);    /* H1 */

  /* Espaçamento (base 4px) */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;

  /* Forma */
  --raio-sm: 4px;            /* selos, inputs */
  --raio: 8px;               /* botões, cards */
  --raio-lg: 14px;           /* blocos de destaque */
  --sombra: 0 1px 2px rgba(11,24,48,.06), 0 4px 16px rgba(11,24,48,.06);
  --sombra-lg: 0 2px 4px rgba(11,24,48,.06), 0 16px 40px rgba(11,24,48,.10);

  /* Layout */
  --largura-site: 1200px;
  --largura-leitura: 68ch;
  --gutter: clamp(1rem, 4vw, 2rem);
  --transicao: .2s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--branco); color: var(--texto);
  font-family: var(--fonte-texto); font-size: var(--t-base); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--andrade); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--andrade-700); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--andrade); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--fonte-display); color: var(--tinta); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -.01em; }
h1 { font-size: var(--t-3xl); font-weight: 500; letter-spacing: -.02em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); font-family: var(--fonte-texto); font-weight: 700; letter-spacing: 0; }
p { margin: 0; }

.container { width: 100%; max-width: var(--largura-site); margin-inline: auto; padding-inline: var(--gutter); }
.secao { padding-block: var(--e-9); }
.secao--papel { background: var(--papel); }
.secao--tinta { background: var(--tinta); color: #C9D1E3; }
.secao--tinta h2, .secao--tinta h3 { color: var(--branco); }
.pilha { display: flex; flex-direction: column; gap: var(--e-4); }

/* Rótulo/sobretítulo: mono, caixa alta */
.rotulo { font-family: var(--fonte-dado); font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--andrade); }
.lead { font-size: var(--t-lg); color: var(--texto-2); line-height: 1.55; max-width: 60ch; }
.dado { font-family: var(--fonte-dado); font-variant-numeric: tabular-nums; }

/* ---------- 3. Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: .75rem 1.375rem; border-radius: var(--raio); border: 1.5px solid transparent;
  font: 600 var(--t-sm)/1.2 var(--fonte-texto); text-decoration: none; cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn:hover { text-decoration: none; }
.btn--primario { background: var(--andrade); color: var(--branco); }
.btn--primario:hover { background: var(--andrade-700); color: var(--branco); }
.btn--whatsapp { background: var(--whatsapp); color: var(--branco); }
.btn--whatsapp:hover { background: var(--whatsapp-700); color: var(--branco); }
.btn--secundario { background: transparent; color: var(--andrade); border-color: var(--andrade-100); }
.btn--secundario:hover { border-color: var(--andrade); color: var(--andrade-700); }
.btn--claro { background: var(--branco); color: var(--tinta); }
.btn--grande { min-height: 56px; padding-inline: 1.75rem; font-size: var(--t-base); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- 4. Selos ---------- */
.selo { display: inline-flex; align-items: center; gap: .35em; padding: .2rem .55rem; border-radius: var(--raio-sm); font: 600 var(--t-xs)/1.4 var(--fonte-texto); background: var(--andrade-50); color: var(--andrade); }
.selo--recuperado { background: var(--recuperado-50); color: var(--recuperado); }
.selo--prazo { background: var(--prazo-50); color: var(--prazo); }
.selo--categoria { background: transparent; border: 1px solid var(--linha); color: var(--texto-2); font-weight: 500; }

/* ---------- 5. Callouts (dentro de artigos) ---------- */
.callout { display: grid; gap: var(--e-2); padding: var(--e-5); border-radius: var(--raio); background: var(--andrade-50); border: 1px solid var(--andrade-100); }
.callout__titulo { font: 700 var(--t-sm)/1.3 var(--fonte-texto); color: var(--tinta); display: flex; gap: var(--e-2); align-items: center; }
.callout--prazo { background: var(--prazo-50); border-color: #F3D3AE; }
.callout--prazo .callout__titulo { color: var(--prazo); }
.callout--risco { background: var(--risco-50); border-color: #F5C2BC; }
.callout--risco .callout__titulo { color: var(--risco); }
/* Resposta rápida: alvo de featured snippet, sempre logo após o H1 */
.resposta-rapida { padding: var(--e-5) var(--e-5) var(--e-5) var(--e-6); background: var(--papel); border-left: 3px solid var(--andrade); font-size: var(--t-lg); line-height: 1.55; }
.resposta-rapida strong:first-child { display: block; font: 500 var(--t-xs)/1 var(--fonte-dado); text-transform: uppercase; letter-spacing: .08em; color: var(--andrade); margin-bottom: var(--e-3); }

/* ---------- 6. Citação jurídica (trecho de sentença/lei) ---------- */
.citacao-juridica { margin: 0; padding: var(--e-5) var(--e-6); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); position: relative; }
.citacao-juridica blockquote { margin: 0; font: italic 400 var(--t-lg)/1.5 var(--fonte-display); color: var(--tinta); }
.citacao-juridica figcaption { margin-top: var(--e-4); font: 400 var(--t-xs)/1.5 var(--fonte-dado); color: var(--texto-3); }

/* ---------- 7. Card de caso (resultado) ---------- */
.caso { display: grid; gap: var(--e-3); padding: var(--e-6); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-lg); }
.caso__empresa { font: 600 var(--t-xl)/1.2 var(--fonte-display); color: var(--tinta); }
.caso__segmento { font-size: var(--t-sm); color: var(--texto-3); }
.caso__valor { font: 500 var(--t-2xl)/1 var(--fonte-dado); color: var(--recuperado); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.caso__valor small { display: block; font: 500 var(--t-xs)/1.4 var(--fonte-texto); color: var(--texto-2); letter-spacing: 0; margin-top: var(--e-1); }
.caso__links { display: flex; flex-wrap: wrap; gap: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--linha); font-size: var(--t-sm); }

/* ---------- 8. Linha do tempo do chargeback ---------- */
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.linha-tempo li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--e-4); padding-bottom: var(--e-5); position: relative; }
.linha-tempo li::before { content: ""; position: absolute; left: calc(5.5rem + var(--e-4) / 2 - 1px); top: .5rem; bottom: 0; width: 2px; background: var(--linha); }
.linha-tempo li:last-child::before { display: none; }
.linha-tempo__dia { font: 500 var(--t-sm)/1.6 var(--fonte-dado); color: var(--andrade); text-align: right; padding-right: var(--e-4); }
.linha-tempo__corpo { padding-left: var(--e-4); }
.linha-tempo__corpo strong { display: block; color: var(--tinta); }
.linha-tempo__corpo span { font-size: var(--t-sm); color: var(--texto-2); }

/* ---------- 9. Tabela (reason codes, prazos) ---------- */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 520px; }
.tabela th { text-align: left; font: 600 var(--t-xs)/1.4 var(--fonte-texto); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); background: var(--papel); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); }
.tabela td { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td:first-child { font-family: var(--fonte-dado); color: var(--andrade); white-space: nowrap; }

/* ---------- 10. FAQ (details/summary, compatível com FAQPage schema) ---------- */
.faq { border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; padding: var(--e-5) 2.5rem var(--e-5) 0; position: relative; font: 600 var(--t-lg)/1.35 var(--fonte-display); color: var(--tinta); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font: 300 1.75rem/1 var(--fonte-texto); color: var(--andrade); transition: transform var(--transicao); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 0 var(--e-5); color: var(--texto-2); max-width: var(--largura-leitura); }

/* ---------- 11. Navegação de conteúdo ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); color: var(--texto-3); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--e-2); color: var(--linha); }
.breadcrumb a { color: var(--texto-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--andrade); text-decoration: underline; }

.sumario { font-size: var(--t-sm); border-left: 1px solid var(--linha); padding-left: var(--e-4); }
.sumario__titulo { font: 500 var(--t-xs)/1 var(--fonte-dado); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); margin-bottom: var(--e-3); }
.sumario ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); counter-reset: s; }
.sumario a { color: var(--texto-2); text-decoration: none; display: block; line-height: 1.4; }
.sumario a:hover, .sumario a[aria-current="true"] { color: var(--andrade); }
.sumario a[aria-current="true"] { font-weight: 600; }

/* ---------- 12. Card de artigo (listagens do blog / relacionados) ---------- */
.card-artigo { display: grid; gap: var(--e-3); padding: var(--e-5); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); text-decoration: none; color: inherit; transition: border-color var(--transicao), box-shadow var(--transicao); }
.card-artigo:hover { border-color: var(--andrade-100); box-shadow: var(--sombra); color: inherit; }
.card-artigo h3 { font-size: var(--t-lg); }
.card-artigo p { font-size: var(--t-sm); color: var(--texto-2); }
.card-artigo__meta { font: 400 var(--t-xs)/1.4 var(--fonte-dado); color: var(--texto-3); }

/* ---------- 13. Autor (E-E-A-T) ---------- */
.autor { display: grid; grid-template-columns: 72px 1fr; gap: var(--e-4); align-items: start; padding: var(--e-5); background: var(--papel); border-radius: var(--raio); }
.autor img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.autor__nome { font: 600 var(--t-base)/1.3 var(--fonte-texto); color: var(--tinta); }
.autor__cargo { font: 400 var(--t-xs)/1.4 var(--fonte-dado); color: var(--texto-3); margin-bottom: var(--e-2); }
.autor p { font-size: var(--t-sm); color: var(--texto-2); }

/* ---------- 14. Faixa de CTA ---------- */
.cta-faixa { display: grid; gap: var(--e-5); align-items: center; padding: var(--e-7) var(--e-6); background: var(--tinta); color: #C9D1E3; border-radius: var(--raio-lg); }
.cta-faixa h2, .cta-faixa h3 { color: var(--branco); }
@media (min-width: 800px) { .cta-faixa { grid-template-columns: 1fr auto; } }

/* ---------- 15. Aviso ético (OAB) ---------- */
.aviso-oab { font-size: var(--t-xs); line-height: 1.6; color: var(--texto-3); border-top: 1px solid var(--linha); padding-top: var(--e-4); max-width: 80ch; }

/* ---------- 16. Layout de artigo ---------- */
.artigo { display: grid; gap: var(--e-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .artigo { grid-template-columns: minmax(0, var(--largura-leitura)) 260px; justify-content: space-between; } .artigo__lateral { position: sticky; top: var(--e-6); align-self: start; } }
.prosa { display: flex; flex-direction: column; gap: var(--e-5); }
.prosa h2 { margin-top: var(--e-6); scroll-margin-top: var(--e-6); }
.prosa h3 { margin-top: var(--e-4); }
.prosa ul, .prosa ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--e-2); }
.prosa li::marker { color: var(--andrade); }