/* Capa. A foto original é preservada; o preto e branco é aplicado aqui. */
:root {
  color-scheme: dark;
  --cor-texto: #f7f6f1;
  --margem: clamp(24px, 4.5vw, 88px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; background: #171917; }
.capa {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  min-height: 440px;
  overflow: hidden;
  color: var(--cor-texto);
}
.capa__foto, .capa__sombra { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.capa__foto {
  object-fit: cover;
  /* Desloca a foto para a direita para centralizar o casal. */
  object-position: center center;
  transform: translateX(3%) scale(1.08);
  filter: grayscale(1);
}
.capa__sombra {
  background: linear-gradient(180deg, rgb(0 0 0 / 35%), transparent 27%, transparent 65%, rgb(0 0 0 / 40%));
}
.capa__nomes {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .18em;
  margin: 0;
  padding: max(20px, env(safe-area-inset-top)) var(--margem) 0;
  font-family: 'Bodoni MT', Didot, 'Times New Roman', serif;
  font-size: clamp(34px, 6.4vw, 124px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.055em;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgb(0 0 0 / 15%);
}
.capa__e { font-style: italic; font-size: 1.22em; line-height: .9; }
.capa__rodape {
  position: absolute;
  right: var(--margem);
  bottom: max(30px, env(safe-area-inset-bottom));
  left: var(--margem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.capa__data {
  display: grid;
  gap: 5px;
  padding-bottom: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.35;
}
.capa__monograma {
  display: block;
  width: clamp(85px, 10vw, 150px);
  height: auto;
  /* O próprio PNG contém o monograma branco com fundo transparente. */
}
@media (max-width: 600px) {
  :root { --margem: 20px; }
  .capa__nomes { padding-top: max(28px, env(safe-area-inset-top)); font-size: 8.1vw; gap: .2em; }
  .capa__rodape { bottom: max(24px, env(safe-area-inset-bottom)); }
  .capa__monograma { width: 98px; }
  .capa__data { font-size: 12px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .capa { min-height: 320px; }
  .capa__nomes { font-size: 7vw; }
  .capa__monograma { width: 85px; }
  .capa__rodape { bottom: 16px; }
}

/* Boas-vindas: fundo claro e galeria inspirados na referência. */
.boas-vindas {
  background: #eeede6;
  color: #191919;
  color-scheme: light;
  padding: clamp(48px, 5vw, 80px) var(--margem) 32px;
}
.boas-vindas__conteudo { max-width: 1160px; margin-inline: auto; }
.boas-vindas__texto {
  max-width: 1080px;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
  text-wrap: pretty;
}
.boas-vindas__galeria {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 4vw, 64px);
  margin: clamp(32px, 4vw, 56px) auto 24px;
}
.boas-vindas__galeria img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 65%;
}
.boas-vindas__galeria .boas-vindas__noite { object-position: center bottom; }
.boas-vindas__monograma { display: block; width: 100px; height: auto; margin: 24px auto 0; }
@media (max-width: 600px) {
  .boas-vindas { padding-top: 40px; padding-bottom: 24px; }
  .boas-vindas__texto { font-size: 14px; line-height: 1.75; }
  .boas-vindas__galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
  .boas-vindas__monograma { width: 88px; }
}

/* Contagem regressiva integrada à capa, acima dos detalhes no celular. */
[hidden] { display: none !important; }
.contagem {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 40px);
  text-align: center;
  color: var(--cor-texto);
  text-shadow: 0 2px 12px rgb(0 0 0 / 70%);
}
.contagem__unidades { display: flex; align-items: center; }
.contagem__unidade { min-width: 68px; padding: 0 14px; }
.contagem__unidade + .contagem__unidade { border-left: 1px solid rgb(247 246 241 / 40%); }
.contagem__numero {
  display: block;
  font: 400 clamp(28px, 2.8vw, 44px)/1.1 'Bodoni MT', Didot, 'Times New Roman', serif;
  font-variant-numeric: tabular-nums;
}
.contagem__rotulo {
  display: block;
  margin-top: 7px;
  font: 400 9px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.contagem__mensagem {
  margin: 0;
  font: italic 400 clamp(24px, 2.6vw, 38px)/1.2 'Bodoni MT', Didot, 'Times New Roman', serif;
}
@media (max-width: 600px) {
  .contagem { bottom: 154px; }
  .contagem__unidade { min-width: 61px; padding-inline: 10px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .contagem { bottom: 24px; }
  .contagem__unidade { min-width: 58px; padding-inline: 10px; }
}

/* Seção 3: os pets como testemunhas do nosso amor. */
.testemunhas { background: #000; color: #f7f6f1; padding: clamp(32px, 4vw, 64px) var(--margem); }
.testemunhas__conteudo {
  max-width: 1080px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 88px);
  align-items: stretch;
}
.testemunhas__foto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center bottom; }
.testemunhas__texto { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px 0 12px; min-width: 0; }
.testemunhas__titulo {
  margin: 0;
  width: 100%;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(28px, 4vw, 60px);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.testemunhas__monograma { display: block; width: clamp(90px, 10vw, 140px); height: auto; margin-top: 48px; }
@media (max-width: 600px) {
  .testemunhas { padding: 28px 20px 36px; }
  .testemunhas__conteudo { grid-template-columns: 1fr; gap: 30px; }
  .testemunhas__foto { max-width: 400px; margin-inline: auto; }
  .testemunhas__texto { padding: 0; }
  .testemunhas__titulo { text-align: center; font-size: clamp(34px, 10vw, 60px); }
  .testemunhas__monograma { width: 100px; margin-top: 36px; }
}

/* Seção 4: informações do casamento e mapa da cerimônia. */
.casamento { background: #eeede6; color: #191919; color-scheme: light; padding: clamp(48px, 6vw, 90px) var(--margem) clamp(48px, 6vw, 80px); }
.casamento__conteudo { max-width: 1160px; margin-inline: auto; }
.casamento__detalhes { display: grid; grid-template-columns: 1fr 1.8fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.casamento__titulo { margin: 0; font: 400 clamp(28px, 3.5vw, 50px)/1.08 'Bodoni MT', Didot, 'Times New Roman', serif; letter-spacing: -.045em; text-transform: uppercase; }
.casamento__informacoes { font-family: Arial, Helvetica, sans-serif; }
.casamento__item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 22px; padding: 30px 0; }
.casamento__item:first-child { padding-top: 0; }
.casamento__item + .casamento__item { border-top: 1px solid #a6a59f; }
.casamento__item img { margin-top: 3px; width: 36px; height: 36px; }
.casamento__item h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; }
.casamento__item p { margin: 0; font-size: 16px; line-height: 1.6; }
.casamento__item p + p { margin-top: 16px; }
.casamento__monograma { display: block; width: 100px; height: auto; margin: 32px auto 0; }
.cerimonia__cabecalho { position: relative; display: flex; justify-content: center; align-items: center; min-height: 96px; }
.cerimonia__cabecalho img { position: absolute; left: 0; width: 90px; height: auto; }
.cerimonia__cabecalho h2 { margin: 0; font: 400 clamp(34px, 5.3vw, 72px)/1.1 Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: -.055em; }
.cerimonia__texto { margin: 36px auto 32px; text-align: center; font: 400 16px/1.7 Arial, Helvetica, sans-serif; text-wrap: pretty; }
.cerimonia__mapa { display: block; width: 100%; height: 450px; border: 0; background: #deddd6; }
@media (max-width: 600px) {
  .casamento { padding: 44px 20px; }
  .casamento__detalhes { grid-template-columns: 1fr; gap: 32px; }
  .casamento__titulo { text-align: center; font-size: 34px; }
  .casamento__item { gap: 16px; padding-block: 24px; }
  .casamento__item h3 { font-size: 18px; }
  .casamento__item p { font-size: 14px; }
  .casamento__monograma { width: 80px; margin: 28px auto 0; }
  .cerimonia__cabecalho { min-height: 72px; }
  .cerimonia__cabecalho img { width: 60px; }
  .cerimonia__cabecalho h2 { font-size: clamp(28px, 8vw, 42px); }
  .cerimonia__texto { font-size: 14px; margin-top: 24px; }
  .cerimonia__mapa { height: 360px; }
}

/* Confirmação de presença. */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.presenca { background: #000; color: var(--cor-texto); padding-top: clamp(48px, 7vw, 96px); }
.presenca__conteudo { width: min(720px, calc(100% - 40px)); margin-inline: auto; padding-bottom: 64px; }
.presenca h2 { margin: 0 0 30px; text-align: center; text-transform: uppercase; font: 400 clamp(32px, 4.6vw, 60px)/1.05 'Bodoni MT', Didot, 'Times New Roman', serif; letter-spacing: -.04em; }
.presenca form { font: 400 14px/1.5 Arial, Helvetica, sans-serif; }
.presenca__nota { text-align: center; color: #c9c6be; margin: 0 0 36px; }
.presenca__campo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; min-width: 0; }
.presenca label, .presenca legend { font-size: 14px; }
.presenca input:not([type=radio]), .presenca select, .presenca textarea { width: 100%; min-width: 0; border: 1px solid #68665f; border-radius: 0; background: #111; color: #f7f6f1; padding: 13px 12px; font: inherit; min-height: 48px; }
.presenca textarea { resize: vertical; }
.presenca input:focus-visible, .presenca select:focus-visible, .presenca textarea:focus-visible, .presenca button:focus-visible { outline: 2px solid #eeede6; outline-offset: 3px; }
.presenca input[type=radio] { accent-color: #eeeae0; width: 18px; height: 18px; margin: 0; }
.presenca__resposta { padding: 0; margin: 0 0 28px; border: 0; }
.presenca__resposta legend { margin-bottom: 12px; }
.presenca__resposta label { display: inline-flex; align-items: center; gap: 10px; margin-right: 30px; padding-block: 5px; cursor: pointer; }
.presenca__detalhes { border: 0; padding: 0; margin: 0; transition: opacity .2s; }
.presenca__detalhes:disabled { opacity: .4; }
.presenca__detalhes:disabled input, .presenca__detalhes:disabled select, .presenca__detalhes:disabled textarea { cursor: not-allowed; }
.presenca__colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.presenca__telefone { display: grid; grid-template-columns: minmax(150px, .9fr) minmax(0, 1.3fr); gap: 12px; }
.presenca__status { min-height: 1.5em; margin: 0 0 12px; color: #e7c8bc; }
.presenca__enviar { display: block; width: 100%; padding: 16px; border: 1px solid #eeede6; background: #eeede6; color: #151515; font: 400 12px/1.5 Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .16em; cursor: pointer; }
.presenca__enviar:hover { background: #d9d6cd; }
.presenca__enviar:disabled { opacity: .6; cursor: wait; }
.presenca__assinatura { background: #000; padding: 24px 20px; }
.presenca__assinatura img { display: block; width: 100px; height: auto; margin: auto; }
.presenca-modal { width: min(440px, calc(100% - 40px)); border: 1px solid #d2cec3; background: #eeede6; color: #191919; padding: 46px 28px 28px; text-align: center; }
.presenca-modal::backdrop { background: rgb(0 0 0 / 75%); }
.presenca-modal h2 { margin: 0 0 20px; font: 400 32px/1.15 'Bodoni MT', Didot, 'Times New Roman', serif; }
.presenca-modal p { font: 400 15px/1.7 Arial, Helvetica, sans-serif; }
.presenca-modal__link { display: block; text-decoration: underline; text-underline-offset: 4px; }
.presenca-modal__fechar { position: absolute; right: 10px; top: 6px; background: none; border: 0; font-size: 30px; cursor: pointer; color: #191919; }
.presenca-modal__ok { margin-top: 14px; padding: 12px 28px; background: #191919; color: #fff; border: 0; cursor: pointer; }
@media (max-width: 600px) {
 .presenca__colunas { grid-template-columns: 1fr; }
 .presenca__telefone { grid-template-columns: 1fr; }
 .presenca input:not([type=radio]), .presenca select, .presenca textarea { font-size: 16px; }
}

/* Lista de presentes: fotos quadradas e cartões sobre fundo claro. */
.presentes { padding: clamp(48px, 6vw, 84px) var(--margem) 32px; background: #eeede6; color: #191919; color-scheme: light; scroll-margin-top: 24px; }
.presentes__conteudo { max-width: 1040px; margin-inline: auto; }
.presentes h2 { margin: 0 0 24px; text-align: center; text-transform: uppercase; font: 400 clamp(34px, 4.6vw, 60px)/1.1 'Bodoni MT', Didot, 'Times New Roman', serif; letter-spacing: -.04em; }
.presentes__introducao { margin: 0 auto 40px; text-align: center; font: 400 14px/1.7 Arial, Helvetica, sans-serif; text-wrap: pretty; }
.presentes__galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 44px; }
.presente { display: flex; flex-direction: column; border: 1px solid #b6bcae; min-width: 0; }
.presente__imagem { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.presente__conteudo { display: flex; flex: 1; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px 18px; }
.presente h3 { margin: 0 0 20px; font: 400 16px/1.45 Arial, Helvetica, sans-serif; }
.presente__valor { margin: auto 0 16px; font: 600 16px/1.3 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }
.presente__botao { display: block; width: 100%; border: 1px solid #606c56; padding: 12px 8px; color: #191919; text-decoration: none; text-transform: uppercase; font: 400 11px/1.5 Arial, Helvetica, sans-serif; letter-spacing: .13em; transition: background .15s, color .15s; }
.presente__botao:hover { background: #191919; color: #eeede6; }
.presente__botao:focus-visible { outline: 2px solid #191919; outline-offset: 4px; }
.presentes__monograma { display: block; width: 100px; height: auto; margin: 40px auto 0; }
@media (max-width: 600px) {
 .presentes { padding: 44px 20px 24px; }
 .presentes__galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
 .presente__conteudo { padding: 14px 10px; }
 .presente h3 { font-size: 13px; margin-bottom: 16px; }
 .presente__valor { font-size: 14px; }
 .presente__botao { font-size: 10px; letter-spacing: .08em; }
}
@media (max-width: 330px) { .presentes__galeria { grid-template-columns: 1fr; } }

/* Manual dos convidados, após a cerimônia. */
.manual { background: #000; color: #f7f6f1; padding: clamp(48px, 6vw, 80px) var(--margem) 32px; }
.manual__conteudo { max-width: 1160px; margin-inline: auto; }
.manual h2 { margin: 0 0 38px; font: 400 clamp(28px, 3.3vw, 46px)/1.15 'Bodoni MT', Didot, 'Times New Roman', serif; text-transform: uppercase; letter-spacing: -.04em; }
.manual__principal { display: grid; grid-template-columns: 1.8fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.manual__orientacoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.manual__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; }
.manual__lista li { display: flex; align-items: center; gap: 18px; font: 400 15px/1.55 Arial, Helvetica, sans-serif; }
.manual__lista img { flex: 0 0 36px; width: 36px; height: 40px; }
.manual__lista--direita { border-left: 1px solid #68665f; padding-left: 32px; }
.manual__lista--direita li { flex-direction: row-reverse; justify-content: space-between; }
.manual__retrato { display: block; width: 100%; height: auto; aspect-ratio: 3 / 5; object-fit: cover; object-position: 50% 45%; }
.manual__presentes { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 8vw, 120px); align-items: center; margin-top: 70px; }
.manual__convite h3 { margin: 0 0 32px; padding-bottom: 28px; max-width: 270px; border-bottom: 1px solid #b4b2ab; font: 400 clamp(32px, 4vw, 54px)/1 'Bodoni MT', Didot, 'Times New Roman', serif; text-transform: uppercase; letter-spacing: -.035em; }
.manual__convite p { margin: 0; font: 400 17px/1.65 Arial, Helvetica, sans-serif; text-wrap: pretty; }
.manual__convite a { display: inline-block; color: inherit; font: 400 13px/1.5 Arial, Helvetica, sans-serif; margin-top: 24px; text-underline-offset: 6px; }
.manual__convite a:focus-visible { outline: 2px solid white; outline-offset: 6px; }
.manual__beijo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; }
.manual__monograma { display: block; width: 120px; height: auto; margin: 64px auto 0; }
@media (max-width: 900px) {
 .manual__principal { grid-template-columns: 1fr; }
 .manual__retrato { width: min(100%, 420px); margin-inline: auto; aspect-ratio: 2 / 3; }
}
@media (max-width: 600px) {
 .manual { padding: 44px 20px 28px; }
 .manual h2 { text-align: center; font-size: 30px; }
 .manual__orientacoes { gap: 16px; }
 .manual__lista { gap: 24px; }
 .manual__lista li { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13px; }
 .manual__lista--direita { padding-left: 16px; }
 .manual__lista--direita li { flex-direction: column; }
 .manual__presentes { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
 .manual__convite p { font-size: 15px; }
 .manual__convite h3 { font-size: 38px; }
 .manual__monograma { margin-top: 40px; width: 100px; }
}

.presentes__acesso { display: block; width: max-content; margin-inline: auto; }
.presentes__acesso:focus-visible { outline: 2px solid #191919; outline-offset: 6px; }

/* Contribuição sem valor fixo. */
.presente__imagem--livre { object-fit: contain; padding: 20%; background: #e4e3da; }
.presente--livre .presente__botao { margin-top: auto; }

.presentes__status { text-align: center; font: 400 14px/1.6 Arial, sans-serif; }

.presente__botao:disabled { opacity: .45; cursor: not-allowed; background: transparent; color: #191919; }