/* =============================================================================
   SemearIA: /universo/ (plano D.4). Só classes com o prefixo universo-; o resto
   (slides, cabeça, linha do tempo, cartões, listas, citação) vem dos componentes.
   ============================================================================= */

/* o destaque em ouro dos títulos não se parte no meio: quando não cabe, quebra antes dele */
.universo-cronologia h2 em, .universo-atos h2 em, .universo-guardioes h2 em, .universo-rasta h2 em, .universo-tom h2 em { display: inline-block; }

/* ---------- 1 · entrada: o conteúdo ocupa o palco e a nota da ilustração fica no pé ---------- */
.universo-heroi .slide__conteudo { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }

/* ---------- 2 · linha do tempo: só o primeiro marco é do mundo real ---------- */
.universo-tempo { --universo-passo: clamp(12px, 2.3vh, 24px); gap: var(--universo-passo); }
.universo-tempo::before { content: none; }
.universo-tempo__marco::after {
    content: ''; position: absolute; left: 7px; width: 1px;
    top: calc(.5em + 10px); bottom: calc(3px - var(--universo-passo) - .5em);
    background: repeating-linear-gradient(180deg, var(--ouro) 0 3px, transparent 3px 7px);
}
.universo-tempo__marco:last-child::after { content: none; }
.universo-tempo__marco--real::before { background: var(--mar); }
.universo-tempo__marco--real::after { background: linear-gradient(var(--mar), var(--ouro)); }
.universo-tempo__marco--inicio::before { filter: drop-shadow(0 0 3px rgba(122, 83, 22, .55)); }
.universo-tempo__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 4px; }
.universo-tempo__topo .tempo__quando { margin: 0; }
.universo-tempo__marco p { margin: 0; text-wrap: pretty; }
.universo-tempo__marco--real .etiqueta { color: var(--mar); border-color: var(--mar); }
.universo-tempo__marco--inicio .etiqueta { color: var(--ouro); border-color: var(--ouro-linha); }

/* ---------- 3 · ficção, não tese ---------- */
.universo-ficcao .cabeca { margin-bottom: clamp(14px, 2.4vh, 24px); }
.universo-ficcao__filete { width: min(300px, 60%); margin: 0 auto clamp(18px, 3.4vh, 34px); }
.universo-ficcao__texto { text-align: center; }
.universo-ficcao__texto p { max-width: 60ch; margin: 0 auto; font-size: calc(var(--fs-lead) * 1.04); line-height: 1.5; text-wrap: pretty; }
.universo-ficcao__texto p + p { margin-top: clamp(12px, 2.2vh, 20px); }
.universo-ficcao__texto em { color: var(--ouro); }

/* ---------- 4 · o outro reset: o ato atual em ouro, os seguintes ainda tracejados ---------- */
.universo-atos__lista { list-style: none; grid-auto-rows: 1fr; }
.universo-ato { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.4vh, 14px); padding: clamp(20px, 3.2vh, 34px) clamp(18px, 2vw, 30px); }
.universo-ato__icone { width: clamp(30px, 2.6vw, 40px); height: auto; stroke-width: 1.2; }
.universo-ato h3 { margin: 0; font-size: calc(var(--fs-h3) * 1.45); }
.universo-ato p { margin: 0; }
.universo-ato--atual { border-color: var(--ouro); box-shadow: inset 0 2px 0 var(--ouro); }
.universo-ato:not(.universo-ato--atual) { border-style: dashed; }

/* ---------- 5 · os guardiões (sobre a paisagem, do lado do véu) ---------- */
.universo-guardioes__texto { max-width: 640px; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.universo-elementos b { font: 600 var(--fs-placa)/1.3 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); }
.universo-cartas { margin: clamp(14px, 2.4vh, 22px) 0 0; }
.universo-cartas .etiqueta { margin-right: 10px; vertical-align: .12em; text-shadow: none; }

/* ---------- 6 · o Rasta ---------- */
.universo-rasta .destaque { font-size: var(--fs-lead); font-style: italic; margin-bottom: 0; }
/* o dial do rádio (T2) põe as cinco faixas em cinco colunas: "Regeneração" só cabe na sua com o painel
   em cerca de 48 vezes --fs-mini (medido com o estilo de faixa do T2); a coluna do rádio nunca fica menor */
@media (min-width: 1121px) {
    /* fatores inteiros: com o rádio no mínimo, o texto fica com todo o resto (um fr < 1 deixaria sobra) */
    .universo-rasta .dividido { grid-template-columns: minmax(0, 41fr) minmax(calc(var(--fs-mini) * 50), 59fr); }
}
@media (min-width: 801px) and (max-width: 1120px) {
    .quadro .universo-rasta .dividido { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vh, 28px); }
    .universo-rasta__texto, .universo-rasta__radio { width: min(100%, 660px); }
}

/* ---------- 7 · o tom ---------- */
.universo-tom__citacao p { margin: 0 0 .3em; }
.universo-tom__resumo { margin: clamp(16px, 3vh, 28px) 0 0; font-size: var(--fs-lead); }

/* ---------- telas largas: a linha do tempo ganha a coluna maior ---------- */
@media (min-width: 1121px) {
    .universo-cronologia__grade { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
/* o texto dos guardiões começa a até 48% da borda direita: o véu fica em .74 ou mais em toda a coluna
   (regra de contraste sobre paisagem); o sol, do outro lado, continua aceso. No celular vale o véu cheio. */
@media (min-width: 761px) {
    .universo-guardioes .slide__fundo::after { background: linear-gradient(270deg, rgba(8, 20, 15, .92) 0%, rgba(8, 20, 15, .74) 50%, rgba(8, 20, 15, .12) 82%), linear-gradient(0deg, rgba(8, 20, 15, .7), transparent 35%); }
}