/* =========================================================
   Amanda & Leo · 1 ano — estilos
   ========================================================= */
:root {
  color-scheme: light;
  --creme: #fbf3ee;
  --papel: #fffaf6;
  --linha-papel: #f0dcd6;
  --rose-claro: #f6dcd8;
  --rose: #e7a3a6;
  --rose-forte: #cf6f7f;
  --vinho: #7d2f45;
  --tinta: #4b3a3d;
  --tinta-suave: #8a7376;
  --dourado: #c9a46a;
  --fita-rosa: rgba(240, 175, 175, 0.72);
  --fita-verde: rgba(176, 212, 192, 0.75);
  --fita-amarela: rgba(246, 222, 156, 0.8);
  --sombra: 0 10px 30px -12px rgba(125, 47, 69, 0.35);
  --sombra-leve: 0 4px 14px -6px rgba(125, 47, 69, 0.28);
  --serifa: "Cormorant Garamond", Georgia, serif;
  --mao: "Caveat", "Segoe Print", cursive;
  --texto: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--texto);
  color: var(--tinta);
  background-color: var(--creme);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(231, 163, 166, 0.18), transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(201, 164, 106, 0.12), transparent 45%);
  background-attachment: fixed;
  line-height: 1.6;
  overflow-x: hidden;
}
body.travado { overflow: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Corações flutuando no fundo ---------- */
#coracoes-fundo { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.coracao-flutuante {
  position: absolute; bottom: -40px;
  color: var(--rose);
  animation: subir linear forwards;
  will-change: transform, opacity;
}
@keyframes subir {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--op, .5); }
  100% { transform: translate(var(--dx, 30px), -110vh) rotate(var(--rot, 25deg)); opacity: 0; }
}

/* ---------- Botões ---------- */
.botao {
  appearance: none; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--rose-forte), var(--vinho));
  color: #fff; font-weight: 700; letter-spacing: .02em;
  padding: .8em 1.5em; border-radius: 999px;
  box-shadow: var(--sombra-leve);
  transition: transform .2s ease, box-shadow .2s ease;
}
.botao:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.botao:active { transform: translateY(0) scale(.97); }
.botao:focus-visible, .link-dica:focus-visible, .polaroid-btn:focus-visible, .carta-mem:focus-visible,
.envelope:focus-visible, .pote:focus-visible, .foto-galeria:focus-visible {
  outline: 3px solid var(--dourado); outline-offset: 4px;
}
.link-dica {
  background: none; border: 0; cursor: pointer; color: var(--tinta-suave);
  font-family: var(--mao); font-size: 1.25rem; text-decoration: underline dotted; margin-top: .5rem;
}

/* =========================================================
   PORTÃO
   ========================================================= */
.portao {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 16px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.7), transparent 60%),
    var(--creme);
  transition: opacity .9s ease, visibility .9s;
}
.portao.saindo { opacity: 0; visibility: hidden; }
.envelope-portao {
  position: relative; width: min(420px, 100%);
  background: var(--papel);
  border-radius: 6px;
  padding: 3.2rem 1.6rem 1.8rem;
  text-align: center;
  box-shadow: var(--sombra);
  border: 1px solid var(--linha-papel);
  background-image: repeating-linear-gradient(transparent 0 31px, var(--linha-papel) 31px 32px);
}
.envelope-portao::before {
  content: ""; position: absolute; left: 50%; top: -14px; width: 120px; height: 28px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--fita-rosa);
}
.selo {
  width: 64px; height: 64px; margin: 0 auto .6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #d9707f, var(--vinho));
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.25), 0 6px 14px -4px rgba(125,47,69,.6);
}
.selo svg { width: 30px; fill: rgba(255,255,255,.85); }
.portao.abrindo .selo { animation: quebrar .6s ease forwards; }
@keyframes quebrar { 50% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(0) rotate(20deg); opacity: 0; } }
.portao-sobre { font-family: var(--mao); font-size: 1.5rem; margin: 0; color: var(--tinta-suave); }
.portao-titulo { font-family: var(--serifa); font-weight: 600; font-size: 2.2rem; margin: .2rem 0 .4rem; color: var(--vinho); }
.portao-pergunta { font-size: 1.1rem; margin: 0 0 1.2rem; }
#form-portao { display: flex; flex-direction: column; gap: .7rem; }
#form-portao input {
  font: inherit; font-size: 1.1rem; text-align: center;
  padding: .8em 1em; border-radius: 999px;
  border: 2px solid var(--rose-claro); background: #fff; color: var(--tinta);
  outline: none; transition: border-color .2s;
}
#form-portao input:focus { border-color: var(--rose); }
.portao-erro { min-height: 1.6em; margin: .8rem 0 0; font-family: var(--mao); font-size: 1.4rem; color: var(--rose-forte); }
.tremer { animation: tremer .45s ease; }
@keyframes tremer { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }

/* =========================================================
   LAYOUT GERAL
   ========================================================= */
main { position: relative; z-index: 1; }
.secao { padding: 5rem 16px; max-width: 1080px; margin: 0 auto; text-align: center; }
.secao-papel {
  max-width: none;
  background: rgba(255, 250, 246, .75);
  border-top: 1px dashed var(--linha-papel);
  border-bottom: 1px dashed var(--linha-papel);
}
.secao-papel > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.titulo-secao {
  font-family: var(--serifa); font-weight: 600; color: var(--vinho);
  font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; margin: 0 0 .6rem;
}
.instrucao { font-family: var(--mao); font-size: 1.4rem; color: var(--tinta-suave); margin: 0 0 2rem; }

.revelar { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.revelar.visivel { opacity: 1; transform: none; }

/* ---------- Capa ---------- */
.capa {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3rem 16px 5rem; position: relative;
}
.capa-nomes { font-family: var(--mao); font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0; color: var(--rose-forte); }
.e-comercial { font-family: var(--serifa); font-style: italic; color: var(--dourado); }
.capa-titulo {
  font-family: var(--serifa); font-weight: 500; font-style: italic;
  font-size: clamp(3.4rem, 15vw, 7.5rem); line-height: .95; margin: .2rem 0 .6rem; color: var(--vinho);
}
.capa-datas { letter-spacing: .3em; text-transform: uppercase; font-size: .8rem; color: var(--tinta-suave); margin: 0 0 1.2rem; }
.capa-sub { max-width: 30ch; font-size: 1.15rem; margin: 0; }
.capa > * { animation: aparecer 1.2s ease both; }
.capa > *:nth-child(2) { animation-delay: .25s; }
.capa > *:nth-child(3) { animation-delay: .5s; }
.capa > *:nth-child(4) { animation-delay: .75s; }
.capa > *:nth-child(5) { animation-delay: 1.2s; }
@keyframes aparecer { from { opacity: 0; transform: translateY(20px); } }
.seta-baixo {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  text-decoration: none; color: var(--tinta-suave); font-family: var(--mao); font-size: 1.2rem;
}
.seta-baixo svg { width: 28px; fill: none; stroke: currentColor; stroke-width: 2; animation: pulinho 1.8s ease-in-out infinite; }
@keyframes pulinho { 50% { transform: translateY(6px); } }

/* ---------- Contador ---------- */
.contador-frase { font-family: var(--mao); font-size: 1.6rem; margin: 0 0 1.6rem; color: var(--rose-forte); }
.contador-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 720px; margin: 0 auto; }
.contador-item {
  background: var(--papel); border-radius: 14px; padding: 1.2rem .4rem;
  box-shadow: var(--sombra-leve); border: 1px solid var(--linha-papel);
}
.contador-item span {
  display: block; font-family: var(--serifa); font-weight: 600; color: var(--vinho);
  font-size: clamp(1.8rem, 7vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.contador-item small { text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; color: var(--tinta-suave); }
.curiosidades { list-style: none; padding: 0; margin: 2.2rem auto 0; max-width: 560px; display: grid; gap: .6rem; }
.curiosidades li { font-size: 1.02rem; }
.curiosidades strong { color: var(--rose-forte); font-variant-numeric: tabular-nums; }

/* ---------- Polaroid + fita ---------- */
.polaroid {
  background: #fff; padding: 12px 12px 14px; border-radius: 3px;
  box-shadow: var(--sombra); position: relative;
}
.fita {
  position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; z-index: 2;
  transform: translateX(-50%) rotate(var(--r, -4deg));
  background: var(--fita-rosa);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.fita.verde { background: var(--fita-verde); }
.fita.amarela { background: var(--fita-amarela); }
.foto-moldura { aspect-ratio: 1 / 1; overflow: hidden; background: var(--rose-claro); }
.foto-moldura img { width: 100%; height: 100%; object-fit: cover; }
.foto-vazia {
  width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: .2rem;
  background: linear-gradient(135deg, #f8e3df, #f3d2d2 50%, #f6e6d8);
  color: var(--rose-forte); font-family: var(--mao); font-size: 1.3rem;
}
.foto-vazia span:first-child { font-size: 2.4rem; }

/* ---------- Linha do tempo ---------- */
.linha-tempo { list-style: none; padding: 0; margin: 0 auto; position: relative; max-width: 900px; }
.linha-tempo::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
  background: repeating-linear-gradient(var(--rose) 0 8px, transparent 8px 16px);
}
.momento { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem; position: relative; }
.momento::after {
  content: "❤"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--rose-forte); background: var(--creme); padding: 4px; font-size: 1.1rem; line-height: 1;
}
.momento:nth-child(even) .momento-foto { order: 2; }
.momento-foto { perspective: 1200px; }
.polaroid-btn {
  display: block; width: min(300px, 100%); margin: 0 auto; border: 0; padding: 0; background: none; cursor: pointer;
  transform: rotate(var(--inclina, -3deg)); transition: transform .3s ease;
}
.polaroid-btn:hover { transform: rotate(0deg) scale(1.02); }
.virador { display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.3,.5,1); }
.virador > * { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.polaroid-btn.virada .virador { transform: rotateY(180deg); }
.verso {
  transform: rotateY(180deg);
  display: grid; place-items: center; padding: 1.6rem;
  background: #fffdf8;
  background-image: repeating-linear-gradient(transparent 0 27px, var(--linha-papel) 27px 28px);
  font-family: var(--mao); font-size: 1.7rem; line-height: 1.15; color: var(--vinho);
}
.legenda-polaroid { font-family: var(--mao); font-size: 1.35rem; margin-top: .4rem; color: var(--tinta); }
.momento-texto { text-align: left; }
.momento:nth-child(even) .momento-texto { text-align: right; }
.momento-data { font-family: var(--mao); font-size: 1.4rem; color: var(--rose-forte); margin: 0; }
.momento-titulo { font-family: var(--serifa); font-size: 2rem; font-weight: 600; color: var(--vinho); margin: 0 0 .4rem; line-height: 1.1; }
.momento-desc { margin: 0; font-size: 1.05rem; }

/* ---------- Mural ---------- */
.mural { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 2rem; }
.postit {
  width: 180px; min-height: 160px; padding: 1.6rem 1rem 1rem;
  font-family: var(--mao); font-size: 1.5rem; line-height: 1.15; color: #4a3b2a;
  display: grid; place-items: center; text-align: center;
  box-shadow: 0 12px 18px -10px rgba(0,0,0,.35);
  transform: rotate(var(--r, 2deg));
  position: relative; cursor: default; transition: transform .25s ease;
}
.postit:hover { transform: rotate(0deg) scale(1.06); z-index: 2; }
.postit::before {
  content: ""; position: absolute; top: 10px; left: 50%; width: 14px; height: 14px; border-radius: 50%;
  transform: translateX(-50%); background: radial-gradient(circle at 35% 35%, #ff8b9b, #b4364d);
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
}

/* ---------- Carta ---------- */
.envelope-wrap { display: grid; place-items: center; padding: 2rem 0 1rem; }
.envelope {
  position: relative; width: min(340px, 86vw); aspect-ratio: 1.55; border: 0; padding: 0; cursor: pointer; background: none;
  filter: drop-shadow(0 16px 20px rgba(125,47,69,.25));
  animation: flutuar 3.5s ease-in-out infinite;
}
@keyframes flutuar { 50% { transform: translateY(-8px) rotate(-1deg); } }
.envelope span { position: absolute; display: block; }
.env-fundo { inset: 0; background: #f1c9c6; border-radius: 6px; }
.env-frente {
  inset: 0; border-radius: 6px;
  background:
    linear-gradient(to top right, #f7d9d5 50%, transparent 50.5%) left / 50.5% 100% no-repeat,
    linear-gradient(to top left,  #f4d1cd 50%, transparent 50.5%) right / 50.5% 100% no-repeat;
}
.env-aba {
  left: 0; right: 0; top: 0; height: 58%; transform-origin: top; z-index: 2;
  background: linear-gradient(to bottom, #e9b4b2, #e2a6a6);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform .7s ease;
}
.env-selo {
  z-index: 3; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid !important; place-items: center;
  background: radial-gradient(circle at 35% 30%, #d9707f, var(--vinho)); color: #fff; font-size: 1.3rem;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.25);
  transition: transform .4s ease, opacity .4s;
}
.env-dica { left: 0; right: 0; bottom: -2.4rem; font-family: var(--mao); font-size: 1.3rem; color: var(--tinta-suave); }
.envelope.aberto { animation: none; }
.envelope.aberto .env-aba { transform: rotateX(180deg); z-index: 0; }
.envelope.aberto .env-selo { transform: translate(-50%, -50%) scale(0); opacity: 0; }

.carta {
  max-width: 640px; margin: 1rem auto 0; text-align: left;
  background: var(--papel); padding: 2.6rem 1.6rem 2rem 2.6rem; border-radius: 4px; position: relative;
  box-shadow: var(--sombra);
  background-image:
    linear-gradient(90deg, transparent 2.6rem, rgba(207,111,127,.35) 2.6rem 2.7rem, transparent 2.7rem),
    repeating-linear-gradient(transparent 0 35px, var(--linha-papel) 35px 36px);
  animation: aparecer .9s ease both;
}
.carta::before {
  content: ""; position: absolute; top: -12px; right: 18%; width: 110px; height: 26px; transform: rotate(4deg);
  background: var(--fita-verde);
}
.carta-saudacao, .carta-texto p, .carta-assinatura {
  font-family: var(--mao); font-size: 1.65rem; line-height: 36px; margin: 0 0 36px; color: #3d3050;
}
.carta-assinatura { text-align: right; white-space: pre-line; color: var(--vinho); margin-bottom: 0; }
.cursor::after { content: "|"; animation: piscar 1s steps(1) infinite; color: var(--rose-forte); }
@keyframes piscar { 50% { opacity: 0; } }
#pular-carta { display: block; margin: 1.2rem auto 0; }

/* ---------- Galeria ---------- */
.galeria { columns: 3 220px; column-gap: 26px; margin-top: 2.4rem; }
.foto-galeria {
  break-inside: avoid; display: block; width: 100%; margin: 0 0 30px; border: 0; cursor: zoom-in;
  transform: rotate(var(--inclina, 2deg)); transition: transform .3s ease;
}
.foto-galeria:hover { transform: rotate(0) scale(1.03); z-index: 2; position: relative; }

.lightbox {
  position: fixed; inset: 0; z-index: 60; background: rgba(60, 30, 40, .82);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 16px;
  animation: aparecer .3s ease both;
}
.lb-polaroid { margin: 0 auto; background: #fff; padding: 14px 14px 10px; width: min(560px, 100%); box-shadow: var(--sombra); }
.lb-img { aspect-ratio: auto; max-height: 72vh; display: grid; place-items: center; background: #f6e8e4; }
.lb-img img { max-height: 72vh; width: auto; object-fit: contain; }
.lb-img .foto-vazia { aspect-ratio: 1; }
.lb-polaroid figcaption { font-family: var(--mao); font-size: 1.6rem; text-align: center; padding-top: .4rem; }
.lb-fechar, .lb-nav { background: none; border: 0; color: #fff; cursor: pointer; font-size: 2.6rem; line-height: 1; padding: .2em .4em; }
.lb-fechar { position: absolute; top: 8px; right: 12px; }

/* ---------- Pote ---------- */
.pote-area { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.4rem; min-height: 320px; }
.pote {
  position: relative; width: 200px; height: 250px; border: 0; background: none; padding: 0; cursor: pointer;
  transition: transform .2s ease;
}
.pote:hover { transform: rotate(-3deg); }
.pote:active { transform: rotate(4deg) scale(.97); }
.pote span { position: absolute; display: block; }
.pote-tampa {
  left: 38px; right: 38px; top: 0; height: 30px; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(var(--dourado), #a7864f); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12);
}
.pote-vidro {
  left: 14px; right: 14px; top: 26px; bottom: 0; border-radius: 34px 34px 40px 40px;
  background: linear-gradient(110deg, rgba(255,255,255,.75), rgba(255,255,255,.25) 40%, rgba(255,255,255,.55));
  border: 3px solid rgba(207, 160, 160, .55);
  overflow: hidden;
}
.pote-vidro::after {
  content: ""; position: absolute; top: 18px; left: 18px; width: 14px; height: 60%; border-radius: 10px;
  background: rgba(255,255,255,.7);
}
.papelzinho { position: absolute; font-size: 1.4rem; line-height: 1; }
.pote-rotulo {
  left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-4deg); z-index: 2;
  background: var(--papel); padding: .2rem .9rem; border-radius: 4px; box-shadow: var(--sombra-leve);
  font-family: var(--mao); font-size: 1.5rem; color: var(--vinho);
}
.bilhete {
  width: min(320px, 100%); background: #fff; padding: 1.6rem 1.4rem 1.2rem; position: relative; text-align: center;
  box-shadow: var(--sombra); transform: rotate(-2deg);
  background-image: repeating-linear-gradient(transparent 0 31px, var(--linha-papel) 31px 32px);
}
.bilhete.novo { animation: sairDoPote .6s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes sairDoPote { from { opacity: 0; transform: translateY(60px) rotate(12deg) scale(.6); } }
.bilhete-num { position: absolute; top: .4rem; right: .8rem; font-family: var(--mao); color: var(--rose-forte); font-size: 1.1rem; }
.bilhete p { font-family: var(--mao); font-size: 1.7rem; line-height: 1.2; margin: .4rem 0 0; color: #3d3050; }

/* ---------- Jogo da memória ---------- */
.memoria {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: 520px; margin: 0 auto;
}
.carta-mem { aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; perspective: 800px; }
.carta-mem .virador { height: 100%; transition-duration: .5s; }
.carta-mem .lado {
  border-radius: 10px; display: grid; place-items: center; overflow: hidden; box-shadow: var(--sombra-leve);
}
.carta-mem .costas {
  background: var(--rose-forte);
  background-image:
    radial-gradient(circle, rgba(255,255,255,.25) 2px, transparent 2.5px);
  background-size: 14px 14px;
  color: #fff; font-size: 1.6rem; border: 4px solid #fff;
}
.carta-mem .frente { transform: rotateY(180deg); background: #fff; font-size: clamp(1.8rem, 8vw, 2.6rem); border: 4px solid #fff; }
.carta-mem .frente img { width: 100%; height: 100%; object-fit: cover; }
.carta-mem.virada .virador { transform: rotateY(180deg); }
.carta-mem.par .frente { box-shadow: 0 0 0 3px var(--dourado), var(--sombra-leve); }
.carta-mem.par { animation: pulinhoPar .5s ease; }
@keyframes pulinhoPar { 50% { transform: scale(1.08); } }
.jogo-vitoria { font-family: var(--mao); font-size: 1.8rem; color: var(--vinho); margin: 1.6rem 0 0; animation: aparecer .6s ease both; }

/* ---------- Raspadinha ---------- */
.raspadinha {
  position: relative; width: min(420px, 100%); aspect-ratio: 1.6; margin: 2rem auto 0;
  border-radius: 16px; overflow: hidden; box-shadow: var(--sombra);
  border: 6px solid #fff; background: var(--papel);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.raspadinha-premio {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .2rem; padding: 1rem;
  background: radial-gradient(circle at 50% 40%, #fff, #fbe8e4);
}
.raspadinha-icone { font-size: 2.4rem; }
.raspadinha-texto { font-family: var(--serifa); font-weight: 600; font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1.15; color: var(--vinho); margin: 0; }
.raspadinha small { color: var(--tinta-suave); }
#raspadinha-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity .8s ease; }
#raspadinha-canvas.sumindo { opacity: 0; pointer-events: none; }

/* ---------- Pedido ---------- */
.pedido { min-height: 70svh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pedido-botoes { position: relative; width: min(520px, 100%); height: 200px; margin-top: 1.4rem; }
#botao-sim {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--escala, 1));
  transition: transform .3s ease; font-size: 1.2rem; z-index: 2;
}
#botao-sim:hover { transform: translate(-50%, -54%) scale(var(--escala, 1)); }
.botao-nao {
  position: absolute; left: 50%; top: calc(50% + 70px); transform: translateX(-50%);
  background: #fff; color: var(--tinta-suave); box-shadow: var(--sombra-leve);
  transition: left .25s ease, top .25s ease; padding: .55em 1.1em; font-size: .95rem;
}
.botao-nao:hover { transform: translateX(-50%); }
.pedido-resposta { font-family: var(--mao); font-size: clamp(1.8rem, 6vw, 2.6rem); color: var(--vinho); max-width: 22ch; line-height: 1.2; animation: aparecer .8s ease both; }

/* ---------- Rodapé / modal / música ---------- */
.rodape { text-align: center; padding: 2rem 16px 3rem; color: var(--tinta-suave); font-family: var(--mao); font-size: 1.4rem; }
.rodape p { margin: 0; }
.coracao-rodape { background: none; border: 0; cursor: pointer; color: var(--rose-forte); font-size: 1.4rem; padding: 0 .1em; transition: transform .15s; }
.coracao-rodape:active { transform: scale(1.4); }
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(60,30,40,.55); animation: aparecer .3s ease both; }
.modal-cartao {
  width: min(380px, 100%); background: var(--papel); padding: 2rem 1.4rem 1.4rem; text-align: center; border-radius: 6px; box-shadow: var(--sombra);
  font-family: var(--mao); font-size: 1.7rem; line-height: 1.2; color: var(--vinho);
}
.modal-cartao p { margin: 0 0 1.2rem; }
.botao-musica {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 48px; height: 48px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--papel); color: var(--vinho); font-size: 1.4rem; box-shadow: var(--sombra);
}
.botao-musica.tocando { animation: girar 4s linear infinite; background: var(--rose-claro); }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Explosão de corações ---------- */
.particula { position: fixed; z-index: 80; pointer-events: none; font-size: 1.4rem; line-height: 1; will-change: transform, opacity; }

/* =========================================================
   CELULAR
   ========================================================= */
@media (max-width: 720px) {
  .secao { padding: 4rem 16px; }
  .contador-grade { grid-template-columns: repeat(2, 1fr); }
  .linha-tempo::before { left: 14px; }
  .momento { grid-template-columns: 1fr; gap: 1.4rem; padding-left: 40px; margin-bottom: 3.4rem; }
  .momento::after { left: 14px; top: 0; }
  .momento:nth-child(even) .momento-foto { order: 0; }
  .momento-texto, .momento:nth-child(even) .momento-texto { text-align: left; }
  .postit { width: 150px; min-height: 140px; font-size: 1.35rem; }
  .galeria { columns: 2 140px; column-gap: 16px; }
  .foto-galeria { margin-bottom: 20px; }
  .lightbox { grid-template-columns: 1fr; }
  .lb-nav { position: absolute; bottom: 16px; }
  .lb-ant { left: 20%; } .lb-prox { right: 20%; }
  .carta { padding: 2.2rem 1rem 1.6rem 2.2rem; background-image:
    linear-gradient(90deg, transparent 1.7rem, rgba(207,111,127,.35) 1.7rem 1.8rem, transparent 1.8rem),
    repeating-linear-gradient(transparent 0 35px, var(--linha-papel) 35px 36px); }
  .carta-saudacao, .carta-texto p, .carta-assinatura { font-size: 1.45rem; }
  .memoria { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; }
}