/* =========================================================================
   Victor e Luiza — folha de estilo
   Paleta: verde-jardim, papel, rosa-buganvília (tirado das próprias fotos)
   ========================================================================= */

:root {
  --folha:        #1B3A2A;
  --folha-mid:    #3F6B50;
  --folha-fraca:  #9DB0A2;
  --papel:        #FAF9F5;
  --papel-fundo:  #EFEEE7;
  /* a lavanda do campo onde foi o pedido */
  --lavanda:       #6B5C9A;
  --lavanda-fraca: #CFC4E6;
  --lavanda-veu:   rgba(107, 92, 154, .12);
  --texto:        #26332B;
  --linha:        rgba(27, 58, 42, .16);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --corpo: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --largura: 1180px;
  --ritmo: clamp(4.5rem, 11vw, 9rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

/* "hidden" esconde de verdade, mesmo em quem tem display próprio (como .btn) */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 28, "WONK" 1;
  color: var(--folha);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

a { color: var(--folha); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--lavanda);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- estrutura ---------------------------------------------------------- */

.env { max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }

.secao { padding-block: var(--ritmo); }
/* a barra fixa não pode cobrir o título ao pular por âncora */
:where(section[id]) { scroll-margin-top: 4.5rem; }
.secao--fundo { background: var(--papel-fundo); }

.titulo-secao {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  margin-bottom: 2.5rem;
}
.titulo-secao em {
  font-style: italic;
  color: var(--lavanda);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}

.intro {
  max-width: 46ch;
  color: var(--folha-mid);
  font-size: 1.125rem;
  margin: -1.4rem 0 3rem;
}

/* ---- navegação ---------------------------------------------------------- */

.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 40;
  display: flex; justify-content: center; gap: clamp(.9rem, 2.6vw, 2.2rem);
  padding: 1.05rem var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s;
}
.nav a {
  font-size: .9rem; color: rgba(250, 249, 245, .9); text-decoration: none;
  letter-spacing: .01em; white-space: nowrap;
  text-shadow: 0 1px 12px rgba(18, 36, 27, .5);
  transition: color .4s;
}
.nav a:hover { color: #fff; }

/* depois que a capa sai da tela, o menu ganha fundo */
.nav[data-solido="sim"] {
  background: color-mix(in srgb, var(--papel) 95%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--linha);
}
.nav[data-solido="sim"] a { color: var(--folha-mid); text-shadow: none; }
.nav[data-solido="sim"] a:hover { color: var(--lavanda); }

.nav__curto { display: none; }
@media (max-width: 620px) {
  .nav { gap: 1rem; padding-inline: 1rem; }
  .nav a { font-size: .82rem; }
  .nav__longo { display: none; }
  .nav__curto { display: inline; }
}

/* ---- capa --------------------------------------------------------------- */

.capa {
  position: relative;
  display: grid;
  align-items: end;
  /* mínimo, não fixo: em janela baixa a capa cresce em vez de cortar o texto */
  min-height: 100svh;
  padding: clamp(5.5rem, 10vw, 8rem) var(--gutter) clamp(3rem, 8vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}

.capa__foto { position: absolute; inset: 0; z-index: -2; margin: 0; background: var(--folha); }
.capa__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }

/* véu que escurece o lado do texto e deixa o casal limpo à direita */
.capa::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(97deg, rgba(18, 36, 27, .80) 0%, rgba(18, 36, 27, .58) 32%,
                           rgba(18, 36, 27, .14) 60%, rgba(18, 36, 27, 0) 78%),
    linear-gradient(to top, rgba(18, 36, 27, .40) 0%, rgba(18, 36, 27, 0) 38%),
    linear-gradient(to bottom, rgba(18, 36, 27, .52) 0%, rgba(18, 36, 27, 0) 20%);
}

.capa__texto { max-width: min(36rem, 100%); }

.capa__nomes {
  color: var(--papel);
  font-size: clamp(3.2rem, 10.5vw, 8rem);
  line-height: .92;
  letter-spacing: -.03em;
  margin: 0 0 1.75rem;
}
.capa__nomes span { display: block; }
.capa__nomes .elo {
  display: inline-block;
  font-style: italic;
  font-size: .42em;
  color: var(--lavanda-fraca);
  font-variation-settings: "SOFT" 80, "WONK" 1;
  letter-spacing: 0;
  margin: .1em 0 .05em .06em;
}
/* o recuo do segundo nome é o único gesto ousado da página */
.capa__nomes .nome2 { margin-inline-start: clamp(.6rem, 4vw, 3.5rem); }

.capa__data {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(250, 249, 245, .82);
  margin: 0;
  max-width: 30ch;
}
.capa__data strong { font-weight: 600; color: var(--papel); display: block; }
.capa__data > span { display: block; }

/* no dia do casamento: o endereço e os botões para chegar lá */
.capa__endereco { font-size: .92em; color: rgba(250, 249, 245, .68); margin-top: .15rem; }
.capa__rotas { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 0; }
.capa__rotas .btn { padding: .6rem 1.05rem; }

/* o bilhete de quem chegou por um link de convite */
.capa__convite {
  margin: 1.6rem 0 0; padding-top: 1.1rem; max-width: 32ch;
  border-top: 1px solid rgba(250, 249, 245, .28);
  font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.5;
  color: rgba(250, 249, 245, .85);
}
.capa__convite b {
  display: block; margin-bottom: .1rem;
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-variation-settings: "SOFT" 80, "WONK" 1;
  font-size: 1.6em; line-height: 1.15; color: var(--lavanda-fraca);
}
.capa__convite a { display: inline-block; margin-top: .45rem; color: var(--papel); font-weight: 500; }

@media (max-width: 820px) {
  /* em tela alta o corte é vertical: reposiciona para o casal não sumir */
  .capa__foto img { object-position: 55% center; }
  .capa::after {
    background:
      linear-gradient(to top, rgba(18, 36, 27, .88) 0%, rgba(18, 36, 27, .58) 34%,
                              rgba(18, 36, 27, .12) 62%, rgba(18, 36, 27, 0) 82%),
      linear-gradient(to bottom, rgba(18, 36, 27, .55) 0%, rgba(18, 36, 27, 0) 16%);
  }
  .capa__texto { max-width: 100%; }
  .capa__nomes .nome2 { margin-inline-start: clamp(1rem, 8vw, 3rem); }
}

/* janela baixa (notebook de 768px, por exemplo): aperta para tudo caber na dobra */
@media (max-height: 700px) {
  .capa { padding-top: clamp(4rem, 8vh, 5rem); padding-bottom: clamp(2rem, 5vh, 3rem); }
  .capa__nomes { font-size: clamp(2.8rem, 7.5vh, 5.5rem); margin-bottom: 1rem; }
  .capa__convite { margin-top: 1rem; padding-top: .8rem; }
  .capa__rotas { margin-top: 1rem; }
}

/* ---- contagem regressiva ------------------------------------------------ */

.contagem { border-block: 1px solid var(--linha); padding-block: clamp(2.5rem, 6vw, 4rem); }
.contagem p {
  font-family: var(--display);
  font-variation-settings: "SOFT" 28, "WONK" 1;
  font-size: clamp(1.5rem, 4.2vw, 2.9rem);
  line-height: 1.25;
  color: var(--folha);
  margin: 0;
  max-width: 24ch;
}
.contagem b { font-weight: 600; font-style: italic; color: var(--lavanda); font-variant-numeric: tabular-nums; }
.contagem .contagem__filmes {
  font-family: var(--corpo); font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.5;
  color: var(--folha-mid); margin-top: .9rem; max-width: 40ch;
}
.contagem .contagem__filmes b { font-style: normal; }

/* ---- história: a conversa ------------------------------------------------ */

.conversa-env {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
/* no computador, o título fica parado ao lado enquanto a conversa passa */
.conversa-cabeca { position: sticky; top: 7rem; }
@media (max-width: 860px) {
  .conversa-env { grid-template-columns: 1fr; gap: 0; }
  .conversa-cabeca { position: static; }
}

.celular {
  background: var(--papel-fundo);
  border: 1px solid var(--linha);
  border-radius: 1.75rem;
  padding: 0 clamp(.75rem, 3vw, 1.25rem) 1.5rem;
}
.celular__topo {
  position: sticky; top: 3.6rem; z-index: 3;
  display: flex; align-items: center; gap: .75rem;
  margin: 0 calc(-1 * clamp(.75rem, 3vw, 1.25rem));
  padding: 1rem clamp(1rem, 3vw, 1.5rem);
  background: color-mix(in srgb, var(--papel-fundo) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
  border-radius: 1.75rem 1.75rem 0 0;
  line-height: 1.25;
}
.celular__topo b { font-weight: 600; color: var(--folha); display: block; }
.celular__topo small { color: var(--folha-mid); font-size: .82rem; }
.celular__avatar { display: flex; flex: none; }
.celular__avatar span {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  font-family: var(--display); font-size: 1rem; color: var(--papel);
  background: var(--lavanda); border: 2px solid var(--papel-fundo);
}
.celular__avatar span + span { background: var(--folha-mid); margin-left: -.7rem; }

.conversa, .msgs { list-style: none; margin: 0; padding: 0; }

.capitulo { padding-top: 1.25rem; }
/* a data grudada no topo, como no WhatsApp; troca quando chega o próximo capítulo */
.capitulo__marca {
  position: sticky; top: 8rem; z-index: 2;
  width: fit-content; max-width: 100%; margin: 0 auto .9rem;
  padding: .4rem .95rem;
  font-family: var(--corpo); font-size: .82rem; font-weight: 500; line-height: 1.35;
  color: var(--folha); text-align: center; letter-spacing: 0;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 999px;
  box-shadow: 0 2px 10px rgba(27, 58, 42, .06);
}
.capitulo__marca span { color: var(--lavanda); font-weight: 600; margin-right: .25rem; font-variant-numeric: tabular-nums; }
.capitulo__marca a { color: var(--folha); }
.capitulo__texto {
  margin: 0 auto 1.1rem; max-width: 34ch;
  font-size: .92rem; line-height: 1.55; text-align: center; color: var(--folha-mid);
}
.capitulo--fim { padding-top: 2rem; }
.capitulo--fim .capitulo__marca { position: static; }

.msgs { display: grid; gap: .35rem; }
.msg { position: relative; display: flex; }
.msg--dir { justify-content: flex-end; }
.msg + .msg--esq:not(:first-child), .msg + .msg--dir:not(:first-child) { margin-top: 0; }
.msg--esq + .msg--dir, .msg--dir + .msg--esq { margin-top: .45rem; }

.msg__balao {
  margin: 0; max-width: 82%;
  padding: .55rem .85rem;
  font-size: .98rem; line-height: 1.4;
  border-radius: 1.1rem;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.msg--esq .msg__balao { background: var(--papel); color: var(--texto); border-bottom-left-radius: .3rem; }
.msg--dir .msg__balao { background: var(--lavanda); color: var(--papel); border-bottom-right-radius: .3rem; }
.msg__quando { display: block; font-size: .72rem; opacity: .65; margin-top: .15rem; text-align: right; }

/* o "digitando…" ocupa o lugar do balão sem empurrar nada */
.msg__digitando {
  position: absolute; top: 0; display: flex; gap: .25rem; align-items: center;
  padding: .75rem .9rem; border-radius: 1.1rem; background: var(--papel);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.msg--esq .msg__digitando { left: 0; }
.msg--dir .msg__digitando { right: 0; background: var(--lavanda-fraca); }
.msg__digitando i {
  width: .42rem; height: .42rem; border-radius: 50%; background: var(--folha-fraca);
  animation: pula 1s infinite ease-in-out;
}
.msg__digitando i:nth-child(2) { animation-delay: .15s; }
.msg__digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-.25rem); } }

.msg[data-estado="espera"] .msg__balao,
.msg[data-estado="digitando"] .msg__balao { opacity: 0; transform: translateY(.5rem) scale(.94); }
.msg--esq[data-estado] .msg__balao { transform-origin: left bottom; }
.msg--dir[data-estado] .msg__balao { transform-origin: right bottom; }
.msg[data-estado="digitando"] .msg__digitando { opacity: 1; }

/* ---- o mapa da distância -------------------------------------------------- */

.rota { height: 400vh; background: var(--folha); color: var(--papel); }
.rota__palco {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  /* o mapa fica com a altura que sobrar: em janela baixa ele encolhe,
     em vez de empurrar a legenda para fora da tela */
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center;
  padding: 5rem var(--gutter) clamp(2rem, 6vh, 4rem);
}
.rota__mapa { width: 100%; height: 100%; max-width: 1100px; max-height: 60svh; margin-inline: auto; overflow: visible; grid-row: 2; }

.rota__placar { grid-row: 1; text-align: center; }
.rota__km {
  margin: 0; font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1;
  font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: 1; color: var(--papel);
}
.rota__km b { font-weight: 400; font-variant-numeric: tabular-nums; }
.rota__sub { margin: .4rem 0 0; color: var(--folha-fraca); font-size: .95rem; }

/* as legendas se empilham na mesma célula, que fica com a altura da maior */
.rota__legendas { grid-row: 3; display: grid; list-style: none; margin: 0 auto; padding: 0; width: min(100%, 36rem); }
.rota__legendas li {
  grid-area: 1 / 1; align-self: start; text-align: center;
  font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.5; color: rgba(250, 249, 245, .88);
  opacity: 0; transform: translateY(.6rem); transition: opacity .45s, transform .45s;
}
.rota__legendas li[data-ativa="sim"] { opacity: 1; transform: none; }
.rota__legendas b {
  display: block; font-family: var(--display); font-weight: 400; font-style: italic;
  color: var(--lavanda-fraca); font-size: 1.1em; margin-bottom: .15rem;
}

.rota__grade { fill: rgba(250, 249, 245, .1); }
.rota__tropico { stroke: rgba(250, 249, 245, .22); stroke-width: 1.5; stroke-dasharray: 3 9; }
.rota__tropico-nome { fill: rgba(250, 249, 245, .35); font: italic 20px var(--display); text-anchor: middle; letter-spacing: .04em; }
.rota__cidade { fill: var(--papel); font: 500 28px var(--corpo); text-anchor: middle; }
.rota__cidade--fraca { fill: rgba(250, 249, 245, .45); font-size: 20px; text-anchor: start; }
.rota__marco { fill: var(--papel); }
.rota__marco--fraco { fill: rgba(250, 249, 245, .45); }

.rota__reta, .rota__visita, .rota__mudanca, .rota__volta { fill: none; stroke-linecap: round; }
.rota__reta { stroke: rgba(250, 249, 245, .5); stroke-width: 2; }
.rota__visita { stroke: var(--lavanda-fraca); stroke-width: 1.6; opacity: .55; }
.rota__mudanca { stroke: var(--folha-fraca); stroke-width: 2.5; }
.rota__volta { stroke: var(--lavanda-fraca); stroke-width: 4; filter: drop-shadow(0 0 8px rgba(207, 196, 230, .6)); }
/* 2020: a linha vira a conexão do computador, passando dados de um lado pro outro */
.rota__reta--filme { stroke: var(--lavanda-fraca); stroke-width: 3; stroke-dasharray: 4 14 !important; animation: sinal .9s linear infinite; }
@keyframes sinal { to { stroke-dashoffset: -36; } }

.rota__pessoa circle { stroke: var(--folha); stroke-width: 4; }
.rota__pessoa text { font: 400 20px var(--display); text-anchor: middle; }
.rota__pessoa--l circle { fill: var(--lavanda-fraca); }
.rota__pessoa--l text { fill: var(--folha); }
.rota__pessoa--v circle { fill: var(--papel); }
.rota__pessoa--v text { fill: var(--folha); }

.rota__anel { fill: none; stroke: var(--lavanda-fraca); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rota__anel--aceso { opacity: 1; animation: anel 2.2s ease-out infinite; }
@keyframes anel { from { transform: scale(.8); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }

/* celular deitado: o número e as margens encolhem para o mapa aparecer */
@media (max-height: 500px) {
  .rota__palco { padding-top: 4rem; padding-bottom: 1.25rem; }
  .rota__km { font-size: clamp(2rem, 11vh, 3rem); }
  .rota__sub { margin-top: .2rem; font-size: .85rem; }
}

@media (max-width: 700px) {
  .rota__cidade { font-size: 40px; }
  .rota__cidade--fraca { font-size: 30px; }
  .rota__tropico-nome { font-size: 28px; }
  .rota__pessoa circle { r: 26px; }
  .rota__pessoa text { font-size: 28px; transform: translateY(3px); }
}

/* ---- galeria ------------------------------------------------------------ */

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 1.6vw, 1.4rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem); /* espaço para o desencontro das colunas */
  margin: 0; padding-inline: 0; list-style: none;
}
.galeria li { margin: 0; }
.galeria li:nth-child(3n+2) { transform: translateY(clamp(1.5rem, 4vw, 4rem)); }

.galeria button {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--papel-fundo);
  aspect-ratio: 2 / 3; overflow: hidden;
}
.galeria img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .4s;
}
.galeria button:hover img { transform: scale(1.035); }

@media (max-width: 680px) {
  .galeria { grid-template-columns: repeat(2, 1fr); padding-bottom: 3rem; }
  .galeria li:nth-child(3n+2) { transform: none; }
  .galeria li:nth-child(2n) { transform: translateY(1.5rem); }
}

.galeria__mais { margin: 0 0 2.5rem; text-align: center; }

.credito { margin-top: 1.5rem; font-size: .95rem; color: var(--folha-mid); }

/* ---- lightbox ----------------------------------------------------------- */

.lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100dvh; background: rgba(18, 33, 26, .96); }
.lightbox::backdrop { background: rgba(18, 33, 26, .9); }
.lightbox__palco { display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(1rem, 4vw, 3rem); }
/* a linha precisa de altura definida: sendo "auto", ela cresceria até o tamanho
   natural da foto e o max-height da imagem não teria contra o que se medir */
#lightbox .lightbox__palco {
  grid-template-rows: minmax(0, 1fr);
  padding-bottom: 3.75rem; /* espaço reservado para o contador */
}
/* o conteúdo do modal do Pix se agrupa no centro em vez de esticar */
.palco-pix { grid-auto-rows: max-content; align-content: center; gap: 1.5rem; text-align: center; color: var(--papel); }
.palco-pix h3 { color: var(--papel); font-size: 1.6rem; margin: 0; }
.palco-pix p  { margin: 0; font-size: .92rem; color: rgba(250, 249, 245, .78); max-width: 32ch; }
#pix-qr { background: #fff; padding: .9rem; line-height: 0; min-height: 4rem; }
.pix__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* uma foto sozinha (a de uma cota): sem setas e sem contador */
.lightbox[data-avulsa="sim"] .lightbox__ant,
.lightbox[data-avulsa="sim"] .lightbox__prox,
.lightbox[data-avulsa="sim"] .lightbox__conta { display: none; }

.lightbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  transition: filter .35s ease;
}
/* enquanto a foto cheia não chega, mostramos a miniatura ampliada */
.lightbox img[data-carregando="sim"] { filter: blur(8px); }
@media (prefers-reduced-motion: reduce) { .lightbox img { transition: none; } }
.lightbox__btn {
  position: absolute; z-index: 2;
  background: rgba(250, 249, 245, .1); color: var(--papel);
  border: 1px solid rgba(250, 249, 245, .3);
  width: 3rem; height: 3rem; border-radius: 50%;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .25s;
}
.lightbox__btn:hover { background: rgba(250, 249, 245, .25); }
.lightbox__fechar { top: 1rem; right: 1rem; }
.lightbox__ant { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__prox { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__conta { position: absolute; z-index: 2; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(250,249,245,.75); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* ---- onde e quando ------------------------------------------------------ */

.jantar {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: 46rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linha);
}
.jantar__hora {
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "WONK" 1;
  font-size: clamp(2.2rem, 5vw, 3rem);
  color: var(--lavanda);
  line-height: 1;
  margin: 0;
}
.jantar__onde h3 { font-size: 1.6rem; margin-bottom: .45rem; }
.jantar__onde address { font-style: normal; color: var(--folha-mid); margin-bottom: .75rem; }
.jantar__onde .nota { font-size: .95rem; color: var(--folha-mid); margin: 0 0 1.25rem; }
/* o dia da semana embaixo do horário: é sexta, e às 19h o trânsito pesa */
.jantar__dia { margin: .6rem 0 0; font-size: .95rem; line-height: 1.35; color: var(--folha-mid); }
.jantar__links { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin: 0; }

.link-mapa {
  display: inline-block; font-size: .95rem; color: var(--folha);
  border-bottom: 1px solid var(--lavanda); text-decoration: none; padding-bottom: 2px;
}
.link-mapa:hover { color: var(--lavanda); }

@media (max-width: 520px) {
  .jantar { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---- presentes ---------------------------------------------------------- */

.pix-chave {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  border: 1px solid var(--linha); padding: 1.25rem 1.5rem; margin-bottom: 3rem;
  max-width: 34rem;
}
.pix-chave span { font-family: var(--corpo); font-size: 1.05rem; word-break: break-all; }
.pix-chave small { display: block; color: var(--folha-mid); font-size: .82rem; margin-bottom: .15rem; }

.cotas { list-style: none; margin: 0; padding: 0; max-width: 42rem; }
.cotas li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1rem;
  padding-block: 1.15rem; border-top: 1px solid var(--linha);
}
.cotas li:last-child { border-bottom: 1px solid var(--linha); }
.cotas .nome { flex: 1 1 12rem; }
.cotas .valor {
  font-family: var(--display); font-size: 1.2rem; color: var(--folha);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* na volta da lua de mel: a foto do que a cota pagou, que amplia no clique */
.cotas .cota--foto { align-items: center; }
/* com a foto do lado, o nome aceita ficar mais estreito para o valor não descer de linha */
.cotas .cota--foto .nome { flex-basis: 7rem; }
.cota__foto {
  flex: none; width: 4.75rem; aspect-ratio: 1; padding: 0; border: 0; cursor: zoom-in;
  background: var(--papel); overflow: hidden;
}
.cota__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.cota__foto:hover img { transform: scale(1.05); }
.cota__legenda { display: block; margin-top: .15rem; font-size: .88rem; font-style: italic; color: var(--folha-mid); }

/* ---- botões ------------------------------------------------------------- */

.btn {
  display: inline-block; font-family: var(--corpo); font-size: .95rem; font-weight: 500;
  padding: .7rem 1.35rem; border: 1px solid var(--folha); background: none; color: var(--folha);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .25s, color .25s;
}
.btn:hover { background: var(--folha); color: var(--papel); }
.btn--cheio { background: var(--folha); color: var(--papel); }
.btn--cheio:hover { background: var(--lavanda); border-color: var(--lavanda); }
.btn--grande { padding: .95rem 2.1rem; font-size: 1.02rem; }
/* claro, para usar sobre o fundo escuro dos modais */
.btn--claro { background: var(--papel); border-color: var(--papel); color: var(--folha); }
.btn--claro:hover { background: var(--lavanda); border-color: var(--lavanda); color: var(--papel); }
/* transparente, para ficar em cima da foto da capa */
.btn--vidro {
  color: var(--papel); border-color: rgba(250, 249, 245, .6);
  background: rgba(250, 249, 245, .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn--vidro:hover { background: var(--papel); border-color: var(--papel); color: var(--folha); }

/* ---- formulário --------------------------------------------------------- */

.form { display: grid; gap: 1.5rem; max-width: 34rem; }
.campo { display: grid; gap: .4rem; }
.campo > span { font-size: .92rem; color: var(--folha-mid); }
.campo input, .campo select, .campo textarea {
  font-family: var(--corpo); font-size: 1.02rem; color: var(--texto);
  padding: .7rem .85rem; border: 1px solid var(--linha); background: var(--papel);
  border-radius: 0;
}
.campo textarea { resize: vertical; min-height: 5.5rem; }
.form .aviso { font-size: .9rem; color: var(--folha-mid); margin: 0; }

/* ---- perguntas ---------------------------------------------------------- */

.faq { max-width: 52ch; }
.faq details { border-top: 1px solid var(--linha); }
.faq details:last-of-type { border-bottom: 1px solid var(--linha); }
.faq summary {
  cursor: pointer; padding-block: 1.15rem; list-style: none;
  font-family: var(--display); font-size: 1.2rem; color: var(--folha);
  font-variation-settings: "SOFT" 24, "WONK" 1;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--lavanda); font-size: 1.4rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1.3rem; color: var(--folha-mid); }

/* ---- rodapé ------------------------------------------------------------- */

.rodape { background: var(--folha); color: var(--papel); padding-top: clamp(3.5rem, 8vw, 5.5rem); text-align: center; overflow: hidden; }

/* o campo de lavanda */
.lavandas { position: relative; height: 170px; margin-top: 2rem; }
.lavanda {
  position: absolute; bottom: -6px; width: 30px; margin-left: -15px;
  transform-origin: 50% 100%;
  rotate: calc(var(--vento, 0deg) + var(--empurra, 0deg));
  transition: rotate .7s cubic-bezier(.2,.8,.2,1);
  animation: balanca var(--duracao, 4s) ease-in-out var(--atraso, 0s) infinite alternate;
}
@keyframes balanca { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@media (max-width: 700px) { .lavanda:nth-child(2n) { display: none; } }
.rodape h2 { color: var(--papel); font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: .75rem; }
.rodape h2 em { font-style: italic; color: var(--lavanda-fraca); }
.rodape p { color: rgba(250, 249, 245, .72); margin: .3rem 0; font-size: .95rem; }
.rodape a { color: var(--lavanda-fraca); }

/* os créditos, como no fim de um filme: o papel de um lado do eixo, quem fez do outro */
.creditos { display: grid; gap: .6rem; max-width: 40rem; margin: 2.75rem auto 0; }
.creditos div { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.1rem; align-items: baseline; }
.creditos dt { text-align: right; font-size: .88rem; line-height: 1.4; color: var(--folha-fraca); }
.creditos dd {
  margin: 0; text-align: left;
  font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: 1.15rem; line-height: 1.3; color: var(--papel);
}
/* no celular não cabem duas colunas: o papel vai em cima de quem fez */
@media (max-width: 520px) {
  .creditos { gap: 1.15rem; }
  .creditos div { grid-template-columns: 1fr; row-gap: .1rem; }
  .creditos dt, .creditos dd { text-align: center; }
}

/* ---- ingresso ----------------------------------------------------------- */

/* em tela baixa, o ingresso encolhe para o título e os botões caberem sem apertar;
   com o celular deitado não cabe tudo: ele para em 9rem e o quadro rola */
.palco-ingresso { gap: 1rem; overflow-y: auto; align-content: safe center; }
.palco-ingresso img { max-height: max(9rem, min(58svh, calc(100svh - 22rem))); width: auto; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.ingresso__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* ---- utilidades --------------------------------------------------------- */

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 1rem);
  background: var(--folha); color: var(--papel); padding: .8rem 1.4rem;
  font-size: .95rem; z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.toast[data-visivel="sim"] { opacity: 1; transform: translate(-50%, 0); }

/* entrada da capa: um único momento orquestrado */
@media (prefers-reduced-motion: no-preference) {
  .capa__nomes span, .capa__data, .capa__foto,
  .capa__rotas, .capa__convite { animation: entrar .9s cubic-bezier(.22,.61,.36,1) backwards; }
  .capa__nomes .nome1 { animation-delay: .05s; }
  .capa__nomes .elo   { animation-delay: .16s; }
  .capa__nomes .nome2 { animation-delay: .24s; }
  .capa__data         { animation-delay: .42s; }
  .capa__rotas,
  .capa__convite      { animation-delay: .56s; }
  .capa__foto         { animation-delay: .1s; }
  @keyframes entrar { from { opacity: 0; transform: translateY(1.2rem); } }
}

/* =========================================================================
   A página dos convites (convites.html): só os noivos usam
   ========================================================================= */

.painel .secao:first-child { padding-top: clamp(3rem, 7vw, 5.5rem); }
.painel code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em;
  background: var(--lavanda-veu); padding: .1em .35em; border-radius: 3px; word-break: break-all;
}

.painel__alerta {
  max-width: 46rem; margin: 0 0 2.5rem; padding: 1rem 1.25rem;
  background: var(--lavanda-veu); border-left: 3px solid var(--lavanda); color: var(--folha);
}

.painel__campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.75rem clamp(1.5rem, 4vw, 3rem); margin-bottom: 3.5rem;
}
.campo__dica { margin: .55rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--folha-mid); }

.link-botao {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--folha); text-decoration: underline; text-underline-offset: .22em;
}
.link-botao:hover { color: var(--lavanda); }

.painel__cabeca {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--linha);
}
.painel__cabeca h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); }

.btn--pequeno { padding: .45rem .95rem; font-size: .88rem; }
.btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }

.convites { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.convite {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: .6rem 1.5rem; align-items: center;
  padding-block: 1rem; border-bottom: 1px solid var(--linha);
  transition: opacity .3s;
}
/* já enviado: fica mais claro, mas continua clicável */
.convite[data-enviado="sim"] { opacity: .5; }
.convite__quem { margin: 0; line-height: 1.35; }
.convite__quem b { display: block; font-weight: 600; color: var(--folha); }
.convite__quem small { color: var(--folha-mid); font-size: .84rem; }
.convite__erro { color: #9A3B3B; }
.convite__link { font-size: .84rem; color: var(--folha-mid); word-break: break-all; }
.convite__acoes { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.convite__enviado {
  display: inline-flex; align-items: center; gap: .35rem; margin-left: .25rem;
  font-size: .86rem; color: var(--folha-mid); cursor: pointer;
}
.convite__enviado input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--lavanda); }

@media (max-width: 900px) {
  .convite { grid-template-columns: 1fr; }
}

.fases { list-style: none; margin: 0; padding: 0; max-width: 48rem; }
.fases li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem;
  padding-block: .95rem; border-top: 1px solid var(--linha);
}
.fases li:last-child { border-bottom: 1px solid var(--linha); }
.fases a { font-family: var(--display); font-variation-settings: "SOFT" 24, "WONK" 1; font-size: 1.2rem; }
.fases small { color: var(--folha-mid); font-size: .9rem; }

/* o cartão das mesas: tamanho A6, quatro numa folha A4 */
#cartoes { overflow-x: auto; padding: .25rem 0 2rem; }
.folha { display: grid; justify-content: start; }
.cartao {
  width: 105mm; height: 148.5mm; padding: 14mm 12mm;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.5mm;
  background: #fff; color: var(--folha); text-align: center;
  box-shadow: 0 12px 40px rgba(27, 58, 42, .14);
  /* sem isso, o Chrome escurece o lilás na impressão */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* na tela, um basta de amostra */
.cartao + .cartao { display: none; }
.cartao p { margin: 0; }
.cartao__chamada {
  font-family: var(--display); font-style: italic; font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: 30pt; line-height: 1; color: var(--lavanda);
}
.cartao__texto { max-width: 64mm; font-size: 11pt; line-height: 1.4; color: var(--folha-mid); text-wrap: balance; }
.cartao__qr { width: 48mm; line-height: 0; }
.cartao__qr svg { width: 100%; height: auto; }
.cartao__qr path { fill: var(--folha); }
.cartao__dica { font-size: 8.5pt; color: var(--folha-mid); }
.cartao__assina { margin-top: 3mm !important; font-family: var(--display); font-size: 15pt; line-height: 1.2; }
.cartao__assina em { font-style: italic; color: var(--lavanda); }
.cartao__assina small {
  display: block; margin-top: 1.5mm;
  font-family: var(--corpo); font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: var(--folha-mid);
}

@media print {
  @page { size: A4; margin: 0; }
  body.painel { background: #fff; }
  .painel main > :not(.painel__cartoes),
  .painel__cartoes .env > :not(#cartoes),
  .toast { display: none !important; }
  .painel__cartoes, .painel__cartoes .env, #cartoes {
    margin: 0; padding: 0; max-width: none; background: none; overflow: visible;
  }
  .folha { grid-template-columns: repeat(2, 105mm); grid-auto-rows: 148.5mm; }
  .cartao + .cartao { display: flex; }
  /* a linha tracejada é por onde cortar */
  .cartao { box-shadow: none; outline: .25mm dashed #c4c4c4; outline-offset: -.125mm; }
}

/* ---- convites.html: a prévia do convite em imagem ------------------------
   O quadro é o mesmo do ingresso do site (.palco-ingresso). O convite é mais
   comprido que o ingresso, e embaixo dele ainda pode vir o aviso de quando os
   links apontam para este computador: a imagem encolhe mais, para os botões
   aparecerem sem rolar. */
#modal-convite .palco-ingresso img { max-height: max(9rem, min(62svh, calc(100svh - 20rem))); }
#modal-convite[data-local="sim"] .palco-ingresso img { max-height: max(9rem, min(58svh, calc(100svh - 26rem))); }
.palco-pix .convite-img__aviso {
  max-width: 36ch; padding: .7rem 1rem; text-align: left;
  background: rgba(207, 196, 230, .14); border-left: 3px solid var(--lavanda-fraca);
  color: var(--papel);
}
.convite-img__aviso code { background: rgba(250, 249, 245, .14); }