/* Hallmark · genre: editorial-moderno · macrostructure: Quote-Led · theme: Alvorada (branco + âmbar elétrico) · fonts: Fraunces + Switzer · enrichment: none · nav: topo-fixo · footer: pager · pre-emit: P4 H5 E4 S4 R4 V4 · contrast: pass · mobile: pass · tokens: pass
 * pós-crítica: hierarquia auditada nos extremos — eco (1.375–1.875) < display-longa (1.5–2.625) < media < curta (teto 5rem) e título (1.375–2.25) abaixo do piso de qualquer tier em 320px e no desktop;
 * na banda grafite só --color-band-ink e âmbar vivo; texto pequeno âmbar sobre papel usa --color-accent-text; aspas via quotes/:lang; reduced-motion: o base zera durações, aqui zeram-se os DELAYS da entrada. */

/* Layout 02 · "Proclamação" — o momento de maior drama da série Alvorada.
 * A página abre como um pôster em banda grafite full-bleed: masthead de data em
 * small caps âmbar com linha que cresce, título e tema em band-ink, e a
 * passagem em Fraunces ROMANA no teto da escala (a ficha do Quote-Led sugere
 * itálico; contrariada de propósito — gate 38a). Escala do display por
 * comprimento (--curta ≤110 / --media ≤210 / --longa >210, classe do template).
 * Abaixo, papel branco: leitura centrada na medida, emoldurada pela largura
 * cheia; eco da frase-chave em banda paper-2; divisores = régua --grad-amber
 * (a única assinatura em gradiente da página). O âmbar é o da série —
 * --color-accent NÃO é sobrescrito; a identidade deste layout é estrutural. */

body.layout-02 {
  /* Tokens próprios (gate 48: valor novo = token novo, nada inline) */
  --l2-titulo: clamp(1.375rem, 1.6vw + 0.8rem, 2.25rem);
  --l2-display-curta: clamp(2.5rem, 6vw + 0.9rem, 5rem);
  --l2-display-media: clamp(2rem, 3.6vw + 0.9rem, 3.625rem);
  --l2-display-longa: clamp(1.5rem, 2.2vw + 0.9rem, 2.625rem);
  --l2-leading-curta: 1.05;
  --l2-leading-media: 1.14;
  --l2-leading-longa: 1.3;
  /* O eco nunca supera o herói: teto abaixo do teto da --longa, piso abaixo do piso. */
  --l2-eco-size: clamp(1.375rem, 1vw + 1rem, 1.875rem);
  --l2-frases-size: clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
  --l2-h2: clamp(1.375rem, 1vw + 0.8rem, 1.625rem);
  /* Passo assimétrico do pôster: a passagem desce um degrau à direita no desktop */
  --l2-passo: clamp(0rem, 8vw - 5rem, 5rem);
  --l2-col-eco: 46rem;
  --l2-col-frases: 54rem;
  --l2-dropcap: 3.1em;
}

/* Seleção de texto no tom da casa: âmbar sobre grafite */
.layout-02 ::selection {
  background: var(--color-accent);
  color: var(--color-band);
}

/* ---------- Molduras: quadro largo (74rem) e coluna de leitura ---------- */

.layout-02 .l2-quadro {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--largura-max);
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}

.layout-02 .l2-col {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--pad-lateral));
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}

.layout-02 .l2-col--eco {
  max-width: calc(var(--l2-col-eco) + 2 * var(--pad-lateral));
}

.layout-02 .l2-col--frases {
  max-width: calc(var(--l2-col-frases) + 2 * var(--pad-lateral));
}

/* ---------- Entrada orquestrada do pôster (carga da página) ---------- */

@keyframes l2-sobe {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes l2-cresce {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.layout-02 .l2-ent {
  animation: l2-sobe var(--dur-3) var(--ease-out) both;
}

.layout-02 .l2-ent--2 { animation-delay: 90ms; }
.layout-02 .l2-ent--3 { animation-delay: 170ms; }
.layout-02 .l2-ent--4 { animation-delay: 280ms; }
.layout-02 .l2-ent--5 { animation-delay: 470ms; }
.layout-02 .l2-ent--6 { animation-delay: 540ms; }

/* O guarda global do base zera DURAÇÕES, não delays: com fill both, um delay
 * pendente esconderia conteúdo. Complemento (não repetição): zerar os delays. */
@media (prefers-reduced-motion: reduce) {
  .layout-02 .l2-ent,
  .layout-02 .l2-cabecalho__linha {
    animation-delay: 0ms !important;
  }
}

/* ---------- Pôster grafite: banda full-bleed de abertura ---------- */

.layout-02 .l2-poster {
  background: var(--color-band);
  color: var(--color-band-ink);
  padding-top: clamp(2.25rem, 5vw, 3.75rem);
  /* gate 44a: o herói assenta com ≥1.3× do respiro do topo */
  padding-bottom: clamp(3.25rem, 8.5vw, 6.25rem);
}

/* 1 · Cabeçalho — masthead de data + título + tema */

.layout-02 .l2-cabecalho__data {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--color-accent); /* âmbar vivo sobre grafite: contraste alto */
}

.layout-02 .l2-cabecalho__linha {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  transform-origin: left center;
  animation: l2-cresce var(--dur-3) var(--ease-out) 400ms both;
}

.layout-02 .l2-cabecalho__titulo {
  margin-top: var(--space-xl);
  font-family: var(--font-serif);
  font-size: var(--l2-titulo);
  font-weight: 600;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-band-ink);
  max-width: 40rem;
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.layout-02 .l2-cabecalho__tema {
  margin-top: var(--space-sm);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-band-ink);
  max-width: 44rem;
  overflow-wrap: anywhere;
}

/* 2 · A passagem — o espetáculo */

.layout-02 .l2-heroi {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.layout-02 .l2-passagem {
  margin-inline-start: var(--l2-passo);
  font-weight: 700;
  font-style: normal; /* romana — nunca itálico em display (gate 38a) */
  color: var(--color-band-ink);
}

.layout-02 .l2-passagem__texto {
  position: relative;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Aspas penduradas: a abertura brilha em âmbar na margem, o texto fica alinhado */
.layout-02 .l2-passagem__texto::before {
  content: open-quote;
  position: absolute;
  right: 100%;
  top: -0.05em;
  margin-right: 0.06em;
  color: var(--color-accent);
}

.layout-02 .l2-passagem__texto::after {
  content: close-quote;
  color: var(--color-accent);
}

.layout-02 .l2-passagem--curta .l2-passagem__texto {
  font-size: var(--l2-display-curta);
  line-height: var(--l2-leading-curta);
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-wrap: balance;
}

.layout-02 .l2-passagem--media .l2-passagem__texto {
  font-size: var(--l2-display-media);
  line-height: var(--l2-leading-media);
  letter-spacing: -0.02em;
  max-width: 28ch;
}

.layout-02 .l2-passagem--longa .l2-passagem__texto {
  font-size: var(--l2-display-longa);
  line-height: var(--l2-leading-longa);
  letter-spacing: -0.012em;
  max-width: 46ch;
}

/* Referência como atribuição: small caps âmbar, com traço curto */
.layout-02 .l2-passagem__ref {
  margin-inline-start: var(--l2-passo);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--color-accent);
  overflow-wrap: anywhere;
}

.layout-02 .l2-passagem__traco {
  color: var(--color-accent);
}

.layout-02 .l2-passagem__versao {
  margin-inline-start: var(--l2-passo);
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--color-band-ink);
}

/* ---------- Rótulos de seção (Fraunces, empilhados acima do conteúdo) ---------- */

.layout-02 .l2-h2 {
  font-family: var(--font-serif);
  font-size: var(--l2-h2);
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-lg);
}

/* ---------- 3 · Mensagem do dia ---------- */

.layout-02 .l2-mensagem {
  margin-top: clamp(2.75rem, 7vw, 4.5rem);
}

.layout-02 .l2-paragrafo {
  margin-top: var(--space-md);
}

.layout-02 .l2-paragrafo:first-of-type {
  margin-top: 0;
}

/* Capitular em Fraunces: o âmbar de texto abre a leitura */
.layout-02 .l2-paragrafo:first-of-type::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: var(--l2-dropcap);
  font-weight: 700;
  line-height: 0.78;
  padding: 0.08em 0.14em 0 0;
  color: var(--color-accent-text);
}

/* O eco da frase-chave: banda paper-2 full-bleed, SEMPRE menor que o herói */
.layout-02 .l2-eco {
  margin-block: clamp(2.25rem, 6vw, 3.5rem);
  background: var(--color-paper-2);
  border-block: 1px solid var(--color-rule);
  padding-block: clamp(2rem, 5vw, 3.25rem);
}

.layout-02 .l2-eco__texto {
  font-size: var(--l2-eco-size);
  font-weight: 600;
  font-style: normal;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.layout-02 .l2-eco__texto p {
  position: relative;
  min-width: 0;
  overflow-wrap: anywhere;
}

.layout-02 .l2-eco__texto p::before {
  content: open-quote;
  position: absolute;
  right: 100%;
  top: -0.05em;
  margin-right: 0.06em;
  color: var(--color-accent-text); /* âmbar de texto: legível sobre papel */
}

.layout-02 .l2-eco__texto p::after {
  content: close-quote;
  color: var(--color-accent-text);
}

.layout-02 .l2-eco .share-frase {
  margin-top: var(--space-md);
  white-space: nowrap; /* gate 49: CTA numa linha em 320/375/414/768 */
}

/* ---------- 4 · Curiosidades: grade que preenche a moldura ---------- */

.layout-02 .l2-curiosidades {
  margin-top: var(--space-3xl);
}

.layout-02 .l2-curiosidades__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md) var(--space-2xl);
}

@media (min-width: 820px) {
  .layout-02 .l2-curiosidades__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* gate 50 */
    gap: var(--space-lg) var(--space-3xl);
  }
}

.layout-02 .l2-curiosidades__item {
  position: relative;
  padding-left: 1.5em;
  overflow-wrap: anywhere;
}

.layout-02 .l2-curiosidades__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 1px;
  background: var(--color-accent); /* glifo âmbar vivo (não texto) */
}

/* ---------- 5 · Frases importantes: citações em serifa, coluna larga ---------- */

.layout-02 .l2-frases {
  margin-top: var(--space-3xl);
}

.layout-02 .l2-nota {
  margin-top: calc(-1 * var(--space-xs));
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

.layout-02 .l2-frases__item {
  position: relative;
  font-size: var(--l2-frases-size);
  font-weight: 500;
  font-style: normal;
  line-height: 1.42;
  min-width: 0;
  overflow-wrap: anywhere;
}

.layout-02 .l2-frases__item + .l2-frases__item {
  margin-top: var(--space-xl);
}

.layout-02 .l2-frases__item::before {
  content: open-quote;
  position: absolute;
  right: 100%;
  top: -0.05em;
  margin-right: 0.06em;
  color: var(--color-accent-text);
}

.layout-02 .l2-frases__item::after {
  content: close-quote;
  color: var(--color-accent-text);
}

/* ---------- Divisor: régua-gradiente curta centrada (assinatura da página) ---------- */

.layout-02 .l2-divisor {
  width: clamp(3.5rem, 9vw, 5.5rem);
  height: 3px;
  border-radius: 999px;
  margin: var(--space-3xl) auto 0;
  background: var(--grad-amber);
}

/* ---------- 6 · Para buscar hoje ---------- */

.layout-02 .l2-buscar {
  margin-top: var(--space-xl);
}

/* ---------- 7/9 · Patrocinados (nativos, contidos na coluna de leitura) ---------- */

.layout-02 .l2-ad {
  margin-top: var(--space-2xl);
}

/* ---------- 8 · Aprofundamento (moldura larga) ---------- */

.layout-02 .l2-aprofundamento {
  margin-top: var(--space-xl);
}

/* ---------- 10 · Rodapé (pager) ---------- */

.layout-02 .l2-rodape {
  margin-top: var(--space-4xl);
  padding-bottom: var(--space-2xl);
}