/* =============================================================
   GNCC USP  ·  layout.css
   Estrutura da pagina: cabecalho, navegacao, heroi, secoes e rodape.
   ============================================================= */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--gut);
  padding-right:var(--gut);
}

/* ------------------------------------------------------------- cabecalho */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--mist);
}

.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:14px;
  padding-bottom:14px;
}

.brand{display:block;flex:none}
.brand img{height:44px;width:auto}

.site-nav ul{
  display:flex;
  align-items:center;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.site-nav a{
  display:block;
  font-size:14.5px;
  font-weight:700;
  color:var(--navy);
  text-decoration:none;
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--green)}
.site-nav a.is-active{border-bottom-color:var(--navy)}

.header-tools{display:flex;align-items:center;gap:12px;flex:none}

.lang-switch{display:flex}
.lang-switch button{
  font:inherit;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.03em;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--mist);
  padding:7px 12px;
  cursor:pointer;
}
.lang-switch button + button{border-left:0}
.lang-switch button:hover{background:var(--tint)}
.lang-switch button[aria-pressed="true"]{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}

.nav-toggle{
  display:none;
  width:42px;
  height:40px;
  padding:0 10px;
  background:#fff;
  border:1px solid var(--mist);
  border-radius:var(--radius);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  background:var(--navy);
  margin:4px 0;
}

/* ------------------------------------------------------------- heroi da home */
.hero{padding-top:clamp(44px, 7vw, 92px)}

.hero-grid{
  display:grid;
  grid-template-columns:1.35fr .85fr;
  gap:clamp(28px, 5vw, 72px);
  align-items:center;
}
.hero-text h1{margin-bottom:22px}
.hero-mark img{width:100%;max-width:290px;margin-left:auto}

.hero-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  list-style:none;
  margin:clamp(40px, 6vw, 72px) 0 0;
  padding:0;
  border-top:1px solid var(--mist);
}
.hero-strip li{padding:22px 30px 4px 0}
.hero-strip li + li{
  border-left:1px solid var(--mist);
  padding-left:30px;
}
.hero-strip strong{
  display:block;
  font-size:15px;
  font-weight:800;
  color:var(--navy);
  margin-bottom:2px;
}
.hero-strip span{font-size:14px;color:var(--ink-mute)}

/* ------------------------------------------------------------- heroi interno */
.page-hero{
  padding-top:clamp(34px, 5vw, 62px);
  padding-bottom:clamp(30px, 4vw, 48px);
  border-bottom:1px solid var(--mist);
}
.page-hero h1{margin-bottom:18px}

.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  margin:0 0 22px;
  padding:0;
  font-size:13.5px;
  color:var(--ink-mute);
}
.breadcrumb li + li::before{content:"/";margin-right:10px;color:var(--mist)}
.breadcrumb a{color:var(--ink-mute);text-decoration:none}
.breadcrumb a:hover{color:var(--navy);text-decoration:underline}

/* ------------------------------------------------------------- secoes */
.section{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.section-top-tight{padding-top:clamp(36px, 4.5vw, 60px)}
.section-tint{background:var(--tint)}

/* grade de duas colunas: rotulo lateral + conteudo */
.split{
  display:grid;
  grid-template-columns:var(--side) 1fr;
  gap:var(--side-gap);
  align-items:start;
}
.section-head{margin-bottom:44px}
.section-head p{margin:0;max-width:62ch;color:var(--ink-soft)}
.split-body{max-width:74ch}

/* ------------------------------------------------------------- rodape */
.site-footer{
  background:var(--navy);
  color:#fff;
  padding-top:clamp(46px, 6vw, 72px);
  padding-bottom:28px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:36px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.footer-logo{height:52px;width:auto;margin-bottom:18px}
.footer-top p{font-size:14px;color:var(--mist);max-width:38ch;margin:0}
.footer-title{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--green);
  margin:0 0 14px;
}
.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-list a{
  font-size:14.5px;
  color:#fff;
  text-decoration:none;
  opacity:.86;
}
.footer-list a:hover{opacity:1;text-decoration:underline}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-top:22px;
  font-size:13px;
  color:var(--mist);
}
.footer-bottom p{margin:0}
.footer-neuro{height:34px;width:auto;opacity:.92}

/* ------------------------------------------------------------- responsivo */
@media (max-width:1000px){
  .split,
  .hero-grid{grid-template-columns:1fr}
  .split-body{max-width:none}
  .hero-mark{order:-1}
  .hero-mark img{margin:0 auto;max-width:170px}
  .hero-strip{grid-template-columns:1fr}
  .hero-strip li{padding:18px 0}
  .hero-strip li + li{border-left:0;border-top:1px solid var(--mist);padding-left:0}
  .footer-top{grid-template-columns:1fr}

  .nav-toggle{display:block}
  .site-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#fff;
    border-bottom:1px solid var(--mist);
    box-shadow:0 14px 28px rgba(42,44,108,.10);
    display:none;
  }
  .site-nav.is-open{display:block}
  .site-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px var(--gut) 18px;
  }
  .site-nav a{
    padding:14px 0;
    border-bottom:1px solid var(--tint);
    font-size:16px;
  }
  .site-nav a.is-active{border-bottom-color:var(--green)}
}