:root {
  /* Cores */
  --vinho: #7E1621;
  --tinta: #2B211C;
  --creme: #F3EEE3;
  --terracota: #B4562F;
  --oliva: #6B6A3A;
  --marinho: #2C3A4F;

  /* Tipografia — escala modular ~1.25 */
  --fs-0: 1rem;
  --fs-1: 1.25rem;
  --fs-2: 1.563rem;
  --fs-3: 1.953rem;
  --fs-4: 2.441rem;
  --fs-5: 3.052rem;

  /* Espaçamento — base 8px */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;

  --largura-max: 68rem;
  --raio: 2px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--creme);
  background-image: url("../assets/textura-papel.webp");
  background-size: 400px;
  color: var(--tinta);
  font-size: var(--fs-0);
  line-height: 1.6;
}

.container { width: min(100% - 2 * var(--sp-2), var(--largura-max)); margin-inline: auto; }

/* ==========================================================================
   Sistema visual — identidade do convite (Laís & Vinícius)
   Vinho sobre papel creme · serifa elegante · borda escalopada · torre de taças
   Construído sobre os tokens da Task 1.
   ========================================================================== */

/* --- Tokens complementares ------------------------------------------------ */
:root {
  /* Famílias — self-hosted (Task 10) com fallbacks que já leem bem hoje */
  --ff-titulo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-corpo:  "EB Garamond", Georgia, "Times New Roman", serif;
  --ff-nome:   "Homemade Apple", "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive;

  /* Escala de exibição estendida (para o herói) */
  --fs-6: 3.815rem;
  --fs-7: 4.768rem;

  /* Tintas derivadas do vinho */
  --vinho-forte: #66101A;                 /* hover/pressionado */
  --vinho-linha: rgba(126, 22, 33, 0.30); /* fios/hairlines    */
  --vinho-suave: rgba(126, 22, 33, 0.10); /* lavagem/placeholder */
  --vinho-fantasma: rgba(126, 22, 33, 0.26); /* algarismos romanos */
  --creme-nav: rgba(243, 238, 227, 0.92); /* mais opaco: a nav lê nítida sobre o papel */
  --branco-suave: rgba(255, 255, 255, 0.28); /* fundo dos cartões de presente */

  /* Medidas */
  --largura-texto: 36rem;   /* medida de leitura confortável */
  --nav-h: 3.5rem;
  --moldura: clamp(22px, 5.5vw, 34px); /* espessura da borda escalopada */

  /* Sombras — tinta quente e baixa (nunca cinza "padrão"): as peças parecem
     cartões de papel pousados sobre o papel creme, não caixas flutuando. */
  --sombra-foto:  0 2px 5px rgba(43, 33, 28, 0.05), 0 14px 30px -16px rgba(43, 33, 28, 0.24);
  --sombra-carta: 0 1px 2px rgba(43, 33, 28, 0.04), 0 12px 32px -20px rgba(43, 33, 28, 0.22);
  --sombra-alta:  0 4px 10px rgba(43, 33, 28, 0.08), 0 20px 44px -22px rgba(43, 33, 28, 0.30);
  --sombra-modal: 0 24px 64px -22px rgba(43, 33, 28, 0.48);
}

/* --- Fontes self-hosted (arquivos chegam na Task 10) ---------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fontes/cormorant-garamond.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fontes/eb-garamond.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fontes/eb-garamond-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../assets/fontes/pinyon-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Homemade Apple";
  src: url("../assets/fontes/homemade-apple.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Base tipográfica ----------------------------------------------------- */
html { scroll-padding-top: calc(var(--nav-h) + 0.5rem); }

body {
  font-family: var(--ff-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Kerning + ligaduras + alternativas contextuais: o texto ganha o assentamento
     de uma peça impressa (não o "corrido" cru de tela). */
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
  font-kerning: normal;
  overflow-x: hidden; /* trava rolagem horizontal acidental */
}

/* Números alinhados (lining/tabular) onde há data ou preço — como a data
   gravada do convite ("19.09.2026") e os valores da lista. Evita os números
   antigos (oldstyle) da serifa "pularem" a linha de base em contextos numéricos. */
.data-hero,
.data-extenso,
.presente .valor,
.modal-valor,
.horario {
  font-variant-numeric: lining-nums tabular-nums;
}

h1, h2, h3 {
  font-family: var(--ff-titulo);
  color: var(--vinho);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-3); }
a { color: var(--vinho); }

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

::selection { background: var(--vinho); color: var(--creme); }

/* Foco visível claro e consistente (teclado) */
:focus-visible {
  outline: 2px solid var(--vinho);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ==========================================================================
   Utilitários de acessibilidade — texto só para leitor de tela + skip-link
   ========================================================================== */

/* Esconde visualmente mas mantém acessível a leitores de tela (padrão "clip"). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link "Pular para o conteúdo": primeiro item focável da página, invisível
   até receber foco pelo teclado. */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--creme);
  color: var(--vinho);
  font-family: var(--ff-corpo);
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid var(--vinho);
  border-radius: var(--raio);
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

/* Aviso <noscript> do topo: a nav é fixa e o body não tem padding-top, então
   sem este respiro o texto renderiza escondido DEBAIXO da barra — exatamente
   para o único público que precisa lê-lo (JS desativado). O estilo fica num
   <p> interno (não na tag noscript) para nunca criar caixa fantasma com JS on. */
.aviso-sem-js {
  max-width: var(--largura-texto);
  margin: calc(var(--nav-h) + var(--sp-2)) auto var(--sp-2);
  padding-inline: var(--sp-2);
  text-align: center;
  color: var(--vinho);
  font-size: 0.92rem;
}

/* Rótulos — tratamento ÚNICO para todos os rótulos pares do site: caixa-alta,
   mesmo tracking, mesmo peso e a MESMA cor (vinho), na família serifada (como o
   convite). Evita que "Elas/Eles", "ART & FUSÃO…", "role para ver" e o aviso da
   noiva apareçam cada um num tamanho/cor diferente. O .data-hero herda a família
   aqui, mas mantém o tamanho maior próprio da capa (ver .hero .data-hero). */
.data-hero,
.local-nome,
.nota-traje,
.role-para-ver,
.traje-rotulo {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: var(--vinho);
  font-size: 0.8rem;
}

/* ==========================================================================
   Navegação — barra fina translúcida, fixa
   ========================================================================== */
.nav-principal {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--creme-nav);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
  backdrop-filter: blur(9px) saturate(1.15);
  border-bottom: 1px solid var(--vinho-linha);
}
.nav-principal .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
/* Monograma à esquerda — assimetria e assinatura */
.nav-principal .container::before {
  content: "L · V";
  font-family: var(--ff-titulo);
  color: var(--vinho);
  font-size: var(--fs-1);
  letter-spacing: 0.18em;
  font-weight: 600;
  white-space: nowrap; /* nunca quebra em várias linhas (senão a nav "cresce") */
  flex-shrink: 0;      /* cede espaço para os links encolherem, não o monograma */
}
.nav-principal ul {
  display: flex;
  gap: clamp(0.5rem, 3vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-principal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15rem;
  text-decoration: none;
  color: var(--tinta);
  /* Nav nítida e intencional: peso 600 + tracking mais fechado impedem que a
     serifa em caixa-alta pareça "gasta" sobre a textura de papel. */
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  position: relative;
}
.nav-principal a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0.55rem;
  height: 1px;
  background: var(--vinho);
  transition: right 0.28s ease;
}
.nav-principal a:hover::after,
.nav-principal a:focus-visible::after { right: 0; }

/* ==========================================================================
   Herói — a "capa" do convite: moldura escalopada + torre de taças
   (único momento deliberadamente centralizado; os capítulos são assimétricos)
   ========================================================================== */
.hero {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + clamp(1rem, 3vw, 2rem)) 1rem clamp(2rem, 5vw, 4rem);
}
/* O convite é uma carta em retrato: apresentamos o herói como um cartão
   emoldurado, pousado sobre o papel creme (não esticado na largura). */
.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(92vw, 40rem);
  min-height: min(84svh, 44rem);
  border: var(--moldura) solid transparent;
  border-image: url("../assets/ilustracoes/borda-ondulada.svg?v=2") 33.333% round;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
  margin-inline: auto;
}
.hero .kicker {
  /* .kicker é um <p> (não mais <h1> — ver Task de revisão fase 2), então as
     propriedades abaixo, antes herdadas da regra "h1, h2, h3", são declaradas
     aqui explicitamente para manter a aparência idêntica. */
  font-family: var(--ff-titulo);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0.006em; /* leve compensação óptica no tamanho de exibição */
  text-wrap: balance;
  font-size: clamp(var(--fs-4), 11vw, var(--fs-7));
  color: var(--vinho);
  margin: 0;
  max-width: 8em;
}
/* Torre de taças posicionada entre o título e os nomes (via flex order) */
.hero .container::before {
  content: "";
  order: 2;
  width: clamp(150px, 34vw, 232px);
  aspect-ratio: 444 / 667;
  margin: clamp(1rem, 3vh, 2.25rem) 0;
  background: url("../assets/ilustracoes/torre-tacas.png") center / contain no-repeat;
}
.hero .kicker { order: 1; }
.hero .nomes  { order: 3; }
.hero .data-hero { order: 4; }
.hero .role-para-ver { order: 5; margin-top: auto; }

.nomes {
  font-family: var(--ff-nome);
  font-weight: 400;
  color: var(--vinho);
  line-height: 1.12; /* Homemade Apple tem hastes/caudas altas — evita corte */
  font-size: clamp(1.85rem, 6.4vw, 3rem); /* fonte manuscrita é larga: menor que a Pinyon/Sacramento */
  margin: 0 0 var(--sp-3);
  /* .nomes agora é o <h1> (ver Task de revisão fase 2); cancela o
     text-wrap:balance herdado da regra "h1, h2, h3" para manter a
     quebra de linha idêntica à do <p> anterior. */
  text-wrap: wrap;
}
.hero .data-hero {
  font-weight: 600;
  color: var(--vinho);
  letter-spacing: 0.28em;
  font-size: var(--fs-1);
  /* indent compensa o tracking à direita, mantendo o bloco opticamente centrado */
  text-indent: 0.28em;
  margin: 0;
}
.role-para-ver {
  /* cor/caixa-alta/tracking/tamanho vêm do tratamento único de rótulos acima;
     opacidade leve mantém o hint discreto sem trocar de cor. */
  opacity: 0.85;
  padding-top: clamp(1.5rem, 5vh, 3rem);
}
.role-para-ver::after {
  content: "";
  display: block;
  width: 9px; height: 9px;
  margin: 0.65rem auto 0;
  border-right: 1.5px solid var(--vinho);
  border-bottom: 1.5px solid var(--vinho);
  transform: rotate(45deg);
  opacity: 0.8;
}

/* ==========================================================================
   Capítulos — cabeçalhos assimétricos com algarismo romano + divisória-torre
   ========================================================================== */
main { counter-reset: capitulo; }

main > section[aria-labelledby] {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  counter-increment: capitulo;
}
/* Composição centralizada (como o convite impresso): torre, algarismo, título,
   textos de apoio e botões alinhados ao eixo. As grades de fotos e os cartões
   de presente preservam o próprio alinhamento (tratados adiante). */
main > section[aria-labelledby] > .container { text-align: center; }
/* Divisória: fio fino com um pequeno fleurão botânico ao centro — evoca o
   jardim/estufa do Art & Fusão e marca o começo de cada capítulo sem repetir
   (nem miniaturizar) a torre de taças, que fica reservada às "capas" (herói e
   rodapé). Horizontal e discreta: nada pesado ou desproporcional. */
main > section[aria-labelledby]::before {
  content: "";
  display: block;
  width: clamp(184px, 28vw, 264px);
  aspect-ratio: 240 / 22;
  margin: 0 auto clamp(1.5rem, 4vw, 2.25rem);
  background: url("../assets/ilustracoes/divisor.svg") center / contain no-repeat;
}

/* Cabeçalho do capítulo */
main > section[aria-labelledby] h2 {
  font-size: clamp(var(--fs-4), 8vw, var(--fs-6));
  line-height: 1;
  letter-spacing: -0.005em;
  position: relative;
  margin-bottom: var(--sp-4);
}
main > section[aria-labelledby] h2::before {
  content: counter(capitulo, upper-roman);
  display: block;
  width: max-content;
  /* centralizado sob a torre; o fio curto fica exatamente sob o algarismo */
  margin-inline: auto;
  font-family: var(--ff-titulo);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-2);
  letter-spacing: 0.14em;
  color: var(--vinho-fantasma);
  /* fio curto sob o algarismo: marca de capítulo deliberada, não enfeite solto */
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--vinho-linha);
  margin-bottom: 0.75rem;
}

/* Parágrafos de introdução: medida de leitura limitada (não esticar linhas)
   :not() exclui os rótulos vinho (.data-extenso/.local-nome/.nota-traje),
   que têm identidade própria e não devem herdar cor/tamanho do texto corrido. */
main > section[aria-labelledby] > .container > p:not(.data-extenso, .local-nome, .nota-traje, .horario, .nota-mapa, .endereco-after) {
  max-width: var(--largura-texto);
  margin-inline: auto; /* centraliza a caixa de leitura no eixo da composição */
  font-size: var(--fs-1);
  line-height: 1.62;
  color: var(--tinta);
  text-wrap: pretty; /* evita órfãs/viúvas soltas no fim do parágrafo */
}

/* ==========================================================================
   Seção Local — quando & onde + galeria estilo revista (assimétrica)
   ========================================================================== */
/* Detalhes do evento (quando) — data e horário são LINHAS IRMÃS: mesma família,
   mesma cor e mesmo tamanho, para não parecerem elementos diferentes. */
.data-extenso,
.horario {
  font-family: var(--ff-titulo);
  color: var(--vinho);
  font-size: var(--fs-2);
  line-height: 1.28;
  margin: 0 0 var(--sp-1);
}
.horario { margin-bottom: var(--sp-4); } /* respiro antes do botão do calendário */
.local-nome {
  /* rótulo — herda caixa-alta/cor/tamanho do tratamento único de rótulos */
  margin: var(--sp-4) 0 var(--sp-2);
}

/* Galerias — sem CLS: aspect-ratio reservado + object-fit cover */
.galeria img {
  width: 100%;
  height: 100%;
  min-width: 0;  /* permite que os trilhos fr encolham (evita overflow) */
  min-height: 0;
  object-fit: cover;
  background: var(--vinho-suave); /* placeholder elegante enquanto a foto carrega */
  border-radius: var(--raio);
  box-shadow: var(--sombra-foto); /* foto pousada sobre o papel, não colada */
  transition: filter 0.3s ease, box-shadow 0.3s ease;
}
.galeria img:hover {
  filter: brightness(1.03) saturate(1.04);
  box-shadow: var(--sombra-alta);
}

.galeria-local {
  display: grid;
  gap: clamp(0.7rem, 1.8vw, 1.25rem);
  grid-template-columns: repeat(2, 1fr);
  margin-block: var(--sp-4);
}
/* As regras nth-child abaixo assumem exatamente 6 fotos reais do local, nesta
   ordem: 1) casal (destaque), 2) mesa no jardim (paisagem), 3) e 4) salões
   (retrato), 5) deck (retrato), 6) fachada (paisagem). Alterar a quantidade ou
   a ordem exige revisar este layout (spans/linhas fixos aqui e no @media 768). */
/* Mobile: 2 colunas — casal e mesa ocupam a linha inteira; os demais em pares. */
.galeria-local img:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 4 / 5; }  /* casal — líder */
.galeria-local img:nth-child(2) { grid-column: 1 / -1; aspect-ratio: 16 / 9; } /* mesa no jardim */
.galeria-local img:nth-child(3) { aspect-ratio: 3 / 4; }
.galeria-local img:nth-child(4) { aspect-ratio: 3 / 4; }
.galeria-local img:nth-child(5) { aspect-ratio: 3 / 4; }
.galeria-local img:nth-child(6) { aspect-ratio: 3 / 4; }

/* Desktop: composição de revista em 4 colunas. O casal vira um retrato grande
   (2×2) à esquerda; a mesa (paisagem) e os dois salões formam o bloco à direita;
   o deck + a fachada (faixa cinematográfica) fecham embaixo. */
@media (min-width: 768px) {
  .galeria-local { grid-template-columns: repeat(4, 1fr); }
  .galeria-local img:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
  .galeria-local img:nth-child(2) { grid-column: 3 / 5; grid-row: 1;     aspect-ratio: 16 / 9; }
  .galeria-local img:nth-child(3) { grid-column: 3;     grid-row: 2;     aspect-ratio: 3 / 4; }
  .galeria-local img:nth-child(4) { grid-column: 4;     grid-row: 2;     aspect-ratio: 3 / 4; }
  .galeria-local img:nth-child(5) { grid-column: 1;     grid-row: 3;     aspect-ratio: 3 / 4; }
  .galeria-local img:nth-child(6) { grid-column: 2 / 5; grid-row: 3;     aspect-ratio: auto; }
}

/* ==========================================================================
   Seção Traje — lineup escalonado (evoca a fileira de figuras do convite)
   ========================================================================== */
/* Mosaico por colunas (masonry): cada look aparece INTEIRO, sem corte —
   cabeça com cabelo e pés com calçado visíveis. As colunas equilibram a altura,
   mantendo o conjunto organizado mesmo com fotos de proporções diferentes. */
.galeria-traje {
  columns: 2;
  column-gap: clamp(0.6rem, 1.8vw, 1.1rem);
  margin-block: 0; /* respiro controlado pelos grupos Elas/Eles abaixo */
}
.galeria-traje img {
  width: 100%;
  /* height:auto + atributos width/height do HTML: o navegador deriva a
     proporção (estilo UA com auto e attr(w)/attr(h)) e RESERVA a
     altura das fotos lazy. NUNCA declarar aspect-ratio aqui — qualquer valor
     de autor (até "auto") descarta a proporção dos atributos, as fotos
     carregam empurrando ~1100px de layout e as âncoras do menu (#presentes)
     aterrissam no meio da galeria. */
  height: auto;
  display: block;
  margin-bottom: clamp(0.6rem, 1.8vw, 1.1rem);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* ~560px: três colunas em telas médias */
@media (min-width: 560px) {
  .galeria-traje { columns: 3; }
}

/* Dois grupos — Elas e Eles — para representar todos os convidados.
   O espaçamento entre grupos também acomoda o deslocamento das fotos pares. */
.traje-grupo { margin-top: clamp(2rem, 5vw, 3rem); }
.traje-grupo + .traje-grupo { margin-top: clamp(2.75rem, 6.5vw, 4.5rem); }
.traje-rotulo {
  /* rótulo — herda caixa-alta/tracking/peso/cor/tamanho do tratamento único */
  text-align: center;
  text-indent: 0.24em; /* compensa o tracking à direita, mantém opticamente centrado */
  margin: 0 0 var(--sp-3);
}

.nota-traje {
  /* rótulo — herda caixa-alta/cor/tamanho do tratamento único.
     respiro claro depois das fotos + um fio curto centralizado que separa a
     galeria do aviso da noiva. */
  margin-top: clamp(2.5rem, 6vw, 3.75rem);
}
.nota-traje::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin: 0 auto var(--sp-3);
  background: var(--vinho-linha);
}

/* ==========================================================================
   Seção Presentes — grade responsiva de cartões
   ========================================================================== */
.grid-presentes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: var(--sp-5);
}
.presente {
  display: flex;
  flex-direction: column;
  text-align: left; /* cartões mantêm leitura à esquerda, apesar da seção centralizada */
  background: var(--branco-suave);
  border: 1px solid var(--vinho-linha);
  border-radius: var(--raio);
  padding: 0 0 var(--sp-3);
  overflow: hidden;
  box-shadow: var(--sombra-carta);
  transition: box-shadow 0.28s ease, border-color 0.28s ease;
}
.presente:hover {
  box-shadow: var(--sombra-alta);
  border-color: var(--vinho-linha);
}
.presente img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--vinho-suave);
  margin-bottom: var(--sp-3);
}
.presente h3 {
  font-size: var(--fs-2);
  padding-inline: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.presente p {
  padding-inline: var(--sp-3);
  margin-bottom: var(--sp-2);
  color: var(--tinta);
}
/* Rodapé do cartão como uma "etiqueta": preço destacado acima de um fio fino */
.presente .valor {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--vinho-linha);
  color: var(--vinho);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Botões — alvo ≥44px, foco visível
   ========================================================================== */
.btn-presentear,
#btn-calendario,
#btn-mapa,
.btn-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  font-family: var(--ff-corpo);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease,
    box-shadow 0.22s ease, transform 0.22s ease;
}
/* Primário (preenchido vinho) */
.btn-presentear,
#btn-calendario {
  margin: var(--sp-2) var(--sp-3) 0;
  align-self: flex-start;
  background: var(--vinho);
  color: var(--creme);
  border: 1px solid var(--vinho);
}
.btn-presentear { margin: 0 var(--sp-3); }
.btn-presentear:hover,
#btn-calendario:hover { background: var(--vinho-forte); border-color: var(--vinho-forte); box-shadow: var(--sombra-carta); }

/* Secundário (contorno) */
#btn-calendario { background: transparent; color: var(--vinho); }
#btn-calendario:hover { background: var(--vinho); color: var(--creme); }

#btn-mapa {
  background: transparent;
  color: var(--vinho);
  border: 1px solid var(--vinho);
  margin-top: var(--sp-3);
}
#btn-mapa:hover { background: var(--vinho); color: var(--creme); box-shadow: var(--sombra-carta); }

/* ==========================================================================
   Seção "A festa continua" — bar Amargot (após o almoço)
   ========================================================================== */
/* Endereço em texto, compacto e discreto abaixo do nome do bar. Aqui NÃO há
   botão de mapa (só o endereço), para não confundir com o "Como chegar" do
   almoço. */
.endereco-after {
  max-width: var(--largura-texto);
  margin: 0 auto var(--sp-2);
  font-size: var(--fs-0);
  line-height: 1.5;
  color: var(--tinta);
  text-wrap: pretty;
}

/* Tira de fotos do bar — cada foto aparece INTEIRA (altura fixa + largura
   natural no desktop; empilhadas no mobile), sem recorte forçado e sem barras
   pretas de preenchimento. Fica menor que a galeria do local. */
.galeria-after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 1.6vw, 1rem);
  margin-block: var(--sp-4);
}
.galeria-after img {
  width: 100%;
  height: auto;
  max-width: 360px; /* modesto no mobile */
  object-fit: contain; /* nunca preenche/recorta com preto */
}
@media (min-width: 620px) {
  .galeria-after img {
    width: auto;
    height: clamp(200px, 24vw, 250px);
    max-width: none;
  }
}

/* Botões do bar — mesmo contorno vinho do "Como chegar", lado a lado. */
.acoes-after {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.btn-bar {
  background: transparent;
  color: var(--vinho);
  border: 1px solid var(--vinho);
}
.btn-bar:hover { background: var(--vinho); color: var(--creme); box-shadow: var(--sombra-carta); }

/* Recado de chegada + foto de referência da entrada. Nota curta (não é rótulo
   vinho, por isso fica fora da regra de parágrafos de leitura) e uma foto
   PROPOSITALMENTE menor que a galeria do local — serve só para o convidado
   reconhecer o portão ao subir a rua. */
.nota-mapa {
  max-width: var(--largura-texto);
  margin: var(--sp-4) auto 0;
  font-size: var(--fs-0);
  line-height: 1.6;
  color: var(--tinta);
  text-wrap: pretty;
}
.nota-mapa strong { color: var(--vinho); font-weight: 600; }

.entrada-mapa {
  max-width: 320px; /* bem menor que as fotos da galeria (só referência) */
  margin: var(--sp-3) auto 0;
}
.entrada-mapa img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio);
  box-shadow: var(--sombra-foto);
  transition: filter 0.3s ease, box-shadow 0.3s ease;
}
.entrada-mapa img:hover {
  filter: brightness(1.03) saturate(1.04);
  box-shadow: var(--sombra-alta);
}

/* ==========================================================================
   Modal do presente — QR e código PIX gerados sob demanda
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
  background: rgba(43, 33, 28, 0.55); /* --tinta translúcida */
}
.modal[hidden] { display: none; } /* sobrepõe display:flex acima quando oculto */

.modal-conteudo {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: min(90svh, 42rem);
  overflow-y: auto;
  background: var(--creme);
  background-image: url("../assets/textura-papel.webp");
  background-size: 400px;
  border: 1px solid var(--vinho-linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-modal);
  /* Sem padding-bottom aqui: o respiro inferior migrou para .form-recado —
     sticky bottom:0 respeita o padding do próprio scroll container, então um
     padding-bottom neste elemento faria o cabeçalho do recado flutuar acima
     do rodapé real, com conteúdo passando visível por baixo dele. */
  padding: var(--sp-5) var(--sp-4) 0;
  text-align: center;
}

.modal-fechar {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--vinho);
  font-size: var(--fs-3);
  line-height: 1;
  cursor: pointer;
}
.modal-fechar:hover { color: var(--vinho-forte); }

#modal-titulo {
  font-size: var(--fs-3);
  padding-right: var(--sp-4); /* espaço para não colidir com o botão fechar */
  margin-bottom: var(--sp-3);
}

/* Moldura do QR: cartão branco com respiro — quando ainda não há chave PIX,
   a mesma moldura acolhe a mensagem "Pagamento em breve…" de forma compacta. */
.modal-qr {
  width: min(248px, 72vw);
  box-sizing: border-box;
  margin: 0 auto var(--sp-3);
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--vinho-linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-carta);
  color: var(--tinta);
  font-size: 0.92rem;
  line-height: 1.5;
}
/* Só vira quadrado quando há de fato um QR renderizado (evita um "vazio"
   branco grande no estado "pagamento em breve"). */
.modal-qr:has(svg) {
  padding: var(--sp-2);
}
/* O próprio QR carrega a proporção quadrada — assim a moldura fica quadrada
   mesmo sem suporte a :has(), e nunca "achata" o código. */
.modal-qr svg { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }

.modal-valor {
  color: var(--vinho);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

#btn-copiar {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  margin-bottom: var(--sp-3);
  font-family: var(--ff-corpo);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--vinho);
  color: var(--creme);
  border: 1px solid var(--vinho);
  border-radius: var(--raio);
  cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease,
    box-shadow 0.22s ease, transform 0.22s ease;
}
#btn-copiar:hover { background: var(--vinho-forte); border-color: var(--vinho-forte); box-shadow: var(--sombra-carta); }
#btn-copiar[hidden] { display: none; } /* sobrepõe a maior especificidade do #id acima quando oculto */

.modal-passos {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--tinta);
  font-size: 0.92rem;
  text-align: left;
}
.modal-passos li { margin-bottom: var(--sp-1); }
.modal-passos li:last-child { margin-bottom: 0; }

/* ==========================================================================
   Formulário de recado — dentro do modal do presente (opcional, honeypot)
   ========================================================================== */
/* O divisor do bloco agora é o cabeçalho-âncora (.form-titulo) logo acima. */
.form-recado {
  margin-top: var(--sp-3);
  padding-bottom: var(--sp-4); /* respiro inferior que saiu de .modal-conteudo */
  text-align: left;
}

/* Cabeçalho-âncora do recado: rótulo par dos demais do site (caixa-alta,
   tracking 0.24em, vinho) que também é a "espiada" do bloco — position:sticky
   no rodapé do scroll interno do modal enquanto o formulário ainda está
   abaixo da dobra; assenta no fluxo (virando o divisor do bloco) quando o
   convidado rola. Mata o "falso fundo": o modal nunca aparenta terminar no
   botão de copiar. Sem sticky (navegador muito antigo) degrada para um
   divisor comum no fluxo.
   Assentado = título da seção do form (creme + fio, discreto). Flutuando
   (classe .flutuando via IntersectionObserver em js/app.js) = banner vinho
   chapado, no mesmo vocabulário dos botões primários do site — vira a
   próxima ação óbvia em vez de só um divisor. */
.form-titulo {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: var(--sp-4) calc(-1 * var(--sp-4)) 0; /* sangra sobre o padding lateral do modal */
  border-top: 1px solid var(--vinho-linha);
  background-color: var(--creme);
  background-image: url("../assets/textura-papel.webp"); /* opaco: cobre o conteúdo que rola por baixo */
  background-size: 400px;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.form-titulo button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.65rem var(--sp-4);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--ff-corpo);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: var(--vinho);
  font-size: 0.8rem;
  transition: color 0.2s ease;
}
/* Coração via máscara (não background-image): herda currentColor, então
   clareia sozinho no estado flutuando junto com o texto — sem isso ficaria
   invisível sobre o fundo vinho (o SVG original é stroke vinho fixo). */
.form-titulo button::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: url("../assets/ilustracoes/coracao.svg") center / contain no-repeat;
  mask: url("../assets/ilustracoes/coracao.svg") center / contain no-repeat;
}
/* Seta de convite — aparece só enquanto o cabeçalho flutua no rodapé.
   currentColor pelo mesmo motivo do coração acima. */
.form-titulo button::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Rótulos alternados por estado: título assentado (fixo) vs. lembrete que só
   existe enquanto o cabeçalho flutua no rodapé. Nome acessível fica estável
   via aria-label no button (ver HTML) — os spans são só apresentação visual,
   por isso não levam aria-hidden. */
.rotulo-flutuando {
  display: none;
  letter-spacing: 0.14em; /* frase mais longa: tracking mais fechado cabe em 1 linha no modal */
}
.form-titulo.flutuando .rotulo-assentado { display: none; }
.form-titulo.flutuando .rotulo-flutuando { display: inline; }

.form-titulo.flutuando {
  background-color: var(--vinho);
  background-image: none; /* chapado, como os botões primários — não "mais um cartão de papel" */
  box-shadow: 0 -10px 18px -14px rgba(43, 33, 28, 0.35);
}
.form-titulo.flutuando:hover { background-color: var(--vinho-forte); }
.form-titulo.flutuando button { color: var(--creme); }
.form-titulo.flutuando button::after { opacity: 0.8; }

/* Anel de foco padrão (vinho sobre creme) fica invisível sobre o banner
   vinho — troca para creme com offset interno no estado flutuando. */
.form-titulo.flutuando #btn-ir-recado:focus-visible {
  outline-color: var(--creme);
  outline-offset: -3px;
}

.form-intro {
  color: var(--tinta);
  font-size: 0.92rem;
  margin-bottom: var(--sp-2);
}

.form-recado label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vinho);
  margin-bottom: var(--sp-1);
}

.form-recado input[type="text"],
.form-recado textarea {
  width: 100%;
  font-family: var(--ff-corpo);
  font-size: var(--fs-0);
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--vinho-linha);
  border-radius: var(--raio);
  padding: 0.7rem 0.85rem;
  margin-bottom: var(--sp-2);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.form-recado input[type="text"]::placeholder,
.form-recado textarea::placeholder {
  color: var(--tinta);
  opacity: 0.45;
}

.form-recado input[type="text"]:hover,
.form-recado textarea:hover {
  border-color: var(--vinho-fantasma);
}

/* Foco por ponteiro: reforça a borda e clareia o campo (o anel de teclado
   vem do :focus-visible abaixo, mantido para acessibilidade). */
.form-recado input[type="text"]:focus,
.form-recado textarea:focus {
  border-color: var(--vinho);
  background: #fff;
}

.form-recado input[type="text"]:focus-visible,
.form-recado textarea:focus-visible {
  outline: 2px solid var(--vinho);
  outline-offset: 3px;
}

.form-recado textarea { resize: vertical; min-height: 6.5rem; }

/* Honeypot: presente no DOM e acessível a leitores de tela apenas para bots automatizados
   ignorarem a instrução; usuários humanos nunca o veem. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lgpd {
  color: var(--tinta);
  opacity: 0.8;
  font-size: 0.78rem;
  margin-bottom: var(--sp-2);
}

.form-recado button[type="submit"] {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  font-family: var(--ff-corpo);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--vinho);
  color: var(--creme);
  border: 1px solid var(--vinho);
  border-radius: var(--raio);
  cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease,
    box-shadow 0.22s ease, transform 0.22s ease;
}
.form-recado button[type="submit"]:hover { background: var(--vinho-forte); border-color: var(--vinho-forte); box-shadow: var(--sombra-carta); }

#form-status {
  margin: var(--sp-2) 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--vinho);
  text-align: center;
}

/* ==========================================================================
   Rodapé — fecho do convite: fio escalopado, torre, coração e assinatura
   ========================================================================== */
footer {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) var(--sp-2) clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--vinho-linha);
  margin-top: var(--sp-5);
}
footer::before {
  content: "";
  display: block;
  width: clamp(64px, 10vw, 96px);
  aspect-ratio: 444 / 667;
  margin: 0 auto clamp(1.25rem, 4vw, 2rem);
  background: url("../assets/ilustracoes/torre-tacas.png") center / contain no-repeat;
}
footer p:first-of-type {
  font-family: var(--ff-nome);
  color: var(--vinho);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: var(--sp-2);
}
footer p:last-of-type {
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.78rem;
  color: var(--tinta);
  margin: 0;
}
footer p:last-of-type::before {
  content: "";
  display: inline-block;
  width: 16px; height: 15px;
  margin-right: 0.6rem;
  vertical-align: -2px;
  background: url("../assets/ilustracoes/coracao.svg") center / contain no-repeat;
}

/* ==========================================================================
   Movimento — sutil, respeitando prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero .container > *,
  .hero .container::before {
    animation: subir 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero .kicker { animation-delay: 0.05s; }
  .hero .container::before { animation-delay: 0.18s; }
  .hero .nomes { animation-delay: 0.28s; }
  .hero .data-hero { animation-delay: 0.4s; }
  .role-para-ver::after { animation: flutuar 1.8s ease-in-out infinite; }

  /* Leves elevações no hover — só quando o movimento é bem-vindo */
  .btn-presentear:hover,
  #btn-calendario:hover,
  #btn-mapa:hover,
  .btn-bar:hover,
  #btn-copiar:hover,
  .form-recado button[type="submit"]:hover { transform: translateY(-1px); }
  .btn-presentear:active,
  #btn-calendario:active,
  #btn-mapa:active,
  .btn-bar:active,
  #btn-copiar:active,
  .form-recado button[type="submit"]:active { transform: translateY(0); }
  .presente { transition: box-shadow 0.28s ease, border-color 0.28s ease, transform 0.28s ease; }
  .presente:hover { transform: translateY(-3px); }

  @keyframes subir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes flutuar {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50%      { transform: rotate(45deg) translate(2px, 2px); }
  }

  /* Pulso do cabeçalho do recado após copiar o código PIX: duas lavagens
     suaves de vinho — chama o olhar sem mexer no scroll. Com reduced-motion
     nada anima (o cabeçalho sticky já está visível de toda forma). */
  .form-titulo.pulso button { animation: pulso-recado 0.9s ease-out 2; }
  @keyframes pulso-recado {
    35% { background-color: var(--vinho-suave); }
  }
  /* Sobre o banner vinho (.flutuando) a lavagem acima some — mesma cor sobre
     mesma cor. Troca para um brilho creme translúcido, que lê como destaque
     sobre o fundo sólido em vez de sumir nele. */
  .form-titulo.flutuando.pulso button { animation: pulso-recado-flutuando 0.9s ease-out 2; }
  @keyframes pulso-recado-flutuando {
    35% { background-color: rgba(243, 238, 227, 0.22); }
  }
}

/* ==========================================================================
   Responsividade — mobile-first; ampliações em telas largas
   ========================================================================== */

/* ~480px: nav ganha respiro; solta o monograma */
@media (min-width: 480px) {
  .nav-principal a { font-size: 0.86rem; }
}

/* ~768px: galeria de trajes em 3 colunas (lineup de 6 looks por grupo), com a
   coluna do meio deslocada para baixo — o escalonamento em arco do convite. */
@media (min-width: 768px) {
  .galeria-traje { columns: 4; } /* 4 colunas de mosaico: compacto e organizado */
  main > section[aria-labelledby] h2::before { font-size: var(--fs-3); }
}

/* ~1024px: margens e imagens maiores; medida de texto preservada */
@media (min-width: 1024px) {
  :root { --largura-max: 72rem; }
  main > section[aria-labelledby] h2::before { font-size: var(--fs-4); }
  .galeria-local { gap: 1rem; }
}

/* ~1280px: capa e margens ainda mais generosas */
@media (min-width: 1280px) {
  :root { --largura-max: 76rem; }
}

/* Telas estreitas: esconde o monograma para caber os 5 links do menu (Início,
   Local, After, Traje, Presentes). Breakpoint em 520px porque o 5º item alarga
   o <ul> e apertaria o monograma na faixa ~421–505px. */
@media (max-width: 520px) {
  .nav-principal .container::before { display: none; }
  .nav-principal a { font-size: 0.76rem; letter-spacing: 0.1em; }
}

/* Telas ultra-estreitas (ex.: capa do Galaxy Z Fold, ~280px): mesmo sem o
   monograma, os 5 links ainda não cabem no tamanho acima — encolhe mais para
   evitar corte silencioso de texto (body tem overflow-x:hidden). */
@media (max-width: 360px) {
  .nav-principal ul { gap: 0.35rem; }
  .nav-principal a {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    padding: 0 0.05rem;
  }
}

/* Página 404 — estilos exclusivos, mínimos, herdam tokens acima.
   Extraído do <style> inline de 404.html para permitir CSP style-src 'self'.
   Escopado em .erro-404 (classe exclusiva do <main> de 404.html) para não
   afetar a página principal. */
.erro-404 {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-4) var(--sp-2);
}
.erro-404 .container { max-width: 32rem; }
.erro-404 .numero {
  font-family: var(--ff-titulo);
  color: var(--vinho);
  font-size: clamp(var(--fs-5), 16vw, var(--fs-7));
  line-height: 1;
  margin: 0;
}
.erro-404 h1 {
  font-size: var(--fs-3);
  margin: var(--sp-2) 0 var(--sp-3);
}
.erro-404 p {
  color: var(--tinta);
  max-width: 28rem;
  margin-inline: auto;
}
.erro-404 .btn-voltar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--sp-3);
  padding: 0.7rem 1.75rem;
  font-family: var(--ff-corpo);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--vinho);
  color: var(--creme);
  border: 1px solid var(--vinho);
  border-radius: var(--raio);
  transition: background-color 0.22s ease, border-color 0.22s ease;
}
.erro-404 .btn-voltar:hover { background: var(--vinho-forte); border-color: var(--vinho-forte); }