:root{
  --vinho:#4a0d1a; --vinho-2:#5e1324; --vinho-3:#2e0710;
  --amarelo:#f6c533; --vermelho:#d9312b; --verde:#2f9e57; --azul:#2a6fd6;
  --papel:#f7f1e6; --tinta:#1c1414; --cinza:#6b5f5c;
  --claro:#fff8ef; --suave:rgba(255,248,239,.72);
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --display:"Anton",Impact,sans-serif;
  --texto:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--texto);background:var(--papel);color:var(--tinta);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.rotulo{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:.01em;text-transform:uppercase}
h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.3rem;border-radius:6px;font-weight:700;text-decoration:none;font-size:1rem;transition:transform .15s ease,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}
.btn-amarelo{background:var(--amarelo);color:var(--vinho-3)}
.btn-contorno{border:2px solid rgba(255,248,239,.5);color:var(--claro)}
.btn-contorno:hover{border-color:var(--claro)}
.btn svg{width:20px;height:20px;flex:none}

/* topo */
.topo{position:sticky;top:0;z-index:20;background:rgba(46,7,16,.92);backdrop-filter:blur(8px);color:var(--claro)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.marca{font-family:var(--display);font-size:1.25rem;text-decoration:none;letter-spacing:.03em}
.marca span{color:var(--amarelo)}
.menu{display:flex;gap:1.6rem;list-style:none;font-size:.92rem;font-weight:500}
.menu a{text-decoration:none;opacity:.85}
.menu a:hover{opacity:1;color:var(--amarelo)}
@media (max-width:760px){.menu{display:none}}

/* hero */
.hero{background:radial-gradient(120% 90% at 85% 10%,var(--vinho-2),var(--vinho) 45%,var(--vinho-3));color:var(--claro);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:end;min-height:min(88vh,760px);padding-top:3rem}
.hero-texto{padding-bottom:4.5rem}
.hero .rotulo{color:var(--amarelo)}
.hero h1{font-size:clamp(3.4rem,10vw,7.4rem);margin:.8rem 0 1rem}
.hero h1 em{font-style:normal;display:block;color:var(--amarelo);font-size:.42em;letter-spacing:.02em;margin-top:.6rem}
.hero p.lead{font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--suave);max-width:34ch;margin-bottom:2rem}
.hero-acoes{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-foto{position:relative;align-self:end}
.hero-foto img{width:100%;height:auto;max-width:440px;margin-left:auto;position:relative;z-index:2;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));mask-image:linear-gradient(#000 82%,transparent);-webkit-mask-image:linear-gradient(#000 82%,transparent)}
/* o elemento ousado: o L nas 4 cores */
.ele{position:absolute;left:-14%;bottom:0;width:120%;height:88%;z-index:1;opacity:.95}
.ele i{position:absolute;display:block}
.ele .v{left:0;bottom:0;width:14%;height:100%;background:linear-gradient(var(--vermelho) 50%,var(--amarelo) 50%)}
.ele .h{left:0;bottom:0;height:12%;width:100%;background:linear-gradient(90deg,var(--amarelo) 14%,var(--verde) 14% 57%,var(--azul) 57%)}
.faixas{position:absolute;inset:auto 0 0 0;height:14px;display:flex;z-index:3}
.faixas b{flex:1}
.faixas b:nth-child(1){background:var(--vermelho)} .faixas b:nth-child(2){background:var(--amarelo)}
.faixas b:nth-child(3){background:var(--verde)} .faixas b:nth-child(4){background:var(--azul)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;min-height:auto;padding-top:2.2rem}
  .hero-texto{padding-bottom:0}
  .hero-foto img{max-width:330px;margin-inline:auto}
  .ele{right:8%;width:70%}
}

/* números */
.numeros{background:var(--vinho-3);color:var(--claro)}
.numeros ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.numeros li{padding:1.6rem 1rem;border-left:1px solid rgba(255,248,239,.12)}
.numeros li:first-child{border-left:0}
.numeros strong{font-family:var(--display);font-weight:400;font-size:2.4rem;display:block;color:var(--amarelo);line-height:1}
.numeros span{font-size:.9rem;color:var(--suave)}
@media (max-width:760px){.numeros ul{grid-template-columns:1fr 1fr}.numeros li:nth-child(3){border-left:0}.numeros li{border-top:1px solid rgba(255,248,239,.12)}}

section{padding:5.5rem 0;scroll-margin-top:60px}
.cab{display:flex;flex-direction:column;gap:.7rem;margin-bottom:2.6rem;max-width:720px}
.cab .rotulo{color:var(--vermelho)}
.cab p{color:var(--cinza);font-size:1.08rem}

/* quem sou eu */
.sobre .wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.sobre blockquote{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.08;border-left:6px solid var(--amarelo);padding-left:1.4rem;margin-top:1.4rem}
.sobre blockquote small{display:block;font-family:var(--texto);text-transform:none;font-size:1.05rem;line-height:1.6;color:var(--cinza);margin-top:1rem}
.linha{list-style:none;position:relative;padding-left:1.6rem}
.linha::before{content:"";position:absolute;left:5px;top:.5rem;bottom:.5rem;width:2px;background:#d9cbb6}
.linha li{position:relative;padding:0 0 1.5rem}
.linha li::before{content:"";position:absolute;left:-1.6rem;top:.45rem;width:12px;height:12px;border-radius:50%;background:var(--papel);border:3px solid var(--vinho)}
.linha .ano{font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--vermelho);letter-spacing:.08em}
.linha p{font-weight:500}
@media (max-width:860px){.sobre .wrap{grid-template-columns:1fr;gap:2.5rem}}

/* temas */
.temas{background:#efe6d6}
.grade-temas{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.tema{background:var(--papel);border-radius:10px;padding:1.6rem 1.4rem 1.8rem;border-top:8px solid;display:flex;flex-direction:column;gap:.6rem}
.tema:nth-child(1){border-color:var(--vermelho)} .tema:nth-child(2){border-color:var(--azul)}
.tema:nth-child(3){border-color:var(--verde)} .tema:nth-child(4){border-color:var(--amarelo)}
.tema h3{font-size:1.8rem}
.tema p{color:var(--cinza)}
.tema svg{width:34px;height:34px;color:var(--vinho)}
@media (max-width:960px){.grade-temas{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.grade-temas{grid-template-columns:1fr}}

/* diário */
.diario{background:var(--tinta);color:var(--claro)}
.diario .cab .rotulo{color:var(--amarelo)}
.diario .cab p{color:var(--suave)}
.ep{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--papel);color:var(--tinta);border-radius:12px;overflow:hidden}
.ep-capa{background:var(--vinho);color:var(--claro);padding:2.2rem;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;position:relative}
.ep-capa .rotulo{color:var(--amarelo)}
.ep-capa h3{font-size:clamp(2.2rem,4vw,3.2rem)}
.ep-capa .datas{font-family:var(--mono);font-size:.9rem;color:var(--suave)}
.carimbo{align-self:flex-start;font-family:var(--mono);font-weight:700;letter-spacing:.12em;border:3px solid var(--vermelho);color:#ff6b5f;padding:.35rem .7rem;transform:rotate(-4deg);font-size:.85rem}
.ep-itens{list-style:none;padding:1rem 2rem}
.ep-itens li{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px dashed #d9cbb6}
.ep-itens li:last-child{border-bottom:0}
.valor{font-family:var(--display);font-size:1.5rem;color:var(--vermelho);min-width:5.2ch;line-height:1.2}
.ep-itens strong{display:block}
.ep-itens .tag{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--cinza)}
.ep-itens .fonte{font-size:.82rem;color:var(--cinza)}
.diario .mais{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.diario .mais p{color:var(--suave);font-size:.95rem}
@media (max-width:860px){.ep{grid-template-columns:1fr}.ep-itens{padding:.5rem 1.3rem}}

/* lado */
.lado .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.lado h2 span{color:var(--vermelho)}
.lado p{font-size:1.12rem;color:var(--cinza);margin-top:1.2rem;max-width:46ch}
.fonte-card{background:#fff;border:1px solid #e3d7c4;border-radius:10px;padding:1.6rem;box-shadow:0 18px 40px -24px rgba(46,7,16,.35);font-size:.95rem}
.fonte-card .rotulo{color:var(--cinza);font-size:.7rem}
.fonte-card .doc{font-family:var(--display);font-size:1.6rem;text-transform:uppercase;margin:.4rem 0 .8rem}
.fonte-card mark{background:linear-gradient(transparent 55%,rgba(246,197,51,.7) 55%);padding:0 .1em}
.fonte-card .rodape{margin-top:1rem;padding-top:.8rem;border-top:1px solid #eee3d2;font-family:var(--mono);font-size:.75rem;color:var(--cinza)}
@media (max-width:860px){.lado .wrap{grid-template-columns:1fr}}

/* contato */
.contato{background:var(--amarelo);color:var(--vinho-3);text-align:center}
.contato h2{font-size:clamp(2.4rem,6vw,4.4rem);max-width:16ch;margin:0 auto 1rem}
.contato p{font-size:1.15rem;max-width:44ch;margin:0 auto 2rem}
.contato .btn-vinho{background:var(--vinho-3);color:var(--claro)}
.contato .acoes{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.contato .btn-linha{border:2px solid var(--vinho-3)}

.btn-zap{background:#1fa855;color:#fff}
.btn-zap:hover{background:#178a45}
.contato .redes{margin:1.8rem auto 0;font-size:1rem;font-weight:600;display:flex;flex-wrap:wrap;gap:.4rem .7rem;justify-content:center}
.contato .redes a{text-decoration:underline;text-underline-offset:3px}
.zap-flutuante{position:fixed;right:16px;bottom:16px;z-index:30;width:56px;height:56px;border-radius:50%;background:#1fa855;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);transition:transform .15s}
.zap-flutuante:hover{transform:scale(1.06)}
.zap-flutuante svg{width:30px;height:30px}
@media (min-width:861px){.zap-flutuante{display:none}}
footer{background:var(--vinho-3);color:var(--suave);padding:2.4rem 0;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
footer a{text-decoration:none}
footer a:hover{color:var(--amarelo)}
@media (max-width:860px){footer{padding-bottom:5.5rem}}

@media (prefers-reduced-motion:no-preference){
  .hero-texto>*{animation:sobe .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-texto>*:nth-child(2){animation-delay:.08s}.hero-texto>*:nth-child(3){animation-delay:.16s}.hero-texto>*:nth-child(4){animation-delay:.24s}
  .ele i{animation:cresce .9s cubic-bezier(.2,.7,.2,1) both .2s;transform-origin:bottom}
  .ele .h{transform-origin:left;animation-name:cresceH}
}
@keyframes sobe{from{opacity:0;transform:translateY(18px)}}
@keyframes cresce{from{transform:scaleY(0)}}
@keyframes cresceH{from{transform:scaleX(0)}}

/* páginas internas */
.menu a[aria-current="page"]{color:var(--amarelo);opacity:1}
.pag-cab{background:radial-gradient(120% 120% at 90% 0%,var(--vinho-2),var(--vinho) 50%,var(--vinho-3));color:var(--claro);padding:3.6rem 0 3.2rem;position:relative}
.pag-cab .rotulo{color:var(--amarelo)}
.pag-cab h1{font-size:clamp(2.6rem,7vw,5rem);margin:.7rem 0 1rem;max-width:18ch}
.pag-cab p{color:var(--suave);font-size:1.12rem;max-width:56ch}
.pag-cab .faixas{height:10px}
.trilha{font-size:.85rem;color:var(--suave);margin-bottom:1.4rem}
.trilha a{color:var(--claro)}
.lista-ep{display:grid;gap:1rem}
.cartao-ep{display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;background:#fff;border:1px solid #e3d7c4;border-radius:12px;padding:1.4rem 1.6rem;text-decoration:none;transition:transform .15s,box-shadow .15s}
.cartao-ep:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(46,7,16,.4)}
.cartao-ep .num{font-family:var(--display);font-size:3rem;line-height:1;color:var(--vermelho)}
.cartao-ep h2{font-size:1.7rem;margin-top:.5rem}
.cartao-ep p{color:var(--cinza);font-size:.95rem}
.cartao-ep .ir{font-family:var(--mono);font-weight:700;font-size:.8rem;color:var(--vinho)}
@media (max-width:640px){.cartao-ep{grid-template-columns:1fr}.cartao-ep .ir{justify-self:start}}
.aviso-ep{margin-top:2rem;padding:1.2rem 1.4rem;border-left:5px solid var(--amarelo);background:#efe6d6;border-radius:0 8px 8px 0;color:var(--tinta)}

.artigo{padding:3.5rem 0 4.5rem}
.artigo .wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:3.5rem;align-items:start}
.indice{position:sticky;top:84px;background:#fff;border:1px solid #e3d7c4;border-radius:10px;padding:1.2rem 1.3rem;font-size:.92rem}
.indice .rotulo{color:var(--cinza);font-size:.7rem;margin-bottom:.6rem}
.indice ol{list-style:none;display:grid;gap:.45rem}
.indice a{text-decoration:none}
.indice a:hover{color:var(--vermelho)}
@media (max-width:900px){.artigo .wrap{grid-template-columns:1fr}.indice{position:static;order:-1}}
.texto>p{font-size:1.1rem;margin-bottom:1.1rem;max-width:66ch}
.texto .abre{font-size:1.25rem;font-weight:500}
.bloco{scroll-margin-top:80px;background:#fff;border:1px solid #e3d7c4;border-radius:12px;padding:1.8rem 1.8rem 1.5rem;margin:1.6rem 0}
.bloco .tag{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;display:inline-block;padding:.2rem .55rem;border-radius:4px;background:var(--vinho);color:var(--claro)}
.bloco .tag.servidor{background:var(--azul)} .bloco .tag.dinheiro{background:var(--vermelho)} .bloco .tag.prazo{background:var(--verde)}
.bloco h2{font-size:clamp(1.8rem,3.4vw,2.4rem);margin:.7rem 0 .9rem}
.bloco p,.bloco li{font-size:1.04rem;margin-bottom:.7rem;max-width:64ch}
.bloco ul{padding-left:1.2rem;margin-bottom:.8rem}
.bloco .numero-grande{font-family:var(--display);font-size:clamp(2.4rem,6vw,3.6rem);color:var(--vermelho);line-height:1;margin:.3rem 0 .8rem}
.bloco .pergunta{font-weight:700;color:var(--vinho)}
.bloco .fonte{margin-top:1rem;padding-top:.8rem;border-top:1px dashed #d9cbb6;font-family:var(--mono);font-size:.76rem;color:var(--cinza);line-height:1.7}
.fim-ep{background:var(--tinta);color:var(--claro);border-radius:12px;padding:2rem;margin-top:2.4rem}
.fim-ep h2{font-size:2rem;margin-bottom:.6rem}
.fim-ep p{color:var(--suave);margin-bottom:1.2rem}
.fim-ep .acoes{display:flex;flex-wrap:wrap;gap:.8rem}
.video-ep{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;margin:1.6rem 0}
.video-ep iframe{width:100%;height:100%;border:0;display:block}
.nav-ep{display:flex;gap:1rem;margin-top:1.6rem;font-family:var(--mono);font-weight:700;font-size:.85rem}
.nav-ep a{text-decoration:none;color:var(--vinho)}
.nav-ep a:hover{color:var(--vermelho)}

/* ===== movimento (inspirado no reel: contador 01/05, faixa correndo, digitação, entrada em cascata, partículas, barra de progresso) ===== */
.progresso{position:fixed;left:0;bottom:0;height:4px;width:100%;background:var(--amarelo);transform-origin:left;transform:scaleX(0);z-index:40;pointer-events:none}

.contador{display:inline-flex;flex-direction:column;gap:.35rem;font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.18em;color:var(--amarelo);margin-bottom:.9rem}
.contador::after{content:"";width:42px;height:3px;background:currentColor}
.sobre .contador,.temas .contador,.lado .contador{color:var(--vermelho)}
.contato .contador{color:var(--vinho-3)}

.digita{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.85rem;color:var(--claro);background:rgba(0,0,0,.28);border:1px solid rgba(255,248,239,.14);border-radius:6px;padding:.45rem .8rem}
.digita b{color:var(--amarelo);font-weight:700}
.digita .palavra{color:var(--amarelo)}
.cursor{display:inline-block;width:.6em;height:1.1em;background:var(--amarelo);margin-left:1px;vertical-align:-.15em}

.faixa-corre{background:var(--vinho-3);border-top:1px solid rgba(246,197,51,.35);border-bottom:1px solid rgba(246,197,51,.35);overflow:hidden;white-space:nowrap;color:var(--claro);font-family:var(--mono);font-size:.82rem;letter-spacing:.06em}
.faixa-corre .trilho{display:inline-flex;padding:.7rem 0}
.faixa-corre span{padding:0 .9rem}
.faixa-corre span::after{content:"◆";color:var(--amarelo);margin-left:1.8rem}

.particulas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.particulas i{position:absolute;width:6px;height:6px;background:var(--amarelo);opacity:.0;border-radius:1px}
.hero::before,.pag-cab::before,.diario::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(246,197,51,.22),transparent 65%);top:-200px;left:8%;pointer-events:none}
.diario,.pag-cab{position:relative;overflow:hidden}
.diario>.wrap,.pag-cab>.wrap{position:relative;z-index:1}
.hero .wrap{position:relative;z-index:1}

.tema{transition:transform .2s ease,box-shadow .2s ease}
.tema:hover{transform:translateY(-6px);box-shadow:0 22px 40px -26px rgba(46,7,16,.55)}
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%)}
.btn:hover::before{transform:translateX(120%);transition:transform .6s ease}

/* efeitos suaves: valem sempre que o JS liga .anim (mesmo com "reduzir movimento", só sem deslocamento) */
.anim [data-entra]{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.anim [data-entra].visto{opacity:1;transform:none}
.anim .linha::before{transform:scaleY(0);transform-origin:top;transition:transform 1.4s ease .2s}
.anim .linha.visto::before{transform:scaleY(1)}
.anim .ep .carimbo{opacity:0;transform:scale(2.4) rotate(-14deg)}
.anim .ep.visto .carimbo{animation:carimba .45s cubic-bezier(.3,1.6,.5,1) .5s forwards}
.anim .cursor{animation:pisca 1s steps(1) infinite}
.calmo [data-entra]{transform:none}
.calmo .ep .carimbo{transform:rotate(-4deg)}
.calmo .ep.visto .carimbo{animation:aparece .5s ease .4s forwards}
/* movimento pela tela: só para quem não pediu "reduzir movimento" */
@media (prefers-reduced-motion:no-preference){
  .faixa-corre .trilho{animation:corre 38s linear infinite}
  .faixa-corre:hover .trilho{animation-play-state:paused}
  .particulas i{animation:sobe-p var(--d,9s) linear infinite;animation-delay:var(--a,0s)}
  .hero::before,.pag-cab::before,.diario::before{animation:respira 7s ease-in-out infinite alternate}
}
@keyframes aparece{to{opacity:1}}
@keyframes corre{to{transform:translateX(-50%)}}
@keyframes pisca{50%{opacity:0}}
@keyframes carimba{to{opacity:1;transform:rotate(-4deg)}}
@keyframes sobe-p{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:.7}85%{opacity:.5}100%{transform:translateY(-260px) rotate(180deg);opacity:0}}
@keyframes respira{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.15)}}
.contato .contador{align-items:center}
