/* ═══════════════════════════════════════════════════════════════════════════
   Convite de 15 anos da Milena — sistema visual

   DIREÇÃO: editorial de moda, não template de casamento.
   Três decisões que sustentam o resto:

   1. TIPOGRAFIA — Bodoni Moda (didone: hastes finíssimas contra hastes grossas)
      no display, Jost (geométrica) nos rótulos, e Pinyon Script APENAS no nome
      da aniversariante. O contraste entre as três é o que dá sofisticação —
      a caligráfica em qualquer outro lugar viraria enfeite barato.
   2. SEM CAIXAS — nada de retângulo com borda em volta de cada informação.
      Hierarquia se faz com escala, espaço e fio de 1px.
   3. SEM COSTURA — a foto não termina numa linha reta: ela se dissolve no
      fundo por um degradê longo, então imagem e texto viram uma coisa só.

   Paleta da festa: #282B68 marinho · #0C1679 royal · #BCBABD prata,
   sobre uma base mais profunda para a prata ter onde brilhar.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --tinta:#05081F;          /* base, quase preto azulado */
  --tinta-media:#0A1038;
  --marinho:#282B68;
  --royal:#0C1679;
  --prata:#C9C7CC;
  --prata-fraca:rgba(201,199,204,.78);
  --fio:rgba(201,199,204,.16);
  --luz:#EDEEF5;
  --serenity:#A9C2E8;

  --display:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --ui:"Jost","Futura",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Pinyon Script: caligráfica de traço fino e formal, no espírito de um
     convite gravado. Entra SÓ no nome — em qualquer outro lugar viraria enfeite. */
  --script:"Pinyon Script","Snell Roundhand",cursive;

  --palco:460px;
  --margem:clamp(24px,6.5vw,38px);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:#03050F; overflow:hidden;
  font-family:var(--ui); font-weight:300; color:var(--luz);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ── Palco ─────────────────────────────────────────────────────────────── */
.palco{
  width:100vw; height:100vh; height:100svh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
@supports (height:100dvh){ .palco{ height:100dvh; } }
.cena{
  position:relative; width:100%; max-width:var(--palco); height:100%;
  background:var(--tinta); overflow:hidden;
  box-shadow:0 0 120px rgba(0,0,0,.75);
}

/* ── Telas ─────────────────────────────────────────────────────────────── */
.tela{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .7s cubic-bezier(.4,0,.2,1), visibility .7s;
}
.tela.ativa{ opacity:1; visibility:visible; pointer-events:auto; }

/* barra de rolagem: um fio, e só quando o ponteiro está por perto */
.tela, .ficha{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
.tela:hover, .ficha:hover{ scrollbar-color:rgba(201,199,204,.3) transparent; }
.tela::-webkit-scrollbar, .ficha::-webkit-scrollbar{ width:3px; }
.tela::-webkit-scrollbar-track, .ficha::-webkit-scrollbar-track{ background:transparent; }
.tela::-webkit-scrollbar-thumb, .ficha::-webkit-scrollbar-thumb{ background:transparent; border-radius:99px; }
.tela:hover::-webkit-scrollbar-thumb, .ficha:hover::-webkit-scrollbar-thumb{ background:rgba(201,199,204,.32); }

.fundo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; user-select:none; -webkit-user-drag:none;
}
.veu{ position:absolute; inset:0; pointer-events:none; }

/* Grão de filme: tira o "liso digital" do fundo chapado. Sutil de propósito. */
.grao{
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ── Tipografia ────────────────────────────────────────────────────────── */
.sobretitulo{
  margin:0; font-family:var(--ui); font-weight:300;
  font-size:clamp(9px,2.4vw,10.5px); letter-spacing:.58em; text-indent:.58em;
  text-transform:uppercase; color:var(--prata-fraca);
  text-shadow:0 1px 12px rgba(5,8,31,.95), 0 0 30px rgba(5,8,31,.8);
}
.rotulo{
  margin:0 0 clamp(7px,1.2vh,11px); font-family:var(--ui); font-weight:400;
  font-size:clamp(8px,2.1vw,9.5px); letter-spacing:.44em; text-indent:.44em;
  text-transform:uppercase; color:var(--prata-fraca);
}
.destaque{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:clamp(21px,5.8vw,27px); line-height:1.24; letter-spacing:.005em;
  color:var(--luz);
}
.apoio{
  margin:7px 0 0; font-family:var(--ui); font-weight:300;
  font-size:clamp(11.5px,3.1vw,13px); line-height:1.68;
  color:rgba(237,238,245,.84); white-space:pre-line;
}

/* fio horizontal — substitui todo ornamento */
.fio{ width:100%; height:1px; background:var(--fio); border:0; margin:0; }
.fio-curto{
  width:46px; height:1px; margin:clamp(14px,2.4vh,20px) auto 0;
  background:linear-gradient(90deg,transparent,var(--prata),transparent);
}

/* ── 1 · Capa ──────────────────────────────────────────────────────────── */
.capa .veu{
  /* Escuro em cima e embaixo, aberto no meio. A foto é clara (pedra bege,
     céu cinza) e a tipografia é prata: sem esta base escura o texto some —
     foi exatamente o que aconteceu antes. */
  /* Medido no arquivo: o rosto da Milena está a 31,6% e a cabeça ocupa de
     26,9% a 37,8%. O véu precisa estar ABERTO ali — antes escurecia 68%
     exatamente em cima dela. Escuro só onde há texto: topo e base. */
  background:linear-gradient(180deg,
    rgba(3,6,22,.97) 0%,
    rgba(3,6,22,.93) 13%,
    rgba(3,6,22,.76) 21%,
    rgba(4,8,30,.32) 26%,
    rgba(4,8,30,.10) 32%,
    rgba(4,8,30,.10) 50%,
    rgba(4,8,30,.30) 60%,
    rgba(3,6,22,.82) 74%,
    rgba(3,6,22,.99) 100%);
}
.capa .miolo{
  position:relative; z-index:2; flex:1; min-height:0;
  padding-left:0; padding-right:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(clamp(18px,3vh,32px) + env(safe-area-inset-top)) var(--margem) 0;
  text-align:center;
}
/* a capa nunca rola: o envelope encosta na base, como pousado numa mesa */
.capa{ overflow:hidden; }
.assinatura-capa{ display:flex; flex-direction:column; align-items:center; }
.nome{
  margin:0; font-family:var(--script); font-weight:400;
  font-size:clamp(50px,16.5vw,84px); line-height:1; letter-spacing:.01em;
  color:#fff;
  /* a caligráfica tem traço fino: sem esta sombra ela some no céu da foto */
  text-shadow:0 2px 18px rgba(5,8,31,.9), 0 6px 46px rgba(5,8,31,.7);
}

/* XV com acabamento de prata escovada — o degradê imita a luz batendo no metal,
   como no selo do envelope. Precisa de drop-shadow: com o texto recortado no
   degradê, text-shadow deixa de valer. */
.xv{
  display:flex; align-items:baseline; justify-content:center; gap:.62em;
  margin:clamp(6px,1.1vh,11px) 0 0; font-family:var(--display); font-weight:500;
  font-size:clamp(24px,7.4vw,36px); line-height:1; letter-spacing:.22em; text-indent:.22em;
  color:#EDEEF5;
  text-shadow:0 2px 10px rgba(3,6,22,.95), 0 0 26px rgba(3,6,22,.85);
}
.floreio{
  width:clamp(104px,32vw,152px); height:auto; margin:clamp(5px,.9vh,9px) 0 0;
  color:#CFD0DA; fill:currentColor; opacity:1;
  filter:drop-shadow(0 1px 8px rgba(5,8,31,.9));
}
.anos{
  margin:0; font-family:var(--ui); font-weight:300;
  font-size:clamp(9px,2.4vw,10.5px); letter-spacing:.62em; text-indent:.62em;
  text-transform:uppercase; color:#DCDDE6;
  text-shadow:0 1px 10px rgba(3,6,22,.95), 0 0 22px rgba(3,6,22,.8);
}
.data-capa{
  margin:clamp(13px,2.2vh,19px) 0 0; font-family:var(--ui); font-weight:300;
  font-size:clamp(10px,2.7vw,11.5px); letter-spacing:.46em; text-indent:.46em;
  color:#E2E3EB; text-shadow:0 1px 10px rgba(3,6,22,.95), 0 0 24px rgba(3,6,22,.85);
}
.rodape-capa{ display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.4vh,22px); }
.saudacao{
  margin:0; min-height:1.3em; font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(16px,4.3vw,19px); color:var(--serenity);
  text-shadow:0 2px 18px rgba(5,8,31,.9);
}

/* ── Botões ────────────────────────────────────────────────────────────── */
.botao{
  display:inline-flex; align-items:center; justify-content:center;
  padding:clamp(14px,2.1vh,17px) 30px; min-height:48px;
  font-family:var(--ui); font-weight:400;
  font-size:clamp(9.5px,2.5vw,10.5px); letter-spacing:.36em; text-indent:.36em;
  text-transform:uppercase; color:var(--luz);
  background:transparent; border:1px solid rgba(201,199,204,.34); border-radius:0;
  cursor:pointer; text-decoration:none;
  transition:background .45s cubic-bezier(.4,0,.2,1), color .45s, border-color .45s, transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.botao:hover{ background:rgba(201,199,204,.1); border-color:var(--prata); }
.botao:active{ transform:scale(.985); }
/* o primário é prata sólida sobre o marinho: contraste máximo, zero enfeite */
.botao.cheio{ background:var(--prata); border-color:var(--prata); color:#0A1038; font-weight:500; }
.botao.cheio:hover{ background:#fff; border-color:#fff; }
.botao.miudo{ padding:12px 10px; min-height:42px; font-size:9px; letter-spacing:.26em; text-indent:.26em; }
.botao[disabled]{ opacity:.4; cursor:default; }

/* ── 2 · O convite ─────────────────────────────────────────────────────── */
/* A foto não tem borda inferior: o degradê come os 45% de baixo dela e
   entrega no fundo da tela. É o que elimina a "costura". */
.faixa-foto{
  position:relative; flex:1 1 auto; overflow:hidden;
  min-height:clamp(210px,36vh,380px);
}
.faixa-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; }
.faixa-foto .veu{
  background:linear-gradient(180deg,
    rgba(5,8,31,.4) 0%, rgba(5,8,31,0) 26%, rgba(5,8,31,.1) 48%,
    rgba(5,8,31,.72) 76%, var(--tinta) 100%);
}
.faixa-foto .selo{ position:absolute; left:0; right:0; bottom:clamp(14px,2.4vh,24px); z-index:2; text-align:center; }
.faixa-foto .selo p{
  margin:0; font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(18px,5vw,22px); color:var(--luz);
  text-shadow:0 2px 22px rgba(5,8,31,.95);
}

.painel{
  position:relative; z-index:2; flex:0 0 auto;
  padding:0 var(--margem) calc(clamp(22px,3.6vh,36px) + env(safe-area-inset-bottom));
}

/* contagem: números nus, separados por fio vertical. Sem caixa. */
.contagem{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin:clamp(4px,1vh,10px) 0 clamp(20px,3.2vh,30px);
}
.contagem div{ padding:2px 0; text-align:center; border-left:1px solid var(--fio); }
.contagem div:first-child{ border-left:0; }
.contagem b{
  display:block; font-family:var(--display); font-weight:300;
  font-size:clamp(30px,9.5vw,44px); line-height:1; color:#fff;
  /* 🔴 o Bodoni traz algarismos de texto por padrão: sem isto o "2" da
     contagem desce abaixo da linha e os números ficam desalinhados */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
.contagem span{
  display:block; margin-top:9px; font-family:var(--ui); font-weight:300;
  font-size:clamp(7.5px,2vw,8.5px); letter-spacing:.3em; text-indent:.3em;
  text-transform:uppercase; color:var(--prata-fraca);
}

/* linhas de informação: rótulo miúdo, valor grande, fio embaixo */
.linha-info{ padding:clamp(15px,2.6vh,22px) 0; border-top:1px solid var(--fio); text-align:left; }
.linha-info:last-of-type{ border-bottom:1px solid var(--fio); }

.acoes{ display:flex; flex-direction:column; gap:clamp(8px,1.4vh,12px); margin-top:clamp(20px,3.2vh,30px); }
.acoes .botao{ width:100%; }
.dupla{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1.4vh,12px); }

.assinatura{ margin-top:clamp(20px,3.4vh,32px); text-align:center; }
.assinatura p{
  margin:0; font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(19px,5.2vw,23px); color:var(--serenity);
}
.assinatura small{
  display:block; margin-top:10px; font-family:var(--ui); font-weight:300;
  font-size:8.5px; letter-spacing:.44em; text-indent:.44em;
  text-transform:uppercase; color:var(--prata-fraca);
}

/* ── 3 e 4 · Telas internas ────────────────────────────────────────────── */
.interna .fundo{ opacity:.18; filter:saturate(.7); }
.interna .veu{
  background:linear-gradient(180deg,rgba(5,8,31,.97) 0%,rgba(5,8,31,.92) 42%,rgba(5,8,31,.99) 100%);
}
.cabeca{
  position:relative; z-index:2; flex:0 0 auto; text-align:center;
  padding:calc(clamp(22px,3.8vh,34px) + env(safe-area-inset-top)) var(--margem) 0;
}
.voltar{
  position:absolute; left:calc(var(--margem) - 8px);
  top:calc(clamp(20px,3.4vh,32px) + env(safe-area-inset-top));
  padding:8px; background:none; border:0; cursor:pointer;
  font-family:var(--ui); font-weight:400; font-size:9px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--prata-fraca);
  transition:color .3s;
}
.voltar:hover{ color:var(--luz); }
.conteudo-interno{
  position:relative; z-index:2; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  padding:clamp(18px,3vh,28px) var(--margem) calc(clamp(22px,3.6vh,34px) + env(safe-area-inset-bottom));
}

/* galeria: fotos coladas, quase sem respiro — leitura de editorial */
.grade{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px;
}
.grade img{ width:100%; height:100%; object-fit:cover; display:block; }

.lista{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; }

/* ── Som ───────────────────────────────────────────────────────────────── */
.som{
  position:absolute; z-index:40; right:16px; top:calc(16px + env(safe-area-inset-top));
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,8,31,.35); border:1px solid rgba(201,199,204,.3);
  color:var(--prata); font-size:12px; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .3s, color .3s;
}
.som:hover{ border-color:var(--prata); color:#fff; }

/* ── Confirmação de presença ───────────────────────────────────────────── */
.sobreposicao{
  position:fixed; inset:0; z-index:900; display:none;
  align-items:center; justify-content:center; padding:14px;
  background:rgba(3,5,15,.9); backdrop-filter:blur(7px);
}
.sobreposicao.aberta{ display:flex; }
.ficha{
  width:100%; max-width:calc(var(--palco) - 28px); max-height:96dvh; overflow-y:auto;
  padding:clamp(26px,4vh,36px) clamp(22px,5.5vw,30px)
          calc(clamp(20px,3.4vh,28px) + env(safe-area-inset-bottom));
  background:linear-gradient(168deg,#0E1440,#070B26);
  border:1px solid rgba(201,199,204,.2);
  animation:sobe .45s cubic-bezier(.4,0,.2,1);
}
@keyframes sobe{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }
.ficha h2{
  margin:0; font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(24px,6.4vw,30px); line-height:1.15; color:#fff;
}

.campo{ margin-top:clamp(14px,2.2vh,19px); text-align:left; }
.campo label{
  display:block; margin:0 0 8px; font-family:var(--ui); font-weight:400;
  font-size:8.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--prata-fraca);
}
.campo input, .campo select, .campo textarea{
  width:100%; padding:13px 2px; font-family:var(--ui); font-weight:300; font-size:16px;
  color:var(--luz); background:transparent;
  border:0; border-bottom:1px solid rgba(201,199,204,.28); border-radius:0; outline:none;
  transition:border-color .35s;
}
.campo textarea{ min-height:56px; resize:none; font-size:14px; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ border-bottom-color:var(--serenity); }
.campo select{ appearance:none; }
.campo select option{ background:#0E1440; color:var(--luz); }

.escolha{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:clamp(16px,2.6vh,22px); }
.escolha button{
  padding:14px 6px; font-family:var(--ui); font-weight:400;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
  color:var(--prata); background:transparent;
  border:1px solid rgba(201,199,204,.28); transition:all .35s;
}
.escolha button:hover{ border-color:var(--prata); color:var(--luz); }
.escolha button.marcado{ color:#0A1038; background:var(--prata); border-color:var(--prata); font-weight:500; }

.recado-sistema{
  margin-top:16px; padding:12px 14px; font-family:var(--ui); font-weight:300;
  font-size:12px; line-height:1.55; display:none; text-align:left;
}
.recado-sistema.erro{ display:block; border-left:2px solid #D98BA4; background:rgba(217,139,164,.09); color:#F0C4D2; }
.recado-sistema.certo{ display:block; border-left:2px solid var(--serenity); background:rgba(169,194,232,.09); color:#CFE0F5; }

.fechar{
  display:block; width:100%; margin-top:14px; padding:10px;
  background:none; border:0; cursor:pointer; font-family:var(--ui); font-weight:300;
  font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:rgba(201,199,204,.5);
}
.fechar:hover{ color:var(--prata); }

.escondido{ display:none !important; }

/* ── Dica de rolagem ───────────────────────────────────────────────────── */
.dica-rolagem{
  position:absolute; z-index:30; left:50%; transform:translateX(-50%);
  bottom:calc(9px + env(safe-area-inset-bottom));
  width:24px; height:24px; display:none; align-items:center; justify-content:center;
  color:var(--prata-fraca); font-size:11px; pointer-events:none;
  animation:desce 2.2s ease-in-out infinite; transition:opacity .4s;
}
.dica-rolagem.visivel{ display:flex; }
.dica-rolagem.sumindo{ opacity:0; }
@keyframes desce{
  0%,100%{ transform:translateX(-50%) translateY(0); opacity:.4 }
  50%    { transform:translateX(-50%) translateY(4px); opacity:.9 }
}

/* ── Cortina ───────────────────────────────────────────────────────────── */
.cortina{
  position:fixed; inset:0; z-index:2000; background:var(--tinta);
  display:flex; align-items:center; justify-content:center; transition:opacity .8s ease;
}
.cortina.sai{ opacity:0; pointer-events:none; }
.cortina span{
  font-family:var(--display); font-weight:300; font-style:italic; font-size:34px;
  letter-spacing:.02em; color:var(--serenity); animation:pulsa 2s ease-in-out infinite;
}
@keyframes pulsa{ 0%,100%{ opacity:.3 } 50%{ opacity:.95 } }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   O ENVELOPE

   A arte é uma imagem só (arte/envelope.webp, fundo removido). Por isso a
   animação NÃO recorta a aba: o selo e o laço ficam bem em cima da dobra, e
   qualquer corte ali rasgaria o medalhão ao meio.
   O gesto é outro, e funciona igual de bem — a carta sobe DE TRÁS do
   envelope, que ao mesmo tempo se inclina e afunda um pouco.
   ═══════════════════════════════════════════════════════════════════════════ */

.envelope-area{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(13px,2.2vh,20px);
  /* Fundo próprio, e não do véu da tela: o bloco muda de altura conforme o
     aparelho, então um degradê preso à tela erra o alvo — foi o que deixou a
     data e a chamada ilegíveis sobre o vestido claro. */
  padding:clamp(22px,4vh,38px) var(--margem) 0;
  background:linear-gradient(180deg,
    transparent 0%, rgba(3,6,22,.5) 22%, rgba(3,6,22,.78) 46%, rgba(3,6,22,.9) 100%);
  transition:opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1);
}
.envelope-area.saindo{ opacity:0; transform:scale(1.1); }

.envelope{
  position:relative; width:min(68%,252px); aspect-ratio:1200/771;
  perspective:1100px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  /* container: o nome escrito no envelope é dimensionado em cqw, então
     acompanha o tamanho do envelope em vez da largura da tela */
  container-type:inline-size;
}

/* O nome de quem recebe, escrito no envelope — como num convite entregue em
   mãos. A faixa 80–90%% da arte foi medida como a mais lisa do desenho
   (desvio 21 contra 45 no miolo), e é onde o destinatário vai num envelope. */
.env-nome{
  position:absolute; z-index:4; left:9%; right:9%; top:78%;
  margin:0; font-family:var(--script); font-weight:400;
  font-size:clamp(17px,6.2vw,26px);
  font-size:7.4cqw;
  line-height:1.12; text-align:center; color:#F2F3F9;
  text-shadow:0 1px 9px rgba(5,8,31,.75);
  /* A lista real tem convites com cinco nomes ('Gabriela, Matheus, Jhonata,
     Kayke e Ágatha'). Numa linha só eles seriam cortados, então o nome quebra
     em até duas linhas e encolhe um pouco quando é longo. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-wrap:balance;
  opacity:0; transition:opacity .8s ease .3s;
}
.env-nome.visivel{ opacity:1; }
.envelope:focus-visible{ outline:1px solid var(--prata); outline-offset:10px; }

.env-img{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 20px 34px rgba(3,5,20,.72));
  transform-origin:center bottom;
  transition:transform .95s cubic-bezier(.5,.02,.24,1);
  user-select:none; -webkit-user-drag:none;
}
/* brilho suave que sugere o cetim pegando luz ao tocar */
.envelope::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-6%; height:14%;
  z-index:1; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(169,194,232,.22), transparent 70%);
  opacity:0; transition:opacity .8s ease;
}
.envelope.aberto::after{ opacity:1; }

/* a carta que sobe de dentro */
.carta{
  position:absolute; left:7%; right:7%; bottom:7%; height:86%; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:12px;
  background:linear-gradient(168deg,#F1F2F7,#DADEEC);
  box-shadow:0 -3px 22px rgba(3,5,20,.45);
  transform:translateY(0);
  transition:transform 1.05s cubic-bezier(.32,.78,.28,1) .12s;
}
.carta-linha{
  margin:0; font-family:var(--ui); font-weight:300;
  font-size:clamp(7px,1.9vw,8.5px); letter-spacing:.42em; text-indent:.42em;
  text-transform:uppercase; color:#5A6086;
}
.carta-nome{
  margin:0; font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(26px,8vw,38px); line-height:1; color:#0A1038;
}
.carta-fio{ margin:2px 0; width:34px; height:1px; background:rgba(40,43,104,.38); }
.carta-data{
  margin:0; font-family:var(--ui); font-weight:300;
  font-size:clamp(7.5px,2vw,9px); letter-spacing:.4em; text-indent:.4em; color:#3C4270;
}

/* ── estado aberto ─────────────────────────────────────────────────────── */
.envelope.aberto .carta{ transform:translateY(-74%) scale(1.03); }
.envelope.aberto .env-img{ transform:translateY(3%) rotateX(7deg) scale(.99); }

/* ── chamado ───────────────────────────────────────────────────────────── */
.chamado{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:6px 10px; background:none; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.chamado-alto{
  font-family:var(--ui); font-weight:300;
  font-size:clamp(8px,2.2vw,9.5px); letter-spacing:.46em; text-indent:.46em;
  text-transform:uppercase; color:#C6C8D6;
  text-shadow:0 1px 10px rgba(3,6,22,.95), 0 0 20px rgba(3,6,22,.9);
}
.chamado-baixo{
  position:relative; padding-bottom:8px;
  font-family:var(--display); font-weight:300;
  font-size:clamp(16px,4.5vw,20px); letter-spacing:.16em; text-indent:.16em;
  text-transform:uppercase; color:#F4F5FA;
  text-shadow:0 2px 14px rgba(3,6,22,.95), 0 0 26px rgba(3,6,22,.9);
}
.chamado-baixo::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:1px;
  background:var(--prata); transform:translateX(-50%); transition:width .5s ease;
}
.chamado:hover .chamado-baixo::after{ width:100%; }

@media (prefers-reduced-motion:reduce){
  .carta, .env-img, .envelope-area{ transition:none !important; }
}

/* ── Botões desenhados ─────────────────────────────────────────────────────
   Alguns botões são arte (placa marinho com prata, mesma família do envelope).
   O <button> some por completo — sem fundo, sem borda — e quem responde ao
   toque é a própria placa. A coroa passa do topo da placa, então nada de
   overflow:hidden nem borda aqui. */
.botao-arte{
  display:block; width:100%; max-width:330px; margin:0 auto; padding:0;
  background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 8px 20px rgba(3,5,20,.55));
  transition:transform .3s cubic-bezier(.4,0,.2,1), filter .3s ease;
}
.botao-arte img{ display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.botao-arte:hover{
  transform:translateY(-2px);
  filter:drop-shadow(0 12px 26px rgba(3,5,20,.6)) drop-shadow(0 0 16px rgba(169,194,232,.28));
}
.botao-arte:active{ transform:scale(.985); }
.botao-arte:focus-visible{ outline:1px solid var(--prata); outline-offset:10px; }

/* ── Medalhões ─────────────────────────────────────────────────────────────
   Botões redondos, irmãos da placa de confirmar. A fileira usa flex:1 1 0 com
   teto: com um medalhão sozinho ele fica no tamanho cheio; com dois ou três,
   dividem a linha sem eu precisar mexer no CSS quando as artes chegarem. */
.medalhoes{
  /* grade em vez de fileira: com 2 medalhões dá uma linha, com 4 vira 2x2 no
     celular e volta a linha única em tela larga — sem media query. */
  display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
  justify-items:center; align-items:start;
  gap:clamp(8px,2.6vw,16px); margin-top:clamp(12px,2vh,20px);
}
.botao-medalha{
  width:100%; max-width:154px;
  padding:0; background:none; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 7px 16px rgba(3,5,20,.55));
  transition:transform .3s cubic-bezier(.4,0,.2,1), filter .3s ease;
}
.botao-medalha img{ display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.botao-medalha:hover{
  transform:translateY(-2px);
  filter:drop-shadow(0 11px 22px rgba(3,5,20,.6)) drop-shadow(0 0 14px rgba(169,194,232,.3));
}
.botao-medalha:active{ transform:scale(.97); }
.botao-medalha:focus-visible{ outline:1px solid var(--prata); outline-offset:8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TELA DE PRESENTES

   A arte (moldura, laço, borboletas, título) é uma imagem só. A área central
   dela foi APAGADA no preparo — os itens são HTML posicionado por cima, para
   que a Milena possa editar título e descrição no painel sem refazer arte.

   As medidas em % vêm da própria imagem (948×1659): a área limpa vai de
   x 148→822 e y 665→1508. Tudo é dimensionado em cqw (unidade do container),
   então o texto acompanha o quadro em qualquer tela.
   ═══════════════════════════════════════════════════════════════════════════ */

.presentes{ background:var(--tinta); align-items:center; justify-content:center; }
.quadro{
  position:relative; margin:auto;
  width:min(100%, calc(100dvh * 948 / 1659));
  aspect-ratio:948/1659;
  container-type:inline-size;
}
.quadro-arte{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

/* o "X" já desenhado na arte vira o botão de voltar */
.quadro-fechar{
  position:absolute; left:45.5%; top:2.4%; width:9%; height:5.2%;
  background:none; border:0; border-radius:50%; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.quadro-fechar:active{ transform:scale(.93); }

.quadro-itens{
  position:absolute; left:15.6%; right:13.3%; top:40.1%; bottom:9.1%;
  display:flex; flex-direction:column; justify-content:space-evenly;
  overflow-y:auto; scrollbar-width:none;
}
.quadro-itens::-webkit-scrollbar{ display:none; }

.presente{ display:flex; align-items:center; gap:4cqw; padding:.6cqw 0; }
.presente-icone{ flex:0 0 auto; width:17cqw; height:17cqw; object-fit:contain; }
.presente-texto{ min-width:0; }
.presente-titulo{
  margin:0; font-family:var(--display); font-weight:500;
  font-size:7.2cqw; line-height:1.08; color:#E8E9F0;
  text-shadow:0 1px 6px rgba(5,8,31,.7);
}
.presente-descricao{
  margin:.8cqw 0 0; font-family:var(--display); font-weight:300;
  font-size:5cqw; line-height:1.22; color:#C7CBDA;
}
/* divisor recortado da própria arte, para casar com o desenho */
.presente-divisor{
  width:78%; align-self:center; height:auto; opacity:.9; margin:.4cqw 0;
}

/* botão voltar desenhado, no lugar do "← voltar" de texto */
.voltar-arte{
  position:absolute; left:calc(var(--margem) - 10px);
  top:calc(clamp(16px,2.8vh,26px) + env(safe-area-inset-top));
  width:clamp(84px,25vw,116px); padding:0; background:none; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 5px 12px rgba(3,5,20,.6));
  transition:transform .25s ease, filter .25s ease;
}
.voltar-arte img{ display:block; width:100%; height:auto; }
.voltar-arte:hover{ transform:translateX(-2px); filter:drop-shadow(0 8px 18px rgba(3,5,20,.65)); }
.voltar-arte:active{ transform:scale(.96); }
.voltar-arte:focus-visible{ outline:1px solid var(--prata); outline-offset:6px; }


/* som desligado: a nota permanece e ganha um risco — o ✕ anterior era lido
   como "fechar a página" */
.som{ position:relative; }
.som.mudo{ color:rgba(201,199,204,.55); }
.som.mudo::after{
  content:""; position:absolute; left:22%; right:22%; top:50%; height:1px;
  background:currentColor; transform:rotate(-38deg);
}
/* a data agora vive na base, junto da chamada do envelope */
.envelope-area .data-capa{ margin:0 0 2px; }