/* Peça aberta — panorama da reforma tributária na saúde.
   Folha própria, sem dependência do guia restrito. */

:root{
  --paper:#F7F6F4; --surface:#FFFFFF; --surface-2:#E9E8E4;
  --ink:#22414F; --ink-2:#2F4A57; --ink-3:#4A5F6A;
  --line:#DFDDD8; --line-2:#D7D2CB;
  --accent:#34657F; --accent-2:#2C6B8D; --accent-soft:#E9EFF2;
  --warn:#8A6A32; --warn-soft:#F5EEE1;
  --ok:#3B6B57; --ok-soft:#E7EFEA;
  --radius:3px;
  --maxw:44rem;
  --shadow:0 1px 2px rgba(34,65,79,.05), 0 14px 34px -24px rgba(34,65,79,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101C22; --surface:#17252C; --surface-2:#1F313A;
    --ink:#E6EDF1; --ink-2:#B8C7CF; --ink-3:#8698A3;
    --line:#2A3D47; --line-2:#3C525E;
    --accent:#7FB0C9; --accent-2:#9AC4D9; --accent-soft:#162C38;
    --warn:#C9A469; --warn-soft:#2E2518;
    --ok:#7FB49A; --ok-soft:#16281F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 38px -26px rgba(0,0,0,.85);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Open Sans', "Segoe UI", system-ui, sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none !important}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.lab{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:1.25rem}

/* ---------- barra ---------- */
.topo{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top, 0px);
}
.topo-in{
  max-width:var(--maxw); margin:0 auto; padding:.7rem 1.25rem;
  display:flex; align-items:center; gap:1rem;
}
.topo .nome{font-weight:600; letter-spacing:-.01em}
.topo .tag{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
/* O nome do escritório é bem mais longo que a assinatura pessoal que havia
   aqui antes, e em 375px a barra passava a estourar 20px. A etiqueta é
   decorativa e sai primeiro; o nome e o botão ficam. */
@media(max-width:560px){
  .topo .tag{display:none}
  .topo-in{gap:.75rem}
}
.topo .btn{
  margin-left:auto; padding:.5rem .9rem; border-radius:999px; border:0; cursor:pointer;
  background:var(--accent); color:#fff; font:600 .84rem/1 inherit; white-space:nowrap;
}
.topo .btn:hover{background:var(--accent-2)}

/* ---------- capa ---------- */
.capa{padding:3.2rem 0 2.4rem; border-bottom:1px solid var(--line)}
.capa h1{
  font-size:clamp(1.95rem, 5.4vw, 2.85rem); line-height:1.08; letter-spacing:-.022em;
  margin:.7rem 0 0; text-wrap:balance; font-weight:600;
}
.capa .sub{font-size:1.1rem; color:var(--ink-2); margin:.95rem 0 0; max-width:34rem}
.capa .meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:1.6rem;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ---------- seções ---------- */
section{padding:2.9rem 0; border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{
  font-size:clamp(1.35rem,3.6vw,1.72rem); line-height:1.2; letter-spacing:-.012em;
  margin:.45rem 0 .2rem; font-weight:600; text-wrap:balance;
}
h3{font-size:1.06rem; margin:1.8rem 0 .3rem; font-weight:600}
p{margin:.85rem 0}
.lede{font-size:1.07rem; color:var(--ink-2)}
.nota{font-size:.88rem; color:var(--ink-3)}

/* ---------- linha do tempo ---------- */
.tl{list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:0}
.tl li{
  display:grid; grid-template-columns:5.2rem 1fr; gap:.3rem 1rem;
  padding:.95rem 0; border-top:1px solid var(--line); align-items:baseline;
}
.tl li:last-child{border-bottom:1px solid var(--line)}
.tl .ano{
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:.92rem; color:var(--accent);
}
.tl .oq{font-weight:600}
.tl .det{grid-column:2; color:var(--ink-2); font-size:.95rem; margin:0}
.tl li.agora{background:var(--accent-soft); margin-inline:-.9rem; padding-inline:.9rem; border-radius:var(--radius)}

@media(max-width:520px){
  .tl li{grid-template-columns:1fr}
  .tl .det{grid-column:1}
}

/* ---------- cartões ---------- */
.cards{display:grid; gap:.9rem; margin-top:1.4rem}
@media(min-width:720px){ .cards.tres{grid-template-columns:repeat(3,minmax(0,1fr))} }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.15rem; box-shadow:var(--shadow);
}
.card .hd{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.card .big{font-size:1.16rem; font-weight:600; margin:.35rem 0 .45rem; line-height:1.22}
.card p{margin:.5rem 0; font-size:.95rem; color:var(--ink-2)}
.card .prazo{
  display:inline-block; margin-top:.6rem; padding:.2rem .5rem; border-radius:4px;
  background:var(--warn-soft); color:var(--warn);
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
}
.card .prazo.ok{background:var(--ok-soft); color:var(--ok)}

/* ---------- caixa ---------- */
.box{
  margin-top:1.3rem; padding:1rem 1.15rem; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
}
.box.attn{border-left-color:var(--warn); background:var(--warn-soft)}
.box .bt{font-weight:600; margin-bottom:.3rem}
.box p{margin:.4rem 0; font-size:.96rem; color:var(--ink-2)}
.box.attn p{color:var(--ink-2)}

/* ---------- perguntas ---------- */
.faq{margin-top:1.3rem; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:.95rem 2rem .95rem 0; position:relative;
  font-weight:600; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:.2rem; top:.85rem;
  font-family:"IBM Plex Mono",monospace; color:var(--accent); font-size:1.1rem;
}
.faq details[open] summary::after{content:"\2212"}
.faq .resp{padding:0 0 1rem; color:var(--ink-2)}
.faq .resp p{margin:.5rem 0; font-size:.96rem}

/* ---------- tabela ---------- */
.tw{overflow-x:auto; margin-top:1.2rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:.94rem; min-width:29rem}
th,td{text-align:left; padding:.62rem .8rem; border-bottom:1px solid var(--line); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th{
  font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); background:var(--surface-2);
  border-bottom:1px solid var(--line-2); white-space:nowrap;
}
td.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- contato ---------- */
/* A seção sai da coluna de leitura: formulário não é prosa e precisa de largura. */
#contato{
  background:var(--surface-2); border-top:1px solid var(--line);
  margin-inline:calc(50% - 50vw); padding-inline:1.25rem;
}
#contato > *{max-width:52rem; margin-inline:auto}
/* o lede acompanha a borda esquerda do bloco; a medida é contida pela direita */
#contato .lede{max-width:52rem}
@media(min-width:900px){ #contato .lede{padding-right:8rem} }

/* O cartão vira faixa horizontal no topo, e o formulário ocupa a largura toda.
   Antes era coluna estreita ao lado de um formulário alto, o que deixava
   um vazio longo à esquerda. */
.ct{display:block; margin-top:1.5rem}
.ct-cartao{
  background:var(--accent); color:#fff; border-radius:var(--radius);
  padding:1.1rem 1.3rem; box-shadow:var(--shadow); margin-bottom:1.3rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1.6rem;
}
.ct-cartao .n{font-size:1.14rem; font-weight:600; line-height:1.2}
.ct-cartao .f{font-size:.84rem; opacity:.85}
.ct-cartao .f::before{content:"·"; margin-right:.5rem; opacity:.6}
.ct-cartao .lks{display:flex; flex-wrap:wrap; gap:.35rem 1.4rem; margin-left:auto}
.ct-cartao a{color:#fff; font-size:.94rem; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:1px}
.ct-cartao a:hover{border-bottom-color:#fff}
@media(max-width:620px){
  .ct-cartao{display:block}
  .ct-cartao .f::before{content:none}
  .ct-cartao .lks{margin:.7rem 0 0; flex-direction:column; gap:.4rem}
}

form .f{margin-bottom:.85rem}
form label{
  display:block; font-family:"IBM Plex Mono",monospace; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.3rem;
}
form input, form select, form textarea{
  width:100%; min-width:0; padding:.68rem .75rem; font:inherit; font-size:.97rem;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:8px;
}
form select{ text-overflow:ellipsis; padding-right:2rem }
form textarea{resize:vertical; min-height:7rem}
form input:focus, form select:focus, form textarea:focus{border-color:var(--accent); outline:none}
form .dois{display:grid; gap:.85rem}
@media(min-width:620px){ form .dois{grid-template-columns:1fr 1fr; gap:1.1rem} }
form button{
  padding:.85rem 1.6rem; border:0; border-radius:8px; cursor:pointer;
  background:var(--accent); color:#fff; font:600 1rem/1 inherit; min-height:3rem;
}
@media(max-width:560px){ form button{width:100%} }
form button:hover{background:var(--accent-2)}
form button[disabled]{opacity:.55; cursor:default}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.msg{margin-top:.7rem; font-size:.92rem; min-height:1.3rem}
.msg.ok{color:var(--ok)} .msg.err{color:var(--warn)}
.cont{text-align:right; font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--ink-3); margin-top:.25rem}

/* ---------- barra fixa de contato ---------- */
.fixa{
  position:fixed; z-index:50;
  right:max(1rem, env(safe-area-inset-right,0px));
  bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.05rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--accent); color:#fff; font:600 .9rem/1 inherit;
  box-shadow:0 2px 6px rgba(34,65,79,.18), 0 14px 34px -14px rgba(34,65,79,.45);
  text-decoration:none;
}
.fixa:hover{background:var(--accent-2)}
@media(max-width:560px){
  .fixa{left:max(1rem,env(safe-area-inset-left,0px)); justify-content:center; border-radius:12px}
}

/* ---------- rodapé ---------- */
footer{padding:2.2rem 0 4.5rem; color:var(--ink-3); font-size:.86rem}
footer p{margin:.5rem 0; max-width:40rem}
.fontes{margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line)}
.fontes li{margin:.3rem 0; font-size:.82rem}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important} }

/* ---------- impressão ---------- */
@media print{
  .topo, .fixa, form, .topo .btn{display:none !important}
  #contato{margin-inline:0; padding-inline:0; background:#fff}
  #contato > *{max-width:none}
  body{background:#fff; color:#000; font-size:10.5pt}
  section{break-inside:auto; border-bottom:1px solid #ccc; padding:.8rem 0}
  h2,h3{break-after:avoid}
  .lede{break-after:avoid}
  .card,.box,.tw,.fig,.troca,.barras,.regua,.stat,.tl li{break-inside:avoid}
  .capa{padding-top:0}
  a{color:#000; text-decoration:none}
  .ct-cartao{background:#eee !important; color:#000 !important}
  .ct-cartao a{color:#000 !important}
  .faq details{page-break-inside:avoid}
  .faq .resp{display:block !important}
}

/* ==========================================================================
   Elementos gráficos
   Cores de figura validadas para visão normal e para daltonismo
   (deuteranopia, protanopia e tritanopia) contra as duas superfícies.
   ========================================================================== */
:root{ --viz-1:#34657F; --viz-2:#A28664; --viz-linha:#DFDDD8; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --viz-1:#7FB0C9; --viz-2:#C9A469; --viz-linha:#2A3D47; }
}

/* ---------- números de destaque ---------- */
.stats{ display:grid; gap:.7rem; margin-top:1.8rem }
@media(min-width:620px){ .stats{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.9rem 1rem; box-shadow:var(--shadow);
}
.stat .v{
  font-size:1.9rem; line-height:1; font-weight:600; letter-spacing:-.02em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.stat .v small{ font-size:.55em; font-weight:500; color:var(--ink-3); margin-left:.15em }
.stat .l{ margin-top:.45rem; font-size:.86rem; color:var(--ink-2); line-height:1.4 }

/* ---------- figura: substituição de tributos ---------- */
.fig{ margin:1.6rem 0 0 }
.fig-cap{ margin-top:.7rem; font-size:.84rem; color:var(--ink-3) }
.troca{
  display:grid; gap:1rem; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.15rem; box-shadow:var(--shadow);
}
@media(min-width:680px){ .troca{ grid-template-columns:1fr auto 1fr } }
.troca .lado > .t{
  font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.6rem;
}
.chips{ display:flex; flex-wrap:wrap; gap:.4rem }
.chip{
  display:inline-flex; align-items:baseline; gap:.4rem;
  padding:.4rem .6rem; border-radius:7px; font-size:.9rem; font-weight:600;
  background:var(--surface-2); color:var(--ink);
}
.chip .esf{ font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:500 }
.chip.novo{ background:color-mix(in srgb, var(--viz-1) 15%, transparent); color:var(--ink) }
.chip.novo .esf{ color:var(--viz-1) }
.seta{ display:flex; justify-content:center; color:var(--viz-1) }
@media(max-width:679px){ .seta svg{ transform:rotate(90deg) } }
.troca .extra{ grid-column:1/-1; margin:.2rem 0 0; font-size:.88rem; color:var(--ink-2) }

/* ---------- figura: barras de comparação ---------- */
.barras{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.15rem 1.15rem 1rem; box-shadow:var(--shadow);
}
.barras .tit{ font-weight:600; margin-bottom:.15rem }
.barras .sub{ font-size:.86rem; color:var(--ink-3); margin-bottom:1rem }
.brow{ display:grid; grid-template-columns:7.5rem 1fr; gap:.55rem .8rem; align-items:center; margin-bottom:.6rem }
.brow:last-of-type{ margin-bottom:0 }
.brow .rot{ font-size:.88rem; color:var(--ink-2) }
.brow .pista{ position:relative; height:20px; display:flex; align-items:center }
.brow .marca{
  height:20px; border-radius:0 4px 4px 0; background:var(--viz-1);
  display:flex; align-items:center; justify-content:flex-end; padding-right:.5rem;
  min-width:3.4rem;
}
.brow .marca.alt{ background:var(--viz-2) }
.brow .marca .val{ font-size:.78rem; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap }
.barras .base{ margin-top:.9rem; padding-top:.7rem; border-top:1px solid var(--line); font-size:.84rem; color:var(--ink-3) }
@media(max-width:480px){
  .brow{ grid-template-columns:1fr }
  .brow .rot{ margin-bottom:-.3rem }
}

/* ---------- figura: régua do piso ---------- */
.regua{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.15rem; box-shadow:var(--shadow);
}
.regua .faixa{ display:flex; height:22px; border-radius:5px; overflow:hidden; gap:2px }
.regua .p1{ flex:5; background:color-mix(in srgb, var(--viz-1) 22%, transparent) }
.regua .p2{ flex:3; background:var(--viz-2) }
.regua .eixo{
  display:flex; justify-content:space-between; margin-top:.4rem;
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--ink-3);
}
.regua .leg{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:.9rem; font-size:.86rem; color:var(--ink-2) }
.regua .leg span{ display:inline-flex; align-items:center; gap:.45rem }
.regua .leg i{ width:11px; height:11px; border-radius:3px; display:inline-block; flex:0 0 auto }
.regua .leg i.a{ background:color-mix(in srgb, var(--viz-1) 22%, transparent); outline:1px solid var(--viz-1) }
.regua .leg i.b{ background:var(--viz-2) }

/* ---------- linha do tempo com trilho ---------- */
.tl{ position:relative; padding-left:1.7rem }
.tl::before{
  content:""; position:absolute; left:6px; top:1.1rem; bottom:1.1rem;
  width:2px; background:var(--viz-linha);
}
.tl li{ position:relative; border-top:0 }
.tl li:last-child{ border-bottom:0 }
.tl li::before{
  content:""; position:absolute; left:-1.7rem; top:1.25rem;
  width:14px; height:14px; border-radius:50%;
  background:var(--surface); border:2px solid var(--viz-linha);
  box-shadow:0 0 0 3px var(--paper);
}
.tl li.agora::before{ background:var(--viz-2); border-color:var(--viz-2) }
.tl li.agora{ margin-inline:0 }
.tl .agora-tag{
  display:inline-block; margin-left:.5rem; padding:.1rem .45rem; border-radius:4px;
  background:var(--warn-soft); color:var(--warn);
  font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------- ícones dos cartões ---------- */
.card .ico{ color:var(--viz-1); margin-bottom:.55rem; display:block }
.card .ico svg{ display:block }

@media print{
  .stat, .troca, .barras, .regua{ box-shadow:none }
  .chip.novo{ background:#E9EFF2 !important }
}