/* =============================================================
   Sistema visual — branco & bege com detalhes holográficos
   ============================================================= */

:root{
  /* superfícies */
  --bg:        #EBE3D4;   /* bege do fundo da página */
  --bg-claro:  #FBF8F2;   /* para onde o gradiente clareia */
  --bege:      #F5F0E7;   /* cartões e chips (mais claro que o fundo) */
  --bege-2:    #E6DACA;
  --areia:     #D3C3A9;
  --papel:     #FFFDFA;

  /* tinta */
  --tinta:     #17130E;
  --tinta-70:  rgba(23,19,14,.70);
  --tinta-50:  rgba(23,19,14,.62);   /* mais forte que o nome sugere: compensa o fundo bege mais escuro (4,7:1) */
  --tinta-35:  rgba(23,19,14,.35);
  --linha:     rgba(23,19,14,.10);
  --linha-2:   rgba(23,19,14,.06);

  /* holográfico */
  --holo: conic-gradient(from 210deg,
            #ffd9e8 0deg, #e6d9ff 55deg, #cfeaff 110deg,
            #d4f7e6 165deg, #fff2cf 220deg, #ffd9e8 285deg, #e6d9ff 360deg);
  --holo-linear: linear-gradient(115deg,
            #ffd0e3 0%, #e2d4ff 18%, #c7e7ff 36%,
            #cdf6e4 54%, #fff0c8 72%, #ffd0e3 90%, #e2d4ff 100%);

  /* medidas */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;
  --max: 1180px;
  --nav-h: 68px;

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- peso ----
     Cada sombra tem duas camadas: a de CONTATO (curta e escura, onde o
     objeto toca a página) e a de AMBIENTE (larga e difusa, a massa dele).
     É a diferença entre um adesivo e um objeto pousado. */
  --contato:   0 1px 2px rgba(23,19,14,.09);
  --contato-2: 0 2px 4px rgba(23,19,14,.08);

  --shadow-sm: var(--contato),   0 4px 10px -4px rgba(23,19,14,.12),  0 12px 28px -16px rgba(23,19,14,.18);
  --shadow-md: var(--contato-2), 0 10px 22px -10px rgba(23,19,14,.18), 0 28px 56px -28px rgba(23,19,14,.28);
  --shadow-lg: var(--contato-2), 0 18px 34px -14px rgba(23,19,14,.22), 0 44px 80px -36px rgba(23,19,14,.34);
  /* o objeto encostado: quase sem ambiente, só o contato */
  --shadow-pressed: 0 1px 1px rgba(23,19,14,.12);

  /* curvas: 'peso' desacelera como massa; 'mola' assenta com leve excesso */
  --peso: cubic-bezier(.22,.68,.28,1);
  --mola: cubic-bezier(.34,1.26,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* o atributo hidden precisa vencer os display: do CSS */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* halos de cor muito suaves no fundo */
/* gradiente clareando de cima para baixo, sobre o bege do fundo */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(125% 88% at 50% -8%, var(--bg-claro) 0%, rgba(251,248,242,0) 62%),
    radial-gradient(58vw 46vw at 10% 4%,  rgba(255,214,232,.16), transparent 62%),
    radial-gradient(54vw 44vw at 93% 10%, rgba(214,232,255,.14), transparent 62%);
}

/* granulado — dá o acabamento de papel */
.grain{
  position:fixed; inset:-50%; z-index:-1; pointer-events:none;
  opacity:.62; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.02em; }
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:.88;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.02em; }
.eyebrow{
  font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:.22em; color:var(--tinta-50);
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; max-width:100%;
}
.eyebrow::before{
  content:''; width:22px; height:1px; background:var(--areia); flex:none;
}
.lead{ font-size:clamp(15px,1.5vw,18px); color:var(--tinta-70); max-width:56ch; }
.muted{ color:var(--tinta-50); }
.small{ font-size:13px; }

/* ---------- holográfico ---------- */
@keyframes holoShift{ to{ background-position:220% center; } }
@keyframes holoSpin{ to{ transform:rotate(360deg); } }
@keyframes sweep{ 0%{ transform:translateX(-120%); } 60%,100%{ transform:translateX(220%); } }

.holo-text{
  background:linear-gradient(112deg,
      var(--tinta) 0%,   var(--tinta) 30%,
      #b98fc9 37%, #7fb4dd 42%, #6fc4a8 47%, #d9b46a 52%,
      var(--tinta) 60%,  var(--tinta) 100%);
  background-size:260% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:holoShift 11s linear infinite;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .holo-text{ color:var(--tinta); }
}

/* moldura com borda holográfica (1px) */
.holo-frame{ position:relative; border-radius:var(--r-lg); }
.holo-frame::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--holo); background-size:180% 180%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.9; pointer-events:none;
}

/* filete holográfico horizontal */
.holo-rule{
  height:2px; border:0; border-radius:2px; margin:0;
  background:var(--holo-linear); background-size:220% auto;
  animation:holoShift 8s linear infinite; opacity:.85;
}

/* selo circular giratório */
.holo-seal{
  width:104px; height:104px; border-radius:50%; position:relative;
  display:grid; place-items:center; flex:none;
  background:var(--holo); background-size:150% 150%;
  box-shadow:0 10px 40px -12px rgba(180,150,200,.55);
}
.holo-seal::before{
  content:''; position:absolute; inset:5px; border-radius:50%;
  background:var(--papel);
}
.holo-seal span{
  position:relative; font-family:var(--serif); font-size:13px;
  text-transform:uppercase; letter-spacing:.14em; text-align:center; line-height:1.15;
}
.holo-seal.spin{ animation:holoSpin 22s linear infinite; }
.holo-seal.spin span{ animation:holoSpin 22s linear infinite reverse; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:22px; }
.section{ padding-block:clamp(56px,9vw,110px); }
.section-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(34px,6vw,68px); }
.grid{ display:grid; gap:18px; }

/* ---------- navegação (pílula flutuante) ---------- */
.nav-shell{
  position:sticky; top:14px; z-index:60;
  padding-inline:22px; margin-top:14px;
}
.nav{
  max-width:var(--max); margin-inline:auto;
  height:var(--nav-h);
  display:flex; align-items:center; gap:10px;
  padding:8px 8px 8px 10px;
  border-radius:999px;
  background:rgba(255,253,250,.78);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:var(--shadow-md);
}
.nav.holo-frame{ border-radius:999px; }
.brand{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:16px; letter-spacing:.06em;
  background:var(--holo); position:relative; color:var(--tinta);
}
.brand::before{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--papel); }
.brand span{ position:relative; display:grid; place-items:center; }

/* logo no lugar do monograma — cabe no círculo sem distorcer */
.marca-img{ display:block; object-fit:contain; }
.brand .marca-img{ width:27px; height:27px; }
.env-selo .marca-img{ width:46px; height:46px; }
.env-papel-nomes .marca-img{ height:clamp(32px,8vw,52px); width:auto; max-width:60%; }

.tabs{ display:flex; gap:2px; margin-inline:auto; }
.tab-btn{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--tinta-70);
  padding:10px 16px; border-radius:999px; white-space:nowrap;
  transition:color .2s, background .2s;
}
.tab-btn:hover{ color:var(--tinta); background:var(--linha-2); }
/* Presentes é a última e a mais apagada: fica disponível sem disputar
   atenção com o convite e a confirmação. O tom para em 60% de opacidade
   (4,7:1 sobre a barra) — abaixo disso o item vira texto ilegível. */
.tab-discreta{ color:rgba(23,19,14,.60); }
.tab-discreta:hover{ color:var(--tinta); }
.tab-discreta[aria-selected="true"]{ color:var(--tinta); }

.tab-btn[aria-selected="true"]{
  color:var(--tinta); background:var(--bege);
  box-shadow:inset 0 0 0 1px var(--linha);
}
.nav .btn{ flex:none; }

/* ---------- botões ---------- */
.btn{
  appearance:none; cursor:pointer; border:0;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:14px; font-weight:500; line-height:1;
  padding:14px 22px; border-radius:999px;
  text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s;
}
.btn-dark{ background:var(--tinta); color:#fff; }
.btn-dark:hover{ box-shadow:0 12px 28px -12px rgba(23,19,14,.55); }
.btn-ghost{ background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linha); }
.btn-ghost:hover{ background:var(--bege); }
.btn-light{ background:var(--papel); color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linha); }
.btn-light:hover{ background:var(--bege); }
.btn-sm{ padding:10px 16px; font-size:13px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* botão holográfico com varredura de brilho */
.btn-holo{
  position:relative; overflow:hidden;
  background:var(--tinta); color:#fff;
}
.btn-holo::after{
  content:''; position:absolute; top:0; bottom:0; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-120%);
}
.btn-holo:hover::after{ animation:sweep 1.1s ease; }
.btn-holo::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:var(--holo);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* ---------- cartões ---------- */
.card{
  background:var(--papel);
  border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--linha), var(--shadow-sm);
  padding:26px;
}
.card-bege{ background:var(--bege); }

/* =============================================================
   A CARTA FECHADA — clique para abrir o convite
   ============================================================= */
.carta-cena{
  min-height:100vh;
  min-height:100svh;          /* no celular, desconta a barra do navegador */
  display:grid; place-items:center;
  padding-block:clamp(26px,6vw,58px);
}

.carta-abrir{
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:28px;
  width:min(430px,84vw); padding:0;
  font-family:var(--sans); color:inherit;
}
.carta-abrir:focus-visible{ outline:2px solid var(--tinta); outline-offset:18px; border-radius:var(--r-md); }

/* ---------- o envelope ---------- */
.envelope{
  position:relative; display:block; width:100%; aspect-ratio:1.46;
  perspective:1500px;
  filter:drop-shadow(0 24px 40px rgba(23,19,14,.18));
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.carta-abrir:hover .envelope{ transform:translateY(-6px); }

/* fundo do envelope */
.env-verso{
  position:absolute; inset:0; z-index:1; border-radius:9px;
  background:linear-gradient(160deg, var(--bege) 0%, var(--bege-2) 100%);
}

/* o papel guardado dentro (só aparece ao sair) */
.env-papel{
  position:absolute; left:7%; right:7%; top:9%; height:82%; z-index:2;
  border-radius:5px; background:var(--papel);
  box-shadow:0 3px 12px rgba(23,19,14,.14), inset 0 0 0 1px var(--linha);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:11px;
  padding:26px 22px;
  transition:transform .85s cubic-bezier(.25,.9,.3,1);
}
.env-papel-nomes{
  font-family:var(--serif); font-size:clamp(20px,4.2vw,29px);
  letter-spacing:.05em; color:var(--tinta);
}
.env-papel-linha{ width:52%; height:1px; background:var(--areia); opacity:.5; border-radius:2px; }
.env-papel-linha.curta{ width:32%; }

/* frente: cobre o envelope inteiro e esconde o papel */
.env-frente{
  position:absolute; inset:0; z-index:3; border-radius:9px;
  background:linear-gradient(200deg, var(--bege-2) 0%, var(--bege) 58%);
  box-shadow:inset 0 0 0 1px rgba(23,19,14,.06);
  overflow:hidden;
}
/* sombra em V onde a aba se apoia — dá o volume do envelope */
.env-frente::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,19,14,.075), rgba(23,19,14,0) 72%);
  clip-path:polygon(0 0, 50% 44%, 100% 0);
}

/* a aba que abre */
.env-aba{
  position:absolute; left:0; right:0; top:0; height:56%; z-index:4;
  background:linear-gradient(180deg, var(--bege) 0%, var(--bege-2) 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  backface-visibility:hidden;
}

/* fio holográfico contornando o envelope — o detalhe, não o preenchimento */
.envelope::after{
  content:''; position:absolute; inset:0; z-index:6; border-radius:9px;
  padding:1px; pointer-events:none;
  background:var(--holo); background-size:180% 180%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.85;
}

/* o lacre */
.env-selo{
  position:absolute; left:50%; top:56%; width:80px; height:80px;
  margin:-40px 0 0 -40px; z-index:5;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--holo); background-size:150% 150%;
  box-shadow:0 8px 24px -8px rgba(150,120,175,.6);
  transition:transform .45s cubic-bezier(.4,0,.6,1), opacity .45s;
}
.env-selo::before{
  content:''; position:absolute; inset:5px; border-radius:50%; background:var(--papel);
}
.env-selo span{
  position:relative; font-family:var(--serif); font-size:19px;
  letter-spacing:.08em; color:var(--tinta);
}

/* a dica embaixo */
.carta-dica{
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.2em; color:var(--tinta-50);
}
.carta-dica-seta{ color:var(--areia); font-size:10px; }
.carta-abrir:hover .carta-dica{ color:var(--tinta); }
@keyframes respira{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
@keyframes chegarCarta{
  from{ opacity:0; transform:translateY(18px) scale(.985); }
  to{ opacity:1; transform:none; }
}
@keyframes chegarDica{ from{ opacity:0; } to{ opacity:.6; } }

.carta-abrir .envelope{ animation:chegarCarta 1.1s cubic-bezier(.16,.84,.44,1) both; }
.carta-dica{
  animation:chegarDica .9s ease .5s both,
            respira 3.2s ease-in-out 1.6s infinite;
}

/* ---------- a abertura ---------- */
@keyframes abrirAba{
  0%   { transform:rotateX(0deg);    z-index:4; }
  49%  { z-index:4; }
  50%  { z-index:1; }
  100% { transform:rotateX(-172deg); z-index:1; }
}
@keyframes sairPapel{
  0%   { transform:translateY(0) scale(1); }
  100% { transform:translateY(-66%) scale(1.04); }
}
@keyframes sumirCena{
  to{ opacity:0; transform:scale(.975) translateY(-10px); }
}

.carta-cena.abrindo .env-aba{ animation:abrirAba .85s cubic-bezier(.6,.05,.3,1) forwards; }
.carta-cena.abrindo .env-selo{ transform:scale(.4) rotate(-28deg); opacity:0; }
.carta-cena.abrindo .env-papel{ animation:sairPapel .9s cubic-bezier(.25,.9,.3,1) .5s forwards; }
.carta-cena.abrindo .carta-dica{ animation:none; opacity:0; transition:opacity .3s; }
.carta-cena.abrindo .carta-abrir{ pointer-events:none; }
.carta-cena.abrindo{ animation:sumirCena .62s cubic-bezier(.4,0,.6,1) .9s forwards; }

@keyframes surgir{ from{ opacity:0; } to{ opacity:1; } }
@keyframes subirSuave{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
@keyframes descerTopo{
  from{ opacity:0; transform:translateY(-16px); }
  to{ opacity:1; transform:none; }
}

/* o container apenas aparece; quem se move são os blocos, em cascata */
.convite-revelando{ animation:surgir .5s ease both; }
.convite-revelando > .hero > *,
.convite-revelando > .marquee,
.convite-revelando > .section{
  animation:subirSuave .85s cubic-bezier(.16,.84,.44,1) both;
}
.convite-revelando > .hero > *:nth-child(1){ animation-delay:.05s; }
.convite-revelando > .hero > *:nth-child(2){ animation-delay:.13s; }
.convite-revelando > .hero > *:nth-child(3){ animation-delay:.21s; }
.convite-revelando > .hero > *:nth-child(4){ animation-delay:.29s; }
.convite-revelando > .hero > *:nth-child(5){ animation-delay:.37s; }
.convite-revelando > .hero > *:nth-child(6){ animation-delay:.45s; }
.convite-revelando > .marquee{ animation-delay:.5s; }
.convite-revelando > .section{ animation-delay:.56s; }

/* o menu e o rodapé chegam junto com o convite */
.moldura-entrando .nav-shell{ animation:descerTopo .8s cubic-bezier(.16,.84,.44,1) both; }
.moldura-entrando .footer{ animation:surgir .9s ease .2s both; }

@media (prefers-reduced-motion:reduce){
  .carta-dica{ animation:none; opacity:.75; }
  .carta-abrir .envelope{ animation:none; }
}

/* ---------- HERO / CONVITE ---------- */
.hero{ padding-block:clamp(30px,6vw,58px) clamp(40px,6vw,72px); }
.hero-names{
  font-size:clamp(58px,15.5vw,196px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
/* O line-height apertado não reserva espaço para acentos (É, Ã, Ê).
   A folga vai em CADA nome — assim funciona com o nome acentuado em
   qualquer posição — e acompanha o tamanho da fonte. */
.hero-names > .holo-text{ padding-top:.20em; }
.hero-names .amp{
  font-size:.42em; margin:0; color:var(--tinta-35);
  display:flex; align-items:center; gap:18px;
}
.hero-names .amp::before,.hero-names .amp::after{
  content:''; width:clamp(30px,9vw,120px); height:1px; background:var(--areia);
}
.hero-media-wrap{ position:relative; max-width:520px; margin:30px auto 0; }
.hero-media{
  position:relative; aspect-ratio:4/5;
  border-radius:var(--r-xl); overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,216,233,.38), transparent 58%),
    radial-gradient(120% 90% at 85% 20%, rgba(214,235,255,.34), transparent 58%),
    linear-gradient(160deg, var(--bege), var(--bege-2));
  box-shadow:var(--shadow-md);
  display:grid; place-items:center;
}
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-media .ph{ text-align:center; color:var(--tinta-35); font-family:var(--serif); font-size:15px; padding:20px; }
.hero-seal{ position:absolute; left:-42px; bottom:42px; z-index:2; width:116px; height:116px; }

.hero-meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px;
  margin-top:26px; text-align:center;
}
.hero-meta div{ display:flex; flex-direction:column; gap:2px; }
.hero-meta b{ font-family:var(--serif); font-size:20px; font-weight:400; }

/* contagem regressiva */
.countdown{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.count-box{ flex:0 1 auto; }
.count-box{
  min-width:92px; padding:16px 14px; border-radius:var(--r-md);
  background:var(--papel); text-align:center;
  box-shadow:inset 0 0 0 1px var(--linha), var(--shadow-sm);
}
.count-box b{ display:block; font-family:var(--serif); font-size:34px; line-height:1; }
.count-box span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.18em; color:var(--tinta-50); }

.hero-cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

/* as cerimônias na capa */
.eventos-capa{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:18px; margin-top:38px;
}
.evento-card{
  background:var(--papel); border-radius:var(--r-lg); padding:26px 24px;
  box-shadow:inset 0 0 0 1px var(--linha), var(--shadow-sm);
  display:flex; flex-direction:column; gap:8px; text-align:center; align-items:center;
}
.evento-card .eyebrow{ justify-content:center; }
.evento-card .eyebrow::before{ display:none; }
.evento-data{
  font-size:clamp(30px,4.2vw,44px); line-height:1; letter-spacing:-.02em;
  text-transform:uppercase; margin-top:6px;
}
.evento-quando{ margin:0; }
.evento-resumo{ margin:6px 0 0; color:var(--tinta-70); max-width:34ch; }
.evento-card .countdown{ margin-top:16px; }
.evento-acoes{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:16px; }

.countdown.mini{ gap:7px; margin-top:14px; }
.countdown.mini .count-box{ min-width:62px; padding:11px 8px; }
.countdown.mini .count-box b{ font-size:24px; }
.countdown.mini .count-box span{ font-size:9px; letter-spacing:.14em; }
.contagem-fim{
  margin:0; font-size:19px; color:var(--tinta-50);
  padding:12px 0; text-transform:uppercase; letter-spacing:.12em;
}

/* as cerimônias em Informações */
.evento-info{ margin-bottom:22px; }
.evento-info-topo{ display:flex; gap:18px; justify-content:space-between; align-items:flex-start; }
.evento-info-linhas{ margin-top:20px; }
.evento-info-linhas .linha{
  display:flex; justify-content:space-between; gap:18px;
  padding:11px 0; border-top:1px solid var(--linha); font-size:14px;
}
.evento-info-linhas .linha:first-child{ border-top:0; }
.evento-info-linhas .linha b{ font-weight:500; text-align:right; }

/* escolha por cerimônia no formulário */
.evento-rsvp{
  border:0; margin:0 0 16px; padding:22px;
  border-radius:var(--r-md); background:var(--papel);
  box-shadow:inset 0 0 0 1px var(--linha);
}
.evento-rsvp legend{
  padding:0; margin-bottom:14px; display:flex; flex-direction:column; gap:3px;
}
.evento-rsvp legend b{ font-family:var(--serif); font-size:21px; font-weight:400; }
.evento-extra{ margin-top:14px; }
/* aviso de cerimônia nova para quem já tinha respondido */
.rsvp-pendente .card{ background:#fdf8ec; box-shadow:inset 0 0 0 1px rgba(150,120,40,.3); }

.contador-confirmados{
  margin:0 0 14px; padding:9px 14px; border-radius:999px;
  background:var(--bege-2); color:var(--tinta-70);
  font-size:12.5px; display:inline-block;
}

/* faixa rolante */
.marquee{
  overflow:hidden; margin-top:clamp(40px,7vw,80px);
  border-block:1px solid var(--linha); padding-block:14px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{ display:flex; gap:36px; width:max-content; animation:slide 34s linear infinite; }
.marquee-track span{
  font-family:var(--serif); font-size:19px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tinta-50); display:flex; align-items:center; gap:36px;
}
.marquee-track span::after{ content:'✦'; color:var(--areia); font-size:12px; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- informações ---------- */
.info-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.timeline{ display:flex; flex-direction:column; }
.timeline-row{
  display:grid; grid-template-columns:78px 1fr; gap:18px;
  padding:18px 0; border-top:1px solid var(--linha);
}
.timeline-row:first-child{ border-top:0; }
.timeline-row b{ font-family:var(--serif); font-size:19px; font-weight:400; }
.timeline-row h4{ font-size:15px; font-weight:600; }

.faq details{
  border-top:1px solid var(--linha); padding:6px 0;
}
.faq details:last-child{ border-bottom:1px solid var(--linha); }
.faq summary{
  cursor:pointer; list-style:none; padding:16px 0; font-weight:500;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-size:20px; color:var(--tinta-35); }
.faq details[open] summary::after{ content:'–'; }
.faq p{ margin:0 0 16px; color:var(--tinta-70); max-width:62ch; }

/* ---------- formulário ---------- */
.rsvp-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:38px; align-items:start; }
.rsvp-layout .form{ max-width:none; }
.bloco-vou{ display:grid; gap:16px; }
.rsvp-aside{ position:sticky; top:calc(var(--nav-h) + 34px); display:grid; gap:14px; }
.rsvp-aside .linha{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--linha); font-size:14px; }
.rsvp-aside .linha:first-of-type{ border-top:0; }
.rsvp-aside .linha b{ font-weight:500; text-align:right; line-height:1.35; }
@media (max-width:900px){
  .rsvp-layout{ grid-template-columns:1fr; }
  .rsvp-aside{ position:static; order:-1; }
}

.form{ display:grid; gap:16px; max-width:640px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:12.5px; font-weight:500; letter-spacing:.02em; }
.field .hint{ font-size:12px; color:var(--tinta-50); }
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  font-family:var(--sans); font-size:15px; color:var(--tinta);
  background:var(--papel); border:0; border-radius:var(--r-sm);
  padding:13px 15px; width:100%;
  box-shadow:inset 0 0 0 1px var(--linha);
  transition:box-shadow .18s;
}
input:focus,select:focus,textarea:focus{
  outline:0; box-shadow:inset 0 0 0 1.5px var(--tinta-35), 0 0 0 4px rgba(230,217,255,.55);
}
textarea{ resize:vertical; min-height:96px; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.choice{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice label{
  cursor:pointer; text-align:center; padding:16px 14px; border-radius:var(--r-md);
  background:var(--papel); box-shadow:inset 0 0 0 1px var(--linha);
  font-size:14px; font-weight:500; transition:.18s;
}
.choice label small{ display:block; font-weight:400; color:var(--tinta-50); font-size:12px; margin-top:3px; }
.choice input:checked + label{
  background:var(--bege); box-shadow:inset 0 0 0 1.5px var(--tinta);
}
.choice input:focus-visible + label{ outline:2px solid var(--tinta); outline-offset:2px; }

.err{ color:#9d2f3f; font-size:12.5px; }
input[aria-invalid="true"],select[aria-invalid="true"]{ box-shadow:inset 0 0 0 1.5px #c46a76; }

/* ---------- presentes ---------- */
.gift-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-bottom:26px;
}
.chip{
  appearance:none; border:0; cursor:pointer; font-family:var(--sans);
  font-size:13px; padding:9px 15px; border-radius:999px;
  background:var(--papel); color:var(--tinta-70);
  box-shadow:inset 0 0 0 1px var(--linha); transition:.18s;
}
.chip:hover{ background:var(--bege); color:var(--tinta); }
.chip[aria-pressed="true"]{ background:var(--tinta); color:#fff; box-shadow:none; }

.gift-grid{ grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); }
.gift{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--papel); border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--linha), var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease;
}
.gift-img{
  aspect-ratio:4/3; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--bege),var(--bege-2));
  display:grid; place-items:center;
}
.gift-img img{ width:100%; height:100%; object-fit:cover; }
.gift-img .mono{
  font-family:var(--serif); font-size:46px; color:rgba(23,19,14,.20);
  text-transform:uppercase;
}
.gift-img::after{
  content:''; position:absolute; inset:0; opacity:.55;
  background:radial-gradient(80% 70% at 25% 15%, rgba(255,214,233,.85), transparent 60%),
             radial-gradient(80% 70% at 80% 85%, rgba(206,233,255,.80), transparent 60%);
  mix-blend-mode:soft-light; pointer-events:none;
}
.gift-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.14em;
  padding:6px 11px; border-radius:999px;
  background:rgba(255,253,250,.9); backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px var(--linha);
}
.gift-body{ padding:20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.gift-body h3{ font-family:var(--serif); font-size:22px; line-height:1.1; }
.gift-body p{ margin:0; font-size:13.5px; color:var(--tinta-50); }
.gift-price{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
.gift-valor{ display:flex; flex-direction:column; line-height:1.15; }
.gift-valor .small{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.gift-price b{ font-family:var(--serif); font-size:24px; font-weight:400; white-space:nowrap; }

.bar{ height:5px; border-radius:99px; background:var(--bege-2); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:99px; background:var(--holo-linear); background-size:220% auto; animation:holoShift 7s linear infinite; }
.gift.esgotado{ opacity:.62; }
.gift.esgotado .gift-img{ filter:grayscale(.55); }

/* ---------- modal ---------- */
dialog{
  border:0; padding:0; background:transparent; max-width:min(560px,94vw); width:100%;
}
dialog::backdrop{ background:rgba(23,19,14,.42); backdrop-filter:blur(4px); }
.modal{
  background:var(--papel); border-radius:var(--r-lg); padding:28px;
  box-shadow:var(--shadow-lg); max-height:88vh; overflow:auto;
}
.modal-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; }
.modal-head h3{ font-family:var(--serif); font-size:28px; }
.x{
  appearance:none; border:0; background:var(--bege); cursor:pointer;
  width:34px; height:34px; border-radius:50%; font-size:16px; line-height:1; flex:none;
}
/* abas de forma de pagamento */
.pag-abas{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  padding:4px; margin-bottom:18px;
  background:var(--bege); border-radius:999px;
}
.pag-aba{
  appearance:none; border:0; cursor:pointer; font-family:var(--sans);
  font-size:13.5px; font-weight:500; color:var(--tinta-70);
  padding:11px 14px; border-radius:999px; background:transparent;
  transition:background .18s, color .18s, box-shadow .18s;
}
.pag-aba:hover{ color:var(--tinta); }
.pag-aba[aria-selected="true"]{
  background:var(--papel); color:var(--tinta);
  box-shadow:0 1px 3px rgba(23,19,14,.10);
}

/* passo a passo do cartão */
.pag-passos{
  margin:4px 0 2px; padding-left:20px; text-align:left;
  font-size:13.5px; color:var(--tinta-70); line-height:1.5;
}
.pag-passos li{ margin-bottom:7px; }
.pag-passos li::marker{ color:var(--tinta-35); font-weight:600; }

.pix-box{
  display:grid; gap:14px; justify-items:center; text-align:center;
  padding:22px; border-radius:var(--r-md); background:var(--bege);
}
.pix-box canvas,.pix-box img{ border-radius:12px; background:#fff; padding:10px; }
.pix-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  word-break:break-all; color:var(--tinta-50); max-height:74px; overflow:auto;
  background:var(--papel); padding:10px; border-radius:10px; width:100%; text-align:left;
}

/* ---------- aviso de configuração ---------- */
.erro-config{
  margin:16px 22px; padding:18px 22px; border-radius:var(--r-md);
  background:#fdf3f3; color:#6d2530;
  box-shadow:inset 0 0 0 1px rgba(160,60,75,.25);
  font-size:14px; line-height:1.55; position:relative; z-index:80;
}
.erro-config > b{ display:block; font-size:15px; margin-bottom:6px; }
.erro-config p{ margin:0 0 4px; }
.erro-config.aviso{
  background:#fdf8ec; color:#6b5324;
  box-shadow:inset 0 0 0 1px rgba(150,120,40,.25);
}
.erro-config code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  background:rgba(160,60,75,.10); padding:2px 6px; border-radius:5px;
}

/* ---------- atalho flutuante para os presentes ---------- */
.fab-presentes{
  position:fixed; right:22px; bottom:22px; z-index:70;
  display:flex; align-items:center; gap:16px;
  padding:13px 20px; border:0; border-radius:var(--r-lg);
  cursor:pointer; text-align:left;
  font-family:var(--sans); color:var(--tinta);
  background:rgba(255,253,250,.86);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:var(--shadow-md);
  transition:transform .22s ease, box-shadow .22s ease;
}
/* a entrada toca só na primeira vez; trocar de aba não repete o efeito */
.fab-presentes.fab-entrando{ animation:chegarFab .7s cubic-bezier(.16,.84,.44,1) both; }
@keyframes chegarFab{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
.fab-presentes:hover{ transform:translateY(-3px); }
.fab-presentes:focus-visible{ outline:2px solid var(--tinta); outline-offset:4px; }

.fab-texto{ display:flex; flex-direction:column; }
.fab-texto b{ font-size:14px; font-weight:500; line-height:1.15; }
.fab-texto small{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.16em;
  color:var(--tinta-50); line-height:1.15;
}

/* a entrelinha: um fio holográfico separando as duas linhas */
.fab-entrelinha{
  display:block; height:1.5px; margin:7px 0; border-radius:2px;
  background:var(--holo-linear); background-size:220% auto;
  animation:holoShift 8s linear infinite;
}

.fab-seta{ font-size:17px; color:var(--tinta-50); flex:none; }
.fab-presentes:hover .fab-seta{ color:var(--tinta); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  z-index:200; padding:13px 20px; border-radius:999px;
  background:var(--tinta); color:#fff; font-size:14px;
  opacity:0; pointer-events:none; transition:.25s ease;
  box-shadow:var(--shadow-md); max-width:92vw; text-align:center;
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---------- rodapé ---------- */
body.carta-fechada .footer,
body.carta-fechada .nav-shell{ display:none; }
.footer{ padding-block:clamp(50px,8vw,90px) 40px; text-align:center; }
.footer .display{ font-size:clamp(40px,9vw,110px); }
.footer-links{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:26px; font-size:13.5px; }
.footer-links a{ color:var(--tinta-70); text-decoration:none; }
.footer-links a:hover{ color:var(--tinta); text-decoration:underline; }

/* ---------- abas ---------- */
.panel[hidden]{ display:none; }
.panel{ animation:fade .45s ease both; }
@keyframes fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- responsivo ---------- */
@media (max-width:560px){
  .eyebrow{ letter-spacing:.16em; justify-content:center; text-align:center; }
  .eyebrow::before{ display:none; }
  .countdown{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .count-box{ min-width:0; padding:14px 6px; }
  .count-box b{ font-size:27px; }
  .count-box span{ font-size:9px; letter-spacing:.12em; }
  .hero-meta{ flex-direction:column; gap:14px; }
  .gift-toolbar #ordenar{ margin-left:0; width:100%; }
  /* o atalho ocupa a largura da tela; aviso e rodapé sobem para não
     ficarem atrás dele */
  .fab-presentes{ left:16px; right:16px; bottom:16px; justify-content:space-between; }
  .toast{ bottom:104px; }
  .footer{ padding-bottom:116px; }
  .evento-info-topo .holo-seal{ display:none; }
  .evento-info-linhas .linha{ flex-direction:column; gap:2px; }
  .evento-info-linhas .linha b{ text-align:left; }
  .gift-toolbar > label.chip{ width:100%; justify-content:center; }
}

@media (max-width:860px){
  .nav{ height:auto; flex-wrap:wrap; border-radius:var(--r-lg); padding:10px; }
  .nav.holo-frame{ border-radius:var(--r-lg); }
  .tabs{ order:3; width:100%; overflow-x:auto; margin:2px 0 0; padding-bottom:2px; }
  .tabs::-webkit-scrollbar{ display:none; }
  .nav .btn{ margin-left:auto; }
  .hero-seal{ left:auto; right:12px; bottom:12px; width:84px; height:84px; }
  .hero-seal span{ font-size:11px; }
  .row-2,.choice{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* =============================================================
   FÍSICA — como os elementos reagem ao toque.
   Pousar (hover) levanta e espalha a sombra; pressionar afunda o
   objeto contra a página e encolhe a sombra para o contato.
   ============================================================= */

.btn, .chip, .gift, .evento-card, .fab-presentes,
.icon-btn, .pag-aba, .choice label, .count-box, .tab-btn{
  transition:transform .26s var(--mola), box-shadow .26s var(--peso),
             background .2s var(--peso), color .2s var(--peso);
  will-change:transform;
}

/* --- apoiar --- */
.btn:hover            { transform:translateY(-2px); }
.btn-dark:hover,
.btn-holo:hover       { box-shadow:var(--shadow-md); }
.btn-ghost:hover,
.btn-light:hover      { box-shadow:inset 0 0 0 1px var(--linha), var(--shadow-sm); }
.chip:hover           { transform:translateY(-1px); box-shadow:inset 0 0 0 1px var(--linha), var(--shadow-sm); }
.icon-btn:hover       { transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.choice label:hover   { transform:translateY(-1px); box-shadow:inset 0 0 0 1px var(--linha), var(--shadow-sm); }
.evento-card:hover,
.gift:hover           { transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--linha), var(--shadow-md); }

/* --- pressionar: tudo afunda igual, rápido --- */
.btn:active, .chip:active, .icon-btn:active,
.fab-presentes:active, .pag-aba:active, .tab-btn:active{
  transform:translateY(1px) scale(.985);
  box-shadow:var(--shadow-pressed);
  transition-duration:.07s;
}
.choice label:active{ transform:translateY(1px) scale(.99); transition-duration:.07s; }
.choice input:checked + label{ transform:translateY(1px); box-shadow:inset 0 0 0 1.5px var(--tinta), var(--shadow-pressed); }

/* o cartão do presente é clicável inteiro: segue o cursor com peso */
.gift:active{ transform:translateY(-1px) scale(.995); transition-duration:.1s; }

/* a barra de navegação paira acima da página */
.nav{ box-shadow:var(--shadow-lg); }

/* as caixinhas da contagem ficam pousadas, não coladas */
.count-box{ box-shadow:inset 0 0 0 1px var(--linha), var(--shadow-sm); }

/* nada disso vale para quem pediu menos movimento */
@media (prefers-reduced-motion:reduce){
  .btn:hover, .chip:hover, .icon-btn:hover, .choice label:hover,
  .evento-card:hover, .gift:hover, .fab-presentes:hover,
  .btn:active, .chip:active, .icon-btn:active, .fab-presentes:active,
  .pag-aba:active, .tab-btn:active, .choice label:active, .gift:active{
    transform:none;
  }
}

@media print{
  .nav-shell,.hero-cta,.marquee,.grain{ display:none !important; }
}