/* =====================================================================
   OS TRÊS CLIMAS

   Um tema aqui NÃO é "trocar as cores". É trocar a hora do dia e o
   material da carta, e por isso ele mexe em cinco coisas só: o fundo, a
   tinta, a tinta fraca, o acento e o breu (o preto dos véus e do
   envelope de abertura). Tudo o mais na carta continua igual nos três —
   o papel do álbum é papel, o envelope do "abra quando" é papel, a
   sombra é sombra. Papel não muda de cor porque a noite mudou.

   POR QUE OS TOKENS TERMINAM EM -rgb

   Metade da carta usa essas cores com transparência: uma borda de ouro a
   32%, um fundo de tinta a 3%. Guardar '201,162,75' em vez de '#C9A24B'
   é o que permite escrever rgba(var(--ouro-rgb),.32) e ter a
   transparência seguindo o tema. A alternativa moderna (color-mix) faria
   o mesmo com menos ruído, mas falha calada em navegador velho — e
   falhar calada aqui significa hairline invisível em metade dos cartões.

   Os três são ESCUROS de propósito. Um tema claro parece uma quarta
   linha na lista e é, na verdade, outro produto: a tinta clara sobre
   fundo claro some, as 32 sombras pretas viram borrão e o véu sobre a
   foto da capa deixa de funcionar. Vale fazer um dia, com calma, e não
   como variação de paleta.
   ===================================================================== */

/* MEIA-NOITE — azul-preto e ouro. O padrão: noite, festa, carta lacrada. */
[data-tema="meia-noite"]{
  --fundo:#0A0B10;
  --tinta:#F1EBE3;
  --tinta-2:#948F88;
  --ouro:#C9A24B;
  --tinta-rgb:241,235,227;
  --tinta2-rgb:148,143,136;
  --ouro-rgb:201,162,75;
  --breu-rgb:6,7,10;
  --linha:rgba(var(--tinta-rgb),.13);
}

/* VINHO — bordô profundo e rosé. Mais quente e mais íntimo: menos
   "grande noite", mais "só nós dois". */
[data-tema="vinho"]{
  --fundo:#120A0F;
  --tinta:#F6EAEA;
  --tinta-2:#A08A8E;
  --ouro:#D8A0A0;
  --tinta-rgb:246,234,234;
  --tinta2-rgb:160,138,142;
  --ouro-rgb:216,160,160;
  --breu-rgb:10,5,8;
  --linha:rgba(var(--tinta-rgb),.13);
}

/* JARDIM — verde de mata à noite e latão. Para casal de sítio, de
   trilha, de plantinha na varanda. */
[data-tema="jardim"]{
  --fundo:#0A1210;
  --tinta:#EAF1EA;
  --tinta-2:#8C9A8E;
  --ouro:#CBB273;
  --tinta-rgb:234,241,234;
  --tinta2-rgb:140,154,142;
  --ouro-rgb:203,178,115;
  --breu-rgb:5,10,8;
  --linha:rgba(var(--tinta-rgb),.13);
}

/* carta antiga, salva antes de os temas existirem, ou tema apagado à
   mão: cai no padrão em vez de ficar sem cor nenhuma */
html:not([data-tema]),
[data-tema=""]{
  --fundo:#0A0B10;
  --tinta:#F1EBE3;
  --tinta-2:#948F88;
  --ouro:#C9A24B;
  --tinta-rgb:241,235,227;
  --tinta2-rgb:148,143,136;
  --ouro-rgb:201,162,75;
  --breu-rgb:6,7,10;
  --linha:rgba(var(--tinta-rgb),.13);
}

/* ---------------------------------------------------------------------
   O AR ENTRE AS SEÇÕES, EM UM LUGAR SÓ

   Era 13vh em cima e 13vh embaixo de cada seção. Em celular isso dá uns
   95px de cada lado — bom. Num monitor de 1200px de altura dá 156px de
   cada lado, ou seja, mais de 300px de nada entre uma seção e a outra:
   a pessoa rola, rola, e a carta parece ter buracos.

   O problema é que "vh" cresce sem limite, e respiro não precisa
   crescer sem limite. Depois de certo ponto ele deixa de ser pausa e
   vira interrupção. O clamp trava isso: nunca aperta demais no celular
   pequeno, nunca estufa demais no monitor grande.

   Fica como variável porque o mesmo respiro manda em três lugares — a
   seção, o fecho e o fio que separa uma seção da outra. Se um dia
   mudar, muda aqui e os três continuam combinando entre si. */
:root{ --ar: clamp(58px, 8.6vh, 92px); }

*,*::before,*::after{box-sizing:border-box;}
html{background:var(--fundo);}

body.carta-body{
  margin:0;
  color:var(--tinta);
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.7;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- seção base ---------- */
.sec{
  max-width:620px;
  margin:0 auto;
  padding:var(--ar) 26px;
  animation:sobe .9s cubic-bezier(.2,.7,.3,1) both;
}
.sec:nth-child(2){animation-delay:.14s;}
.sec:nth-child(n+3){animation-delay:.26s;}
@keyframes sobe{
  from{opacity:0;transform:translateY(20px);}
  to  {opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){ .sec{animation:none;} }
.previa .sec{animation:none;}

/* ---------- seção ainda vazia, só na prévia do editor ---------- */
.sec--fantasma{
  min-height:0;
  padding:52px 26px;
  text-align:center;
  border-top:1px dashed rgba(var(--tinta-rgb),.14);
  border-bottom:1px dashed rgba(var(--tinta-rgb),.14);
}
.fant-nome{
  margin:0 0 8px;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ouro);
  opacity:.75;
}
.fant-txt{
  margin:0;
  font-size:13.5px;
  color:var(--tinta-2);
}

/* ---------- capa ---------- */
.sec--capa{
  position:relative;
  max-width:none;
  width:100%;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:hidden;
  animation:none;
}
.capa-brilho{
  position:absolute;
  inset:-8%;
  width:116%;
  height:116%;
  object-fit:cover;
  filter:blur(48px) saturate(.7) brightness(.4);
  z-index:0;
  display:none;
}
.capa-palco{
  position:relative;
  z-index:1;
  width:100%;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:88px 26px;
  overflow:hidden;
}
@media (min-width:900px){
  .capa-brilho{display:block;}
  .capa-palco{
    width:min(560px,44vw);
    min-height:0;
    height:min(92svh,980px);
    box-shadow:0 40px 100px -34px rgba(0,0,0,.85);
  }
}
.capa-fundo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--px,50%) var(--py,50%);
  z-index:0;
  animation:respira 28s ease-in-out infinite alternate;
}
@keyframes respira{ from{transform:scale(1);} to{transform:scale(1.08);} }
.capa-veu{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,
    rgba(10,11,16,.78) 0%,
    rgba(10,11,16,.30) 36%,
    rgba(10,11,16,.50) 64%,
    rgba(10,11,16,.94) 100%);
}
.capa-conteudo{position:relative;z-index:2;width:100%;max-width:520px;}
.sec--capa.com-foto .capa-conteudo{text-shadow:0 2px 26px rgba(0,0,0,.65);}
.capa-para,.capa-de{
  margin:0;
  font-size:11.5px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--tinta-2);
}
.sec--capa.com-foto .capa-para,
.sec--capa.com-foto .capa-de{color:rgba(var(--tinta-rgb),.82);}
.capa-titulo{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;
  font-style:italic;
  font-size:clamp(2.6rem,8vw,4rem);
  line-height:1.06;
  margin:26px 0 40px;
  text-wrap:balance;
}
.capa-selo{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  padding:20px 38px;
  margin:0 0 40px;
  border:1px solid rgba(var(--tinta-rgb),.2);
}
.capa-num{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-size:clamp(2.8rem,10vw,4.2rem);
  line-height:1;
  color:var(--ouro);
  font-variant-numeric:tabular-nums;
}
.capa-rot{
  margin-top:9px;
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(var(--tinta-rgb),.72);
}
/* o tempo correndo na frente dela — o que separa um número
   de uma coisa viva */
.capa-relogio{
  margin-top:11px;
  padding-top:11px;
  border-top:1px solid rgba(var(--tinta-rgb),.16);
  font-size:11.5px;
  letter-spacing:.16em;
  color:rgba(var(--ouro-rgb),.9);
  font-variant-numeric:tabular-nums;
  min-height:1em;
}
.capa-relogio:empty{
  margin-top:0;padding-top:0;border-top:0;min-height:0;
}
.capa-desca{
  position:absolute;
  left:50%;
  bottom:22px;
  z-index:3;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.capa-desca-txt{
  font-size:9.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(var(--tinta-rgb),.6);
}
.capa-seta{
  width:9px;
  height:9px;
  border-right:1.5px solid rgba(var(--tinta-rgb),.8);
  border-bottom:1.5px solid rgba(var(--tinta-rgb),.8);
  animation:pula 2s ease-in-out infinite;
}
@keyframes pula{
  0%,100%{transform:translateY(0) rotate(45deg);opacity:.45;}
  50%    {transform:translateY(5px) rotate(45deg);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .capa-fundo,.capa-seta{animation:none;}
  .capa-seta{transform:rotate(45deg);}
}

/* ---------- títulos de seção ---------- */
.sec-titulo{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;
  font-size:clamp(1.9rem,6vw,2.7rem);
  line-height:1.15;
  margin:0;
  text-wrap:balance;
}
.sec-titulo::after{
  content:'';
  display:block;
  width:44px;
  height:1px;
  background:var(--ouro);
  margin-top:24px;
}

/* ---------- declaração ---------- */
.declaracao{margin-top:36px;text-align:left;}
.declaracao p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.34rem;
  line-height:1.64;
  margin:0 0 1.1em;
  color:var(--tinta);
}
.declaracao p:last-child{margin-bottom:0;}
.declaracao .primeira{ overflow:hidden; }   /* segura o float aqui dentro */
.declaracao .primeira::first-letter{
  float:left;
  font-size:3.4em;
  line-height:.9;
  padding:.04em .1em 0 0;
  color:var(--ouro);
}
/* "Ana," na primeira linha é saudação, não abertura */
.declaracao .saudacao{
  font-size:1.18rem;
  line-height:1.4;
  color:var(--tinta-2);
  margin-bottom:1.4em;
  letter-spacing:.01em;
}
/* primeiro parágrafo curto demais para envolver a capitular: vira
   abertura, sem letra flutuando e sem buraco ao lado.

   ---------------------------------------------------------------------
   13/09 — ESTA CLASSE SE CHAMAVA `.abertura`, E ISSO PINTAVA A CARTA DE
   PRETO.

   `.abertura` já era o nome do envelope lacrado que cobre a tela inteira
   (lá embaixo, na seção "envelope de abertura"): `position:fixed`,
   `inset:0`, `z-index:120` e um fundo quase preto.

   O seletor daqui é mais específico, então ele vencia — mas só nas
   propriedades que ele declarava. Fonte, cor e margem vinham daqui;
   `position`, `inset`, `z-index` e `background` continuavam vindo de lá.
   O parágrafo virava uma tela preta em cima da carta.

   Aparecia enquanto a pessoa digitava, porque parágrafo com menos de 120
   caracteres leva esta classe; passando de 120 ele vira `.primeira` e a
   tela preta sumia sozinha. Também estava em toda carta PUBLICADA que
   começasse com uma frase curta.

   O nome novo é `.dec-abre`. O antigo continua aqui, ao lado, por uma
   razão: se o `mensagem.js` novo e o `carta.css` velho (ou o contrário)
   ficarem em cache no mesmo navegador, os resets abaixo impedem a tela
   preta de voltar em qualquer das duas combinações. Defeito que tampa a
   carta inteira merece cinto e suspensório.
   --------------------------------------------------------------------- */
.declaracao .abertura,
.declaracao .dec-abre{
  /* os quatro resets — é isto que desarma o envelope */
  position:static;
  inset:auto;
  z-index:auto;
  background:none;
  display:block;
  place-items:initial;
  align-content:initial;
  gap:0;
  cursor:auto;

  font-size:1.62rem;
  line-height:1.42;
  font-style:italic;
  color:var(--tinta);
  margin-bottom:1.25em;
  text-wrap:balance;
}
/* nada de ::first-letter fora do .primeira — capitular flutuante é
   frágil e não pode escapar para o parágrafo seguinte */
.declaracao p{ color:var(--tinta); }

/* ---------- motivos em lista ---------- */
.motivos{
  list-style:none;
  margin:32px 0 0;
  padding:0;
}
.motivos li{
  display:grid;
  grid-template-columns:46px 1fr;
  align-items:baseline;
  padding:20px 0;
  border-bottom:1px solid var(--linha);
}
.motivos li:last-child{border-bottom:0;}
.motivos .n{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:15px;
  color:var(--ouro);
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}

/* ---------- galeria ---------- */
.galeria{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:34px;
  margin-top:38px;
}
.polaroide{
  margin:0;
  background:#F6F2EA;
  padding:12px 12px 0;
  border-radius:2px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7);
  transform:rotate(var(--giro,0deg));
  max-width:330px;
  width:100%;
  cursor:zoom-in;
  transition:transform .25s ease, box-shadow .25s ease;
}
.polaroide:hover,
.polaroide:focus-visible{
  transform:rotate(0deg) translateY(-5px);
  box-shadow:0 24px 52px -16px rgba(0,0,0,.82);
  outline:none;
}
.polaroide img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:var(--razao,4/5);
  object-fit:cover;
  object-position:var(--px,50%) var(--py,50%);
  background:#DED8CC;
}
.polaroide figcaption{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:1.15rem;
  line-height:1.35;
  color:#2A2620;
  text-align:center;
  padding:14px 6px 18px;
}
/* grade no desktop, adaptada à quantidade de fotos */
@media (min-width:820px){
  .sec--fotos[data-estilo="polaroide"]{max-width:900px;}
  .galeria{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:44px 30px;
    align-items:start;
    justify-items:center;
  }
  .polaroide{max-width:340px;width:100%;}
  .sec--fotos[data-qtd="1"]{max-width:520px;}
  .sec--fotos[data-qtd="1"] .galeria{grid-template-columns:minmax(0,1fr);}
}
@media (min-width:1180px){
  .sec--fotos[data-estilo="polaroide"]{max-width:1180px;}
  .galeria{grid-template-columns:repeat(3,minmax(0,1fr));}
  .sec--fotos[data-qtd="1"]{max-width:520px;}
  .sec--fotos[data-qtd="2"]{max-width:800px;}
  .sec--fotos[data-qtd="4"]{max-width:800px;}
  .sec--fotos[data-qtd="1"] .galeria{grid-template-columns:minmax(0,1fr);}
  .sec--fotos[data-qtd="2"] .galeria,
  .sec--fotos[data-qtd="4"] .galeria{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- ampliar foto ---------- */
.lupa{
  position:fixed;
  inset:0;
  z-index:99;
  background:rgba(var(--breu-rgb),.94);
  display:grid;
  place-items:center;
  padding:5vmin;
  cursor:zoom-out;
  opacity:0;
  transition:opacity .24s ease;
}
.lupa.on{opacity:1;visibility:visible;pointer-events:auto;}
/* fechada, a lupa não pode cobrir a carta nem engolir cliques —
   opacity:0 sozinho deixa o elemento por cima de tudo */
.lupa{visibility:hidden;pointer-events:none;}

/* a lupa não entra na prévia; o modal do "abra quando" entra, porque
   é ele que mostra a carta abrindo enquanto a pessoa monta */
.previa .lupa{display:none !important;}
.lupa img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  box-shadow:0 30px 90px -30px #000;
}

/* ---------- motivos em cartas ---------- */
.cartas-intro{
  margin:26px 0 0;
  font-size:13px;
  letter-spacing:.02em;
  color:var(--tinta-2);
}
.cartas{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:22px;
  perspective:1400px;
}
@media (min-width:820px){
  .sec--motivos{max-width:900px;}
  .cartas{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
}
.carta-mot{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.2,.8,.3,1);
}
.carta-mot.virada{transform:rotateY(180deg);}
.carta-mot:focus-visible{outline:2px solid var(--ouro);outline-offset:5px;border-radius:9px;}
/* espaçador invisível: é ele que dá a altura, para que as duas
   faces sejam sempre idênticas e o grid alinhe todas as cartas */
.cm-medida{
  display:block;
  visibility:hidden;
  padding:26px 18px;
  min-height:186px;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.16rem;
  line-height:1.42;
  text-align:center;
}
.cm-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:22px 16px;
  border-radius:8px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* verso — o que se vê antes de tocar */
.cm-verso{
  background:
    repeating-linear-gradient(45deg,
      rgba(var(--ouro-rgb),.09) 0 6px, transparent 6px 13px),
    linear-gradient(160deg,#191826 0%,#0D0D14 100%);
  border:1px solid rgba(var(--ouro-rgb),.32);
  transition:border-color .25s ease;
}
.carta-mot:hover .cm-verso{border-color:rgba(var(--ouro-rgb),.62);}
.cm-selo{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--ouro-rgb),.5);
  border-radius:50%;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.65rem;
  line-height:1;
  color:var(--ouro);
  font-variant-numeric:tabular-nums;
}
.cm-dica{
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(var(--tinta-rgb),.42);
}
/* frente — o motivo revelado */
.cm-frente{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,#F8F4EC 0%,#ECE4D6 100%);
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.75);
  overflow:auto;
}
.cm-txt{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.16rem;
  line-height:1.42;
  color:#241F18;
  text-align:center;
}
.cartas-conta{
  margin:26px 0 0;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tinta-2);
  transition:color .3s ease;
}
.cartas-conta b{color:var(--ouro);font-weight:400;}
.sec--motivos.tudo-revelado .cartas-conta{color:var(--ouro);}
@media (prefers-reduced-motion:reduce){
  .carta-mot{transition:none;}
}

/* ---------- tocador ---------- */
.tc-vazio{margin:30px 0 0;font-size:14px;color:var(--tinta-2);font-style:italic;}
.tocador{
  margin-top:38px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.tc-capa{
  position:relative;
  width:min(268px,74vw);
  aspect-ratio:1;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 28px 64px -26px rgba(0,0,0,.92);
  background:#15141C;
}
.tc-capa img{width:100%;height:100%;object-fit:cover;display:block;}
.tc-play{
  position:absolute;
  inset:0;
  margin:auto;
  width:76px;
  height:76px;
  border-radius:50%;
  border:1px solid rgba(var(--tinta-rgb),.5);
  background:rgba(10,11,16,.46);
  backdrop-filter:blur(5px);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.tc-play:hover{background:rgba(10,11,16,.66);border-color:var(--ouro);}
.tc-play::after{
  content:'';
  position:absolute;
  inset:-11px;
  border-radius:50%;
  border:1px solid rgba(var(--ouro-rgb),.55);
  animation:pulso 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes pulso{
  0%  {transform:scale(.92);opacity:.85;}
  100%{transform:scale(1.4); opacity:0;}
}
.tc-icone{
  width:0;height:0;
  border-left:17px solid var(--tinta);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  margin-left:5px;
}
.sec--musica.tocando .tc-play::after{animation:none;opacity:0;}
.sec--musica.tocando .tc-icone{
  width:16px;height:19px;
  border:0;
  border-left:5px solid var(--tinta);
  border-right:5px solid var(--tinta);
  margin-left:0;
}
.tc-track{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.55rem;
  line-height:1.2;
  margin:28px 0 6px;
  text-wrap:balance;
}
.tc-artista{
  margin:0 0 22px;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tinta-2);
}
.tc-barra{
  width:min(268px,74vw);
  height:2px;
  background:rgba(var(--tinta-rgb),.15);
  border-radius:2px;
  overflow:hidden;
}
.tc-barra span{
  display:block;
  height:100%;
  width:0;
  background:var(--ouro);
  transition:width .18s linear;
}
.tc-nota{
  margin:16px 0 0;
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tinta-2);
  opacity:.7;
}
@media (prefers-reduced-motion:reduce){
  .tc-play::after{animation:none;}
}

/* ---------- faixa de prévia ---------- */
.faixa-previa{
  position:fixed;
  top:0;left:0;right:0;
  z-index:80;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 16px;
  padding:10px 18px;
  background:rgba(var(--ouro-rgb),.94);
  color:#0A0B10;
  font-size:12.5px;
  letter-spacing:.02em;
  text-align:center;
}
.faixa-previa a{
  background:#0A0B10;
  color:#F1EBE3;
  padding:7px 16px;
  border-radius:7px;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}
body.carta-body:has(.faixa-previa){padding-top:42px;}

/* ---------- envelope de abertura ---------- */
html.travado{overflow:hidden;}
html.travado .sec{animation-play-state:paused;}
.abertura{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  align-content:center;
  gap:36px;
  background:radial-gradient(120% 90% at 50% 40%, #17141F 0%, #06060A 72%);
  cursor:pointer;
  transition:opacity .62s ease, transform .62s ease;
}
.abertura.foi{opacity:0;transform:scale(1.09);pointer-events:none;}
.env{
  position:relative;
  width:min(360px,80vw);
  aspect-ratio:3/2;
  perspective:900px;
  animation:flutua 4.2s ease-in-out infinite alternate;
}
@keyframes flutua{ from{transform:translateY(0);} to{transform:translateY(-8px);} }
.env-corpo{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border-radius:3px;
  background:linear-gradient(160deg,#F5EFE3 0%,#E2D7C4 100%);
  box-shadow:0 44px 90px -32px rgba(0,0,0,.92),
             inset 0 0 0 1px rgba(0,0,0,.07);
  overflow:hidden;
}
/* O NOME SAIU DE TRÁS DA ABA.

   O envelope tem a aba triangular cobrindo o topo — larga em cima,
   afunilando até a ponta no meio. O nome estava centralizado na altura
   TOTAL do envelope, ou seja, bem na linha onde o triângulo já
   afunilou: no meio ele ficava escondido pela ponta e pelo lacre, mas
   as duas EXTREMIDADES escapavam pelos lados do triângulo. Daí o nome
   meio aparecendo antes de abrir, como se estivesse vazando.

   No celular passava batido porque o envelope é estreito e o nome
   cabia quase todo atrás da ponta. Num monitor largo, ele saía dos
   dois lados.

   Agora ele mora na parte de baixo — que é o bolso do envelope, onde um
   nome escrito à mão ficaria de verdade. Aparece inteiro, de propósito:
   ver o próprio nome escrito antes de abrir é metade da emoção. */
.env-corpo{
  align-content:end;
  padding-bottom:11%;
}
.env-para{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:clamp(1.35rem,5.4vw,2rem);
  line-height:1.15;
  color:#2B2318;
  padding:0 22px;
  text-align:center;
  text-wrap:balance;
}
.env-aba{
  position:absolute;
  top:0;left:0;right:0;
  height:57%;
  background:linear-gradient(172deg,#F0E8D9 0%,#D9CDB6 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transform-style:preserve-3d;
  transition:transform .86s cubic-bezier(.62,.04,.24,1);
  box-shadow:0 3px 12px rgba(0,0,0,.2);
  z-index:2;
}
.abertura.abrindo .env-aba{transform:rotateX(-172deg);}
.env-selo{
  position:absolute;
  left:50%;
  top:57%;
  z-index:3;
  transform:translate(-50%,-50%);
  width:64px;
  height:64px;
  border:0;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #E5C476 0%, #A47F2A 70%);
  color:#3B2B09;
  font-size:23px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 7px 20px rgba(0,0,0,.55),
             inset 0 -2px 7px rgba(0,0,0,.32);
  transition:transform .42s ease, opacity .42s ease;
}
.abertura.abrindo .env-selo{transform:translate(-50%,-50%) scale(.25);opacity:0;}
.env-dica{
  margin:0;
  font-size:10.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(var(--tinta-rgb),.55);
  animation:pisca 2.4s ease-in-out infinite;
}
.abertura.abrindo .env-dica{opacity:0;transition:opacity .3s ease;}
@keyframes pisca{ 0%,100%{opacity:.32;} 50%{opacity:.92;} }
@media (prefers-reduced-motion:reduce){
  .env,.env-dica{animation:none;}
  .env-aba{transition:none;}
}

/* ===== player persistente da música =============================== */

.cplayer{
  position:fixed;
  right:max(14px, env(safe-area-inset-right));
  bottom:max(14px, env(safe-area-inset-bottom));
  z-index:40;
  display:flex; align-items:center; gap:0;
  padding:5px;
  border-radius:999px;
  background:rgba(var(--breu-rgb),.62);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0; transform:translateY(14px) scale(.94);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1),
             background .3s ease;
  max-width:calc(100vw - 28px);
}
.cplayer.vivo{ opacity:1; transform:none; }

.cplayer-bt{
  position:relative; flex:0 0 auto;
  width:42px; height:42px; padding:0;
  border:0; border-radius:50%;
  background:#231F2C;
  cursor:pointer; overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.cplayer-bt:focus-visible{ outline:2px solid var(--ouro); outline-offset:3px; }

.cplayer-capa{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.85;
}
.cplayer-bt::after{         /* véu para o ícone ler por cima da capa */
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,.42);
}

.cplayer-eq{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:3px;
}
.cplayer-eq i{
  display:block; width:3px; height:6px; border-radius:2px;
  background:var(--ouro);
  animation:cplayer-pulo .9s ease-in-out infinite;
}
.cplayer-eq i:nth-child(2){ animation-delay:.18s; }
.cplayer-eq i:nth-child(3){ animation-delay:.36s; }
@keyframes cplayer-pulo{
  0%,100%{ height:5px;  opacity:.65; }
  50%    { height:16px; opacity:1; }
}

.cplayer-icone{
  position:absolute; top:50%; left:50%; z-index:2;
  width:0; height:0; opacity:0;
  transform:translate(-38%,-50%);
  border-left:11px solid var(--ouro);
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  transition:opacity .2s ease;
}
.cplayer[data-estado="pausado"] .cplayer-eq{ opacity:0; }
.cplayer[data-estado="pausado"] .cplayer-icone{ opacity:1; }
.cplayer[data-estado="pausado"]{ background:rgba(var(--breu-rgb),.5); }

.cplayer-info{
  display:grid; align-content:center;
  max-width:0; overflow:hidden;
  padding:0; opacity:0;
  transition:max-width .45s cubic-bezier(.2,.8,.2,1),
             padding .45s ease, opacity .3s ease;
  cursor:default;
}
.cplayer.aberto .cplayer-info{
  max-width:min(48vw, 220px);
  padding:0 14px 0 10px;
  opacity:1;
}
.cplayer-info b{
  display:block; font-size:13px; line-height:1.25;
  color:#F4F1EA; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cplayer-info small{
  display:block; font-size:11.5px; line-height:1.3;
  color:rgba(244,241,234,.55);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (hover:hover){
  .cplayer:hover .cplayer-info{
    max-width:min(48vw, 220px); padding:0 14px 0 10px; opacity:1;
  }
  .cplayer:hover{ background:rgba(var(--breu-rgb),.78); }
}
@media (prefers-reduced-motion:reduce){
  .cplayer{ transition:none; }
  .cplayer-eq i{ animation:none; height:11px; }
}

/* ===== linha do tempo ============================================= */

.sec--linha:empty{ display:none; }

.sec--linha{
  padding:clamp(64px, 12vw, 120px) clamp(20px, 6vw, 48px);
}

.lt-titulo{
  margin:0 0 clamp(34px, 6vw, 56px);
  text-align:center;
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:300;
  font-size:clamp(30px, 7vw, 46px);
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--ouro);
}

.lt-lista{
  position:relative;
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:720px;
}
/* o trilho */
.lt-lista::before{
  content:'';
  position:absolute;
  top:6px; bottom:6px;
  left:9px;
  width:1px;
  background:linear-gradient(180deg,
    rgba(var(--ouro-rgb),0), rgba(var(--ouro-rgb),.45) 12%,
    rgba(var(--ouro-rgb),.45) 88%, rgba(var(--ouro-rgb),0));
}

.lt-item{
  position:relative;
  padding:0 0 clamp(30px, 5vw, 44px) 38px;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--n, 0) * 60ms);
}
.lt-item.vista{ opacity:1; transform:none; }
.lt-item:last-child{ padding-bottom:0; }

.lt-ponto{
  position:absolute;
  top:7px; left:4px;
  width:11px; height:11px;
  border-radius:50%;
  background:#14121B;
  border:1px solid var(--ouro);
  box-shadow:0 0 0 4px rgba(var(--ouro-rgb),.10);
}
.lt-item.vista .lt-ponto{
  background:var(--ouro);
  transition:background .5s ease .25s;
}

.lt-foto{
  margin:0 0 14px;
  max-width:380px;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  background:rgba(var(--tinta-rgb),.05);
  border:1px solid var(--linha);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7);
}
.lt-foto img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--px,50%) var(--py,50%);
}

.lt-data{
  display:block;
  margin-bottom:5px;
  font-family:'Jost', system-ui, sans-serif;
  font-weight:400;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(var(--ouro-rgb),.8);
}

.lt-marco{
  margin:0 0 8px;
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:400;
  font-size:clamp(21px, 4.4vw, 27px);
  line-height:1.25;
  color:var(--tinta);
}

.lt-txt{
  margin:0;
  font-family:'Jost', system-ui, sans-serif;
  font-weight:300;
  font-size:clamp(15px, 3.6vw, 16.5px);
  line-height:1.72;
  color:rgba(var(--tinta-rgb),.72);
  max-width:52ch;
}

/* ---- desktop: trilho no meio, momentos alternando de lado ---- */
@media (min-width:760px){
  .sec--linha{ max-width:1000px; }

  .lt-lista::before{ left:50%; transform:translateX(-50%); }

  .lt-item{
    width:50%;
    padding:0 0 46px 0;
  }
  .lt-item:nth-child(odd){
    margin-left:0;
    padding-right:46px;
    text-align:right;
  }
  .lt-item:nth-child(even){
    margin-left:50%;
    padding-left:46px;
    text-align:left;
  }
  .lt-item:nth-child(odd)  .lt-ponto{ left:auto; right:-6px; }
  .lt-item:nth-child(even) .lt-ponto{ left:-5px; }

  .lt-item:nth-child(odd) .lt-txt,
  .lt-item:nth-child(odd) .lt-foto{ margin-left:auto; }

  .lt-item:nth-child(odd) { transform:translate(-18px, 18px); }
  .lt-item:nth-child(even){ transform:translate( 18px, 18px); }
  .lt-item.vista          { transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .lt-item{ opacity:1; transform:none; transition:none; }
}

/* ===== abra quando ================================================ */

.sec--abraquando:empty{ display:none; }

.sec--abraquando{ max-width:900px; }

.aq-titulo{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;
  font-size:clamp(1.9rem,6vw,2.7rem);
  line-height:1.15;
  margin:0;
  text-wrap:balance;
}
.aq-titulo::after{
  content:'';
  display:block;
  width:44px;height:1px;
  background:var(--ouro);
  margin-top:24px;
}

.aq-intro{
  margin:22px 0 0;
  font-size:13px;
  color:var(--tinta-2);
}

.aq-lista{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,236px),1fr));
  gap:18px;
  margin-top:26px;
}
/* CARROSSEL NO CELULAR.

   Três versões aqui, e as duas primeiras erraram o mesmo: tratar a lista
   como bloco de texto, que se lê de cima para baixo. Uma coluna dava mil
   pixels de rolagem; duas colunas cortaram pela metade mas continuaram
   empurrando o resto da carta para longe.

   Envelope não é parágrafo — é objeto numa gaveta. Uma fileira que anda
   para o lado ocupa a altura de UM envelope, sejam três ou dez, e o
   pedaço do próximo aparecendo na borda direita já diz que tem mais, sem
   seta e sem legenda.

   O snap é 'proximity', nunca 'mandatory': mandatory reancora sozinho
   quando o conteúdo muda de tamanho, e a prévia do editor redesenha esta
   lista a cada tecla — a fileira ficaria pulando enquanto a pessoa
   escreve.

   As margens negativas fazem a fileira sangrar até a borda da tela: sem
   elas o primeiro envelope nasce recuado e parece desalinhado do resto
   da carta, e o último parece cortado por engano em vez de continuar. */
@media (max-width:640px){
  .aq-lista{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    margin:26px -26px 0;
    padding:6px 26px 16px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .aq-lista::-webkit-scrollbar{ display:none; }
  .aq-env{
    flex:0 0 64%;
    max-width:230px;
    scroll-snap-align:center;
    min-height:196px;
    padding:104px 14px 18px;
  }
  .aq-aba{ height:82px; }
  .aq-lacre{ top:66px; width:30px; height:30px; font-size:13px; }
  .aq-quando{ font-size:1.04rem; line-height:1.3; }
}

/* ---- o envelope ----
   A aba e o lacre têm altura FIXA em pixels. Em porcentagem eles
   desciam junto com o texto e o lacre caía por cima da frase. */

.aq-env{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  min-height:206px;
  padding:120px 18px 22px;
  border:0;
  border-radius:5px;
  cursor:pointer;
  font:inherit;
  color:#2B2318;
  text-align:center;
  overflow:hidden;
  background:linear-gradient(160deg,#F5EFE3 0%,#E2D7C4 100%);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.8);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.aq-env:hover,
.aq-env:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 26px 48px -20px rgba(0,0,0,.9);
  outline:none;
}
.aq-env:focus-visible{ box-shadow:0 0 0 2px var(--ouro), 0 26px 48px -20px rgba(0,0,0,.9); }

.aq-aba{
  position:absolute;
  top:0;left:0;right:0;
  height:96px;
  background:linear-gradient(172deg,#F0E8D9 0%,#D9CDB6 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transition:transform .5s cubic-bezier(.62,.04,.24,1);
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.22));
}
.aq-env.aberto .aq-aba{ transform:rotateX(-168deg); }

.aq-lacre{
  position:absolute;
  top:79px;
  left:50%;
  transform:translateX(-50%);
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #E5C476 0%, #A47F2A 70%);
  color:#3B2B09;
  font-size:15px;line-height:1;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  transition:transform .35s ease, opacity .35s ease;
}
.aq-env.aberto .aq-lacre{ transform:translateX(-50%) scale(.3); opacity:0; }

.aq-quando{
  position:relative;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.14rem;
  line-height:1.34;
  text-wrap:balance;
}
.aq-abrir{
  position:relative;
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#7A6A4E;
}
.aq-env.aberto .aq-abrir{ color:#A47F2A; }

/* ---- a carta aberta ---- */

.aq-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:5vmin;
  background:rgba(var(--breu-rgb),.9);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease, visibility .28s;
}
.aq-modal.on{ opacity:1; visibility:visible; }

.aq-papel{
  width:min(560px,100%);
  max-height:86svh;
  overflow:auto;
  padding:clamp(28px,6vw,46px);
  border-radius:4px;
  background:linear-gradient(168deg,#F8F4EC 0%,#EDE5D6 100%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  transform:translateY(16px) scale(.97);
  transition:transform .34s cubic-bezier(.2,.8,.3,1);
}
.aq-modal.on .aq-papel{ transform:none; }

.aq-mquando{
  margin:0 0 22px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(43,35,24,.16);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#7A6A4E;
}
.aq-mtexto p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.3rem;
  line-height:1.62;
  color:#241F18;
  margin:0 0 1em;
}
.aq-mtexto p:last-child{ margin-bottom:0; }

.aq-fechar{
  margin-top:30px;
  padding:11px 22px;
  border:1px solid rgba(43,35,24,.22);
  border-radius:9px;
  background:transparent;
  color:#4A4032;
  font:inherit;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
}
.aq-fechar:hover{ background:rgba(43,35,24,.06); }

@media (prefers-reduced-motion:reduce){
  .aq-env,.aq-aba,.aq-lacre,.aq-papel,.aq-modal{ transition:none; }
}


/* ===== quebra-cabeça =============================================== */

.sec--quebracabeca:empty{ display:none; }
.sec--quebracabeca{ max-width:640px; }

.qc-intro{
  margin:22px 0 0;
  font-size:13px;
  color:var(--tinta-2);
}

.qc-tabuleiro{
  display:grid;
  grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
  gap:4px;
  width:min(100%,420px);
  aspect-ratio:1;
  margin:26px auto 0;
  padding:4px;
  border-radius:10px;
  background:rgba(var(--tinta-rgb),.05);
  border:1px solid var(--linha);
  transition:gap .5s ease, padding .5s ease, background .5s ease;
}
.qc-pronto .qc-tabuleiro{
  gap:0;
  padding:0;
  background:transparent;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.9);
}

.qc-peca{
  position:relative;
  padding:0;
  border:0;
  border-radius:5px;
  background-color:#14121B;
  background-repeat:no-repeat;
  cursor:pointer;
  transition:transform .18s ease, border-radius .5s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.qc-peca:hover{ transform:scale(.97); }
.qc-peca.sel{
  transform:scale(.92);
  box-shadow:0 0 0 2px var(--ouro), 0 10px 22px -10px rgba(0,0,0,.9);
  z-index:2;
}
.qc-peca.ok::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(var(--ouro-rgb),.35);
  pointer-events:none;
  transition:opacity .4s ease;
}
.qc-pronto .qc-peca{
  border-radius:0;
  cursor:default;
  transform:none;
}
.qc-pronto .qc-peca::after{ opacity:0; }

.qc-conta{
  margin:18px 0 0;
  text-align:center;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tinta-2);
  transition:opacity .4s ease;
}
.qc-conta b{ color:var(--ouro); font-weight:400; }
.qc-pronto .qc-conta{ opacity:0; }

.qc-premio{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .7s ease, opacity .6s ease .2s;
}
.qc-pronto .qc-premio{
  max-height:400px;
  opacity:1;
}
.qc-premio-txt{
  margin:26px 0 0;
  text-align:center;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:clamp(1.3rem,4.6vw,1.7rem);
  line-height:1.4;
  color:var(--ouro);
  text-wrap:balance;
}

@media (prefers-reduced-motion:reduce){
  .qc-tabuleiro,.qc-peca,.qc-premio,.qc-conta{ transition:none; }
}


/* ===== recado de voz =============================================== */

.sec--recado:empty{ display:none; }

.rc{
  display:flex;align-items:center;gap:20px;
  margin-top:36px;
}
.rc-bt{
  position:relative;flex:0 0 auto;
  width:86px;height:86px;
  border:0;border-radius:50%;padding:0;
  background:rgba(var(--ouro-rgb),.08);
  cursor:pointer;
  display:grid;place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.rc-bt:focus-visible{outline:2px solid var(--ouro);outline-offset:4px;}

/* anel de progresso — o conic-gradient anda com --rc-p */
.rc-anel{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--ouro) var(--rc-p,0%),
                            rgba(var(--ouro-rgb),.22) var(--rc-p,0%));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
}
.sec--recado:not(.rc-tocando) .rc-bt::after{
  content:'';position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(var(--ouro-rgb),.45);
  animation:rc-chama 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes rc-chama{
  0%  {transform:scale(.94);opacity:.8;}
  100%{transform:scale(1.28);opacity:0;}
}

.rc-icone{
  position:relative;z-index:1;
  width:0;height:0;margin-left:6px;
  border-left:22px solid var(--ouro);
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
}
.rc-tocando .rc-icone{
  width:20px;height:24px;margin-left:0;border:0;
  border-left:6px solid var(--ouro);
  border-right:6px solid var(--ouro);
}

.rc-info{flex:1;min-width:0;}
.rc-dica{
  margin:0 0 7px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tinta-2);
}
.rc-tempo{
  margin:0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.35rem;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.rc-tempo b{color:var(--ouro);font-weight:400;}

.rc-legenda{
  margin:26px 0 0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:1.2rem;
  line-height:1.5;
  color:var(--tinta-2);
  text-wrap:balance;
}

@media (prefers-reduced-motion:reduce){
  .sec--recado .rc-bt::after{animation:none;opacity:0;}
}


/* ===== álbum folheável ============================================= */

.al{
  margin-top:38px;
}

/* Por que a perspectiva mora AQUI e o livro não é mais preserve-3d:

   num contêiner com transform-style:preserve-3d os filhos são ordenados
   pela posição em 3D, e o z-index deixa de mandar sozinho. Como todas as
   folhas estão na mesma profundidade, a ordem de pintura ficava a critério
   do navegador — e no Chrome do computador ela mudava no meio da virada.
   Era essa a "animação bugada" que sobrevivia a todos os meus consertos de
   z-index: eu estava ajustando uma regra que ali não valia.

   Agora o livro é plano (o z-index volta a mandar) e cada FOLHA é o seu
   próprio espaço 3D, que é tudo o que ela precisa para ter duas faces. */
/* A sombra que só aparecia DEPOIS de virar a página.

   Ela morava no box-shadow de cada folha. Folha em rotação 3D é uma
   camada composta pela GPU, e o navegador solta a sombra dela enquanto o
   movimento acontece — repinta só quando assenta. Daí a impressão de que
   o álbum "ganha volume" um segundo depois.

   Agora existe uma sombra fixa embaixo do livro inteiro, que nunca é
   animada porque não pertence a nada que gira. As folhas continuam com a
   delas; esta garante que nunca há um instante sem sombra nenhuma. */
.al-livro::after{
  content:'';
  position:absolute;
  left:6%; right:6%; bottom:-14px;
  height:30px;
  z-index:-1;
  border-radius:50%;
  background:rgba(0,0,0,.7);
  filter:blur(20px);
  pointer-events:none;
}
/* SEGUNDA TENTATIVA, e agora pela raiz.
   A elipse acima sozinha não resolveu, e o motivo é que ela não é a
   sombra que some. A que some é o box-shadow das FACES — o contorno
   escuro dos quatro lados da folha. Enquanto ele existisse ali, o
   problema continuava: a face gira, a GPU larga a sombra durante o giro
   e devolve no fim. Não dá para consertar uma sombra que gira; dá para
   não ter sombra girando.

   Então o contorno mudou de dono. Ele agora é desenhado uma vez só,
   embaixo do livro inteiro, do tamanho exato das folhas — que estão
   todas em inset:0, empilhadas, e só a de cima aparece. Visualmente é
   idêntico ao que era. A diferença é que este elemento não vira, não
   compõe camada nova e não pisca nunca. */
.al-livro::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:3px;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.9);
  pointer-events:none;
}

.al-livro{
  position:relative;
  width:min(100%,380px);
  margin:0 auto;
  aspect-ratio:4/5;
  perspective:1600px;
  transform-style:flat;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

.al-folha{
  position:absolute;
  inset:0;
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform .78s cubic-bezier(.36,.06,.2,1);
  /* a folha de cima é a primeira ainda não virada */
  z-index:calc(var(--n) - var(--i));
}
.al-folha.virada{
  transform:rotateY(-176deg);
  z-index:var(--i);
}

.al-face{
  position:absolute;
  inset:0;
  border-radius:3px;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  /* a sombra que morava aqui foi para .al-livro::before — veja o
     comentário lá em cima. Era ela que sumia no meio da virada. */
}

/* frente: a foto, montada como página de álbum de papel */
.al-frente{
  background:#F6F2EA;
  padding:14px 14px 0;
}
.al-foto{
  margin:0;
  height:100%;
  display:flex;
  flex-direction:column;
}
.al-foto img{
  display:block;
  width:100%;
  flex:1;
  min-height:0;
  object-fit:cover;
  object-position:var(--px,50%) var(--py,50%);
  background:#DED8CC;
}
.al-foto figcaption{
  flex:0 0 auto;
  padding:13px 4px 16px;
  text-align:center;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:1.08rem;
  line-height:1.3;
  color:#2A2620;
  min-height:52px;
}
.al-foto .al-sem{ min-height:30px; }

/* verso: papel, com a marca d'água do vinco */
.al-verso{
  transform:rotateY(180deg);
  background:
    linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 12%),
    linear-gradient(160deg,#EFE9DD 0%,#DCD3C2 100%);
}

/* uma sombra suave onde a folha dobra, para dar volume */
.al-frente::after{
  content:'';
  position:absolute;
  top:0;bottom:0;left:0;
  width:26px;
  background:linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,0));
  pointer-events:none;
}

.al-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:26px;
}
.al-bt{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid rgba(var(--ouro-rgb),.4);
  border-radius:50%;
  background:transparent;
  color:var(--ouro);
  font-size:24px;line-height:1;
  cursor:pointer;
  transition:background .18s ease, opacity .18s ease;
}
.al-bt:hover:not(:disabled){ background:rgba(var(--ouro-rgb),.12); }
.al-bt:disabled{ opacity:.25; cursor:default; }

.al-conta{
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tinta-2);
  font-variant-numeric:tabular-nums;
}
.al-conta b{ color:var(--ouro); font-weight:400; }

.al-dica{
  margin:14px 0 0;
  text-align:center;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tinta-2);
  opacity:.65;
  transition:opacity .4s ease;
}
.al-fim .al-dica{ opacity:0; }

@media (min-width:820px){
  .al-livro{ width:min(100%,440px); }
}

@media (prefers-reduced-motion:reduce){
  .al-folha{ transition:none; }
}


/* no modo álbum a seção não vira grade */
.sec--fotos[data-estilo="album"] .galeria{ display:none; }


/* A folha que está girando fica ACIMA de todas até terminar o movimento.
   Sem isto, o z-index dela caía no instante em que a classe .virada
   entrava e a foto seguinte aparecia no meio da virada. */
.al-folha.movendo{ z-index:99; }


/* Enquanto a pessoa enquadra a foto do quebra-cabeça, a foto inteira cobre
   o tabuleiro: ajustar olhando para peças embaralhadas é impossível. */
.qc-tabuleiro{ position:relative; }
.qc-enq{
  position:absolute;
  inset:0;
  z-index:6;
  border-radius:inherit;
  background-repeat:no-repeat;
  background-size:cover;
  box-shadow:0 0 0 2px rgba(var(--ouro-rgb),.55);
}


/* A grade das peças por cima da foto inteira, enquanto ela é enquadrada.
   Sem isso a pessoa enquadra achando que a foto chega assim, e não entende
   por que ela chega picotada. As linhas dizem onde a foto vai partir. */
.qc-enq::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,
      rgba(255,255,255,.62) 0 1px,
      rgba(0,0,0,.10) 1px 2px,
      transparent 2px calc(100% / var(--n, 3))),
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.62) 0 1px,
      rgba(0,0,0,.10) 1px 2px,
      transparent 2px calc(100% / var(--n, 3)));
}


/* =====================================================================
   Capa: o texto sai de cima do rosto
   ===================================================================== */
/* O palco centralizava o conteúdo — bem no meio da foto, que é onde o rosto
   quase sempre está. Um testador disse, sem rodeio: "o texto ficou em cima
   da cara". O conteúdo desce para a faixa de baixo, e o véu escurece só ali:
   o rosto fica limpo e a leitura continua fácil. */
.capa-palco{
  justify-content:flex-end;
  padding-bottom:118px;
}
@media (min-width:900px){
  .capa-palco{ padding-bottom:96px; }
}
.capa-veu{
  background:linear-gradient(180deg,
    rgba(10,11,16,.52) 0%,
    rgba(10,11,16,.14) 22%,
    rgba(10,11,16,.16) 44%,
    rgba(10,11,16,.62) 70%,
    rgba(10,11,16,.93) 88%,
    rgba(10,11,16,.97) 100%);
}


/* =====================================================================
   Quebra-cabeça: nível e referência, na mão de quem recebe
   ===================================================================== */

.qc-barra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin:0 auto 16px;
  max-width:min(100%, 420px);
}
.qc-niveis{
  display:flex;
  border:1px solid rgba(var(--ouro-rgb),.34);
  border-radius:999px;
  overflow:hidden;
}
.qc-nivel{
  padding:8px 15px;
  border:0;
  background:transparent;
  color:var(--tinta-2);
  font:inherit;
  font-size:12px;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.qc-nivel.on{ background:rgba(var(--ouro-rgb),.16); color:var(--ouro); }

.qc-espiar{
  padding:8px 15px;
  border:1px solid rgba(var(--ouro-rgb),.34);
  border-radius:999px;
  background:transparent;
  color:var(--ouro);
  font:inherit;
  font-size:12px;
  letter-spacing:.06em;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.qc-espiar:active{ background:rgba(var(--ouro-rgb),.18); }

/* a foto inteira por cima, enquanto o dedo está no botão */
.qc-ref{
  position:absolute;
  inset:0;
  z-index:7;
  border-radius:inherit;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
  box-shadow:0 0 0 2px rgba(var(--ouro-rgb),.55);
}
.qc-ref.on{ opacity:1; }


/* ---------- o papel embaixo do álbum ---------- */
.al-base{
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:3px;
  background:linear-gradient(160deg,#EFE9DD 0%,#DCD3C2 100%);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.9);
}
/* A FOLHA QUE ENTRA APARECE JUNTO COM A VIRADA — segunda revisão desta
   decisão, e vale registrar as duas anteriores.

   PRIMEIRA: visibility:hidden na folha que entra. Errado, e por um motivo
   que só se vê quadro a quadro — esconder a folha 2 não revela papel,
   revela a FOLHA 3, que está logo atrás dela. Era essa a piscada
   original: aparecia a foto seguinte, e só depois a certa.

   SEGUNDA: a folha continuava opaca (tapando as de trás) e o CONTEÚDO
   dela ficava sob uma camada de papel durante a virada, que desbotava no
   meio do caminho. Tecnicamente certo, e é o que um livro de verdade faz.
   Só que num álbum de fotos o efeito colateral saiu pior que o problema:
   dava a impressão de que a foto estava CARREGANDO. Ninguém pensa "que
   bonito, o verso do papel" — pensa "a internet está lenta".

   AGORA: a folha de baixo já está lá, e vai sendo descoberta conforme a
   de cima gira. Nada aparece com atraso, nada desbota, e a foto errada
   continua sem aparecer — porque a folha que entra é opaca e fica acima
   de todas as que vêm depois dela. As duas fotos sempre estiveram
   corretas; a diferença é que agora dá para ver isso. */


/* ---------- capa em tela baixa (a prévia do editor) ---------- */
/* No celular real sobra altura e o texto assenta na faixa de baixo. Dentro
   do quadro curto da prévia não sobrava, e ele voltava a cobrir o rosto. */
.capa-palco{ padding-bottom:clamp(72px, 13svh, 130px); }
@media (max-height:720px){
  .capa-palco{ padding-top:40px; padding-bottom:76px; }
  .capa-titulo{ font-size:clamp(1.9rem, 7.4vw, 2.6rem); }
  .capa-selo{ margin-top:16px; margin-bottom:16px; }
  .capa-num{ font-size:2.4rem; }
}


/* ---------- quebra-cabeça: tudo na mesma coluna ---------- */
/* O título e a explicação começavam na margem da seção; a barra e o
   tabuleiro ficavam centralizados numa coluna de 420px. Duas réguas
   diferentes na mesma seção — daí a sensação de desalinho. */
.qc-intro,
.qc-barra,
.qc-tabuleiro,
.qc-conta,
.qc-premio{
  width:min(100%,420px);
  margin-left:0;
  margin-right:auto;
}
/* a frase do fim estava centralizada na largura da SEÇÃO enquanto todo o
   resto morava numa coluna de 420px encostada à esquerda: duas réguas,
   e era isso que dava a sensação de desalinho no computador */
.qc-premio,
.qc-premio-txt{ text-align:left; }
.qc-barra{ margin-top:18px; margin-bottom:0; max-width:none; }
.qc-tabuleiro{ margin-top:18px; }
.qc-conta i{ font-style:normal; }


/* Na prévia do editor, um fio dourado marca a seção que está aberta do
   outro lado da tela. Some na carta publicada — lá não há "editando". */
.previa .sec--editando{
  box-shadow:inset 0 0 0 1px rgba(var(--ouro-rgb),.30);
  border-radius:2px;
}


/* =====================================================================
   O fecho da carta
   =====================================================================
   Última página do livro. Bastante ar em cima para o fim ser uma pausa e
   não uma parada seca, um ornamento dourado, a assinatura, e a marca
   quase invisível — que existe porque quem recebeu uma carta é a pessoa
   com mais motivo do mundo para querer fazer uma, mas está lendo uma
   declaração, não um anúncio. */
.fecho{
  max-width:620px;
  margin:0 auto;
  /* o fim da carta merece mais ar que uma troca de seção — mas pelo mesmo
     compasso, senão o rodapé parece de outra página */
  padding:calc(var(--ar) * 1.7) 26px
          calc(var(--ar) * 1.1 + env(safe-area-inset-bottom,0px));
  text-align:center;
}
.fecho-orn{
  display:block;
  font-size:15px;
  color:var(--ouro);
  opacity:.8;
}
.fecho-orn::after{
  content:'';
  display:block;
  width:34px; height:1px;
  margin:22px auto 0;
  background:linear-gradient(90deg,
    rgba(var(--ouro-rgb),0), rgba(var(--ouro-rgb),.7), rgba(var(--ouro-rgb),0));
}
.fecho-txt{
  margin:26px 0 0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:1.24rem;
  line-height:1.5;
  color:var(--tinta-2);
}
.fecho-txt b{
  font-weight:400;
  font-style:normal;
  color:var(--tinta);
}
.fecho-marca{
  margin:42px 0 0;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:lowercase;
}
.fecho-marca a{
  color:rgba(var(--tinta2-rgb),.42);
  text-decoration:none;
  transition:color .2s ease;
}
.fecho-marca a:hover{ color:rgba(var(--ouro-rgb),.85); }

/* mais apagada ainda que a marca: quem está lendo uma declaração não
   pode topar com um aviso jurídico, e quem veio procurar uma saída
   encontra assim mesmo — é a última linha da página */
.fecho-retirar{
  margin:14px 0 0;
  font-size:10px;
  letter-spacing:.1em;
}
.fecho-retirar a{
  color:rgba(var(--tinta2-rgb),.30);
  text-decoration:none;
  transition:color .2s ease;
}
.fecho-retirar a:hover,
.fecho-retirar a:focus-visible{ color:rgba(var(--tinta2-rgb),.8); }

/* na prévia do editor a carta não tem fim de verdade — o fecho aparece,
   mas sem a folga enorme, que ali só empurraria o conteúdo para longe */
.previa .fecho{ padding:9vh 26px 7vh; }


/* =====================================================================
   O tempo de vocês (contador)

   Uma seção feita de números precisa de uma hierarquia muito clara,
   senão vira extrato bancário. Aqui há três degraus e nenhum empate:
   o número de dias domina sozinho, o resto é apoio, e a linha do
   próximo marco é a menor de todas — ela é um convite a voltar, não
   uma informação a decorar.
   ===================================================================== */
.ct{ margin-top:34px; text-align:center; }

.ct-desde{
  margin:0;
  font-size:10.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--tinta-2);
}
.ct-num{
  margin:14px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  line-height:1;
}
.ct-num b{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;
  /* o número é o herói da seção: ele cresce com a tela e nunca
     compete com o título, que é mais leve e fica acima */
  font-size:clamp(3.6rem,17vw,6.4rem);
  color:var(--ouro);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.ct-num span{
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--tinta-2);
}
.ct-ext{
  margin:16px 0 0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.25rem;
  font-style:italic;
  color:var(--tinta);
  opacity:.9;
}

.ct-grade{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:34px 0 0;
}
/* três colunas num celular estreito espremem "batidas do coração" em
   sete linhas; abaixo disso as fichas viram uma coluna só */
@media (max-width:400px){
  .ct-grade{ grid-template-columns:minmax(0,1fr); }
}
.ct-ficha{
  padding:16px 12px;
  border:1px solid var(--linha);
  border-radius:14px;
  background:rgba(var(--tinta-rgb),.03);
}
.ct-ficha b{
  display:block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-size:1.6rem;
  line-height:1.1;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.ct-ficha span{
  display:block;
  margin-top:6px;
  font-size:11px;
  line-height:1.45;
  color:var(--tinta-2);
}

.ct-marco{
  margin:30px 0 0;
  font-size:13.5px;
  color:var(--tinta-2);
  text-wrap:pretty;
}
.ct-marco b{ color:var(--ouro); font-weight:400; }


/* =====================================================================
   Cápsula do tempo

   A carta lacrada precisa parecer FECHADA, não parecer um erro de
   carregamento. Daí o selo desenhado, o papel com textura de gradiente
   e a data em destaque: quem chega aqui tem de entender em um segundo
   que não está faltando nada — está guardado.
   ===================================================================== */
.cap{ margin-top:34px; }

.cap-carta{
  position:relative;
  display:block;
  width:100%;
  padding:44px 26px 38px;
  text-align:center;
  border:1px solid rgba(var(--ouro-rgb),.34);
  border-radius:16px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(var(--ouro-rgb),.10) 0%, rgba(var(--ouro-rgb),0) 60%),
    linear-gradient(180deg, rgba(var(--tinta-rgb),.055) 0%, rgba(var(--tinta-rgb),.02) 100%);
  color:inherit;
  font:inherit;
}
.cap-selo{
  display:block;
  width:52px; height:52px;
  margin:0 auto 20px;
  color:var(--ouro);
}
.cap-selo svg{ width:52px; height:52px; }

.cap-quando{
  display:block;
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--tinta-2);
}
.cap-quando b{
  display:inline-block;
  margin-top:4px;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-size:1.45rem;
  color:var(--tinta);
}
.cap-faltam{
  margin:18px 0 0;
  font-size:10.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ouro);
}
.cap-nota{
  margin:16px 0 0;
  text-align:center;
  font-size:12px;
  color:var(--tinta-2);
  opacity:.8;
}

/* a versão que já pode ser aberta é um botão de verdade */
.cap--pronta .cap-carta{
  cursor:pointer;
  transition:border-color .2s ease, transform .2s ease;
}
.cap--pronta .cap-carta:hover{
  border-color:rgba(var(--ouro-rgb),.6);
  transform:translateY(-2px);
}
.cap-toque{
  display:block;
  margin-top:18px;
  font-size:10.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ouro);
}
/* ABERTA: o texto não pode ficar solto embaixo do cartão.

   Na primeira versão o cartão lacrado desbotava e o texto aparecia
   flutuando abaixo dele, sem nada em volta — dois objetos separados na
   tela, quando na cabeça de quem lê é UM: o envelope e o que estava
   dentro. Agora a borda passa a ser da caixa inteira, o cartão vira o
   cabeçalho dela (mantendo a data, que é metade do sentido da seção) e o
   texto mora dentro do mesmo objeto, separado só por um fio. */
.cap--aberta,
.previa .sec--editando .cap--lacrada{
  border:1px solid rgba(var(--ouro-rgb),.34);
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(var(--ouro-rgb),.10) 0%, rgba(var(--ouro-rgb),0) 60%),
    linear-gradient(180deg, rgba(var(--tinta-rgb),.055) 0%, rgba(var(--tinta-rgb),.02) 100%);
}
.cap--aberta .cap-carta,
.previa .sec--editando .cap--lacrada .cap-carta{
  padding:24px 20px 20px;
  border:0;
  border-bottom:1px solid rgba(var(--ouro-rgb),.20);
  border-radius:0;
  background:transparent;
  opacity:.72;
  pointer-events:none;
}
.cap--aberta .cap-selo,
.previa .sec--editando .cap--lacrada .cap-selo{
  width:30px; height:30px; margin-bottom:12px;
}
.cap--aberta .cap-selo svg,
.previa .sec--editando .cap--lacrada .cap-selo svg{ width:30px; height:30px; }
.cap--aberta .cap-toque{ display:none; }

/* NA PRÉVIA, ENQUANTO ESTA É A SEÇÃO SENDO EDITADA, a cápsula aparece
   aberta. Quem escreve precisa ver o que ela vai ver no dia — e, mais
   concreto que isso: para enquadrar a foto guardada é preciso que a foto
   esteja NA TELA. Com ela escondida, o cursor de enquadramento aparecia
   mirando o nada.

   Ao passar para outra etapa a cápsula volta a ficar lacrada sozinha,
   que é como ela nasce para quem recebe. Duas caras, nenhum botão. */
.previa .sec--editando .cap--lacrada .cap-texto[hidden]{ display:block; }
.previa .sec--editando .cap--lacrada .cap-nota{ display:none; }
.previa .sec--editando .cap--lacrada .cap-faltam{ opacity:.6; }
.previa .sec--editando .cap--lacrada .cap-texto::before{
  content:'assim ela vê no dia';
  display:block;
  margin:0 0 18px;
  font-size:9.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ouro);
  opacity:.75;
}

.cap-texto{
  padding:30px 24px 32px;
  animation:cap-surge .8s cubic-bezier(.2,.7,.3,1) both;
}
/* a foto guardada: sai da margem do texto para os dois lados, porque
   dentro de uma caixa estreita uma foto com margem parece um anexo */
.cap-foto{
  margin:0 -24px 26px;
}
.cap-foto img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:var(--px,50%) var(--py,50%);
}
.cap-foto figcaption{
  margin:12px 24px 0;
  text-align:center;
  font-size:12.5px;
  color:var(--tinta-2);
}
.cap-texto p{
  margin:0 0 1.15em;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.32rem;
  line-height:1.75;
}
.cap-texto p:last-child{ margin-bottom:0; }
@keyframes cap-surge{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .cap-texto{ animation:none; }
  .cap--pronta .cap-carta:hover{ transform:none; }
}




/* =====================================================================
   A GERAL DE LAYOUT — o ar, e o que fazer com a largura que sobra
   =====================================================================

   Duas queixas diferentes que na verdade são a mesma: no computador
   "sobra espaço". Sobra em dois eixos.

   NA VERTICAL sobrava porque o respiro era 13vh — media a tela, não a
   leitura. Isso já está resolvido lá em cima, na variável --ar.

   NA HORIZONTAL sobra porque a carta é uma coluna de 620px no meio de
   um monitor de 1400. Para TEXTO isso está certo e não se mexe: linha
   longa demais é linha que a pessoa perde ao voltar. Mas as seções que
   não são texto — o tocador de música, o tabuleiro do quebra-cabeça —
   estavam obedecendo a uma régua feita para leitura, e por isso
   apareciam como um objeto pequeno no meio do nada.

   O resto deste bloco é: um fio para o ar entre as seções deixar de
   parecer buraco, e essas duas seções ocupando a largura que já era
   delas.
   ===================================================================== */


/* ---------- 1. o fio entre uma seção e outra ----------

   Silêncio sem marca nenhuma parece falta de conteúdo; com uma marca
   no meio, vira pausa. É a mesma função do ornamento no meio de um
   capítulo de livro impresso, e pelo mesmo motivo.

   A margem negativa é exatamente -1 × --ar, que é o tamanho do respiro
   de baixo da seção anterior. Isso põe o fio na fronteira exata entre
   as duas — no MEIO do vão, não colado no título de baixo (que o faria
   parecer um sublinhado do título). */
.sec + .sec::before{
  content:'\2727';                    /* ✧ */
  display:block;
  width:100%;
  max-width:220px;
  margin:calc(var(--ar) * -1) auto var(--ar);
  text-align:center;
  font-size:9px;
  line-height:1;
  color:rgba(var(--ouro-rgb),.55);
  background-image:
    linear-gradient(90deg, rgba(var(--tinta-rgb),0), rgba(var(--tinta-rgb),.17)),
    linear-gradient(90deg, rgba(var(--tinta-rgb),.17), rgba(var(--tinta-rgb),0));
  background-size:calc(50% - 22px) 1px, calc(50% - 22px) 1px;
  background-position:left center, right center;
  background-repeat:no-repeat;
}
/* a capa é tela cheia e termina no próprio limite: um fio logo abaixo
   dela cairia em cima da borda da foto, não no ar */
.sec--capa::before,
.sec--capa + .sec::before{ display:none; }
/* seção ainda vazia só existe na prévia, e já vem com as suas próprias
   linhas tracejadas — dois separadores seguidos é ruído */
.sec--fantasma::before,
.sec--fantasma + .sec::before{ display:none; }


/* ---------- 2. o tocador deitado, no computador ----------

   Em pé (capa em cima, nome embaixo) é o formato certo no celular: é a
   forma de um disco na tela de um telefone. No computador o mesmo
   desenho vira uma torre estreita de 270px no meio de uma coluna de
   620 — e a seção fica com o dobro da altura que precisa.

   Deitado, é a forma de um disco na estante: capa à esquerda, nome e
   artista à direita, a barra do tempo correndo embaixo do nome. Mesma
   informação, metade da altura, nenhum vão.

   As linhas 1fr no começo e no fim são o truque que centra o bloco de
   texto ao lado da capa sem esticar os espaços ENTRE as linhas dele —
   que é o que aconteceria com um simples align-items:center. */
@media (min-width:760px){
  .tocador{
    display:grid;
    grid-template-columns:216px minmax(0,1fr);
    grid-template-rows:1fr auto auto auto auto 1fr;
    column-gap:36px;
    align-items:start;
    text-align:left;
    margin-top:42px;
  }
  .tc-capa{
    grid-column:1;
    grid-row:1 / -1;
    align-self:center;
    width:216px;
  }
  .tc-play{ width:66px; height:66px; }
  .tc-track   { grid-column:2; grid-row:2; margin:0 0 7px; }
  .tc-artista { grid-column:2; grid-row:3; margin:0 0 22px; }
  .tc-barra   { grid-column:2; grid-row:4; width:100%; }
  .tc-nota    { grid-column:2; grid-row:5; margin:14px 0 0; }
}


/* ---------- 3. o quebra-cabeça na largura que é dele ----------

   O conserto anterior pôs tudo numa régua só (420px encostada à
   esquerda) e resolveu o desalinho. Só que no computador a seção tem
   640px: sobravam 220px de nada à direita do tabuleiro, e a peça
   central da seção — o tabuleiro — ficava pequena justo na tela em que
   havia espaço para ela ser grande.

   Agora a régua é a própria largura da seção, e a seção encolhe um
   pouco. As duas margens fecham, o tabuleiro cresce uns 50px e as
   peças ficam maiores — o que importa de verdade quando são 25. */
@media (min-width:760px){
  .sec--quebracabeca{ max-width:540px; }
  .qc-intro,
  .qc-barra,
  .qc-tabuleiro,
  .qc-conta,
  .qc-premio{ width:100%; max-width:none; }
  .qc-tabuleiro{ margin-left:0; margin-right:0; }
}


/* ---------- 4. espiar virou interruptor: precisa PARECER ligado ----

   Botão que alterna e não muda de cara é botão que a pessoa aperta
   duas vezes sem querer. O texto já troca ("espiar" / "esconder"); a
   cor confirma. O min-width evita que a barra inteira dance quando a
   palavra cresce. */
.qc-espiar{ min-width:132px; text-align:center; }
.qc-espiar.on{
  background:rgba(var(--ouro-rgb),.16);
  border-color:rgba(var(--ouro-rgb),.55);
}
/* três níveis agora, e em tela estreita eles não cabem com o mesmo
   fôlego dos dois de antes */
@media (max-width:430px){
  .qc-nivel{ padding:8px 10px; font-size:11.5px; letter-spacing:.03em; }
  .qc-espiar{ padding:8px 12px; font-size:11.5px; min-width:118px; }
  .qc-barra{ gap:10px; }
}


/* ---------- 5. o clarão de "ver como ficou" ----------

   Só existe dentro da prévia do editor. No computador a prévia já está
   parada na seção certa, então rolar até ela não move nada e o botão
   parecia quebrado. Isto é o "é esta aqui": dois segundos de brilho e
   sai de cena sozinho — o mesmo tempo que o editor usa para tirar a
   classe. Nunca aparece na carta publicada. */
.previa .sec--olha{
  border-radius:3px;
  animation:olha 2s cubic-bezier(.2,.7,.3,1) 1;
}
@keyframes olha{
  0%   { box-shadow:inset 0 0 0 1px rgba(var(--ouro-rgb),.30);
         background-color:transparent; }
  14%  { box-shadow:inset 0 0 0 2px rgba(var(--ouro-rgb),.95);
         background-color:rgba(var(--ouro-rgb),.10); }
  62%  { box-shadow:inset 0 0 0 2px rgba(var(--ouro-rgb),.6);
         background-color:rgba(var(--ouro-rgb),.055); }
  100% { box-shadow:inset 0 0 0 1px rgba(var(--ouro-rgb),.30);
         background-color:transparent; }
}
@media (prefers-reduced-motion:reduce){
  .previa .sec--olha{
    animation:none;
    box-shadow:inset 0 0 0 2px rgba(var(--ouro-rgb),.8);
  }
}


/* ---------- 6. viúvas ----------

   Uma palavra sozinha na última linha de um parágrafo é um defeito de
   composição que ninguém sabe nomear e todo mundo enxerga. text-wrap
   pede ao navegador que puxe uma companheira para ela; onde não houver
   suporte, nada acontece — é melhoria de graça. */
.qc-intro,
.aq-intro,
.ct-ext,
.ct-marco,
.cap-nota,
.cap-texto p,
.declaracao p,
.fecho-txt{ text-wrap:pretty; }


/* ---------- 7. a prévia acompanha o novo compasso ---------- */
.previa .fecho{
  padding:calc(var(--ar) * .95) 26px calc(var(--ar) * .8);
}


/* ---------- 8. a data, e a porta de quem recebeu ----------

   A DATA vai logo abaixo da assinatura, que é onde ela fica numa carta
   de papel. Miúda, em itálico: ela não é informação a ser lida agora —
   é informação a ser encontrada daqui a alguns anos.

   O GUARDAR UMA CÓPIA fica entre a marca e a linha da retirada, e no
   estado normal é tão apagado quanto elas. Só quando o prazo aperta ele
   sobe de tom: aí vira uma frase, ganha um fio dourado em volta e passa
   a explicar por que está ali. É a mesma porta com duas vozes. */
.fecho-data{
  margin:12px 0 0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:.98rem;
  letter-spacing:.02em;
  color:rgba(var(--tinta2-rgb),.72);
}

.fecho-guardar{
  margin:20px 0 0;
  font-size:11px;
  letter-spacing:.08em;
  line-height:1.7;
}
/* SEM SUBLINHADO CHEIO NO ESTADO CALADO.

   A primeira versão tinha border-bottom, e o efeito foi o contrário do
   pretendido: a linha fazia o "guardar uma cópia" saltar MAIS que a
   assinatura da marca logo acima. No fim de uma declaração de amor, o
   elemento mais visível não pode ser um botão de download.

   O sublinhado continua — é o que diz que aquilo se clica —, só que
   quase apagado, e acende quando o dedo ou o mouse chega perto. */
.fecho-guardar a{
  color:rgba(var(--tinta2-rgb),.44);
  text-decoration:underline;
  text-decoration-color:rgba(var(--tinta2-rgb),.16);
  text-underline-offset:4px;
  transition:color .2s ease, text-decoration-color .2s ease;
}
.fecho-guardar a:hover,
.fecho-guardar a:focus-visible{
  color:var(--ouro);
  text-decoration-color:rgba(var(--ouro-rgb),.6);
}

/* o prazo apertando */
.fecho-guardar--aviso{
  max-width:420px;
  margin:26px auto 0;
  padding:16px 20px;
  border:1px solid rgba(var(--ouro-rgb),.30);
  border-radius:14px;
  background:rgba(var(--ouro-rgb),.055);
  font-size:12.5px;
  letter-spacing:0;
  text-wrap:pretty;
}
.fecho-guardar--aviso .fg-nota{
  display:block;
  margin-bottom:8px;
  color:var(--tinta-2);
}
.fecho-guardar--aviso a{
  color:var(--ouro);
  text-decoration-color:rgba(var(--ouro-rgb),.45);
}


/* ---------- 9. a cápsula com data de hoje, ou já passada ----------

   A regra "na prévia, a cápsula aparece aberta enquanto for ELA a seção
   sendo editada" existia — só que escrita para .cap--lacrada, e uma
   cápsula lacrada é a que tem data no futuro.

   Quem escolhe HOJE (ou uma data que já passou) cai no outro estado,
   .cap--pronta: o cartão com "toque para abrir". E aí a regra não
   pegava. A foto ficava dentro de um bloco escondido, e três coisas
   quebravam de uma vez, todas caladas:

     · a prévia não rolava até a seção — scrollIntoView num elemento
       sem caixa na tela não faz nada e não avisa;
     · o enquadramento media o cartão lacrado no lugar da foto, porque
       um elemento escondido mede zero;
     · e a única saída era a pessoa rolar com o dedo e tocar no cartão.

   Foi exatamente isso o "a section não abriu na prévia, tive que rolar
   sozinho e clicar". Agora as duas caras da cápsula seguem a mesma
   regra: enquanto está sendo editada, ela está aberta. */
.previa .sec--editando .cap--pronta{
  border:1px solid rgba(var(--ouro-rgb),.34);
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(var(--ouro-rgb),.10) 0%, rgba(var(--ouro-rgb),0) 60%),
    linear-gradient(180deg, rgba(var(--tinta-rgb),.055) 0%, rgba(var(--tinta-rgb),.02) 100%);
}
.previa .sec--editando .cap--pronta .cap-carta{
  padding:24px 20px 20px;
  border:0;
  border-bottom:1px solid rgba(var(--ouro-rgb),.20);
  border-radius:0;
  background:transparent;
  opacity:.72;
  cursor:default;
  pointer-events:none;
  transform:none;
}
.previa .sec--editando .cap--pronta .cap-selo{
  width:30px; height:30px; margin-bottom:12px;
}
.previa .sec--editando .cap--pronta .cap-selo svg{ width:30px; height:30px; }
/* "toque para abrir" não faz sentido no que já está aberto */
.previa .sec--editando .cap--pronta .cap-toque{ display:none; }
.previa .sec--editando .cap--pronta .cap-texto[hidden]{ display:block; }
.previa .sec--editando .cap--pronta .cap-texto::before{
  content:'assim ela vê ao abrir';
  display:block;
  margin:0 0 18px;
  font-size:9.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ouro);
  opacity:.75;
}