:root {
  --creme: #f4f2ee; --vinho: #420000; --vinho-2: #5c0a0a; --verde: #45522a; --verde-2: #5b6b3a;
  --texto: #2b2b2b; --suave: #6b6b6b; --arco: #cdd0c4; --raio: 24px;
  --sombra: 0 10px 30px rgb(0 0 0 / .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--texto); font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 18px; -webkit-font-smoothing: antialiased; }
h2 { font-family: 'Playfair Display', serif; font-weight: 400; margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
/* Textura de papel sobre a página inteira */
body::after { content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:focus-visible { outline: 3px solid var(--verde-2); outline-offset: 3px; }
.conteudo { max-width: 560px; margin: 0 auto; }
main { padding-bottom: 100px; }
[hidden] { display: none !important; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 22px; padding: 14px 32px;
  font-weight: 700; font-size: 18px; text-transform: uppercase; text-decoration: none; letter-spacing: .02em; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.btn:disabled { opacity: .6; transform: none; box-shadow: none; cursor: wait; }
.btn-vinho { background: var(--vinho); color: #fff; }
.btn-verde { background: var(--verde); color: #fff; }
.btn-branco { background: #fff; color: var(--texto); }
.btn-contorno { background: transparent; color: var(--verde); border: 2px solid currentColor; padding: 10px 20px; font-size: 16px; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* HERO */
.hero { position: relative; padding: 64px clamp(20px, 8vw, 40px) 56px; overflow: hidden; isolation: isolate; }
.arco { position: absolute; top: 40px; right: 32px; width: 70%; height: 72%; border-top: 3px solid var(--arco); border-right: 3px solid var(--arco);
  border-top-right-radius: 100% 45%; pointer-events: none; }
.nomes { font-family: 'Italiana', serif; color: var(--vinho); font-size: clamp(64px, 19vw, 104px); line-height: .95; margin: 120px 0 0; font-weight: 400; }
.nomes .e { display: flex; align-items: center; gap: 8px; }
.nomes .amp { font-family: 'Playfair Display', serif; font-size: .85em; }
.nomes .script { font-family: 'Mrs Saint Delafield', cursive; color: var(--verde); font-size: .8em; }
.celebre { margin: 56px 0 6px; font-size: clamp(14px, 4vw, 19px); text-transform: uppercase; letter-spacing: .16em; }
.data { font-family: 'Playfair Display', serif; color: var(--vinho); font-size: 40px; margin: 0; }
.hora { color: var(--verde); font-size: 22px; text-transform: uppercase; margin: 4px 0 16px; }
.ornamento { display: flex; align-items: center; gap: 12px; max-width: 240px; margin: 0 0 16px; color: var(--vinho); font-size: 11px; }
.ornamento::before, .ornamento::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--vinho)); opacity: .5; }
.ornamento::after { transform: scaleX(-1); }
footer .ornamento { margin: 0 auto 8px; }
.endereco { font-size: 15px; line-height: 1.2; text-transform: uppercase; max-width: 80%; margin: 0; }
.traje { margin: 14px 0 0; font-size: 17px; }
.traje b { color: var(--vinho); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
.traje span { color: var(--suave); }
.prazo { margin-top: 24px; padding: 16px; border-radius: 16px; background: #e8e8df; max-width: min(380px, calc(100% - 56px)); }
.prazo-titulo { margin: 0 0 12px; color: var(--verde); font-size: 17px; }
.prazo-titulo b { color: var(--vinho); }
.relogio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; font-size: 13px; text-transform: uppercase; color: var(--suave); }
.relogio span { background: #fff; border-radius: 10px; padding: 8px 4px; }
.relogio b { display: block; font-family: 'Playfair Display', serif; font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--vinho); font-variant-numeric: tabular-nums; }
.prazo:has(.relogio[hidden]) .prazo-titulo { margin: 0; color: var(--vinho); font-weight: 600; }
.aliancas { display: block; margin: 0 auto; width: 120px; height: auto; }
/* Ramo na ponta do arco (como na arte do convite), acompanha o arco em qualquer tela */
.folha { position: absolute; right: 0; bottom: 0; width: clamp(60px, 16vw, 90px); height: auto; transform: translate(35%, 55%); }

/* PRESENTES */
.presentes { background: var(--verde); color: #fff; padding: 72px 16px 56px; text-align: center;
  border-radius: 50% 50% 0 0 / clamp(40px, 10vw, 140px) clamp(40px, 10vw, 140px) 0 0; }
.presentes h2, .vinho h2 { font-size: clamp(32px, 9vw, 48px); margin: 8px 0 12px; }
.sub { margin: 0 auto 32px; max-width: 420px; opacity: .9; }
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cartao { border: none; border-radius: var(--raio); padding: 3px; transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 14px rgb(0 0 0 / .15); }
.cartao:hover, .cartao:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 28px rgb(0 0 0 / .28); }
.cartao span { position: relative; overflow: hidden; display: block; background: #fffdf9; border-radius: calc(var(--raio) - 3px); padding: 32px 4px;
  color: var(--suave); font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: .08em; }
.cartao span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .8) 50%, transparent 65%);
  translate: -100% 0; transition: translate .7s ease; }
.cartao:hover span::after, .cartao:focus-visible span::after { translate: 100% 0; }
.cartao strong { display: block; margin-top: 4px; color: var(--vinho); font-size: clamp(22px, 7vw, 34px); font-weight: 700; letter-spacing: 0; }
.cartao.bronze { background: linear-gradient(135deg, #7a4a2c, #d9a47a 45%, #8c5a3a 70%, #c99268); }
.cartao.prata { background: linear-gradient(135deg, #7d7d7d, #eeeeee 45%, #9a9a9a 70%, #d8d8d8); }
.cartao.ouro { background: linear-gradient(135deg, #8f6b1f, #f3d98c 45%, #a8822e 70%, #e3c06a); }
.vinho .cartao strong { color: var(--verde); }
.outro { margin-top: 24px; background: none; border: none; color: #fff; text-decoration: underline; text-underline-offset: 4px; font-size: 17px; }

/* LOCAL */
.local iframe { display: block; width: 100%; height: 340px; border: 0; background: #e5e3dc; }
.local-info { padding: 32px 24px; }
.local h2 { color: var(--vinho); font-size: 32px; margin-bottom: 12px; }
.local-info p { color: var(--vinho); font-weight: 700; text-transform: uppercase; margin: 0; line-height: 1.2; }
footer { text-align: center; padding: 32px 16px 0; color: var(--suave); }
footer .script { font-family: 'Mrs Saint Delafield', cursive; font-size: 44px; color: var(--vinho); display: block; }

/* BOTÃO FLUTUANTE */
.flutuante { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10;
  padding: 15px 32px; font-size: 20px; white-space: nowrap; box-shadow: 0 6px 20px rgb(0 0 0 / .3); }
.flutuante:hover { transform: translateX(-50%) translateY(-2px); }
.flutuante.pulsar { animation: entrar .6s 1.8s both, pulso 2.8s 3s infinite; }
.flutuante.confirmado { background: #fff; color: var(--vinho); box-shadow: inset 0 0 0 2px var(--vinho), 0 6px 20px rgb(0 0 0 / .15); animation: entrar .6s 1.8s both; }
.flutuante.confirmado:disabled { opacity: 1; cursor: default; }
/* Janela "Tem certeza?" (cartão centralizado por cima do formulário) */
dialog.alerta { width: min(92vw, 440px); height: fit-content; max-height: 92vh; margin: auto; padding: 28px 24px; border-radius: 24px; background: #fff; text-align: center; }
.alerta h2 { font-family: inherit; font-weight: 700; font-size: 26px; color: var(--vinho); margin-bottom: 16px; }
.resumo { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 16px; padding: 14px; border-radius: 12px; background: var(--creme); text-align: left; font-size: 16px; }
.resumo dt { color: var(--suave); }
.resumo dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.aviso-final { margin: 0 0 16px; line-height: 1.35; }
.alerta .btn { display: flex; width: 100%; margin-top: 10px; }
@keyframes pulso { 0% { box-shadow: 0 6px 20px rgb(0 0 0 / .3), 0 0 0 0 rgb(66 0 0 / .45); } 70%, 100% { box-shadow: 0 6px 20px rgb(0 0 0 / .3), 0 0 0 16px rgb(66 0 0 / 0); } }

/* DIALOGS */
dialog { border: none; padding: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: var(--vinho); color: var(--texto); }
dialog[open] { animation: surgir .25s ease-out; }
@keyframes surgir { from { opacity: 0; transform: translateY(16px); } }
html:has(dialog[open]) { overflow: hidden; } /* com janela aberta, só ela rola (evita 2 barras de rolagem) */
dialog::backdrop { background: rgb(0 0 0 / .6); }
.janela { max-width: 560px; margin: 0 auto; padding: 56px 16px 48px; }
.caixa { background: #fff; border-radius: 28px; padding: 32px 24px; }
.caixa h2 { font-family: inherit; font-weight: 700; font-size: 30px; text-align: center; margin-bottom: 24px; }
.fechar:focus-visible { outline-color: #fff; }
.fechar { position: fixed; top: 8px; right: 12px; z-index: 1; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; padding: 8px 12px; }
fieldset { border: none; padding: 0; margin: 0 0 22px; min-width: 0; }
legend, label.campo { display: block; margin-bottom: 8px; line-height: 1.2; padding: 0; }
.op { display: flex; align-items: center; gap: 10px; margin: 8px 0; cursor: pointer; }
.op input { width: 22px; height: 22px; accent-color: var(--verde); margin: 0; }
input[type=text], input[type=tel], input[type=number], textarea.recado { width: 100%; font: inherit; padding: 12px; border: 2px solid #444; border-radius: 8px; background: #fff; }
textarea.recado { resize: vertical; min-height: 88px; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* só robôs preenchem */
input[type=text]:disabled { background: #f0f0f0; border-color: #ccc; }
.erro { color: #b00020; font-weight: 600; min-height: 1.2em; text-align: center; }
.caixa .btn { display: flex; width: 100%; margin-top: 12px; font-size: 20px; }
.vinho { color: #fff; text-align: center; }
.vinho p { margin: 0 0 28px; }
.vinho .btn-branco { margin-top: 32px; }

/* PIX */
.valor-campo { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px; font-size: 36px; font-weight: 700; color: var(--vinho); }
.valor-campo input { width: 170px; font-size: 36px; font-weight: 700; color: var(--vinho); text-align: center; padding: 4px 8px; }
.pix-grid { display: grid; gap: 16px; }
.qr { display: none; text-align: center; font-size: 15px; color: var(--suave); }
.qr svg { width: 220px; height: auto; display: block; margin: 0 auto 8px; }
.passos { padding-left: 22px; margin: 0 0 12px; line-height: 1.4; }
.pix-codigo { width: 100%; font: 13px/1.3 monospace; padding: 10px; border: 2px solid #ccc; border-radius: 8px; resize: none; word-break: break-all; color: var(--suave); }
.ok { color: var(--verde); }
.aviso { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 99px; background: var(--verde); color: #fff;
  font-weight: 600; font-size: 17px; white-space: nowrap; box-shadow: 0 10px 30px rgb(0 0 0 / .3);
  opacity: 0; translate: -50% 20px; pointer-events: none; transition: opacity .25s, translate .25s; }
.aviso.mostrar { opacity: 1; translate: -50% 0; }
.btn.copiado { background: var(--verde-2); }

/* ANIMAÇÕES */
@keyframes subir { from { opacity: 0; translate: 0 18px; } }
@keyframes entrar { from { opacity: 0; translate: 0 24px; } }
@keyframes desenhar { 0% { clip-path: inset(0 100% 100% 0); } 99% { clip-path: inset(0 0 0 0); } 100% { clip-path: none; } }
@keyframes brotar { from { opacity: 0; rotate: -12deg; scale: .85; } }
.arco { animation: desenhar 1.6s .2s cubic-bezier(.6, 0, .3, 1) both; }
.folha { transform-origin: 50% 100%; animation: brotar 1s 1.6s ease-out both; }
.nomes { animation: subir 1s .2s ease-out both; }
.nomes .e { animation: subir .9s .6s ease-out both; }
.info > * { animation: subir .8s ease-out both; }
.info > :nth-child(1) { animation-delay: .8s; } .info > :nth-child(2) { animation-delay: .9s; } .info > :nth-child(3) { animation-delay: 1s; }
.info > :nth-child(4) { animation-delay: 1.1s; } .info > :nth-child(5) { animation-delay: 1.2s; } .info > :nth-child(6) { animation-delay: 1.3s; }
.info > :nth-child(7) { animation-delay: 1.4s; } .info > :nth-child(8) { animation-delay: 1.5s; }
.js [data-revelar] { transition: opacity .8s ease, translate .8s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-revelar]:not(.visivel) { opacity: 0; translate: 0 28px; }

/* DESKTOP */
@media (min-width: 900px) {
  .conteudo { max-width: 1100px; padding: 0 48px; }
  .hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; max-width: 1200px; min-height: 100svh; padding: 64px 48px; }
  .hero .titulo { position: relative; padding: 80px 72px 64px 0; }
  .arco { top: 0; right: 0; width: 100%; height: 100%; border-top-right-radius: 100% 40%; }
  .nomes { margin: 0; font-size: clamp(96px, 9vw, 140px); }
  .info { border-left: 1px solid var(--arco); padding-left: 48px; }
  .celebre { margin-top: 0; }
  .data { font-size: clamp(44px, 4.2vw, 60px); white-space: nowrap; }
  .endereco { max-width: none; font-size: 17px; }
  .folha { width: 130px; transform: translate(45%, 55%); }
  .presentes { padding: 140px 16px 96px; }
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 820px; margin: 0 auto; }
  .local { padding: 88px 0 40px; }
  .local .conteudo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
  .local iframe { height: 440px; border-radius: var(--raio); box-shadow: var(--sombra); }
  .local-info { padding: 0; }
  .flutuante { left: auto; right: 32px; bottom: 32px; transform: none; font-size: 18px; padding: 16px 28px; }
  .flutuante:hover { transform: translateY(-2px); }
  dialog { background: rgb(66 0 0 / .96); }
  .janela { padding-top: 64px; }
  .pix-grid { grid-template-columns: 240px 1fr; align-items: center; }
  .qr { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-revelar]:not(.visivel) { opacity: 1; translate: none; }
}

/* REGISTRE O MOMENTO (página secreta das fotos da festa) */
.momento { padding: 40px 20px 48px; text-align: center; }
.momento header { position: relative; }
.folha-topo { width: 64px; height: auto; rotate: -20deg; }
.assinatura { font-family: 'Mrs Saint Delafield', cursive; color: var(--verde); font-size: 44px; margin: 0; line-height: 1; }
.momento h1 { font-family: 'Italiana', serif; font-weight: 400; color: var(--vinho); font-size: clamp(40px, 12vw, 68px); line-height: 1; margin: 4px 0 12px; }
.momento h2 { color: var(--vinho); font-size: 32px; margin: 40px 0 8px; }
.sub-momento { color: var(--suave); margin: 0 auto 16px; max-width: 420px; }
.bloqueado { margin-top: 32px; color: var(--vinho); font-weight: 600; font-size: 20px; }
.enviar { display: grid; gap: 8px; margin-top: 24px; padding: 24px 20px; border-radius: 24px; background: #fff; box-shadow: var(--sombra); text-align: left; }
.enviar label.campo { margin: 8px 0 0; }
.botao-foto { margin-top: 16px; padding: 18px; font-size: 20px; cursor: pointer; }
.botao-galeria { justify-content: center; padding: 14px; font-size: 17px; cursor: pointer; }
.status { min-height: 1.3em; margin: 4px 0 0; text-align: center; color: var(--verde); font-weight: 600; }
/* Mural: quadro com polaroids presas por fita, cada uma levemente inclinada */
.mural-secao { margin-top: 40px; padding: 28px 14px 32px; border-radius: 28px; background: #e8e8df; box-shadow: inset 0 0 0 1px rgb(69 82 42 / .12); }
.mural-secao .ornamento { margin: 0 auto 4px; }
.mural-secao h2 { margin-top: 0; }
.contador { margin: 0 0 12px; font-family: 'Mrs Saint Delafield', cursive; font-size: 32px; color: var(--verde); }
.mural { columns: 2 140px; column-gap: 14px; margin-top: 24px; text-align: left; }
.mural figure { position: relative; break-inside: avoid; margin: 0 0 22px; padding: 8px 8px 0; background: #fff; border-radius: 3px;
  box-shadow: 0 10px 22px rgb(0 0 0 / .14); rotate: var(--giro, 0deg); transition: rotate .3s, scale .3s, box-shadow .3s; }
.mural figure:hover, .mural figure:focus-within { rotate: 0deg; scale: 1.04; z-index: 1; box-shadow: 0 18px 34px rgb(0 0 0 / .22); }
.mural figure::before { content: ''; position: absolute; top: -11px; left: 50%; width: 64px; height: 22px; translate: -50% 0; rotate: var(--fita, 0deg);
  background: rgb(205 208 196 / .8); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.mural figure.nova { animation: cair .8s calc(var(--i, 0) * 90ms) cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes cair { from { opacity: 0; translate: 0 -60px; rotate: calc(var(--giro, 0deg) - 14deg); } }
.mural button { display: block; width: 100%; padding: 0; border: 0; background: #e5e3dc; }
.mural img { display: block; width: 100%; height: auto; }
.mural figcaption { display: flex; flex-direction: column; padding: 8px 4px 10px; text-align: center; }
.mural .frase { font-size: 14px; color: var(--texto); line-height: 1.2; }
.mural .autor { font-family: 'Mrs Saint Delafield', cursive; font-size: 26px; line-height: 1.1; color: var(--vinho); }
/* Modo telão */
dialog.telao { background: radial-gradient(circle at 50% 40%, #5c0a0a, #160000); }
.telao figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; margin: 0; padding: 48px 24px; }
.telao img { max-width: 92vw; max-height: 74vh; border: 12px solid #fff; border-bottom-width: 12px; box-shadow: 0 24px 60px rgb(0 0 0 / .55); rotate: -1.5deg; }
.telao figcaption { font-family: 'Mrs Saint Delafield', cursive; font-size: clamp(34px, 5vw, 60px); color: #fff; text-align: center; }
.telao-qr { position: fixed; right: 24px; bottom: 24px; padding: 10px; border-radius: 12px; background: #fff; color: var(--vinho); font-weight: 700; text-align: center; }
.telao-qr svg { display: block; width: 130px; height: auto; }
.telao-qr p { margin: 4px 0 0; }
@media (max-width: 700px) { .telao-qr { display: none; } }
dialog.foto-ampliada { background: rgb(0 0 0 / .94); }
.foto-ampliada img { display: block; max-width: 100%; max-height: 82vh; margin: 56px auto 12px; border-radius: 8px; }
.foto-ampliada p { margin: 0 16px 24px; color: #fff; text-align: center; }
@media (min-width: 900px) {
  .momento { max-width: 1000px; }
  .enviar { max-width: 560px; margin-inline: auto; }
  .mural { columns: 4 200px; column-gap: 22px; }
  .mural-secao { padding: 36px 32px 40px; }
}

/* Ícones de traço nos botões (herdam a cor do texto) */
.icone { width: 1.25em; height: 1.25em; flex: none; }