/* ===========================================================================
   NOSSA CAMINHADA — estilos
   Organizado em blocos. Procure pelo titulo do bloco para achar o que quer.
   =========================================================================== */

/* --- 1. VARIAVEIS ---------------------------------------------------------
   Tudo que se repete mora aqui. Mudou aqui, muda no site inteiro.
   Ex: trocar --dourado muda todos os detalhes dourados de uma vez.          */
:root {
  --papel:        #f6f1e8;   /* fundo, cor de papel envelhecido */
  --papel-fundo:  #ede5d8;   /* fundo de secoes alternadas */
  --tinta:        #2b2724;   /* texto principal, preto quente */
  --tinta-suave:  #6f655a;   /* texto secundario */
  --tinta-tenue:  #9c9184;   /* rotulos, datas */
  --dourado:      #a07d4a;   /* detalhes */
  --linha:        #ddd2c0;   /* filetes e bordas */
  --escuro:       #1c1a18;   /* secoes sobrias */

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --corpo:   "Lora", Georgia, "Times New Roman", serif;

  --texto-largura:  34rem;   /* largura maxima de um paragrafo, para leitura */
  --pagina-largura: 68rem;
}

/* --- 2. BASE -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }

/* Quem configurou o sistema para "reduzir movimento" nao recebe animacao.
   Nao e' enfeite: existe gente que passa mal com movimento na tela.        */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- 3. ABERTURA EM TELA CHEIA -------------------------------------------- */
.abertura {
  position: relative;
  /* 100dvh = altura REAL visivel no celular. O 100vh de cima e' so' o plano B
     para navegador antigo: sozinho ele conta a barra de endereco e a tela
     "pula" quando a barra some.                                            */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3rem 1.5rem 5rem;
  overflow: hidden;
  color: #fff;
}

.abertura__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* preenche a tela sem distorcer */
  object-position: center 35%; /* mantem o ceu e o horizonte no quadro */
  z-index: 0;
}

/* Veu escuro por cima da foto: sem ele o texto branco some no ceu claro. */
.abertura__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Duas camadas: a de cima escurece o centro onde o texto mora (senao os
     numeros somem na agua e nas balaustradas); a de baixo faz o degrade
     geral, mais forte em cima e embaixo.                                   */
  background:
    radial-gradient(ellipse 92% 52% at 50% 46%,
      rgba(10, 14, 20, .46) 0%,
      rgba(10, 14, 20, .16) 62%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(18, 24, 34, .60) 0%,
      rgba(18, 24, 34, .34) 36%,
      rgba(18, 24, 34, .44) 66%,
      rgba(18, 24, 34, .80) 100%);
}

.abertura__conteudo {
  position: relative;
  z-index: 2;
  /* width:100% e' obrigatorio aqui. Sem ele, o "place-items: center" do
     .abertura encolhe esta caixa ate' o tamanho do conteudo — e como o
     max-width e' 46rem (736px), num celular de 430px ela fica MAIOR que a
     tela e o texto vaza pelas laterais.                                    */
  width: 100%;
  max-width: 46rem;
}

.abertura__sobretitulo {
  margin: 0 0 1.6rem;
  /* No celular a frase e' longa e quebrava feio em "...2 ANOS DE / NAMORO".
     Menor e com menos espacamento, cabe em uma linha so'.                  */
  font-size: clamp(.7rem, 2.6vw, .78rem);
  letter-spacing: clamp(.11em, .6vw, .19em);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  font-weight: 400;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
  /* Em tela estreita a frase quebra em duas linhas. "balance" faz o
     navegador dividir em partes iguais, em vez de deixar uma linha cheia
     e uma solitaria embaixo.                                              */
  text-wrap: balance;
}

.abertura__titulo {
  margin: 0 0 2.6rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.9rem, 11vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: .005em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.abertura__nota {
  margin: 2.6rem auto 0;
  max-width: 30rem;
  font-size: .95rem;
  font-style: italic;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  text-wrap: pretty;
}

/* --- 4. CONTADOR ---------------------------------------------------------- */
.contador {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem .5rem;
  max-width: 30rem;
  margin: 0 auto;
}
@media (min-width: 40rem) {
  .contador { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 42rem; }
}

.contador__unidade { display: flex; flex-direction: column; align-items: center; gap: .3rem; }

.contador__numero {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.1rem, 7vw, 3.1rem);
  line-height: 1;
  /* Numeros de largura fixa: sem isso o "1" e' mais estreito que o "8"
     e o contador treme a cada segundo.                                     */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-shadow: 0 1px 16px rgba(0, 0, 0, .45);
}

.contador__rotulo {
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

/* Versao clara, usada no fechamento sobre o papel */
.contador--claro .contador__numero { color: var(--tinta); text-shadow: none; }
.contador--claro .contador__rotulo { color: var(--tinta-tenue); text-shadow: none; }

/* --- 5. CONVITE PARA ROLAR ------------------------------------------------ */
.rolar {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.rolar__linha {
  width: 1px;
  height: 3.4rem;
  background: linear-gradient(#fff, rgba(255,255,255,0));
  /* Uma linha de 1px sobre madeira escura simplesmente some. O brilho faz
     ela existir sobre qualquer fundo sem virar um traco grosso.            */
  box-shadow: 0 0 10px rgba(255, 255, 255, .55);
  animation: respirar 2.8s ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { opacity: .62; transform: scaleY(.72); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}


/* --- 6. REVELAR AO ROLAR -------------------------------------------------- */
/* A classe .js e' posta pelo proprio JavaScript no <html>. Assim, se o JS
   nao rodar, nada disso vale e o conteudo aparece normal em vez de ficar
   invisivel para sempre.                                                    */
.js .revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s ease, transform .95s cubic-bezier(.2, .65, .25, 1);
}
.js .revelar--visivel { opacity: 1; transform: none; }
/* O texto entra um instante depois da foto. */
.js .capitulo__texto.revelar { transition-delay: .12s; }

/* --- 7. CAPITULOS: BASE --------------------------------------------------- */
.capitulo { padding: clamp(4.5rem, 11vh, 8.5rem) 1.5rem; }

.capitulo__grade {
  max-width: var(--pagina-largura);
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.capitulo__midia { margin: 0; max-width: 32rem; width: 100%; justify-self: center; }

.capitulo__midia img,
.capitulo__midia video {
  /* Limitar SO' a largura nao basta. Um print de celular e' 1170x2532: a
     512px de largura ele fica com 1100px de altura e engole o texto ao lado.
     Com width:auto + max-width + max-height o navegador respeita as duas
     bordas e encolhe proporcionalmente — quem manda e' a restricao mais
     apertada, entao foto deitada usa a largura e foto em pe' usa a altura. */
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 68vh;
  height: auto;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--papel-fundo);
  box-shadow:
    0 20px 50px -28px rgba(60, 45, 30, .55),
    0 2px 10px -5px rgba(60, 45, 30, .22);
  /* O parallax escreve --deslocamento aqui. So' transform: o navegador
     resolve na placa de video sem recalcular o layout da pagina.           */
  transform: translateY(var(--deslocamento, 0));
}

.capitulo__midia figcaption {
  margin-top: .85rem;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  text-align: center;
}

.capitulo__texto { max-width: var(--texto-largura); }

.capitulo__rotulo {
  margin: 0 0 .75rem;
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.capitulo__titulo {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: .005em;
}

.capitulo__texto p { margin: 0 0 1.15rem; text-wrap: pretty; }
.capitulo__texto p:last-child { margin-bottom: 0; }

/* --- 8. FORMATO: NORMAL (foto de um lado, texto do outro) ----------------- */
@media (min-width: 52rem) {
  .capitulo--normal .capitulo__grade { grid-template-columns: 1fr 1fr; }
  /* Zigue-zague: nos capitulos pares a foto vai para a direita. */
  .capitulo--espelhado .capitulo__midia { order: 2; }
  .capitulo--normal .capitulo__texto { justify-self: start; }
  .capitulo--espelhado .capitulo__texto { justify-self: end; }
}

/* --- 9. FORMATO: DESTAQUE (os dois pedidos) ------------------------------- */
.capitulo--destaque {
  background: var(--papel-fundo);
  padding-block: clamp(6rem, 15vh, 11rem);
}
.capitulo--destaque .capitulo__grade {
  max-width: 54rem;
  justify-items: center;
  text-align: center;
}
.capitulo--destaque .capitulo__midia { max-width: 40rem; }
.capitulo--destaque .capitulo__titulo {
  font-size: clamp(2.6rem, 8vw, 4.2rem);
  font-weight: 300;
}
.capitulo--destaque .capitulo__texto { max-width: 38rem; }

/* --- 10. FORMATO: SOBRIO (o dia mais dificil) ----------------------------- */
.capitulo--sobrio {
  background: var(--escuro);
  color: #cfc7bc;
  padding-block: clamp(7rem, 18vh, 12rem);
}
.capitulo--sobrio .capitulo__grade {
  max-width: 46rem;
  justify-items: center;
  text-align: center;
  gap: clamp(2.5rem, 6vw, 4rem);
}
/* Aqui a foto vem DEPOIS do texto: primeiro o que aconteceu, depois a
   familia inteira. A ordem importa neste capitulo.                         */
.capitulo--sobrio .capitulo__midia { order: 2; max-width: 30rem; }
.capitulo--sobrio .capitulo__midia img { max-height: 52vh; }
.capitulo--sobrio .capitulo__titulo { color: #efe8de; font-weight: 300; }
.capitulo--sobrio .capitulo__rotulo { color: #8c8177; }
.capitulo--sobrio .capitulo__midia img { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9); }

/* --- 11. FORMATO: SO' TEXTO (respiro entre capitulos) --------------------- */
.capitulo--so-texto .capitulo__grade {
  max-width: 42rem;
  justify-items: center;
  text-align: center;
}
.capitulo--so-texto .capitulo__texto { max-width: 36rem; }
/* Um filete curto acima do titulo, como a dobra de uma carta. */
.capitulo--so-texto .capitulo__titulo::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 0 auto 1.8rem;
  background: var(--dourado);
  opacity: .55;
}

/* --- 12. FORMATO: ROTULO (so' lugar e data) ------------------------------- */
.capitulo--rotulo .capitulo__grade { justify-items: center; text-align: center; }
.capitulo--rotulo .capitulo__titulo { margin-bottom: 0; }

/* Barcelona 2025: duas fotos lado a lado, cada uma com sua legenda. */
.capitulo--par .capitulo__grade { max-width: 56rem; }
@media (min-width: 52rem) {
  .capitulo--par .capitulo__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capitulo--par .capitulo__texto { grid-column: 1 / -1; }
  .capitulo--par .capitulo__midia { max-width: 100%; }
}

/* --- 13. O CONTADOR PEQUENO DE BARCELONA ---------------------------------- */
.capitulo__marco {
  margin: 2.6rem auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linha);
  max-width: 30rem;
}
.capitulo__marco-legenda {
  margin: 0 0 1.1rem;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.contador--miudo { gap: .9rem .4rem; max-width: 28rem; }
.contador--miudo .contador__numero { font-size: clamp(1.25rem, 4vw, 1.6rem); }
.contador--miudo .contador__rotulo { font-size: .56rem; letter-spacing: .12em; }

/* --- 14. VIDEO ------------------------------------------------------------ */
.capitulo__midia--video video { display: block; }
.capitulo--com-video .capitulo__midia--video { margin-top: 1rem; }

/* --- 15. GALERIA (carrossel) ---------------------------------------------- */
.galeria {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
.capitulo--destaque .galeria { max-width: 42rem; }

.galeria__trilho {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* scroll-snap: a rolagem "para" encaixada numa foto em vez de ficar no meio.
     E' o que faz o deslizar no celular parecer um carrossel de verdade,
     sem uma linha de JavaScript.                                            */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;              /* Firefox */
  padding-bottom: .25rem;
}
.galeria__trilho::-webkit-scrollbar { display: none; }

.galeria__item {
  flex: 0 0 auto;
  /* 88% deixa a proxima foto espiando na borda: e' o que avisa que tem mais
     coisa para o lado. Sem isso ninguem descobre que rola.                  */
  width: 88%;
  height: min(58vh, 30rem);
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 2px;
}
@media (min-width: 52rem) {
  .galeria__item { width: 100%; }
}

.galeria__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* Sem estas duas linhas o max-height acima NAO funciona.
     Todo item de grid (e de flex) nasce com min-height/min-width: auto, que
     significa "nunca encolha abaixo do tamanho natural do conteudo". Uma foto
     de 800px de altura entao ignorava o limite de 480px, vazava do carrossel
     e aparecia cortada embaixo. Zerar o minimo devolve o poder ao maximo.   */
  min-height: 0;
  min-width: 0;
  border-radius: 2px;
  box-shadow:
    0 20px 50px -28px rgba(60, 45, 30, .55),
    0 2px 10px -5px rgba(60, 45, 30, .22);
  transition: transform .5s cubic-bezier(.2, .65, .25, 1);
}
.galeria__item:hover img { transform: scale(1.015); }
.galeria__item:focus-visible { outline: 2px solid var(--dourado); outline-offset: 6px; }

.galeria__contagem {
  margin: .9rem 0 0;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
}

.galeria__seta {
  position: absolute;
  top: calc(min(58vh, 30rem) / 2);
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: rgba(255, 253, 249, .92);
  color: var(--tinta);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: none;                       /* no celular ela desliza o dedo */
  place-items: center;
  transition: opacity .25s ease, background .25s ease;
  box-shadow: 0 4px 14px -6px rgba(60, 45, 30, .4);
}
.galeria__seta--anterior { left: -1.1rem; }
.galeria__seta--proxima  { right: -1.1rem; }
.galeria__seta:disabled  { opacity: 0; pointer-events: none; }
.galeria__seta:hover     { background: #fff; }
@media (min-width: 52rem) { .galeria__seta { display: grid; } }

.capitulo--sobrio .galeria__seta {
  background: rgba(30, 28, 26, .9);
  border-color: #443f39;
  color: #e8e1d7;
}

/* --- 16. LIGHTBOX (foto ampliada) ----------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(14, 12, 10, .93);
  backdrop-filter: blur(3px);
}
.lightbox[hidden] { display: none; }

.lightbox__foto {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}

.lightbox__fechar,
.lightbox__seta {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .25s ease, opacity .25s ease;
}
.lightbox__fechar:hover,
.lightbox__seta:hover { background: rgba(255, 255, 255, .2); }
.lightbox__seta:disabled { opacity: .2; pointer-events: none; }

.lightbox__fechar {
  top: 1rem; right: 1rem;
  width: 2.8rem; height: 2.8rem;
  font-size: 1.7rem; line-height: 1;
}
.lightbox__seta {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem; height: 3rem;
  font-size: 1.6rem; line-height: 1;
}
.lightbox__seta--anterior { left: clamp(.5rem, 2vw, 2rem); }
.lightbox__seta--proxima  { right: clamp(.5rem, 2vw, 2rem); }

.lightbox__contagem {
  position: absolute;
  bottom: 1.2rem;
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: .72rem;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}

/* --- 17. MOTIVOS QUE EU TE AMO -------------------------------------------- */
.motivos {
  background: var(--papel-fundo);
  padding: clamp(5.5rem, 14vh, 9rem) 1.5rem;
  text-align: center;
}
.motivos__caixa { max-width: 38rem; margin: 0 auto; }

.motivos__titulo {
  margin: 0 0 2.6rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.15;
  color: var(--tinta);
}

.motivos__texto {
  /* Altura minima reservada para 3 linhas. Sem isso, quando um motivo curto
     substitui um longo a pagina "pula" e o botao foge do dedo dela.        */
  min-height: 5.4em;
  display: grid;
  place-items: center;
  margin: 0 0 2.4rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--dourado);
  text-wrap: balance;
  transition: opacity .26s ease, transform .26s ease;
}
.motivos__texto--saindo { opacity: 0; transform: translateY(-6px); }

.motivos__botao {
  font-family: var(--corpo);
  font-size: .78rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tinta);
  background: transparent;
  border: 1px solid var(--tinta-tenue);
  border-radius: 999px;
  padding: .85rem 2.2rem;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.motivos__botao:hover,
.motivos__botao:focus-visible {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}
.motivos__botao:focus-visible { outline: 2px solid var(--dourado); outline-offset: 4px; }

/* --- 18. FECHAMENTO ------------------------------------------------------- */
.fechamento {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 10vh, 7rem) 1.5rem;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.fechamento__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
}
.fechamento__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Mais leve que o veu da abertura de proposito: aqui a foto precisa ser
     reconhecivel — e' o fecho. O contraste do texto vem da sombra, nao de
     apagar a imagem.                                                       */
  background:
    radial-gradient(ellipse 95% 60% at 50% 48%,
      rgba(30, 20, 12, .42) 0%, rgba(30, 20, 12, .18) 62%, transparent 100%),
    linear-gradient(180deg,
      rgba(35, 24, 15, .52) 0%, rgba(35, 24, 15, .34) 45%, rgba(35, 24, 15, .62) 100%);
}
.fechamento__conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 40rem;
}
.fechamento__conteudo p {
  margin: 0 0 1.3rem;
  font-size: clamp(.98rem, 2.6vw, 1.08rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, .93);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 22px rgba(0, 0, 0, .6);
  text-wrap: pretty;
}
.fechamento__conteudo p:last-child { margin-bottom: 0; }

.fechamento__marco {
  margin-top: 2.8rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.fechamento .contador--miudo { max-width: 30rem; margin-inline: auto; }

/* --- 19. BOTAO DA TRILHA SONORA ------------------------------------------- */
.musica {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 50;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(20, 18, 16, .42);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .88);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.musica svg { width: 1.15rem; height: 1.15rem; }
.musica:hover { background: rgba(20, 18, 16, .68); transform: scale(1.06); }
.musica:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
.musica.musica--tocando { border-color: rgba(255, 255, 255, .55); color: #fff; }

/* Enquanto toca, as barrinhas respiram de leve — so' para dar sinal de vida. */
.musica--tocando svg { animation: pulsar-musica 2.4s ease-in-out infinite; }
@keyframes pulsar-musica {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1; }
}

/* --- 20. FUNDO DE SECAO --------------------------------------------------- */
/* Usado em Barcelona, no primeiro beijo e no pedido. A foto fica atras, um
   veu por cima, e o texto vira claro. Mesmo padrao da abertura e do
   fechamento — a diferenca e' que aqui a secao tem altura variavel.        */
.capitulo--com-fundo {
  position: relative;
  overflow: hidden;
  color: #fff;
}
.capitulo__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
  /* Dessatura de leve. O vitral da Sagrada Familia e' muito colorido e
     competia com as fotos do carrossel logo abaixo; assim ele continua
     reconhecivel mas vira textura, e as fotos de voces ficam em primeiro
     plano. Vale para os quatro fundos, o que tambem os deixa parecidos
     entre si em vez de cada um puxar para um lado.                        */
  filter: saturate(.72) brightness(.94);
}
.capitulo__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 95% 62% at 50% 48%,
      rgba(16, 13, 10, .58) 0%, rgba(16, 13, 10, .30) 62%, transparent 100%),
    linear-gradient(180deg,
      rgba(22, 18, 14, .70) 0%, rgba(22, 18, 14, .52) 45%, rgba(22, 18, 14, .78) 100%);
}
/* A grade precisa subir acima do veu, senao o texto fica atras dele. */
.capitulo--com-fundo .capitulo__grade { position: relative; z-index: 2; }

.capitulo--com-fundo .capitulo__titulo { color: #fff; }
.capitulo--com-fundo .capitulo__rotulo { color: rgba(255, 255, 255, .74); }
.capitulo--com-fundo .capitulo__texto p {
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 22px rgba(0, 0, 0, .6);
}
.capitulo--com-fundo .capitulo__titulo { text-shadow: 0 2px 26px rgba(0, 0, 0, .5); }
.capitulo--com-fundo .capitulo__midia figcaption,
.capitulo--com-fundo .galeria__contagem,
.capitulo--com-fundo .galeria__rotulo { color: rgba(255, 255, 255, .78); }

/* O filete do capitulo so-texto e o do contador de Barcelona */
.capitulo--com-fundo.capitulo--so-texto .capitulo__titulo::before { background: rgba(255,255,255,.6); }
.capitulo--com-fundo .capitulo__marco { border-top-color: rgba(255, 255, 255, .28); }
.capitulo--com-fundo .capitulo__marco-legenda { color: rgba(255, 255, 255, .74); }
.capitulo--com-fundo .contador--claro .contador__numero { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.capitulo--com-fundo .contador--claro .contador__rotulo { color: rgba(255,255,255,.72); }

/* As setas do carrossel ficam escuras sobre foto, como no capitulo sobrio */
.capitulo--com-fundo .galeria__seta {
  background: rgba(20, 17, 14, .72);
  border-color: rgba(255, 255, 255, .3);
  color: #f2ece3;
}
.capitulo--com-fundo .galeria__seta:hover { background: rgba(20, 17, 14, .9); }

/* --- 21. VARIOS CARROSSEIS NO MESMO CAPITULO ------------------------------ */
/* Quando o capitulo tem mais de um grupo de fotos, a coluna dupla nao cabe:
   o texto vai para cima e os carrosseis descem empilhados.                 */
@media (min-width: 52rem) {
  .capitulo--multigrupo .capitulo__grade { grid-template-columns: 1fr; justify-items: center; }
  .capitulo--multigrupo .capitulo__texto { justify-self: center; text-align: center; }
}
.capitulo--multigrupo .capitulo__grade { justify-items: center; }
.capitulo--multigrupo .capitulo__texto { max-width: 38rem; }

.galeria-bloco { width: 100%; display: grid; justify-items: center; }

.galeria__rotulo {
  margin: 0 0 1.1rem;
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  text-align: center;
}

/* --- 22. A ASSINATURA DO FECHAMENTO --------------------------------------- */
.fechamento__despedida {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 5.5vw, 2.1rem) !important;
  line-height: 1.3 !important;
  color: #fff !important;
  margin: 0 !important;
}
/* Espaco antes da primeira linha da assinatura, para ela respirar depois
   do ultimo paragrafo. As duas linhas ficam juntas entre si.               */
.fechamento__despedida:first-of-type { margin-top: 2.4rem !important; }

/* --- 23. O PORTAO --------------------------------------------------------- */
/* Enquanto o portao existir no HTML, a pagina nao rola por tras dele.
   Uso :has() para nao depender de JavaScript ligar e desligar uma classe —
   assim a trava ja vale no primeiro quadro, antes de qualquer script rodar. */
.js body:has(#portao) { overflow: hidden; }

.portao {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
  background: var(--papel);
  text-align: center;
  transition: opacity .8s ease, transform .8s ease;
}
.portao--saindo { opacity: 0; transform: scale(1.02); pointer-events: none; }

.portao__caixa { width: 100%; max-width: 32rem; }

.portao__progresso {
  margin: 0 0 1.8rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
}

.portao__titulo {
  margin: 0 0 2.6rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.9rem, 6.5vw, 2.8rem);
  line-height: 1.15;
  color: var(--tinta);
  text-wrap: balance;
}
/* Um filete curto abaixo do titulo, igual ao dos capitulos so-texto. */
.portao__titulo::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 1.8rem auto 0;
  background: var(--dourado);
  opacity: .55;
}

.portao__pergunta {
  margin: 0 0 1.8rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.portao__pergunta--entrando { animation: portao-entrar .5s ease both; }
@keyframes portao-entrar {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.portao__opcoes { display: grid; gap: .7rem; }

.portao__opcao {
  font-family: var(--corpo);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--tinta);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: .95rem 1.4rem;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.portao__opcao:hover,
.portao__opcao:focus-visible { background: #fff; border-color: var(--tinta-tenue); }
.portao__opcao:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }

.portao__opcao--certa {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}
/* Errou: treme de leve e volta. Sem vermelho, sem X, sem punicao. */
.portao__opcao--errada { animation: portao-tremer .45s ease; }
@keyframes portao-tremer {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

.portao__aviso {
  min-height: 1.4em;               /* reserva o espaco: a tela nao pula */
  margin: 1.2rem 0 0;
  font-size: .85rem;
  font-style: italic;
  color: var(--tinta-tenue);
}