/**
 ** Data : 16/06/2026
 ** Autor: Whilton Reis
 ** Polaris Tecnologia
 **/

/* =====================================================================
   MODELO 21 — "CLÁSSICO MARFIM" (formal, fiel a casamento)
   Convite tradicional de cartório/igreja. ASSINATURA: a moldura dourada
   do retrato se DESENHA na carga (dois filetes que crescem) e o título
   entra em cascata (eyebrow→nome→data→texto). Marfim + ouro + grafite.
   UIX animada: cascata de entrada + brilho lento percorrendo o filete.
   ===================================================================== */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/cormorant-garamond.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2'); }

:root { --rose:#b89968; --olive:#3a3630; --olive-dk:#27241f; --gold:#b89968; --gold-soft:#e6d6b0; --paper:#f7f2ea; --paper-2:#efe7d8; --card:#fffdf8; --ink:#3a3630; --ink-soft:#8b8275; --line:#e3d8c4; --line-soft:#ede4d4; --radius:6px; --radius-sm:4px; --shadow:0 26px 56px -34px rgba(58,54,48,.4); --shadow-sm:0 14px 34px -26px rgba(58,54,48,.32); --maxw:1100px; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Poppins',system-ui,sans-serif; font-weight:300; color:var(--ink); background: radial-gradient(600px 440px at 84% -8%, color-mix(in srgb,var(--gold) 12%,transparent), transparent 60%), var(--paper); background-attachment:fixed; line-height:1.72; overflow-x:hidden; }
h1,h2,h3,.hero__title,.footer__names,.section-title,.nav__logo { font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; letter-spacing:.02em; line-height:1.07; }
em { font-style:italic; color:var(--gold); }
strong { font-weight:600; color:var(--olive-dk); }
.section-title span,.hero__title span,.intro h2 span { font-style:italic; color:var(--gold); }
.footer__names span { color:var(--gold-soft); }
.hero__eyebrow,.intro__eyebrow { display:inline-flex; align-items:center; gap:.8rem; text-transform:uppercase; letter-spacing:.4em; font-size:.6rem; font-weight:600; color:var(--gold); margin-bottom:1.6rem; }
.hero__eyebrow::before,.intro__eyebrow::before { content:''; width:2.2rem; height:1px; background:var(--gold); }

.btn { display:inline-flex; align-items:center; gap:.5rem; background:var(--olive); color:var(--paper); text-decoration:none; cursor:pointer; border:1px solid var(--olive); padding:.9rem 2rem; border-radius:var(--radius-sm); font-family:'Poppins',sans-serif; font-weight:500; font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; transition:transform .18s,background .18s; }
.btn:hover { transform:translateY(-2px); background:var(--olive-dk); } .btn:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.btn--ghost { background:transparent; color:var(--olive-dk); border-color:var(--gold); } .btn--ghost:hover { background:color-mix(in srgb,var(--gold) 12%,transparent); }
.btn--mini { padding:.55rem 1.2rem; font-size:.64rem; }

.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1rem 6vw; background:color-mix(in srgb,var(--paper) 86%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft); }
.nav__logo { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.7rem; color:var(--ink); text-decoration:none; letter-spacing:.04em; } .nav__logo span { color:var(--gold); font-style:italic; }
.nav__links { display:flex; gap:2rem; }
.nav__links a { color:var(--ink-soft); text-decoration:none; font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.18em; position:relative; padding:.2rem 0; transition:color .18s; }
.nav__links a::after { content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--gold); transition:width .22s; } .nav__links a:hover { color:var(--ink); } .nav__links a:hover::after { width:100%; }

.hero,.intro,.acoes,.horarios,.rsvp,.historia,.como,.presentes,.faq { padding-left:6vw; padding-right:6vw; }
.hero { display:grid; grid-template-columns:1fr .9fr; gap:4.5rem; align-items:center; padding-top:5.5rem; padding-bottom:5rem; max-width:var(--maxw); margin:0 auto; }
/* cascata de entrada do hero */
.hero__eyebrow { opacity:0; animation:fadeUp .7s ease .1s both; }
.hero__title { font-size:clamp(3rem,8vw,6rem); color:var(--ink); margin-bottom:1.4rem; opacity:0; animation:fadeUp .8s ease .25s both; }
.hero__date { font-size:.76rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; opacity:0; animation:fadeUp .7s ease .4s both; }
.hero__local { font-size:.92rem; color:var(--ink-soft); margin-bottom:1.6rem; opacity:0; animation:fadeUp .7s ease .5s both; }
.hero__lead { max-width:46ch; font-size:1.05rem; color:var(--ink-soft); opacity:0; animation:fadeUp .7s ease .6s both; }
.hero__cta { display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2.2rem; opacity:0; animation:fadeUp .7s ease .75s both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
/* MOLDURA QUE SE DESENHA: dois filetes dourados crescem na carga */
.hero__photo { position:relative; max-width:392px; justify-self:end; width:100%; padding:18px; }
.hero__photo::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; animation:drawX 1s ease .5s both; }
.hero__photo::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; animation:drawX 1s ease .7s both; }
@keyframes drawX { to{transform:scaleX(1);} }
.hero__frame { position:relative; width:100%; aspect-ratio:3/4; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px var(--gold-soft), var(--shadow); opacity:0; animation:fadeUp 1s ease .55s both; }
.hero__frame img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; animation:kenburns 18s ease-in-out infinite alternate; }
.hero__photo:hover .hero__frame img { transform:scale(1.04); }
.hero__frame::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(120deg,transparent 44%,rgba(255,250,238,.5) 50%,transparent 56%); transform:translateX(-120%); animation:sheen 6s ease-in-out 1.6s infinite; }
@keyframes kenburns { from{transform:scale(1);} to{transform:scale(1.06);} }
@keyframes sheen { 0%,100%{transform:translateX(-120%);} 55%,70%{transform:translateX(120%);} }
.hero__sticker { position:absolute; z-index:3; top:1.4rem; left:.4rem; background:var(--olive); color:var(--gold-soft); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; padding:.5rem 1rem; border-radius:2px; white-space:nowrap; box-shadow:var(--shadow-sm); opacity:0; animation:fadeUp .6s ease 1s both; }

.countdown { display:flex; gap:1.2rem; margin-top:2.8rem; flex-wrap:wrap; }
.countdown__box { display:grid; place-items:center; text-align:center; min-width:62px; padding-bottom:.5rem; border-bottom:1px solid var(--gold-soft); opacity:0; animation:fadeUp .6s ease both; }
.countdown__box:nth-child(1){animation-delay:.85s;} .countdown__box:nth-child(2){animation-delay:.95s;} .countdown__box:nth-child(3){animation-delay:1.05s;} .countdown__box:nth-child(4){animation-delay:1.15s;}
.countdown__box strong { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:600; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.countdown__box span { font-size:.54rem; text-transform:uppercase; letter-spacing:.22em; color:var(--gold); font-weight:600; margin-top:.45rem; }

.section-title { font-size:clamp(2rem,5vw,3.2rem); color:var(--ink); margin-bottom:2rem; }
.section-title--center { text-align:center; margin-left:auto; margin-right:auto; max-width:22ch; }
.section-title--center::after { content:''; display:block; width:2.6rem; height:1px; background:var(--gold); margin:1rem auto 0; }

.intro { padding-top:5rem; padding-bottom:4rem; text-align:center; border-top:1px solid var(--line-soft); max-width:var(--maxw); margin:0 auto; }
.intro__inner { max-width:640px; margin:0 auto; } .intro__eyebrow { justify-content:center; }
.intro h2 { font-size:clamp(2rem,6vw,3.4rem); color:var(--ink); margin-bottom:1.8rem; }
.intro p { color:var(--ink-soft); font-size:1.05rem; margin-bottom:1rem; }
.intro__sign { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.9rem; color:var(--gold); margin-top:1.5rem; }

.polaroids { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:1.3rem; margin-top:3rem; }
.polaroid { position:relative; width:150px; text-align:center; transition:transform .25s; }
.polaroid img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px; border:1px solid var(--gold-soft); box-shadow:var(--shadow-sm); display:block; }
.polaroid:hover { transform:translateY(-6px); }
.polaroid figcaption { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.05rem; color:var(--ink-soft); margin-top:.55rem; }

.acoes { padding-top:4rem; padding-bottom:4rem; max-width:var(--maxw); margin:0 auto; }
.acoes__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.acao { display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; text-decoration:none; color:var(--ink); padding:2.2rem 1.8rem; border-radius:var(--radius); background:var(--card); border:1px solid var(--line-soft); transition:border-color .2s,transform .2s,box-shadow .2s; }
.acao:hover { border-color:var(--gold-soft); transform:translateY(-5px); box-shadow:var(--shadow-sm); }
.acao__icon { font-size:1.6rem; line-height:1; } .acao__titulo { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.5rem; color:var(--ink); } .acao__txt { font-size:.9rem; color:var(--ink-soft); }
.acao__cta { margin-top:.4rem; font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

.horarios { background:linear-gradient(160deg, var(--olive), var(--olive-dk)); color:#efe9dd; padding-top:4.5rem; padding-bottom:4.5rem; border-radius:var(--radius); margin:1rem auto 0; max-width:var(--maxw); }
.horarios .section-title { color:#f4efe4; } .horarios .section-title span { color:var(--gold-soft); } .horarios .section-title--center::after { background:var(--gold-soft); }
.timeline { max-width:760px; margin:0 auto; display:flex; flex-direction:column; }
.evento { display:flex; align-items:baseline; gap:2rem; padding:1.8rem 0; border-top:1px solid rgba(239,233,221,.22); } .evento:last-child { border-bottom:1px solid rgba(239,233,221,.22); }
.evento__hora { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(2.4rem,5vw,3.6rem); line-height:.9; color:var(--gold-soft); min-width:4.5ch; font-variant-numeric:tabular-nums; }
.evento__corpo h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:#f4efe4; margin-bottom:.3rem; } .evento__corpo p { font-size:.92rem; color:rgba(239,233,221,.82); } .evento__emoji { font-size:1.1rem; }
.horarios__local { text-align:center; margin-top:2rem; letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; color:var(--gold-soft); }

.historia { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding-top:5rem; padding-bottom:4.5rem; max-width:var(--maxw); margin:0 auto; }
.historia__text p { margin-bottom:1rem; color:var(--ink-soft); }
.historia__assinatura { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.6rem; color:var(--gold); margin-top:1.4rem; }

.como { padding-top:4.5rem; padding-bottom:4.5rem; border-top:1px solid var(--line-soft); max-width:var(--maxw); margin:0 auto; }
.como__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.como__card { position:relative; padding:2rem 1.7rem; text-align:center; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); }
.como__num { display:inline-grid; place-items:center; width:3rem; height:3rem; margin:0 auto 1rem; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.4rem; color:var(--gold); border:1px solid var(--gold-soft); border-radius:50%; }
.como__card h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:var(--ink); margin-bottom:.5rem; } .como__card p { font-size:.9rem; color:var(--ink-soft); }

.presentes { padding-top:5rem; padding-bottom:5rem; max-width:var(--maxw); margin:0 auto; }
.filtros { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-bottom:2.8rem; }
.filtro { background:transparent; border:1px solid var(--line); color:var(--ink-soft); padding:.55rem 1.3rem; border-radius:var(--radius-sm); cursor:pointer; font-family:'Poppins',sans-serif; font-size:.64rem; font-weight:500; text-transform:uppercase; letter-spacing:.2em; transition:all .16s; }
.filtro:hover { border-color:var(--gold); color:var(--gold); } .filtro.is-active { background:var(--olive); color:var(--paper); border-color:var(--olive); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.6rem; }
.card { background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s,border-color .2s,box-shadow .2s; }
.card:hover { transform:translateY(-5px); border-color:var(--gold-soft); box-shadow:var(--shadow-sm); }

.scene { position:relative; aspect-ratio:334/358; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 50% 36%, color-mix(in srgb,var(--gold) 10%,transparent), transparent 60%), var(--paper-2); border-bottom:1px solid var(--line-soft); }
.sticker-mode .grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.6rem; }
.sticker-mode .scene { aspect-ratio:auto; height:200px; }
.scene:has(.scene__sticker--foto) { aspect-ratio:4/3; height:auto; }
.scene__sticker { position:relative; z-index:2; align-self:center; justify-self:center; margin:0; width:auto; height:auto; max-width:92%; max-height:184px; object-fit:contain; object-position:center; opacity:1; filter:none; }
.scene__sticker--foto { width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; padding:0 !important; }
.scene__sticker.is-framed { align-self:center; margin-top:0; height:88%; max-width:92%; border-radius:0; box-shadow:none; filter:none; }

.card__body { padding:1.2rem 1.2rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.card__nome { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600; line-height:1.15; color:var(--ink); margin-bottom:.4rem; }
.card__desc { font-size:.85rem; color:var(--ink-soft); flex:1; margin-bottom:1.1rem; }
.card__foot { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.card__preco { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:600; color:var(--gold); font-variant-numeric:tabular-nums; }
.card__pago { font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--olive-dk); background:transparent; border:1px solid var(--gold-soft); padding:.35rem .7rem; border-radius:2px; }
.card__custom-row { display:flex; align-items:center; gap:.5rem; border:1px solid var(--line); border-radius:var(--radius-sm); padding:.5rem .8rem; background:var(--paper); } .card__custom-row:focus-within { border-color:var(--gold); }
.card__cifrao { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600; color:var(--gold); }
.card__valor-input { flex:1; border:none; outline:none; background:transparent; font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600; color:var(--ink); width:100%; }
.card__custom-hint { font-size:.76rem; color:var(--ink-soft); }

.faq { padding-top:4rem; padding-bottom:5rem; max-width:820px; margin:0 auto; }
.faq__list { display:flex; flex-direction:column; gap:.7rem; }
.faq details { background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); padding:1.05rem 1.3rem; cursor:pointer; }
.faq summary { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.2rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::after { content:'+'; color:var(--gold); font-size:1.5rem; line-height:1; } .faq details[open] summary::after { content:'\2013'; }
.faq details p { margin-top:.8rem; font-size:.92rem; color:var(--ink-soft); }

.rsvp { max-width:620px; margin:0 auto; padding:4rem 1.5rem; }
.rsvp__lead { text-align:center; color:var(--ink-soft); margin:-.6rem 0 2rem; }
.rsvp__form { display:grid; gap:1.2rem; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); padding:2.2rem; }
.rsvp__campo { display:grid; gap:.4rem; }
.rsvp__campo > span,.rsvp__campo legend { font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--gold); }
.rsvp__campo input[type="text"],.rsvp__campo input[type="number"],.rsvp__campo textarea { width:100%; padding:.8rem .95rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); font:inherit; }
.rsvp__campo input::placeholder,.rsvp__campo textarea::placeholder { color:color-mix(in srgb,var(--ink-soft) 70%,transparent); }
.rsvp__campo input:focus,.rsvp__campo textarea:focus { outline:none; border-color:var(--gold); }
.rsvp__campo textarea { resize:vertical; }
.rsvp__opcoes { border:none; } .rsvp__opcoes label { display:inline-flex; align-items:center; gap:.4rem; margin-right:1.5rem; cursor:pointer; } .rsvp__opcoes input { accent-color:var(--gold); }
.rsvp__form .btn { justify-self:start; } .rsvp__msg { min-height:1.2em; font-size:.92rem; color:var(--gold); }

.footer { background:var(--olive-dk); color:#efe9dd; text-align:center; padding:4rem 6vw; border-top:3px solid var(--gold); }
.footer__names { font-size:clamp(2.2rem,6vw,3.4rem); color:#f4efe4; }
.footer__date { letter-spacing:.4em; color:var(--gold-soft); margin:.6rem 0 1rem; font-size:.8rem; font-variant-numeric:tabular-nums; }
.footer__small { font-size:.82rem; color:rgba(239,233,221,.72); }

.modal { position:fixed; inset:0; z-index:100; background:rgba(39,36,31,.6); backdrop-filter:blur(5px); display:none; place-items:center; padding:1.5rem; }
.modal.is-open { display:grid; }
.modal__box { background:var(--card); border:1px solid var(--gold-soft); border-radius:var(--radius); padding:2.5rem 2rem 2rem; max-width:410px; width:100%; text-align:center; position:relative; box-shadow:var(--shadow); animation:pop .25s ease; }
@keyframes pop { from{transform:scale(.92);opacity:0;} to{transform:scale(1);opacity:1;} }
.modal__close { position:absolute; top:.6rem; right:1rem; background:none; border:none; font-size:1.8rem; color:var(--ink-soft); cursor:pointer; line-height:1; }
.modal__emoji { font-size:3rem; } .modal__box h3 { font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:var(--ink); margin:.4rem 0; }
.modal__nome { color:var(--ink-soft); font-weight:400; } .modal__valor { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:600; color:var(--gold); margin:.4rem 0 1rem; }
.modal__instrucao { font-size:.88rem; color:var(--ink-soft); margin-bottom:1.5rem; } .modal__ok { width:100%; justify-content:center; }
.modal__valor-edit { display:flex; flex-direction:column; gap:.7rem; margin:.4rem 0 .5rem; text-align:left; }
.modal__valor-edit[hidden] { display:none !important; } .modal__valor-edit .card__custom-row { padding:.7rem 1rem; }
.modal__valor-edit .card__valor-input { font-size:1.9rem; text-align:center; } .modal__valor-edit .card__custom-hint { text-align:center; }
.is-hidden { display:none !important; }

@media (max-width:900px) {
  .nav__links { display:none; }
  .hero, .historia { grid-template-columns:1fr; gap:2.5rem; }
  .hero__photo { order:-1; max-width:300px; margin:0 auto; justify-self:center; }
  .acoes__grid, .como__grid { grid-template-columns:1fr; }
  .polaroid { width:130px; }
}
@media (prefers-reduced-motion:reduce) {
  .scene__fx, .hero__frame, .hero__frame img, .hero__photo::before, .hero__photo::after, .anim-el,
  .hero__eyebrow, .hero__title, .hero__date, .hero__local, .hero__lead, .hero__cta, .hero__sticker, .countdown__box { animation:none !important; opacity:1 !important; transform:none !important; }
  .hero__frame::after { animation:none !important; opacity:0; }
  .scene__fx { opacity:.85; }
  html { scroll-behavior:auto; }
}

/* mosaico: escada (alturas alternadas) */
.polaroids { align-items:center; gap:1rem; }
.polaroid:nth-child(odd) { transform:translateY(-16px); }
.polaroid:nth-child(even){ transform:translateY(16px); }
.polaroid:nth-child(3)   { transform:translateY(0) scale(1.1); z-index:2; }
.polaroid:hover { transform:translateY(0) scale(1.12); z-index:5; }