/* ============================================================
   Informativo Tributário — primitivas editoriais
   Carrega DEPOIS de /assets/tema.css, que traz paleta, tipografia
   base e cabeçalho. Aqui ficam só as peças de leitura longa.
   ============================================================ */
:root{
  /* apelidos que as matérias já usavam, apontando para o tema do site */
  --bord-950:var(--vinho-3);
  --bord-900:var(--vinho);
  --bord-800:var(--vinho);
  --wine:var(--vinho-2);
  --gold:var(--dourado);
  --gold-soft:var(--dourado-claro);
  --gold-deep:var(--dourado-texto);   /* legível sobre fundo claro */
  --gold-faint:rgba(199,154,103,.14);
  --paper:var(--nude-claro);
  --mist:var(--nude);
  --ink-2:#4A3A40;                    /* 10,3:1 sobre o papel */
  --line:var(--linha-clara);
  --serif:var(--disp);
  --label:var(--disp);
  --max:var(--maxw);
  --read:64ch;
}

/* Estas páginas são de leitura longa e boa parte do público tem dificuldade
   de visão. Corpo maior, peso 400 (e não 300) e entrelinha generosa. */
body{
  background:var(--paper);font-size:18px;font-weight:400;line-height:1.78;
  text-rendering:optimizeLegibility;
}
.container{width:min(var(--max),92vw);margin:0 auto}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);font-weight:400;color:var(--bord-800);margin:0;
  text-transform:uppercase;text-wrap:balance;
}
/* Julius Sans One tem traço fino e caixa alta: quanto maior o texto, menos
   espaçamento ele aguenta sem ficar lento de ler. */
h1{font-size:clamp(1.85rem,3.9vw,3rem);line-height:1.26;letter-spacing:.05em}
h2{font-size:clamp(1.4rem,2.8vw,2.05rem);line-height:1.32;letter-spacing:.07em}
h3{font-size:1.05rem;line-height:1.5;letter-spacing:.12em}
h4{font-size:.94rem;line-height:1.5;letter-spacing:.12em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--bord-800)}
/* sobre vinho o negrito precisa clarear, senão fica vinho sobre vinho */
.ato strong,.rodape strong,.garantia strong,.total strong{color:var(--dourado-claro)}
em{font-style:italic}

/* frases longas que eram serifadas viram Cormorant itálico, como as
   citações do site — caixa alta só nos títulos curtos */
.destaque-frase{
  font-family:var(--acc);font-style:italic;font-weight:500;
  text-transform:none;letter-spacing:0;
}

.kicker{
  display:flex;align-items:center;gap:16px;
  font-family:var(--label);font-size:.8rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 20px;
}
.kicker::before{content:"";width:44px;height:1px;background:var(--dourado);flex:none}
/* sobre vinho volta o dourado da marca, que ali é legível */
.ato .kicker,.abertura .kicker{color:var(--gold)}

/* Rótulos dourados que ficam sobre fundo claro. Vinham do CSS original das
   matérias com o dourado da marca (2,28:1) — aqui recebem o tom legível.
   Os que ficam sobre vinho (.tese .letra, .connector .lbl) seguem dourados. */
.sintese .rot,
.passo .n,
.onus .depois .rot,
.pergunta .onde,
.perguntas .p .n,
.avaliar .item .n,
.chip{color:var(--gold-deep)}
.chip{border-color:var(--gold-deep)}

/* ---------- barra de progresso de leitura ---------- */
#progresso{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--dourado-claro));
  z-index:110;transition:width .08s linear;
}

/* ---------- seções ---------- */
.secao{padding:96px 0}
.secao.mist{background:var(--mist);border-block:1px solid var(--line)}
.cab{max-width:var(--read);margin-bottom:40px}
.prosa{max-width:var(--read)}
.prosa p{color:var(--ink)}

/* ---------- hero editorial ---------- */
.hero{padding:88px 0 0}
.hero-grid{display:grid;gap:44px}
@media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:end}}
.hero .dek{margin-top:28px;font-size:1.14rem;line-height:1.7;color:var(--ink);max-width:56ch}
.byline{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:32px;
  font-family:var(--label);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
/* o rótulo precisa se separar do valor: ambos são caixa alta */
.byline b{font-weight:400;color:var(--gold-deep)}

/* ---------- frase-síntese ---------- */
.sintese{margin-top:76px;border-top:1px solid var(--line)}
.sintese-in{display:grid;gap:14px;padding:34px 0 40px}
@media(min-width:840px){.sintese-in{grid-template-columns:180px 1fr;gap:48px}}
.sintese .rot{
  font-family:var(--label);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);padding-top:12px;
}
.sintese p{
  font-family:var(--acc);font-style:italic;font-weight:500;
  font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.42;color:var(--vinho);
  margin:0;max-width:36ch;border-left:2px solid var(--gold);padding-left:26px;
}

/* ---------- analogia (citação larga) ---------- */
.analogia{
  max-width:var(--read);margin:64px 0 0;padding:28px 0 0;border-top:1px solid var(--line);
  font-family:var(--acc);font-style:italic;font-weight:500;
  font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.5;color:var(--vinho);
}

/* ---------- seção escura ---------- */
.ato{background:var(--vinho);color:var(--nude);padding:100px 0;position:relative;overflow:hidden}
.ato::before{
  content:"";position:absolute;inset:0;background-image:var(--pattern);
  background-size:120px;background-position:14px 18px;opacity:.05;pointer-events:none;
}
.ato > .container{position:relative;z-index:1}
.ato .kicker{color:var(--gold)}
.ato h2,.ato h3{color:var(--nude)}
.ato .cab p{color:#E2D7C7}
.ato .cab{margin-bottom:52px}

/* ---------- fecho e assinatura ---------- */
.fecho{background:var(--mist);border-top:1px solid var(--line);padding:96px 0}
.fecho .prosa p{font-size:1.02rem}
.assina{margin-top:52px;padding-top:32px;border-top:1px solid var(--line);display:grid;gap:26px}
@media(min-width:840px){.assina{grid-template-columns:1fr auto;align-items:end}}
.assina .quem .nome{
  font-family:var(--serif);font-size:1rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bord-800);display:block;
}
.assina .quem .oab{
  font-family:var(--label);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);display:block;margin-top:8px;
}
.assina .canais{font-size:.9rem;line-height:2;color:var(--ink-2)}
@media(min-width:840px){.assina .canais{text-align:right}}
.assina a{color:var(--vinho);text-decoration:none;border-bottom:1px solid rgba(199,154,103,.6)}
.assina a:hover{border-bottom-color:var(--vinho)}

/* ---------- rodapé ---------- */
.rodape{
  padding:60px 0 68px;background:var(--vinho-3);color:#DCD0BF;
  border-top:1px solid rgba(199,154,103,.22);
}
.rodape-in{display:grid;gap:28px;max-width:900px}
@media(min-width:800px){.rodape-in{grid-template-columns:150px 1fr;gap:48px}}
.rodape img{width:138px;height:auto}
/* o aviso da OAB é texto que precisa ser lido, não decoração de rodapé:
   cor opaca (11,6:1) e corpo maior que o antigo .76rem */
.rodape p{font-size:.88rem;line-height:1.8;color:var(--texto-claro-suave);margin:0 0 1em}
.rodape a{color:var(--dourado-claro);text-decoration:none;border-bottom:1px solid rgba(199,154,103,.35)}
.rodape a:hover{color:var(--dourado)}


/* ---------- mobile ---------- */
@media(max-width:720px){
  body{font-size:17px;line-height:1.75}
  .container{width:min(var(--max),90vw)}
  .hero{padding:52px 0 0}
  .secao{padding:60px 0}
  .ato{padding:64px 0}
  .fecho{padding:64px 0}
  .kicker{letter-spacing:.18em;font-size:.74rem;margin-bottom:16px;gap:12px}
  .kicker::before{width:26px}
  .hero-grid{gap:32px}
  .hero .dek{font-size:1.06rem;margin-top:20px}
  .byline{gap:8px 18px;margin-top:22px;font-size:.7rem;letter-spacing:.12em}
  .sintese{margin-top:48px}
  .sintese-in{padding:26px 0 30px;gap:10px}
  .sintese p{font-size:1.25rem;padding-left:20px}
  .cab{margin-bottom:28px}
  .analogia{margin-top:40px;padding-top:24px;font-size:1.2rem}
  .assina{margin-top:40px;padding-top:26px}
  .assina .canais{font-size:.86rem;line-height:1.9}
  .rodape{padding:40px 0 52px}
  .rodape img{width:120px}
}
@media(max-width:380px){
  h1{font-size:1.7rem}
  .sintese p{font-size:1.15rem}
  .byline{font-size:.68rem}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}