/* Inês & João · Save the Date
   As posições (--x, --y, --w) estão em pontos das pranchetas do designer (A4: 595 × 842). */

/* Letras servidas pelo próprio site (licença OFL): mais rápido e sem enviar dados dos convidados a terceiros */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/jost.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/jost-italic.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/eb-garamond-bold.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/eb-garamond-italic.woff2) format("woff2"); }

:root {
  --cream: #f5f6f1;
  --option: #e5e6e1;
  --line: #d9dad5;
  --green: #a3ad6f;
  --green-soft: #e8ecd3;
  --olive: #6a742b; /* ligeiramente mais escuro que o original (#737d2f): texto branco e texto verde com contraste suficiente (WCAG AA) */
  --olive-hover: #5d6623;
  --butter: #f3d99c;
  --butter-hover: #edcd80;
  --brown: #6b3f30;
  --text: #4f4b45;
  --muted: #6c685f; /* contraste suficiente para texto pequeno */
  --error: #b4452c;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Fundo às riscas: fica no "fundo da página" do navegador e acompanha o scroll. Assim cobre tudo,
   incluindo por trás das barras do Safari no iPhone e quando a página "estica" no topo ou no fim.
   A imagem são as riscas seguidas do seu reflexo (fundo-tile-v.webp), para se repetirem na vertical
   sem nenhuma linha de junção. (vh para telemóveis antigos; lvh nos recentes) */
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  background: #fbf6e4 url(img/fundo-tile-v.webp) 0 -1vh / auto 202.7vh repeat;
  background-size: auto 202.7lvh; background-position: 0 -1lvh;
}
body {
  margin: 0;
  font-family: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
body.locked .rsvp { visibility: hidden; } /* nada do questionário pode espreitar antes de abrir o envelope */
img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Carregamento ---------- */
.loader {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  display: grid; place-items: center;
  /* as mesmas riscas, na mesma posição que o fundo da página (no topo), para não haver salto ao desaparecer */
  background: #fbf6e4 url(img/fundo-tile-v.webp) 0 -1vh / auto 202.7vh repeat;
  background-size: auto 202.7lvh; background-position: 0 -1lvh;
  transition: opacity .6s ease, visibility .6s;
}
.loader img { width: 64px; animation: pulse 1.6s ease-in-out infinite; }
.loader.done { opacity: 0; visibility: hidden; }
/* sem JavaScript: aviso por cima do ecrã de carregamento */
.sem-js {
  position: fixed; left: 16px; right: 16px; bottom: 24px; z-index: 60;
  margin: 0 auto; max-width: 420px; padding: 14px 18px; border-radius: 10px;
  background: var(--cream); color: var(--text); text-align: center; box-shadow: 0 10px 30px rgb(60 40 20 / .2);
}

/* ---------- Palco (pranchetas 1–3) ---------- */
/* O palco fica sempre centrado no ecrã (vertical e horizontal), em qualquer telemóvel ou computador.
   Os botões aparecem por cima, em baixo; se tocarem no cartão, o app.js sobe o palco só o necessário. */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Proporção A4 (595 × 842) com largura e altura explícitas: funciona também onde não há aspect-ratio/svh */
.stage {
  position: relative;
  width: min(100vw, calc(100vh * 595 / 842));
  width: min(100vw, calc(100svh * 595 / 842));
  height: min(calc(100vw * 842 / 595), 100vh);
  height: min(calc(100vw * 842 / 595), 100svh);
  flex: none;
  transition: translate 1s var(--ease);
}
.hero.no-anim .stage { transition: none; }
.el {
  position: absolute;
  left: calc(var(--x) / 595 * 100%);
  top: calc(var(--y) / 842 * 100%);
  width: calc(var(--w) / 595 * 100%);
  pointer-events: none;
}
.group { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }

/* Estado base: escondido. Cada cena mostra as suas camadas. */
.s1, .s2, .s3, .group {
  opacity: 0;
  transition: opacity .8s ease, transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.stage[data-scene="1"] .s1,
.stage[data-scene="2"] .s2,
.stage[data-scene="3"] .s3 { opacity: 1; transform: none; }

/* PÁGINA 1 — fundo vazio → moldura → envelope → flores e papaia (que depois abanam) */
.stage[data-scene="1"] .s1,
.stage[data-scene="1"] .closed { transition-duration: 1.3s, 1.5s; }
.cartao-liso { transform: scale(.97); --d: .3s; }
.closed { transform: translateY(4%) scale(.97); transform-origin: 49.55% 50.16%; --d: 1.1s; }
.flor1  { transform: translate(3%, -3%) rotate(3deg);  --d: 2s; }
.flor2  { transform: translate(-3%, 2%) rotate(-3deg); --d: 2.25s; }
.papaia { transform: translate(3%, 3%) rotate(3deg);   --d: 2.5s; }
.stage[data-scene="1"] .closed { opacity: 1; transform: none; }

/* PÁGINA 2 — o envelope roda e abre-se, a carta sai, depois entram palmeira, tangerina e cato */
.stage[data-scene="2"] .s1,
.stage[data-scene="3"] .s1 { --d: 0s; transition-duration: .5s, .9s; }
.stage[data-scene="2"] .cartao-liso { transform: translateY(6%) scale(.92); }
.stage[data-scene="2"] .closed,
.stage[data-scene="3"] .closed {
  opacity: 0;
  transform: translate(-1.168%, 9.567%) rotate(16.55deg);
  transition-duration: .7s, 1.1s; transition-delay: .15s, 0s;
}
.stage[data-scene="2"] .selo img { scale: 1.25; opacity: 0; transition: scale .35s ease, opacity .35s ease; }

.open { transform: translate(1.168%, -9.567%) rotate(-16.55deg); transform-origin: 48.38% 59.73%; }
.stage[data-scene="2"] .open { opacity: 1; transform: none; transition-duration: .6s, 1.1s; transition-delay: .15s, 0s; }

/* O papel só se vê acima da frente do envelope: o corte segue a borda de baixo, que é inclinada
   (≈704 pt à esquerda, ≈733 pt à direita), por isso o papel nunca aparece por baixo do envelope. */
.pocket { position: absolute; top: 0; right: 0; bottom: 0; left: 0; clip-path: polygon(-60% -60%, 160% -60%, 160% 90.7%, -60% 80.13%); }

/* A carta começa escondida dentro do envelope, com o topo no fundo do "V" da abertura (≈576 pt),
   e sai pelo centro da abertura. Fica sempre entre o fundo e a frente do envelope (camadas da prancheta 2). */
.convite { transform: translateY(90.9%); transition: transform 1.9s var(--ease); }
.stage[data-scene="2"] .convite { transform: none; transition-delay: 1.1s; }

.tangerina     { transform: translate(-10%, 10%) rotate(-5deg); }
.cacto-capa    { transform: translate(8%, 10%); }
.palmeira-capa { transform: translate(-10%, -3%) rotate(-5deg); }
.stage[data-scene="2"] .s2 { transition-duration: 1.2s, 1.4s; }
.stage[data-scene="2"] .palmeira-capa { --d: 3s; }
.stage[data-scene="2"] .tangerina     { --d: 3.25s; }
.stage[data-scene="2"] .cacto-capa    { --d: 3.5s; }

/* PÁGINA 3 — o envelope e o papel saem juntos, como um só conjunto; fica o fundo laranja;
   o papel do Save the Date aparece, depois a palmeira, por fim os noivos saltam */
.stage[data-scene="3"] .open {
  opacity: 0; transform: translateY(4%);
  transition: opacity .8s ease, transform 1s var(--ease); transition-delay: 0s;
}
.stage[data-scene="3"] .s2 { --d: 0s; transition-duration: .8s, 1s; }

.std-cartao   { transform: scale(.98); --d: 1.2s; }
.stage[data-scene="3"] .std-cartao { transition-duration: 1.8s, 2s; }
.std-palmeira { transform: translate(6%, 3%) rotate(4deg); --d: 2.6s; }
.stage[data-scene="3"] .std-palmeira { transition-duration: 1.3s, 1.5s; }
.std-noivos   { --d: 3.3s; }
.stage[data-scene="3"] .std-noivos { transition-duration: .6s, 0s; }

/* Botão invisível por cima do envelope fechado */
.open-btn {
  position: absolute;
  left: calc(50.2 / 595 * 100%); top: calc(234 / 842 * 100%);
  width: calc(489.2 / 595 * 100%); height: calc(376.7 / 842 * 100%);
  border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  display: none;
  -webkit-tap-highlight-color: transparent;
}
.stage[data-scene="1"] .open-btn { display: block; }
.open-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.stage[data-scene="1"] { cursor: pointer; }
.stage[data-scene="1"]:hover .selo img { scale: 1.08; }

/* ---------- Animações contínuas, suaves ---------- */
.stage[data-scene="1"] .selo img { animation: pulse 2.2s ease-in-out infinite; transition: scale .3s ease; }
.stage[data-scene="1"] .clica img { animation: blink 2.2s ease-in-out infinite; }
/* "Clica aqui para abrir": 30% maior (no mesmo centro) e com um contorno suave para se ler melhor sobre o verde */
.clica img { filter: drop-shadow(0 0 1.5px rgb(55 60 10 / .7)) drop-shadow(0 1px 3px rgb(55 60 10 / .45)); }
/* Tilt orgânico: começa só depois de cada ilustração acabar de aparecer (--sdl = atraso + duração da entrada)
   e cada uma tem o seu ritmo (--sd), para não abanarem todas ao mesmo tempo. */
.sway, .sway-top { transform-origin: 50% 100%; }
.sway-top { transform-origin: 50% 0; }
.stage:not([data-scene="0"]) .s1 :is(.sway, .sway-top),
.stage[data-scene="2"] .s2 .sway, .stage[data-scene="3"] .s2 .sway,
.stage[data-scene="3"] .s3 .sway,
.rsvp.in-view :is(.sway, .sway-top) {
  animation: sway var(--sd, 7s) ease-in-out var(--sdl, 0s) infinite both;
}
.flor1  { --sd: 4.6s; --sdl: 3.3s; }  /* página 1: um pouco mais rápido, mesma amplitude */
.flor2  { --sd: 5.4s; --sdl: 3.55s; }
.papaia { --sd: 5.9s; --sdl: 3.8s; }
.palmeira-capa { --sd: 6.8s; --sdl: 4.2s; }
.tangerina     { --sd: 7.4s; --sdl: 4.45s; }
.cacto-capa    { --sd: 8.6s; --sdl: 4.7s; }
.std-palmeira  { --sd: 6.2s; --sdl: 3.9s; }

/* Os noivos: a mesma ilustração em camadas recortadas (noiva | noivo; e as pernas do noivo abaixo do joelho).
   O noivo ganha balanço, salta, junta as pernas no ar e assenta na pose original. */
.std-noivos .noiva { clip-path: polygon(0 0, 38.3% 0, 37.9% 39.2%, 39.2% 42.8%, 43.3% 46.4%, 50% 48%, 50% 100%, 0 100%); }
.std-noivos .noivo {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  transform-origin: 39.5% 43%; /* as mãos dadas */
  translate: 0 9%; rotate: 7deg;
}
.noivo img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.noivo .inteiro { clip-path: polygon(38.3% 0, 100% 0, 100% 100%, 50% 100%, 50% 48%, 43.3% 46.4%, 39.2% 42.8%, 37.9% 39.2%); }
.noivo .corpo  { clip-path: url(#cCorpo); opacity: 0; }
.noivo .pe-esq { clip-path: url(#cEsq); opacity: 0; transform-origin: 58.2% 56.2%; } /* joelho esquerdo */
.noivo .pe-dir { clip-path: url(#cDir); opacity: 0; transform-origin: 85% 45.9%; }  /* joelho direito */
.stage[data-scene="3"] .noivo { animation: salto var(--salto) cubic-bezier(.45, 0, .35, 1) 3.3s both; }
.stage[data-scene="3"] .noivo .inteiro { animation: inteiro var(--salto) linear 3.3s both; }
.stage[data-scene="3"] .noivo .corpo   { animation: pecas var(--salto) linear 3.3s both; }
.stage[data-scene="3"] .noivo .pe-esq  { animation: pecas var(--salto) linear 3.3s both, bateEsq var(--salto) ease-in-out 3.3s both; }
.stage[data-scene="3"] .noivo .pe-dir  { animation: pecas var(--salto) linear 3.3s both, bateDir var(--salto) ease-in-out 3.3s both; }
.std-noivos { --salto: 1.8s; }

@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes sway {
  0%, 100% { rotate: 0deg; }
  25% { rotate: 1.6deg; }
  50% { rotate: .3deg; }
  75% { rotate: -1.5deg; }
}
@keyframes salto {
  0%   { translate: 0 9%;    rotate: 7deg;    scale: 1 1; }       /* em baixo */
  14%  { translate: 0 11%;   rotate: 9deg;    scale: 1.03 .94; }  /* ganha balanço (encolhe) */
  40%  { translate: 0 -5%;   rotate: -3deg;   scale: .98 1.03; }  /* impulso, estica-se */
  58%  { translate: 0 -6.5%; rotate: -2deg;   scale: 1 1; }       /* topo do salto: bate os sapatos */
  74%  { translate: 0 -2.5%; rotate: -.8deg; }
  88%  { translate: 0 .8%;   rotate: .5deg;   scale: 1.01 .985; } /* assenta */
  100% { translate: 0 0;     rotate: 0deg;    scale: 1 1; }       /* pose final da ilustração */
}
/* durante o gesto das pernas mostra as peças; fora dele, a ilustração inteira (sem costuras) */
@keyframes pecas   { 0%, 40.9% { opacity: 0; } 41%, 80.9% { opacity: 1; } 81%, 100% { opacity: 0; } }
@keyframes inteiro { 0%, 40.9% { opacity: 1; } 41%, 80.9% { opacity: 0; } 81%, 100% { opacity: 1; } }
@keyframes bateEsq { 0%, 41% { rotate: 0deg; } 54% { rotate: -9deg; } 61% { rotate: -13deg; } 67% { rotate: -10deg; } 80%, 100% { rotate: 0deg; } }
@keyframes bateDir { 0%, 41% { rotate: 0deg; } 54% { rotate: 12deg; } 61% { rotate: 17deg; } 67% { rotate: 13deg; } 80%, 100% { rotate: 0deg; } }

/* ---------- Botões ---------- */
.cta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: center;
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity .7s ease, translate .7s var(--ease), visibility .7s;
}
.cta.show { opacity: 1; visibility: visible; translate: 0 0; }
.cta .btn { min-width: 230px; } /* os dois botões com a mesma largura */
/* Ecrãs muito baixos: não há espaço para os botões sem tapar o cartão, por isso ficam logo por baixo dele */
.hero.cta-below .cta { position: static; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 26px;
  border: 0; border-radius: 999px;
  font-family: inherit; font-size: 1.05rem; font-weight: 500; line-height: 1.2; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }
.btn-primary { background: var(--olive); color: #fff; box-shadow: 0 6px 18px rgb(80 60 0 / .22); }
.btn-primary:hover { background: var(--olive-hover); }
.btn-ghost { background: var(--cream); color: var(--brown); box-shadow: 0 6px 18px rgb(80 60 0 / .15); }
.btn-ghost:hover { background: #fff; }
.btn-ghost svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ---------- Escolha do calendário ---------- */
.cal-menu {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgb(60 40 20 / .45);
}
.cal-caixa {
  width: 100%; max-width: 380px;
  padding: 22px 20px 14px; border-radius: 12px;
  background: var(--cream); box-shadow: 0 20px 60px rgb(60 40 20 / .3);
  text-align: center; animation: fadeUp .35s var(--ease) both;
}
.cal-caixa h2 {
  margin: 0 0 6px;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-weight: 700; font-size: 1.5rem; color: var(--brown);
}
.cal-caixa p { margin: 0 0 14px; font-size: .92rem; color: var(--muted); }
.cal-op {
  display: block; margin-top: 8px; padding: 13px 16px; border-radius: 8px;
  background: var(--option); color: var(--text); font-weight: 500; text-decoration: none;
  transition: background-color .2s ease;
}
.cal-op:hover, .cal-op:focus-visible { background: var(--green-soft); outline: none; }
.cal-fechar {
  margin-top: 12px; padding: 10px 16px; border: 0; background: none;
  font: inherit; color: var(--brown); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ---------- RSVP (prancheta 4) ---------- */
.rsvp {
  position: relative;
  width: min(100%, 1000px);
  margin: 0 auto;
}
/* 1 ponto da prancheta, medido sobre a largura desta secção */
.rsvp > * { --pt: calc(min(100vw, 1000px) / 595); }
.panel {
  position: relative; z-index: 2;
  width: clamp(300px, calc(284.1 * var(--pt)), 520px);
  min-width: min(400px, calc(100% - 32px));
  margin: 0 auto;
  margin-top: calc(12.1 * var(--pt));
  margin-bottom: calc(30 * var(--pt));
  padding: 32px 28px 24px;
  background: var(--cream);
  border-radius: 10px;
  box-shadow: 0 14px 50px rgb(130 70 0 / .16);
}
.deco { position: absolute; z-index: 3; pointer-events: none; }
.amaranthus  { left: calc(9.7 * var(--pt));   top: calc(-15.2 * var(--pt)); width: calc(144.1 * var(--pt)); }
.cocktail    { left: calc(14.7 * var(--pt));  bottom: calc(97.2 * var(--pt)); width: calc(137.5 * var(--pt)); }
.maracuja    { left: calc(71.4 * var(--pt));  bottom: calc(49.7 * var(--pt)); width: calc(66 * var(--pt)); }
.cacto-rsvp  { right: calc(64.3 * var(--pt)); bottom: calc(5.7 * var(--pt));  width: calc(108 * var(--pt)); }
.cactus-rsvp { right: calc(9.9 * var(--pt));  bottom: calc(19.2 * var(--pt)); width: calc(99.5 * var(--pt)); }
/* Desktop: ilustrações 30% menores, encostadas ao questionário nos mesmos sítios (o telemóvel mantém-se) */
@media (min-width: 701px) {
  .amaranthus  { left: calc(52.9 * var(--pt));  width: calc(100.9 * var(--pt)); }
  .cocktail    { left: calc(56 * var(--pt));    width: calc(96.3 * var(--pt)); }
  .maracuja    { left: calc(95.7 * var(--pt));  bottom: calc(64 * var(--pt));   width: calc(46.2 * var(--pt)); }
  .cacto-rsvp  { right: calc(96.7 * var(--pt)); width: calc(75.6 * var(--pt)); }
  .cactus-rsvp { right: calc(58.6 * var(--pt)); bottom: calc(15.2 * var(--pt)); width: calc(69.7 * var(--pt)); }
}
/* Tablets na vertical (701–800 px): o par de catos chega-se 18 pt para a direita, juntos, e a grinalda
   4 pt para a esquerda, para não tocarem no texto */
@media (min-width: 701px) and (max-width: 800px) {
  .amaranthus  { left: calc(48.9 * var(--pt)); }
  .cacto-rsvp  { right: calc(78.7 * var(--pt)); }
  .cactus-rsvp { right: calc(40.6 * var(--pt)); }
}

/* PÁGINA 4 — o questionário aparece em fade-in, do início ao fim; depois as ilustrações, uma a uma */
.panel { opacity: 0; transition: opacity 1s ease; }
.panel form > * { opacity: 0; translate: 0 8px; transition: opacity .7s ease, translate .9s var(--ease); transition-delay: calc(.25s + var(--i, 0) * 90ms); }
.rsvp.in-view .panel,
.rsvp.in-view .panel form > * { opacity: 1; translate: 0 0; }

.deco { opacity: 0; transition: opacity 1.2s ease, translate 1.4s var(--ease); transition-delay: var(--dd, 0s); }
.amaranthus  { translate: 0 -5%; --dd: 1.2s; --sd: 6.6s; --sdl: 2.4s; }
.cocktail    { translate: -5% 0; --dd: 1.6s; --sd: 8s;   --sdl: 2.8s; }
.maracuja    { translate: -5% 0; --dd: 2s;   --sd: 7.2s; --sdl: 3.2s; }
.cacto-rsvp  { translate: 5% 0;  --dd: 2.4s; --sd: 9s;   --sdl: 3.6s; }
.cactus-rsvp { translate: 5% 0;  --dd: 2.8s; --sd: 7.8s; --sdl: 4s; }
.rsvp.in-view .deco { opacity: 1; translate: 0 0; }

/* Telemóvel: o formulário ocupa a largura e as ilustrações espreitam à volta */
@media (max-width: 700px) {
  /* as margens do questionário ficam dentro da secção, para as ilustrações se arrumarem nesse espaço livre */
  .rsvp { display: flow-root; }
  .rsvp > * { --pt: calc(100vw / 420); }
  .panel {
    width: calc(100% - 32px); min-width: 0;
    margin-top: calc(120 * var(--pt));
    margin-bottom: calc(285 * var(--pt));
    padding: 28px 20px 22px;
  }
  .deco { z-index: 1; }
}

/* ---------- Formulário ---------- */
.intro { margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 1.02rem; line-height: 1.55; }
.intro p { margin: 0 0 12px; }
.intro p:last-child { margin-bottom: 0; }
.intro .prazo { margin-top: 16px; padding: 10px 14px; background: var(--green-soft); border-radius: 6px; color: #3f4a1f; }
.intro strong { display: inline-block; font-weight: 500; color: var(--brown); letter-spacing: .04em; }
.intro .prazo strong { display: inline; letter-spacing: 0; }
/* Estilos trocados: a frase de abertura fica a castanho, mais forte e espaçada;
   o "VAMOS CASAR!" fica em Garamond itálico e maior */
.intro .destaque { font-weight: 500; color: var(--olive); letter-spacing: .04em; } /* cor do botão "Confirmar presença" */
.intro .casar {
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-style: italic; font-weight: 400; font-size: 1.28em; line-height: 1.3;
  letter-spacing: 0; color: var(--brown); /* cor da data limite */
}
.hint { margin: -4px 0 8px; font-size: .88rem; color: var(--muted); }

/* Quem já respondeu neste dispositivo */
.ja-respondeu { text-align: center; padding: 8px 4px; }
.ja-respondeu h3 {
  margin: 0 0 10px;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-weight: 700; font-size: 1.6rem; color: var(--brown);
}
.ja-respondeu p { margin: 0; line-height: 1.55; }
.resumo {
  margin: 16px 0; padding: 14px 16px;
  text-align: left; background: var(--green-soft); border-radius: 6px;
}
.resumo dt { font-size: .82rem; color: var(--muted); }
.resumo dd { margin: 0 0 10px; color: #3f4a1f; overflow-wrap: anywhere; }
.resumo dd:last-child { margin-bottom: 0; }
.ja-alterar { margin-top: 12px !important; font-size: .92rem; color: var(--muted); }
.field { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.field > label:not(.opt), legend {
  display: block; padding: 0; margin-bottom: 8px;
  font-size: 1rem; color: var(--text);
}
input[type="text"], input[type="email"], textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  font: inherit; font-size: 16px; color: var(--text);
  background: #fbfbf8; border: 1px solid var(--line); border-radius: 6px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea { display: block; resize: vertical; min-height: 72px; }
input[type="text"]::placeholder, input[type="email"]::placeholder, textarea::placeholder { color: #77736a; } /* legível (WCAG AA), mas mais claro que o texto escrito */
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgb(163 173 111 / .3); }
.field.invalid input { border-color: var(--error); }

.opt {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; margin-top: 8px; padding: 11px 14px;
  background: var(--option); color: #5f5b55;
  border: 1.5px solid transparent; border-radius: 6px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.opt:hover { background: #dcddd7; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opt:has(input:focus-visible) { outline: 3px solid rgb(163 173 111 / .55); outline-offset: 2px; }
.opt.on { background: var(--green-soft); border-color: var(--green); color: #3f4a1f; }
.opt.on::after {
  content: ""; margin-left: auto; flex: none;
  width: 18px; height: 10px;
  border-left: 2px solid #6f7b35; border-bottom: 2px solid #6f7b35;
  transform: translateY(-3px) rotate(-45deg);
}
.field.invalid .opt { border-color: rgb(180 69 44 / .45); }
.error { margin: 6px 0 0; font-size: .88rem; color: var(--error); }
.error:empty { display: none; }

.if-yes, #kidsField { animation: reveal .45s var(--ease); }
@keyframes reveal { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

.hp { position: absolute; left: -9999px; opacity: 0; }

.submit {
  width: 100%; margin-top: 4px;
  border-radius: 6px;
  background: var(--butter); color: #6e5739; box-shadow: none;
}
.submit:hover { background: var(--butter-hover); }
.submit:disabled { opacity: .65; cursor: progress; }
.submit.loading::after {
  content: ""; width: 16px; height: 16px; margin-left: 4px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
/* Passo de confirmação antes de enviar */
.rever { outline: none; }
.rever .submit { margin-top: 0; }
.corrigir {
  width: 100%; margin-top: 10px;
  border-radius: 6px; background: transparent; color: var(--brown);
  border: 1.5px solid var(--line);
}
.corrigir:hover { background: #fff; }
.form-status { margin: 12px 0 0; text-align: center; font-size: .95rem; }
.form-status:empty { display: none; }
.form-status.err { color: var(--error); }
.privacy { margin: 14px 0 0; text-align: center; font-size: .82rem; color: var(--muted); }

/* ---------- Obrigado (prancheta 5) ---------- */
.thanks {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
  text-align: center; outline: none;
}
/* PÁGINA 5 — composição da referência "last page": capa em cima, página interior em baixo, unidas pela dobra.
   Medidas em unidades do SVG: conjunto 329.23 × 847.32; capa 324.62 × 443.08 em (0, 0);
   página interior em (4.61, 404.24); a dobra fica a 19.42 do topo da página interior (4.38%). */
.pages {
  position: relative;
  width: min(88vw, calc((100vh - 100px) * 329.23 / 847.32));
  width: min(88vw, calc((100svh - 100px) * 329.23 / 847.32));
  height: min(calc(88vw * 847.32 / 329.23), calc(100vh - 100px));
  height: min(calc(88vw * 847.32 / 329.23), calc(100svh - 100px));
  perspective: 1800px;
}
.pag-capa {
  position: absolute; left: 0; top: 0; width: 98.6%;
  animation: scaleIn 1.8s cubic-bezier(.25, .7, .25, 1) both; /* igual à animação aprovada */
}
.flip {
  position: absolute; left: 1.4%; top: 47.71%; width: 98.6%; height: 52.29%;
  transform-origin: 50% 4.38%; /* a dobra entre as duas páginas */
  transform-style: preserve-3d;
  transform: rotateX(180deg);   /* começa dobrada por cima da capa */
  animation: vira 1.8s cubic-bezier(.45, .05, .3, 1) 2.6s both;
}
.face { position: absolute; top: 0; right: 0; bottom: 0; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.verso { transform: rotateX(180deg); animation: fadeIn .7s ease 1.9s both; } /* a segunda página surge por cima da capa */
.pag-texto {
  position: absolute; left: 21%; right: 21%; top: 18%; bottom: 25%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55em;
  text-align: center;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  animation: fadeUp 1s var(--ease) 4.5s both; /* só depois de a página assentar */
}
/* letra proporcional à largura do cartão (7,6% e 5,2% da largura de .pages) */
.pag-texto h2 { margin: 0; font-weight: 700; font-size: clamp(17px, min(6.69vw, calc((100vh - 100px) * .02953)), 30px); line-height: 1.12; color: var(--brown); }
.pag-texto p  { margin: 0; font-style: italic; font-size: clamp(13px, min(4.58vw, calc((100vh - 100px) * .0202)), 20px); line-height: 1.4; color: var(--text); }
@keyframes vira   { from { transform: rotateX(180deg); } to { transform: rotateX(0deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* aparece depois do texto final, para confirmar o que foi enviado */
.ver-resposta { margin-top: 18px; animation: fadeUp .9s var(--ease) both 5.2s; }

/* "Guarda este link": no fim da página final e no resumo de quem já respondeu */
p.guardar {
  max-width: 360px; margin: 16px auto 0; padding: 12px 16px;
  border-radius: 10px; background: var(--green-soft);
  font-size: .92rem; line-height: 1.5; color: #3f4a1f; text-align: center;
}
.guardar strong { color: var(--olive); }
.thanks .guardar { animation: fadeUp .9s var(--ease) both 5.6s; }
/* PÁGINA 5 — o monograma cresce suavemente */
@keyframes scaleIn { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes fadeUp { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* Desktop (ecrã largo): as ilustrações ficam maiores. As margens vazias da prancheta saem do ecrã
   e os botões passam para os lados do cartão, libertando altura. O telemóvel não muda. */
@media (min-width: 900px) and (min-aspect-ratio: 3/2) {
  .hero { height: 100vh; height: 100svh; min-height: 0; }
  .stage {
    width: calc(100vh * 595 / 760);  width: calc(100svh * 595 / 760);
    height: calc(100vh * 842 / 760); height: calc(100svh * 842 / 760);
  }
  /* um botão de cada lado do cartão, alinhados em baixo */
  .cta {
    bottom: 5vh; bottom: 5svh;
    /* largura do cartão (≈80% do palco) + um botão e 32px de folga de cada lado */
    width: min(calc(100% - 48px), calc(100vh * 595 / 760 * .8 + 564px));
    width: min(calc(100% - 48px), calc(100svh * 595 / 760 * .8 + 564px));
    margin: 0 auto;
    padding: 0;
    justify-content: space-between;
    pointer-events: none;
  }
  .cta .btn { width: 250px; pointer-events: auto; }
}

/* Com "reduzir movimento" ligado no sistema, as animações mantêm-se (são suaves e fazem parte do convite) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}