/* =========================================================================
   Alan & Bia — 21 de novembro de 2026 — Petrolina, PE
   Paleta, tipografia e tokens
   ========================================================================= */

:root {
  /* cores da paleta oficial */
  --azul:       #1F3A44;
  --azul-fundo: #162B33;
  --tinta:      #0E1F26;
  --oliva:      #4E5B3C;
  --rose:       #D8A7A0;
  --rose-claro: #EED6D2;
  --ouro:       #C6A75E;
  --ouro-claro: #E2CB93;
  --creme:      #FAF3ED;
  --creme-alt:  #F3E9E0;
  --papel:      #FFFCF9;

  --texto:             #2A3B41;
  --texto-suave:       #6B7C80;
  --texto-claro:       #F6EFE7;
  --texto-claro-suave: rgba(246, 239, 231, .72);

  /* tipografia */
  --display: "Fraunces", "Playfair Display", Georgia, serif;
  --corpo:   "Newsreader", Georgia, "Times New Roman", serif;
  --rotulo:  "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  /* escala fluida */
  --t-hero:   clamp(3.7rem, 13.8vw, 12.4rem);
  --t-xxl:    clamp(2.75rem, 7vw, 5.7rem);
  --t-xl:     clamp(2.15rem, 4.7vw, 3.6rem);
  --t-l:      clamp(1.58rem, 2.85vw, 2.25rem);
  --t-m:      clamp(1.18rem, 1.5vw, 1.33rem);
  --t-s:      clamp(1.05rem, 1.24vw, 1.12rem);
  --t-rotulo: clamp(.75rem, .9vw, .86rem);

  /* ritmo */
  --secao:   clamp(4rem, 7vw, 6.25rem);
  --foto-cap: 265px;   /* largura da foto dentro de um capitulo */
  --gutter:  clamp(1.25rem, 5vw, 4.5rem);
  --largura: 1280px;
  --leitura: 62ch;

  /* movimento */
  --suave: cubic-bezier(.22, .61, .36, 1);
  --elast: cubic-bezier(.34, 1.36, .64, 1);

  --sombra-baixa: 0 2px 10px rgba(31, 58, 68, .06), 0 10px 30px rgba(31, 58, 68, .05);
  --sombra-alta:  0 14px 40px rgba(31, 58, 68, .13), 0 40px 90px rgba(31, 58, 68, .09);
}

/* ============================ base ============================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: var(--t-m);
  line-height: 1.72;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--ouro); color: #fff; }

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

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--azul); color: var(--texto-claro);
  padding: .8rem 1.3rem; border-radius: 0 0 8px 0;
  font-family: var(--rotulo); font-size: .98rem;
}
.pular:focus { left: 0; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================ utilitarios ============================ */

.envelope {
  width: min(100% - var(--gutter) * 2, var(--largura));
  margin-inline: auto;
}
.envelope--estreito {
  width: min(100% - var(--gutter) * 2, 860px);
  margin-inline: auto;
}

.rotulo {
  font-family: var(--rotulo);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--oliva);
  margin: 0 0 1.4rem;
  display: flex; align-items: center; gap: .8rem;
}
.rotulo::before {
  content: ""; width: 2.2rem; height: 1px;
  background: currentColor; opacity: .55; flex: none;
}
.rotulo--centro { justify-content: center; }
.rotulo--centro::after {
  content: ""; width: 2.2rem; height: 1px;
  background: currentColor; opacity: .55; flex: none;
}
.rotulo--ouro { color: var(--ouro); }
.rotulo--claro { color: var(--ouro-claro); }

.titulo { font-size: var(--t-xxl); }
.titulo em {
  font-style: italic; color: var(--ouro);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.titulo--claro { color: var(--texto-claro); }

.texto-guia {
  max-width: var(--leitura);
  color: var(--texto-suave);
  font-size: clamp(1.15rem, 1.46vw, 1.26rem);
}
.texto-guia--centro { margin-inline: auto; text-align: center; }

.grao {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .3; 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='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.progresso {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--ouro), var(--rose));
  z-index: 120; transition: width .1s linear;
}

/* ============================ navegacao ============================ */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--gutter);
  transition: background .45s var(--suave), padding .45s var(--suave),
              box-shadow .45s var(--suave), backdrop-filter .45s var(--suave);
}
.nav--fixa {
  background: rgba(250, 243, 237, .88);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(31, 58, 68, .07);
  padding-block: .8rem;
}

.nav__marca {
  font-family: var(--display); font-size: 1.44rem; letter-spacing: .06em;
  text-decoration: none; color: var(--texto-claro);
  transition: color .45s var(--suave);
  display: flex; align-items: baseline; gap: .12em;
}
.nav__marca span { color: var(--ouro); font-style: italic; }
.nav--fixa .nav__marca { color: var(--azul); }

.nav__links { display: flex; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav__links a {
  font-family: var(--rotulo); font-size: .88rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  text-decoration: none; color: var(--texto-claro);
  padding: .35rem 0; position: relative;
  transition: color .45s var(--suave), opacity .3s;
  opacity: .88;
}
.nav--fixa .nav__links a { color: var(--azul); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ouro);
  transform: scaleX(0); transform-origin: right;
  transition: transform .42s var(--suave);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after,
.nav__links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

.nav__hamburguer {
  display: none; width: 42px; height: 42px; border: 0; background: none;
  cursor: pointer; padding: 0; position: relative;
}
.nav__hamburguer span {
  position: absolute; left: 10px; width: 22px; height: 1.5px;
  background: var(--texto-claro); border-radius: 2px;
  transition: transform .4s var(--suave), background .45s var(--suave), opacity .25s;
}
.nav--fixa .nav__hamburguer span { background: var(--azul); }
.nav__hamburguer span:nth-child(1) { top: 17px; }
.nav__hamburguer span:nth-child(2) { top: 24px; }
.nav__hamburguer[aria-expanded="true"] span { background: var(--azul); }
.nav__hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__hamburguer[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--creme);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2.4rem;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--suave), visibility 0s linear .45s;
}
.menu[data-aberto="true"] {
  opacity: 1; visibility: visible;
  transition: opacity .45s var(--suave), visibility 0s;
}
.menu nav { display: flex; flex-direction: column; gap: 1.15rem; text-align: center; }
.menu a {
  font-family: var(--display); font-size: clamp(2.07rem, 8.96vw, 3.16rem);
  text-decoration: none; color: var(--azul);
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--suave), transform .5s var(--suave), color .3s;
}
.menu[data-aberto="true"] a { opacity: 1; transform: none; }
.menu[data-aberto="true"] a:nth-child(1) { transition-delay: .09s; }
.menu[data-aberto="true"] a:nth-child(2) { transition-delay: .15s; }
.menu[data-aberto="true"] a:nth-child(3) { transition-delay: .21s; }
.menu[data-aberto="true"] a:nth-child(4) { transition-delay: .27s; }
.menu[data-aberto="true"] a:nth-child(5) { transition-delay: .33s; }
.menu[data-aberto="true"] a:nth-child(6) { transition-delay: .39s; }
.menu a:hover { color: var(--ouro); }
.menu__rodape {
  font-family: var(--rotulo); font-size: .88rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--texto-suave);
}

/* ============================ hero ============================ */

.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  overflow: hidden; isolation: isolate;
  background: var(--tinta);
}
.hero__fundo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__fundo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 32%;
  transform: scale(1.08);
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.4%, -1.2%, 0); }
}

.hero__veu {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(14,31,38,.9) 0%, rgba(14,31,38,.72) 34%, rgba(14,31,38,.22) 58%, rgba(14,31,38,.1) 100%),
    linear-gradient(to top, rgba(14,31,38,.66) 0%, transparent 42%);
}
.hero__poeira { position: absolute; inset: 0; z-index: -1; opacity: .6; }

.hero__conteudo {
  padding: 8rem var(--gutter) 7rem;
  width: min(100%, var(--largura)); margin-inline: auto;
  max-width: 100%;
}
.hero__caixa { max-width: 40ch; }

.hero__selo {
  font-family: var(--rotulo); font-size: var(--t-rotulo); font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; color: var(--ouro-claro);
  display: flex; align-items: center; gap: .85rem; margin-bottom: 1.6rem;
}
.hero__selo::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .6; }

.hero__nomes {
  font-size: var(--t-hero);
  color: var(--texto-claro);
  line-height: .84;
  letter-spacing: -.035em;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  margin-bottom: 1.5rem;
}
.hero__nomes .e {
  display: block; font-style: italic; color: var(--ouro);
  font-size: .46em; line-height: 1; margin: .06em 0 .04em .06em;
  font-variation-settings: "SOFT" 80, "WONK" 1;
}
.hero__frase {
  font-size: clamp(1.18rem, 1.74vw, 1.47rem);
  color: var(--texto-claro-suave); font-style: italic;
  max-width: 34ch; margin-bottom: 2.2rem;
}
.hero__data {
  display: flex; flex-wrap: wrap; align-items: center; gap: .95rem;
  font-family: var(--rotulo); font-size: .94rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--texto-claro);
}
.hero__data i { width: 1px; height: 1.1rem; background: var(--ouro); opacity: .7; display: block; }

.hero__cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--texto-claro-suave);
  font-family: var(--rotulo); font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
}
.hero__cue i {
  width: 1px; height: 40px; background: linear-gradient(var(--ouro), transparent);
  display: block; animation: desce 2.4s ease-in-out infinite;
}
@keyframes desce {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* entrada do hero */
.hero__anima { opacity: 0; transform: translateY(26px); }
.js .hero__anima { animation: sobe 1.05s var(--suave) forwards; }
.hero__anima--1 { animation-delay: .25s; }
.hero__anima--2 { animation-delay: .4s; }
.hero__anima--3 { animation-delay: .58s; }
.hero__anima--4 { animation-delay: .74s; }
.hero__anima--5 { animation-delay: .9s; }
@keyframes sobe { to { opacity: 1; transform: none; } }

/* ============================ save the date ============================ */

.fita {
  background: var(--azul); color: var(--texto-claro);
  padding: clamp(4rem, 8vw, 6.5rem) var(--gutter);
  text-align: center; position: relative; overflow: hidden;
}
.fita::before, .fita::after {
  content: ""; position: absolute; width: 34rem; height: 34rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,167,94,.13), transparent 68%);
  pointer-events: none;
}
.fita::before { top: -17rem; left: -10rem; }
.fita::after  { bottom: -19rem; right: -8rem; }
.fita > * { position: relative; }

.fita__ornamento { width: min(320px, 62%); margin: 0 auto 1.6rem; opacity: .8; }
.fita__ornamento img { width: 100%; filter: brightness(1.22) saturate(.9); }

.fita__data {
  font-size: clamp(2.73rem, 7.39vw, 5.45rem); color: var(--texto-claro);
  letter-spacing: -.02em; margin-bottom: .5rem;
}
.fita__data em { font-style: italic; color: var(--ouro); }
.fita__local {
  font-family: var(--rotulo); font-size: .94rem; letter-spacing: .32em;
  text-transform: uppercase; color: var(--texto-claro-suave); margin-bottom: 2.6rem;
}

.contagem {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(1.2rem, 4.5vw, 3.4rem);
}
.contagem__cel { min-width: 4.6rem; }
.contagem__cel strong {
  display: block; font-family: var(--display); font-weight: 300;
  font-size: clamp(2.29rem, 5.15vw, 3.81rem); line-height: 1; color: var(--ouro);
  font-variant-numeric: tabular-nums;
}
.contagem__cel span {
  font-family: var(--rotulo); font-size: .78rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--texto-claro-suave);
  display: block; margin-top: .55rem;
}

.fita__acoes { margin-top: 2.8rem; display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap; }

/* ============================ botoes ============================ */

.btn {
  --bg: var(--azul); --fg: var(--texto-claro); --bd: var(--azul);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 2.1rem; border: 1px solid var(--bd); border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-family: var(--rotulo); font-size: .9rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; position: relative;
  transition: transform .35s var(--suave), box-shadow .35s var(--suave),
              background .35s var(--suave), color .35s var(--suave), border-color .35s var(--suave);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.btn:active { transform: translateY(0); }
.btn--ouro { --bg: var(--ouro); --bd: var(--ouro); --fg: #26200D; }
.btn--ouro:hover { --bg: var(--ouro-claro); --bd: var(--ouro-claro); }
.btn--contorno { --bg: transparent; --fg: var(--texto-claro); --bd: rgba(246,239,231,.4); }
.btn--contorno:hover { --bg: rgba(246,239,231,.1); --bd: var(--ouro); --fg: var(--ouro-claro); }
.btn--fantasma { --bg: transparent; --fg: var(--azul); --bd: rgba(31,58,68,.26); }
.btn--fantasma:hover { --bg: var(--azul); --fg: var(--texto-claro); --bd: var(--azul); }
.btn[aria-disabled="true"] { opacity: .48; pointer-events: none; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* ============================ o mapa ============================ */

.mapa {
  /* fundo chapado: o mapa agora e PNG transparente, entao assenta em qualquer
     cor. Antes a imagem trazia um retangulo creme que aparecia contra o degrade. */
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background: var(--creme);
  overflow: hidden;
}

.mapa__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.mapa__texto .titulo { margin-bottom: 1.3rem; }

.mapa__paradas {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: grid; gap: .55rem;
}
.mapa__paradas li {
  display: flex; align-items: baseline; gap: .8rem;
  font-family: var(--rotulo); font-size: .9rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-suave);
  padding-left: 1.1rem; position: relative;
}
.mapa__paradas li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ouro);
}
.mapa__paradas b {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1.09rem; color: var(--ouro); letter-spacing: 0;
  min-width: 3.1rem; flex: none;
}

.mapa__palco { position: relative; }
.mapa__palco img { width: 100%; }

.mapa__pino {
  position: absolute; width: 0; height: 0;
  transform: translate(-50%, -50%);
}
.mapa__pino i {
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--ouro);
  box-shadow: 0 0 0 0 rgba(198, 167, 94, .55);
}
.mapa__pino.acesa i { animation: pulso 2.6s var(--suave) infinite; }
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(198, 167, 94, .5); }
  70%  { box-shadow: 0 0 0 16px rgba(198, 167, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 167, 94, 0); }
}
.mapa__pino b {
  position: absolute; left: 50%; top: 50%;
  white-space: nowrap;
  font-family: var(--rotulo); font-size: .67rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--azul); background: rgba(255, 252, 249, .94);
  padding: .26rem .6rem; border-radius: 999px;
  border: 1px solid rgba(198, 167, 94, .45);
  box-shadow: 0 2px 8px rgba(31, 58, 68, .07);
  opacity: 0;
  transition: opacity .5s var(--suave), transform .5s var(--suave);
}

/* cada rotulo sai para um lado, senao eles se atropelam no mapa */
.mapa__pino--acima    b { transform: translate(-50%, -170%); }
.mapa__pino--abaixo   b { transform: translate(-50%, 70%); }
.mapa__pino--dir      b { transform: translate(12px, -50%); }
.mapa__pino--noroeste b { transform: translate(calc(-100% - 8px), -180%); }

.mapa__pino--acima.acesa    b { transform: translate(-50%, -210%); }
.mapa__pino--abaixo.acesa   b { transform: translate(-50%, 110%); }
.mapa__pino--dir.acesa      b { transform: translate(18px, -50%); }
.mapa__pino--noroeste.acesa b { transform: translate(calc(-100% - 14px), -220%); }
.mapa__pino.acesa b { opacity: 1; }

@media (max-width: 900px) {
  .mapa__grade { grid-template-columns: 1fr; gap: 2.4rem; }
  .mapa__palco { max-width: 520px; margin-inline: auto; }
}

/* ============================ historia ============================ */

.historia {
  padding: var(--secao) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--creme-alt); position: relative;
}
.historia__cabecalho {
  width: min(100% - var(--gutter) * 2, 780px);
  margin: 0 auto clamp(2.5rem, 4.5vw, 3.5rem);
  text-align: center;
}
.historia__cabecalho .rotulo { justify-content: center; }
.historia__cabecalho .rotulo::after {
  content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .55; flex: none;
}
.historia__cabecalho .titulo { margin-bottom: 1.3rem; }

.rota {
  position: relative;
  width: min(100% - var(--gutter) * 2, 1060px);
  margin-inline: auto;
}

/* O trilho fica na ESQUERDA, nao no meio. Com ele no centro, cada capitulo
   ocupava so um dos lados e a outra metade da largura ficava vazia - eram
   2.062px de buraco ao longo da secao. */
.rota__trilho {
  position: absolute; left: 7px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(198,167,94,.28) 5%, rgba(198,167,94,.28) 95%, transparent);
}
.rota__preenche {
  position: absolute; left: 7px; top: 0; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--ouro), var(--rose));
  box-shadow: 0 0 14px rgba(198, 167, 94, .5);
}

.capitulo {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) var(--foto-cap);
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.capitulo:last-child { margin-bottom: 0; }

.capitulo__marco,
.capitulo__cartao,
.capitulo__midia { grid-row: 1; }
.capitulo__marco { grid-column: 1; }
.capitulo__cartao { grid-column: 2; }
.capitulo__midia { grid-column: 3; }

/* capitulo sem foto ocupa a faixa inteira em vez de deixar a coluna vazia */
.capitulo--soltexto .capitulo__cartao { grid-column: 2 / -1; max-width: 780px; }

.capitulo__marco {
  align-self: start; margin-top: 2.2rem;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--creme-alt); border: 2px solid rgba(198, 167, 94, .5);
  position: relative; z-index: 2; flex: none;
  transition: border-color .6s var(--suave), background .6s var(--suave), transform .6s var(--elast);
}
.capitulo__marco::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--ouro); transform: scale(0);
  transition: transform .6s var(--elast);
}
.capitulo.visivel .capitulo__marco { border-color: var(--ouro); transform: scale(1.15); }
.capitulo.visivel .capitulo__marco::after { transform: scale(1); }

.capitulo__cartao {
  background: var(--papel);
  border: 1px solid rgba(31, 58, 68, .07);
  border-radius: 4px;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  box-shadow: var(--sombra-baixa);
  position: relative;
}
.capitulo__cartao::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--ouro), transparent);
  border-radius: 4px 0 0 4px;
  transform: scaleY(0); transform-origin: top;
  transition: transform .8s var(--suave);
}
.capitulo.visivel .capitulo__cartao::before { transform: scaleY(1); }

.capitulo__num {
  font-family: var(--display); font-style: italic;
  font-size: clamp(2.18rem, 3.58vw, 3.05rem); line-height: 1;
  color: rgba(198, 167, 94, .3);
  position: absolute; top: .9rem; right: 1.2rem;
  pointer-events: none;
}
.capitulo__cartao .rotulo { margin-bottom: .8rem; font-size: .81rem; letter-spacing: .24em; }
.capitulo__cartao h3 { font-size: var(--t-l); margin-bottom: .8rem; }
.capitulo__cartao p { color: var(--texto-suave); font-size: var(--t-s); }

.capitulo__notas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.capitulo__notas span {
  display: inline-flex; align-items: center; gap: .42rem;
  font-family: var(--rotulo); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oliva);
  background: rgba(78, 91, 60, .07); border-radius: 999px;
  padding: .35rem .78rem;
}
.capitulo__notas svg { width: .95em; height: .95em; }

.capitulo__midia { position: relative; }

/* moldura de foto */
.moldura {
  margin: 0; background: var(--papel);
  padding: .6rem .6rem 2.6rem;
  box-shadow: var(--sombra-alta);
  border-radius: 2px;
  transition: transform .7s var(--suave);
}
.moldura img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1px; }
.moldura figcaption {
  font-family: var(--corpo); font-style: italic; font-size: .94rem;
  color: var(--texto-suave); text-align: center;
  margin-top: .8rem; line-height: 1.45;
}

/* Dentro do capitulo a foto e quadrada: em 4:5 ela media 474px contra um
   cartao de ~280px, e a diferenca virava buraco em cada uma das seis linhas. */
.capitulo__midia .moldura { padding: .5rem .5rem 2.2rem; }
.capitulo__midia .moldura img { aspect-ratio: 1 / 1; object-position: center 30%; }
.capitulo__midia .moldura figcaption { font-size: .9rem; margin-top: .65rem; }

/* marcos de distancia */
.distancia {
  display: flex; margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  padding-left: 3.2rem;
  position: relative; z-index: 2;
}
.distancia__pilula {
  background: var(--azul); color: var(--texto-claro);
  border-radius: 999px; padding: .8rem 1.7rem;
  text-align: center; box-shadow: var(--sombra-alta);
}
.distancia__pilula strong {
  display: block; font-family: var(--display); font-weight: 300;
  font-size: 1.74rem; line-height: 1; color: var(--ouro);
  font-variant-numeric: tabular-nums;
}
.distancia__pilula > span {
  font-family: var(--rotulo); font-size: .73rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--texto-claro-suave);
  display: block; margin-top: .4rem;
}
.distancia__pilula strong span { font: inherit; color: inherit; letter-spacing: inherit; }
.distancia__pilula--zero { background: var(--ouro); }
.distancia__pilula--zero strong { color: #26200D; }
.distancia__pilula--zero > span { color: rgba(38, 32, 13, .72); }

/* ============================ collie ============================ */

.collie {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--oliva); color: var(--texto-claro);
  position: relative; overflow: hidden;
}
.collie__grade {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.collie__texto .titulo { color: var(--texto-claro); margin-bottom: 1.2rem; }
.collie__texto p { color: rgba(246, 239, 231, .8); }
.collie__patas { display: flex; gap: 1rem; margin-top: 1.6rem; }
.collie__patas svg { width: 24px; height: 24px; fill: none; stroke: var(--ouro-claro); stroke-width: 1.4; opacity: .55; }
.collie__patas svg:nth-child(2) { transform: translateY(9px) rotate(12deg); }
.collie__patas svg:nth-child(3) { transform: translateY(18px) rotate(-8deg); }

.collie__retrato { width: 100%; max-width: 300px; margin-inline: auto; }
.collie__retrato img { aspect-ratio: 1 / 1; }

/* ============================ o grande dia ============================ */

.grandedia {
  padding: var(--secao) 0;
  background: var(--tinta); color: var(--texto-claro);
  position: relative; overflow: hidden;
}
.grandedia::before {
  content: ""; position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 60rem; height: 60rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 167, 94, .09), transparent 65%);
}
.grandedia > * { position: relative; }
.grandedia__cabecalho { text-align: center; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.grandedia__cabecalho .rotulo { justify-content: center; }
.grandedia__cabecalho .rotulo::after {
  content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .55; flex: none;
}
.grandedia__cabecalho .titulo { margin-bottom: 1.4rem; }
.grandedia__cabecalho .texto-guia { color: var(--texto-claro-suave); }

/* Onde vai ser: endereço de um lado, mapa do outro. */
.local {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  background: rgba(246, 239, 231, .05);
  border: 1px solid rgba(246, 239, 231, .11);
  border-radius: 4px;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
}
.local__nome {
  font-size: clamp(1.85rem, 3.81vw, 2.51rem);
  color: var(--texto-claro);
  margin: .5rem 0 .6rem;
}
.local__endereco {
  color: var(--texto-claro-suave);
  font-size: var(--t-s);
  line-height: 1.65;
  margin-bottom: 1.4rem;
}
.local__dados { margin: 0 0 1.6rem; display: grid; gap: .7rem; }
.local__dados dt {
  font-family: var(--rotulo); font-size: .81rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ouro); margin-bottom: .2rem;
}
.local__dados dd { margin: 0; font-size: 1.09rem; color: var(--texto-claro); }
.local__acoes { display: flex; flex-wrap: wrap; gap: .7rem; }

.local__mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(246, 239, 231, .14);
}
.local__mapa iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  /* o mapa do Google chega branco demais para o fundo escuro da seção */
  filter: saturate(.85) contrast(.95);
}

@media (max-width: 820px) {
  .local { grid-template-columns: 1fr; }
  .local__mapa { aspect-ratio: 16 / 10; }
}

/* ============================ traje ============================
   Faixa larga, do tamanho dos painéis abaixo. Como cartão isolado no meio
   da largura, ela ficava desproporcional em relação ao bloco do local. */

.traje {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.1rem, 2.6vw, 2rem); align-items: center;
  background: rgba(246, 239, 231, .05);
  border: 1px solid rgba(246, 239, 231, .11);
  border-radius: 4px;
  padding: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1.5rem, 3vw, 2.6rem);
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
}
.traje__icone {
  width: 40px; height: 40px; flex: none;
  fill: none; stroke: var(--ouro); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.traje__texto .rotulo { margin-bottom: .5rem; }
.traje__nome {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem); color: var(--texto-claro);
  margin: 0 0 .45rem;
}
.traje__desc {
  margin: 0; max-width: var(--leitura);
  font-size: var(--t-s); color: var(--texto-claro-suave);
}

/* ============== viagem e hospedagem (o bloco do Gabriel) ==============
   Um painel só: o contato do assessor em cima, a lista de hotéis embaixo,
   para quem preferir reservar por conta. */

.hospedagem {
  margin-top: clamp(1.6rem, 3.5vw, 2.6rem);
  padding: clamp(1.7rem, 3.4vw, 2.8rem);
  background: rgba(246, 239, 231, .04);
  border: 1px solid rgba(246, 239, 231, .11);
  border-radius: 4px;
  scroll-margin-top: 6rem;
}
.hospedagem__cabecalho {
  max-width: var(--leitura);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.hospedagem__titulo {
  font-size: var(--t-l); color: var(--texto-claro); margin: .55rem 0 .7rem;
}
.hospedagem__titulo em { font-style: italic; color: var(--ouro); }
.hospedagem__texto { margin: 0; font-size: var(--t-s); color: var(--texto-claro-suave); }

.hoteis {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: clamp(.7rem, 1.4vw, 1rem);
}
.hotel {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.15rem 1.25rem 1.2rem;
  background: rgba(246, 239, 231, .04);
  border: 1px solid rgba(246, 239, 231, .1);
  border-radius: 4px;
  transition: background .45s var(--suave), border-color .45s var(--suave);
}
.hotel:hover {
  background: rgba(246, 239, 231, .08);
  border-color: rgba(198, 167, 94, .38);
}
.hotel__texto { display: grid; gap: .38rem; }
.hotel__nome {
  font-family: var(--display); font-size: 1.22rem; color: var(--texto-claro);
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
}
.hotel__selo {
  font-family: var(--rotulo); font-size: .67rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta); background: var(--ouro);
  border-radius: 999px; padding: .22rem .55rem;
}
.hotel__desc {
  margin: 0; font-size: 1rem; line-height: 1.5; color: var(--texto-claro-suave);
}
.hotel__link {
  /* margin-top:auto encosta o link na base, para os cartões da grade
     terminarem todos na mesma linha mesmo com descrições de tamanhos diferentes */
  margin-top: auto; align-self: start;
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--rotulo); font-size: .79rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: var(--ouro-claro);
  border-bottom: 1px solid rgba(198, 167, 94, .35); padding-bottom: .28rem;
  transition: color .35s var(--suave), border-color .35s var(--suave);
}
.hotel__link svg { width: 13px; height: 13px; transition: transform .35s var(--suave); }
.hotel__link:hover { color: var(--ouro); border-color: var(--ouro); }
.hotel__link:hover svg { transform: translate(2px, -2px); }

.airbnb {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem 1.25rem; align-items: center;
  padding: 1.2rem 1.35rem;
  border: 1px dashed rgba(198, 167, 94, .38); border-radius: 4px;
}
.airbnb > svg { width: 26px; height: 26px; color: var(--ouro); flex: none; }
.airbnb h4 {
  font-family: var(--display); font-size: 1.16rem;
  color: var(--texto-claro); margin: 0 0 .25rem;
}
.airbnb p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--texto-claro-suave); }

.assessor {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem 1.25rem; align-items: center;
  padding: 1.3rem 1.4rem;
  background: rgba(198, 167, 94, .08);
  border: 1px solid rgba(198, 167, 94, .4); border-radius: 4px;
}
.assessor > svg { width: 26px; height: 26px; color: var(--ouro); flex: none; }
.assessor h4 {
  font-family: var(--display); font-size: 1.14rem;
  color: var(--texto-claro); margin: 0 0 .3rem;
}
.assessor p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--texto-claro-suave); }
.assessor__fone {
  margin-top: .4rem !important;
  font-family: var(--rotulo); font-size: 1.02rem; letter-spacing: .08em;
  color: var(--ouro-claro) !important;
}

.hospedagem__divisor {
  margin: clamp(1.6rem, 3vw, 2.3rem) 0 clamp(.9rem, 2vw, 1.2rem);
  padding-top: clamp(1.3rem, 2.6vw, 1.9rem);
  border-top: 1px solid rgba(246, 239, 231, .12);
  scroll-margin-top: 6rem;
}
.hospedagem__divisor h4 {
  font-family: var(--display); font-size: 1.2rem;
  color: var(--texto-claro); margin: 0 0 .35rem;
}
.hospedagem__divisor p {
  margin: 0; max-width: var(--leitura);
  font-size: .95rem; line-height: 1.55; color: var(--texto-claro-suave);
}

@media (max-width: 700px) {
  .airbnb, .assessor { grid-template-columns: 1fr; justify-items: start; }
}


/* ============================ rsvp ============================ */

.rsvp { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--creme-alt); }

/* faixa horizontal: texto a esquerda, botao a direita. Antes era um bloco
   centralizado de 812px para entregar um botao de 55px. */
/* lado a lado, o texto longo empurrava o botão para um canto solto.
   Empilhado e centralizado, o convite lê de cima para baixo. */
.rsvp__faixa {
  display: grid; gap: clamp(1.6rem, 3.5vw, 2.4rem);
  justify-items: center; text-align: center;
}
.rsvp__texto { max-width: 62ch; }
.rsvp__texto .titulo { margin-bottom: 1.1rem; }
.rsvp__texto .texto-guia { margin-inline: auto; }
.rsvp__acao { display: grid; gap: .9rem; justify-items: center; }


/* ============================ presentes ============================
   Seção própria, com destaque no menu. As classes .pix e .endereco são
   definidas mais abaixo, junto do resto do bloco de dados. */

.presentes {
  position: relative; overflow: hidden;
  padding: var(--secao) 0;
  background: var(--papel);
  border-block: 1px solid rgba(198, 167, 94, .25);
}
.presentes__ornamento {
  position: absolute; inset-inline: 0; top: 0;
  display: flex; justify-content: center;
  opacity: .28; pointer-events: none;
}
.presentes__ornamento img { width: min(520px, 68%); height: auto; }
.presentes > .envelope { position: relative; }

.presentes__cabecalho { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.presentes__cabecalho .titulo { margin-bottom: 1.2rem; }

.presentes__opcoes {
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  max-width: 940px; margin-inline: auto;
}
.presente {
  display: flex; flex-direction: column; gap: .55rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--creme); border: 1px solid rgba(31, 58, 68, .09);
  border-radius: 5px; box-shadow: var(--sombra-baixa);
  transition: transform .45s var(--suave), box-shadow .45s var(--suave);
}
.presente:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.presente__icone { width: 28px; height: 28px; color: var(--ouro); flex: none; margin-bottom: .35rem; }
.presente h3 { font-size: 1.46rem; margin-bottom: .15rem; }
.presente__texto {
  margin: 0 0 .45rem; font-size: 1.03rem; line-height: 1.6; color: var(--texto-suave);
}
.presente > .btn { margin-top: auto; align-self: start; }

.presentes__nota {
  margin: clamp(1.6rem, 3vw, 2.2rem) auto 0; text-align: center;
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.15rem, 2.02vw, 1.42rem); color: var(--azul);
}


/* ============================ chamadas (CTA) ============================ */

.btn--grande { padding: 1.2rem 2.6rem; font-size: .97rem; }
.btn--mini { padding: .62rem 1.15rem; font-size: .83rem; }

.hero__acoes { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

.chamada {
  text-align: center; display: grid; justify-items: center; gap: 1.2rem;
}
.chamada__nota {
  font-family: var(--rotulo); font-size: .83rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--texto-suave); margin: 0;
}
.chamada--historia {
  margin: clamp(2.2rem, 4.5vw, 3.5rem) auto 0;
  padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
  border-top: 1px solid rgba(31, 58, 68, .1);
  width: min(100% - var(--gutter) * 2, 1060px);
  text-align: center;
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.36rem, 2.46vw, 1.85rem); color: var(--azul);
}

.rodape__acoes { margin: 0 0 2.4rem; display: flex; justify-content: center; }

/* ============ chave Pix e endereço (seção Presentes) ============ */

.pix {
  display: grid; gap: .5rem; justify-items: start;
  margin-top: auto; padding-top: .5rem;
}
.pix__rotulo {
  font-family: var(--rotulo); font-size: .71rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--oliva);
}
.pix__chave {
  font-family: var(--rotulo); font-size: 1.16rem; font-weight: 500;
  letter-spacing: .06em; color: var(--azul);
  background: var(--papel); border: 1px dashed rgba(198, 167, 94, .55);
  border-radius: 4px; padding: .6rem .85rem;
  width: 100%; text-align: center;
  word-break: break-all;
}

.pix__titular {
  margin: 0; font-size: .92rem; line-height: 1.4; color: var(--texto-suave);
}

.endereco {
  font-style: normal; font-size: 1.07rem; line-height: 1.55; color: var(--azul);
  background: var(--papel); border: 1px dashed rgba(198, 167, 94, .55);
  border-radius: 4px; padding: .7rem .85rem; margin: .3rem 0 0;
  width: 100%;
}


/* o botao de copiar avisa que deu certo, sem mexer no layout */
.btn[data-copiado="true"] {
  --bg: var(--oliva); --bd: var(--oliva); --fg: var(--texto-claro);
}

/* ============================ faq ============================ */

.faq { padding: var(--secao) 0; background: var(--creme); }
.faq__cabecalho { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.6rem); }
.faq__cabecalho .rotulo { justify-content: center; }
.faq__cabecalho .rotulo::after {
  content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .55; flex: none;
}

.sanfona { border-top: 1px solid rgba(31, 58, 68, .1); }
.sanfona details {
  border-bottom: 1px solid rgba(31, 58, 68, .1);
}
.sanfona summary {
  list-style: none; cursor: pointer; padding: 1.5rem 3rem 1.5rem 0;
  font-family: var(--display); font-size: clamp(1.2rem, 2.02vw, 1.47rem);
  position: relative; transition: color .3s var(--suave);
}
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary:hover { color: var(--ouro); }
.sanfona summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 1.5px solid var(--ouro); border-bottom: 1.5px solid var(--ouro);
  transform: rotate(45deg); transition: transform .4s var(--suave);
}
.sanfona details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.sanfona details p {
  padding: 0 3rem 1.7rem 0; color: var(--texto-suave); font-size: var(--t-s);
  max-width: var(--leitura);
}

/* ============================ rodape ============================ */

.rodape {
  background: var(--tinta); color: var(--texto-claro-suave);
  padding: clamp(4rem, 8vw, 6rem) var(--gutter) 3rem;
  text-align: center;
}
.rodape__ornamento { width: min(260px, 55%); margin: 0 auto 2rem; opacity: .85; }
/* o rodape e mais escuro que a faixa azul, entao o dourado precisa subir mais */
.rodape__ornamento img { width: 100%; filter: brightness(1.6) saturate(.8); }
.rodape__monograma {
  font-family: var(--display); font-size: clamp(2.62rem, 5.6vw, 3.92rem);
  color: var(--texto-claro); letter-spacing: .06em; margin: 0 0 .6rem;
}
.rodape__monograma span { color: var(--ouro); font-style: italic; }
.rodape__frase { font-style: italic; margin-bottom: 2.2rem; }
.rodape__links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.5rem; margin-bottom: 2.4rem;
}
.rodape__links a {
  font-family: var(--rotulo); font-size: .85rem; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none;
  color: var(--texto-claro-suave); transition: color .3s;
}
.rodape__links a:hover { color: var(--ouro); }
.rodape__nota {
  font-family: var(--rotulo); font-size: .81rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(246, 239, 231, .4);
  padding-top: 2rem; border-top: 1px solid rgba(246, 239, 231, .1);
  width: min(100%, 520px); margin-inline: auto;
}

/* ============================ revelacao ============================ */

.js [data-revela] { opacity: 0; transform: translateY(28px); }
.js [data-revela].dentro {
  opacity: 1; transform: none;
  transition: opacity .95s var(--suave), transform .95s var(--suave);
}
.js [data-revela][data-atraso="1"].dentro { transition-delay: .12s; }
.js [data-revela][data-atraso="2"].dentro { transition-delay: .24s; }
.js [data-revela][data-atraso="3"].dentro { transition-delay: .36s; }

/* ============================ responsivo ============================ */

@media (max-width: 980px) {
  .collie__grade { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__hamburguer { display: block; }

  /* no celular o texto fica por cima da foto: precisa de mais escuro embaixo */
  .hero__fundo img { object-position: 62% 22%; }
  .hero__veu {
    background:
      linear-gradient(to top, rgba(14,31,38,.92) 0%, rgba(14,31,38,.72) 38%,
                      rgba(14,31,38,.34) 62%, rgba(14,31,38,.28) 100%);
  }
  .hero { align-items: end; }
  .hero__conteudo { padding-bottom: 10.5rem; }
  .hero__frase { max-width: none; }
  .hero__cue { bottom: 1.4rem; }

  .rota { width: min(100% - var(--gutter) * 2, 640px); }
  .capitulo { grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; }
  .capitulo__cartao,
  .capitulo--soltexto .capitulo__cartao { grid-column: 2; max-width: none; }
  /* no celular nao ha largura para a foto ao lado: ela desce para a linha 2 */
  .capitulo__midia { grid-column: 2; grid-row: 2; margin-top: 1rem; }
  .capitulo__midia .moldura { max-width: 260px; }
  .distancia { padding-left: 2.4rem; }
  .collie__grade { grid-template-columns: 1fr; }
  .collie__retrato { max-width: 260px; margin-inline: 0; }
}

@media (max-width: 620px) {
  .chamada--historia { padding-inline: 0; }
  .hero__conteudo { padding-block: 7rem 6rem; }
  .capitulo__num { font-size: 2.18rem; top: .7rem; right: 1rem; }
  /* o número fica por cima do rótulo quando a data ocupa duas linhas.
     Com o rótulo quebrando, o tracinho tem de subir para a primeira. */
  .capitulo__cartao .rotulo { padding-right: 3.4rem; align-items: flex-start; }
  .capitulo__cartao .rotulo::before { margin-top: .55em; }

  /* --- respiro no celular ---
     Cada painel tinha a moldura pensada para desktop. Somadas ao gutter,
     essas bordas comiam quase um terço da tela de 375px, e o texto ficava
     espremido numa coluna estreita demais. */
  .local,
  .traje,
  .hospedagem { padding: 1.4rem 1.15rem; }
  .presente { padding: 1.5rem 1.25rem; }
  /* o cabide desce para cima do texto quando não há largura para os dois */
  .traje { grid-template-columns: 1fr; gap: .9rem; }
  .hotel { padding: 1.05rem 1.1rem; }
  .assessor,
  .airbnb { padding: 1.2rem 1.1rem; gap: .8rem; }

  /* rótulo e título dos painéis centralizados, como os das seções.
     O parágrafo continua alinhado à esquerda: centralizado, um texto de
     cinco linhas numa tela estreita fica difícil de acompanhar. */
  .hospedagem__cabecalho { text-align: center; }
  .hospedagem__cabecalho .rotulo { justify-content: center; }
  .hospedagem__cabecalho .rotulo::after {
    content: ""; width: 2.2rem; height: 1px;
    background: currentColor; opacity: .55; flex: none;
  }
  .hospedagem__texto { text-align: left; }

  /* botão solto no meio da coluna fica torto: ocupa a linha inteira */
  .assessor .btn,
  .airbnb .btn,
  .local__acoes .btn,
  .rsvp__acao .btn,
  .pix .btn,
  .presente > .btn { width: 100%; }
  .local__acoes { display: grid; gap: .7rem; }
  .presente > .btn { align-self: stretch; }

  /* ícone e texto lado a lado economizam altura quando o bloco empilha */
  .assessor,
  .airbnb { grid-template-columns: 1fr; }

  /* a chave do Pix é longa: sem isso ela quebra no meio dos dígitos */
  .pix__chave { font-size: 1rem; letter-spacing: .04em; }

  .contagem { gap: clamp(.6rem, 4vw, 1.4rem); }
  .contagem__cel { min-width: 3.6rem; }
  .fita__acoes,
  .hero__acoes { justify-content: center; }
  .hero__acoes .btn { width: 100%; }
}

/* ============================ preferencias ============================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-revela] { opacity: 1 !important; transform: none !important; }
  .js .hero__anima { opacity: 1 !important; transform: none !important; }
  .hero__fundo img { animation: none; transform: scale(1.02); }
}

/* modo sem animacao: index.html?estatico=1 */
html[data-estatico="1"] [data-revela],
html[data-estatico="1"] .hero__anima { opacity: 1 !important; transform: none !important; }
html[data-estatico="1"] .hero__fundo img { animation: none; }

@media print {
  .nav, .menu, .hero__cue, .progresso, .grao { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; }
}