/* Padrão de página do Gov Hub (IDV, modo sóbrio), vindo da página Sobre do time de comunicação.
   Tudo fica sob .gh-page para não vazar para o menu, o rodapé e o Bootstrap. */
.gh-page{
  --purple:#613EFF; --navy:#0A005A; --soft:#F2F1F6; --rose:#BE006E;
  --fg:#2D3748; --head:#0A005A; --head-accent:#613EFF;
  --block:#F2F1F6; --line:#E9DFFF; --label:#3F28A6; --link:#3F28A6;
  --inv-bg:#0A005A; --inv-fg:#FFFFFF; --inv-card:#1B1085; --inv-line:#3A2FA8;
  --shape-a:#613EFF; --shape-b:#0A005A; --shape-c:#F2F1F6;
  --font:'Reddit Sans','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  display:block;background:#fff;color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased
}
.gh-page *{box-sizing:border-box}
.gh-page h1,.gh-page h2,.gh-page h3{font-family:var(--font);font-weight:800;letter-spacing:-0.025em;line-height:1.06;color:var(--head);margin:0;text-wrap:balance}
.gh-page p{margin:0}
.gh-page ul{margin:0;padding:0}
.gh-page a{color:var(--link)}
.gh-page :focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:4px}
/* mesma largura e margem do .container do Bootstrap, que o rodapé usa: margem padrão do site */
.gh-page .wrap{width:100%;margin-inline:auto;padding-inline:12px}
@media(min-width:576px){.gh-page .wrap{max-width:540px}}
@media(min-width:768px){.gh-page .wrap{max-width:720px}}
@media(min-width:992px){.gh-page .wrap{max-width:960px}}
@media(min-width:1200px){.gh-page .wrap{max-width:1140px}}
@media(min-width:1400px){.gh-page .wrap{max-width:1320px}}
.gh-page section{scroll-margin-top:90px}
.gh-page .band{padding-block:clamp(56px,8vw,104px)}
.gh-page .eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--label);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.gh-page .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rose)}
.gh-page h2{font-size:clamp(30px,4.4vw,52px)}
.gh-page h2 .l{font-weight:400}

/* hero */
/* o menu do site é fixo (60px), então o hero desconta essa altura no topo */
.gh-page .hero{position:relative;overflow:hidden;padding-block:calc(60px + clamp(40px,7vw,96px)) clamp(56px,9vw,120px)}
.gh-page .hero .copy{position:relative;z-index:1;max-width:680px}
.gh-page .hero h1{font-size:clamp(40px,7vw,84px);margin-bottom:28px}
.gh-page .hero h1 .l{font-weight:400}
.gh-page .hero .lead{font-size:clamp(18px,2vw,22px);line-height:1.55;max-width:60ch;color:var(--fg)}
.gh-page .art{position:absolute;right:0;top:0;bottom:250px;width:min(42vw,560px);pointer-events:none}
.gh-page .art svg{position:absolute;display:block}
.gh-page .art .q{right:0;top:0;width:78%;color:var(--shape-a);transform:scaleX(-1)}
.gh-page .art .a{left:20%;bottom:6%;width:26%;color:var(--shape-b)}
@media(max-width:900px){.gh-page .art{width:34vw;bottom:auto;height:420px}.gh-page .hero .copy{max-width:100%}.gh-page .art .q{width:90%}.gh-page .art .a{display:none}}
@media(max-width:620px){.gh-page .art{display:none}}
.gh-page .caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px;position:relative;z-index:1}
.gh-page .cap{border-top:2px solid var(--head);padding-top:16px;font-weight:600;color:var(--head);line-height:1.35;font-size:18px}
@media(max-width:760px){.gh-page .caps{grid-template-columns:1fr;gap:16px;margin-top:40px}}

/* por que existe */
.gh-page .why{background:var(--block)}
.gh-page .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
@media(max-width:820px){.gh-page .split{grid-template-columns:1fr}}
.gh-page .statement{font-size:clamp(22px,2.8vw,32px);line-height:1.35;font-weight:600;color:var(--head);max-width:30ch}
.gh-page .statement.wide{max-width:36ch}

/* o que faz */
.gh-page .flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;margin:28px 0 8px;list-style:none}
.gh-page .flow li{background:var(--block);color:var(--head);font-weight:700;font-size:16px;padding:10px 20px;border-radius:999px}
.gh-page .flow li.end{background:var(--purple);color:#fff}
.gh-page .arrow{width:22px;height:22px;color:var(--head);flex:none}
.gh-page .sys{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;list-style:none}
.gh-page .sys li{border:2px solid var(--head);color:var(--head);font-weight:700;font-size:15px;padding:6px 16px;border-radius:999px}
.gh-page .outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 48px;margin-top:48px;list-style:none}
.gh-page .outs li{padding:16px 0;border-top:2px solid var(--line);color:var(--head);font-weight:600;font-size:18px;line-height:1.35}
.gh-page .sub{margin-top:56px}
.gh-page .sub p{max-width:62ch}

.gh-page .story{display:grid;gap:22px}
.gh-page .story p{max-width:62ch}
.gh-page .story strong{color:var(--head);font-weight:700}
.gh-page .story p:first-child strong{display:block;margin-top:14px;font-size:clamp(22px,2.6vw,30px);line-height:1.25;font-weight:800;letter-spacing:-0.02em;max-width:30ch}

/* diferenciais */
.gh-page .inv{background:var(--inv-bg);color:var(--inv-fg)}
.gh-page .inv h2,.gh-page .inv h3,.gh-page .inv .eyebrow{color:var(--inv-fg)}
.gh-page .rows{margin-top:44px;border-top:2px solid var(--inv-line)}
.gh-page .dif-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:12px 48px;padding:28px 0;border-bottom:2px solid var(--inv-line)}
.gh-page .dif-row h3{font-size:clamp(22px,2.4vw,28px)}
.gh-page .dif-row p{max-width:62ch;color:var(--inv-fg)}
@media(max-width:760px){.gh-page .dif-row{grid-template-columns:1fr}}
.gh-page .quad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin-top:56px}
.gh-page .dif-card{background:var(--inv-card);border-radius:16px;padding:24px}
.gh-page .dif-card h3{font-size:20px;margin-bottom:8px;letter-spacing:-0.015em;line-height:1.2}
.gh-page .dif-card p{font-size:16px;line-height:1.5}
.gh-page .quad-title{margin-top:64px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* tecnologia */
.gh-page .tech{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;margin-top:48px;list-style:none}
.gh-page .tk{background:var(--block);border-radius:16px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;min-height:150px;min-width:0}
.gh-page .tk small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--label);line-height:1.35}
.gh-page .tk b{font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--head);margin-top:auto;display:flex;align-items:center;gap:8px;line-height:1.1}
.gh-page .tk a.n{color:var(--head);text-decoration:none}
.gh-page .tk a.n:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.gh-page .tk .go{width:20px;height:20px;flex:none}
.gh-page .soon{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--rose);color:#fff;border-radius:999px;padding:3px 10px;align-self:flex-start}

/* objetivo, missão */
.gh-page .goal{font-size:clamp(26px,3.6vw,44px);line-height:1.15;font-weight:800;letter-spacing:-0.025em;color:var(--head);max-width:24ch}
.gh-page .goal .l{font-weight:400}
.gh-page .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
@media(max-width:900px){.gh-page .cols{grid-template-columns:1fr}}
.gh-page .mvv-col{border-top:2px solid var(--head);padding-top:18px}
.gh-page .mvv-col h3{font-size:22px;margin-bottom:12px}
.gh-page .vals{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.gh-page .vals li{background:#fff;color:var(--head);font-weight:600;font-size:15px;padding:6px 14px;border-radius:999px}
.gh-page .rest{margin-top:28px;display:grid;gap:16px;max-width:62ch}

/* quem somos */
.gh-page .who{background:var(--block)}
.gh-page .phil{list-style:none;display:grid;gap:4px}
.gh-page .phil li{font-size:clamp(28px,4.4vw,56px);font-weight:800;letter-spacing:-0.03em;line-height:1.05;color:var(--head)}
.gh-page .phil li:nth-child(2){color:var(--head-accent)}
.gh-page .horizon{margin-top:64px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
.gh-page .horizon svg{width:56px;height:56px;color:var(--purple);flex:none}
.gh-page .horizon q{quotes:none;font-size:clamp(20px,2.4vw,28px);line-height:1.35;font-weight:600;color:var(--head);max-width:40ch;display:block}
.gh-page .horizon h3{font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--label);margin-bottom:10px}

/* entregamos */
.gh-page .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
@media(max-width:900px){.gh-page .three{grid-template-columns:1fr}}
.gh-page .front{border-top:2px solid var(--head);padding-top:20px;display:grid;gap:14px;align-content:start}
.gh-page .front svg{width:44px;height:44px;color:var(--purple)}
.gh-page .front h3{font-size:24px}
.gh-page .front p{max-width:40ch}

/* hero compacto das páginas internas: só título, sem a fileira de capacidades */
.gh-page .hero.compact{padding-bottom:clamp(48px,6vw,80px)}
.gh-page .hero.compact .art{bottom:0}
.gh-page .hero.compact h1{margin-bottom:0}
.gh-page .hero.compact .copy{max-width:min(760px,58%)}
@media(max-width:900px){.gh-page .hero.compact .copy{max-width:62%}}
@media(max-width:620px){.gh-page .hero.compact .copy{max-width:100%}}
.gh-page .hero.compact{min-height:clamp(300px,30vw,420px);display:flex;align-items:center}
.gh-page .hero.compact > .wrap{width:100%}
/* nomes longos de órgão (páginas de projeto) */
.gh-page .hero.compact h1.long{font-size:clamp(34px,4.4vw,58px)}
@media(max-width:620px){.gh-page .hero.compact{min-height:0}}

/* pílula #F2F1F6 entrando pela borda esquerda, acima do título (como na capa da IDV) */
.gh-page .hero .pl{position:absolute;left:-72px;top:78px;width:210px;color:var(--shape-c);pointer-events:none}
@media(max-width:620px){.gh-page .hero .pl{display:none}}

/* link de volta para a listagem (páginas de projeto e de publicação) */
.gh-page .back-link{display:inline-block;margin-top:40px;font-weight:700;color:var(--head);text-decoration:none}
.gh-page .back-link:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}