/* ===================================================================
   REDE CAPOEIRA — 8ª EDIÇÃO 2026
   Folha de estilo principal
   Largura de referência do conteúdo: 1280px
   =================================================================== */

/* -------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------- */
:root {
  /* Paleta da marca — o marrom #461c14 é a cor-base do site.
     Escala tonal usada para diferenciar as seções escuras. */
  --marrom-claro:  #62291a;   /* realce do topo do hero / programação */
  --marrom:        #461c14;   /* BASE DA MARCA */
  --marrom-esc:    #26100a;   /* seções escuras */
  --marrom-noite:  #180a06;   /* ponto mais escuro (Sankofa) */
  --preto:         #231e1e;
  --ferrugem:      #9e3716;
  --laranja:       #dc6012;
  --laranja-claro: #f0813a;   /* laranja legível sobre fundo escuro */
  --amarelo:       #f3bd3e;
  --creme:         #f5ebd8;
  --petroleo:      #205862;   /* azul petróleo da versão teal da marca */

  /* Texto */
  --txt-claro:      #f5ebd8;
  --txt-claro-mid:  rgba(245, 235, 216, .74);
  --txt-claro-soft: rgba(245, 235, 216, .55);
  --txt-escuro:     #2b1a14;
  --txt-escuro-mid: #5c463c;

  /* Layout */
  --container: 1280px;
  --gutter: 40px;
  --header-h: 86px;

  /* Tipografia */
  --f-display: 'Boldonse', 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Movimento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .75s;
}

/* -------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--txt-escuro);
  background: var(--creme);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Quebra de linha — evita palavras órfãs na última linha.
   `pretty` no corpo de texto (puxa uma palavra da linha anterior);
   `balance` em blocos curtos (títulos, legendas), que distribui as linhas. */
p, li, blockquote, figcaption, dd, dt { text-wrap: pretty; }
h1, h2, h3, h4,
.section-sub, .hero-place, .place-name, .place-addr,
.tl-title, .tl-place, .tl-meta, .prog-titulo, .prog-com, .prog-desc,
.herois-nota, .heroi-nome,
.siga-card p, .footer-info p {
  text-wrap: balance;
}

/* Texto corrido justificado com hifenização, pra evitar "rios" de
   espaço em branco entre as palavras nos parágrafos mais longos. */
.sobre-text p,
.sankofa-text p,
.herois-intro {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--amarelo);
  color: var(--preto);
  padding: 12px 20px;
  font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------------------------
   3. ANIMAÇÕES DE ENTRADA (scroll reveal)
   ------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Elementos decorativos com parallax — a posição vertical vem do JS (--py) */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0) rotate(var(--rot, 0deg));
}

/* -------------------------------------------------------------------
   4. HEADER FIXO
   ------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.site-header.is-stuck {
  background: rgba(56, 22, 16, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 34px rgba(24, 10, 6, .4);
}

.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  transition: height .4s var(--ease);
}
.site-header.is-stuck .header-inner { height: 70px; }

.brand { flex-shrink: 0; display: block; }
.brand img {
  width: 110px;
  height: auto;
  transition: width .4s var(--ease);
}
.site-header.is-stuck .brand img { width: 90px; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  position: relative;
  display: block;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--txt-claro);
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 4px;
  height: 2px;
  background: var(--amarelo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--ease);
}
.nav-link:hover { color: var(--amarelo); }
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--amarelo); }

/* Botão hambúrguer */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: var(--amarelo);
  border-radius: 2px;
  transition: transform .38s var(--ease), opacity .25s var(--ease);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Barra de progresso do scroll */
.scroll-progress {
  height: 3px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--amarelo), var(--laranja));
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(24, 10, 6, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.nav-backdrop.is-visible { opacity: 1; }

/* -------------------------------------------------------------------
   5. SEÇÕES — BASE
   ------------------------------------------------------------------- */
.section {
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 10vw, 148px) 0;
  scroll-margin-top: 70px;
}
.section > .container { position: relative; z-index: 2; }

.section-head { margin-bottom: clamp(44px, 5vw, 72px); }

/* Divisor de búzios — usado só entre seções de tom muito parecido,
   onde a emenda ficaria invisível (edições/sankofa, programação/siga-nos,
   siga-nos/régua de marcas). O ladrilho é mais alto que a faixa, então
   os búzios aparecem levemente cortados em cima e embaixo. */
.faixa-buzios {
  height: 38px;
  /* transborda 1px para dentro das seções vizinhas: qualquer emenda
     de subpixel (zoom do navegador, telas HiDPI) fica coberta */
  margin-block: -1px;
  background-image: url('../images/elem-buzio-faixa.svg');
  background-repeat: repeat-x;
  background-position: center;
  /* ladrilho menor que a faixa: o búzio aparece inteiro, sem corte */
  background-size: auto 26px;
}
/* a faixa precisa da cor das seções vizinhas: sem ela apareceria o creme do body */
.faixa-buzios-marrom { background-color: var(--marrom-claro); }
.faixa-buzios-preta  { background-color: var(--preto); }
/* emenda entre tons diferentes: degradê de um para o outro */
.faixa-buzios-transicao {
  background-image: url('../images/elem-buzio-faixa.svg'),
                    linear-gradient(to bottom, var(--marrom) 0%, var(--preto) 100%);
  background-repeat: repeat-x, no-repeat;
  background-position: center, center;
  background-size: auto 26px, 100% 100%;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laranja);
  margin-bottom: 14px;
  padding-left: 42px;
  position: relative;
}
.eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 2px;
  background: var(--laranja);
}

.section-title {
  font-family: var(--f-display);
  /* escala a 75% do tamanho original (era 2.4rem / 5.6vw / 4.4rem) */
  font-size: clamp(1.17rem, 2.73vw, 2.15rem);
  line-height: 1.16;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--marrom);
}
.section-sub {
  margin-top: 20px;
  max-width: 60ch;
  font-size: clamp(1.1rem, 1.4vw, 1.28rem);
  color: var(--txt-escuro-mid);
}

/* Variante para fundos escuros */
.on-dark .eyebrow,
.section-edicoes .eyebrow,
.section-sankofa .eyebrow,
.section-programacao .eyebrow,
.section-siga .eyebrow { color: var(--amarelo); }
.section-edicoes .eyebrow::before,
.section-sankofa .eyebrow::before,
.section-programacao .eyebrow::before,
.section-siga .eyebrow::before { background: var(--amarelo); }

.section-edicoes .section-title,
.section-sankofa .section-title,
.section-programacao .section-title,
.section-siga .section-title { color: var(--creme); }

.section-edicoes .section-sub,
.section-sankofa .section-sub,
.section-programacao .section-sub,
.section-siga .section-sub { color: var(--txt-claro-mid); }

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform .3s var(--ease), background .3s var(--ease),
              color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-primary {
  background: var(--amarelo);
  color: var(--marrom);
  box-shadow: 0 10px 30px rgba(243, 189, 62, .26);
}
.btn-primary:hover {
  background: var(--laranja);
  color: var(--creme);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(220, 96, 18, .36);
}
.btn-ghost {
  border-color: rgba(245, 235, 216, .45);
  color: var(--creme);
}
.btn-ghost:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
  transform: translateY(-3px);
}

/* ===================================================================
   6. HOME / HERO
   =================================================================== */
.hero {
  /* largura real do conteúdo centralizado (a pílula de datas, o item
     mais largo) — usada pra centralizar o atabaque/berimbau no vão
     entre a borda da tela e o texto, não entre a borda e o container */
  --hero-text-w: 600px;
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 18px) 0 80px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, var(--marrom-claro) 0%, var(--marrom) 42%, var(--marrom-esc) 100%);
  isolation: isolate;
}
.hero::after {
  /* vinheta suave nas bordas */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(24, 10, 6, .55) 100%);
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-bg .deco { opacity: .13; }
.deco-spiral-2 { width: 460px; bottom: -14%; right: -8%; --rot: -18deg; opacity: .02 !important; }
.deco-tri-1    { width: 130px; top: 18%; right: 12%; --rot: 24deg; opacity: .3 !important; }
.deco-buzio-2  { width: 76px;  top: 24%; left: 20%; --rot: -12deg; opacity: .22 !important; }

.hero-art {
  position: absolute;
  bottom: 1.5em;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  transform: translateX(var(--center-x, 0)) translate3d(0, var(--py, 0px), 0) rotate(var(--rot, 0deg));
}
.hero-art-left {
  /* centralizado no vão entre a borda esquerda e o texto */
  left: max(0px, calc((100vw - var(--hero-text-w)) / 4));
  --center-x: -50%;
  --rot: -15deg;
  width: clamp(120px, 14vw, 210px);
  opacity: .75;
}
.hero-art-right {
  /* centralizado no vão entre o texto e a borda direita, com um
     empurrão extra pra esquerda e a base alinhada à do atabaque
     (a cabaça tem mais respiro transparente embaixo que o atabaque) */
  right: max(24px, calc((100vw - var(--hero-text-w)) / 4 + 24px));
  margin-bottom: 40px;
  --center-x: 50%;
  --rot: 10deg;
  width: clamp(90px, 11vw, 170px);
  opacity: .92;
  filter: drop-shadow(0 24px 40px rgba(24, 10, 6, .5));
}

.hero-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Composição de fotos acima da marca — só usada no index2 */
.hero-photos {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.hero-foto {
  width: clamp(155px, 18vw, 280px);
  height: auto;
  border-radius: 4px;
  transition: transform .4s var(--ease), z-index 0s;
}
.hero-foto-1 {
  transform: rotate(-10deg) translate(22px, 18px);
  margin-right: -30px;
  z-index: 1;
}
.hero-foto-2 {
  transform: rotate(-3deg) translate(6px, -8px);
  margin-right: -30px;
  z-index: 3;
  position: relative;
}
.hero-foto-3 {
  transform: rotate(4deg) translate(-6px, -6px);
  margin-left: -30px;
  z-index: 3;
  position: relative;
}
.hero-foto-4 {
  transform: rotate(10deg) translate(-22px, 20px);
  margin-left: -30px;
  z-index: 1;
}
.hero-foto:hover { z-index: 5; filter: brightness(1.04); }
.hero-foto-1:hover { transform: rotate(-7deg) translate(22px, 10px) scale(1.05); }
.hero-foto-2:hover { transform: rotate(-1deg) translate(6px, -16px) scale(1.05); }
.hero-foto-3:hover { transform: rotate(2deg) translate(-6px, -14px) scale(1.05); }
.hero-foto-4:hover { transform: rotate(7deg) translate(-22px, 12px) scale(1.05); }

/* Larguras da marca já descontam o antigo vazio do SVG (fator 0,836),
   então o tamanho visual do logotipo continua o mesmo de antes do recorte. */
.hero-logo {
  width: clamp(230px, 37vw, 520px);
  height: auto;
  filter: drop-shadow(0 14px 34px rgba(24, 10, 6, .55));
}

/* Data em linha única dentro de uma pílula escura.
   O texto+padding preenche ~80% da coluna (container) em qualquer largura de
   tela — a fonte escala em vw (não em %) porque a pílula usa largura de
   conteúdo (fit-content); crescer a fonte é o que faz a pílula crescer. */
.hero-dates {
  margin-top: 32px;
  padding: 1em 2em;
  border-radius: 999px;
  background: var(--petroleo);
  font-family: var(--f-display);
  font-size: clamp(.75rem, 3.74vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: .04em;
  color: var(--creme);
  white-space: nowrap;
}

.hero-place { margin-top: 22px; color: var(--txt-claro); }
.place-name {
  font-size: clamp(1.14rem, 1.84vw, 1.43rem);
  font-weight: 600;
}
.place-addr {
  margin-top: 4px;
  font-size: clamp(1.02rem, 1.3vw, 1.12rem);
  color: var(--txt-claro-mid);
}

.badge-free {
  margin-top: 20px;
  display: inline-block;
  padding: 11px 30px;
  border: 2px solid var(--amarelo);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amarelo);
  background: rgba(243, 189, 62, .09);
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.badge-free:hover,
.badge-free:focus-visible {
  background: var(--amarelo);
  color: var(--marrom);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(243, 189, 62, .3);
}

/* ===================================================================
   7. SOBRE
   =================================================================== */
.section-sobre { background: var(--creme); }

.deco-sobre-folha  { width: 240px; top: 6%; right: -60px; --rot: 18deg; opacity: .3; }
.deco-sobre-spiral { width: 380px; bottom: -8%; left: -130px; --rot: -14deg; opacity: .12; }

.sobre-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.sobre-text p + p { margin-top: 22px; }
.sobre-text p { color: var(--txt-escuro-mid); }

/* ===================================================================
   8. EDIÇÕES — TIMELINE
   =================================================================== */
.section-edicoes {
  background: linear-gradient(175deg, var(--marrom) 0%, var(--marrom-claro) 100%);
  padding: clamp(48px, 4.6vw, 72px) 0;
}
.section-edicoes .section-head { margin-bottom: clamp(22px, 2.4vw, 32px); }
.deco-mapa           { width: 460px; top: 10%; right: -110px; --rot: 6deg; opacity: .07; }
.deco-edicoes-spiral { width: 340px; bottom: 4%; left: -110px; --rot: 20deg; opacity: .22; }

/* Duas linhas — 2013–2021 e a era Heróis Populares (2024 em diante).
   A continuidade entre elas vem das próprias barras: a primeira linha
   sangra até a borda direita da tela, a segunda entra pela esquerda —
   como se fosse uma única linha do tempo cortada em duas fileiras. */
.timeline-rows {
  display: flex;
  flex-direction: column;
}

.timeline:first-of-type { padding-bottom: 4px; }
.timeline:last-of-type { padding-top: 4px; }

.timeline:first-of-type .tl-item:last-child .tl-bar { right: -100vw; }
.timeline:last-of-type .tl-item:first-child .tl-bar { left: -100vw; }

/* Timeline horizontal em zigue-zague: cartão e ano alternam de lado
   da barra colorida — uma cor por edição, dentro da paleta da marca. */
.timeline {
  --tl-gap: clamp(8px, 1.3vw, 16px);
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: var(--tl-gap);
  padding: 8px 4px 24px;
  overflow-y: visible;
}

.tl-item {
  display: grid;
  grid-row: 1 / span 3;
  grid-template-rows: subgrid;
  position: relative;
  min-width: 0;
}

.tl-item:nth-child(odd)  > .tl-card { grid-row: 1; align-self: end;   margin-bottom: 18px; }
.tl-item:nth-child(odd)  > .tl-year { grid-row: 3; align-self: start; margin-top: 14px; }
.tl-item:nth-child(even) > .tl-year { grid-row: 1; align-self: end;   margin-bottom: 14px; }
.tl-item:nth-child(even) > .tl-card { grid-row: 3; align-self: start; margin-top: 18px; }

.tl-mid { grid-row: 2; position: relative; height: 26px; }
.tl-bar {
  position: absolute;
  left: calc(var(--tl-gap) / -2);
  right: calc(var(--tl-gap) / -2);
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  background: var(--tl-color, var(--amarelo));
  border-radius: 3px;
}
.tl-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--marrom);
  border: 3px solid var(--tl-color, var(--amarelo));
  z-index: 2;
  transition: transform .4s var(--ease);
}
.tl-item:hover .tl-dot { transform: translate(-50%, -50%) scale(1.3); }

/* Cores por edição, dentro da paleta da marca */
.tl-item:nth-child(4n+1) { --tl-color: var(--laranja); }
.tl-item:nth-child(4n+2) { --tl-color: var(--petroleo); }
.tl-item:nth-child(4n+3) { --tl-color: var(--ferrugem); }
.tl-item:nth-child(4n)   { --tl-color: var(--laranja-claro); }

.tl-card {
  min-width: 0;
  text-align: center;
  padding: 20px 14px;
  background: rgba(245, 235, 216, .055);
  border: 1px solid rgba(245, 235, 216, .14);
  border-radius: 18px;
  transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.tl-card:hover {
  transform: translateY(-5px);
  background: rgba(245, 235, 216, .09);
  border-color: rgba(243, 189, 62, .4);
}

.tl-year {
  display: block;
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.8vw, 1.7rem);
  line-height: 1;
  color: var(--creme);
  text-shadow: 0 4px 14px rgba(24, 10, 6, .5);
}
.tl-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(220, 96, 18, .2);
  color: var(--laranja-claro);
  border: 1px solid rgba(220, 96, 18, .45);
}
.tl-tag-now {
  background: var(--amarelo);
  color: var(--marrom);
  border-color: var(--amarelo);
}
.tl-title {
  overflow-wrap: break-word;
  font-size: clamp(.92rem, 1.3vw, 1.12rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--creme);
}
.tl-title em { color: var(--amarelo); font-style: normal; }
.tl-meta { margin-top: 8px; }
.tl-when {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--laranja-claro);
}
.tl-place {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--txt-claro-mid);
}
/* Edição atual em destaque */
.tl-current { --tl-color: var(--amarelo); }
.tl-current > .tl-card {
  background: rgba(243, 189, 62, .1);
  border-color: rgba(243, 189, 62, .5);
}
.tl-current .tl-dot {
  background: var(--amarelo);
  box-shadow: 0 0 0 6px rgba(243, 189, 62, .18);
}

/* ===================================================================
   9. TROFÉU SANKOFA
   =================================================================== */
.section-sankofa {
  background: linear-gradient(165deg, var(--marrom-claro) 0%, var(--marrom) 100%);
  text-align: left;
}

.sankofa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 30vw, 460px);
  gap: clamp(6px, 1vw, 14px);
  align-items: center;
}

.sankofa-text {
  max-width: 62ch;
  text-align: left;
}
.sankofa-text p { color: var(--txt-claro-mid); }
.sankofa-text p + p { margin-top: 22px; }

/* Troféu ao lado do texto */
.sankofa-figura {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
}
.sankofa-figura img {
  position: relative;
  width: 100%;
  max-width: 426px;
  height: auto;
}

/* ===================================================================
   10. HERÓIS E HEROÍNAS
   =================================================================== */
.section-herois { background: var(--creme); }
.deco-herois-arruda { width: 300px; top: 4%; left: -90px; --rot: -10deg; opacity: .26; }

.title-years {
  display: block;
  margin-top: 6px;
  font-size: .5em;
  color: var(--laranja);
  letter-spacing: 0;
}

.herois-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
.herois-top .section-head { margin-bottom: clamp(24px, 3vw, 38px); }

.herois-intro {
  font-size: clamp(1.1rem, 1.46vw, 1.23rem);
  color: var(--txt-escuro-mid);
}

.herois-filtros {
  margin: 42px 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filtro {
  padding: 11px 26px;
  border-radius: 999px;
  border: 2px solid rgba(70, 28, 20, .18);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marrom);
  transition: all .3s var(--ease);
}
.filtro:hover { border-color: var(--laranja); color: var(--laranja); }
.filtro.is-active {
  background: var(--marrom);
  border-color: var(--marrom);
  color: var(--creme);
}

.herois-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}

.heroi {
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.heroi.is-hidden { display: none; }

.heroi-card {
  position: relative;
  display: block;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(70, 28, 20, .08);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* Só o card que já tem foto é clicável e abre o modal */
.heroi-card.tem-foto { cursor: zoom-in; }
.heroi-card.tem-foto:hover,
.heroi-card.tem-foto:focus-visible {
  transform: translateY(-7px);
  box-shadow: 0 20px 40px rgba(70, 28, 20, .16);
}

.heroi-foto {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: linear-gradient(160deg, #e8dcc4 0%, #d9c9aa 100%);
}
.heroi-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.heroi-card.tem-foto:hover .heroi-foto img { transform: scale(1.06); }

/* Placeholder enquanto as fotos não são enviadas */
.heroi-foto.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.heroi-foto.is-placeholder::before {
  content: '';
  width: 62%;
  aspect-ratio: 1;
  background: url('../images/elem-espiral-laranja.svg') center / contain no-repeat;
  opacity: .22;
}
.heroi-foto.is-placeholder::after {
  content: 'Foto em breve';
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(70, 28, 20, .38);
}

.heroi-ano {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--marrom);
  color: var(--amarelo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}
.heroi-nome {
  padding: 16px 16px 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.32;
  color: var(--marrom);
  text-align: center;
}
.heroi-memoria {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(70, 28, 20, .55);
}

.herois-nota {
  margin-top: 34px;
  font-size: 15px;
  font-style: italic;
  color: rgba(70, 28, 20, .55);
}

/* ===================================================================
   11. PROGRAMAÇÃO
   =================================================================== */
.section-programacao {
  background: linear-gradient(185deg, var(--marrom-claro) 0%, var(--marrom) 100%);
}
.deco-prog-spiral { width: 420px; top: 8%; right: -140px; --rot: -16deg; opacity: .09; }
.deco-prog-tri    { width: 110px; bottom: 12%; left: 4%; --rot: 28deg; opacity: .2; }

.prog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
}
.prog-tab {
  display: flex;
  /* mesma largura para os três botões */
  flex: 1 1 0;
  max-width: 180px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  padding: 16px 30px;
  border-radius: 14px;
  border: 2px solid rgba(245, 235, 216, .2);
  color: var(--txt-claro-mid);
  transition: all .35s var(--ease);
}
.prog-tab:hover {
  border-color: rgba(243, 189, 62, .55);
  color: var(--creme);
  transform: translateY(-3px);
}
.prog-tab.is-active {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--marrom);
}
.tab-date {
  font-family: var(--f-display);
  font-size: .7rem;
  line-height: 1.1;
  letter-spacing: .03em;
}
.tab-day {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
}

/* A animação fica no .is-active para reiniciar a cada troca de aba */
.prog-painel.is-active { animation: fadeUp .55s var(--ease) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.prog-lista { display: grid; gap: 12px; }

.prog-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 24px 30px;
  background: rgba(245, 235, 216, .05);
  border: 1px solid rgba(245, 235, 216, .12);
  border-left: 3px solid rgba(243, 189, 62, .45);
  border-radius: 14px;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.prog-item:hover {
  background: rgba(245, 235, 216, .09);
  border-left-color: var(--amarelo);
  transform: translateX(5px);
}
.prog-destaque {
  background: rgba(243, 189, 62, .1);
  border-left-color: var(--laranja);
}

.prog-hora {
  display: flex;
  flex-direction: column;
  font-family: var(--f-display);
  font-size: .72rem;
  line-height: 1.1;
  letter-spacing: .03em;
  color: var(--amarelo);
}
.prog-hora small {
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-claro-soft);
  margin-top: 3px;
}

.prog-titulo {
  font-size: clamp(1.1rem, 1.51vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--creme);
}
.prog-titulo em { font-style: italic; color: var(--amarelo); font-weight: 500; }
.prog-com {
  margin-top: 7px;
  font-size: 16px;
  color: var(--txt-claro-mid);
}
.prog-local {
  margin-top: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--laranja-claro);
}

/* ===================================================================
   12. SIGA-NOS
   =================================================================== */
.section-siga { background: var(--preto); }
.deco-siga-espada { width: clamp(130px, 16vw, 250px); bottom: 0; right: 3%; opacity: .3; --rot: 6deg; }

.siga-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.siga-card {
  /* ícone e login lado a lado — cartão baixo, sem o nome da rede */
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(245, 235, 216, .045);
  border: 1px solid rgba(245, 235, 216, .13);
  color: var(--creme);
  transition: transform .4s var(--ease), background .4s var(--ease),
              border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.siga-card:hover {
  transform: translateY(-8px);
  background: rgba(243, 189, 62, .09);
  border-color: rgba(243, 189, 62, .5);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .3);
}
.siga-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--amarelo);
  transition: transform .4s var(--ease);
}
.siga-card:hover .siga-icon { transform: scale(1.12) rotate(-6deg); }
.siga-user {
  font-size: 17px;
  font-weight: 500;
  color: var(--txt-claro);
}

/* ===================================================================
   13. RÉGUA DE MARCAS
   =================================================================== */
.regua-marcas {
  background: var(--preto);
  padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 100px);
  text-align: center;
}
.regua-marcas .container { max-width: none; padding-inline: 0; }
.regua-img {
  width: 80vw;
  max-width: 80vw;
  height: auto;
  margin-inline: auto;
}
.regua-img.regua-img-compacta {
  width: 40vw;
  max-width: 40vw;
}

/* ===================================================================
   14. RODAPÉ
   =================================================================== */
.site-footer { background: #1a1616; color: var(--txt-claro-mid); }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 54px;
  padding-block: clamp(56px, 6vw, 86px);
}
.footer-brand img { width: min(250px, 100%); }
.footer-logo-branco { display: none; }
.footer-info h3,
.footer-nav h3 {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amarelo);
}
.footer-info p { font-size: 16px; }
.footer-info p + p { margin-top: 10px; }
.footer-free {
  display: inline-block;
  margin-top: 16px !important;
  padding: 7px 18px;
  border: 1px solid rgba(243, 189, 62, .45);
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amarelo);
}
.footer-nav ul { display: grid; gap: 10px; }
.footer-nav a {
  font-size: 16px;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.footer-nav a:hover { color: var(--amarelo); padding-left: 6px; }

.footer-bottom { border-top: 1px solid rgba(245, 235, 216, .1); }
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding-block: 26px;
  font-size: 15px;
}
.footer-socials { display: flex; gap: 24px; }
.footer-socials a { transition: color .3s var(--ease); }
.footer-socials a:hover { color: var(--amarelo); }

/* Voltar ao topo */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 80;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amarelo);
  color: var(--marrom);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .26);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all .38s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--laranja); color: var(--creme); transform: translateY(-3px); }
.to-top svg { width: 22px; height: 22px; }

/* ===================================================================
   15. MODAL DE FOTO (Heróis e Heroínas)
   =================================================================== */
.modal-foto {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(24, 10, 6, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  cursor: zoom-out;
  transition: opacity .35s var(--ease);
}
/* Precisa vencer o display:grid da regra acima */
.modal-foto[hidden] { display: none; }
.modal-foto.is-open { opacity: 1; }

.modal-conteudo {
  max-width: min(540px, 100%);
  text-align: center;
  transform: scale(.94) translateY(12px);
  transition: transform .4s var(--ease);
}
.modal-foto.is-open .modal-conteudo { transform: none; }

.modal-conteudo img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

.modal-legenda { margin-top: 18px; }
/* Mesma fonte e capitalização do nome no card, só que sobre fundo escuro */
.modal-legenda h3 {
  font-family: var(--f-body);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--creme);
}
.modal-legenda span {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--marrom);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.modal-fechar {
  position: absolute;
  top: clamp(12px, 2.5vw, 28px);
  right: clamp(12px, 2.5vw, 28px);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(245, 235, 216, .3);
  color: var(--creme);
  font-size: 26px;
  line-height: 1;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.modal-fechar:hover {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--marrom);
  transform: rotate(90deg);
}

/* ===================================================================
   16. RESPONSIVO
   =================================================================== */

/* ---- até 1280px: respeita o gutter ---- */
@media (max-width: 1320px) {
  :root { --gutter: 32px; }
}

/* ---- Tablet largo / notebook pequeno ---- */
@media (max-width: 1180px) {
  .herois-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- MENU MOBILE (drawer) ---- */
@media (max-width: 1120px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 95;
    width: min(360px, 86vw);
    height: 100dvh;
    padding: calc(var(--header-h) + 24px) 32px 40px;
    background: var(--marrom);
    box-shadow: -20px 0 60px rgba(0, 0, 0, .35);
    transform: translateX(105%);
    transition: transform .45s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .nav-link {
    padding: 16px 12px;
    font-size: 15px;
    border-bottom: 1px solid rgba(245, 235, 216, .1);
  }
  .nav-link::after { display: none; }
  .nav-link.is-active {
    background: rgba(243, 189, 62, .12);
    border-radius: 8px;
  }
}

/* ---- Tablet ---- */
@media (max-width: 980px) {
  :root { --header-h: 74px; }


  .sankofa-grid { grid-template-columns: 1fr; }
  .sankofa-figura { order: -1; }
  .sankofa-figura img { max-width: 276px; }

  /* 3 colunas evitam que o nome do homenageado quebre com o
     último termo sozinho na segunda linha */
  .herois-grid { grid-template-columns: repeat(3, 1fr); }

  .herois-top { grid-template-columns: 1fr; gap: 24px; }

  /* Timeline vira coluna única com trilho vertical à esquerda */
  .timeline {
    display: block;
    overflow-x: visible;
    padding: 4px 0 4px 30px;
  }
  .timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(243, 189, 62, .45) 8%,
      rgba(243, 189, 62, .45) 92%,
      transparent 100%);
  }
  .tl-item {
    display: block;
    position: relative;
    margin-bottom: 24px;
  }
  .tl-item::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 6px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--marrom);
    border: 3px solid var(--tl-color, var(--amarelo));
    z-index: 2;
  }
  .tl-current::before {
    background: var(--amarelo);
    box-shadow: 0 0 0 6px rgba(243, 189, 62, .18);
  }
  .tl-mid { display: none; }
  .tl-item:nth-child(odd)  > .tl-card,
  .tl-item:nth-child(even) > .tl-card {
    text-align: left;
    margin: 0 0 10px;
  }
  .tl-item:nth-child(odd)  > .tl-year,
  .tl-item:nth-child(even) > .tl-year {
    text-align: left;
    margin: 0 0 8px;
  }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }

  .siga-grid { grid-template-columns: 1fr; }

  .hero-art-left { display: none; }
  .hero-art-right { width: 46vw; right: 0; margin-bottom: 0; --center-x: 0; opacity: .55; }
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  body { font-size: 17px; }

  .section { padding: 72px 0; }

  /* Títulos curtos de duas palavras cabem em uma linha só.
     +40% a pedido (era clamp(.74rem, 3.81vw, 1.17rem)). */
  .section-title { font-size: clamp(1.04rem, 5.33vw, 1.64rem); }
  .section-sub   { font-size: clamp(1.54rem, 1.96vw, 1.79rem); }

  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-top: calc(var(--header-h) + 56px);
    padding-bottom: clamp(110px, 22vw, 160px);
  }
  .hero-dates { margin-top: 20px; }

  /* Marca maior e decorativos empurrados para as bordas, fora do texto */
  .hero-logo { width: min(84vw, 380px); }
  .deco-tri-1 { width: 100px; top: 5%; right: -14%; }

  /* Atabaque à esquerda e berimbau à direita, coladas na base —
     padding-bottom acima escala junto pra abrir espaço suficiente e
     elas não pisarem no botão */
  .hero-art {
    bottom: 1.5em;
  }
  .hero-art-left {
    display: block;
    --center-x: 0;
    bottom: -0.5em;
    width: clamp(75px, 22.5vw, 115px);
    opacity: .7;
    margin-left: 1em;
  }
  .hero-art-right {
    display: block;
    right: 0;
    margin-bottom: 0;
    margin-right: 2em;
    --center-x: 0;
    width: clamp(65px, 20vw, 100px);
    opacity: .6;
  }

  /* largura total da composição = 110vw (4w - 3g, w=32vw, g=6vw),
     sangrando 5vw pra fora da tela de cada lado */
  .hero-photos { margin-bottom: 18px; }
  .hero-foto { width: 32vw; border-radius: 3px; }
  .hero-foto-1 { transform: rotate(-10deg) translateY(10px); z-index: 1; }
  .hero-foto-2 { margin-left: -6vw; transform: rotate(-3deg) translateY(-4px); z-index: 3; position: relative; }
  .hero-foto-3 { margin-left: -6vw; transform: rotate(4deg) translateY(-3px); z-index: 3; position: relative; }
  .hero-foto-4 { margin-left: -6vw; transform: rotate(10deg) translateY(12px); z-index: 1; }

  .herois-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Seletor de anos ocupa a largura da tela em uma única linha */
  .herois-filtros { margin: 26px 0 24px; gap: 6px; flex-wrap: nowrap; }
  .filtro {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 4px;
    font-size: 11px;
    letter-spacing: .06em;
    text-align: center;
  }

  .prog-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 22px;
  }
  .prog-hora { flex-direction: row; align-items: baseline; gap: 10px; }
  .prog-hora small { margin-top: 0; }

  /* três abas em uma linha só */
  .prog-tabs { gap: 6px; flex-wrap: nowrap; }
  .prog-tab { max-width: none; min-width: 0; padding: 11px 6px; }
  .tab-date { font-size: .78rem; }
  .tab-day { font-size: 9px; letter-spacing: .05em; }

  .tl-card { padding: 24px 22px; }
  .siga-card { padding: 16px 20px; }

  /* Rodapé centralizado e mais compacto, com a marca branca e menor */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-block: 36px;
    text-align: center;
  }
  .footer-brand .footer-logo-cor { display: none; }
  .footer-brand .footer-logo-branco { display: block; width: 150px; margin-inline: auto; }
  .footer-info h3,
  .footer-nav h3 { margin-bottom: 12px; }
  .footer-info p + p { margin-top: 8px; }
  .footer-free { margin-top: 12px !important; }
  .footer-nav ul { gap: 8px; }
  .footer-nav a:hover { padding-left: 0; }

  /* régua ocupando 98% da largura da tela */
  .regua-img,
  .regua-img.regua-img-compacta { width: 98vw; max-width: 98vw; }

  .footer-bottom .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding-block: 16px;
  }
  .footer-socials { justify-content: center; }

  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }

  /* Decorativos pesados saem em telas pequenas */
  .deco-sobre-folha,
  .deco-herois-arruda,
  .deco-siga-espada,
  .deco-buzio-2 { display: none; }
}

@media (max-width: 420px) {
  /* Mantém 2 fotos por linha: encolhe o card em vez de reduzir a grade */
  .herois-grid { gap: 10px; }
  .heroi-nome  { padding: 12px 9px 15px; font-size: 13.5px; line-height: 1.28; }
  .heroi-ano   { top: 8px; left: 8px; padding: 4px 10px; font-size: 10px; }
  .heroi-foto.is-placeholder::after { font-size: 9.5px; bottom: 10px; }

  .hero-art-left { opacity: .55; }
  .hero-art-right { opacity: .45; }
}

/* ===================================================================
   17. ACESSIBILIDADE — MOVIMENTO REDUZIDO
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .deco, .hero-art { transform: none !important; }
}

/* ===================================================================
   17. TEMA CLARO — INDEX2 (beges como fundo, cores como destaque)
   Aplicado só via body.tema-bege — não afeta o index.html.
   Header e hero ficam como estão (a logo só existe em amarelo/branco/
   preto, sem versão pensada pra ficar sobre bege claro).
   =================================================================== */
body.tema-bege {
  --bege-1:    #faf4f1;   /* creme mais claro — fundo base */
  --bege-2:    #daab8b;   /* bege mais escuro — alterna com o creme */
  --vinho:     #761f2e;
  --azul:      #0696d9;
  --vermelho:  #e41f25;
  --verde:     #33a848;
  --terracota: #a03029;
  background: var(--bege-1);
}

/* -- home / hero -- */
body.tema-bege .hero {
  background: var(--bege-2);
}
/* vinheta escura sobre a foto de capa, pra marca em branco ficar legível */
body.tema-bege .hero::after {
  background: radial-gradient(70% 60% at 50% 42%, rgba(15, 8, 4, .62) 0%, rgba(10, 5, 3, .8) 100%);
}
body.tema-bege .hero-logo {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 1px 3px rgba(0, 0, 0, .7))
    drop-shadow(0 14px 36px rgba(0, 0, 0, .5));
  width: clamp(210px, 33.7vw, 473px);
}
/* o petróleo da marca nova fica pouco visível sobre o rodapé quase preto */
body.tema-bege .footer-logo-cor,
body.tema-bege .footer-logo-branco { filter: brightness(1.6); }

/* -- header: sobre a foto de capa (topo) o menu fica claro; assim que
   "gruda" (.is-stuck) o fundo fica claro e o menu passa a ficar escuro -- */
body.tema-bege .site-header.is-stuck {
  background: rgba(250, 244, 241, .92);
  box-shadow: 0 8px 24px rgba(118, 31, 46, .1);
}
body.tema-bege .nav-link { color: var(--txt-claro); }
body.tema-bege .nav-link:hover,
body.tema-bege .nav-link.is-active { color: var(--amarelo); }
body.tema-bege .nav-link::after { background: var(--amarelo); }
body.tema-bege .nav-toggle span { background: var(--txt-claro); }
body.tema-bege .brand img {
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
  transition: filter .4s var(--ease);
}

body.tema-bege .site-header.is-stuck .nav-link { color: var(--vinho); }
body.tema-bege .site-header.is-stuck .nav-link:hover,
body.tema-bege .site-header.is-stuck .nav-link.is-active { color: var(--terracota); }
body.tema-bege .site-header.is-stuck .nav-link::after { background: var(--terracota); }
body.tema-bege .site-header.is-stuck .nav-toggle span { background: var(--vinho); }
body.tema-bege .site-header.is-stuck .brand img { filter: none; }

body.tema-bege .scroll-progress { background: linear-gradient(90deg, var(--terracota), var(--vermelho)); }

body.tema-bege .section-sobre { background: var(--bege-1); }

/* -- eyebrow / título / subtítulo das seções que eram escuras -- */
body.tema-bege .section-edicoes .eyebrow,
body.tema-bege .section-sankofa .eyebrow,
body.tema-bege .section-siga .eyebrow { color: var(--terracota); }
body.tema-bege .section-edicoes .eyebrow::before,
body.tema-bege .section-sankofa .eyebrow::before,
body.tema-bege .section-siga .eyebrow::before { background: var(--terracota); }
body.tema-bege .section-edicoes .section-title,
body.tema-bege .section-sankofa .section-title,
body.tema-bege .section-siga .section-title { color: var(--vinho); }
body.tema-bege .section-edicoes .section-sub,
body.tema-bege .section-sankofa .section-sub,
body.tema-bege .section-siga .section-sub { color: var(--txt-escuro-mid); }

/* -- edições / linha do tempo -- */
body.tema-bege .section-edicoes { background: var(--bege-2); }

/* uma cor por edição, ciclando pelas 5 cores de destaque */
body.tema-bege .tl-item:nth-child(5n+1) { --tl-color: var(--vinho); }
body.tema-bege .tl-item:nth-child(5n+2) { --tl-color: var(--azul); }
body.tema-bege .tl-item:nth-child(5n+3) { --tl-color: var(--vermelho); }
body.tema-bege .tl-item:nth-child(5n+4) { --tl-color: var(--verde); }
body.tema-bege .tl-item:nth-child(5n)   { --tl-color: var(--terracota); }

body.tema-bege .tl-card {
  background: #fff;
  border: 1px solid rgba(118, 31, 46, .14);
  box-shadow: 0 4px 16px rgba(118, 31, 46, .06);
}
body.tema-bege .tl-card:hover {
  background: var(--bege-1);
  border-color: var(--tl-color);
  box-shadow: 0 10px 26px rgba(118, 31, 46, .12);
}
body.tema-bege .tl-dot { background: var(--vinho); }
body.tema-bege .tl-year { color: var(--vinho); text-shadow: none; }
body.tema-bege .tl-title { color: var(--txt-escuro); }
body.tema-bege .tl-title em { color: var(--terracota); }
body.tema-bege .tl-when { color: var(--tl-color, var(--terracota)); }
body.tema-bege .tl-place { color: var(--txt-escuro-mid); }
body.tema-bege .tl-tag {
  background: color-mix(in srgb, var(--tl-color, var(--terracota)) 14%, white);
  color: var(--tl-color, var(--terracota));
  border-color: color-mix(in srgb, var(--tl-color, var(--terracota)) 45%, white);
}
body.tema-bege .tl-tag-now {
  background: var(--vermelho);
  color: #fff;
  border-color: var(--vermelho);
}
/* edição atual (8ª) em vermelho, fora do ciclo, pra saltar aos olhos */
body.tema-bege .tl-current { --tl-color: var(--vermelho); }
body.tema-bege .tl-current > .tl-card {
  background: color-mix(in srgb, var(--vermelho) 8%, white);
  border-color: var(--vermelho);
}
body.tema-bege .tl-current .tl-dot {
  background: var(--vermelho);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--vermelho) 18%, transparent);
}

/* -- sankofa -- */
body.tema-bege .section-sankofa { background: var(--bege-1); }
body.tema-bege .sankofa-text p { color: var(--txt-escuro-mid); }

/* -- heróis e heroínas -- */
body.tema-bege .section-herois { background: var(--bege-2); }
body.tema-bege .filtro { border-color: rgba(118, 31, 46, .22); color: var(--vinho); }
body.tema-bege .filtro:hover { border-color: var(--terracota); color: var(--terracota); }
body.tema-bege .filtro.is-active { background: var(--vinho); border-color: var(--vinho); color: #fff; }
body.tema-bege .heroi-ano { background: var(--vinho); }

/* -- siga-nos: um destaque por rede -- */
body.tema-bege .section-siga { background: var(--bege-1); }
body.tema-bege .siga-grid li:nth-child(1) { --siga-cor: var(--terracota); } /* Instagram */
body.tema-bege .siga-grid li:nth-child(2) { --siga-cor: var(--azul); }      /* Facebook */
body.tema-bege .siga-grid li:nth-child(3) { --siga-cor: var(--vermelho); }  /* YouTube */
body.tema-bege .siga-card {
  background: #fff;
  border: 1px solid rgba(118, 31, 46, .12);
  color: var(--txt-escuro);
}
body.tema-bege .siga-card:hover {
  background: color-mix(in srgb, var(--siga-cor, var(--vinho)) 8%, white);
  border-color: var(--siga-cor, var(--vinho));
  box-shadow: 0 16px 34px rgba(118, 31, 46, .12);
}
body.tema-bege .siga-icon { color: var(--siga-cor, var(--vinho)); }
body.tema-bege .siga-user { color: var(--txt-escuro); }

@media (max-width: 980px) {
  /* trilho e pontos da linha do tempo em coluna única (mobile) */
  body.tema-bege .timeline::before {
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(118, 31, 46, .35) 8%,
      rgba(118, 31, 46, .35) 92%,
      transparent 100%);
  }
  body.tema-bege .tl-item::before { background: var(--vinho); }
  body.tema-bege .tl-current::before {
    background: var(--vermelho);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--vermelho) 18%, transparent);
  }
}

/* ===================================================================
   18. IMPRESSÃO
   =================================================================== */
@media print {
  .site-header, .to-top, .deco, .hero-art, .nav-backdrop { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 24px 0; break-inside: avoid; }
  .prog-painel { display: block !important; }
}