/* ======================
   PALETA GLOBAL
========================= */
:root {
  --brand:       #3f7f82;
  --brand-soft:  #edf3f3;
  --accent:      #c9ae6a;
  --bg:          #f8f9fa;
  --panel:       #ffffff;
  --ink:         #1f2933;
  --muted:       #66707a;
  --line:        #e1e6eb;
  --teal:        var(--brand);
  --teal-light:  #6fa6a8;
  --teal-soft:   var(--brand-soft);
  --gray-0:      #ffffff;
  --gray-1:      #f2f4f6;
  --gray-2:      var(--line);
  --gray-3:      #c6ced7;
  --text-main:   var(--ink);
  --text-soft:   var(--muted);
}

/* ============================================================
   ÁREA DA HISTÓRIA — Variáveis locais
============================================================ */
#historia-app {
  --brand:var(--teal);
  --brand-soft:var(--teal-soft);
  --panel:var(--panel);
  --bg:var(--bg);
  --ink:var(--ink);
  --muted:var(--muted);
  --line:var(--line);
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.06);

  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

#historia-app,
#historia-app * {
  box-sizing:border-box;
}

#historia-app{
  font-size:24px;
}

/* ============================================================
   🔓 QUEBRAR LIMITES DO TEMA (WORDPRESS)
============================================================ */
#historia-app,
.entry-content > #historia-app {
  max-width:none !important;
  width:100%;
}

/* ============================================================
   CABEÇALHO
============================================================ */
.ha-head {
  max-width:1400px;
  margin:0 auto;
  padding:24px 16px 12px;
  text-align:center;
}

.ha-head h1 {
  margin:0 0 .3rem;
  font-size:1.8rem;
  color:var(--ink);
}

.ha-head .subtitle {
  margin:0;
  color:var(--muted);
  font-size:1.1rem;
}

/* ============================================================
   TOC — BOTÃO
============================================================ */
#historia-app #hist-toc-toggle {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 99998;

  width: 40px;
  height: 40px;

  background:#fff !important;
  color:var(--ink);
  font-size:24px;

  border:2px solid var(--brand);
  border-radius:12px;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:all .25s ease;
}

#historia-app #hist-toc-toggle:hover {
  background:var(--brand) !important;
  color:#fff;
}

/* ============================================================
   TOC — PAINEL (FUNDO SEMPRE BRANCO)
============================================================ */
#historia-app #hist-toc-panel {
  position:fixed;
  top:50px;
  left:70px;

  width:300px;
  height:43vh;

  background:#ffffff; /* ← CRÍTICO */
  border-right:3px solid var(--brand);
  border-radius:12px;

  box-shadow:0 0 40px rgba(0,0,0,.08);
  padding:28px 22px;

  overflow-y:auto;
  z-index:99997;

  transform:translateX(-100%);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}

#historia-app #hist-toc-panel.open {
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

#historia-app #hist-toc-panel ul {
  margin:0;
  padding:0;
  list-style:none;
}

#historia-app #hist-toc-panel li {
  margin-bottom:14px;
}

/* === TOC LINKS (NEUTROS, FUNCIONAIS) === */
#historia-app #hist-toc-panel a {
  display:block;
  padding:4px 0;

  font-size:1rem;
  color:var(--ink);
  text-decoration:none;

  background:none !important;
  border-left:3px solid transparent;
  transition:all .2s ease;
}

#historia-app #hist-toc-panel a:hover {
  color:var(--brand);
  border-left-color:var(--brand);
}

#historia-app #hist-toc-panel a.active {
  color:var(--brand);
  font-weight:600;
  border-left-color:var(--brand);
}

/* ============================================================
   CONTEÚDO
============================================================ */
.ha-content {
  max-width:1400px;
  margin:0 auto;
  padding:0 16px 40px;

  display:flex;
  flex-direction:column;
  gap:22px;
}

.ha-sec {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}

.ha-sec h2 {
  margin:0 0 .7rem;
  color:var(--brand);
  font-size:1.4rem;
  font-weight:700;
}

.ha-sec .sub {
  margin:.7rem 0 .4rem;
  font-size:1.05rem;
  font-weight:600;
  color:var(--muted);
}

#historia-app p {
  line-height:1.65;
  text-align:justify;
  hyphens:auto;
}

/* ============================================================
   LINKS — ELEGANTES (EXCETO TOC)
============================================================ */
#historia-app a {
  color: color-mix(in srgb, var(--ink) 85%, var(--brand));
  text-decoration:none;

  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--brand) 55%, transparent),
    color-mix(in srgb, var(--brand) 55%, transparent)
  );
  background-size:100% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;

  padding-bottom:2px;
  transition:color .2s ease, background-size .2s ease;
}

#historia-app a:hover {
  color:var(--brand);
  background-size:100% 2px;
}

#historia-app a:focus-visible {
  outline:none;
  background-size:100% 2px;
}

/* ============================================================
   NOTA DESTACADA
============================================================ */
.note {
  margin:18px 0;
  padding:12px 16px;

  background:var(--brand-soft);
  border-left:4px solid var(--brand);
  border-radius:10px;

  font-size:1.25rem;
  line-height:1.55;
}

/* ============================================================
   BLOCO COMPOSITORES
============================================================ */
.ha-sec .composers {
  margin:1.1em 0 1.6em;
  padding:1em 1.2em 1em 1.4em;

  border-left:5px solid var(--brand);
  border-radius:12px;

  background:linear-gradient(
    90deg,
    rgba(18,179,182,.14),
    rgba(255,255,255,.96)
  );

  font-size:1.15rem;
  font-weight:600;
  line-height:1.65;
}

.ha-sec .composers::before {
  content:"Compositores";
  display:block;
  margin-bottom:.4em;

  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  color:var(--brand);
}

/* ============================================================
   YOUTUBE — CENTRADO, CONTIDO
============================================================ */
#historia-app .video-block {
  width:100%;
  margin:16px 0;
}

#historia-app .video-block iframe {
  width:100%;
  max-width:680px;
	height:100%;
  aspect-ratio:16/9;

  display:block;
  margin:0 auto;
  border:0;
	border-radius:12px;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width:900px){

  #historia-app{
    font-size:16px;
  }

  #historia-app #hist-toc-toggle{
    left:12px;
  }

  #historia-app #hist-toc-panel{
    top:0;
    left:55px;
    width:calc(100% - 55px);
    height:100vh;
    box-shadow:0 0 40px rgba(0,0,0,.18);
  }
}