/* Landing "Flávio com a Verdade".
   Faixas de ponta a ponta e blocos com borda grossa e sombra sólida deslocada
   (referência de disposição: geracao.lula.com.br), com a identidade do site:
   azul #005BAA, amarelo #FFCB05, verde #12B24B e a fonte Urbanist.
   Tudo com prefixo .vd- para não interferir no restante do site. */

.vd{
  --vd-ink:#111417;
  --vd-blue:#005BAA;
  --vd-blue-deep:#003F78;
  --vd-yellow:#FFCB05;
  --vd-yellow-deep:#C99A00;
  --vd-green:#12B24B;
  --vd-green-deep:#0D963E;
  --vd-paper:#F7F9FC;
  --vd-line:3px;
  /* container fluido: acompanha a largura da tela, com margens que crescem junto */
  --vd-gutter:clamp(18px,5vw,110px);
  --vd-wrapw:1680px;
  font-family:'Urbanist','Gotham',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--vd-ink);
  background-color:var(--vd-paper);
  background-image:radial-gradient(rgba(17,20,23,.075) 1px,transparent 1.5px);
  background-size:14px 14px;
  overflow:hidden;
}
.vd *,.vd *::before,.vd *::after{box-sizing:border-box}
.vd-wrap{width:min(var(--vd-wrapw),100% - 2 * var(--vd-gutter));margin-inline:auto}
.vd p{margin:0}
/* O site força todos os títulos em azul com !important (approved-effects-20260817.css).
   Aqui cada título recebe a cor do próprio bloco, com especificidade maior. */
.vd .vd-topic .vd-topic__title{color:var(--fg)!important}
.vd .vd-band .vd-band__title{color:#fff!important}
.vd .vd-band--final .vd-band__title{color:var(--vd-ink)!important}
.vd .vd-index__title,.vd .vd-lock__title{color:var(--vd-ink)!important}
.vd img{max-width:100%;height:auto}

/* ---------- botões ---------- */
.vd-btn{
  --bg:var(--vd-blue);--fg:#fff;--depth:var(--vd-blue-deep);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 26px;border:var(--vd-line) solid var(--vd-ink);border-radius:12px;
  background:var(--bg);color:var(--fg);text-decoration:none;
  font:900 1.05rem/1.1 'Urbanist','Gotham',system-ui,sans-serif;font-style:italic;text-transform:uppercase;letter-spacing:.01em;
  box-shadow:-6px 6px 0 var(--depth);
  transition:transform .15s ease,box-shadow .15s ease;
  cursor:pointer;
}
.vd-btn:hover,.vd-btn:focus-visible{transform:translate(-3px,3px);box-shadow:-3px 3px 0 var(--depth)}
.vd-btn:focus-visible,.vd-chip:focus-visible,.vd a:focus-visible,.vd input:focus-visible{outline:3px solid var(--vd-ink);outline-offset:3px}
.vd-btn--blue{--bg:var(--vd-blue);--fg:#fff;--depth:var(--vd-blue-deep)}
.vd-btn--green{--bg:var(--vd-green);--fg:var(--vd-ink);--depth:var(--vd-green-deep)}
.vd-btn--yellow{--bg:var(--vd-yellow);--fg:var(--vd-ink);--depth:var(--vd-yellow-deep)}

/* ---------- hero ---------- */
.vd-hero{padding:calc(var(--site-header-total,120px) + clamp(28px,5vw,80px)) 0 clamp(36px,6vw,88px)}
.vd-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,90px);align-items:center}
.vd-kicker{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.9rem;color:#33414c;margin-bottom:24px}
.vd-title{margin:0;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.035em;line-height:.94;display:flex;flex-direction:column;align-items:flex-start;gap:.06em}
.vd-title__l1,.vd-title__l3{font-size:clamp(3.6rem,11vw,10.5rem)}
.vd-title__l1{color:var(--vd-ink)}
.vd-title__l2{font-size:clamp(2.6rem,7.8vw,7.4rem);margin:.04em 0 .06em}
.vd-sticker{display:inline-block;padding:.02em .34em .06em;background:var(--vd-blue);color:#fff;border:var(--vd-line) solid var(--vd-ink);box-shadow:-7px 7px 0 var(--vd-ink);transform:rotate(-2.2deg) skewX(-5deg)}
.vd-title__l3{color:var(--vd-green);text-shadow:4px 4px 0 var(--vd-ink),-1px -1px 0 var(--vd-ink),1px -1px 0 var(--vd-ink),-1px 1px 0 var(--vd-ink)}
.vd-slogan{margin:clamp(18px,3vw,34px) 0 clamp(20px,3vw,34px);max-width:32ch;font-size:clamp(1.25rem,2.4vw,2rem);font-weight:700;line-height:1.25}
.vd-hero__art{position:relative;margin:0;min-height:clamp(320px,46vw,640px);display:flex;align-items:flex-end;justify-content:center}
.vd-hero__art img{position:relative;z-index:2;width:min(100%,520px);filter:drop-shadow(-8px 8px 0 rgba(17,20,23,.9))}
.vd-shape{position:absolute;z-index:1;border:var(--vd-line) solid var(--vd-ink)}
.vd-shape--yellow{inset:8% 4% 0 12%;background:var(--vd-yellow);transform:rotate(3deg);border-radius:20px;box-shadow:-12px 12px 0 var(--vd-blue)}
.vd-shape--green{width:34%;height:46%;right:0;bottom:0;background:var(--vd-green);transform:rotate(-6deg);border-radius:18px;z-index:1}
.vd-badge22{position:absolute;z-index:3;top:2%;left:6%;display:grid;place-items:center;width:clamp(74px,9vw,120px);aspect-ratio:1;border-radius:50%;background:var(--vd-blue);color:var(--vd-yellow);border:var(--vd-line) solid var(--vd-ink);box-shadow:-6px 6px 0 var(--vd-ink);font-weight:900;font-style:italic;font-size:clamp(2rem,4.4vw,3.4rem);transform:rotate(-8deg)}

/* ---------- faixas de ponta a ponta (100% da tela) ---------- */
.vd-band{position:relative;overflow:hidden;background:var(--vd-blue);color:#fff;padding:clamp(48px,8vw,130px) 0;border-block:var(--vd-line) solid var(--vd-ink)}
.vd-band::after{content:"22";position:absolute;right:3%;bottom:-16%;z-index:0;font-weight:900;font-style:italic;font-size:clamp(14rem,36vw,40rem);line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.1);pointer-events:none}
.vd-band__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,120px);align-items:center}
.vd-band__title{margin:0;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;font-size:clamp(2.4rem,6.4vw,6rem)}
.vd-band__title em{font-style:inherit;color:var(--vd-yellow)}
.vd-band__text{border-left:5px solid rgba(255,255,255,.5);padding-left:clamp(18px,3vw,40px);font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.6;font-weight:500}
.vd-band--final{background:var(--vd-yellow);color:var(--vd-ink)}
.vd-band--final::after{color:rgba(17,20,23,.07)}
.vd-band__grid--final{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.vd-final__actions{display:flex;flex-wrap:wrap;gap:18px 22px;justify-content:flex-start}

/* ---------- índice de assuntos ---------- */
.vd-index{padding:clamp(40px,6vw,90px) 0 clamp(28px,4vw,56px)}
.vd-index__title{margin:0 0 20px;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.8rem,3.8vw,3.2rem);line-height:1}
.vd-chips{list-style:none;margin:0;padding:0 8px 8px 0;display:flex;flex-wrap:wrap;gap:14px 16px}
.vd-chip{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:var(--vd-line) solid var(--vd-ink);border-radius:999px;background:#fff;color:var(--vd-ink);text-decoration:none;font-weight:800;box-shadow:-4px 4px 0 var(--sh,var(--vd-ink));transition:transform .15s ease,box-shadow .15s ease}
.vd-chip span{display:inline-grid;place-items:center;min-width:2em;padding:2px 6px;border-radius:999px;background:var(--vd-ink);color:#fff;font-size:.78rem;font-weight:900}
.vd-chip:hover{transform:translate(-2px,2px);box-shadow:-2px 2px 0 var(--sh,var(--vd-ink))}
.vd-chip--blue{--sh:var(--vd-blue)}
.vd-chip--yellow{--sh:var(--vd-yellow-deep)}
.vd-chip--green{--sh:var(--vd-green-deep)}

/* ---------- grade de cards (2 colunas nas telas largas, 1 nas estreitas) ---------- */
.vd-topics{padding:0 0 clamp(56px,8vw,120px)}
.vd-topics__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,540px),1fr));gap:clamp(36px,4vw,64px) clamp(30px,4vw,64px);padding:0 12px 12px 0;align-items:stretch}
.vd-topic{
  --bg:var(--vd-blue);--fg:#fff;--sh:var(--vd-yellow);
  display:flex;flex-direction:column;
  background:#fff;border:var(--vd-line) solid var(--vd-ink);border-radius:16px;
  box-shadow:-10px 10px 0 var(--sh);
  scroll-margin-top:calc(var(--nav-h,84px) + 24px);
}
.vd-topic--blue{--bg:var(--vd-blue);--fg:#fff;--sh:var(--vd-yellow)}
.vd-topic--yellow{--bg:var(--vd-yellow);--fg:var(--vd-ink);--sh:var(--vd-blue)}
.vd-topic--green{--bg:var(--vd-green);--fg:var(--vd-ink);--sh:var(--vd-blue)}
.vd-topic__head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(20px,2.6vw,36px);background:var(--bg);color:var(--fg);border-radius:13px 13px 0 0;border-bottom:var(--vd-line) solid var(--vd-ink)}
.vd-topic__num{display:block;font-weight:900;font-style:italic;line-height:.8;letter-spacing:-.06em;font-size:clamp(3.8rem,6vw,6rem);opacity:.92}
.vd-topic__title{margin:0;font-weight:900;font-style:italic;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.3rem,2.1vw,2rem)}
.vd-tag{display:inline-block;padding:6px 12px;background:#fff;color:var(--vd-ink);border:var(--vd-line) solid var(--vd-ink);box-shadow:-3px 3px 0 var(--vd-ink);font-weight:900;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-2deg)}
.vd-topic__body{flex:1;padding:clamp(20px,2.8vw,40px);display:flex;flex-direction:column;gap:16px;font-size:clamp(1.02rem,1.2vw,1.15rem);line-height:1.72}
.vd-topic__body a{color:var(--vd-blue);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.vd-topic__body a:hover{background:var(--vd-yellow);color:var(--vd-ink);text-decoration-color:var(--vd-ink)}
.vd-sources{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:auto!important;padding-top:16px;border-top:2px dashed rgba(17,20,23,.28);font-size:.88rem;line-height:1.2}
.vd-sources strong{font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem}
.vd-sources a{display:inline-block;padding:6px 12px;border:2px solid var(--vd-ink);border-radius:999px;background:var(--vd-paper);color:var(--vd-ink);text-decoration:none;font-weight:800}
.vd-sources a:hover{background:var(--vd-yellow);color:var(--vd-ink)}

/* ---------- tela de senha ---------- */
.vd--lock{min-height:60vh;display:grid;align-items:center;padding-block:calc(var(--site-header-total,120px) + clamp(36px,6vw,80px)) clamp(36px,6vw,80px)}
.vd-lock{display:grid;place-items:center}
.vd-card{background:#fff;border:var(--vd-line) solid var(--vd-ink);border-radius:16px;box-shadow:-10px 10px 0 var(--vd-blue)}
.vd-card--lock{width:min(520px,100%);padding:clamp(24px,4vw,40px);display:grid;gap:14px;justify-items:start;box-shadow:-10px 10px 0 var(--vd-yellow)}
.vd-lock__title{margin:0;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.025em;line-height:1;font-size:clamp(1.9rem,4.6vw,2.8rem)}
.vd-card--lock p{line-height:1.55}
.vd-lock__error{padding:10px 14px;border:var(--vd-line) solid var(--vd-ink);border-radius:10px;background:#FFE3E0;font-weight:800}
.vd-lock__form{display:grid;gap:10px;width:100%;margin-top:6px}
.vd-lock__form label{font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.vd-lock__form input{width:100%;padding:14px 16px;border:var(--vd-line) solid var(--vd-ink);border-radius:10px;background:var(--vd-paper);font:600 1.05rem 'Urbanist',system-ui,sans-serif}
.vd-lock__form .vd-btn{justify-self:start;margin-top:6px}

/* ---------- telas menores ---------- */
@media (max-width:900px){
  .vd-hero__grid,.vd-band__grid,.vd-band__grid--final{grid-template-columns:1fr}
  .vd-hero__art{order:-1;min-height:clamp(280px,70vw,440px)}
  .vd-band::after{right:-6%;bottom:-8%}
}
@media (max-width:520px){
  .vd-card,.vd-topic{box-shadow:-6px 6px 0 var(--sh,var(--vd-blue))}
  .vd-sticker{box-shadow:-5px 5px 0 var(--vd-ink)}
  .vd-btn{width:100%}
  .vd-final__actions{width:100%}
  .vd-band__text{border-left-width:4px}
}
@media (prefers-reduced-motion:reduce){.vd-btn,.vd-chip{transition:none}}

/* ---------- páginas filhas (/flavio-com-a-verdade/<assunto>) ---------- */
.vd-topic__title a{color:inherit!important;text-decoration:none}
.vd-topic__title a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.vd-topic__more{align-self:flex-start;margin-top:auto}
.vd-topic__body .vd-btn{color:var(--fg);text-decoration:none;font-weight:900}
.vd-topic__body .vd-btn:hover{background:var(--bg);color:var(--fg)}
.vd-post{--bg:var(--vd-blue);--fg:#fff;--sh:var(--vd-yellow);position:relative;overflow:hidden;background:var(--bg);color:var(--fg);border-bottom:var(--vd-line) solid var(--vd-ink);padding:calc(var(--site-header-total,120px) + clamp(20px,3vw,44px)) 0 clamp(40px,6vw,96px)}
.vd-post--yellow{--bg:var(--vd-yellow);--fg:var(--vd-ink);--sh:var(--vd-blue)}
.vd-post--green{--bg:var(--vd-green);--fg:var(--vd-ink);--sh:var(--vd-blue)}
.vd-post::after{content:"22";position:absolute;right:2%;bottom:-18%;z-index:0;font-weight:900;font-style:italic;font-size:clamp(14rem,34vw,38rem);line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.1);pointer-events:none}
.vd-post--yellow::after,.vd-post--green::after{color:rgba(17,20,23,.07)}
.vd-post .vd-wrap{position:relative;z-index:1}
.vd-crumbs ol{list-style:none;margin:0 0 clamp(20px,3vw,40px);padding:0;display:flex;flex-wrap:wrap;gap:6px 10px;font-weight:800;font-size:.9rem}
.vd-crumbs li+li::before{content:"/";margin-right:10px;opacity:.6}
.vd-crumbs a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.vd-crumbs a:hover{background:var(--vd-ink);color:#fff}
.vd-post__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(24px,5vw,90px);align-items:center}
.vd-post__head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.vd-post .vd-topic__num{font-size:clamp(4.4rem,9vw,9rem)}
.vd-post .vd-post__title{margin:0;color:var(--fg)!important;font-weight:900;font-style:italic;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2rem,4.6vw,4.6rem)}
.vd-post__art{position:relative;margin:0;min-height:clamp(260px,32vw,480px);display:flex;align-items:flex-end;justify-content:center}
.vd-post__art img{position:relative;z-index:2;width:min(100%,380px);filter:drop-shadow(-8px 8px 0 rgba(17,20,23,.9))}
.vd-post .vd-shape--yellow{background:var(--vd-yellow);box-shadow:-10px 10px 0 var(--vd-ink)}
.vd-post--yellow .vd-shape--yellow{background:#fff}
.vd-postbody{padding:clamp(36px,5vw,80px) 0 clamp(20px,3vw,40px)}
.vd-card--post{--sh:var(--vd-yellow);padding:clamp(24px,4vw,64px);box-shadow:-12px 12px 0 var(--sh);display:grid;gap:clamp(18px,2.4vw,32px)}
.vd-card--yellow{--sh:var(--vd-blue)}
.vd-card--green{--sh:var(--vd-green-deep)}
.vd-post__text{display:grid;gap:18px;font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.7;font-weight:500;max-width:78ch}
.vd-post__text a{color:var(--vd-blue);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.vd-post__text a:hover{background:var(--vd-yellow);color:var(--vd-ink);text-decoration-color:var(--vd-ink)}
.vd-card--post .vd-sources{margin-top:0!important}
.vd-pager{padding:clamp(20px,3vw,40px) 0}
.vd-pager__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px);padding:0 8px 8px 0}
.vd-pager__link{display:grid;gap:6px;padding:clamp(16px,2vw,28px);border:var(--vd-line) solid var(--vd-ink);border-radius:14px;background:#fff;color:var(--vd-ink);text-decoration:none;box-shadow:-6px 6px 0 var(--vd-blue);transition:transform .15s ease,box-shadow .15s ease}
.vd-pager__link--next{text-align:right;box-shadow:-6px 6px 0 var(--vd-yellow-deep)}
.vd-pager__link:hover,.vd-pager__link:focus-visible{transform:translate(-3px,3px);box-shadow:-3px 3px 0 var(--vd-ink)}
.vd-pager__dir{font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;color:#33414c}
.vd-pager__link strong{font-weight:900;font-style:italic;font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.1}
.vd-pager__title{font-size:.98rem;line-height:1.4;font-weight:600}
.vd-index__all{margin:clamp(22px,3vw,34px) 0 0;padding:0 8px 8px 0}
@media (max-width:900px){
  .vd-post__grid{grid-template-columns:1fr}
  .vd-post__art{order:-1;min-height:clamp(220px,52vw,340px)}
  .vd-pager__grid{grid-template-columns:1fr}
  .vd-pager__link--next{text-align:left}
}
@media (max-width:520px){.vd-card--post{box-shadow:-6px 6px 0 var(--sh)}}
