/* ==========================================================================
   Amanda & Diogo · Save the Weekend
   Layout: diário de viagem de verão. Páginas de papel com recortes
   "colados" (fitas, bilhete, cartão-postal), coluna de leitura de ~65
   caracteres e ilustrações em aquarela que escapam das margens.
   Três vozes: serifada editorial (títulos), letreiro (palavras soltas)
   e sem serifa legível (informação).
   ========================================================================== */

:root {
  /* cor · paleta "marinho e manteiga" com amarelo-sol (escolhida em 07/11) */
  --papel: #FBF8F1;
  --papel-claro: #FFFDF8;
  --areia: #F5ECD2;          /* manteiga */
  --areia-escura: #E4D5AC;
  --tinta: #1D2F57;          /* marinho */
  --tinta-suave: #4E5B78;
  --piscina: #1F3F7A;        /* tinta azul */
  --piscina-clara: #A9BCD3;  /* névoa */
  --piscina-escura: #1F3F7A;
  --agua: #E7EDF4;           /* névoa clarinha */
  --sol: #F4BE3A;
  --sol-claro: #FBE9AE;
  --terra: #6B4E0E;
  --coral: #1F3F7A;          /* acento de texto (antes coral) */
  --coral-forte: #1D2F57;    /* botões (antes coral) */
  --folha: #4E6E9E;
  --folha-clara: #E7EDF4;
  --folha-escura: #1F3F7A;
  --branco: #FFFFFF;
  --linha: rgba(29, 47, 87, 0.14);
  --linha-forte: rgba(29, 47, 87, 0.32);
  --sombra: rgba(29, 47, 87, 0.2);
  --sombra-leve: rgba(29, 47, 87, 0.07);
  --fita-sol: rgba(244, 190, 58, 0.72);
  --fita-agua: rgba(169, 188, 211, 0.75);
  --fita-coral: rgba(169, 188, 211, 0.75);
  --vidro: rgba(251, 248, 241, 0.94);

  /* tipo · "escrito à mão" + Figtree (escolhido em 07/11) */
  --f-titulo: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-letra: "Homemade Apple", "Segoe Print", "Bradley Hand", cursive;
  --f-texto: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-mini: 0.75rem;
  --t-peq: 0.9375rem;
  --t-base: 1.0625rem;
  --t-media: 1.1875rem;
  --t-h4: 1.3rem;
  --t-h3: clamp(1.5rem, 3.6vw, 1.95rem);
  --t-h2: clamp(2.6rem, 8.4vw, 4.4rem);
  --t-letra: clamp(1.85rem, 5.2vw, 2.5rem);

  /* forma */
  --topo-h: 60px;
  --raio: 14px;

  /* texturas (máscaras e ruído de papel) */
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='18' viewBox='0 0 96 18'%3E%3Cpath d='M0 18V9C12 9 12 2 24 2s12 7 24 7 12-7 24-7 12 7 24 7v9z'/%3E%3C/svg%3E");
  --onda-linha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5c6 0 6-4 12-4s6 4 12 4 6-4 12-4 6 4 12 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-h) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--papel);
  background-image: var(--ruido);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* faixa da área segura no topo (iPhone com notch) */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--papel);
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
figure { margin: 0; }
button { font: inherit; color: inherit; }

a {
  color: inherit;
  text-decoration-color: var(--piscina);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--coral); }

:focus-visible {
  outline: 2.5px solid var(--piscina);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--sol-claro); color: var(--tinta); }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.pular {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel-claro);
  font-weight: 600;
  text-decoration: none;
}
.pular:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- ilustrações (sprite) ---------- */

.icone {
  width: 48px;
  height: 48px;
  flex: none;
  color: var(--tinta);
  overflow: visible;
}
.icone--mini { width: 18px; height: 18px; }
.tinta {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.w-sol { fill: var(--sol); opacity: 0.72; }
.w-agua { fill: var(--piscina-clara); opacity: 0.8; }
.w-coral { fill: var(--piscina-clara); opacity: 0.85; }
.w-folha { fill: var(--folha); opacity: 0.45; }
.w-areia { fill: var(--areia-escura); opacity: 0.75; }
.w-tinta { fill: currentColor; }

/* ---------- peças reutilizáveis ---------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  font-family: var(--f-texto);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.15em;
}
.etiqueta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.etiqueta--confirmado { background: var(--tinta); color: var(--areia); }
.etiqueta--dica { background: var(--agua); color: var(--piscina-escura); }
.etiqueta--pendente { background: var(--sol-claro); color: var(--terra); }
.secao--agua .etiqueta--dica { background: var(--papel-claro); }

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 13px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--papel-claro);
  color: var(--tinta);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.pilula:hover { background: var(--tinta); color: var(--papel-claro); }
.pilula__icone { width: 13px; height: 13px; color: currentColor; }
.pilula__icone .tinta { stroke-width: 2.4; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--f-texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.botao .icone { color: currentColor; }
.botao--contorno { border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta); }
.botao--contorno:hover { background: var(--tinta); color: var(--papel-claro); }
.botao--cheio { border: 0; background: var(--coral-forte); color: var(--branco); padding: 0 30px; }
.botao--cheio:hover { background: var(--tinta); }
.botao--cheio:disabled { opacity: 0.7; cursor: progress; }
.botao--texto {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--piscina);
  text-underline-offset: 4px;
}

.carimbo {
  display: inline-block;
  padding: 0 14px 4px;
  border: 2px solid currentColor;
  border-radius: 10px;
  color: var(--coral);
  font-family: var(--f-letra);
  font-size: 1.65rem;
  line-height: 1.25;
  transform: rotate(-5deg);
}

.bloco-titulo {
  margin-bottom: 14px;
  font-family: var(--f-texto);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.lista-pontos { display: grid; gap: 10px; }
.lista-pontos li {
  position: relative;
  padding-left: 22px;
  max-width: 62ch;
}
.lista-pontos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 6px;
  background: var(--piscina);
  -webkit-mask: var(--onda-linha) 0 50% / 24px 6px no-repeat;
  mask: var(--onda-linha) 0 50% / 24px 6px no-repeat;
}

.vazio { color: var(--tinta-suave); font-style: italic; }

/* ---------- topo ---------- */

.topo {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.topo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 10px;
  background: var(--tinta);
  opacity: 0.22;
  -webkit-mask: var(--onda-linha) 0 0 / 48px 10px repeat-x;
  mask: var(--onda-linha) 0 0 / 48px 10px repeat-x;
  pointer-events: none;
}
.topo__wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--topo-h);
}
/* assinatura: a concha em aquarela */
.monograma {
  flex: none;
  display: block;
  width: 52px;
  height: 40px;
  border-radius: 8px;
}
.monograma img { width: 100%; height: 100%; object-fit: contain; }
.menu {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 26px), transparent 100%);
}
.menu::-webkit-scrollbar { display: none; }
.menu ul { display: flex; gap: 2px; padding: 6px 22px 6px 6px; white-space: nowrap; }
.menu a {
  display: block;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--tinta-suave);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.menu a:hover { color: var(--tinta); }
.menu a[aria-current="true"] { background: var(--agua); color: var(--tinta); }
/* RSVP do menu: mesmo formato e letra dos outros itens, em caixa alta e negrito */
.topo__rsvp {
  flex: none;
  display: block;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--tinta);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.2s;
}
.topo__rsvp:hover { background: var(--agua); }

/* ---------- abertura ---------- */

/* opção A (07/11): concha solta com monograma, letras à mão, muito papel */
.abertura { position: relative; padding-block: 30px 72px; text-align: center; }
.abertura__wrap { display: grid; justify-items: center; }
.abertura__concha { position: relative; width: min(84vw, 400px); }
.abertura__concha-img { width: 100%; height: auto; }

/* abertura "Tug desenterra" (08/11): js/abertura.js desenha a praia no canvas e termina
   no cartão. No celular o palco tem o formato do cartão (4:5); no computador vira um banner
   21:9 (ver a media query de 900px).
   Sem script ou com "reduzir movimento": só o cartão. */
.palco { position: relative; width: 100%; aspect-ratio: 4 / 5; }
.palco__cartao, .palco__tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.palco__cartao { box-shadow: 0 18px 34px -24px rgba(29, 47, 87, 0.55); }
.palco__tela { display: none; }
.anima .palco { background: #FDF4ED; }   /* o papel do convite, enquanto a cena carrega */
.anima .palco__cartao { opacity: 0; }
/* se o script não rodar, o cartão aparece sozinho depois de uns segundos */
.anima .palco:not(.palco--animado) .palco__cartao { animation: palco-mostra 0.4s 3s both; }
.palco--animado .palco__tela { display: block; }
.palco--fim .palco__cartao { opacity: 1; }
.palco--fim .palco__tela { display: none; }
.anima .palco--fim { background: none; }
@keyframes palco-mostra { from { opacity: 0; } to { opacity: 1; } }
/* "ver de novo": botãozinho redondo no canto de baixo do cartão, por fora do desenho */
.palco__repetir {
  position: absolute;
  right: -14px;
  bottom: -14px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(29, 47, 87, 0.3);
  border-radius: 50%;
  background: var(--papel-claro);
  box-shadow: 0 6px 14px -8px rgba(29, 47, 87, 0.5);
  color: var(--tinta);
  cursor: pointer;
  animation: palco-aparece 0.5s ease both;
}
.palco__repetir:hover { border-color: var(--tinta); }
.palco__repetir:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.palco__repetir[hidden] { display: none; }
.palco__repetir .icone { width: 18px; height: 18px; }
@keyframes palco-aparece { from { opacity: 0; transform: translateY(4px); } }
.abertura__mono {
  position: absolute;
  left: 0;
  right: 0;
  top: 33%;
  color: var(--piscina);
  font-family: var(--f-letra);
  font-size: clamp(1.9rem, 8.6vw, 2.8rem);
  line-height: 1.4;
  white-space: nowrap;
}
.abertura__letreiro {
  margin-top: 10px;
  color: var(--tinta-suave);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.abertura__lettering { width: min(80vw, 420px); height: auto; }
.abertura__nomes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.32em;
  margin-top: 6px;
  font-family: var(--f-letra);
  font-size: clamp(2.4rem, 10.6vw, 4.4rem);
  font-weight: 400;
  line-height: 1.5;
}
.abertura__data {
  margin-top: 14px;
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.abertura__lugar {
  margin-top: 4px;
  color: var(--tinta-suave);
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.abertura__botao { margin-top: 28px; }

/* "&" em itálico clássico no meio da letra à mão */
/* o "&" na mesma letra à mão; o desenho dele nessa fonte é miúdo, então vai 35% maior */
.amp { font: inherit; }
.abertura__nomes .amp { font-size: 1.35em; line-height: 0; }

/* ---------- seções ---------- */

.secao {
  position: relative;
  padding-block: clamp(60px, 9.5vw, 100px);
  scroll-margin-top: calc(var(--topo-h) + 8px);
}
.secao--agua { background-color: var(--agua); background-image: var(--ruido); }
.secao--areia { background-color: var(--areia); background-image: var(--ruido); }
.secao--agua::before, .secao--agua::after,
.secao--areia::before, .secao--areia::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  background: inherit;
  -webkit-mask: var(--onda) 0 0 / 96px 18px repeat-x;
  mask: var(--onda) 0 0 / 96px 18px repeat-x;
  pointer-events: none;
}
.secao--agua::before, .secao--areia::before { top: -17px; }
.secao--agua::after, .secao--areia::after { bottom: -17px; transform: scaleY(-1); }

.cabeca { max-width: 46rem; margin-bottom: clamp(30px, 5vw, 52px); }
.cabeca__letreiro {
  margin-bottom: 2px;
  color: var(--acento, var(--piscina));
  font-family: var(--f-texto);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.cabeca__titulo {
  font-family: var(--f-letra);
  font-size: clamp(2rem, 7.4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.55;
}
.cabeca__titulo--menor { font-size: clamp(1.7rem, 5.6vw, 2.5rem); }
.cabeca__intro {
  margin-top: 18px;
  max-width: 40rem;
  color: var(--tinta-suave);
  font-size: var(--t-media);
  line-height: 1.6;
}
div.cabeca__intro { display: grid; gap: 14px; }

.programacao { --acento: var(--coral); }
.ilha { --acento: var(--piscina-escura); }
.chegar { --acento: var(--coral); }
.hospedagem { --acento: var(--folha-escura); }
.bom-saber { --acento: var(--piscina); }
.rsvp { --acento: var(--coral); }
.presentes { --acento: var(--piscina); }

/* ---------- carta de boas-vindas ---------- */

.boas-vindas { padding-block: clamp(36px, 6vw, 56px) clamp(16px, 3vw, 24px); }
.boas-vindas__wrap { display: grid; gap: 32px; justify-items: center; }
.carta {
  position: relative;
  width: 100%;
  max-width: 40rem;
  padding: clamp(28px, 6vw, 52px) clamp(22px, 6vw, 56px);
  background: var(--papel-claro);
  border-radius: 4px;
  box-shadow: 0 1px 2px var(--sombra-leve), 0 22px 40px -30px var(--sombra);
  transform: rotate(-0.5deg);
}
.carta::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 28px;
  width: 104px;
  height: 28px;
  background: var(--fita-agua);
  transform: rotate(-5deg);
  clip-path: polygon(2% 0, 98% 0, 100% 18%, 97% 34%, 100% 52%, 96.5% 70%, 99.5% 86%, 97% 100%, 3% 100%, 0 82%, 3% 66%, 0.5% 48%, 3.5% 30%, 0 14%);
}
.carta__tacas { position: absolute; top: -26px; right: 18px; width: 70px; height: 70px; transform: rotate(8deg); }
.carta__saudacao {
  margin-bottom: 14px;
  font-family: var(--f-letra);
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  line-height: 1.7;
}
.carta__texto { display: grid; gap: 14px; font-size: var(--t-media); line-height: 1.65; }
.carta__despedida { margin-top: 26px; color: var(--tinta-suave); }
.carta__assinatura {
  color: var(--coral);
  font-family: var(--f-letra);
  font-size: clamp(2rem, 6vw, 2.5rem);
  line-height: 1.2;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.boas-vindas__arte img { width: 100%; max-width: 420px; height: auto; }
/* carta escrita à mão (imagem, 08/11): a própria imagem é o papel; o texto fica só para leitores de tela */
.carta--imagem { max-width: 34rem; padding: 0; background: none; box-shadow: none; }
.carta--imagem .carta__imagem { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 2px var(--sombra-leve), 0 22px 40px -30px var(--sombra); }
.carta--imagem .carta__tacas { display: none; }
.carta--imagem .carta__saudacao, .carta--imagem .carta__texto, .carta--imagem .carta__despedida, .carta--imagem .carta__assinatura {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- programação ---------- */

.agenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 20px;
}
.agenda__rotulo { color: var(--tinta-suave); font-size: var(--t-peq); font-weight: 600; }
.agenda__links { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula__icone--antes { width: 15px; height: 15px; }

/* programa ilustrado (opção A, 07/11) */
.programacao__grade { display: grid; gap: 40px; }
.programa {
  position: relative;
  min-width: 0;
  padding: 22px 18px 26px;
  background: var(--papel-claro);
  box-shadow: 0 1px 2px var(--sombra-leve), 0 18px 34px -24px var(--sombra);
}
.programa__titulo { text-align: center; font-family: var(--f-letra); font-size: 1.7rem; line-height: 1.6; }
.programa__datas { text-align: center; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.programa__noite { position: absolute; top: 12px; right: 14px; width: 48px; height: auto; color: var(--tinta); }
.programa__lista { display: grid; margin-top: 18px; }
.programa__link { display: grid; grid-template-columns: minmax(0, 1fr) 54%; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.programa__item--inverso .programa__link { grid-template-columns: 54% minmax(0, 1fr); }
.programa__cena { order: 2; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.programa__item--inverso .programa__cena { order: 0; }
.programa__cena img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.programa__texto { display: grid; justify-items: start; gap: 1px; min-width: 0; }
.programa__item--inverso .programa__texto { justify-items: end; text-align: right; }
.programa__num { font-family: var(--f-letra); font-size: 1.35rem; line-height: 1.4; }
.programa__dia { font-family: var(--f-letra); font-size: 1.15rem; line-height: 1.75; }
.programa__data { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.programa__pilula { margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: var(--sol); color: var(--tinta); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; }
.programa__link:hover .programa__cena img { transform: scale(1.04); }
.programa__link:hover .programa__pilula, .programa__link:focus-visible .programa__pilula { background: var(--tinta); color: var(--sol); }
.programa__link:focus { outline: none; }
.programa__link:focus-visible { outline: 2.5px solid var(--piscina); outline-offset: 6px; border-radius: 12px; }
.programa__seta { display: block; width: 100%; height: auto; margin: 4px 0; color: var(--tinta); overflow: visible; }
.programa__trilha { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.programa__ponta { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.programa__siga { fill: var(--piscina); font-family: var(--f-letra); font-size: 11px; }

/* peixinhos (07/11): abertura, carta, entre seções, mapa, RSVP e rodapé */
.peixes { display: block; height: auto; pointer-events: none; }
.peixes--abertura { width: 92px; margin-top: 26px; }
.peixes--carta { position: absolute; right: 22px; bottom: 22px; width: 78px; transform: rotate(-6deg); }
.carta:has(.peixes--carta) { padding-bottom: 92px; }
.peixes--divisor { position: absolute; left: 50%; top: -40px; z-index: 3; width: 104px; transform: translateX(-50%); }
/* a concha A&D na divisa entre "A ilha" e "Como chegar" (08/11) */
.concha-divisor { position: absolute; left: 50%; top: -46px; z-index: 3; width: 96px; height: auto; transform: translateX(-50%) rotate(-6deg); }
.rodape__selo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.rodape__selo .rodape__assinatura { margin-bottom: 0; }
.peixes--rodape { width: 64px; transform: rotate(-8deg); }
.peixes--espelho { transform: scaleX(-1) rotate(-8deg); }
.rsvp-ok:not([hidden]) ~ .rsvp__peixes { display: none; }
.capitulos { display: grid; gap: 30px; }

/* cenas em aquarela de cada dia (07/11) */
.capitulo--com-cena { padding-top: 16px; }
.capitulo__cenas { position: relative; margin: 0 -8px 26px; }
.capitulo__cena { display: block; width: 100%; height: auto; border-radius: 3px; }
.capitulo__polaroide {
  position: absolute;
  right: -4px;
  bottom: -30px;
  width: min(42%, 230px);
  height: auto;
  padding: 6px 6px 16px;
  background: var(--branco);
  box-shadow: 0 12px 24px -14px var(--sombra);
  transform: rotate(4deg);
}
.capitulo__cenas:has(.capitulo__polaroide) + .capitulo__cabeca { padding-right: 40%; }

/* style guide / dress code (07/11) */
.estilo__dias { display: grid; gap: 18px; }
.estilo__dia {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--papel-claro);
  border-radius: 6px;
  box-shadow: 0 1px 2px var(--sombra-leve);
}
.estilo__img { width: 104px; height: 104px; object-fit: contain; }
.estilo__texto { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.estilo__quando { font-size: var(--t-mini); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-suave); }
.estilo__tema { font-family: var(--f-letra); font-size: 1.12rem; line-height: 1.7; }
.estilo__tema--pendente { color: var(--tinta-suave); }
.estilo__desc { color: var(--tinta-suave); font-size: var(--t-peq); }
.estilo__dicas { max-width: 40rem; margin-top: 32px; }
.estilo__dicas-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.estilo__dicas-cabeca .bloco-titulo { margin: 0; }
@media (min-width: 860px) {
  .estilo__dias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .estilo__dia { grid-template-columns: 1fr; justify-items: center; padding: 26px 22px; text-align: center; }
  .estilo__texto { justify-items: center; }
  .estilo__img { width: 170px; height: 170px; }
}
.capitulo {
  position: relative;
  min-width: 0;
  padding: 32px 22px 24px;
  background: var(--papel-claro);
  border-radius: 4px;
  box-shadow: 0 1px 2px var(--sombra-leve), 0 18px 34px -24px var(--sombra);
}
.capitulo--sol { --fita: var(--fita-sol); --cor-capitulo: var(--terra); }
.capitulo--agua { --fita: var(--fita-agua); --cor-capitulo: var(--piscina-escura); }
.capitulo--coral { --fita: var(--fita-coral); --cor-capitulo: var(--coral-forte); }
.fita {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 112px;
  height: 28px;
  background: var(--fita);
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(2% 0, 98% 0, 100% 18%, 97% 34%, 100% 52%, 96.5% 70%, 99.5% 86%, 97% 100%, 3% 100%, 0 82%, 3% 66%, 0.5% 48%, 3.5% 30%, 0 14%);
}
.capitulo:nth-child(2) .fita { transform: translateX(-50%) rotate(2.5deg); }
.capitulo__cabeca {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1.5px dashed var(--areia-escura);
}
.capitulo__num {
  grid-column: 1;
  color: var(--cor-capitulo);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.capitulo__dia {
  grid-column: 1;
  font-family: var(--f-letra);
  font-size: clamp(1.45rem, 4.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.6;
}
.capitulo__data { margin-top: 2px; }
.capitulo:target { box-shadow: 0 0 0 2px var(--tinta), 0 18px 34px -24px var(--sombra); }
.capitulo:focus { outline: none; }
.capitulo__data {
  grid-column: 1;
  color: var(--piscina);
  font-family: var(--f-letra);
  font-size: 1.6rem;
  line-height: 1.2;
}
.capitulo__ilustra { grid-column: 2; grid-row: 1 / span 3; width: 78px; height: 78px; }

.eventos { display: grid; }
.evento { display: grid; gap: 8px; justify-items: start; }
.evento + .evento { margin-top: 20px; padding-top: 20px; border-top: 1.5px dashed var(--areia-escura); }
.evento__hora { color: var(--coral-forte); font-size: var(--t-peq); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.evento__nome { font-family: var(--f-letra); font-size: 1.9rem; font-weight: 400; line-height: 1.15; }
.evento__desc { color: var(--tinta-suave); }
.evento__info { display: grid; gap: 8px; width: 100%; font-size: var(--t-peq); }
.evento__info > div { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 10px; }
.evento__info dt {
  padding-top: 2px;
  color: var(--tinta-suave);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.evento--embreve { gap: 16px; }
.evento--embreve dd { color: var(--tinta-suave); font-style: italic; }

/* ---------- a ilha ---------- */

.destaques { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.destaques li {
  padding: 5px 14px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--papel-claro);
  font-size: 0.875rem;
  font-weight: 600;
}

.mapa { display: grid; gap: 28px; }
.mapa__figura {
  position: relative;
  min-width: 0;
  padding: 8px;
  background: var(--papel-claro);
  border-radius: 4px;
  box-shadow: 0 1px 2px var(--sombra-leve), 0 24px 44px -30px var(--sombra);
}
.mapa__figura::before, .mapa__figura::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 92px;
  height: 26px;
  background: var(--fita-sol);
  clip-path: polygon(2% 0, 98% 0, 100% 18%, 97% 34%, 100% 52%, 96.5% 70%, 99.5% 86%, 97% 100%, 3% 100%, 0 82%, 3% 66%, 0.5% 48%, 3.5% 30%, 0 14%);
}
.mapa__figura::before { top: -10px; left: -18px; transform: rotate(-32deg); }
.mapa__figura::after { bottom: -8px; right: -18px; transform: rotate(-28deg); }
.mapa__svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: manipulation; }
.mapa__nota { margin-top: 8px; padding: 0 6px 4px; color: var(--tinta-suave); font-size: 0.8125rem; }

/* camadas do mapa (unidades do desenho; --k = unidades por pixel) */
.mapa-costa path {
  fill: none;
  stroke: var(--tinta);
  stroke-width: calc(1.5px * var(--k, 1));
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mapa-costa .fina { stroke-width: calc(1.1px * var(--k, 1)); }
.mapa-ondas path {
  fill: none;
  stroke: var(--piscina);
  stroke-width: calc(1.3px * var(--k, 1));
  stroke-linecap: round;
  opacity: 0.55;
}
.mapa-rotas path {
  fill: none;
  stroke: var(--coral-forte);
  stroke-width: calc(1.8px * var(--k, 1));
  stroke-dasharray: calc(1px * var(--k, 1)) calc(6px * var(--k, 1));
  stroke-linecap: round;
}
.mapa-barcos .icone, .mapa-barcos use { color: var(--tinta); }
.mapa-rotulos text { font-family: var(--f-texto); }
.mapa-rotulos .r-agua {
  fill: var(--piscina-escura);
  font-family: var(--f-titulo);
  font-size: calc(14px * var(--k, 1));
  font-style: italic;
  letter-spacing: 0.03em;
  opacity: 0.85;
}
.mapa-rotulos .r-ilha {
  fill: var(--tinta);
  font-family: var(--f-letra);
  font-size: calc(14px * var(--k, 1));
}
.mapa-rotulos .r-direcao {
  fill: var(--tinta-suave);
  font-size: calc(9.5px * var(--k, 1));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mapa--compacto .r-direcao { display: none; }
.mapa-extras .norte { fill: var(--tinta); }
.mapa-extras .sul { fill: none; stroke: var(--tinta); stroke-width: 1.2; }
.mapa-extras .r-norte { fill: var(--tinta); font-family: var(--f-titulo); font-size: 11px; font-weight: 600; }
.mapa-extras .escala { fill: none; stroke: var(--tinta); stroke-width: calc(1.3px * var(--k, 1)); }
.mapa-extras .r-escala { fill: var(--tinta); font-family: var(--f-texto); font-size: calc(9.5px * var(--k, 1)); font-weight: 700; }
.mapa-extras use { color: var(--tinta); }

.pino { cursor: pointer; outline: none; }
.pino__bola { fill: var(--coral-forte); stroke: var(--papel-claro); stroke-width: 2.5; }
.pino--chegada .pino__bola { fill: var(--sol); stroke: var(--tinta); stroke-width: 1.5; }
.pino--passeio .pino__bola { fill: var(--papel-claro); stroke: var(--tinta); stroke-width: 1.8; }
.pino--chegada .pino__num, .pino--passeio .pino__num { fill: var(--tinta); }
.pino--festa .pino__bola { fill: var(--sol); stroke: var(--tinta); stroke-width: 1.5; }
.pino__icone { color: var(--tinta); }
.pino__anel { fill: var(--papel-claro); fill-opacity: 0.6; stroke: var(--tinta); stroke-width: 1.5; opacity: 0; transition: opacity 0.2s; }
.pino:hover .pino__anel, .pino.ativo .pino__anel { opacity: 1; }
.pino:focus-visible .pino__anel { opacity: 1; stroke: var(--piscina); stroke-width: 2.5; }
.pino__num { fill: var(--branco); font-family: var(--f-texto); font-size: 11.5px; font-weight: 700; pointer-events: none; }
.pino__rotulo {
  fill: var(--tinta);
  font-family: var(--f-texto);
  font-size: 12px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--papel-claro);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  pointer-events: none;
}
.mapa--compacto .pino__rotulo--extra { display: none; }
.mapa--compacto .pino.ativo .pino__rotulo--extra { display: inline; }

.lugares { display: grid; gap: 4px; }
.lugar {
  padding: 10px 12px;
  border-radius: 12px;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.lugar.ativo { background: var(--papel-claro); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.lugar__botao {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 2px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.lugar__botao:disabled { cursor: default; }
.lugar__botao:focus-visible { outline: 2.5px solid var(--piscina); outline-offset: 4px; }
.lugar__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--coral-forte);
  color: var(--branco);
  font-size: 0.8125rem;
  font-weight: 700;
}
.lugar--chegada .lugar__num { background: var(--sol); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.lugar--passeio .lugar__num { background: var(--papel-claro); color: var(--tinta); box-shadow: inset 0 0 0 1.8px var(--tinta); }
.lugar__num--festa { background: var(--sol); }
.lugar__num--festa .icone { width: 13px; height: 13px; color: var(--tinta); }
.lugar__nome { font-weight: 700; }
.lugar__tipo {
  color: var(--tinta-suave);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lugar__desc { margin: 4px 0 0 38px; color: var(--tinta-suave); font-size: var(--t-peq); line-height: 1.5; }
.lugar__links { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 38px; }

.guia { margin-top: clamp(56px, 9vw, 88px); }
.guia__titulo { font-family: var(--f-titulo); font-size: var(--t-h3); line-height: 1.1; }
.guia__intro { margin-top: 10px; max-width: 40rem; color: var(--tinta-suave); }
.guia__grade { display: grid; gap: 16px; margin-top: 26px; }
.guia__cartao {
  min-width: 0;
  padding: 22px 22px 24px;
  background: var(--papel-claro);
  border-radius: var(--raio);
  box-shadow: 0 1px 2px var(--sombra-leve);
}
.guia__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: 16px;
}
.guia__cabeca h4 { font-family: var(--f-titulo); font-size: var(--t-h4); line-height: 1.2; margin-right: auto; }
.guia__icone { width: 52px; height: 52px; }
.guia__itens { display: grid; gap: 14px; }
.guia__nome { font-weight: 700; }
.guia__texto { color: var(--tinta-suave); font-size: var(--t-peq); line-height: 1.55; }
.ref-mapa {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  border: 0;
  border-radius: 50%;
  background: var(--folha-escura);
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: 1px;
  cursor: pointer;
}
.ref-mapa { background: var(--papel-claro); color: var(--tinta); box-shadow: inset 0 0 0 1.8px var(--tinta); }
.ref-mapa:hover { background: var(--tinta); color: var(--papel-claro); }

/* ---------- como chegar ---------- */

.legenda-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 20px;
  color: var(--tinta-suave);
  font-size: 0.875rem;
}
.legenda-status li { display: flex; align-items: center; gap: 8px; }

.chegar__grade { display: grid; gap: 24px; align-items: start; }

.bilhete {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  background: var(--sol-claro);
  border-radius: 14px;
  box-shadow: 0 1px 2px var(--sombra-leve), 0 18px 32px -24px var(--sombra);
  transform: rotate(-1deg);
}
.bilhete::before, .bilhete::after {
  content: "";
  position: absolute;
  right: 61px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--papel);
}
.bilhete::before { top: -9px; }
.bilhete::after { bottom: -9px; }
.bilhete__corpo { min-width: 0; padding: 18px 18px 20px 20px; border-right: 2px dashed rgba(27, 46, 82, 0.28); }
.bilhete__tipo {
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bilhete__tipo span { color: var(--tinta-suave); font-weight: 600; letter-spacing: 0.08em; text-transform: none; font-style: italic; }
.bilhete__rota {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 12px 0 14px;
}
.bilhete__rota strong { display: block; font-family: var(--f-titulo); font-size: clamp(1.25rem, 4.4vw, 1.6rem); font-weight: 600; line-height: 1.1; }
.bilhete__rota > div:last-child { text-align: right; }
.bilhete__rotulo { display: block; color: var(--terra); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.bilhete__barco { width: 44px; height: 44px; }
.bilhete__dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.bilhete__dados dt { color: var(--terra); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.bilhete__dados dd { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.bilhete__canhoto {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0;
  font-family: var(--f-titulo);
  font-size: 1.4rem;
  line-height: 1;
}
/* carimbo "Por nossa conta" (08/11): a travessia, ida e volta, é paga pelos noivos */
.bilhete__carimbo {
  width: fit-content;
  margin: 12px 4px -4px auto;
  display: grid;
  justify-items: center;
  padding: 7px 12px 6px;
  border: 2.5px double var(--piscina);
  border-radius: 8px;
  color: var(--piscina);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.15;
  text-transform: uppercase;
  transform: rotate(-9deg);
  opacity: 0.88;
  filter: url(#tinta-carimbo);
  pointer-events: none;
}
.bilhete__carimbo small { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.22em; }
.bilhete__canhoto em { color: var(--piscina-escura); font-style: italic; font-size: 1.1rem; margin: 2px 0; }
.bilhete__canhoto small { margin-top: 10px; font-family: var(--f-texto); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; }

.nota {
  padding: 20px 22px;
  border: 1.5px dashed var(--linha-forte);
  border-radius: var(--raio);
}
.nota__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.nota h3 { font-family: var(--f-titulo); font-size: var(--t-h4); line-height: 1.25; }
.nota p { color: var(--tinta-suave); }

.trajeto { position: relative; display: grid; gap: 40px; margin-top: clamp(40px, 7vw, 64px); }
.trajeto::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 12px;
  bottom: 12px;
  border-left: 2px dashed var(--piscina);
  opacity: 0.55;
}
.etapa { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
.etapa__marco {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
  background: var(--papel);
  font-family: var(--f-titulo);
  font-size: 1.35rem;
  font-weight: 600;
}
.etapa__corpo { min-width: 0; padding-top: 4px; }
.etapa__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; }
.etapa__cabeca h3 { font-family: var(--f-titulo); font-size: var(--t-h3); line-height: 1.1; }
.etapa__texto { max-width: 62ch; margin-bottom: 16px; color: var(--tinta-suave); }
.cais { display: grid; gap: 14px; }
.cais__cartao {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 20px;
  background: var(--papel-claro);
  border-radius: var(--raio);
  box-shadow: 0 1px 2px var(--sombra-leve), 0 14px 28px -24px var(--sombra);
}
.cais__destaque {
  justify-self: start;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel-claro);
  font-size: 0.75rem;
  font-weight: 700;
}
.cais__nome { font-family: var(--f-titulo); font-size: var(--t-h4); line-height: 1.2; }
.cais__cartao .evento__info > div { grid-template-columns: 5.6rem minmax(0, 1fr); }
.cais__cartao .lugar__links { margin: 0; }
.aviso {
  max-width: 62ch;
  margin-top: 40px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--sol-claro);
  font-size: var(--t-peq);
}

/* ---------- hospedagem ---------- */

.hospedagem__grade { display: grid; gap: 36px; }
.incluido__lista { display: grid; gap: 12px; }
.incluido__item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  background: var(--papel-claro);
  border-radius: var(--raio);
}
.incluido__sinal {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sol-claro);
  color: var(--terra);
}
.incluido__sinal .icone { width: 20px; height: 20px; color: currentColor; }
.incluido__item--sim .incluido__sinal { background: var(--agua); color: var(--tinta); }
.incluido__item--nao .incluido__sinal { background: var(--areia); color: var(--coral-forte); }
.incluido__nome { font-weight: 700; }
.incluido__texto { color: var(--tinta-suave); font-size: var(--t-peq); }
.regioes__lista { display: grid; gap: 12px; }
.regiao {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1.5px dashed var(--areia-escura);
}
.regiao:last-child { border-bottom: 0; }
.regiao__icone { width: 46px; height: 46px; }
.regiao__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; }
.regiao h4 { font-family: var(--f-titulo); font-size: var(--t-h4); line-height: 1.2; }
.regiao p { color: var(--tinta-suave); font-size: var(--t-peq); }
.hospedagem__rodape { display: grid; gap: 36px; margin-top: 44px; }
.pousadas__lista { display: grid; gap: 14px; }
.pousadas__nome { font-weight: 700; }
.pousadas__nome span { color: var(--tinta-suave); font-weight: 500; }

/* ---------- bom saber ---------- */

.bom-saber__wrap { display: grid; gap: 8px; }
.bom-saber .cabeca { position: relative; margin-bottom: 20px; }
.bom-saber__chapeu { width: 84px; height: 84px; margin-top: 18px; }
.perguntas { border-top: 1.5px solid var(--linha); min-width: 0; }
.pergunta { border-bottom: 1.5px solid var(--linha); }
.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  list-style: none;
  cursor: pointer;
  font-family: var(--f-titulo);
  font-size: clamp(1.05rem, 3.2vw, 1.2rem);
  font-weight: 600;
  line-height: 1.35;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:hover .pergunta__texto { text-decoration: underline; text-decoration-color: var(--piscina); text-underline-offset: 4px; }
.pergunta__mais {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
}
.pergunta__mais::before, .pergunta__mais::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.6px;
  background: var(--tinta);
  transform: translate(-50%, -50%);
  transition: transform 0.25s;
}
.pergunta__mais::after { transform: translate(-50%, -50%) rotate(90deg); }
.pergunta[open] .pergunta__mais { background: var(--tinta); }
.pergunta[open] .pergunta__mais::before, .pergunta[open] .pergunta__mais::after { background: var(--papel-claro); }
.pergunta[open] .pergunta__mais::after { transform: translate(-50%, -50%) rotate(0deg); }
.pergunta--pendente .pergunta__texto { color: var(--tinta-suave); }
.pergunta__resposta { display: grid; gap: 10px; justify-items: start; max-width: 62ch; padding: 0 2px 22px; color: var(--tinta-suave); }

/* ---------- RSVP (cartão-postal) ---------- */

/* opção B (07/11): papel com borda rasgada, búzio "RSVP" e traço azul */
.postal {
  position: relative;
  isolation: isolate;
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(26px, 6vw, 48px) clamp(20px, 6vw, 56px) clamp(24px, 5vw, 40px);
  text-align: left;
}
.postal__papel { position: absolute; inset: 0; z-index: -1; background: var(--papel-claro); }
.buzio { display: block; width: min(72vw, 300px); height: auto; margin: 0 auto 8px; color: var(--piscina); overflow: visible; }
.buzio__texto { fill: var(--piscina); font-family: var(--f-letra); font-size: 8.6px; }
.cabeca--postal { margin-bottom: 26px; text-align: center; margin-inline: auto; }
.cabeca--postal .cabeca__intro { margin-inline: auto; }
.rsvp__peixes { display: block; width: 150px; height: auto; margin: 26px auto 0; }
.rsvp-lembrete {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--agua);
  font-size: var(--t-peq);
}

.formulario { display: grid; gap: 22px; }
.campo { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo > label, .campo > legend { padding: 0; font-size: 0.9375rem; font-weight: 700; }
.campo > legend { margin-bottom: 8px; }
.opcional { color: var(--tinta-suave); font-size: 0.8125rem; font-weight: 500; }
.opcional::before { content: "· "; }
.formulario input[type="text"],
.formulario input[type="tel"],
.formulario input[type="email"],
.formulario textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1.5px solid var(--piscina);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 1.0625rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.formulario textarea { min-height: 96px; padding: 10px 12px; border: 1.5px solid var(--linha-forte); border-radius: 10px; resize: vertical; }
.formulario input::placeholder, .formulario textarea::placeholder { color: rgba(78, 91, 120, 0.6); }
.formulario input:focus { outline: none; border-bottom-color: var(--tinta); box-shadow: 0 2px 0 0 var(--tinta); }
.formulario textarea:focus { outline: none; border-color: var(--piscina); box-shadow: 0 0 0 3px var(--agua); }
.campo > label, .campo > legend { letter-spacing: 0.04em; }
.formulario [aria-invalid="true"] { border-color: var(--coral-forte); }
.campo__erro { color: var(--coral-forte); font-size: 0.875rem; font-weight: 600; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcao, .marcador { position: relative; display: block; cursor: pointer; }
.opcao input, .marcador input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 8px 12px;
  border: 1.5px solid var(--linha-forte);
  border-radius: 14px;
  background: var(--branco);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.opcao input:checked + span { border-color: var(--tinta); background: var(--tinta); color: var(--papel-claro); }
.opcao input:focus-visible + span, .marcador input:focus-visible + span { outline: 2.5px solid var(--piscina); outline-offset: 3px; }
.dias { display: flex; flex-wrap: wrap; gap: 8px; }
.marcador span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 8px 16px 8px 12px;
  border: 1.5px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--branco);
  font-variant-numeric: tabular-nums;
}
.marcador span::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--linha-forte);
  border-radius: 5px;
  background: var(--branco);
}
.marcador input:checked + span { border-color: var(--tinta); background: var(--agua); }
.marcador input:checked + span::before {
  border-color: var(--tinta);
  background: var(--tinta);
  box-shadow: inset 0 0 0 3px var(--agua);
}
.bloco-sim { display: grid; gap: 22px; }
.campo-duplo { display: grid; gap: 22px; }
.campo-mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__acao { display: grid; gap: 12px; justify-items: start; }
.formulario__acao .botao { width: 100%; }
.formulario__status { font-size: var(--t-peq); }
.formulario__status--erro { color: var(--coral-forte); font-weight: 600; }

.rsvp-ok { display: grid; justify-items: center; gap: 12px; padding: 12px 0 4px; text-align: center; outline: none; }
.rsvp-ok__icone { width: 140px; height: auto; }
.rsvp-ok__titulo { font-family: var(--f-titulo); font-size: var(--t-h3); line-height: 1.15; }
.rsvp-ok__texto { max-width: 34rem; color: var(--tinta-suave); font-size: var(--t-media); }
.rsvp-ok__agenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.rsvp-ok__teste { max-width: 34rem; padding: 10px 14px; border-radius: 10px; background: var(--sol-claro); color: var(--terra); font-size: 0.875rem; }

/* ---------- presentes ---------- */

.presentes { padding-top: clamp(24px, 5vw, 48px); }
.presentes__wrap { display: grid; gap: 18px; justify-items: start; max-width: 860px; }
.presentes__icone { width: 84px; height: 84px; }
.presentes__texto { max-width: 46ch; margin-top: 14px; color: var(--tinta-suave); font-size: var(--t-media); }
.presentes__acao { margin-top: 18px; }

/* ---------- momentos ---------- */

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 22px; }
.polaroide { padding: 10px 10px 14px; background: var(--branco); box-shadow: 0 10px 24px -16px var(--sombra); }
.polaroide:nth-child(odd) { transform: rotate(-1.5deg); }
.polaroide:nth-child(even) { transform: rotate(1.2deg); }
.polaroide img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroide figcaption { margin-top: 8px; font-family: var(--f-letra); font-size: 1.3rem; text-align: center; }

/* ---------- rodapé ---------- */

.rodape {
  position: relative;
  margin-top: clamp(40px, 8vw, 80px);
  padding-block: clamp(56px, 10vw, 96px) calc(40px + env(safe-area-inset-bottom, 0px));
  background-color: var(--sol);
  background-image: var(--ruido);
  text-align: center;
}
.rodape::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -17px;
  height: 18px;
  background: inherit;
  -webkit-mask: var(--onda) 0 0 / 96px 18px repeat-x;
  mask: var(--onda) 0 0 / 96px 18px repeat-x;
}
.rodape__wrap { display: grid; justify-items: center; gap: 6px; }
/* só a concha, sem o círculo branco (08/11) */
.rodape__assinatura { position: relative; width: 150px; margin-bottom: 4px; }
.rodape__assinatura img { display: block; width: 100%; height: auto; }
.rodape__assinatura > span { position: absolute; left: 0; right: 0; top: 37%; font-family: var(--f-letra); font-size: 1.45rem; line-height: 1.4; color: var(--piscina); }
.rodape__letreiro { font-family: var(--f-letra); font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.6; }
.rodape__nomes { margin-top: 2px; font-size: var(--t-mini); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; }
.rodape__info { font-size: var(--t-mini); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.rodape__contato { margin-top: 14px; font-size: var(--t-peq); }
.rodape__contato a { text-decoration-color: var(--tinta); }
.rodape__topo { margin-top: 18px; font-size: var(--t-peq); font-weight: 600; text-decoration-color: var(--tinta); }

.erro-conteudo {
  position: relative;
  z-index: 100;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
  background: var(--coral-forte);
  color: var(--branco);
  font-weight: 600;
  text-align: center;
}

/* ---------- telas maiores ---------- */

@media (min-width: 640px) {
  .campo-duplo { grid-template-columns: 1fr 1fr; }
  .formulario__acao { grid-template-columns: auto 1fr; align-items: center; }
  .formulario__acao .botao { width: auto; }
  .cais { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .guia__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guia__cartao:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .presentes__wrap { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 28px; }
}

@media (min-width: 860px) {
  .programacao__grade { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 44px; align-items: start; }
  .programa { position: sticky; top: calc(var(--topo-h) + 24px); }
  .chegar__grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; }
  .hospedagem__grade, .hospedagem__rodape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .boas-vindas--com-arte .boas-vindas__wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; }
}

@media (min-width: 900px) {
  .abertura { padding-block: 14px 64px; }
  /* no computador a abertura vira um banner largo (21:9): a praia inteira, terminando no cartão
     com o Tug sentado do lado (js/abertura.js, formato LARGO). No máximo ~64% da altura da tela,
     para os nomes aparecerem logo; as pontas se dissolvem no papel da página. */
  .abertura__concha { --banner: min(100vw - 24px, 149vh); width: var(--banner); margin-inline: calc((100% - var(--banner)) / 2); }
  .palco {
    aspect-ratio: 2333 / 1000;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .palco__cartao { object-fit: contain; box-shadow: none; }   /* sem script: o cartão no meio do banner */
  .palco--largo.palco--fim .palco__tela { display: block; }  /* no banner, o fim é o próprio desenho */
  .palco--largo.palco--fim .palco__cartao { opacity: 0; }
  .anima .palco--largo.palco--fim { background: #FDF4ED; }
  .palco__repetir { right: 7%; bottom: 14px; }
  .menu ul { justify-content: flex-end; }
}

@media (min-width: 960px) {
  .mapa { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .mapa__figura { position: sticky; top: calc(var(--topo-h) + 28px); transform: rotate(-0.4deg); }
  .guia__grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .guia__cartao { grid-column: span 2; }
  .guia__cartao:nth-child(n+4) { grid-column: span 3; }
  .guia__cartao:last-child:nth-child(odd) { grid-column: span 3; }
  .bom-saber__wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
  .bom-saber .cabeca { position: sticky; top: calc(var(--topo-h) + 32px); }
  .trajeto::before { left: 25px; }
  .etapa { grid-template-columns: 52px minmax(0, 1fr); gap: 22px; }
  .etapa__marco { width: 52px; height: 52px; font-size: 1.5rem; }
}

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