/* ============================================================================
   CARLA & HENRIQUE · folha de estilo
   ----------------------------------------------------------------------------
   Conceito: "O Fio" — uma linha dourada costura o site inteiro, do primeiro
   ao último capítulo. Paleta quente (areia / tinta / terracota / ouro).

   Índice
   01. Tokens (cores, tipografia, espaços)
   02. Reset e base
   03. Tipografia e utilitários
   04. Botões
   05. Animações de entrada
   06. Cursor personalizado
   07. Preloader e monograma
   08. Barra de progresso (o fio)
   09. Navegação
   10. Hero
   11. Convite
   12. Nossa história (linha do tempo)
   13. Interlúdios (parallax)
   14. Galeria + lightbox
   15. Contagem regressiva
   16. Detalhes (cartões, cronograma, mapa, dúvidas)
   17. RSVP
   18. Presentes (PIX + cotas)
   19. Rodapé
   20. Música ambiente e avisos
   21. Responsivo
   22. Acessibilidade / movimento reduzido / impressão
   ============================================================================ */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  /* --- Paleta --------------------------------------------------------- */
  --areia:      #F6F1E9;   /* base clara e quente                          */
  --areia-2:    #EFE7DB;   /* superfície alternada                         */
  --areia-3:    #E3D6C6;   /* bordas e linhas suaves                       */
  --tinta:      #241D1B;   /* quase preto, quente: textos e fundos         */
  --tinta-2:    #4E4137;   /* texto secundário (8.5:1 sobre a areia)       */
  --terracota:  #B45F49;   /* acento GRÁFICO: fios, nós, estados de foco   */
  /* O mesmo tom, escurecido. Em 11px o terracota dá 4.0:1 e reprova; para
     texto pequeno a cor precisa ser mais fechada, e a diferença entre os
     dois quase não se percebe lado a lado. */
  --terracota-texto: #9C4C39;
  --ouro:       #A8874F;   /* acento metálico sobre fundo CLARO (4.6:1)    */
  --ouro-claro: #D8BE8E;   /* o mesmo dourado sobre fundo ESCURO (8.4:1)   */
  --branco:     #FDFBF7;

  /* Texto sobre fundo escuro. O corpo em 0.62 de opacidade ficava fraco
     demais; 0.80 mantém a hierarquia e continua confortável de ler. */
  --claro-1:    rgba(253, 251, 247, .96);
  --claro-2:    rgba(246, 241, 233, .80);

  /* --- Tipografia ------------------------------------------------------ */
  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Futura', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --t-display: clamp(2.9rem, 9.5vw, 7.4rem);
  --t-titulo:  clamp(2.1rem, 5.2vw, 4rem);
  --t-sub:     clamp(1.4rem, 2.6vw, 2rem);
  --t-corpo:   clamp(1rem, 1.15vw, 1.1rem);
  --t-grande:  clamp(1.1rem, 1.5vw, 1.35rem);
  --t-olho:    clamp(.66rem, .8vw, .74rem);

  /* --- Ritmo -----------------------------------------------------------
     Três respiros diferentes de propósito. Dar o mesmo espaçamento a todas
     as seções é o que faz a página inteira ter a mesma cadência de template. */
  --secao-larga: clamp(7rem, 17vh, 13rem);
  --secao:       clamp(5.5rem, 12vh, 10rem);
  --secao-curta: clamp(3.5rem, 7vh, 6rem);
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --max:       1240px;
  --max-texto: 62ch;

  /* --- Movimento ------------------------------------------------------- */
  --suave: cubic-bezier(.22, .61, .36, 1);
  --seda:  cubic-bezier(.65, .05, .36, 1);
}


/* ==========================================================================
   02. RESET E BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* A Cormorant usa algarismos antigos (0, 1, 2 com alturas diferentes) por
     padrão. Fica bonito em texto corrido, mas ilegível em número: "129" vira
     "I29" e "16h00" vira "16hoo". Forçamos os algarismos de caixa alta. */
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}

/* Trava a rolagem quando lightbox / menu estão abertos */
body.travado { overflow: hidden; }

/* Textura de papel — grão sutil sobre a página inteira */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .3;                  /* o grão só funciona entre 3% e 6% de peso */
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

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

/* O navegador dá a <figure> uma margem de "1em 40px" e a <dd> uma margem
   esquerda de 40px. Dentro de um grid isso encolhe o item dentro da própria
   célula e abre um vão que não vem do gap. */
figure, blockquote, dl, dd { margin: 0; }

/* <picture> é inline por padrão e não repassa altura para a <img> dentro
   dele, o que quebraria o object-fit dos fundos de largura total. */
picture { display: block; width: 100%; height: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--terracota); color: var(--branco); }

:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
  border-radius: 2px;
}

section { position: relative; }

/* Offset para os links âncora não ficarem embaixo do topo fixo */
section[id] { scroll-margin-top: 84px; }


/* ==========================================================================
   03. TIPOGRAFIA E UTILITÁRIOS
   ========================================================================== */
.olho {                                   /* rótulo pequeno em versalete */
  margin: 0 0 1.1rem;
  font-family: var(--sans);
  font-size: var(--t-olho);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--terracota-texto);
}
.olho--claro { color: var(--claro-1); }

/* Sem traço antes do rótulo: o espacejamento largo já dá o destaque, e o
   tracinho ficava solto, principalmente nos rótulos centralizados. */

.titulo {
  margin: 0 0 1.4rem;
  font-family: var(--serif);
  font-size: var(--t-titulo);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.015em;
  white-space: pre-line;                  /* respeita \n vindo dos dados */
}
.titulo--centro { text-align: center; }
.titulo--claro  { color: var(--branco); }

.subtitulo {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: var(--t-sub);
  font-weight: 400;
  line-height: 1.2;
}
/* Subtítulo de bloco: fio fino em cima e alinhado à esquerda, igual ao
   cabeçalho das seções. Antes ficava centralizado e brigava com o resto. */
.subtitulo--bloco {
  display: block;
  margin: 0 0 clamp(1.8rem, 3.5vw, 2.8rem);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid currentColor;
  border-image: linear-gradient(90deg, currentColor, transparent 65%) 1;
  opacity: 1;
  text-align: left;
}

.texto {
  margin: 0 0 1.2rem;
  max-width: var(--max-texto);
  color: var(--tinta-2);
}
.texto--grande { font-size: var(--t-grande); line-height: 1.85; }
.texto--centro { margin-inline: auto; text-align: center; }

.assinatura {
  margin: 2rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--terracota);
}

/* Cabeçalho editorial: título à esquerda, texto de apoio à direita e um
   fio fino no topo. Substitui a pilha centralizada que se repetia em todas
   as seções e dava o mesmo ritmo a todas elas. */
.secao__cabeca {
  max-width: var(--max);
  margin: 0 auto clamp(3rem, 7vw, 5.5rem);
  padding: clamp(1.4rem, 2.5vw, 2rem) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(2rem, 7vw, 7rem);
  row-gap: .6rem;
  text-align: left;
}
.secao__cabeca::before {
  content: '';
  grid-column: 1 / -1;
  height: 1px;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
  background: currentColor;
  opacity: .14;
}
.secao__cabeca .olho    { grid-column: 1; margin-bottom: .6rem; }
.secao__cabeca .titulo  { grid-column: 1; margin-bottom: 0; text-align: left; max-inline-size: 15ch; }
.secao__cabeca .texto   { grid-column: 2; grid-row: 2 / span 2; margin: 0; text-align: left; align-self: end; }

/* seções escuras: o fio precisa aparecer sobre o fundo, não sumir */
.contagem .secao__cabeca::before { opacity: .28; }

/* Ramo decorativo que se desenha */
.ramo {
  width: clamp(150px, 26vw, 240px);
  height: auto;
  margin: 0 auto 2rem;
  fill: none;
  stroke: var(--ouro);
  stroke-width: 1.1;
  stroke-linecap: round;
}


/* ==========================================================================
   04. BOTÕES
   ========================================================================== */
.botao {
  --cor: var(--tinta);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1.05em 2.4em;
  border: 1px solid var(--cor);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cor);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--suave), border-color .45s var(--suave);
}

/* preenchimento que sobe no hover */
.botao::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cor);
  transform: translateY(101%);
  transition: transform .5s var(--seda);
}
.botao:hover::before,
.botao:focus-visible::before { transform: translateY(0); }
.botao:hover { color: var(--areia); }

.botao--cheio { color: var(--areia); }
.botao--cheio::before { transform: translateY(0); }
.botao--cheio:hover { color: var(--areia); }
.botao--cheio:hover::before { transform: translateY(-101%); }
.botao--cheio { background: transparent; }
.botao--cheio { --cor: var(--tinta); }
.botao--cheio:hover { color: var(--tinta); }

.botao--claro { --cor: var(--branco); }
.botao--claro:hover { color: var(--tinta); }

.botao--vazado { background: transparent; }

/* Botão secundário sem pílula. Dois botões-pílula lado a lado dão peso
   igual a ações desiguais e é um dos vícios de template. */
.botao--texto {
  padding: .5em 0;
  border: 0;
  border-radius: 0;
  letter-spacing: .16em;
}
.botao--texto::before { display: none; }
.botao--texto::after {
  content: '';
  position: absolute;
  left: 0; bottom: .2em;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: .45;
  transform-origin: right;
  transition: transform .5s var(--seda), opacity .4s;
}
.botao--texto:hover { color: inherit; }
.botao--texto:hover::after { opacity: 1; transform: scaleX(0); transform-origin: left; }

.botao[disabled] { opacity: .45; pointer-events: none; }


/* ==========================================================================
   05. ANIMAÇÕES DE ENTRADA (IntersectionObserver adiciona .visivel)
   ========================================================================== */
.anim {
  opacity: 0;
  transition:
    opacity   1s var(--suave) var(--atraso, 0ms),
    transform 1.1s var(--suave) var(--atraso, 0ms),
    clip-path 1.2s var(--seda) var(--atraso, 0ms);
  will-change: opacity, transform;
}
/* Cada tipo de elemento entra de um jeito. Repetir o mesmo fade em tudo é
   o que faz a página parecer montada por script. */
.anim[data-anim="up"]     { transform: translateY(32px); }
.anim[data-anim="esq"]    { transform: translateX(-40px); }
.anim[data-anim="dir"]    { transform: translateX(40px); }
.anim[data-anim="escala"] { transform: scale(.94); }

/* ATENÇÃO: nunca esconda com clip-path o próprio elemento observado.
   Um elemento recortado a zero tem área de interseção zero, o observador
   entende que ele não está visível, e ele nunca é revelado. Vira um nó:
   está escondido porque nunca revelou, e nunca revela porque está escondido.

   Por isso o "letreiro" observa o container (que nunca é recortado) e move
   os filhos dentro de máscaras com overflow escondido. */
.anim[data-anim="letreiro"] { opacity: 1; transform: none; }
.anim[data-anim="letreiro"] .mascara {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;      /* espaço para as descidas do q, g, p */
  margin-bottom: -.14em;
}
.anim[data-anim="letreiro"] .sobe {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.1s var(--seda) var(--atraso, 0ms);
}
.anim[data-anim="letreiro"].visivel .sobe { transform: none; }
.anim[data-anim="letreiro"] .mascara:nth-child(2) .sobe { transition-delay: 150ms; }

.anim.visivel {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* Ramo/monograma que se desenham com stroke-dashoffset */
.anim[data-anim="desenhar"] { opacity: 1; }
.anim[data-anim="desenhar"] path,
.anim[data-anim="desenhar"] circle {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.8s var(--suave) var(--atraso, 0ms);
}
.anim[data-anim="desenhar"].visivel path,
.anim[data-anim="desenhar"].visivel circle { stroke-dashoffset: 0; }


/* ==========================================================================
   06. CURSOR PERSONALIZADO
   ========================================================================== */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  html.cursor-custom, html.cursor-custom * { cursor: none !important; }

  .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: 9999;
    pointer-events: none;
    mix-blend-mode: difference;
  }
  .cursor__anel,
  .cursor__ponto {
    position: absolute;
    top: 0; left: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .cursor__anel {
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,.85);
    transition: width .35s var(--suave), height .35s var(--suave),
                background-color .35s var(--suave), opacity .3s;
  }
  .cursor__ponto {
    width: 5px; height: 5px;
    background: #fff;
    transition: opacity .3s, transform .3s var(--suave);
  }
  .cursor__rotulo {
    position: absolute;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    font-family: var(--sans);
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transition: opacity .3s;
    white-space: nowrap;
  }

  /* estado ativo sobre links, botões e fotos */
  .cursor.e-ativo .cursor__anel {
    width: 62px; height: 62px;
    background: rgba(255,255,255,.12);
  }
  .cursor.e-ativo .cursor__ponto { opacity: 0; }
  .cursor.tem-rotulo .cursor__anel { width: 84px; height: 84px; }
  .cursor.tem-rotulo .cursor__rotulo { opacity: 1; }
}


/* ==========================================================================
   07. PRELOADER E MONOGRAMA
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: var(--areia);
  transition: opacity .9s var(--suave), visibility .9s;
}
.preloader.e-fora { opacity: 0; visibility: hidden; }

.preloader__marca { text-align: center; padding-inline: var(--gutter); }

.preloader__texto {
  display: block;
  margin-top: 1.6rem;
  font-size: .64rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--ouro);
  animation: pulsar 2.4s ease-in-out infinite;
}
@keyframes pulsar { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

/* --- Monograma --- */
.monograma { width: clamp(150px, 22vw, 210px); height: auto; overflow: visible; }
.monograma--peq { width: clamp(110px, 15vw, 150px); }

.monograma__anel {
  fill: none;
  stroke: var(--ouro);
  stroke-width: 1;
  stroke-dasharray: 290;
  stroke-dashoffset: 290;
  animation: desenharAnel 2.2s var(--suave) forwards;
}
@keyframes desenharAnel { to { stroke-dashoffset: 0 } }

.monograma__letra,
.monograma__amp {
  font-family: var(--serif);
  fill: var(--tinta);
  text-anchor: middle;
  opacity: 0;
  animation: surgir 1s var(--suave) .55s forwards;
}
.monograma__letra { font-size: 42px; font-weight: 400; }
.monograma__amp   { font-size: 22px; font-style: italic; fill: var(--terracota); animation-delay: .8s; }
@keyframes surgir { to { opacity: 1 } }

.monograma--claro .monograma__letra { fill: var(--areia); }
.monograma--claro .monograma__anel  { stroke: var(--ouro); }


/* ==========================================================================
   08. BARRA DE PROGRESSO — "o fio"
   ========================================================================== */
.fio-progresso {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 800;
  pointer-events: none;
}
.fio-progresso i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ouro), var(--terracota));
  transition: width .12s linear;
}


/* ==========================================================================
   09. NAVEGAÇÃO
   ========================================================================== */
.topo {
  position: fixed;
  top: 0; left: 0;
  z-index: 700;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--gutter);
  color: var(--branco);
  transition: transform .55s var(--suave), background-color .5s, padding .5s, color .5s,
              box-shadow .5s, backdrop-filter .5s;
}
/* estado "rolou" — fundo claro e sólido */
.topo.e-solido {
  background: rgba(246,241,233,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--tinta);
  padding-block: 1rem;
  box-shadow: 0 1px 0 rgba(36,29,27,.08);
}
/* esconde ao descer, revela ao subir */
.topo.e-oculto { transform: translateY(-105%); }

.topo__marca {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: .1em;
}
.topo__marca i { font-style: italic; color: var(--ouro); }

.topo__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.topo__nav a { position: relative; padding: .35em 0; opacity: .85; transition: opacity .3s; }
.topo__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--seda);
}
.topo__nav a:hover { opacity: 1; }
.topo__nav a:hover::after,
.topo__nav a.e-ativa::after { transform: scaleX(1); transform-origin: left; }
/* Sobre a foto do hero o terracota some; só depois que o topo fica sólido
   é que ele tem fundo claro para contrastar. */
.topo__nav a.e-ativa { opacity: 1; color: var(--ouro-claro); }
.topo.e-solido .topo__nav a.e-ativa { color: var(--terracota); }

.topo__cta {
  padding: .8em 1.5em !important;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 1 !important;
}
.topo__cta::after { display: none; }
.topo__cta:hover { background: var(--terracota); border-color: var(--terracota); color: var(--branco); }

/* --- Hambúrguer --- */
.hamburguer {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  z-index: 2;
}
.hamburguer span {
  position: absolute;
  left: 11px;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform .45s var(--seda), opacity .3s;
}
.hamburguer span:nth-child(1) { top: 19px; }
.hamburguer span:nth-child(2) { top: 25px; }
.hamburguer.e-aberto span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.hamburguer.e-aberto span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }


/* ==========================================================================
   10. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;                 /* conteúdo na base, não no centro */
  overflow: hidden;
  color: var(--branco);
}

.hero__midia {
  position: absolute;
  inset: -12% 0;                    /* folga para o parallax */
  z-index: 0;
}
.hero__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: zoomLento 22s var(--suave) forwards;
}
@keyframes zoomLento { from { transform: scale(1.12) } to { transform: scale(1) } }

/* Scrim em várias paradas. Um gradiente de duas paradas cria uma faixa
   visível na transição, e é justamente isso que faz overlay parecer barato.
   Escurece mais à esquerda e na base, onde o texto vive, deixando o rosto
   do casal (à direita) limpo. */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(  0deg,
      hsla(20, 16%, 3%, .93)   0%,
      hsla(20, 15%, 4%, .91) 6.5%,
      hsla(20, 15%, 5%, .87)  15%,
      hsla(20, 14%, 6%, .81)  26%,
      hsla(20, 14%, 7%, .73)  38%,
      hsla(20, 13%, 9%, .61)  51%,
      hsla(20, 12%, 11%, .45) 65%,
      hsla(20, 12%, 13%, .27) 79%,
      hsla(20, 11%, 15%, .11) 91%,
      hsla(20, 11%, 16%, 0)  100%),
    linear-gradient( 90deg,
      hsla(20, 16%, 3%, .58)   0%,
      hsla(20, 15%, 5%, .49)  12%,
      hsla(20, 14%, 7%, .38)  26%,
      hsla(20, 13%, 10%, .26) 41%,
      hsla(20, 12%, 13%, .15) 57%,
      hsla(20, 12%, 15%, .06) 74%,
      hsla(20, 11%, 17%, 0)  100%);
}

/* base do hero: texto à esquerda, contagem à direita, mesma linha de base */
.hero__base {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem clamp(2rem, 6vw, 6rem);
  padding: 9rem var(--gutter) clamp(2.2rem, 4vw, 3.2rem);
}

/* Largura em pixels, não em ch: "ch" mede pelo tamanho de fonte DESTE
   elemento (16px), e o que mora dentro dele é um título de 120px. Com ch
   o nome era cortado pela máscara. */
.hero__conteudo { max-width: min(58vw, 700px); }

.hero__olho {
  margin: 0 0 1.4rem;
  font-size: var(--t-olho);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  /* Dourado em 11px sobre foto não sustenta contraste: fica quase 1:1 nas
     partes claras. Aqui o rótulo é claro, e o dourado segue nos detalhes. */
  color: var(--claro-1);
  text-shadow: 0 1px 10px hsla(20, 16%, 3%, .7);
}

.hero__nomes {
  margin: 0 0 1.8rem;
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 300;
  line-height: .88;                 /* display pede leading apertado */
  letter-spacing: -.035em;          /* e tracking negativo */
  text-wrap: balance;
  /* Reforço, nunca a defesa principal: quem garante a leitura é o véu. */
  text-shadow: 0 2px 24px hsla(20, 16%, 3%, .55);
}
.hero__e {
  font-style: italic;
  font-size: .5em;
  letter-spacing: 0;
  color: var(--ouro-claro);
  margin-right: .12em;
  vertical-align: .06em;
}

.hero__data {
  margin: 0 0 2.4rem;
  font-size: clamp(.82rem, 1.1vw, .95rem);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--claro-1);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
}

/* contagem em linha, discreta, alinhada pela base */
.hero__contagem {
  display: grid;
  justify-items: end;
  gap: 1.8rem;
}
.contador--linha { margin-top: 0; gap: clamp(.9rem, 2vw, 1.8rem); }
.contador--linha .contador__num { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.contador--linha .contador__item span { font-size: .52rem; letter-spacing: .2em; }

/* --- indicação de rolagem --- */
.hero__rolar {
  display: grid;
  justify-items: center;
  gap: .7rem;
  font-size: .56rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--claro-2);
}
.hero__rolar-linha {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--ouro-claro), transparent);
  overflow: hidden;
  position: relative;
}
.hero__rolar-linha::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--branco);
  animation: descer 2.6s var(--suave) infinite;
}
@keyframes descer { 0% { top: -100% } 60%, 100% { top: 100% } }

/* --- pétalas flutuantes --- */
.petalas { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.petala {
  position: absolute;
  top: -8%;
  opacity: 0;
  animation-name: cair;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.petala svg { width: 100%; height: 100%; }
/* Bem discretas: em cima de foto clara, pétala com opacidade alta lê como
   sujeira de lente, não como pétala. */
@keyframes cair {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg);    opacity: 0 }
  12%  { opacity: .26 }
  88%  { opacity: .16 }
  100% { transform: translate3d(6vw, 112vh, 0) rotate(320deg); opacity: 0 }
}


/* ==========================================================================
   11. CONVITE
   ========================================================================== */
/* Título grande no alto à esquerda, corpo empurrado para baixo à direita.
   A leitura desce na diagonal em vez de empilhar tudo no eixo central. */
.convite {
  padding: var(--secao-larga) var(--gutter) var(--secao);
  background: var(--areia);
}
.convite__interno { max-width: var(--max); margin: 0 auto; }

.convite__titulo {
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
  font-family: var(--serif);
  font-size: clamp(2.3rem, 6.4vw, 5rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.03em;
  white-space: pre-line;
  /* Em em, não em ch: acompanha o próprio tamanho do título e deixa as
     quebras manuais do texto mandarem, sem criar linha órfã. */
  max-inline-size: 15em;
}

.convite__corpo {
  max-width: 44ch;
  margin-left: auto;              /* desloca para a direita */
  margin-right: 0;
}
.convite__corpo .texto { margin: 0; }
.convite__corpo .assinatura { margin-top: 1.8rem; }


/* ==========================================================================
   12. NOSSA HISTÓRIA — linha do tempo
   ========================================================================== */
.historia {
  padding: var(--secao-larga) 0;
  background: var(--areia-2);
}

.linha {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* o fio central que se desenha conforme a rolagem */
.linha__fio {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--areia-3);
}
.linha__fio i {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--ouro), var(--terracota));
  transition: height .18s linear;
}

.linha__lista { list-style: none; margin: 0; padding: 0; }

.momento {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 88px 1fr;
  align-items: center;
  gap: 0;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.momento:last-child { margin-bottom: 0; }

/* o nó do fio */
.momento__no {
  grid-column: 2;
  justify-self: center;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--areia-2);
  border: 1px solid var(--ouro);
  position: relative;
  z-index: 2;
  transition: background-color .6s var(--suave), transform .6s var(--suave), box-shadow .6s;
}
.momento.visivel .momento__no {
  background: var(--terracota);
  border-color: var(--terracota);
  transform: scale(1.15);
  box-shadow: 0 0 0 7px rgba(192,112,90,.14);
}

/* O bloco encosta no fio, mas o texto corrido continua alinhado à esquerda:
   parágrafo alinhado à direita tem borda de entrada irregular e cansa. */
.momento__texto {
  grid-column: 1;
  padding-right: clamp(1rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.momento__foto  { grid-column: 3; padding-left:  clamp(1rem, 3vw, 2.5rem); }

/* alterna os lados */
.momento:nth-child(even) .momento__texto {
  grid-column: 3;
  padding: 0 0 0 clamp(1rem, 3vw, 2.5rem);
  align-items: flex-start;
  text-align: left;
}
.momento:nth-child(even) .momento__foto  { grid-column: 1; padding: 0 clamp(1rem, 3vw, 2.5rem) 0 0; }

.momento__data {
  display: block;
  margin-bottom: .7rem;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--terracota-texto);
}
.momento__titulo {
  margin: 0 0 .8rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.15;
}
.momento__desc {
  margin: 0;
  max-width: 42ch;
  color: var(--tinta-2);
  font-size: 1rem;
  font-weight: 400;          /* peso 300 em corpo pequeno some no fundo claro */
  line-height: 1.68;
  text-align: left;          /* sempre à esquerda, dos dois lados do fio */
}

/* foto tipo polaroide, levemente torta */
.momento__quadro {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--areia-3);
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 50px -28px rgba(36,29,27,.5);
  transform: rotate(var(--giro, -1.4deg));
  transition: transform .8s var(--suave), box-shadow .6s;
}
.momento:nth-child(even) .momento__quadro { --giro: 1.5deg; }
.momento__quadro img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--suave);
}
.momento__quadro:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 34px 60px -26px rgba(36,29,27,.55); }
.momento__quadro:hover img { transform: scale(1.06); }

/* cortina que revela a foto */
.momento__quadro::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--areia-2);
  transform-origin: bottom;
  transition: transform 1.2s var(--seda) .15s;
}
.momento.visivel .momento__quadro::after { transform: scaleY(0); }

/* último momento — o futuro */
.momento--futuro .momento__quadro { display: none; }
.momento--futuro .momento__texto,
.momento--futuro:nth-child(even) .momento__texto {
  grid-column: 1 / -1;
  padding: 0 clamp(1rem, 4vw, 3rem);
  text-align: center;
}
.momento--futuro .momento__no {
  width: 20px; height: 20px;
  background: var(--terracota);
  border-color: var(--terracota);
  animation: bater 2.2s ease-in-out infinite;
}
@keyframes bater {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,112,90,.45) }
  50%      { box-shadow: 0 0 0 16px rgba(192,112,90,0) }
}
.momento--futuro .momento__titulo { font-style: italic; }
.momento--futuro .momento__desc { max-width: 46ch; margin-inline: auto; }


/* ==========================================================================
   13. INTERLÚDIOS (parallax)
   ========================================================================== */
.interludio {
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--secao) var(--gutter);
  text-align: center;
  color: var(--branco);
}
.interludio--curto { min-height: 62vh; }

.interludio__midia { position: absolute; inset: -14% 0; z-index: 0; }
.interludio__midia img { width: 100%; height: 100%; object-fit: cover; }
.interludio__veu {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(36,29,27,.62), rgba(36,29,27,.48));
}

.interludio__texto {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 900px;
}
.interludio__texto p {
  margin: 0 0 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  line-height: 1.25;
  white-space: pre-line;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.interludio__texto cite {
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ouro-claro);          /* fundo é foto escurecida */
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}



/* ==========================================================================
   14. GALERIA
   ========================================================================== */
.galeria { padding: var(--secao-curta) 0 var(--secao); background: var(--areia); }

.grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(90px, 11vw, 150px);
  grid-auto-flow: dense;
  gap: 2px;                          /* mosaico colado: quase um bloco só */
  max-width: 1600px;                 /* mais largo que o resto, quase sangrando */
  margin: 0 auto;
  padding-inline: clamp(.5rem, 1.2vw, 1rem);
}

.foto {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--areia-3);
  cursor: pointer;
  opacity: 0;
  transform: translateY(28px) scale(.97);
  transition: opacity .9s var(--suave) var(--atraso, 0ms),
              transform .9s var(--suave) var(--atraso, 0ms);
}
.foto.visivel { opacity: 1; transform: none; }

.foto__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--suave), filter .7s;
}
.foto:hover .foto__img { transform: scale(1.07); }

/* Sem véu nem legenda: um leve escurecimento no hover já sinaliza que a
   foto é clicável, sem cobrir a imagem com texto. */
.foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(36, 29, 27, .22);
  opacity: 0;
  transition: opacity .5s var(--suave);
  pointer-events: none;
}
.foto:hover::after,
.foto:focus-visible::after { opacity: 1; }

/* formatos */
.foto--quadrada { grid-column: span 2; grid-row: span 2; }
.foto--alta     { grid-column: span 2; grid-row: span 3; }
.foto--larga    { grid-column: span 4; grid-row: span 2; }
.foto--grande   { grid-column: span 4; grid-row: span 3; }


/* --- LIGHTBOX --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(24,19,17,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .45s var(--suave);
}
.lightbox.e-visivel { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox__palco {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 84vh;
  display: grid;
  gap: 1.1rem;
  justify-items: center;
}
.lightbox__palco img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  animation: entrarFoto .6s var(--suave);
}
@keyframes entrarFoto { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }

.lightbox__palco figcaption {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  text-align: center;
}
.lightbox__palco figcaption b {
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--ouro);
}

.lightbox__fechar,
.lightbox__seta {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  color: var(--branco);
  font-size: 1.9rem;
  line-height: 1;
  transition: background-color .35s, border-color .35s, transform .35s var(--suave);
}
.lightbox__fechar:hover,
.lightbox__seta:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }

.lightbox__fechar { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); font-size: 1.6rem; }
.lightbox__seta { top: 50%; transform: translateY(-50%); font-size: 2.2rem; }
.lightbox__seta--esq { left: clamp(.6rem, 3vw, 2.5rem); }
.lightbox__seta--dir { right: clamp(.6rem, 3vw, 2.5rem); }
.lightbox__seta:hover { transform: translateY(-50%) scale(1.08); }


/* ==========================================================================
   15. CONTAGEM REGRESSIVA
   ========================================================================== */
.contagem {
  position: relative;
  padding: clamp(6rem, 14vh, 10rem) var(--gutter);
  overflow: hidden;
  text-align: center;
  color: var(--branco);
}
.contagem__midia { position: absolute; inset: -14% 0; z-index: 0; }
.contagem__midia img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25); }
.contagem__veu {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(36,29,27,.78), rgba(36,29,27,.66));
}
.contagem__conteudo { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }
.contagem__conteudo .olho { display: inline-block; }
.contagem__data {
  margin: 2.4rem 0 0;
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ouro-claro);   /* variante clara: o fundo aqui é foto escura */
}

/* --- o contador em si --- */
.contador {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.1rem, 3.5vw, 3rem);
  margin-top: 2.4rem;
}
.contador__item { display: grid; justify-items: center; gap: .5rem; min-width: 3.2em; }

.contador__num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1;
  /* tabular = todos os dígitos com a mesma largura, para o número não
     "pular" a cada segundo; lining = altura uniforme, para 1 não virar I */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  letter-spacing: .01em;
}
.contador__item span {
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .7;
}
.contador__sep {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--ouro);
  opacity: .55;
  padding-top: .1em;
}

.contador--claro { color: var(--branco); }
.contador--gigante .contador__num { font-size: clamp(2.8rem, 9vw, 6.5rem); font-weight: 200; }
.contador--gigante .contador__item span { font-size: .62rem; letter-spacing: .3em; }

/* troca de número: sobe, desfoca e assenta */
.contador__num.e-trocando { animation: rolar .55s var(--suave); }
@keyframes rolar {
  0%   { transform: translateY(52%); opacity: 0; filter: blur(3px) }
  100% { transform: translateY(0);   opacity: 1; filter: blur(0) }
}


/* ==========================================================================
   16. DETALHES
   ========================================================================== */
.detalhes { padding: var(--secao) 0; background: var(--areia-2); }

/* --- os fatos do dia ---
   Lista editorial, sem card e sem ícone. Separada por fio fino, não por
   caixa: o horário é a informação, então é ele que carrega a escala. */
.fatos {
  max-width: var(--max);
  margin: 0 auto clamp(4rem, 9vw, 7rem);
  padding-inline: var(--gutter);
}

.fato {
  display: grid;
  grid-template-columns: minmax(8rem, 15%) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 5vw, 4rem);
  align-items: baseline;
  padding: clamp(1.7rem, 3.2vw, 2.6rem) 0;
  border-top: 1px solid var(--areia-3);
}
.fato:last-child { border-bottom: 1px solid var(--areia-3); }

.fato__rotulo {
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--terracota-texto);
}

.fato__valor { margin: 0; display: grid; gap: .45rem; }

.fato__hora {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.02em;
}
.fato__hora--texto { font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.15; }

.fato__local {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--tinta);
}
.fato__nota {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--tinta-2);
  max-inline-size: 46ch;
}
.fato__nota--larga { max-inline-size: 60ch; }

/* --- cronograma --- */
.cronograma {
  max-width: 760px;
  margin: 0 auto clamp(4rem, 9vw, 6.5rem);
  padding-inline: var(--gutter);
}
.cronograma .subtitulo { text-align: left; }
.cronograma__lista { list-style: none; margin: 0; padding: 0; }

.hora {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding: 1.3rem 0 1.3rem 0;
  border-top: 1px solid var(--areia-3);
  transition: background-color .5s;
}
.hora:last-child { border-bottom: 1px solid var(--areia-3); }
.hora__marca {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-variant-numeric: lining-nums tabular-nums;   /* alinha a coluna */
  color: var(--terracota-texto);
  line-height: 1.4;
}
.hora__titulo { margin: 0 0 .15rem; font-size: 1rem; font-weight: 400; }
.hora__desc { margin: 0; font-size: .87rem; color: var(--tinta-2); }

/* --- mapa --- */
.mapa {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: var(--max);
  margin: 0 auto clamp(4rem, 9vw, 6.5rem);
  padding-inline: var(--gutter);
}
.mapa__moldura {
  position: relative;
  min-height: 340px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--areia-3);
  background: var(--areia-3);
}
.mapa__moldura iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) sepia(.12); }
.mapa__espera {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .9rem;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.mapa__espera span {
  width: 26px; height: 26px;
  border: 1px solid var(--ouro);
  border-top-color: transparent;
  border-radius: 50%;
  animation: girar 1s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg) } }

.mapa__lado { display: flex; flex-direction: column; justify-content: center; }
.mapa__botoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.mapa__botoes .botao { padding: .9em 1.7em; font-size: .7rem; }

/* --- dúvidas (acordeão) --- */
.duvidas { max-width: 780px; margin: 0 auto; padding-inline: var(--gutter); }
.duvidas .subtitulo { text-align: left; }

.acordeao__item { border-top: 1px solid var(--areia-3); }
.acordeao__item:last-child { border-bottom: 1px solid var(--areia-3); }

.acordeao__botao {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.4;
  transition: color .35s;
}
.acordeao__botao:hover { color: var(--terracota); }

.acordeao__mais {
  flex: 0 0 auto;
  position: relative;
  width: 16px; height: 16px;
}
.acordeao__mais::before,
.acordeao__mais::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: var(--terracota);
  transition: transform .45s var(--seda);
}
.acordeao__mais::after { transform: rotate(90deg); }
.acordeao__item.e-aberto .acordeao__mais::after { transform: rotate(0deg); }

.acordeao__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--seda);
}
.acordeao__item.e-aberto .acordeao__corpo { grid-template-rows: 1fr; }
.acordeao__corpo > div { overflow: hidden; }
.acordeao__corpo p {
  margin: 0;
  padding: 0 0 1.5rem;
  max-width: 62ch;
  font-size: .93rem;
  color: var(--tinta-2);
}


/* ==========================================================================
   17. RSVP
   ========================================================================== */
.rsvp {
  padding: var(--secao-larga) var(--gutter);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(192,112,90,.07), transparent 70%),
    var(--areia);
}
.rsvp__interno { max-width: 860px; margin: 0 auto; }
.rsvp .secao__cabeca { padding-inline: 0; }

.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  background: var(--branco);
  border: 1px solid var(--areia-3);
  border-radius: 4px;
  box-shadow: 0 40px 80px -60px rgba(36,29,27,.6);
}
.campo--largo, .formulario__rodape { grid-column: 1 / -1; }

.campo { display: grid; gap: .5rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.campo label,
.campo legend {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding: 0;
}
.campo label i,
.campo legend i { font-style: normal; opacity: .55; text-transform: none; letter-spacing: .06em; }

/* Rádios e caixas de seleção ficam de fora: eles não são campos de texto e
   herdar "width:100%" aqui empurraria a largura da página para fora. */
.campo input:not([type="radio"]):not([type="checkbox"]),
.campo select,
.campo textarea {
  width: 100%;
  padding: .95rem 0;
  border: 0;
  border-bottom: 1px solid var(--areia-3);
  border-radius: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--tinta);
  transition: border-color .4s var(--suave);
  appearance: none;
  -webkit-appearance: none;
}
.campo textarea { resize: vertical; font-size: 1.02rem; line-height: 1.7; }
.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23B99A6B' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .2rem center;
  background-size: 12px;
  padding-right: 2rem;
  cursor: pointer;
}
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(87,73,63,.38); font-size: .95rem; font-family: var(--sans); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: none; border-bottom-color: var(--terracota); }

.campo.e-erro input,
.campo.e-erro select { border-bottom-color: #B3503F; }

.erro {
  min-height: 1em;
  font-size: .74rem;
  letter-spacing: .04em;
  color: #B3503F;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s, transform .3s;
}
.campo.e-erro .erro { opacity: 1; transform: none; }

/* --- escolha sim/não --- */
.escolha__opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.opcao { position: relative; display: block; cursor: pointer; }

/* O rádio some da tela mas continua existindo para o teclado e o leitor de
   tela. Precisa de tamanho fixo: sem isso ele herda o "width:100%" dos outros
   campos e, sendo absoluto, empurra a largura da página para fora. */
.opcao input {
  position: absolute;
  top: 50%; left: 50%;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.opcao__caixa {
  display: grid;
  gap: .25rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--areia-3);
  border-radius: 3px;
  transition: border-color .4s var(--suave), background-color .4s, transform .4s var(--suave);
}
.opcao__caixa b {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
}
.opcao__caixa i { font-style: normal; font-size: .8rem; color: var(--tinta-2); }
.opcao:hover .opcao__caixa { border-color: var(--ouro); }
.opcao input:checked + .opcao__caixa {
  border-color: var(--terracota);
  background: rgba(192,112,90,.07);
}
.opcao input:focus-visible + .opcao__caixa { outline: 2px solid var(--terracota); outline-offset: 2px; }

.formulario__rodape { display: grid; justify-items: center; gap: 1rem; margin-top: .6rem; }
.formulario__rodape .botao { min-width: 260px; }
.formulario__aviso { margin: 0; font-size: .78rem; color: var(--tinta-2); text-align: center; }
.formulario__aviso.e-erro { color: #B3503F; }

/* campo de restrição some quando a pessoa não vai */
#campoRestricao { transition: opacity .4s, max-height .5s var(--seda); overflow: hidden; max-height: 200px; }
#campoRestricao.e-escondido { opacity: 0; max-height: 0; pointer-events: none; }

/* --- sucesso --- */
.sucesso {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  padding: clamp(2.5rem, 6vw, 4rem);
  background: var(--branco);
  border: 1px solid var(--ouro);
  border-radius: 4px;
  text-align: center;
  animation: entrarFoto .7s var(--suave);
}
.sucesso[hidden] { display: none; }
.sucesso__selo { width: 92px; height: 92px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sucesso__anel {
  stroke: var(--ouro); stroke-width: 1;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  animation: desenharAnel 1.3s var(--suave) forwards;
}
.sucesso__check {
  stroke: var(--terracota); stroke-width: 2.5;
  stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: desenharAnel .7s var(--suave) .8s forwards;
}
.sucesso .titulo { margin-bottom: .3rem; }
.sucesso .texto { margin-bottom: .6rem; }


/* ==========================================================================
   18. PRESENTES
   ========================================================================== */
.presentes { padding: var(--secao) 0; background: var(--areia-2); }

/* O subtítulo é filho direto da seção, que não tem margem lateral.
   Sem isto ele encosta na borda da tela no celular. */
.presentes > .subtitulo--bloco {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* --- PIX --- */
.pix {
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  /* largura útil menos as margens laterais: só max-width deixava o cartão
     encostado nas bordas no celular */
  width: min(880px, 100% - 2 * var(--gutter));
  margin: 0 auto clamp(4rem, 9vw, 6rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--tinta);
  color: var(--areia);
  border-radius: 4px;
  overflow: hidden;
}
.pix::before {                       /* brilho quente no canto */
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192,112,90,.35), transparent 68%);
  pointer-events: none;
}
.pix__lado { position: relative; z-index: 1; }
.pix .olho { color: var(--ouro); }
.pix .subtitulo { color: var(--areia); margin-bottom: 1.2rem; }
.pix__chave {
  margin: 0 0 .5rem;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3vw, 1.9rem);
  word-break: break-all;
  color: var(--branco);
}
.pix__titular { margin: 0 0 1.8rem; font-size: .8rem; opacity: .6; }
.pix .botao { --cor: var(--ouro); color: var(--tinta); }
.pix .botao::before { transform: translateY(0); }
.pix .botao:hover { color: var(--ouro); }
.pix .botao:hover::before { transform: translateY(-101%); }

.pix__selo { position: relative; z-index: 1; width: clamp(90px, 14vw, 150px); opacity: .5; }
.pix__losango {
  fill: none;
  stroke: var(--ouro);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.pix__losango--interno { stroke-dasharray: 4 6; opacity: .7; }

/* --- cotas --- */
.cotas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.cota {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--branco);
  border: 1px solid var(--areia-3);
  border-radius: 3px;
  overflow: hidden;
  transition: transform .55s var(--suave), box-shadow .55s var(--suave), border-color .55s;
}
.cota::before {                      /* fio dourado que corre no topo */
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--ouro), var(--terracota));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--seda);
}
.cota:hover { transform: translateY(-6px); border-color: var(--ouro); box-shadow: 0 28px 55px -34px rgba(36,29,27,.45); }
.cota:hover::before { transform: scaleX(1); }

.cota__valor {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  line-height: 1;
  color: var(--terracota);
}
.cota__titulo { margin: 0; font-family: var(--serif); font-size: 1.25rem; font-weight: 400; line-height: 1.3; }
.cota__desc { margin: 0; font-size: .87rem; color: var(--tinta-2); flex: 1; }
.cota__botao {
  margin-top: .8rem;
  align-self: flex-start;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracota-texto);
  border-bottom: 1px solid currentColor;
  padding-bottom: .25em;
  transition: gap .35s var(--suave);
}
.cota__botao::after { content: ' →'; }

.listas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 2.5rem;
  padding-inline: var(--gutter);
}


/* ==========================================================================
   19. RODAPÉ
   ========================================================================== */
.rodape {
  position: relative;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  background: var(--tinta);
  color: var(--areia);
  text-align: center;
  overflow: hidden;
}
.rodape::before {                    /* halo quente no topo */
  content: '';
  position: absolute;
  top: -30%; left: 50%;
  transform: translateX(-50%);
  width: 140%; aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center, rgba(192,112,90,.2), transparent 62%);
  pointer-events: none;
}
.rodape__interno { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }

/* Monograma sem o círculo: a moldura redonda em volta das iniciais é o
   ornamento mais repetido em site de casamento. Ficam só as letras. */
.rodape__marca {
  margin: 0 0 2.8rem;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--ouro-claro);
}
.rodape__marca i { font-style: italic; letter-spacing: 0; opacity: .65; }

.rodape__frase {
  margin: 0 0 1.6rem;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.9rem);
  line-height: 1.25;
  white-space: pre-line;
}
.rodape__texto {
  margin: 0 auto 2.4rem;
  max-width: 54ch;
  font-size: .96rem;
  font-weight: 400;
  color: var(--claro-2);
}
.rodape__data {
  margin: 0 0 .6rem;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ouro-claro);
}
.rodape__hash {
  margin: 0 0 2.6rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--claro-1);
}
.rodape__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.rodape__creditos {
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(246,241,233,.12);
  font-size: .68rem;
  letter-spacing: .16em;
  color: rgba(246,241,233,.35);
}


/* ==========================================================================
   20. MÚSICA AMBIENTE E AVISOS
   ========================================================================== */
.musica {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 750;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.2rem .7rem .95rem;
  border: 1px solid var(--areia-3);
  border-radius: 999px;
  background: rgba(253,251,247,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--tinta);
  box-shadow: 0 14px 36px -22px rgba(36,29,27,.6);
  transition: transform .45s var(--suave), border-color .45s, opacity .5s;
}
.musica[hidden] { display: none; }
.musica:hover { transform: translateY(-3px); border-color: var(--ouro); }

.musica__ondas { display: flex; align-items: flex-end; gap: 2.5px; height: 15px; }
.musica__ondas i {
  display: block;
  width: 2.5px;
  height: 4px;
  border-radius: 2px;
  background: var(--terracota);
  transition: height .3s;
}
.musica.e-tocando .musica__ondas i { animation: onda .9s ease-in-out infinite; }
.musica.e-tocando .musica__ondas i:nth-child(2) { animation-delay: .15s }
.musica.e-tocando .musica__ondas i:nth-child(3) { animation-delay: .3s }
.musica.e-tocando .musica__ondas i:nth-child(4) { animation-delay: .45s }
@keyframes onda { 0%, 100% { height: 4px } 50% { height: 15px } }

.musica__rotulo {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- aviso flutuante --- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 9600;
  transform: translate(-50%, 24px);
  padding: .9rem 1.7rem;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--areia);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 20px 45px -22px rgba(0,0,0,.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--suave), transform .4s var(--suave);
}
.aviso.e-visivel { opacity: 1; transform: translate(-50%, 0); }


/* ==========================================================================
   20b. PÁGINA "TODAS AS FOTOS"
   ========================================================================== */
.pagina-todas { background: var(--areia); }

.topo--fixo { position: fixed; }
.topo__voltar {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .35s;
}
.topo__voltar span { font-size: 1.3em; line-height: 0; }
.topo__voltar:hover { color: var(--terracota); }

.todas__abertura { padding: clamp(7rem, 15vh, 10rem) 0 clamp(2.5rem, 5vw, 4rem); }
.todas__abertura .titulo { font-size: clamp(2.4rem, 6vw, 4.5rem); }

.todas__grade { padding-bottom: var(--secao); }

/* As colunas são montadas pelo JS, distribuindo cada foto na coluna mais
   curta. O equilíbrio automático do navegador deixa uma coluna bem mais
   baixa que as outras quando as alturas variam muito. */
.mosaico {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  padding-inline: 3px;
  max-width: 1800px;
  margin: 0 auto;
}
.mosaico__coluna {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mosaico__foto {
  position: relative;
  overflow: hidden;
  background: var(--areia-3);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--suave), transform .9s var(--suave);
}
.mosaico__foto.visivel { opacity: 1; transform: none; }
.mosaico__foto img {
  width: 100%;
  height: auto;
  transition: transform 1.1s var(--suave);
}
.mosaico__foto:hover img { transform: scale(1.04); }
.mosaico__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(36, 29, 27, .22);
  opacity: 0;
  transition: opacity .5s var(--suave);
  pointer-events: none;
}
.mosaico__foto:hover::after,
.mosaico__foto:focus-visible::after { opacity: 1; }

.todas__fim {
  padding: var(--secao) var(--gutter);
  background: var(--areia-2);
  text-align: center;
}
.todas__fim .titulo { text-align: center; margin-bottom: 2.5rem; }
.todas__fim .olho { display: inline-block; }
.todas__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
}

/* --- chamada para a página completa, no fim da galeria do site --- */
.galeria__mais {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--gutter);
  text-align: center;
}
.galeria__mais p {
  margin: 0;
  max-width: 46ch;
  font-size: .95rem;
  color: var(--tinta-2);
}


/* ==========================================================================
   21. RESPONSIVO
   ========================================================================== */

/* --- tablet --- */
@media (max-width: 1024px) {
  .mapa { grid-template-columns: 1fr; }
  .mapa__moldura { min-height: 300px; }
}

/* --- celular --- */
@media (max-width: 780px) {

  section[id] { scroll-margin-top: 70px; }

  /* O respiro que dá elegância numa tela larga vira tela vazia no celular:
     eram 242px antes do primeiro texto, quase um terço da altura visível.
     A hierarquia entre os três ritmos continua, só que mais apertada. */
  :root {
    --secao-larga: clamp(3.4rem, 8vh, 5rem);
    --secao:       clamp(2.8rem, 6vh, 4rem);
    --secao-curta: clamp(1.8rem, 4vh, 2.8rem);
  }
  .secao__cabeca { padding-top: .7rem; }
  .secao__cabeca::before { margin-bottom: 1.3rem; }
  .contagem { padding-block: clamp(3.6rem, 9vh, 5.5rem); }
  .interludio { min-height: 62vh; }
  .interludio--curto { min-height: 52vh; }
  .todas__abertura { padding-top: clamp(6rem, 12vh, 8rem); }
  .rodape { padding-top: clamp(3.6rem, 9vh, 5.5rem); }

  /* menu vira painel de tela cheia */
  .hamburguer { display: block; }

  .topo__nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    padding: 5rem 2rem;
    background: var(--areia);
    color: var(--tinta);
    font-size: 1.6rem;
    font-family: var(--serif);
    letter-spacing: .02em;
    text-transform: none;
    clip-path: circle(0% at calc(100% - 3rem) 2.5rem);
    transition: clip-path .7s var(--seda);
    pointer-events: none;
  }
  .topo__nav.e-aberto { clip-path: circle(150% at calc(100% - 3rem) 2.5rem); pointer-events: auto; }
  .topo__nav a { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--suave), transform .5s var(--suave); }
  .topo__nav.e-aberto a { opacity: 1; transform: none; }
  .topo__nav.e-aberto a:nth-child(1) { transition-delay: .18s }
  .topo__nav.e-aberto a:nth-child(2) { transition-delay: .24s }
  .topo__nav.e-aberto a:nth-child(3) { transition-delay: .30s }
  .topo__nav.e-aberto a:nth-child(4) { transition-delay: .36s }
  .topo__nav.e-aberto a:nth-child(5) { transition-delay: .42s }
  .topo__nav.e-aberto a:nth-child(6) { transition-delay: .48s }
  .topo__cta { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; margin-top: .8rem; }

  .topo.e-menu-aberto { color: var(--tinta); }
  .topo.e-oculto.e-menu-aberto { transform: none; }

  /* hero: uma coluna só, contagem vira uma linha discreta embaixo */
  .hero__base {
    grid-template-columns: 1fr;
    align-content: end;
    gap: 2.2rem;
    padding-top: 7rem;
  }
  .hero__conteudo { max-width: none; }

  /* Enquadramento no centro: deslocar para liberar o canto do texto jogava
     o Henrique para fora da borda direita. O que resolve a legibilidade é
     o escurecimento da base, não mexer no recorte. */

  /* base mais escura, para o nome sobre o campo claro continuar legível */
  .hero__veu { background-image: linear-gradient(0deg,
      hsla(20,14%,4%,.92) 0%,  hsla(20,14%,6%,.88) 6%,
      hsla(20,13%,9%,.79) 15%, hsla(20,12%,13%,.66) 27%,
      hsla(20,11%,16%,.50) 40%, hsla(20,10%,19%,.34) 54%,
      hsla(20,9%,22%,.19) 70%, hsla(20,9%,24%,.07) 86%,
      hsla(20,8%,25%,0) 100%); }
  .hero__nomes { letter-spacing: -.03em; line-height: .92; }
  .hero__data { margin-bottom: 1.8rem; line-height: 1.7; }
  .hero__acoes { gap: 1.1rem; }
  .hero__acoes .botao:first-child { flex: 1 1 100%; }
  .hero__contagem { justify-items: start; gap: 1.2rem; }
  .hero__rolar { display: none; }
  .contador--linha { gap: 1.4rem; }
  .contador--linha .contador__num { font-size: 1.5rem; }

  /* cabeçalho de seção: empilha, mas continua alinhado à esquerda */
  .secao__cabeca {
    grid-template-columns: 1fr;
    row-gap: 1.1rem;
  }
  .secao__cabeca .titulo { max-inline-size: none; }
  .secao__cabeca .texto  { grid-column: 1; grid-row: auto; }

  /* convite: sem o deslocamento para a direita */
  .convite__corpo { max-width: none; margin-left: 0; }
  .convite__titulo { max-inline-size: none; }

  /* fatos do dia: rótulo em cima, valor embaixo */
  .fato { grid-template-columns: 1fr; row-gap: .7rem; }

  /* contador */
  .contador { gap: .9rem; }
  .contador__sep { display: none; }
  .contador__item { min-width: 0; }

  /* linha do tempo: tudo numa coluna, fio à esquerda */
  .linha__fio { left: 18px; transform: none; }
  .momento { grid-template-columns: 36px 1fr; gap: 0; margin-bottom: 3.5rem; }
  .momento__no { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 12px; margin-top: .45rem; align-self: start; }
  .momento__texto,
  .momento:nth-child(even) .momento__texto {
    grid-column: 2; grid-row: 1;
    padding: 0 0 0 1.4rem;
    text-align: left;
    align-items: flex-start;   /* em coluna única não existe "lado do fio" */
  }
  .momento__foto,
  .momento:nth-child(even) .momento__foto {
    grid-column: 2; grid-row: 2;
    padding: 1.4rem 0 0 1.4rem;
  }
  .momento__quadro { --giro: 0deg !important; aspect-ratio: 3 / 2; }
  .momento--futuro .momento__texto,
  .momento--futuro:nth-child(even) .momento__texto { grid-column: 2; text-align: left; padding-left: 1.4rem; }
  .momento--futuro .momento__desc { margin-inline: 0; }

  /* Galeria no celular: mosaico de duas colunas montado pelo JS, não grade
     de células. Com grade, o total de células precisa ser par para fechar em
     2 colunas, e qualquer foto a mais ou a menos reabre um buraco. As
     colunas em si são preenchidas pela mais curta, o que evita o degrau que
     o equilíbrio automático do navegador deixa no fim. */
  .grade--colunas {
    display: flex;
    align-items: stretch;        /* as duas colunas ficam com a mesma altura */
    grid-template-columns: none;
    gap: 2px;
    padding-inline: 2px;
  }
  .grade__coluna {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Mesmo distribuindo bem, uma coluna sempre termina um pouco antes da
     outra: é da natureza do mosaico. Em vez de deixar o degrau, a última
     foto da coluna mais curta cresce e ocupa a sobra. */
  .grade__coluna > .foto:last-child { flex: 1 1 auto; min-height: 0; }
  .grade--colunas .grade__coluna > .foto:last-child .foto__img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .grade--colunas .foto { height: auto; }
  /* A proporção precisa ser declarada ANTES de a foto carregar, senão a
     página pula conforme as imagens vão chegando. */
  .grade--colunas .foto__img { height: auto; aspect-ratio: 2 / 3; }
  .grade--colunas .foto--larga .foto__img,
  .grade--colunas .foto--grande .foto__img { aspect-ratio: 3 / 2; }

  /* formulário numa coluna */
  .formulario { grid-template-columns: 1fr; }
  .escolha__opcoes { grid-template-columns: 1fr; }
  .formulario__rodape .botao { width: 100%; min-width: 0; }

  /* pix */
  .pix .botao { width: 100%; }

  .cronograma__lista .hora { grid-template-columns: 4.2rem 1fr; gap: 1rem; }

  .musica { padding: .65rem .9rem; }
  .musica__rotulo { display: none; }

  /* Alguns aparelhos híbridos e navegadores em modo desktop declaram
     ponteiro fino num viewport de celular. Nessa largura o cursor
     desenhado nunca faz sentido. */
  .cursor { display: none !important; }
  html.cursor-custom, html.cursor-custom * { cursor: auto !important; }
}

@media (max-width: 420px) {
  .contador--gigante .contador__num { font-size: 2.4rem; }
  .contador { gap: .6rem; }
  .contador__item span { font-size: .5rem; letter-spacing: .14em; }
}


/* ==========================================================================
   22. ACESSIBILIDADE / MOVIMENTO REDUZIDO / IMPRESSÃO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .anim { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .foto { opacity: 1 !important; transform: none !important; }
  .petalas { display: none; }
  .momento__quadro::after { display: none; }
  .momento__quadro { transform: none !important; }
  .hero__midia img { animation: none; }
  html.cursor-custom, html.cursor-custom * { cursor: auto !important; }
  .cursor { display: none !important; }
}

@media print {
  .topo, .hero__rolar, .musica, .cursor, .fio-progresso, .preloader,
  .lightbox, .aviso, .petalas { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .anim { opacity: 1 !important; transform: none !important; }
  section { break-inside: avoid; }
}