/* =========================================================
   Convite de Formatura · Dra. Ana Alice
   Paleta vermelha · Bodoni Moda + Pinyon Script + Montserrat
   ========================================================= */
:root {
  --vinho: #4A0610;
  --rubi: #7D0B1B;
  --vermelho: #A3122A;
  --carmim: #C8213A;
  --rosa: #F2C4C6;
  --rosa-2: #EBAFB4;
  --rosa-claro: #FBE4E3;
  --creme: #FBF6F0;
  --tinta: #2B0A0F;
  --ouro: #CFA76B;

  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --script: "Pinyon Script", cursive;
  --sans: "Montserrat", system-ui, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --col: 520px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--vinho) var(--noise);
  color: var(--tinta);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg use { pointer-events: none; }

.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; text-transform: none; }
.eyebrow {
  font: 600 10px/1 var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  margin: 0;
}
.paper { background: var(--creme); position: relative; isolation: isolate; }
.paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--noise); opacity: .05; pointer-events: none;
}

/* ---------- coluna central ---------- */
.site {
  max-width: var(--col);
  margin: 0 auto;
  background: var(--creme);
  container-type: inline-size;
  box-shadow: 0 0 80px rgba(0,0,0,.45);
  overflow: hidden;
}

/* =========================================================
   ABERTURA
   ========================================================= */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 70% at 50% 42%, #A3122A 0%, #6E0918 55%, #3A040C 100%);
  overflow: hidden;
  cursor: pointer;
  outline: none;
  perspective: 1400px;
}
.intro::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .09; pointer-events: none; }
.intro__lines { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.intro__flap {
  position: absolute; left: 0; right: 0; top: 0; height: 41.25%;
  background: linear-gradient(180deg, #8E0E21 0%, #A3122A 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transition: transform 1s var(--ease), filter 1s;
  z-index: 1;
}
.intro__text {
  position: absolute; top: 9%; left: 0; right: 0; z-index: 2;
  text-align: center; color: var(--rosa);
  transition: opacity .5s, translate .7s var(--ease);
}
.intro__text .eyebrow { color: var(--rosa); opacity: .85; font-size: 9px; }
.intro__name {
  font: 400 clamp(40px, 12vw, 64px)/.92 var(--serif);
  letter-spacing: .04em; text-transform: uppercase;
  margin: 14px 0 0; color: var(--creme);
}
.intro__guest {
  font: 400 26px/1.1 var(--script); color: var(--rosa); margin: 12px 0 0;
}
.seal.intro__seal {
  position: absolute; left: 50%; top: 41.25%; z-index: 3;
  width: clamp(104px, 30vw, 140px);
  translate: -50% -50%;
  animation: sealPulse 2.4s var(--ease) infinite;
  transition: scale .45s var(--ease), opacity .45s, rotate .45s;
}
.intro__cta {
  position: absolute; bottom: 13%; left: 0; right: 0; z-index: 2; margin: 0;
  text-align: center; color: var(--rosa);
  font: 600 10px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase;
  transition: opacity .4s;
}
.intro__cta span { display: inline-block; padding: 12px 4px; border-bottom: 1px solid rgba(242,196,198,.5); animation: ctaBlink 2.4s ease-in-out infinite; }

.intro.opening .intro__text { opacity: 0; translate: 0 -20px; }
.intro.opening .intro__cta { opacity: 0; }
.intro.opening .intro__seal { animation: none; scale: 0; rotate: 40deg; opacity: 0; }
.intro.opening .intro__flap { transform: rotateX(180deg); filter: drop-shadow(0 -10px 18px rgba(0,0,0,.2)); transition-delay: .3s; }
.intro.gone { opacity: 0; scale: 1.08; transition: opacity .8s ease .9s, scale 1s var(--ease) .9s; pointer-events: none; }

@keyframes sealPulse { 0%,100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes ctaBlink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- selo de cera ---------- */
.seal { position: relative; aspect-ratio: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.seal svg { width: 100%; height: 100%; }
.seal__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: italic 500 clamp(26px, 30cqi, 40px)/1 var(--serif);
  font-size: 34%;
  letter-spacing: -.04em;
  color: #F4A8B2;
  text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 -1px 0 rgba(0,0,0,.45);
  container-type: inline-size;
}
.intro__seal .seal__mono { font-size: clamp(30px, 9vw, 42px); }

/* =========================================================
   CAPA
   ========================================================= */
.hero {
  position: relative;
  height: 100svh; min-height: 600px; max-height: 1000px;
  background: #e9e6e4;
  overflow: hidden;
}
.hero__photo { position: absolute; inset: 0 33% 0 0; overflow: hidden; }
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%;
  will-change: transform;
}
.hero__band {
  position: absolute; top: 0; right: 0; bottom: 0; width: 33%;
  background: var(--rubi) var(--noise);
  color: var(--creme);
}
.hero__band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 30%); pointer-events: none; }
.hero__nav {
  position: absolute; top: 20px; right: 14px; left: 10px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  font: 700 8.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.hero__nav a { padding: 3px 0; border-bottom: 1px solid transparent; transition: border-color .3s; }
.hero__nav a:hover { border-color: var(--rosa); }
.hero__course {
  position: absolute; top: 15%; bottom: 23%; left: 0; right: 0;
  display: grid; place-items: center;
}
.hero__course-serif {
  writing-mode: vertical-rl;
  font: 400 min(7.6svh, 14.5cqi)/1 var(--serif);
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--creme);
}
.hero__course-script {
  position: absolute; left: 50%; top: 50%;
  writing-mode: vertical-rl;
  translate: -88% -38%;
  font: 400 min(7svh, 13cqi)/1 var(--script);
  color: var(--rosa);
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(74,6,16,.6);
}
.hero__name {
  position: absolute; left: 0; right: 0; bottom: 6%;
  margin: 0; text-align: center;
  font: 400 min(4.2svh, 7.6cqi)/.95 var(--serif);
  letter-spacing: .06em; text-transform: uppercase;
}
.hero__name span { display: block; }
.hero__scroll {
  position: absolute; left: calc(33.5% - 22px); bottom: 22px; translate: -50% 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.75); color: #fff;
  background: rgba(0,0,0,.12); backdrop-filter: blur(4px);
}
.hero__scroll svg { width: 18px; height: 18px; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%,100% { translate: 0 -2px; } 50% { translate: 0 4px; } }

/* entrada da capa */
.hero .hero__photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease) .1s; }
.hero .hero__photo img { scale: 1.18; transition: scale 2.2s var(--ease) .1s; }
.hero .hero__band { translate: 100% 0; transition: translate 1.1s var(--ease); }
.hero .hero__course-serif { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease) .7s; }
.hero .hero__course-script { opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path 1.6s ease-in-out 1.4s, opacity .2s 1.4s; }
.hero .hero__name span, .hero .hero__nav a { opacity: 0; translate: 0 14px; transition: opacity .8s, translate .9s var(--ease); }
.hero .hero__name span:nth-child(1) { transition-delay: 1.5s; }
.hero .hero__name span:nth-child(2) { transition-delay: 1.65s; }
.hero .hero__nav a:nth-child(1) { transition-delay: 1.2s; }
.hero .hero__nav a:nth-child(2) { transition-delay: 1.3s; }
.hero .hero__nav a:nth-child(3) { transition-delay: 1.4s; }
.hero .hero__scroll { opacity: 0; transition: opacity .8s 2s; }

.hero.play .hero__photo { clip-path: inset(0 0 0 0); }
.hero.play .hero__photo img { scale: 1; }
.hero.play .hero__band { translate: 0 0; }
.hero.play .hero__course-serif,
.hero.play .hero__course-script { clip-path: inset(0 0 0 0); opacity: 1; }
.hero.play .hero__name span, .hero.play .hero__nav a { opacity: 1; translate: 0 0; }
.hero.play .hero__scroll { opacity: 1; }

/* =========================================================
   REVEAL AO ROLAR
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transition:
    opacity .9s ease var(--d, 0s),
    translate 1.1s var(--ease) var(--d, 0s),
    scale 1.1s var(--ease) var(--d, 0s),
    rotate 1.2s var(--ease) var(--d, 0s);
}
[data-reveal="up"] { translate: 0 34px; }
[data-reveal="left"] { translate: -46px 0; }
[data-reveal="right"] { translate: 46px 0; }
[data-reveal="zoom"] { scale: .3; }
[data-reveal="drop"] { translate: 0 -70px; }
[data-reveal="letter"] { translate: 0 -150px; scale: .82; }
[data-reveal="swing"] { rotate: -55deg; scale: .5; }
[data-reveal="spin"] { rotate: -200deg; scale: .3; }
[data-reveal="draw"] { opacity: 1; }
[data-reveal="draw"] path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s ease-in-out var(--d, 0s); }
[data-reveal="draw"] .bubbles { opacity: 0; transition: opacity .8s 2s; }
[data-reveal].in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
[data-reveal="draw"].in path { stroke-dashoffset: 0; }
[data-reveal="draw"].in .bubbles { opacity: 1; animation: bubbles 2.6s ease-in-out 2.4s infinite; }
@keyframes bubbles { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* =========================================================
   CARTA / ENVELOPE
   ========================================================= */
.letter-sec {
  padding: 84px 20px 210px;
  min-height: 760px;
}
.sticker {
  position: absolute; top: 34px; left: 18px; z-index: 3;
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  margin: 0;
  background: var(--rubi); color: var(--rosa);
  font: 400 18px/.85 var(--script);
  transform: rotate(-14deg);
  box-shadow: 0 0 0 3px var(--creme), 0 0 0 4px var(--rubi), 0 8px 16px rgba(74,6,16,.25);
}
.deco { position: absolute; pointer-events: none; z-index: 4; }
.deco--bow { width: 92px; height: 92px; top: 22px; right: 8px; transform: rotate(12deg); filter: drop-shadow(0 6px 8px rgba(74,6,16,.3)); }
.deco--star1 { width: 54px; height: 54px; top: 290px; left: -4px; transform: rotate(-12deg); }
.deco--star2 { width: 80px; height: 80px; bottom: 40px; left: 22px; transform: rotate(10deg); }
.twinkle.in { animation: twinkle 3s ease-in-out infinite 1.6s; }
@keyframes twinkle { 0%,100% { scale: 1; filter: brightness(1); } 50% { scale: 1.08; filter: brightness(1.25); } }

.envelope {
  position: relative; z-index: 1;
  width: 74%; margin-left: auto; margin-right: 4%;
  aspect-ratio: 1.45;
  transform: rotate(5deg);
}
.envelope > div { position: absolute; inset: 0; border-radius: 4px; }
.envelope__back { background: linear-gradient(160deg, #E9A9AF, #DB8F97); box-shadow: 0 18px 30px rgba(74,6,16,.18); }
.envelope__flap {
  background: linear-gradient(180deg, #F3C7CB, #EBB3B8);
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  transform-origin: 50% 0;
  transition: transform 1.1s var(--ease) .5s;
  z-index: 1;
}
.envelope.in .envelope__flap { transform: perspective(900px) rotateX(180deg); z-index: 0; }
.envelope__front {
  background: linear-gradient(180deg, #F8D5D8, #F2C4C6);
  clip-path: polygon(0 28%, 50% 63%, 100% 28%, 100% 100%, 0 100%);
  z-index: 2;
  display: grid; place-items: end center;
  padding-bottom: 10%;
}
.envelope__mono {
  font: italic 500 clamp(34px, 11cqi, 52px)/1 var(--serif);
  color: #D9939B;
  letter-spacing: -.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(140,30,45,.25);
}

.letter {
  position: relative; z-index: 2;
  width: 70%; margin: -36% 0 0 3%;
  padding: 38px 22px 26px;
  background: #FFFDF9;
  transform: rotate(-3deg);
  box-shadow: 0 1px 0 #eee3d8, 0 22px 40px rgba(74,6,16,.2);
  text-align: center;
  font: 500 10.5px/1.75 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4b2a2f;
}
.letter::before { content: ""; position: absolute; inset: 8px; border: 1px solid #ead7cf; pointer-events: none; }
.letter p { margin: 0 0 12px; }
.letter em { font-style: normal; color: var(--vermelho); font-weight: 700; }
.letter strong { color: var(--vermelho); }
.letter__pin { position: absolute; top: -26px; left: 50%; width: 34px; height: 50px; translate: -50% 0; transform: rotate(18deg); filter: drop-shadow(2px 4px 3px rgba(0,0,0,.25)); }
.letter__title { font-size: 46px; line-height: 1; margin: 0 0 12px; color: var(--rubi); }
.letter__sign { font-size: 22px; white-space: nowrap; color: var(--rubi); margin: 14px 0 0 !important; }

.badge {
  position: absolute; right: 16px; bottom: 54px; z-index: 5;
  width: 158px; height: 158px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #A3122A, #7D0B1B 55%, #5E0814);
  color: var(--creme);
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px var(--creme), 0 0 0 5px var(--rubi), 0 18px 34px rgba(74,6,16,.38);
}
.badge__ring { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); animation: spin 22s linear infinite; }
.badge__ring text { font: 700 11.5px var(--sans); letter-spacing: .15em; fill: var(--rosa); }
.badge__inner { display: grid; text-align: center; gap: 2px; }
.badge__inner .script { font-size: 36px; line-height: 1; color: var(--creme); }
.badge__inner small { font: 700 8px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--rosa); }
.badge__cap { position: absolute; width: 96px; height: 80px; top: -44px; right: -14px; transform: rotate(14deg); filter: drop-shadow(0 8px 8px rgba(0,0,0,.35)); }
.badge.in { animation: badgeBob 4s ease-in-out 2s infinite; }
.badge:active { scale: .96; }
@keyframes spin { to { rotate: 360deg; } }

/* dedo tocando no selo */
.tap-hand {
  position: absolute; left: 40px; top: 122px; z-index: 6;
  width: 56px; height: 74px;
  transform-origin: 50% 2%;
  transform: rotate(30deg);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.3));
  pointer-events: none;
  opacity: 0;
}
.badge.in .tap-hand { animation: tapHand 2.6s var(--ease) 1.8s infinite; }
@keyframes tapHand {
  0%   { opacity: 0; translate: 22px 30px; scale: 1; }
  18%  { opacity: 1; }
  38%  { translate: 0 0; scale: 1; }
  46%  { translate: 0 2px; scale: .86; }
  56%  { translate: 0 0; scale: 1; }
  80%  { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 22px 30px; }
}
.badge__ripple {
  position: absolute; left: 54px; top: 113px; z-index: 5;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--creme);
  background: rgba(251,246,240,.25);
  opacity: 0; pointer-events: none;
}
.badge.in .badge__ripple { animation: tapRipple 2.6s ease-out 1.8s infinite; }
@keyframes tapRipple {
  0%, 44% { opacity: 0; scale: .3; }
  48%     { opacity: 1; scale: .5; }
  80%     { opacity: 0; scale: 2.6; }
  100%    { opacity: 0; scale: 2.6; }
}
@keyframes badgeBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* =========================================================
   CONTAGEM
   ========================================================= */
.countdown {
  background: var(--rosa-claro);
  border-block: 1px solid var(--rosa-2);
  padding: 34px 16px 30px;
  text-align: center;
  color: var(--rubi);
}
.countdown__grid {
  display: flex; justify-content: center; align-items: flex-start; gap: 6px;
  margin: 14px 0 6px;
}
.countdown__grid div { display: grid; justify-items: center; min-width: 58px; }
.countdown__grid b { font: 400 clamp(36px, 11cqi, 52px)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.countdown__grid span { font: 600 8.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; margin-top: 8px; opacity: .8; }
.countdown__grid i { font: 300 32px/1.2 var(--serif); font-style: normal; opacity: .5; }
.countdown__foot { font-size: 28px; margin: 6px 0 0; }
.tick { animation: tick .5s var(--ease); }
@keyframes tick { from { opacity: .2; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

/* =========================================================
   SEÇÃO VERMELHA
   ========================================================= */
.red-sec {
  background: var(--rubi) var(--noise);
  color: var(--creme);
  padding: 64px 0 0;
  position: relative;
}
.ticket-wrap { position: relative; padding: 0 20px; }
.postmark { position: absolute; top: -26px; left: 6px; width: 170px; color: var(--rosa); opacity: .35; transform: rotate(-8deg); }
.ticket {
  --s: 14px;
  display: block; position: relative; z-index: 1;
  width: 74%; margin: 0 auto;
  padding: calc(var(--s) / 2);
  background: var(--rosa);
  transform: rotate(-4deg);
  -webkit-mask:
    radial-gradient(circle calc(var(--s) / 3), #0000 96%, #000) calc(var(--s) / -2) calc(var(--s) / -2) / var(--s) var(--s) round,
    linear-gradient(#000 0 0) content-box;
          mask:
    radial-gradient(circle calc(var(--s) / 3), #0000 96%, #000) calc(var(--s) / -2) calc(var(--s) / -2) / var(--s) var(--s) round,
    linear-gradient(#000 0 0) content-box;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.3));
  transition: scale .3s var(--ease);
}
.ticket:active { scale: .97; }
.ticket__inner {
  display: grid; justify-items: center; gap: 2px;
  padding: 26px 12px 22px;
  border: 1.5px dashed rgba(125,11,27,.55);
  color: var(--rubi);
  text-align: center;
}
.ticket__inner small { font: 700 9px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.ticket__inner .script { font-size: 64px; line-height: 1.05; }
.ticket__tap { background: var(--rubi); color: var(--rosa); padding: 7px 12px; border-radius: 99px; margin-top: 4px; animation: ctaBlink 2.4s ease-in-out infinite; }
.ticket__seal { position: absolute; width: 78px; right: 22px; bottom: -26px; z-index: 2; rotate: -12deg; }
.ticket__seal .seal__mono { font-size: 25px; }

.pill-btn {
  display: block; width: fit-content;
  margin: 58px auto 0;
  padding: 10px 30px 12px;
  border-radius: 999px;
  background: var(--creme);
  color: var(--rubi);
  box-shadow: 0 0 0 5px rgba(251,246,240,.18), 0 12px 24px rgba(0,0,0,.25);
  position: relative;
}
.pill-btn .script { font-size: 34px; line-height: 1; white-space: nowrap; }
.pill-btn::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit;
  border: 1.5px solid var(--rosa);
  animation: ring 2.4s ease-out infinite;
}
@keyframes ring { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.08 1.4; } }

.note-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px;
  padding: 56px 18px 46px;
}
.note {
  position: relative;
  background: #FFFDF9; color: #4b2a2f;
  padding: 26px 18px 20px;
  transform: rotate(-2.5deg);
  box-shadow: 0 16px 28px rgba(0,0,0,.28);
  font: 500 11px/1.75 var(--sans);
  letter-spacing: .02em;
  background-image: repeating-linear-gradient(180deg, transparent 0 18px, rgba(200,33,58,.12) 18px 19px);
}
.note p { margin: 0; }
.note em { font-size: 21px; color: var(--vermelho); line-height: 1; }
.tape { position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; translate: -50% 0; rotate: -4deg; background: rgba(242,196,198,.8); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.polaroid {
  width: 132px; margin: 0 0 0 -10px; z-index: 1;
  background: #fff; padding: 8px 8px 0;
  transform: rotate(7deg);
  box-shadow: 0 16px 28px rgba(0,0,0,.35);
}
.polaroid img { width: 100%; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 10%; }
.polaroid figcaption { color: var(--rubi); text-align: center; font-size: 17px; white-space: nowrap; padding: 6px 0 8px; }

.exclusive { position: relative; background: var(--rosa); color: var(--rubi); margin-top: 10px; }
.exclusive__wave { position: absolute; left: 0; right: 0; top: -59px; width: 100%; height: 60px; }
.exclusive__body {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding: 6px 20px 10px 26px;
}
.exclusive__words { margin: 0; display: grid; }
.exclusive__words .script { font-size: 30px; line-height: 1; margin-bottom: 4px; }
.exclusive__words span:not(.script) { font: 400 clamp(30px, 9cqi, 42px)/1 var(--serif); letter-spacing: .01em; }
.exclusive__words span:nth-child(3) { font-style: italic; padding-left: 18px; }
.toast { width: 100%; max-width: 190px; justify-self: end; }

.foot { text-align: center; padding: 34px 20px 44px; border-top: 1px solid rgba(125,11,27,.25); margin: 18px 22px 0; }
.foot__tooth { width: 24px; height: 24px; margin: 0 auto 8px; color: var(--rubi); }
.foot__mono { font: italic 500 30px/1 var(--serif); margin: 0 0 8px; letter-spacing: -.04em; }
.foot__line { font: 700 9px/1 var(--sans); letter-spacing: .3em; margin: 0; text-transform: uppercase; }

/* =========================================================
   PÁGINAS INTERNAS (panels)
   ========================================================= */
.panel {
  position: fixed; inset: 0; z-index: 60;
  max-width: var(--col); margin: 0 auto;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path .9s var(--ease);
  container-type: inline-size;
}
.panel.open { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); }
.panel[hidden] { display: block; visibility: hidden; }
.panel.open[hidden] { visibility: visible; }
.panel > * { transition: opacity .6s .35s, translate .8s var(--ease) .35s; }
.panel:not(.open) > * { opacity: 0; translate: 0 20px; }

/* Baile */
.panel--light { background: var(--creme); color: var(--tinta); }
.panel__head {
  background: var(--rubi) var(--noise); color: var(--creme);
  padding: 46px 20px 26px; text-align: center;
  border-radius: 0 0 28px 28px;
}
.panel__head h2 { font: italic 400 30px/1 var(--serif); margin: 0; letter-spacing: .01em; }
.panel__body { padding: 26px 24px 44px; text-align: center; position: relative; }
.panel__cap { width: 86px; height: 72px; margin: 0 auto 6px; transform: rotate(-8deg); animation: badgeBob 4s ease-in-out infinite; }
.event__title { font: 600 15px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--rubi); margin: 0 0 22px; }
.event { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; text-align: left; max-width: 360px; margin: 0 auto; }
.event__date { display: grid; justify-items: center; color: var(--rubi); }
.event__date b { font: 400 76px/.9 var(--serif); }
.event__date span { font: 700 13px/1 var(--sans); letter-spacing: .3em; margin-top: 4px; }
.event__info { border-left: 1.5px solid var(--rubi); padding-left: 16px; font: 500 12px/1.6 var(--sans); }
.event__info p { margin: 0; }
.event__week { font: 400 22px/1.1 var(--script) !important; color: var(--rubi); margin-bottom: 4px !important; }
.event__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px; border-radius: 99px;
  background: var(--rosa); color: var(--rubi);
  font: 700 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  transition: background .3s, scale .2s;
}
.chip:hover { background: var(--rosa-2); }
.chip:active { scale: .96; }
.chip svg { width: 15px; height: 15px; }
.event__dress { font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #6b4a4f; margin: 6px 0 30px; }
.event__dress strong { color: var(--rubi); }
.panel__links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.link-card {
  display: grid; gap: 4px; padding: 16px 10px 14px;
  border: 1.5px solid var(--rosa-2); border-radius: 16px;
  background: #fff;
  color: var(--rubi);
  transition: translate .3s var(--ease), box-shadow .3s;
}
.link-card:hover { translate: 0 -3px; box-shadow: 0 10px 20px rgba(125,11,27,.12); }
.link-card .script { font-size: 32px; line-height: 1; }
.link-card small { font: 700 8.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; opacity: .8; }

.btn-back {
  display: flex; align-items: center; gap: 6px;
  margin: 34px auto 0; padding: 13px 22px 13px 16px;
  border-radius: 99px;
  background: var(--rubi); color: var(--creme);
  font: 700 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.btn-back svg { width: 15px; height: 15px; }
.btn-back--light { background: var(--creme); color: var(--rubi); }
.btn-back--stripes { position: relative; z-index: 2; background: var(--creme); color: var(--rubi); box-shadow: 0 8px 20px rgba(0,0,0,.25); margin: 0 auto 40px; }

/* Ingresso */
.panel--red { background: var(--rosa); padding: 14px; }
.frame {
  background: var(--rubi) var(--noise); color: var(--creme);
  border-radius: 22px;
  padding: 44px 22px 34px;
  min-height: calc(100% - 0px);
  font: 500 12px/1.7 var(--sans);
}
.center { text-align: center; }
.small { font-size: 11px; opacity: .85; }
.ticket-title { text-align: center; margin: 0 0 24px; display: grid; }
.ticket-title .script { font-size: 44px; line-height: 1; color: var(--rosa); }
.ticket-title span:not(.script) { font: 400 22px/1.15 var(--serif); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.price {
  display: grid; justify-items: center; gap: 6px;
  width: fit-content; margin: 0 auto 18px;
  padding: 16px 28px;
  background: var(--rosa); color: var(--rubi);
  border-radius: 999px;
  outline: 1.5px dashed var(--rubi); outline-offset: -7px;
}
.price small { font: 700 9px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.price b { font: 500 30px/1 var(--serif); }
.pix {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin: 16px 0 26px;
  padding: 14px 18px;
  border: 1.5px dashed var(--rosa); border-radius: 16px;
  background: rgba(255,255,255,.06);
  text-align: left;
  color: var(--creme);
}
.pix span { display: grid; gap: 4px; min-width: 0; }
.pix small { font: 700 8.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--rosa); }
.pix b { font: 600 14px/1.2 var(--sans); overflow-wrap: anywhere; }
.pix svg { width: 22px; height: 22px; flex: none; color: var(--rosa); }
.pix__ok {
  position: absolute; right: 12px; top: -12px;
  background: var(--creme); color: var(--rubi);
  font: 700 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; font-style: normal;
  padding: 6px 10px; border-radius: 99px;
  opacity: 0; translate: 0 6px; transition: .3s var(--ease);
}
.pix.copied .pix__ok { opacity: 1; translate: 0 0; }
.bubble {
  background: var(--rosa-claro); color: var(--tinta);
  border-radius: 46px / 34px;
  padding: 24px 22px;
  box-shadow: 0 0 0 5px var(--rubi), 0 0 0 7px var(--rosa);
  margin: 10px 4px 22px;
  font-size: 11.5px; line-height: 1.6;
}
.bubble p { margin: 0 0 10px; }
.bubble p:last-child { margin: 0; }
.bubble strong { color: var(--rubi); letter-spacing: .06em; }
.inline-tooth { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; color: var(--rubi); }
.happy { font-size: 30px; line-height: 1.1; margin: 30px 0 6px; color: var(--rosa); }
.openbar { display: flex; justify-content: center; align-items: center; gap: 10px; }
.openbar p { margin: 0; display: grid; font: 400 46px/.9 var(--serif); letter-spacing: -.01em; }
.openbar p span:last-child { font-style: italic; font-size: 34px; color: var(--rosa); }
.openbar svg { width: 64px; rotate: 10deg; animation: badgeBob 3s ease-in-out infinite; }
.btn-solid {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  width: fit-content; margin: 30px auto 0;
  padding: 14px 24px; border-radius: 99px;
  background: var(--rosa); color: var(--rubi);
  font: 700 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.btn-solid svg { width: 18px; height: 18px; }

/* Confirmar */
.panel--stripes {
  background: repeating-linear-gradient(90deg, var(--rubi) 0 26px, var(--creme) 26px 52px);
  background-size: 52px 100%;
  animation: stripes 6s linear infinite;
  display: flex; flex-direction: column; justify-content: center;
}
.panel--stripes.open { display: flex; }
@keyframes stripes { to { background-position: 52px 0; } }
.rsvp { position: relative; width: min(330px, 86%); margin: 60px auto 34px; filter: drop-shadow(0 22px 30px rgba(0,0,0,.35)); }
.rsvp__cap {
  position: relative; z-index: 1;
  width: 118%; margin-left: -9%;
  aspect-ratio: 2.3;
  background: linear-gradient(135deg, #F7D6D8, var(--rosa));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.rsvp__tassel {
  position: absolute; left: 50%; top: 50%; width: 46%; height: 2px;
  background: var(--rubi); transform-origin: 0 50%;
}
.rsvp__tassel::after {
  content: ""; position: absolute; right: -1px; top: 0; width: 2px; height: 0;
}
.rsvp::after {
  content: ""; position: absolute; z-index: 2;
  right: -6%; top: 20%;
  width: 14px; height: 110px;
  background:
    linear-gradient(var(--rubi), var(--rubi)) 50% 0 / 2px 70% no-repeat,
    linear-gradient(180deg, var(--carmim), var(--vinho)) 50% 100% / 14px 34% no-repeat;
  border-radius: 0 0 6px 6px;
  transform-origin: 50% 0;
  animation: tassel 3s ease-in-out infinite;
}
@keyframes tassel { 0%,100% { rotate: 6deg; } 50% { rotate: -8deg; } }
.rsvp__card {
  position: relative;
  margin-top: -42px;
  padding: 50px 26px 28px;
  background: var(--rosa);
  border-radius: 0 0 46% 46% / 0 0 22% 22%;
  text-align: center; color: var(--rubi);
  display: grid; justify-items: center;
}
.rsvp__phone { position: absolute; top: -78px; left: 50%; translate: -50% 0; width: 84px; height: 84px; z-index: 3; rotate: -10deg; filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); animation: ringPhone 3.2s ease-in-out infinite; }
@keyframes ringPhone { 0%, 70%, 100% { rotate: -10deg; } 74% { rotate: -2deg; } 78% { rotate: -18deg; } 82% { rotate: -4deg; } 86% { rotate: -14deg; } }
.rsvp__card p { font: 700 11px/1.7 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 18px; }
.rsvp__wpp {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--rubi);
  background: var(--creme);
  transition: scale .2s;
  position: relative;
}
.rsvp__wpp::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--rubi); animation: ring 2.2s ease-out infinite; }
.rsvp__wpp:active { scale: .94; }
.rsvp__wpp svg { width: 32px; height: 32px; }
.rsvp__card small { font: 700 8.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; margin-top: 12px; opacity: .8; }

/* =========================================================
   JORNADA — do sonho ao diploma
   ========================================================= */
.journey { padding: 70px 16px 70px; overflow: hidden; }
.journey__head { text-align: center; color: var(--rubi); margin-bottom: 34px; }
.journey__head .script { font-size: 34px; line-height: 1; margin: 0; }
.journey__head h2 {
  font: 400 clamp(46px, 15cqi, 68px)/.95 var(--serif);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px;
}
.journey__head .eyebrow { color: #8a5a60; }
.journey__track { position: relative; }
.journey__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.journey__path { stroke: var(--carmim); stroke-width: 2.6; stroke-dasharray: 3 8; stroke-linecap: round; }
.journey__dots circle { fill: var(--creme); stroke: var(--carmim); stroke-width: 2; transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .6s var(--ease); }
.journey__dots circle.on { scale: 1; }

.moment {
  position: relative; z-index: 1;
  width: 60%;
  margin: 0 0 -6px;
  padding: 9px 9px 0;
  background: #fff;
  box-shadow: 0 18px 30px rgba(74,6,16,.18), 0 2px 4px rgba(74,6,16,.08);
  transform: rotate(var(--r, 0deg));
}
.moment + .moment { margin-top: 58px; }
.moment--left { margin-right: auto; margin-left: 2%; }
.moment--right { margin-left: auto; margin-right: 2%; }
.moment--land { width: 72%; }
.moment--tall { width: 66%; margin: 22px auto 0 !important; }
.moment img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; background: #eee; }
.moment--land img { aspect-ratio: 4 / 3; object-position: 50% 40%; }
.moment--tall img { aspect-ratio: 2 / 3; object-position: 50% 20%; }
.moment figcaption { display: grid; justify-items: center; gap: 2px; padding: 9px 4px 12px; text-align: center; color: var(--rubi); }
.moment figcaption small { font: 700 8px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; opacity: .7; }
.moment figcaption .script { font-size: 21px; line-height: 1.05; }
.moment__tape {
  position: absolute; top: -11px; left: 50%; z-index: 2;
  width: 76px; height: 22px; translate: -50% 0; rotate: 3deg;
  background: rgba(242,196,198,.82);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.moment--right .moment__tape { rotate: -4deg; }
.moment:nth-of-type(3n) .moment__tape { background: rgba(200,33,58,.55); }
/* leve flutuação quando já está na tela */
.moment.in { animation: floaty 6s ease-in-out 1.3s infinite; }
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }

.journey__end { display: grid; justify-items: center; margin-top: 30px; color: var(--rubi); }
.journey__end svg { width: 30px; height: 30px; margin-bottom: 6px; animation: badgeBob 3s ease-in-out infinite; }
.journey__end .script { font-size: 34px; margin: 0; }

/* ---------- música ambiente ---------- */
.som {
  position: fixed; z-index: 80;
  right: max(16px, calc(50vw - var(--col) / 2 + 16px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 46px; height: 46px; padding: 11px;
  border-radius: 50%;
  background: var(--rubi); color: var(--creme);
  border: 1.5px solid var(--ouro);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: background .3s, color .3s, scale .2s;
}
.som:active { scale: .92; }
.som:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.som svg { width: 100%; height: 100%; }
.som::before, .som::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1.5px solid var(--carmim); opacity: 0; pointer-events: none;
}
.som.on { animation: somBate 1.5s ease-in-out infinite; }
.som.on::before { animation: somOnda 1.5s ease-out infinite; }
.som.on::after { animation: somOnda 1.5s ease-out .75s infinite; }
.som.on .som__mudo { display: none; }
.som:not(.on) { background: var(--creme); color: var(--rubi); }
.som:not(.on) .som__ondas { display: none; }
@keyframes somBate { 0%, 100% { scale: 1; } 50% { scale: 1.09; } }
@keyframes somOnda { 0% { scale: 1; opacity: .75; } 100% { scale: 1.9; opacity: 0; } }

/* ---------- desktop: fundo ao redor da coluna ---------- */
@media (min-width: 560px) {
  .intro__lines { max-width: none; }
}

/* ---------- acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  [data-reveal] { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
}