/* ===========================================================
   Taís e Estêvão · estilo compartilhado
   Paleta inspirada no manual dos padrinhos:
   creme / marfim, amarelo-manteiga, verde-sálvia (eucalipto), carvão
   =========================================================== */

:root{
  --marfim:#FCFBF6;
  --creme:#F5F0E3;
  --creme-2:#EFE8D6;
  --manteiga:#E7CE86;
  --manteiga-suave:#F2E9C9;
  --sage:#9DB090;
  --sage-escuro:#5E7357;
  --sage-hover:#4C5F46;
  --oliva:#7E9276;
  --carvao:#3C3B38;
  --carvao-suave:#6E6C66;
  --linha:#E4DDCC;
  --sombra:0 20px 55px -30px rgba(60,59,56,.45);
  --sombra-suave:0 10px 30px -18px rgba(60,59,56,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--marfim);color:var(--carvao);
  font-family:"Montserrat",system-ui,sans-serif;font-weight:400;
  font-size:clamp(1rem,.5vw + .88rem,1.06rem);line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:var(--sage-escuro)}

h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1.08;margin:0;color:var(--carvao)}
p{margin:0 0 1rem}

.container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.container--estreito{max-width:820px}
@media(min-width:1600px){.container{max-width:1420px}}
.secao{padding:clamp(3.5rem,7vw,6.5rem) 0}
.secao--creme{background:var(--creme)}
.secao--sage{background:var(--sage);color:var(--marfim)}
section[id]{scroll-margin-top:78px}

.eyebrow{
  font-family:"Montserrat",sans-serif;font-weight:300;
  font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--carvao-suave);margin:0 0 .7rem;
}
.titulo{
  font-size:clamp(2.1rem,5vw,3.6rem);font-weight:500;letter-spacing:.02em;
}
.titulo--caps{text-transform:uppercase;letter-spacing:.12em;font-size:clamp(1.9rem,4.6vw,3.1rem)}
.lead{font-size:clamp(1.08rem,1.5vw,1.28rem);max-width:54ch;color:var(--carvao-suave);font-family:"Cormorant Garamond",serif;font-style:italic}

/* divisor botânico */
.divisor{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.4rem 0 0;color:var(--sage)}
.divisor::before,.divisor::after{content:"";height:1px;width:min(80px,18vw);background:currentColor;opacity:.6}
.divisor svg{width:26px;height:26px;flex:none}

/* ---------- Monograma / eucalipto ---------- */
.eucalipto{color:var(--sage);opacity:.85}

/* ===================== NAV ===================== */
.nav{position:sticky;top:0;z-index:50;background:rgba(252,251,246,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:62px}
.marca{font-family:"Cormorant Garamond",serif;font-size:1.5rem;font-weight:600;letter-spacing:.14em;text-decoration:none;color:var(--carvao)}
.marca span{color:var(--sage-escuro);margin:0 .12em}
.nav__links{display:flex;gap:1.5rem;align-items:center;list-style:none;margin:0;padding:0}
.nav__links a{
  text-decoration:none;font-weight:400;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--carvao);padding:.2rem 0;border-bottom:1.5px solid transparent;transition:.2s;
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--sage-escuro);border-color:var(--manteiga)}
.nav__cta{background:var(--sage-escuro);color:var(--marfim)!important;padding:.5rem .95rem;border-radius:2px;border-bottom:none!important}
.nav__cta:hover{background:var(--sage-hover)}
.nav__toggle{display:none;background:none;border:1px solid var(--linha);border-radius:6px;width:42px;height:36px;cursor:pointer;color:var(--carvao)}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:"";display:block;width:18px;height:1.5px;background:currentColor;margin:0 auto;position:relative}
.nav__toggle span::before{position:absolute;top:-6px}
.nav__toggle span::after{position:absolute;top:6px}

/* ===================== HERO ===================== */
.hero{position:relative;overflow:hidden;background:var(--marfim);text-align:center;padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem)}
.hero--pagina{padding:clamp(3rem,6vw,4.5rem) 0}
.hero__watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}
.hero__watermark span{font-family:"Great Vibes",cursive;font-size:clamp(16rem,42vw,34rem);color:var(--sage);opacity:.07;white-space:nowrap;line-height:1;transform:translateY(-4%)}
.hero__flor{position:absolute;z-index:0;pointer-events:none}
.hero__flor svg{width:100%;height:auto;display:block}
.hero__flor--tl{top:-10px;left:-20px;width:min(34vw,240px)}
.hero__flor--br{bottom:-20px;right:-20px;width:min(34vw,240px)}
.hero__flor--br svg{transform:rotate(180deg)}
.hero__conteudo{position:relative;z-index:1}
.hero__mono{font-family:"Cormorant Garamond",serif;font-size:1.6rem;font-weight:600;letter-spacing:.2em;color:var(--carvao)}
.hero__mono span{color:var(--sage-escuro)}
.hero__selo{font-family:"Montserrat",sans-serif;font-weight:300;letter-spacing:.4em;text-transform:uppercase;font-size:.8rem;color:var(--carvao-suave);margin:1.4rem 0 .4rem}
.hero__nomes{font-size:clamp(3rem,10vw,6.8rem);font-weight:500;letter-spacing:.01em;line-height:1}
.hero__nomes em{font-style:italic;color:var(--sage-escuro);font-weight:400}
.hero__data{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--carvao);margin-top:1rem}
.hero__local{font-size:.9rem;letter-spacing:.06em;color:var(--carvao-suave);margin-top:.3rem}
.hero__acoes{margin-top:2rem;display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ===================== BOTÕES ===================== */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;border:none;font-family:"Montserrat",sans-serif;
  font-weight:400;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.85rem 1.7rem;border-radius:2px;transition:transform .15s,background .2s,box-shadow .2s,color .2s;
}
.btn--principal{background:var(--sage-escuro);color:var(--marfim)}
.btn--principal:hover{background:var(--sage-hover);transform:translateY(-1px)}
.btn--contorno{background:transparent;border:1px solid var(--carvao);color:var(--carvao)}
.btn--contorno:hover{background:var(--carvao);color:var(--marfim)}
.btn--claro{background:var(--marfim);color:var(--sage-escuro);border:1px solid var(--linha)}
.btn--claro:hover{transform:translateY(-1px);box-shadow:var(--sombra-suave)}
.btn--largo{width:100%;text-align:center}

/* ===================== FOTOS (placeholder que troca sozinho) ===================== */
.foto-slot{position:relative;overflow:hidden;border-radius:4px;background:linear-gradient(135deg,var(--creme),var(--creme-2));aspect-ratio:4/3;box-shadow:var(--sombra-suave)}
.foto-slot::before{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;color:var(--carvao-suave);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:300}
.foto-slot::after{content:"";position:absolute;inset:12px;border:1px solid var(--sage);opacity:.4;border-radius:2px;pointer-events:none}
.foto-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* ===================== LINHA DO TEMPO ===================== */
.historia__intro{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.linha{position:relative;margin:0 auto;max-width:800px}
.linha::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:1.5px;background:linear-gradient(var(--sage),var(--manteiga))}
.marco{position:relative;padding:0 0 clamp(2.2rem,4vw,3.2rem) 54px}
.marco:last-child{padding-bottom:0}
.marco__ponto{position:absolute;left:11px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--marfim);border:1.5px solid var(--sage-escuro);z-index:2}
.marco__ponto::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--manteiga)}
.marco__cap{font-family:"Montserrat",sans-serif;font-weight:300;letter-spacing:.24em;text-transform:uppercase;font-size:.68rem;color:var(--sage-escuro);margin-bottom:.25rem}
.marco__titulo{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.35rem}
.marco__texto{color:var(--carvao-suave);margin:0;max-width:58ch}
/* linha do tempo em coluna única (rail à esquerda), cabe textos longos */
.marco__foto{margin-top:1.1rem;border-radius:6px;overflow:hidden;box-shadow:var(--sombra);max-width:420px}
.marco__foto img{width:100%;height:auto;display:block}

/* ===================== MOTIVOS ===================== */
.motivos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2.5rem}
.motivo{background:var(--marfim);border:1px solid var(--linha);border-radius:4px;padding:1.7rem 1.5rem}
.secao--creme .motivo{background:var(--marfim)}
.motivo__num{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.7rem;color:var(--sage-escuro);margin-bottom:.3rem}
.motivo h3{font-size:1.3rem;margin-bottom:.3rem}
.motivo p{margin:0;color:var(--carvao-suave);font-size:.97rem}

/* ===================== PADRINHOS ===================== */
.padrinhos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-top:2.5rem}
.padrinho{background:var(--marfim);border:1px solid var(--linha);border-radius:4px;padding:1.1rem 1rem;text-align:center;position:relative}
.padrinho::before{content:"";display:block;width:22px;height:1px;background:var(--manteiga);margin:0 auto .6rem}
.padrinho__nome{font-family:"Cormorant Garamond",serif;font-size:1.25rem;line-height:1.2}
.dresscode{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.6rem}
.dc-card{background:var(--manteiga-suave);border-radius:4px;padding:1.5rem 1.5rem}
.dc-card h3{font-size:1.3rem;margin-bottom:.5rem}
.dc-card p{margin:0;color:var(--carvao-suave);font-size:.97rem}
.dc-card small{display:block;font-family:"Montserrat";font-weight:300;letter-spacing:.2em;text-transform:uppercase;font-size:.68rem;color:var(--sage-escuro);margin-bottom:.4rem}

/* ===================== VERSO / MISSÃO ===================== */
.verso{text-align:center;max-width:680px;margin:clamp(3rem,6vw,4.5rem) auto 0}
.verso__texto{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.5;color:var(--carvao)}
.verso__ref{font-family:"Montserrat";font-weight:300;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;color:var(--sage-escuro);margin-top:1rem}

/* ===================== INFO (casamento / chá) ===================== */
.info__grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.6rem;margin-top:2.6rem}
.info__item{border-top:1px solid var(--linha);padding-top:1.1rem}
.info__item h3{font-size:1.35rem;margin-bottom:.3rem}
.info__item p{margin:0;color:var(--carvao-suave);font-size:.98rem}
.importante{background:var(--manteiga-suave);border-radius:4px;padding:clamp(1.8rem,4vw,2.6rem);margin-top:2.8rem;text-align:center}
.importante h3{font-size:clamp(1.8rem,4vw,2.4rem);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.4rem}
.importante__itens{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.4rem}
.importante__item p{margin:.4rem 0 0;color:var(--carvao);font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.2rem}
.importante__icone{font-size:1.6rem}

/* ===================== PRESENTES ===================== */
.presentes__intro{max-width:60ch;margin-bottom:1.8rem}
.pix-destaque{background:var(--sage);color:var(--marfim);border-radius:4px;padding:1.4rem 1.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2.4rem}
.pix-destaque p{margin:0;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.25rem;color:var(--marfim)}
.grade-presentes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem}
.presente{background:var(--marfim);border:1px solid var(--linha);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.presente:hover{box-shadow:var(--sombra);transform:translateY(-3px)}
.presente__corpo{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.presente__tag{font-family:"Montserrat";font-weight:300;letter-spacing:.16em;text-transform:uppercase;font-size:.64rem;color:var(--sage-escuro);margin-bottom:.35rem}
.presente__nome{font-family:"Cormorant Garamond",serif;font-size:1.28rem;line-height:1.2;margin-bottom:.3rem}
.presente__preco{color:var(--carvao-suave);font-size:.92rem;margin-bottom:1rem}
.presente__acoes{margin-top:auto;display:flex;flex-direction:column;gap:.5rem}
.presente__acoes .btn{padding:.6rem 1rem;font-size:.7rem}
.presente__pix{background:none;border:none;color:var(--sage-escuro);font-family:"Montserrat";font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:.2rem;text-decoration:underline;text-underline-offset:3px}
.outros{margin-top:2.5rem;background:var(--creme);border-radius:4px;padding:1.6rem 1.8rem}
.outros h3{font-size:1.4rem;margin-bottom:.3rem}
.outros p{color:var(--carvao-suave);font-size:.92rem;margin-bottom:1rem}
.outros__links{display:flex;flex-wrap:wrap;gap:.6rem}
.outros__links a{display:inline-block;background:var(--marfim);border:1px solid var(--linha);border-radius:2px;padding:.5rem .9rem;font-size:.78rem;letter-spacing:.06em;text-decoration:none;color:var(--carvao);transition:.2s}
.outros__links a:hover{border-color:var(--sage-escuro);color:var(--sage-escuro)}

/* ===================== MODAL PIX ===================== */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:1.5rem;background:rgba(60,59,56,.5);backdrop-filter:blur(4px)}
.modal.aberto{display:flex}
.modal__caixa{background:var(--marfim);border-radius:6px;max-width:430px;width:100%;padding:2.2rem;position:relative;box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.modal__fechar{position:absolute;top:.7rem;right:.9rem;background:none;border:none;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--carvao-suave)}
.modal__caixa h3{font-size:1.8rem;margin-bottom:.2rem}
.modal__sub{color:var(--carvao-suave);font-size:.92rem;margin-bottom:1.3rem}
.modal__rotulo{font-family:"Montserrat";font-weight:300;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--carvao-suave);margin-bottom:.35rem}
.modal__chave{display:flex;gap:.5rem;align-items:stretch}
.modal__chave input{flex:1;border:1px solid var(--linha);border-radius:3px;padding:.75rem .8rem;font-family:"Montserrat";font-size:1rem;background:var(--creme);color:var(--carvao);letter-spacing:.03em}
.modal__nota{font-size:.86rem;color:var(--carvao-suave);margin:1.2rem 0 0}

/* ===================== RSVP ===================== */
.rsvp__grade{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.rsvp__texto .titulo{margin-bottom:1rem}
.form{background:var(--marfim);padding:1.9rem;border-radius:4px;box-shadow:var(--sombra);border:1px solid var(--linha)}
.campo{margin-bottom:1.1rem}
.campo label{display:block;font-family:"Montserrat";font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.35rem}
.campo input,.campo select,.campo textarea{width:100%;border:1px solid var(--linha);border-radius:3px;padding:.75rem .85rem;font-family:"Montserrat";font-size:1rem;background:#fff;color:var(--carvao)}
.campo textarea{min-height:88px;resize:vertical}
.form__ok{display:none;text-align:center;padding:1rem 0}
.form__ok h3{color:var(--sage-escuro);font-size:2rem;margin-bottom:.4rem}
.form.enviado .form__campos{display:none}
.form.enviado .form__ok{display:block}

/* ===================== RODAPÉ ===================== */
.rodape{background:var(--sage);color:var(--marfim);text-align:center;padding:clamp(3rem,6vw,4.5rem) 0}
.rodape__mono{font-family:"Cormorant Garamond",serif;font-size:2.4rem;font-weight:600;letter-spacing:.16em}
.rodape__mono span{margin:0 .1em}
.rodape__data{letter-spacing:.3em;text-transform:uppercase;font-size:.78rem;margin-top:.5rem;opacity:.9}
.rodape__nav{margin-top:1.4rem;display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap}
.rodape__nav a{color:var(--marfim);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;opacity:.9;border-bottom:1px solid transparent}
.rodape__nav a:hover{border-color:var(--manteiga)}
.rodape small{display:block;margin-top:1.6rem;opacity:.7;font-size:.8rem}

/* ===================== MÚSICA (player flutuante) ===================== */
.musica{position:fixed;right:1rem;bottom:1rem;z-index:110;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.musica__btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--sage-escuro);color:var(--marfim);border:none;border-radius:999px;padding:.7rem 1.1rem;font-family:"Montserrat";font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:var(--sombra);transition:background .2s}
.musica__btn:hover{background:var(--sage-hover)}
.musica__player{width:min(320px,80vw);border-radius:12px;overflow:hidden;box-shadow:var(--sombra);display:none;background:var(--marfim)}
.musica__player.aberto{display:block}
.musica__player iframe{display:block;border:0;width:100%;height:80px}

/* ===================== REVEAL / MOVIMENTO ===================== */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.visivel{opacity:1;transform:none}
.js .reveal-left{opacity:0;transform:translateX(-46px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.js .reveal-right{opacity:0;transform:translateX(46px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.js .reveal-scale{opacity:0;transform:scale(.9);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal-left.visivel,.reveal-right.visivel,.reveal-scale.visivel{opacity:1;transform:none}
@media(max-width:760px){.reveal-left,.reveal-right{transform:translateY(22px)}}

/* pétalas de rosa caindo */
.petalas{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:40}
.petala{position:absolute;top:-10vh;will-change:transform;animation:petala-cair var(--dur,12s) linear var(--delay,0s) infinite}
.petala i{display:block;width:var(--sz,14px);height:calc(var(--sz,14px) * .82);background:radial-gradient(120% 120% at 30% 20%,var(--c2,#FFF6DE),var(--c1,#E7CE86));border-radius:0 100% 0 100%;opacity:var(--op,.7);box-shadow:inset 0 -2px 5px rgba(180,150,70,.25);will-change:transform;animation:petala-girar var(--swd,4s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes petala-cair{to{transform:translateY(116vh)}}
@keyframes petala-girar{from{transform:translateX(-14px) rotate(-8deg)}to{transform:translateX(14px) rotate(310deg)}}

/* parallax */
[data-parallax]{will-change:transform}

/* vinha que preenche na rolagem */
.linha__progresso{position:absolute;left:19px;top:8px;width:1.5px;height:0;background:linear-gradient(var(--sage-escuro),var(--manteiga));z-index:1;pointer-events:none}
/* vinha sempre no rail à esquerda */

/* ===================== RESPONSIVO ===================== */
@media(max-width:860px){.rsvp__grade,.dresscode{grid-template-columns:1fr}}
@media(max-width:720px){
  .nav__links{position:absolute;top:62px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--marfim);border-bottom:1px solid var(--linha);padding:.4rem 1.5rem 1.1rem;display:none;box-shadow:var(--sombra)}
  .nav__links.aberto{display:flex}
  .nav__links a{padding:.8rem 0;border-bottom:1px solid var(--linha)}
  .nav__cta{text-align:center;margin-top:.7rem}
  .nav__toggle{display:block}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1!important;transform:none!important}
  .petalas{display:none!important}
  [data-parallax]{transform:none!important}
}

/* ===================== TOPO MINIMALISTA (só monograma) ===================== */
.topo{position:sticky;top:0;z-index:50;background:rgba(252,251,246,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.topo__inner{display:flex;justify-content:center;align-items:center;height:58px}
.topo .marca{font-size:1.5rem}

/* ===================== SLIDESHOW ===================== */
.slideshow{position:relative;width:100%;max-width:470px;margin:2rem auto 0;aspect-ratio:4/5;border-radius:6px;overflow:hidden;box-shadow:var(--sombra);background:var(--creme)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;display:flex;align-items:center;justify-content:center;overflow:hidden}
.slide.ativo{opacity:1}
.slide::before{content:"";position:absolute;inset:0;background:var(--img) center/cover no-repeat;filter:blur(20px) brightness(.82);transform:scale(1.18)}
.slide img{position:relative;max-width:100%;max-height:100%;object-fit:contain}
.slideshow__pts{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:6px;justify-content:center;z-index:2}
.slideshow__pts b{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .3s;cursor:pointer}
.slideshow__pts b.on{background:#fff}

/* ===================== CONTAGEM REGRESSIVA ===================== */
.contagem{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}
.contagem__cel{min-width:76px;background:var(--marfim);border:1px solid var(--linha);border-radius:6px;padding:.75rem .5rem}
.contagem__n{font-family:"Cormorant Garamond",serif;font-size:2.1rem;line-height:1;color:var(--sage-escuro);font-weight:600}
.contagem__l{font-family:"Montserrat";font-weight:300;letter-spacing:.16em;text-transform:uppercase;font-size:.6rem;color:var(--carvao-suave);margin-top:.35rem}

/* ===================== GALERIA (momentos) ===================== */
.galeria{columns:3 220px;column-gap:14px;margin-top:2.5rem}
.galeria figure{margin:0 0 14px;break-inside:avoid;border-radius:6px;overflow:hidden;box-shadow:var(--sombra-suave)}
.galeria img{width:100%;height:auto;display:block;transition:transform .6s ease}
.galeria figure:hover img{transform:scale(1.05)}

/* ===================== MISSÃO ===================== */
.missao{text-align:center;max-width:720px;margin:0 auto}
.missao__linha{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(1.4rem,2.8vw,2rem);color:var(--marfim);margin:.15rem 0}
.missao__verso{margin-top:1.9rem;font-family:"Cormorant Garamond",serif;font-size:clamp(1.25rem,2.3vw,1.6rem);line-height:1.5;color:var(--marfim);opacity:.96}
.missao__ref{font-family:"Montserrat";font-weight:300;letter-spacing:.22em;text-transform:uppercase;font-size:.76rem;color:var(--manteiga);margin-top:1rem}

/* ===================== FECHO (botão único) ===================== */
.fecho{text-align:center}
.fecho .lead{margin:0 auto 1.8rem}
.btn--grande{padding:1.15rem 2.8rem;font-size:.9rem}

/* ===================== CAPA COM FOTO FIXA ===================== */
/* clip-path cria o "containing block": faz o fixed funcionar até no iPhone */
.capa{position:relative;clip-path:inset(0);min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:5rem 0 4rem;overflow:hidden}
.capa__bg{position:fixed;inset:0;background:url("fotos/capa.jpg") center 28%/cover no-repeat;z-index:0}
.capa__veu{position:fixed;inset:0;z-index:1;background:linear-gradient(180deg,rgba(48,52,44,.55) 0%,rgba(48,52,44,.32) 38%,rgba(40,44,38,.72) 100%)}
.capa__conteudo{position:relative;z-index:2;color:#fff;width:100%}
.capa__conteudo .hero__mono{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.capa__conteudo .hero__mono span{color:var(--manteiga)}
.capa__selo{font-family:"Montserrat";font-weight:300;letter-spacing:.4em;text-transform:uppercase;font-size:.74rem;color:rgba(255,255,255,.9);margin:1.2rem 0 .4rem}
.capa__nomes{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(2.9rem,10vw,6.4rem);line-height:1;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.capa__nomes em{font-style:italic;color:var(--manteiga);font-weight:400}
.capa__intro{max-width:46ch;margin:1.4rem auto 0;color:rgba(255,255,255,.94);font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(1.05rem,2vw,1.3rem);text-shadow:0 2px 14px rgba(0,0,0,.45)}
.capa__linha{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:2rem auto 0;max-width:340px;color:rgba(255,255,255,.6)}
.capa__linha::before,.capa__linha::after{content:"";height:1px;flex:1;background:currentColor}
.capa__linha svg{width:22px;height:22px;flex:none;color:var(--manteiga)}
.capa__quando{margin-top:1.3rem;color:#fff}
.capa__quando b{display:block;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:.02em}
.capa__quando span{display:block;font-family:"Montserrat";font-weight:300;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;margin-top:.45rem;color:rgba(255,255,255,.88)}
.capa .contagem{margin-top:1.8rem}
.capa .contagem__cel{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.capa .contagem__n{color:#fff}
.capa .contagem__l{color:rgba(255,255,255,.8)}
.capa__seta{position:absolute;left:0;right:0;bottom:1.4rem;z-index:2;color:rgba(255,255,255,.8);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.capa__seta i{display:block;width:1px;height:30px;background:currentColor;animation:puxar 2.4s ease-in-out infinite}
@keyframes puxar{0%,100%{transform:scaleY(.25);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
/* o conteúdo que vem depois tapa o fundo fixo */
.pos-capa{position:relative;z-index:3;background:var(--marfim)}

/* ===================== FOTO DENTRO DO CAPÍTULO ===================== */
.marco__foto{margin-top:1.2rem;border-radius:6px;overflow:hidden;box-shadow:var(--sombra);max-width:440px}
.marco__foto img{width:100%;height:auto;display:block}

/* ===================== MOSAICO HORIZONTAL ===================== */
.mosaico{position:relative;background:var(--creme)}
.mosaico__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:1.2rem 0}
.mosaico__cabeca{text-align:center;padding:0 1.5rem;flex:none}
.mosaico__cabeca .titulo{font-size:clamp(1.6rem,4vw,2.6rem)}
.mosaico__trilho{display:flex;flex-direction:column;gap:10px;padding:0 3vw;flex:1;min-height:0;will-change:transform}
.mosaico__linha{display:flex;gap:10px;flex:1;min-height:0}
.mosaico__linha figure{margin:0;flex:none;border-radius:6px;overflow:hidden;box-shadow:var(--sombra-suave);background:var(--creme-2)}
.mosaico__linha img{width:100%;height:100%;object-fit:cover;display:block}
.mosaico__dica{flex:none;text-align:center;font-family:"Montserrat";font-weight:300;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--carvao-suave);display:flex;align-items:center;justify-content:center;gap:.6rem}
.mosaico__dica em{font-style:normal;animation:desliza 1.8s ease-in-out infinite}
@keyframes desliza{0%,100%{transform:translateX(-4px);opacity:.5}50%{transform:translateX(4px);opacity:1}}
@media(max-width:760px){
  .mosaico__trilho{gap:7px;padding:0 3vw}
  .mosaico__linha{gap:7px}
  .mosaico__pin{gap:.7rem;padding:.8rem 0}
}
/* fallback sem animação: vira faixa rolável normal */
.mosaico.sem-pin{height:auto!important}
.mosaico.sem-pin .mosaico__pin{position:static;height:auto;padding:clamp(3rem,7vw,5rem) 0}
.mosaico.sem-pin .mosaico__trilho{transform:none!important;overflow-x:auto;height:64vh}


/* ===================== MÚSICA ===================== */
.musica__btn.tocando .eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.musica__btn .eq i{display:block;width:2px;background:currentColor;height:4px;animation:eq .9s ease-in-out infinite}
.musica__btn .eq i:nth-child(2){animation-delay:.15s}
.musica__btn .eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.musica__btn.pedindo{animation:pulsa 2s ease-in-out infinite}
@keyframes pulsa{0%,100%{box-shadow:var(--sombra)}50%{box-shadow:0 0 0 10px rgba(94,115,87,.16)}}

/* ===================== CAPÍTULO: TEXTO + FOTO LADO A LADO ===================== */
.marco__foto{margin-top:1.1rem;border-radius:6px;overflow:hidden;box-shadow:var(--sombra);max-width:440px}
.marco__foto img{width:100%;height:auto;display:block}
@media(min-width:900px){
  .linha{max-width:none}
  .marco{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(2rem,4vw,3.4rem);align-items:center;padding-left:64px}
  .marco > :not(.marco__foto):not(.marco__ponto){grid-column:1}
  .marco__foto{grid-column:2;grid-row:1 / span 20;margin-top:0;max-width:none;align-self:center}
  .marco__foto img{max-height:64vh;width:100%;object-fit:cover}
  .marco--inverso{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .marco--inverso > :not(.marco__foto):not(.marco__ponto){grid-column:2}
  .marco--inverso .marco__foto{grid-column:1}
  .marco__texto{max-width:60ch}
}

/* ===================== MISSÃO (com ênfase) ===================== */
.missao-sec{position:relative;background:var(--sage);color:var(--marfim);overflow:hidden;padding:clamp(4rem,9vw,7.5rem) 0}
.missao-sec::before,.missao-sec::after{content:"";position:absolute;width:min(46vw,460px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(231,206,134,.22),transparent 68%);pointer-events:none}
.missao-sec::before{top:-16%;left:-10%}
.missao-sec::after{bottom:-22%;right:-8%}
.missao-sec .container{position:relative;z-index:1;text-align:center}
.missao-sec .eyebrow{color:var(--manteiga)}
.missao-sep{display:flex;align-items:center;justify-content:center;gap:1rem;margin:clamp(2.4rem,5vw,3.6rem) auto 0;max-width:420px;color:rgba(252,251,246,.45)}
.missao-sep::before,.missao-sep::after{content:"";height:1px;flex:1;background:currentColor}
.missao-sep svg{width:22px;height:22px;color:var(--manteiga);flex:none}
.missao-verso{max-width:34ch;margin:1.6rem auto 0;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.45;color:#fff}
.missao-verso b{font-style:normal;font-weight:600;color:var(--manteiga)}
.missao-ref{font-family:"Montserrat";font-weight:300;letter-spacing:.26em;text-transform:uppercase;font-size:.76rem;color:var(--manteiga);margin-top:1.1rem}


/* ===================== MISSÃO (frase clara) ===================== */
.missao-frase{
  font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:clamp(1.9rem,5.2vw,4rem);line-height:1.18;color:#fff;
  max-width:18ch;margin:.6rem auto 0;letter-spacing:.01em;
}
.missao-rotulo{font-family:"Montserrat";font-weight:300;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(252,251,246,.75);margin:0}
.missao-ref{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--manteiga);margin:.25rem 0 .9rem}
.missao-verso{max-width:38ch;margin:0 auto;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.5;color:#fff}

/* ===================== NOSSA MÚSICA (final) ===================== */
.musica-sec{background:var(--creme);text-align:center}
.musica-embed{max-width:560px;margin:2rem auto 0;border-radius:14px;overflow:hidden;box-shadow:var(--sombra);background:var(--marfim);min-height:152px}
.musica-embed iframe{display:block;border:0;width:100%;height:152px}

/* ===================== AJUSTES DE RESPONSIVIDADE ===================== */
html{max-width:100%}
body{max-width:100%;overflow-x:clip}
img,svg,iframe{max-width:100%}

/* telas pequenas: capa e contagem cabendo direitinho */
@media(max-width:560px){
  .capa{min-height:100svh;padding:4rem 0 3.5rem}
  .capa__nomes{font-size:clamp(2.4rem,12vw,3.4rem)}
  .capa__intro{font-size:1rem}
  .capa__quando b{font-size:1.15rem}
  .capa__quando span{font-size:.7rem;letter-spacing:.12em}
  .contagem{gap:.45rem}
  .contagem__cel{min-width:0;flex:1 1 0;padding:.6rem .25rem}
  .contagem__n{font-size:1.55rem}
  .contagem__l{font-size:.52rem;letter-spacing:.1em}
  .grade-presentes{grid-template-columns:1fr}
  .pix-destaque{flex-direction:column;align-items:stretch;text-align:center}
  .pix-destaque .btn{width:100%}
  .modal__caixa{padding:1.5rem}
  .modal__chave{flex-direction:column}
  .outros{padding:1.2rem}
  .marco{padding-left:44px}
  .linha::before,.linha__progresso{left:15px}
  .marco__ponto{left:7px}
  .musica{right:.6rem;bottom:.6rem}
  .musica__btn{padding:.6rem .85rem;font-size:.66rem}
}
/* tablets: capítulos ainda empilhados, com respiro */
@media(min-width:561px) and (max-width:899px){
  .marco__foto{max-width:520px}
}

/* ===================== PRESENTE: foto, selo e barra ===================== */
.presente__capa{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--creme)}
.presente__capa img{width:100%;height:100%;object-fit:cover;display:block}
.presente{position:relative}
.presente__selo{position:absolute;top:.8rem;right:.8rem;z-index:2;background:var(--sage-escuro);color:var(--marfim);font-family:"Montserrat";font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px}
.presente--pronto{opacity:.72}
.presente--pronto .presente__capa img{filter:grayscale(.55)}
.presente__ok{font-family:"Montserrat";font-size:.78rem;color:var(--sage-escuro);text-align:center;padding:.5rem 0}
.barra{height:6px;border-radius:999px;background:var(--creme-2);overflow:hidden;margin-bottom:.4rem}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--manteiga));border-radius:999px}
.barra__txt{font-family:"Montserrat";font-size:.72rem;color:var(--carvao-suave);margin-bottom:.9rem}

/* ===================== CONTROLE DE SOM (discreto) ===================== */
.som{position:fixed;right:1rem;bottom:1rem;z-index:110;width:44px;height:44px;border-radius:50%;
     border:1px solid var(--linha);background:rgba(252,251,246,.92);backdrop-filter:blur(6px);
     box-shadow:var(--sombra);cursor:pointer;display:flex;align-items:center;justify-content:center;
     color:var(--sage-escuro);transition:background .2s}
.som:hover{background:#fff}
.som__eq{display:flex;align-items:flex-end;gap:2.5px;height:14px}
.som__eq i{display:block;width:2.5px;height:4px;background:currentColor;border-radius:2px}
.som.tocando .som__eq i{animation:eq .9s ease-in-out infinite}
.som.tocando .som__eq i:nth-child(2){animation-delay:.15s}
.som.tocando .som__eq i:nth-child(3){animation-delay:.3s}
.som:not(.tocando){opacity:.55}
.som:not(.tocando) .som__eq i{height:4px}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}

/* ===================== FILTRO DE CATEGORIAS ===================== */
.categorias{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 2rem}
.cat{font-family:"Montserrat";font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
     padding:.5rem 1rem;border-radius:999px;cursor:pointer;transition:.2s;
     border:1px solid var(--linha);background:var(--marfim);color:var(--carvao)}
.cat:hover{border-color:var(--sage-escuro);color:var(--sage-escuro)}
.cat.on{background:var(--sage-escuro);border-color:var(--sage-escuro);color:var(--marfim)}

/* ===================== BOTÃO DO TOPO ===================== */
.capa__botao{margin-top:1.9rem}
.capa__botao .btn{background:rgba(252,251,246,.94);color:var(--sage-escuro);border:none}
.capa__botao .btn:hover{background:#fff}

/* ============ LINHA DO TEMPO: ordem no celular (título, foto, texto) ============ */
@media(max-width:899px){
  .marco{display:flex;flex-direction:column}
  .marco__cap{order:1}
  .marco__titulo{order:2;margin-bottom:0}
  .marco__foto{order:3;margin:1rem 0 0}
  .marco__texto{order:4;margin-top:1rem}
}

/* ============ CAPÍTULO SEM FOTO: centralizado no computador ============ */
@media(min-width:900px){
  .marco--centro{display:block;text-align:center;padding-left:0;max-width:640px;margin-inline:auto}
  .marco--centro .marco__ponto{left:50%;transform:translateX(-50%)}
  .marco--centro .marco__texto{margin-inline:auto}
}
.marco--centro{text-align:center}
.marco--centro .marco__texto{margin-inline:auto}

/* ============ MISSÃO COM FOTO DE FUNDO ============ */
.missao-sec{background:var(--sage)}
.missao-sec .missao-fundo{position:absolute;inset:0;background:url("fotos/missao-fundo.jpg") center 35%/cover no-repeat;z-index:0}
.missao-sec .missao-tinta{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(66,84,60,.92) 0%,rgba(78,96,70,.86) 45%,rgba(60,78,55,.94) 100%)}
.missao-sec::before,.missao-sec::after{z-index:1}
.missao-sec .container{z-index:2}

/* ============ TEXTO DOS CAPÍTULOS (vários parágrafos, falas e destaque) ============ */
.marco__texto p{margin:0 0 .9rem}
.marco__texto p:last-child{margin-bottom:0}
.marco__texto .fala{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(1.15rem,2.1vw,1.45rem);line-height:1.4;color:var(--carvao);
  border-left:2px solid var(--manteiga);padding:.15rem 0 .15rem 1rem;margin:1.1rem 0;
}
.marco--inverso .marco__texto .fala{border-left:2px solid var(--manteiga)}
.marco--centro .marco__texto .fala{border-left:none;border-top:1px solid var(--manteiga);
  border-bottom:1px solid var(--manteiga);padding:.7rem 0;display:inline-block}
.marco__texto .senha{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:600;
  font-size:clamp(1.35rem,2.6vw,1.8rem);color:var(--sage-escuro);
  text-align:center;letter-spacing:.03em;margin:1.2rem 0;
}

/* ============ DEPOIMENTOS (falas do Estêvão e da Taís) ============ */
.depo{margin:1.3rem 0;padding:.1rem 0 .1rem 1.1rem;border-left:2px solid var(--sage)}
.depo__quem{display:block;font-family:"Montserrat";font-weight:500;font-size:.64rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--sage-escuro);margin-bottom:.4rem}
.depo p{margin:0;font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(1.08rem,1.9vw,1.32rem);line-height:1.5;color:var(--carvao)}
.marco--centro .depo{border-left:none;border-top:1px solid var(--sage);padding:.8rem 0 0;text-align:center}
.marco--centro .depo__quem{margin-bottom:.3rem}

/* frase de destaque dentro do capítulo */
.marco__texto .destaque{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:600;
  font-size:clamp(1.3rem,2.5vw,1.75rem);color:var(--sage-escuro);
  text-align:center;letter-spacing:.02em;margin:1.4rem 0;line-height:1.3;
}

/* capítulo sem foto que não é o último: ocupa a largura toda, alinhado à esquerda */
@media(min-width:900px){
  .marco--largo{display:block;padding-left:64px}
  .marco--largo .marco__texto{max-width:78ch}
}