/* =========================================================
   Cantata de Natal — O Sapateiro de Marselha · IBB Uberaba
   ========================================================= */
/* fontes locais (OFL) */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cinzel-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cinzel-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cinzel-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/cinzel-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2")}

:root {
  --noite: #120905;
  --madeira: #1f110a;
  --madeira-2: #2b170d;
  --ouro: #f1c58a;
  --ouro-2: #d9a463;
  --ouro-esc: #a8743d;
  --creme: #fbeedb;
  --texto: #ead8bf;
  --texto-suave: #bfa588;
  --vinho: #7d1519;
  --vinho-2: #9b1f22;
  --linha: rgba(217, 164, 99, .45);
  --vidro: rgba(30, 14, 8, .72);
  --serif-caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --raio: 18px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noite);
  color: var(--texto);
  font-family: var(--serif);
  font-size: clamp(18px, 1.05vw + 13px, 21px);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.travado { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ouro); }
button { font: inherit; color: inherit; }
::selection { background: var(--vinho); color: var(--creme); }

.kicker {
  font-family: var(--serif-caps);
  font-weight: 500;
  font-size: .78em;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 .6em;
  padding-left: .32em; /* compensa o letter-spacing */
}
.kicker--grande { font-size: clamp(15px, 1.6vw + 8px, 26px); letter-spacing: .38em; color: var(--creme); text-shadow: 0 2px 18px rgba(0,0,0,.7); }

/* ---------- divisor com estrela ---------- */
.divisor { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px auto; width: min(380px, 70vw); }
.divisor i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--creme) 40%, var(--creme)); opacity: .75; }
.divisor i:last-child { transform: scaleX(-1); }
.divisor svg { width: 26px; height: 26px; fill: var(--creme); filter: drop-shadow(0 0 8px rgba(255,220,160,.9)); animation: brilhoEstrela 4s ease-in-out infinite; }
@keyframes brilhoEstrela { 50% { transform: scale(1.18) rotate(45deg); opacity: .85; } }

/* ---------- botões ---------- */
.btn {
  --h: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 28px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--serif-caps); font-weight: 600; font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; fill: currentColor; }
.btn--ouro {
  color: #2a1408;
  background: linear-gradient(180deg, #fbe0b2, var(--ouro) 45%, var(--ouro-2));
  box-shadow: 0 8px 28px -8px rgba(241,197,138,.65), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--ouro:hover { box-shadow: 0 10px 38px -6px rgba(241,197,138,.9), inset 0 1px 0 rgba(255,255,255,.6); transform: translateY(-2px); }
.btn--linha { color: var(--creme); border-color: var(--linha); background: rgba(20,9,5,.35); backdrop-filter: blur(6px); }
.btn--linha:hover { border-color: var(--ouro); color: var(--ouro); transform: translateY(-2px); }
.btn--whats { color: #fff; background: linear-gradient(180deg, #2fd16a, #1aa34e); box-shadow: 0 8px 26px -8px rgba(37,211,102,.7); }
.btn--whats:hover { transform: translateY(-2px); }
.btn--largo { width: 100%; }

/* =========================================================
   HERO / CENA
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.cena { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0d0604; }

/* "palco": mantém a proporção da imagem e cobre a tela (object-fit: cover feito à mão,
   para que lamparina e janelas fiquem sempre no lugar certo) */
.palco {
  --ar: 1.7768;
  position: absolute; left: 50%; top: 50%;
  /* --pw/--ph são calculados pelo JS a partir da altura real do hero
     (que pode ser maior que a tela, ex.: convite com mensagem) */
  width: var(--pw, max(100vw, calc(115svh * var(--ar))));
  height: var(--ph, max(115svh, calc(100vw / var(--ar))));
  transform: translate(-50%, -50%) translate3d(0, var(--parallax, 0px), 0) scale(var(--zoom, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}
.palco__img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

/* Telas deitadas (computador/tablet): o topo tem exatamente a proporção da imagem,
   então ela aparece INTEIRA — lamparina à esquerda, vila à direita */
@media (min-aspect-ratio: 1/1) {
  .hero { min-height: calc(100vw / 1.7768); } /* cresce só se o texto não couber */
  .hero__conteudo { padding: clamp(28px, 4vw, 80px) 16px clamp(56px, 5.5vw, 110px); }
  .hero .divisor { margin: clamp(6px, .8vw, 14px) auto; }
  .hero__acoes { margin-top: clamp(16px, 2vw, 34px); }
  .hero__rolar { display: none; }
  /* imagem sempre inteira na largura, presa no topo; se o texto for mais alto,
     a parte de baixo se funde no fundo escuro em vez de cortar as laterais */
  .palco { top: 0; transform: translateX(-50%); }
  .palco::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 22%; background: linear-gradient(transparent, var(--noite)); pointer-events: none; }
  .cena { background: var(--noite); }
  .hero .hero__tagline { max-width: 52ch; }
  .hero__titulo { width: min(720px, 34vw); }
  .hero__msg { margin-top: 14px; }
}

/* No celular em pé: a cena passeia devagar de um lado ao outro,
   mostrando a lamparina e a vila */
@media (max-aspect-ratio: 1/1) {
  .palco { left: 0; transform: translate3d(var(--pan, 0px), calc(-50% + var(--parallax, 0px)), 0); animation: none; }
}

/* janelas da vila: cada uma tem um "remendo escuro" que aparece = luz apagada */
.janela {
  position: absolute; background-size: 100% 100%; background-repeat: no-repeat;
  opacity: 0; transition: opacity 1.6s ease-in-out;
  pointer-events: none;
}
.janela.apagada { opacity: 1; }
.janela.piscando { transition-duration: .12s; }

/* estrela de Belém */
.estrela {
  position: absolute; left: 81.94%; top: 9.14%; width: 9%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255,250,235,.95) 0 3%, rgba(255,220,150,.45) 9%, transparent 30%),
    radial-gradient(ellipse 50% 3% at 50% 50%, rgba(255,230,180,.55), transparent),
    radial-gradient(ellipse 3% 50% at 50% 50%, rgba(255,230,180,.55), transparent);
  mix-blend-mode: screen; border-radius: 50%;
  animation: cintila 5s ease-in-out infinite;
}
@keyframes cintila {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.9) rotate(0deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(4deg); }
}

/* brilho da vela no parapeito */
.vela-brilho {
  position: absolute; left: 96.7%; top: 40.6%; width: 6%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,190,90,.55), rgba(255,140,40,.15) 45%, transparent 70%);
  mix-blend-mode: screen; animation: velaTremula 2.3s infinite steps(1);
}
@keyframes velaTremula {
  0% { opacity: .8; } 13% { opacity: .65; } 27% { opacity: .95; } 41% { opacity: .7; }
  55% { opacity: 1; } 70% { opacity: .75; } 84% { opacity: .9; }
}

/* ---------- LAMPARINA ---------- */
/* luz ampla que banha a oficina (oscila junto com a chama via --luz) */
.lamp-luz {
  position: absolute; left: 11.7%; top: 50%;
  width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,170,70,.30), rgba(255,130,40,.12) 35%, transparent 62%);
  mix-blend-mode: screen;
  opacity: var(--luz, .85);
  pointer-events: none;
}
/* halo dentro do vidro */
.lamp-halo {
  position: absolute; left: 11.7%; top: 47.5%;
  width: 13%; aspect-ratio: .7; transform: translate(-50%, -50%) scale(var(--halo, 1));
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%, rgba(255,236,190,.75), rgba(255,180,80,.38) 30%, rgba(255,140,40,.12) 55%, transparent 72%);
  mix-blend-mode: screen; filter: blur(2px);
  opacity: var(--luz, .85);
}
/* a chama recortada da própria imagem, que dança */
.chama {
  position: absolute; left: 9.569%; top: 34.006%; width: 4.306%; height: 22.317%;
  transform-origin: 50% 93%;
  transform: translateX(var(--cx, 0)) skewX(var(--sk, 0deg)) scale(var(--sx, 1), var(--sy, 1));
  mix-blend-mode: screen;
  filter: brightness(var(--br, 1.05));
}
.chama img { width: 100%; height: 100%; }
/* núcleo incandescente */
.chama-nucleo {
  position: absolute; left: 11.66%; top: 49.2%;
  width: 1.5%; height: 6.5%;
  transform: translate(-50%, -50%) scaleY(var(--sy, 1));
  transform-origin: 50% 90%;
  border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 70%, #fff 0 30%, rgba(255,245,210,.8) 50%, transparent 75%);
  mix-blend-mode: screen; filter: blur(1.5px);
  opacity: var(--luz, .85);
}

.poeira { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.cena__vinheta {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(12,6,3,.62), rgba(12,6,3,.25) 60%, transparent 85%),
    linear-gradient(180deg, rgba(10,5,3,.35) 0%, transparent 25%, transparent 60%, var(--noite) 100%);
}

/* ---------- conteúdo do hero ---------- */
.hero__conteudo {
  position: relative; text-align: center;
  padding: 90px 16px 120px; width: min(980px, 100%);
}
.aviso-teste { max-width: 560px; margin: 0 auto 18px; padding: 10px 16px; border-radius: 12px; background: rgba(20,9,5,.75); border: 1px dashed var(--ouro-2); color: var(--creme); font-size: 15px; line-height: 1.45; }
.hero__convite {
  display: inline-block; margin: 0 0 22px; padding: 10px 22px;
  font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.4vw + 12px, 26px);
  color: var(--creme); border: 1px solid var(--linha); border-radius: 999px;
  background: rgba(20, 9, 5, .55); backdrop-filter: blur(8px);
}
.hero__convite span { color: var(--ouro); font-weight: 600; }
.hero__titulo { margin: 0 auto; width: min(760px, 92vw); }
.hero__titulo img { width: 100%; height: auto; filter: drop-shadow(0 6px 30px rgba(0,0,0,.65)) drop-shadow(0 0 40px rgba(255,190,110,.18)); }
.hero__tagline {
  margin: 8px auto 0; max-width: 34ch;
  font-family: var(--serif-caps); font-size: clamp(13px, .7vw + 10px, 18px);
  letter-spacing: .22em; text-transform: uppercase; line-height: 1.75; color: var(--creme);
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
}
.hero__msg {
  margin: 26px auto 0; max-width: 36ch; font-style: italic; font-size: 1.15em; color: var(--creme);
}
.hero__msg cite { display: block; margin-top: 4px; font-size: .8em; color: var(--ouro); font-style: normal; font-family: var(--serif-caps); letter-spacing: .14em; }
.hero__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }

.hero__rolar { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 28px; height: 46px; border: 1px solid var(--linha); border-radius: 20px; }
.hero__rolar span { position: absolute; left: 50%; top: 9px; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 2px; background: var(--ouro); animation: rolar 2s var(--ease) infinite; }
@keyframes rolar { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

/* =========================================================
   ENVELOPE (convite personalizado)
   ========================================================= */
.envelope {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(80,40,18,.55), transparent 65%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
    #150a05;
  transition: opacity 1s var(--ease), visibility 1s;
}
.envelope.aberto { opacity: 0; visibility: hidden; }
.envelope__papel {
  position: relative; text-align: center; width: min(520px, 100%);
  padding: 52px 30px 40px; border-radius: 6px;
  background: linear-gradient(160deg, #f6e6c9, #e9cfa3 60%, #dcbb88);
  color: #3a1f0e;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.8), inset 0 0 60px rgba(150,95,40,.35);
  transform-origin: 50% 100%;
  animation: chegaEnvelope 1.1s var(--ease) both;
}
.envelope__papel::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(120,70,30,.35); border-radius: 3px; pointer-events: none; }
.envelope.aberto .envelope__papel { transform: translateY(-30px) scale(.94) rotateX(18deg); opacity: 0; transition: all .9s var(--ease); }
@keyframes chegaEnvelope { from { opacity: 0; transform: translateY(40px) rotate(-3deg) scale(.95); } }
.envelope .kicker { color: #8a5424; }
.envelope__nome { margin: .1em 0 .2em; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(42px, 9vw, 64px); line-height: 1.05; color: #4a230d; }
.envelope__de { margin: 0 0 26px; font-size: 1.05em; }
.selo {
  width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; margin: 0 auto;
  background: radial-gradient(circle at 35% 30%, #c4363a, var(--vinho) 55%, #4f0b0e);
  box-shadow: 0 8px 18px rgba(80,10,10,.55), inset 0 -4px 10px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.2);
  animation: pulsaSelo 2.2s ease-in-out infinite;
}
.selo svg { width: 44px; height: 44px; fill: #f5d29e; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
@keyframes pulsaSelo { 50% { transform: scale(1.07); box-shadow: 0 10px 30px rgba(155,31,34,.6), inset 0 -4px 10px rgba(0,0,0,.35); } }
.envelope__dica { margin: 16px 0 0; font-family: var(--serif-caps); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #8a5424; }

/* =========================================================
   SEÇÕES
   ========================================================= */
.secao { position: relative; padding: clamp(72px, 9vw, 130px) 16px; }
.secao__titulo {
  margin: 0 0 .5em; text-align: center;
  font-family: var(--serif-caps); font-weight: 600; letter-spacing: .04em;
  font-size: clamp(30px, 3vw + 14px, 54px); line-height: 1.12; color: var(--creme);
}
.secao__titulo em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--ouro); letter-spacing: 0; }
.secao__titulo--esq { text-align: left; }
.datas, .convidar, .contagem { text-align: center; }

/* ---------- contagem ---------- */
.contagem { padding: 30px 16px 30px; position: relative; z-index: 2; }
.relogio { display: flex; justify-content: center; gap: clamp(10px, 2vw, 24px); }
.relogio div {
  width: clamp(72px, 12vw, 120px); padding: 14px 0 10px;
  border: 1px solid var(--linha); border-radius: 14px;
  background: linear-gradient(180deg, rgba(50,24,12,.8), rgba(25,12,6,.8));
  box-shadow: inset 0 1px 0 rgba(255,220,170,.12), 0 18px 40px -20px rgba(0,0,0,.8);
}
.relogio b { display: block; font-family: var(--serif-caps); font-weight: 600; font-size: clamp(30px, 4vw, 52px); line-height: 1; color: var(--creme); font-variant-numeric: tabular-nums; }
.relogio span { display: block; margin-top: 6px; font-family: var(--serif-caps); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--texto-suave); padding-left: .24em; }
.contagem__legenda { margin: 14px 0 0; color: var(--texto-suave); font-style: italic; }

/* ---------- datas ---------- */
.datas__grid { display: flex; justify-content: center; align-items: stretch; gap: clamp(14px, 3vw, 34px); margin: 38px auto 0; max-width: 1240px; flex-wrap: wrap; }
.datas__grid .cartao-data { flex-basis: 280px; }
.datas__estrela { display: flex; align-items: center; }
.datas__estrela svg { width: 30px; height: 30px; fill: var(--creme); filter: drop-shadow(0 0 8px rgba(255,220,160,.8)); }
.cartao-data {
  flex: 1 1 300px; max-width: 380px;
  padding: 26px 26px 22px; border-radius: var(--raio);
  border: 1px solid var(--ouro-esc);
  background: linear-gradient(180deg, rgba(48,22,12,.92), rgba(28,12,6,.92));
  box-shadow: inset 0 0 0 4px rgba(20,9,5,.9), inset 0 0 0 5px rgba(217,164,99,.35), 0 30px 60px -30px rgba(0,0,0,.9);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cartao-data:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 4px rgba(20,9,5,.9), inset 0 0 0 5px rgba(241,197,138,.6), 0 40px 70px -30px rgba(241,160,80,.35); }
.cartao-data__topo { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cartao-data__dia { font-family: var(--serif-caps); font-weight: 600; font-size: clamp(64px, 7vw, 84px); line-height: .9; color: var(--creme); }
.cartao-data__mes { text-align: left; font-family: var(--serif-caps); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; color: var(--creme); }
.pilula {
  display: block; margin: 16px 0 14px; padding: 7px 10px; border-radius: 999px;
  background: linear-gradient(180deg, var(--vinho-2), var(--vinho));
  border: 1px solid rgba(217,164,99,.55);
  font-family: var(--serif-caps); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; font-size: 16px; color: var(--creme);
}
.cartao-data__horas { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--serif-caps); font-size: 20px; color: var(--creme); }
.cartao-data__horas svg { width: 28px; height: 28px; fill: none; stroke: var(--ouro-2); stroke-width: 1.6; stroke-linecap: round; }
.cartao-data__agenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(217,164,99,.3); }
.agenda-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--linha); background: transparent; cursor: pointer;
  font-family: var(--serif-caps); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro);
  transition: background .2s, color .2s;
}
.agenda-btn:hover { background: var(--ouro); color: #2a1408; }
.agenda-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.datas__nota { margin-top: 30px; font-style: italic; color: var(--texto-suave); }

/* menu de agenda */
.menu-agenda {
  position: absolute; z-index: 60; min-width: 220px; padding: 8px;
  border-radius: 14px; border: 1px solid var(--linha); background: #24120a;
  box-shadow: 0 24px 50px -10px rgba(0,0,0,.8);
  animation: surge .25s var(--ease);
}
.menu-agenda a { display: block; padding: 10px 14px; border-radius: 8px; text-decoration: none; font-family: var(--serif-caps); font-size: 13px; letter-spacing: .08em; color: var(--creme); }
.menu-agenda a:hover { background: rgba(241,197,138,.12); color: var(--ouro); }
@keyframes surge { from { opacity: 0; transform: translateY(6px); } }

/* ---------- confirmar presença ---------- */
.rsvp {
  max-width: 860px; margin: 56px auto 0; padding: clamp(30px, 5vw, 52px) clamp(18px, 4vw, 48px);
  border-radius: 26px; border: 1px solid var(--linha);
  background: linear-gradient(180deg, rgba(43,23,13,.85), rgba(25,12,6,.9));
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,220,170,.08);
}
.rsvp__titulo { margin: 0 0 .3em; font-family: var(--serif-caps); font-weight: 600; font-size: clamp(26px, 2vw + 14px, 40px); line-height: 1.15; color: var(--creme); }
.rsvp__intro { max-width: 46ch; margin: 0 auto 26px; color: var(--texto-suave); }
.rsvp__form { text-align: left; }
.rsvp__sessoes { border: 0; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.rsvp__sessoes legend { grid-column: 1 / -1; margin-bottom: 10px; font-family: var(--serif-caps); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); }
.sessao-op { position: relative; cursor: pointer; }
.sessao-op input { position: absolute; opacity: 0; pointer-events: none; }
.sessao-op__caixa {
  display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%;
  padding: 16px 10px 14px; border-radius: 14px; text-align: center;
  border: 1px solid rgba(217,164,99,.35); background: rgba(12,6,3,.55);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s var(--ease);
}
.sessao-op:hover .sessao-op__caixa { border-color: var(--ouro-2); }
.sessao-op input:focus-visible + .sessao-op__caixa { box-shadow: 0 0 0 4px rgba(241,197,138,.25); }
.sessao-op input:checked + .sessao-op__caixa {
  border-color: var(--ouro); transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(155,31,34,.55), rgba(125,21,25,.45));
  box-shadow: 0 14px 30px -14px rgba(155,31,34,.8), inset 0 0 0 1px rgba(241,197,138,.4);
}
.sessao-op__dia { font-family: var(--serif-caps); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.sessao-op input:checked + .sessao-op__caixa .sessao-op__dia { color: var(--creme); }
.sessao-op__hora { font-family: var(--serif-caps); font-weight: 600; font-size: 24px; color: var(--creme); }
.sessao-op__conf { margin-top: 4px; font-style: italic; font-size: 15px; color: var(--ouro-2); font-variant-numeric: lining-nums; }
.rsvp__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.rsvp__campos .campo:last-child { grid-column: 1 / -1; }
.qtd { display: flex; align-items: center; gap: 10px; }
.campo .qtd input {
  flex: none; width: 96px; text-align: center; padding: 12px 8px; border-radius: 12px;
  border: 1px solid rgba(217,164,99,.35); background: rgba(12,6,3,.6);
  color: var(--creme); font-family: var(--serif); font-weight: 600; font-size: 28px; font-variant-numeric: lining-nums; -moz-appearance: textfield;
}
.qtd input::-webkit-outer-spin-button, .qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtd__btn {
  width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 26px; line-height: 1;
  border: 1px solid var(--linha); background: rgba(20,9,5,.6); color: var(--ouro);
  transition: background .2s, color .2s;
}
.qtd__btn:hover { background: var(--ouro); color: #2a1408; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.rsvp__erro { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: rgba(155,31,34,.25); border: 1px solid rgba(155,31,34,.6); color: #ffd9cf; font-size: 17px; }
.rsvp__ok { animation: surge .6s var(--ease); }
.rsvp__ok svg { width: 54px; height: 54px; fill: var(--ouro); margin: 0 auto 6px; filter: drop-shadow(0 0 14px rgba(255,210,140,.8)); animation: brilhoEstrela 4s ease-in-out infinite; }
.rsvp__ok h3 { margin: 0 0 6px; font-family: var(--serif-caps); font-weight: 600; font-size: clamp(26px, 2vw + 14px, 38px); color: var(--creme); }
.rsvp__ok p { max-width: 44ch; margin: 0 auto 22px; font-size: 1.1em; }
.rsvp__ok p strong { color: var(--ouro); }
.rsvp__ok-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 10px; }
@media (max-width: 640px) {
  .rsvp__sessoes { grid-template-columns: 1fr; }
  .sessao-op__caixa { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 14px 18px; text-align: left; }
  .sessao-op__dia { grid-column: 1; grid-row: 1; }
  .sessao-op__conf { grid-column: 1; grid-row: 2; margin-top: 0; }
  .sessao-op__hora { grid-column: 2; grid-row: 1 / span 2; font-size: 24px; }
  .rsvp__campos { grid-template-columns: 1fr; }
}

.sessao-op--off { cursor: not-allowed; opacity: .5; }
.sessao-op--off .sessao-op__caixa { border-style: dashed; }
.rsvp__fechado { margin: 0 auto 10px; max-width: 46ch; padding: 14px 18px; border-radius: 14px; border: 1px dashed var(--linha); color: var(--texto); font-style: italic; }

/* ---------- história ---------- */
.historia {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px);
  align-items: center; max-width: 1150px; margin: 0 auto;
}
.historia__img img { border-radius: var(--raio); box-shadow: 0 40px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(217,164,99,.3); transform: rotate(-2deg); transition: transform .8s var(--ease); }
.historia__img:hover img { transform: rotate(0) scale(1.02); }
.historia__texto p:not(.kicker) { margin: 0 0 1em; font-size: 1.1em; color: var(--texto); }
.historia__texto p:not(.kicker):first-of-type::first-letter { float: left; font-family: var(--serif-caps); font-size: 3.4em; line-height: .85; padding: 6px 10px 0 0; color: var(--ouro); }

/* ---------- convidar ---------- */
.convidar { background: radial-gradient(ellipse at 50% 0%, rgba(125,21,25,.28), transparent 60%); }
.convidar__caixa {
  max-width: 860px; margin: 0 auto; padding: clamp(32px, 5vw, 58px) clamp(18px, 4vw, 52px);
  border-radius: 26px; border: 1px solid var(--linha);
  background: linear-gradient(180deg, rgba(43,23,13,.85), rgba(25,12,6,.9));
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,220,170,.08);
}
.convidar__intro { max-width: 52ch; margin: 0 auto 28px; color: var(--texto-suave); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--full, .form .btn { grid-column: 1 / -1; }
.campo span { font-family: var(--serif-caps); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); }
.campo small { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-size: 14px; color: var(--texto-suave); }
.campo input, .campo textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(217,164,99,.35); background: rgba(12,6,3,.6);
  color: var(--creme); font-family: var(--serif); font-size: 20px;
  transition: border-color .2s, box-shadow .2s; resize: vertical;
}
.campo input::placeholder, .campo textarea::placeholder { color: #7d6650; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgba(241,197,138,.15); }

.resultado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; text-align: left; animation: surge .6s var(--ease); }
.resultado[hidden] { display: none; }
.resultado__previa canvas { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(217,164,99,.35); }
.resultado__acoes { display: flex; flex-direction: column; gap: 12px; }
.resultado__acoes .btn { width: 100%; }
.resultado__ok { margin: 0 0 4px; font-size: 1.15em; color: var(--creme); }
.resultado__ok strong { color: var(--ouro); font-style: italic; }
.link-copia { display: flex; border: 1px solid rgba(217,164,99,.35); border-radius: 12px; overflow: hidden; }
.link-copia input { flex: 1; min-width: 0; padding: 12px 14px; border: 0; background: rgba(12,6,3,.6); color: var(--texto-suave); font-size: 14px; font-family: ui-monospace, monospace; }
.link-copia button { border: 0; padding: 0 18px; cursor: pointer; background: var(--vinho); color: var(--creme); font-family: var(--serif-caps); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.link-copia button:hover { background: var(--vinho-2); }
.link-novo { border: 0; background: none; cursor: pointer; color: var(--texto-suave); text-decoration: underline; text-underline-offset: 3px; font-style: italic; padding: 6px; }
.contador { margin: 26px 0 0; font-family: var(--serif-caps); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); }
.contador span { color: var(--ouro); font-size: 1.3em; font-family: var(--serif); font-weight: 600; font-variant-numeric: lining-nums; }

/* ---------- local ---------- */
.local { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 70px); align-items: center; max-width: 1150px; margin: 0 auto; }
.local__end { display: flex; gap: 12px; align-items: flex-start; font-size: 1.25em; color: var(--creme); margin: 0 0 26px; }
.local__end svg { flex: none; width: 28px; height: 28px; margin-top: 3px; fill: none; stroke: var(--ouro); stroke-width: 1.6; }
.local__botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.local__mapa { border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); aspect-ratio: 4 / 3; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
.local__mapa iframe { width: 100%; height: 100%; border: 0; filter: sepia(.35) saturate(.9) contrast(1.05) brightness(.9); }

/* ---------- rodapé ---------- */
.rodape { position: relative; padding: 0 16px 34px; color: var(--texto-suave); background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)); }
.rodape__faixa { display: flex; align-items: center; gap: 18px; max-width: 1150px; margin: 0 auto; }
.rodape__faixa i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,164,99,.55)); }
.rodape__faixa i:last-child { transform: scaleX(-1); }
.rodape__faixa svg { width: 22px; height: 22px; fill: var(--ouro); filter: drop-shadow(0 0 8px rgba(255,210,140,.7)); }
.rodape__grade { max-width: 1150px; margin: 0 auto; padding: 46px 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.rodape__info { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.rodape__evento { margin: 0; font-family: var(--serif-caps); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); }
.rodape__evento em { font-family: var(--serif); font-style: italic; font-size: 1.35em; letter-spacing: 0; text-transform: none; color: var(--creme); }
.rodape__end { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--creme); font-size: 1.1em; line-height: 1.45; transition: color .2s; }
.rodape__end:hover { color: var(--ouro); }
.rodape__end svg { flex: none; width: 26px; height: 26px; margin-top: 2px; fill: none; stroke: var(--ouro); stroke-width: 1.6; }
.rodape__kit { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--linha); text-decoration: none;
  font-family: var(--serif-caps); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); transition: all .25s var(--ease); }
.rodape__kit:hover { background: var(--ouro); color: #2a1408; border-color: var(--ouro); }
.rodape__kit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rodape__marcas { display: flex; align-items: center; gap: 30px; }
.rodape__viva { height: 108px; width: auto; opacity: .95; }
.rodape__viva-link { display: block; border-radius: 8px; transition: transform .3s var(--ease), filter .3s; }
.rodape__viva-link:hover { transform: translateY(-3px); filter: drop-shadow(0 0 14px rgba(255,210,140,.45)); }
.rodape__ibb { height: 70px; width: auto; opacity: .95; }
.rodape__sep { width: 1px; height: 76px; background: linear-gradient(180deg, transparent, rgba(217,164,99,.6), transparent); }
.rodape__final { max-width: 1150px; margin: 0 auto; padding-top: 22px; border-top: 1px solid rgba(217,164,99,.12); text-align: center; font-size: 14px; font-style: italic; color: #8d7660; }
@media (max-width: 720px) {
  .rodape__grade { flex-direction: column-reverse; text-align: center; gap: 34px; padding: 38px 0 32px; }
  .rodape__info { align-items: center; }
  .rodape__end { text-align: left; }
  .rodape__viva { height: 92px; } .rodape__ibb { height: 58px; }
  .rodape__kit { font-size: 11px; letter-spacing: .08em; padding: 10px 16px; }
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 200;
  transform: translate(-50%, calc(100% + 60px)); opacity: 0; padding: 12px 22px; border-radius: 999px;
  background: var(--creme); color: #2a1408; font-family: var(--serif-caps); font-size: 13px; letter-spacing: .1em;
  box-shadow: 0 16px 40px rgba(0,0,0,.6); transition: transform .45s var(--ease), opacity .3s;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- animação de entrada ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.visivel { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 820px) {
  .historia, .local, .resultado { grid-template-columns: 1fr; }
  .historia__img { max-width: 440px; margin: 0 auto; }
  .secao__titulo--esq, .local__info { text-align: center; }
  .local__end, .local__botoes { justify-content: center; }
  .datas__estrela { width: 100%; justify-content: center; }
  .resultado__previa { max-width: 380px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; }
  .hero__acoes .btn { flex: 1 1 100%; }
  .btn { padding: 0 20px; letter-spacing: .12em; }
  .hero__conteudo { padding-top: 70px; }
  .relogio div { width: 22%; }
}

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