:root{
  --casco:      #0B2A4B;   /* marinho do lettering, texto e títulos */
  --casco-mid:  #143A5E;
  --profundo:   #08223C;   /* marinho profundo, secções invertidas */
  --sinal:      #1C7B82;   /* arco interior, cor de ação e de interação */
  --sinal-esc:  #145F66;
  --turquesa:   #60C6C1;   /* arco maior, o turquesa dominante da marca */
  --aco-azul:   #62A7B6;   /* arco de azul-aço */
  --menta:      #7FCAA7;   /* arco de verde-água */
  --menta-esc:  #2F7F5E;   /* verde-água escurecido, marcação de estado */
  --zinco:      #F1F6F6;   /* fundo de página */
  --zinco-alto: #E3F0EF;
  --agua-clara: #DDF0EE;   /* turquesa muito diluído */
  --aco:        #5C7A8A;   /* texto secundário, cotas, anotação */
  --linha:      rgba(11,42,75,.15);
  --linha-clara:rgba(221,240,238,.22);

  --disp: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --texto:"Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --max: 1180px;
  --gut: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--zinco);
  color:var(--casco);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.env{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:600;letter-spacing:.005em;margin:0}
h1{font-size:clamp(2.9rem,7vw,5.2rem);line-height:.98;text-transform:uppercase}
h2{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.04;text-transform:uppercase}
h3{font-size:1.42rem;line-height:1.16;text-transform:uppercase;letter-spacing:.01em}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.55;max-width:60ch}
.cota{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--aco);
}



.rotulo{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--aco);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;
}
.rotulo::after{content:"";flex:1;height:1px;background:var(--linha)}

.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(241,246,246,.93);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--linha);
}
.topo-int{display:flex;align-items:center;gap:2rem;height:66px}
.marca{display:flex;align-items:center;gap:.62rem;text-decoration:none;white-space:nowrap}
.marca img{height:34px;width:auto}
.marca .lock1{font-family:var(--disp);font-weight:400;font-size:1.16rem;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;color:var(--casco)}
.marca .lock1 b{font-weight:700}
.marca .lock2{font-family:var(--mono);font-size:.55rem;letter-spacing:.235em;
  text-transform:uppercase;color:var(--aco);margin-top:3px}
.nav{margin-left:auto;display:flex;gap:1.5rem}
.nav a{
  font-family:var(--disp);font-size:1rem;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--casco);opacity:.72;padding-block:4px;
  border-bottom:2px solid transparent;transition:opacity .2s,border-color .2s;
}
.nav a:hover,.nav a:focus-visible{opacity:1;border-bottom-color:var(--sinal)}
.nav-menu{display:none;background:none;border:1px solid var(--linha);
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;
  padding:.35rem .8rem;margin-left:auto;cursor:pointer;color:inherit;font-size:.95rem}

.heroi{padding:clamp(48px,7vw,90px) 0 clamp(40px,5vw,64px);position:relative;overflow:hidden}
.heroi-grelha{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px)}
.heroi h1 span{display:block}
.heroi h1 .destaque{color:var(--sinal)}
.heroi-txt{max-width:38ch}
.heroi .lead{margin-top:1.6rem}
.acoes{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.btn{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:1.02rem;
  text-decoration:none;padding:.66rem 1.4rem;border:1px solid var(--casco);
  display:inline-block;transition:background .2s,color .2s,transform .2s;
}
.btn:hover{background:var(--casco);color:var(--zinco)}
.btn.cheio{background:var(--sinal);border-color:var(--sinal);color:#fff}
.btn.cheio:hover{background:var(--sinal-esc);border-color:var(--sinal-esc)}

.corte{width:100%;height:auto}
.corte .traco{fill:none;stroke:var(--casco);stroke-width:1.25;vector-effect:non-scaling-stroke}
.corte .fino{fill:none;stroke:var(--aco);stroke-width:.75;vector-effect:non-scaling-stroke}
.corte .cota-linha{stroke:var(--aco);stroke-width:.6;stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
.corte .agua{fill:rgba(96,198,193,.18)}
.corte .leito{fill:rgba(11,42,75,.12)}
.corte .ativo{stroke:var(--sinal);stroke-width:1.6;fill:none;vector-effect:non-scaling-stroke}
.corte .cheio-sinal{fill:var(--turquesa);stroke:none}
.corte text{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;fill:var(--aco)}
.corte .etq{font-family:var(--disp);font-size:13px;letter-spacing:.08em;fill:var(--casco);text-transform:uppercase}

@media (prefers-reduced-motion:no-preference){
  .desenha{stroke-dasharray:var(--comp,1400);stroke-dashoffset:var(--comp,1400);
    animation:desenhar 1.6s cubic-bezier(.2,.7,.3,1) forwards}
  .d2{animation-delay:.25s}.d3{animation-delay:.5s}.d4{animation-delay:.75s}
  .surge{opacity:0;animation:surgir .7s ease forwards;animation-delay:1.1s}
  .boia{animation:bolear 5.5s ease-in-out infinite}
  .deriva{animation:derivar 11s ease-in-out infinite}
}
@keyframes desenhar{to{stroke-dashoffset:0}}
@keyframes surgir{to{opacity:1}}
@keyframes bolear{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes derivar{0%,100%{transform:translateX(0)}50%{transform:translateX(16px)}}

.tira{border-block:1px solid var(--linha);background:var(--agua-clara)}
.tira-grelha{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.metr{padding:1.9rem var(--gut) 1.7rem;border-right:1px solid var(--linha)}
.metr:last-child{border-right:none}
.metr .valor{font-family:var(--disp);font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;font-weight:600;color:var(--sinal)}
.metr .nome{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--aco);margin-top:.55rem}

section{padding-block:clamp(58px,8vw,104px)}
.cabec{display:grid;gap:1.2rem;margin-bottom:clamp(30px,4vw,52px)}
.cabec .lead{color:rgba(11,42,75,.78)}

.pilares{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
.pilar{background:var(--zinco);padding:clamp(24px,3vw,34px);position:relative;
  transition:background .25s;border-top:3px solid var(--arco,var(--turquesa))}
.pilar:hover{background:var(--agua-clara)}
.pilar .cota{display:block;margin-bottom:1rem}
.pilar h3{margin-bottom:.8rem}
.pilar p{font-size:.97rem;margin-bottom:1rem;color:rgba(11,42,75,.82)}
.pilar ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha);padding-top:.9rem}
.pilar li{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--aco);padding-block:.28rem}
.pilar li::before{content:"› ";color:var(--sinal)}

/* projetos */
.prog{border-top:1px solid var(--linha)}
.prog:last-of-type{border-bottom:1px solid var(--linha)}
.prog-int{display:grid;gap:1.2rem;padding-block:1.9rem;align-items:start}
.prog-id .nome-prog{font-family:var(--disp);font-size:1.28rem;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.1}
.prog-id .cota{display:block;margin-top:.45rem}
.prog-corpo p{margin:0 0 .8rem;font-size:.99rem;color:rgba(11,42,75,.84)}
.prog-corpo p:last-child{margin-bottom:0}
.etiquetas{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.chip{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--linha);padding:.28rem .6rem;color:var(--aco); border-radius: 16px}
.chip.ativo{border-color:var(--menta-esc);color:var(--menta-esc)}
.chip.curso{border-color:var(--sinal);color:var(--sinal)}

/* infraestruturas, fundo escuro */
.escuro{background:var(--profundo);color:var(--agua-clara)}
.escuro .rotulo,.escuro .cota{color:rgba(221,240,238,.62)}
.escuro .rotulo::after{background:var(--linha-clara)}
.escuro .lead{color:rgba(221,240,238,.85)}
.instal{display:grid;gap:1px;background:var(--linha-clara);border:1px solid var(--linha-clara);margin-top:2.4rem}
.inst{background:var(--profundo);padding:clamp(22px,2.6vw,30px)}
.inst h3{font-size:1.2rem;margin-bottom:.7rem;color:var(--turquesa)}
.inst p{font-size:.95rem;color:rgba(221,240,238,.78);margin:0}
.inst .cota{display:block;margin-bottom:.9rem}
.nota-img{
  border:1px dashed var(--linha-clara);padding:1rem;margin-top:1.1rem;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;line-height:1.7;
  color:rgba(221,240,238,.55);text-transform:uppercase;
}

.rede{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);margin-top:2rem}

.rede_new {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:1px;
  background:var(--linha);
  border:1px solid var(--linha);
  margin-top:2rem
}


.no{background:var(--zinco);padding:1.5rem}
.no .papel{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sinal);margin-bottom:.5rem}
.no .ent{font-family:var(--disp);font-size:1.08rem;text-transform:uppercase;line-height:1.15}
.no p{font-size:.9rem;margin:.5rem 0 0;color:rgba(11,42,75,.75)}

.contacto{border-top:1px solid var(--linha)}
.cont-grelha{display:grid;gap:2.4rem}
.dados{font-family:var(--mono);font-size:.8rem;line-height:2.1;letter-spacing:.04em;
  list-style:none;padding:0;margin:0}
.dados span{color:var(--aco);display:inline-block;min-width:104px}
.dados a{text-decoration:none;border-bottom:1px solid var(--sinal)}

footer{border-top:1px solid var(--linha);padding-block:2.2rem;background:var(--zinco-alto)}
.rodape{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--aco)}
.cofin{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center; justify-content: center; margin-bottom:1.6rem}
.cofin .slot{
  border:1px  var(--linha);
  padding:.6rem .9rem;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.1em;
  color:var(--aco);
  text-transform:uppercase;
 
}

@media (prefers-reduced-motion:no-preference){
  .rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  .rev.vis{opacity:1;transform:none}
}

:focus-visible{outline:2px solid var(--sinal);outline-offset:3px}

@media (min-width:760px){
  .tira-grelha{grid-template-columns:repeat(4,1fr)}
  .pilares{grid-template-columns:repeat(2,1fr)}
  .instal{grid-template-columns:repeat(2,1fr)}
  .rede{grid-template-columns:repeat(2,1fr)}
  .prog-int{grid-template-columns:minmax(180px,.9fr) 2.2fr}
  .cont-grelha{grid-template-columns:1.1fr 1fr}
  .cabec{grid-template-columns:1fr;max-width:64ch}
}
@media (min-width:1040px){
  .heroi-grelha{grid-template-columns:1.02fr 1.28fr;align-items:center}
  .pilares{grid-template-columns:repeat(4,1fr)}
  .rede{grid-template-columns:repeat(3,1fr)}
  .instal{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:759px){
  .nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--zinco-alto);
    border-bottom:1px solid var(--linha);flex-direction:column;gap:0;padding:.5rem var(--gut) 1rem}
  .nav.aberto{display:flex}
  .nav a{padding-block:.6rem;border-bottom:1px solid var(--linha)}
  .nav-menu{display:block}
  .metr{border-right:none;border-bottom:1px solid var(--linha)}
}

.language-switcher {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--agua-clara);
  color: var(--muted);
}

.language-button {
  min-width: 35px;
  padding: 5px 7px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
}

.language-button:hover {
  color: var(--green);
}

.language-button.active {
  color: var(--white);
  background: var(--green);
}