/* ============================================================
   Barbara & Victor — 29.08.2026
   Identidade: Figma S8bKTtnHlFs9tGA6V2eB5I, nó 3:81.
   A pilha do hero é a mesma que o Victor montou lá:
   fundo → gradiente do topo → camada do casal → gradiente da base → tipografia.
   ============================================================ */

:root {
  --azul: #2e51a3;
  --azul-escuro: #24408a;
  --navy: #191a3a;
  --pervinca: #b4c4ea;
  --pervinca-clara: #d7e0f5;
  --papel: #f6f8fd;
  --papel-2: #eaeff9;
  --branco: #fff;

  --linha: rgb(25 26 58 / 0.14);
  --linha-forte: rgb(25 26 58 / 0.34);

  --display: "Italiana", "Optima", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Great Vibes", cursive;
  /* só a contagem regressiva: número pequeno em Italiana some, a haste vira
     fio. A data grande do hero continua na Cormorant, que é a identidade. */
  /* Jost segura o que é interface: rótulo, ajuda, pílula, botão de
     formulário. Serifa em campo de formulário lê pior e foi o que
     deixava a confirmação com cara de documento, não de app. */
  --apoio: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Número é informação, não ornamento: preço, contagem, dia, valor de Pix.
     A Garamond desenha o algarismo com o mesmo capricho do texto — e é por
     isso que ela atrapalha aqui: 3 e 8 ficam parecidos, o 1 quase some, e
     quem está comparando "R$ 249,99" com "R$ 294,28" precisa de leitura, não
     de beleza. Jost tem algarismo de altura uniforme e desenho seco.
     Trocar aqui muda todo valor do site de uma vez. */
  --numeros: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* escala de espaço: tudo no site usa estes degraus, nada solto */
  --e1: 0.5rem;
  --e2: 0.75rem;
  --e3: 1rem;
  --e4: 1.5rem;
  --e5: 2rem;
  --e6: 3rem;
  --e7: 4rem;
  --e8: 6rem;
  --secao: clamp(4.5rem, 11vw, 8rem);
  --margem: clamp(1.25rem, 5vw, 3rem);
  --largura: 60rem;

  --suave: cubic-bezier(0.22, 1, 0.36, 1);

  /* grão de papel: ruído SVG, sem arquivo externo */
  --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");

  --z-grad-topo: 2;
  --z-casal: 3;
  --z-grad-base: 4;
  --z-tipo: 5;
  --z-menu: 30;
  --z-dialogo: 40;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* A raiz cresce com a tela: no celular fica na preferência do navegador,
   no desktop chega a ~1,3× — era ali que o texto ficava miúdo. O 1rem de
   dentro do clamp é o tamanho herdado (a preferência do usuário), então
   quem aumenta a fonte do navegador continua sendo respeitado. */
html {
  font-size: clamp(1rem, 0.86rem + 0.46vw, 1.3rem);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--pervinca); color: var(--navy); }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* grão por cima de tudo — segura o "digital demais" das fotos em duotone */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: var(--textura);
  background-size: 260px 260px;
  opacity: 0.3;
  mix-blend-mode: overlay;
}

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.pular {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -130%);
  z-index: 50;
  background: var(--navy);
  color: var(--branco);
  padding: var(--e2) var(--e4);
  text-decoration: none;
  font-size: 0.95rem;
  transition: transform 0.3s var(--suave);
}
.pular:focus-visible { transform: translate(-50%, 0); }

/* ============================================================
   CORTINA DE ENTRADA
   Sem JS ela nem aparece; com JS, sai sozinha (o script do <head>
   levanta a cortina em 4,5s mesmo que algo quebre depois).
   ============================================================ */

.cortina { display: none; }
.js .cortina {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--e5);
  background: var(--papel-2);
  transition: opacity 0.9s var(--suave), visibility 0s linear 0.9s;
}
.js .cortina::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--textura);
  background-size: 260px 260px;
  opacity: 0.14;
  mix-blend-mode: multiply;
}
.js.pronto .cortina { opacity: 0; visibility: hidden; pointer-events: none; }
/* Trava a rolagem SÓ em página que tem cortina. Sem o :has, a loja (que não
   tem cortina e por isso nunca recebe .pronto) ficava travada para sempre —
   foi exatamente o que aconteceu. E se o :has faltar, falha para o lado bom:
   a página rola. */
.js:not(.pronto):has(.cortina) { overflow: hidden; }

.cortina-marca {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul);
  opacity: 0.22;
  animation: marca-respira 2.6s ease-in-out infinite;
}
.cortina-letra {
  font-family: var(--display);
  font-size: clamp(4rem, 17vw, 7rem);
  line-height: 1;
}
.cortina-amp {
  font-family: var(--script);
  font-size: clamp(3.4rem, 14vw, 5.8rem);
  line-height: 1;
  margin-inline: -0.06em;
  translate: 0 0.06em;
}
@keyframes marca-respira {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.42; }
}

.cortina-data {
  position: relative;
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  font-size: 0.68rem;
  color: var(--navy);
  opacity: 0.5;
}
.cortina-fio {
  position: relative;
  width: clamp(6rem, 30vw, 9rem);
  height: 1px;
  background: var(--linha);
  overflow: hidden;
}
.cortina-fio span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--azul);
  transform-origin: left;
  scale: 0 1;
  transition: scale 0.5s linear;
}

/* ---------- tipografia ---------- */

.titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 6.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--azul);
  margin: 0 0 var(--e4);
  text-wrap: balance;
}
.titulo-menor { font-size: clamp(1.75rem, 5.2vw, 2.3rem); }

.selo {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-size: 0.72rem;
  color: var(--azul);
  margin: 0 0 var(--e3);
}

.subtexto {
  max-width: 34rem;
  margin: 0 auto var(--e6);
  text-wrap: pretty;
}

/* ---------- menu ---------- */

/* ============================================================
   MENU — um botão só, no computador e no celular

   Era uma faixa horizontal com os seis links. No celular ela não cabia:
   "História" e "Confirmar" ficavam cortados nas duas pontas, e não havia
   como saber que dava pra arrastar. Aumentar a fonte piorava; diminuir
   deixava ilegível. O problema não era tamanho, era o formato.

   Agora é um botão que abre uma folha. Mesmo gesto nas duas telas — uma
   coisa a menos pra manter, e o convite ganha de volta a faixa do topo.
   ============================================================ */

.menu-botao {
  position: fixed;
  z-index: calc(var(--z-menu) + 1);
  top: calc(0.9rem + env(safe-area-inset-top, 0px));
  right: var(--margem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem 0.6rem 0.85rem;
  border: 1px solid rgb(25 26 58 / 0.1);
  border-radius: 999px;
  background: rgb(246 248 253 / 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 6px 22px rgb(25 26 58 / 0.1);
  color: var(--navy);
  cursor: pointer;
  translate: 0 -140%;
  transition: translate 0.5s var(--suave), background-color 0.3s var(--suave),
    box-shadow 0.3s var(--suave);
}
.menu-botao.visivel { translate: 0 0; }
@media (hover: hover) {
  .menu-botao:hover {
    background: rgb(246 248 253 / 0.96);
    box-shadow: 0 10px 30px rgb(25 26 58 / 0.16);
  }
}

/* dois traços viram um X — sem um terceiro traço no meio pra sumir, que é
   o detalhe que faz a animação parecer barata */
.menu-tracos {
  position: relative;
  width: 1.05rem;
  height: 0.62rem;
  flex: none;
}
.menu-tracos i {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: translate 0.32s var(--suave), rotate 0.32s var(--suave);
}
.menu-tracos i:first-child { top: 0; }
.menu-tracos i:last-child { bottom: 0; }
.menu-botao[aria-expanded="true"] .menu-tracos i:first-child {
  translate: 0 0.3rem;
  rotate: 45deg;
}
.menu-botao[aria-expanded="true"] .menu-tracos i:last-child {
  translate: 0 -0.3rem;
  rotate: -45deg;
}

.menu-rotulo {
  font-family: var(--apoio);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* o véu não escurece: só tira o foco do que está atrás */
.menu-veu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: rgb(25 26 58 / 0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--suave);
}
.menu-veu.aberto { opacity: 1; pointer-events: auto; }

.menu {
  position: fixed;
  z-index: calc(var(--z-menu) + 1);
  top: calc(3.9rem + env(safe-area-inset-top, 0px));
  right: var(--margem);
  width: min(17rem, calc(100vw - var(--margem) * 2));
  display: grid;
  padding: 0.5rem;
  border: 1px solid rgb(25 26 58 / 0.08);
  border-radius: 18px;
  background: rgb(250 251 254 / 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 24px 60px rgb(25 26 58 / 0.22);
  transform-origin: 100% 0;
  opacity: 0;
  scale: 0.94;
  translate: 0 -0.5rem;
  pointer-events: none;
  transition: opacity 0.26s var(--suave), scale 0.26s var(--suave),
    translate 0.26s var(--suave);
}
.menu.aberto { opacity: 1; scale: 1; translate: 0 0; pointer-events: auto; }

.menu a {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.15rem;
  padding: 0.62rem 0.7rem;
  border-radius: 12px;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--navy);
  transition: background-color 0.22s var(--suave), color 0.22s var(--suave);
}
/* o número é o que dá cara de sumário em vez de lista de links */
.menu a::before {
  content: counter(item-menu, decimal-leading-zero);
  font-family: var(--apoio);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--azul);
  opacity: 0.55;
}
.menu { counter-reset: item-menu; }
.menu a { counter-increment: item-menu; }
@media (hover: hover) {
  .menu a:hover { background: rgb(180 196 234 / 0.28); color: var(--azul); }
}
.menu a:focus-visible { background: rgb(180 196 234 / 0.34); }

/* cada linha entra um instante depois da anterior: é o que faz a folha
   parecer que abriu, e não que apareceu */
.menu.aberto a {
  animation: menu-item 0.34s var(--suave) backwards;
  animation-delay: calc(var(--i, 0) * 0.035s + 0.05s);
}
@keyframes menu-item {
  from { opacity: 0; translate: 0 -0.45rem; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .menu, .menu-botao, .menu-veu, .menu-tracos i { transition: none; }
  .menu.aberto a { animation: none; }
}

/* ============================================================
   HERO — a pilha de camadas do Figma
   ============================================================ */

.hero {
  position: relative;
  /* 94svh e não 100: a beirada da seção seguinte aparece de relance acima
     da dobra, e essa fresta é o convite de rolagem mais forte que existe —
     mais que qualquer seta. Tela cheia exata dizia "o site acabou aqui". */
  height: 94svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--pervinca);
}

.hero-fundo, .hero-casal { position: absolute; inset: 0; }
.hero-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; }

/* Gradiente do topo: pervinca em cima, some no meio.
   34% e não 52%: com 52% em cima e 52% embaixo os dois véus cobriam o hero
   inteiro e a foto do ambiente (o vão da porta, a cortina) sumia — sobrava
   só o recorte do casal sobre chapado. Aqui eles deixam a foto respirar nas
   pontas e ainda seguram a leitura do nome e da data. */
.hero-grad-topo {
  position: absolute;
  z-index: var(--z-grad-topo);
  inset: 0 0 auto;
  height: 34%;
  background: linear-gradient(to bottom, rgb(180 196 234 / 0.92) 0%, rgb(180 196 234 / 0) 100%);
}
/* ---------- aura: eles é que brilham ----------
   Camada branca com a silhueta exata do casal, logo atrás deles. Como o
   recorte por cima cobre o miolo pixel a pixel, o que aparece é só o
   vazamento das drop-shadows — luz saindo das bordas, não um clarão em
   cima da foto (que lavava os rostos). */
.hero-aura {
  position: absolute;
  z-index: calc(var(--z-casal) - 1);
  inset: 0;
  pointer-events: none;
  animation: hero-aura-pulsa 4.5s ease-in-out infinite;
}
.hero-aura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 54%;   /* idêntico ao .hero-casal, senão desalinha */
  /* brightness(0) invert(1) chapa a foto de branco preservando o alfa;
     as três sombras são o brilho, do mais fechado ao mais aberto.
     Branco puro some: o fundo do hero já é quase branco. Um fio de calor
     (253/247 no verde e no azul) é o que faz a luz se separar do fundo
     sem virar dourado. */
  filter: brightness(0) invert(1)
    drop-shadow(0 0 6px rgb(255 253 247 / 1))
    drop-shadow(0 0 24px rgb(255 251 240 / 0.95))
    drop-shadow(0 0 64px rgb(255 249 232 / 0.85));
}
@keyframes hero-aura-pulsa {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aura { animation: none; opacity: 0.7; }
}

/* a camada do casal entra ENTRE os dois gradientes, como no arquivo dele */
.hero-casal { z-index: var(--z-casal); }
.hero-casal img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; }
/* gradiente da base: cobre as pernas e funde no papel */
.hero-grad-base {
  position: absolute;
  z-index: var(--z-grad-base);
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, rgb(180 196 234 / 0.96) 10%, rgb(180 196 234 / 0) 100%);
}

.js:not(.pronto) .hero-fundo img, .js:not(.pronto) .hero-casal img,
.js:not(.pronto) .hero-aura img { transform: scale(1.06); }
.js.pronto .hero-fundo img, .js.pronto .hero-casal img,
.js.pronto .hero-aura img { animation: respira 2.2s var(--suave) both; }
@keyframes respira { from { transform: scale(1.06); } to { transform: scale(1); } }

.hero-tipo {
  position: absolute;
  z-index: var(--z-tipo);
  inset: 0;
  display: grid;
  /* duas faixas: os nomes ocupam o vão, o pé fica encostado embaixo */
  grid-template-rows: 1fr auto;
  padding: max(var(--e6), env(safe-area-inset-top)) var(--margem)
           max(var(--e6), env(safe-area-inset-bottom));
  text-align: center;
  pointer-events: none;
}

.hero-selo {
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  font-size: clamp(0.7rem, 2.5vw, 0.95rem);
  color: var(--navy);
  /* o selo cai em cima do cabelo dele; o halo pervinca devolve a leitura */
  text-shadow: 0 0 14px rgb(180 196 234 / 0.95), 0 0 4px rgb(180 196 234 / 0.9);
}

.hero-centro { position: relative; }

.hero-nomes {
  position: absolute;
  left: 0;
  top: 6%;
  margin: 0;
  font-weight: 400;
  text-align: left;
}
.nome {
  display: block;
  font-family: var(--display);
  font-size: clamp(3.6rem, 17vw, 6.4rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--azul);
}
.nome-b { margin-left: 0.55em; }
.hero-amp {
  position: absolute;
  left: -0.1em;
  top: 0.06em;
  font-family: var(--script);
  font-size: clamp(9.5rem, 42vw, 17rem);
  line-height: 1;
  color: var(--branco);
  pointer-events: none;
}

.hero-data {
  position: absolute;
  right: 0;
  bottom: 8%;
  margin: 0;
  text-align: right;
}
.data-num {
  display: block;
  /* Italiana, a mesma dos nomes logo acima. Em EB Garamond itálico a data
     parecia de outra peça no meio do mesmo hero. */
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.8rem, 16vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--azul);
}
.data-dia {
  display: block;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  font-size: clamp(0.92rem, 3.4vw, 1.25rem);
  color: var(--navy);
}
/* quanto falta, logo abaixo do dia. Mesma família dos números da data —
   Jost aqui destoava do bloco inteiro */
.data-conta {
  display: block;
  margin-top: 0.5em;
  font-family: var(--numeros);
  font-style: italic;
  font-size: clamp(1.05rem, 4vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--navy);
  opacity: 0.78;
}
.data-conta b {
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.01em;
  color: var(--azul);
  opacity: 1;
}

/* pé do hero: um bloco só — confirmar presença e o convite à rolagem */
.hero-pe {
  display: grid;
  justify-items: center;
  gap: var(--e4);
  pointer-events: auto;
}
.hero-desce {
  display: grid;
  justify-items: center;
  gap: var(--e2);
  text-decoration: none;
  color: var(--navy);
}
.hero-desce-texto {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  font-size: 0.62rem;
  opacity: 0.6;
  transition: opacity 0.3s var(--suave);
}
.hero-desce:hover .hero-desce-texto { opacity: 1; }
/* o fio desce, some e volta — dá a direção sem seta desenhada */
.hero-desce-fio {
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(to bottom, var(--linha-forte), transparent);
  overflow: hidden;
}
.js .hero-desce-fio { position: relative; background: var(--linha); }
.js .hero-desce-fio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--azul);
  animation: fio-desce 2.4s var(--suave) infinite;
}
@keyframes fio-desce {
  0% { translate: 0 -100%; }
  55%, 100% { translate: 0 100%; }
}

.js.pronto .hero-selo { animation: sobe 1.2s var(--suave) 0.15s both; }
.js.pronto .hero-amp { animation: sobe 1.6s var(--suave) 0.3s both; }
.js.pronto .nome-a { animation: sobe 1.3s var(--suave) 0.5s both; }
.js.pronto .nome-b { animation: sobe 1.3s var(--suave) 0.62s both; }
.js.pronto .hero-data { animation: sobe 1.2s var(--suave) 0.85s both; }
.js.pronto .hero-pe { animation: sobe 1.2s var(--suave) 1.05s both; }
/* enquanto a cortina está no ar, a tipografia do hero fica escondida */
.js:not(.pronto) .hero-selo, .js:not(.pronto) .hero-amp,
.js:not(.pronto) .nome-a, .js:not(.pronto) .nome-b,
.js:not(.pronto) .hero-data, .js:not(.pronto) .hero-pe { opacity: 0; }
@keyframes sobe {
  from { opacity: 0; translate: 0 22px; filter: blur(6px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* ============================================================
   SEÇÕES
   ============================================================ */

section { padding: var(--secao) var(--margem); }
.centro { max-width: var(--largura); margin-inline: auto; }
.texto-centro { text-align: center; }

/* ---------- convite ---------- */

.convite {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: var(--secao);
}
.convite-fundo { position: absolute; inset: -10% 0; }
.convite-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 42%; }
/* véu leve: a foto do anel precisa aparecer, só as pontas fundem no papel */
.convite-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--papel) 0%, rgb(246 248 253 / 0.7) 18%,
      rgb(246 248 253 / 0.7) 82%, var(--papel) 100%);
}
.convite-corpo {
  position: relative;
  max-width: var(--largura);
  margin-inline: auto;
  display: grid;
  gap: var(--e7);
  align-items: center;
}
.convite-lado { min-width: 0; }
/* o texto corrido em Jost: a serifada dele competia com o título e com a
   frase de destaque, que são as duas peças que devem falar mais alto */
.convite .subtexto {
  margin-bottom: var(--e4);
  font-family: var(--apoio);
  font-weight: 300;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.6;
}

.contagem-bloco { margin-top: 0; }
.contagem-nota {
  margin: var(--e2) 0 0;
  font-family: var(--script);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--azul);
}

/* a frase de destaque do convite: mais peso e mais corpo que o texto
   corrido — é a linha que fala com a pessoa que está lendo */
.convite-frase {
  margin: var(--e3) 0 0;
  max-width: 30rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 4.4vw, 1.7rem);
  line-height: 1.2;             /* linhas mais juntas: é um bloco, não um parágrafo */
  color: var(--navy);
  text-wrap: balance;
}

.data-bloco { display: grid; justify-items: center; gap: var(--e1); }
.data-mes {
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  font-size: 0.92rem;
  color: var(--azul);
}
.data-linha {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(var(--e3), 4vw, var(--e5));
  width: min(100%, 26rem);
  margin-block: var(--e2);
}
.data-lado {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.9rem;
  padding-block: var(--e2);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.data-lado:first-child { justify-self: end; }
.data-lado:last-child { justify-self: start; }
.data-dia-num {
  font-family: var(--display);
  font-size: clamp(4.6rem, 17vw, 7.5rem);
  line-height: 0.88;
  color: var(--azul);
}
.data-ano {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  font-size: 1.05rem;
}

/* a data abre a coluna da direita; o filete a separa do contador */
.contagem-bloco .data-bloco {
  width: 100%;
  margin-bottom: var(--e4);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--linha);
}

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

.contagem-titulo {
  margin: 0 0 var(--e3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  font-size: 0.74rem;
  color: var(--azul);
}
/* Quatro colunas iguais dentro de uma faixa de filete, como um pauta de
   caderno — em vez de quatro números soltos flutuando com vão entre eles.
   As colunas 1fr também resolvem o tremor: com largura vinda do conteúdo, o
   relógio pula a cada segundo, porque "12" e "21" não medem o mesmo. Isso
   valia para a Garamond que estava aqui antes e continua valendo agora —
   coluna fixa é a garantia, independente da fonte. */
.contagem-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 88% e não 100%: o rem é fluido aqui, então 22rem estourava a coluna e
     o contador encostava nos dois lados em vez de ficar centrado */
  width: min(20rem, 88%);
  margin-inline: auto;
  padding-block: var(--e3);
  border-block: 1px solid var(--linha);
  --cd: clamp(1.9rem, 6.5vw, 2.4rem);
}
.contagem-celula {
  display: grid;
  gap: var(--e1);
  place-items: center;
  border-inline-end: 1px solid var(--linha);
}
.contagem-celula:last-child { border-inline-end: 0; }
.contagem-num {
  font-family: var(--numeros);
  font-weight: 600;
  font-size: var(--cd);
  line-height: 1;
  color: var(--azul);
  transition: opacity 0.35s var(--suave);
}
.contagem-num.troca { opacity: 0.25; }
.contagem-rotulo {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.62rem;
  opacity: 0.72;
}
.contagem-hoje {
  margin: var(--e2) 0 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 8vw, 3rem);
  color: var(--azul);
}

/* ---------- local ---------- */

/* ---------- cena: seção inteira com foto de fundo ---------- */

.cena { position: relative; overflow: hidden; color: var(--branco); }
.cena-fundo { position: absolute; inset: -8% 0; }
.cena-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.cena-veu { position: absolute; inset: 0; }
.cena-corpo { position: relative; z-index: 2; }
.cena .titulo { color: var(--branco); }
.cena .selo { color: var(--pervinca); }

.local .cena-veu {
  background:
    linear-gradient(to bottom, rgb(25 26 58 / 0.76) 0%, rgb(25 26 58 / 0.3) 34%,
      rgb(25 26 58 / 0.42) 70%, rgb(25 26 58 / 0.88) 100%);
}

/* ---------- local ---------- */

.local-grade { display: grid; gap: var(--e5); align-items: stretch; }
.local-info {
  text-align: center;
  padding: clamp(var(--e5), 4vw, var(--e7)) clamp(var(--e4), 3vw, var(--e6));
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 22px;
  background: rgb(25 26 58 / 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.local-tipo {
  margin: 0 0 var(--e2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-size: 0.68rem;
  color: var(--pervinca);
}
.local-nome {
  margin: 0 0 var(--e3);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.local-endereco {
  display: grid;
  gap: 0.2em;
  margin: 0 0 var(--e3);
  font-size: 0.95rem;
}
/* a rua é o que a pessoa copia pro Waze: peso de título, não de legenda */
.local-rua {
  font-family: var(--apoio);
  font-weight: 600;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  letter-spacing: 0.01em;
  color: var(--branco);
}
.local-bairro { opacity: 0.74; }
/* ---------- quando: dia, mês e hora com peso de cartaz ---------- */
.local-quando {
  display: inline-flex;
  align-items: center;
  gap: var(--e4);
  margin: 0;
  padding: var(--e3) var(--e4);
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lq-bloco {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.28rem;
  min-width: 5.5rem;
}
.lq-num {
  font-family: var(--numeros);
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: var(--branco);
}
.lq-lado {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  font-family: var(--apoio);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lq-lado i { font-style: normal; color: var(--pervinca); }
.lq-lado em { font-style: normal; opacity: 0.6; }
.lq-risco {
  width: 1px;
  align-self: stretch;
  background: rgb(255 255 255 / 0.22);
}
.lq-data .lq-lado,
.lq-hora .lq-lado { line-height: 1.3; }
.lq-hora .lq-num { font-size: clamp(1.9rem, 7vw, 2.6rem); }
@media (max-width: 400px) {
  .local-quando { gap: var(--e3); padding: var(--e3); }
}

/* ---------- "é perto", sobreposto ao mapa ----------
   Como bloco solto no texto isto comia meia tela só pra dizer que a viagem
   é curta. Colado no mapa ele explica o próprio mapa. */
.mapa-perto {
  position: absolute;
  left: var(--e2); right: var(--e2);
  bottom: var(--e2);
  z-index: 2;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(17 27 62 / 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--branco);
  text-align: left;
}
.mapa-perto-titulo {
  margin: 0 0 0.4rem;
  font-family: var(--apoio);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--pervinca);
}
.mapa-perto-lista {
  display: grid;
  gap: 0.22rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mapa-perto-lista li {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
}
.mapa-perto-lista b {
  font-family: var(--numeros);
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
}
.mapa-perto-lista span {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  opacity: 0.82;
}
.mapa-perto-lista i {
  font-family: var(--apoio);
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.2em 0.55em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  opacity: 0.9;
}

/* ---------- calcular pelo CEP ---------- */
.mapa-cep {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}
.mapa-cep label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--apoio);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.mapa-cep-linha { display: flex; gap: 0.4rem; }
.mapa-cep input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0.5em 0.7em;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.08);
  color: var(--branco);
  font-family: var(--apoio);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.mapa-cep input[type="text"]::placeholder { color: rgb(255 255 255 / 0.5); }
.mapa-cep input[type="text"]:focus-visible {
  outline: 2px solid var(--pervinca);
  outline-offset: 1px;
}
.mapa-cep button {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.35rem;
  border: 0;
  border-radius: 10px;
  background: var(--pervinca);
  color: var(--navy);
  cursor: pointer;
}
.mapa-cep button svg {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.mapa-cep button[disabled] { opacity: 0.5; cursor: progress; }
.mapa-cep-saida {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  min-height: 0;
}
.mapa-cep-saida:empty { display: none; }
.mapa-cep-saida b { font-family: var(--numeros); font-size: 0.95rem; }
.mapa-cep-saida.erro { opacity: 0.72; }

/* em tela larga o mapa é alto: o cartão cabe sem sufocar o mapa */
@media (max-width: 420px) {
  .mapa-perto { left: 0.5rem; right: 0.5rem; padding: 0.65rem 0.75rem; }
  .mapa-perto-lista span { font-size: 0.74rem; }
}
/* Era uma linha em script ("na chácara da família") — bonita e sem
   informação. Virou o aviso de traje, que é a dúvida real de quem foi
   convidado. Por isso fonte normal e não caligráfica: recado prático se lê,
   não se admira. O detalhe do salto não é etiqueta, é topografia — a
   cerimônia é na grama, e quem descobre isso no dia descobre afundando. */
.local-traje {
  display: inline-grid;
  gap: 0.3rem;
  margin: var(--e3) 0 var(--e5);
  padding: 0.7rem 1.1rem;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.07);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--pervinca-clara);
  text-wrap: balance;
}
.local-traje b {
  font-family: var(--apoio);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--branco);
}
.local-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); }

.mapa-moldura {
  position: relative;
  display: flex;            /* o iframe estica pra ocupar o bloco inteiro */
  padding: var(--e2);
  border-radius: 22px;
  background: var(--branco);
  box-shadow: 0 20px 50px rgb(12 14 30 / 0.35);
}
.mapa-moldura iframe {
  display: block;
  width: 100%;
  /* mais alto que largo no celular: o cartão de distâncias fica por cima e
     num 4/3 sobrava só uma faixa de mapa */
  aspect-ratio: 3 / 4;
  min-height: 0;
  border: 0;
  border-radius: 14px;
  filter: grayscale(1) contrast(0.92);
}
@media (min-width: 761px) {
  /* no desktop o mapa deixa de ter proporção fixa e preenche a altura do
     bloco, emparelhado com o cartão do endereço ao lado */
  .mapa-moldura iframe { aspect-ratio: auto; height: 100%; }
}

/* três recortes do lugar, em moldura clara */
.local-fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--e2), 2vw, var(--e4));
  margin-top: var(--e7);
}
.local-foto {
  margin: 0;
  padding: 0.5rem 0.5rem 1.5rem;
  background: var(--branco);
  border-radius: 6px;
  rotate: var(--giro, 0deg);
  box-shadow: 0 12px 30px rgb(12 14 30 / 0.3);
}
.local-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; }
.local-foto figcaption {
  padding: var(--e1) 0 var(--e2);
  text-align: center;
  font-family: var(--script);
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--navy);
}

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

/* Botão de convite: cápsula com filete duplo. O anel de dentro é um ::after
   em currentColor, então ele acompanha cada variante sem cor extra. */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  padding: 1.05em 2.5em;
  border-radius: 999px;
  background: transparent;
  isolation: isolate;
  transition: background-color 0.35s var(--suave), color 0.35s var(--suave),
    border-color 0.35s var(--suave), opacity 0.35s var(--suave),
    translate 0.35s var(--suave), box-shadow 0.35s var(--suave);
}
.botao::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: 0.3;
  pointer-events: none;
  transition: inset 0.35s var(--suave), opacity 0.35s var(--suave);
}
.botao:hover::after { inset: 6px; opacity: 0.5; }

.botao-icone {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: currentColor;
  text-indent: 0;
  translate: 0 -0.05em;
}
.botao-icone .vazado { fill: var(--branco); }

.botao-contorno { border: 1px solid var(--linha-forte); color: var(--navy); }
.botao-contorno:hover { border-color: var(--azul); color: var(--azul); }
.botao-cheio { border: 1px solid var(--azul); background: var(--azul); color: var(--branco); }
.botao-cheio:hover {
  background: var(--azul-escuro);
  border-color: var(--azul-escuro);
  translate: 0 -2px;
  box-shadow: 0 14px 30px rgb(25 26 58 / 0.24);
}
/* para fundos escuros (foto): vidro fosco com filete branco */
.botao-claro {
  border: 1px solid rgb(255 255 255 / 0.55);
  color: var(--branco);
  background: rgb(255 255 255 / 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.botao-claro .botao-icone .vazado { fill: var(--navy); }
.botao-claro:hover {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--navy);
  translate: 0 -2px;
}
.botao-claro:hover .botao-icone .vazado { fill: var(--branco); }
.botao-largo { width: 100%; }
.botao[disabled], .botao.desativado { opacity: 0.45; cursor: default; pointer-events: none; }

/* ---------- galeria em polaroide ---------- */

/* mural: as polaroides se sobrepõem, como fotos jogadas na mesa */
.mural {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--e3) 0;
  padding-block: var(--e5);
}
/* logo abaixo do título: instrução no fim do mural chegava tarde demais */
.mural-dica {
  margin: var(--e2) 0 0;
  text-align: center;
  font-style: italic;
  font-size: 0.95rem;
  opacity: 0.6;
}

/* quantas curtidas a foto já tem, na própria polaroide. O número vive nos
   data-* que o visor atualiza — assim curtir lá reflete aqui sem JS extra. */
.polaroide[data-coracao]:not([data-coracao="0"])::after,
.polaroide[data-joinha]:not([data-joinha="0"])::before {
  position: absolute;
  bottom: 0.55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  background: rgb(17 27 62 / 0.08);
  font-family: var(--apoio);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--navy);
  opacity: 0.75;
}
.polaroide[data-coracao]:not([data-coracao="0"])::after {
  content: "♥ " attr(data-coracao);
  right: 0.75rem;
}
.polaroide[data-joinha]:not([data-joinha="0"])::before {
  content: "👍 " attr(data-joinha);
  left: 0.75rem;
}
.polaroide { position: relative; }

/* crédito da fotógrafa — quem fez as fotos assina embaixo delas */
.credito-foto {
  display: grid;
  justify-items: center;
  gap: var(--e1);
  margin: var(--e6) 0 0;
  text-align: center;
}
.credito-rotulo {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-size: 0.68rem;
  opacity: 0.62;
}
.credito-nome {
  font-family: var(--script);
  font-size: 2rem;
  line-height: 1;
  color: var(--azul);
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
  padding-bottom: 0.1em;
  transition: border-color 0.3s var(--suave), opacity 0.3s var(--suave);
}
.credito-nome:hover, .credito-nome:focus-visible { border-bottom-color: var(--azul); }
.credito-arroba {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  opacity: 0.55;
}
/* a foto que abre a galeria, em tamanho de quadro */
/* mais específico que .polaroide de propósito: assim não depende da ordem
   do arquivo pra ganhar (a armadilha que já borrou a galeria uma vez) */
.mural-destaque { display: grid; justify-items: center; margin-bottom: var(--e4); }
.mural-destaque .polaroide {
  margin-inline: 0;
  margin-top: 0;
  width: clamp(15rem, 78vw, 26rem);
  padding: 0.8rem 0.8rem 2.6rem;
  box-shadow: 0 3px 6px rgb(25 26 58 / 0.14), 0 30px 60px rgb(25 26 58 / 0.22);
}
.mural-destaque .polaroide img { object-position: 50% 64%; }
.mural-destaque .polaroide-legenda {
  font-size: 1.6rem;
  padding: var(--e3) var(--e2) var(--e4);
}

.polaroide {
  /* sobreposição leve: as fotos se tocam sem engolir a legenda */
  margin-inline: calc(var(--e2) * -1);
  margin-top: var(--desce, 0rem);
  width: clamp(9rem, 40vw, 14rem);
  padding: 0.55rem 0.55rem 1.7rem;
  border: 0;
  border-radius: 5px;
  background: var(--branco);
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(25 26 58 / 0.12), 0 14px 34px rgb(25 26 58 / 0.16);
  rotate: var(--giro, 0deg);
  transition: rotate 0.45s var(--suave), translate 0.45s var(--suave),
    box-shadow 0.45s var(--suave), z-index 0s;
}
.polaroide:nth-child(3n)   { --desce: 1.6rem; }
.polaroide:nth-child(4n)   { --desce: 0.7rem; }
.polaroide:nth-child(5n+2) { --desce: 2.2rem; }
.polaroide:hover, .polaroide:focus-visible { position: relative; z-index: 5; }
@media (hover: hover) {
  .polaroide:hover {
    rotate: 0deg;
    translate: 0 -10px;
    box-shadow: 0 3px 6px rgb(25 26 58 / 0.14), 0 28px 56px rgb(25 26 58 / 0.24);
  }
}
.polaroide img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroide-larga img { aspect-ratio: 5 / 4; }
/* A legenda sai da tela mas continua no DOM pro leitor de tela. Quem segura
   a cara de polaroide agora é o padding-bottom da moldura, não o texto. */
.polaroide-legenda, .marco-foto figcaption, .local-foto figcaption {
  display: none;
}

/* ---------- prévia dos presentes na home ----------
   O cartão agora é o MESMO da loja (`vitrine-*`): o desenho mora num lugar
   só. Aqui sobra só o que é da prévia — a margem embaixo, antes do botão
   "ver a lista completa". */
.previa-grade { margin-bottom: var(--e5); text-align: left; }

/* ============================================================
   LOJA DE PRESENTES (presentes.html)
   Vitrine -> ficha do item -> sacola em etapas -> pagamento.
   ============================================================ */

/* ---------- hero da loja ----------
   Sai a barra de topo, entra uma abertura com foto: a loja abre como o
   convite abre. As fotos trocam sozinhas — três camadas empilhadas com o
   mesmo keyframe e atrasos diferentes, sem uma linha de JS. */

.loja-hero {
  position: relative;
  isolation: isolate;
  /* era 78svh: quase uma tela inteira de conversa antes do primeiro
     produto. 56svh mantém a foto e o fôlego e devolve o resto à lista. */
  min-height: min(56svh, 30rem);
  display: grid;
  align-content: end;
  padding: calc(env(safe-area-inset-top, 0px) + var(--e6)) var(--margem) var(--e6);
  overflow: hidden;
  background: var(--navy);
}
.loja-hero-fundo { position: absolute; inset: 0; z-index: -2; }
.loja-hero-fundo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: loja-troca 21s linear infinite;
}
.loja-hero-fundo img:nth-child(1) { animation-delay: 0s; }
.loja-hero-fundo img:nth-child(2) { animation-delay: 7s; }
.loja-hero-fundo img:nth-child(3) { animation-delay: 14s; }
/* 1/3 do ciclo no ar, com as pontas cruzando — sem buraco preto entre uma
   foto e outra */
@keyframes loja-troca {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  29%  { opacity: 1; }
  33%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .loja-hero-fundo img { animation: none; }
  .loja-hero-fundo img:first-child { opacity: 1; }
}
.loja-hero-veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgb(17 27 62 / 0.72) 0%, rgb(17 27 62 / 0.34) 32%,
    rgb(17 27 62 / 0.72) 66%, rgb(17 27 62 / 0.94) 100%);
}

.loja-voltar {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--e4));
  left: var(--margem);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.28);
  background: rgb(17 27 62 / 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--apoio);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--branco);
  opacity: 0.85;
}
.loja-voltar:hover { opacity: 1; }

.loja-hero-corpo { max-width: 44rem; color: var(--branco); }
.loja-hero-selo {
  margin: 0 0 var(--e3);
  font-family: var(--apoio);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pervinca);
}
.loja-hero-titulo {
  margin: 0 0 var(--e3);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 5rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.loja-hero-texto {
  margin: 0 0 var(--e5);
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.86;
}

/* as duas portas: comprar um item ou mandar Pix, lado a lado desde a
   primeira dobra — é a dúvida nº 1 de quem abre a lista */
.loja-hero-portas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--e3);
  margin-bottom: var(--e4);
}
.loja-porta {
  display: grid;
  gap: 0.2rem;
  padding: var(--e3) var(--e4);
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 0.24);
  background: rgb(255 255 255 / 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-decoration: none;
  color: var(--branco);
  transition: background 0.3s var(--suave), border-color 0.3s var(--suave),
    translate 0.3s var(--suave);
}
.loja-porta:hover {
  background: rgb(255 255 255 / 0.18);
  border-color: rgb(255 255 255 / 0.4);
  translate: 0 -3px;
}
.loja-porta-pix { background: rgb(180 196 234 / 0.2); }
.loja-porta-selo {
  font-family: var(--apoio);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pervinca);
}
.loja-porta-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  letter-spacing: 0.01em;
}
.loja-porta-nota {
  font-family: var(--apoio);
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 300;
  opacity: 0.8;
}

.loja-hero-progresso .progresso-trilho { background: rgb(255 255 255 / 0.2); }
.loja-hero-progresso .progresso-texto { color: var(--branco); opacity: 0.75; }

/* Selo de "sem taxa". Fica no fim do herói, depois das duas portas: é
   informação que tranquiliza na hora de mandar, não chamada de venda. Por
   isso tem contorno e não fundo cheio — pesa o suficiente pra ser lido e
   pouco o bastante pra não brigar com o título. */
.loja-selo-taxa {
  position: absolute;
  right: var(--margem);
  bottom: var(--e4);
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 17rem;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.26);
  border-radius: 14px;
  border-bottom-right-radius: 4px;   /* o "rabinho" de balão */
  background: rgb(17 27 62 / 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--apoio);
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--branco);
  text-align: left;
}
.loja-selo-taxa b { font-weight: 600; }
.loja-selo-taxa-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.05rem; height: 1.05rem;
  margin-top: 0.08rem;
  border-radius: 50%;
  background: var(--pervinca);
  color: var(--navy);
}
.loja-selo-taxa-icone svg {
  width: 0.7em; height: 0.7em;
  fill: none; stroke: currentColor; stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* no celular o canto direito é do botão de descer: o balão vira uma linha
   fina colada na base do hero, largura toda, ainda sobreposto à foto */
@media (max-width: 560px) {
  .loja-selo-taxa {
    right: var(--margem);
    left: var(--margem);
    bottom: var(--e3);
    max-width: none;
    font-size: 0.68rem;
  }
}

/* fio de luz que desce, mesmo gesto do convite */
.loja-hero-desce {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: var(--e6);
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.6));
}

/* ---------- abas de categoria ----------
   Trilho que rola de lado no celular e gruda no topo quando a lista passa,
   pra trocar de categoria sem ter que subir a página inteira. */
/* A faixa gruda no topo e ocupa a largura toda; o TRILHO de dentro é um
   `.centro`, então as abas começam exatamente onde a grade de produtos
   começa — era essa margem que não batia. */
.abas {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: var(--e2);
  background: rgb(246 248 253 / 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.abas-trilho {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding-inline: var(--margem);
  overflow-x: auto;
  scrollbar-width: none;
}
.abas-trilho::-webkit-scrollbar { display: none; }

/* ordenar por: cola na direita do trilho, depois das abas */
.ordenar {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--apoio);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(25 26 58 / 0.55);
  white-space: nowrap;
}
.ordenar select {
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  background: var(--branco);
  font-family: var(--apoio);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
}

/* ---------- as camadas da Magalu ----------
   O banner-vitrine sobe por cima do fim do hero, e a lista morde o fim do
   banner: cada bloco entra no anterior em vez de empilhar como tijolos.
   É margem negativa + z-index — barato, e o efeito é o de página composta
   em profundidade, como as home de loja grande. */
.loja .centro { position: relative; z-index: 2; }
.loja .vitrine { margin-top: -1.4rem; }
.abas::-webkit-scrollbar { display: none; }
.abas:empty { display: none; }

.aba {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: transparent;
  font-family: var(--apoio);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s var(--suave), color 0.25s var(--suave),
    border-color 0.25s var(--suave);
}
.aba b {
  font-size: 0.66rem;
  font-weight: 500;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: rgb(17 27 62 / 0.08);
}
.aba:hover { border-color: var(--azul); }
.aba.ativa {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}
.aba.ativa b { background: rgb(255 255 255 / 0.22); }

/* ---------- banner de destaques (slides estilo ML) ---------- */

/* Banner de tela cheia. Era uma faixa dentro da coluna de texto; virou
   uma tela inteira porque, com um slide por categoria, ele deixou de ser
   um enfeite no topo da lista e passou a ser a própria vitrine. */
.destaques {
  position: relative;
  z-index: 2;
  max-width: none;
  /* a margem negativa morde o fim do hero: é a camada da Magalu */
  margin: -2.2rem 0 0;
  padding: 0;
}
.destaques .destaque-cena { border-radius: 18px 18px 0 0; overflow: hidden; }
.destaques-trilho {
  display: flex;
  gap: 0;                          /* slide encostado no slide: é tela cheia */
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* slide = 1 tela do trilho, sem armadilha */
  scrollbar-width: none;
}
.destaques-trilho::-webkit-scrollbar { display: none; }
.destaque {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;                   /* estica o conteúdo pra altura do maior slide */
}
/* ---------- a cena: um slide de tela cheia ----------

   `100svh` e não `100vh`: no celular a barra do navegador entra e sai, e
   com `vh` a cena fica alta demais no começo e corta o rodapé do slide
   justamente quando a pessoa está lendo o preço. */
.destaque-cena {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: var(--e4);
  padding: calc(var(--e6) + 1rem) var(--margem) calc(var(--e6) + 1.5rem);
  background: var(--navy);
  color: var(--branco);
  text-decoration: none;
}

/* Em tela larga o texto vai de um lado e a prateleira do outro: em
   coluna única, o mesmo conteúdo passava de 100svh e o banner deixava
   de ser "uma tela". O `:has` limita a regra aos slides de categoria —
   o do Pix não tem prateleira e continua em coluna. */
@media (min-width: 900px) {
  .destaque-cena .pix-faixa-corpo:has(.destaque-itens) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: var(--e6);
    align-items: start;
  }
  .destaque-cena .pix-faixa-corpo:has(.destaque-itens) > :not(.destaque-itens) {
    grid-column: 1;
  }
  .destaque-cena .destaque-itens {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    margin-top: 0;
  }
  .destaque-cena .destaque-item { flex: 1 1 0; max-width: 12rem; }
  .destaque-cena .destaque-item-capa { max-height: 10rem; }
}

/* a foto de fundo de uma tela inteira precisa de mais véu: o texto
   atravessa o meio da imagem, não só a beirada esquerda */
.destaque-cena .pix-faixa-fundo::after {
  background:
    linear-gradient(to right, rgb(25 26 58 / 0.94) 22%, rgb(25 26 58 / 0.55) 70%),
    linear-gradient(to top, rgb(25 26 58 / 0.85), rgb(25 26 58 / 0.1) 45%);
}

.destaque-cena .pix-faixa-corpo {
  flex: none;
  width: min(100%, var(--largura));
  margin: 0 auto;
  gap: var(--e3);
}

.destaque-cena .pix-faixa-titulo { font-size: clamp(2.1rem, 7vw, 4rem); }
.destaque-cena .pix-faixa-texto { font-size: clamp(0.95rem, 2.4vw, 1.15rem); }
.destaque-cena .pix-faixa-cta { justify-self: start; margin-top: var(--e2); }

/* ---------- produtos dentro do slide ---------- */

/* Prateleira, não grade: em fila com rolagem lateral a altura é sempre a
   de UM card, e a cena continua cabendo numa tela. Em grade, o terceiro
   produto descia pra segunda linha no celular e empurrava o preço pra
   fora da dobra — que é justamente o que o banner precisa mostrar. */
.destaque-itens {
  display: flex;
  gap: var(--e3);
  margin-top: var(--e2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}

.destaque-itens::-webkit-scrollbar { display: none; }

.destaque-item {
  flex: 0 0 8.5rem;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: var(--e3);
  border: 1px solid rgb(255 255 255 / 0.24);
  background: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--branco);
  text-decoration: none;
  transition: background-color 0.25s var(--suave), translate 0.25s var(--suave);
}

@media (hover: hover) {
  .destaque-item:hover { background: rgb(255 255 255 / 0.16); translate: 0 -3px; }
}

/* já escolhido continua na tela, apagado: a lista honesta mostra o que
   saiu — some do banner só quando a categoria inteira acaba */
.destaque-item.tomado { opacity: 0.55; }

.destaque-item-capa {
  display: block;
  aspect-ratio: 1;
  max-height: 8.5rem;
  margin-bottom: 0.35rem;
  overflow: hidden;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.9);
}

.destaque-item-capa img { width: 100%; height: 100%; object-fit: contain; }

.destaque-item-nome {
  font-family: var(--serif);
  font-size: 0.82rem;
  line-height: 1.3;
  /* nome de produto de loja é comprido; três linhas e corta */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.destaque-item-preco {
  font-family: var(--numeros);
  font-size: 1.05rem;
  font-weight: 600;
}

.destaque-item i {
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.56rem;
  color: var(--pervinca-clara);
}

.destaque-todos {
  justify-self: start;
  margin-top: var(--e2);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--apoio);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  color: var(--pervinca-clara);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  cursor: pointer;
}

.destaque-todos:hover { color: var(--branco); }

/* ---------- setas e pontos, por cima da cena ---------- */

.destaques-seta {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  translate: 0 -50%;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 999px;
  background: rgb(25 26 58 / 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--branco);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s var(--suave);
}

.destaques-seta:hover { background: var(--azul); border-color: var(--azul); }
.destaques-seta-antes { left: var(--margem); }
.destaques-seta-depois { right: var(--margem); }

/* no celular quem passa o slide é o dedo; seta ali só rouba espaço */
@media (hover: hover) and (min-width: 860px) {
  .destaques-seta:not([hidden]) { display: grid; }
}

.destaques-pontos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--e4);
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  padding-top: 0;
}
/* os pontos ficam por cima da cena escura, não mais na página clara */
.destaques-ponto {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--suave), width 0.25s var(--suave);
}
.destaques-ponto.ativo { background: var(--branco); border-color: var(--branco); width: 1.4rem; }

/* slide da lua de mel: dois cards grandes, sem foto — a viagem não é um
   produto de prateleira, e foto de resort competiria com a do fundo */
.destaque-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
  margin-top: var(--e2);
  max-width: 34rem;
}
.destaque-card {
  flex: 1;
  display: grid;
  gap: 0.15rem;
  justify-items: start;
  text-align: left;
  padding: var(--e3);
  border: 1px solid rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--branco);
  font-family: var(--serif);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.25s var(--suave), translate 0.25s var(--suave);
}
.destaque-card:hover { background: rgb(255 255 255 / 0.18); translate: 0 -2px; }
/* o que ainda falta: card cheio, puxa o olho */
.destaque-card.aberto {
  background: var(--azul);
  border-color: var(--azul);
}
.destaque-card.aberto:hover { background: var(--navy); border-color: var(--branco); }
/* o que já foi dado: presente, mas quitado — não compete pela atenção.
   sem riscar o preço: em loja, preço riscado lê como "valor antigo" */
.destaque-card.quitado { opacity: 0.7; }
.destaque-card.quitado b { font-weight: 500; }
.destaque-card.quitado i { color: rgb(255 255 255 / 0.72); }
.destaque-card span {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
  opacity: 0.85;
}
.destaque-card b {
  font-family: var(--numeros);
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  font-weight: 600;
}
.destaque-card i {
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.58rem;
  color: var(--pervinca-clara);
}

/* Faixa do Pix. Era uma faixa compacta de verdade; hoje é um slide de
   tela cheia como os outros, então quem manda no desenho é
   `.destaque-cena` — aqui sobrou só o que é dela.

   A borda e o `outline` saíram junto: moldura faz sentido em cartão
   dentro da página, não em peça que ocupa a tela inteira. */
.pix-faixa { position: relative; color: var(--branco); text-decoration: none; }
.pix-faixa-fundo { position: absolute; inset: 0; margin: 0; z-index: -1; }
.pix-faixa-fundo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.pix-faixa-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(25 26 58 / 0.92) 30%, rgb(25 26 58 / 0.35));
}
.pix-faixa-corpo { flex: 1 1 16rem; display: grid; gap: 0.3rem; }
.pix-faixa-selo {
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.64rem;
  color: var(--pervinca-clara);
}
.pix-faixa-titulo {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  line-height: 1.1;
}
.pix-faixa-texto { margin: 0; font-size: 0.9rem; opacity: 0.88; max-width: 34rem; }
.pix-faixa-cta { flex: none; }

/* ---------- grade única (sem categoria) ---------- */

/* Cartão menor pra caber mais — a mesma grade serve a loja e a prévia da
   home. 11rem por coluna dava 3 no desktop e sobrava deserto dos lados;
   8.5rem dá 5 ou 6, que é a densidade de prateleira de loja de verdade. */
.vitrine-grade,
.previa-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e2);
}
@media (min-width: 480px) {
  .vitrine-grade,
  .previa-grade {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--e3);
  }
}
/* o cartão inteiro é link agora */
a.vitrine-item { text-decoration: none; color: inherit; display: flex; flex-direction: column; }

/* ---------- barra fixa de contribuir ---------- */

.barra-contribuir {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--margem);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  background: rgb(246 248 253 / 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--linha);
  text-decoration: none;
  color: inherit;
}
.barra-contribuir-texto { display: grid; }
.barra-contribuir-texto b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--navy);
}
.barra-contribuir-texto i {
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.6rem;
  opacity: 0.6;
}
.barra-contribuir-cta {
  flex: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  color: var(--branco);
  background: var(--azul);
  border-radius: 999px;
  padding: 0.85em 1.5em;
}
/* a barra cobre o fim da página; o rodapé precisa de folga */
body:has(.barra-contribuir) .fecho { padding-bottom: 6rem; }

/* ---------- página do presente (proporção do Mercado Livre) ---------- */

.prod-migalhas {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--e3) var(--margem);
  font-family: var(--apoio);
  font-size: 0.74rem;
  color: var(--navy);
}
.prod-migalhas a { color: inherit; opacity: 0.6; text-decoration: none; }
.prod-migalhas a:hover { opacity: 1; text-decoration: underline; }
.prod-migalhas span { opacity: 0.35; }
.prod-migalhas b { font-weight: 500; }

.prod {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--margem) var(--secao);
  font-family: var(--apoio);
}

/* primeira dobra: galeria · ficha · caixa, tudo à vista como no ML */
.prod-caixa {
  display: grid;
  gap: var(--e4);
  background: var(--branco);
  border: 1px solid var(--linha);
  padding: var(--e4);
}
@media (min-width: 980px) {
  .prod-caixa {
    grid-template-columns: minmax(0, 1.1fr) minmax(15rem, 0.9fr) 18.5rem;
    align-items: start;
    gap: var(--e5);
    padding: var(--e5);
  }
}

/* --- galeria: trilho + palco --- */
.prod-galeria { display: grid; gap: var(--e3); }
@media (min-width: 620px) {
  .prod-galeria { grid-template-columns: 3.6rem minmax(0, 1fr); align-items: start; }
}
.prod-trilho {
  display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: none; order: 2;
}
.prod-trilho::-webkit-scrollbar { display: none; }
@media (min-width: 620px) {
  .prod-trilho { flex-direction: column; order: 0; overflow-x: visible; }
}
.prod-mini {
  flex: 0 0 3.4rem;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 4px;
  background: var(--branco);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s var(--suave);
}
.prod-mini.ativa { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.prod-mini img { width: 100%; height: 100%; object-fit: contain; padding: 5%; box-sizing: border-box; }

.prod-palco {
  position: relative;
  aspect-ratio: 1;
  max-height: min(24rem, 46svh);
  display: grid;
  place-items: center;
  background: var(--branco);
  overflow: hidden;
}
.prod-palco img { width: 100%; height: 100%; object-fit: contain; }
.prod-selo {
  position: absolute;
  top: var(--e2); left: var(--e2);
  background: var(--navy);
  color: var(--branco);
  font-family: var(--apoio);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.58rem;
  padding: 0.5em 0.9em;
}

/* --- ficha: nome, preço, ficha técnica --- */
.prod-cat {
  margin: 0 0 var(--e2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.62rem;
  color: var(--azul);
}
.prod-nome {
  margin: 0 0 var(--e3);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  line-height: 1.14;
  text-wrap: balance;
  color: var(--navy);
}
.prod-preco {
  margin: 0 0 var(--e3);
  font-family: var(--numeros);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  color: var(--azul);
}
.prod-desc { margin: 0 0 var(--e4); font-size: 0.92rem; line-height: 1.6; opacity: 0.8; }

.prod-atributos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem var(--e3);
  margin: 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--linha);
  font-size: 0.82rem;
}
.prod-atributos dt { opacity: 0.55; }
.prod-atributos dd { margin: 0; font-weight: 500; }

/* --- caixa de presentear --- */
.prod-compra {
  border: 1px solid var(--linha-forte);
  padding: var(--e4);
  background: var(--papel);
}
@media (min-width: 980px) { .prod-compra { position: sticky; top: var(--e3); } }
.prod-compra .botao { width: 100%; margin-bottom: var(--e2); }
.prod-compra-selo {
  margin: 0 0 var(--e3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.6rem;
  opacity: 0.6;
}
.prod-aviso {
  margin: var(--e3) 0 0;
  padding: var(--e3);
  border-left: 2px solid var(--pervinca);
  background: var(--papel-2);
  font-size: 0.82rem;
  line-height: 1.55;
  opacity: 0.9;
}
.prod-aviso-forte { border-color: var(--azul); font-style: italic; opacity: 1; }
.prod-conhecer {
  display: inline-block;
  margin-top: var(--e3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.64rem;
  color: var(--navy);
  opacity: 0.7;
  text-underline-offset: 4px;
}
.prod-conhecer:hover { opacity: 1; }

.prod-passo-titulo {
  margin: 0 0 var(--e1);
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--navy);
}
.prod-passo-dica { margin: 0 0 var(--e3); font-size: 0.8rem; opacity: 0.7; line-height: 1.5; }
#prod-passo-loja .prod-passo-dica { margin: var(--e3) 0 0; }

#prod-passo-loja, #prod-passo-pix, #prod-passo-obrigado { text-align: center; }
.prod-fim-marca {
  margin: 0 auto var(--e3);
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--azul);
  color: var(--branco);
  font-size: 1.2rem;
}
.prod-fim-coracao { background: transparent; color: var(--azul); font-size: 1.8rem; }
.prod-fim-titulo { margin: 0 0 var(--e2); font-family: var(--display); font-size: 1.3rem; color: var(--navy); }
.prod-fim-texto { margin: 0 0 var(--e4); font-size: 0.86rem; opacity: 0.8; line-height: 1.55; }
#prod-pix-bloco { text-align: left; }

/* ---------- o que vem no scroll ---------- */

.prod-secao { margin-top: var(--e6); }
.prod-secao-selo {
  margin: 0 0 var(--e1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.62rem;
  color: var(--azul);
}
.prod-secao-topo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin-bottom: var(--e3);
}
.prod-secao-topo .prod-secao-selo { flex: 0 0 100%; margin: 0; }
.prod-secao-titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  color: var(--navy);
}
.prod-secao-link {
  margin-left: auto;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.66rem;
  color: var(--azul);
  text-decoration: none;
}
.prod-secao-link:hover { text-decoration: underline; }

/* bilhete dos noivos, com foto dos dois de fundo */
.prod-nota {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 11rem;
  border: 1px solid var(--linha-forte);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  color: var(--branco);
}
.prod-nota-foto { position: absolute; inset: 0; margin: 0; z-index: -1; }
.prod-nota-foto img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; object-position: 70% 30%; }
.prod-nota-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  /* véu forte onde mora o texto: sem isso ele briga com os rostos */
  background: linear-gradient(to right, rgb(25 26 58 / 0.95) 30%, rgb(25 26 58 / 0.55) 65%, rgb(25 26 58 / 0.35));
}
.prod-nota-corpo { padding: var(--e5) var(--e5) var(--e4); max-width: 32rem; }
.prod-nota-texto {
  margin: var(--e2) 0 var(--e3);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  line-height: 1.45;
  text-wrap: pretty;
}
.prod-nota-assina {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  opacity: 0.75;
}
.prod-nota-assina span { font-family: var(--script); letter-spacing: 0; }

/* outros presentes: fileira que rola de lado, feito o relacionados do ML */
.prod-outros {
  display: flex;
  gap: var(--e3);
  overflow-x: auto;
  padding-bottom: var(--e3);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.prod-outros::-webkit-scrollbar { display: none; }
.prod-outro {
  flex: 0 0 clamp(8.5rem, 34vw, 10.5rem);
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: var(--e3);
  border: 1px solid var(--linha);
  background: var(--branco);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--suave), translate 0.2s var(--suave);
}
.prod-outro:hover { border-color: var(--azul); translate: 0 -3px; }
.prod-outro-capa {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: var(--e2);
}
.prod-outro-capa img { width: 100%; height: 100%; object-fit: contain; }
.prod-outro-nome { font-size: 0.8rem; line-height: 1.35; }
.prod-outro-preco { font-family: var(--numeros); font-size: 1rem; color: var(--azul); }

.prod-disclaimer {
  max-width: 46rem;
  margin: var(--e6) auto 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--linha);
  font-size: 0.76rem;
  line-height: 1.6;
  text-align: center;
  opacity: 0.55;
}

/* âncoras: parar abaixo dos filtros grudados */
.loja { scroll-margin-top: 4.5rem; }
.doacao { scroll-margin-top: var(--e5); }

/* ---------- filtros ---------- */

.filtros {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: var(--e2);
  overflow-x: auto;
  padding: var(--e3) var(--margem);
  background: rgb(246 248 253 / 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.25s var(--suave), color 0.25s var(--suave),
    border-color 0.25s var(--suave);
}
.filtro:hover { border-color: var(--azul); color: var(--azul); }
.filtro.ativo { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.filtro-conta {
  font-size: 0.66rem;
  letter-spacing: 0;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.filtro.ativo .filtro-conta { opacity: 0.75; }

/* ---------- progresso da lista ---------- */

.progresso {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--e4) var(--margem) 0;
  text-align: center;
}
.progresso-trilho {
  height: 3px;
  border-radius: 999px;
  background: var(--papel-2);
  overflow: hidden;
}
.progresso-trilho span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--azul);
  transition: width 1.2s var(--suave);
}
.progresso-texto {
  margin: var(--e2) 0 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.64rem;
  color: var(--navy);
  opacity: 0.55;
}

/* ---------- vitrine em corredores ---------- */

.loja { padding-top: var(--e5); }
/* --secao é o respiro entre seções da página; entre corredores da mesma
   prateleira ele abre um buraco que parece fim de página */
.vitrine { display: grid; gap: clamp(var(--e6), 6vw, var(--e8)); }

.corredor-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding-bottom: var(--e3);
  margin-bottom: var(--e5);
  border-bottom: 1px solid var(--linha);
}
.corredor-nome {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1;
  color: var(--azul);
}
.corredor-conta {
  flex: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.64rem;
  opacity: 0.55;
}
/* 9.5rem e não 15rem: com 15rem cabiam duas colunas no desktop e uma só no
   celular, e cada cartão ficava do tamanho de um cartaz. Aqui a prateleira
   fica densa como loja de verdade — 2 por linha no celular, 5 no desktop. */
.corredor-grade {
  display: grid;
  /* duas colunas fixas no celular: com auto-fill o mínimo de 9.5rem não cabe
     duas vezes em 295px e a prateleira caía pra uma coluna só */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--e2), 1.6vw, var(--e4));
}
@media (min-width: 600px) {
  .corredor-grade { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
}

.vitrine-item {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 12px;
  background: var(--branco);
  border: 1px solid var(--linha);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.3s var(--suave), box-shadow 0.3s var(--suave),
    translate 0.3s var(--suave);
}
@media (hover: hover) {
  .vitrine-item:hover {
    border-color: var(--pervinca);
    box-shadow: 0 10px 24px rgb(25 26 58 / 0.1);
    translate: 0 -2px;
  }
  .vitrine-item:hover .vitrine-capa img { scale: 1.04; }
}
.vitrine-item.escolhido { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.vitrine-item.tomado { opacity: 0.55; }
.vitrine-item.tomado .vitrine-capa img { filter: grayscale(1); }

/* prateleira: fundo branco e a foto INTEIRA. Produto de loja vem recortado
   em fundo claro; cortar com "cover" comia o produto e deixava a página
   com cara de colagem. */
.vitrine-capa {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: var(--e2);
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  overflow: hidden;
}
.vitrine-capa img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: scale 0.6s var(--suave);
}
.vitrine-inicial {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--papel-2);
  font-family: var(--display);
  font-size: 2.4rem;
  color: var(--pervinca);
}
.vitrine-selo {
  position: absolute;
  top: var(--e2);
  left: var(--e2);
  padding: 0.3rem var(--e3);
  border-radius: 999px;
  background: var(--navy);
  color: var(--branco);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.58rem;
}
.vitrine-mais {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--papel);
  color: var(--azul);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--suave), color 0.25s var(--suave),
    scale 0.25s var(--suave), border-color 0.25s var(--suave);
}
.vitrine-mais:hover { scale: 1.08; border-color: var(--azul); }
.vitrine-item.escolhido .vitrine-mais {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}

.vitrine-corpo {
  display: grid;
  gap: 0.1rem;
  align-content: start;
  padding: 0.55rem 0.6rem 0.7rem;
  background: var(--papel);
}
.vitrine-cat { display: none; }   /* a categoria já é o título do corredor */
.vitrine-nome {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.25;
  text-wrap: pretty;
  /* duas linhas no máximo: nome comprido não pode empurrar o preço pra
     baixo e desalinhar a prateleira inteira */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* reserva as duas linhas mesmo quando o nome ocupa uma: sem isso o preço
     de cada cartão para numa altura diferente e a prateleira desalinha */
  min-height: 2.5em;
}
/* o preço é o que a pessoa procura na grade — ele manda, não o nome */
.vitrine-preco {
  font-family: var(--numeros);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--azul);
}
/* a chamada da home ocupa o lugar do preço: mesma altura de linha, pra
   fileira de cartões continuar batendo entre as duas telas */
.vitrine-cta {
  font-family: var(--apoio);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--azul);
}

.loja-vazia { grid-column: 1 / -1; padding: var(--e8) 0; text-align: center; font-style: italic; opacity: 0.7; }

/* ---------- doação ---------- */

.doacao { background: var(--papel-2); }
.doacao-cartao {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}
.valores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2);
  margin-bottom: var(--e4);
}
.valor {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.25s var(--suave), color 0.25s var(--suave),
    border-color 0.25s var(--suave);
}
.valor:hover { border-color: var(--azul); color: var(--azul); }
.valor.ativo { background: var(--azul); border-color: var(--azul); color: var(--branco); }

/* ---------- formulários ---------- */

.campo { margin-bottom: var(--e4); text-align: left; }
.campo label, .campo legend {
  display: block;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--azul);
  margin-bottom: var(--e1);
  padding: 0;
}
.opcional { text-transform: none; letter-spacing: 0.02em; font-style: italic; opacity: 0.7; }

/* email/tel/url ficaram de fora e apareciam com a caixa padrão do
   navegador, destoando do resto do formulário */
input[type="text"], input[type="number"], input[type="email"],
input[type="tel"], input[type="url"], input[type="search"], textarea {
  width: 100%;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linha-forte);
  padding: var(--e1) 0.1rem;
  border-radius: 0;
  transition: border-color 0.3s var(--suave);
}
input:focus-visible, textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--azul);
  border-bottom-width: 2px;
}
input::placeholder, textarea::placeholder { color: rgb(25 26 58 / 0.42); opacity: 1; }
textarea { resize: vertical; min-height: 4.5rem; }

.campo-presenca { border: 0; padding: 0; margin-inline: 0; }
/* auto-fit em vez de 1fr 1fr: lado a lado a pílula fica com ~150px, e
   "Não vou conseguir" não cabe numa linha nessa largura. Abaixo de 11rem
   por coluna elas empilham sozinhas, sem media query. */
.presenca-opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e2);
}
.presenca-opcoes input { position: absolute; opacity: 0; pointer-events: none; }
/* `.campo` no seletor porque `.campo label` (caixa-alta, 0.18em de entre-letra)
   é mais específico que uma classe sozinha — era ele quem vencia aqui, e a
   entre-letra larga é o que quebrava "Não vou conseguir" em duas linhas. */
.campo .presenca-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  text-align: center;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  padding: var(--e3) var(--e3);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--navy);
  margin: 0;
  transition: background-color 0.3s var(--suave), border-color 0.3s var(--suave), color 0.3s var(--suave);
}
.pill-icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
  transition: opacity 0.3s var(--suave);
}
.presenca-opcoes input:checked + .presenca-pill .pill-icone { opacity: 1; }
.presenca-opcoes input:checked + .presenca-pill {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}
.presenca-opcoes input:focus-visible + .presenca-pill { outline: 2px solid var(--azul); outline-offset: 3px; }

.stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--e4);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  padding: var(--e1) var(--e2);
}
.stepper output { min-width: 2ch; text-align: center; font-size: 1.2rem; }
.stepper-botao {
  width: 2.2rem; height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: var(--papel-2);
  color: var(--navy);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--suave), color 0.25s var(--suave);
}
.stepper-botao:hover { background: var(--azul); color: var(--branco); }

.form-status { min-height: 1.4em; margin: var(--e2) 0 0; font-style: italic; color: var(--azul); }
#campo-extra { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rsvp-noscript { font-style: italic; opacity: 0.8; }

/* ---------- rsvp ---------- */

.rsvp-cartao { max-width: 33rem; margin-inline: auto; text-align: center; }
.rsvp-prazo { margin: 0 0 var(--e6); opacity: 0.78; }
.rsvp-prazo strong { font-weight: 600; }
.rsvp-sucesso:focus { outline: none; }
.rsvp-sucesso p:not(.titulo) { max-width: 26rem; margin: 0 auto var(--e5); }

/* ---------- diálogo ---------- */

.dialogo {
  z-index: var(--z-dialogo);
  border: 0;
  padding: clamp(var(--e5), 6vw, var(--e6));
  width: min(92vw, 27rem);
  background: var(--papel);
  color: var(--navy);
  box-shadow: 0 24px 70px rgb(25 26 58 / 0.24);
}
.dialogo::backdrop { background: rgb(25 26 58 / 0.45); backdrop-filter: blur(3px); }
.dialogo-selo {
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--azul);
}
.dialogo-item {
  margin: var(--e1) 0 var(--e5);
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.18;
}
.dialogo-acoes { display: flex; gap: var(--e2); margin-top: var(--e2); }
.dialogo-acoes .botao { flex: 1; padding-inline: var(--e3); }


/* ---------- reveals ---------- */

/* A distância e o desfoque de entrada são VARIÁVEIS. Só .em-cena mexe em
   translate/filter — se uma variante também os declarasse, empataria em
   especificidade com .em-cena e, vindo depois, deixaria a foto borrada pra
   sempre (foi exatamente o que aconteceu). */
.js .reveal {
  opacity: 0;
  translate: 0 var(--desloca, 26px);
  filter: blur(var(--desfoque, 0px));
  transition: opacity 0.9s var(--suave), translate 0.9s var(--suave), filter 0.9s var(--suave);
  transition-delay: var(--atraso, 0s);
}
.js .reveal.em-cena { opacity: 1; translate: 0 0; filter: blur(0); }
.js .polaroide.reveal { --desloca: 38px; --desfoque: 6px; }

/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 761px) {
  /* o hero volta à composição do Figma: foto ao centro em coluna */
  /* foto sangrando de ponta a ponta; as duas camadas usam exatamente o mesmo
     enquadramento, senão o casal aparece duplicado */
  .hero-fundo img, .hero-casal img {
    object-fit: cover;
    object-position: 50% 52%;
  }

  .hero-tipo { padding-inline: clamp(var(--e6), 7vw, 6rem); }
  .hero-nomes { top: 22%; }
  .nome { font-size: clamp(3.6rem, 6.6vw, 6.4rem); }
  .hero-amp { font-size: clamp(11rem, 20vw, 19rem); }
  .hero-data { bottom: 26%; }

  /* O convite é UM bloco: cabe na tela inteira, sem rolar. As duas colunas
     começam na mesma linha, então o 29 nasce na altura do "Vamos casar". */
  .convite {
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-block: var(--e7);
  }
  .convite-corpo {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--e8);
    align-items: start;
  }
  .convite .selo { margin-top: 0; }
  .convite .titulo { margin-top: 0; }
  /* sem recuo no topo: assim o 29 nasce na mesma linha do "Vamos casar"
     (medido, sobra 11px — o AGOSTO em cima é que ocupa a faixa do selo) */
  .convite .contagem-bloco {
    border-left: 1px solid var(--linha);
    padding-left: var(--e7);
    padding-top: 0;
  }
  .contagem-bloco .data-bloco { margin-bottom: var(--e3); padding-bottom: var(--e3); }
  .convite .contagem-grade { padding-block: var(--e2); }

  /* stretch e não center: o mapa preenche a altura do cartão do endereço */
  .local-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .local .titulo { text-align: center; }
  .local-fotos { gap: var(--e5); }

  .galeria-grade { grid-template-columns: repeat(3, 1fr); }
  .polaroide-larga { grid-column: span 2; }
  .polaroide { padding: var(--e3) var(--e3) 2.4rem; }
  .mural-destaque .polaroide { padding: var(--e4) var(--e4) 3.4rem; }
}

@media (min-width: 1101px) {
  .loja-grade { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js.pronto .hero-fundo img, .js.pronto .hero-casal img, .js.pronto .hero-selo,
  .js.pronto .hero-amp, .js.pronto .nome-a, .js.pronto .nome-b,
  .js.pronto .hero-data, .js.pronto .hero-pe {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }
  .cortina-marca { animation: none; opacity: 0.32; }
  .js .hero-desce-fio::after { animation: none; opacity: 0; }
  .vitrine-capa img { transition: none; }
  .js .reveal { transition-duration: 0.01s; translate: 0 0; filter: none; }
  .polaroide { rotate: 0deg; transition: none; }
  .contagem-num { transition: none; }
  .menu { transition: none; }
  [data-parallax] { translate: none !important; }
}

/* ============================================================
   NOSSA HISTÓRIA — linha do tempo
   ============================================================ */

.historia { background: var(--branco); }
.historia .selo { text-align: center; }
/* --e8 (4rem+) deixava quase uma tela vazia entre "História" e a primeira
   foto no celular: o título parecia órfão e o carrossel, escondido. */
.historia .titulo { margin-bottom: var(--e5); }

.historia-carrossel {
  position: relative;
  margin-inline: calc(-1 * var(--margem));
}

/* ---------- linha do tempo: carrossel guiado ----------
   Era uma coluna vertical com fio e bolinhas. Virou um trilho que anda de
   lado, um capítulo por vez: o marco do meio cresce e ganha cor, os
   vizinhos esperam menores e apagados. Toque arrasta; no mouse, agarra
   e puxa; as setas guiam quem prefere clicar. */
.linha-tempo {
  --carta: min(21rem, 78vw);
  /* onde o fio cruza: o JS mede a linha das datas e escreve aqui. O valor
     abaixo é só o palpite até a primeira medição. */
  --fio: 14rem;
  position: relative;
  list-style: none;
  display: flex;
  gap: clamp(var(--e4), 4vw, var(--e6));
  margin: 0;
  /* padding lateral de meia janela: o primeiro e o último também chegam
     ao centro. O acerto fino é do scroll-snap-align, não desta conta. */
  padding: var(--e3) calc(50% - var(--carta) / 2) var(--e4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.linha-tempo::-webkit-scrollbar { display: none; }
/* o fio que costura os capítulos, na altura das datas — atravessa todas.
   Some nas pontas pra não bater na borda da seção. */
.linha-tempo::before {
  content: "";
  position: absolute;
  top: var(--fio);
  left: var(--fio-inicio, 0);
  width: var(--fio-largura, 100%);
  height: 2px;
  translate: 0 -50%;
  border-radius: 999px;
  background: rgb(180 196 234 / 0.72);
  pointer-events: none;
}
.linha-tempo::after {
  content: "";
  position: absolute;
  top: var(--fio);
  left: var(--fio-inicio, 0);
  width: var(--fio-progresso, 0);
  height: 2px;
  translate: 0 -50%;
  border-radius: 999px;
  background: var(--azul);
  pointer-events: none;
  transition: width 0.45s var(--suave);
}
.marco { position: relative; }   /* a foto passa por cima do fio */
/* arrastando com o mouse o snap desliga, senão ele briga com a mão */
.linha-tempo.arrastando { cursor: grabbing; scroll-snap-type: none; }

.marco {
  /* A primeira faixa é um palco comum para as fotos. Assim uma polaroide
     horizontal pode ficar mais baixa sem puxar a data para cima nem quebrar
     o fio que costura a linha do tempo. */
  --palco-foto: calc(min(15rem, 58vw) * 1.25 + 1.2rem);
  flex: 0 0 var(--carta);
  scroll-snap-align: center;
  display: grid;
  grid-template-rows: var(--palco-foto) auto;
  justify-items: center;
  text-align: center;
  scale: 0.84;
  opacity: 0.4;
  /* a escala gira em torno da linha das datas (o JS mede e escreve o
     --eixo): no centro padrão, encolher o vizinho subia a data dele e o
     fio deixava de atravessar todas */
  transform-origin: 50% var(--eixo, 45%);
  transition: scale 0.45s var(--suave), opacity 0.45s var(--suave);
}
.marco.ativo { scale: 1; opacity: 1; }

/* cada marco ganha a sua polaroide; a ativa desentorta, como se a mão
   tivesse acabado de pousá-la */
/* Altura FIXA, não derivada da imagem: era a altura variando de foto pra
   foto que jogava cada data numa linha diferente e impedia um fio só de
   atravessar todas. A largura entra numa variável porque a altura é
   calculada a partir dela. */
.marco-foto {
  --largura: min(15rem, 58vw);
  --moldura: 1.2rem;                 /* soma dos paddings de cima e de baixo */
  margin: 0 0 var(--e3);
  width: var(--largura);
  height: calc(var(--largura) * 1.25 + var(--moldura));
  /* moldura fina e pareja: a barra branca embaixo era o lugar da legenda,
     que não aparece mais no carrossel */
  padding: 0.5rem 0.5rem 0.7rem;
  background: var(--branco);
  border-radius: 5px;
  rotate: var(--giro, 0deg);
  box-shadow: 0 2px 4px rgb(25 26 58 / 0.1), 0 16px 34px rgb(25 26 58 / 0.15);
  transition: rotate 0.45s var(--suave);
  align-self: end;
}
.marco.ativo .marco-foto { rotate: 0deg; }
/* a foto ocupa a moldura inteira: sem tira branca sobrando embaixo */
.marco-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 2px;
}
.marco-foto figcaption {
  padding: var(--e1) 0 var(--e2);
  text-align: center;
  font-family: var(--script);
  font-size: 1.02rem;
  line-height: 1.15;
  color: var(--navy);
  opacity: 0.78;
}

/* a data é a âncora de cada capítulo: em 0.7rem ela sumia */
.marco-data {
  position: relative;
  display: inline-block;
  margin-bottom: var(--e2);
  padding: 1.15rem 0.5rem 0;
  font-family: var(--apoio);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  font-size: 0.86rem;
  color: var(--azul);
}
.marco-data::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  translate: -50% 0;
  border: 3px solid var(--branco);
  border-radius: 50%;
  background: var(--pervinca);
  box-shadow: 0 0 0 1px var(--pervinca);
  transition: background-color 0.45s var(--suave), box-shadow 0.45s var(--suave), scale 0.45s var(--suave);
}
.marco.ativo .marco-data::before {
  background: var(--azul);
  box-shadow: 0 0 0 2px var(--azul);
  scale: 1.18;
}
.marco-titulo {
  margin: 0 0 var(--e1);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 4.6vw, 1.75rem);
  line-height: 1.15;
}
.marco-texto { margin: 0; max-width: 24rem; opacity: 0.78; text-wrap: pretty; }

/* ---------- o guia embaixo do trilho ---------- */
.tempo-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e4);
  margin-top: var(--e3);
}
.tempo-seta {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--branco);
  color: var(--navy);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s var(--suave), opacity 0.25s var(--suave);
}
.tempo-seta:hover { border-color: var(--azul); }
.tempo-seta[disabled] { opacity: 0.3; cursor: default; }
.tempo-passo {
  margin: 0;
  min-width: 4.2rem;
  text-align: center;
  font-family: var(--numeros);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--azul);
}
.tempo-dica {
  margin: var(--e3) 0 0;
  text-align: center;
  font-style: italic;
  font-size: 0.9rem;
  opacity: 0.55;
}

/* Setas no mesmo plano da foto: aparecem no desktop, onde o trilho largo
   esconde os controles inferiores. No celular o gesto e os botões de baixo
   continuam sendo a navegação mais confortável. */
.tempo-seta-lateral { display: none; }

@media (min-width: 761px) {
  .tempo-seta-lateral {
    position: absolute;
    z-index: 3;
    top: var(--seta-y, 14rem);
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    translate: 0 -50%;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.94);
    color: var(--azul-escuro);
    box-shadow: 0 3px 8px rgb(25 26 58 / 0.18);
    cursor: pointer;
    transition: background 0.25s var(--suave), color 0.25s var(--suave), opacity 0.25s var(--suave);
  }
  .tempo-seta-lateral-anterior { left: var(--seta-anterior-x, calc(50% - 17rem)); }
  .tempo-seta-lateral-proxima { left: var(--seta-proxima-x, calc(50% + 14rem)); }
  .tempo-seta-lateral svg {
    width: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tempo-seta-lateral:hover { background: var(--pervinca-clara); color: var(--azul); }
  .tempo-seta-lateral:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
  .tempo-seta-lateral[disabled] { opacity: 0.18; cursor: default; }
  .tempo-controles .tempo-seta { display: none; }
}

.citacao {
  margin: var(--e7) auto 0;
  max-width: 34rem;
  text-align: center;
}
.citacao::before, .citacao::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--pervinca);
  margin: 0 auto;
}
.citacao blockquote {
  margin: var(--e4) 0 var(--e2);
  font-family: var(--display);
  font-size: clamp(1.35rem, 4.6vw, 1.9rem);
  line-height: 1.35;
  color: var(--azul);
  text-wrap: balance;
}
/* A frase-síntese saiu do Jost. Ela vinha em 600, preta, quase do tamanho
   da citação — e uma geométrica desse peso ao lado da Italiana vira bloco:
   duas linhas grandes centralizadas brigando pra ser o título do bloco, e o
   olho sem saber por onde começar.

   Agora é Cormorant itálico, a serifa que o site já usa. Muda a VOZ sem
   mudar a família de formas: a citação continua sendo o título e a frase
   soa como alguém falando embaixo dela. Diminuir o Jost também calava a
   briga, mas rebaixava a conclusão da história a legenda — e ela é o
   fecho, não uma nota de rodapé.

   O "MUITO" segue saltando: é a única palavra em caixa alta no meio da
   minúscula, e isso independe da fonte. */
.citacao-destaque {
  margin: 0 0 var(--e4);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.02rem, 3.2vw, 1.28rem);
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: rgb(25 26 58 / 0.78);
  text-wrap: balance;
}

/* ============================================================
   PALAVRA — 1 Coríntios 13
   ============================================================ */

/* o azul da marca vira véu por cima da foto, no lugar do fundo pontilhado */
.palavra { background: var(--azul); }
.palavra .cena-veu {
  background:
    linear-gradient(to bottom, rgb(46 81 163 / 0.92) 0%, rgb(36 64 138 / 0.86) 45%,
      rgb(25 26 58 / 0.92) 100%);
}
.palavra .titulo { margin-bottom: var(--e2); }
.palavra-sub {
  margin: 0 0 var(--e7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: rgb(255 255 255 / 0.55);
}
.passagem { max-width: 46rem; margin-inline: auto; text-align: center; }
.passagem-texto {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 4.4vw, 2.05rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.passagem-fecho {
  margin: var(--e6) 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1.15;
  color: var(--pervinca);
}
.passagem-fecho::before, .passagem-fecho::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  background: rgb(255 255 255 / 0.35);
  margin: 0 auto var(--e5);
}
.passagem-fecho::after { margin: var(--e5) auto 0; }
.verso {
  margin: 0;
  border: 1px solid rgb(255 255 255 / 0.22);
  background: rgb(255 255 255 / 0.06);
  padding: var(--e5);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1rem, 3.6vw, 1.35rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.verso-ref {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.64rem;
  color: var(--pervinca);
  margin-bottom: var(--e2);
}
.verso-forte {
  text-align: center;
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  border-color: var(--pervinca);
  background: rgb(255 255 255 / 0.1);
}

@media (min-width: 761px) {
  .historia .titulo { margin-bottom: var(--e7); }
  /* no desktop cabe uma carta maior e a foto respira */
  .linha-tempo { --carta: min(26rem, 78vw); }
  .marco-foto { --largura: 16rem; }

  .versos { grid-template-columns: 1fr 1fr; }
  .verso-forte { grid-column: 1 / -1; }
}

/* ============================================================
   FOLHAS DA LOJA — ficha do presente e sacola
   Uma folha sobe de baixo no celular e vira cartao centrado no desktop.
   ============================================================ */

.barra-sacola {
  position: fixed;
  z-index: 28;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--margem) calc(var(--e3) + env(safe-area-inset-bottom));
  background: rgb(246 248 253 / 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -10px 30px rgb(25 26 58 / 0.1);
  animation: bolha-entra 0.35s var(--suave) both;
}
.barra-resumo { display: grid; gap: 0.1rem; min-width: 0; }
.barra-conta {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.64rem;
  opacity: 0.6;
}
.barra-total {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--azul);
}
.barra-sacola .botao { flex: none; padding-inline: var(--e5); }
/* a barra nao pode tapar o fim da pagina */
body.com-barra { padding-bottom: 5.5rem; }

.sombra-gaveta {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgb(25 26 58 / 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: aparece 0.3s var(--suave) both;
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

.folha {
  position: fixed;
  z-index: 39;
  left: 0; right: 0; bottom: 0;
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 50px rgb(25 26 58 / 0.28);
  animation: folha-sobe 0.4s var(--suave) both;
}
@keyframes folha-sobe { from { translate: 0 100%; } to { translate: 0 0; } }
.folha-puxador {
  width: 2.6rem; height: 4px;
  border-radius: 999px;
  background: var(--linha-forte);
  opacity: 0.4;
  margin: var(--e2) auto 0;
}
.folha-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--margem) 0;
}
.folha-titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  line-height: 1.1;
  color: var(--azul);
}
.folha-passo { margin: 0.2rem 0 0; font-size: 0.95rem; opacity: 0.65; }
.folha-x {
  position: absolute;
  top: var(--e3);
  right: var(--margem);
  z-index: 2;
  width: 2.75rem; height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgb(246 248 253 / 0.8);
  backdrop-filter: blur(6px);
  color: var(--navy);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.folha-x:hover { opacity: 1; }
.folha-corpo {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--e4) var(--margem) var(--e5);
}
.folha-pe {
  display: flex;
  gap: var(--e2);
  padding: var(--e3) var(--margem) calc(var(--e4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
  background: var(--papel);
}
.folha-pe .botao { flex: 1; }
.folha-pe .botao-cheio { flex: 1.8; }

/* ---------- ficha do presente ---------- */

.ficha .folha-corpo { padding-top: 0; }
.ficha-galeria { margin: 0 calc(var(--margem) * -1) var(--e4); }
/* `contain` e fundo branco: foto de produto vem recortada em fundo claro e
   `cover` cortava justamente o produto. Mesma escolha da prateleira. */
.ficha-palco {
  aspect-ratio: 1 / 1;
  max-height: 42svh;
  background: var(--branco);
  padding: var(--e3);
  overflow: hidden;
}
.ficha-palco img { width: 100%; height: 100%; object-fit: contain; }
.ficha-miniaturas {
  display: flex;
  gap: var(--e2);
  overflow-x: auto;
  padding: var(--e2) var(--margem) 0;
  scrollbar-width: none;
}
.ficha-miniaturas::-webkit-scrollbar { display: none; }
.ficha-mini {
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 10px;
  overflow: hidden;
  background: var(--papel-2);
  cursor: pointer;
}
.ficha-mini img { width: 100%; height: 100%; object-fit: contain; background: var(--branco); }
.ficha-mini.ativa { border-color: var(--azul); border-width: 2px; }

.ficha-cat {
  margin: 0 0 var(--e1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.66rem;
  color: var(--azul);
}
.ficha-nome {
  margin: 0 0 var(--e2);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1.1;
  text-wrap: balance;
}
.ficha-preco {
  margin: 0 0 var(--e3);
  font-family: var(--numeros);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--azul);
}
.ficha-desc { margin: 0 0 var(--e3); opacity: 0.78; text-wrap: pretty; }
.ficha-aviso {
  margin: 0 0 var(--e3);
  padding: var(--e3);
  border-radius: 14px;
  background: var(--papel-2);
  font-style: italic;
  font-size: 0.98rem;
}
/* cara de página de produto: o caminho pra loja é um botão, não um linkzinho */
.ficha-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--azul);
  text-decoration: none;
  border: 1px solid var(--azul);
  border-radius: 999px;
  padding: 0.7em 1.6em;
  transition: background-color 0.25s var(--suave), color 0.25s var(--suave);
}
.ficha-link:hover { background: var(--azul); color: var(--branco); }
.ficha-entrega {
  margin: var(--e3) 0 0;
  padding: var(--e2) var(--e3);
  border-left: 2px solid var(--pervinca);
  background: var(--papel-2);
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ---------- itens da sacola ---------- */

.sacola-item {
  display: grid;
  grid-template-columns: 3.6rem 1fr auto;
  gap: var(--e3);
  align-items: center;
  padding-block: var(--e3);
  border-bottom: 1px solid var(--linha);
}
.sacola-capa {
  width: 3.6rem; height: 3.6rem;
  border-radius: 12px;
  background: var(--papel-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--pervinca);
}
.sacola-capa img { width: 100%; height: 100%; object-fit: cover; }
.sacola-nome {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.2;
}
.sacola-preco { font-size: 0.92rem; opacity: 0.7; }
.sacola-tirar {
  border: 0;
  background: none;
  color: var(--navy);
  opacity: 0.4;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  width: 2.5rem; height: 2.5rem;
}
.sacola-tirar:hover { opacity: 1; color: #8f2833; }
.sacola-vazia { padding: var(--e7) 0; text-align: center; font-style: italic; opacity: 0.6; }
.sacola-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--e4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
}
.sacola-total strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--azul);
}
.ajuda-campo { margin: var(--e1) 0 0; font-size: 0.88rem; opacity: 0.6; }

/* ---------- fim do pedido ---------- */

#passo-fim { text-align: center; }
.fim-marca {
  width: 3.2rem; height: 3.2rem;
  margin: 0 auto var(--e3);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  font-size: 1.5rem;
}
.fim-titulo {
  margin: 0 0 var(--e2);
  font-family: var(--display);
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  line-height: 1.15;
  color: var(--azul);
}
.fim-texto { margin: 0 0 var(--e5); opacity: 0.75; text-wrap: pretty; }

/* ---------- pagamento ---------- */

.pagamento { text-align: left; display: grid; gap: var(--e2); }
.pagamento-titulo {
  margin: var(--e4) 0 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.68rem;
  color: var(--azul);
}
.pagamento-titulo:first-child { margin-top: 0; }
.pagamento-dica { margin: 0; font-size: 0.92rem; opacity: 0.7; text-wrap: pretty; }
.pagamento-codigo {
  margin: 0;
  padding: var(--e3);
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--branco);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  word-break: break-all;
  max-height: 7rem;
  overflow-y: auto;
  color: var(--navy);
  opacity: 0.8;
}
.pagamento-links { display: grid; gap: var(--e2); }
.pagamento-loja {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  color: var(--azul);
  text-decoration: none;
  text-underline-offset: 4px;
}
.pagamento-loja:hover { text-decoration: underline; }

@media (min-width: 761px) {
  .folha {
    left: 50%;
    right: auto;
    translate: -50% 0;
    width: min(38rem, 94vw);
    max-height: 88svh;
    border-radius: 22px 22px 0 0;
    animation-name: folha-sobe-centro;
  }
  @keyframes folha-sobe-centro { from { translate: -50% 100%; } to { translate: -50% 0; } }
  .barra-sacola { padding-inline: clamp(var(--e5), 8vw, 10rem); }
}
/* ============================================================
   VISOR DE FOTOS (lightbox)
   ============================================================ */

/* Tela cheia de verdade: só a foto sobre o escuro, sem moldura nem legenda.
   Os controles flutuam por cima em faixas com gradiente, estilo visor de
   celular — e o palco é quem recebe os gestos de zoom (visor.js). */
.visor {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: #090a16;
  animation: aparece 0.25s var(--suave) both;
}
.visor-palco {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;      /* pinça e arrasto são nossos, não da página */
  cursor: zoom-in;
}
.visor-palco.ampliado { cursor: grab; }
.visor-palco img {
  max-width: 100vw;
  max-height: 100svh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center;
  will-change: transform;
}
.visor-palco img.anima { transition: transform 0.3s var(--suave); }

.visor-topo {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + var(--e2)) var(--e2) var(--e5) var(--e3);
  background: linear-gradient(to bottom, rgb(9 10 22 / 0.6), transparent);
  pointer-events: none;
}
.visor-topo > * { pointer-events: auto; }
.visor-conta {
  font-family: var(--numeros);
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: rgb(255 255 255 / 0.66);
}
.visor-fechar {
  border: 0;
  background: none;
  color: var(--branco);
  font-size: 2.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
}
.visor-fechar:hover { opacity: 1; }

.visor-seta {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  border: 0;
  border-radius: 999px;
  /* escuro de propósito: seta branca sobre fundo claro da foto some */
  background: rgb(9 10 22 / 0.42);
  color: var(--branco);
  font-size: 1.7rem;
  line-height: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  padding: 0 0 0.25rem;
  cursor: pointer;
  opacity: 0.8;
  transition: background-color 0.25s var(--suave), opacity 0.25s var(--suave);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.visor-seta:hover { background: rgb(9 10 22 / 0.7); opacity: 1; }
.visor-antes { left: max(var(--e2), env(safe-area-inset-left, 0px)); }
.visor-depois { right: max(var(--e2), env(safe-area-inset-right, 0px)); }
@media (min-width: 700px) {
  .visor-seta { width: 3.2rem; height: 3.2rem; font-size: 2.1rem; }
  .visor-antes { left: var(--e4); }
  .visor-depois { right: var(--e4); }
}

.visor-acoes {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e6) var(--e3) calc(env(safe-area-inset-bottom, 0px) + var(--e3));
  background: linear-gradient(to top, rgb(9 10 22 / 0.75), transparent);
  pointer-events: none;
}
.visor-acoes > * { pointer-events: auto; }
.visor-reacao {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--branco);
  min-height: 2.9rem;
  min-width: 3.4rem;
  justify-content: center;
  padding: 0 1rem;
  cursor: pointer;
  transition: background-color 0.25s var(--suave), border-color 0.25s var(--suave),
    color 0.25s var(--suave), scale 0.2s var(--suave);
}
.visor-reacao:active { scale: 0.92; }
.visor-reacao svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.visor-reacao b {
  font-family: var(--numeros);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#visor-coracao[aria-pressed="true"] {
  background: rgb(238 143 164 / 0.26);
  border-color: rgb(238 143 164 / 0.5);
  color: #f6b6c3;
}
#visor-joinha[aria-pressed="true"] {
  background: rgb(180 196 234 / 0.26);
  border-color: rgb(180 196 234 / 0.55);
  color: var(--pervinca-clara);
}
.visor-reacao.pulou svg { animation: reacao-pula 0.45s var(--suave); }
@keyframes reacao-pula {
  0% { scale: 1; }
  40% { scale: 1.45; }
  100% { scale: 1; }
}
.visor-acoes-divisa { width: 1px; height: 1.5rem; background: rgb(255 255 255 / 0.22); }

.visor-dica {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5.4rem);
  translate: -50% 0;
  z-index: 3;
  margin: 0;
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.8);
  background: rgb(9 10 22 / 0.6);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--suave);
}
.visor-dica.no-ar { opacity: 1; }

/* a foto da linha do tempo agora abre o visor */
.marco-foto { cursor: zoom-in; }

/* ============================================================
   RSVP — barra fixa + tela cheia
   ============================================================ */

/* ============================================================
   Aviso de lista viva — home e loja
   ============================================================ */

/* Era um cartão de 34rem centralizado, com cara de caixa de aviso. Vira
   uma régua fina de ponta a ponta: ocupa a largura toda e quase nenhuma
   altura, então informa sem disputar espaço com o primeiro produto.

   A home usa a mesma peça, com `.faixa-viva-previa` por cima pra caber
   dentro da coluna de texto em vez de sangrar. */
.faixa-viva {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  /* de ponta a ponta de verdade: a seção que a contém tem margem lateral,
     então a faixa sai dela. `100vw` conta a barra de rolagem, o que criaria
     rolagem horizontal — `100%` do corpo mais o recuo negativo simétrico
     dá a mesma largura sem esse efeito. */
  width: auto;
  margin: 0 calc(-1 * var(--margem)) var(--e4);
  padding: 0.55rem var(--margem);
  border-block: 1px solid var(--linha);
  background: rgb(180 196 234 / 0.18);
  font-family: var(--apoio);
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  color: var(--navy);
}

.faixa-viva b { font-weight: 500; }

/* O convite dentro da régua. Sublinhado porque, no meio de uma frase,
   botão sem contorno não parece clicável — e esta é a única saída que
   a faixa oferece a quem não achou nada hoje. */
.faixa-elo {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
}

.faixa-elo:hover { color: var(--navy); }
.faixa-elo[disabled] { color: var(--tinta-fraca, #6b7699); text-decoration: none; cursor: default; }

/* ---------- pedir aviso de item novo ---------- */

.avisar {
  max-width: 34rem;
  margin: 0 auto var(--e5);
  padding: var(--e4);
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--papel-2, rgb(180 196 234 / 0.14));
  text-align: center;
}

.avisar-titulo {
  margin: 0 0 var(--e3);
  font-family: var(--apoio);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--navy);
}

.avisar-campos { display: grid; gap: 0.5rem; }

.avisar-campos input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  font-family: var(--apoio);
  /* 16px cravado: abaixo disso o iPhone dá zoom ao focar o campo */
  font-size: 16px;
  color: var(--navy);
  background: #fff;
}

.avisar-campos .botao { width: 100%; }

.avisar-status:empty { display: none; }

.avisar-status {
  margin: 0.6rem 0 0;
  font-family: var(--apoio);
  font-size: 0.78rem;
  color: #a3341f;
}

.avisar-nota,
.avisar-pronto {
  margin: 0.6rem 0 0;
  font-family: var(--apoio);
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--navy);
  opacity: 0.7;
}

.avisar-pronto { margin: 0; font-size: 0.9rem; font-weight: 400; opacity: 1; }

@media (min-width: 620px) {
  .avisar-campos { grid-template-columns: 1fr 1fr auto; }
  .avisar-campos .botao { width: auto; }
}

/* o ponto que pulsa nasce alinhado ao topo da linha na versão em caixa;
   aqui a linha é uma só, então ele volta para o centro */
.faixa-viva .aviso-vivo-pulso { margin-top: 0; }

@media (max-width: 519px) {
  .faixa-viva { font-size: 0.72rem; padding-inline: var(--e3); text-align: left; }
}

/* na home ela vive dentro da coluna de texto: sem o recuo negativo, que
   ali sangraria pra fora de um bloco centralizado */
.faixa-viva-previa {
  width: 100%;
  margin: var(--e5) 0;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border-block: 0;
  border: 1px solid var(--linha);
  text-align: center;
}

.faixa-viva-textos {
  display: grid;
  flex: 1 1 auto;
  gap: 0.42rem;
}
.faixa-viva-principal,
.faixa-viva-separado { display: block; }
.faixa-viva-separado {
  padding-top: 0.42rem;
  border-top: 1px solid rgb(46 81 163 / 0.16);
  color: inherit;
  font-weight: 300;
}
.faixa-viva-previa .faixa-viva-textos {
  flex: 0 1 auto;
  text-align: center;
}
.faixa-viva-previa .aviso-vivo-pulso { margin-top: 0; }

.aviso-vivo-pulso {
  flex: none;
  width: 0.5rem; height: 0.5rem;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 0 rgb(46 81 163 / 0.5);
  animation: aviso-pulsa 2.4s ease-out infinite;
}
@keyframes aviso-pulsa {
  0%   { box-shadow: 0 0 0 0 rgb(46 81 163 / 0.45); }
  70%  { box-shadow: 0 0 0 0.6rem rgb(46 81 163 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(46 81 163 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-vivo-pulso { animation: none; }
}


/* ---------- atalho fixo: só o botão ----------
   Era uma barra de ponta a ponta com data e contagem. Ocupava a base
   inteira da tela e brigava com o conteúdo — virou uma pílula solta. */

.rsvp-atalho {
  position: fixed;
  right: var(--margem);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 34;
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  padding: 0.7rem 0.8rem 0.7rem 1.15rem;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 18px;
  background: rgb(17 27 62 / 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--branco);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 34px rgb(17 27 62 / 0.34);
  transition: translate 0.35s var(--suave), opacity 0.25s var(--suave),
    box-shadow 0.3s var(--suave), background 0.3s var(--suave);
}
.rsvp-atalho:hover {
  background: rgb(17 27 62 / 0.97);
  box-shadow: 0 16px 42px rgb(17 27 62 / 0.42);
}
.rsvp-atalho.escondida {
  translate: 0 calc(100% + 1.5rem);
  opacity: 0;
  pointer-events: none;
}
.rsvp-atalho-corpo { display: grid; gap: 0.1rem; }
.rsvp-atalho-selo {
  font-family: var(--apoio);
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pervinca);
}
/* Italiana, a mesma dos títulos — o Jost em caixa alta aqui parecia
   botão de sistema no meio de um convite */
.rsvp-atalho-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.rsvp-atalho-seta {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--pervinca);
  color: var(--navy);
}
.rsvp-atalho-seta svg {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* O celular já teve só a seta aqui — o cartão inteiro parecia comer meia
   largura. Mas terminar o convite num ícone sem palavra cobrava caro: quem
   nunca viu o site não sabia o que a seta fazia. O cartão por extenso voltou,
   e quem cedeu espaço foi a música (ver a base da tela no celular). */

/* espaço pro botão não pisar no fim da página */
.fecho { padding-bottom: 4.5rem; }

/* ---------- tela cheia ---------- */

.rsvp-tela { display: none; }
/* `hidden` precisa mandar: `.rsvp-tela { display: grid }` sozinho vence o
   [hidden] do navegador e a tela ficava sempre montada — a animação rodava
   no carregamento e depois nunca mais, deixando ela travada fora da tela. */
.rsvp-tela:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 46;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;   /* topo · corpo rolável · pé */
  /* `section { padding: var(--secao) var(--margem) }` é global e estava
     encolhendo a tela cheia por dentro */
  padding: 0;
  background: var(--papel);
  font-family: var(--apoio);
  /* sem `both`: com fill, se a animação não rodar (aba em segundo plano,
     throttling do navegador) a tela fica congelada fora do viewport.
     Sem fill, o lugar natural já é o certo e a animação é só enfeite. */
  animation: rsvp-sobe 0.32s var(--suave);
}
@keyframes rsvp-sobe { from { translate: 0 100%; } to { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .rsvp-tela:not([hidden]) { animation: aparece 0.2s var(--suave); }
}
body.rsvp-aberto { overflow: hidden; }

.rsvp-tela-topo {
  position: relative;
  padding: calc(env(safe-area-inset-top, 0px) + var(--e5)) var(--margem) var(--e4);
  text-align: center;
  border-bottom: 1px solid var(--linha);
  background: var(--pervinca);
}
.rsvp-tela-x {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--e3));
  right: var(--margem);
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.5);
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.rsvp-tela-selo {
  margin: 0;
  font-family: var(--numeros);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--navy);
}
.rsvp-tela-conta {
  margin: 0.15rem 0 0;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul);
}
.rsvp-tela-titulo {
  margin: var(--e3) 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1.1;
  color: var(--navy);
}
.rsvp-tela-passo {
  margin: var(--e2) 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.55;
}

.rsvp-tela-corpo {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: var(--e3);
  padding: var(--e5) var(--margem);
}
.rsvp-grupo {
  display: grid;
  gap: var(--e4);
  max-width: 32rem;
  margin: 0 auto;
}
.rsvp-contatos { display: grid; gap: var(--e4); }
.rsvp-bloco { scroll-margin-block: var(--e3); }

/* a régua separa "quem é você" de "como falar com você" — era isso que o
   passo 2 fazia, e uma linha faz sem esconder campo */
#rsvp-passo-2:not([hidden]) {
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--linha);
}

/* No computador a etapa é TRANSPARENTE: `display: contents` faz os campos
   subirem para a grade do invólucro, então todo o layout de duas colunas
   continua valendo como se estas divs não existissem. Elas só ganham corpo
   no modo guiado do celular. */
.rsvp-etapa { display: contents; }
.rsvp-etapa-pergunta { display: none; }

/* rodapé grudado: o botão primário nunca sai da tela */
.rsvp-tela-pe {
  padding: var(--e3) var(--margem);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linha);
  background: var(--papel);
}
.rsvp-tela-botoes {
  display: flex;
  gap: var(--e2);
  max-width: 32rem;
  margin: 0 auto;
}
.rsvp-tela-botoes .botao-largo { flex: 1; }
.rsvp-tela-acoes { display: flex; align-items: center; gap: var(--e2); flex: 1; }
.rsvp-tela-pe .form-status { margin: 0 0 var(--e2); text-align: center; }
.rsvp-tela-pe .form-status:empty { margin: 0; }

.rsvp-voltar {
  flex: none;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: transparent;
  font-family: var(--apoio);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
  cursor: pointer;
}
.rsvp-voltar[hidden] { display: none; }

/* ============================================================
   MODO GUIADO (celular) — uma pergunta por vez

   O formulário inteiro tem 1012px de conteúdo. No celular sobram 668px
   sem teclado e menos de 470 com ele: a pessoa passava a rolagem inteira
   procurando o que faltava, e o botão de confirmar virava um alvo móvel.

   A saída NÃO é esconder informação — foi isso que reprovou a primeira
   tentativa de passos. Aqui cada etapa é uma pergunta COMPLETA, com uma
   régua no topo dizendo onde a pessoa está e um voltar sempre à mão. O
   computador continua vendo tudo de uma vez.
   ============================================================ */
.rsvp-trilho {
  height: 3px;
  margin: var(--e3) 0 0;
  border-radius: 999px;
  background: rgb(25 26 58 / 0.1);
  overflow: hidden;
}
.rsvp-trilho[hidden] { display: none; }
.rsvp-trilho-cheio {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: inherit;
  background: var(--azul);
  transition: width 0.35s var(--suave);
}

/* Os invólucros somem da conta e cada etapa vira o bloco da vez. */
.rsvp-tela[data-guiado="sim"] .rsvp-grupo {
  display: contents;
}
.rsvp-tela[data-guiado="sim"] .rsvp-etapa { display: none; }
.rsvp-tela[data-guiado="sim"] .rsvp-etapa.etapa-ativa {
  display: grid;
  gap: var(--e4);
  max-width: 32rem;
  margin: 0 auto;
  animation: etapa-entra 0.28s var(--suave);
}
/* no guiado não há duas etapas na tela, então a régua entre elas some */
.rsvp-tela[data-guiado="sim"] #rsvp-passo-2:not([hidden]) {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
@keyframes etapa-entra {
  from { opacity: 0; translate: 0 0.7rem; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rsvp-tela[data-guiado="sim"] .rsvp-etapa.etapa-ativa { animation: none; }
}

/* A pergunta grande é o título da vez. Ela substitui o "Confirme sua
   presença" fixo, que no guiado não dizia nada sobre o que fazer agora. */
.rsvp-tela[data-guiado="sim"] .rsvp-etapa-pergunta {
  display: block;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 6.5vw, 1.9rem);
  line-height: 1.15;
  color: var(--navy);
  text-wrap: balance;
}
/* o rótulo do campo repetiria a pergunta grande logo acima */
.rsvp-tela[data-guiado="sim"] .rsvp-etapa.etapa-ativa > .campo > label,
.rsvp-tela[data-guiado="sim"] .rsvp-etapa.etapa-ativa .campo-presenca legend {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------- o que os prints do iPhone mostraram ----------

   1. NADA TRANSBORDA PRA DIREITA. O botão saía cortado ("CONTIN…"), o
      texto da caixinha morria no meio e aparecia uma seta solta na borda.
      Era a tela ficando mais larga que o viewport visual. */
/* `:not([hidden])` e não `.rsvp-tela` sozinho: a regra base declara
   `padding: 0` com essa mesma especificidade e vence por vir depois. */
.rsvp-tela:not([hidden]) {
  overflow-x: hidden;
  max-width: 100%;
  /* o teclado do iPhone recua o CONTEÚDO, não a tela: o fundo pinta a caixa
     inteira, padding incluído, então não sobra brecha mostrando a página */
  padding-bottom: var(--teclado, 0px);
  box-sizing: border-box;
}
.rsvp-tela-corpo { overflow-x: hidden; }
.rsvp-tela-botoes,
.rsvp-tela-acoes { flex-wrap: wrap; min-width: 0; }
.rsvp-tela-acoes .botao-largo { min-width: 0; }

@media (max-width: 760px) {
  /* 2. O CABEÇALHO COMIA A TELA. Data, contagem, título e "3 de 4" antes
        da pergunta — com o teclado aberto sobrava quase nada pro campo.
        No guiado fica só o essencial: onde estou e como saio. */
  .rsvp-tela[data-guiado="sim"] .rsvp-marca,
  .rsvp-tela[data-guiado="sim"] .rsvp-tela-selo,
  .rsvp-tela[data-guiado="sim"] .rsvp-tela-conta,
  .rsvp-tela[data-guiado="sim"] .rsvp-tela-titulo { display: none; }
  .rsvp-tela[data-guiado="sim"] .rsvp-tela-topo {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: 0.6rem var(--margem);
    min-height: 0;
  }
  .rsvp-tela[data-guiado="sim"] .rsvp-trilho { flex: 1; margin: 0; }
  .rsvp-tela[data-guiado="sim"] .rsvp-tela-passo {
    order: 3;
    margin: 0;
    white-space: nowrap;
  }
  .rsvp-tela[data-guiado="sim"] .rsvp-tela-x { order: 4; position: static; }

  /* 3. O ZOOM DO SAFARI. Campo com fonte abaixo de 16px faz o iPhone dar
        zoom sozinho ao focar — e é o zoom que empurra a largura e corta o
        resto. 16px é o piso exato em que ele não mexe. */
  .rsvp-tela input,
  .rsvp-tela textarea,
  .rsvp-tela select { font-size: max(16px, 1rem); }

  /* a etapa ocupa a altura que sobrou, sem esticar o corpo */
  .rsvp-tela[data-guiado="sim"] .rsvp-tela-corpo { padding-block: var(--e4); }
}

/* ---------- tela cheia no desktop: duas colunas ----------
   Em tela grande a folha vertical deixava uma coluna magra de campos no
   meio de um deserto. Aqui o cabeçalho vira uma cena com foto à esquerda
   e o formulário ocupa a direita inteira. */
@media (min-width: 900px) {
  .rsvp-tela:not([hidden]) {
    grid-template-columns: minmax(18rem, 32fr) minmax(0, 68fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "cena corpo"
      "cena pe";
  }

  .rsvp-tela-topo {
    grid-area: cena;
    display: grid;
    align-content: end;
    gap: 0;
    padding: var(--e7) var(--e6);
    text-align: left;
    border-bottom: 0;
    border-right: 1px solid var(--linha);
    background: var(--navy) url("assets/g-310-900.jpg") center / cover no-repeat;
    isolation: isolate;
  }
  .rsvp-tela-topo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
      rgb(17 27 62 / 0.62) 0%, rgb(17 27 62 / 0.42) 40%, rgb(17 27 62 / 0.92) 100%);
  }
  .rsvp-tela-selo { color: var(--pervinca); font-size: 1rem; }
  .rsvp-tela-conta { color: rgb(255 255 255 / 0.72); }
  .rsvp-tela-titulo {
    margin-top: var(--e4);
    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
    color: var(--branco);
  }
  .rsvp-tela-passo { display: none; }   /* sem passos: cabe tudo de uma vez */

  /* o X sai do cabeçalho e vai pro canto da tela */
  .rsvp-tela-x {
    position: fixed;
    top: var(--e4);
    right: var(--e4);
    background: rgb(17 27 62 / 0.08);
  }
  .rsvp-tela-x:hover { background: rgb(17 27 62 / 0.16); }

  .rsvp-tela-corpo { grid-area: corpo; padding: var(--e7) var(--e6) var(--e5); }
  .rsvp-tela-pe {
    grid-area: pe;
    padding: var(--e4) var(--e6);
  }
  .rsvp-grupo, .rsvp-tela-botoes, .rsvp-sucesso { max-width: 34rem; margin-inline: 0; }
  .rsvp-tela-pe .form-status { text-align: left; }
  .rsvp-tela-botoes .botao-largo { flex: 0 1 22rem; }
}

/* ---------- a marca, igual à do hero ----------
   Mesmas três camadas: dois nomes em Italiana e o "&" em Great Vibes por
   trás, só que em miniatura. */
/* só no desktop: no celular o cabeçalho é uma faixa curta e a marca
   cairia em cima da data */
.rsvp-marca { display: none; }
@media (min-width: 900px) { .rsvp-marca { display: block; } }
.rsvp-marca {
  position: absolute;
  top: var(--e6);
  left: var(--e6);
  margin: 0;
  line-height: 0.86;
  pointer-events: none;
}
.rsvp-marca-nome {
  display: block;
  position: relative;
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.3rem;
  letter-spacing: -0.02em;
  color: var(--branco);
}
.rsvp-marca-nome-b { margin-left: 0.55em; }
.rsvp-marca-amp {
  position: absolute;
  left: -0.08em;
  top: -0.16em;
  font-family: var(--script);
  font-size: 6rem;
  line-height: 1;
  color: rgb(180 196 234 / 0.55);
}

/* ---------- acompanhantes no rodapé ----------
   Sai do meio do formulário e encosta no botão: quantos vêm é a última
   coisa que a pessoa confere antes de confirmar. */
.rsvp-tela-botoes .campo-acomp {
  flex: none;
  display: grid;
  gap: 0.3rem;
  margin: 0;
}
.rsvp-tela-botoes .campo-acomp[hidden] { display: none; }
.campo-acomp-rotulo {
  font-family: var(--apoio);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul);
}

/* ---------- o bilhete ---------- */
.campo-bilhete label {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.bilhete-titulo {
  font-family: var(--apoio);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul);
}
.bilhete-folha {
  position: relative;
  padding: var(--e3) var(--e4) var(--e5);
  border: 1px solid var(--linha-forte);
  border-radius: 4px 14px 4px 14px;   /* papel rasgado, não caixa de sistema */
  /* o toile é lembrança, não estampa: com 0.75 de véu ele competia com o
     texto que a pessoa escreve */
  background:
    linear-gradient(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.9)),
    var(--toile, none);
  background-size: auto, 300px;
  box-shadow: 0 8px 24px rgb(17 27 62 / 0.06);
}
.bilhete-folha textarea {
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.7;
  min-height: 5.5rem;
}
.bilhete-folha textarea:focus-visible { outline: none; }
.bilhete-folha:focus-within { border-color: var(--azul); }
.bilhete-assina {
  position: absolute;
  right: var(--e4);
  bottom: var(--e2);
  font-family: var(--script);
  font-size: 1.5rem;
  color: var(--pervinca);
  pointer-events: none;
}

/* ---------- sucesso ---------- */

.rsvp-sucesso { max-width: 32rem; margin: 0 auto; text-align: center; }

/* selo lacrado: o anel se fecha e o tique é riscado depois, na ordem em
   que a mão faria */
.sucesso-selo {
  display: block;
  width: 4.4rem;
  margin: 0 auto var(--e4);
}
.sucesso-selo svg {
  width: 100%;
  fill: none;
  stroke: var(--azul);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sucesso-anel {
  stroke-width: 1.4;
  stroke-dasharray: 183;
  stroke-dashoffset: 183;
  animation: selo-anel 0.9s var(--suave) 0.05s forwards;
}
.sucesso-tique {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: selo-tique 0.45s var(--suave) 0.7s forwards;
}
@keyframes selo-anel  { to { stroke-dashoffset: 0; } }
@keyframes selo-tique { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sucesso-anel, .sucesso-tique { animation: none; stroke-dashoffset: 0; }
}

.sucesso-script {
  margin: 0 0 var(--e2);
  font-family: var(--script);
  font-size: clamp(3rem, 11vw, 4.2rem);
  line-height: 1;
  color: var(--azul);
}
.rsvp-sucesso-texto { margin: 0 0 var(--e5); opacity: 0.8; line-height: 1.55; }

/* ---------- cartão "guarde a data" ---------- */
.sucesso-cartao {
  margin: 0 0 var(--e5);
  padding: var(--e4);
  border: 1px solid var(--linha-forte);
  border-radius: 4px 16px 4px 16px;
  background:
    linear-gradient(rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.92)),
    var(--toile, none);
  background-size: auto, 300px;
  text-align: left;
}
.sucesso-cartao-selo {
  margin: 0 0 var(--e3);
  font-family: var(--apoio);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--azul);
}
.sucesso-cartao-data {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--e3);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--linha);
}
.sucesso-cartao-data b {
  font-family: var(--numeros);
  font-weight: 700;
  font-style: italic;
  font-size: 3.2rem;
  line-height: 0.85;
  color: var(--azul);
}
.sucesso-cartao-data span {
  display: grid;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--navy);
}
.sucesso-cartao-data i {
  font-style: normal;
  font-family: var(--apoio);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}
.sucesso-cartao-local {
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--navy);
}
.sucesso-cartao-endereco {
  margin: 0.2rem 0 var(--e4);
  font-size: 0.86rem;
  opacity: 0.7;
  line-height: 1.5;
}

.sucesso-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.sucesso-acao {
  flex: 1 1 9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.7em 0.9em;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--branco);
  font-family: var(--apoio);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  transition: border-color 0.25s var(--suave), background 0.25s var(--suave);
}
.sucesso-acao:hover { border-color: var(--azul); background: rgb(180 196 234 / 0.16); }
.sucesso-acao svg {
  width: 1.05em; height: 1.05em;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* a ponte pra lista: convite, não empurrão */
.rsvp-ponte {
  display: grid;
  gap: 0.25rem;
  padding: var(--e4);
  border: 1px solid var(--linha-forte);
  outline: 1px solid var(--linha);
  outline-offset: 4px;
  background: var(--branco);
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition: translate 0.25s var(--suave), box-shadow 0.25s var(--suave);
}
@media (hover: hover) {
  .rsvp-ponte:hover { translate: 0 -3px; box-shadow: 0 14px 30px rgb(25 26 58 / 0.12); }
}
.rsvp-ponte-selo {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--azul);
}
.rsvp-ponte-titulo {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--navy);
}
.rsvp-ponte-texto { font-size: 0.86rem; opacity: 0.7; line-height: 1.5; }

.rsvp-refazer {
  margin-top: var(--e5);
  border: 0;
  background: none;
  font-family: var(--apoio);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.6;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rsvp-refazer:hover { opacity: 1; }

/* ---------- RSVP desktop sem rolagem ----------
   A área direita é larga o bastante para distribuir as informações. O
   formulário usa duas zonas e o sucesso põe resumo e cartão lado a lado;
   nada importante fica escondido abaixo da dobra. */
@media (min-width: 900px) {
  .rsvp-tela-corpo {
    place-items: center;
    align-content: center;
    overflow: hidden;
    padding: clamp(1rem, 2.8vh, 2rem) clamp(2rem, 4vw, 4rem);
  }

  #form-rsvp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "dados recado"
      "contatos recado";
    align-items: start;
    gap: var(--e3) 0;
    width: min(62rem, 100%);
  }

  #rsvp-passo-1 {
    grid-area: dados;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-right: clamp(1.5rem, 3vw, 3rem);
  }

  #rsvp-passo-2:not([hidden]) {
    display: contents;
  }
  .rsvp-contatos {
    grid-area: contatos;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--e3);
    padding-right: clamp(1.5rem, 3vw, 3rem);
  }
  #rsvp-passo-2 .campo-bilhete {
    grid-area: recado;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding-left: clamp(1.5rem, 3vw, 3rem);
    border-left: 1px solid var(--linha);
  }

  .rsvp-tela .campo { margin-bottom: 0; }
  .rsvp-tela .bilhete-folha {
    flex: 1 1 auto;
    padding-block: var(--e2) var(--e4);
  }
  .rsvp-tela .bilhete-folha textarea { min-height: clamp(3.5rem, 8vh, 5rem); }

  .rsvp-tela-pe { padding: 0.75rem clamp(2rem, 4vw, 4rem); }
  .rsvp-tela-botoes {
    align-items: end;
    width: min(62rem, 100%);
    max-width: none;
    margin-inline: auto;
  }
  .rsvp-tela-botoes .botao-largo { flex: 1 1 auto; }
  .rsvp-tela-botoes .campo-acomp:not([hidden]) {
    display: flex;
    align-items: center;
    gap: var(--e2);
  }
  .rsvp-tela-botoes .campo-acomp-rotulo { max-width: 8rem; }
  .rsvp-tela-botoes .stepper {
    gap: var(--e2);
    padding: 0.15rem 0.35rem;
  }

  .rsvp-sucesso {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    grid-template-areas:
      "selo cartao"
      "titulo cartao"
      "texto cartao"
      "ponte cartao"
      "refazer cartao";
    align-items: start;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    width: min(62rem, 100%);
    max-width: none;
    margin: 0;
  }
  .rsvp-sucesso .sucesso-selo {
    grid-area: selo;
    width: 3.8rem;
    margin: 0 auto var(--e2);
  }
  .rsvp-sucesso .sucesso-script { grid-area: titulo; }
  .rsvp-sucesso .rsvp-sucesso-texto {
    grid-area: texto;
    margin-bottom: var(--e3);
  }
  .rsvp-sucesso .sucesso-cartao { grid-area: cartao; margin: 0; }
  .rsvp-sucesso .rsvp-ponte { grid-area: ponte; padding: var(--e3); }
  .rsvp-sucesso .rsvp-refazer { grid-area: refazer; margin-top: var(--e4); }

  .rsvp-sucesso:has(.sucesso-cartao[hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "selo"
      "titulo"
      "texto"
      "refazer";
    width: min(34rem, 100%);
  }
}

/* ---------- formulário: interface em Jost ---------- */

.campo label, .campo legend, .opcional, .ajuda-campo,
.caixinha, .presenca-pill, .form-status, .stepper output {
  font-family: var(--apoio);
}
.campo label, .campo legend { font-weight: 500; }
.campo input, .campo textarea { font-family: var(--apoio); font-weight: 300; }

/* ============================================================
   RSVP — a chamada na página (a tela cheia mora lá em cima)
   ============================================================ */

.rsvp-chamada { background: var(--papel-2); }
.rsvp-chamada .botao { min-width: 16rem; }
.rsvp-prazo { margin: var(--e4) 0 0; opacity: 0.7; font-size: 0.98rem; }
.rsvp-prazo strong { font-weight: 600; }

/* sugestões de domínio de e-mail */
.sugestoes { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e2); }
/* `display: flex` sozinho vence o [hidden] do navegador — sem esta linha a
   caixa continua montada depois do blur, empurrando o campo de baixo. É a
   mesma armadilha que já tinha acontecido na tela do RSVP. */
.sugestoes[hidden] { display: none; }
.sugestao {
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.35rem var(--e2);
  cursor: pointer;
  transition: background-color 0.2s var(--suave), border-color 0.2s var(--suave), color 0.2s var(--suave);
}
.sugestao:hover { background: var(--azul); border-color: var(--azul); color: var(--branco); }

/* ============================================================
   FECHO
   ============================================================ */

.fecho { background: var(--navy); }
/* o texto fica embaixo, onde o véu já é escuro — no meio ele cai em cima
   dos rostos e some */
.fecho-cena {
  position: relative;
  min-height: min(82svh, 44rem);
  display: grid;
  align-items: end;
  justify-items: center;
  overflow: hidden;
}
/* sobra de altura em cima e embaixo: é o curso do parallax */
.fecho-foto {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 50% 32%;
}
.fecho-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(25 26 58 / 0.5) 0%, rgb(25 26 58 / 0.12) 30%,
      rgb(25 26 58 / 0.6) 62%, rgb(25 26 58 / 0.92) 88%, var(--navy) 100%);
}
.fecho-conteudo {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--e4);
  padding: var(--secao) var(--margem) calc(var(--e7) + env(safe-area-inset-bottom));
  text-align: center;
}
.fecho-script {
  margin: 0;
  font-family: var(--script);
  font-size: clamp(3rem, 12vw, 5.5rem);
  line-height: 1;
  color: var(--branco);
  text-shadow: 0 2px 28px rgb(12 14 30 / 0.5);
}
.fecho-frase {
  margin: 0;
  max-width: 26rem;
  font-family: var(--display);
  font-size: clamp(1.2rem, 4vw, 1.7rem);
  line-height: 1.4;
  color: var(--branco);
  text-shadow: 0 1px 18px rgb(12 14 30 / 0.6);
}
.fecho-assinatura {
  margin: var(--e4) 0 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  letter-spacing: 0.12em;
  color: var(--branco);
}
.fecho-assinatura span { font-family: var(--script); color: var(--pervinca); font-size: 1.4em; }
.fecho-rodape {
  text-align: center;
  padding: var(--e6) var(--margem) calc(var(--e5) + env(safe-area-inset-bottom));
}
.fecho-data {
  margin: 0;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pervinca-clara);
  opacity: 0.7;
}
.fecho-admin {
  margin: var(--e3) 0 0;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.35;
  color: var(--pervinca-clara);
}
.fecho-admin a { text-decoration: none; }
.fecho-admin a:hover { text-decoration: underline; }

/* Assinatura de quem fez. Mesmo caixa-alta miúdo do resto do rodapé, mas
   com o nome um passo mais claro que a frase — é crédito, não anúncio:
   quem quiser achar acha, e não disputa espaço com a data do casamento. */
.fecho-apol {
  margin: var(--e2) 0 0;
  font-family: var(--apoio);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pervinca-clara);
  opacity: 0.42;
}
.fecho-apol a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgb(215 224 245 / 0.35);
  padding-bottom: 1px;
  transition: opacity 0.25s var(--suave), border-color 0.25s var(--suave);
}
.fecho-apol a:hover { border-color: var(--pervinca-clara); }
/* a assinatura de quem fez, com nome e parentesco — o sorrisinho é o
   tom certo: crédito de quem fez o próprio convite, não rodapé de agência */
.fecho-apol i {
  display: block;
  margin-top: 0.25rem;
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  opacity: 0.8;
}

/* O aviso de medição. Fica no rodapé porque vale pro site inteiro, e
   discreto porque é obrigação de transparência, não recado de venda —
   mas legível: aviso que ninguém consegue ler não avisa nada. */
.fecho-nota {
  max-width: 34rem;
  margin: var(--e3) auto 0;
  font-family: var(--apoio);
  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.4;
  color: var(--pervinca-clara);
}


.previa-nota {
  margin: var(--e4) 0 0;
  font-style: italic;
  font-size: 0.95rem;
  opacity: 0.62;
}

/* ============================================================
   ÁLBUM COMPLETO (galeria.html)
   Grade de colunas com altura livre: o ensaio é quase todo retrato,
   mas as deitadas aparecem inteiras em vez de cortadas.
   ============================================================ */

.album-topo .titulo { margin-bottom: var(--e3); }
.album { padding: var(--e6) var(--margem) var(--secao); }

.album-grade {
  max-width: 78rem;
  margin-inline: auto;
  columns: 2;
  column-gap: clamp(var(--e2), 1.5vw, var(--e4));
}
.album-item {
  display: block;
  width: 100%;
  margin: 0 0 clamp(var(--e2), 1.5vw, var(--e4));
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--papel-2);
  cursor: pointer;
  break-inside: avoid;
  position: relative;
  /* enquanto a foto não chega, o retrato do ensaio segura a altura */
  aspect-ratio: 2 / 3;
  transition: box-shadow 0.35s var(--suave);
}
.album-item.carregada { aspect-ratio: auto; }
.album-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.7s var(--suave);
}
.album-item.carregada img { height: auto; }
@media (hover: hover) {
  .album-item:hover { box-shadow: 0 18px 40px rgb(25 26 58 / 0.2); }
  .album-item:hover img { scale: 1.03; }
}
.album-legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--e5) var(--e3) var(--e2);
  font-family: var(--script);
  font-size: 1.1rem;
  color: var(--branco);
  text-align: center;
  background: linear-gradient(to top, rgb(12 14 30 / 0.65), transparent);
  pointer-events: none;
}
.album-fim {
  margin: var(--e7) 0 0;
  text-align: center;
  font-family: var(--script);
  font-size: 1.5rem;
  color: var(--azul);
  opacity: 0.7;
}

@media (min-width: 620px)  { .album-grade { columns: 3; } }
@media (min-width: 1000px) { .album-grade { columns: 4; } }
@media (min-width: 1400px) { .album-grade { columns: 5; } }

/* chamada do álbum na home, embaixo do mural */
.mural-mais { margin-top: var(--e6); text-align: center; }

/* ---------- foto deitada e alfinete na linha do tempo ---------- */

/* Foto deitada volta a ter moldura deitada e aparece inteira. O palco fixo
   em `.marco` — não a altura da moldura — é quem mantém todas as datas na
   mesma linha. */
.marco-foto.deitada {
  --largura: min(20rem, 72vw);
  height: auto;
}
.marco-foto.deitada img {
  height: auto;
  object-fit: contain;
}
.marco-foto { position: relative; }

.foto-pin {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 0.68rem;
  height: 0.68rem;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid var(--branco);
  background: var(--azul);
  box-shadow: 0 1px 4px rgb(12 14 30 / 0.28);
  pointer-events: none;
}
/* o anel que pulsa devagar chama o olho sem virar enfeite */
.foto-pin::before {
  content: "";
  position: absolute;
  inset: -0.28rem;
  border-radius: 50%;
  border: 1px solid var(--azul);
  opacity: 0.28;
  animation: pin-pulsa 3.8s ease-out infinite;
}
@keyframes pin-pulsa {
  0% { transform: scale(0.82); opacity: 0.35; }
  65%, 100% { transform: scale(1.35); opacity: 0; }
}
/* A etiqueta sai em diagonal para o canto superior esquerdo: continua
   identificando a Rebeca sem virar uma tarja sobre o rosto. */
.foto-pin-rotulo {
  position: absolute;
  right: calc(100% + 0.35rem);
  bottom: calc(100% + 0.18rem);
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  border: 1px solid rgb(46 81 163 / 0.16);
  background: rgb(246 248 253 / 0.9);
  color: var(--azul-escuro);
  box-shadow: 0 1px 4px rgb(25 26 58 / 0.1);
  font-family: var(--apoio);
  font-weight: 600;
  font-size: 0.5rem;
  line-height: 1.35;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .foto-pin::before { animation: none; }
}


/* ---------- tela do RSVP no desktop ----------
   No celular a tela cheia é o desenho todo. No desktop dois passos com
   uma coluna só ficariam longos demais, então o passo vira duas colunas —
   sem mexer na estrutura de topo · corpo · pé grudado. */

@media (min-width: 761px) and (max-width: 899px) {
  /* o passo 1 tem dois campos: em duas colunas ficaria torto. Só o passo 2,
     que tem WhatsApp + e-mail + recado, ganha o pareamento. */
  #rsvp-passo-2 {
    grid-template-columns: 1fr 1fr;
    max-width: 46rem;
    align-items: start;
  }
  #rsvp-passo-2 .campo:last-of-type { grid-column: 1 / -1; }
  .rsvp-tela-corpo { display: grid; place-items: start center; }
  .rsvp-sucesso { max-width: 34rem; }
}


/* janela baixa: aperta o respiro. Com o pé grudado o botão nunca some,
   mas texto menor evita rolagem desnecessária no passo. */
@media (min-width: 761px) and (max-height: 780px) {
  .rsvp-tela-topo { padding-block: var(--e4) var(--e3); }
  .rsvp-tela-titulo { font-size: 1.5rem; }
  .rsvp-grupo { gap: var(--e2); }
  .rsvp-tela-corpo { padding-block: clamp(0.6rem, 2vh, 1rem); }
}

/* notebook Retina e janelas com pouca altura: mantém tudo visível sem
   transformar o formulário em miniatura nem cortar a confirmação final. */
@media (min-width: 900px) and (max-height: 580px) {
  .rsvp-tela:not([hidden]) {
    grid-template-columns: minmax(13rem, 25fr) minmax(0, 75fr);
  }
  .rsvp-tela-corpo { padding-inline: 1.25rem; }
  #form-rsvp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e2) 0;
  }
  #rsvp-passo-1,
  .rsvp-contatos { padding-right: var(--e3); }
  #rsvp-passo-2 .campo-bilhete { padding-left: var(--e3); }

  /* Duas colunas de verdade também nas telas Retina mais baixas: os dados
     ficam compactos à esquerda sem transformar a área em um formulário com
     rolagem, e o recado preserva toda a coluna direita. */
  #rsvp-passo-1 { gap: 0.55rem; }
  .rsvp-contatos { gap: 0.55rem var(--e3); }
  .rsvp-tela #rsvp-passo-1 .presenca-opcoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .rsvp-tela #rsvp-passo-1 .presenca-pill {
    gap: 0.3em;
    padding: 0.55rem 0.35rem;
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .rsvp-tela #rsvp-passo-1 .campo label,
  .rsvp-tela #rsvp-passo-1 .campo legend,
  .rsvp-tela .rsvp-contatos .campo > label {
    margin-bottom: 0.18rem;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
  }
  .rsvp-tela #rsvp-passo-1 input[type="text"],
  .rsvp-tela .rsvp-contatos input[type="tel"],
  .rsvp-tela .rsvp-contatos input[type="email"] {
    padding-block: 0.25rem;
    font-size: 0.94rem;
  }
  .rsvp-tela .rsvp-contatos .caixinha {
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.62rem;
    line-height: 1.25;
  }
  .rsvp-tela .rsvp-contatos .caixinha input {
    width: 0.9rem;
    height: 0.9rem;
  }
  .rsvp-tela-x {
    position: absolute;
    top: var(--e3);
    right: var(--e3);
    color: var(--branco);
    background: rgb(17 27 62 / 0.52);
  }
  .rsvp-tela-pe { padding-block: 0.45rem; }
  .rsvp-tela-botoes .campo-acomp-rotulo {
    font-size: 0.56rem;
    line-height: 1.25;
  }
  .rsvp-tela-botoes .stepper-botao { width: 1.9rem; height: 1.9rem; }
  .rsvp-tela-botoes .botao { padding-block: 0.65rem; }

  .rsvp-sucesso { column-gap: var(--e3); }
  .rsvp-sucesso .sucesso-selo { width: 2.8rem; margin-bottom: var(--e1); }
  .rsvp-sucesso .sucesso-script {
    margin-bottom: var(--e1);
    font-size: 2.7rem;
  }
  .rsvp-sucesso .rsvp-sucesso-texto {
    margin-bottom: var(--e2);
    font-size: 0.88rem;
    line-height: 1.35;
  }
  .rsvp-sucesso .sucesso-cartao { padding: 0.75rem; }
  .rsvp-sucesso .sucesso-cartao-selo { margin-bottom: 0.45rem; }
  .rsvp-sucesso .sucesso-cartao-data {
    margin-bottom: 0.55rem;
    padding-bottom: 0.55rem;
  }
  .rsvp-sucesso .sucesso-cartao-data b { font-size: 2.4rem; }
  .rsvp-sucesso .sucesso-cartao-local { font-size: 1.1rem; }
  .rsvp-sucesso .sucesso-cartao-endereco {
    margin-bottom: 0.65rem;
    font-size: 0.74rem;
    line-height: 1.35;
  }
  .rsvp-sucesso .sucesso-acoes { gap: 0.35rem; }
  .rsvp-sucesso .sucesso-acao { padding-block: 0.45rem; }
  .rsvp-sucesso .rsvp-ponte {
    gap: 0.12rem;
    padding: 0.65rem;
  }
  .rsvp-sucesso .rsvp-ponte-titulo { font-size: 1rem; }
  .rsvp-sucesso .rsvp-ponte-texto { font-size: 0.72rem; line-height: 1.35; }
  .rsvp-sucesso .rsvp-refazer { margin-top: var(--e2); font-size: 0.62rem; }
}

/* no celular cada assunto é um bloco. Quando o teclado ocupa metade da
   tela, o cabeçalho vira só a barra de fechar e o botão reaparece ao sair
   do campo, deixando o bloco ativo inteiramente visível. */
@media (max-width: 899px) {
  .rsvp-bloco {
    padding-block: var(--e2);
    border-bottom: 1px solid var(--linha);
  }
  .rsvp-bloco:last-child { border-bottom: 0; }
  .rsvp-bloco:focus-within { background: rgb(180 196 234 / 0.08); }
  .rsvp-tela.teclado-aberto .rsvp-tela-topo {
    min-height: 3rem;
    padding: 0.4rem var(--margem);
  }
  .rsvp-tela.teclado-aberto .rsvp-tela-selo,
  .rsvp-tela.teclado-aberto .rsvp-tela-conta,
  .rsvp-tela.teclado-aberto .rsvp-tela-titulo { display: none; }

  /* AQUI estava o botão sumido, e não no cálculo do teclado: havia um
     `.rsvp-tela.teclado-aberto .rsvp-tela-pe { display: none }`, de quando
     a ideia era esconder o rodapé com o teclado aberto e devolvê-lo ao
     sair do campo. Com o fluxo guiado isso é o oposto do que se quer — o
     "Continuar" é justamente o que a pessoa procura depois de digitar.
     A régua de progresso também ficava escondida, e ela é a guia.
     Ficam os dois. */
  .rsvp-tela.teclado-aberto .rsvp-tela-pe { display: block; }
  .rsvp-tela.teclado-aberto .rsvp-tela-x {
    top: 0.35rem;
    right: var(--margem);
    width: 2.25rem;
    height: 2.25rem;
  }
  .rsvp-tela.teclado-aberto .rsvp-tela-corpo { padding-block: var(--e2); }
}

/* a barra da versão, só enquanto for rascunho */
.fita-versao {
  position: fixed;
  z-index: 60;
  left: 50%;
  top: 0;
  translate: -50% 0;
  padding: 0.4rem var(--e4) 0.5rem;
  border-radius: 0 0 12px 12px;
  background: var(--navy);
  color: var(--branco);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  text-decoration: none;
}
.fita-versao:hover { background: var(--azul); }

/* ============================================================
   LISTA DE PRESENTES AINDA FECHADA

   O estado sai da classe que o script embutido no <head> põe no <html>,
   e não do JS da página: assim o bloco certo já vem na primeira pintura,
   sem piscar o errado. Sem JS nenhum, fica no estado fechado — que é o
   conservador: melhor avisar que abre depois do que abrir uma loja vazia.
   ============================================================ */

/* os dois seletores levam o `html` na frente de propósito: `.so-fechado`
   sozinho empata em especificidade com `.lista-espera { display: grid }`,
   que vem depois no arquivo e ganhava o desempate — o cartão de espera
   continuava na tela depois da lista abrir. */
html.presentes-abertos .so-fechado { display: none; }
html:not(.presentes-abertos) .so-aberto { display: none; }

.lista-espera {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  width: min(34rem, 100%);
  margin: var(--e5) auto 0;
  padding: clamp(var(--e5), 6vw, var(--e7)) clamp(var(--e4), 5vw, var(--e6));
  background: rgb(255 255 255 / 0.62);
  border: 1px solid var(--linha);
  border-radius: 4px;
  outline: 1px solid var(--linha);
  outline-offset: 6px;
  text-align: center;
}
.lista-espera-loja { margin-block: var(--secao); }

.lista-selo {
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-size: 0.7rem;
  color: var(--azul);
}
.lista-data {
  display: grid;
  justify-items: center;
  gap: 0.1em;
  margin: 0;
  line-height: 0.9;
}
.lista-dia {
  font-family: var(--numeros);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(3.6rem, 16vw, 5.4rem);
  color: var(--azul);
}
.lista-mes {
  font-family: var(--script);
  font-size: 1.5rem;
  color: var(--azul);
  opacity: 0.85;
}
.lista-contagem {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  min-height: 1.2em;
}
.lista-espera .subtexto { margin: 0; }
.lista-espera .botao { margin-top: var(--e2); }
.lista-espera .previa-nota { margin: 0; font-size: 0.86rem; opacity: 0.72; }

/* ---------- WhatsApp e o aceite dos avisos ---------- */

.caixinha {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--e2);
  margin: var(--e2) 0 0;
  cursor: pointer;
}
/* `.campo label` deixa todo rótulo em caixa-alta com 0.18em — aqui é frase
   corrida, então o seletor precisa ser mais específico que ele. */
.campo .caixinha {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--navy);
  opacity: 0.85;
}
.caixinha input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.12rem 0 0;
  accent-color: var(--azul);
  cursor: pointer;
}

/* ---------- contagem no fecho ---------- */

.fecho-contagem {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: clamp(var(--e3), 4vw, var(--e5));
  margin: var(--e5) 0 0;
  padding-top: var(--e4);
  border-top: 1px solid rgb(255 255 255 / 0.22);
  width: min(26rem, 100%);
  margin-inline: auto;
}
.fc-item {
  display: inline-flex;
  align-items: baseline;
  /* em rem, não em em: o `em` aqui sai do 0.7rem do rótulo e encosta o
     número na palavra */
  gap: 0.45rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgb(255 255 255 / 0.72);
}
.fc-item b {
  font-family: var(--numeros);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: 0;
  line-height: 1;
  color: var(--branco);
  /* mesma largura em qualquer dígito, senão a linha inteira dança */
  min-width: 1.6ch;
  text-align: center;
  transition: opacity 0.35s var(--suave);
}
.fc-item b.troca { opacity: 0.25; }
.fecho-contagem-nota {
  margin: var(--e2) 0 0;
  font-family: var(--script);
  font-size: 1.3rem;
  color: rgb(255 255 255 / 0.8);
}

/* Nada pode empurrar a página de lado. `clip` na raiz E no body porque
   no iOS só o body não segura: a viewport visual continua deslizando e a
   página parece "com zoom errado". Só quem rola de lado é quem pede
   explicitamente (o trilho dos destaques, com overflow-x próprio). */
html, body { overflow-x: clip; max-width: 100%; }


/* ============================================================
   Rolagem livre.

   Aqui morava um scroll-snap vertical. Mesmo em `proximity` ele puxava a
   tela de volta quando a pessoa parava no meio de uma seção — travava e
   voltava. Ficou só o recuo das âncoras, pro menu fixo não comer o topo
   da seção pra onde o link leva.
   ============================================================ */
html { scroll-padding-top: 4.5rem; }

/* no celular os quatro não cabem numa linha: 3+1 fica com cara de quebra
   acidental, então viram 2×2 de propósito */
@media (max-width: 560px) {
  .fecho-contagem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e3) var(--e4);
    width: min(17rem, 100%);
  }
  .fc-item { justify-content: center; }
}

/* ============================================================
   ÁLBUM — barra fina no lugar da capa

   A capa antiga ocupava a tela inteira antes da primeira foto. Aqui o
   cabeçalho vira uma barra grudada no topo e o texto de abertura desce
   pra dentro do mosaico, como uma célula de papel entre as fotos.
   ============================================================ */

.album-barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--margem);
  background: rgb(180 196 234 / 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(46 81 163 / 0.16);
}
.album-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
  text-decoration: none;
  color: var(--navy);
  opacity: 0.78;
}
.album-voltar:hover { opacity: 1; }
.album-marca {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 3.4vw, 1.5rem);
  line-height: 1;
  color: var(--azul);
  white-space: nowrap;
}
.album-assina {
  justify-self: end;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.62rem;
  color: var(--navy);
  opacity: 0.7;
  text-align: right;
}
.album-julia {
  font-family: var(--script);
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--azul);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  opacity: 1;
}
.album-julia:hover { border-bottom-color: currentColor; }

/* no celular só o essencial cabe: some o texto do voltar e a contagem */
@media (max-width: 600px) {
  .album-barra { grid-template-columns: auto 1fr auto; }
  .album-voltar-texto { display: none; }
  .album-marca { justify-self: center; }
  .album-assina #album-numeros { display: none; }
}

/* fotos começam logo abaixo da barra */
.album { padding: clamp(var(--e2), 1.5vw, var(--e4)) var(--margem) var(--secao); }

/* ---------- a nota de abertura, como célula do mosaico ---------- */

.album-nota {
  break-inside: avoid;
  margin: 0 0 clamp(var(--e2), 1.5vw, var(--e4));
  padding: clamp(var(--e4), 4vw, var(--e6));
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 14px;
  text-align: center;
}
.album-nota-selo {
  margin: 0 0 var(--e2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-size: 0.64rem;
  color: var(--azul);
}
.album-nota-texto {
  margin: 0 0 var(--e4);
  font-size: 1.02rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.album-nota-credito {
  display: grid;
  gap: 0.15rem;
  margin: 0 0 var(--e2);
  font-size: 0.8rem;
  opacity: 0.72;
}
.album-nota-credito a {
  font-family: var(--script);
  font-size: 1.5rem;
  color: var(--azul);
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
}
.album-nota-credito span { font-size: 0.76rem; letter-spacing: 0.06em; }
.album-nota-dica {
  margin: 0;
  font-style: italic;
  font-size: 0.84rem;
  opacity: 0.55;
}

/* no celular a coluna tem ~150px e o texto vira uma tira ilegível: a nota
   atravessa as duas colunas antes das fotos começarem */
@media (max-width: 600px) {
  .album-nota { column-span: all; }
}

/* ainda no celular: a nota encolhe pra sobrar tela pras fotos */
@media (max-width: 600px) {
  .album-nota { padding: var(--e4) var(--e4) var(--e3); }
  .album-nota-texto { font-size: 0.94rem; margin-bottom: var(--e3); }
  .album-nota-credito a { font-size: 1.3rem; }
  .album-nota-dica { display: none; }   /* no toque, a dica é óbvia */
}


/* ============================================================
   A nossa música — pílula flutuante

   Canto esquerdo de propósito: o atalho de confirmar e o quadrinho de
   contribuir moram na direita, e três coisas no mesmo canto viram uma
   pilha ilegível no celular.
   ============================================================ */
.musica {
  position: fixed;
  left: var(--margem);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 33;
  display: grid;
  gap: var(--e2);
  justify-items: start;
  max-width: min(20rem, calc(100vw - var(--margem) * 2));
}

/* nasce escondida: o JS só a revela depois de confirmar que o arquivo
   existe. Sem `[hidden]` explícito ela pisca no carregamento. */
.musica[hidden] { display: none; }

.musica-botao {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.9rem 0.5rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  background: rgb(17 27 62 / 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--branco);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 28px rgb(17 27 62 / 0.3);
  transition: background 0.3s var(--suave);
}
.musica-botao:hover { background: rgb(17 27 62 / 0.97); }

.musica-texto { display: grid; gap: 0.05rem; min-width: 0; }
.musica-texto b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.musica-texto i {
  font-style: normal;
  font-family: var(--apoio);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  white-space: nowrap;
}
.musica-cta {
  flex: none;
  font-family: var(--apoio);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pervinca);
}

/* as barrinhas: paradas quando está em silêncio, dançando quando toca */
.musica-onda {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 1.1rem; height: 1.1rem;
}
.musica-onda i {
  flex: 1;
  height: 25%;
  border-radius: 2px;
  background: var(--pervinca);
  transition: height 0.3s var(--suave);
}
.musica[data-tocando="sim"] .musica-onda i {
  animation: musica-onda 0.9s ease-in-out infinite alternate;
}
.musica[data-tocando="sim"] .musica-onda i:nth-child(2) { animation-delay: 0.15s; }
.musica[data-tocando="sim"] .musica-onda i:nth-child(3) { animation-delay: 0.3s; }
.musica[data-tocando="sim"] .musica-onda i:nth-child(4) { animation-delay: 0.45s; }
@keyframes musica-onda {
  from { height: 25%; }
  to   { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .musica[data-tocando="sim"] .musica-onda i { animation: none; height: 70%; }
}

/* em tela estreita fica só o essencial: o nome da música e o botão */
/* ---------- a base da tela no celular ----------

   Trocamos quem fala e quem cala. Antes o confirmar encolhia pra uma seta
   redonda — o convite inteiro terminava num ícone sem palavra — enquanto a
   música ocupava a esquerda com nome, artista e "pausar", três linhas de
   texto pra uma coisa que já está tocando.

   Agora é o contrário: o botão de confirmar aparece por extenso, com data e
   tudo, e a música vira um controle redondo do lado dele. Depois que a
   faixa começou, o único gesto que resta é parar — não precisa de rótulo
   pra isso, precisa de alvo grande e claro. */
@media (max-width: 560px) {
  /* o cartão completo cabe: só aperta um pouco pra sobrar espaço à direita */
  .rsvp-atalho { padding: 0.6rem 0.62rem 0.6rem 0.95rem; gap: 0.5rem; }
  .rsvp-atalho-titulo { font-size: 1rem; }
  .rsvp-atalho-seta { width: 1.95rem; height: 1.95rem; }

  .musica-botao {
    padding: 0;
    width: 2.9rem; height: 2.9rem;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
  /* o texto sai da vista, não do leitor de tela: `display: none` apagaria
     também o nome da música pra quem navega por áudio */
  .musica-texto, .musica-cta {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .musica-onda { width: 1rem; height: 1rem; justify-content: center; }
  /* pausada, quatro barras paradas não dizem nada — vira um play */
  .musica[data-tocando="nao"] .musica-onda i { display: none; }
  .musica[data-tocando="nao"] .musica-onda::after {
    content: "";
    align-self: center;
    margin-left: 0.16rem;
    border-left: 0.6rem solid var(--pervinca);
    border-top: 0.36rem solid transparent;
    border-bottom: 0.36rem solid transparent;
  }
}

/* telas de 320: o cartão por extenso e o redondo não cabem lado a lado
   com folga, então o texto do confirmar afina em vez de sumir */
@media (max-width: 349px) {
  .rsvp-atalho { padding: 0.55rem 0.5rem 0.55rem 0.75rem; gap: 0.4rem; }
  .rsvp-atalho-titulo { font-size: 0.92rem; }
  .rsvp-atalho-selo { font-size: 0.52rem; letter-spacing: 0.14em; }
  .musica-botao { width: 2.6rem; height: 2.6rem; }
}

/* Valor dentro de botão. O rótulo do botão é serifa em versalete com muito
   espaçamento — bonito para "COMPRAR NA LOJA", péssimo para "R$ 103,07",
   que é justamente o número que a pessoa confere antes de decidir. Então o
   valor sai da tipografia do botão e volta para a dos números. */
.botao .botao-valor,
.bt .botao-valor {
  font-family: var(--numeros);
  font-weight: 600;
  font-size: 1.05em;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Valores monetários são informação de comparação. Jost mantém os
   algarismos claros e alinhados em todas as superfícies da lista. */
.vitrine-preco,
.prod-preco,
.prod-outro-preco,
.prod-barra-preco,
.pix-valor,
.destaque-card b,
.valor,
.barra-total,
.ficha-preco,
.sacola-preco,
.sacola-total strong,
.cota-valor,
.botao-valor {
  font-family: var(--numeros);
  font-variant-numeric: tabular-nums;
}

/* Rótulo em cima, valor embaixo: lado a lado, o rótulo em versalete quebra
   em duas linhas e o número fica pendurado no canto. */
.botao:has(.botao-valor) {
  flex-direction: column;
  gap: 0.1em;
  line-height: 1.2;
}

/* ---------- os três defeitos dos prints do iPhone ---------- */
@media (max-width: 760px) {
  /* A BARRA BRANCA DOS BOTÕES estava alta demais pro que carrega: um
     botão e um "voltar". Três folgas somadas — padding da faixa, padding
     do botão e a margem do status vazio. */
  .rsvp-tela-pe {
    padding: 0.45rem var(--margem);
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }
  .rsvp-tela-pe .botao { padding-block: 0.72em; }
  .rsvp-voltar { padding-block: 0.5rem; }

  /* O CURSOR SAÍA DA LINHA no recadinho. O textarea herdava uma
     entrelinha maior que a da fonte, e o caret desenha na altura da
     LINHA, não da letra — por isso ele aparecia acima do texto. Fixar
     entrelinha e recuo põe os dois no mesmo lugar. */
  .bilhete-folha textarea {
    line-height: 1.5;
    padding-block: 0.15rem;
    vertical-align: top;
  }
}

/* ============================================================
   DUAS TRAVAS GLOBAIS

   As duas causaram cinco defeitos diferentes neste site, sempre em
   silêncio — nada quebra, só não acontece o que devia.

   1. `[hidden]` TEM QUE GANHAR. O `display: none` que o navegador dá pro
      atributo vem da folha do UA, então QUALQUER `display: grid/flex/
      block` de autor o vence, e o elemento fica na tela mesmo com
      `hidden`. Foi assim que a caixa de sugestões de e-mail continuou
      montada depois do blur, e que a tela do RSVP ficava sempre presente.

   2. CAMPO NUNCA ABAIXO DE 16px NO CELULAR. Fonte menor que isso faz o
      Safari do iPhone dar zoom sozinho ao focar, e o zoom desalinha a
      tela inteira. Aconteceu no RSVP e na gaveta do Pix.
   ============================================================ */
[hidden] { display: none !important; }

@media (max-width: 760px) {
  input, textarea, select { font-size: max(16px, 1em); }
}

/* o aceno da pílula de música: um balancinho único, convite e não alarme */
@keyframes musica-acena {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -2.4deg; }
  45% { rotate: 2deg; }
  70% { rotate: -1.2deg; }
}
.musica.acena .musica-botao { animation: musica-acena 1.3s var(--suave); }
@media (prefers-reduced-motion: reduce) {
  .musica.acena .musica-botao { animation: none; }
}

/* Na lista de presentes a faixa "contribuir" ocupa a base da tela — e a
   pílula de música morava exatamente atrás dela (z 33 contra 40): quem
   quisesse pausar não alcançava o botão. Quando a faixa está visível, a
   pílula sobe pra cima dela; quando a faixa sai, desce de volta. */
body:has(.faixa-contribuir[data-visivel="sim"]) .musica {
  bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
}
.musica { transition: bottom 0.36s var(--suave); }

/* ============================================================
   VARREDURA DE LEGIBILIDADE E TOQUE (celular)

   Medido em 375px com a régua, não no olho. O critério: rótulo em
   versalete espaçado aguenta 10px; TÍTULO e INFORMAÇÃO não. E alvo de
   toque abaixo de ~44px é loteria pro polegar (Apple HIG).
   ============================================================ */
@media (max-width: 760px) {
  /* "Rebeca" no pin da foto estava a 8px — ilegível, e é um nome */
  .foto-pin-rotulo { font-size: 0.62rem; }

  /* título do cartão de distâncias a 9.6px e os "26 km" a 9.3px:
     é a informação que responde "consigo ir?", não decoração */
  .mapa-perto-titulo { font-size: 0.78rem; }
  .mapa-perto-lista i { font-size: 0.72rem; }

  /* o aviso de traje é dos poucos avisos práticos do site */
  .local-traje { font-size: 1rem; }
  .local-traje b { font-size: 0.78rem; }

  /* alvos de toque: CEP (input 35px, botão 38px) e o botão do menu */
  .mapa-cep input[type="text"],
  .mapa-cep button { min-height: 44px; }
  .menu-botao { padding-block: 0.75rem; }

  /* links do rodapé tinham 13px de altura clicável */
  .fecho-admin a, .fecho-apol a {
    display: inline-block;
    padding: 0.55rem 0.3rem;
    margin: -0.45rem -0.3rem;
  }
}

/* ---------- varredura de toque: lista de presentes ---------- */
@media (max-width: 760px) {
  /* os pontinhos do carrossel mediam 8x8px DE ALVO. O desenho continua um
     pontinho; a área que aceita o dedo vira ~28x28 via padding. */
  .destaques-ponto {
    box-sizing: content-box;
    padding: 10px;
    background-clip: content-box;
  }
  /* "Ver 9 de cozinha →" tinha 16px de altura clicável */
  .destaque-todos {
    display: inline-block;
    padding: 0.55rem 0.4rem;
    margin: -0.35rem -0.4rem;
  }
  /* o voltar pro convite, idem (31px) */
  .loja-voltar { padding-block: 0.65rem; }
  /* o "presentear →" dos itens do banner estava a 9.3px */
  .destaque-item i, .destaque-card i { font-size: 0.68rem; }
}

/* ---------- varredura de toque: galeria e produto ---------- */
@media (max-width: 760px) {
  /* o VOLTAR do álbum media 12x17px — o caminho de volta quase inclicável */
  .album-voltar {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem;
    margin: -0.7rem;
  }
  /* trilha de navegação do produto ("Convite / Lista de presentes") a 19px
     de altura, e o "ver todos →" a 17px */
  .prod-migalhas a, .prod-secao-link {
    display: inline-block;
    padding: 0.55rem 0.25rem;
    margin: -0.45rem -0.25rem;
  }
}

/* ---------- o lembrete de quem já confirmou ----------

   Mesma tela do sucesso, com duas diferenças que existem porque ela NÃO é
   uma comemoração: o selo já nasce desenhado (repetir a animação celebra o
   que não acabou de acontecer) e "confirmar outra pessoa" deixa de ser um
   link miúdo no rodapé. Ali ele é a única saída de quem abriu o link do
   WhatsApp para confirmar a esposa, então tem que ser botão de verdade,
   acima do cartão e do tamanho do dedo. */
.rsvp-sucesso[data-lembrete="sim"] .sucesso-anel,
.rsvp-sucesso[data-lembrete="sim"] .sucesso-tique {
  animation: none;
  stroke-dashoffset: 0;
}
.rsvp-sucesso[data-lembrete="sim"] { display: flex; flex-direction: column; }
.rsvp-sucesso[data-lembrete="sim"] > .sucesso-selo { order: 1; }
.rsvp-sucesso[data-lembrete="sim"] > .sucesso-script { order: 2; }
.rsvp-sucesso[data-lembrete="sim"] > .rsvp-sucesso-texto { order: 3; }
.rsvp-sucesso[data-lembrete="sim"] > .rsvp-refazer { order: 4; }
.rsvp-sucesso[data-lembrete="sim"] > .sucesso-cartao { order: 5; }
.rsvp-sucesso[data-lembrete="sim"] > .rsvp-ponte { order: 6; }
.rsvp-sucesso[data-lembrete="sim"] .rsvp-refazer {
  align-self: center;
  min-height: 44px;
  margin: 0 0 var(--e5);
  padding: 0 var(--e5);
  border: 1px solid color-mix(in srgb, var(--navy) 28%, transparent);
  border-radius: 999px;
  font-size: 0.74rem;
  opacity: 1;
  text-decoration: none;
}