: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);
}


/* =========================================================
   TEMA MANUELA — CIRCO ROSA AQUARELA
   Mantém a estrutura técnica do modelo Helena.
========================================================= */
:root{
  --rose:#efb6c1;
  --rose2:#e89cab;
  --deep:#b75f77;
  --paper:#fffaf5;
  --ink:#79565e;
  --gold:#d2aa62;
  --blush:#f9e5e4;
}

body{
  background:#fffaf5;
}

.envelope-screen,
.envelope-stage,
.opening-animation{
  background:#f4d7d6 !important;
}

.seal-hit{
  top:49% !important;
  width:clamp(110px,30vw,175px) !important;
}

.debutante-screen{
  background:#fff8f5;
}

.debutante-bg{
  background:
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.38),transparent 32%),
    linear-gradient(180deg,#fdeeed 0%,#fffaf5 100%);
}

.debutante-video{
  width:100% !important;
  height:100% !important;
  top:0 !important;
  bottom:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
  mix-blend-mode:normal !important;
}

.hero-copy{
  align-self:end;
  background:linear-gradient(180deg,transparent,rgba(255,250,245,.80) 25%,rgba(255,250,245,.97));
}

.paper-section{
  background:
    radial-gradient(circle at 12% 10%,rgba(240,182,193,.14),transparent 30%),
    radial-gradient(circle at 88% 82%,rgba(210,170,98,.09),transparent 28%),
    #fffaf5;
}

.blush-section{
  background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.5),transparent 24%),
    linear-gradient(145deg,#fae3e4,#fff4ef);
}

.date-section,
.rose-section,
.final-section{
  background:
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.17),transparent 26%),
    radial-gradient(circle at 88% 15%,rgba(210,170,98,.17),transparent 22%),
    linear-gradient(155deg,#de93a5,#b85f77);
}

.script,
.invited,
.section h3,
.timeline time{
  color:#b75f77;
}

.xv,
.ornament,
.scratch-under .year{
  color:#d2aa62;
}

.scratch-under{
  background:#fffaf5;
}

.scratch-under .day{
  color:#b75f77;
}

.pill{
  background:#c96882;
  box-shadow:0 8px 20px rgba(183,95,119,.16);
}

.pill.secondary{
  color:#b75f77;
  border-color:rgba(183,95,119,.32);
}

.light-pill{
  background:#fff8f4;
  color:#b75f77;
}

.dresscode-band{
  background:
    linear-gradient(90deg,rgba(247,221,215,.35),rgba(242,184,194,.32),rgba(247,232,207,.38)),
    #fff8f2 !important;
}

.dresscode-title,
.dresscode-kicker{
  color:#b75f77 !important;
}

.moment-card{
  border-radius:26px;
  border:2px solid rgba(210,170,98,.28);
  box-shadow:0 16px 38px rgba(130,80,91,.13);
}

.moments-hint{
  color:#b57483;
}

/* confetes mais infantis: rosa, dourado e creme */
.date-section .rose-gold-confetti .confetti-piece{
  background:linear-gradient(135deg,#ffd9df 0%,#f2aebb 55%,#d6aa62 100%);
}
.date-section .rose-gold-confetti .confetti-piece:nth-child(3n){
  background:linear-gradient(135deg,#fff2d7,#d9ad64);
}
.date-section .rose-gold-confetti .confetti-piece:nth-child(4n){
  background:linear-gradient(135deg,#f7cbd2,#dc8fa1);
}

/* flor da programação em rosa circo */
.paper-section .timeline-flower .flower-petal{
  background:linear-gradient(180deg,#ffe5e9 0%,#f2b5c0 58%,#d9859b 100%) !important;
}
.paper-section .timeline-flower .flower-center{
  background:#c76c84 !important;
}

/* arte infantil da lista de presentes */
.circus-gift-art{
  width:min(94vw,520px);
  overflow:hidden;
  border:2px solid rgba(210,170,98,.34);
  background:
    radial-gradient(circle at 10% 8%,rgba(242,184,194,.20),transparent 20%),
    radial-gradient(circle at 90% 18%,rgba(210,170,98,.14),transparent 18%),
    linear-gradient(180deg,#fffaf5,#fff0ed);
}

.circus-gift-art::before,
.circus-gift-art::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px dashed rgba(199,108,132,.20);
}

.circus-gift-art::before{left:-55px;top:-55px}
.circus-gift-art::after{right:-55px;bottom:-55px}

.gift-stars{
  color:#d2aa62;
  letter-spacing:.5em;
  margin-bottom:4px;
}

.gift-tent{
  font-size:3.4rem;
  margin:-8px 0 6px;
}

.gift-intro,
.gift-footer{
  font:1.08rem/1.45 "Cormorant Garamond",serif;
}

.gift-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:20px 0;
}

.gift-grid div{
  min-height:112px;
  padding:14px 8px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(199,108,132,.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.gift-grid span{
  font-size:2rem;
}

.gift-grid b{
  font-size:.72rem;
  line-height:1.35;
  color:#7d5a62;
}

.circus-gift-button{
  background:linear-gradient(135deg,#d87691,#b85f77);
}

/* detalhe infantil em algumas seções */
.paper-section .content::before{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e9a5b3;
  box-shadow:22px -10px 0 #d2aa62,-20px 8px 0 #f4d7d6;
  opacity:.22;
  top:-28px;
  left:50%;
}

.final-years{
  color:#fff5eb;
  margin-top:10px;
}

@media(max-width:600px){
  .gift-grid{grid-template-columns:repeat(2,1fr)}
}


/* =========================================================
   MANUELA V2 — CIRCO ROSA AQUARELA CANDY
   Ajustes exclusivos deste convite.
========================================================= */

:root{
  --candy-pink:#f6b7c7;
  --candy-rose:#e78fa9;
  --candy-peach:#ffd1bb;
  --candy-yellow:#ffe89a;
  --candy-mint:#bfe3d1;
  --candy-blue:#bcdcf4;
  --candy-lilac:#d8c5f2;
  --candy-cream:#fff9ef;
  --candy-coral:#d96f91;
  --candy-gold:#d5ae65;

  --rose:var(--candy-pink);
  --rose2:var(--candy-rose);
  --deep:#b65879;
  --paper:var(--candy-cream);
  --ink:#715968;
  --gold:var(--candy-gold);
  --blush:#fde6ea;
}

/* Tipografia infantil */
body{
  font-family:"Fredoka",sans-serif !important;
  color:#715968;
}

.script,
.script.small,
.light-script{
  font-family:"Pacifico",cursive !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

.xv{
  font-family:"Baloo 2",cursive !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  line-height:.78 !important;
  color:#e47698 !important;
  text-shadow:
    0 3px 0 rgba(255,255,255,.9),
    0 5px 12px rgba(203,106,140,.18);
}

.years,
.kicker,
.dresscode-kicker,
.countdown span,
.tiny,
.scroll-cue,
.pill,
.back-link{
  font-family:"Fredoka",sans-serif !important;
}

.body-copy,
.hero-copy p,
.invited,
.timeline p,
.timeline time,
.section h3,
.dresscode-text,
.dresscode-note,
.gift-intro,
.gift-footer{
  font-family:"Fredoka",sans-serif !important;
}

/* ---------------------------------------------------------
   TOPO: vídeo separado do texto, sem película branca sobreposta
--------------------------------------------------------- */
.debutante-screen{
  min-height:100svh !important;
  height:auto !important;
  display:none !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  background:#fff9f2 !important;
}

.debutante-screen.active{
  display:flex !important;
}

.debutante-bg{
  display:none !important;
}

.debutante-video{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:100% !important;
  height:72svh !important;
  min-height:520px !important;
  object-fit:cover !important;
  object-position:center center !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  z-index:1 !important;
  flex:0 0 auto !important;
  background:#f7dce2;
}

.hero-copy{
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  max-width:none !important;
  padding:28px 22px 56px !important;
  margin:0 !important;
  background:
    radial-gradient(circle at 12% 12%,rgba(255,232,154,.38),transparent 20%),
    radial-gradient(circle at 88% 20%,rgba(188,220,244,.33),transparent 20%),
    linear-gradient(135deg,#fff8ed,#fde5eb 45%,#f5ecff) !important;
  border-radius:0 !important;
  text-align:center;
}

.hero-copy .script{
  font-size:clamp(3.7rem,16vw,6.6rem) !important;
  color:#d76388 !important;
}

.hero-copy .xv{
  font-size:clamp(5rem,20vw,8rem) !important;
  margin-top:6px;
}

.hero-copy .years{
  color:#9a6680;
  font-size:.8rem;
  letter-spacing:.25em;
}

.hero-copy p{
  max-width:560px;
  margin:14px auto 0;
  font-size:1.08rem !important;
  line-height:1.5 !important;
}

.scroll-cue{
  position:absolute !important;
  left:50%;
  bottom:12px !important;
  transform:translateX(-50%);
  color:#9a6680 !important;
  z-index:4;
}

/* ---------------------------------------------------------
   PALETA CANDY EM TODAS AS SEÇÕES
--------------------------------------------------------- */
.paper-section:nth-of-type(3n+1){
  background:
    radial-gradient(circle at 10% 10%,rgba(246,183,199,.22),transparent 28%),
    radial-gradient(circle at 90% 78%,rgba(188,220,244,.18),transparent 25%),
    #fffaf4 !important;
}

.paper-section:nth-of-type(3n+2){
  background:
    radial-gradient(circle at 12% 15%,rgba(191,227,209,.30),transparent 25%),
    radial-gradient(circle at 85% 78%,rgba(216,197,242,.22),transparent 26%),
    #fffdf5 !important;
}

.paper-section:nth-of-type(3n){
  background:
    radial-gradient(circle at 12% 15%,rgba(255,232,154,.28),transparent 25%),
    radial-gradient(circle at 88% 82%,rgba(255,209,187,.24),transparent 25%),
    #fff9f1 !important;
}

.blush-section{
  background:
    radial-gradient(circle at 15% 10%,rgba(188,220,244,.34),transparent 24%),
    radial-gradient(circle at 88% 78%,rgba(246,183,199,.38),transparent 26%),
    linear-gradient(145deg,#fff8ed,#fce9ef) !important;
}

.date-section{
  background:
    radial-gradient(circle at 8% 15%,rgba(255,255,255,.42),transparent 18%),
    radial-gradient(circle at 90% 18%,rgba(255,232,154,.40),transparent 19%),
    linear-gradient(145deg,#e9a0b8 0%,#c8b9ed 42%,#99cee8 72%,#9ed5bf 100%) !important;
}

.rose-section{
  background:
    linear-gradient(135deg,#e982a3,#c6aee9 48%,#8ec8df) !important;
}

.final-section{
  background:
    radial-gradient(circle at 15% 15%,rgba(255,232,154,.30),transparent 24%),
    linear-gradient(145deg,#d9789a,#bba5e2 50%,#82bfd8) !important;
}

.dresscode-band{
  background:
    linear-gradient(90deg,
      rgba(246,183,199,.65),
      rgba(255,232,154,.55),
      rgba(191,227,209,.62),
      rgba(188,220,244,.58),
      rgba(216,197,242,.62)
    ) !important;
  border-top:3px solid rgba(255,255,255,.65) !important;
  border-bottom:3px solid rgba(255,255,255,.65) !important;
}

.dresscode-title,
.dresscode-kicker{
  color:#a94e72 !important;
}

.pill{
  background:linear-gradient(135deg,#e56f93,#ad8cdb) !important;
  box-shadow:0 9px 20px rgba(164,96,143,.18) !important;
}

.light-pill{
  background:#fff8ef !important;
  color:#ad5277 !important;
}

/* ---------------------------------------------------------
   RASPADINHA EM FORMATO DE LONA/TENDA DE CIRCO
--------------------------------------------------------- */
.scratch-card{
  width:min(92vw,440px) !important;
  aspect-ratio:1.18 !important;
  border-radius:0 !important;
  border:0 !important;
  box-shadow:0 20px 50px rgba(125,85,114,.18) !important;
  clip-path:polygon(
    50% 0%,
    96% 34%,
    92% 100%,
    8% 100%,
    4% 34%
  ) !important;
  background:#fff7ee;
}

.scratch-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  clip-path:inherit;
  box-shadow:inset 0 0 0 4px rgba(213,174,101,.52);
}

.scratch-under{
  background:
    radial-gradient(circle at 50% 18%,rgba(255,232,154,.42),transparent 26%),
    linear-gradient(180deg,#fff9ee,#fde6ed) !important;
}

.scratch-under::before{
  content:"🎪";
  position:absolute;
  top:15%;
  font-size:2.2rem;
  opacity:.22;
}

.scratch-under .day{
  font-family:"Baloo 2",cursive !important;
  font-weight:700 !important;
  font-size:5.8rem !important;
  color:#d66489 !important;
}

.scratch-under .month{
  font-family:"Fredoka",sans-serif !important;
  color:#9b6680;
  font-weight:600;
}

.scratch-under .year{
  font-family:"Baloo 2",cursive !important;
  color:#c39a54 !important;
}

#scratchCanvas{
  clip-path:inherit;
}

/* ---------------------------------------------------------
   SAVE THE DATE: ITENS DE CIRCO FLUTUANTES
--------------------------------------------------------- */
.circus-float-items{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}

.circus-float-items span{
  position:absolute;
  left:var(--x);
  bottom:-12%;
  font-size:calc(1.9rem * var(--s));
  opacity:.62;
  filter:drop-shadow(0 5px 8px rgba(104,71,91,.10));
  animation:circusFloat 8.5s linear var(--d) infinite;
}

@keyframes circusFloat{
  0%{
    transform:translate3d(0,0,0) rotate(-10deg) scale(.88);
    opacity:0;
  }
  12%{opacity:.62}
  55%{transform:translate3d(18px,-55vh,0) rotate(10deg) scale(1)}
  100%{
    transform:translate3d(-12px,-115vh,0) rotate(-8deg) scale(.92);
    opacity:0;
  }
}

.date-section > .content{
  z-index:2 !important;
}

.date-section h2{
  font-family:"Baloo 2",cursive !important;
  font-weight:700 !important;
  letter-spacing:.02em;
  color:#fffaf2;
  text-shadow:0 3px 10px rgba(90,70,110,.18);
}

.countdown div{
  border:2px solid rgba(255,255,255,.48) !important;
  background:rgba(255,255,255,.20) !important;
  box-shadow:0 8px 20px rgba(86,69,112,.10);
}

.countdown b{
  font-family:"Baloo 2",cursive !important;
  font-weight:700 !important;
  color:#fff8dc !important;
}

/* Desliga o confete antigo, caso ainda exista no DOM */
.rose-gold-confetti{
  display:none !important;
}

/* ---------------------------------------------------------
   PROGRAMAÇÃO: TENDA DESLIZANTE
--------------------------------------------------------- */
.timeline-tent-marker{
  width:38px !important;
  height:38px !important;
  display:grid !important;
  place-items:center !important;
  filter:drop-shadow(0 3px 6px rgba(120,76,100,.16)) !important;
}

.timeline-tent-marker .moving-circus-tent{
  display:block;
  font-size:2rem;
  line-height:1;
  transform-origin:center bottom;
  animation:tentBob 2.4s ease-in-out infinite;
}

@keyframes tentBob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-3px) rotate(2deg)}
}

.timeline-tent-marker .flower-petal,
.timeline-tent-marker .flower-center,
.timeline-tent-marker .flower-leaf{
  display:none !important;
}

/* Linha e pontos Candy */
.paper-section .timeline::before{
  background:linear-gradient(
    to bottom,
    #f1a7ba,
    #e8c470,
    #a7d8c2,
    #9fcde8,
    #c9b5ec
  ) !important;
  width:3px !important;
  border-radius:10px;
}

.paper-section .timeline > div:not(.timeline-flower)::before{
  background:#fff !important;
  border:3px solid #e889a5 !important;
  box-shadow:0 0 0 4px rgba(232,137,165,.13) !important;
  width:11px !important;
  height:11px !important;
}

/* ---------------------------------------------------------
   MODAL PRESENTES: música nunca fica sobre o X
--------------------------------------------------------- */
.modal{
  z-index:1000 !important;
}

.modal-box{
  z-index:1001;
}

.modal .close{
  z-index:1010 !important;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff !important;
  color:#b95578 !important;
  box-shadow:0 5px 14px rgba(85,55,79,.18);
  top:12px !important;
  right:12px !important;
}

body.modal-open .music-toggle{
  opacity:0 !important;
  pointer-events:none !important;
}

.music-toggle{
  z-index:90 !important;
  background:linear-gradient(135deg,#df7194,#aa8bd7) !important;
  border:2px solid rgba(255,255,255,.78) !important;
}

/* Lista de presentes mais Candy */
.circus-gift-art{
  background:
    radial-gradient(circle at 10% 10%,rgba(246,183,199,.30),transparent 22%),
    radial-gradient(circle at 90% 18%,rgba(188,220,244,.25),transparent 22%),
    radial-gradient(circle at 20% 90%,rgba(191,227,209,.26),transparent 22%),
    linear-gradient(145deg,#fffaf0,#fde7ed) !important;
}

.gift-grid div:nth-child(1){background:#fde3ea !important}
.gift-grid div:nth-child(2){background:#e8f2ff !important}
.gift-grid div:nth-child(3){background:#fff2c9 !important}
.gift-grid div:nth-child(4){background:#e5f4eb !important}
.gift-grid div:nth-child(5){background:#eee5fa !important}
.gift-grid div:nth-child(6){background:#ffe8d9 !important}

/* Momentos com molduras candy alternadas */
.moment-card:nth-child(5n+1){border-color:#f1a7ba !important}
.moment-card:nth-child(5n+2){border-color:#a8d9c4 !important}
.moment-card:nth-child(5n+3){border-color:#a9cee9 !important}
.moment-card:nth-child(5n+4){border-color:#d0bcea !important}
.moment-card:nth-child(5n){border-color:#efd17c !important}

@media(max-width:600px){
  .debutante-video{
    height:66svh !important;
    min-height:470px !important;
  }

  .hero-copy{
    padding:24px 18px 54px !important;
  }

  .scratch-card{
    width:min(94vw,420px) !important;
  }

  .circus-float-items span{
    font-size:calc(1.65rem * var(--s));
  }
}

@media(prefers-reduced-motion:reduce){
  .circus-float-items span,
  .timeline-tent-marker .moving-circus-tent{
    animation:none !important;
  }
}


/* =========================================================
   MANUELA — REFINO 2
   Ajustes solicitados: fonte-modelo, tenda da raspadinha,
   programação alinhada, presentes responsivos e música/modal.
========================================================= */

/* FONTES inspiradas no convite-modelo */
body{
  font-family:"Quicksand",sans-serif !important;
  font-weight:500;
}

.script,
.script.small,
.light-script,
.dresscode-title{
  font-family:"Dancing Script",cursive !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

.hero-copy .script{
  font-family:"Dancing Script",cursive !important;
  font-weight:700 !important;
}

.xv{
  font-family:"DM Serif Display",serif !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  line-height:.82 !important;
}

.years,
.kicker,
.dresscode-kicker,
.body-copy,
.hero-copy p,
.invited,
.timeline p,
.timeline time,
.section h3,
.dresscode-text,
.dresscode-note,
.gift-intro,
.gift-footer,
.pill,
.back-link,
.tiny,
.scroll-cue{
  font-family:"Quicksand",sans-serif !important;
}

/* número 1: delicado, infantil e compatível com o modelo */
.hero-copy .xv{
  font-size:clamp(4.4rem,18vw,7.3rem) !important;
  color:#d97495 !important;
  text-shadow:0 3px 0 rgba(255,255,255,.78);
}

/* ---------------------------------------------------------
   PROGRAMAÇÃO — linha, pontos e tenda EXATAMENTE alinhados
--------------------------------------------------------- */
.paper-section .timeline{
  --program-line-x:20px;
  position:relative !important;
  padding-left:52px !important;
  overflow:visible !important;
}

.paper-section .timeline::before{
  left:var(--program-line-x) !important;
  width:2px !important;
}

.paper-section .timeline > div:not(.timeline-flower)::before{
  left:calc(-52px + var(--program-line-x)) !important;
  transform:translate(-50%,-50%) !important;
}

.paper-section .timeline-flower.timeline-tent-marker{
  left:var(--program-line-x) !important;
  width:34px !important;
  height:34px !important;
  transform:translate(-50%,-50%) !important;
  display:grid !important;
  place-items:center !important;
  z-index:8 !important;
}

.timeline-tent-marker .moving-circus-tent{
  display:grid !important;
  place-items:center !important;
  width:34px !important;
  height:34px !important;
  font-size:27px !important;
  line-height:1 !important;
  transform-origin:center center !important;
  filter:drop-shadow(0 2px 3px rgba(123,78,104,.16));
}

@media(max-width:600px){
  .paper-section .timeline{
    --program-line-x:18px;
    padding-left:48px !important;
  }

  .paper-section .timeline > div:not(.timeline-flower)::before{
    left:calc(-48px + var(--program-line-x)) !important;
  }

  .paper-section .timeline-flower.timeline-tent-marker{
    left:var(--program-line-x) !important;
  }
}

/* ---------------------------------------------------------
   RASPADINHA — tenda mais elegante e proporcional
--------------------------------------------------------- */
.scratch-card{
  width:min(90vw,430px) !important;
  aspect-ratio:1.12 !important;
  clip-path:polygon(
    50% 0%,
    94% 31%,
    94% 93%,
    88% 100%,
    12% 100%,
    6% 93%,
    6% 31%
  ) !important;
  border-radius:0 !important;
  background:#fff9f0 !important;
  box-shadow:0 18px 45px rgba(126,80,108,.16) !important;
}

.scratch-card::before{
  content:"";
  position:absolute;
  z-index:6;
  left:8%;
  right:8%;
  top:31%;
  height:10px;
  border-top:3px solid rgba(211,169,89,.70);
  border-bottom:2px solid rgba(211,169,89,.40);
  pointer-events:none;
}

.scratch-card::after{
  box-shadow:inset 0 0 0 3px rgba(211,169,89,.55) !important;
}

.scratch-under{
  padding-top:13% !important;
}

.scratch-under::before{
  content:"🎪" !important;
  top:8% !important;
  font-size:2rem !important;
  opacity:.16 !important;
}

.scratch-under .day{
  font-family:"DM Serif Display",serif !important;
  font-weight:400 !important;
}

/* ---------------------------------------------------------
   LISTA DE PRESENTES — sempre proporcional ao celular
--------------------------------------------------------- */
#giftModal{
  padding:12px !important;
  align-items:center !important;
  justify-items:center !important;
}

#giftModal .modal-box.circus-gift-art{
  width:min(92vw,460px) !important;
  max-width:460px !important;
  max-height:88svh !important;
  min-height:0 !important;
  padding:28px 16px 18px !important;
  border-radius:22px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
}

#giftModal .script.small{
  font-size:clamp(2.15rem,10vw,3.4rem) !important;
  margin:0 34px 8px !important;
  line-height:1 !important;
}

#giftModal .gift-tent{
  font-size:2.35rem !important;
  margin:2px 0 5px !important;
}

#giftModal .gift-intro,
#giftModal .gift-footer{
  font-size:.78rem !important;
  line-height:1.4 !important;
  margin:8px auto !important;
  max-width:330px;
}

#giftModal .gift-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:12px 0 !important;
}

#giftModal .gift-grid div{
  min-width:0 !important;
  min-height:86px !important;
  padding:10px 6px !important;
  border-radius:15px !important;
}

#giftModal .gift-grid span{
  font-size:1.55rem !important;
}

#giftModal .gift-grid b{
  font-family:"Quicksand",sans-serif !important;
  font-size:.64rem !important;
  line-height:1.25 !important;
  text-align:center;
}

#giftModal .close{
  position:sticky !important;
  float:right;
  top:0 !important;
  right:0 !important;
  margin:-16px -4px 0 0 !important;
  z-index:1200 !important;
  width:40px !important;
  height:40px !important;
  flex:0 0 40px;
}

/* botão de música não interfere em modais */
body.modal-open #musicToggle,
body.modal-open .music-toggle{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* modal sempre acima de qualquer controle flutuante */
.modal{z-index:1500 !important}
.modal-box{z-index:1510 !important}
.modal .close{z-index:1520 !important}

/* celular pequeno */
@media(max-width:390px){
  #giftModal .modal-box.circus-gift-art{
    width:94vw !important;
    max-height:86svh !important;
    padding:24px 12px 14px !important;
  }

  #giftModal .gift-grid div{
    min-height:80px !important;
  }

  #giftModal .script.small{
    font-size:2rem !important;
  }
}


/* =========================================================
   CORREÇÃO FINAL — TENDA DA PROGRAMAÇÃO CENTRALIZADA NA LINHA
   Marcador desenhado em CSS para eliminar o deslocamento visual
   do emoji. Alteração somente no convite da Manuela.
========================================================= */

.paper-section .timeline{
  --program-line-x:18px !important;
  padding-left:48px !important;
}

.paper-section .timeline::before{
  left:var(--program-line-x) !important;
}

/* Pontos exatamente no mesmo eixo da linha */
.paper-section .timeline > div:not(.timeline-flower)::before{
  left:calc(-48px + var(--program-line-x)) !important;
  transform:translate(-50%,-50%) !important;
}

/* O centro geométrico da tenda fica exatamente no eixo */
.paper-section .timeline-flower.timeline-tent-marker{
  position:absolute !important;
  left:var(--program-line-x) !important;
  width:30px !important;
  height:34px !important;
  margin:0 !important;
  padding:0 !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  overflow:visible !important;
  z-index:12 !important;
}

.timeline-tent-marker .moving-circus-tent{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:30px !important;
  height:32px !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  font-size:0 !important;
  line-height:0 !important;
  filter:drop-shadow(0 2px 4px rgba(120,76,100,.18));
  animation:tentBobCentered 2.4s ease-in-out infinite !important;
}

/* Bandeirinha */
.timeline-tent-marker .tent-flag{
  position:absolute;
  left:14px;
  top:-5px;
  width:1.5px;
  height:10px;
  background:#c8944f;
  transform:none;
}

.timeline-tent-marker .tent-flag::after{
  content:"";
  position:absolute;
  left:1px;
  top:0;
  width:9px;
  height:6px;
  background:#e56f93;
  clip-path:polygon(0 0,100% 25%,0 100%);
}

/* Cobertura listrada */
.timeline-tent-marker .tent-roof{
  position:absolute;
  left:3px;
  top:4px;
  width:24px;
  height:14px;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  background:
    linear-gradient(
      90deg,
      #ef7998 0 20%,
      #fff3df 20% 40%,
      #ef7998 40% 60%,
      #fff3df 60% 80%,
      #ef7998 80% 100%
    );
  border-bottom:2px solid #c8944f;
}

/* Corpo */
.timeline-tent-marker .tent-body{
  position:absolute;
  left:5px;
  top:17px;
  width:20px;
  height:13px;
  background:
    linear-gradient(
      90deg,
      #ef7998 0 25%,
      #fff3df 25% 50%,
      #ef7998 50% 75%,
      #fff3df 75% 100%
    );
  border-left:1px solid rgba(200,148,79,.75);
  border-right:1px solid rgba(200,148,79,.75);
  border-bottom:1px solid rgba(200,148,79,.75);
  border-radius:0 0 3px 3px;
}

/* Entrada da tenda */
.timeline-tent-marker .tent-body::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:7px;
  height:9px;
  transform:translateX(-50%);
  background:#a84f6c;
  border-radius:5px 5px 0 0;
}

@keyframes tentBobCentered{
  0%,100%{
    transform:translate(-50%,-50%) translateY(0);
  }
  50%{
    transform:translate(-50%,-50%) translateY(-2px);
  }
}

/* garante o mesmo alinhamento em telas pequenas e grandes */
@media(min-width:601px){
  .paper-section .timeline{
    --program-line-x:20px !important;
    padding-left:52px !important;
  }

  .paper-section .timeline > div:not(.timeline-flower)::before{
    left:calc(-52px + var(--program-line-x)) !important;
  }
}