/* ============================================================
   Beatriz · 15 Anos — convite em telas
   Cenário: arte do arco prateado · azul royal, pérola e prata
   ============================================================ */

:root{
  --blue-950:#020819;
  --blue-900:#050f33;
  --blue-800:#0a1a4f;
  --blue-700:#12266e;
  --blue-600:#1b3a8f;
  --blue-500:#2b55bd;

  --pearl-100:#fdfbf7;
  --pearl-200:#f4efe6;
  --silver-200:#e8f0ff;
  --silver-300:#c2d2ee;
  --silver-500:#8ea5c9;

  --ink:#f2f6ff;
  --ink-soft:rgba(242,246,255,.76);

  --serif:"Cormorant Garamond",Georgia,serif;
  --title:"Cinzel",Georgia,serif;
  --script:"Great Vibes",cursive;

  --grad-silver:linear-gradient(160deg,#ffffff 0%,#fdfbf7 12%,#dfe9ff 26%,#a8bcdd 42%,
    #6f86ae 52%,#cfdcf5 64%,#fdfbf7 78%,#ffffff 88%,#b9c9e6 100%);
  --grad-pearl:linear-gradient(150deg,#ffffff,#f4efe6 30%,#dbe6fb 55%,#f7f2e9 78%,#ffffff);

  --ratio:0.6975;                 /* proporção da arte do arco */
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--blue-950);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.5;
  overflow:hidden;
  height:100dvh;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
use,symbol{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   1 · CENÁRIO
   ============================================================ */
.stage-art{position:fixed;inset:0;overflow:hidden;z-index:0}

/* o vídeo é o fundo em movimento — o arco é um PNG recortado por cima dele,
   então o sonho aparece também através do vão */
/* sem animação de zoom aqui: escalar um vídeo desfocado por baixo de um
   backdrop-filter faz a composição piscar. O movimento já vem do próprio vídeo. */
.art-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(3.5px) brightness(.56) saturate(1.3);
  transform:scale(1.08) translateZ(0);
  backface-visibility:hidden;
  pointer-events:none}

/* tinge o vídeo de azul royal, escurece as bordas e devolve o brilho de cristais */
.art-wash{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(68% 56% at 50% 44%,rgba(27,58,143,.24),rgba(2,8,25,.84) 86%),
    linear-gradient(180deg,rgba(10,26,79,.52),rgba(2,8,25,.48))}
.art-wash::after{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 9% 14%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 21% 38%,#dbe6fb,transparent),
    radial-gradient(2px 2px at 14% 62%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 30% 8%,#cfe0ff,transparent),
    radial-gradient(1.5px 1.5px at 6% 84%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 88% 12%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 78% 34%,#dbe6fb,transparent),
    radial-gradient(2px 2px at 92% 58%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 70% 78%,#cfe0ff,transparent),
    radial-gradient(1.6px 1.6px at 96% 86%,#fff,transparent);
  transform:translateZ(0);
  animation:twinkle 5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.4}50%{opacity:1}}

/* o arco é PNG recortado: cabe sempre inteiro na tela, e o vídeo preenche o resto.
   Os 92% dão respiro para os vasos não encostarem na borda e o halo poder abrir. */
.art,.art-anchor{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-53%);
  width:min(92vw,calc(92dvh * var(--ratio)));
  height:min(92dvh,calc(92vw / var(--ratio)));
}
.art-img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 22px 50px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(150,190,255,.26))}

/* halo: uma cópia borrada do próprio arco, para ele derreter no fundo
   em vez de terminar num recorte seco */
.art::before{
  content:"";position:absolute;inset:-8%;z-index:0;pointer-events:none;
  background:url("assets/arco.png") center/contain no-repeat;
  filter:blur(30px) saturate(1.15) brightness(1.05);
  opacity:.55;transform:translateZ(0);
  /* o halo se dissolve nas bordas, sem terminar em retângulo */
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 45%,rgba(0,0,0,.5) 72%,transparent 96%);
  mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 45%,rgba(0,0,0,.5) 72%,transparent 96%);
}
.art::after{
  content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:radial-gradient(52% 46% at 50% 48%,rgba(120,165,255,.16),transparent 72%);
}

/* o vão interno do arco, onde tudo acontece */
.art-anchor{z-index:2;pointer-events:none}
.slot{
  position:absolute;left:20.5%;right:20.5%;top:27%;bottom:19%;
  display:grid;place-items:center;
  pointer-events:auto;
  container-type:inline-size;
}
/* toda a tipografia das telas escala com a largura do vão do arco */
.slot > *{font-size:min(3.9cqw,16px)}

/* ============================================================
   2 · PORTAL (envelope)
   ============================================================ */
/* a capa inteira é clicável, não só o envelope */
#portal{position:absolute;inset:-14% -12%;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6%;cursor:pointer;
  transition:opacity .9s ease,visibility .9s}
#portal.gone{opacity:0;visibility:hidden;pointer-events:none}

.p-call{font-family:var(--title);font-size:1.05em;letter-spacing:.3em;
  text-transform:uppercase;color:var(--pearl-100);padding-left:.3em;
  text-shadow:0 0 18px rgba(140,180,255,.9);
  animation:pulseText 2.6s ease-in-out infinite}
@keyframes pulseText{0%,100%{opacity:.6}50%{opacity:1}}
.p-sound{font-family:var(--title);font-size:.72em;letter-spacing:.28em;
  text-transform:uppercase;color:var(--silver-300);padding-left:.28em}

.envelope{position:relative;width:62%;aspect-ratio:3/2;perspective:900px;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
  animation:envIn 1.1s cubic-bezier(.2,.8,.3,1) both}
@keyframes envIn{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
.envelope:hover{transform:translateY(-6px)}
.envelope > *{position:absolute;inset:0;border-radius:5px}

.env-back{background:linear-gradient(160deg,var(--blue-700),var(--blue-800) 55%,var(--blue-900));
  box-shadow:0 26px 60px rgba(0,0,0,.65)}
.env-body{
  background:linear-gradient(45deg,rgba(255,255,255,.06),transparent 55%),
             linear-gradient(200deg,var(--blue-600),var(--blue-800) 60%,var(--blue-900));
  clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);z-index:3}
.env-body::after{content:"";position:absolute;inset:0;clip-path:inherit;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 48%,transparent 58%);
  animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%,70%,100%{transform:translateX(-60%)}35%{transform:translateX(60%)}}

.env-flap{height:56%;
  background:linear-gradient(180deg,var(--blue-600),var(--blue-700) 70%,var(--blue-800));
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;transform:rotateX(0deg);z-index:4;
  transition:transform .85s cubic-bezier(.6,-.25,.35,1.2);
  box-shadow:0 4px 14px rgba(0,0,0,.4)}
.env-flap::after{content:"";position:absolute;inset:0;clip-path:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 60%)}

.env-seal{inset:auto;top:46%;left:50%;width:3.4em;height:3.4em;margin:-1.7em 0 0 -1.7em;
  border-radius:50%;z-index:5;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,#fff,#dfe9ff 32%,#8ea5c9 62%,#5d719a 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.65);
  transition:transform .5s ease,opacity .4s ease}
.env-seal svg{width:1.5em;height:1.5em;color:var(--blue-800);stroke-width:1.4}

/* fumaça */
.env-smoke{inset:auto 0 30%;height:0;z-index:6;pointer-events:none;border-radius:0}
.env-smoke i{position:absolute;bottom:0;left:50%;width:9em;height:9em;margin-left:-4.5em;
  border-radius:50%;opacity:0;filter:blur(14px);
  background:radial-gradient(circle,rgba(200,225,255,.6),rgba(150,190,255,.16) 55%,transparent 72%)}
#portal.abrindo .env-smoke i{animation:smoke 2.4s ease-out forwards}
.env-smoke i:nth-child(1){animation-delay:.4s}
.env-smoke i:nth-child(2){animation-delay:.56s;margin-left:-8em}
.env-smoke i:nth-child(3){animation-delay:.48s;margin-left:-1em}
.env-smoke i:nth-child(4){animation-delay:.7s;margin-left:-6em}
.env-smoke i:nth-child(5){animation-delay:.64s;margin-left:-3.4em}
@keyframes smoke{0%{opacity:0;transform:translateY(14px) scale(.35)}
  22%{opacity:.85}100%{opacity:0;transform:translateY(-16em) scale(2)}}

/* estado abrindo */
#portal.abrindo .envelope{pointer-events:none}
#portal.abrindo .env-flap{transform:rotateX(178deg);z-index:1;transition-delay:.1s}
#portal.abrindo .env-seal{transform:scale(.35) translateY(-3em);opacity:0}
#portal.abrindo .p-call,
#portal.abrindo .p-sound{opacity:0;transition:opacity .35s ease}
/* o envelope só se dissolve DEPOIS que a folha saiu inteira dele —
   se sumir antes, o convite parece surgir do nada */
#portal.abrindo .envelope{opacity:0;transition:opacity .9s ease 2.3s}

/* ---------- o convite saindo do envelope ----------
   z-index 1 deixa ele atrás da frente do envelope enquanto sobe:
   é isso que dá a sensação de estar sendo sacado de dentro.       */
/* o papel: uma folha dobrada ao meio.
   .c-base é a metade de baixo (fixa) e .c-aba é a metade de cima,
   virada 180° sobre a base — como um convite dobrado dentro do envelope. */
.p-carta{
  position:absolute;left:50%;top:50%;z-index:1;
  height:64%;aspect-ratio:842/1264;
  transform-style:preserve-3d;
  opacity:0;pointer-events:none;
  transform:translate(-50%,-58%) scale(.3);
}
.c-base,.c-aba{position:absolute;left:0;width:100%;height:50%}
.c-base{top:50%;
  background:url("assets/convite.jpg") center bottom/100% 200% no-repeat;
  box-shadow:0 20px 44px rgba(0,0,0,.65)}
/* sombra de estar dentro do envelope: escurece o pé da folha
   e se dissolve quando ela termina de sair */
.c-base::after,.c-verso::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 22%,rgba(6,14,38,.35) 62%,rgba(4,10,28,.7) 100%);
  transition:opacity 1s ease}
#portal.pronto .c-base::after,
#portal.pronto .c-verso::before{opacity:0}

.c-aba{top:0;transform-origin:50% 100%;transform-style:preserve-3d;
  transform:rotateX(180deg)}
.c-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.c-frente{background:url("assets/convite.jpg") center top/100% 200% no-repeat}
/* o verso do papel, que é o que se vê enquanto está dobrado.
   Pérola, não azul: precisa se distinguir do envelope, senão vira um borrão só. */
.c-verso{transform:rotateX(180deg);
  background:linear-gradient(160deg,#fdfbf7,#e9e2d6 45%,#f6f1e8 70%,#dcd5c8);
  box-shadow:inset 0 0 30px rgba(120,140,180,.28),0 -10px 26px rgba(0,0,0,.45)}
.c-verso::after{content:"";position:absolute;inset:7%;
  border:1px solid rgba(120,145,190,.3)}

/* a marca do vinco, no meio da folha */
.c-vinco{position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  opacity:0;transition:opacity .5s ease}

#portal.abrindo .p-carta{animation:sacar 3.2s cubic-bezier(.25,.7,.25,1) .95s forwards}
#portal.abrindo .c-aba  {animation:desdobrar 1.15s cubic-bezier(.35,.05,.2,1) 2.35s forwards}
#portal.pronto  .c-vinco{opacity:.55}

/* sobe dobrada, para no alto, desce já aberta e no tamanho de leitura.
   -58%/-83% compensam a folha estar dobrada (só a metade de baixo aparece). */
@keyframes sacar{
  0%   {opacity:0; transform:translate(-50%,-58%)  scale(.3)}
  10%  {opacity:1}
  38%  {opacity:1; transform:translate(-50%,-99%)  scale(.42)}
  48%  {opacity:1; transform:translate(-50%,-105%) scale(.45); z-index:9}
  72%  {            transform:translate(-50%,-78%) scale(.7)}
  100% {opacity:1; transform:translate(-50%,-50%)  scale(1);   z-index:9}
}
@keyframes desdobrar{
  0%   {transform:rotateX(180deg)}
  70%  {transform:rotateX(-8deg)}     /* passa um pouco do ponto, como papel de verdade */
  100% {transform:rotateX(0deg)}
}
.p-entrar{
  position:absolute;left:0;right:0;bottom:-4%;z-index:10;text-align:center;
  font-family:var(--title);font-size:.7em;letter-spacing:.3em;text-transform:uppercase;
  color:var(--pearl-100);text-shadow:0 0 16px rgba(140,180,255,.9);padding-left:.3em;
  opacity:0;transition:opacity .8s ease;pointer-events:none}
#portal.pronto .p-entrar{opacity:1;animation:pulseText 2.6s ease-in-out infinite}

/* ============================================================
   3 · TELAS
   ============================================================ */
/* o contêiner das telas não pode interceptar clique da capa:
   só a tela ativa recebe eventos */
#telas{position:absolute;inset:0;pointer-events:none}
.screen{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(1.6em) scale(.985);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1),visibility .55s}
.screen.ativa{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* painel de vidro sobre o cenário em movimento
   (94% da largura do vão, para nunca encostar nas colunas do arco) */
.sc-body{width:94%;max-width:94%;max-height:100%;overflow-y:auto;overflow-x:hidden;
  text-align:center;padding:1.4em 1em;border-radius:18px;
  contain:paint;
  background:linear-gradient(160deg,rgba(30,62,140,.4),rgba(5,15,51,.52));
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid rgba(226,238,255,.26);
  box-shadow:0 20px 54px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.28);
  scrollbar-width:thin;scrollbar-color:rgba(194,210,238,.5) transparent}
.sc-body::-webkit-scrollbar{width:3px}
.sc-body::-webkit-scrollbar-thumb{background:rgba(194,210,238,.5);border-radius:2px}

.sc-ico{display:grid;place-items:center;width:3em;height:3em;margin:0 auto .9em;
  border-radius:50%;border:1px solid rgba(194,210,238,.55);
  background:rgba(43,85,189,.28);
  box-shadow:0 0 20px rgba(90,140,230,.35),inset 0 1px 0 rgba(255,255,255,.28)}
.sc-ico svg{width:1.4em;height:1.4em;color:var(--silver-200)}

.sc-title{font-family:var(--title);font-size:.94em;letter-spacing:.3em;
  text-transform:uppercase;color:var(--pearl-100);padding-left:.3em;
  text-shadow:0 0 18px rgba(140,180,255,.6);margin-bottom:1.1em}
.sc-lead{font-size:1.06em;font-weight:300;color:var(--ink-soft);margin-top:1em;line-height:1.5}
.sc-lead strong{color:var(--pearl-100);font-weight:400}

.divider{display:flex;align-items:center;justify-content:center;gap:.7em;
  margin:1.1em auto;width:80%}
.divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--silver-300),transparent)}
.divider i{color:var(--silver-200);font-style:normal;font-size:.62em;letter-spacing:.2em;
  text-shadow:0 0 12px rgba(200,220,255,.9)}

/* --- tela 1 --- */
/* a Great Vibes só tem um peso; o contorno engrossa o traço sem deformar a letra.
   paint-order mantém o gradiente por cima do contorno. */
.script-name{font-family:var(--script);font-size:4.5em;line-height:1.2;padding:.06em 0 .1em;
  background:var(--grad-silver);background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:.035em #eef4ff;paint-order:stroke fill;
  animation:shimmer 7s ease-in-out infinite;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(150,190,255,.45))}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.tagline{font-family:var(--title);font-size:.78em;letter-spacing:.08em;line-height:2;
  text-transform:uppercase;color:var(--pearl-200);margin-top:.4em}
.age{font-family:var(--title);font-weight:500;font-size:1.5em;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pearl-100);padding-left:.18em;
  text-shadow:0 0 22px rgba(140,180,255,.7)}
.datebar{display:flex;align-items:center;justify-content:center;gap:.8em;margin:1.2em auto 0}
.datebar span{font-family:var(--title);font-size:.6em;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);padding:.5em .7em;
  border-top:1px solid rgba(194,210,238,.5);border-bottom:1px solid rgba(194,210,238,.5)}
.datebar b{font-family:var(--title);font-weight:500;font-size:2.1em;line-height:1;
  color:var(--pearl-100);text-shadow:0 0 22px rgba(140,180,255,.6)}
.datebar b i{display:block;font-style:normal;font-size:.28em;letter-spacing:.24em;
  color:var(--silver-300);text-transform:uppercase}
.datebar b i:first-child{margin-bottom:.4em}
.datebar b i:last-child{margin-top:.4em}
.venue{font-family:var(--title);font-size:.66em;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pearl-200);margin-top:1.3em}

/* --- tela 2 --- */
.countdown{display:flex;justify-content:center;gap:.5em}
.cd{flex:1 1 0;max-width:5em;padding:.8em .2em;border-radius:3px;
  border:1px solid rgba(194,210,238,.36);
  background:linear-gradient(180deg,rgba(43,85,189,.3),rgba(2,8,25,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.cd b{display:block;font-family:var(--title);font-weight:500;font-size:1.9em;line-height:1.15;
  color:var(--pearl-100);font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(140,180,255,.6)}
.cd span{display:block;margin-top:.5em;font-family:var(--title);font-size:.5em;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.count-done{display:none;font-family:var(--script);font-size:2.2em;color:var(--pearl-100)}
#t-contagem.fim .countdown{display:none}
#t-contagem.fim .count-done{display:block}

/* --- tela 3 --- */
.big-name{font-family:var(--title);font-size:2em;line-height:1.25;color:var(--pearl-100);
  text-shadow:0 0 20px rgba(140,180,255,.5)}
.sub-name{font-family:var(--title);font-size:.9em;letter-spacing:.16em;
  text-transform:uppercase;color:var(--silver-300);margin-top:.3em}

/* --- tela 4 --- */
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.gift{padding:.9em .3em;border-radius:3px;border:1px solid rgba(194,210,238,.3);
  background:linear-gradient(180deg,rgba(43,85,189,.24),rgba(2,8,25,.42))}
.gift span{display:grid;place-items:center;width:2.4em;height:2.4em;margin:0 auto .5em;
  border-radius:50%;border:1px solid rgba(194,210,238,.5);background:rgba(43,85,189,.26)}
.gift svg{width:1.2em;height:1.2em;color:var(--silver-200)}
.gift b{display:block;font-family:var(--title);font-weight:500;font-size:.6em;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pearl-100)}
.gift i{display:block;margin-top:.3em;font-style:normal;font-size:.78em;color:var(--ink-soft)}

.pix{margin-top:1em;padding:1em .8em;border-radius:3px;
  border:1px dashed rgba(194,210,238,.5);background:rgba(43,85,189,.16)}
.pix-ico{display:grid;place-items:center;width:2.4em;height:2.4em;margin:0 auto .6em;
  border-radius:50%;border:1px solid rgba(194,210,238,.55);background:rgba(43,85,189,.28)}
.pix-ico svg{width:1.2em;height:1.2em;color:var(--silver-200)}
.pix-title{font-family:var(--title);font-size:.7em;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pearl-100)}
.pix-copy{margin-top:.6em;font-size:.95em;color:var(--pearl-100);
  border-bottom:1px dashed rgba(194,210,238,.6);padding:0 2px 2px}
.pix-copy:hover{color:#fff}
.pix-hint{margin-top:.5em;font-family:var(--title);font-size:.5em;letter-spacing:.2em;
  text-transform:uppercase;color:var(--silver-500)}

/* --- tela 5 --- */
.rules{display:grid;gap:.55em}
/* ícone ocupa as duas linhas; título e detalhe ficam na coluna da direita */
.rule-card{padding:.8em .9em;border-radius:8px;border:1px solid rgba(194,210,238,.32);
  background:linear-gradient(180deg,rgba(43,85,189,.22),rgba(2,8,25,.45));
  display:grid;grid-template-columns:2.4em 1fr;grid-template-rows:auto auto;
  align-items:center;column-gap:.8em;row-gap:.15em;text-align:left}
.rule-card span{grid-column:1;grid-row:1/3;
  display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;
  border:1px solid rgba(194,210,238,.55);background:rgba(43,85,189,.28)}
.rule-card svg{width:1.2em;height:1.2em;color:var(--silver-200)}
.rule-card b{grid-column:2;grid-row:1;align-self:end;
  font-family:var(--title);font-weight:500;font-size:.62em;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pearl-100);line-height:1.45}
.rule-card i{grid-column:2;grid-row:2;align-self:start;
  font-style:normal;font-size:.88em;color:var(--ink-soft);line-height:1.35}
.rule-card.destaque{border-color:rgba(255,255,255,.75);
  background:linear-gradient(180deg,rgba(43,85,189,.42),rgba(5,15,51,.6));
  box-shadow:0 0 26px rgba(90,140,230,.3)}

/* --- tela 6 --- */
.footer-sign{font-family:var(--script);font-size:2.8em;line-height:1.25;padding-top:.06em;
  background:var(--grad-silver);background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:.03em #eef4ff;paint-order:stroke fill;
  animation:shimmer 7s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(150,190,255,.4))}
.footer-note{font-family:var(--title);font-size:.58em;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.3em}

/* --- botões --- */
.btn-silver,.btn-ghost{display:inline-block;font-family:var(--title);
  letter-spacing:.2em;text-transform:uppercase;border-radius:999px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s}
.btn-silver{margin-top:1.2em;font-size:.68em;padding:1.1em 2.4em;color:var(--blue-900);
  background:var(--grad-silver);background-size:200% 200%;
  box-shadow:0 10px 28px rgba(120,160,230,.36),inset 0 1px 0 rgba(255,255,255,.8);
  animation:shimmer 7s ease-in-out infinite}
.btn-silver:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(160,200,255,.5)}
.btn-ghost{display:block;width:max-content;margin:.9em auto 0;font-size:.6em;
  padding:.9em 1.9em;color:var(--pearl-100);border:1px solid rgba(194,210,238,.55)}
.btn-ghost:hover{background:rgba(194,210,238,.14);transform:translateY(-2px)}

/* ============================================================
   4 · NAVEGAÇÃO
   ============================================================ */
/* na capa, nada de navegação aparece */
[hidden]{display:none!important}

.dock{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:40;
  display:flex;gap:clamp(4px,1.6vw,14px);padding:8px clamp(8px,2vw,16px);
  border-radius:999px;
  background:rgba(3,10,32,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(194,210,238,.34);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  animation:dockIn .8s cubic-bezier(.2,.8,.3,1) both .3s}
@keyframes dockIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
.dock button{display:grid;justify-items:center;gap:3px;padding:2px}
.dock span{display:grid;place-items:center;
  width:clamp(34px,9vw,44px);height:clamp(34px,9vw,44px);border-radius:50%;
  border:1px solid rgba(194,210,238,.4);background:rgba(43,85,189,.24);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s,background .3s,box-shadow .3s}
.dock svg{width:clamp(16px,4.4vw,20px);height:clamp(16px,4.4vw,20px);color:var(--silver-200)}
.dock i{font-family:var(--title);font-style:normal;font-size:clamp(6.5px,1.7vw,8.5px);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.dock button:hover span{transform:translateY(-3px);border-color:rgba(255,255,255,.8)}
.dock button.on span{background:linear-gradient(180deg,rgba(226,236,255,.95),rgba(160,185,225,.9));
  border-color:#fff;box-shadow:0 0 20px rgba(160,200,255,.7)}
.dock button.on svg{color:var(--blue-800)}
.dock button.on i{color:var(--pearl-100)}

.seta{position:fixed;top:50%;transform:translateY(-50%);z-index:40;
  width:clamp(38px,9vw,48px);height:clamp(38px,9vw,48px);border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(194,210,238,.34);background:rgba(3,10,32,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .25s ease,background .25s,opacity .3s}
.seta svg{width:20px;height:20px;color:var(--silver-200)}
.seta:hover{background:rgba(43,85,189,.5)}
.seta.prev{left:max(8px,2vw)}
.seta.prev svg{transform:rotate(180deg)}
.seta.next{right:max(8px,2vw)}
.seta[disabled]{opacity:.22;pointer-events:none}
@media (max-width:520px){.seta{display:none}}

.music-btn{position:fixed;right:14px;top:14px;z-index:45;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(194,210,238,.5);background:rgba(3,10,32,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.5);
  transition:transform .25s ease}
.music-btn:hover{transform:scale(1.07)}
/* quando o navegador barra o áudio, o botão pede um toque */
.music-btn.chamando{animation:chamando 1.6s ease-in-out infinite}
@keyframes chamando{
  0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 0 rgba(180,215,255,.55)}
  50%    {box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 12px rgba(180,215,255,0)}
}
.music-btn svg{width:18px;height:18px;fill:var(--silver-200);stroke:none;grid-area:1/1}
.music-btn .slash{stroke:var(--silver-200);stroke-width:2;fill:none}
.music-btn .ico-off{display:none}
.music-btn.muted .ico-on{display:none}
.music-btn.muted .ico-off{display:block}
.music-btn .eq{grid-area:1/1;display:none;gap:3px;align-items:flex-end;height:14px}
.music-btn:not(.muted) .eq{display:flex}
.music-btn:not(.muted) svg{display:none}
.eq i{width:3px;background:var(--silver-200);border-radius:2px;animation:eq .9s ease-in-out infinite}
.eq i:nth-child(1){height:60%;animation-delay:-.2s}
.eq i:nth-child(2){height:100%;animation-delay:-.5s}
.eq i:nth-child(3){height:45%}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

#sparkles{position:fixed;inset:0;z-index:50;pointer-events:none}

/* telas baixas: o dock encolhe */
@media (max-height:620px){
  .dock i{display:none}
  .dock span{width:34px;height:34px}
}

/* ============================================================
   5 · IMPRESSÃO / PDF
   A folha sai só com o convite, sem moldura, sem interface.
   ============================================================ */
#folha{display:none}
@page{size:A4 portrait;margin:0}
@media print{
  html,body{height:auto;overflow:visible;background:#fff!important}
  body > *:not(#folha){display:none!important}
  #folha{display:block;width:100%;height:100vh;object-fit:contain;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.acoes{display:flex;justify-content:center;gap:.6em;flex-wrap:wrap;margin-top:1.4em}
.acoes .btn-ghost{margin:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}