/* Paleta tirada do kit "Sr. Urso Rosa" */
:root {
  --rosa: #F9A8AF;
  --rosa-claro: #FCD9DB;
  --rosa-fundo: #FBEDEA;
  --amarelo: #FFE680;
  --salvia: #ACB893;
  --oliva: #7F8866;
  --caramelo: #C9A387;
  --bege: #F2E2D2;
  --papel: #FFFBF7;
  --cacau: #5B4136;
  --cacau-suave: #8C7064;
  --script: "Dancing Script", cursive;
  --sans: "Quicksand", system-ui, sans-serif;
  /* quadriculado torto do kit */
  --grade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg stroke='%23E9CDB8' stroke-width='3' fill='none' opacity='.4'%3E%3Cpath d='M0 22 Q120 26 240 22M0 88 Q120 80 240 88M0 150 Q120 158 240 150M0 206 Q120 200 240 206M30 0 Q24 120 30 240M96 0 Q102 120 96 240M158 0 Q152 120 158 240M214 0 Q220 120 214 240'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
/* "hidden" sempre esconde, mesmo em elementos que definem display (form, cards…) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--rosa-fundo) var(--grade);
  color: var(--cacau);
  font: 500 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
h2, h3 { font-family: var(--script); font-weight: 700; margin: 0; line-height: 1.1; }
:focus-visible { outline: 3px solid var(--oliva); outline-offset: 3px; border-radius: 8px; }

/* ---------- Cena de abertura ---------- */
.cena {
  position: relative;
  min-height: min(100svh, 980px);
  overflow: hidden;
  background: linear-gradient(#FDF3EF 0%, #FBE6E3 70%, #F6E2D6 100%);
  display: flex; flex-direction: column; align-items: center;
}
.sol {
  position: absolute; right: 8%; top: 18%;
  width: clamp(120px, 22vw, 260px); aspect-ratio: 1; border-radius: 50%;
  background: var(--amarelo); opacity: .85;
}
.nuvem {
  position: absolute; background: #fff; border-radius: 999px; height: 34px;
  animation: flutua 14s ease-in-out infinite alternate;
}
.nuvem::before, .nuvem::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.nuvem::before { width: 46%; aspect-ratio: 1; left: 14%; bottom: 40%; }
.nuvem::after { width: 30%; aspect-ratio: 1; right: 16%; bottom: 45%; }
.n1 { width: 170px; left: 6%; top: 26%; }
.n2 { width: 120px; right: 24%; top: 40%; animation-duration: 18s; }
.n3 { width: 140px; left: 30%; top: 14%; opacity: .8; animation-duration: 22s; }
@keyframes flutua { to { transform: translateX(28px); } }

.varal { position: relative; width: 100%; height: clamp(80px, 12vw, 130px); display: flex; justify-content: space-around; padding: 0 3%; z-index: 2; }
.fio { position: absolute; inset: 0 0 auto 0; width: 100%; height: 50%; }
.fio path { fill: none; stroke: var(--caramelo); stroke-width: 2; vector-effect: non-scaling-stroke; }
.varal img {
  width: clamp(48px, 8.5vw, 104px); height: auto; align-self: flex-start;
  margin-top: calc(sin(var(--i) / 6 * 3.1416) * clamp(14px, 3vw, 32px));
  transform-origin: top center;
  animation: cai .7s cubic-bezier(.3, 1.4, .5, 1) backwards, balanca 5s ease-in-out 1.2s infinite alternate;
  animation-delay: calc(var(--i) * 80ms), calc(1.2s + var(--i) * 300ms);
}
@keyframes cai { from { transform: translateY(-120%) rotate(-8deg); } }
@keyframes balanca { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

.faixa { margin: clamp(8px, 3vw, 24px) 0 0; z-index: 3; width: min(560px, 84vw); animation: entra .8s ease-out .5s backwards; }
.faixa img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(185, 110, 115, .25)); }
@keyframes entra { from { opacity: 0; transform: translateY(16px) scale(.96); } }

.palco { position: relative; flex: 1; width: 100%; max-width: 1200px; min-height: clamp(300px, 52vw, 520px); }
.urso-wrap {
  position: absolute; left: 50%; bottom: 4%; width: clamp(190px, 34vw, 340px); translate: -50% 0; z-index: 3;
  animation: sobe 1s cubic-bezier(.2, 1.3, .4, 1) .9s backwards;
}
.urso { display: block; width: 100%; height: auto; }
@keyframes sobe { from { transform: translateY(70%); } }
.arvore { position: absolute; bottom: 6%; height: auto; z-index: 1; }
.a1 { width: clamp(110px, 17vw, 210px); left: 2%; }
.a2 { width: clamp(80px, 12vw, 150px); right: 4%; bottom: 10%; }
.cogumelo { position: absolute; height: auto; z-index: 4; }
.c1 { width: clamp(70px, 10vw, 120px); left: 20%; bottom: 3%; }
.c2 { width: clamp(52px, 7vw, 86px); right: 21%; bottom: 4%; transform: scaleX(-1); }
.passarinho {
  position: absolute; width: clamp(56px, 7vw, 90px); right: 27%; bottom: 52%; z-index: 4;
  animation: pousa 1.1s ease-out 1.6s backwards;
}
@keyframes pousa { from { opacity: 0; transform: translate(120px, -140px) rotate(14deg); } }
.arbusto { position: absolute; bottom: -2%; height: auto; z-index: 5; }
.b1 { width: clamp(200px, 30vw, 380px); left: -4%; }
.b2 { width: clamp(180px, 26vw, 330px); left: 36%; bottom: -5%; }
.b3 { width: clamp(200px, 30vw, 380px); right: -6%; transform: scaleX(-1); }

.coracoes { position: absolute; inset: 0; pointer-events: none; }
.coracoes i {
  position: absolute; left: 50%; top: 55%; width: 22px; aspect-ratio: 1;
  background: url(img/coracao.png) center / contain no-repeat;
  opacity: 0; animation: coracao 2.4s ease-out 1.9s forwards;
}
.coracoes i:nth-child(2) { --x: -90px; --r: -18deg; animation-delay: 2s; width: 16px; }
.coracoes i:nth-child(3) { --x: 80px; --r: 14deg; animation-delay: 2.15s; }
.coracoes i:nth-child(4) { --x: -40px; --r: -8deg; animation-delay: 2.3s; width: 14px; }
.coracoes i:nth-child(5) { --x: 120px; --r: 22deg; animation-delay: 2.45s; width: 18px; }
@keyframes coracao {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), -260px) rotate(var(--r, 0deg)) scale(1.1); }
}

/* ---------- Convite ---------- */
main { padding: 0 16px; }
.convite { max-width: 640px; margin: 0 auto; padding: 56px 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.saudacao { font-family: var(--script); font-size: clamp(38px, 7vw, 52px); font-weight: 700; line-height: 1.1; margin: 0 0 -12px; }
.assinatura { font-family: var(--script); font-size: clamp(26px, 4vw, 32px); font-weight: 700; line-height: 1.1; margin: -16px 0 0; }
.convite-texto { font-size: clamp(19px, 2.6vw, 22px); font-weight: 600; margin: 0; max-width: 32ch; text-wrap: balance; }

/* Coraçãozinho: o ícone segue a intensidade do som (--batida, 0 a 1, vem do app.js) */
.coracao {
  --batida: 0;
  display: inline-flex; align-items: center; gap: 12px; margin: -6px 0 8px;
  padding: 10px 22px 10px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; box-shadow: inset 0 0 0 2px var(--rosa-claro);
  font: inherit; font-weight: 700; font-size: 16px; color: var(--cacau);
}
.coracao:hover { box-shadow: inset 0 0 0 2px var(--rosa); }
.coracao:focus-visible { outline: 3px solid var(--caramelo); outline-offset: 3px; }
.coracao-icone {
  width: 36px; height: 36px; padding: 6px; border-radius: 50%; background: var(--rosa-fundo);
  fill: var(--rosa); stroke: #E48B94; stroke-width: 1.5;
  transform: scale(calc(1 + var(--batida) * .3));
  box-shadow: 0 0 0 calc(var(--batida) * 10px) rgb(249 168 175 / calc(.35 * var(--batida)));
}
.coracao[aria-pressed="true"] { background: var(--rosa-fundo); box-shadow: inset 0 0 0 2px var(--rosa); }
.coracao[aria-pressed="true"] .coracao-icone { background: #fff; }

.contagem { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.contagem div {
  position: relative; width: 104px; padding: 26px 0 12px; background: #fff;
  border-radius: 60px 60px 28px 28px; box-shadow: 0 6px 0 var(--rosa-claro);
}
.contagem div::before { content: ""; position: absolute; width: 50px; height: 50px; border-radius: 50%; background: #fff; top: -18px; left: 16px; }
.contagem div::after { content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: #fff; top: -10px; right: 16px; }
.contagem b { position: relative; z-index: 1; display: block; font-size: 34px; line-height: 1; font-weight: 700; }
.contagem span { position: relative; z-index: 1; font-size: 14px; color: var(--cacau-suave); }
.contagem .hoje { width: auto; padding: 22px 28px 14px; font-size: 22px; font-weight: 700; }

.ingresso {
  width: 100%; display: grid; grid-template-columns: auto 1fr; text-align: left;
  background: var(--papel); border-radius: 24px; position: relative; z-index: 2;
  box-shadow: 0 2px 0 var(--bege), 0 18px 40px -24px rgba(91, 65, 54, .35);
}
.ingresso-data {
  background: var(--salvia); color: #fff; padding: 22px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-right: 3px dashed var(--papel); border-radius: 24px 0 0 24px;
}
.ingresso-data .dia { font-size: 52px; font-weight: 700; line-height: 1; }
.ingresso-data .mes { font-size: 18px; font-weight: 700; }
.ingresso-info { padding: 20px 22px; }
.ingresso-info p { margin: 0 0 6px; }
.quando { font-weight: 700; font-size: 18px; }
.quando::first-letter { text-transform: uppercase; }
.onde { color: var(--cacau-suave); font-size: 15px; line-height: 1.45; }
.onde strong { color: var(--cacau); }
.ingresso-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.agenda { position: relative; }
.agenda summary { list-style: none; }
.agenda summary::-webkit-details-marker { display: none; }
.agenda[open] summary { box-shadow: inset 0 0 0 2px var(--caramelo); }
.agenda-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 230px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 16px;
  background: #fff; box-shadow: 0 2px 0 var(--bege), 0 16px 36px -14px rgba(91, 65, 54, .45);
}
.agenda-menu a { padding: 11px 14px; border-radius: 10px; color: var(--cacau); font-weight: 700; font-size: 15px; text-decoration: none; }
.agenda-menu a:hover, .agenda-menu a:focus-visible { background: var(--rosa-fundo); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none; font: 700 16px var(--sans);
  padding: 13px 24px; border-radius: 999px; color: var(--cacau);
  transition: transform .15s, background-color .15s, box-shadow .15s;
}
.btn:active { transform: translateY(2px); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-rosa { background: var(--rosa); box-shadow: 0 4px 0 #E48B94; }
.btn-rosa:hover { background: #FBB7BD; }
.btn-rosa:active { box-shadow: 0 2px 0 #E48B94; }
.btn-claro { background: #fff; box-shadow: inset 0 0 0 2px var(--bege); padding: 10px 18px; font-size: 15px; }
.btn-claro:hover { box-shadow: inset 0 0 0 2px var(--caramelo); }
.btn.grande { font-size: 18px; padding: 16px 34px; }
.cheio { width: 100%; }

/* ---------- Blocos ---------- */
.bloco { max-width: 1080px; margin: 0 auto; padding: 72px 0 16px; text-align: center; position: relative; }
.bloco h2 { font-size: clamp(44px, 8vw, 64px); color: var(--cacau); }
.lead { color: var(--cacau-suave); max-width: 56ch; margin: 14px auto 32px; text-wrap: pretty; }
.pequeno { font-size: 14px; }
.suave { color: var(--cacau-suave); }
.link { color: #C9636E; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.estreito { max-width: 560px; }
.levar {
  margin: 32px auto 0; max-width: 46ch; padding: 16px 22px; border-radius: 18px;
  background: var(--papel); border: 2px dashed var(--salvia); font-weight: 600; text-wrap: balance;
}
.enfeite { width: 96px; height: auto; display: block; margin: 0 auto 4px; transform: rotate(-6deg); }

.abas { display: inline-flex; gap: 4px; padding: 5px; background: #fff; border-radius: 999px; margin-bottom: 32px; box-shadow: 0 2px 0 var(--bege); }
.tab { font: 700 15px var(--sans); color: var(--cacau-suave); cursor: pointer; background: none; border: 0; border-radius: 999px; padding: 10px 20px; }
.tab.on { background: var(--salvia); color: #fff; }

/* Presentes: bandeirinhas */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px 18px; text-align: left; }
.card {
  font: inherit; color: inherit; cursor: pointer; text-align: center;
  background: var(--papel); border: 0; border-radius: 22px; padding: 0 18px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 2px 0 var(--bege), 0 14px 30px -22px rgba(91, 65, 54, .4);
  transition: transform .2s ease;
}
.card:hover { transform: translateY(-4px); }
.card:hover .bandeira { transform: rotate(-4deg); }
.bandeira {
  width: 84px; height: 96px; margin-bottom: 10px;
  border-radius: 0 0 42px 42px / 0 0 48px 48px;
  display: grid; place-items: center; font-size: 38px;
  background: var(--cor, var(--rosa)); transform-origin: top center; transition: transform .3s ease;
}
.card:nth-child(4n+2) { --cor: var(--amarelo); }
.card:nth-child(4n+3) { --cor: var(--salvia); }
.card:nth-child(4n+4) { --cor: var(--caramelo); }
.card h4 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; text-wrap: balance; }
.card .desc { margin: 0; font-size: 14px; color: var(--cacau-suave); flex: 1; }
.preco { margin: 10px 0 0; font-weight: 700; font-size: 18px; }
.preco small { font-weight: 600; font-size: 13px; color: var(--cacau-suave); }
.card-cta { margin-top: 8px; font-size: 14px; font-weight: 700; color: #C9636E; }

/* RSVP */
.papel { position: relative; margin-top: 104px; }
.urso-espia {
  position: absolute; left: 50%; top: -92px; width: 150px; height: 108px;
  object-fit: cover; object-position: top; translate: -50% 0; z-index: 0;
}
.form, .obrigado {
  position: relative; z-index: 1; text-align: left;
  background: var(--papel); border-radius: 26px; padding: 30px 24px 26px;
  box-shadow: 0 2px 0 var(--bege), 0 20px 44px -26px rgba(91, 65, 54, .45);
}
.form { display: flex; flex-direction: column; gap: 18px; }
.form label, .m-recado label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; }
small { font-weight: 500; color: var(--cacau-suave); }
input, textarea {
  font: 600 16px var(--sans); color: var(--cacau); width: 100%;
  border: 2px solid var(--bege); border-radius: 14px; padding: 12px 14px; background: #fff;
}
input::placeholder, textarea::placeholder { color: #B9A398; font-weight: 500; }
input:focus, textarea:focus { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 4px var(--rosa-claro); }
.escolha { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.escolha legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding: 0; }
.escolha label { cursor: pointer; }
.escolha input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.escolha span {
  display: block; text-align: center; padding: 13px 10px; border-radius: 14px;
  border: 2px solid var(--bege); background: #fff; font-weight: 700; transition: .15s;
}
.escolha input:checked + span { background: var(--rosa-claro); border-color: var(--rosa); }
.escolha input:focus-visible + span { outline: 3px solid var(--oliva); outline-offset: 2px; }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.linha[hidden] { display: none; }
.obrigado { text-align: center; padding: 34px 24px; }
.obrigado h3 { font-size: 40px; margin-bottom: 8px; }
.obrigado p { margin: 0; color: var(--cacau-suave); }
.obrigado img { width: 120px; height: auto; margin-bottom: 8px; animation: sobe .8s cubic-bezier(.2, 1.3, .4, 1) backwards; }

/* Rodapé */
.chao { margin-top: 96px; text-align: center; overflow: hidden; }
.chao p { font-family: var(--script); font-size: 28px; font-weight: 700; margin: 0 0 8px; padding: 0 16px; }
.chao-cena { position: relative; height: clamp(110px, 18vw, 180px); }
.chao-cena img { position: absolute; bottom: -6px; height: auto; }
.chao-cena .arbusto { width: clamp(240px, 40vw, 460px); left: -4%; }
.chao-cena .arbusto.vira { left: auto; right: -4%; transform: scaleX(-1); }
.chao-cena .cogumelo { width: clamp(60px, 8vw, 96px); left: 50%; translate: -50% 0; bottom: 0; }

/* ---------- Pix ---------- */
dialog {
  border: 0; border-radius: 28px; padding: 0; overflow: visible;
  width: min(420px, calc(100vw - 32px)); max-height: calc(100svh - 96px);
  background: var(--papel); color: var(--cacau);
  box-shadow: 0 30px 80px -20px rgba(91, 65, 54, .5);
}
dialog[open] { animation: abre .3s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes abre { from { opacity: 0; transform: translateY(20px) scale(.97); } }
dialog::backdrop { background: rgba(91, 65, 54, .4); backdrop-filter: blur(4px); }
.pouso { position: absolute; width: 64px; top: -44px; right: 34px; transform: scaleX(-1); pointer-events: none; }
.fechar-linha { display: flex; justify-content: flex-start; padding: 10px 10px 0; }
.fechar { border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--cacau-suave); width: 40px; height: 40px; border-radius: 50%; }
.fechar:hover { background: var(--bege); }
.modal-corpo {
  padding: 0 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  max-height: calc(100svh - 160px); overflow-y: auto;
}
.bandeira img { width: 52%; height: auto; margin-top: -6px; }
.bandeira.grande { width: 72px; height: 82px; font-size: 32px; margin: 0; }
.modal-corpo h3 { font-size: 34px; }
.modal-corpo p { margin: 0; }
.valor { font-size: 34px; font-weight: 700; }
.recebedor { color: var(--cacau-suave); font-size: 15px; }
.qr { padding: 12px; background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 2px var(--bege); }
.qr img, .qr canvas { display: block; }
/* Celular copia e cola; computador mostra o QR */
.so-celular { display: none; }
.so-computador { display: flex; flex-direction: column; align-items: center; gap: 12px; }
@media (hover: none) and (pointer: coarse), (max-width: 640px) {
  .so-celular { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .so-computador { display: none; }
}
.m-copiar.copiado { background: var(--salvia); color: #fff; box-shadow: 0 4px 0 var(--oliva); }
.passos {
  list-style: none; counter-reset: passo; margin: 4px 0 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 15px;
}
.passos li { counter-increment: passo; display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; transition: background-color .2s; }
.passos li::before {
  content: counter(passo); flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--rosa-claro); color: var(--cacau);
}
.passos.copiado li:first-child { opacity: .55; }
.passos.copiado li:first-child::before { content: "✓"; background: var(--salvia); color: #fff; }
.passos.copiado li:nth-child(2) { background: var(--rosa-claro); }
.passos.copiado li:nth-child(2)::before { background: var(--rosa); }
.mostrar-qr { width: 100%; }
.mostrar-qr summary { cursor: pointer; font-size: 14px; font-weight: 700; color: #C9636E; list-style: none; padding: 6px; }
.mostrar-qr summary::-webkit-details-marker { display: none; }
.mostrar-qr[open] { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aviso-qr { font-size: 15px; max-width: 32ch; }
.aviso-qr span { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; color: #C9636E; }
.cotas { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.cotas[hidden] { display: none; }
.stepper { display: flex; align-items: center; background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--bege); }
.stepper button { border: 0; background: none; font-size: 22px; width: 40px; height: 40px; cursor: pointer; color: var(--cacau); border-radius: 50%; }
.stepper output { min-width: 24px; font-weight: 700; }
.m-recado { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 2px dashed var(--bege); }

.toast {
  position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; opacity: 0;
  background: var(--cacau); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px;
  transition: .25s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; z-index: 10;
}
.toast.on { opacity: 1; translate: -50% 0; }

/* ---------- Atalhos (topo no computador, barra fixa embaixo no celular) ---------- */
.atalhos {
  position: fixed; top: 16px; right: 16px; z-index: 20;
  display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(255, 251, 247, .92); backdrop-filter: blur(8px);
  box-shadow: 0 2px 0 var(--bege), 0 10px 30px -14px rgba(91, 65, 54, .45);
}
.atalhos a {
  text-decoration: none; color: var(--cacau-suave); font-weight: 700; font-size: 15px;
  padding: 9px 16px; border-radius: 999px; white-space: nowrap; transition: background-color .2s, color .2s;
}
.atalhos a:hover { color: var(--cacau); }
.atalhos a.ativo { background: var(--bege); color: var(--cacau); }
.atalhos .atalho-rsvp { background: var(--rosa); color: var(--cacau); }
.atalhos .atalho-rsvp.ativo { background: #FBB7BD; }
.atalhos .atalho-rsvp.feito { background: var(--salvia); color: #fff; }
section[id] { scroll-margin-top: 72px; }

/* Computador: a cena cabe na altura da tela (notebooks baixos) */
@media (min-width: 641px) {
  .faixa { width: min(560px, 84vw, 56svh); }
  .palco { min-height: clamp(280px, 52vw, min(520px, 52svh)); }
  .urso-wrap { width: min(clamp(190px, 34vw, 340px), 32svh); }
  .a1 { width: min(clamp(110px, 17vw, 210px), 20svh); }
  .a2 { width: min(clamp(80px, 12vw, 150px), 14svh); }
}

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  .atalhos {
    top: auto; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    justify-content: space-between; gap: 2px;
  }
  .atalhos a { font-size: 14px; padding: 12px 12px; flex: 1; text-align: center; }
  .atalhos .atalho-rsvp { flex: 1.6; }
  section[id] { scroll-margin-top: 16px; }
  body { padding-bottom: 84px; }
  .toast { bottom: 96px; }
  .varal img:nth-child(3), .varal img:nth-child(7) { display: none; }
  .a2 { display: none; }
  .a1 { left: -6%; }
  .c1 { left: 6%; }
  .c2 { right: 6%; }
  .cena { min-height: auto; }
  .palco { min-height: 108vw; }
  .urso-wrap { width: 62vw; bottom: 3%; }
  .passarinho { width: 56px; right: 7%; bottom: 46%; }
  .n1 { display: none; }
  .faixa { width: 88vw; }
  .n2, .n3 { display: none; }
  .sol { top: 24%; right: -6%; }
  .ingresso { grid-template-columns: 1fr; }
  .ingresso-data { flex-direction: row; gap: 10px; padding: 14px; border-right: 0; border-bottom: 3px dashed var(--papel); border-radius: 24px 24px 0 0; }
  .ingresso-data .dia { font-size: 36px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .card { padding: 0 12px 16px; }
  .bandeira { width: 64px; height: 74px; font-size: 30px; }
  .card h4 { font-size: 15px; }
  .card .desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}