/* =========================================================================
   estatico.css — o cartão do convite estático (9:16) e a página /estatico/.
   O visual de cada modelo vem do modelos.css; aqui só a moldura do cartão
   e as peças que o livro não tem.
   ========================================================================= */

.cartao{
  position: relative;
  aspect-ratio: 9 / 16;
  container-type: inline-size;
  background: var(--papel-alto);
  color: var(--tinta);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 18px 40px -12px rgba(0,0,0,.35);
}
.cartao .pagina{ padding: 9cqi 8cqi; gap: 2.4cqi; font-size: 3.6cqi; }
.cartao .pagina__eyebrow{ font-size: 2.6cqi; letter-spacing: .26em; }
.cartao .pagina__centro{ gap: 3.6cqi; }
.cartao .pagina__nomes{ font-size: calc(16cqi * var(--nomes-escala)); }
.cartao .pagina__fio em::before{ font-size: 4.4cqi; }
.cartao .pagina__data{ font-size: 6.4cqi; }
.cartao .pagina__rodape{ font-size: 2.5cqi; }

.estatico__convidam{
  font-family: var(--display);
  font-style: italic;
  font-size: 4.6cqi;
  color: var(--tinta-2);
}
.estatico__dados{
  display: grid; gap: 3cqi;
  margin-top: 3cqi;
  font-size: 3.5cqi;
  line-height: 1.45;
  color: var(--tinta-2);
}
.estatico__dados b{
  display: block;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 2.6cqi;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: .6cqi;
}
.estatico__rsvp{
  font-size: 2.9cqi;
  padding: 1.6cqi 4cqi;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--tinta);
}

/* modelos cujo desenho da capa precisa de ajuste no formato em pé */
.cartao[data-modelo="manchete"] .pagina--capa{
  background: linear-gradient(180deg, var(--papel-alto) 0 70%, var(--magenta) 70%);
}
.cartao[data-modelo="manchete"] .pagina__centro{ margin-top: 6cqi; }
.cartao[data-modelo="manchete"] .estatico__convidam{ font-family: var(--texto); }
.cartao[data-modelo="manchete"] .estatico__rsvp{ border-color: #fff; color: #fff; align-self: flex-start; }
.cartao[data-modelo="manchete"] .pagina__data{ margin-top: 0; color: var(--tinta); }
.cartao[data-modelo="manchete"] .pagina__data i{ color: var(--magenta); }
.cartao[data-modelo="terracota"] .pagina--capa::before{ inset: 7% 9% 15%; }
.cartao[data-modelo="marsala"] .pagina--capa::after{ top: 40%; width: 74%; }
.cartao[data-modelo="kraft"] .pagina--capa::after{ top: 3cqi; width: 40%; }
.cartao[data-modelo="kraft"] .pagina__eyebrow{ margin-top: 10cqi; }
.cartao[data-modelo="azulejo"] .pagina{ padding-top: 14cqi; padding-bottom: 14cqi; }
.cartao[data-modelo="azulejo"] .pagina::before{ background-size: auto 6%, auto 6%; }
.cartao[data-modelo="areia"] .pagina--capa{ background: radial-gradient(circle at 50% 9%, rgba(240,190,120,.32) 0 7%, transparent 7.5%), var(--papel-alto); }
.cartao[data-modelo="areia"] .pagina::before{ background-size: 100% 10%; }
.cartao[data-modelo="areia"] .pagina__eyebrow{ margin-top: 8cqi; }

/* ------------------------------------------------------ página /estatico/ */

.palco-estatico{
  display: grid; place-items: center;
  padding: clamp(1.2rem, 4vh, 3rem) 1rem;
}
.palco-estatico .cartao{ width: min(24rem, 86vw, calc((100dvh - 12rem) * 9 / 16)); }

.cartao[data-modelo="jardim"] .pagina__eyebrow{ margin-top: 8cqi; }
.cartao[data-modelo="deco"] .pagina--capa{
  background:
    repeating-conic-gradient(from 270deg at 50% 0%, rgba(207,166,74,.16) 0 1deg, transparent 1deg 7.5deg) 50% 0 / 100% 22% no-repeat,
    radial-gradient(60% 24% at 50% 0%, rgba(207,166,74,.2), transparent 70%),
    var(--papel-alto);
}
.cartao[data-modelo="areia"] .pagina{ padding-bottom: 16cqi; }