/* ============================================================
   Instituto Propulsão — Design system das páginas institucionais
   Extraído/derivado do estilo da home (index.html) para manter
   consistência visual total. Não é usado pela home, que mantém
   seu próprio <style> inline intocado.
   ============================================================ */

:root{
  --azul:#16244B;
  --trajetoria:#23407F;
  --impulso:#2E5BC7;
  --prata:#AAAAAA;
  --cinza-claro:#E8E8E8;
  --grafite:#0E1424;
  --cinza-rota:#59637A;
  --linha:#E2E6EE;
  --nevoa:#F2F4F8;
  --branco:#FFFFFF;
  --progresso:#157F5F;
  --atencao:#B07A08;
  --erro:#B0223A;

  --disp:"Instrument Serif","Times New Roman",Georgia,serif;
  --sans:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--grafite);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ===== Typography scale ===== */
.display{font-family:var(--disp);font-weight:400;font-size:clamp(40px,7vw,72px);line-height:1.00;letter-spacing:-0.03em;margin:0;}
h1,.h1{font-family:var(--disp);font-weight:400;font-size:clamp(32px,5vw,52px);line-height:1.06;letter-spacing:-0.02em;margin:0;}
h2,.h2{font-family:var(--sans);font-weight:600;font-size:clamp(26px,3.4vw,36px);line-height:1.14;letter-spacing:-0.015em;margin:0;}
h3,.h3{font-family:var(--sans);font-weight:600;font-size:24px;line-height:1.28;letter-spacing:-0.01em;margin:0;}
h4,.h4{font-family:var(--sans);font-weight:600;font-size:18px;line-height:1.32;margin:0;}
.body-lg{font-family:var(--sans);font-weight:400;font-size:18px;line-height:1.62;margin:0;}
p,.body{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.65;margin:0;}
.small{font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.55;}
.caption{font-family:var(--sans);font-size:12.5px;line-height:1.45;letter-spacing:0.01em;color:var(--cinza-rota);}
.label{font-family:var(--mono);font-weight:400;font-size:10.5px;line-height:1.2;letter-spacing:0.18em;text-transform:uppercase;}

.measure{max-width:68ch;}

section{padding:96px 0;}
.section-sm{padding:56px 0;}
.stack-16 > * + *{margin-top:16px;}
.stack-24 > * + *{margin-top:24px;}
.stack-32 > * + *{margin-top:32px;}

a{color:inherit;text-decoration:none;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:15px;
  padding:14px 24px;border-radius:2px;border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--impulso);color:var(--branco);}
.btn-primary:hover{background:#2650AD;}
.btn-ghost-light{border-color:rgba(255,255,255,0.35);color:var(--branco);}
.btn-ghost-light:hover{border-color:rgba(255,255,255,0.7);}
.btn-ghost-dark{border-color:var(--linha);color:var(--azul);background:transparent;}
.btn-ghost-dark:hover{border-color:var(--impulso);color:var(--impulso);}
.link-arrow{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--impulso);display:inline-flex;align-items:center;gap:6px;}
.link-arrow svg{transition:transform .15s ease;}
.link-arrow:hover svg{transform:translateX(3px);}

/* ===== Header ===== */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--linha);
}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;}
header .logo img{height:44px;width:auto;}
nav{display:flex;align-items:center;gap:32px;}
nav a.navlink{font-size:14px;font-weight:500;color:var(--grafite);white-space:nowrap;}
nav a.navlink:hover,nav a.navlink[aria-current="page"]{color:var(--impulso);}
.nav-toggle{display:none;}
@media (max-width:980px){
  nav.main-nav{position:fixed;inset:76px 0 0 0;background:var(--branco);flex-direction:column;align-items:flex-start;padding:32px 24px;gap:20px;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;}
  nav.main-nav.open{transform:translateX(0);}
  .nav-toggle{display:block;background:none;border:none;cursor:pointer;padding:8px;}
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--azul);margin:5px 0;}
}

/* ===== Page header (banner das páginas internas) ===== */
.page-header{
  background:linear-gradient(135deg,var(--azul) 0%,var(--trajetoria) 100%);
  color:var(--branco);padding:72px 0 56px;
}
.page-header .label{color:rgba(255,255,255,0.7);}
.page-header .body-lg{color:rgba(255,255,255,0.86);margin-top:20px;}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:13px;color:rgba(255,255,255,0.6);margin-bottom:18px;}
.breadcrumb a:hover{color:var(--branco);}

/* ===== Section headers ===== */
.kicker{color:var(--impulso);margin-bottom:16px;display:block;}
.kicker.on-dark{color:rgba(255,255,255,0.65);}
.section-head{max-width:680px;}

.rule{height:1px;background:var(--linha);border:none;margin:0;}

/* ===== Propósito / Missão / Visão cards ===== */
.pmv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha);margin-top:56px;}
.pmv-card{background:var(--branco);padding:32px;}
.pmv-card .label{color:var(--impulso);}
.pmv-card p{margin-top:16px;}
@media (max-width:820px){.pmv-grid{grid-template-columns:1fr;}}

/* ===== Áreas de atuação ===== */
.areas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:56px;}
@media (max-width:820px){.areas-grid{grid-template-columns:1fr;}}
.area-card{border:1px solid var(--linha);border-radius:4px;padding:32px;background:var(--branco);}
.area-card .num{font-family:var(--mono);font-size:13px;color:var(--impulso);letter-spacing:0.1em;}
.area-card h3{margin-top:16px;margin-bottom:12px;}
.area-card p{color:var(--cinza-rota);}

/* ===== Metodologia / linha do tempo ===== */
.timeline{margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha);}
@media (max-width:980px){.timeline{grid-template-columns:1fr;}}
.timeline-step{background:var(--branco);padding:28px 24px;position:relative;}
.timeline-step .num{font-family:var(--disp);font-size:32px;color:var(--impulso);line-height:1;}
.timeline-step h4{margin-top:16px;}
.timeline-step p{margin-top:10px;color:var(--cinza-rota);font-size:14.5px;}

/* ===== Values grid (reuso em Governança) ===== */
.values{background:var(--azul);color:var(--branco);position:relative;overflow:hidden;}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;margin-top:56px;position:relative;z-index:2;}
@media (max-width:820px){.values-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.values-grid{grid-template-columns:1fr;}}
.value-item .label{color:var(--prata);display:block;margin-bottom:12px;}
.value-item h3{font-family:var(--sans);font-weight:600;font-size:19px;color:var(--branco);}

/* ===== Cartões neutros de conteúdo (Governança, Privacidade) ===== */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:56px;}
@media (max-width:820px){.info-grid{grid-template-columns:1fr;}}
.info-card{background:var(--nevoa);border-radius:4px;padding:32px;}
.info-card h3{margin-bottom:14px;}
.info-card p,.info-card li{color:var(--cinza-rota);}

/* ===== Placeholder (relatórios futuros, projetos futuros) ===== */
.placeholder-box{
  border:1.5px dashed var(--linha);border-radius:6px;
  padding:40px 32px;text-align:center;background:var(--nevoa);margin-top:40px;
}
.placeholder-box .icon{width:36px;height:36px;margin:0 auto 20px;color:var(--cinza-rota);}
.placeholder-box .icon svg{width:100%;height:100%;stroke:var(--cinza-rota);fill:none;stroke-width:1.4;}
.placeholder-box p{color:var(--cinza-rota);max-width:52ch;margin:8px auto 0;}

/* ===== Listas simples com marcador ===== */
.check-list{list-style:none;margin:24px 0 0;padding:0;}
.check-list li{display:flex;gap:12px;padding:10px 0;font-size:15.5px;color:var(--grafite);align-items:flex-start;}
.check-list li svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--impulso);}

.num-list{list-style:none;margin:24px 0 0;padding:0;counter-reset:n;}
.num-list li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--linha);}
.num-list li:last-child{border-bottom:none;}
.num-list li::before{counter-increment:n;content:counter(n,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--impulso);padding-top:2px;}

/* ===== Prose (política de privacidade etc.) ===== */
.prose{max-width:74ch;}
.prose h3{margin-top:40px;margin-bottom:14px;}
.prose h3:first-child{margin-top:0;}
.prose p + p{margin-top:16px;}
.prose p{color:var(--grafite);}
.prose ul{margin:16px 0 0;padding-left:22px;color:var(--grafite);}
.prose li{margin-top:8px;line-height:1.6;}
.prose a{color:var(--impulso);text-decoration:underline;text-decoration-color:rgba(46,91,199,0.35);}

/* ===== Formulários ===== */
.form-card{background:var(--nevoa);border-radius:6px;padding:40px;margin-top:16px;}
@media (max-width:600px){.form-card{padding:28px 20px;}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;}
@media (max-width:700px){.form-grid{grid-template-columns:1fr;}}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field.full{grid-column:1 / -1;}
.form-field label{font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--azul);}
.form-field label .req{color:var(--erro);margin-left:2px;}
.form-field input,.form-field select,.form-field textarea{
  font-family:var(--sans);font-size:15px;color:var(--grafite);
  border:1px solid var(--linha);border-radius:3px;padding:12px 14px;
  background:var(--branco);width:100%;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--impulso);box-shadow:0 0 0 3px rgba(46,91,199,0.14);
}
.form-field textarea{resize:vertical;min-height:120px;}
.form-subgrid{display:grid;grid-template-columns:2fr 1fr;gap:20px;}
.form-subgrid input{text-transform:none;}
.form-actions{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.form-note{color:var(--cinza-rota);font-size:13px;}
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;}

.alert{border-radius:4px;padding:16px 20px;margin-top:24px;font-size:14.5px;display:flex;gap:12px;align-items:flex-start;}
.alert svg{flex:none;width:20px;height:20px;margin-top:1px;}
.alert-success{background:#E7F3EE;color:#0F5E45;}
.alert-success svg{color:#157F5F;}
.alert-error{background:#FBEAEE;color:#7E1830;}
.alert-error svg{color:var(--erro);}

/* ===== Dados de contato ===== */
.contact-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:16px;}
@media (max-width:820px){.contact-info-grid{grid-template-columns:1fr;}}
.contact-info-item .label{color:var(--impulso);display:block;margin-bottom:10px;}
.contact-info-item p{color:var(--grafite);}
.contact-info-item a{color:var(--impulso);font-weight:600;}

/* ===== Final CTA ===== */
.cta-final{
  background:linear-gradient(160deg,var(--grafite) 0%,var(--azul) 100%);
  color:var(--branco);text-align:center;
}
.cta-final .label{color:var(--prata);}
.cta-final .btn-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:40px;}
.cta-final h2{max-width:720px;margin:16px auto 0;}

/* ===== Footer ===== */
footer{background:var(--grafite);color:rgba(255,255,255,0.7);padding:72px 0 32px;}
.footer-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;padding-bottom:40px;}
.footer-brand{max-width:300px;}
.footer-brand img{height:34px;width:auto;margin-bottom:20px;}
.footer-brand p{color:rgba(255,255,255,0.55);}
.footer-brand .footer-cnpj{margin-top:18px;color:rgba(255,255,255,0.4);font-family:var(--mono);font-size:12px;line-height:1.7;}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap;}
.footer-col .label{color:rgba(255,255,255,0.4);display:block;margin-bottom:18px;}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,0.75);padding:6px 0;}
.footer-col a:hover{color:var(--branco);}
.footer-col p{color:rgba(255,255,255,0.75);font-size:14px;padding:6px 0;margin:0;}
.footer-social{display:flex;gap:12px;margin-top:18px;}
.footer-social a{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.footer-social a:hover{border-color:rgba(255,255,255,0.6);}
.footer-social svg{width:16px;height:16px;stroke:rgba(255,255,255,0.8);fill:none;stroke-width:1.6;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-bottom .caption{color:rgba(255,255,255,0.4);}
.footer-bottom a{color:rgba(255,255,255,0.5);}
.footer-bottom a:hover{color:var(--branco);}

/* ============================================================
   Motion / recursos "tech" — reveal on scroll, glows, grid
   Tudo com fallback estático e respeito a prefers-reduced-motion
   ============================================================ */
[data-reveal]{transition:opacity .45s cubic-bezier(.16,.8,.24,1), transform .45s cubic-bezier(.16,.8,.24,1);}
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{opacity:0;transform:translateY(12px);}
  [data-reveal].is-visible{opacity:1;transform:none;}
}

header{transition:box-shadow .25s ease, background .25s ease;}
header.is-scrolled{box-shadow:0 8px 24px -16px rgba(14,20,36,0.25);}

/* ===== dot indicator no kicker — assinatura "tech" ===== */
.kicker{position:relative;padding-left:18px;}
.kicker::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--impulso);
}
@media (prefers-reduced-motion: no-preference){
  .kicker::before{box-shadow:0 0 0 0 rgba(46,91,199,0.45);animation:ip-pulse 2.4s ease-out infinite;}
}
.kicker.on-dark::before{background:var(--prata);}
@keyframes ip-pulse{
  0%{box-shadow:0 0 0 0 rgba(46,91,199,0.45);}
  70%{box-shadow:0 0 0 9px rgba(46,91,199,0);}
  100%{box-shadow:0 0 0 0 rgba(46,91,199,0);}
}

/* ===== grid técnico de fundo (hero / seções escuras) ===== */
.tech-grid{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0%, #000 40%, transparent 100%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 0%, #000 40%, transparent 100%);
}

/* ===== blobs de gradiente animados ===== */
.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;}
.hero-blob-a{width:420px;height:420px;background:radial-gradient(circle,rgba(255,255,255,0.20),transparent 70%);top:-140px;right:-80px;}
.hero-blob-b{width:320px;height:320px;background:radial-gradient(circle,rgba(255,255,255,0.14),transparent 70%);bottom:-160px;left:8%;}
@media (prefers-reduced-motion: no-preference){
  .hero-blob-a{animation:ip-drift-a 16s ease-in-out infinite alternate;}
  .hero-blob-b{animation:ip-drift-b 20s ease-in-out infinite alternate;}
}
@keyframes ip-drift-a{from{transform:translate(0,0) scale(1);}to{transform:translate(-30px,24px) scale(1.08);}}
@keyframes ip-drift-b{from{transform:translate(0,0) scale(1);}to{transform:translate(24px,-18px) scale(1.05);}}

/* ===== hover motion em cartões ===== */
.pmv-card,.area-card,.program-card,.info-card,.timeline-step{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.area-card:hover,.program-card:hover,.info-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 36px -24px rgba(22,36,75,0.28);
  border-color:rgba(46,91,199,0.35);
}
.pmv-card:hover,.timeline-step:hover{background:var(--nevoa);}

/* ===== botões — leve elevação/glow ===== */
.btn{transition:transform .18s ease, box-shadow .18s ease, background .18s ease;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(46,91,199,0.55);}
.btn.is-loading{opacity:0.75;cursor:progress;}

/* ===== alert com entrada suave ===== */
.alert{animation:ip-fade-in .35s ease both;}
@keyframes ip-fade-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

::selection{background:var(--impulso);color:var(--branco);}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:auto;z-index:100;background:var(--impulso);color:#fff;padding:12px 20px;border-radius:2px;}
.skip-link:focus{left:16px;top:16px;}