/* =========================================================
   Denilson & Beatriz — estilos complementares ao Tailwind
   Paleta inspirada no convite: terracota, dourado, creme
   ========================================================= */
:root {
  --terracota: #8e2a17;
  --terracota-escuro: #6e1f10;
  --lirio: #c4391d;
  --dourado: #c3a14f;
  --dourado-claro: #e5d3a1;
  --creme: #fbf8f3;
  --papel: #ffffff;
  --salvia: #8a9a7b;
  --tinta: #3b2a24;
}

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { background: var(--creme); color: var(--tinta); -webkit-font-smoothing: antialiased; }

.font-script { font-family: 'Great Vibes', cursive; font-weight: 400; }
.font-display { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-body { font-family: 'Lora', Georgia, serif; }

.tracking-convite { letter-spacing: .22em; }
.versalete { font-variant: small-caps; letter-spacing: .12em; }

/* Arco do convite */
.arco {
  border: 1.5px solid var(--terracota);
  border-bottom: none;
  border-radius: 999px 999px 0 0;
}
.arco-foto { border-radius: 999px 999px 18px 18px; overflow: hidden; }

/* Divisor com ramo */
.divisor { display: flex; align-items: center; gap: 1rem; color: var(--dourado); }
.divisor::before, .divisor::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--dourado-claro), transparent); }

/* Flores decorativas */
/* a arte tem o lado direito "cortado" (como no convite): espelhamos à esquerda
   para que o corte fique sempre colado na borda da tela */
.flores-esq { position: absolute; pointer-events: none; user-select: none; transform: scaleX(-1); }
.flores-dir { position: absolute; pointer-events: none; user-select: none; }

/* Contagem regressiva */
.contador-item { min-width: 4.5rem; }
.contador-num { font-variant-numeric: tabular-nums; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: 999px; font-family: 'Lora', serif;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  transition: all .25s ease; cursor: pointer; border: 1px solid transparent;
}
.btn-primario { background: var(--terracota); color: #fff; }
.btn-primario:hover { background: var(--terracota-escuro); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(142, 42, 23, .6); }
.btn-contorno { border-color: var(--terracota); color: var(--terracota); background: transparent; }
.btn-contorno:hover { background: var(--terracota); color: #fff; }
.btn-dourado { background: var(--dourado); color: #fff; }
.btn-dourado:hover { background: #a9883a; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Campos */
.campo {
  width: 100%; background: #fff; border: 1px solid #e7ddd2; border-radius: .75rem;
  padding: .85rem 1rem; font-family: 'Lora', serif; color: var(--tinta);
  transition: border-color .2s, box-shadow .2s; font-size: 16px; /* evita zoom no iOS */
}
.campo:focus { outline: none; border-color: var(--terracota); box-shadow: 0 0 0 3px rgba(142, 42, 23, .12); }
.rotulo { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--terracota); margin-bottom: .45rem; }

.opcao-radio input { position: absolute; opacity: 0; pointer-events: none; }
.opcao-radio span {
  display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1rem;
  border: 1px solid #e7ddd2; border-radius: .75rem; background: #fff; cursor: pointer; transition: all .2s;
}
.opcao-radio input:checked + span { border-color: var(--terracota); background: #fbf1ee; color: var(--terracota); box-shadow: 0 0 0 3px rgba(142, 42, 23, .1); }
.opcao-radio input:focus-visible + span { outline: 2px solid var(--terracota); outline-offset: 2px; }

/* Galeria em colunas (masonry) */
.masonry { column-count: 2; column-gap: .75rem; }
@media (min-width: 768px) { .masonry { column-count: 3; column-gap: 1rem; } }
@media (min-width: 1200px) { .masonry.m4 { column-count: 4; } }
.masonry > * { break-inside: avoid; margin-bottom: .75rem; }
@media (min-width: 768px) { .masonry > * { margin-bottom: 1rem; } }

.foto-card { position: relative; overflow: hidden; border-radius: 14px; background: #efe7dc; cursor: zoom-in; display: block; width: 100%; }
.foto-card img { width: 100%; height: auto; display: block; transition: transform .6s ease; }
.foto-card:hover img { transform: scale(1.04); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(24, 14, 10, .94); display: none; align-items: center; justify-content: center; }
.lightbox.aberto { display: flex; }
.lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox button { color: #fff; }

/* Animações de entrada */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Nav */
#nav.rolado { background: rgba(251, 248, 243, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(142, 42, 23, .08); }

/* Pré-visualização de upload */
.preview-item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #efe7dc; }
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.preview-item button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; line-height: 1; }

.barra-progresso { height: 6px; border-radius: 999px; background: #efe3d8; overflow: hidden; }
.barra-progresso > div { height: 100%; background: linear-gradient(90deg, var(--terracota), var(--dourado)); width: 0; transition: width .2s; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120%); z-index: 120; background: var(--tinta); color: #fff; padding: .85rem 1.25rem; border-radius: 999px; font-size: .9rem; transition: transform .35s ease; max-width: calc(100vw - 32px); text-align: center; }
.toast.mostrar { transform: translateX(-50%) translateY(0); }
.toast { visibility: hidden; transition: transform .35s ease, visibility 0s .35s; }
.toast.mostrar { visibility: visible; transition: transform .35s ease; }

.nova-foto { animation: entrar .7s ease both; }
@keyframes entrar { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }