:root {
  --pink: #ff2d87;
  --pink-deep: #d6006f;
  --pink-soft: #ffd6ea;
  --cream: #faf3e8;
  --purple: #8c3fd6;
  --ink: #2a1a22;
  --paper: #fff9f0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Baloo 2', 'Segoe UI', sans-serif;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
}

/* o formulario continua selecionavel/copiavel normalmente, isso aqui e so
   pra dificultar copiar texto decorativo e salvar as imagens do convite */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

.sparkle-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,45,135,0.08) 0, transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(140,63,214,0.1) 0, transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(255,45,135,0.08) 0, transparent 45%),
    var(--cream);
}

img { max-width: 100%; display: block; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: 2.2rem 1rem 3rem;
  text-align: center;
  overflow: visible;
  background:
    radial-gradient(circle, rgba(255,255,255,0.95) 1px, transparent 1.2px) 3px 4px/18px 18px,
    radial-gradient(circle, rgba(255,255,255,0.75) 1px, transparent 1.2px) 12px 15px/27px 27px,
    radial-gradient(circle, rgba(255,45,135,0.55) 1.3px, transparent 1.5px) 6px 21px/31px 31px,
    radial-gradient(circle, rgba(140,63,214,0.5) 1.3px, transparent 1.5px) 21px 6px/35px 35px,
    radial-gradient(circle, rgba(255,215,120,0.45) 1.1px, transparent 1.3px) 28px 31px/47px 47px,
    linear-gradient(135deg, #ffd3ec 0%, #f6c6ef 20%, #e3c9f7 42%, #cfd0f5 58%, #f0c8e9 78%, #ffd3ec 100%);
  border-bottom: 6px solid var(--pink);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,0.45) 46%, transparent 62%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* area de colagem = largura inteira do hero, pros adesivos poderem se
   espalhar por todo o fundo (nao so grudados nas pontas) em telas largas */
.hero-stage {
  position: relative;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.foto-julia-frame {
  position: relative;
  width: min(260px, 68vw);
  aspect-ratio: 3 / 4;
  animation: wobble 5s ease-in-out infinite;
}

.foto-lights {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.light {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--c, #ffd23f) 55%, transparent 100%);
  box-shadow: 0 0 6px 2px var(--c, #ffd23f), 0 0 14px 5px var(--c, #ffd23f);
  animation: twinkleLight 1.8s ease-in-out infinite;
}

.foto-julia-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 0 0 3px var(--pink), 0 16px 28px rgba(0,0,0,0.35);
  background: var(--pink-soft);
  animation: glowPulse 3s ease-in-out infinite;
}

.foto-julia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 28%;
  transform: scale(1.45) translateY(3%);
}

.foto-sparkle {
  position: absolute;
  width: 38px;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  animation: twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.spark-tr { top: -16px; right: -12px; animation-delay: .3s; }
.spark-bl { bottom: -14px; left: -16px; width: 32px; animation-delay: 1s; }

@keyframes wobble {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(-0.5deg); }
}
@keyframes twinkleLight {
  0%, 100% { opacity: 0.35; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--pink), 0 16px 28px rgba(0,0,0,0.35), 0 0 14px 2px rgba(255,45,135,0.3); }
  50%      { box-shadow: 0 0 0 3px var(--pink), 0 16px 28px rgba(0,0,0,0.35), 0 0 26px 8px rgba(255,45,135,0.55); }
}
@keyframes twinkle {
  0%, 100% { transform: scale(0.85) rotate(-8deg); opacity: 0.75; }
  50%      { transform: scale(1.2) rotate(8deg); opacity: 1; }
}

.ransom-title {
  margin: 0;
  text-align: center;
}

.ransom-row {
  display: block;
  line-height: 1.08;
  margin-bottom: 2px;
}

.ransom-30 { margin: 2px 0; }

.letra {
  display: inline-block;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 6.6vw, 1.9rem);
  padding: 0.06em 0.22em;
  margin: 0 1.5px 4px;
  border-radius: 5px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}

.numero {
  font-size: clamp(2.6rem, 13vw, 3.8rem);
  padding: 0 0.14em;
  border-radius: 9px;
}

.r1 { transform: rotate(-6deg); }
.r2 { transform: rotate(4deg); }
.r3 { transform: rotate(-2deg); }

.c1 { background: var(--pink); color: #fff; }
.c2 { background: #1a1a1a; color: #fff; }
.c3 { background: var(--purple); color: #fff; }
.c4 { background: #fff6e4; color: var(--ink); }
.c5 { background: #2d5fff; color: #fff; }
.c6 { background: #ffd23f; color: var(--ink); }

@media (min-width: 640px) {
  .hero-layout { grid-template-columns: 42% 58%; justify-items: start; }
  .foto-julia-frame { margin-left: -1.2rem; }
  .ransom-title, .ransom-row { text-align: left; }
}

.subtitulo {
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.5rem;
  font-size: 1rem;
}

.info-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.info-card {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 0.7rem 1.1rem;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  box-shadow: 4px 4px 0 var(--pink);
}

.tilt-left { transform: rotate(-4deg); }
.tilt-right { transform: rotate(3deg); }

.info-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.info-value {
  font-family: 'Permanent Marker', cursive;
  font-size: 1.15rem;
  color: var(--ink);
}

.btn-maps {
  display: inline-block;
  margin-top: 0.5rem;
  align-self: flex-start;
  background: var(--pink);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s ease;
}
.btn-maps:hover { transform: translateY(-1px); }
.btn-maps:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--ink); }

.btn-cta {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.btn-cta:hover { transform: translateY(-2px); }
.btn-cta:active { transform: translateY(1px); box-shadow: 2px 2px 0 var(--ink); }

/* floating stickers - preenchem as laterais/topo/base do hero pra lembrar um recorte de revista */
.floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.floater {
  position: absolute;
  width: var(--w);
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}

/* faixa esquerda (coluna de fora) */
.f-disco    { --w: 88px; top: 1%;  left: 1%;  --r: -8deg;  animation-delay: 0s; }
.f-star2    { --w: 42px; top: 11%; left: 0%;  --r: 15deg;  animation-delay: 1.1s; }
.f-poodle   { --w: 74px; top: 18%; left: 2%;  --r: -5deg;  animation-delay: 1.5s; }
.f-tama     { --w: 58px; top: 29%; left: 0%;  --r: -10deg; animation-delay: .1s; }
.f-rebelde  { --w: 88px; top: 37%; left: 2%;  --r: -3deg;  animation-delay: .5s; }
.f-cds      { --w: 80px; top: 48%; left: 0%;  --r: 6deg;   animation-delay: .8s; }
.f-camera   { --w: 70px; top: 58%; left: 2%;  --r: -6deg;  animation-delay: 1s; }
.f-barbie   { --w: 78px; top: 68%; left: 0%;  --r: 5deg;   animation-delay: .3s; }
.f-heart2   { --w: 42px; top: 79%; left: 3%;  --r: 8deg;   animation-delay: .4s; }
.f-boneca   { --w: 72px; top: 88%; left: 0%;  --r: -8deg;  animation-delay: 1.3s; }
.f-star5    { --w: 34px; top: 97%; left: 5%;  --r: 12deg;  animation-delay: .6s; }

/* faixa direita (coluna de fora) */
.f-star1    { --w: 62px; top: 2%;  right: 2%; --r: 10deg;  animation-delay: .3s; }
.f-elenco   { --w: 90px; top: 11%; right: 0%; --r: 4deg;   animation-delay: .9s; }
.f-disney   { --w: 70px; top: 22%; right: 1%; --r: 4deg;   animation-delay: .8s; }
.f-mulher   { --w: 72px; top: 32%; right: 0%; --r: -4deg;  animation-delay: .2s; }
.f-star3    { --w: 38px; top: 42%; right: 3%; --r: -10deg; animation-delay: .7s; }
.f-pulseira { --w: 62px; top: 50%; right: 0%; --r: 8deg;   animation-delay: 1.2s; }
.f-batom    { --w: 62px; top: 60%; right: 1%; --r: 10deg;  animation-delay: .4s; }
.f-retrato  { --w: 74px; top: 70%; right: 0%; --r: -5deg;  animation-delay: 1.4s; }
.f-homem    { --w: 78px; top: 80%; right: 1%; --r: 5deg;   animation-delay: .6s; }
.f-heart1   { --w: 40px; top: 90%; right: 3%; --r: -6deg;  animation-delay: .9s; }
.f-star6    { --w: 34px; top: 98%; right: 6%; --r: -12deg; animation-delay: 1.1s; }

/* reforco espalhado mais perto do centro, sem cobrir titulo/foto/botao */
.f-phone    { --w: 70px; top: 5%;  left: 15%; --r: -12deg; animation-delay: .6s; }
.f-headset  { --w: 72px; top: 3%;  right: 16%;--r: 6deg;   animation-delay: 1.3s; }
.f-shoe     { --w: 72px; top: 95%; left: 16%; --r: 10deg;  animation-delay: .2s; }
.f-vaiser   { --w: 68px; top: 95%; right: 15%;--r: -6deg;  animation-delay: .5s; }
.f-heart3   { --w: 30px; top: 25%; left: 18%; --r: 8deg;   animation-delay: 1.6s; }
.f-heart4   { --w: 30px; top: 25%; right: 18%;--r: -8deg;  animation-delay: 1.7s; }
.f-star4    { --w: 30px; top: 44%; left: 17%; --r: 15deg;  animation-delay: .9s; }
.f-star7    { --w: 30px; top: 44%; right: 17%;--r: -15deg; animation-delay: 1s; }

/* ---- segunda camada: adesivos refinados novos, coluna um pouco mais pra dentro ---- */
.f2-cd1      { --w: 104px; top: 4%;  left: 9%;  --r: -10deg; animation-delay: .2s; }
.f2-hrosag1  { --w: 92px;  top: 15%; left: 8%;  --r: 8deg;   animation-delay: 1.4s; }
.f2-estp1    { --w: 60px;  top: 25%; left: 10%; --r: -12deg; animation-delay: .7s; }
.f2-hroxop   { --w: 50px;  top: 34%; left: 8%;  --r: 10deg;  animation-delay: 1.1s; }
.f2-borb1    { --w: 92px;  top: 43%; left: 9%;  --r: -6deg;  animation-delay: .4s; }
.f2-hprata1  { --w: 84px;  top: 53%; left: 8%;  --r: 10deg;  animation-delay: .9s; }
.f2-estd     { --w: 60px;  top: 63%; left: 10%; --r: -8deg;  animation-delay: .1s; }
.f2-hroxomini{ --w: 38px;  top: 73%; left: 8%;  --r: 14deg;  animation-delay: 1.6s; }
.f2-estx1    { --w: 58px;  top: 83%; left: 9%;  --r: -10deg; animation-delay: .5s; }
.f2-hrosap   { --w: 48px;  top: 93%; left: 8%;  --r: 8deg;   animation-delay: 1.2s; }

.f2-cd2      { --w: 104px; top: 4%;  right: 9%;  --r: 10deg;  animation-delay: .3s; }
.f2-hrosag2  { --w: 92px;  top: 15%; right: 8%;  --r: -8deg;  animation-delay: 1.5s; }
.f2-estp2    { --w: 60px;  top: 25%; right: 10%; --r: 12deg;  animation-delay: .8s; }
.f2-borb2    { --w: 92px;  top: 34%; right: 9%;  --r: 8deg;   animation-delay: .2s; }
.f2-hprata2  { --w: 84px;  top: 44%; right: 8%;  --r: -10deg; animation-delay: 1s; }
.f2-estp3    { --w: 60px;  top: 54%; right: 10%; --r: 10deg;  animation-delay: .6s; }
.f2-hrosam   { --w: 70px;  top: 64%; right: 8%;  --r: -8deg;  animation-delay: .1s; }
.f2-estx2    { --w: 58px;  top: 74%; right: 9%;  --r: 10deg;  animation-delay: 1.3s; }
.f2-estr     { --w: 62px;  top: 84%; right: 8%;  --r: -12deg; animation-delay: .7s; }
.f2-phone    { --w: 92px;  top: 94%; right: 9%;  --r: 8deg;   animation-delay: 1.1s; }

/* disco ball novo no topo, centralizado */
.f2-disco {
  --w: 110px;
  top: -3%;
  left: 50%;
  --r: 0deg;
  transform: translateX(-50%) rotate(var(--r));
  animation-delay: .4s;
}
@keyframes floatCenter {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}
.f2-disco { animation-name: floatCenter; }

/* fitas de onca nos cantos, tipo moldura */
.f2-fita1 { --w: 190px; bottom: -3%; left: -6%;  --r: -16deg; animation-delay: .5s; }
.f2-fita2 { --w: 190px; bottom: -3%; right: -6%; --r: 16deg;  animation-delay: .9s; }

/* camada "ponte": so aparece em telas largas, preenche o vao entre as colunas
   de fora e o conteudo central (em telas estreitas essas posicoes cairiam em
   cima do texto, entao ficam escondidas ate la embaixo) */
.f-star8, .f-heart5, .f2-estp4, .f2-hroxop2, .f2-borb3, .f2-estd2,
.f-heart6, .f2-estp5, .f-star9, .f2-hrosap2, .f2-borb4, .f2-estx3 {
  display: none;
}

@media (min-width: 1050px) {
  .f-star8, .f-heart5, .f2-estp4, .f2-hroxop2, .f2-borb3, .f2-estd2,
  .f-heart6, .f2-estp5, .f-star9, .f2-hrosap2, .f2-borb4, .f2-estx3 {
    display: block;
  }

  .f-star8    { --w: 34px; top: 4%;  left: 24%; --r: 12deg;  animation-delay: .2s; }
  .f2-estp4   { --w: 46px; top: 16%; left: 28%; --r: -10deg; animation-delay: .6s; }
  .f-heart5   { --w: 36px; top: 30%; left: 24%; --r: 8deg;   animation-delay: 1s; }
  .f2-hroxop2 { --w: 32px; top: 44%; left: 29%; --r: -8deg;  animation-delay: .4s; }
  .f2-borb3   { --w: 54px; top: 58%; left: 24%; --r: 6deg;   animation-delay: .8s; }
  .f2-estd2   { --w: 38px; top: 73%; left: 28%; --r: -12deg; animation-delay: 1.2s; }

  .f-heart6   { --w: 36px; top: 4%;  right: 24%; --r: -8deg;  animation-delay: .3s; }
  .f2-estp5   { --w: 46px; top: 16%; right: 28%; --r: 10deg;  animation-delay: .7s; }
  .f-star9    { --w: 34px; top: 30%; right: 24%; --r: -12deg; animation-delay: 1.1s; }
  .f2-hrosap2 { --w: 32px; top: 44%; right: 29%; --r: 8deg;   animation-delay: .5s; }
  .f2-borb4   { --w: 54px; top: 58%; right: 24%; --r: -6deg;  animation-delay: .9s; }
  .f2-estx3   { --w: 38px; top: 73%; right: 28%; --r: 12deg;  animation-delay: 1.3s; }
}

@media (max-width: 650px) {
  .floater { width: calc(var(--w) * 0.62); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
}
@media (max-width: 480px) {
  .floater { width: calc(var(--w) * 0.5); }
}

/* ---------- SECTIONS ---------- */
.card-section {
  max-width: 640px;
  margin: 2.2rem auto;
  padding: 1.8rem 1.3rem;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--purple);
  position: relative;
}

.section-title {
  font-family: 'Permanent Marker', cursive;
  color: var(--pink-deep);
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0 0.2rem;
}

.section-sub {
  text-align: center;
  margin: 0 0 1.3rem;
  color: #6b5a60;
  font-weight: 600;
}

/* ---------- SEM CONVITE ---------- */
.sem-convite {
  text-align: center;
  background: #fff0f8;
  border: 3px dashed var(--pink);
  border-radius: 14px;
  padding: 1.6rem 1.2rem;
}
.sem-convite-emoji { font-size: 2.6rem; margin: 0 0 0.4rem; }
.sem-convite-titulo {
  font-family: 'Permanent Marker', cursive;
  color: var(--pink-deep);
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}
.sem-convite-texto { margin: 0; color: #6b5a60; font-weight: 600; }

/* ---------- FORM ---------- */
.rsvp-form { display: flex; flex-direction: column; gap: 1.1rem; }
.rsvp-form[hidden] { display: none; }

.campo { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 700; }

.campo input[type="text"],
.campo input[type="number"],
.campo textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 2.5px solid var(--ink);
  background: #fff;
  resize: vertical;
}

.campo input:focus, .campo textarea:focus {
  outline: 3px solid var(--pink-soft);
  border-color: var(--pink);
}

.campo-radio { border: none; padding: 0; margin: 0; }
.campo-radio legend { font-weight: 700; margin-bottom: 0.4rem; padding: 0; }

.radio-group { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.radio-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 600;
  flex: 1 1 auto;
  justify-content: center;
}

.radio-opt:has(input:checked) {
  background: var(--pink-soft);
  border-color: var(--pink);
}

.radio-opt input { accent-color: var(--pink); }

.btn-enviar { align-self: center; margin-top: 0.3rem; }

.form-status {
  text-align: center;
  font-weight: 700;
  min-height: 1.4em;
}
.form-status.ok { color: #0d8a4e; }
.form-status.erro { color: #c81d4e; }

.identidade-info {
  background: var(--pink-soft);
  border: 2px solid var(--pink);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: center;
  margin: 0 0 1rem;
}

.campo input[readonly] {
  background: #f1ecec;
  color: #6b5a60;
}

.resumo {
  text-align: center;
  margin-top: 1.2rem;
  font-weight: 700;
  color: var(--purple);
}

/* ---------- MURAL ---------- */
.burnbook-section { text-align: center; }
.burnbook-img {
  width: 110px;
  margin: 0 auto 0.5rem;
  border-radius: 10px;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--pink);
  transform: rotate(-3deg);
}

.mural {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
  text-align: left;
}

.recado {
  background: #fffceb;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 0.9rem 1rem;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.15);
  transform: rotate(var(--rot, -1deg));
  font-size: 0.92rem;
}
.recado:nth-child(3n+1) { --rot: -2deg; background: #fff0f8; }
.recado:nth-child(3n+2) { --rot: 1.5deg; background: #f3ecff; }
.recado:nth-child(3n)   { --rot: -1deg; background: #fffceb; }

.recado p { margin: 0 0 0.5rem; white-space: pre-wrap; word-break: break-word; }
.recado .recado-nome {
  font-family: 'Permanent Marker', cursive;
  color: var(--pink-deep);
  font-size: 1rem;
}
.recado .recado-data { font-size: 0.75rem; color: #8a7a80; }

.mural-vazio { text-align: center; color: #8a7a80; font-weight: 600; grid-column: 1 / -1; }

/* ---------- FOOTER ---------- */
.footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  color: #8a7a80;
  font-weight: 600;
}
.footer-star { width: 34px; margin: 0 auto 0.5rem; opacity: 0.8; }

/* ---------- responsive tweaks ---------- */
@media (max-width: 420px) {
  .info-cards { gap: 0.6rem; }
  .info-card { min-width: 130px; padding: 0.6rem 0.8rem; }
}