/* Paleta e configurações gerais */
:root {
  --creme: #f4eee4;
  --creme-escuro: #e5dccf;
  --branco: #fffaf2;
  --verde: #163f59;
  --verde-medio: #58788d;
  --salvia: #91aabb;
  --salvia-clara: #dbe6eb;
  --dourado: #b68b38;
  --rose: #c7a45b;
  --texto: #2d4350;
  --sombra: 0 18px 50px rgba(22, 63, 89, 0.14);
  --serifada: Georgia, "Times New Roman", serif;
  --limpa: "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--texto);
  background: var(--creme);
  font-family: var(--limpa);
  line-height: 1.6;
}
body.modal-aberto { overflow: hidden; }
button, a { font: inherit; }

/* Capa */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 60px 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.82) 0 22%, transparent 58%),
    linear-gradient(145deg, #f5eee3 0%, #e5edf0 100%);
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(178, 138, 90, .28);
  border-radius: 50%;
}
.hero::before { top: -125px; left: calc(50% - 115px); }
.hero::after { bottom: -185px; left: calc(50% - 115px); width: 360px; height: 360px; transform: translateX(-65px); }
.hero__conteudo { position: relative; z-index: 1; max-width: 760px; animation: surgir .9s ease-out both; }
.monograma {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  margin: 0 auto 28px;
  border: 1px solid var(--dourado);
  border-radius: 50%;
  color: var(--verde);
  background: rgba(255,253,249,.55);
  font-family: var(--serifada);
  font-size: 25px;
  letter-spacing: 3px;
  box-shadow: inset 0 0 0 6px rgba(178,138,90,.06);
}
.monograma span, h1 span { color: var(--dourado); font-style: italic; }
.sobretitulo {
  margin: 0 0 12px;
  color: var(--dourado);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
}
h1, h2, blockquote { font-family: var(--serifada); font-weight: 400; }
h1 { margin: 0; color: var(--verde); font-size: clamp(46px, 8vw, 82px); line-height: 1.05; letter-spacing: -2px; }
.ornamento { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 24px 0 16px; color: var(--rose); font-size: 20px; }
.ornamento span { width: 52px; height: 1px; background: var(--dourado); }
.data { margin: 0; color: var(--verde-medio); font-family: var(--serifada); font-size: 20px; letter-spacing: 2px; }
.hero__texto { max-width: 600px; margin: 24px auto 30px; color: #566d7a; font-size: 16px; }
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 51px;
  padding: 14px 24px;
  border: 0;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.botao:hover { transform: translateY(-2px); }
.botao:focus-visible, .modal__fechar:focus-visible { outline: 3px solid rgba(178,138,90,.45); outline-offset: 3px; }
.botao--principal { color: white; background: var(--verde); box-shadow: 0 9px 22px rgba(22,63,89,.22); letter-spacing: .5px; }
.botao--principal:hover { background: #0e3048; box-shadow: 0 12px 28px rgba(22,63,89,.3); }

/* Folhagens decorativas feitas somente com CSS */
.folha { position: absolute; width: 180px; height: 320px; opacity: .22; transform: rotate(-25deg); }
.folha::before, .folha::after { content: ""; position: absolute; inset: 0; border-left: 2px solid var(--verde-medio); border-radius: 50%; }
.folha::after { background: repeating-radial-gradient(ellipse at 10% 50%, transparent 0 17px, rgba(88,120,141,.27) 18px 25px, transparent 26px 41px); }
.folha--esquerda { left: -45px; bottom: -80px; }
.folha--direita { right: -40px; top: -80px; transform: rotate(155deg); }

/* Lista */
.secao-presentes { padding: 110px 24px 120px; }
.cabecalho-secao { max-width: 680px; margin: 0 auto 55px; text-align: center; }
.cabecalho-secao h2 { margin: 0 0 16px; color: var(--verde); font-size: clamp(34px, 5vw, 52px); line-height: 1.15; }
.cabecalho-secao > p:last-child { margin: 0; color: #637986; }
.grade-presentes { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cartao-presente {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 385px;
  overflow: hidden;
  padding: 34px 30px 30px;
  border: 1px solid rgba(88,120,141,.2);
  border-radius: 8px;
  background: var(--branco);
  box-shadow: 0 6px 22px rgba(22,63,89,.06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.cartao-presente::after { content: ""; position: absolute; width: 90px; height: 90px; right: -45px; top: -45px; border-radius: 50%; background: var(--salvia-clara); opacity: .6; }
.cartao-presente:hover { transform: translateY(-7px); border-color: rgba(178,138,90,.38); box-shadow: var(--sombra); }
.cartao-presente__icone { width: 66px; height: 66px; display: grid; place-items: center; margin-bottom: 24px; border: 1px solid rgba(178,138,90,.3); border-radius: 50%; background: #f8f1e5; font-size: 30px; }
.cartao-presente h3 { margin: 0 0 10px; color: var(--verde); font-family: var(--serifada); font-size: 25px; font-weight: 400; line-height: 1.2; }
.cartao-presente__descricao { flex: 1; margin: 0 0 20px; color: #657985; font-size: 14px; }
.cartao-presente__rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid #ece8df; }
.cartao-presente__valor { color: var(--verde); font-family: var(--serifada); font-size: 22px; white-space: nowrap; }
.cartao-presente .botao { min-height: 43px; padding: 10px 17px; color: var(--verde); border: 1px solid var(--verde); background: transparent; }
.cartao-presente .botao:hover { color: white; background: var(--verde); }

/* Mensagem e rodapé */
.mensagem-final { padding: 95px 24px; text-align: center; color: white; background: var(--verde); }
.mensagem-final__ramo { color: var(--dourado); font-size: 35px; }
.mensagem-final blockquote { max-width: 820px; margin: 20px auto; font-size: clamp(27px, 4vw, 43px); line-height: 1.35; }
.mensagem-final p { margin: 28px 0 0; color: #d5e0e5; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; }
footer { padding: 25px; text-align: center; color: #6e7f88; background: #e6ded2; font-size: 13px; }
footer span { color: var(--rose); }
.footer__lead { display: inline-block; margin-top: 7px; color: #7c8d96; font-size: 11px; letter-spacing: .2px; text-decoration: none; transition: color .2s ease; }
.footer__lead:hover, .footer__lead:focus-visible { color: var(--verde); text-decoration: underline; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; padding: 20px; }
.modal.aberto { display: grid; }
.modal__fundo { position: absolute; inset: 0; background: rgba(12,37,53,.74); backdrop-filter: blur(5px); animation: aparecer .25s ease both; }
.modal__conteudo {
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 40px 44px 35px;
  border: 1px solid rgba(178,138,90,.35);
  border-radius: 10px;
  text-align: center;
  background: var(--branco);
  box-shadow: 0 28px 80px rgba(0,0,0,.25);
  animation: modalEntrar .35s cubic-bezier(.2,.8,.2,1) both;
}
.modal__fechar { position: absolute; top: 12px; right: 15px; width: 40px; height: 40px; border: 0; color: var(--verde-medio); background: transparent; cursor: pointer; font-family: Arial, sans-serif; font-size: 32px; line-height: 1; }
.modal h2 { margin: 0 25px 4px; color: var(--verde); font-size: 30px; line-height: 1.2; }
.modal__valor { margin: 0 0 22px; color: var(--dourado); font-family: var(--serifada); font-size: 25px; }
.qrcode { width: 190px; height: 190px; display: grid; place-items: center; margin: 0 auto 18px; padding: 10px; border: 1px solid var(--creme-escuro); border-radius: 6px; background: white; }
.qrcode img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qrcode__placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; color: #718592; border: 1px dashed var(--salvia); background: #f1f5f6; font-size: 12px; line-height: 1.35; }
.qrcode__placeholder[hidden] { display: none; }
.qrcode__placeholder span { color: var(--salvia); font-size: 45px; }
.qrcode__placeholder p { margin: 6px 0 0; }
.modal__instrucao { max-width: 370px; margin: 0 auto 18px; color: #627987; font-size: 14px; }
.modal .botao { width: 100%; }
.botao--pix { color: white; background: var(--verde); }
.botao--pix.copiado { background: var(--salvia); }
.botao--whatsapp { margin-top: 11px; color: var(--verde); border: 1px solid var(--salvia); background: #edf3f5; font-size: 14px; }
.modal__nota { margin: 15px 0 0; color: #83929a; font-size: 11px; }

@keyframes surgir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalEntrar { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 900px) {
  .grade-presentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .hero { min-height: 92vh; padding: 50px 20px; }
  .monograma { width: 92px; height: 92px; margin-bottom: 22px; }
  h1 { font-size: 48px; }
  .data { font-size: 17px; }
  .hero__texto { font-size: 15px; }
  .secao-presentes { padding: 80px 18px; }
  .grade-presentes { grid-template-columns: 1fr; gap: 16px; }
  .cartao-presente { min-height: 335px; padding: 28px 24px 24px; }
  .mensagem-final { padding: 75px 22px; }
  .modal { padding: 10px; }
  .modal__conteudo { max-height: calc(100vh - 20px); padding: 35px 22px 25px; }
  .qrcode { width: 170px; height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}