/* ================================================
   CEFTD — A Porta Aberta (evolução de A Casa Acesa)
   O site é a casa acesa ao anoitecer: o azul-noite das
   pinturas é a própria página; cada trabalho é uma luz.
   A capa pergunta "o que te traz aqui?" e acende um
   caminho para cada resposta — visitar, estudar, orar,
   ajudar.
   - Dark-first: um único céu, sem seções retangulares.
   - Movimento: nada desliza — tudo se acende (opacidade
     + brilho), desligado sob prefers-reduced-motion.
   - Tipos: Cormorant Garamond (títulos) + Alegreya Sans.
   ================================================ */

/* a letra do logotipo oficial (slab) só para a sigla do emblema:
   subset de 5 glifos (C E F T D), 1 KB, hospedado na própria casa */
@font-face {
  font-family: 'Sigla CEFTD';
  src: url('../assets/fonts/ceftd-sigla.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ceu-alto: #142845;      /* o anoitecer, no alto da página */
  --ceu: #0a1526;           /* a noite estabelecida */
  --ceu-fundo: #060e1c;     /* a madrugada, no fim */
  --vidro: #081020;         /* fundo das caixas de luz */
  --luz: #f4eedd;           /* branco-vela: texto principal */
  --neblina: #b9c4d6;       /* azul-neblina: texto secundário */
  --ouro: #d4af6a;          /* a luz dourada das pinturas */
  --ouro-claro: #ecd9a8;    /* ouro à meia distância */
  --ouro-foco: #f0c87e;     /* anel de foco */
  --fio-ouro: rgba(212, 175, 106, 0.38);
  --fio-neblina: rgba(185, 196, 214, 0.2);
  --brilho: rgba(212, 175, 106, 0.16);
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --sans: 'Alegreya Sans', 'Segoe UI', sans-serif;
}

/* ---------- base ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-color: rgba(212, 175, 106, 0.45) var(--ceu-fundo); }

/* rolagem suave só para navegação interna (não no carregamento com #fragmento) */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--luz);
  background-color: var(--ceu);
  background-image: linear-gradient(180deg,
    var(--ceu-alto) 0%,
    var(--ceu) 14%,
    #091320 62%,
    var(--ceu-fundo) 100%);
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ouro-claro); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #fff8e7; }

:focus-visible {
  outline: 3px solid var(--ouro-foco);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(212, 175, 106, 0.35); color: #fffbef; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 14px;
  z-index: 100;
  background: var(--ouro);
  color: #241806;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }

/* ---------- o céu (fundo de estrelas, zero requests) ---------- */

.ceu { position: relative; }

.ceu::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 11% 13%, rgba(244, 238, 221, 0.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 67% 6%, rgba(236, 217, 168, 0.6), transparent 60%),
    radial-gradient(1px 1px at 86% 27%, rgba(244, 238, 221, 0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 31% 41%, rgba(236, 217, 168, 0.45), transparent 60%),
    radial-gradient(1px 1px at 52% 62%, rgba(244, 238, 221, 0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 8% 74%, rgba(236, 217, 168, 0.4), transparent 60%),
    radial-gradient(1px 1px at 78% 84%, rgba(244, 238, 221, 0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 42% 93%, rgba(236, 217, 168, 0.45), transparent 60%);
  background-size: 1100px 1100px;
  background-repeat: repeat;
  opacity: 0.55;
}

.ceu > * { position: relative; z-index: 1; }

/* ---------- tudo se acende (estado aplicado via JS) ---------- */

[data-acende] {
  opacity: 0;
  filter: brightness(0.35);
  transition: opacity 0.9s ease, filter 1.3s ease;
}
[data-acende].acesa { opacity: 1; filter: brightness(1); }

/* ---------- emblema (CEFTD sempre abaixo da marca) ---------- */

.emblema {
  --marca: 84px;   /* a largura do livro — a sigla herda SEMPRE a mesma */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.emblema img {
  width: var(--marca);
  /* a marca é traço azul-claro: aqui vira traço de ouro */
  filter: grayscale(1) sepia(1) saturate(2.6) hue-rotate(-14deg) brightness(1.45)
          drop-shadow(0 0 10px rgba(212, 175, 106, 0.4));
}
/* a sigla na letra do logotipo: slab colada à marca, como no oficial */
/* A regra da marca: a sigla acompanha SEMPRE a largura do livro.
   O tamanho da letra deriva da própria medida da marca (--marca, em px),
   na proporção do rodapé aprovado pela diretoria (18,88px para 72px de
   livro). Como o A± do leitor mexe só em rem, a sigla e o livro ficam
   imunes JUNTOS — nunca se descolam. */
.emblema__sigla {
  font-family: 'Sigla CEFTD', var(--serif);
  font-weight: 400;
  font-size: calc(var(--marca) * 0.262);
  line-height: 1;
  color: var(--ouro-claro);
  letter-spacing: 0.14em;
  margin-top: -3px;
  margin-right: -0.14em; /* compensa o letter-spacing final */
}

/* ---------- botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, filter 0.3s ease;
}

.botao--ouro {
  background: linear-gradient(180deg, #e6c384, #c69c50);
  color: #241806;
  font-weight: 700;
  box-shadow: 0 0 28px rgba(212, 175, 106, 0.35);
}
.botao--ouro:hover { filter: brightness(1.07); box-shadow: 0 0 40px rgba(212, 175, 106, 0.55); color: #241806; }

.botao--fio {
  border-color: var(--fio-ouro);
  color: var(--ouro-claro);
  background: transparent;
}
.botao--fio:hover { background: rgba(212, 175, 106, 0.13); color: #fff8e7; }

.botao--mini { min-height: 44px; padding: 9px 18px; font-size: 0.93rem; }

.botao:disabled { opacity: 0.75; cursor: default; }

/* ---------- botão do mapa do céu ---------- */

.mapa-botao {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--fio-ouro);
  background: rgba(6, 14, 28, 0.8);
  color: var(--ouro-claro);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 22px rgba(212, 175, 106, 0.22);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.mapa-botao:hover { background: rgba(18, 35, 60, 0.9); box-shadow: 0 0 32px rgba(212, 175, 106, 0.4); }
.mapa-botao svg { filter: drop-shadow(0 0 5px rgba(236, 217, 168, 0.8)); }

/* ---------- o mapa do céu (navegação em diálogo) ---------- */

.mapa[hidden] { display: none; }

.mapa {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  display: grid;
  padding: 56px 20px 40px;
  background:
    radial-gradient(circle at 50% 24%, rgba(20, 40, 69, 0.95), rgba(6, 14, 28, 0.98) 70%);
}

.mapa::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 16% 12%, rgba(244, 238, 221, 0.8), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 18%, rgba(236, 217, 168, 0.7), transparent 60%),
    radial-gradient(1px 1px at 64% 44%, rgba(244, 238, 221, 0.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 24% 66%, rgba(236, 217, 168, 0.55), transparent 60%),
    radial-gradient(1px 1px at 88% 78%, rgba(244, 238, 221, 0.6), transparent 60%);
  background-size: 640px 640px;
  background-repeat: repeat;
  opacity: 0.6;
}

.mapa__noite {
  position: relative;
  width: min(560px, 100%);
  text-align: center;
  margin: auto; /* centra sem cortar o topo em viewports baixos */
}

.mapa__fechar {
  position: absolute;
  top: -40px;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  color: var(--luz);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.mapa__fechar:hover { color: var(--ouro-claro); }

.mapa__rubrica {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--ouro);
}

.mapa__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.3rem;
  margin: 4px 0 26px;
}

.mapa__estrelas {
  list-style: none;
  display: grid;
  gap: 4px;
  text-align: left;
}

.mapa__estrela {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 14px 11px 40px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.mapa__estrela::before {
  content: '✦';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ouro);
  font-size: 0.85rem;
  text-shadow: 0 0 8px rgba(212, 175, 106, 0.6);
  transition: text-shadow 0.25s ease, color 0.25s ease;
}
/* estrelas de grandezas diferentes: um céu, não uma lista */
.mapa__estrelas li:nth-child(3n) .mapa__estrela::before { font-size: 0.7rem; opacity: 0.85; }
.mapa__estrelas li:nth-child(4n+1) .mapa__estrela::before { font-size: 1rem; }

.mapa__estrela:hover,
.mapa__estrela:focus-visible { background: rgba(212, 175, 106, 0.12); }
.mapa__estrela:hover::before { color: var(--ouro-claro); text-shadow: 0 0 14px rgba(236, 217, 168, 0.95); }

.mapa__nome { color: var(--luz); font-weight: 500; font-size: 1.05rem; }
.mapa__hora { color: var(--neblina); font-style: italic; font-size: 0.93rem; white-space: nowrap; }

.mapa__nota { margin-top: 24px; font-size: 0.93rem; color: var(--neblina); }

/* ---------- constelação-guia (scrollspy, desktop largo) ---------- */

.guia { display: none; }

@media (min-width: 1220px) {
  .guia {
    display: block;
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
  }
  .guia__lista { list-style: none; display: grid; gap: 2px; }
  .guia__estrela {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    text-decoration: none;
  }
  .guia__estrela::before {
    content: '';
    width: 7px;
    height: 7px;
    background: rgba(212, 175, 106, 0.42);
    transform: rotate(45deg);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  .guia__estrela:hover::before { background: var(--ouro); }
  .guia__estrela.ativa::before {
    background: var(--ouro-claro);
    box-shadow: 0 0 12px rgba(236, 217, 168, 0.95);
  }
  .guia__rotulo {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: rgba(6, 14, 28, 0.92);
    border: 1px solid var(--fio-ouro);
    color: var(--luz);
    font-size: 0.85rem;
    padding: 5px 12px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .guia__estrela:hover .guia__rotulo,
  .guia__estrela:focus-visible .guia__rotulo { opacity: 1; }
}

/* ---------- fio do horizonte (passagem entre seções) ---------- */

/* sem eventos publicados, a passagem seguinte também some
   (evita dois fios de horizonte colados) */
#eventos[hidden] + .horizonte { display: none; }

.horizonte {
  height: 1px;
  width: min(680px, 76%);
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 106, 0.5), transparent);
  box-shadow: 0 0 22px rgba(212, 175, 106, 0.28);
}

/* ---------- pinturas fundidas ao céu ---------- */

.aparicao { margin: 0 auto; }

.aparicao img {
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 46%, #000 52%, transparent 97%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 46%, #000 52%, transparent 97%);
}

/* desenhos a grafite têm papel CLARO: a máscara precisa zerar ANTES da
   borda, para a cena dissolver no céu como um halo (nada de retângulo) */
.aparicao--grafite img {
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 48%, #000 55%, transparent 98%);
  mask-image: radial-gradient(circle closest-side at 50% 48%, #000 55%, transparent 98%);
}

.aparicao__legenda {
  margin-top: 2px;
  text-align: center;
  font-size: 0.93rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--neblina);
}

/* ---------- o anoitecer (abertura) ---------- */

.anoitecer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 20px 84px;
  text-align: center;
}

.anoitecer__emblema { margin-bottom: 6px; }

.anoitecer__aparicao { max-width: 980px; }

.anoitecer__voz { max-width: 780px; margin: 18px auto 0; }

.anoitecer__lema {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--ouro);
  text-shadow: 0 0 14px rgba(212, 175, 106, 0.5);
}

.anoitecer__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.3rem, 6vw, 3.7rem);
  line-height: 1.12;
  margin: 10px 0 12px;
}
.anoitecer__titulo em {
  display: block; /* "Teresa D'Ávila" sempre na linha de baixo, inteira */
  font-style: italic;
  color: var(--ouro-claro);
}

.anoitecer__sub {
  color: var(--neblina);
  font-size: 1.1rem;
  margin-bottom: 34px;
}

/* a lamparina da agenda: a semana viva da casa */
.semana {
  max-width: 460px;
  margin: 0 auto 32px;
  padding: 24px 26px 22px;
  border: 1px solid var(--fio-ouro);
  border-radius: 16px;
  background: rgba(212, 175, 106, 0.06);
  box-shadow: 0 0 44px rgba(212, 175, 106, 0.12);
}

.semana__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ouro-claro);
  margin-bottom: 12px;
}

.semana__lista { list-style: none; text-align: left; }

.semana__dia {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 2px;
  border-bottom: 1px dotted var(--fio-neblina);
}
.semana__dia:last-child { border-bottom: none; }
.semana__dia strong { font-weight: 700; }
.semana__dia span { color: var(--neblina); text-align: right; }
.semana__dia em { font-style: italic; font-size: 0.88em; }

.semana__proxima {
  margin-top: 10px;
  font-size: 0.98rem;
  color: var(--ouro-claro);
}
.semana__proxima::before { content: '✦ '; color: var(--ouro); }

.semana__youtube {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  min-height: 24px;
  font-weight: 500;
  color: var(--ouro-claro);
}

/* os caminhos: a pergunta da capa acende uma luz para cada resposta */
.caminhos { max-width: 720px; margin: 0 auto; }

.caminhos__pergunta {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--ouro-claro);
  margin-bottom: 16px;
}

.caminhos__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.caminho {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 22px;
  text-decoration: none;
  border: 1px solid var(--fio-ouro);
  border-radius: 999px;
  font-weight: 500;
  color: var(--luz);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.caminho::before {
  content: '✦';
  font-size: 0.75em;
  color: rgba(212, 175, 106, 0.55);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.caminho:hover,
.caminho:focus-visible {
  background: rgba(212, 175, 106, 0.13);
  box-shadow: 0 0 26px rgba(212, 175, 106, 0.3);
  color: #fff8e7;
}
.caminho:hover::before,
.caminho:focus-visible::before {
  color: var(--ouro);
  text-shadow: 0 0 9px rgba(212, 175, 106, 0.85);
}

.caminhos__ou {
  margin-top: 16px;
  font-size: 0.93rem;
  font-style: italic;
  color: var(--neblina);
}

/* ---------- as horas (seções) ---------- */

.hora {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(60px, 9vw, 108px) 20px;
}

.hora__cabeca {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(38px, 5vw, 56px);
}

.estrela {
  width: 17px;
  height: 17px;
  margin-bottom: 12px;
}
.estrela path {
  fill: rgba(212, 175, 106, 0.4);
  transition: fill 0.9s ease;
}
.hora__cabeca.acesa .estrela path { fill: var(--ouro); }
.hora__cabeca.acesa .estrela {
  filter: drop-shadow(0 0 7px rgba(212, 175, 106, 0.85));
}

.hora__rubrica {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ouro);
}

.hora__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  line-height: 1.15;
  margin: 8px 0 10px;
}

.hora__nota {
  color: var(--neblina);
  max-width: 60ch;
  margin: 0 auto;
}

.hora__epigrafe {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ouro-claro);
  max-width: 52ch;
  margin: 6px auto 0;
}

/* ---------- a nossa história ---------- */

.memoria { display: grid; gap: 44px; }

@media (min-width: 900px) {
  .memoria {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
  }
}

.memoria__texto p { margin-bottom: 1.1em; }

.clarao {
  margin: 26px 0;
  padding: 22px 24px;
  border: 1px solid var(--fio-ouro);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(212, 175, 106, 0.1), rgba(212, 175, 106, 0.02));
  box-shadow: 0 0 34px rgba(212, 175, 106, 0.08);
}
.clarao__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ouro-claro);
  margin-bottom: 8px;
}
.clarao__texto { color: var(--neblina); font-size: 0.99rem; }

.brasas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 26px 40px;
  margin-top: 28px;
}
.brasa { display: grid; gap: 2px; }
.brasa__valor {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--ouro-claro);
  text-shadow: 0 0 18px rgba(212, 175, 106, 0.55);
}
.brasa__rotulo {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--neblina);
}

.memoria__aparicao { max-width: 520px; width: 100%; }
.memoria__aparicao img {
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 42%, transparent 96%);
  mask-image: radial-gradient(circle at 50% 46%, #000 42%, transparent 96%);
}

/* as primeiras luzes (linha do tempo sem linha: só luzes) */

.primeiras-luzes { margin-top: clamp(56px, 8vw, 88px); }

.primeiras-luzes__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  text-align: center;
  margin-bottom: 30px;
}

.primeiras-luzes__lista {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

.primeiras-luzes__aparicao {
  max-width: 620px;
  width: 100%;
  margin: clamp(28px, 5vw, 44px) auto 0;
}

.marco {
  position: relative;
  padding: 14px 0 14px 30px;
}
.marco::before {
  content: '✦';
  position: absolute;
  left: 2px;
  top: 16px;
  color: var(--ouro);
  font-size: 0.8rem;
  text-shadow: 0 0 9px rgba(212, 175, 106, 0.7);
}
.marco__data {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ouro-claro);
}
.marco__texto { color: var(--neblina); font-size: 0.99rem; max-width: 62ch; }

@media (min-width: 680px) {
  .marco {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 22px;
    padding-left: 34px;
  }
  .marco__data { text-align: right; padding-top: 1px; }
}

/* a caminhada desliza: cada marco é um cartão-luz na trilha do tempo
   (o composto vence a grade do desktop e os padrões do corredor) */
.primeiras-luzes__lista.luzes--corredor {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  max-width: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 20px;
  scrollbar-width: none;
}
.primeiras-luzes__lista.luzes--corredor::-webkit-scrollbar { display: none; }
.primeiras-luzes__lista.luzes--corredor > .marco {
  display: block;
  flex: 0 0 auto;
  width: min(272px, 72vw);
  margin: 0;
  padding: 18px 20px 16px;
  border: 1px solid var(--fio-ouro);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(212, 175, 106, 0.09), rgba(212, 175, 106, 0.02)), var(--vidro);
  box-shadow: 0 0 24px rgba(212, 175, 106, 0.1);
  scroll-snap-align: center;
}
.primeiras-luzes__lista.luzes--corredor > .marco::before {
  position: static;
  display: block;
  margin-bottom: 4px;
}
.primeiras-luzes__lista.luzes--corredor > .marco .marco__data { text-align: left; padding-top: 0; }
.primeiras-luzes__lista.luzes--corredor > .marco:first-child { scroll-snap-align: start; }
.primeiras-luzes__lista.luzes--corredor > .marco:last-child { scroll-snap-align: end; }

.primeiras-luzes__fim {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ouro-claro);
  margin-top: 26px;
}

/* ---------- janelas acesas (atividades e ação social) ---------- */

.luzes { display: grid; gap: 46px; }

.janela { max-width: 460px; margin: 0 auto; width: 100%; }

.janela__vidro {
  position: relative;
  overflow: hidden;
  border-radius: 50% 50% 16px 16px / 30% 30% 16px 16px; /* verga arqueada */
  border: 1px solid var(--fio-ouro);
  box-shadow:
    0 0 0 7px rgba(8, 16, 32, 0.55),
    0 0 46px rgba(224, 170, 90, 0.2),
    0 10px 34px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.4s ease;
}
.janela:hover .janela__vidro {
  box-shadow:
    0 0 0 7px rgba(8, 16, 32, 0.55),
    0 0 64px rgba(224, 170, 90, 0.34),
    0 10px 34px rgba(0, 0, 0, 0.5);
}

.janela__vidro img {
  width: 100%;
  /* o interior aceso: os grafites ganham calor de lamparina */
  filter: sepia(0.16) brightness(0.95);
}

.janela__vidro::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 64px rgba(24, 14, 0, 0.32);
}

.janela__hora {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--fio-ouro);
  background: rgba(6, 14, 28, 0.85);
  color: var(--ouro-claro);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.janela__peitoril { padding: 18px 10px 0; text-align: center; }

.janela__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 6px;
}
.janela__icone { margin-right: 8px; font-size: 1.1rem; }

.janela__texto { color: var(--neblina); font-size: 0.99rem; }

.janela__horarios {
  list-style: none;
  margin-top: 10px;
  font-size: 0.95rem;
}
.janela__horarios li { padding: 2px 0; }
.janela__horarios strong { color: var(--ouro-claro); font-weight: 700; }

@media (min-width: 780px) {
  .luzes--janelas {
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    padding-bottom: 40px;
  }
  /* janelas em alturas alternadas: uma fachada, não um grid */
  .luzes--janelas > :nth-child(3n+2) { transform: translateY(40px); }
}

@media (min-width: 700px) {
  .luzes--rua {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 44px;
    padding-bottom: 30px;
  }
  .luzes--rua > :nth-child(4n+2),
  .luzes--rua > :nth-child(4n) { transform: translateY(30px); }
  .luzes--rua .janela { max-width: 520px; }
}

/* ---------- quadros de luz (estudos e eventos) ---------- */

.quadro { width: 100%; max-width: 420px; margin: 0 auto; }

.quadro__luz {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px; /* molduras sempre da MESMA altura lado a lado */
  padding: 16px;
  border: 1px solid var(--fio-ouro);
  border-radius: 12px;
  background: radial-gradient(closest-side, #13233c, var(--vidro) 96%);
  box-shadow:
    0 0 36px rgba(212, 175, 106, 0.14),
    inset 0 0 80px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.4s ease;
}
.quadro:hover .quadro__luz {
  box-shadow:
    0 0 54px rgba(212, 175, 106, 0.26),
    inset 0 0 80px rgba(0, 0, 0, 0.5);
}

.quadro__luz img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}

.quadro__legenda { padding: 16px 8px 0; }

.quadro__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.45rem;
  margin-bottom: 8px;
}

.quadro__detalhes {
  list-style: none;
  display: grid;
  gap: 5px;
  color: var(--neblina);
  font-size: 0.95rem;
  margin-bottom: 12px;
}
.quadro__detalhes li {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.quadro__detalhes svg { flex-shrink: 0; color: var(--ouro); transform: translateY(2px); }

.quadro__livros {
  color: var(--neblina);
  font-size: 0.93rem;
  font-style: italic;
  margin-bottom: 12px;
}

.quadro__texto { color: var(--neblina); font-size: 0.97rem; margin-bottom: 12px; }

/* grade de quadros (quando a seção volta ao mínimo) */
@media (min-width: 780px) {
  .luzes--quadros { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .luzes--quadros .quadro { margin: 0; max-width: none; }
}

/* o corredor: excedente segue em scroll-snap, sem autoplay,
   sem barra de rolagem aparente (regra da diretoria).
   O cartaz seguinte entra ESPIADO na borda — é ele que diz "há mais". */
.luzes--corredor {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 20px;
  scrollbar-width: none;
}
.luzes--corredor::-webkit-scrollbar { display: none; }

.luzes--corredor .quadro,
.luzes--corredor .janela {
  flex: 0 0 auto;
  width: min(292px, 70vw);
  scroll-snap-align: center;
  margin: 0;
}
.luzes--corredor .quadro:first-child,
.luzes--corredor .janela:first-child { scroll-snap-align: start; }
.luzes--corredor .quadro:last-child,
.luzes--corredor .janela:last-child { scroll-snap-align: end; }

/* no desktop, o cartaz espiado esvanece para a noite; o véu some
   quando o corredor chega ao fim (classe posta pelo cards.js) */
@media (min-width: 700px) {
  .luzes--corredor { padding-right: 28px; }
  .luzes--corredor:not(.corredor--fim) {
    -webkit-mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, 0.25) 97%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, 0.25) 97%, transparent 100%);
  }
}

/* as luzes do corredor: uma estrela por cartaz, acesas as à vista */
.corredor-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
}
.corredor-luzes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.corredor-luz {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(212, 175, 106, 0.28);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.corredor-luz.acesa {
  color: var(--ouro);
  text-shadow: 0 0 9px rgba(212, 175, 106, 0.9);
}
.corredor-conta {
  color: var(--neblina);
  font-size: 0.93rem;
  font-style: italic;
}

/* cartazes de alturas diferentes: a legenda estica e o botão
   ancora embaixo — as molduras seguem da mesma altura */
.luzes--corredor .quadro {
  display: flex;
  flex-direction: column;
}
.luzes--corredor .quadro__legenda {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.luzes--corredor .quadro__legenda .botao {
  margin-top: auto;
  align-self: flex-start;
}

.corredor-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
}
.corredor-nav__seta {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--fio-ouro);
  background: transparent;
  color: var(--ouro-claro);
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.corredor-nav__seta:hover { background: rgba(212, 175, 106, 0.14); box-shadow: 0 0 18px rgba(212, 175, 106, 0.3); }

@media (min-width: 820px) {
  .luzes--eventos { grid-template-columns: repeat(2, 1fr); gap: 44px; }
  .luzes--eventos .quadro { max-width: 480px; }
  .luzes--eventos .quadro__luz { height: 460px; }
}

/* ---------- a estante acesa ---------- */

.estante { margin-top: clamp(60px, 8vw, 92px); text-align: center; }

.estante__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  margin-bottom: 8px;
}

.estante__sub {
  color: var(--neblina);
  max-width: 58ch;
  margin: 0 auto 30px;
}
/* a legenda da prateleira de baixo respira depois da borda iluminada */
.estante__sub--complementares { margin-top: 38px; }

.estante__vitrine {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;   /* o topo das capas nivelado, os rótulos descem */
  gap: 26px 30px;
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 24px;
  position: relative;
}
/* a borda iluminada da estante */
.estante__vitrine::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 106, 0.55), transparent);
  box-shadow: 0 0 20px rgba(212, 175, 106, 0.35);
}

/* as apostilas dos encontros: capas tipográficas, desenhadas em CSS */
.apostilas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px 26px;
  max-width: 1000px;
  margin: 0 auto;
}
.apostilas > li { width: 204px; }

/* a estante desliza como o corredor dos cursos: espiar + luzes + setas.
   (o composto vence os padrões de .apostilas e de .luzes--corredor) */
.apostilas.luzes--corredor {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 26px;
  max-width: none;
  margin: 0;
  padding: 6px 4px 20px;
}
.apostilas.luzes--corredor > li {
  flex: 0 0 auto;
  width: min(204px, 62vw);
  scroll-snap-align: center;
}
.apostilas.luzes--corredor > li:first-child { scroll-snap-align: start; }
.apostilas.luzes--corredor > li:last-child { scroll-snap-align: end; }

/* as séries dos encontros: cartas com a vinheta grande, lado a lado
   num trilho que cresce como corredor; clicar abre a estante embaixo */
.series { list-style: none; }
.series.luzes--corredor > li {
  flex: 0 0 auto;
  width: min(216px, 62vw);
  scroll-snap-align: center;
}
/* margens automáticas nas pontas: centram as cartas quando sobra espaço,
   sem quebrar a rolagem quando o trilho estoura */
.series.luzes--corredor > li:first-child { scroll-snap-align: start; margin-left: auto; }
.series.luzes--corredor > li:last-child { scroll-snap-align: end; margin-right: auto; }

.serie-carta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 10px 10px 12px;
  border: 1px solid var(--fio-ouro);
  border-radius: 14px;
  background: radial-gradient(120% 160% at 50% 0%, #13233c, var(--vidro) 96%);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.serie-carta:hover {
  border-color: rgba(212, 175, 106, 0.7);
  box-shadow: 0 0 24px rgba(212, 175, 106, 0.18);
}
.serie-carta:focus-visible {
  outline: 2px solid var(--ouro-foco);
  outline-offset: 3px;
}
.serie-carta[aria-expanded="true"] {
  border-color: rgba(212, 175, 106, 0.7);
  box-shadow: 0 0 28px rgba(212, 175, 106, 0.25);
}

/* a vinheta grande da série: quadrada, mesma altura em todas as cartas */
.serie-carta__vinheta {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--fio-ouro);
}
.serie-carta__nome {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--luz);
}
.serie-carta__conta {
  font-size: 0.93rem;
  letter-spacing: 0.06em;
  color: var(--neblina);
}

/* a estrela da carta: apagada fechada, acesa e girada aberta */
.serie-carta__estrela {
  margin-top: auto;
  color: rgba(212, 175, 106, 0.35);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.4s ease, color 0.4s ease, text-shadow 0.4s ease;
}
.serie-carta[aria-expanded="true"] .serie-carta__estrela {
  transform: rotate(45deg);
  color: var(--ouro);
  text-shadow: 0 0 10px rgba(212, 175, 106, 0.9);
}

/* o painel que a carta abre (o JS esconde os fechados) */
.serie-painel { margin-top: 16px; }

.apostila {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
  text-align: center;
  text-decoration: none;
}
/* a capa real da apostila, num quadro de luz em miniatura
   (altura fixa: molduras sempre iguais lado a lado) */
.apostila__quadro {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 272px;
  padding: 10px;
  border: 1px solid var(--fio-ouro);
  border-radius: 8px;
  background: radial-gradient(closest-side, #13233c, var(--vidro) 96%);
  box-shadow: 0 0 24px rgba(212, 175, 106, 0.12), inset 0 0 40px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.apostila__quadro img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
.apostila:hover .apostila__quadro,
.apostila:focus-visible .apostila__quadro {
  border-color: rgba(212, 175, 106, 0.7);
  box-shadow: 0 0 30px rgba(212, 175, 106, 0.3), inset 0 0 40px rgba(0, 0, 0, 0.5);
}
.apostila__serie {
  margin-top: 3px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.55;
  color: var(--neblina);
}
.apostila__tema {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ouro-claro);
}
.apostila__meta {
  font-size: 0.93rem;
  letter-spacing: 0.06em;
  color: var(--neblina);
}

.estante__livro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 118px;
  text-decoration: none;
  color: var(--neblina);
  font-size: 0.93rem;
  line-height: 1.35;
}
/* rótulos com a mesma altura: as capas assentam na mesma prateleira */
.estante__livro span { min-height: 4.05em; }  /* três linhas: o maior rótulo da estante */
.estante__livro img {
  width: 77px;
  box-shadow:
    0 0 22px rgba(212, 175, 106, 0.25),
    0 8px 18px rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.estante__livro:hover img,
.estante__livro:focus-visible img {
  box-shadow:
    0 0 34px rgba(212, 175, 106, 0.5),
    0 8px 18px rgba(0, 0, 0, 0.55);
  filter: brightness(1.08);
}
.estante__livro:hover span { color: var(--luz); }

/* ---------- a hora da luz (preces) ---------- */

.vigilia { display: grid; gap: 44px; }

@media (min-width: 900px) {
  .vigilia {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: center;
  }
}

.vigilia__aparicao { max-width: 480px; width: 100%; }

.vigilia__texto { margin-bottom: 16px; }

.vigilia__regras {
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--neblina);
  font-size: 0.98rem;
  margin-bottom: 18px;
}
.vigilia__regras li {
  position: relative;
  padding-left: 24px;
}
.vigilia__regras li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--ouro);
  font-size: 0.75rem;
}

.vigilia__horario {
  padding: 16px 20px;
  border: 1px solid var(--fio-ouro);
  border-radius: 12px;
  background: rgba(212, 175, 106, 0.07);
  box-shadow: 0 0 30px rgba(212, 175, 106, 0.1);
  margin-bottom: 12px;
}
.vigilia__horario strong { color: var(--ouro-claro); }

.vigilia__hoje {
  color: var(--ouro-claro);
  margin-bottom: 18px;
}
.vigilia__hoje::before { content: '✦ '; color: var(--ouro); }

/* ---------- para manter as luzes acesas (contribuir) ---------- */

/* venha servir: a porta do voluntariado abre o capítulo */
.servir {
  max-width: 680px;
  margin: 0 auto clamp(34px, 5vw, 52px);
  padding: 26px 28px;
  text-align: center;
  border: 1px solid var(--fio-ouro);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(212, 175, 106, 0.1), rgba(212, 175, 106, 0.02));
  box-shadow: 0 0 34px rgba(212, 175, 106, 0.08);
}
.servir__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--ouro-claro);
  margin-bottom: 10px;
}
.servir__texto {
  color: var(--neblina);
  font-size: 0.99rem;
  max-width: 56ch;
  margin: 0 auto 18px;
}
.servir__botao { text-decoration: none; }

/* ---------- o convite (porta para /palestras, dentro de Atividades) ---------- */

.convite {
  max-width: 680px;
  margin: clamp(40px, 6vw, 62px) auto 0;
  padding: 28px 28px 30px;
  text-align: center;
  border: 1px solid var(--fio-ouro);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(212, 175, 106, 0.1), rgba(212, 175, 106, 0.02));
  box-shadow: 0 0 34px rgba(212, 175, 106, 0.08);
}
.convite__rubrica {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ouro);
  margin-bottom: 8px;
}
.convite__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--ouro-claro);
  margin-bottom: 10px;
}
.convite__texto {
  color: var(--neblina);
  font-size: 0.99rem;
  max-width: 56ch;
  margin: 0 auto 20px;
}
.convite__botao { text-decoration: none; }

.oferta__aparicao { max-width: 860px; margin-bottom: clamp(30px, 5vw, 48px); }

.lanternas {
  display: grid;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 760px) {
  .lanternas { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}

.lanterna {
  padding: 28px 26px;
  border: 1px solid var(--fio-ouro);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(212, 175, 106, 0.1), rgba(212, 175, 106, 0.02));
  box-shadow: 0 0 38px rgba(212, 175, 106, 0.1);
}

.lanterna__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ouro-claro);
  margin-bottom: 14px;
}

.lanterna__dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin-bottom: 20px;
}
.lanterna__dados dt {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neblina);
  padding-top: 4px;
}
.lanterna__dados dd { overflow-wrap: anywhere; }
.lanterna__pix { font-weight: 700; color: var(--ouro-claro); }

.oferta__agradecimento {
  text-align: center;
  margin-top: clamp(30px, 5vw, 44px);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ouro-claro);
}
.oferta__cnpj {
  text-align: center;
  color: var(--neblina);
  font-size: 0.93rem;
  margin-top: 8px;
}

/* ---------- a porta aberta (contato) ---------- */

.porta { display: grid; gap: 44px; }

@media (min-width: 940px) {
  .porta {
    grid-template-columns: 1fr 1.1fr;
    gap: 52px;
    align-items: start;
  }
}

.porta__endereco {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.porta__icone { color: var(--ouro); flex-shrink: 0; margin-top: 4px; filter: drop-shadow(0 0 6px rgba(212, 175, 106, 0.5)); }
.porta__linha { font-size: 1.15rem; }
.porta__maps { display: inline-block; margin-top: 8px; font-weight: 500; }

.porta__fio {
  border: none;
  border-top: 1px solid var(--fio-neblina);
  margin: 24px 0;
}

.porta__subtitulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  margin-bottom: 14px;
}

.redes { display: flex; flex-wrap: wrap; gap: 12px; }

.rede {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--fio-ouro);
  border-radius: 999px;
  color: var(--ouro-claro);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.97rem;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.rede:hover { background: rgba(212, 175, 106, 0.13); box-shadow: 0 0 20px rgba(212, 175, 106, 0.25); color: #fff8e7; }

.porta__email {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ouro);
}
.porta__email-link { overflow-wrap: anywhere; }

.porta__mapa { max-width: 640px; }
.porta__mapa iframe {
  display: block;
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--fio-ouro);
  box-shadow: 0 0 36px rgba(212, 175, 106, 0.14);
  /* o mapa também anoitece */
  filter: invert(0.9) hue-rotate(185deg) saturate(0.62) brightness(0.92) contrast(0.95);
}
.porta__mapa-legenda {
  margin-top: 10px;
  text-align: center;
  font-size: 0.93rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--neblina);
}

/* ---------- a madrugada (pé de página) ---------- */

.madrugada {
  background: var(--ceu-fundo);
  border-top: 1px solid rgba(212, 175, 106, 0.2);
  padding: 56px 20px 36px;
  text-align: center;
}

.madrugada__emblema { margin-bottom: 14px; }
.madrugada__emblema { --marca: 72px; }

.madrugada__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--neblina);
  margin-bottom: 26px;
}

.madrugada__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
}
.madrugada__link {
  display: inline-block;
  padding: 4px 2px;
  color: var(--neblina);
  text-decoration: none;
  font-size: 0.95rem;
}
.madrugada__link:hover { color: var(--ouro-claro); text-decoration: underline; }

.madrugada__fio {
  border: none;
  border-top: 1px solid var(--fio-neblina);
  max-width: 560px;
  margin: 26px auto 20px;
}

.madrugada__copy { color: var(--neblina); font-size: 0.93rem; }

/* ---------- movimento reduzido: tudo já nasce aceso ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html:focus-within { scroll-behavior: auto; }
  [data-acende] { opacity: 1; filter: none; }
}
/* ================================================
   ALVOS PARA DEDOS DE SESSENTA ANOS
   A área de toque cresce por baixo, invisível: o desenho
   não muda um pixel, o dedo é que passa a acertar.
   ================================================ */
.corredor-luz { position: relative; }
.corredor-luz::after { content: ''; position: absolute; inset: -7px; }
.guia__estrela { position: relative; }
.guia__estrela::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.semana__youtube,
.porta__maps,
.porta__email-link,
.madrugada__link {
  padding-block: 8px;
  margin-block: -8px;
}

/* ================================================
   CONFORTO DE LEITURA — os óculos da casa
   O canto dos instrumentos: a rosa-dos-ventos (Mapa) em cima,
   os óculos embaixo. O toque desce um vidrinho com "Mais luz"
   e a letra. Fixo: não some na rolagem nem disputa o emblema.
   ================================================ */
/* Os óculos ocupam o canto VAGO de cada página. Na casa, o Mapa mora no
   direito — os óculos espelham no esquerdo, e as duas luzes flanqueiam o
   emblema centrado. Na /palestras é o emblema que mora no esquerdo — os
   óculos ficam no direito. */
.leitura {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
}
body.tem-mapa .leitura { right: auto; left: 16px; }

.leitura__oculos {
  display: grid;
  place-items: center;
  width: 56px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--fio-ouro);
  background: rgba(6, 14, 28, 0.8);
  color: var(--ouro-claro);
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 22px rgba(212, 175, 106, 0.22);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.leitura__oculos:hover {
  background: rgba(18, 35, 60, 0.9);
  box-shadow: 0 0 32px rgba(212, 175, 106, 0.4);
}
.leitura__oculos[aria-expanded="true"] {
  background: rgba(212, 175, 106, 0.24);
  color: #fff8e7;
}
.leitura__oculos svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(236, 217, 168, 0.5));
}

.leitura__veu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 176px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--fio-ouro);
  background: rgba(6, 14, 28, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
/* na casa o vidrinho desce pelo lado esquerdo — SÓ a ancoragem muda aqui:
   qualquer outra propriedade nesta regra vence o [hidden] e o modo dia
   por especificidade, e o vidrinho nasce aberto (aconteceu; não repetir) */
body.tem-mapa .leitura__veu {
  right: auto;
  left: 0;
}
/* depois de tudo, para ninguém vencer o fechado */
.leitura__veu[hidden] { display: none; }
.leitura__veu button {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--fio-ouro);
  background: transparent;
  color: var(--ouro-claro);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.leitura__letras {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.leitura__letras button:nth-child(2) { font-size: 1.02rem; }
.leitura__letras button:nth-child(3) { font-size: 1.14rem; }
.leitura__veu button:hover { background: rgba(212, 175, 106, 0.12); }
.leitura__veu button[aria-pressed="true"] {
  background: rgba(212, 175, 106, 0.22);
  color: #fff8e7;
}

/* ================================================
   O DIA — [data-tema="dia"]
   A mesma casa com as cortinas abertas: o papel é o branco-vela
   que sempre foi a cor da letra, a tinta é o azul da noite, o
   dourado escurece só o bastante para escrever (11:1 no papel).
   A noite não vai embora: o Mapa do Céu, os crachás sobre as
   fotos e os quadros de luz continuam noturnos — de dia, as
   janelas guardam a noite.
   ================================================ */
:root[data-tema="dia"] {
  --ceu-alto: #eee6d0;
  --ceu: #f7f2e5;
  --ceu-fundo: #f1ead8;
  --vidro: #fdfaf1;
  --luz: #182740;
  --neblina: #3d4c66;
  --ouro: #63490f;
  --ouro-claro: #63490f;
  --ouro-foco: #8a6b2f;
  --fio-ouro: rgba(99, 73, 15, 0.42);
  --fio-neblina: rgba(24, 39, 64, 0.24);
  --brilho: rgba(99, 73, 15, 0.1);
  scrollbar-color: rgba(99, 73, 15, 0.5) #f1ead8;
}

/* hovers que iam para o branco-vela agora vão para a tinta */
[data-tema="dia"] a:hover { color: #241806; }
[data-tema="dia"] ::selection { color: #182740; }
[data-tema="dia"] .botao--fio:hover { color: #241806; }
[data-tema="dia"] .rede:hover { color: #241806; }
[data-tema="dia"] .caminho:hover,
[data-tema="dia"] .caminho:focus-visible { color: #241806; }

/* o botão do Mapa vira vidro de papel */
[data-tema="dia"] .mapa-botao { background: rgba(253, 250, 241, 0.88); }
[data-tema="dia"] .mapa-botao:hover { background: #fdfaf1; }

/* onde a noite fica guardada: o fundo desses lugares é a própria
   noite (hardcoded), então os tokens voltam aos valores noturnos */
[data-tema="dia"] .janela__hora,
[data-tema="dia"] .guia__rotulo {
  --ceu-alto: #142845;
  --ceu: #0a1526;
  --vidro: #081020;
  --luz: #f4eedd;
  --neblina: #b9c4d6;
  --ouro: #d4af6a;
  --ouro-claro: #ecd9a8;
  --ouro-foco: #f0c87e;
  --fio-ouro: rgba(212, 175, 106, 0.38);
  --fio-neblina: rgba(185, 196, 214, 0.2);
  --brilho: rgba(212, 175, 106, 0.16);
}

/* os quadros de luz guardam a noite: capas e cartazes num vidro escuro */
[data-tema="dia"] .apostila__quadro,
[data-tema="dia"] .quadro__luz {
  background: radial-gradient(closest-side, #13233c, #081020 96%);
  border-color: rgba(212, 175, 106, 0.38);
}
/* o corpo tem um degrau de cor fixo no meio do gradiente — de dia ele é papel */
[data-tema="dia"] body {
  background-image: linear-gradient(180deg,
    var(--ceu-alto) 0%,
    var(--ceu) 14%,
    #f5efdf 62%,
    var(--ceu-fundo) 100%);
}

/* de dia não se veem as estrelas */
[data-tema="dia"] .ceu::before { opacity: 0; }

/* a carta da série vira papel — a vinheta escura já faz a moldura */
[data-tema="dia"] .serie-carta {
  background: radial-gradient(120% 160% at 50% 0%, #efe8d4, var(--vidro) 96%);
}
/* o atalho de teclado e o crachá das janelas, no dia */
[data-tema="dia"] .skip-link { background: #182740; color: #f7f2e5; }
[data-tema="dia"] .janela__hora { background: rgba(6, 14, 28, 0.94); }
/* o conforto de leitura, de dia: vidro de papel */
[data-tema="dia"] .leitura__oculos,
[data-tema="dia"] .leitura__veu { background: rgba(253, 250, 241, 0.92); }
[data-tema="dia"] .leitura__oculos:hover { background: #fdfaf1; }
[data-tema="dia"] .leitura__oculos svg { filter: none; }
[data-tema="dia"] .leitura__veu button:hover { background: rgba(99, 73, 15, 0.08); }
[data-tema="dia"] .leitura__oculos[aria-expanded="true"],
[data-tema="dia"] .leitura__veu button[aria-pressed="true"] {
  background: rgba(99, 73, 15, 0.14);
  color: #241806;
}
/* o Mapa do Céu acompanha a escolha do leitor: de dia é um mapa de papel
   — sem estrelas (de dia não se veem) e sem os brilhos de vela */
[data-tema="dia"] .mapa {
  background:
    radial-gradient(circle at 50% 24%, rgba(253, 250, 241, 0.97), rgba(238, 230, 208, 0.98) 70%);
}
[data-tema="dia"] .mapa::before { opacity: 0; }
[data-tema="dia"] .mapa__estrela::before { text-shadow: none; }
[data-tema="dia"] .mapa__estrela:hover::before { text-shadow: none; color: #241806; }
[data-tema="dia"] .mapa__fechar:hover { color: #241806; }