:root{--rose:#d59b90;--rose2:#c9867d;--deep:#8b5753;--paper:#fffaf6;--ink:#6e5654;--gold:#caa879;--blush:#f4dfd9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Montserrat,sans-serif;overflow-x:hidden}.screen{position:relative;width:100%;min-height:100svh;overflow:hidden}.envelope-screen{background:#d59b90;display:grid;place-items:center}.envelope-stage{position:relative;width:100%;height:100svh;background:#d59b90}.full-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.seal-hit{position:absolute;z-index:5;left:50%;top:50%;width:28vw;max-width:145px;aspect-ratio:1;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%);cursor:pointer;-webkit-tap-highlight-color:transparent}.seal-hit:after{content:"";position:absolute;inset:10%;border-radius:50%;box-shadow:0 0 0 0 rgba(255,239,192,.7);animation:pulse 1.7s infinite}@keyframes pulse{70%{box-shadow:0 0 0 30px rgba(255,239,192,0)}100%{box-shadow:0 0 0 0 rgba(255,239,192,0)}}.tap-hint{position:absolute;z-index:6;left:50%;bottom:7%;transform:translateX(-50%);color:#fffaf6;font-size:11px;letter-spacing:.24em;white-space:nowrap;text-shadow:0 2px 8px rgba(93,45,42,.35);animation:fadeHint 1.8s ease-in-out infinite}@keyframes fadeHint{50%{opacity:.45}}.hidden-stage{display:none}.debutante-screen{background:linear-gradient(#f7ebe7,#fffaf6);display:none;align-items:end;justify-content:center}.debutante-screen.active{display:flex}.debutante-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.95),transparent 34%),linear-gradient(180deg,#f7e7e3,#f1d6d0 50%,#fffaf6)}.debutante-video{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,720px);height:100%;object-fit:contain;object-position:center bottom;mix-blend-mode:multiply}.hero-copy{position:relative;z-index:2;width:min(92%,650px);padding:5vh 20px 10vh;text-align:center;background:linear-gradient(180deg,transparent,rgba(255,250,246,.78) 33%,rgba(255,250,246,.97));border-radius:40px 40px 0 0}.script{font-family:"Great Vibes",cursive;font-size:clamp(4.6rem,20vw,8rem);line-height:.9;color:var(--deep)}.script.small{font-size:clamp(2.8rem,11vw,5rem);margin-bottom:22px}.xv{font:600 clamp(3.8rem,14vw,7rem)/.9 "Cormorant Garamond",serif;letter-spacing:.12em;color:var(--gold)}.years{font-size:.75rem;letter-spacing:.42em;font-weight:600;margin:10px 0 18px}.hero-copy p{font:1.25rem/1.5 "Cormorant Garamond",serif}.scroll-cue{position:absolute;z-index:4;bottom:15px;font-size:9px;letter-spacing:.16em;color:#8a6561}.section{min-height:100svh;padding:90px 20px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.paper-section{background:radial-gradient(circle at 10% 10%,rgba(213,155,144,.12),transparent 30%),var(--paper)}.blush-section{background:linear-gradient(145deg,#f3dbd5,#f8ebe7)}.date-section,.rose-section,.final-section{background:radial-gradient(circle at 25% 18%,rgba(255,255,255,.13),transparent 28%),linear-gradient(155deg,#a96f68,#8b5753);color:#fff}.content{width:min(100%,850px);text-align:center;position:relative;z-index:2}.content.narrow{width:min(100%,620px)}.body-copy{font:1.35rem/1.65 "Cormorant Garamond",serif}.ornament{font-size:1.8rem;color:var(--gold);margin:30px}.invited{font:600 1.55rem "Cormorant Garamond",serif;color:var(--deep)}.kicker{font-size:.7rem;letter-spacing:.28em}.date-section h2{font:500 clamp(2.8rem,11vw,6rem) "Cormorant Garamond",serif;margin:18px 0 8px}.date-section>div>p{letter-spacing:.24em;font-size:.75rem}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:38px}.countdown div{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);border-radius:17px;padding:16px 5px}.countdown b{display:block;font:500 clamp(2rem,8vw,3.7rem) "Cormorant Garamond",serif;color:#ffe6bf}.countdown span{font-size:.56rem;letter-spacing:.14em}.scratch-card{position:relative;width:min(92vw,430px);aspect-ratio:1.62;margin:30px auto 12px;border-radius:24px;overflow:hidden;box-shadow:0 20px 55px rgba(106,70,65,.18);border:1px solid rgba(202,168,121,.4)}.scratch-under{position:absolute;inset:0;background:#fffaf6;display:flex;flex-direction:column;align-items:center;justify-content:center}.scratch-under .day{font:500 5.4rem/.8 "Cormorant Garamond",serif;color:var(--deep)}.scratch-under .month{font-size:.72rem;letter-spacing:.35em;margin:16px 0 7px}.scratch-under .year{font:500 1.8rem "Cormorant Garamond",serif;color:var(--gold)}#scratchCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.tiny{font-size:.68rem;letter-spacing:.09em;opacity:.7}.timeline{margin-top:35px;text-align:left}.timeline div{display:grid;grid-template-columns:90px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid rgba(139,87,83,.12)}.timeline time{font:600 1.2rem "Cormorant Garamond",serif;color:var(--deep)}.timeline p{margin:0;font:1.25rem "Cormorant Garamond",serif}.section h3{font:600 2.6rem "Cormorant Garamond",serif;color:var(--deep);margin:8px 0}.pill{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border:0;border-radius:999px;background:var(--deep);color:#fff;font-size:.7rem;letter-spacing:.09em;font-weight:600;margin:10px 6px;cursor:pointer;text-decoration:none}.pill.secondary{background:transparent;color:var(--deep);border:1px solid rgba(139,87,83,.35)}.light-pill{background:#fff;color:var(--deep)}.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:min(75vw,300px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 8px 30px;scrollbar-width:none}.gallery::-webkit-scrollbar{display:none}.placeholder{height:430px;border-radius:24px;background:linear-gradient(145deg,#e7c6bf,#c98b81);display:grid;place-items:center;color:white;font-size:.72rem;letter-spacing:.2em;scroll-snap-align:center}.light{color:#fff}.light-script{color:#ffe9df}.final-date{letter-spacing:.3em}.back-link{display:inline-block;margin-top:30px;color:#fff;font-size:.7rem;letter-spacing:.14em}.modal{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:20px;background:rgba(73,42,39,.66);backdrop-filter:blur(6px)}.modal.active{display:grid}.modal-box{width:min(92vw,430px);background:#fffaf6;border-radius:28px;padding:34px 24px;text-align:center;position:relative}.close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:2rem;color:var(--deep);cursor:pointer}.qr{width:160px;height:160px;margin:16px auto;display:grid;place-items:center;border:2px dashed var(--gold);background:#fff}.reveal{opacity:0;transform:translateY(28px);transition:.8s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:600px){.section{padding:72px 18px}.debutante-video{height:78%;top:3%;bottom:auto}.hero-copy{padding-bottom:8vh}.countdown{gap:6px}.countdown div{padding:12px 3px}.timeline div{grid-template-columns:76px 1fr}}


/* =========================================================
   AJUSTE DA ABERTURA - PDF ESTÁTICO -> VÍDEO AO TOCAR NO SELO
   As demais seções aprovadas permanecem inalteradas.
========================================================= */

.envelope-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: #d59b90;
}

.opening-cover,
.opening-animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opening-cover {
  z-index: 2;
  opacity: 1;
}

.opening-animation {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: #d59b90;
}

.envelope-stage.playing .opening-cover {
  opacity: 0;
}

.envelope-stage.playing .opening-animation {
  z-index: 3;
  opacity: 1;
}

.seal-hit {
  position: absolute;
  left: 50%;
  top: 51%;
  width: clamp(92px, 23vw, 145px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
}

.envelope-stage.playing .seal-hit {
  display: none;
}


/* =========================================================
   CONFETES ROSE GOLD - DATA + CONTADOR
   Efeito visual isolado. Nenhuma estrutura aprovada foi alterada.
========================================================= */

.date-section .rose-gold-confetti{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.date-section .rose-gold-confetti .confetti-piece{
  position:absolute;
  top:-14%;
  left:var(--left);
  width:var(--w);
  height:var(--h);
  opacity:var(--opacity);
  border-radius:var(--radius);
  background:linear-gradient(135deg,#ffd2c4 0%,#e8aa98 48%,#b96f64 100%);
  box-shadow:0 0 6px rgba(255,212,197,.13);
  transform:rotate(var(--rotate));
  animation:
    roseGoldFall var(--duration) linear var(--delay) infinite,
    roseGoldDrift var(--drift) ease-in-out var(--delay) infinite alternate;
}

.date-section .rose-gold-confetti .confetti-piece:nth-child(3n){
  background:linear-gradient(135deg,#f7c0b2,#c77f70);
}

.date-section .rose-gold-confetti .confetti-piece:nth-child(4n){
  background:linear-gradient(135deg,#f4d0c4,#d4907f);
}

.date-section .rose-gold-confetti .confetti-piece:nth-child(6n){
  width:7px;
  height:7px;
  border-radius:50%;
  background:#efb8a8;
  box-shadow:0 0 8px rgba(239,184,168,.28);
}

@keyframes roseGoldFall{
  0%{
    top:-14%;
    transform:translateY(0) rotate(var(--rotate));
  }
  100%{
    top:114%;
    transform:translateY(0) rotate(calc(var(--rotate) + 620deg));
  }
}

@keyframes roseGoldDrift{
  from{ margin-left:-15px; }
  to{ margin-left:15px; }
}

.date-section > .content{
  position:relative;
  z-index:2;
}

@media (prefers-reduced-motion:reduce){
  .date-section .rose-gold-confetti .confetti-piece{
    animation:none;
    opacity:.12;
  }
}




/* =========================================================
   PROGRAMAÇÃO — FLOR DESLIZANDO PELOS PONTOS
   Ajuste baseado na estrutura real já aprovada.
   Nenhuma outra seção foi modificada.
========================================================= */

.paper-section .timeline{
  position:relative;
  margin-top:34px;
  padding-left:44px;
}

/* Linha vertical delicada, como no vídeo de referência */
.paper-section .timeline::before{
  content:"";
  position:absolute;
  left:15px;
  top:24px;
  bottom:24px;
  width:1px;
  background:rgba(176,103,105,.38);
  z-index:1;
}

/* Cada horário mantém o layout já aprovado */
.paper-section .timeline > div:not(.timeline-flower){
  position:relative;
}

/* Ponto rosé de cada horário */
.paper-section .timeline > div:not(.timeline-flower)::before{
  content:"";
  position:absolute;
  left:-35px;
  top:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#b96f72;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px rgba(185,111,114,.08);
  z-index:3;
}

/* Flor móvel */
.paper-section .timeline-flower{
  position:absolute;
  left:15px;
  top:24px;
  width:30px;
  height:30px;
  z-index:6;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:top .10s linear, opacity .25s ease;
  opacity:0;
  filter:drop-shadow(0 2px 5px rgba(153,88,90,.16));
}

/* pétalas */
.paper-section .timeline-flower .flower-petal{
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:14px;
  margin-left:-4.5px;
  margin-top:-12px;
  border-radius:75% 75% 60% 60%;
  transform-origin:50% 12px;
  background:linear-gradient(180deg,#f7d2cf 0%,#dfa3a0 58%,#c77978 100%);
  border:1px solid rgba(170,96,97,.15);
  box-shadow:inset 0 0 3px rgba(255,255,255,.65);
}

.paper-section .timeline-flower .petal-1{transform:rotate(0deg)}
.paper-section .timeline-flower .petal-2{transform:rotate(72deg)}
.paper-section .timeline-flower .petal-3{transform:rotate(144deg)}
.paper-section .timeline-flower .petal-4{transform:rotate(216deg)}
.paper-section .timeline-flower .petal-5{transform:rotate(288deg)}

.paper-section .timeline-flower .flower-center{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#b96f72;
  box-shadow:0 0 0 2px rgba(246,210,205,.75);
}

.paper-section .timeline-flower .flower-leaf{
  display:none;
}

.paper-section .timeline-flower.visible{
  opacity:1;
}

/* A flor cobre visualmente o ponto quando passa por ele */
.paper-section .timeline-flower.visible .flower-center{
  animation:programFlowerPulse 2.8s ease-in-out infinite;
}

@keyframes programFlowerPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.08)}
}

@media(max-width:600px){
  .paper-section .timeline{
    padding-left:40px;
  }

  .paper-section .timeline::before{
    left:14px;
  }

  .paper-section .timeline > div:not(.timeline-flower)::before{
    left:-31px;
  }

  .paper-section .timeline-flower{
    left:14px;
    width:28px;
    height:28px;
  }
}

@media(prefers-reduced-motion:reduce){
  .paper-section .timeline-flower{
    transition:none;
  }

  .paper-section .timeline-flower.visible .flower-center{
    animation:none;
  }
}


/* =========================================================
   FAIXA DRESS CODE APÓS PROGRAMAÇÃO
   Inserção isolada; restante da base aprovado permanece intacto.
========================================================= */

.dresscode-band{
  position:relative;
  min-height:auto;
  padding:38px 18px 40px;
  overflow:hidden;
  background:
    linear-gradient(90deg,
      rgba(231,210,178,.22) 0%,
      rgba(215,166,173,.32) 50%,
      rgba(231,210,178,.22) 100%
    ),
    #f8efea;
  border-top:1px solid rgba(141,83,97,.10);
  border-bottom:1px solid rgba(141,83,97,.10);
}

.dresscode-band::before,
.dresscode-band::after{
  content:"";
  position:absolute;
  width:105px;
  height:105px;
  border:1px solid rgba(141,83,97,.09);
  border-radius:50%;
}

.dresscode-band::before{
  left:-52px;
  top:-50px;
}

.dresscode-band::after{
  right:-52px;
  bottom:-50px;
}

.dresscode-band-inner{
  position:relative;
  z-index:2;
  width:min(100%,700px);
  margin:0 auto;
  text-align:center;
}

.dresscode-kicker{
  font-family:"Montserrat",sans-serif;
  font-size:.68rem;
  line-height:1.4;
  letter-spacing:.30em;
  font-weight:600;
  color:#8d5361;
  margin-bottom:7px;
}

.dresscode-title{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2rem,7vw,3rem);
  line-height:1.05;
  color:#6a3946;
}

.dresscode-divider{
  width:48px;
  height:1px;
  margin:16px auto;
  background:#c9a45c;
}

.dresscode-text{
  margin:0 auto 9px;
  max-width:540px;
  font-family:"Cormorant Garamond",serif;
  font-size:1.12rem;
  line-height:1.45;
  color:#5f484e;
}

.dresscode-note{
  margin:0 auto;
  max-width:580px;
  font-size:.76rem;
  line-height:1.58;
  color:#755d63;
}

.dresscode-palette{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin-top:19px;
}

.dresscode-palette span{
  width:25px;
  height:25px;
  display:block;
  border-radius:50%;
  background:var(--dress);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 3px 8px rgba(73,54,59,.12);
}

@media(max-width:600px){
  .dresscode-band{
    padding:32px 15px 34px;
  }

  .dresscode-note{
    font-size:.73rem;
  }
}


/* =========================================================
   MOMENTOS REUTILIZÁVEL
   Para trocar as fotos, substitua apenas os arquivos em:
   assets/img/momentos/
========================================================= */

.moments-section{
  overflow:hidden;
}

.moments-gallery{
  width:100%;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:min(78vw,340px);
  gap:16px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  padding:22px max(10px,calc((100vw - 850px)/2)) 26px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.moments-gallery::-webkit-scrollbar{
  display:none;
}

.moment-card{
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:24px;
  scroll-snap-align:center;
  background:#ead2cc;
  box-shadow:0 14px 34px rgba(91,59,56,.14);
  border:1px solid rgba(255,255,255,.65);
}

.moment-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .6s ease;
}

.moment-card:active img{
  transform:scale(1.015);
}

.moments-hint{
  margin:0;
  font-size:.68rem;
  letter-spacing:.12em;
  color:#9b7773;
}

@media(min-width:760px){
  .moments-gallery{
    grid-auto-columns:min(42vw,330px);
  }
}


/* =========================================================
   QR CODE PIX REUTILIZÁVEL
========================================================= */
.pix-qr{
  display:block;
  width:min(64vw,260px);
  aspect-ratio:1/1;
  object-fit:contain;
  margin:20px auto;
  padding:10px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(76,51,48,.12);
}


/* =========================================================
   ARTE COMPLETA PIX NO MODAL
   Para trocar em outro convite, substitua apenas:
   assets/img/pix/pix-presente.webp
========================================================= */

.pix-art-modal{
  width:min(94vw,720px);
  max-height:92svh;
  padding:14px;
  background:#fffaf6;
  border-radius:24px;
  overflow:auto;
}

.pix-present-art{
  display:block;
  width:100%;
  height:auto;
  max-height:84svh;
  object-fit:contain;
  border-radius:16px;
}

.pix-art-modal .modal-close{
  position:sticky;
  top:0;
  margin-left:auto;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(106,57,70,.92);
  color:white;
  font-size:1.6rem;
  line-height:1;
  z-index:3;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
}

@media(max-width:600px){
  .pix-art-modal{
    width:95vw;
    padding:10px;
    border-radius:20px;
  }

  .pix-present-art{
    max-height:82svh;
  }
}
\n\n/* =========================================================\n   MÚSICA REUTILIZÁVEL DO CONVITE\n   Para trocar em outro convite, substitua apenas:\n   assets/audio/musica.mp3\n========================================================= */\n.music-toggle{\n  position:fixed;\n  right:16px;\n  bottom:18px;\n  width:48px;\n  height:48px;\n  border:1px solid rgba(255,255,255,.55);\n  border-radius:50%;\n  display:grid;\n  place-items:center;\n  background:rgba(106,57,70,.88);\n  color:#fff;\n  font-size:1.2rem;\n  z-index:90;\n  cursor:pointer;\n  box-shadow:0 8px 22px rgba(0,0,0,.18);\n  backdrop-filter:blur(8px);\n  opacity:0;\n  pointer-events:none;\n  transition:opacity .35s ease, transform .25s ease;\n}\n.music-toggle.visible{opacity:1;pointer-events:auto}\n.music-toggle.playing{transform:scale(1.03)}\n.music-toggle.playing::after{\n  content:\"\";position:absolute;inset:-5px;border:1px solid rgba(231,210,178,.62);border-radius:50%;\n  animation:musicPulse 1.8s ease-out infinite;\n}\n@keyframes musicPulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}\n

/* =========================================================
   CORREÇÃO TELA CHEIA DA ABERTURA
   O controle de música fica flutuante e não cria faixa no topo.
========================================================= */
#musicToggle,
.music-toggle,
.music-control,
.audio-toggle{
  position:fixed !important;
  top:14px !important;
  right:14px !important;
  left:auto !important;
  bottom:auto !important;
  z-index:9999 !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 4px 14px rgba(72,45,43,.15) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* garante que a capa continue ocupando toda a viewport */
html,body{
  margin:0 !important;
  padding:0 !important;
}

#capa,
.envelope-screen,
.envelope-stage{
  margin-top:0 !important;
  top:0 !important;
  min-height:100svh !important;
}

@media(max-width:600px){
  #musicToggle,
  .music-toggle,
  .music-control,
  .audio-toggle{
    top:12px !important;
    right:12px !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}


/* =========================================================
   BOTÃO DE MÚSICA — APARECE SOMENTE APÓS ABRIR O ENVELOPE
========================================================= */
#musicToggle,
.music-toggle,
.music-control,
.audio-toggle{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(-8px) scale(.94);
  transition:opacity .45s ease, transform .45s ease, visibility .45s ease;
}

body.envelope-opened #musicToggle,
body.envelope-opened .music-toggle,
body.envelope-opened .music-control,
body.envelope-opened .audio-toggle{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1);
}