:root {
  color-scheme: light;
  --painel: url("../img/painel-editado.png");
  --tinta: #4a3441;
  --tinta-suave: #7a6170;
  --rosa: #b8436a;
  --rosa-escuro: #9c3458;
  --rosa-claro: #f8dde5;
  --salvia: #5f7a53;
  --salvia-claro: #e4ecdc;
  --papel: #fffcf6;
  --manteiga: #fbf1cc;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --script: "Pinyon Script", "Snell Roundhand", "Segoe Script", cursive;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }

html { background: #faf7ef; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 350;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: radial-gradient(ellipse at top, #fffefb, #f7f3e9);
  -webkit-font-smoothing: antialiased;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Topo com o painel ---------- */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1800 / 1157;
  min-height: min(152vw, 90svh);
  max-height: 94svh;
  overflow: hidden;
  background: #fffcf6;
  box-shadow: 0 1px 0 rgba(184, 67, 106, .12);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--painel) center 40% / cover no-repeat;
  transform-origin: 50% 42%;
}
.aberto .hero::before { animation: respirar 2s cubic-bezier(.2,.6,.2,1) both; }
@keyframes respirar { from { transform: scale(1.12); filter: blur(2px) saturate(.8); } 35% { filter: none; } to { transform: scale(1); } }

.hero__texto {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  width: min(86%, 34rem);
  text-align: center;
  visibility: hidden;
}
.aberto .hero__texto { visibility: visible; }
.aberto .saudacao { animation: subir .6s ease-out .1s both; }
.aberto .nome { animation: subir .8s ease-out .2s both; }
.aberto .floresceu { animation: subir .7s ease-out .35s both; }
.aberto .frase span { display: inline-block; animation: subir .7s ease-out both; animation-delay: calc(.45s + var(--i) * .025s); }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }
@keyframes escrever {
  from { clip-path: inset(-20% 100% -20% -10%); filter: blur(3px); }
  to { clip-path: inset(-20% -10% -20% -10%); filter: none; }
}

.saudacao {
  margin: 0 auto .15em;
  max-width: 22em;
  font-style: italic;
  font-size: clamp(1rem, 3.6vw, 1.3rem);
  line-height: 1.35;
  color: var(--tinta);
  text-wrap: balance;
}
.nome {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.6rem, 16vw, 8.25rem);
  line-height: 1.05;
  color: var(--rosa);
  letter-spacing: .005em;
  padding: 0 .15em;
}
.floresceu {
  margin: -.15em 0 .55em;
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.35rem, 5.4vw, 2.1rem);
  line-height: 1.1;
  color: var(--salvia);
}
.frase {
  margin: 0 auto;
  max-width: 23em;
  font-size: clamp(.98rem, 3.6vw, 1.22rem);
  line-height: 1.5;
  color: var(--tinta);
  text-wrap: balance;
  text-shadow: 0 0 10px #fffcf6, 0 0 4px #fffcf6;
}

/* ---------- Folhas de papel ---------- */
.papel {
  width: min(100% - 2rem, 34rem);
  margin: 1.75rem auto;
  padding: 2rem 1.5rem 1.75rem;
  background: var(--papel);
  border: 1px solid #e4e6d8;
  border-radius: 28px 28px 10px 10px;
  box-shadow: 0 6px 24px rgba(95, 122, 83, .05);
}
@media (min-width: 560px) { .papel { padding: 2.5rem 2.5rem 2.25rem; } }

h2 {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: 3.1rem;
  line-height: 1.1;
  color: var(--rosa);
  text-align: center;
}

/* Detalhes */
.data {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .9rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px dashed #e7c3cf;
}
.data__dia {
  font-size: 4.4rem;
  line-height: .9;
  font-weight: 300;
  color: var(--rosa);
  font-variant-numeric: lining-nums;
}
.data__resto { display: flex; flex-direction: column; line-height: 1.25; }
.data__resto span:first-child { font-style: italic; color: var(--tinta-suave); }
.data__resto span:last-child { font-size: 1.25rem; font-weight: 450; }

.info { margin: 0; display: grid; gap: 1rem; }
.info > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; align-items: baseline; }
.info dt { font-style: italic; color: var(--salvia); font-size: .95rem; }
.info dd { margin: 0; font-weight: 420; }
.endereco { display: block; font-weight: 350; color: var(--tinta-suave); font-size: .97rem; }

.mensagem {
  margin: 1.6rem 0 0;
  padding: 1.1rem 1.25rem;
  background: var(--manteiga);
  border-radius: 12px;
  font-style: italic;
  text-align: center;
  text-wrap: pretty;
}
.mensagem:empty { display: none; }

.acoes-secundarias { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.5rem; }
.link-botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem 1.1rem;
  font: inherit; font-size: .97rem; font-weight: 450;
  color: var(--salvia);
  background: var(--salvia-claro);
  border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer;
}
.link-botao:hover { background: #d7e3cc; }
.link-botao[hidden] { display: none; }

/* RSVP */
.prazo { margin: .25rem 0 1.5rem; text-align: center; color: var(--tinta-suave); font-style: italic; }
.prazo:empty { display: none; }

.escolha { border: 0; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao span {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: .6rem .5rem;
  text-align: center; font-weight: 450; line-height: 1.2;
  border: 1.5px solid #ecc9d5; border-radius: 14px;
  background: #fff;
  transition: background .15s, border-color .15s, color .15s;
}
.opcao input:checked + span { background: var(--rosa-claro); border-color: var(--rosa); color: var(--rosa-escuro); }
.opcao input:focus-visible + span { outline: 3px solid var(--salvia); outline-offset: 2px; }

.quantidades { display: grid; gap: .25rem; margin-bottom: 1.25rem; }
.contador {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px dashed #e7c3cf;
}
.contador__titulo { margin: 0; font-weight: 500; }
.contador__ajuda { margin: .1rem 0 0; font-size: .88rem; line-height: 1.35; color: var(--tinta-suave); }

.stepper { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.stepper button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid #ecc9d5;
  background: #fff;
  color: var(--rosa);
  font: 500 1.35rem/1 var(--serif);
  cursor: pointer;
}
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper button:not(:disabled):hover { background: var(--rosa-claro); }
.stepper output { min-width: 2ch; text-align: center; font-size: 1.35rem; font-weight: 450; font-variant-numeric: tabular-nums lining-nums; }

.total { margin: .9rem 0 0; text-align: center; font-style: italic; color: var(--salvia); }

.recado { display: grid; gap: .4rem; margin-bottom: 1.25rem; }
.recado small { color: var(--tinta-suave); font-weight: 350; }
.recado textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  padding: .75rem .9rem;
  border: 1.5px solid #ecc9d5; border-radius: 12px;
  background: #fff; color: var(--tinta);
  resize: vertical;
}
.recado textarea:focus { outline: 3px solid rgba(95, 122, 83, .35); border-color: var(--salvia); }

.erro { margin: 0 0 .75rem; color: #a3223f; text-align: center; font-weight: 450; }
.erro:empty { display: none; }

.botao {
  width: 100%;
  min-height: 54px;
  font: 500 1.1rem var(--serif);
  color: #fff;
  background: var(--rosa);
  border: 0; border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
.botao:hover:not(:disabled) { background: var(--rosa-escuro); }
.botao:disabled { background: #d9a9ba; cursor: default; }
.botao:focus-visible, .link-botao:focus-visible, .stepper button:focus-visible { outline: 3px solid var(--salvia); outline-offset: 3px; }

/* Obrigado */
.obrigado { text-align: center; }
.obrigado h3 { margin: .25rem 0 .25rem; font-family: var(--script); font-weight: 400; font-size: 2.6rem; color: var(--rosa); line-height: 1.15; }
.obrigado p { margin: 0 auto 1.25rem; max-width: 26em; }
.borboleta { width: 84px; height: 63px; overflow: visible; }
.borboleta .asa path { fill: #f3b7c8; stroke: #d97a9a; stroke-width: 1.2; }
.borboleta .asa path:nth-child(2) { fill: #f9d7e1; }
.borboleta .corpo { fill: #7a4b5c; }
.borboleta .asa { transform-box: fill-box; }
.borboleta .asa--esq { transform-origin: right center; }
.borboleta .asa--dir { transform-origin: left center; }
.obrigado.anima .asa { animation: bater .38s ease-in-out 4 alternate; }
.obrigado.anima .borboleta { animation: pousar 1.6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes bater { to { transform: scaleX(.35); } }
@keyframes pousar { from { transform: translate(-60px, 40px) rotate(-18deg); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }

.encerrado { margin: 0; text-align: center; font-style: italic; color: var(--tinta-suave); }

.aviso { text-align: center; margin-top: 3rem; }
.aviso p { margin: .5rem 0 0; }

/* ================= Efeitos ================= */

/* Envelope de abertura */
.envelope-cena {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  padding: 2rem 1rem;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(255, 253, 244, .92), rgba(255, 253, 244, .55) 70%, rgba(255, 253, 244, .25)),
    #faf7ef;
  background-size: auto, 440px;
  transition: opacity .9s ease, visibility 0s .9s;
}
.envelope-cena.saindo { opacity: 0; visibility: hidden; }
.com-envelope { overflow: hidden; }

.env-para { transition: opacity .5s ease; margin: 0; font-style: italic; font-size: 1.15rem; color: var(--tinta-suave); text-align: center; min-height: 1.6em; }
.env-para strong { display: block; font-family: var(--script); font-style: normal; font-weight: 400; font-size: 2.3rem; line-height: 1.2; color: var(--rosa); }
.env-dica { margin: 0; font-size: 1rem; color: var(--salvia); letter-spacing: .04em; }
.env-dica.pulsar { animation: pulsar 1.8s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .45; } }

.envelope {
  position: relative;
  width: min(84vw, 420px);
  aspect-ratio: 1.45;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  perspective: 1400px;
  animation: flutuar 3.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 18px 24px rgba(184, 67, 106, .22));
  -webkit-tap-highlight-color: transparent;
}
.envelope:disabled { cursor: default; }
.envelope:focus-visible { outline: 3px solid var(--salvia); outline-offset: 10px; border-radius: 8px; }
@keyframes flutuar { from { transform: translateY(-6px) rotate(-1deg); } to { transform: translateY(6px) rotate(1deg); } }
.abrindo .envelope { animation: none; }

.envelope > span { position: absolute; display: block; }
.env-fundo { inset: 0; z-index: 0; background: #efc3d0; border-radius: 8px; }
.env-carta {
  left: 6%; right: 6%; top: 7%; height: 86%;
  z-index: 1;
  border-radius: 6px;
  background: #fffcf6 var(--painel) center / cover no-repeat;
  box-shadow: 0 2px 8px rgba(122, 64, 90, .18);
  transition: transform 1s cubic-bezier(.3,.7,.2,1);
}
.env-bolso {
  inset: 0; z-index: 2; border-radius: 8px;
  background: linear-gradient(160deg, #fbe4eb, #f5cfda);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
.env-bolso::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, rgba(255,255,255,.35), transparent 55%), linear-gradient(to top left, rgba(184,67,106,.08), transparent 55%);
}
.env-aba {
  left: 0; right: 0; top: 0; height: 58%;
  z-index: 3;
  background: linear-gradient(180deg, #f6d6df, #f0c2cf);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform .8s cubic-bezier(.5,0,.3,1) .25s, z-index 0s .65s;
}
.env-selo {
  z-index: 4;
  left: 50%; top: 58%;
  width: 68px; height: 68px; margin: -34px 0 0 -34px;
  display: grid !important; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8658b, var(--rosa) 55%, #8f2f52);
  box-shadow: 0 0 0 4px rgba(184,67,106,.25), 0 4px 10px rgba(122,40,70,.35), inset 0 0 0 3px rgba(255,255,255,.18);
  font-family: var(--script); font-size: 2.4rem; line-height: 1; color: #fde8ee;
  padding-top: 6px;
  transition: transform .45s cubic-bezier(.5,-0.4,.6,1), opacity .35s ease .1s;
}
.abrindo .env-para { opacity: 0; }
.abrindo .env-selo { transform: scale(0) rotate(-30deg); opacity: 0; }
.abrindo .env-aba { transform: rotateX(180deg); z-index: 0; }
.carta-sobe .env-carta { transform: translateY(-58%); }

/* Camadas de efeitos */
.fx-camada { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.fx-fixa { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }

.fx-borboleta { position: absolute; left: 0; top: 0; will-change: transform; }
.fx-borboleta svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-borboleta .ae, .fx-borboleta .ad { transform-box: fill-box; animation: fxBater var(--bat, .22s) ease-in-out infinite alternate; }
.fx-borboleta .ae { transform-origin: right center; }
.fx-borboleta .ad { transform-origin: left center; }
@keyframes fxBater { to { transform: scaleX(.22); } }

.fx-brilho {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #fffbe6;
  box-shadow: 0 0 6px 2px rgba(246, 217, 138, .9), 0 0 14px 4px rgba(246, 200, 170, .45);
  opacity: 0;
  animation: cintilar var(--d, 3s) ease-in-out var(--atraso, 0s) infinite;
}
@keyframes cintilar { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: .95; transform: scale(1); } }

.fx-petala { position: absolute; top: -40px; animation: cair var(--dur) linear var(--atraso) infinite; }
.fx-petala svg { display: block; animation: balancar var(--sw) ease-in-out infinite alternate; }
@keyframes cair { to { transform: translateY(calc(100vh + 90px)); } }
@keyframes balancar { from { transform: translateX(-34px) rotate(-50deg); } to { transform: translateX(34px) rotate(60deg); } }

/* Revelar ao rolar */
.revelar { opacity: 0; transform: translateY(32px) scale(.985); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.revelar.visivel { opacity: 1; transform: none; }
.revelar .data__dia { display: inline-block; }
.revelar.visivel .data__dia { animation: crescer 1s cubic-bezier(.3,1.6,.5,1) .25s both; }
@keyframes crescer { from { transform: scale(.4); opacity: 0; } }
.revelar .info > div, .revelar .mensagem, .revelar .acoes-secundarias { transition: opacity .8s ease, transform .8s ease; }
.revelar:not(.visivel) .info > div, .revelar:not(.visivel) .mensagem, .revelar:not(.visivel) .acoes-secundarias { opacity: 0; transform: translateY(12px); }
.revelar.visivel .info > div:nth-child(1) { transition-delay: .35s; }
.revelar.visivel .info > div:nth-child(2) { transition-delay: .5s; }
.revelar.visivel .mensagem { transition-delay: .65s; }
.revelar.visivel .acoes-secundarias { transition-delay: .8s; }

.botao { position: relative; overflow: hidden; }
.botao:not(:disabled)::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  animation: none;
}
@keyframes brilhar { 0%, 60% { left: -60%; } 100% { left: 130%; } }

[hidden] { display: none !important; }

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

/* Papelaria do jardim: nome, idade e ramos com espaço para respirar. */
.hero { min-height: 640px; max-height: 850px; }
.saudacao { margin-bottom: 1.3rem; color: var(--tinta-suave); }
.idade { margin: .6rem 0 0; color: var(--salvia); font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase; }
.aberto .idade { animation: subir .7s ease-out .3s both; }
.raminho { display: block; color: #81936b; font-size: 2.4rem; line-height: 1.2; margin: .65rem 0; }
.floresceu { margin: 0 0 .7rem; font-size: clamp(1.25rem, 4.7vw, 1.7rem); }
.frase { max-width: 20em; }
.detalhes::before, .rsvp::before { content: "❧"; display: block; text-align: center; color: #81936b; font-size: 2rem; line-height: 1; margin-bottom: 1.3rem; }
.mensagem { background: transparent; border-top: 1px solid #e4e6d8; border-radius: 0; padding: 1.4rem 0 0; color: var(--tinta-suave); }
.rsvp { margin-bottom: 3rem; }
.fx-camada { z-index: 1; opacity: .7; }
@media (max-width: 600px) {
  .hero { aspect-ratio: auto; min-height: 650px; max-height: none; background: #fff; }
  .hero::before, .hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 190px; background: var(--painel) center top / 100% auto no-repeat; transform: none; animation: none; }
  .hero::before { mask-image: linear-gradient(#000 55%, transparent); }
  .hero::after { inset: auto 0 0; background-position: center bottom; mask-image: linear-gradient(transparent, #000 45%); }
  .hero__texto { top: 49%; width: 90%; }
  .nome { font-size: clamp(3.6rem, 18vw, 6rem); overflow-wrap: anywhere; }
  .saudacao { max-width: 19em; font-size: .95rem; margin-bottom: 1.4rem; }
  .frase { max-width: 19em; font-size: 1rem; }
  .papel { margin-top: 1.25rem; }
}

/* Pequeno jardim vivo nas bordas do convite. */
.fx-jardim { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.fx-ramo { position: absolute; bottom: -12px; width: auto; height: var(--altura); aspect-ratio: 100 / 220; opacity: .85; transform: scaleX(var(--lado)); }
.fx-ramo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-caule { transform-origin: 51px 220px; animation: brisa-jardim var(--ritmo) ease-in-out var(--inicio) infinite alternate; }
@keyframes brisa-jardim { from { transform: rotate(-7deg); } to { transform: rotate(8deg); } }
.fx-camada { opacity: .88; }
@media (min-width: 601px) { .fx-ramo { height: calc(var(--altura) * 1.35); } }

/* Ilustração integrada à base do jardim com bordas suaves. */
.hero--com-foto { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 28px; aspect-ratio: auto; min-height: 0; max-height: none; background-color: #fff; }
.hero--com-foto .hero__texto { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; padding: 145px 0 0; }
.hero--com-foto .saudacao {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.1rem;
  padding: .45rem 1rem;
  border: 1px solid rgba(228, 209, 215, .8);
  border-radius: 999px;
  background: rgba(255, 253, 249, .96);
  color: var(--tinta);
  box-shadow: 0 2px 10px rgba(122, 64, 90, .06);
}
.hero--com-foto .nome { font-size: clamp(3.6rem, 16vw, 6.5rem); }
.hero--com-foto .raminho { margin: .35rem 0; }
.foto-jardim { position: relative; top: -12px; z-index: 1; flex-shrink: 0; width: min(88%, 310px); aspect-ratio: 1; margin: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); }
.foto-jardim img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); }
.aberto .foto-jardim img { animation: subir 1.2s ease-out .2s both; }
.hero--com-foto .fx-jardim { z-index: 3; }
@media (max-width: 600px) {
  .hero--com-foto .hero__texto { padding: 115px 0 0; }
  .foto-jardim { width: min(84%, 265px); }
  .hero--com-foto .fx-ramo { height: calc(var(--altura) * .7); }
}

/* Fundo original editado, inteiro, sem mosaico de arranjos. */
.hero--com-foto { box-shadow: none; padding-bottom: 165px; background: #fff var(--painel) center / 100% 100% no-repeat; }
.hero--com-foto::before, .hero--com-foto::after { content: none; }
.hero--com-foto .hero__texto { width: min(64%, 34rem); padding-top: 185px; }
.fundo-floral-mobile { display: none; }
.hero--com-foto .fx-jardim { display: none; }
@media (max-width: 600px) {
  .hero--com-foto { background: #fff; padding-bottom: 115px; gap: 20px; }
  .fundo-floral-mobile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .hero--com-foto .hero__texto { width: 62%; padding-top: 130px; }
  .hero--com-foto .nome { font-size: clamp(2.5rem, 12vw, 4.5rem); }
  .hero--com-foto .floresceu {
    font-size: 1.2rem;
    /* Contorno branco (cor do fundo) para as letras não se misturarem com as folhas */
    text-shadow:
      2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
      1.5px 1.5px #fff, -1.5px -1.5px #fff, 1.5px -1.5px #fff, -1.5px 1.5px #fff,
      0 0 8px rgba(255, 255, 255, .95);
  }
  .foto-jardim { width: min(64%, 265px); }
}

/* Botão da música */
.botao-musica {
  position: fixed;
  z-index: 50;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 67, 106, .25);
  border-radius: 50%;
  background: rgba(255, 252, 246, .92);
  color: var(--rosa);
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(74, 52, 65, .12);
  cursor: pointer;
}
.botao-musica:not(.tocando) span { opacity: .45; text-decoration: line-through; }
.botao-musica.tocando span { animation: nota 2.4s ease-in-out infinite; }
@keyframes nota { 50% { transform: translateY(-2px) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .botao-musica.tocando span { animation: none; } }

/* Seta indicando que há mais conteúdo abaixo; some quando a pessoa rola */
.seta-baixo {
  position: fixed;
  z-index: 50;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(184, 67, 106, .25);
  border-radius: 50%;
  background: rgba(255, 252, 246, .92);
  color: var(--rosa);
  box-shadow: 0 4px 14px rgba(74, 52, 65, .12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.seta-baixo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aberto:not(.rolou) .seta-baixo { opacity: 1; visibility: visible; transition-delay: 1.4s; }
.aberto:not(.rolou) .seta-baixo svg { animation: quicar 1.6s ease-in-out infinite; }
@keyframes quicar { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }