/* Hallmark · genre: editorial-moderno · macrostructure: Narrative Workflow · 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: passagem domina título/eco/numerais em 320–1920 (clamps conferidos
 * nos extremos e no meio); numerais em gradiente são decorativos (aria-hidden,
 * ordem duplicada pelo fluxo + rótulo) — o único background-clip: text da página,
 * autorizado por ser numeral-glifo, não heading; reduced-motion zera os DELAYS
 * da entrada (o base zera só as durações). */

/* Layout 3 · "Caminho" — a prática matinal em quatro etapas numeradas, agora
 * com energia de produto moderno (direção Alvorada): moldura larga (74rem),
 * réguas de etapa em largura total com trecho inicial em gradiente âmbar,
 * numerais tabulares grandes em Fraunces, e a passagem (etapa 1) sangrando em
 * banda escura full-bleed — o bloco mais forte da página. A coluna de leitura
 * da mensagem mantém --measure, centrada e emoldurada por elementos mais
 * largos (régua, pull-quote de 48rem, grade de curiosidades, painel cheio).
 * Tudo escopado sob body.layout-03; tokens da série vêm de base.css —
 * --color-accent NÃO é sobrescrito: a identidade deste layout é estrutural. */

/* ---------- Tokens do layout (gate 48: valor novo = token, nada inline) ---------- */

body.layout-03 {
  --c3-titulo-size: clamp(1.75rem, 2.6vw + 1rem, 2.75rem);
  --c3-passagem-size: clamp(2rem, 4.6vw + 1rem, 4.25rem);
  --c3-numero-size: clamp(1.625rem, 2.6vw + 0.75rem, 3rem);
  --c3-frase-size: clamp(1.375rem, 1vw + 1.05rem, 2rem);

  --c3-regua: 3px;
  --c3-regua-destaque: clamp(3.5rem, 8vw, 6.5rem);
  --c3-regua-frase: 3.25rem;
  --c3-recuo-aspas: 0.45ch;

  /* nota discreta sobre a banda escura (AA em texto pequeno sobre --color-band) */
  --c3-banda-nota: oklch(78% 0.015 75);

  --c3-medida-passagem: 24ch;
  --c3-medida-frase: 48rem;
  --c3-medida-larga: 60rem;
  --c3-sol-largura: 8.5rem;

  --c3-pad-banda: clamp(3rem, 7vw, 5.5rem);
  --c3-pad-painel: clamp(1.5rem, 4.5vw, 3rem);
  --c3-passo: 110ms; /* stagger da entrada do herói */
}

/* Seleção de texto no tom da série */
body.layout-03 ::selection {
  background: var(--color-accent);
  color: var(--color-ink);
}

/* ---------- Moldura — a página usa a largura, nada de coluna perdida ---------- */

body.layout-03 .moldura {
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}

/* Títulos e display aguentam 15 ou 120 caracteres em qualquer idioma (gate 51). */
body.layout-03 .cabecalho__titulo,
body.layout-03 .etapa__cabeca,
body.layout-03 .subsecao__titulo,
body.layout-03 .passagem__texto,
body.layout-03 .frase-chave__texto {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ---------- Entrada orquestrada do herói (carga) ---------- */

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

body.layout-03 .c3-entra {
  animation: c3-entrada var(--dur-3) var(--ease-out) both;
}

body.layout-03 .c3-entra--2 { animation-delay: var(--c3-passo); }
body.layout-03 .c3-entra--3 { animation-delay: calc(var(--c3-passo) * 2); }
body.layout-03 .c3-entra--4 { animation-delay: calc(var(--c3-passo) * 3); }
body.layout-03 .c3-entra--5 { animation-delay: calc(var(--c3-passo) * 4); }
body.layout-03 .c3-entra--6 { animation-delay: calc(var(--c3-passo) * 5); }

/* Complemento ao base (não repetição): lá as DURAÇÕES caem a 0.01ms, mas os
 * delays ficariam — e o herói passaria meio segundo invisível. Zera os delays. */
@media (prefers-reduced-motion: reduce) {
  body.layout-03 .c3-entra {
    animation-delay: 0s !important;
  }
}

/* ---------- Cabeçalho do devocional (abaixo do topo fixo; sem lang-switcher) ---------- */

body.layout-03 .cabecalho {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 3rem);
}

body.layout-03 .cabecalho__data {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--color-neutral);
}

body.layout-03 .cabecalho__data::before {
  content: "";
  flex: 0 0 auto;
  width: 2rem;
  height: var(--c3-regua);
  background: var(--color-accent);
}

body.layout-03 .cabecalho__titulo {
  margin-top: var(--space-lg);
  font-family: var(--font-serif);
  font-size: var(--c3-titulo-size);
  font-weight: 700;
  font-style: normal; /* display sempre romano (gate 38a) */
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  max-width: 20ch;
}

body.layout-03 .cabecalho__tema {
  margin-top: var(--space-md);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-neutral);
  max-width: 52ch;
}

/* ---------- Anatomia da etapa ---------- */

/* O espaçamento entre etapas não é uniforme de propósito. */
body.layout-03 .etapa--ler { margin-top: var(--space-lg); }
body.layout-03 .etapa--meditar { margin-top: var(--space-4xl); }
body.layout-03 .etapa--buscar { margin-top: var(--space-4xl); }
body.layout-03 .etapa--aprofundar { margin-top: var(--space-3xl); }

/* Régua de abertura em largura total da moldura; o trecho inicial carrega a
 * assinatura --grad-amber da página. */
body.layout-03 .etapa__abre {
  position: relative;
  border-top: var(--c3-regua) solid var(--color-rule);
  padding-top: var(--space-lg);
}

body.layout-03 .etapa__abre::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--c3-regua));
  left: var(--pad-lateral);
  width: var(--c3-regua-destaque);
  height: var(--c3-regua);
  background: var(--grad-amber);
}

/* Numeral e rótulo lado a lado na baseline, ambos ACIMA do conteúdo (gate 54 —
 * nunca rótulo pendurado na margem ao lado do conteúdo). */
body.layout-03 .etapa__cabeca {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  font-size: var(--text-base);
}

body.layout-03 .etapa__numero {
  font-family: var(--font-serif);
  font-size: var(--c3-numero-size);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-accent);
}

/* Único background-clip: text da página — numeral-glifo decorativo, não heading. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.layout-03 .etapa__numero {
    background: var(--grad-amber);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

body.layout-03 .etapa__nome {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink);
}

body.layout-03 .etapa__corpo {
  padding-top: var(--space-xl);
}

/* ---------- Etapa 1 · a passagem em banda escura full-bleed ---------- */

body.layout-03 .banda {
  margin-top: var(--space-xl);
  background: var(--color-band);
  color: var(--color-band-ink);
  padding-block: var(--c3-pad-banda);
}

body.layout-03 .passagem__texto {
  font-size: var(--c3-passagem-size);
  font-style: normal; /* serifa ROMANA — itálico em display é vetado (38a) */
  font-weight: 500;
  line-height: var(--leading-passagem);
  letter-spacing: -0.01em;
  max-width: var(--c3-medida-passagem);
  text-indent: calc(-1 * var(--c3-recuo-aspas)); /* aspas penduradas */
}

body.layout-03 .passagem__texto::before { content: open-quote; }
body.layout-03 .passagem__texto::after { content: close-quote; }

body.layout-03 .passagem__rodape {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
}

/* Sobre a banda escura, o âmbar VIVO é o registro certo para texto (8:1). */
body.layout-03 .passagem__referencia {
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--color-accent);
}

/* A versão é nota, não voz. */
body.layout-03 .passagem__versao {
  font-size: var(--text-xs);
  color: var(--c3-banda-nota);
}

/* ---------- Etapa 2 · mensagem centrada, emoldurada por blocos mais largos ---------- */

body.layout-03 .subsecao + .subsecao {
  margin-top: var(--space-3xl);
}

body.layout-03 .subsecao__titulo {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: var(--space-lg);
}

/* Cada bloco alinha título e conteúdo na mesma medida, centrados na moldura. */
body.layout-03 .subsecao--mensagem .subsecao__titulo,
body.layout-03 .mensagem__paragrafo {
  max-width: var(--measure);
  margin-inline: auto;
}

body.layout-03 .mensagem__paragrafo + .mensagem__paragrafo {
  margin-top: var(--space-lg);
}

/* Pull-quote: o eco da frase-chave SANGRA além da coluna de leitura (48rem),
 * aberto por uma régua âmbar que cresce ao passar o mouse (o compartilhar
 * mora aqui — o hover é convite, não decoração). */
body.layout-03 .frase-chave {
  position: relative;
  margin-block: clamp(3rem, 7vw, 4.5rem);
  padding-top: var(--space-lg);
  max-width: var(--c3-medida-frase);
  margin-inline: auto;
}

body.layout-03 .frase-chave::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--c3-regua-frase);
  height: var(--c3-regua);
  background: var(--color-accent);
  transition: width var(--dur-2) var(--ease-out);
}

body.layout-03 .frase-chave:hover::before,
body.layout-03 .frase-chave:focus-within::before {
  width: min(100%, 9rem);
}

body.layout-03 .frase-chave__texto {
  font-style: normal;
  font-size: var(--c3-frase-size);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-indent: calc(-1 * var(--c3-recuo-aspas));
}

body.layout-03 .frase-chave__texto::before { content: open-quote; }
body.layout-03 .frase-chave__texto::after { content: close-quote; }

body.layout-03 .frase-chave__acao {
  margin-top: var(--space-md);
}

body.layout-03 .share-frase {
  white-space: nowrap; /* CTA de uma linha em 320/375/414/768 (gate 49) */
}

/* Curiosidades: grade que preenche a moldura no desktop. */
body.layout-03 .subsecao--curiosidades .subsecao__titulo,
body.layout-03 .curiosidades {
  max-width: var(--c3-medida-larga);
  margin-inline: auto;
}

body.layout-03 .curiosidades {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

@media (min-width: 900px) {
  body.layout-03 .curiosidades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-2xl);
  }
}

body.layout-03 .curiosidades__item {
  position: relative;
  padding-left: var(--space-lg);
}

/* Marcador meia-alvorada — eco do glifo da marca do topo fixo. */
body.layout-03 .curiosidades__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.72em;
  height: 0.36em;
  border-radius: 0.72em 0.72em 0 0;
  background: var(--color-accent);
}

/* Frases importantes: serifa romana com aspas penduradas em âmbar de texto. */
body.layout-03 .subsecao--frases .subsecao__titulo,
body.layout-03 .frases,
body.layout-03 .frases__nota {
  max-width: var(--c3-medida-frase);
  margin-inline: auto;
}

body.layout-03 .frases__item {
  font-style: normal;
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.5;
  text-indent: calc(-1 * var(--c3-recuo-aspas));
}

body.layout-03 .frases__item::before {
  content: open-quote;
  color: var(--color-accent-text);
}

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

body.layout-03 .frases__item + .frases__item {
  margin-top: var(--space-lg);
}

body.layout-03 .frases__nota {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

/* ---------- Etapa 3 · painel do checklist em largura cheia ---------- */

body.layout-03 .buscar-painel {
  position: relative;
  overflow: hidden;
  background: var(--color-paper-2);
  border-radius: var(--radius-2);
  padding: var(--c3-pad-painel);
}

body.layout-03 .buscar-painel__titulo {
  margin-bottom: var(--space-lg);
}

body.layout-03 .checklist {
  max-width: var(--measure);
}

/* O respiro à direita do painel é preenchido de propósito: meia-alvorada
 * subindo da base — elemento gráfico discreto, não deserto lateral. */
@media (min-width: 1024px) {
  body.layout-03 .buscar-painel {
    padding-block: var(--c3-pad-painel) clamp(2rem, 4vw, 3.5rem);
  }

  body.layout-03 .buscar-painel::after {
    content: "";
    position: absolute;
    right: clamp(2.5rem, 6vw, 5.5rem);
    bottom: 0;
    width: var(--c3-sol-largura);
    height: calc(var(--c3-sol-largura) / 2);
    border-radius: var(--c3-sol-largura) var(--c3-sol-largura) 0 0;
    background: var(--color-accent);
  }
}

/* ---------- Interstícios patrocinados (sem régua, sem número) ---------- */

body.layout-03 .intersticio {
  margin-top: var(--space-3xl);
}

body.layout-03 .intersticio--b {
  margin-top: var(--space-4xl);
}

body.layout-03 .intersticio .ad-card {
  max-width: 44rem;
  margin-inline: auto;
}

/* ---------- Etapa 4 · o card do vídeo usa a moldura inteira ---------- */

@media (min-width: 1024px) {
  body.layout-03 .etapa--aprofundar .video-card {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: var(--space-xl) var(--space-2xl);
  }
}

/* ---------- Rodapé ---------- */

body.layout-03 .rodape {
  margin-top: var(--space-4xl);
  padding-bottom: var(--space-3xl);
}