/* ================================================
   FELIZ ANIVERSÁRIO LÍVIA ✦  — styles.css
   Versão FINAL REFATORADA — Todos os bugs resolvidos
   ================================================ */

:root {
  --rosa: #F8A1D5;
  --rosa-claro: #fce8f5;
  --rosa-palido: #fff5fb;
  --dourado: #c9a84c;
  --dourado-cl: #e8cc80;
  --preto: #1c1c1c;
  --creme: #fff8fc;
  --branco: #ffffff;

  --f-display: 'Playfair Display', Georgia, serif;
  --f-script: 'Great Vibes', cursive;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-sans: 'DM Sans', system-ui, sans-serif;
  --f-carta: 'Dancing Script', cursive;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pill: 999px;
}

/* ════════════════════════════════════
   RESET TOTAL
════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  /* overflow-x:hidden REMOVIDO — em html/body cria stacking context
     que quebra position:fixed de filhos (ex: #celebration-root).
     O layout horizontal já é contido pelos próprios elementos. */
}

body {
  margin: 0;
  padding: 0;
  background: var(--creme);
  color: var(--preto);
  font-family: var(--f-serif);
  /* overflow-x:hidden REMOVIDO — mesmo motivo acima.
     Qualquer overflow horizontal real deve ser clipado
     em nível de section/container específico. */
  line-height: 1;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

figure {
  margin: 0;
  padding: 0;
}

/* Seções sem margem nem padding externo — fluxo direto */
section {
  margin: 0;
  padding: 0;
  display: block;
}

#site-wrapper {
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  /* overflow-x:hidden REMOVIDO — criava stacking context que bloqueava
     position:fixed do #celebration-root. O clip horizontal não é
     necessário pois todos os elementos são 100vw sem overflow. */
}


/* ════════════════════════════════════
   PRELOADER
════════════════════════════════════ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--rosa-palido);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader__eyes {
  width: clamp(180px, 40vw, 300px);
  height: auto;
  transform-origin: center;
}


/* ════════════════════════════════════
   S1 — HERO
════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 580px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform;
}

.hero__bg--desktop {
  background-image: url('assets/background-01.jpeg');
  display: none;
}

.hero__bg--mobile {
  background-image: url('assets/hero-bg-mobile.png');
  display: block;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 20%, rgba(28, 28, 28, .55) 100%);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(255, 245, 251, .06), rgba(248, 161, 213, .07) 50%, rgba(255, 248, 252, .18));
}

.hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.2rem, .8vw, .6rem);
}

.hero__date {
  font-family: var(--f-sans);
  font-size: clamp(9px, 2vw, 11px);
  font-weight: 400;
  letter-spacing: .55em;
  color: rgba(255, 255, 255, .88);
  text-transform: uppercase;
  opacity: 0;
}

.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.hero__title-line {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  color: var(--branco);
  text-shadow: 0 2px 20px rgba(28, 28, 28, .3);
  opacity: 0;
}

.hero__title-line--feliz {
  font-size: clamp(3.8rem, 13vw, 9rem);
}

.hero__title-line--aniversario {
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 400;
  letter-spacing: .03em;
}

.hero__name {
  font-family: var(--f-script);
  font-size: clamp(3.8rem, 12vw, 8.5rem);
  color: var(--dourado-cl);
  line-height: 1.1;
  opacity: 0;
  text-shadow: 0 2px 30px rgba(201, 168, 76, .45);
  margin-top: clamp(.4rem, 1.5vw, 1.2rem);
}

.hero__scroll-indicator {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  opacity: 0;
}

.hero__scroll-text {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(255, 255, 255, .75);
  text-transform: uppercase;
}

.hero__scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .7), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollPulse {

  0%,
  100% {
    transform: scaleY(1);
    opacity: .7;
  }

  50% {
    transform: scaleY(.65);
    opacity: .3;
  }
}


/* ════════════════════════════════════
   S2 — SLIDER
   overflow:visible obrigatório para GSAP pin
════════════════════════════════════ */
.slider-section {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.slider-pin-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slider-track {
  display: flex;
  width: 300vw;
  height: 100vh;
  will-change: transform;
  margin: 0;
  padding: 0;
}

.slider-card {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.slider-card[data-card="01"] {
  background: linear-gradient(135deg, #fff5fb, #fce8f5, #f9d5ed);
}

.slider-card[data-card="02"] {
  background: linear-gradient(135deg, #fce8f5, #fff0f8, #fce4f0);
}

.slider-card[data-card="03"] {
  background: linear-gradient(135deg, #fff8fc, #fce8f5, #f5dff0);
}

.card__number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-size: clamp(8rem, 24vw, 18rem);
  font-weight: 700;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 168, 76, .1);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.card__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: clamp(280px, 70vw, 620px);
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.8rem, 2vh, 1.4rem);
  margin: 0 auto;
}

.card__label {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: .35em;
  color: var(--dourado);
  text-transform: uppercase;
}

.card__icon {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(201, 168, 76, .3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.7rem, 4.5vw, 3.2rem);
  color: var(--preto);
  line-height: 1.15;
}

.card__text {
  font-family: var(--f-serif);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(28, 28, 28, .7);
  max-width: 42ch;
}


/* ════════════════════════════════════
   S3 — MEMORIAL
   
   CORREÇÃO CRÍTICA v2:
   - A altura da .memorial__scene deve ser EXATAMENTE igual
     ao viewBox do SVG (2200px mobile, 3600px desktop).
   - O SVG termina no ponto Y final do path, que é ~2190 para mobile.
   - A .carta deve começar IMEDIATAMENTE após o SVG, sem espaço.
   - Para isso, removemos o margin-bottom negativo e ajustamos
     o padding-top da carta para ser mínimo (apenas para espaçamento
     interno, não para criar gap).
   - O z-index da .carta (2) deve ser maior que o do .memorial (1)
     para que a carta sobreponha suavemente o final da linha.
════════════════════════════════════ */

.memorial__header {
  text-align: center;
  padding: clamp(4rem, 10vh, 8rem) 1.5rem clamp(1.5rem, 3vh, 3rem);
  position: relative;
  z-index: 2;
}

.memorial__eyebrow {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: .6rem;
}

.memorial__title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 7vw, 5rem);
  font-weight: 700;
  color: var(--preto);
  line-height: 1.1;
}

.memorial__title em {
  font-style: italic;
  color: var(--rosa);
}

/* ALTURA DO MEMORIAL — exatamente igual ao viewBox SVG.
   Mobile viewBox: 390×2200 → scene: 2200px
   Desktop viewBox: 1400×3600 → scene: 3600px (via media query)
   Isso garante que a linha termine EXATAMENTE no fundo da scene. */
/* Mobile — linha 285 aprox. */
.memorial__scene {
  position: relative;
  width: 100%;
  height: 2220px;    /* ← era 2200px, agora bate com o fim do path (Y=2190) */
  margin: 0;
  padding: 0;
}

.memorial {
  position: relative;
  background: var(--creme);
  margin: 0;
  margin-bottom: 0px;  /* ← ADICIONAR: puxa a carta para cima, sobrepondo o gap */
  padding: 0;
  overflow: visible;
  display: block;
  z-index: 1;
}


.memorial__line-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.memorial__line-wrap--desktop {
  display: none;
}

.memorial__line-wrap--mobile {
  display: block;
}

.memorial__line-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ── Polaroids ── */
.polaroid {
  position: absolute;
  z-index: 2;
  will-change: transform, opacity;
  width: 42vw;
  max-width: 170px;
}

.polaroid__frame {
  background: var(--branco);
  padding: 8px;
  padding-bottom: 32px;
  box-shadow: 0 8px 32px rgba(28, 28, 28, .15), 0 2px 8px rgba(28, 28, 28, .08);
}

.polaroid__frame img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}

/* Posições mobile — percentuais do memorial__scene */
.polaroid--01 {
  top: 3%;
  left: 5%;
}

.polaroid--02 {
  top: 22%;
  right: 5%;
  left: auto;
}

.polaroid--03 {
  top: 41%;
  left: 5%;
}

.polaroid--04 {
  top: 60%;
  right: 5%;
  left: auto;
}

.polaroid--05 {
  top: 79%;
  left: 50%;
  transform: translateX(-50%);
}


/* ════════════════════════════════════
   S4 — CARTA
   
   CORREÇÃO CRÍTICA v2:
   - Sem margin-top negativo.
   - Padding-top reduzido ao mínimo necessário para espaçamento
     interno (apenas o espaço entre o topo da carta e o "Para Lívia").
   - A carta começa IMEDIATAMENTE após o memorial, sem gap.
   - Z-index: 2 (acima do memorial) para sobreposição suave.
════════════════════════════════════ */
.carta {
  position: relative;
  width: 100%;
  min-height: 100svh;
  margin-top: -80px;
  /* Padding-top reduzido: apenas espaçamento interno */
  padding: clamp(2rem, 4vh, 3rem) 1.5rem clamp(3rem, 8vh, 6rem);
  background: linear-gradient(to bottom,
      var(--creme) 0%,
      #fdf6ff 25%,
      #fce8f5 60%,
      #fff5fb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 2;
}

.carta__envelope-wrap {
  width: 100%;
  max-width: 660px;
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity;
}

.carta__paper {
  background: #fffef9;
  border: 1px solid rgba(201, 168, 76, .2);
  border-radius: 2px;
  padding: clamp(1.8rem, 5vw, 3.5rem) clamp(1.3rem, 4.5vw, 3rem);
  position: relative;
  box-shadow: 0 20px 80px rgba(28, 28, 28, .1), 0 4px 16px rgba(28, 28, 28, .06);
}

.carta__paper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  pointer-events: none;
  background-image: repeating-linear-gradient(transparent, transparent 31px,
      rgba(201, 168, 76, .07) 31px, rgba(201, 168, 76, .07) 32px);
}

.carta__deco {
  position: absolute;
  top: 16px;
  right: 16px;
  width: clamp(44px, 9vw, 70px);
  height: clamp(44px, 9vw, 70px);
  opacity: .65;
}

.carta__para {
  font-family: var(--f-carta);
  font-size: clamp(1.3rem, 3.5vw, 1.9rem);
  color: var(--dourado);
  font-weight: 600;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
  position: relative;
  z-index: 1;
}

.carta__body {
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, 1.3vh, .9rem);
  margin-bottom: clamp(1.6rem, 4vh, 2.5rem);
  position: relative;
  z-index: 1;
}

.carta__line {
  font-family: var(--f-carta);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  color: var(--preto);
  line-height: 1.65;
  opacity: 1;
  transform: translateX(0);
  will-change: opacity, transform;
}

.carta__footer {
  text-align: right;
  border-top: 1px solid rgba(201, 168, 76, .2);
  padding-top: clamp(.9rem, 2.5vh, 1.4rem);
  position: relative;
  z-index: 1;
}

.carta__assinatura {
  font-family: var(--f-carta);
  font-size: clamp(.9rem, 2vw, 1.1rem);
  color: rgba(28, 28, 28, .6);
}

.carta__nome-assinatura {
  font-family: var(--f-carta);
  font-size: clamp(1.5rem, 3.8vw, 2.1rem);
  font-weight: 700;
  color: var(--preto);
  margin-top: .2rem;
}


/* ════════════════════════════════════
   S5 — SURPRESA
════════════════════════════════════ */
.surpresa {
  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(4rem, 10vh, 7rem) 1.5rem;
  background: linear-gradient(160deg, var(--creme), var(--rosa-claro));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  overflow: hidden;
}

.surpresa__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3.5vh, 2.8rem);
  max-width: 680px;
  width: 100%;
}

.surpresa__title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 8vw, 5.2rem);
  font-weight: 400;
  color: var(--preto);
  line-height: 1.15;
}

.surpresa__title em {
  font-style: italic;
  color: var(--rosa);
}

.surpresa__footnote {
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-style: italic;
  color: rgba(28, 28, 28, .6);
}

/* ── Botão base compartilhado (surpresa + celebrar) ── */
.surpresa__btn,
.final__btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.4rem;
  border-radius: var(--pill);
  font-family: var(--f-sans);
  font-size: clamp(.85rem, 2vw, 1rem);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--preto);
  color: var(--branco);
  border: 2px solid var(--preto);
  transition: transform .3s var(--ease), box-shadow .4s var(--ease);
}

/* Hover: gradient rosa desliza da esquerda */
.surpresa__btn::before,
.final__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--rosa), #d4609c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
  z-index: 0;
  border-radius: var(--pill);
}

/* Hover: ativo apenas em dispositivos com mouse real
   Em touch (pointer:coarse) o hover fica preso — desativamos */
@media (hover: hover) and (pointer: fine) {
  .surpresa__btn:hover::before,
  .final__btn:hover::before {
    transform: scaleX(1);
  }

  .surpresa__btn:hover,
  .final__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(248, 161, 213, .4);
  }
}

.surpresa__btn:active,
.final__btn:active {
  transform: scale(.95) translateY(1px);
  transition-duration: .08s;
}

/* Estado ativo (após 1º clique no btn-surpresa) */
.surpresa__btn.btn--active {
  background: linear-gradient(135deg, var(--rosa), #d4609c);
  border-color: transparent;
  box-shadow: 0 12px 40px rgba(248, 161, 213, .5);
  transform: translateY(-2px);
}

.surpresa__btn.btn--active::before {
  display: none;
}

/* Flip de texto interno do botão surpresa */
.surpresa__btn-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 1.4em;
  overflow: hidden;
  z-index: 1;
}

.surpresa__btn-text {
  display: flex;
  align-items: center;
  gap: .45rem;
  transition: transform .4s var(--ease);
  white-space: nowrap;
  line-height: 1.4;
}

.surpresa__btn-text--default {
  transform: translateY(0);
}

.surpresa__btn-text--active {
  position: absolute;
  transform: translateY(100%);
}

.surpresa__btn.btn--active .surpresa__btn-text--default {
  transform: translateY(-100%);
}

.surpresa__btn.btn--active .surpresa__btn-text--active {
  transform: translateY(0);
}


/* ════════════════════════════════════
   S6 — QUOTE
   Animação por palavras individuais (GSAP stagger).
   Não usa mais background-clip hack (instável).
════════════════════════════════════ */
.quote-section {
  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(4rem, 10vh, 7rem) 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rosa-claro);
  overflow: hidden;
  min-height: 60vh;
}

.quote {
  max-width: min(780px, 90vw);
  text-align: center;
}

.quote__text {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.55rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--preto);
  /* Palavras são <span class="quote__word"> criados pelo JS */
}

/* Cada palavra é um inline-block animável */
.quote__word {
  display: inline-block;
  /* Estado inicial controlado pelo GSAP (opacity:0, y:18) */
}


/* ════════════════════════════════════
   S7 — FINAL
════════════════════════════════════ */
.final {
  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(4rem, 10vh, 7rem) 1.5rem clamp(3rem, 7vh, 6rem);
  background: linear-gradient(160deg, var(--rosa-claro), var(--creme) 65%, var(--branco));
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.4rem, 5vh, 4.5rem);
  max-width: 800px;
  width: 100%;
  text-align: center;
}

.final__portrait-wrap {
  position: relative;
  display: inline-block;
}

.final__portrait-frame {
  background: var(--branco);
  padding: 10px;
  padding-bottom: 40px;
  box-shadow: 0 8px 32px rgba(28, 28, 28, .15), 0 2px 8px rgba(28, 28, 28, .08);
  transform: rotate(-1.5deg) scale(1);
  transition: transform .4s var(--ease);
}

.final__portrait-wrap:hover .final__portrait-frame {
  transform: rotate(0deg) scale(1.03);
}

.final__portrait-img {
  width: clamp(180px, 55vw, 290px);
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.sparks-canvas {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  z-index: 10;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
}

.final__title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.8rem, 9vw, 6rem);
  color: var(--preto);
  line-height: 1.05;
}

.final__title em {
  font-family: var(--f-script);
  font-style: normal;
  font-size: clamp(3.2rem, 10vw, 7rem);
  color: var(--rosa);
}

.final__subtitle {
  font-family: var(--f-serif);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(28, 28, 28, .65);
  max-width: 40ch;
  margin: 0 auto;
}

.final__btn {
  gap: .45rem;
  font-size: clamp(.75rem, 1.8vw, .9rem);
  letter-spacing: .12em;
}

.final__btn span,
.final__btn svg {
  position: relative;
  z-index: 1;
}


/* ════════════════════════════════════
   S8 — COUNTDOWN
════════════════════════════════════ */
.countdown-section {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.countdown__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #1a0a12;
  z-index: 0;
}

.countdown__bg--desktop {
  background-image: url('assets/background-01.jpeg');
  display: none;
}

.countdown__bg--mobile {
  background-image: url('assets/hero-bg-mobile.png');
  display: block;
}

.countdown__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(24, 8, 18, .5), rgba(10, 3, 8, .9));
}

.countdown__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.8rem, 2.5vh, 1.8rem);
  width: 100%;
}

.countdown__label {
  font-family: var(--f-sans);
  font-size: clamp(10px, 2vw, 13px);
  letter-spacing: .7em;
  color: rgba(248, 161, 213, .8);
  text-transform: uppercase;
}

.countdown__timer {
  display: flex;
  align-items: flex-end;
  gap: clamp(.15rem, .6vw, .5rem);
  flex-wrap: wrap;
  justify-content: center;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}

.countdown__num {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 4.5vw, 4rem);
  font-weight: 700;
  font-style: italic;
  color: var(--branco);
  line-height: 1;
  text-align: center;
  min-width: 2ch;
  text-shadow: 0 0 40px rgba(248, 161, 213, .4);
}

.countdown__unit-label {
  font-family: var(--f-sans);
  font-size: clamp(6px, 1.1vw, 9px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.countdown__sep {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.5vw, 3rem);
  font-weight: 700;
  color: rgba(248, 161, 213, .5);
  line-height: 1;
  padding-bottom: clamp(.7rem, 1.2vh, 1rem);
}

.countdown__msg {
  font-family: var(--f-serif);
  font-size: clamp(.95rem, 2.5vw, 1.3rem);
  font-style: italic;
  font-weight: 300;
  color: rgba(255, 255, 255, .7);
  max-width: 40ch;
  line-height: 1.55;
}


/* ════════════════════════════════════
   DESKTOP ≥ 768px
════════════════════════════════════ */
@media (min-width: 768px) {
  .hero__bg--desktop {
    display: block;
  }

  .hero__bg--mobile {
    display: none;
  }

  .hero__title-line--feliz {
    font-size: clamp(5rem, 12vw, 11rem);
  }

  /* Memorial: altura igual ao viewBox desktop (3600px) */
  .memorial__line-wrap--desktop {
    display: block;
  }

  .memorial__line-wrap--mobile {
    display: none;
  }

  .memorial__scene {
    height: 3600px;
  }
  
  .memorial {
    margin-bottom: 0;
  }

  .polaroid {
    width: clamp(150px, 17vw, 260px);
    max-width: none;
  }

  .polaroid--01 {
    top: 1%;
    left: 8%;
    right: auto;
    transform: rotate(-2.5deg);
  }

  .polaroid--02 {
    top: 24%;
    right: 8%;
    left: auto;
    transform: rotate(2deg);
  }

  .polaroid--03 {
    top: 44%;
    left: 10%;
    right: auto;
    transform: rotate(-1.5deg);
  }

  .polaroid--04 {
    top: 65%;
    right: 10%;
    left: auto;
    transform: rotate(2.5deg);
  }

  .polaroid--05 {
    top: 84%;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
  }

  /* Slider */
  .card__content {
    max-width: clamp(360px, 50vw, 620px);
  }

  /* Final — 2 colunas */
  .final__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    text-align: left;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .final__portrait-wrap {
    grid-row: 1/3;
    justify-self: end;
  }

  .final__text {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }

  .final__subtitle {
    margin: 0;
  }

  .final__btn {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: start;
  }

  .countdown__bg--desktop {
    display: block;
  }

  .countdown__bg--mobile {
    display: none;
  }
}

@media (max-width: 380px) {
  .hero__title-line--feliz {
    font-size: 3rem;
  }

  .hero__name {
    font-size: 3rem;
  }

  .polaroid {
    width: 46vw;
  }

  .countdown__sep {
    display: none;
  }

  .countdown__num {
    font-size: 1.4rem;
  }

  .countdown__unit-label {
    font-size: 6px;
    letter-spacing: .1em;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  .hero__scroll-line {
    animation: none;
  }
}