/* Layout: uma única coluna vertical, como uma carta longa. Seções alternam entre vinho e creme. */
:root {
  --vinho-fundo: #24070f;
  --vinho: #4a1220;
  --vinho-claro: #6b1e30;
  --rosa: #c4807a;
  --rosa-suave: #e6c3b8;
  --creme: #f4e9dc;
  --creme-papel: #fbf4ea;
  --tinta: #3b1720;
  --tinta-suave: #7a5059;
  --dourado: #c9a35f;
  --dourado-claro: #e2c88f;

  --f-titulo: "EB Garamond", Garamond, "Times New Roman", serif;
  --f-texto: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-xs: 0.75rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.5rem;
  --t-xl: clamp(2rem, 7vw, 3.25rem);
  --t-xxl: clamp(4.5rem, 22vw, 9rem);

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--vinho-fundo);
  color: var(--creme);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
em { font-style: italic; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }

/* ---------- Estrutura das seções ---------- */
.secao {
  position: relative;
  padding-block: clamp(5rem, 14vw, 8rem);
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  overflow: hidden;
}
.escura {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(107, 30, 48, 0.55), transparent 70%),
    var(--vinho-fundo);
  color: var(--creme);
}
.clara { background: var(--creme); color: var(--tinta); }
.clara + .clara { border-top: 1px solid rgba(201, 163, 95, 0.35); }

.miolo { max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.miolo.estreito { max-width: 36rem; }

.sobre {
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dourado);
  font-weight: 500;
}
.clara .sobre { color: #9a7535; }

.titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  line-height: 1.1;
  text-wrap: balance;
}
.titulo em { color: var(--rosa); }
.clara .titulo em { color: var(--vinho-claro); }

/* ---------- Abertura ---------- */
.abertura {
  min-height: min(100svh, 52rem);
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(80% 50% at 50% 40%, rgba(196, 128, 122, 0.18), transparent 70%),
    radial-gradient(120% 80% at 50% 100%, rgba(107, 30, 48, 0.7), transparent 70%),
    var(--vinho-fundo);
}
.abertura .miolo { align-items: center; gap: 1.25rem; }
.nome {
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-xxl);
  line-height: 0.95;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--creme) 30%, var(--rosa-suave) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.filete {
  width: 4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dourado), transparent);
}
.frase-abertura {
  font-family: var(--f-titulo);
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--rosa-suave);
  max-width: 20rem;
  text-wrap: balance;
}
.botao {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 2rem;
  border: 1px solid var(--dourado);
  border-radius: 999px;
  color: var(--dourado-claro);
  text-decoration: none;
  font-size: var(--t-s);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.4s, color 0.4s;
}
.botao::after { content: "↓"; font-size: 1rem; letter-spacing: 0; }
.botao:hover, .botao:focus-visible { background: var(--dourado); color: var(--vinho-fundo); }

/* ---------- Cronômetro ---------- */
.tempo { text-align: center; border-top: 1px solid rgba(201, 163, 95, 0.2); }
.tempo .miolo { align-items: center; gap: 2.25rem; }
.titulo-tempo {
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  color: var(--rosa-suave);
  text-wrap: balance;
}
.contador { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; width: 100%; }
.linha-grande {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 30rem;
}
.linha-grande .unidade + .unidade { border-left: 1px solid rgba(201, 163, 95, 0.3); }
.unidade { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 0; }
.num {
  font-family: var(--f-titulo);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
  line-height: 1;
  color: var(--creme);
  display: inline-block;
}
.linha-grande .num { font-size: clamp(3.25rem, 15vw, 5rem); }
.rot {
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dourado);
}
.linha-relogio {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.5rem, 3vw, 1.25rem);
  padding: 1.1rem clamp(1rem, 5vw, 2rem);
  border: 1px solid rgba(201, 163, 95, 0.35);
  border-radius: 999px;
  background: rgba(74, 18, 32, 0.45);
}
.linha-relogio .num { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.linha-relogio .rot { font-size: 0.625rem; }
.dois-pontos {
  font-family: var(--f-titulo);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1;
  color: var(--dourado);
  animation: pulsar 2s ease-in-out infinite;
}
.num.virou { animation: virar 0.55s cubic-bezier(.2, .7, .2, 1); }
@keyframes virar {
  0% { transform: translateY(35%); opacity: 0; filter: blur(3px); }
  100% { transform: none; opacity: 1; filter: none; }
}
@keyframes pulsar { 50% { opacity: 0.35; } }
.desde { font-size: var(--t-s); color: var(--tinta-suave); color: rgba(244, 233, 220, 0.6); }
.frase-tempo {
  font-family: var(--f-titulo);
  font-size: 1.375rem;
  line-height: 1.45;
  max-width: 26rem;
  color: var(--creme);
  text-wrap: balance;
}

/* ---------- Carta ---------- */
.carta { background: var(--creme-papel); }
.papel { display: flex; flex-direction: column; gap: 1.35rem; font-size: 1.0625rem; line-height: 1.85; color: var(--tinta); }
.papel p:first-child::first-letter {
  font-family: var(--f-titulo);
  float: left;
  font-size: 3.6rem;
  line-height: 0.85;
  padding: 0.35rem 0.5rem 0 0;
  color: var(--vinho-claro);
}
.assinatura {
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: 2rem;
  color: var(--vinho-claro);
  align-self: flex-end;
}
.assinatura::before { content: "Com todo o meu amor,"; display: block; font-family: var(--f-texto); font-style: normal; font-size: var(--t-s); color: var(--tinta-suave); }

/* ---------- Fotos ---------- */
.retrato {
  width: min(13rem, 58vw);
  aspect-ratio: 3 / 4;
  max-width: 100%;
  border-radius: 999px 999px 1.25rem 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(201, 163, 95, 0.55);
  box-shadow: 0 0 0 8px rgba(201, 163, 95, 0.06), 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  margin-bottom: 0.5rem;
}
.retrato:empty { display: none; }
.retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

.polaroid {
  margin: 0;
  background: var(--creme-papel);
  padding: 0.5rem 0.5rem 1.6rem;
  box-shadow: 0 1px 2px rgba(59, 23, 32, 0.12), 0 14px 28px -14px rgba(59, 23, 32, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--rosa-suave); }
.polaroid figcaption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.1rem; }
.polaroid .legenda { font-family: var(--f-titulo); font-style: italic; font-size: 1.15rem; line-height: 1.2; color: var(--vinho); }
.polaroid .data-foto { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: #9a7535; }

.mural { display: flex; flex-direction: column; gap: 3.5rem; margin-top: 0.5rem; }
.mural-grupo { display: flex; flex-direction: column; gap: 1.5rem; }
.mural-titulo {
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: 1.9rem;
  color: var(--vinho-claro);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mural-titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(154, 117, 53, 0.5), transparent); }
.mural-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
@media (min-width: 720px) { .mural-grade { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; } }
.mural-grade .polaroid:nth-child(4n+1) { rotate: -2deg; }
.mural-grade .polaroid:nth-child(4n+2) { rotate: 1.5deg; margin-top: 1.25rem; }
.mural-grade .polaroid:nth-child(4n+3) { rotate: 1deg; }
.mural-grade .polaroid:nth-child(4n) { rotate: -1.5deg; margin-top: 1.25rem; }
.mural-grade .polaroid:last-child:nth-child(odd) { grid-column: 1 / -1; width: min(100%, 17rem); justify-self: center; margin-top: 0; }
@media (min-width: 720px) { .mural-grade .polaroid:last-child:nth-child(odd) { grid-column: auto; width: auto; } }

.sem-filtro { background: var(--creme); }
.varal {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem 0.25rem 1.75rem;
  margin-inline: -0.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--dourado) transparent;
}
.varal .polaroid { flex: 0 0 min(58vw, 13rem); scroll-snap-align: center; }
.varal .polaroid:nth-child(odd) { rotate: -2.5deg; }
.varal .polaroid:nth-child(even) { rotate: 2deg; }

.foto-final {
  width: min(15rem, 66vw);
  aspect-ratio: 3 / 4;
  max-width: 100%;
  border-radius: 999px 999px 1rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(201, 163, 95, 0.55);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
}
.foto-final:empty { display: none; }
.foto-final img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* ---------- Motivos ---------- */
.dica { font-size: var(--t-s); color: rgba(244, 233, 220, 0.6); }
.cartas-motivo { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin-top: 0.5rem; }
@media (min-width: 640px) { .cartas-motivo { grid-template-columns: 1fr 1fr; } }
.motivo {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  min-height: 11rem;
  border-radius: 1.25rem;
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
}
.motivo:focus-visible { outline: 2px solid var(--dourado); outline-offset: 4px; }
.motivo-giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(.2, .7, .2, 1);
}
.motivo[aria-pressed="true"] .motivo-giro { transform: rotateY(180deg); }
.face {
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  padding: 1.4rem 1.5rem;
}
.frente {
  background: linear-gradient(145deg, var(--vinho) 0%, var(--vinho-fundo) 100%);
  border: 1px solid rgba(201, 163, 95, 0.35);
  align-items: flex-end;
  justify-content: space-between;
}
.frente .indice { font-family: var(--f-titulo); font-style: italic; font-size: 2.75rem; line-height: 1; color: var(--dourado); }
.frente .abrir { font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--rosa-suave); }
.verso {
  transform: rotateY(180deg);
  background: var(--creme-papel);
  color: var(--tinta);
  align-items: center;
  font-family: var(--f-titulo);
  font-size: 1.2rem;
  line-height: 1.35;
}
.verso-miolo { display: flex; flex-direction: column; gap: 0.4rem; }
.verso-titulo { font-style: italic; font-weight: 500; font-size: 1.45rem; color: var(--vinho-claro); }
.verso-texto { color: var(--tinta); }

/* ---------- Detalhes ---------- */
.detalhes { background: var(--creme); }
.cardapio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(154, 117, 53, 0.35);
  border: 1px solid rgba(154, 117, 53, 0.35);
  border-radius: 1rem;
  overflow: hidden;
  margin-top: 0.5rem;
}
.coluna { background: var(--creme-papel); padding: 1.25rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.coluna h3 { font-family: var(--f-titulo); font-style: italic; font-size: 1.5rem; color: var(--vinho); }
.coluna ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.coluna li { font-size: var(--t-s); display: flex; gap: 0.55rem; align-items: baseline; }
.coluna li::before { content: "♥"; font-size: 0.7rem; color: var(--rosa); flex: none; }
.coluna.nao li { color: var(--tinta-suave); text-decoration: line-through; text-decoration-color: rgba(107, 30, 48, 0.55); text-decoration-thickness: 1px; }
.coluna.nao li::before { content: "×"; font-size: 0.95rem; color: var(--vinho-claro); text-decoration: none; }
.nota-mao {
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--vinho-claro);
  text-align: center;
  text-wrap: balance;
}
.pares { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin-top: 1rem; }
@media (min-width: 640px) { .pares { grid-template-columns: 1fr 1fr; } }
.par { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(154, 117, 53, 0.4); }
.par h3 { font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: #9a7535; font-weight: 500; }
.par p { color: var(--tinta); }

/* ---------- Futuro ---------- */
.futuro { background: var(--creme-papel); }
.intro { margin: 0; font-family: var(--f-titulo); font-size: 1.35rem; line-height: 1.45; color: var(--tinta); max-width: 32rem; }
.sonhos { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) { .sonhos { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.sonho { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; padding-block: 1.4rem; border-bottom: 1px solid rgba(154, 117, 53, 0.3); }
.sonho svg { width: 2.75rem; height: 2.75rem; stroke: var(--vinho-claro); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sonho h3 { font-family: var(--f-titulo); font-size: 1.5rem; line-height: 1.2; color: var(--vinho); }
.sonho p { font-size: var(--t-s); color: var(--tinta); margin-top: 0.25rem; }

/* ---------- Final ---------- */
.final {
  text-align: center;
  min-height: min(100svh, 46rem);
  display: grid;
  align-items: center;
  background:
    radial-gradient(60% 40% at 50% 50%, rgba(196, 128, 122, 0.2), transparent 70%),
    var(--vinho-fundo);
}
.final .miolo { align-items: center; }
.envelope { display: flex; flex-direction: column; align-items: center; gap: 2rem; transition: opacity 0.8s, transform 0.8s; }
.envelope .sobre { font-size: var(--t-s); letter-spacing: 0.1em; text-transform: none; font-family: var(--f-titulo); font-style: italic; font-size: 1.5rem; color: var(--rosa-suave); }
.selo {
  all: unset;
  cursor: pointer;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--vinho-claro), var(--vinho) 60%, #380c17);
  box-shadow: 0 0 0 1px rgba(201, 163, 95, 0.6), 0 0 0 10px rgba(201, 163, 95, 0.08), 0 20px 50px -10px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  transition: transform 0.4s;
  animation: respirar 3.5s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.selo:hover { transform: scale(1.04); }
.selo:focus-visible { outline: 2px solid var(--dourado); outline-offset: 6px; }
.selo-letra { font-family: var(--f-titulo); font-style: italic; font-size: 3rem; line-height: 1; color: var(--dourado-claro); }
.selo-texto { font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--rosa-suave); }
@keyframes respirar { 50% { box-shadow: 0 0 0 1px rgba(201, 163, 95, 0.8), 0 0 0 18px rgba(201, 163, 95, 0.04), 0 20px 50px -10px rgba(0, 0, 0, 0.6); } }

.mensagem-final { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.principal {
  font-family: var(--f-titulo);
  font-size: clamp(1.9rem, 7vw, 2.75rem);
  line-height: 1.2;
  color: var(--creme);
  text-wrap: balance;
}
.versos { display: flex; flex-direction: column; gap: 0.35rem; font-size: 1.0625rem; color: var(--rosa-suave); }
.versos p:last-child { color: var(--dourado-claro); font-family: var(--f-titulo); font-style: italic; font-size: 1.6rem; margin-top: 0.75rem; }
.assinatura-final { font-size: var(--t-s); color: rgba(244, 233, 220, 0.65); line-height: 1.6; }
.assinatura-final em { font-family: var(--f-titulo); font-size: 2rem; color: var(--creme); }
.mensagem-final.aparecendo > * { animation: surgir 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.mensagem-final.aparecendo > *:nth-child(2) { animation-delay: 1.2s; }
.mensagem-final.aparecendo > *:nth-child(3) { animation-delay: 2.4s; }
.mensagem-final.aparecendo > *:nth-child(4) { animation-delay: 3.4s; }
@keyframes surgir { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.rodape {
  background: var(--vinho-fundo);
  text-align: center;
  padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--dourado);
  border-top: 1px solid rgba(201, 163, 95, 0.2);
}

/* ---------- Entradas suaves ao rolar ---------- */
.js-anima .surge { opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.js-anima .surge.visivel { opacity: 1; transform: none; }


/* ---------- Brincadeiras ---------- */
.arena {
  position: relative;
  width: 100%;
  min-height: 11rem;
  border-radius: 1.25rem;
  touch-action: manipulation;
}
.arena-apagar { border: 1px dashed rgba(154, 117, 53, 0.45); display: grid; place-items: center; min-height: 18rem; }
.botao-fuga.cara-fuga { padding: 0; width: 5.5rem; height: 5.5rem; border-radius: 50%; overflow: hidden; border: 3px solid var(--dourado); box-shadow: 0 10px 24px -10px rgba(59, 23, 32, 0.6); background: var(--creme); }
.cara-fuga img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cara-fuga.desistiu { opacity: 1; animation: rir 0.6s ease-in-out 3; }
@keyframes rir { 50% { transform: rotate(-12deg) scale(1.08); } }
.botao-fuga, .botao-sim {
  font-family: var(--f-texto);
  font-size: var(--t-s);
  letter-spacing: 0.06em;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.botao-fuga { background: var(--creme-papel); color: var(--vinho); border: 1px solid var(--vinho-claro); }
.botao-fuga.solto { position: absolute; transition: left 0.35s cubic-bezier(.2, .8, .2, 1.2), top 0.35s cubic-bezier(.2, .8, .2, 1.2); }
.botao-fuga:focus-visible, .botao-sim:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
.botao-fuga.desistiu { opacity: 0.55; cursor: default; }
.recado-fuga {
  min-height: 1.6em;
  text-align: center;
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--vinho-claro);
}
.recado-fuga.grande { font-size: 1.5rem; text-wrap: balance; }

/* Quiz */
.quiz { border-top: 1px solid rgba(201, 163, 95, 0.2); }
.quiz-cartao {
  background: rgba(74, 18, 32, 0.5);
  border: 1px solid rgba(201, 163, 95, 0.35);
  border-radius: 1.5rem;
  padding: 1.6rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 19rem;
}
.quiz-cartao.entrando > * { animation: surgir 0.6s cubic-bezier(.2, .7, .2, 1) both; }
.quiz-passo { font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dourado); }
.quiz-pergunta { font-family: var(--f-titulo); font-size: 1.6rem; line-height: 1.25; color: var(--creme); text-wrap: balance; }
.quiz-opcoes { display: flex; flex-direction: column; gap: 0.6rem; }
.quiz-opcao, .quiz-denovo {
  font-family: var(--f-texto);
  font-size: var(--t-m);
  text-align: left;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(230, 195, 184, 0.35);
  background: transparent;
  color: var(--creme);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.quiz-opcao:hover:not(:disabled) { background: rgba(196, 128, 122, 0.12); border-color: var(--rosa); }
.quiz-opcao:focus-visible, .quiz-denovo:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }
.quiz-opcao.certa { background: var(--dourado); border-color: var(--dourado); color: var(--vinho-fundo); }
.quiz-opcao.errada { opacity: 0.45; text-decoration: line-through; animation: tremer 0.4s; }
.quiz-opcao:disabled { cursor: default; }
@keyframes tremer { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.quiz-recado { min-height: 1.5em; font-family: var(--f-titulo); font-style: italic; font-size: 1.25rem; }
.quiz-recado.bom { color: var(--dourado-claro); }
.quiz-recado.ruim { color: var(--rosa); }
.quiz-nota { font-family: var(--f-titulo); font-size: 4.5rem; line-height: 1; color: var(--dourado-claro); }
.quiz-resultado { font-family: var(--f-titulo); font-size: 1.6rem; line-height: 1.3; color: var(--creme); }
.quiz-denovo { align-self: flex-start; font-size: var(--t-s); text-align: center; }

/* Pergunta séria */
.pergunta { text-align: center; background: var(--creme); }
.pergunta .miolo { align-items: center; }
.pergunta-texto { font-family: var(--f-titulo); font-style: italic; font-size: clamp(2.4rem, 10vw, 3.5rem); line-height: 1.1; color: var(--vinho); }
.arena-pergunta { display: flex; justify-content: center; align-items: center; gap: 1rem; min-height: 13rem; }
.botao-sim { background: var(--vinho); color: var(--creme); border: 1px solid var(--vinho); transition: transform 0.3s; }
.botao-sim:hover { transform: scale(1.05); }
.botao-sim.escolhido { transform: scale(1.15); background: var(--dourado); border-color: var(--dourado); color: var(--vinho-fundo); }
.botao-fuga.convertido { background: var(--vinho); color: var(--creme); border-color: var(--vinho); }

/* Jogo da memória */
.jogo { background: var(--creme-papel); }
.jogo-placar { font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: #9a7535; font-variant-numeric: tabular-nums; }
.jogo-mesa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
@media (min-width: 640px) { .jogo-mesa { grid-template-columns: repeat(4, 1fr); gap: 0.85rem; } }
.carta-jogo {
  all: unset;
  box-sizing: border-box;
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 100%;
  cursor: pointer;
  perspective: 800px;
  -webkit-tap-highlight-color: transparent;
}
.carta-jogo:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; border-radius: 0.8rem; }
.carta-giro { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(.2, .7, .2, 1); }
.carta-jogo.virada .carta-giro, .carta-jogo.achada .carta-giro { transform: rotateY(180deg); }
.carta-face { position: absolute; inset: 0; border-radius: 0.8rem; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.carta-costas {
  background: radial-gradient(circle at 30% 25%, var(--vinho-claro), var(--vinho) 55%, var(--vinho-fundo));
  border: 1px solid rgba(201, 163, 95, 0.55);
  display: grid;
  place-items: center;
}
.carta-marca { font-family: var(--f-titulo); font-style: italic; font-size: clamp(0.95rem, 3.5vw, 1.3rem); color: var(--dourado-claro); }
.carta-frente { transform: rotateY(180deg); background: var(--creme); border: 3px solid var(--creme); box-shadow: 0 8px 20px -10px rgba(59, 23, 32, 0.5); }
.carta-frente img { width: 100%; height: 100%; object-fit: cover; }
.carta-jogo.achada .carta-frente { border-color: var(--dourado); animation: achou 0.6s ease; }
@keyframes achou { 50% { transform: rotateY(180deg) scale(1.06); } }
.jogo-denovo { margin-top: 0.75rem; align-self: center; color: var(--vinho); border-color: rgba(107, 30, 48, 0.4); font-style: normal; }

/* O começo */
.comeco { border-top: 1px solid rgba(201, 163, 95, 0.2); }
.comeco-corpo { display: grid; grid-template-columns: 1fr; gap: 2.25rem; align-items: center; }
@media (min-width: 720px) { .comeco-corpo { grid-template-columns: 1.1fr 1fr; } }
.bilhete { margin: 0; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.bilhete img {
  width: 100%;
  border-radius: 0.4rem;
  transform: rotate(-2deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 50px -18px rgba(0, 0, 0, 0.7);
}
.bilhete figcaption {
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: rgba(244, 233, 220, 0.7);
  padding-left: 1rem;
  border-left: 1px solid var(--dourado);
}
.comeco-texto { display: flex; flex-direction: column; gap: 1.1rem; font-size: var(--t-m); line-height: 1.8; color: var(--creme); min-width: 0; }
.comeco-texto p:last-child { font-family: var(--f-titulo); font-style: italic; font-size: 1.45rem; line-height: 1.35; color: var(--dourado-claro); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-anima .surge { opacity: 1; transform: none; }
}