/* ============ BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --verde: #1ed760;
  --amarelo: #f5d90a;
  --rosa: #f06292;
  --rosa-claro: #f8bbd0;
  --vermelho: #e53945;
  --fundo: #0a0a0a;
  --cinza: #1c1c1e;
  --texto: #ffffff;
  --texto-suave: rgba(255, 255, 255, 0.65);
}

html { scroll-behavior: smooth; }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: "Inter", -apple-system, sans-serif;
  overflow-x: hidden;
}

.tela { display: none; }
.tela.ativa { display: flex; }

button { font-family: inherit; cursor: pointer; border: none; }

.btn-verde {
  background: var(--verde);
  color: #000;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 14px 44px;
  border-radius: 999px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-verde:active { transform: scale(0.96); }

.btn-rosa {
  background: var(--rosa);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 14px 44px;
  border-radius: 999px;
  transition: transform 0.15s;
}
.btn-rosa:active { transform: scale(0.96); }

.btn-contorno {
  background: transparent;
  color: var(--texto);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
}
.btn-contorno:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); }
.btn-contorno:active { transform: scale(0.96); }

.verde { color: var(--verde); }

/* degradê laranja (mesmas cores das fitas do fundo) */
.laranja {
  background: linear-gradient(90deg, #ff5e3a, #ff2d55, #ff5e3a);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brilhoLaranja 4s linear infinite;
}

@keyframes brilhoLaranja {
  to { background-position: 200% center; }
}

/* ============ TELA INICIAL ============ */
#tela-inicial {
  position: relative;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  overflow: hidden;
}

.inicial-conteudo {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.badge {
  display: inline-block;
  border: 1px solid var(--verde);
  color: var(--verde);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 28px;
}

.badge-claro {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.inicial-conteudo h1 {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 900;
  line-height: 1.2;
  max-width: 520px;
  margin: 0 auto 16px;
}

.inicial-conteudo p {
  color: var(--texto-suave);
  margin-bottom: 36px;
  line-height: 1.5;
}

/* ============ STORIES / WRAPPED ============ */
#tela-stories {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--fundo);
  flex-direction: column;
}

.progresso {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

.progresso .seg {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
}

.progresso .seg i {
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 2px;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  text-align: center;
}
.slide.visivel { display: flex; animation: aparecer 0.5s ease; }

@keyframes aparecer {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.slide-centro { z-index: 5; }

.titulo-verde {
  color: var(--verde);
  font-family: "Dancing Script", cursive;
  font-size: clamp(3rem, 12vw, 4.6rem);
  font-weight: 700;
  margin-bottom: 14px;
  text-shadow: 0 0 30px rgba(30, 215, 96, 0.5);
  animation: pulsoNome 3s ease-in-out infinite alternate;
}

@keyframes pulsoNome {
  from { text-shadow: 0 0 24px rgba(30, 215, 96, 0.35); transform: scale(1); }
  to { text-shadow: 0 0 50px rgba(30, 215, 96, 0.75); transform: scale(1.03); }
}

/* polaroids flutuantes no slide de nomes */
.polaroid-solta {
  position: absolute;
  width: min(34vw, 170px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #fdfdf8;
  border: 8px solid #fdfdf8;
  border-bottom-width: 30px;
  border-radius: 4px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  z-index: 3;
}

.polaroid-esq {
  left: 6%;
  top: 16%;
  transform: rotate(-9deg);
  animation: flutuarPolaroid 5.5s ease-in-out infinite;
}

.polaroid-dir {
  right: 6%;
  bottom: 16%;
  transform: rotate(8deg);
  animation: flutuarPolaroid 6.5s ease-in-out infinite reverse;
}

.polaroid-c1 {
  right: 7%;
  top: 12%;
  width: min(28vw, 145px);
  transform: rotate(7deg);
  animation: flutuarPolaroid 6s ease-in-out infinite 0.6s;
}

.polaroid-c2 {
  left: 7%;
  bottom: 12%;
  width: min(28vw, 145px);
  transform: rotate(-7deg);
  animation: flutuarPolaroid 5.8s ease-in-out infinite reverse 0.3s;
}

/* as do meio espiam da borda, sem invadir o título */
.polaroid-c3 {
  left: -7%;
  top: 36%;
  width: min(22vw, 115px);
  transform: rotate(-10deg);
  animation: flutuarPolaroid 7s ease-in-out infinite 1s;
}

.polaroid-c4 {
  right: -7%;
  top: 56%;
  width: min(22vw, 115px);
  transform: rotate(10deg);
  animation: flutuarPolaroid 6.4s ease-in-out infinite reverse 0.8s;
}

/* faixa central protegida: vinheta atrás do título */
.slide-nomes .slide-centro {
  background: radial-gradient(ellipse 130% 100%, rgba(10, 10, 10, 0.92) 30%, rgba(10, 10, 10, 0.6) 60%, transparent 75%);
  padding: 48px 20px;
}

@keyframes flutuarPolaroid {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

/* slide do contador com foto de fundo */
.slide-contador .contador-fundo {
  position: absolute;
  inset: -20px;
  background: url("assets/conexao.jpg") center 30% / cover no-repeat;
  filter: blur(10px) brightness(0.32) saturate(1.2);
  z-index: 0;
}

.slide-contador .slide-centro { z-index: 2; }

.slide-contador .caixa {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  animation: surgeCaixa 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.3) forwards;
}

.slide-contador .caixa:nth-child(1) { animation-delay: 0.15s; }
.slide-contador .caixa:nth-child(2) { animation-delay: 0.3s; }
.slide-contador .caixa:nth-child(3) { animation-delay: 0.45s; }
.slide-contador .caixa:nth-child(4) { animation-delay: 0.6s; }
.slide-contador .caixa:nth-child(5) { animation-delay: 0.75s; }
.slide-contador .caixa:nth-child(6) { animation-delay: 0.9s; }

@keyframes surgeCaixa {
  from { opacity: 0; transform: scale(0.6) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.slide p { color: var(--texto-suave); font-size: 1.05rem; }

.subtitulo { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
.desde { margin-bottom: 28px; }

.grade-contador {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 380px;
  margin: 0 auto;
}

.caixa {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 18px 8px;
  backdrop-filter: blur(6px);
}

.caixa span {
  display: block;
  font-size: 1.9rem;
  font-weight: 900;
}

.caixa label {
  font-size: 0.75rem;
  color: var(--texto-suave);
}

.rotulo { font-size: 1rem; margin-bottom: 8px; }

.numero-gigante {
  font-size: clamp(3.5rem, 16vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.comparacao { font-size: 1rem; }

/* barras decorativas estilo wrapped */
.barras {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 0 4px;
  pointer-events: none;
}
.barras-topo { top: 0; }
.barras-base { bottom: 0; transform: rotate(180deg); }

.barras i {
  flex: 1;
  border-radius: 0 0 4px 4px;
  animation: pulsar 1.6s ease-in-out infinite alternate;
}

.verde-tema i { background: var(--verde); }
.amarelo-tema i { background: var(--amarelo); }

@keyframes pulsar {
  from { opacity: 0.85; }
  to { opacity: 0.5; }
}

/* --- Slide lua --- */
.slide-lua {
  background: radial-gradient(ellipse at 50% 35%, #1d1430 0%, #0a0a0a 70%);
}

/* estrelas piscando */
.slide-lua::before, .slide-lua::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    12vw 10vh 0 0 rgba(255,255,255,0.9),
    78vw 18vh 0 1px rgba(255,255,255,0.6),
    30vw 26vh 0 0 rgba(255,255,255,0.8),
    88vw 55vh 0 0 rgba(255,255,255,0.7),
    18vw 70vh 0 1px rgba(255,255,255,0.5),
    65vw 80vh 0 0 rgba(255,255,255,0.8),
    45vw 12vh 0 0 rgba(255,255,255,0.5),
    8vw 45vh 0 0 rgba(255,255,255,0.6);
  animation: piscar 2.4s ease-in-out infinite alternate;
}

.slide-lua::after {
  box-shadow:
    22vw 16vh 0 0 rgba(255,255,255,0.6),
    70vw 8vh 0 0 rgba(255,255,255,0.8),
    92vw 35vh 0 1px rgba(255,255,255,0.5),
    55vw 62vh 0 0 rgba(255,255,255,0.7),
    35vw 85vh 0 0 rgba(255,255,255,0.6),
    80vw 72vh 0 1px rgba(255,255,255,0.8);
  animation-delay: 1.2s;
}

@keyframes piscar {
  from { opacity: 0.25; }
  to { opacity: 1; }
}

.lua-wrap {
  position: relative;
  margin: 36px 0 20px;
  animation: flutuar 6s ease-in-out infinite;
}

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* halo pulsante ao redor da lua */
.lua-wrap::before {
  content: "";
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 198, 255, 0.28) 0%, rgba(214, 198, 255, 0.08) 45%, transparent 68%);
  animation: pulsarHalo 4.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes pulsarHalo {
  from { transform: scale(0.92); opacity: 0.6; }
  to { transform: scale(1.1); opacity: 1; }
}

.lua {
  position: relative;
  width: min(56vw, 230px);
  height: min(56vw, 230px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 70px rgba(214, 198, 255, 0.3);
  animation: brilhoLua 4.5s ease-in-out infinite alternate;
}

@keyframes brilhoLua {
  from { box-shadow: 0 0 50px rgba(214, 198, 255, 0.22); }
  to { box-shadow: 0 0 100px rgba(214, 198, 255, 0.55); }
}

/* foto real da lua girando devagar */
.lua-foto {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("assets/lua.jpg") 50% 49.5% / 190% no-repeat #0d0b14;
  animation: girarLua 120s linear infinite;
}

@keyframes girarLua {
  to { transform: rotate(360deg); }
}

.lua-sombra {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #0d0b14;
  z-index: 2;
  opacity: 0.96;
}

/* estrela cadente */
.estrela-cadente {
  position: absolute;
  top: 14%;
  left: -8%;
  width: 110px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff 60%, #fff);
  border-radius: 2px;
  transform: rotate(18deg);
  opacity: 0;
  animation: cadente 7s ease-in infinite;
  animation-delay: 2s;
  pointer-events: none;
}

@keyframes cadente {
  0% { opacity: 0; transform: rotate(18deg) translateX(0); }
  4% { opacity: 1; }
  12% { opacity: 0; transform: rotate(18deg) translateX(70vw); }
  100% { opacity: 0; transform: rotate(18deg) translateX(70vw); }
}

.lua-fase {
  font-size: 1.15rem;
  font-weight: 600;
  color: #f3dceb !important;
}

/* --- Slide estação --- */
.estacao-icone {
  position: relative;
  font-size: clamp(5rem, 24vw, 8rem);
  margin: 40px 0 24px;
  filter: drop-shadow(0 0 40px var(--cor-estacao, rgba(255, 255, 255, 0.3)));
  animation: balancar 4s ease-in-out infinite;
}

/* anel de luz atrás do ícone */
.estacao-icone::before {
  content: "";
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cor-estacao-fraca, rgba(255,255,255,0.12)) 0%, transparent 65%);
  animation: pulsarHalo 4s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes balancar {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-16px) rotate(8deg); }
}

.estacao-nome {
  font-family: "Dancing Script", cursive;
  font-size: 2.2rem !important;
}

/* partículas da estação caindo (neve, folhas, pétalas, brilhos) */
.particula {
  position: absolute;
  top: -8%;
  font-size: 1.2rem;
  opacity: 0.85;
  animation: cairParticula linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes cairParticula {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.85; }
  50% { transform: translateY(55vh) translateX(26px) rotate(180deg); }
  100% { transform: translateY(115vh) translateX(-18px) rotate(360deg); opacity: 0.5; }
}

.estacao-nome {
  font-size: 1.3rem;
  font-weight: 700;
}

/* --- Slide faixas coloridas --- */
.slide-faixas { padding: 0; }

.faixas {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.faixa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3rem, 16vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
  transform: translateX(-100%);
  animation: entraFaixa 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 0.13s);
}

.faixa:nth-child(even) {
  transform: translateX(100%);
}

@keyframes entraFaixa {
  to { transform: translateX(0); }
}

.faixa span {
  display: inline-block;
  animation: derivaNumero 3.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 0.3s);
}

.faixa:nth-child(even) span { animation-direction: alternate-reverse; }

@keyframes derivaNumero {
  from { transform: translateX(-5%) scale(1); }
  to { transform: translateX(5%) scale(1.06); }
}

/* ============ PÁGINA PRINCIPAL ============ */
#tela-principal { flex-direction: column; }

.secao {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

.secao h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); font-weight: 900; }

/* --- Player --- */
.player-secao {
  background: linear-gradient(180deg, #d32f3e 0%, #8e1c27 100%);
}

.player-dedicatoria {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 22px;
}

.player-capa {
  width: min(78vw, 340px);
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  background: rgba(0,0,0,0.25);
}

.player-capa img { width: 100%; height: 100%; object-fit: cover; }

.player-info {
  width: min(78vw, 340px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  text-align: left;
}

.player-info h3 { font-size: 1.3rem; font-weight: 700; }
.player-info p { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; }

.check {
  background: #fff;
  color: #c62836;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 900;
}

.player-barra { width: min(78vw, 340px); margin-top: 16px; }

.player-progresso-wrap {
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

#player-progresso { height: 100%; width: 0%; background: #fff; }

.player-tempos {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
}

.player-controles {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-top: 18px;
}

.ctrl {
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
}

.ctrl-play {
  background: #fff;
  color: #c62836;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 1.6rem;
  display: grid;
  place-items: center;
}

/* --- Conexão --- */
.conexao-secao {
  background: radial-gradient(ellipse at top, #2a1a3a 0%, var(--fundo) 60%);
}

.conexao-foto {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 18px;
}

.conexao-foto img { width: 100%; height: 100%; object-fit: cover; }

.conexao-nomes { color: var(--texto-suave); margin: 8px 0 24px; font-weight: 600; }

.cartao {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 22px;
  max-width: 360px;
  width: 100%;
  margin-bottom: 12px;
  line-height: 1.45;
}

.cartao-data {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.icone-data {
  background: var(--verde);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.cartao-data label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.cartao-data strong { font-size: 1.05rem; }

/* --- Mensagem especial --- */
.mensagem-secao {
  background: var(--fundo);
  min-height: 70dvh;
}

.mensagem-card {
  background: linear-gradient(160deg, #4fa8f5 0%, #1e6fd9 100%);
  border-radius: 22px;
  padding: 36px 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(30, 111, 217, 0.35);
}

.mensagem-rotulo {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 16px;
}

.mensagem-texto {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  transition: filter 0.6s;
}

.mensagem-texto.borrada { filter: blur(7px); user-select: none; }

.btn-mostrar {
  margin-top: 24px;
  background: #fff;
  color: #1e6fd9;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 30px;
  border-radius: 999px;
  transition: transform 0.15s, opacity 0.3s;
}
.btn-mostrar:active { transform: scale(0.96); }
.btn-mostrar.escondido { opacity: 0; pointer-events: none; }

.grade-mini { margin: 8px 0 32px; z-index: 5; }

.btn-azul {
  background: #8ec5ff;
  color: #0a2a4d;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 14px 52px;
  border-radius: 999px;
  z-index: 5;
  transition: transform 0.15s;
}
.btn-azul:active { transform: scale(0.96); }

/* fitas 3D estilo wrapped */
.fita {
  position: absolute;
  width: 150%;
  height: 110px;
  background: linear-gradient(90deg, #ff2d55, #c2185b, #ff5e3a, #e91e63);
  filter: blur(1px) drop-shadow(0 10px 30px rgba(233, 30, 99, 0.45));
  border-radius: 60px;
  pointer-events: none;
}

.fita-topo { top: 8%; left: -25%; transform: rotate(-14deg); }
.fita-base { bottom: 8%; right: -25%; transform: rotate(-12deg); }

/* --- Timeline --- */
.timeline-secao {
  background: linear-gradient(180deg, var(--fundo) 0%, #1a0e1e 50%, var(--fundo) 100%);
  justify-content: flex-start;
}

.timeline-sub { color: var(--texto-suave); margin: 8px 0 48px; }

.timeline {
  position: relative;
  width: 100%;
  max-width: 480px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-50%);
}

.momento {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 56px;
}

.momento::after {
  content: "💗";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
}

.momento .polaroid {
  width: 46%;
  background: #fdfdf8;
  color: #333;
  padding: 8px 8px 14px;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: rotate(-2deg);
}

.momento:nth-child(even) .polaroid { transform: rotate(2deg); }

.polaroid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.polaroid .legenda {
  font-family: "Caveat", cursive;
  font-size: 1.05rem;
  margin-top: 8px;
  color: #555;
}

.momento .info {
  width: 46%;
  text-align: left;
  padding-left: 8%;
}

.momento:nth-child(even) { flex-direction: row-reverse; }
.momento:nth-child(even) .info { padding-left: 0; padding-right: 8%; text-align: right; }

.momento .data { color: var(--rosa); font-weight: 700; font-size: 0.95rem; }
.momento .texto { font-size: 0.92rem; margin-top: 4px; line-height: 1.4; }

/* --- Roleta --- */
.roleta-secao { background: var(--fundo); }

.roleta-wrap {
  position: relative;
  margin: 36px 0 28px;
}

.roleta-ponteiro {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--rosa);
  font-size: 1.6rem;
  z-index: 5;
}

#roleta {
  width: min(80vw, 340px);
  height: min(80vw, 340px);
  transition: transform 4.5s cubic-bezier(0.12, 0.7, 0.1, 1);
}

.roleta-resultado {
  margin-top: 20px;
  font-size: 1.25rem;
  font-weight: 700;
  min-height: 1.6em;
  color: var(--rosa-claro);
}

/* --- Final --- */
.final-secao {
  background: radial-gradient(ellipse at bottom, #2a0e12 0%, var(--fundo) 65%);
  gap: 14px;
}

.final-secao p { color: var(--texto-suave); margin-bottom: 14px; }

.btn-instagram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 36px;
  border-radius: 999px;
  transition: transform 0.15s;
}
.btn-instagram:active { transform: scale(0.96); }

/* aviso discreto de volume */
#toast-volume {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(28, 28, 30, 0.85);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  padding: 9px 18px;
  border-radius: 999px;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
}

#toast-volume.visivel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* corações flutuantes */
.coracao-flutuante {
  position: fixed;
  bottom: -40px;
  font-size: 1.4rem;
  animation: subir linear forwards;
  pointer-events: none;
  z-index: 99;
}

@keyframes subir {
  to { transform: translateY(-110vh) rotate(20deg); opacity: 0; }
}