/* ============================================================
   Luisa & Felipe — Do elevador a Paris
   One page imersivo · paleta noite/bordô/creme/ouro
   ============================================================ */

@font-face{ font-family:'Kalieb'; src:url('../fonts/kalieb.woff') format('woff'); font-display:swap }
@font-face{ font-family:'Kalieb'; font-style:italic; src:url('../fonts/kalieb-italic.woff') format('woff'); font-display:swap }
@font-face{ font-family:'Robelia'; src:url('../fonts/robelia.woff') format('woff'); font-display:swap }
@font-face{ font-family:'Jost'; font-weight:200; src:url('../fonts/jost-200.woff2') format('woff2'); font-display:swap }
@font-face{ font-family:'Jost'; font-weight:300; src:url('../fonts/jost-300.woff2') format('woff2'); font-display:swap }
@font-face{ font-family:'Jost'; font-weight:400; src:url('../fonts/jost-400.woff2') format('woff2'); font-display:swap }
@font-face{ font-family:'Jost'; font-weight:500; src:url('../fonts/jost-500.woff2') format('woff2'); font-display:swap }

:root{
  --noite:#120709;
  --prof:#241014;
  --bordo:#682730;
  --bordo-esc:#4A1820;
  --creme:#F4EBD1;
  --ouro:#C9973F;
  --ouro-claro:#E8C070;
  --f-display:'Kalieb', Georgia, serif;
  --f-mao:'Robelia', cursive;
  --f-texto:'Jost', 'Segoe UI', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box }
html{ scroll-behavior:auto }
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }

body{
  background:var(--noite);
  color:var(--creme);
  font-family:var(--f-texto);
  font-weight:300;
  overflow-x:clip;
  line-height:1.55;
}
img{ max-width:100%; display:block }
button{ font-family:inherit; cursor:pointer }
a{ color:var(--ouro-claro) }
::selection{ background:var(--bordo); color:var(--creme) }

/* ============ CAMADAS ============
   fundo das seções z1 · conteúdo z2 · canvas partículas z3 (fixo)
   header z20 · modais z60 · cursor z90 · preloader z100 */

#gl{
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:3; pointer-events:none;
}
.semgl #gl{ display:none }

/* ============ PRELOADER ============ */
#preload{
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:100; background:var(--noite);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; transition:opacity .7s ease, visibility .7s ease;
}
#preload .selo{ width:84px; opacity:.9 }
/* barra de madeira e ouro: trilho vazio + barra cheia recortada por clip-path.
   O recorte é atualizado pelo JS conforme o progresso REAL do carregamento. */
#preload .barra-pre{ position:relative; width:min(420px,70vw) }
#preload .barra-pre .trilho{ width:100%; display:block }
#preload .barra-pre .cheia{
  position:absolute; top:0; left:0; width:100%;
  /* o preenchimento dourado vive entre 4,5% e 95,5% da imagem */
  clip-path:inset(0 95.5% 0 0 round 999px);
}
#preload.some{ opacity:0; visibility:hidden; pointer-events:none }

/* ============ CONVITE LACRADO (capa do site) ============ */
#convite{
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:95; background:transparent; overflow:hidden;
  /* fundo transparente: quando a tampa levanta, o vão em V revela o
     cenário do elevador AO VIVO por trás (pedido do cliente, 19/08) */
}
/* caixa = a imagem do envelope em "cover" (medida pelo JS, --s = escala).
   Camadas reais separadas pelo cliente (mesmo quadro 1920x1072):
   boca (interior bege) atrás · corpo-vazado.webp · tampa.webp na aba. */
#convite .cena-envelope{ position:absolute; will-change:transform; perspective:1200px }
#convite .envelope{
  position:absolute; top:0; left:0; width:100%; height:100%; max-width:none;
}
/* o vão em V fica TRANSPARENTE: revela o cenário do elevador atrás.
   (o forro bege foi substituído a pedido do cliente — o site é o interior) */
#convite .boca{ display:none }
/* a aba: frente = tampa.webp (recorte real com alpha); verso = forro creme
   mascarado pela MESMA tampa (silhueta idêntica). Dobradiça no topo da tela. */
#convite .aba{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none }
#convite .aba .frente,
#convite .aba .verso{
  position:absolute; top:0; left:0; width:100%; height:100%;
  transform-origin:50% 0%;
  backface-visibility:visible;
}
#convite .aba .frente{
  background-image:url(../capa/tampa.webp);
  background-size:100% 100%; background-position:0 0;
}
#convite .aba .verso{
  visibility:hidden;
  background:linear-gradient(to bottom,
    #FFF8E6 0%, var(--creme) 46%, #E6D8B2 78%, #D6C393 100%);
  -webkit-mask-image:url(../capa/tampa.webp);
  mask-image:url(../capa/tampa.webp);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}
/* plano-carona do selo: mesmo espaço e mesma dobradiça da aba, para o
   lacre subir COLADO nela (ele está grudado na cera da ponta) */
#convite .selo-anda{
  position:absolute; top:0; left:0; width:100%; height:100%;
  transform-origin:50% 0%; pointer-events:none;
}
#convite .selo-cera{
  position:absolute; left:49.9%; top:calc(49.6% + 50px);
  width:min(17.2%, 43vw);   /* 30% menor (era 24.6%/62vw) */
  transform:translate(-50%,-50%);
  background:transparent; border:0; padding:0; cursor:pointer;
  pointer-events:auto;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.5));
  transition:filter .35s ease;
}
#convite .selo-cera img{ width:100%; height:auto; display:block }
/* sem brilho no hover (pedido do cliente); o anel de foco fica só para teclado */
#convite .selo-cera:focus-visible{ outline:1px solid var(--ouro); outline-offset:10px; border-radius:50% }
/* respiração sutil do lacre, convidando o toque */
#convite .selo-cera img{ animation:selo-respira 3.2s ease-in-out infinite }
@keyframes selo-respira{
  0%,100%{ transform:scale(1) }
  50%{ transform:scale(1.025) }
}
#convite .nome-convidado{
  position:absolute; left:50%; top:80%;
  transform:translate(-50%,-50%);
  font-family:var(--f-mao); color:var(--creme);
  font-size:calc(58px * var(--s,1));
  line-height:1.1; white-space:nowrap;
  text-shadow:0 2px 16px rgba(10,4,5,.6);
  /* reveal de "escrita": o JS abre este recorte da esquerda para a direita */
  clip-path:inset(-25% 101% -25% -2%);
}
#convite .micro{
  position:absolute; left:0; right:0; bottom:6.5svh; text-align:center;
  font-family:var(--f-texto); font-weight:300; font-size:13.5px;
  letter-spacing:.4em; padding-left:.4em; text-transform:uppercase;
  color:rgba(244,235,209,.85); pointer-events:none;
  text-shadow:0 1px 10px rgba(10,4,5,.7);
}
/* respiro de luz suave da boca aberta (bem discreto: o interior é claro) */
#convite .feixe-aba{
  position:absolute; left:48.6%; top:30%;
  width:82%; height:52%;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,252,244,.5) 0%, rgba(244,235,209,.25) 40%, rgba(244,235,209,0) 70%);
  mix-blend-mode:screen; opacity:0; visibility:hidden; pointer-events:none;
}
/* clarão dourado→creme do mergulho para dentro do envelope */
#convite .clarao-convite{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:radial-gradient(120% 100% at 50% 55%,
    #FFFAEE 0%, var(--ouro-claro) 46%, rgba(212,166,88,.96) 100%);
  opacity:0; visibility:hidden; pointer-events:none;
}

/* ============ BOTÃO DE SOM ============ */
#btn-som{
  position:fixed; top:18px; right:18px; z-index:30;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,7,9,.45); border:1px solid rgba(201,151,63,.4);
  color:var(--creme); backdrop-filter:blur(4px);
  transition:border-color .3s ease, background .3s ease, opacity .3s ease;
  opacity:.85;
}
#btn-som:hover{ opacity:1; border-color:var(--ouro) }
#btn-som:focus-visible{ outline:1px solid var(--ouro); outline-offset:3px }
#btn-som svg{ width:20px; height:20px }
#btn-som .corte{ stroke:var(--ouro-claro); visibility:hidden }
#btn-som[aria-pressed="false"] .corte{ visibility:visible } /* mudo */

/* ============ HEADER ============ */
.topo{
  position:fixed; top:0; left:0; width:100%; z-index:20;
  display:flex; justify-content:center; padding:34px 0;
  pointer-events:none; opacity:0; transition:opacity 1s ease;
}
.topo.vis{ opacity:1 } /* só entra quando o ato acaba e o site "vira site" */
/* brasão dentro de um círculo de vidro fosco, no padrão do botão de som */
.topo img{
  width:76px; height:76px; padding:16px;
  border-radius:50%;
  background:rgba(18,7,9,.42);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(201,151,63,.38);
  box-shadow:0 10px 32px rgba(0,0,0,.35);
  opacity:.95;
}
@supports not (backdrop-filter:blur(1px)){
  .topo img{ background:rgba(24,10,13,.8) }
}

/* ============ BASE DAS SEÇÕES ============ */
section{ position:relative }

.quadro{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;
  overflow:hidden;
}
.quadro img.cena{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover;
}

.conteudo{ position:relative; z-index:2 }

.cap{
  font-family:var(--f-mao); color:var(--ouro-claro);
  font-size:clamp(22px,3vw,30px); letter-spacing:.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}

.cab{ text-align:center; padding:0 6vw; margin-bottom:clamp(28px,5vh,52px) }
.cab h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(32px,5vw,58px); line-height:1.1;
}
.cab h2 em{ font-style:italic; color:var(--ouro-claro) }
.cab .sub{
  max-width:560px; margin:14px auto 0; color:rgba(244,235,209,.78);
  font-size:clamp(15.5px,1.7vw,18px); line-height:1.55;
}

/* ============================================================
   ATO 1 · PALCO ÚNICO
   Uma section alta (--ato-altura) com um palco sticky de 100svh.
   Dez planos empilhados (4 vídeos + 6 imagens); só mudam opacity,
   transform e clip-path. Cada corte tem um dispositivo próprio.
   Legendas ancoradas em nove posições, com scrim LOCAL
   (nunca véu na tela inteira).
   Para calibrar o ritmo do ato inteiro, mexa em --ato-altura.
============================================================ */
#ato{
  --ato-altura:1400svh;
  height:var(--ato-altura);
  background:var(--noite);
}
#ato .palco{
  position:sticky; top:0;
  height:100svh; width:100%;
  overflow:hidden;
}
#ato .planos{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;
}
#ato .plano{
  position:absolute; top:0; left:0; width:100%; height:100%;
  overflow:hidden; backface-visibility:hidden;
}
/* o clip/entrada mora no .plano; a deriva de câmera mora na .midia */
#ato .plano .midia{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; background:var(--noite);
  transform:scale(1.04);
}
/* díptico do jantar: duas metades da MESMA imagem, que se afastam no racho */
#ato .plano .metade{
  position:absolute; top:0; width:50%; height:100%; overflow:hidden;
}
#ato .plano .metade.esq{ left:0 }
#ato .plano .metade.dir{ left:50% }
/* max-width:none anula o reset global de img, senão o 200% é cortado */
#ato .plano .metade .midia{ width:200%; max-width:none; height:100% }
#ato .plano .metade.dir .midia{ left:-100% }

/* ---------- troca de assets 9:16 no celular (<=799px) ----------
   Desktop mantém os vídeos/imagens landscape; o celular recebe os assets
   verticais preenchendo a tela (object-fit:cover + 100svh já cobrem).
   As imagens estáticas trocam via <picture> (source media), sem JS; os beats
   de vídeo (elevador/recepcao/conversa) usam <video class="midia m-only"> com
   SCRUB por scroll, e janelas usa <video class="m-only"> em loop — todos
   controlados no site.js. */
#ato .plano .m-only{ display:none }
@media (max-width:799px){
  #ato .plano .d-only{ display:none }
  #ato .plano .m-only{ display:block }
}

/* ---------- dispositivos de transição ---------- */
#ato .feixe{        /* wipe de feixe de luz (vertical, varre a tela) */
  position:absolute; top:0; left:0; width:4.5vw; height:100%; z-index:3;
  pointer-events:none; opacity:0;
  background:linear-gradient(to right,
    rgba(244,235,209,0) 0%, rgba(232,192,112,.45) 42%,
    rgba(255,250,238,.95) 52%, rgba(232,192,112,.4) 62%, rgba(244,235,209,0) 100%);
  mix-blend-mode:screen;
}
#ato .cortina{      /* cortina de luz que desce */
  position:absolute; top:0; left:0; width:100%; height:5.5svh; z-index:3;
  pointer-events:none; opacity:0;
  background:linear-gradient(to bottom,
    rgba(244,235,209,0) 0%, rgba(232,192,112,.4) 44%,
    rgba(255,250,238,.9) 54%, rgba(232,192,112,.34) 66%, rgba(244,235,209,0) 100%);
  mix-blend-mode:screen;
}
#ato .friso{        /* racho vertical de luz creme do díptico */
  position:absolute; top:0; left:50%; width:0; height:100%; z-index:3;
  pointer-events:none; opacity:0;
  background:linear-gradient(to right,
    rgba(255,250,238,.95) 0 2px,
    rgba(244,235,209,0) 2px calc(100% - 2px),
    rgba(255,250,238,.95) calc(100% - 2px) 100%);
  box-shadow:0 0 46px rgba(244,235,209,.55);
  mix-blend-mode:screen;
}
#ato .clarao{       /* dissolve com clarão creme */
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:3;
  pointer-events:none; opacity:0;
  background:radial-gradient(80% 70% at 50% 46%,
    rgba(255,250,238,.9) 0%, rgba(232,192,112,.4) 42%, rgba(244,235,209,0) 78%);
  mix-blend-mode:screen;
}
/* vinheta discreta: integra a cena ao bordô e segura a leitura das bordas */
#ato .ar{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;
  pointer-events:none;
  background:
    radial-gradient(125% 95% at 50% 46%, rgba(18,7,9,0) 52%, rgba(18,7,9,.55) 100%),
    linear-gradient(to bottom, rgba(18,7,9,.42) 0%, rgba(18,7,9,0) 16%, rgba(18,7,9,0) 82%, rgba(18,7,9,.5) 100%);
}
/* pulso de luz do "sim" */
#ato .pulso-sim{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;
  pointer-events:none; opacity:0;
  background:radial-gradient(90% 70% at 52% 40%, rgba(244,235,209,.85) 0%, rgba(232,192,112,.34) 38%, rgba(18,7,9,0) 72%);
  mix-blend-mode:screen;
}

/* ---------- legendas ---------- */
#ato .legendas{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:4;
  pointer-events:none;
}
#ato .legenda{
  position:absolute; width:fit-content; max-width:min(42ch,84vw); opacity:0;
  font-family:var(--f-texto); font-weight:300;
  font-size:clamp(1.28rem,2.5vw,2.4rem); line-height:1.42;
  letter-spacing:.022em; color:var(--creme);
  /* legibilidade SEM caixa: sombra em duas camadas (contorno + halo largo) */
  text-shadow:0 1px 2px rgba(10,4,5,.7), 0 2px 20px rgba(10,4,5,.5);
}
/* .com-luz: só para o beat que ainda ficar ilegível nas capturas.
   Gradiente ENORME e fraco (feather de centenas de px), nunca lê como caixa. */
#ato .legenda.com-luz::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  top:-190px; bottom:-190px; left:-320px; right:-320px;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(10,4,5,.28) 0%, rgba(10,4,5,.17) 42%, rgba(10,4,5,0) 74%);
}
#ato .legenda em{
  font-family:var(--f-mao); font-style:italic;
  color:var(--ouro); font-size:1.22em; line-height:.9;
  text-shadow:0 1px 2px rgba(10,4,5,.75), 0 2px 20px rgba(10,4,5,.55),
              0 0 26px rgba(201,151,63,.45);
}
#ato .legenda.grande{
  max-width:min(30ch,86vw);
  font-size:clamp(1.5rem,3.4vw,3.1rem); line-height:1.22;
}
/* coluna curta: usada onde o personagem ocupa o meio do quadro */
#ato .legenda.estreita{ max-width:min(26ch,74vw) }

/* âncoras — sem transform (o JS anima y/opacity livremente) */
#ato .a-alto-esq,   #ato .a-alto-centro,   #ato .a-alto-dir{ top:13svh }
#ato .a-centro-esq, #ato .a-centro-dir{ top:42% }
/* .a-centro: centro exato da tela nos dois eixos (entre as duas janelas) */
#ato .a-centro{
  top:0; bottom:0; height:fit-content;
  margin-top:auto; margin-bottom:auto;
}
#ato .a-baixo-esq,  #ato .a-baixo-centro,  #ato .a-baixo-dir{ bottom:13svh }
#ato .a-alto-esq,   #ato .a-centro-esq,    #ato .a-baixo-esq{ left:6vw; text-align:left }
#ato .a-alto-dir,   #ato .a-centro-dir,    #ato .a-baixo-dir{ right:6vw; text-align:right }
#ato .a-alto-centro,#ato .a-centro,        #ato .a-baixo-centro{
  left:0; right:0; margin-left:auto; margin-right:auto; text-align:center;
}
/* frase emendada em duas metades: a primeira TERMINA no centro da tela e a
   segunda COMEÇA no mesmo ponto, na mesma linha de base — quando a segunda
   entra, lê como a continuação exata da primeira */
#ato .a-emenda-a{ right:50%; text-align:right; bottom:13svh }
#ato .a-emenda-b{ left:50%;  text-align:left;  bottom:13svh }

#ato .rolar-dica{
  position:absolute; bottom:3.5svh; left:50%; transform:translateX(-50%);
  z-index:4; font-size:11px; letter-spacing:.34em; padding-left:.34em;
  text-transform:uppercase; color:rgba(244,235,209,.85); pointer-events:none;
  text-shadow:0 2px 14px rgba(18,7,9,.9), 0 0 26px rgba(18,7,9,.7);
}
#ato .rolar-dica::after{
  content:''; display:block; width:1px; height:26px;
  margin:10px auto 0; background:linear-gradient(to bottom, var(--ouro), transparent);
}

/* ============ 9 · PADRINHOS · CONSTELAÇÃO ============ */
#padrinhos{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(74,24,32,.55) 0%, rgba(18,7,9,0) 60%),
    var(--noite);
  padding:14svh 0 10svh;
}
#padrinhos .filtros-lado{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
  position:relative; z-index:4;
}
.chip-lado{
  font-family:var(--f-mao); font-size:clamp(19px,2.2vw,24px);
  color:var(--creme); background:transparent;
  border:1px solid rgba(201,151,63,.4); border-radius:999px;
  padding:8px 24px 6px; transition:all .35s ease; opacity:.75;
}
.chip-lado:hover{ opacity:1; border-color:var(--ouro) }
.chip-lado[aria-pressed="true"]{
  opacity:1; color:var(--noite); background:var(--ouro);
  border-color:var(--ouro); box-shadow:0 0 26px rgba(201,151,63,.4);
}
#padrinhos .ceu-padrinhos{
  /* exatamente uma tela: a constelação inteira cabe no quadro,
     sem estrela cortada em cima ou embaixo */
  position:relative; height:100svh; margin-top:0; z-index:2;
}
/* título no centro do céu, estrelas em anel ao redor */
#padrinhos .centro-ceu{
  position:absolute; left:50%; top:calc(50% - 30px);
  transform:translate(-50%,-50%);
  margin:0; padding:0; width:min(560px,84vw);
  z-index:3; pointer-events:none;
}
.estrela{
  position:absolute; transform:translate(-50%,-50%);
  width:56px; height:56px; border:0; background:transparent;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, filter .5s ease;
}
.estrela .brilho{
  position:absolute; width:100%; height:100%; border-radius:50%;
  background:radial-gradient(circle, rgba(232,192,112,.55) 0%, rgba(232,192,112,0) 62%);
  animation:respira 3.4s ease-in-out infinite;
}
.estrela .nucleo{
  width:7px; height:7px; border-radius:50%;
  background:var(--creme);
  box-shadow:0 0 10px 3px rgba(232,192,112,.9), 0 0 30px 8px rgba(201,151,63,.35);
}
.estrela .nome-estrela{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:16.5px; font-weight:500; letter-spacing:.06em;
  color:rgba(244,235,209,.84); margin-top:3px;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
  transition:color .3s ease;
}
.estrela:hover .nome-estrela, .estrela:focus-visible .nome-estrela{ color:var(--ouro-claro) }
.estrela:focus-visible{ outline:1px solid var(--ouro); outline-offset:6px; border-radius:50% }
.estrela.fora{ opacity:.14; filter:grayscale(.6); pointer-events:none }
@keyframes respira{
  0%,100%{ transform:scale(1); opacity:.8 }
  50%{ transform:scale(1.35); opacity:1 }
}

/* card do casal de padrinhos */
#card-padrinho{
  position:fixed; top:0; left:0; width:100%; height:100%; z-index:60;
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0;
}
#card-padrinho.aberto{ visibility:visible; opacity:1 }
#card-padrinho .fundo{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(10,4,5,.78); backdrop-filter:blur(6px);
}
#card-padrinho .palco{ perspective:1200px; position:relative; z-index:2; padding:0 16px }
#card-padrinho .carta{
  position:relative; width:min(92vw,440px);
  display:flex; flex-direction:column;
  max-height:88svh; overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(160deg, rgba(74,24,32,.92), rgba(36,16,20,.94));
  border:1px solid rgba(201,151,63,.55); border-radius:22px;
  padding:22px 26px 24px; text-align:center;
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 60px rgba(201,151,63,.12);
  will-change:transform;
  scrollbar-width:thin; scrollbar-color:rgba(201,151,63,.6) rgba(255,255,255,.05);
  touch-action:pan-y; -webkit-overflow-scrolling:touch;
}
/* trilho de rolagem próprio (mobile): o iPhone ignora scrollbar customizada,
   então desenhamos a nossa — só aparece quando a carta tem mais conteúdo */
#card-padrinho .trilho-pad{
  display:none; position:absolute; z-index:6;
  right:22px; top:26px; bottom:26px; width:4px;
  border-radius:4px; background:rgba(244,235,209,.1);
  pointer-events:none;
}
#card-padrinho .trilho-pad span{
  position:absolute; left:0; width:100%; top:0; height:30%;
  border-radius:4px;
  background:linear-gradient(180deg, rgba(228,188,116,.95), rgba(201,151,63,.65));
  box-shadow:0 0 8px rgba(201,151,63,.35);
}
/* barra de rolagem enxuta e dourada, com "respiro" nas pontas */
#card-padrinho .carta::-webkit-scrollbar{ width:11px }
#card-padrinho .carta::-webkit-scrollbar-track{
  background:rgba(255,255,255,.045); border-radius:11px; margin:14px 0;
}
#card-padrinho .carta::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(228,188,116,.9), rgba(201,151,63,.55));
  border-radius:11px; border:3px solid transparent; background-clip:padding-box;
}
#card-padrinho .carta::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(238,201,134,1), rgba(208,160,74,.75));
  background-clip:padding-box;
}
#card-padrinho .foto{
  width:96px; height:96px; border-radius:50%; overflow:hidden;
  margin:0 auto 16px; border:1px solid rgba(201,151,63,.6);
  box-shadow:0 0 22px rgba(201,151,63,.22);
  transform:translateZ(34px);
}
/* medalhão do símbolo L&F: pequeno, respirando, anel interno fino —
   clima de medalha gravada, não de logo esticado */
#card-padrinho .foto.e-simbolo{
  position:relative;
  background:radial-gradient(120% 120% at 50% 28%, #5A1F28 0%, #38121A 62%, #2B0D12 100%);
  box-shadow:inset 0 0 26px rgba(0,0,0,.5), 0 0 20px rgba(201,151,63,.14);
}
#card-padrinho .foto.e-simbolo::before{
  content:''; position:absolute; top:6px; left:6px; right:6px; bottom:6px;
  border:1px solid rgba(201,151,63,.35); border-radius:50%;
  pointer-events:none;
}
#card-padrinho .foto.e-simbolo img{
  transform:none;                 /* anula o zoom das fotos */
  object-fit:contain; padding:27%;
  opacity:.92; filter:none;
}
#card-padrinho .foto img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.9); transform-origin:50% 42%; /* aproxima o casal (fotos wide) */
}
#card-padrinho .nome-pad{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(31px,3.5vw,37px);
  margin:6px 0 12px; transform:translateZ(30px);
}
/* Regra tipográfica do site: texto longo é sempre Jost (nunca display).
   O recado é uma citação longa -> Jost 300 itálico. */
#card-padrinho .recado-pad{
  font-family:var(--f-texto); font-weight:300; font-style:italic;
  color:rgba(244,235,209,.92);
  font-size:19px; line-height:1.58; transform:translateZ(20px);
}
/* carta personalizada: parágrafos justificados (pedido do casal), com
   hifenização pt-BR para não abrir "rios" de espaço na coluna estreita */
#card-padrinho .msg-pad{ text-align:justify; margin-top:15px; width:100% }
#card-padrinho .msg-pad p{
  font-family:var(--f-texto); font-weight:300;
  font-size:17.5px; line-height:1.68;
  color:rgba(244,235,209,.85); margin:0 0 13px;
  -webkit-hyphens:auto; hyphens:auto;
}
#card-padrinho .msg-pad p:last-child{ margin-bottom:0 }
/* divisor requintado: dois fios que somem nas pontas + losango de ouro */
#card-padrinho .divisor{
  display:flex; align-items:center; gap:12px;
  width:78%; margin:20px auto 0;
  transform:translateZ(14px);
}
#card-padrinho .divisor::before,
#card-padrinho .divisor::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(to right, rgba(201,151,63,0), rgba(201,151,63,.45));
}
#card-padrinho .divisor::after{
  background:linear-gradient(to left, rgba(201,151,63,0), rgba(201,151,63,.45));
}
#card-padrinho .divisor span{
  width:7px; height:7px; flex:none;
  background:var(--ouro); opacity:.85;
  transform:rotate(45deg);
}
/* bilhete dos noivos: painel próprio + assinatura em caligrafia */
#card-padrinho .agradece{
  margin-top:16px; padding:14px 18px 12px;
  background:rgba(10,4,5,.26);
  border-radius:14px;
  transform:translateZ(14px);
}
#card-padrinho .agradece p{
  font-family:var(--f-texto); font-weight:300;
  font-size:16.5px; line-height:1.64;
  color:rgba(244,235,209,.8); margin:0;
}
#card-padrinho .agradece .assina-lead{
  font-family:var(--f-texto); font-weight:300; font-style:italic;
  font-size:15.5px; color:rgba(244,235,209,.72);
  margin:14px 0 0;
}
#card-padrinho .agradece .assinatura{
  font-family:var(--f-mao); color:var(--ouro-claro);
  font-size:28px; margin-top:2px; line-height:1.1;
}
/* fica colada no topo da carta enquanto o bilhete rola */
#card-padrinho .fecha{
  position:sticky; top:0; z-index:5; align-self:flex-end;
  margin:-6px -8px 0 0; flex:none;
  width:38px; height:38px; border-radius:50%;
  background:rgba(18,7,9,.6); border:1px solid rgba(201,151,63,.4);
  color:var(--creme); font-size:19px; line-height:1;
}
#card-padrinho .seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%;
  background:rgba(18,7,9,.55); border:1px solid rgba(201,151,63,.45);
  color:var(--ouro-claro); font-size:20px; line-height:1;
  transition:background .3s ease;
}
#card-padrinho .seta:hover{ background:var(--bordo) }
#card-padrinho .seta.ant{ left:calc(50% - min(46vw,210px) - 66px) }
#card-padrinho .seta.prox{ right:calc(50% - min(46vw,210px) - 66px) }

/* ============ 10 · CERIMÔNIA & FESTA ============ */
#cerimonia{ overflow:hidden; padding:16svh 6vw 14svh }
#cerimonia .quadro img{ opacity:.5 }
#cerimonia .veu-igreja{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;
  background:
    linear-gradient(to bottom, var(--noite) 0%, rgba(18,7,9,.35) 30%, rgba(74,24,32,.55) 72%, var(--noite) 100%),
    radial-gradient(80% 60% at 50% 40%, rgba(104,39,48,.25), rgba(18,7,9,.65));
}
#cerimonia .blocos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:26px; max-width:900px; margin:0 auto;
}
.bloco-local{
  background:linear-gradient(165deg, rgba(36,16,20,.86), rgba(18,7,9,.9));
  border:1px solid rgba(201,151,63,.32); border-radius:20px;
  padding:34px 30px; text-align:center;
  backdrop-filter:blur(3px);
}
.bloco-local .icone-local{ width:46px; height:46px; margin:0 auto 10px; color:var(--ouro-claro) }
.bloco-local .icone-local svg{ width:100%; height:100%; stroke:currentColor; fill:none }
.bloco-local h3{ font-family:var(--f-display); font-weight:400; font-size:clamp(24px,2.6vw,30px) }
.bloco-local .qdo{
  font-family:var(--f-mao); color:var(--ouro-claro);
  font-size:clamp(19px,2vw,23px); margin:6px 0 10px;
}
/* placa 3D de mármore e ouro (recorte da prancha do cliente): aspect fixo,
   nunca esticar fora de 1100x352. Texto bordô-escuro sobre o mármore claro. */
.bloco-local .placa{
  position:relative; aspect-ratio:1100/352;
  margin:0 0 12px;
  background:url('../ui/placa-marmore.webp') center / 100% 100% no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  /* o mármore ocupa ~26%–74% da altura da placa: o texto vive só ali */
  padding:7.5% 13% 6%;
}
.bloco-local .placa h3{
  color:var(--bordo-esc); line-height:1.05;
  font-size:clamp(19px,2.1vw,26px); letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
/* data em destaque, fora das placas, fechando a seção */
#cerimonia .data-grande{
  margin-top:clamp(30px,6vh,60px);
  text-align:center;
}
#cerimonia .data-grande .dg-dia{
  display:block;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(30px,4.6vw,58px); line-height:1.1;
  color:var(--creme); text-shadow:0 2px 18px rgba(0,0,0,.55);
}
#cerimonia .data-grande .dg-hora{
  display:block; margin-top:4px;
  font-family:var(--f-mao); color:var(--ouro-claro);
  font-size:clamp(22px,2.6vw,34px);
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.bloco-local .placa .qdo{
  color:var(--bordo); margin:1px 0 0; line-height:1.2;
  font-size:clamp(13.5px,1.3vw,16px);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.bloco-local .end{ font-size:17px; line-height:1.5; color:rgba(244,235,209,.84) }
.bloco-local .obs{ font-size:15.5px; color:rgba(244,235,209,.6); margin-top:8px }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:18px; padding:13px 26px; border-radius:999px;
  font-family:var(--f-texto); font-weight:400; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--creme); background:var(--bordo);
  border:1px solid rgba(201,151,63,.45);
  transition:background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.btn:hover{ background:var(--bordo-esc); box-shadow:0 8px 30px rgba(0,0,0,.4); transform:translateY(-2px) }
.btn svg{ width:15px; height:15px; stroke:var(--ouro-claro); fill:none }
.btn-ouro{ background:var(--ouro); color:var(--noite); border-color:var(--ouro) }
.btn-ouro:hover{ background:var(--ouro-claro) }

/* ============ 11 · CONTAGEM ============ */
/* fundo SOLIDO (nao degrade): o video do casal tem o bordo #120709 queimado;
   com degrade atras, a area do video aparecia como um retangulo mais escuro */
#contagem{ overflow:hidden; padding:14svh 6vw 0; background:var(--noite) }
/* palco: o casal recortado grande direto sobre o fundo bordô, relógio de vidro por cima */
#contagem .palco-conta{
  position:relative;
  min-height:78svh;
  margin-top:clamp(10px,2vh,26px);
}
#contagem .casal-acena{
  position:absolute; bottom:0; left:50%;
  transform:translateX(-50%);
  /* DESKTOP: mp4 16:9 com fundo queimado */
  height:min(74svh, 62vw);
  aspect-ratio:16/9;
  max-width:680px;
}
#contagem .casal-acena video,
#contagem .casal-acena .acena-fallback{
  width:100%; height:100%; object-fit:cover; display:block;
  /* o fundo bordô do vídeo já está queimado (= --noite): funde com a seção,
     nada de máscara nem fade nos personagens */
}
#contagem .casal-acena .acena-fallback{ display:none }
#contagem .casal-acena.sem-alpha video{ display:none }
#contagem .casal-acena.sem-alpha .acena-fallback{ display:block }
/* sombra de contato no chão, para o recorte assentar no fundo */
#contagem .casal-acena::after{
  content:""; position:absolute; bottom:-2px; left:50%;
  transform:translateX(-50%);
  width:52%; height:7%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.5), transparent 70%);
  pointer-events:none;
}
/* relógio em vidro fosco, sobre o torso — nunca sobre os rostos */
#contagem .vidro-conta{
  position:absolute; left:50%; bottom:clamp(16px,5svh,52px);
  transform:translateX(-50%);
  z-index:3;
  width:min(760px, 92vw);
  padding:clamp(16px,2.6vh,28px) clamp(18px,3vw,38px) clamp(12px,2vh,20px);
  background:rgba(36,16,20,.34);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(244,235,209,.16);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
@supports not (backdrop-filter:blur(1px)){
  #contagem .vidro-conta{ background:rgba(24,10,13,.82) }  /* sem blur: vidro vira painel sólido */
}
#contagem .relogio{
  display:flex; justify-content:center; gap:clamp(14px,4vw,44px);
}
#contagem .unidade{ text-align:center }
#contagem .valor{
  position:relative; overflow:hidden;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(38px,6.4vw,78px); line-height:1.12;
  color:var(--creme); min-width:1.6em;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
#contagem .valor span{ display:block }
#contagem .unidade .tag{
  font-size:12.5px; letter-spacing:.26em; padding-left:.26em;
  text-transform:uppercase; color:var(--ouro-claro); margin-top:4px;
}
#contagem .frase-conta{
  text-align:center;
  font-family:var(--f-mao); color:var(--ouro-claro);
  font-size:clamp(19px,2.4vw,26px); margin-top:10px;
}

/* ============ 12 · PRESENTES ============ */
/* divisão tonal com a contagem: começa quase preto no corte do casal
   e clareia descendo (pedido do cliente) */
#presentes{
  padding:16svh 6vw 12svh;
  background:linear-gradient(to bottom, #0A0304 0%, var(--noite) 22%, var(--prof) 64%, var(--noite) 100%);
}
#presentes .filtros{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  margin-bottom:clamp(28px,4vh,44px);
}
.filtro{
  font-size:13.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,235,209,.75); background:transparent;
  border:1px solid rgba(201,151,63,.32); border-radius:999px;
  padding:10px 22px; transition:all .3s ease;
}
.filtro:hover{ color:var(--creme); border-color:var(--ouro) }
.filtro.ativo{ background:var(--bordo); color:var(--creme); border-color:var(--ouro) }

.presentes-grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:26px; max-width:1120px; margin:0 auto; perspective:1400px;
}
.caixa-presente{
  position:relative; transform-style:preserve-3d;
  border-radius:18px; text-align:center;
  background:linear-gradient(170deg, rgba(74,24,32,.55), rgba(36,16,20,.92));
  border:1px solid rgba(201,151,63,.3);
  padding:52px 22px 26px;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .5s ease;
  cursor:pointer;
}
.caixa-presente:hover, .caixa-presente:focus-visible{
  transform:translateY(-8px) rotateX(4deg);
  border-color:rgba(201,151,63,.7);
  box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 40px rgba(201,151,63,.14);
}
.caixa-presente:focus-visible{ outline:1px solid var(--ouro); outline-offset:4px }
/* tampa da caixa */
.caixa-presente .tampa{
  position:absolute; top:0; left:0; width:100%; height:40px; z-index:2;
  background:linear-gradient(to bottom, var(--bordo), var(--bordo-esc));
  border-radius:18px 18px 0 0;
  border-bottom:1px solid rgba(201,151,63,.5);
  transform-origin:50% 0;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.caixa-presente:hover .tampa{ transform:rotateX(38deg) translateY(-4px) }
/* fita bordô com laço dourado */
.caixa-presente .fita-v{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:14px; height:40px; z-index:3;
  background:linear-gradient(to right, rgba(201,151,63,.85), var(--ouro), rgba(201,151,63,.85));
  transform-origin:50% 0;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.caixa-presente:hover .fita-v{ transform:translateX(-50%) rotateX(38deg) translateY(-4px) }
/* laço de fita de verdade (duas alças + nó + pontas), em SVG embutido —
   o desenho antigo em pseudo-elementos lia como vela/fechadura */
.caixa-presente .laco{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); z-index:4;
  width:52px; height:30px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'><path d='M32 18 C24 6 8 6 9 15 C10 24 25 23 32 18 Z' fill='%23C9973F' fill-opacity='.28' stroke='%23C9973F' stroke-width='2.6' stroke-linejoin='round'/><path d='M32 18 C40 6 56 6 55 15 C54 24 39 23 32 18 Z' fill='%23C9973F' fill-opacity='.28' stroke='%23C9973F' stroke-width='2.6' stroke-linejoin='round'/><path d='M27 21 L23 32 M37 21 L41 32' stroke='%23C9973F' stroke-width='2.6' stroke-linecap='round'/><circle cx='32' cy='18' r='4.4' fill='%23C9973F'/></svg>") center/contain no-repeat;
}
.caixa-presente .icone{ width:34px; height:34px; margin:6px auto 12px; color:var(--ouro-claro) }
.caixa-presente .icone svg{ width:100%; height:100%; stroke:currentColor; fill:none }
.caixa-presente .cat-pres{
  font-size:12px; letter-spacing:.24em; padding-left:.24em;
  text-transform:uppercase; color:rgba(232,192,112,.85);
}
/* título do presente: fonte neutra (Jost) e maior — pedido do casal para
   facilitar a leitura dos convidados (o display Kalieb travava algumas palavras) */
.caixa-presente h4{
  font-family:var(--f-texto); font-weight:500;
  font-size:22px; line-height:1.3; letter-spacing:.005em; margin:8px 0 10px;
}
.caixa-presente .desc-pres{ font-size:17.5px; line-height:1.48; color:rgba(244,235,209,.72); min-height:2.6em }
.caixa-presente .cotas{
  height:4px; border-radius:4px; background:rgba(244,235,209,.14);
  margin:14px 8px 6px; overflow:hidden;
}
.caixa-presente .cotas i{
  display:block; height:100%;
  background:linear-gradient(to right, var(--ouro), var(--ouro-claro));
}
.caixa-presente .cotas-txt{ font-size:13px; color:rgba(244,235,209,.58) }
.caixa-presente .preco{
  margin-top:12px; font-family:var(--f-texto); font-weight:500;
  font-size:21px; color:var(--ouro-claro);
}
.caixa-presente .preco small{ display:block; font-size:13px; font-weight:300; color:rgba(244,235,209,.62) }
.caixa-presente.pacote{
  background:linear-gradient(170deg, rgba(201,151,63,.2), rgba(74,24,32,.8));
  border-color:rgba(201,151,63,.6);
}
/* ---- etiqueta Camicado: cartão-link no fim da lista, em forma de
   etiqueta de presente (furo + picote + laço); o bloco inteiro é o <a> ---- */
.cartao-camicado{
  position:relative; display:flex; align-items:center; gap:28px;
  max-width:1120px; margin:clamp(38px,6vh,64px) auto 0;
  padding:36px 38px 36px 100px;          /* respiro do furo e do picote */
  border-radius:20px; text-decoration:none; color:var(--creme);
  background:linear-gradient(135deg, rgba(104,39,48,.55), rgba(36,16,20,.95) 55%, rgba(74,24,32,.5));
  border:1px solid rgba(201,151,63,.45);
  /* sem overflow:hidden — o laço monta sobre a borda superior;
     quem recorta a varredura de luz é o .cam-brilho (clip próprio) */
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .5s ease;
}
.cartao-camicado:hover, .cartao-camicado:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(232,192,112,.8);
  box-shadow:0 26px 60px rgba(0,0,0,.45), 0 0 44px rgba(201,151,63,.16);
}
.cartao-camicado:focus-visible{ outline:1px solid var(--ouro); outline-offset:4px }
/* picote vertical (a linha tracejada da etiqueta) */
.cartao-camicado::before{
  content:''; position:absolute; left:76px; top:18px; bottom:18px;
  border-left:1px dashed rgba(201,151,63,.42);
}
/* furo da etiqueta, com anel de ilhós dourado */
.cartao-camicado .cam-furo{
  position:absolute; left:33px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:var(--noite);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.85),
             0 0 0 3px rgba(201,151,63,.6),
             0 0 0 9px rgba(201,151,63,.12);
}
/* laço de fita no topo, montado sobre a borda (mesmo desenho das caixinhas) */
.cartao-camicado .cam-laco{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:58px; height:33px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'><path d='M32 18 C24 6 8 6 9 15 C10 24 25 23 32 18 Z' fill='%23C9973F' fill-opacity='.28' stroke='%23C9973F' stroke-width='2.6' stroke-linejoin='round'/><path d='M32 18 C40 6 56 6 55 15 C54 24 39 23 32 18 Z' fill='%23C9973F' fill-opacity='.28' stroke='%23C9973F' stroke-width='2.6' stroke-linejoin='round'/><path d='M27 21 L23 32 M37 21 L41 32' stroke='%23C9973F' stroke-width='2.6' stroke-linecap='round'/><circle cx='32' cy='18' r='4.4' fill='%23C9973F'/></svg>") center/contain no-repeat;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
/* varredura de luz no hover (brilho de papel-presente) */
.cartao-camicado .cam-brilho{
  position:absolute; inset:0; overflow:hidden; border-radius:inherit;
  pointer-events:none;
}
.cartao-camicado .cam-brilho::after{
  content:''; position:absolute; top:0; bottom:0; width:46%; left:-70%;
  background:linear-gradient(105deg, transparent 0%,
    rgba(232,192,112,.12) 44%, rgba(244,235,209,.2) 50%, rgba(232,192,112,.12) 56%, transparent 100%);
  transform:skewX(-12deg);
  transition:left 1.1s cubic-bezier(.22,1,.36,1);
}
.cartao-camicado:hover .cam-brilho::after{ left:125% }
.cartao-camicado .cam-texto{ flex:1; min-width:0 }
.cartao-camicado .cam-kicker{
  display:block; font-size:13px; letter-spacing:.24em; padding-left:.24em;
  text-transform:uppercase; color:rgba(232,192,112,.85);
}
.cartao-camicado .cam-titulo{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(26px,3vw,36px); line-height:1.15; margin:7px 0 9px;
}
.cartao-camicado .cam-titulo em{ font-style:italic; color:var(--ouro-claro) }
.cartao-camicado .cam-sub{
  display:block; font-size:15.5px; line-height:1.55;
  color:rgba(244,235,209,.72); max-width:52ch;
}
.cartao-camicado .cam-btn{
  flex:none; display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:999px;
  background:var(--ouro); color:var(--noite);
  font-size:14px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  transition:background .3s ease, gap .3s ease;
}
.cartao-camicado:hover .cam-btn{ background:var(--ouro-claro); gap:15px }
.cartao-camicado .cam-btn svg{ width:15px; height:15px; stroke:var(--noite); flex:none }

.aviso-demo{
  text-align:center; font-size:11.5px; letter-spacing:.12em;
  color:rgba(244,235,209,.4); margin-top:34px; text-transform:uppercase;
}
.so-noscript{ text-align:center; color:rgba(244,235,209,.65); padding:20px }

/* ============ MODAL PRESENTE ============ */
.modal{
  position:fixed; top:0; left:0; width:100%; height:100%; z-index:60;
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; transition:opacity .35s ease, visibility .35s ease;
}
.modal.aberto{ visibility:visible; opacity:1 }
.modal .fundo{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(10,4,5,.8); backdrop-filter:blur(5px);
}
.modal .caixa{
  position:relative; z-index:2; width:min(92vw,560px);   /* desktop mais largo (era 430) */
  max-height:88svh; overflow-y:auto;
  background:linear-gradient(165deg, #2c1318, var(--prof));
  border:1px solid rgba(201,151,63,.45); border-radius:20px;
  padding:34px 34px 28px; text-align:center;
  box-shadow:0 40px 90px rgba(0,0,0,.65);
  transform:translateY(18px) scale(.97);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  /* barra de rolagem discreta e embutida (some no fundo do modal) */
  scrollbar-width:thin;
  scrollbar-color:rgba(201,151,63,.4) transparent;
}
.modal .caixa::-webkit-scrollbar{ width:7px }
.modal .caixa::-webkit-scrollbar-track{ background:transparent; margin:14px 0 }
.modal .caixa::-webkit-scrollbar-thumb{
  background:rgba(201,151,63,.32); border-radius:99px;
  border:2px solid transparent; background-clip:padding-box;
}
.modal .caixa::-webkit-scrollbar-thumb:hover{ background:rgba(201,151,63,.55); background-clip:padding-box }
.modal.aberto .caixa{ transform:translateY(0) scale(1) }
/* no desktop, o QR e os blocos podem ganhar duas colunas de respiro */
@media (min-width:620px){
  .modal .caixa{ padding:38px 40px 30px }
  .pix-confere dl{ max-width:420px; margin:0 auto }
}
.modal .fecha{
  position:absolute; top:12px; right:14px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(18,7,9,.5); border:1px solid rgba(201,151,63,.35);
  color:var(--creme); font-size:18px; line-height:1;
}
.modal .passo{ display:none }
.modal .passo.ativo{ display:block }
.modal .pres-cat{
  font-size:12.5px; letter-spacing:.24em; padding-left:.24em;
  text-transform:uppercase; color:var(--ouro-claro);
}
.modal .pres-nome{ font-family:var(--f-texto); font-weight:500; font-size:24px; line-height:1.25; margin:8px 0 10px }
.modal .pres-desc{ font-size:15px; line-height:1.5; color:rgba(244,235,209,.72); margin-bottom:20px }
.modal .pres-opcoes{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px }
.modal .opcao{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  text-align:left; padding:14px 18px; border-radius:14px;
  background:rgba(18,7,9,.45); border:1px solid rgba(201,151,63,.25);
  color:var(--creme); transition:border-color .3s ease, background .3s ease;
}
.modal .opcao:hover{ border-color:rgba(201,151,63,.6) }
.modal .opcao.marcada{ border-color:var(--ouro); background:rgba(104,39,48,.45) }
.modal .opcao .t{ font-weight:500; font-size:15.5px }
.modal .opcao .d{ font-size:13.5px; color:rgba(244,235,209,.6) }
.modal .opcao .v{ font-weight:400; color:var(--ouro-claro); white-space:nowrap }
.modal .qtd{
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin-bottom:18px;
}
.modal .qtd button{
  width:40px; height:40px; border-radius:50%;
  background:transparent; border:1px solid rgba(201,151,63,.5);
  color:var(--creme); font-size:19px;
}
.modal .qtd .qn{ font-family:var(--f-display); font-size:26px; min-width:1.4em }
.modal .campo{
  width:100%; padding:13px 16px; border-radius:12px;
  background:rgba(18,7,9,.5); border:1px solid rgba(201,151,63,.28);
  color:var(--creme); font-family:var(--f-texto); font-size:15px;
}
.modal .campo::placeholder{ color:rgba(244,235,209,.4) }
.modal .campo:focus{ outline:none; border-color:var(--ouro); box-shadow:0 0 0 3px rgba(201,151,63,.16) }
.modal .campo.falta{ border-color:var(--ouro); box-shadow:0 0 0 1px rgba(201,151,63,.45) }
/* autofill do Chrome sem o amarelo de sistema (nada com cara de navegador) */
.modal input.campo:-webkit-autofill,
.modal input.campo:-webkit-autofill:hover,
.modal input.campo:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #2A1216 inset;
  -webkit-text-fill-color:var(--creme);
  caret-color:var(--creme);
  transition:background-color 99999s ease-out;
}
.modal .form-linha{ display:flex; gap:10px; margin-bottom:10px }
.modal .form-linha.solo{ display:block }
/* aviso gentil de validação (nome/e-mail antes do Pix) */
.modal .form-erro{
  margin:10px 2px 0; padding-left:12px;
  border-left:2px solid var(--ouro);
  font-size:14px; line-height:1.5; text-align:left;
  color:var(--ouro-claro);
}
.modal .btn{ margin-top:14px; border:0; cursor:pointer }
.modal .pix-caixa{
  background:rgba(18,7,9,.5); border:1px dashed rgba(201,151,63,.5);
  border-radius:16px; padding:22px; margin:6px 0 4px;
}
/* QR real: módulos escuros sobre branco com margem de silêncio —
   contraste que qualquer câmera de banco lê */
.modal .pix-caixa .qr{
  width:176px; height:176px; margin:0 auto 14px;
  background:#fff; border-radius:10px; padding:8px;
}
.modal .pix-caixa .qr svg{ width:100%; height:100%; display:block }
.modal .pix-caixa p{ font-size:14px; line-height:1.5; color:rgba(244,235,209,.72) }
.modal .pix-caixa .btn{ margin-top:12px }
.modal .pix-valor{
  font-family:var(--f-display); color:var(--ouro-claro);
  font-size:clamp(19px,2vw,24px); margin:2px 0 12px;
}
.modal .aviso-demo{ margin-top:16px }

/* ---- passo 3: conferência do recebedor (dados que o app do banco mostra) ---- */
.pix-confere{
  text-align:left; margin-top:14px; padding:14px 16px;
  border:1px solid rgba(201,151,63,.3); border-radius:14px;
  background:rgba(18,7,9,.4);
}
.pix-confere .pc-titulo{
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ouro-claro); margin-bottom:9px;
}
.pix-confere dl div{ display:flex; gap:10px; padding:4px 0; font-size:15px; line-height:1.5 }
.pix-confere dt{
  flex:none; width:56px; padding-top:2px;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(244,235,209,.55);
}
.pix-confere dd{ margin:0; color:var(--creme); min-width:0 }
.pix-confere dd strong{ font-weight:500; color:var(--ouro-claro) }
.pix-confere .pc-chave{ word-break:break-all }
.pix-confere .pc-nota{ font-size:12.5px; color:rgba(244,235,209,.55); margin-top:9px; line-height:1.5 }

/* ---- passo 3: aviso anti-golpe (destaque forte, sem quebrar a elegância) ---- */
.pix-golpe{
  display:flex; align-items:flex-start; gap:12px; text-align:left;
  margin-top:12px; padding:15px 16px;
  border:1.5px solid var(--ouro); border-radius:14px;
  background:linear-gradient(165deg, rgba(104,39,48,.66), rgba(74,24,32,.5));
  box-shadow:0 0 0 1px rgba(201,151,63,.15), 0 10px 26px rgba(18,7,9,.35);
}
.pix-golpe .escudo{ width:26px; height:26px; flex:none; color:var(--ouro-claro); margin-top:1px }
.pix-golpe p{ font-size:14.5px; line-height:1.55; color:var(--creme) }
.pix-golpe strong{ font-weight:500; color:var(--ouro-claro) }

/* ---- passo 3: alternativa manual, discreta ---- */
.pix-manual{ font-size:13.5px; line-height:1.55; color:rgba(244,235,209,.65); margin-top:16px }

/* ============ CONFIRMAR PRESENÇA (RSVP) ============ */
/* CTA na cerimônia: o botão mais importante da seção */
.cta-rsvp{ text-align:center; margin-top:clamp(30px,5vh,52px) }
.cta-rsvp .btn-rsvp{
  font-size:16px; padding:16px 40px; letter-spacing:.1em;
  box-shadow:0 12px 40px rgba(201,151,63,.28), 0 0 0 1px rgba(201,151,63,.3);
}
.cta-rsvp .btn-rsvp svg{ width:17px; height:17px; stroke:var(--noite) }
.cta-rsvp .rsvp-dica{
  margin-top:12px; font-size:14px; color:rgba(244,235,209,.6);
}
/* linhas de familiar: campo + botão de tirar */
#modal-rsvp .rsvp-sub{
  text-align:left; margin:16px 2px 8px;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro-claro);
}
#modal-rsvp .rsvp-membro{ display:flex; gap:8px; margin-bottom:10px }
#modal-rsvp .rsvp-membro .campo{ flex:1; min-width:0 }
#modal-rsvp .rsvp-tira{
  flex:none; width:46px; border-radius:12px;
  background:rgba(18,7,9,.5); border:1px solid rgba(201,151,63,.28);
  color:rgba(244,235,209,.75); font-size:17px; line-height:1;
}
#modal-rsvp .rsvp-tira:hover{ border-color:var(--ouro); color:var(--creme) }
#modal-rsvp .btn-add-membro{
  margin-top:2px; width:100%;
  background:transparent; border:1px dashed rgba(201,151,63,.45);
}
#modal-rsvp .btn-add-membro:hover{ background:rgba(104,39,48,.35) }
#modal-rsvp .btn-largo{ width:100% }
/* passo de sucesso */
#modal-rsvp .rsvp-ok{ padding:12px 0 4px }
#modal-rsvp .rsvp-ok .selo-ok{ width:58px; opacity:.92; margin:0 auto 16px; display:block }
#modal-rsvp .rsvp-ok-data{
  font-family:var(--f-mao); color:var(--ouro-claro);
  font-size:22px; margin:10px 0 6px;
}

/* honeypot anti-bot: fora da tela, invisível e não focável para pessoas */
.campo-hp{
  position:absolute; left:-9999px; top:0;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

/* ============ 13 · FIM ============ */
#fim{
  min-height:92svh; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; text-align:left;
  padding:14svh 6vw 8svh; overflow:hidden;
}
/* véu que escurece só a lateral do texto — o casal e a igreja ficam limpos */
#fim .veu-fim{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;
  background:linear-gradient(to right,
    rgba(18,7,9,.78) 0%, rgba(18,7,9,.5) 30%, rgba(18,7,9,.12) 52%, rgba(18,7,9,0) 66%);
  pointer-events:none;
}
/* bloco final dentro de um cartão de vidro fosco (pedido do casal),
   compacto na altura para não roubar a cena do casal na foto */
#fim .fim-texto{
  max-width:min(480px, 44vw);
  margin-left:clamp(10px, 4vw, 80px);
  margin-top:calc(-1 * clamp(48px, 10svh, 110px));  /* sobe no céu */
  text-align:center;
  background:rgba(18,7,9,.42);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(201,151,63,.3); border-radius:22px;
  padding:22px 30px 18px;
  box-shadow:0 18px 50px rgba(10,4,5,.35);
}
@media (max-width:799px){
  /* céu livre em cima, casal e igreja embaixo: o texto vai para o TOPO */
  #fim{ align-items:center; justify-content:flex-start; text-align:center; padding:9svh 6vw 0 }
  #fim .veu-fim{
    background:linear-gradient(to bottom,
      rgba(18,7,9,.9) 0%, rgba(18,7,9,.55) 30%, rgba(18,7,9,0) 56%);
  }
  #fim .fim-texto{
    max-width:88vw; margin-left:0; margin-top:0;
    padding:18px 20px 14px;
    text-shadow:0 1px 16px rgba(18,7,9,.85);
  }
  #fim .selo{ margin-bottom:14px }
  /* rodapé compacto: "feito com amor" logo abaixo da data, mais legível */
  #fim .fio{ height:20px; margin:12px auto }
  #fim .quando{ margin-top:8px }
  #fim .credito{ color:rgba(244,235,209,.72) }
  #fim .quadro .cena{ object-position:center }
}
#fim .selo{ width:60px; opacity:.9; margin:0 auto 12px }
#fim .ate{
  font-family:var(--f-display); font-size:clamp(34px,5.4vw,62px); line-height:1.15;
}
#fim .ate em{ font-style:italic; color:var(--ouro-claro) }
#fim .quando{
  font-family:var(--f-mao); color:var(--ouro-claro);
  font-size:clamp(21px,2.6vw,27px); margin-top:12px;
}
#fim .fio{
  width:1px; height:22px; margin:12px auto;
  background:linear-gradient(to bottom, var(--ouro), transparent);
}
#fim .credito{ font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,235,209,.55) }
/* mobile: rodapé compacto — "feito com amor" logo abaixo da data.
   (vem DEPOIS da regra base do fio para vencer a ordem da cascata) */
@media (max-width:799px){
  #fim .fio{ height:16px; margin:10px auto }
  #fim .credito{ color:rgba(244,235,209,.72) }
}

/* ============ CURSOR (só desktop fino) ============ */
#cursor-fx{
  position:fixed; top:0; left:0; z-index:90; pointer-events:none;
  width:34px; height:34px; margin-left:-17px; margin-top:-17px;
  border-radius:50%; display:none;
  background:radial-gradient(circle, rgba(232,192,112,.35) 0%, rgba(232,192,112,0) 65%);
}
@media (hover:hover) and (pointer:fine){ #cursor-fx{ display:block } }

/* ============ STILL (captura headless) ============ */
html.still #preload{ display:none }
html.still body{ overflow:auto }
html.still .estrela .brilho{ animation:none }
html.still #cursor-fx{ display:none }
html.still #ato .rolar-dica{ display:none }
html.still #convite .selo-cera img{ animation:none }
html.still #btn-som{ display:none }
/* captura do convite: o nome aparece inteiro, sem reveal */
html.still #convite .nome-convidado{ clip-path:none }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  #gl{ display:none }
}

/* ============ ATO EM TELA PEQUENA (≤ 900px) ============
   Mesmo palco, mesmos beats. Âncoras simplificadas: só esquerda e
   direita alternando, em três faixas verticais bem separadas. */
@media (max-width:900px){
  #ato{ --ato-altura:1150svh }
  /* mobile: TODAS as legendas centralizadas na horizontal, fonte mais
     encorpada (peso 400) e sombra reforçada para leitura sobre o vídeo */
  #ato .legenda{
    max-width:86vw; font-size:clamp(1.15rem,5vw,1.6rem);
    font-weight:400; line-height:1.36;
    text-shadow:0 1px 3px rgba(10,4,5,.85), 0 2px 22px rgba(10,4,5,.7);
  }
  #ato .legenda em{ font-weight:400 }
  #ato .legenda.grande{ max-width:88vw; font-size:clamp(1.6rem,7.5vw,2.2rem) }
  #ato .legenda.estreita{ max-width:80vw }
  /* qualquer âncora (esq/dir/centro/emenda) vira centro na base no mobile */
  #ato .legenda{
    left:0 !important; right:0 !important; margin-left:auto; margin-right:auto;
    text-align:center !important;
  }
  #ato .a-alto-esq,   #ato .a-alto-centro,   #ato .a-alto-dir{ top:11svh; bottom:auto }
  #ato .a-centro-esq, #ato .a-centro-dir,    #ato .a-centro{ top:auto; bottom:13svh }
  #ato .a-baixo-esq,  #ato .a-baixo-centro,  #ato .a-baixo-dir,
  #ato .a-emenda-a,   #ato .a-emenda-b{ bottom:12svh; top:auto }
  #ato .legenda.com-luz::before{ top:-150px; bottom:-150px; left:-220px; right:-220px }
  #convite .micro{ font-size:12.5px; letter-spacing:.32em; padding-left:.32em }
  #convite .nome-convidado{ font-size:calc(66px * var(--s,1)) }
}

/* ============ MOBILE ≤ 799px ============ */
@media (max-width:799px){
  /* padrinhos no mobile: a constelação espalhada não cabe em tela estreita.
     Vira grade de 2 colunas em fluxo, com o título no topo. As estrelas
     largam a posição absoluta (o left/top inline do JS fica inerte). */
  #padrinhos{ padding:12svh 5vw 9svh }
  #padrinhos .ceu-padrinhos{
    position:static; height:auto;
    display:grid; grid-template-columns:1fr 1fr;
    gap:56px 6px; margin-top:5svh;
  }
  #padrinhos .centro-ceu{
    position:static; transform:none; width:auto;
    grid-column:1 / -1; text-align:center; margin-bottom:2svh;
  }
  #padrinhos .estrela{
    position:relative; left:auto !important; top:auto !important;
    transform:none; margin:0 auto;
  }
  #padrinhos .estrela .nome-estrela{
    white-space:normal; width:11ch; line-height:1.3;   /* no máx. 2 linhas */
  }
  /* card padrinho no celular: as setas saem das laterais (ficavam sobre o
     texto) e descem para BAIXO do card, lado a lado no centro */
  #card-padrinho .seta{ top:auto; transform:none; bottom:14px }
  #card-padrinho .seta.ant{ left:calc(50% - 58px) }
  #card-padrinho .seta.prox{ right:calc(50% - 58px) }
  /* carta mais curta para as setas respirarem embaixo; empurrada um pouco
     para cima do centro exato */
  #card-padrinho{ align-items:flex-start }
  #card-padrinho .palco{ margin-top:5svh }
  #card-padrinho .carta{ padding:20px 22px 20px; max-height:76svh }
  /* no celular a barra nativa some — quem mostra a posição é o trilho dourado */
  #card-padrinho .carta{ scrollbar-width:none }
  #card-padrinho .carta::-webkit-scrollbar{ display:none }
  #card-padrinho.rolavel .trilho-pad{ display:block }
  /* fundo sólido no mobile: o vídeo tem #120709 queimado — sólido igual
     elimina a "marcação" do retângulo (não dava para casar com o gradiente) */
  #contagem{ background:var(--noite) }
  #contagem .palco-conta{ min-height:78svh }
  /* casal grande: cobre a largura toda mostrando a BASE do vídeo (os personagens),
     cortando o topo vazio; assenta logo acima do vidro do relógio */
  #contagem .casal-acena{
    width:100vw; max-width:none; height:66svh; aspect-ratio:auto;
    bottom:19svh; left:50%; transform:translateX(-50%);
  }
  #contagem .casal-acena video,
  #contagem .casal-acena .acena-fallback{ object-fit:cover; object-position:center bottom }
  #contagem .casal-acena::after{ display:none }
  #contagem .vidro-conta{ bottom:7svh; width:94vw; padding:14px 10px 10px }
  #contagem .relogio{ gap:12px }
  #cerimonia, #presentes{ padding-left:5vw; padding-right:5vw }
  .presentes-grade{ grid-template-columns:1fr 1fr; gap:14px }
  .caixa-presente{ padding:48px 12px 20px }
  .caixa-presente h4{ font-size:19px }
  .caixa-presente .desc-pres{ font-size:16.5px }
  /* etiqueta Camicado empilhada: furo no topo centro, picote horizontal */
  .cartao-camicado{
    flex-direction:column; text-align:center; gap:16px;
    padding:58px 22px 24px;
  }
  .cartao-camicado::before{
    left:18px; right:18px; top:46px; bottom:auto;
    border-left:0; border-top:1px dashed rgba(201,151,63,.42);
  }
  .cartao-camicado .cam-furo{
    left:50%; top:15px; transform:translateX(-50%);
    width:22px; height:22px;
  }
  .cartao-camicado .cam-laco{ display:none }   /* o furo ocupa o topo no celular */
  .cartao-camicado .cam-sub{ max-width:none }
  .cartao-camicado .cam-btn{ width:100%; justify-content:center }
}
@media (max-width:460px){
  .presentes-grade{ grid-template-columns:1fr }
  .modal .caixa{ padding:30px 18px 22px }
  .modal .pix-caixa{ padding:16px 12px }
  .pix-confere, .pix-golpe{ padding:13px 13px }
  .pix-confere dt{ width:48px }
}

/* toque: campos com 16px (iOS não dá zoom no foco) e alvos >= 44px */
@media (pointer:coarse){
  .modal .campo{ font-size:16px }
  .modal .btn{ min-height:46px }
  .modal .fecha{ width:44px; height:44px }
}