/* caiochizolini.pro — direção "Dois lados": o tributarista e o construtor.
   Cores do papel timbrado da IT2Tax; o navy é a cor dominante, o azul do logo só sobre navy ou como preenchimento. */
:root{
  --navy:#1F3864; --navy-escuro:#172B4E; --logo:#8FAADF; --cinza:#595959; --faixa:#F5F8FC; --branco:#FFFFFF;
  --bg:#FFFFFF; --fg:#1B2333; --muted:#595959; --linha:#DCE3EE; --sup:#F5F8FC; --titulo:#1F3864; --link:#1F3864;
  --f-disp:"Literata",Georgia,"Times New Roman",serif;
  --f-corpo:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  --largura:1120px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1A2E; --fg:#E6ECF5; --muted:#A9B6CA; --linha:#26375A; --sup:#16233D; --titulo:#D3DEF2; --link:#B8CBEE; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0F1A2E; --fg:#E6ECF5; --muted:#A9B6CA; --linha:#26375A; --sup:#16233D; --titulo:#D3DEF2; --link:#B8CBEE; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 var(--f-corpo);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--logo);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--f-disp);color:var(--titulo);text-wrap:balance;margin:0;line-height:1.15;font-weight:600}
h2{font-size:clamp(1.7rem,3.2vw,2.3rem)}
h3{font-size:1.15rem}
p{margin:0;max-width:66ch}
.pular{position:absolute;left:-999px;top:8px;background:var(--navy);color:var(--branco);padding:8px 12px;z-index:30}
.pular:focus{left:16px}

.faixa-int{max-width:var(--largura);margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.rotulo{font:500 .74rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Cabeçalho */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--linha)}
.topo .faixa-int{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.marca{font:700 1.1rem var(--f-disp);color:var(--titulo);text-decoration:none;letter-spacing:.01em}
.topo nav{display:flex;gap:4px 18px;flex-wrap:wrap;align-items:center;font-size:.9rem}
.topo nav a{color:var(--fg);text-decoration:none;padding:2px 0}
.topo nav a:hover{color:var(--link);text-decoration:underline}
.topo nav .idioma{font:500 .75rem var(--f-mono);border:1px solid var(--linha);border-radius:3px;padding:3px 7px;letter-spacing:.06em}
@media (max-width:760px){.topo nav .opc{display:none}}

/* Abertura */
.abertura .faixa-int{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 40px;align-items:center;padding-block:56px 40px}
@media (max-width:700px){.abertura .faixa-int{grid-template-columns:1fr;padding-block:36px 28px}}
.foto{width:184px;height:184px;border-radius:50%;object-fit:cover;border:4px solid var(--bg);box-shadow:0 0 0 2px var(--navy)}
@media (max-width:700px){.foto{width:128px;height:128px}}
.abertura h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;letter-spacing:-.01em}
.abertura .frase{font:400 clamp(1.15rem,2.2vw,1.45rem)/1.4 var(--f-disp);font-style:italic;color:var(--fg);margin-top:10px;max-width:34ch}
.abertura .sub{color:var(--muted);margin-top:14px;font-size:1rem}
.texto-abertura{display:grid;gap:4px;min-width:0}

/* Registro do SPED: a peça que junta os dois lados */
.registro{background:var(--navy);color:var(--branco)}
.registro .faixa-int{padding-block:28px 30px;display:grid;gap:14px}
.registro .rotulo{color:var(--logo)}
.linha-sped{overflow-x:auto;-webkit-overflow-scrolling:touch}
.linha-sped ol{list-style:none;margin:0;padding:0 0 4px;display:flex;font:500 clamp(.92rem,1.6vw,1.12rem)/1 var(--f-mono);white-space:nowrap;width:max-content}
.linha-sped li{display:grid;gap:10px;justify-items:start}
.linha-sped li .v{padding:8px 0;color:var(--branco)}
.linha-sped li .v::before{content:"|";color:var(--logo);padding-right:2px}
.linha-sped li:last-child .v::after{content:"|";color:var(--logo);padding-left:2px}
.linha-sped li small{font:400 .7rem/1.25 var(--f-corpo);color:#C5D2EA;white-space:normal;max-width:12ch;padding-left:10px;border-left:1px solid rgba(143,170,223,.45)}
.linha-sped li.real .v{background:rgba(143,170,223,.16);border-radius:2px}
@media (max-width:700px){.linha-sped ol{flex-wrap:wrap;width:auto;row-gap:14px;white-space:normal}}
.registro{border-block:1px solid rgba(143,170,223,.22)}
.registro p{color:#D5DEEF;font-size:.95rem}
.registro p b{color:var(--branco);font-weight:600}

/* Dois lados */
.lados{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:760px){.lados{grid-template-columns:1fr}}
.lado{padding-block:36px 40px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.lado>div{max-width:520px;display:grid;gap:12px}
.lado.trib{background:var(--sup)}
.lado.trib>div{margin-left:auto}
.lado.tec{background:var(--navy-escuro);color:var(--branco)}
.lado.tec .rotulo{color:var(--logo)}
.lado.tec h2{color:var(--branco)}
.lado h2{font-size:clamp(1.5rem,2.6vw,1.9rem)}
.lado ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.96rem}
.lado.tec ul{color:#D5DEEF}
@media (max-width:760px){.lado.trib>div{margin-left:0}}

/* Seções */
.secao{padding-block:72px;border-top:1px solid var(--linha)}
.secao .faixa-int{display:grid;gap:28px}
.cab{display:grid;gap:8px}
.cab p{color:var(--muted)}
.duas-col{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:820px){.duas-col{grid-template-columns:1fr;gap:28px}}
.prosa{display:grid;gap:16px}
.numeros{display:grid;gap:0;border-top:1px solid var(--linha)}
.numeros div{display:grid;grid-template-columns:5.5rem 1fr;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--linha)}
.numeros b{font:700 2rem/1 var(--f-disp);color:var(--titulo);font-variant-numeric:tabular-nums}
.numeros span{color:var(--muted);font-size:.95rem}

/* Trajetória */
.trajeto{list-style:none;margin:0;padding:0;display:grid;border-left:2px solid var(--linha);margin-left:6px}
.trajeto li{position:relative;padding:0 0 30px 28px;display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:6px 24px}
.trajeto li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--navy)}
.trajeto li.atual::before{background:var(--navy)}
.trajeto li:last-child{padding-bottom:0}
.trajeto .ano{font:500 .85rem/1.6 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.trajeto h3 span{display:block;font:400 .95rem var(--f-corpo);color:var(--muted);margin-top:4px}
.trajeto p{grid-column:2;font-size:.96rem}
@media (max-width:620px){.trajeto li{grid-template-columns:1fr}.trajeto p{grid-column:1}}
.formacao{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.formacao div{background:var(--sup);border-radius:4px;padding:14px 16px;display:grid;gap:2px;font-size:.92rem}
.formacao b{font-family:var(--f-disp);color:var(--titulo);font-size:1rem;font-weight:600}
.formacao span{color:var(--muted)}

/* Sistemas */
.sistemas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--linha);border:1px solid var(--linha)}
.sistema{background:var(--bg);padding:22px;display:grid;gap:10px;align-content:start}
.sistema h3{font-family:var(--f-mono);font-size:1rem;font-weight:500;letter-spacing:.01em}
.sistema p{font-size:.95rem}
.pilha{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.pilha li{font:400 .72rem/1 var(--f-mono);padding:5px 7px;border-radius:3px;background:var(--sup);color:var(--muted)}
.aviso{font-size:.86rem;color:var(--muted)}

/* Cartões genéricos */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cartao{border:1px solid var(--linha);border-radius:6px;padding:22px;display:grid;gap:10px;align-content:start;background:var(--bg)}
.cartao .rotulo{color:var(--muted)}
.cartao p{font-size:.95rem}
.destaque{background:var(--navy);color:var(--branco);border-color:var(--navy)}
.destaque h3{color:var(--branco);font-size:1.4rem}
.destaque p{color:#D5DEEF}
.destaque .rotulo{color:var(--logo)}
.destaque a{color:var(--branco)}
.lista-simples{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--linha)}
.lista-simples li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--linha);font-size:.96rem}
.lista-simples .quando{font:500 .82rem/1.7 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:520px){.lista-simples li{grid-template-columns:1fr;gap:2px}}

/* Contato */
.contato{background:var(--navy);color:var(--branco);border-top:0}
.contato h2{color:var(--branco)}
.contato .cab p{color:#D5DEEF}
.contato .rotulo{color:var(--logo)}
.canais{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px 32px}
.canais div{border-top:1px solid rgba(143,170,223,.45);padding-top:14px;display:grid;gap:6px;min-width:0}
.canais a{color:var(--branco);font-size:1.05rem;overflow-wrap:anywhere}
.rodape{background:var(--navy-escuro);color:#B9C8E6;font-size:.82rem}
.rodape .faixa-int{padding-block:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rodape a{color:#D5DEEF}