/* ============================================================
   HISTÓRIA DA CT&I NA MARINHA (historia.html e historia-<id>.html)
   Contrato: DESIGN.md (exceções da História). Usa os tokens de
   assets/style.css. Sem cor própria por era; ouro só como acento,
   brilho só na ponta da régua de anos.
   ============================================================ */

.pagina-historia { --regua-h: 52px; }

/* ---------- Abertura ---------- */
.hist-abertura {
  position: relative;
  min-height: min(100vh, 900px);
  display: flex;
  align-items: flex-end;
  padding: 140px 0 56px;
  overflow: hidden;
  isolation: isolate;
}

.abertura-fundo { position: absolute; inset: 0; z-index: -1; }
.abertura-fundo picture, .abertura-fundo img { width: 100%; height: 100%; }
.abertura-fundo img { object-fit: cover; object-position: 60% 40%; filter: brightness(1.6) contrast(1.1); }

.abertura-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 13, 42, .3) 0%, rgba(5, 13, 42, .05) 35%, rgba(5, 13, 42, .8) 82%, var(--bg) 100%),
    linear-gradient(90deg, rgba(5, 13, 42, .88) 0%, rgba(5, 13, 42, .5) 45%, rgba(5, 13, 42, 0) 75%);
}

@media (prefers-reduced-motion: no-preference) {
  .abertura-fundo img { animation: hist-deriva 20s var(--ease-out) both; }
  .sem-movimento .abertura-fundo img { animation: none; }
}

@keyframes hist-deriva { from { transform: scale(1.04); } to { transform: scale(1); } }

.abertura-inner { position: relative; width: 100%; }

.hist-abertura h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.015em;
  text-transform: uppercase;
  max-width: 14ch;
  text-wrap: balance;
}

.hist-abertura h1 .h1-2 { display: block; color: var(--text-faint); }

.abertura-lead {
  margin-top: 24px;
  max-width: 58ch;
  font-size: 1.0625rem;
  color: var(--text-dim);
}

.abertura-stats {
  display: flex;
  flex-wrap: wrap;
  margin: 32px 0 36px;
  border-top: 1px solid var(--line-strong);
}

.abertura-stats > div { padding: 14px 32px 0 0; margin-right: 32px; border-right: 1px solid var(--line); }
.abertura-stats > div:last-child { border-right: 0; }

.abertura-stats dt {
  order: 2;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.abertura-stats > div { display: flex; flex-direction: column-reverse; gap: 4px; }

.abertura-stats dd {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
  font-feature-settings: "tnum" 1;
}

.abertura-credito {
  margin-top: 40px;
  max-width: 70ch;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: .02em;
}

.abertura-credito a { color: var(--text-dim); }

/* ---------- Régua de anos (sticky sob a barra superior) ---------- */
.hist-regua {
  position: sticky;
  top: 72px;
  z-index: 50;
  height: var(--regua-h);
  background: rgba(5, 13, 42, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.regua-inner {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 20px;
  height: 100%;
}

.regua-atual { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regua-fim { color: var(--text-faint); }

.regua-trilho { position: relative; height: 100%; }

.regua-ticks { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 1px solid var(--line-strong); }
.regua-ticks span { position: absolute; left: var(--p); top: -3px; width: 1px; height: 6px; background: var(--line-strong); }
.regua-ticks span.t50 { top: -6px; height: 12px; background: rgba(210, 225, 255, .35); }

@media (prefers-reduced-motion: no-preference) {
  .regua-ticks { transform-origin: left; animation: hist-regua-entra 1.2s var(--ease-out) both; }
}

@keyframes hist-regua-entra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.regua-fill {
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  height: 2px;
  width: var(--progresso, 0%);
  background: var(--accent);
}

/* A ponta acesa: o único brilho da página */
.regua-ponta {
  position: absolute;
  right: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(250, 185, 50, .18), 0 0 14px 2px rgba(250, 185, 50, .55);
}

.regua-eras { list-style: none; position: absolute; inset: 0; }

.regua-eras li {
  position: absolute;
  left: var(--ini);
  width: calc(var(--fim) - var(--ini));
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--line-strong);
}

.regua-eras a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 0 0 6px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--text-faint);
  font-feature-settings: "tnum" 1;
}

.regua-eras a:hover, .regua-eras a[aria-current="true"] { color: var(--text); }
.regua-eras a[aria-current="true"] .regua-n { color: var(--accent); }
.regua-n { font-weight: 600; }
.regua-ano { opacity: .9; }

/* As eras recentes são estreitas na escala real: escondo o ano e deixo o número */
@media (max-width: 1280px) { .regua-eras li:nth-last-child(-n+4) .regua-ano { display: none; } }

@media (max-width: 760px) {
  .pagina-historia { --regua-h: 40px; }
  .regua-inner { grid-template-columns: 1fr auto; gap: 12px; }
  .regua-trilho { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; top: auto; }
  .regua-ticks, .regua-eras { display: none; }
  .regua-fill { top: 0; height: 3px; }
  .regua-ponta { display: none; }
}

/* ---------- Índice das eras ---------- */
.indice-eras { list-style: none; border-top: 1px solid var(--line-strong); }

.indice-eras a {
  display: grid;
  grid-template-columns: 56px 130px minmax(0, 1.1fr) minmax(0, 1.4fr) 20px;
  gap: 8px 28px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .2s var(--ease-out);
}

.indice-eras a:hover { background: linear-gradient(90deg, rgba(250, 185, 50, .07), transparent 70%); }
.indice-eras a:hover svg { transform: translateX(5px); color: var(--accent); }
.indice-eras svg { color: var(--text-faint); transition: transform .2s var(--ease-out), color .2s; align-self: center; }

.ind-n { color: var(--accent); }
.ind-anos { color: var(--text-dim); font-feature-settings: "tnum" 1; }
.ind-titulo { font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--text); }
.ind-lead { font-size: .9375rem; color: var(--text-faint); line-height: 1.55; }

@media (max-width: 980px) {
  .indice-eras a { grid-template-columns: 44px minmax(0, 1fr) 20px; }
  .ind-anos { grid-column: 2; grid-row: 1; }
  .ind-titulo { grid-column: 2; }
  .ind-lead { grid-column: 2; }
  .indice-eras svg { grid-column: 3; grid-row: 1 / span 3; }
}

/* ---------- Era ---------- */
.hist-era { position: relative; padding-bottom: clamp(64px, 9vh, 104px); border-top: 1px solid var(--line); scroll-margin-top: calc(72px + var(--regua-h)); }
.hist-era.fundo-navy { background: var(--bg-2); }
.hist-era.fundo-navy .hist-figura, .hist-era.fundo-navy .cena { background: var(--bg-2); }

.era-abertura {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 11vh, 128px) 0 clamp(40px, 6vh, 64px);
}

.era-traco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.era-traco g { fill: none; stroke: #d2e1ff; stroke-width: 1; opacity: .06; vector-effect: non-scaling-stroke; }
.era-traco path, .era-traco circle { vector-effect: non-scaling-stroke; }

.era-abertura .container { position: relative; }

.era-rotulo { color: var(--accent); display: flex; gap: 14px; align-items: center; }
.era-rotulo span { color: var(--text-dim); }
.era-rotulo::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.era-ano {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 13vw, 11rem);
  line-height: .82;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(210, 225, 255, .28);
  font-feature-settings: "tnum" 1;
  user-select: none;
}

.era-titulo {
  margin-top: -.15em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-transform: uppercase;
  max-width: 22ch;
  text-wrap: balance;
}

.era-lead { margin-top: 18px; max-width: 60ch; font-size: 1.125rem; line-height: 1.6; color: var(--text-dim); }

.era-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(48px, 7vh, 80px);
}

.era-corpo.sem-figura { grid-template-columns: minmax(0, 720px); }

.era-texto p { font-size: 1.0625rem; line-height: 1.7; color: var(--text-dim); max-width: 64ch; }
.era-texto p + p { margin-top: 1em; }
.era-porque { margin-top: 1.4em !important; padding-left: 18px; border-left: 2px solid var(--accent); color: var(--text) !important; }
.era-porque strong { font-weight: 700; }

@media (max-width: 1020px) { .era-corpo { grid-template-columns: 1fr; } }

/* ---------- Figura e legenda ---------- */
.hist-figura { margin: 0; border: 1px solid var(--line-strong); background: var(--bg); }
.hist-figura picture, .hist-figura img { display: block; width: 100%; height: auto; }
.hist-figura figcaption { display: grid; gap: 6px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.hist-legenda { font-size: .875rem; line-height: 1.5; color: var(--text-dim); }

.hist-credito {
  color: var(--text-faint);
  font-size: .6875rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: .03em;
}

.hist-credito a { color: var(--text-dim); text-underline-offset: 3px; }
.hist-tratada { white-space: nowrap; }
.hist-tratada::before { content: "/ "; }

/* ---------- Subtítulos de bloco ---------- */
.era-sub {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}

.era-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Marcos ---------- */
.marcos {
  list-style: none;
  columns: 2;
  column-gap: clamp(32px, 4vw, 64px);
  margin-bottom: clamp(48px, 7vh, 80px);
}

@media (max-width: 980px) { .marcos { columns: 1; } }

.marco {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0 22px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(72px + var(--regua-h) + 16px);
}

.marco-ano {
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  color: var(--text-dim);
  padding-top: 3px;
  line-height: 1.35;
}

.marco.ancora { border-top-color: rgba(250, 185, 50, .45); }

.marco.ancora .marco-ano {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--accent);
  padding-top: 0;
}

.marco-titulo { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--text); text-wrap: balance; }
.marco.ancora .marco-titulo { font-size: 1.1875rem; }
.marco-texto { margin-top: 6px; font-size: .9375rem; line-height: 1.6; color: var(--text-dim); }
.marco .hist-figura { margin-top: 14px; }

.marco-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; align-items: center; }

.tema {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
}

.marco.nuclear .tema:first-child { border-color: rgba(250, 185, 50, .4); }

.marco-icts { display: inline-flex; gap: 10px; }
.marco-icts a, .marco-proj a {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(250, 185, 50, .6);
  text-underline-offset: 3px;
}

.marco-icts a:hover, .marco-proj a:hover { color: var(--accent); }
.marco-proj { margin-top: 8px; font-size: .875rem; color: var(--text-dim); }
.marco-proj .mono { color: var(--text-faint); margin-right: 6px; }

.hist-fontes { margin-top: 10px; font-size: .8125rem; line-height: 1.5; color: var(--text-faint); overflow-wrap: anywhere; }
.hist-fontes .mono { font-size: .6875rem; margin-right: 6px; color: var(--text-faint); }
.hist-fontes a { color: var(--text-faint); text-underline-offset: 3px; text-decoration-color: rgba(210, 225, 255, .3); }
.hist-fontes a:hover { color: var(--accent); text-decoration-color: currentColor; }

@media (max-width: 560px) {
  .marco { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Citação (colchetes de canto em ouro) ---------- */
.citacao {
  position: relative;
  margin: 0 0 clamp(48px, 7vh, 80px);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
  max-width: 940px;
}

.citacao::before, .citacao::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--accent);
}

.citacao::before { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.citacao::after { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.citacao blockquote p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.35;
  color: var(--text);
  text-wrap: pretty;
}

.citacao blockquote p::before { content: "\201C"; }
.citacao blockquote p::after { content: "\201D"; }
.citacao blockquote .citacao-original { margin-top: 10px; font-size: 1rem; font-weight: 400; color: var(--text-faint); }

.citacao figcaption { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-top: 20px; font-size: .875rem; color: var(--text-dim); }
.citacao-autor { font-weight: 600; color: var(--text); }
.citacao-rotulo { padding: 2px 8px; border: 1px solid var(--line-strong); color: var(--text-dim); font-size: .6875rem; }
.citacao-contexto { flex-basis: 100%; color: var(--text-faint); }
.citacao-fonte { color: var(--text-faint); text-underline-offset: 3px; overflow-wrap: anywhere; }
.citacao-fonte:hover { color: var(--accent); }

.citacao-explica { font-size: .8125rem; color: var(--text-faint); max-width: 80ch; margin-bottom: 28px; }

/* ---------- Cenas (diagramas e mapas) ---------- */
.cena {
  margin: 0 0 clamp(48px, 7vh, 80px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-strong);
  background: var(--bg);
}

.cena-cab { display: grid; gap: 10px; margin-bottom: 28px; max-width: 72ch; }
.cena-titulo { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; color: var(--text); }
.cena-texto { font-size: .9375rem; color: var(--text-dim); line-height: 1.6; }
.cena-fontes { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); }

.lin-ano { font-family: var(--font-mono); font-size: .8125rem; font-feature-settings: "tnum" 1; color: var(--accent); }
.lin-nome { font-weight: 600; font-size: .9375rem; line-height: 1.3; color: var(--text); }
.lin-nome a { color: inherit; text-decoration-color: rgba(250, 185, 50, .6); text-underline-offset: 3px; }
.lin-nota { font-size: .8125rem; line-height: 1.45; color: var(--text-faint); }

/* Linhagem: nós ligados por uma linha */
.linhagem { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }

.linhagem li { position: relative; display: grid; align-content: start; gap: 6px; padding: 28px 18px 0 0; }

.linhagem li::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 8px;
  height: 1px;
  background: var(--line-strong);
}

.linhagem li::after {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 9px; height: 9px;
  background: var(--bg);
  border: 1px solid var(--text-dim);
}

.linhagem li.atual::after { background: var(--accent); border-color: var(--accent); }
.linhagem li:last-child::before { right: 50%; }

@media (max-width: 860px) {
  .linhagem { grid-template-columns: 1fr; }
  .linhagem li { padding: 0 0 22px 28px; }
  .linhagem li::before { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .linhagem li:last-child::before { bottom: auto; height: 10px; }
  .linhagem li::after { top: 3px; }
}

/* Cadeia das fragatas: origem e três ramos */
.cadeia { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 0 40px; align-items: stretch; }

.cadeia-origem {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  background: rgba(250, 185, 50, .04);
}

.cadeia-ramos { list-style: none; display: grid; gap: 14px; position: relative; padding-left: 28px; border-left: 1px solid var(--line-strong); }

.cadeia-ramos > li { position: relative; }
.cadeia-ramos > li::before { content: ""; position: absolute; left: -28px; top: 22px; width: 22px; height: 1px; background: var(--line-strong); }

.ramo { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }

.ramo li {
  position: relative;
  flex: 1 1 180px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
}

.ramo li + li::before {
  content: "";
  position: absolute;
  left: -10px; top: 22px;
  width: 10px; height: 1px;
  background: var(--line-strong);
}

@media (max-width: 860px) {
  .cadeia { grid-template-columns: 1fr; gap: 18px; }
  .ramo { flex-direction: column; }
  .ramo li + li::before { left: 18px; top: -10px; width: 1px; height: 10px; }
}

/* Ciclo do combustível */
.ciclo { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ciclo li { display: grid; align-content: start; gap: 6px; padding: 16px 14px 18px; background: var(--bg); }
.hist-era.fundo-navy .ciclo li { background: var(--bg-2); }
.ciclo li.destaque { box-shadow: inset 0 2px 0 var(--accent); background: linear-gradient(180deg, rgba(250, 185, 50, .08), transparent 70%), var(--bg); }
.ciclo-n { color: var(--text-faint); }
.ciclo li.destaque .ciclo-n { color: var(--accent); }

.ciclo-marinha { margin-top: 6px; justify-self: start; padding: 2px 6px; border: 1px solid rgba(250, 185, 50, .45); color: var(--text); font-size: .625rem; letter-spacing: .06em; }

@media (max-width: 1100px) { .ciclo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ciclo { grid-template-columns: 1fr 1fr; } }

.teor-bloco { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 20px 40px; align-items: center; }
@media (max-width: 900px) { .teor-bloco { grid-template-columns: 1fr; } }

.teor { width: 100%; height: auto; overflow: visible; }
.teor-trilho { stroke: var(--line-strong); stroke-width: 16; }
.teor-faixa { fill: rgba(250, 185, 50, .35); }
.teor-natural { fill: var(--accent); }
.teor-base { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.eixo-tick path { stroke: var(--line-strong); }
.eixo-tick text, .prev-hoje-t, .prev-rot, .degrau-ano { fill: var(--text-faint); font-family: var(--font-mono); font-size: 12px; text-anchor: middle; font-feature-settings: "tnum" 1; }
.prev-rot { text-anchor: start; fill: var(--text-dim); }
.prev-hoje-t { text-anchor: start; }

.teor-legenda { list-style: none; display: grid; gap: 8px; font-size: .875rem; color: var(--text-dim); }
.teor-legenda li { display: flex; gap: 10px; align-items: center; }
.marca { flex: none; display: inline-block; width: 14px; height: 10px; }
.marca.natural, .marca.previsto { background: var(--accent); }
.marca.faixa { background: rgba(250, 185, 50, .35); }
.marca.anuncio { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); }
.marca.previsto { width: 12px; height: 12px; border-radius: 50%; }

/* Previsões do submarino nuclear */
.cena-previsoes .teor-legenda { display: flex; gap: 20px; margin-bottom: 8px; }
.previsoes { width: 100%; max-width: 820px; height: auto; display: block; overflow: visible; }
.prev-linha { stroke: rgba(250, 185, 50, .5); stroke-width: 2; }
.prev-anuncio { fill: var(--text-dim); }
.prev-previsto { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.hist-era.fundo-navy .prev-previsto { stroke: var(--bg-2); }
.prev-val { fill: var(--text); font-family: var(--font-mono); font-size: 13px; font-weight: 600; font-feature-settings: "tnum" 1; }
.prev-hoje { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.prev-lista { list-style: none; margin-top: 16px; display: grid; gap: 8px; font-size: .875rem; color: var(--text-dim); }
.prev-lista .mono { color: var(--text-faint); margin-right: 6px; }
.prev-lista a { color: var(--text-faint); text-underline-offset: 3px; overflow-wrap: anywhere; }
.prev-lista strong { color: var(--text); }

/* Rede das 18 ICT: linha de vida de cada uma num eixo comum */
.rede-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
@media (max-width: 1020px) { .rede-grade { grid-template-columns: 1fr; } }

.rede { list-style: none; border-top: 1px solid var(--line); }

.rede li {
  display: grid;
  grid-template-columns: 52px 86px minmax(120px, 1fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
}

.rede-ano { color: var(--text-dim); font-feature-settings: "tnum" 1; }
.rede-sigla { font-family: var(--font-display); font-weight: 800; font-size: .9375rem; color: var(--text); text-decoration: none; }
.rede-sigla:hover { color: var(--accent); }
.rede-trilho { position: relative; height: 1px; background: var(--line-strong); }
.rede-ponto { position: absolute; left: var(--p); top: -4px; width: 9px; height: 9px; margin-left: -4px; background: var(--accent); }
.rede-ponto::before { content: ""; position: absolute; right: 4px; top: 4px; width: 999px; max-width: calc(var(--p) * 10); height: 1px; }
.rede-origem { color: var(--text-faint); line-height: 1.4; }

.rede-eixo { position: relative; height: 22px; margin-left: calc(52px + 86px + 28px); width: calc(100% - 52px - 86px - 28px); max-width: none; }
.rede-eixo span { position: absolute; left: var(--p); transform: translateX(-50%); font-family: var(--font-mono); font-size: .6875rem; color: var(--text-faint); }
.rede-sem { margin-top: 14px; font-size: .8125rem; color: var(--text-faint); }

/* o eixo só faz sentido alinhado à coluna do trilho */
@media (min-width: 861px) {
  .rede-eixo { width: calc((100% - 52px - 86px - 42px) * .4545); }
}

@media (max-width: 860px) {
  .rede li { grid-template-columns: 48px 80px minmax(0, 1fr); }
  .rede-trilho { grid-column: 1 / -1; grid-row: 2; margin: 6px 0 4px; }
  .rede-eixo { display: none; }
}

.degraus { border: 1px solid var(--line); padding: 16px; }
.degraus-t { color: var(--text-dim); margin-bottom: 8px; }
.degraus svg { width: 100%; height: auto; overflow: visible; }
.degrau-linha { fill: none; stroke: var(--accent); stroke-width: 2; }
.degrau-ponto { fill: var(--accent); }
.degrau-val { fill: var(--text); font-family: var(--font-display); font-weight: 800; font-size: 16px; }

/* Mapas */
.mapa-grade { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: end; }
@media (max-width: 900px) { .mapa-grade { grid-template-columns: 1fr; } }

.mapa svg { display: block; width: 100%; height: auto; max-height: 78vh; }
.mapa-legenda { list-style: none; display: grid; gap: 12px; font-size: .875rem; color: var(--text-dim); }
.mapa-legenda li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mapa-legenda .dado { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; color: var(--text); white-space: nowrap; font-feature-settings: "tnum" 1; }

/* Camadas: o SVG só tem classes, a cor vem daqui */
.mapa svg .mapa-fundo { fill: transparent; stroke: none; }
.mapa svg .mapa-graticula { fill: none; stroke: rgba(210, 225, 255, .1); stroke-width: .6; }
.mapa svg .mapa-terra { fill: #0d1c52; stroke: rgba(210, 225, 255, .22); stroke-width: .6; }
.mapa svg .mapa-brasil { fill: #13266a; stroke: rgba(210, 225, 255, .45); }
.mapa svg .mapa-gelo { fill: #1a2c66; stroke: rgba(210, 225, 255, .2); stroke-width: .5; }
.mapa svg .mapa-rei-george { fill: #1d3278; stroke: rgba(210, 225, 255, .55); }
.mapa svg .mapa-zee { fill: rgba(150, 185, 255, .16); stroke: none; }
.mapa svg .mapa-zee-limite { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.mapa svg .mapa-aprovada-2019, .mapa svg .mapa-aprovada-2025 { fill: rgba(250, 185, 50, .62); stroke: var(--accent); stroke-width: 1; }
.mapa svg .mapa-em-analise { fill: rgba(250, 185, 50, .08); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
.mapa svg .mapa-ponto { fill: var(--text); stroke: var(--bg); stroke-width: 1.5; }
.mapa svg .mapa-ponto-ferraz { fill: var(--accent); }
.mapa svg .mapa-inset-fundo { fill: var(--bg); stroke: var(--line-strong); }
.mapa svg .mapa-inset-recorte { fill: none; stroke: var(--accent); stroke-width: 1; }
.hist-era.fundo-navy .mapa svg .mapa-inset-fundo { fill: var(--bg-2); }

.mapa-legenda .marca { width: 14px; height: 14px; }
.mapa-legenda .camada-zee { background: rgba(150, 185, 255, .16); border-top: 2px solid var(--accent); }
.mapa-legenda .camada-aprovada-2019, .mapa-legenda .camada-aprovada-2025 { background: rgba(250, 185, 50, .62); border: 1px solid var(--accent); }
.mapa-legenda .camada-em-analise { background: rgba(250, 185, 50, .05); border: 1px dashed var(--accent); }
.mapa-legenda .camada-ponto-ferraz { width: 10px; height: 10px; background: var(--accent); }
.mapa-legenda .camada-ilha-rei-george { background: #1d3278; border: 1px solid rgba(210, 225, 255, .55); }
.mapa-nota { flex-basis: 100%; font-size: .75rem; color: var(--text-faint); line-height: 1.45; }
.mapa-credito { margin-top: 10px; font-size: .75rem; color: var(--text-faint); }

/* Desenho guiado pela rolagem: só onde há suporte, e o fim é o mapa completo */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mapa svg .mapa-zee, .mapa svg .mapa-plataforma {
      animation: hist-camada linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 40%;
    }
    .mapa svg .mapa-zee-limite {
      stroke-dasharray: 1;
      animation: hist-traco linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    .mapa svg .mapa-aprovada-2019, .mapa svg .mapa-aprovada-2025 { animation-range: entry 40% cover 50%; }
    .mapa svg .mapa-em-analise { animation-range: entry 50% cover 58%; }
  }
}

@keyframes hist-camada { from { opacity: 0; } to { opacity: 1; } }
@keyframes hist-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.antes-depois { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
@media (max-width: 760px) { .antes-depois { grid-template-columns: 1fr; } }

/* ---------- Fecho da era: Hoje na Vitrine e pessoas ---------- */
.era-fecho { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.era-fecho > :only-child { grid-column: 1 / -1; }
@media (max-width: 980px) { .era-fecho { grid-template-columns: 1fr; } }

.hoje-sub { margin: -10px 0 16px; font-size: .875rem; color: var(--text-faint); }
.hoje-lista { list-style: none; border-top: 1px solid var(--line); }

.hoje-lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.hoje-selo.partner-mark { width: 104px; min-width: 104px; height: 44px; padding: 0 8px; font-size: 1rem; text-decoration: none; grid-row: span 2; }
a.hoje-selo:hover { border-color: rgba(250, 185, 50, .5); color: var(--accent); }
.hoje-nome a { font-size: .9375rem; font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.35; }
.hoje-nome a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.hoje-tec { color: var(--accent); text-decoration: none; text-transform: none; letter-spacing: .03em; }
.hoje-tec:hover { text-decoration: underline; }

.era-voltar { margin-top: clamp(40px, 6vh, 64px); }
.link-voltar { color: var(--text-dim); text-decoration: none; }
.link-voltar::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; transform: rotate(45deg) translate(2px, 2px); }
.link-voltar:hover { color: var(--accent); }

/* ---------- Cartões de pessoa ---------- */
.pessoas-lista { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.era-pessoas .pessoas-lista { grid-template-columns: 1fr; }

.pessoa-card a {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  height: 100%;
  padding: 20px;
  background: var(--bg);
  text-decoration: none;
  transition: background .15s;
}

.hist-era.fundo-navy .pessoa-card a { background: var(--bg-2); }
.pessoa-card a:hover { background: var(--panel); }
.pessoa-card a:hover .pessoa-ler { color: var(--accent); }
.pessoa-card a:hover .pessoa-ler svg { transform: translateX(4px); }

.pessoa-selo {
  display: grid;
  place-items: center;
  width: 76px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: linear-gradient(135deg, rgba(250, 185, 50, .10), transparent 62%), var(--bg-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  color: var(--text);
}

.pessoa-selo.grande { width: 120px; font-size: 2.4rem; }
.pessoa-retrato { display: block; width: 76px; aspect-ratio: 4 / 5; border: 1px solid var(--line-strong); overflow: hidden; }
.pessoa-retrato img { width: 100%; height: 100%; object-fit: cover; }

.pessoa-info { display: grid; gap: 4px; align-content: start; }
.pessoa-anos { color: var(--text-faint); font-feature-settings: "tnum" 1; }
.pessoa-nome { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.pessoa-eixo { font-size: .875rem; color: var(--text-dim); line-height: 1.45; }
.pessoa-patrono { color: var(--accent); text-transform: none; letter-spacing: .03em; font-size: .75rem; line-height: 1.4; }
.pessoa-ler { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); transition: color .15s; }
.pessoa-ler svg { transition: transform .15s var(--ease-out); }

/* ---------- Fontes e créditos ---------- */
.fontes-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
@media (max-width: 980px) { .fontes-grade { grid-template-columns: 1fr; } }

.fontes-lista { padding-left: 1.6em; display: grid; gap: 8px; font-size: .875rem; color: var(--text-faint); }
.fontes-lista li::marker { font-family: var(--font-mono); font-size: .75rem; color: var(--text-faint); }
.fontes-lista a, .creditos-lista a { color: var(--text-dim); text-underline-offset: 3px; text-decoration-color: rgba(210, 225, 255, .3); overflow-wrap: anywhere; }
.fontes-lista a:hover, .creditos-lista a:hover { color: var(--accent); }
.creditos-lista { list-style: none; display: grid; gap: 12px; font-size: .8125rem; line-height: 1.5; }
.cred-titulo { font-weight: 600; color: var(--text); }
.cred-meta { color: var(--text-faint); }

/* ---------- Perfil ---------- */
.perfil-hero .detail-hero-bg { --det-cor-dim: rgba(250, 185, 50, .06); }
.perfil-cab { display: flex; gap: 24px; align-items: center; margin-bottom: 20px; }
.perfil-cab h1 { margin-bottom: 6px; }
.perfil-nome-completo { color: var(--text-dim); font-size: 1rem; }
.perfil-hero .pessoa-selo { width: 96px; font-size: 2rem; flex: none; }
.perfil-hero .pessoa-retrato { width: 96px; flex: none; }

@media (max-width: 620px) { .perfil-cab { flex-direction: column; align-items: flex-start; gap: 16px; } }

.perfil-retrato { max-width: 420px; margin-bottom: clamp(40px, 6vh, 64px); }

.vida { list-style: none; border-left: 1px solid var(--line-strong); }
.vida li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 8px 0 12px 22px; font-size: .9375rem; color: var(--text-dim); border: 0 !important; }
.vida li::before { content: "" !important; position: absolute; left: -5px !important; top: 15px !important; width: 9px !important; height: 9px !important; background: var(--bg); border: 1px solid var(--accent) !important; transform: none !important; }
.vida-ano { color: var(--text); padding-top: 2px; }

.detail-main .citacao { margin-bottom: 28px; padding-left: 28px; padding-right: 28px; }
.detail-main .fontes-lista li { border: 0; padding: 0; }
.detail-main .fontes-lista li::before { content: none; }
.detail-main .pessoas-lista li { border: 0; padding: 0; }

.perfil-icts { list-style: none; display: grid; gap: 10px; }
.perfil-icts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; font-size: .875rem; }
.perfil-icts .hoje-selo.partner-mark { height: 36px; min-width: 64px; font-size: .875rem; grid-row: auto; }
.perfil-icts a:not(.partner-mark) { color: var(--text); text-decoration-color: rgba(250, 185, 50, .6); text-underline-offset: 3px; }

.perfil-outros { border-top: 1px solid var(--line); }

/* ---------- Impressão ---------- */
@media print {
  .hist-regua, .abertura-fundo, .era-traco, .era-voltar, .btn { display: none !important; }
  .hist-abertura { min-height: 0; padding: 0 0 16pt; }
  .hist-era, .hist-era.fundo-navy, .cena, .hist-figura, .pessoa-card a { background: #fff !important; color: #0b1230 !important; }
  .era-ano { -webkit-text-stroke: 1px #4a5468; }
  .marco, .cena, .citacao { break-inside: avoid; }
}

/* ---------- Links: a regra global "main li a" (0,3,3) é ouro sublinhado.
   Aqui cada componente da História declara o próprio estilo com
   especificidade maior, sem mexer nas outras páginas. ---------- */
html body.pagina-historia main :is(.indice-eras, .regua-eras, .pessoas-lista, .hoje-lista, .rede, .era-voltar) a:not(.btn) { color: inherit; text-decoration: none; }
html body.pagina-historia main .regua-eras a:not(.btn) { color: var(--text-faint); }
html body.pagina-historia main .regua-eras a:not(.btn):is(:hover, [aria-current="true"]) { color: var(--text); }
html body.pagina-historia main .hoje-lista .hoje-selo:not(.btn) { color: var(--text); }
html body.pagina-historia main .hoje-lista .hoje-tec:not(.btn) { color: var(--accent); }
html body.pagina-historia main .hoje-lista .hoje-nome a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--accent); }
html body.pagina-historia main .rede .rede-sigla:not(.btn):hover, html body.pagina-historia main .era-voltar a:not(.btn):hover { color: var(--accent); }
html body.pagina-historia main :is(.lin-nome, .marco-icts, .perfil-icts, .marco-proj) a:not(.btn):not(.partner-mark) { color: var(--text); text-decoration: underline; text-decoration-color: rgba(250, 185, 50, .6); text-underline-offset: 3px; }
html body.pagina-historia main :is(.lin-nome, .marco-icts, .perfil-icts, .marco-proj) a:not(.btn):not(.partner-mark):hover { color: var(--accent); }
html body.pagina-historia main .perfil-icts a.partner-mark:not(.btn) { color: var(--text); text-decoration: none; }
html body.pagina-historia main :is(.hist-fontes, .fontes-lista, .creditos-lista, .prev-lista, .hist-credito, .abertura-credito, .citacao figcaption, .mapa-credito) a:not(.btn) { color: var(--text-dim); text-decoration: underline; text-decoration-color: rgba(210, 225, 255, .3); text-underline-offset: 3px; }
html body.pagina-historia main :is(.hist-fontes, .fontes-lista, .creditos-lista, .prev-lista, .hist-credito, .abertura-credito, .citacao figcaption, .mapa-credito) a:not(.btn):hover { color: var(--accent); text-decoration-color: currentColor; }

/* ---------- Ajustes de celular ---------- */
@media (max-width: 620px) {
  .abertura-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .abertura-stats > div { margin-right: 0; padding-right: 12px; border-right: 0; }
  .abertura-stats > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .rede-trilho { display: none; }
  .rede li { grid-template-columns: 48px 92px minmax(0, 1fr); }
}
@media (max-width: 860px) { .ramo li { flex: none; } }
/* No celular o gráfico de previsões ficaria ilegível; a lista abaixo traz os mesmos dados */
@media (max-width: 560px) { .cena-previsoes .previsoes, .cena-previsoes .teor-legenda { display: none; } }

.pagina-perfil .detail-side .link-seta { white-space: normal; align-items: flex-start; line-height: 1.5; }
.pagina-perfil .detail-side .link-seta svg { margin-top: 3px; }

/* Grade de pessoas sem célula vazia pintada; selo de patrono com dose baixa de ouro */
.pessoas-lista { background: transparent; border: 0; gap: 0; }
.pessoa-card { border: 1px solid var(--line); margin: 0 -1px -1px 0; }
.pessoa-patrono { color: var(--text-dim); display: flex; gap: 8px; align-items: baseline; }
.pessoa-patrono::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--accent); transform: translateY(-1px); }
.pagina-perfil .detail-main section > p + p { margin-top: 1em; }

/* Faixa de foto em largura total (no fim de algumas eras) */
.hist-figura.hist-faixa { margin: 0 0 clamp(48px, 7vh, 80px); border-left: 0; border-right: 0; }
.hist-faixa picture, .hist-faixa img { width: 100%; max-height: 62vh; object-fit: cover; }
.hist-faixa figcaption { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ============================================================
   RODADA 2 (04/11/2026), a partir da avaliação do design-critic
   ============================================================ */

/* Régua: fundo chapado (vidro fosco só na barra superior) e, abaixo
   de 1180 px, a faixa de 3 px com o rótulo da era */
.hist-regua { background: rgba(5, 13, 42, .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
.regua-eras a { font-size: .75rem; }
@media (max-width: 1179px) {
  .pagina-historia { --regua-h: 40px; }
  .regua-inner { grid-template-columns: 1fr auto; gap: 12px; }
  .regua-trilho { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; top: auto; }
  .regua-ticks, .regua-eras, .regua-ponta { display: none; }
  .regua-fill { top: 0; height: 3px; }
}

/* Títulos de seção: um peso só (o do site) */
.era-titulo { font-weight: 700; }

/* Dose de ouro: subtítulos de bloco e datas de diagrama em texto; ouro só no acento */
.era-sub { color: var(--text-faint); }
.era-sub::after { background: var(--line-strong); }
.lin-ano { color: var(--text-dim); }
.linhagem li.atual .lin-ano, .cadeia-origem .lin-ano { color: var(--accent); }
html body.pagina-historia main .hoje-lista .hoje-tec:not(.btn) { color: var(--text); text-decoration: underline; text-decoration-color: rgba(250, 185, 50, .7); text-underline-offset: 3px; }

/* Pisos de tamanho: mono 12 px, texto de leitura 15 px, referência 14 px */
.hist-credito, .tema, .hist-fontes .mono, .ciclo-marinha, .citacao-rotulo, .pessoa-patrono, .regua-eras a { font-size: .75rem; }
.hist-credito { font-weight: 500; }
.hist-legenda { font-size: .9375rem; }
.hist-fontes, .mapa-credito, .mapa-nota, .citacao-explica, .rede-sem, .hoje-sub, .cred-meta, .creditos-lista, .fontes-lista, .lin-nota { font-size: .875rem; }

/* Marcos: grade em ordem de leitura (linha a linha); âncoras e marcos com
   imagem na largura toda, com a imagem ao lado; fontes recolhidas em
   details (o texto continua no HTML) */
.marcos { columns: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); }
.marco { grid-template-columns: 104px minmax(0, 1fr); }
.marco.ancora, .marco.com-imagem { grid-column: 1 / -1; grid-template-columns: 104px minmax(0, 620px) minmax(0, 1fr); gap: 18px clamp(24px, 3vw, 48px); padding: 28px 0 30px; }
.marco.ancora:not(.com-imagem) { grid-template-columns: 104px minmax(0, 760px); }
.marco-midia .hist-figura { margin-top: 0; }
.marco.ancora .marco-texto { font-size: 1rem; max-width: 62ch; }
@media (max-width: 980px) {
  .marcos { grid-template-columns: 1fr; }
  .marco.ancora, .marco.com-imagem, .marco.ancora:not(.com-imagem) { grid-template-columns: 104px minmax(0, 1fr); }
  .marco-midia { grid-column: 2; }
}
@media (max-width: 560px) {
  .marco.ancora, .marco.com-imagem, .marco.ancora:not(.com-imagem) { grid-template-columns: 1fr; }
  .marco-midia { grid-column: 1; }
}

.hist-fontes-det { margin-top: 10px; }
.hist-fontes-det summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--text-faint); list-style: none; }
.hist-fontes-det summary::-webkit-details-marker { display: none; }
.hist-fontes-det summary::before { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); transition: transform .15s var(--ease-out); }
.hist-fontes-det[open] summary::before { transform: rotate(45deg); }
.hist-fontes-det summary:hover { color: var(--text); }
.hist-fontes-det .hist-fontes { margin-top: 4px; }

.fontes-bloco { border-top: 1px solid var(--line-strong); }
.fontes-bloco summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 18px 0; list-style: none; min-height: 44px; }
.fontes-bloco summary::-webkit-details-marker { display: none; }
.fontes-bloco summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1px solid var(--text-dim); border-bottom: 1px solid var(--text-dim); transform: rotate(45deg); transition: transform .15s var(--ease-out); }
.fontes-bloco[open] summary::after { transform: rotate(-135deg); }
.era-sub-t { font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.fontes-bloco summary .mono { color: var(--text-faint); }
.fontes-bloco > ol, .fontes-bloco > ul { padding-bottom: 24px; }
.fontes-grade { align-items: start; }

/* Cadeia: origem e três desdobramentos */
.cadeia-origem { align-content: start; align-self: start; }
.cadeia-ramos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border-left: 0; padding-left: 0; position: relative; }
.cadeia-ramos > li { display: grid; gap: 6px; align-content: start; padding: 16px 18px 18px; border: 1px solid var(--line-strong); border-top: 2px solid rgba(250, 185, 50, .55); }
.cadeia-ramos > li::before { content: none; }
.ramo-tipo { color: var(--text-faint); }
.ramo-antes { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--text-faint); line-height: 1.45; }
.cadeia-nota { margin-top: 18px; font-size: .875rem; color: var(--text-faint); }
@media (max-width: 1020px) { .cadeia-ramos { grid-template-columns: 1fr; } }

/* Ciclo: as etapas da Marinha com a mesma marcação; sem célula vazia pintada */
.ciclo { background: transparent; border: 0; gap: 0; }
.ciclo li { border: 1px solid var(--line); margin: 0 -1px -1px 0; }
.ciclo li.marinha { box-shadow: inset 0 2px 0 var(--accent); background: linear-gradient(180deg, rgba(250, 185, 50, .07), transparent 70%), var(--bg); }
.hist-era.fundo-navy .ciclo li.marinha { background: linear-gradient(180deg, rgba(250, 185, 50, .07), transparent 70%), var(--bg-2); }
.ciclo li.marinha .ciclo-n { color: var(--accent); }
.ciclo-marinha { padding: 3px 8px; }
@media (max-width: 1100px) { .ciclo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ciclo { grid-template-columns: 1fr 1fr; } }

/* Linhagem: nós na posição proporcional ao ano, rótulos alternados acima e abaixo */
@media (min-width: 861px) {
  .linhagem { display: block; position: relative; height: 240px; margin-right: 200px; }
  .linhagem::before { content: ""; position: absolute; left: 0; right: 0; top: 118px; height: 1px; background: var(--line-strong); }
  .linhagem li { position: absolute; left: var(--p); width: 200px; padding: 0; display: grid; gap: 4px; }
  .linhagem li::before { content: ""; position: absolute; left: 4px; right: auto; width: 1px; height: 18px; background: var(--line-strong); }
  .linhagem li::after { left: 0; }
  .linhagem li.alto { bottom: 132px; align-content: end; }
  .linhagem li.alto::before { top: auto; bottom: -18px; }
  .linhagem li.alto::after { top: auto; bottom: -27px; }
  .linhagem li.baixo { top: 132px; }
  .linhagem li.baixo::before { top: -18px; }
  .linhagem li.baixo::after { top: -18px; }
}

/* Mapas: amostra e rótulo na mesma linha; rótulos diretos no mapa */
.mapa-grade { align-items: start; }
.mapa-legenda li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.mapa-legenda .marca { margin-top: 4px; }
.mapa-legenda .mapa-nota { grid-column: 2; }
.mapa { position: relative; }
.mapa-rotulos { position: absolute; inset: 0; pointer-events: none; }
.mapa-rot { position: absolute; transform: translate(10px, -50%); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .02em; color: var(--text-dim); white-space: nowrap; text-shadow: 0 0 4px var(--bg), 0 0 8px var(--bg); }
.mapa-rot.esq { transform: translate(calc(-100% - 10px), -50%); }
.mapa-rot.principal { color: var(--text); font-weight: 500; font-size: .8125rem; }
.mapa svg #ponto-ferraz { r: 8px; }
.mapa svg #ponto-arraial { display: none; }
@media (max-width: 620px) { .mapa-rot { font-size: .75rem; } .mapa-rot:not(.principal) { display: none; } }

/* Antártica: fotos na mesma proporção 3:2 */
.antes-depois .hist-figura picture { aspect-ratio: 3 / 2; overflow: hidden; }
.antes-depois .hist-figura img { width: 100%; height: 100%; object-fit: cover; }
.antes-depois { align-items: start; }

/* Alvos de toque no celular */
@media (max-width: 767px) {
  .marco-icts a, .marco-proj a, .hist-credito a, .link-voltar, .hist-fontes a { display: inline-flex; align-items: center; min-height: 44px; }
  .marco-icts { gap: 12px; }
  .marco-icts a { padding-inline: 6px; }
  .hist-fontes-det summary { min-height: 44px; }
}

/* Lista de marcos recolhível (aberta por padrão; o script recolhe no celular) */
.marcos-det > summary { cursor: pointer; list-style: none; min-height: 44px; }
.marcos-det > summary::-webkit-details-marker { display: none; }
.marcos-n { color: var(--text-dim); }
.marcos-det > summary::after { flex: 1; }
.marcos-det > summary .marcos-n::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 12px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .15s var(--ease-out); }
.marcos-det[open] > summary .marcos-n::after { transform: translateY(1px) rotate(-135deg); }
.marcos-det:not([open]) { margin-bottom: clamp(48px, 7vh, 80px); }

/* Linhagem: nó dos rótulos de cima centrado na linha */
@media (min-width: 861px) { .linhagem li.alto::after { bottom: -15px; } }


/* ============================================================
   RODADA 3 (04/11/2026), segunda avaliação do design-critic
   ============================================================ */

/* Régua opaca */
.hist-regua { background: var(--bg); }

/* Índice: números em texto 2, ouro só no hover e no foco */
.ind-n { color: var(--text-dim); }
.indice-eras a:is(:hover, :focus-visible) .ind-n { color: var(--accent); }

/* Marcos: mesma coluna de ano e mesmo X de título em todos; meia célula
   que ficaria sozinha ocupa a largura toda com texto até 680 px */
.marco, .marco.ancora, .marco.com-imagem, .marco.solo { column-gap: 24px; }
.marco.solo { grid-column: 1 / -1; grid-template-columns: 104px minmax(0, 680px); }
.marco.ancora, .marco.com-imagem { grid-template-columns: 104px minmax(0, 620px) minmax(0, 1fr); }
.marco.com-imagem .marco-midia .hist-figura picture { aspect-ratio: 3 / 2; max-height: 320px; overflow: hidden; }
.marco.com-imagem .marco-midia .hist-figura img { width: 100%; height: 100%; object-fit: cover; }
.marco-midia { max-width: 480px; }
@media (max-width: 1179px) {
  .marco.ancora, .marco.com-imagem { grid-template-columns: 104px minmax(0, 1fr); }
  .marco-midia { grid-column: 2; max-width: 560px; }
}
@media (max-width: 980px) { .marco.solo { grid-template-columns: 104px minmax(0, 1fr); } }
@media (max-width: 560px) {
  .marco.solo { grid-template-columns: 1fr; }
  .marco-midia { grid-column: 1; }
}

/* Celular: alvo de toque do crédito cresce por ::after, sem mexer na linha */
@media (max-width: 767px) {
  .hist-credito a, .hist-fontes a { display: inline; min-height: 0; position: relative; }
  .hist-credito a::after, .hist-fontes a::after { content: ""; position: absolute; inset: -12px -4px; }
  .hoje-nome a, .hoje-lista .hoje-tec { display: inline-flex; align-items: center; min-height: 44px; }
  .pagina-perfil .fontes-lista a, .pagina-perfil .perfil-icts a:not(.partner-mark) { display: inline-block; padding-block: 12px; }
}

.rede-eixo span { font-size: .75rem; }

/* Mapa: rótulo curto no celular e nada passa da borda */
.mapa { overflow: clip; }
.rot-curto { display: none; }
@media (max-width: 620px) {
  .rot-longo { display: none; }
  .rot-curto { display: inline; }
}

/* Cadeia: conector da origem aos três desdobramentos */
@media (min-width: 1021px) {
  .cadeia { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); column-gap: 48px; }
  .cadeia-ramos { padding-top: 24px; }
  .cadeia-ramos::before { content: ""; position: absolute; left: -48px; right: calc((100% - 28px) / 6); top: 0; height: 1px; background: var(--line-strong); }
  .cadeia-ramos > li { position: relative; }
  .cadeia-ramos > li::before { content: ""; position: absolute; left: 50%; top: -25px; width: 1px; height: 24px; background: var(--line-strong); }
  .cadeia-origem { align-self: start; margin-top: 0; }
}

/* Pessoas da era: lista compacta, retrato só quando existe */
.pessoa-card a { grid-template-columns: minmax(0, 1fr); }
.pessoa-card.com-retrato a { grid-template-columns: 64px minmax(0, 1fr); }
.pessoa-card .pessoa-retrato { width: 64px; }
.pessoa-patrono { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; font-family: var(--font-body); font-size: .875rem; color: var(--text-dim); letter-spacing: 0; text-transform: none; }
.pessoa-patrono::before { content: none; }
.pessoa-patrono .mono { color: var(--accent); font-size: .75rem; }

/* Vidas: cada personagem numa linha, na escala real 1763 a hoje */
.vidas { border-top: 1px solid var(--line-strong); }
.vidas-cab, .vidas-lista a { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 32px; align-items: center; }
.vidas-cab { height: 44px; border-bottom: 1px solid var(--line); }
.vidas-eixo, .vida-trilho { position: relative; height: 100%; }
.vidas-eixo span:not(.vida-era) { position: absolute; left: var(--p); top: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: .75rem; color: var(--text-faint); font-feature-settings: "tnum" 1; }
.vida-era { position: absolute; top: 0; bottom: 0; left: var(--i); width: calc(var(--f) - var(--i)); border-left: 1px solid var(--line); }
.vidas-lista { list-style: none; }
.vidas-lista li { border-bottom: 1px solid var(--line); }
html body.pagina-historia main .vidas-lista a:not(.btn) { color: inherit; text-decoration: none; min-height: 64px; padding: 10px 0; grid-template-rows: auto auto; row-gap: 2px; }
.vidas-lista a > :not(.vida-trilho):not(.vida-retrato) { grid-column: 1; }
.vida-trilho { grid-column: 2; grid-row: 1 / span 3; min-height: 44px; }
.vida-trilho::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.vida-barra { position: absolute; top: calc(50% - 4px); height: 8px; left: var(--i); width: calc(var(--f) - var(--i)); background: rgba(250, 185, 50, .55); }
.vida-barra.incerta { background: repeating-linear-gradient(90deg, rgba(250, 185, 50, .45) 0 6px, transparent 6px 10px); }
.vida-ponto { position: absolute; top: calc(50% - 5px); left: var(--i); width: 10px; height: 10px; margin-left: -5px; background: rgba(250, 185, 50, .55); }
.vidas-lista a:hover .vida-barra, .vidas-lista a:focus-visible .vida-barra { background: var(--accent); }
.vidas-lista a:hover .vida-nome { color: var(--accent); }
.vida-nome { font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.3; transition: color .15s; }
.vida-posto { font-weight: 400; color: var(--text-dim); }
.vida-meta { font-size: .875rem; color: var(--text-faint); line-height: 1.4; }
.vida-meta .mono { color: var(--text-dim); margin-right: 8px; }
.vida-patrono { justify-self: start; color: var(--text-dim); font-size: .75rem; padding: 1px 6px; border: 1px solid rgba(250, 185, 50, .45); }
.vida-retrato { display: none; }
.vidas-nota { margin-top: 14px; font-size: .875rem; color: var(--text-faint); max-width: 80ch; }
@media (max-width: 760px) {
  .vidas-cab { display: none; }
  .vidas-lista a { grid-template-columns: 1fr; }
  .vida-trilho { grid-column: 1; grid-row: auto; min-height: 16px; height: 16px; margin-top: 6px; }
}

/* Fases da aviação naval */
.fases { position: relative; padding-bottom: 28px; }
.fases-trilho { position: absolute; left: 0; right: 0; top: 0; bottom: 28px; }
.fase-lacuna { position: absolute; top: 0; bottom: 0; left: var(--i); width: calc(var(--f) - var(--i)); background: repeating-linear-gradient(135deg, rgba(210, 225, 255, .06) 0 4px, transparent 4px 9px); border-left: 1px dashed var(--line-strong); border-right: 1px dashed var(--line-strong); }
.fases-lista { list-style: none; position: relative; display: grid; gap: 8px; }
.fases-lista li { margin-left: var(--i); width: calc(var(--f) - var(--i)); min-width: 150px; padding: 10px 12px; border-left: 2px solid var(--accent); background: rgba(250, 185, 50, .14); display: grid; gap: 2px; }
.fases-lista li.fase-rotativa { border-left-color: rgba(250, 185, 50, .55); background: repeating-linear-gradient(90deg, rgba(250, 185, 50, .1) 0 8px, transparent 8px 12px); }
.fase-anos { color: var(--text-dim); }
.fase-nome { font-size: .9375rem; font-weight: 600; color: var(--text); }
.fases-eixo { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; border-top: 1px solid var(--line-strong); }
.fases-eixo span { position: absolute; left: var(--p); top: 4px; transform: translateX(-50%); font-family: var(--font-mono); font-size: .75rem; color: var(--text-faint); }
.fases-leg { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
.marca.fase-plena { background: rgba(250, 185, 50, .14); border-left: 2px solid var(--accent); }
.marca.fase-rotativa { background: repeating-linear-gradient(90deg, rgba(250, 185, 50, .3) 0 3px, transparent 3px 5px); border-left: 2px solid rgba(250, 185, 50, .55); }
.marca.fase-sem { background: repeating-linear-gradient(135deg, rgba(210, 225, 255, .2) 0 2px, transparent 2px 4px); border: 1px dashed var(--line-strong); }
@media (max-width: 760px) {
  .fases-lista li { margin-left: 0; width: auto; }
  .fases-trilho, .fases-eixo { display: none; }
  .fases { padding-bottom: 0; }
}

/* ============================================================
   RODADA 3b (04/11/2026), ajustes da terceira avaliação (7,4)
   ============================================================ */
.marco-texto, .marco-titulo { max-width: 680px; }

/* Etiquetas de tema como texto mono simples; caixa só na sigla com link */
.tema { border: 0; padding: 0; margin-right: 10px; color: var(--text-faint); }
.marco.nuclear .tema:first-child { border: 0; }

/* Fases da aviação: fundo panel, ouro só no filete */
.fases-lista li { background: var(--panel); }
.fases-lista li.fase-rotativa { background: repeating-linear-gradient(90deg, rgba(250, 185, 50, .1) 0 8px, transparent 8px 12px), var(--panel); }
.marca.fase-plena { background: var(--panel); }

/* Cadeia: o conector sai do meio do cartão de origem */
@media (min-width: 1021px) {
  .cadeia-ramos { padding-top: 72px; }
  .cadeia-ramos::before { top: 48px; }
  .cadeia-ramos > li::before { top: -24px; height: 24px; }
  .cadeia-origem::after { content: ""; position: absolute; right: -4px; top: 44px; width: 7px; height: 7px; background: var(--accent); }
  .cadeia-origem { position: relative; margin-top: 0; }
}
@media (max-width: 1020px) {
  .cadeia-ramos { position: relative; padding-left: 20px; border-left: 1px solid var(--line-strong); margin-left: 12px; }
}

/* Vidas no celular: eixo mínimo de anos no topo */
@media (max-width: 760px) {
  .vidas-cab { display: block; height: 32px; }
  .vidas-cab > span:first-child { display: none; }
  .vidas-eixo span:not(.vida-era) { font-size: .75rem; }
  .vida-trilho::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(var(--line-strong), var(--line-strong)) 14.07% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 52.09% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 90.11% 0 / 1px 100% no-repeat; }
}

/* Alvos de toque: 44 px também nos créditos, fontes e siglas da rede */
@media (max-width: 1023px) {
  .hist-credito a::after, .hist-fontes a::after { inset: -14px -4px; }
  .rede-sigla { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Perfil sem monograma no topo */
.perfil-cab { gap: 0; }

/* Celular (05/11/2026): nada alarga a página em 320 px. Grade do ciclo com colunas
   que encolhem e quebra de palavras longas ("hexafluoreto"); a coluna do perfil não
   assume a largura natural do retrato. */
@media (max-width: 620px) {
  .ciclo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ciclo li { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
}
.pagina-perfil .detail-main, .perfil-retrato { min-width: 0; }
.perfil-retrato { width: 100%; }