/* =========================================================================
   PÁGINA · NOSSA HISTÓRIA (page/institucional/historia.php)
   Layout editorial: hero escuro + sidebar fixa + timeline com períodos
   ========================================================================= */


.historia-page{
  --gold:#C49A20;
  --cream:#faf9f6;
  --cream-2:#f1ede4;
  --ink:#111;
  --muted:#6b6b6b;
  --line:#e5e2dc;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  font-size:16px;
}
.historia-page *{box-sizing:border-box}
.historia-page a{color:inherit;text-decoration:none}
.historia-page img{max-width:100%;display:block}

/* HERO */
.historia-page .historia-hero{
  position:relative;background:#000;color:#fff;
  padding:140px 64px 120px;text-align:center;overflow:hidden;
}
.historia-page .historia-hero::before{
  content:'';position:absolute;inset:0;
  background-image:var(--historia-hero-bg);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  z-index:0;opacity:.35;
}
.historia-page .historia-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.75) 100%);
  z-index:1;
}
.historia-page .historia-hero > *{position:relative;z-index:2}
.historia-page .hero-eyebrow{
  font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:.25em;
  color:var(--gold);margin-bottom:18px;text-transform:uppercase;
}
.historia-page .historia-hero h1{
  font-family:'Source Serif 4',serif;font-size:88px;font-weight:500;
  letter-spacing:-.03em;line-height:1;max-width:1100px;margin:0 auto;color:#fff;
}
.historia-page .historia-hero h1 em{font-style:italic;color:var(--gold)}
.historia-page .historia-hero .lead{
  font-family:'Source Serif 4',serif;font-style:italic;font-size:22px;
  color:#cfcfcf;max-width:720px;margin:28px auto 0;line-height:1.45;
}

/* LAYOUT */
.historia-page .body-wrap{
  max-width:none;margin:0;padding:96px 64px;
  display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start;
}

/* SIDEBAR */
.historia-page .side{
  position:sticky;top:24px;background:#fff;
  border:1px solid var(--line);padding:36px 36px 32px;
}
.historia-page .side h4{
  font-family:'Inter',sans-serif;font-size:16px;font-weight:600;
  color:#000;margin-bottom:22px;
}
.historia-page .side ul{list-style:none;margin:0;padding:0}
.historia-page .side ul li{padding:9px 0}
.historia-page .side ul li a{
  color:#000;font-size:15px;border-bottom:1px solid #000;
  padding-bottom:2px;display:inline;
}
.historia-page .side ul li a:hover{color:var(--gold);border-color:var(--gold)}
.historia-page .side ul li a.active{color:var(--gold);border-color:var(--gold);font-weight:500}
.historia-page .side .back-top{
  margin-top:28px;display:inline-block;background:#000;color:#fff;
  padding:12px 26px;border-radius:999px;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
}
.historia-page .side .back-top:hover{background:var(--gold);color:#000}

/* MAIN */
.historia-page .main{min-width:0}
.historia-page .block{margin-bottom:96px;scroll-margin-top:24px}
.historia-page .block h2{
  font-family:'Source Serif 4',serif;font-size:42px;font-weight:500;
  letter-spacing:-.02em;line-height:1.05;color:#000;margin-bottom:24px;
}
.historia-page .block h2 em{font-style:italic;color:var(--gold)}
.historia-page .block p{margin-bottom:16px;color:#333;line-height:1.7;max-width:760px}
.historia-page .block p strong{color:#000;font-weight:600}
.historia-page .block .lede{
  font-family:'Source Serif 4',serif;font-style:italic;font-size:20px;
  color:#222;max-width:760px;margin-bottom:24px;line-height:1.45;
}

/* STATS HIGHLIGHT */
.historia-page .stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);margin:32px 0 0;
}
.historia-page .stat{
  padding:28px 24px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);background:#fff;
}
.historia-page .stat .num{
  font-family:'Source Serif 4',serif;font-style:italic;font-size:48px;
  color:var(--gold);line-height:1;font-weight:500;margin-bottom:8px;
}
.historia-page .stat .k{
  font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;margin-bottom:4px;
}
.historia-page .stat .v{font-size:14px;line-height:1.55;color:#333}
.historia-page .stat .v strong{color:#000;font-weight:600}

/* CURSOS lista compacta */
.historia-page .cursos-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:8px;
}
.historia-page .cursos-list a{
  padding:16px 20px;background:#fff;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:'Source Serif 4',serif;font-size:17px;font-weight:500;
  color:#000;letter-spacing:-.01em;
  display:flex;justify-content:space-between;align-items:center;transition:background .15s;
}
.historia-page .cursos-list a:hover{background:var(--cream-2)}
.historia-page .cursos-list a .arrow{
  color:var(--gold);font-size:12px;letter-spacing:.05em;font-family:'Inter',sans-serif;
}

/* TIMELINE EDITORIAL */
.historia-page .timeline{position:relative;margin-top:32px}
.historia-page .timeline::before{
  content:'';position:absolute;left:120px;top:0;bottom:0;width:1px;background:var(--line);
}
.historia-page .marco{
  position:relative;display:grid;grid-template-columns:140px 1fr;gap:32px;
  padding:32px 0;align-items:flex-start;
}
.historia-page .marco::before{
  content:'';position:absolute;left:115px;top:46px;width:11px;height:11px;
  border-radius:50%;background:#000;border:2px solid var(--cream);z-index:2;
}
.historia-page .marco.featured::before{
  background:var(--gold);width:14px;height:14px;left:114px;top:44px;
}
.historia-page .marco .year{
  font-family:'Source Serif 4',serif;font-style:italic;font-size:48px;
  color:var(--gold);font-weight:500;line-height:1;text-align:right;padding-right:24px;
}
.historia-page .marco .body{
  background:#fff;border:1px solid var(--line);padding:28px 32px;transition:all .2s;
}
.historia-page .marco:hover .body{border-color:var(--gold);transform:translateX(4px)}
.historia-page .marco .body h3{
  font-family:'Source Serif 4',serif;font-size:22px;font-weight:500;
  letter-spacing:-.01em;line-height:1.2;margin-bottom:14px;color:#000;
}
.historia-page .marco .body p{font-size:14.5px;line-height:1.65;color:#444;margin-bottom:10px;max-width:none}
.historia-page .marco .body p:last-child{margin-bottom:0}
.historia-page .marco .body p strong{color:#000;font-weight:600}
.historia-page .marco .photo{
  aspect-ratio:21/7;margin:0 0 18px;position:relative;overflow:hidden;
  background:#1a1a1a;background-size:cover;background-position:center;
}
.historia-page .marco .photo .lbl{
  position:absolute;bottom:12px;left:14px;color:#fff;
  font-family:'Source Serif 4',serif;font-style:italic;font-size:13px;z-index:2;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.historia-page .marco .photo .lbl::before{
  content:'';display:inline-block;width:14px;height:1px;
  background:var(--gold);margin-right:8px;vertical-align:middle;
}
.historia-page .marco .photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.55) 100%);
  z-index:1;
}

/* PERIODOS DENTRO DA TIMELINE */
.historia-page .periodo{
  position:relative;padding:24px 0 24px 140px;margin:48px 0 16px;
}
.historia-page .periodo::before{
  content:'';position:absolute;left:115px;top:50%;width:11px;height:11px;
  border-radius:50%;background:#fff;border:2px solid var(--gold);
  transform:translateY(-50%);z-index:2;
}
.historia-page .periodo .label{
  font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:.22em;
  color:var(--gold);text-transform:uppercase;
}
.historia-page .periodo .label::before{
  content:'';display:inline-block;width:30px;height:1px;
  background:var(--gold);margin-right:14px;vertical-align:middle;
}

/* CTA FINAL */
.historia-page .cta-final{
  background:#000;color:#fff;padding:80px 56px;text-align:center;
}
.historia-page .cta-final h3{
  font-family:'Source Serif 4',serif;font-size:38px;font-weight:500;
  line-height:1.1;letter-spacing:-.02em;max-width:700px;margin:0 auto 18px;
}
.historia-page .cta-final h3 em{font-style:italic;color:var(--gold)}
.historia-page .cta-final p{
  font-family:'Source Serif 4',serif;font-style:italic;font-size:17px;
  color:#bbb;max-width:540px;margin:0 auto 32px;line-height:1.55;
}
.historia-page .cta-final .btn{
  display:inline-block;background:var(--gold);color:#000;
  padding:14px 32px;border-radius:999px;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.historia-page .cta-final .btn:hover{background:#fff}

/* RESPONSIVE */
@media(max-width:1024px){
  .historia-page .body-wrap{grid-template-columns:1fr;padding:48px 24px;gap:24px}
  .historia-page .side{position:static;margin-bottom:0}
  .historia-page .historia-hero{padding:180px 24px 80px}
  .historia-page .historia-hero h1{font-size:54px}
  .historia-page .block h2{font-size:32px}
  .historia-page .stats{grid-template-columns:1fr 1fr}
  .historia-page .cursos-list{grid-template-columns:1fr 1fr}
  .historia-page .timeline::before{left:60px}
  .historia-page .marco{grid-template-columns:80px 1fr;gap:20px}
  .historia-page .marco::before{left:55px}
  .historia-page .marco.featured::before{left:54px}
  .historia-page .marco .year{font-size:32px;padding-right:14px}
  .historia-page .periodo{padding-left:80px}
  .historia-page .periodo::before{left:55px}
}
@media(max-width:600px){
  .historia-page .historia-hero{padding:190px 20px 60px}
  .historia-page .historia-hero h1{font-size:32px;line-height:1.05}
  .historia-page .historia-hero .lead{font-size:15px;margin-top:18px}
  .historia-page .hero-eyebrow{font-size:11px;margin-bottom:14px}
  .historia-page .stats{grid-template-columns:1fr}
  .historia-page .cursos-list{grid-template-columns:1fr}

  /* TIMELINE empilhada — ano em cima do card */
  .historia-page .timeline{margin-top:16px}
  .historia-page .timeline::before{display:none}
  .historia-page .marco{
    grid-template-columns:1fr;gap:8px;
    padding:18px 0;
  }
  .historia-page .marco::before,
  .historia-page .marco.featured::before{display:none}
  .historia-page .marco .year{
    font-size:34px;text-align:left;padding-right:0;
    line-height:1;margin-bottom:2px;
  }
  .historia-page .marco .body{padding:18px 18px}
  .historia-page .marco .body h3{font-size:17px;margin-bottom:10px;line-height:1.25}
  .historia-page .marco .body p{font-size:13.5px;line-height:1.55;margin-bottom:8px}
  .historia-page .marco .photo{aspect-ratio:16/9;margin-bottom:14px}

  /* PERIODO empilhado também */
  .historia-page .periodo{padding:16px 0;margin:24px 0 8px}
  .historia-page .periodo::before{display:none}
  .historia-page .periodo .label{font-size:12px;letter-spacing:.18em}
  .historia-page .periodo .label::before{width:20px;margin-right:10px}

  /* BLOCOS */
  .historia-page .block{margin-bottom:56px}
  .historia-page .block h2{font-size:24px;margin-bottom:18px;line-height:1.15}
  .historia-page .block p{font-size:14.5px;line-height:1.65}
  .historia-page .block .lede{font-size:16px;margin-bottom:18px}

  .historia-page .cta-final{padding:56px 24px}
  .historia-page .cta-final h3{font-size:22px}
  .historia-page .cta-final p{font-size:14.5px}
}

/* =========================================================================
   OVERRIDES v4 (frente 8, 2026-05-28)
   O wrapper carrega também a classe .editorial-page (Wave 1), então regras
   genéricas de css/components/page-content-editorial.css vazam pra cá.
   Estes seletores .historia-page (especificidade maior + carregados depois)
   restauram o visual idêntico ao portalv2.0.
   ========================================================================= */

/* 1. Remove a bolinha dourada que .editorial-page ul>li::before injeta
      nos links da sidebar ("Nesta página" / "Faça parte"). */
.historia-page .side ul li{padding-left:0}
.historia-page .side ul li::before{content:none}

/* 2. Título do CTA final precisa ser branco sobre o fundo preto
      (.editorial-page h3 estava pintando de --ed-ink). O "página" em <em>
      segue dourado, como no v2. */
.historia-page .cta-final h3{color:#fff}

/* 3. Quando a página NÃO tem a sidebar "Nesta página" (barra-lateral ativo no
      Toolset), o body-wrap vira coluna única — senão sobraria a faixa de 340px
      vazia da sidebar. */
.historia-page .body-wrap.no-side{grid-template-columns:1fr}

/* 4. Lista de cursos (#cursos) mais compacta — linhas mais baixas + 4 colunas
      pra ocupar menos altura, e menos gap até a seção "Nossa trajetória".
      (Pedido 2026-05-29: lista estava "muito longa", deixar mais próxima.) */
.historia-page .cursos-list{grid-template-columns:repeat(4,1fr)}
.historia-page .cursos-list a{padding:7px 12px;font-size:13px}
.historia-page .cursos-list a .arrow{font-size:10px}
.historia-page #cursos{margin-bottom:40px}

@media(max-width:1024px){
  .historia-page .cursos-list{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  /* no mobile, 2 colunas em vez de 1 — evita a lista virar uma coluna gigante */
  .historia-page .cursos-list{grid-template-columns:1fr 1fr}
  .historia-page .cursos-list a{padding:10px 12px;font-size:14px}
}