/* =========================================================
   Laura Tortato Maioky — Batizado
   Memorial / cápsula do tempo · v1
   ========================================================= */

:root{
  --ink:        #2a2634;
  --ink-soft:   #635c70;
  --ink-faint:  #928b9d;
  --cream:      #faf6f0;
  --cream-2:    #f4ece1;
  --paper:      #fffdf9;
  --rose:       #e3aa9c;
  --rose-soft:  #f7ece7;
  --rose-deep:  #c1806f;
  --gold:       #c9a04f;
  --gold-light: #e3c37a;
  --gold-pale:  #f0e2c4;
  --water:      #9db9c9;
  --night:      #171b2a;
  --night-2:    #232842;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.22,.68,.24,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--gold-pale); color:var(--ink); }

/* ---------- textura de papel ---------- */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.045; transform:translateZ(0);
  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='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- fio dourado (desenha conforme o scroll) ---------- */
.thread{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; pointer-events:none; opacity:.28;
  transform:translateZ(0);
}
@media (max-width:760px){ .thread{ opacity:.16; } }

@supports (animation-timeline:scroll()){
  #threadPath{
    animation:desenhaFio linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes desenhaFio{
    from{ stroke-dashoffset:var(--fio-comp,3000); }
    to  { stroke-dashoffset:0; }
  }
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; gap:clamp(1rem,4vw,3rem);
  padding:.85rem clamp(1.1rem,4vw,2.4rem);
  background:rgba(250,246,240,.9);
  backdrop-filter:blur(8px) saturate(1.15);
  -webkit-backdrop-filter:blur(8px) saturate(1.15);
  border-bottom:1px solid rgba(42,38,52,.07);
  transform:translateY(-102%);
  transition:transform .55s var(--ease);
}
.nav.is-visible{ transform:translateY(0); }
.nav__mark{
  flex:0 0 auto; display:block; line-height:0;
  transition:opacity .3s var(--ease);
}
.nav__mark img{ width:30px; height:auto; }
.nav__mark:hover{ opacity:.72; }
.nav ul{
  display:flex; gap:clamp(.9rem,2.6vw,2rem);
  list-style:none; margin:0; padding:0;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.nav ul::-webkit-scrollbar{ display:none; }
.nav a{
  text-decoration:none; white-space:nowrap;
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); padding:.35rem 0;
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.nav a:hover{ color:var(--ink); border-color:var(--gold); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; z-index:1;
  min-height:100vh;   /* reserva para navegadores antigos */
  min-height:100svh;  /* altura realmente visível no celular */
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  overflow:hidden;
  padding:clamp(5rem,12vh,7rem) 0 clamp(5rem,12vh,7rem);
}

/* fundo: a própria foto, desfocada, como uma atmosfera de cor */
.hero__bg{ position:absolute; inset:-6%; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  filter:blur(56px) saturate(.92) brightness(.44);
  transform:scale(1.08);
  animation:respirar 34s ease-in-out infinite alternate;
}
@keyframes respirar{ from{ transform:scale(1.08); } to{ transform:scale(1.18); } }

.hero__wash{
  position:absolute; inset:0;
  background:
    radial-gradient(62% 56% at 50% 46%, rgba(28,24,44,.06), rgba(19,17,32,.82) 100%),
    linear-gradient(to bottom, rgba(19,17,32,.62) 0%, transparent 24%, transparent 72%, rgba(14,12,24,.94) 100%);
}

/* anéis de luz — a água do batismo */
.ripples{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:0; }
.ripples span{
  position:absolute; left:50%; top:50%;
  width:200px; height:200px; margin:-100px 0 0 -100px;
  border:1px solid rgba(227,195,122,.45); border-radius:50%;
  opacity:0; animation:ripple 10s var(--ease) infinite;
}
.ripples span:nth-child(2){ animation-delay:3.4s; }
.ripples span:nth-child(3){ animation-delay:6.8s; }
@keyframes ripple{
  0%   { transform:scale(.35); opacity:0; }
  14%  { opacity:.42; }
  100% { transform:scale(2.9); opacity:0; }
}

/* grade do hero */
.hero__grid{
  position:relative; z-index:2;
  width:100%; max-width:1060px;
  padding:0 clamp(1.5rem,5vw,3rem);
  display:grid; gap:clamp(2.4rem,4.5vw,3.6rem);
  grid-template-columns:auto auto; justify-content:center; align-items:center;
}

/* retrato emoldurado */
.hero__portrait{ position:relative; display:flex; justify-content:center; }
.frame{
  position:relative; z-index:1; overflow:hidden; border-radius:2px;
  width:clamp(250px,34vw,420px); aspect-ratio:3/4;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(227,195,122,.28);
  opacity:0; animation:retrato 1.8s var(--ease) .2s forwards;
}
.frame img{
  width:100%; height:100%; object-fit:cover; object-position:50% 32%;
  animation:kenburns 30s var(--ease) forwards;
}
@keyframes kenburns{ from{ transform:scale(1.1); } to{ transform:scale(1); } }
@keyframes retrato{
  from{ opacity:0; transform:translateY(24px) scale(.97); }
  to  { opacity:1; transform:none; }
}
.frame__rule{
  position:absolute; inset:11px; border:1px solid rgba(255,250,240,.34);
  pointer-events:none;
}

/* texto do hero */
.hero__inner{ text-align:left; max-width:32rem; }

.ornament{
  width:clamp(150px,20vw,220px); height:auto; margin:0 0 1.5rem;
  display:block; opacity:0;
  animation:fadeUp 1.5s var(--ease) .5s forwards;
}
.ornament .ln,.ornament .dr{ fill:none; stroke:var(--gold-light); stroke-width:1.1; }
.ornament .dr{ stroke-width:1.3; }
.ornament .dt{ fill:var(--gold-light); }

.hero__eyebrow{
  margin:0 0 1rem;
  font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-light);
  opacity:0; animation:fadeUp 1.4s var(--ease) .7s forwards;
}
.hero__name{ margin:0; display:flex; flex-direction:column; align-items:flex-start; }
.hero__name span{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.4rem,7vw,6.5rem); line-height:.9;
  color:#fffaf3; letter-spacing:.005em;
  text-shadow:0 6px 46px rgba(0,0,0,.45);
  opacity:0; animation:heroName 1.9s var(--ease) .85s forwards;
}
.hero__name em{
  font-style:normal; font-family:var(--sans); font-weight:300;
  font-size:clamp(.7rem,1.3vw,.9rem);
  letter-spacing:.46em; text-indent:.5em; text-transform:uppercase;
  color:rgba(255,250,243,.82); margin-top:1.3rem;
  opacity:0; animation:fadeUp 1.5s var(--ease) 1.2s forwards;
}
@keyframes heroName{
  from{ opacity:0; transform:translateY(28px); filter:blur(14px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

.hero__sub{
  margin:1.3rem 0 0; font-size:.95rem; letter-spacing:.05em;
  color:rgba(255,250,243,.68);
  opacity:0; animation:fadeUp 1.5s var(--ease) 1.35s forwards;
}

.hero__gp{
  display:grid; grid-template-columns:auto 1fr;
  gap:.5rem 1.1rem; align-items:baseline;
  margin:1.4rem 0 0; justify-content:start;
  opacity:0; animation:fadeUp 1.5s var(--ease) 1.45s forwards;
}
.hero__gp dt{
  text-align:right; white-space:nowrap;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-light); opacity:.78;
}
.hero__gp dd{
  margin:0; font-family:var(--serif); font-size:1.14rem;
  line-height:1.3; color:rgba(255,250,243,.92);
}

.hero__seal{
  margin:2.1rem 0 0; max-width:430px;
  display:flex; align-items:center; gap:1.1rem;
  opacity:0; animation:fadeUp 1.6s var(--ease) 1.7s forwards;
}
.hero__seal-line{ flex:0 0 44px; height:1px; background:linear-gradient(90deg,rgba(227,195,122,.85),rgba(227,195,122,.15)); }
.hero__seal-line:last-child{ display:none; }
.hero__seal p{
  margin:0; flex:0 0 auto; max-width:340px;
  font-family:var(--serif); font-size:1.14rem; font-style:italic;
  line-height:1.5; color:rgba(255,250,243,.86);
}
.hero__seal strong{ color:var(--gold-light); font-style:normal; font-weight:500; }

.scrollcue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  z-index:3; width:26px; height:44px; border:1px solid rgba(255,250,243,.35);
  border-radius:14px; display:flex; justify-content:center; padding-top:8px;
  opacity:0; animation:fadeUp 1.4s var(--ease) 2.1s forwards;
}
.scrollcue span{
  width:2px; height:7px; border-radius:2px; background:var(--gold-light);
  animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(16px);opacity:0} 100%{opacity:0} }

/* hero empilhado no celular */
@media (max-width:880px){
  .hero{ padding:clamp(2.5rem,6vh,4rem) 0; }
  .hero__grid{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:1.5rem; }
  .frame{ width:auto; height:min(260px,33svh); }
  .ornament{ width:120px; margin-bottom:.8rem; }
  .hero__eyebrow{ font-size:.66rem; letter-spacing:.2em; margin-bottom:.8rem; }
  .hero__name span{ font-size:3.1rem; }
  .hero__name em{ margin-top:1rem; font-size:.66rem; letter-spacing:.42em; text-indent:.42em; }
  .hero__sub{ margin-top:1rem; font-size:.9rem; }
  .hero__gp{ margin-top:1.1rem; gap:.34rem .9rem; }
  .hero__gp dd{ font-size:1.05rem; }
  .hero__gp dt{ font-size:.57rem; }
  .hero__seal{ margin-top:1.4rem; }
  .hero__seal p{ font-size:.86rem; line-height:1.45; }
  .scrollcue{ bottom:1.1rem; }
  .hero__inner{ text-align:center; }
  .ornament{ margin:0 auto 1.4rem; }
  .hero__name{ align-items:center; }
  .hero__gp{ justify-content:center; gap:.45rem .9rem; text-align:left; }
  .hero__seal{ margin-left:auto; margin-right:auto; }
  .hero__seal-line:last-child{ display:block; }
  .hero__seal-line{ flex:1 1 auto; background:linear-gradient(90deg,transparent,rgba(227,195,122,.75),transparent); }
}

/* =========================================================
   BASE DE SEÇÃO
   ========================================================= */
main{ position:relative; z-index:1; }

.section{ position:relative; padding:clamp(5.5rem,14vh,9.5rem) 0; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem); }
.wrap--narrow{ max-width:740px; }

.kicker{
  margin:0 0 1rem; display:inline-flex; align-items:center; gap:.85rem;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); font-weight:400;
}
.kicker::before{ content:""; width:34px; height:1px; background:var(--gold); opacity:.6; }
.kicker--light{ color:var(--gold-light); }
.kicker--light::before{ background:var(--gold-light); }

.h2{
  margin:0 0 1.3rem; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem,5.4vw,3.9rem); line-height:1.06; letter-spacing:-.005em;
  text-wrap:balance;
  color:var(--ink);
}
.h2--light{ color:#fdf8ef; }

.lede{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.16rem,2.2vw,1.44rem); line-height:1.64;
  color:var(--ink-soft); max-width:60ch; text-wrap:pretty;
}
.lede--light{ color:rgba(253,248,239,.72); }

/* =========================================================
   CARTA
   ========================================================= */
.section--letter{
  background:linear-gradient(to bottom,var(--cream),var(--rose-soft));
  padding-bottom:clamp(3.25rem,7.5vh,5rem);
}
.letter{ margin-top:.6rem; }
.letter p{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.22rem,2.3vw,1.42rem); line-height:1.86;
  color:var(--ink-soft); margin:0 0 1.5rem;
}
.letter p strong{ color:var(--ink); font-weight:500; }
.letter p:first-of-type::first-letter{
  float:left; font-size:4.4em; line-height:.78;
  padding:.06em .1em 0 0; color:var(--gold); font-weight:400;
}
.letter__lead{
  border-left:1px solid var(--gold);
  padding-left:1.5rem; font-style:italic;
  font-size:clamp(1.34rem,2.7vw,1.66rem) !important;
  color:var(--ink) !important;
}
.letter__sign{
  text-align:right; font-style:italic; color:var(--gold) !important;
  font-size:1.14rem !important; margin-top:2.4rem !important;
}

/* =========================================================
   RITUAL / CARTÕES DE PERGUNTA
   ========================================================= */
.section--ritual{
  background:var(--rose-soft);
  padding-top:clamp(2.75rem,6.5vh,4.5rem);
  padding-bottom:clamp(2.75rem,6.5vh,4.5rem);
}
.cards{
  display:grid; gap:1.15rem; margin:2.6rem auto 2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
}
.card{
  position:relative; background:var(--paper);
  padding:2rem 1.6rem 2.4rem; border-radius:2px;
  rotate:var(--r,0deg);
  box-shadow:0 1px 2px rgba(42,38,52,.07), 0 12px 28px -14px rgba(42,38,52,.3);
  transition:transform .55s var(--ease), rotate .55s var(--ease), box-shadow .55s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:.55rem;
  border:1px solid rgba(201,160,79,.22); pointer-events:none;
}
.card:hover{
  transform:translateY(-8px); rotate:0deg;
  box-shadow:0 2px 4px rgba(42,38,52,.08), 0 26px 46px -18px rgba(42,38,52,.42);
}
.card__n{
  display:block; font-family:var(--serif); font-style:italic;
  font-size:1.62rem; color:var(--gold); opacity:.75; margin-bottom:.9rem;
}
.card p{
  margin:0 0 1.2rem; font-family:var(--serif);
  font-size:1.24rem; line-height:1.42; color:var(--ink);
}

/* as perguntas de marcar, como no papel impresso */
.card__ops{
  list-style:none; margin:-.2rem 0 1.2rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem .9rem;
}
.card__ops li{
  display:flex; align-items:center; gap:.42rem;
  font-family:var(--sans); font-size:.78rem; color:var(--ink-soft);
}
.card__ops li::before{
  content:""; flex:0 0 auto; width:10px; height:10px;
  border:1px solid rgba(42,38,52,.32);
}
.card::after{
  content:""; position:absolute; left:1.6rem; right:1.6rem; bottom:1.3rem;
  height:14px;
  background:repeating-linear-gradient(to bottom,transparent 0 6px,rgba(42,38,52,.14) 6px 7px);
}

.note{
  margin:0; padding-top:2.2rem; text-align:center;
  font-size:.92rem; letter-spacing:.04em; color:var(--ink-faint);
  border-top:1px solid rgba(201,160,79,.35);
}
.note strong{ color:var(--rose-deep); font-weight:500; }

/* =========================================================
   GALERIA
   ========================================================= */
.section--gallery{
  background:linear-gradient(to bottom,var(--rose-soft),var(--cream) 30%,var(--cream-2));
  padding-top:clamp(3.25rem,7.5vh,5rem);
}
.gallery{ max-width:1180px; margin:3.4rem auto 0; }
.gallery--colunas{
  display:flex; align-items:flex-start; gap:14px;
  padding:0 clamp(1.25rem,5vw,3rem);
}
.gal__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:14px; }

/* ---------- carrossel (celular) ---------- */
.gallery--slider{ margin-top:2.2rem; }
.slider{
  display:flex;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.slider::-webkit-scrollbar{ display:none; }

.gallery--slider .ph{
  flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
  margin:0; border-radius:0; box-shadow:none;
}
.gallery--slider .ph img{
  width:100%; height:min(64vh,500px);
  object-fit:cover; object-position:50% 40%;
}
.gallery--slider .ph::after,
.gallery--slider .ph__n{ display:none; }

.slider__info{ padding:1.35rem clamp(1.25rem,5vw,3rem) 0; text-align:center; }
.slider__cap{
  margin:0 0 1.15rem; min-height:1.6em;
  font-family:var(--serif); font-style:italic; font-size:1.08rem;
  line-height:1.4; color:var(--ink-soft);
}
.slider__n{
  display:block; margin-bottom:.4rem;
  font-family:var(--sans); font-style:normal;
  font-size:.62rem; letter-spacing:.22em; color:var(--gold);
}
.slider__pontos{ display:flex; flex-wrap:wrap; justify-content:center; }
.ponto{
  width:16px; height:16px; padding:0; border:0; background:none;
  display:grid; place-items:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ponto::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:rgba(42,38,52,.22);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.ponto.ativo::before{ background:var(--gold); transform:scale(1.7); }

.ph{
  position:relative; margin:0;
  overflow:hidden; border-radius:3px; cursor:zoom-in;
  background:var(--cream-2);
  box-shadow:0 1px 2px rgba(42,38,52,.08), 0 14px 30px -18px rgba(42,38,52,.4);
}
.ph img{
  width:100%; height:auto;
  filter:saturate(.93);
  opacity:0;
  transition:transform .8s var(--ease), opacity .7s var(--ease);
  will-change:transform;
}
.ph img.carregada{ opacity:1; }
.ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(23,20,32,.42),transparent 42%);
  opacity:0; transition:opacity .5s var(--ease);
}
.ph__n{
  position:absolute; left:1rem; bottom:.85rem; z-index:2;
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  color:var(--gold-light); opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.ph:hover img{ transform:scale(1.045); }
.ph:hover::after{ opacity:1; }
.ph:hover .ph__n{ opacity:1; transform:none; }

/* =========================================================
   FINAL DA PÁGINA — o pedido e o lacre, num bloco escuro só
   ========================================================= */
.finale{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(5.5rem,13vh,8.5rem) 0 clamp(6rem,14vh,9rem);
  background:linear-gradient(to bottom,#1f1c2e 0%,#171526 44%,#100f1a 100%);
  border-top:1px solid rgba(227,195,122,.3);
}
/* um clarão quente em cima (o pedido) e um frio embaixo (a noite) */
.finale__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 32% at 50% 10%, rgba(158,88,68,.32), transparent 72%),
    radial-gradient(72% 42% at 50% 88%, rgba(56,64,112,.45), transparent 74%);
}
/* dois anéis quase invisíveis, o eco da água do batismo */
.finale__rings{ position:absolute; left:50%; top:0; pointer-events:none; }
.finale__rings span{
  position:absolute; left:50%; top:0; border-radius:50%;
  border:1px solid rgba(227,195,122,.13);
}
.finale__rings span:first-child{ width:640px; height:640px; margin:-320px 0 0 -320px; }
.finale__rings span:last-child { width:1040px; height:1040px; margin:-520px 0 0 -520px; }

.finale__beat{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
}
.finale .lede{ text-align:center; text-wrap:balance; max-width:46ch; }

/* divisor: a gota do topo do site, de novo */
.divisor{
  position:relative; z-index:1;
  width:clamp(150px,22vw,210px);
  margin:clamp(4rem,9vh,6.5rem) auto;
}
.divisor svg{ width:100%; height:auto; display:block; }
.divisor .ln,.divisor .dr{ fill:none; stroke:var(--gold-light); stroke-width:1.1; opacity:.55; }
.divisor .dr{ stroke-width:1.3; }
.divisor .dt{ fill:var(--gold-light); opacity:.55; }

/* ---------- 1. o pedido ---------- */
.ico-cam{
  width:62px; height:auto; margin-bottom:2rem;
  fill:none; stroke:var(--gold-light); stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round; color:var(--gold-light);
  opacity:.9;
}
.btn{
  margin-top:2.8rem;
  display:inline-flex; align-items:center; gap:.75rem;
  padding:1.05rem 2.4rem; border-radius:999px;
  background:linear-gradient(180deg,#eed296,#c9a04f);
  color:#201c2b; border:0;
  font-size:.92rem; font-weight:500; letter-spacing:.09em;
  text-decoration:none;
  box-shadow:0 16px 36px -14px rgba(201,160,79,.7);
  transition:transform .4s var(--ease), filter .4s var(--ease), box-shadow .4s var(--ease);
}
.btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.btn:hover{
  transform:translateY(-3px); filter:brightness(1.07);
  box-shadow:0 24px 46px -14px rgba(201,160,79,.85);
}
.btn.is-placeholder{
  background:none; color:rgba(253,248,239,.5); font-weight:400;
  border:1px dashed rgba(227,195,122,.42); box-shadow:none; cursor:not-allowed;
}
.btn.is-placeholder:hover{ transform:none; filter:none; box-shadow:none; }

.btn__hint{
  margin:2.3rem 0 0; max-width:min(100%,620px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem 1.5rem;
  font-size:.76rem; letter-spacing:.1em; text-transform:lowercase;
  color:rgba(253,248,239,.4);
}
.btn__hint span{ white-space:nowrap; position:relative; }
.btn__hint span + span::before{
  content:"·"; position:absolute; left:-.85rem; opacity:.55;
}

@media (max-width:560px){
  .btn{
    padding:1rem 1.4rem; font-size:.82rem; letter-spacing:.06em;
    width:100%; max-width:330px; justify-content:center;
  }
  .btn__hint{
    margin-top:2.6rem;
    font-size:.72rem; letter-spacing:.08em;
    flex-direction:column; gap:.45rem;
  }
  .btn__hint span + span::before{ display:none; }
}

/* ---------- 2. o lacre ---------- */
.seal{
  margin-bottom:2.2rem;
  display:inline-grid; place-items:center;
}
.seal__aneis{ grid-area:1/1; width:96px; height:96px; overflow:visible; }
.seal__marca{ grid-area:1/1; width:53px; height:auto; }
.seal__edge circle{ fill:none; stroke:var(--gold); stroke-width:1; }
.seal__edge circle:first-child{
  stroke-dasharray:3 7; opacity:.75;
  transform-origin:60px 60px; animation:spin 44s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.countdown{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(.8rem,3vw,2.1rem); margin:3.4rem 0 1rem;
}
.cd{ display:flex; flex-direction:column; align-items:center; min-width:62px; position:relative; }
.cd + .cd::before{
  content:""; position:absolute; left:calc(-1 * clamp(.5rem,2vw,1.3rem));
  top:12%; bottom:32%; width:1px; background:rgba(227,195,122,.22);
}
.cd strong{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.3rem,7.5vw,4.2rem); line-height:1;
  color:var(--gold-light); font-variant-numeric:tabular-nums;
}
.cd span{
  margin-top:.7rem; font-size:.58rem; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(253,248,239,.42);
}
.cd__target{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:1.18rem; color:rgba(253,248,239,.6);
}
.cd__target strong{ font-style:normal; font-weight:400; color:var(--gold-light); }

@media (max-width:560px){
  .countdown{ gap:.7rem; margin-top:2.8rem; }
  .cd{ min-width:38px; }
  .cd strong{ font-size:1.75rem; }
  .cd span{ font-size:.52rem; letter-spacing:.2em; margin-top:.55rem; }
  .cd + .cd::before{ left:-.42rem; }
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.footer{
  position:relative; z-index:1;
  background:var(--cream); text-align:center;
  padding:clamp(4.5rem,10vh,7rem) 0 clamp(3rem,7vh,4.5rem);
}
.dove{
  width:74px; height:auto; margin:0 auto 2rem;
  fill:none; stroke:var(--gold); stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round; color:var(--gold);
}
.footer__name{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.95rem,4.6vw,2.85rem); color:var(--ink); line-height:1.15;
}
.footer__line{
  margin:.9rem 0 0; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); text-wrap:balance;
}
.footer__people{
  margin:2.4rem 0 0; font-size:.99rem; line-height:2; color:var(--ink-soft);
}
.footer__people strong{ font-weight:500; color:var(--ink); }
.footer__psalm{
  margin:2.8rem auto 0; max-width:34ch;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.24rem,2.7vw,1.58rem); color:var(--rose-deep);
}
.footer__meta{
  margin:3rem 0 0; padding-top:1.8rem;
  border-top:1px solid rgba(42,38,52,.09);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:8000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,15,24,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lb__figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.lb__figure img{
  max-width:92vw; max-height:82svh; max-height:82vh;
  width:auto; height:auto; object-fit:contain; border-radius:2px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  transform:scale(.96); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.lightbox.is-open .lb__figure img{ transform:none; opacity:1; }
.lb__figure figcaption{
  font-family:var(--serif); font-style:italic; font-size:.95rem;
  color:rgba(253,248,239,.55); letter-spacing:.04em;
}
.lb__close,.lb__nav{
  position:absolute; background:none; border:0; cursor:pointer;
  color:rgba(253,248,239,.7); font-family:var(--serif);
  transition:color .3s, transform .3s var(--ease);
  line-height:1; padding:.4rem .8rem;
}
.lb__close:hover,.lb__nav:hover{ color:var(--gold-light); }
.lb__close{ top:1rem; right:1.2rem; font-size:2.4rem; }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:3.4rem; }
.lb__nav--prev{ left:.4rem; }
.lb__nav--next{ right:.4rem; }
.lb__nav--prev:hover{ transform:translateY(-50%) translateX(-4px); }
.lb__nav--next:hover{ transform:translateY(-50%) translateX(4px); }
@media (max-width:600px){ .lb__nav{ font-size:2.4rem; } }

/* =========================================================
   REVEAL NO SCROLL
   ========================================================= */
.reveal{
  opacity:0; translate:0 26px;
  transition:opacity 1.05s var(--ease), translate 1.05s var(--ease);
}
.reveal.is-in{ opacity:1; translate:0 0; }

/* =========================================================
   ACESSIBILIDADE / MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .ornament,.hero__eyebrow,.hero__name span,.hero__name em,
  .hero__sub,.hero__seal,.scrollcue{ opacity:1; }
}


/* =========================================================
   CELULAR — respiros mais curtos, tudo mais junto
   ========================================================= */
@media (max-width:640px){

  /* menu: cabe inteiro na largura da tela */
  .nav{ padding:.7rem .8rem; gap:.7rem; }
  .nav__mark img{ width:23px; }
  .nav ul{ gap:.6rem; }
  .nav a{ font-size:.62rem; letter-spacing:.11em; }
  .nav__extra{ display:none; }

  /* respiro entre seções: de ~115px para ~70px */
  .section{ padding:4.4rem 0; }
  .section--letter{ padding-bottom:2.8rem; }
  .section--ritual{ padding-top:2.8rem; padding-bottom:2.8rem; }
  .section--gallery{ padding-top:2.8rem; }

  /* títulos e textos de abertura */
  .kicker{ font-size:.64rem; letter-spacing:.26em; margin-bottom:.8rem; }
  .kicker::before{ width:24px; }
  .h2{ margin-bottom:1rem; }

  /* a carta */
  .letter p{ margin-bottom:1.25rem; }
  .letter p:first-of-type::first-letter{ font-size:3.8em; }
  .letter__lead{ padding-left:1.1rem; }
  .letter__sign{ margin-top:1.8rem !important; }

  /* os cartões de pergunta */
  .cards{ gap:.85rem; margin:2.1rem auto 1.9rem; }
  .card{ padding:1.6rem 1.35rem 2rem; }
  .card__n{ margin-bottom:.7rem; }
  .card p{ margin-bottom:1.2rem; font-size:1.16rem; }
  .note{ padding-top:1.8rem; font-size:.86rem; }

  /* o final da página */
  .finale{ padding:4.4rem 0 5rem; }
  .divisor{ margin:3.2rem auto; width:140px; }
  .ico-cam{ width:54px; margin-bottom:1.5rem; }
  .seal{ margin-bottom:1.8rem; }
  .seal__aneis{ width:78px; height:78px; }
  .seal__marca{ width:43px; }
  .cd__target{ font-size:1.05rem; }

  /* rodapé */
  .footer{ padding:4.2rem 0 2.6rem; }
  .dove{ width:62px; margin-bottom:1.5rem; }
  .footer__people{ margin-top:1.9rem; line-height:1.9; font-size:.94rem; }
  .footer__line{ display:flex; flex-direction:column; gap:.3rem; letter-spacing:.16em; }
  .footer__dash{ display:none; }
  .footer__psalm{ margin-top:2.2rem; }
  .footer__meta{ margin-top:2.4rem; padding-top:1.4rem; font-size:.62rem; letter-spacing:.13em; }
}


/* =========================================================
   CELULAR DE TELA BAIXA (iPhone SE e afins, ou com a barra
   do navegador à mostra): a hero encolhe para caber inteira
   ========================================================= */
@media (max-width:880px) and (max-height:760px){
  .hero{ padding:1.6rem 0; }
  .hero__grid{ gap:1.1rem; }
  .ornament{ width:100px; margin-bottom:.6rem; }
  .hero__eyebrow{ margin-bottom:.6rem; font-size:.62rem; }
  .hero__name span{ font-size:2.8rem; }
  .hero__name em{ margin-top:.8rem; }
  .hero__sub{ margin-top:.8rem; font-size:.86rem; }
  .hero__gp{ margin-top:.9rem; gap:.28rem .8rem; }
  .hero__gp dd{ font-size:.98rem; }
  .hero__seal{ margin-top:1.1rem; }
  .hero__seal p{ font-size:.82rem; }
  .scrollcue{ bottom:.7rem; height:36px; }
}