/* ═══ Convite de 15 anos — Marina ══════════════════════════════════════════
   Identidade: a do Save the Date aprovado (papel vergê, verde-garrafa,
   aquarela, monograma blush).
   Estrutura e movimento: os do convite de referência — envelope ocupando a
   tela, faixas que se sobrepõem com bordas curvas, texto entrando aos poucos.
   Mobile-first. Sem build.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --papel:       #efe9dc;
  --papel-2:     #e7e0d0;
  --creme:       #f6f2e7;
  --verde:       #1e4231;
  --verde-2:     #3d6249;
  --verde-fundo: #21402f;
  --sepia:       #8a8271;
  --blush:       #d67e8a;
  --azul:        #7ea9c6;
  --display:     "Playfair Display", Georgia, serif;
  --corpo:       "Cormorant Garamond", Georgia, serif;
  --script:      "Italianno", cursive;
  --ui:          system-ui, -apple-system, "Segoe UI", sans-serif;
  --coluna:      31rem;
  --nav-h:       4.15rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: var(--corpo);
  font-size: 1.06rem;
  color: var(--verde);
  background: var(--papel) url("img/papel.webp") 0 0 / 380px;
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

/* Lenis: sem isto a rolagem com inércia briga com o scroll nativo */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ═══ CAPA — o envelope ocupa a tela inteira ═══════════════════════════ */
#capa{
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: #ded6c6;
  perspective: 1400px;
  cursor: pointer;
  overflow: hidden;
}
#capa:focus-visible { outline: none; }

.env { position: absolute; inset: 0; transform-style: preserve-3d; }

/* corpo do envelope */
.env-papel{
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 8%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(168deg, #fbf8f1 0%, #f1ece0 45%, #e4dccc 100%);
}
/* as três abas fixas: cada uma um triângulo, com um fio de sombra na dobra */
.env-aba-esq, .env-aba-dir, .env-aba-baixo{
  position: absolute; inset: 0;
}
.env-aba-esq{
  clip-path: polygon(0 0, 50% 50%, 0 100%);
  background: linear-gradient(100deg, #f7f3ea, #e6dfd0);
  box-shadow: inset -1px 0 2px rgba(120,105,85,.12);
}
.env-aba-dir{
  clip-path: polygon(100% 0, 50% 50%, 100% 100%);
  background: linear-gradient(260deg, #f7f3ea, #e6dfd0);
  box-shadow: inset 1px 0 2px rgba(120,105,85,.12);
}
.env-aba-baixo{
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
  background: linear-gradient(0deg, #f9f5ec, #ece5d6);
  filter: drop-shadow(0 -2px 3px rgba(120,105,85,.16));
}
/* a aba de cima: é ela que abre */
.env-aba{
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
  background: linear-gradient(178deg, #fdfbf6 0%, #f3eee2 55%, #e9e1d1 100%);
  filter: drop-shadow(0 3px 5px rgba(120,105,85,.22));
  transform-origin: top center;
  backface-visibility: hidden;
  will-change: transform;
}
/* o vinco central que desce da ponta do V — detalhe que dá o volume */
.env-vinco{
  position: absolute; left: 50%; top: 50%; bottom: 0; width: 1px;
  translate: -50% 0;
  background: linear-gradient(180deg, rgba(120,105,85,.18), transparent 55%);
}

.lacre{
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  z-index: 3;
  width: min(9.5rem, 34vw); aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 6px 12px rgba(120,70,85,.35));
  will-change: transform;
}
.lacre img { width: 100%; }
.lacre:focus-visible { outline: 2px solid var(--verde); outline-offset: 8px; border-radius: 50%; }

.capa-dica{
  position: absolute; left: 0; right: 0; bottom: 14vh;
  z-index: 3; margin: 0; text-align: center;
}
.capa-dica span{
  font-family: var(--ui);
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(60,50,40,.5);
  animation: respira 3s ease-in-out infinite;
}
@keyframes respira { 0%,100%{opacity:.35} 50%{opacity:1} }

/* ═══ estrutura geral ══════════════════════════════════════════════════ */
main { position: relative; }

section{
  position: relative;
  padding: 5rem 1.6rem;
  text-align: center;
}
/* a coluna de leitura vale para o CONTEÚDO; decoração que sangra (as ondas, o
   fundo do hero) fica de fora, senão ela é centrada e estrangulada junto */
section > *:not(.onda):not(.hero-aquarela){
  max-width: var(--coluna); margin-left: auto; margin-right: auto;
}

.faixa-clara { background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0)); }
.faixa-escura{
  background: var(--verde-fundo);
  color: var(--creme);
  padding-top: 6.5rem; padding-bottom: 6.5rem;
  margin: 3rem 0;
}

/* bordas curvas entre faixas — a “onda” da referência, feita com elipse
   (escala em qualquer largura, e não custa uma imagem) */
.onda{
  position: absolute; left: -6%; right: -6%; height: 3.6rem;
  pointer-events: none;
}
.onda-topo{
  top: -1px;
  background: var(--papel);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: translateY(-52%);
}
.onda-topo.escura{ background: var(--verde-fundo); transform: translateY(0) ; top: -2.4rem;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.onda-base.escura{
  bottom: -2.4rem; top: auto;
  background: var(--verde-fundo);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* ═══ tipografia ═══════════════════════════════════════════════════════ */
.sobrescrito{
  margin: 0;
  font-family: var(--ui);
  font-size: .68rem; letter-spacing: .38em; text-transform: uppercase;
  text-indent: .38em;
  color: var(--sepia);
}
h2 { margin: 0 0 1.9rem; font-weight: 400; }
.rotulo{
  font-family: var(--display);
  font-size: .84rem; letter-spacing: .32em; text-transform: uppercase;
  text-indent: .32em;
  color: var(--verde-2);
}
.script{
  font-family: var(--script);
  font-size: clamp(3.4rem, 15vw, 4.6rem);
  line-height: .95;
  color: var(--verde);
}
.script.claro { color: var(--creme); }

.pilula{
  display: inline-block;
  padding: .78rem 2.1rem;
  border: 1px solid rgba(30,66,49,.42);
  border-radius: 999px;
  font-family: var(--display);
  font-size: .74rem; letter-spacing: .24em; text-indent: .24em; text-transform: uppercase;
  text-decoration: none; color: var(--verde); background: rgba(255,255,255,.35);
  transition: background-color .35s, color .35s, border-color .35s;
}
.pilula:hover, .pilula:focus-visible { background: var(--verde); color: var(--creme); border-color: var(--verde); }
.pilula.claro{
  color: var(--creme); border-color: rgba(246,242,231,.5); background: rgba(255,255,255,.06);
}
.pilula.claro:hover, .pilula.claro:focus-visible { background: var(--creme); color: var(--verde-fundo); }
.pilula.solida{
  border: 0; background: var(--verde); color: var(--creme);
  width: 100%; cursor: pointer; padding: .95rem 1rem;
}
.pilula.solida[disabled] { opacity: .5; cursor: default; }

/* ═══ HERO ═════════════════════════════════════════════════════════════ */
.hero{
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 3.5rem 1.6rem 0;
  overflow: hidden;
}
.hero-conteudo { position: relative; z-index: 2; flex: none; }

/* A aquarela entra POR BAIXO do texto, sangrando no rodapé, e o topo dela
   dissolve no papel. Antes ela ficava atrás das letras e comia a leitura. */
.hero-aquarela{
  position: relative; z-index: 1;
  margin: 1.6rem -1.6rem 0;
  flex: 1 1 auto;
  display: flex; align-items: flex-end;
  will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
}
.hero-aquarela img { width: 118%; max-width: none; margin: 0 -9%; }

.mono-hero { margin: 0 auto 1.5rem; width: 5.5rem; opacity: .8; }

.nome{
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(5.5rem, 30vw, 9rem);
  line-height: .78;
  margin: .5rem 0 .2rem;
}
.regua{
  height: 1px; width: 78%; margin: 1.4rem auto;
  background: linear-gradient(90deg, transparent, rgba(30,66,49,.5), transparent);
}
.idade{
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
}
.hero-data{
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem; letter-spacing: .3em; text-indent: .3em;
}
.hero-data span { color: var(--azul); }
.hero-local{
  margin: .55rem 0 0;
  font-family: var(--ui);
  font-size: .7rem; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase;
  color: var(--sepia);
}

.chevron{
  position: absolute; left: 50%; bottom: calc(var(--nav-h) + 1.6rem);
  translate: -50% 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
}
.chevron span{
  width: .68rem; height: .68rem;
  border-right: 1px solid rgba(30,66,49,.55);
  border-bottom: 1px solid rgba(30,66,49,.55);
  rotate: 45deg;
  animation: desce 2.1s ease-in-out infinite;
}
.chevron span:nth-child(2){ animation-delay: .16s; opacity: .6 }
.chevron span:nth-child(3){ animation-delay: .32s; opacity: .32 }
@keyframes desce { 0%,100%{ transform: translateY(-2px); opacity:.25 } 50%{ transform: translateY(3px); opacity:1 } }

/* ═══ VAGAS DE FOTO ════════════════════════════════════════════════════
   Enquanto as fotos da Marina não chegam, o lugar delas precisa ser VISÍVEL —
   senão não dá para imaginar a página pronta. */
.marca-foto{
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--ui); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(30,66,49,.42);
}
.marca-foto svg{
  width: 1.9rem; height: 1.9rem;
  fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round;
}

.retrato { margin: 0; }
.moldura-arco{
  display: grid; place-items: center;
  aspect-ratio: 3 / 4; width: min(17rem, 74%); margin: 0 auto;
  border: 1px dashed rgba(30,66,49,.35);
  border-radius: 999px 999px 6px 6px;   /* arco: o formato clássico do retrato */
  background: rgba(255,255,255,.34);
}
.retrato figcaption{
  margin-top: .9rem;
  font-family: var(--ui); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sepia); opacity: .75;
}

/* ═══ MENSAGEM ═════════════════════════════════════════════════════════ */
.aspas{
  margin: 0; font-family: var(--display);
  font-size: 4rem; line-height: .2; color: var(--azul); opacity: .45;
}
.aspas.fecha { margin-top: 2.6rem; }
.citacao{
  margin: 2.4rem auto 0; max-width: 26rem;
  font-size: 1.16rem; font-style: italic; line-height: 1.95; color: var(--verde-2);
}

/* ═══ CONTAGEM ═════════════════════════════════════════════════════════ */
.ornamento { font-size: 1rem; color: var(--azul); margin-bottom: .8rem; }
.relogio{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem;
  margin-top: .4rem;
}
.relogio div{
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .95rem .2rem;
  border: 1px solid rgba(126,169,198,.42);
  border-radius: 3px;
  background: rgba(255,255,255,.38);
}
.relogio strong{
  font-family: var(--display); font-weight: 400;
  font-size: 1.95rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.relogio span{
  font-family: var(--ui); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sepia);
}
.por-extenso { margin: 1.5rem 0 1.9rem; font-style: italic; color: var(--verde-2); }

/* ═══ ANFITRIÕES ═══════════════════════════════════════════════════════ */
.pais { margin: 0; font-family: var(--display); font-size: 1.32rem; letter-spacing: .05em; }
.e-comercial { margin: .35rem 0; font-family: var(--script); font-size: 2.4rem; line-height: 1; color: var(--azul); }

/* ═══ RECEPÇÃO (faixa escura) ══════════════════════════════════════════ */
.tracado { width: min(19rem, 74%); margin: 0 auto 1.6rem; opacity: .9; }
.faixa-escura .hora{
  margin: 0 0 .3rem; font-family: var(--display); font-size: 2.5rem; line-height: 1;
}
.faixa-escura .lugar{
  margin: 0; font-family: var(--display); font-size: 1.3rem;
  letter-spacing: .12em; text-transform: uppercase; text-indent: .12em;
}
.faixa-escura .endereco{
  margin: .9rem 0 2rem; font-family: var(--ui); font-size: .88rem; line-height: 1.75;
  color: rgba(246,242,231,.72);
}
.botoes { display: flex; flex-direction: column; gap: .7rem; align-items: center; }

/* ═══ GALERIA ══════════════════════════════════════════════════════════ */
.carrossel { position: relative; }
.trilho{
  display: flex; gap: .7rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: .2rem;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho figure{
  flex: 0 0 84%; margin: 0; scroll-snap-align: center;
  border: 1px solid rgba(30,66,49,.16);
  background: rgba(255,255,255,.4);
  padding: .55rem;
}
.trilho figure.vaga{
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  border-style: dashed; border-color: rgba(30,66,49,.32);
}
.pontos { display: flex; justify-content: center; gap: .4rem; margin-top: 1rem; }
.pontos i{
  width: .42rem; height: .42rem; border-radius: 50%;
  background: rgba(30,66,49,.24); transition: background-color .3s, transform .3s;
}
.pontos i.ativo { background: var(--verde); transform: scale(1.25); }

/* ═══ TRAJE ════════════════════════════════════════════════════════════ */
.traje-valor { margin: 0; font-family: var(--display); font-size: 1.6rem; letter-spacing: .04em; }

/* ═══ CONFIRMAÇÃO ══════════════════════════════════════════════════════ */
.cartao{
  margin-top: 1.6rem; padding: 1.7rem 1.35rem;
  border: 1px solid rgba(126,169,198,.42);
  border-radius: 3px;
  background: rgba(255,255,255,.42);
  text-align: left;
}
.cartao > p:first-child { margin-top: 0; }
#rsvp-sem-link p, #rsvp-carregando p { margin: 0; text-align: center; color: var(--verde-2); font-style: italic; }

.rsvp-saudacao { margin: 0 0 .2rem; font-family: var(--display); font-size: 1.2rem; }
.rsvp-topo{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: .9rem;
}
.rsvp-ajuda{
  margin: 0; font-family: var(--ui); font-size: .76rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sepia);
}
.mini{
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--ui); font-size: .72rem; color: var(--verde-2);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}

/* campo do acompanhante: só aparece quando a pessoa é marcada */
.nome-livre{
  display: block; width: 100%; margin-top: .5rem;
  font-family: var(--display); font-size: 1rem; color: var(--verde);
  padding: .5rem .7rem;
  border: 1px solid rgba(30,66,49,.28); border-radius: 3px;
  background: rgba(255,255,255,.6);
}
.nome-livre.falta { border-color: #b4635f; background: rgba(180,99,95,.06); }
.aviso-nome { margin: .35rem 0 0; font-family: var(--ui); font-size: .74rem; color: #a3423f; }
.etiqueta{
  margin-left: auto; font-family: var(--ui); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sepia); opacity: .8;
}
.pessoas { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pessoas li { margin: 0; }
.pessoas label{
  display: flex; align-items: center; gap: .7rem;
  padding: .62rem .8rem;
  border: 1px solid rgba(30,66,49,.2); border-radius: 3px;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.pessoas input { accent-color: var(--verde); width: 1.05rem; height: 1.05rem; flex: none; }
.pessoas input:checked ~ span { color: var(--verde); }
.pessoas label:has(input:checked) { border-color: rgba(30,66,49,.55); background: rgba(255,255,255,.8); }
.pessoas span { font-family: var(--display); font-size: 1rem; color: var(--sepia); }


.link-recusa{
  display: block; margin: .85rem auto 0; padding: .3rem;
  border: 0; background: none; cursor: pointer;
  font-family: var(--ui); font-size: .8rem; color: var(--sepia);
  text-decoration: underline; text-underline-offset: 3px;
}
#recado { margin: .9rem 0 0; min-height: 1.2rem; font-family: var(--ui); font-size: .86rem; text-align: center; }
#recado.erro { color: #a3423f; }
#recado.ok   { color: var(--verde-2); }

.agradecimento { text-align: center; }
.agradecimento strong{
  display: block; font-family: var(--script); font-weight: 400;
  font-size: 3rem; line-height: 1.05; margin-bottom: .3rem;
}
.agradecimento span { font-family: var(--ui); font-size: .9rem; color: var(--sepia); }

/* ═══ rodapé, som, navegação ═══════════════════════════════════════════ */
footer{
  padding: 3rem 1.5rem calc(var(--nav-h) + env(safe-area-inset-bottom) + 2rem);
  text-align: center;
}
footer img { margin: 0 auto .8rem; width: 3.2rem; opacity: .5; }
footer p{
  margin: 0; font-family: var(--ui); font-size: .66rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--sepia);
}

#som{
  position: fixed; left: 1.1rem; z-index: 40;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem);
  width: 2.85rem; height: 2.85rem; border-radius: 50%;
  border: 1px solid rgba(30,66,49,.2);
  background: rgba(239,233,220,.86);
  backdrop-filter: blur(6px);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(30,66,49,.14);
}
#som svg { width: 1.15rem; height: 1.15rem; fill: var(--verde); }
#som[aria-pressed="true"] svg { fill: var(--blush); }

#nav-inferior{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(239,233,220,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(30,66,49,.1);
}
/* ícone sozinho não se explica: cada botão diz o que é */
#nav-inferior a{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .22rem; height: var(--nav-h);
  color: var(--sepia); text-decoration: none; transition: color .3s;
}
#nav-inferior svg{
  width: 1.24rem; height: 1.24rem;
  fill: none; stroke: currentColor; stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round;
}
#nav-inferior b{
  font-family: var(--ui); font-weight: 500;
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
}
#nav-inferior a.ativo { color: var(--verde); }

/* ═══ revelações ═══════════════════════════════════════════════════════ */
/* Estado inicial. Quem não tem JS, não tem GSAP ou pediu menos movimento
   recebe `.visivel` — nada some por causa de animação. */
.rev { opacity: 0; transform: translateY(22px); }
.rev.visivel { opacity: 1; transform: none; }
[data-split], [data-split-linhas] { visibility: hidden; }
[data-split].pronto, [data-split-linhas].pronto { visibility: visible; }

@media (prefers-reduced-motion: reduce){
  .rev { opacity: 1 !important; transform: none !important; }
  [data-split], [data-split-linhas] { visibility: visible !important; }
  .chevron span, .capa-dica span { animation: none; }
  .hero-fundo { transform: none !important; }
}

/* ═══ desktop: o convite continua sendo uma folha estreita ═════════════ */
@media (min-width: 48rem){
  body::before{
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: var(--papel-2) url("img/papel.webp") 0 0 / 380px;
  }
  main{
    max-width: 33rem; margin: 0 auto;
    box-shadow: 0 0 60px rgba(30,66,49,.13);
    background: var(--papel) url("img/papel.webp") 0 0 / 380px;
  }
  #nav-inferior, #som { position: absolute; }
  #nav-inferior{
    left: 50%; right: auto; translate: -50% 0; width: 33rem;
    position: fixed;
  }
  #som { position: fixed; left: calc(50% - 15.5rem); }
  .hero { min-height: 92svh; }
}