/* ============================================================
   TOKENS — paleta rosa + dourado
   ============================================================ */
:root{
  /* paleta enviada */
  --p1:#FFB0DD;           /* rosa claro   */
  --p2:#FF84C6;           /* rosa suave   */
  --p3:#FF58AE;           /* rosa médio   */
  --p4:#FF2C97;           /* rosa vivo    */
  --p5:#EF007E;           /* rosa profundo*/

  --creme:#FFF4FA;        /* fundo base — rosa bem claro */
  --claro:#FFFBFD;        /* fundo dos trechos com o brasão dourado */
  --rosa-bb:#FFD6EC;      /* faixas alternadas — rosa presente */
  --rosa:var(--p1);       /* linhas e bordas */
  --rose:var(--p4);       /* destaques e ícones */
  --ouro:var(--p5);       /* títulos e escritas */
  --ouro-claro:var(--p3);
  --dourado:#C9A24E;      /* fio dourado, conversa com o brasão */
  /* tons exclusivos da capa de entrada, no clima do brasão */
  --ouro-fino:#BE965C;
  --rose-suave:#A9707E;
  --rose-forte:#8F4F60;
  --rose-botao:#C4677A;
  --rose-botao-forte:#B25668;
  --texto:#7A2E58;        /* corpo de texto */
  --texto-fraco:rgba(122,46,88,.72);

  --fonte-titulo:"Cormorant Garamond",Georgia,serif;
  --fonte-script:"Pinyon Script",cursive;
  --fonte-ui:"Jost",system-ui,sans-serif;

  --secao:clamp(64px,10vw,120px);
  --max:1100px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--creme);
  color:var(--texto);
  font-family:var(--fonte-ui);
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
}
body.travado{overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* sem brilhos de fundo: cada faixa tem cor própria e divisa visível */

/* ============================================================
   COMPARTILHADOS
   ============================================================ */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;position:relative;z-index:1}

.eyebrow{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ouro);
}

.titulo{
  font-family:var(--fonte-titulo);font-weight:400;
  font-size:clamp(2rem,5vw,3.1rem);line-height:1.15;color:var(--ouro);
}

.script{
  font-family:var(--fonte-script);color:var(--ouro);font-weight:400;line-height:1;
}

.legenda{color:var(--texto-fraco);font-size:1rem;max-width:52ch}

/* filete dourado com losango */
.filete{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0}
.filete::before,.filete::after{content:"";height:1px;width:min(90px,18vw);background:linear-gradient(90deg,transparent,var(--dourado))}
.filete::after{background:linear-gradient(90deg,var(--dourado),transparent)}
.filete i{width:6px;height:6px;background:var(--rose);transform:rotate(45deg);display:block}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fonte-ui);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  padding:15px 30px;border:1.5px solid var(--p4);color:var(--p5);
  background:transparent;cursor:pointer;border-radius:2px;
  transition:background .35s ease,color .35s ease,transform .2s ease;
}
.btn:hover{background:var(--p4);color:#fff;border-color:var(--p4)}
.btn:active{transform:translateY(1px)}
.btn--cheio{background:var(--p5);color:#fff;border-color:var(--p5)}
.btn--cheio:hover{background:var(--p4);border-color:var(--p4)}

:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

.secao{padding:var(--secao) 0;position:relative;z-index:1;border-top:2px solid var(--p2)}
.secao--rosa{border-top:2px solid var(--p4)}
#capa{border-bottom:2px solid var(--p2)}
.secao--rosa{background:var(--rosa-bb)}
.centro{text-align:center;display:flex;flex-direction:column;align-items:center}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.visivel{opacity:1;transform:none}

/* ============================================================
   0. CARREGAMENTO — coração pulsando
   ============================================================ */
#carregando{
  position:fixed;inset:0;z-index:110;
  background:#FAF0EE url("aquarela.jpg?v=1786973062") center/cover no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;
  transition:opacity .7s ease,visibility .7s ease;
}
#carregando.saindo{opacity:0;visibility:hidden}

.coracao{position:relative;width:clamp(110px,28vw,140px);height:clamp(110px,28vw,140px);display:flex;align-items:center;justify-content:center}
.coracao svg{
  width:clamp(66px,17vw,86px);height:clamp(66px,17vw,86px);
  color:var(--ouro-fino);
  animation:bate 1.15s ease-in-out infinite;
  filter:drop-shadow(0 5px 14px rgba(190,150,92,.45));
}
@keyframes bate{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.18)}
  28%{transform:scale(1)}
  42%{transform:scale(1.12)}
  60%{transform:scale(1)}
}

/* ondas que saem do coração */
.coracao i{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--ouro-fino);
  animation:onda 2.6s ease-out infinite;
  opacity:0;
}
.coracao i:nth-child(2){animation-delay:.85s}
.coracao i:nth-child(3){animation-delay:1.7s}
@keyframes onda{
  0%{transform:scale(.5);opacity:.85}
  100%{transform:scale(1.7);opacity:0}
}

/* ============================================================
   1. CAPA DE ENTRADA — moldura dourada e aquarela
   ============================================================ */
#portao{
  position:fixed;inset:0;z-index:100;
  background:#FAF0EE url("aquarela.jpg?v=1786973062") center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(26px,6vw,46px);
  overflow-y:auto;
  transition:opacity .8s ease,visibility .8s ease;
}
#portao.saindo{opacity:0;visibility:hidden}

/* --- moldura --- */
.moldura{
  position:absolute;
  inset:clamp(14px,3.4vw,26px);
  border:1px solid var(--ouro-fino);
  pointer-events:none;
}
.moldura::after{
  content:"";position:absolute;inset:8px;
  border:1px solid rgba(190,150,92,.5);
}
.canto{
  position:absolute;width:clamp(58px,15vw,96px);height:clamp(58px,15vw,96px);
  color:var(--ouro-fino);
}
.canto svg{width:100%;height:100%;display:block}
.canto.ce{top:0;left:0}
.canto.cd{top:0;right:0;transform:scaleX(-1)}
.canto.be{bottom:0;left:0;transform:scaleY(-1)}
.canto.bd{bottom:0;right:0;transform:scale(-1)}

/* --- conteúdo --- */
.portao-conteudo{
  position:relative;z-index:1;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:520px;
  padding:clamp(18px,5vw,34px) 4px;
}
#portao .brasao{width:min(340px,74vw);margin-bottom:clamp(14px,4vw,26px)}
.selo{
  width:132px;height:132px;border-radius:50%;
  border:1px solid var(--ouro-fino);
  display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:24px;
}
.selo::after{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(190,150,92,.4)}
.selo span{font-family:var(--fonte-script);font-size:3.4rem;color:var(--ouro-fino);line-height:1;padding-bottom:8px}

#portao .abertura{
  font-family:var(--fonte-ui);font-weight:400;
  font-size:clamp(.82rem,3.4vw,1.05rem);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--rose-suave);
}
#portao .nome-familia{
  /* mesma serifa e o mesmo espaçamento do "ALCÂNTARA" do brasão */
  font-family:var(--fonte-titulo);
  font-weight:500;
  font-size:clamp(1.45rem,6vw,2.15rem);
  letter-spacing:.15em;
  text-transform:uppercase;
  line-height:1.25;
  color:var(--rose-forte);
  margin-top:10px;
  padding-left:.15em;   /* compensa o espaçamento da última letra */
}

.orn{color:var(--ouro-fino);display:block}
.orn svg{display:block;width:100%;height:auto}
.orn-linha{width:min(280px,68vw);margin:clamp(16px,4vw,24px) 0}
.orn-coracao{width:min(170px,44vw);margin:clamp(14px,3.6vw,20px) 0 clamp(22px,5vw,30px)}

#portao .aviso{
  font-size:clamp(.9rem,3.6vw,1.02rem);
  color:var(--rose-suave);line-height:1.5;max-width:30ch;
}

/* --- botões --- */
.portao-botoes{display:flex;flex-direction:column;gap:14px;width:100%;max-width:400px}
.botao-convite{
  width:100%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(17px,4.4vw,21px) 22px;border-radius:8px;
  border:1px solid var(--ouro-fino);
  background:#FDF7F5;color:var(--rose-forte);
  transition:background .3s ease,color .3s ease,box-shadow .3s ease;
  box-shadow:0 2px 10px rgba(190,150,92,.14);
}
.botao-convite{
  font-family:var(--fonte-ui);font-weight:400;
  font-size:clamp(.82rem,3.5vw,.98rem);
  letter-spacing:.2em;text-transform:uppercase;line-height:1;
  padding-left:calc(22px + .2em);   /* compensa o espaçamento da última letra */
}
.botao-convite:hover{background:#fff;box-shadow:0 4px 16px rgba(190,150,92,.22)}
.botao-convite:active{transform:translateY(1px)}

.botao-convite.principal{
  background:var(--rose-botao);color:#FFF8F6;
  border-color:var(--ouro-fino);
  box-shadow:0 3px 14px rgba(180,90,110,.28);
}
.botao-convite.principal:hover{background:var(--rose-botao-forte)}

/* ============================================================
   2. CAPA
   ============================================================ */
#capa{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 24px 56px;position:relative;
  background:var(--claro);
}
#capa .brasao-capa{width:min(300px,72vw);margin-bottom:14px}
#capa .data{font-size:.85rem;letter-spacing:.4em;color:var(--ouro)}
#capa .nome{font-size:clamp(3.4rem,14vw,7rem);margin:10px 0 4px}
#capa .evento{font-family:var(--fonte-titulo);font-size:clamp(1rem,3vw,1.3rem);letter-spacing:.3em;text-transform:uppercase;color:var(--rose)}
#capa .frase{margin-top:20px;font-family:var(--fonte-titulo);font-style:italic;font-size:clamp(1.05rem,2.6vw,1.35rem);color:var(--texto-fraco);max-width:34ch}

.contagem{margin-top:48px;width:100%}
.contagem .rotulo{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--texto-fraco);margin-bottom:18px}
.relogio{display:flex;justify-content:center;gap:clamp(10px,3vw,26px)}
.medalha{
  width:clamp(64px,18vw,92px);height:clamp(64px,18vw,92px);
  border:2px solid var(--p4);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.75);
}
.medalha b{font-family:var(--fonte-titulo);font-weight:500;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1;color:var(--ouro)}
.medalha small{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin-top:5px}

.seta{margin-top:50px;color:var(--rose);font-size:1.4rem;animation:flutua 2.4s ease-in-out infinite}
@keyframes flutua{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(9px);opacity:1}}

/* ============================================================
   3. CONVIDADOS
   ============================================================ */
.cartao-convidados{
  max-width:520px;margin:0 auto;text-align:center;
  border:1.5px solid var(--p2);padding:44px 30px;border-radius:3px;
  background:rgba(255,255,255,.55);
}
.vagas{font-family:var(--fonte-titulo);font-size:3.6rem;line-height:1;color:var(--ouro)}
.vagas + p{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-fraco)}
.lista-convidados{list-style:none;margin:26px 0 0}
.lista-convidados li{
  font-family:var(--fonte-titulo);font-size:1.35rem;padding:11px 0;color:var(--texto);
  border-bottom:1px solid rgba(255,176,221,.75);
}
.lista-convidados li:last-child{border-bottom:none}

/* ============================================================
   4. FESTA
   ============================================================ */
.grade-festa{
  display:grid;gap:26px;margin-top:48px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.bloco{
  border:1.5px solid var(--p2);padding:38px 26px;text-align:center;border-radius:3px;
  background:rgba(255,255,255,.5);
  display:flex;flex-direction:column;align-items:center;
  transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease;
}
.bloco:hover{border-color:var(--ouro);transform:translateY(-4px);box-shadow:0 14px 30px rgba(239,0,126,.16)}
.bloco .icone{color:var(--rose);margin-bottom:16px}
.bloco h3{font-family:var(--fonte-ui);font-weight:400;font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ouro)}
.bloco .destaque{font-family:var(--fonte-titulo);font-size:1.5rem;margin:12px 0 6px;line-height:1.3;color:var(--texto)}
.bloco .apoio{font-size:.9rem;color:var(--texto-fraco);margin-bottom:24px}
.bloco .btn{margin-top:auto}

/* ============================================================
   5. GALERIA
   ============================================================ */
.grade-galeria{
  display:grid;gap:16px;margin-top:48px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.foto{
  aspect-ratio:3/4;overflow:hidden;border:2px solid var(--p2);
  background:linear-gradient(160deg,#FFF0F8,var(--p2));
  position:relative;cursor:pointer;
}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.foto:hover img{transform:scale(1.07)}
.foto .vazio{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--fonte-script);font-size:3rem;color:rgba(255,255,255,.9);text-shadow:0 2px 8px rgba(239,0,126,.25);
}

/* ============================================================
   6/7. MÚSICA E PRESENTES
   ============================================================ */
.grade-dupla{
  display:grid;gap:26px;margin-top:48px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

/* ============================================================
   MODAIS
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(122,46,88,.45);backdrop-filter:blur(4px);
}
.modal.aberto{display:flex}
.modal-caixa{
  background:var(--creme);border:1px solid var(--rosa);
  width:100%;max-width:460px;padding:44px 30px 36px;text-align:center;position:relative;
  max-height:88vh;overflow-y:auto;border-radius:3px;
  box-shadow:0 24px 60px rgba(122,46,88,.22);
  animation:sobe .35s ease;
}
@keyframes sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fechar{
  position:absolute;top:12px;right:16px;background:none;border:none;
  color:var(--rose);font-size:1.7rem;line-height:1;cursor:pointer;padding:4px 8px;
}
.fechar:hover{color:var(--ouro)}
.modal-caixa h3{font-family:var(--fonte-titulo);font-weight:400;font-size:1.9rem;margin-bottom:6px;color:var(--ouro)}
.modal-caixa p{color:var(--texto-fraco);font-size:.95rem}

.campo{text-align:left;margin-top:20px}
.campo label{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro);margin-bottom:8px}
.campo input,.campo select,.campo textarea{
  width:100%;background:#fff;border:1px solid var(--rosa);
  color:var(--texto);font-family:var(--fonte-ui);font-size:1rem;font-weight:300;
  padding:13px 14px;border-radius:2px;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--ouro);outline:none}
.campo textarea{resize:vertical;min-height:88px}
.modal-caixa .btn{margin-top:26px;width:100%}

.pix{
  margin-top:22px;border:1px dashed var(--ouro);padding:18px;border-radius:3px;
  word-break:break-all;font-size:.95rem;color:var(--texto);background:rgba(255,255,255,.6);
}
.pix span{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro);margin-bottom:8px}

/* ============================================================
   RODAPÉ + BOTÃO DE SOM
   ============================================================ */
footer{
  background:var(--claro);text-align:center;padding:70px 24px 40px;
  border-top:2px solid var(--p4);position:relative;z-index:1;
}
footer .brasao-rodape{width:min(170px,44vw);margin:0 auto 18px}
footer .nome{font-size:clamp(2.6rem,10vw,4rem)}
footer .evento{font-family:var(--fonte-titulo);letter-spacing:.28em;text-transform:uppercase;font-size:.95rem;margin-bottom:30px;color:var(--rose)}
.links-rodape{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:40px}
.assinatura{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(122,46,88,.5)}

#som{
  position:fixed;right:18px;bottom:18px;z-index:80;
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--rosa);background:rgba(255,255,255,.9);
  color:var(--ouro);display:none;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 18px rgba(122,46,88,.18);
}
#som.ativo{display:flex}
#som.tocando .barra{animation:pulsa 1s ease-in-out infinite}
#som .barra:nth-child(2){animation-delay:.18s}
#som .barra:nth-child(3){animation-delay:.36s}
@keyframes pulsa{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
#som svg{width:20px;height:20px}
#som .barra{transform-origin:center;transform:scaleY(.5)}

#ytBox{position:fixed;width:1px;height:1px;left:-9999px;top:0;opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   ACRÉSCIMOS DA VERSÃO PHP
   ============================================================ */
.retorno{margin-top:14px;font-size:.88rem;min-height:1.2em}
.retorno.ok{color:#5C8A6B}
.retorno.erro{color:#B4635A}

.aviso-resposta{
  margin-top:22px;font-size:.9rem;color:var(--texto-fraco);
  background:rgba(255,255,255,.6);border:1px dashed var(--rosa);
  padding:14px 18px;border-radius:3px;max-width:520px;
}
.aviso-resposta b{color:var(--ouro);font-weight:400}

/* ============================================================
   ACRÉSCIMOS DA VERSÃO PHP
   ============================================================ */
.retorno{margin-top:14px;font-size:.88rem;min-height:1.2em}
.retorno.ok{color:#5C8A6B}
.retorno.erro{color:#B4635A}

.aviso-resposta{
  margin-top:22px;font-size:.9rem;color:var(--texto-fraco);
  background:rgba(255,255,255,.6);border:1px dashed var(--rosa);
  padding:14px 18px;border-radius:3px;max-width:520px;
}
.aviso-resposta b{color:var(--ouro);font-weight:400}

/* ============================================================
   FOTO EM TELA CHEIA
   ============================================================ */
#lightbox{
  position:fixed;inset:0;z-index:95;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(70,10,42,.94);
}
#lightbox.aberto{display:flex}
#lbImg{
  max-width:min(100%,760px);max-height:86vh;
  border-radius:3px;box-shadow:0 24px 70px rgba(0,0,0,.5);
  animation:entraFoto .3s ease;
}
@keyframes entraFoto{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

.lb-fechar{
  position:absolute;top:14px;right:18px;z-index:2;
  background:none;border:none;color:#fff;font-size:2.4rem;line-height:1;
  cursor:pointer;padding:6px 12px;opacity:.85;
}
.lb-fechar:hover{opacity:1;color:var(--p1)}

.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);
  color:#fff;font-size:2rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,border-color .3s ease;
}
.lb-nav:hover{background:var(--p4);border-color:var(--p4)}
.lb-ant{left:14px;padding-right:3px}
.lb-prox{right:14px;padding-left:3px}

.lb-contador{
  position:absolute;bottom:18px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.75);font-size:.78rem;letter-spacing:.22em;
}

@media (max-width:600px){
  .lb-nav{width:42px;height:42px;font-size:1.6rem}
  .lb-ant{left:6px} .lb-prox{right:6px}
}

/* ============================================================
   MOSAICO — 5 fotos, a primeira em destaque
   ============================================================ */
.grade-galeria.mosaico{grid-template-columns:repeat(4,1fr)}
.grade-galeria.mosaico .foto:first-child{
  grid-column:span 2;grid-row:span 2;aspect-ratio:auto;
}
@media (max-width:860px){
  .grade-galeria.mosaico{grid-template-columns:repeat(2,1fr)}
  .grade-galeria.mosaico .foto:first-child{grid-column:span 2;grid-row:span 1;aspect-ratio:4/3}
}

/* ============================================================
   AJUSTES DE CONTRASTE NO RODAPÉ ROSA
   ============================================================ */
footer .brasao-rodape{filter:drop-shadow(0 2px 10px rgba(255,255,255,.9))}
footer .evento{color:#fff;text-shadow:0 1px 6px rgba(239,0,126,.25)}
footer .assinatura{color:rgba(255,255,255,.92)}
footer .filete::before{background:linear-gradient(90deg,transparent,#fff)}
footer .filete::after{background:linear-gradient(90deg,#fff,transparent)}
footer .filete i{background:#fff}
footer .btn{
  background:rgba(255,255,255,.9);border-color:#fff;color:var(--p5);
}
footer .btn:hover{background:#fff;color:var(--p5);border-color:#fff}

/* ============================================================
   AJUSTES DESTA RODADA
   ============================================================ */

/* ---- brasão maior, já que a capa não tem mais texto duplicado ---- */
#capa{background:var(--claro)}
#capa .brasao-capa{width:min(420px,80vw);margin-bottom:8px}
footer{border-top:2px solid var(--p4)}
footer .brasao-rodape{width:min(200px,50vw);filter:none}
footer .evento{color:var(--p5);text-shadow:none}
footer .assinatura{color:rgba(122,46,88,.55)}
footer .filete::before{background:linear-gradient(90deg,transparent,var(--dourado))}
footer .filete::after{background:linear-gradient(90deg,var(--dourado),transparent)}
footer .filete i{background:var(--p4)}
footer .btn{background:transparent;border-color:var(--p4);color:var(--p5)}
footer .btn:hover{background:var(--p4);color:#fff}

/* ---- nomes dos convidados grandes ---- */
.cartao-convidados{background:#fff}
.vagas{font-size:4.4rem;color:var(--p5)}
.vagas-txt{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-fraco)}
.lista-convidados li{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  padding:16px 0;border-bottom:1px solid rgba(255,176,221,.8);
}
.nome-convidado{
  font-family:var(--fonte-titulo);font-weight:500;
  font-size:clamp(1.5rem,5.5vw,2.1rem);line-height:1.15;
  color:var(--p5);letter-spacing:.01em;
}
.selo-resposta{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;border:1px solid;white-space:nowrap;
}
.selo-resposta.vai{color:#1F8A5F;border-color:#1F8A5F;background:rgba(31,138,95,.08)}
.selo-resposta.nao{color:#B01236;border-color:#B01236;background:rgba(176,18,54,.07)}

/* ---- moldura dourada nas fotos ---- */
.foto{
  border:3px solid var(--dourado);
  box-shadow:0 6px 20px rgba(201,162,78,.22);
}

/* ---- botão que chama atenção ---- */
/* o botão não se move: só o halo pulsa, para não atrapalhar o toque */
@keyframes respira{
  0%{box-shadow:0 0 0 0 rgba(239,0,126,.55)}
  70%{box-shadow:0 0 0 14px rgba(239,0,126,0)}
  100%{box-shadow:0 0 0 0 rgba(239,0,126,0)}
}
.btn.pulsa{position:relative;animation:respira 2.4s ease-out infinite}
.btn.pulsa:hover,.btn.pulsa:focus-visible{animation-play-state:paused}
.btn.grande{padding:18px 42px;font-size:.85rem}

/* ---- ícone de música e presente animados ---- */
.icone-pula{position:relative;display:inline-flex;color:var(--p5)}
@keyframes pula{
  0%,100%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-9px) rotate(-6deg)}
  50%{transform:translateY(0) rotate(0)}
  75%{transform:translateY(-5px) rotate(5deg)}
}
.icone-pula svg{animation:pula 1.5s ease-in-out infinite}

/* notinhas subindo do ícone de música */
.nota{
  position:absolute;left:50%;top:0;font-size:.95rem;color:var(--p3);
  opacity:0;animation:sobeNota 2.6s ease-out infinite;
}
.nota.n1{animation-delay:0s}
.nota.n2{animation-delay:.85s;font-size:1.15rem;color:var(--p4)}
.nota.n3{animation-delay:1.7s}
@keyframes sobeNota{
  0%{opacity:0;transform:translate(-50%,4px) scale(.7)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + 22px),-34px) scale(1.1)}
}

/* brilhos piscando no presente */
.presente .brilho{
  position:absolute;width:5px;height:5px;border-radius:50%;background:var(--dourado);
  opacity:0;animation:cintila 1.9s ease-in-out infinite;
}
.presente .b1{top:-4px;left:-6px;animation-delay:0s}
.presente .b2{top:6px;right:-8px;animation-delay:.6s}
.presente .b3{bottom:-2px;left:2px;animation-delay:1.2s}
@keyframes cintila{
  0%,100%{opacity:0;transform:scale(.5)}
  50%{opacity:1;transform:scale(1.5)}
}

/* ============================================================
   CARROSSEL DE FOTOS
   ============================================================ */
.carrossel{position:relative;width:100%;margin-top:44px}
.trilho{
  display:flex;gap:16px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:6px 4px 14px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.trilho::-webkit-scrollbar{display:none}
.trilho.arrastando{cursor:grabbing;scroll-behavior:auto}
.trilho .foto{
  flex:0 0 clamp(230px,78vw,300px);
  scroll-snap-align:center;
  aspect-ratio:3/4;
}
.trilho .foto img{pointer-events:none;user-select:none}

.car-seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  border:2px solid var(--p4);background:#fff;color:var(--p5);
  font-size:1.7rem;line-height:1;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(239,0,126,.2);
  transition:background .25s ease,color .25s ease;
}
.car-seta:hover{background:var(--p5);color:#fff;border-color:var(--p5)}
.car-seta.no-fim{opacity:.32}
.car-ant{left:-6px;padding-right:3px}
.car-prox{right:-6px;padding-left:3px}
@media (min-width:760px){ .car-seta{display:flex} }

.car-pontos{display:flex;justify-content:center;gap:9px;margin-top:6px}
.car-ponto{
  width:9px;height:9px;border-radius:50%;padding:0;
  border:1px solid var(--p4);background:transparent;cursor:pointer;
  transition:background .25s ease,transform .25s ease;
}
.car-ponto.ativo{background:var(--p5);transform:scale(1.35)}

.car-dica{
  margin-top:14px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-fraco);
}
@media (min-width:760px){ .car-dica{display:none} }

/* ============================================================
   CONFIRMAÇÃO PESSOA POR PESSOA
   ============================================================ */
.modal-caixa .passo-contador{
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--p4);margin-bottom:18px;
}
.modal-caixa .passo-pergunta{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--texto-fraco);
}
.modal-caixa .passo-nome{
  font-family:var(--fonte-titulo);font-weight:500;
  font-size:clamp(1.8rem,7vw,2.5rem);line-height:1.15;
  color:var(--p5);margin:8px 0 26px;
  animation:trocaNome .35s ease;
}
@keyframes trocaNome{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.passo-botoes{display:grid;gap:12px}
.btn-resposta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:17px 20px;border-radius:3px;cursor:pointer;
  font-family:var(--fonte-ui);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  border:2px solid;background:#fff;
  transition:background .25s ease,color .25s ease,transform .15s ease;
}
.btn-resposta svg{width:19px;height:19px;flex:0 0 auto}
.btn-resposta:active{transform:scale(.98)}
.btn-resposta.sim{border-color:#1F8A5F;color:#1F8A5F}
.btn-resposta.sim:hover{background:#1F8A5F;color:#fff}
.btn-resposta.nao{border-color:var(--p1);color:var(--texto-fraco)}
.btn-resposta.nao:hover{background:var(--texto);color:#fff;border-color:var(--texto)}

.voltar-passo{
  margin-top:18px;background:none;border:none;cursor:pointer;
  font-family:var(--fonte-ui);font-size:.75rem;letter-spacing:.1em;
  color:var(--texto-fraco);text-decoration:underline;
}
.voltar-passo:hover{color:var(--p5)}

.modal-caixa .resumo-titulo{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--p4);margin-bottom:14px;
}
.resumo-lista{list-style:none;text-align:left;margin-bottom:6px}
.resumo-lista li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 14px;margin-bottom:8px;border-radius:3px;
  background:var(--creme);border:1px solid var(--p1);
}
.resumo-lista .rn{
  font-family:var(--fonte-titulo);font-size:1.2rem;color:var(--texto);
}
.resumo-lista .rs{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.resumo-lista .rs.vai{color:#1F8A5F}
.resumo-lista .rs.nao{color:#B01236}
.resumo-lista button{
  background:none;border:none;cursor:pointer;font-size:.66rem;
  color:var(--p4);text-decoration:underline;letter-spacing:.08em;
}

/* ============================================================
   CAPA — creme e rose gold, conforme o modelo
   ============================================================ */
:root{
  --capa-fundo:#F8F4F3;
  --rg-forte:#A9663F;   /* números e brasão */
  --rg:#BE8A62;         /* fios e ornamentos */
  --rg-claro:#DCBDA2;   /* aros externos */
  --rg-texto:#B08A72;   /* frase */
}

#capa{
  background:var(--capa-fundo);
  border-bottom:1px solid var(--rg-claro);
  padding:clamp(56px,10vw,90px) 24px clamp(40px,8vw,64px);
}
#capa .brasao-capa{width:min(460px,86vw);margin-bottom:clamp(10px,3vw,20px)}

/* filete abaixo do brasão */
#capa .filete{margin:clamp(14px,3.5vw,22px) 0}
#capa .filete::before{background:linear-gradient(90deg,transparent,var(--rg))}
#capa .filete::after{background:linear-gradient(90deg,var(--rg),transparent)}
#capa .filete i{background:var(--rg-forte);width:8px;height:8px}

#capa .frase{
  font-family:var(--fonte-titulo);font-style:italic;font-weight:400;
  font-size:clamp(1.12rem,4.4vw,1.45rem);line-height:1.65;
  color:var(--rg-texto);max-width:26ch;
  margin-top:clamp(16px,4vw,26px);
}

/* contagem */
#capa .contagem{margin-top:clamp(34px,8vw,54px)}
#capa .contagem .rotulo{
  font-size:clamp(.72rem,2.9vw,.82rem);letter-spacing:.44em;text-transform:uppercase;
  color:var(--rg);margin-bottom:clamp(18px,4.5vw,26px);padding-left:.44em;
}
#capa .relogio{gap:clamp(8px,3.2vw,22px)}
#capa .medalha{
  position:relative;background:transparent;border:1px solid var(--rg);
  width:clamp(68px,20vw,108px);height:clamp(68px,20vw,108px);
}
#capa .medalha::before{
  content:"";position:absolute;inset:clamp(-9px,-2.4vw,-6px);
  border:1px solid var(--rg-claro);border-radius:50%;
}
#capa .medalha b{
  font-family:var(--fonte-titulo);font-weight:500;
  font-size:clamp(1.5rem,6vw,2.2rem);color:var(--rg-forte);
}
#capa .medalha small{
  color:var(--rg);letter-spacing:.16em;font-size:clamp(.56rem,2.2vw,.66rem);margin-top:6px;
}

/* florão de fechamento e seta */
#capa .orn-floreio{
  color:var(--rg);width:min(320px,80vw);
  margin:clamp(34px,8vw,52px) 0 clamp(18px,5vw,30px);
}
#capa .seta{
  color:var(--rg);margin-top:0;width:22px;
  animation:flutua 2.6s ease-in-out infinite;
}
#capa .seta svg{width:100%;height:auto;display:block}

/* botão de som no mesmo estilo */
#som{
  width:56px;height:56px;background:var(--capa-fundo);
  border:none;color:var(--rg);
  box-shadow:0 4px 16px rgba(169,102,63,.18);
}
#som svg{width:100%;height:100%}
#som .ponto{opacity:.55;transform-origin:center}
#som.tocando .ponto{animation:saltaPonto 1.2s ease-in-out infinite;opacity:1}
#som.tocando .p2{animation-delay:.2s}
#som.tocando .p3{animation-delay:.4s}
@keyframes saltaPonto{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(-3px);opacity:1}
}

/* espaço para o aro externo dos medalhões não encostar */
#capa .relogio{gap:clamp(14px,5vw,38px)}
#capa .medalha::before{inset:-8px}

@media (min-width:700px){
  #capa .frase{max-width:34ch}
}

/* ============================================================
   PADRÃO CREME E ROSE GOLD — demais seções seguindo a capa
   ============================================================ */
:root{
  --creme:#F8F4F3;          /* fundo base */
  --faixa:#F2EBE7;          /* faixas alternadas */
  --cartao:#FFFDFC;         /* fundo dos cartões */
  --texto:#6E5B52;          /* corpo de texto */
  --texto-fraco:rgba(110,91,82,.72);
  --sim:#5F7A5B;
  --nao:#A85A50;
}

body{background:var(--creme);color:var(--texto)}

/* faixas e divisas */
.secao{border-top:1px solid var(--rg-claro)}
.secao--rosa{background:var(--faixa);border-top:1px solid var(--rg-claro)}

/* títulos e apoios */
.titulo{color:var(--rg-forte)}
.eyebrow{color:var(--rg);letter-spacing:.34em}
.legenda{color:var(--texto-fraco)}

/* filete padrão de todas as seções */
.filete::before{background:linear-gradient(90deg,transparent,var(--rg))}
.filete::after{background:linear-gradient(90deg,var(--rg),transparent)}
.filete i{background:var(--rg-forte);width:7px;height:7px}

/* botões */
.btn{border:1px solid var(--rg);color:var(--rg-forte);background:transparent}
.btn:hover{background:var(--rg-forte);color:#FFF8F5;border-color:var(--rg-forte)}
.btn--cheio{background:var(--rose-botao);color:#FFF8F6;border-color:var(--rose-botao)}
.btn--cheio:hover{background:var(--rose-botao-forte);border-color:var(--rose-botao-forte)}
@keyframes respira{
  0%{box-shadow:0 0 0 0 rgba(196,103,122,.5)}
  70%{box-shadow:0 0 0 14px rgba(196,103,122,0)}
  100%{box-shadow:0 0 0 0 rgba(196,103,122,0)}
}

/* cartões */
.bloco{
  background:var(--cartao);border:1px solid var(--rg-claro);
  box-shadow:0 3px 14px rgba(169,102,63,.07);
}
.bloco:hover{border-color:var(--rg);box-shadow:0 8px 24px rgba(169,102,63,.13)}
.bloco h3{color:var(--rg);letter-spacing:.3em}
.bloco .icone{color:var(--rg-forte)}
.bloco .destaque{color:var(--texto);font-size:1.45rem}
.bloco .apoio{color:var(--texto-fraco)}

/* convidados */
.cartao-convidados{
  background:var(--cartao);border:1px solid var(--rg-claro);
  box-shadow:0 3px 14px rgba(169,102,63,.07);
}
.vagas{color:var(--rg-forte);font-size:4rem}
.vagas-txt{color:var(--rg);letter-spacing:.2em}
.lista-convidados li{border-bottom:1px solid rgba(220,189,162,.6)}
.nome-convidado{
  font-family:var(--fonte-titulo);font-weight:500;
  font-size:clamp(1.25rem,4.6vw,1.7rem);
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--rg-forte);
}
.selo-resposta.vai{color:var(--sim);border-color:var(--sim);background:rgba(95,122,91,.09)}
.selo-resposta.nao{color:var(--nao);border-color:var(--nao);background:rgba(168,90,80,.08)}
.aviso-resposta{
  background:var(--cartao);border:1px dashed var(--rg-claro);color:var(--texto-fraco);
}
.aviso-resposta b{color:var(--rg-forte)}

/* galeria */
.foto{border:2px solid var(--rg);box-shadow:0 5px 18px rgba(169,102,63,.16)}
.foto .vazio{color:rgba(255,255,255,.9);text-shadow:0 2px 8px rgba(169,102,63,.3)}
.car-seta{
  border:1px solid var(--rg);background:var(--cartao);color:var(--rg-forte);
  box-shadow:0 3px 12px rgba(169,102,63,.16);
}
.car-seta:hover{background:var(--rg-forte);color:#FFF8F5;border-color:var(--rg-forte)}
.car-ponto{border:1px solid var(--rg)}
.car-ponto.ativo{background:var(--rg-forte)}
.car-dica{color:var(--texto-fraco);letter-spacing:.24em}

/* ícones animados de música e presente */
.icone-pula{color:var(--rg-forte)}
.nota{color:var(--rg)}
.nota.n2{color:var(--rg-forte)}
.presente .brilho{background:var(--rg-forte)}

/* modais */
.modal{background:rgba(90,66,56,.55)}
.modal-caixa{
  background:var(--cartao);border:1px solid var(--rg-claro);
  box-shadow:0 24px 60px rgba(110,91,82,.22);
}
.modal-caixa h3{color:var(--rg-forte)}
.modal-caixa p{color:var(--texto-fraco)}
.fechar{color:var(--rg)}
.fechar:hover{color:var(--rg-forte)}
.campo label{color:var(--rg)}
.campo input,.campo select,.campo textarea{
  background:#fff;border:1px solid var(--rg-claro);color:var(--texto);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--rg)}
.pix{border:1px dashed var(--rg);background:var(--creme);color:var(--texto)}
.pix span{color:var(--rg)}

/* confirmação pessoa por pessoa */
.modal-caixa .passo-contador{color:var(--rg);letter-spacing:.3em}
.modal-caixa .passo-pergunta{color:var(--texto-fraco)}
.modal-caixa .passo-nome{
  color:var(--rg-forte);letter-spacing:.08em;text-transform:uppercase;
  font-size:clamp(1.5rem,6vw,2.1rem);
}
.btn-resposta{background:#fff}
.btn-resposta.sim{border-color:var(--sim);color:var(--sim)}
.btn-resposta.sim:hover{background:var(--sim);color:#fff}
.btn-resposta.nao{border-color:var(--rg-claro);color:var(--texto-fraco)}
.btn-resposta.nao:hover{background:var(--texto);color:#fff;border-color:var(--texto)}
.voltar-passo{color:var(--texto-fraco)}
.voltar-passo:hover{color:var(--rg-forte)}
.modal-caixa .resumo-titulo{color:var(--rg)}
.resumo-lista li{background:var(--creme);border:1px solid var(--rg-claro)}
.resumo-lista .rn{color:var(--texto)}
.resumo-lista .rs.vai{color:var(--sim)}
.resumo-lista .rs.nao{color:var(--nao)}
.resumo-lista button{color:var(--rg)}
.retorno.ok{color:var(--sim)}
.retorno.erro{color:var(--nao)}

/* rodapé */
footer{
  background:var(--faixa);border-top:1px solid var(--rg-claro);
}
footer .brasao-rodape{width:min(230px,56vw)}
footer .evento{
  color:var(--rg);letter-spacing:.3em;text-shadow:none;
}
footer .filete::before{background:linear-gradient(90deg,transparent,var(--rg))}
footer .filete::after{background:linear-gradient(90deg,var(--rg),transparent)}
footer .filete i{background:var(--rg-forte)}
footer .btn{background:transparent;border-color:var(--rg);color:var(--rg-forte)}
footer .btn:hover{background:var(--rg-forte);color:#FFF8F5;border-color:var(--rg-forte)}
footer .assinatura{color:rgba(110,91,82,.5)}

/* tela cheia da foto */
#lightbox{background:rgba(58,42,35,.94)}
.lb-nav:hover{background:var(--rg-forte);border-color:var(--rg-forte)}
.lb-fechar:hover{color:var(--rg-claro)}

/* nome manuscrito, usado só quando não há brasão */
.script{color:var(--rg-forte)}
footer .evento{
  font-family:var(--fonte-titulo);font-style:italic;text-transform:none;
  letter-spacing:.06em;font-size:1rem;color:var(--texto-fraco);margin-top:6px;
}

/* rodapé enxuto: só o brasão e a assinatura */
footer{padding:clamp(46px,9vw,70px) 24px clamp(30px,6vw,42px)}
footer .brasao-rodape{width:min(190px,46vw);margin:0 auto}
footer .filete{margin:clamp(18px,4vw,26px) 0 clamp(14px,3vw,20px)}

/* deixa a assinatura livre do botão de som flutuante */
@media (max-width:700px){
  footer{padding-bottom:86px}
  footer .assinatura{padding:0 8px;line-height:1.7}
}

/* o número de vagas encostava no texto abaixo: agora tem respiro */
.vagas{line-height:1.08;margin-bottom:12px}
.vagas-txt{line-height:1.5;max-width:24ch;margin:0 auto}
.lista-convidados{margin-top:22px}

/* ============================================================
   LISTA DE PRESENTES
   ============================================================ */
.tamanhos{
  width:100%;max-width:560px;margin:36px auto 0;
  background:var(--cartao);border:1px solid var(--rg-claro);border-radius:4px;
  padding:24px 22px;box-shadow:0 3px 14px rgba(169,102,63,.07);
}
.tamanhos-titulo{
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--rg);margin-bottom:16px;
}
.tamanhos-lista{display:grid;gap:10px}
.tamanhos-lista > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:9px;border-bottom:1px solid rgba(220,189,162,.55);
  text-align:left;
}
.tamanhos-lista > div:last-child{border-bottom:none;padding-bottom:0}
.tamanhos-lista dt{font-size:.92rem;color:var(--texto-fraco);line-height:1.35}
.tamanhos-lista dd{
  font-family:var(--fonte-titulo);font-weight:500;font-size:1.25rem;
  color:var(--rg-forte);white-space:nowrap;
}

.grade-presentes{
  width:100%;display:grid;gap:16px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.grupo-presente{
  background:var(--cartao);border:1px solid var(--rg-claro);border-radius:4px;
  padding:24px 22px;text-align:left;
  box-shadow:0 3px 14px rgba(169,102,63,.07);
}
.grupo-presente h3{
  font-family:var(--fonte-titulo);font-weight:500;
  font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rg-forte);text-align:center;
}
.grupo-nota{
  font-family:var(--fonte-titulo);font-style:italic;
  font-size:.95rem;color:var(--texto-fraco);text-align:center;margin-top:4px;
}
.grupo-presente ul{list-style:none;margin-top:16px}
.grupo-presente li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(220,189,162,.5);
}
.grupo-presente li:last-child{border-bottom:none;padding-bottom:0}
.item-nome{font-size:1rem;color:var(--texto)}
.item-tam{
  flex:0 0 auto;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rg-forte);background:var(--faixa);
  border:1px solid var(--rg-claro);border-radius:20px;padding:4px 11px;
}

.presentes-acoes{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px;
}

.voltar-lista{
  display:inline-block;margin-top:16px;font-size:.78rem;letter-spacing:.08em;
  color:var(--rg-forte);text-decoration:underline;cursor:pointer;
}
.voltar-lista:hover{color:var(--rose-botao)}

/* ============================================================
   LISTA DE PRESENTES DENTRO DO MODAL
   ============================================================ */
.modal-caixa--largo{max-width:640px}

.modal-caixa .tamanhos{
  margin:22px 0 0;padding:20px 18px;border-radius:3px;
  background:var(--creme);box-shadow:none;
}
.modal-caixa .tamanhos-lista dt{font-size:.86rem}
.modal-caixa .tamanhos-lista dd{font-size:1.1rem}

.modal-caixa .grade-presentes{
  margin-top:16px;gap:12px;
  grid-template-columns:1fr;
}
@media (min-width:560px){
  .modal-caixa .grade-presentes{grid-template-columns:1fr 1fr}
}
.modal-caixa .grupo-presente{
  padding:18px 16px;border-radius:3px;background:var(--creme);box-shadow:none;
}
.modal-caixa .grupo-presente h4{
  font-family:var(--fonte-titulo);font-weight:500;
  font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rg-forte);text-align:center;
}
.modal-caixa .grupo-presente ul{margin-top:12px}
.modal-caixa .grupo-presente li{padding:8px 0}
.modal-caixa .item-nome{font-size:.94rem}
.modal-caixa .item-tam{font-size:.62rem;padding:3px 9px;background:#fff}

.modal-caixa .presentes-acoes{margin-top:24px;gap:10px}
.modal-caixa .presentes-acoes .btn{flex:1 1 200px;margin-top:0}

/* a caixa cresce, então a rolagem fica dentro dela */
.modal-caixa--largo{max-height:88vh;overflow-y:auto;overscroll-behavior:contain}

button.voltar-lista{background:none;border:none}

/* ============================================================
   CORREÇÕES
   ============================================================ */

/* 1. o selo de resposta vai para baixo do nome, não ao lado */
.lista-convidados li{
  flex-direction:column;align-items:center;gap:7px;
}
.selo-resposta{margin-top:2px}

/* 2. medalhões da contagem: círculo perfeito em qualquer largura */
#capa .medalha{
  flex:0 0 auto;aspect-ratio:1;
  width:clamp(66px,19vw,104px);height:auto;
  padding:0;
}

/* 3. o realce de toque só existe onde há mouse.
      No celular o :hover fica grudado depois do toque e o botão seguinte
      aparecia como se já estivesse selecionado. */
@media (hover:none){
  .btn-resposta.sim:hover{background:#fff;color:var(--sim)}
  .btn-resposta.nao:hover{background:#fff;color:var(--texto-fraco);border-color:var(--rg-claro)}
  .btn:hover{background:transparent;color:var(--rg-forte);border-color:var(--rg)}
  .btn--cheio:hover{background:var(--rose-botao);border-color:var(--rose-botao);color:#FFF8F6}
  .botao-convite:hover{background:#FDF7F5}
  .botao-convite.principal:hover{background:var(--rose-botao)}
  .mini:hover{background:var(--creme);color:var(--rg-forte);border-color:var(--rg-claro)}
  .car-seta:hover{background:var(--cartao);color:var(--rg-forte);border-color:var(--rg)}
}

/* nome do titular embaixo da chave Pix */
.pix small{
  display:block;margin-top:8px;font-size:.82rem;
  letter-spacing:.02em;color:var(--texto-fraco);font-family:var(--fonte-ui);
}
.pix b{font-size:1.15rem;letter-spacing:.04em}