:root{
  --noite-profunda:#05060f;
  --noite:#0b0d26;
  --anil:#141433;
  --crepusculo:#281a4e;
  --horizonte:#3a1f47;
  --ambar:#ffb35c;
  --ouro:#f5d490;
  --rosa:#ff7a8a;
  --creme:#f3ead8;
  --creme-suave:rgba(243,234,216,.72);
  --papel:#f6edd9;
  --tinta:#3d2c2a;
  --serif-display:"Fraunces",serif;
  --serif-texto:"Newsreader",serif;
  --mono:"IBM Plex Mono",monospace;
  --manuscrita:"Caveat",cursive;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;background:var(--noite-profunda)}
body{
  background:var(--noite-profunda);
  color:var(--creme);
  font-family:var(--serif-texto);
  font-size:clamp(17px,2.2vw,20px);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--ambar);color:var(--noite-profunda)}
.icone{
  display:inline-block;width:1em;height:1em;
  stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-.12em;
}
.icone-cheio{fill:currentColor;stroke:none}
/* elementos animados nascem ocultos no primeiro paint (sem flash antes do GSAP);
   a classe .js garante que sem JavaScript tudo continua visível */
.js .anima{opacity:0}

/* ---------- céu (camadas fixas) ---------- */
.ceu{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ceu-gradiente{
  position:absolute;left:0;right:0;bottom:0;height:620vh;
  background:linear-gradient(to top,
    var(--horizonte) 0%,
    var(--crepusculo) 9%,
    var(--anil) 26%,
    var(--noite) 55%,
    var(--noite-profunda) 100%);
  will-change:transform;
}
.horizonte-brilho{
  position:absolute;left:50%;bottom:-22vh;width:160vw;height:60vh;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(255,179,92,.42) 0%,rgba(255,122,138,.14) 42%,transparent 70%);
  will-change:opacity,transform;
}
#estrelas{position:absolute;inset:0;width:100%;height:100%;opacity:.12;will-change:opacity}
.lua{
  position:absolute;top:3vh;right:4vw;width:min(11vw,84px);height:min(11vw,84px);
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fffaf0,#f0e2bd 60%,#d9c89a);
  box-shadow:0 0 40px 12px rgba(245,212,144,.25),0 0 120px 40px rgba(245,212,144,.10);
  opacity:0;will-change:opacity;
}
.nuvem{
  position:absolute;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(243,234,216,.10) 0%,rgba(243,234,216,.05) 45%,transparent 70%);
  filter:blur(6px);
  pointer-events:none;
}
.meteoro{
  position:absolute;top:0;left:0;height:1.5px;border-radius:2px;
  background:linear-gradient(to left,rgba(255,250,240,.95),rgba(245,212,144,.4),transparent);
  filter:drop-shadow(0 0 4px rgba(245,212,144,.5));
  opacity:0;pointer-events:none;will-change:transform,opacity;
}

/* skyline Recife */
.skyline{
  position:fixed;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  will-change:transform,opacity;
}
.skyline svg{display:block;width:100%;height:auto}

/* balão */
.balao{
  position:fixed;left:7vw;bottom:13vh;z-index:2;
  width:clamp(78px,13vw,130px);
  pointer-events:none;
  will-change:transform,opacity;
  filter:drop-shadow(0 6px 24px rgba(255,179,92,.18));
}
.balao-flutua{animation:flutuar 5.2s ease-in-out infinite}
/* faixa rebocada pelo balão (easter egg: 3 toques) */
.faixa-balao{
  position:absolute;left:94%;top:36%;
  display:flex;align-items:center;
  transform-origin:left center;transform:scaleX(0);
  pointer-events:none;
}
.faixa-balao .corda{width:20px;flex:none;border-top:1.5px solid rgba(243,234,216,.55)}
.faixa-balao .pano{
  background:var(--papel);color:var(--tinta);
  font-family:var(--manuscrita);font-size:clamp(1.05rem,3.2vw,1.35rem);
  padding:.3em .8em;border-radius:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  white-space:nowrap;
}
.faixa-balao .pano .icone{color:#d4505f}
/* lua tocável: um blush sutil, não uma troca de cor */
.lua::after{
  content:"";position:absolute;inset:-4%;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,rgba(255,160,175,.5),rgba(255,122,138,.16) 60%,transparent 78%);
  opacity:0;transition:opacity 1.6s ease;
}
.lua{transition:box-shadow 1.6s ease}
.lua.rosada::after{opacity:.55}
.lua.rosada{box-shadow:0 0 44px 14px rgba(255,160,170,.22),0 0 120px 40px rgba(245,212,144,.10)}
.frase-da-lua{
  position:fixed;z-index:48;pointer-events:none;
  font-family:var(--serif-display);font-style:italic;font-weight:340;
  font-size:clamp(.85rem,2.6vw,1rem);color:var(--creme);
  text-shadow:0 1px 14px rgba(5,6,15,.95);
  /* vinheta difusa: o céu escurece de leve atrás das palavras */
  background:radial-gradient(ellipse at center,rgba(5,6,15,.82) 30%,rgba(5,6,15,.4) 65%,transparent 100%);
  padding:.45em 1.4em;border-radius:999px;
  opacity:0;white-space:nowrap;
}
@keyframes flutuar{
  0%,100%{transform:translateY(0) rotate(-1.6deg)}
  50%{transform:translateY(-14px) rotate(1.8deg)}
}

/* ---------- navegação: altímetro + trilho de capítulos ---------- */
.altimetro{
  position:fixed;z-index:70;
  top:calc(14px + env(safe-area-inset-top, 0px));
  left:calc(14px + env(safe-area-inset-left, 0px));
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--creme-suave);
  background:rgba(11,13,38,.62);
  border:1px solid rgba(243,234,216,.16);
  backdrop-filter:blur(8px);
  border-radius:8px;padding:.45em .8em;
  display:flex;align-items:center;gap:.6em;
  opacity:0;transition:opacity .6s ease;
}
.altimetro.visivel{opacity:1}
.altimetro .icone{color:var(--ouro);font-size:13px}
.altimetro b{font-weight:500;color:var(--ouro);font-variant-numeric:tabular-nums}

.trilho{
  position:fixed;top:50%;transform:translateY(-50%);z-index:70;
  right:max(14px, env(safe-area-inset-right, 0px));
  display:flex;flex-direction:column;align-items:flex-end;gap:18px;
}
.trilho a{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--creme-suave);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:lowercase;
}
.trilho a .rotulo-cap{
  opacity:0;transform:translateX(6px);
  transition:opacity .3s ease,transform .3s ease;
  background:rgba(11,13,38,.78);border:1px solid rgba(243,234,216,.14);
  border-radius:6px;padding:.3em .7em;backdrop-filter:blur(8px);
  white-space:nowrap;
}
.trilho a:hover .rotulo-cap{opacity:1;transform:translateX(0)}
.trilho a .ponto{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:transparent;border:1.5px solid rgba(243,234,216,.45);
  transition:all .35s ease;
}
.trilho a.ativo .ponto{
  background:var(--ouro);border-color:var(--ouro);
  box-shadow:0 0 12px 2px rgba(245,212,144,.45);
  transform:scale(1.25);
}
.trilho a.ativo .rotulo-cap{opacity:1;transform:translateX(0);color:var(--ouro)}

/* ---------- conteúdo ---------- */
main{position:relative;z-index:3}
.secao{
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:16vh 7vw;
  text-align:center;
}
.kicker{
  font-family:var(--mono);
  letter-spacing:.22em;text-transform:uppercase;
  font-size:clamp(10px,1.5vw,12px);
  color:var(--ambar);
}
h1{
  font-family:var(--serif-display);
  font-weight:380;
  font-size:clamp(3.2rem,13vw,8rem);
  line-height:.98;
  letter-spacing:-.018em;
  margin:.32em 0 .2em;
  font-variation-settings:"opsz" 144;
}
h1 em{font-style:italic;color:var(--ouro)}
.dedicatoria{
  font-family:var(--serif-display);
  font-style:italic;font-weight:340;
  font-size:clamp(1.3rem,4vw,1.9rem);
  color:var(--creme-suave);
}
#cta-voar{
  margin-top:3em;
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:clamp(.8rem,2.4vw,.9rem);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--noite-profunda);
  background:linear-gradient(135deg,var(--ouro),var(--ambar));
  border:none;border-radius:999px;
  padding:1.1em 2.1em;cursor:pointer;
  box-shadow:0 10px 38px rgba(255,179,92,.32);
  transition:transform .25s ease,box-shadow .25s ease;
}
#cta-voar:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(255,179,92,.5)}
#cta-voar:active{transform:scale(.97)}
.instrucao{
  margin-top:1.8em;
  font-style:italic;color:var(--creme-suave);
  font-size:clamp(.92rem,2.4vw,1.02rem);
}
.prosa{
  max-width:36ch;
  font-size:clamp(1.25rem,3.6vw,1.7rem);
  font-weight:340;
}
.prosa em{font-style:italic;color:var(--ouro)}

/* ---------- momentos (polaroids) ---------- */
.momento-inner{
  display:flex;align-items:center;gap:clamp(1.6rem,5vw,4rem);
  max-width:880px;width:100%;
}
.momento-inner.invertido{flex-direction:row-reverse}
.polaroid{
  flex:0 0 clamp(150px,32vw,260px);
  background:var(--papel);
  padding:10px 10px 40px;
  border-radius:3px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  transform:rotate(-3.5deg);
  position:relative;
}
.momento-inner.invertido .polaroid{transform:rotate(3deg)}
.polaroid .moldura{
  aspect-ratio:4/5;overflow:hidden;border-radius:2px;
  background:linear-gradient(160deg,var(--crepusculo),var(--anil));
  display:flex;align-items:center;justify-content:center;
}
.polaroid img{width:100%;height:100%;object-fit:cover;display:block}
.polaroid .icone-fallback{display:none;width:54px;height:54px;color:var(--ouro);opacity:.9}
.polaroid.sem-foto img{display:none}
.polaroid.sem-foto .icone-fallback{display:block}
.polaroid .legenda{
  position:absolute;left:0;right:0;bottom:8px;
  font-family:var(--manuscrita);font-size:1.25rem;color:var(--tinta);
  text-align:center;
}
.momento-texto{flex:1;text-align:left}
.momento-inner.invertido .momento-texto{text-align:right}
.data{
  font-family:var(--mono);
  letter-spacing:.2em;text-transform:uppercase;
  font-size:clamp(10px,1.5vw,12px);color:var(--rosa);
}
.momento-texto h2{
  font-family:var(--serif-display);font-weight:420;
  font-size:clamp(1.7rem,5.6vw,2.7rem);
  line-height:1.1;margin:.3em 0 .4em;
}
.momento-texto p{
  color:var(--creme-suave);
  font-size:clamp(1.02rem,2.8vw,1.2rem);
  max-width:38ch;
}
.momento-inner.invertido .momento-texto p{margin-left:auto}

/* polaroid clicável (carta de ano novo) */
.polaroid.clicavel{cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.polaroid.clicavel:hover{transform:rotate(1deg) translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.6)}

/* ---------- modal da carta de ano novo ---------- */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:max(3vw,14px)}
.modal[hidden]{display:none}
.modal-fundo{position:absolute;inset:0;background:rgba(5,6,15,.82);backdrop-filter:blur(8px)}
.modal-papel{
  position:relative;
  background:var(--papel);color:var(--tinta);
  max-width:660px;width:100%;max-height:88dvh;
  overflow-y:auto;overscroll-behavior:contain;
  border-radius:6px;
  padding:clamp(1.8rem,5vw,3.4rem) clamp(1.4rem,4.5vw,3rem);
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.modal-papel::-webkit-scrollbar{width:8px}
.modal-papel::-webkit-scrollbar-thumb{background:rgba(61,44,42,.3);border-radius:4px}
.modal-cabecalho{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:1.6em;
}
.modal-cabecalho .kicker{color:#8a4a3d}
.modal-cabecalho h3{
  font-family:var(--serif-display);font-weight:420;
  font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.1;
  margin-top:.3em;
}
#fechar-modal{
  flex:none;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(61,44,42,.3);
  background:none;color:var(--tinta);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  transition:background .25s ease,transform .25s ease;
}
#fechar-modal:hover{background:rgba(61,44,42,.08);transform:rotate(90deg)}
.modal-papel p{
  font-size:clamp(1rem,2.8vw,1.15rem);
  line-height:1.8;margin-bottom:1.05em;
}
.modal-papel p.estrofe{font-style:italic;color:#5c423e}
.modal-papel p em{color:#8a4a3d}
.modal-papel .assinatura{
  font-family:var(--manuscrita);
  font-size:clamp(1.8rem,5.5vw,2.4rem);
  color:#8a4a3d;margin-top:1em;
  transform:rotate(-2deg);display:inline-block;
}

/* ---------- da carta de ano novo (trechos) ---------- */
.trecho{
  position:relative;
  max-width:760px;width:100%;
}
.trecho .aspas{
  position:absolute;top:-.55em;left:50%;transform:translateX(-50%);
  font-family:var(--serif-display);font-weight:600;font-style:italic;
  font-size:clamp(5rem,16vw,9rem);line-height:1;
  color:var(--ouro);opacity:.16;
  pointer-events:none;user-select:none;
}
.trecho blockquote{
  font-family:var(--serif-display);
  font-style:italic;font-weight:340;
  font-size:clamp(1.6rem,5.4vw,2.9rem);
  line-height:1.28;
  text-wrap:balance;
}
.trecho blockquote strong{font-weight:480;color:var(--ouro);font-style:italic}
.trecho .origem{
  display:block;margin-top:1.6em;
  font-family:var(--mono);font-style:normal;
  letter-spacing:.22em;text-transform:lowercase;
  font-size:clamp(10px,1.5vw,11px);color:var(--creme-suave);
}
.trecho .origem b{color:var(--ambar);font-weight:500}

.lugar{
  font-family:var(--serif-display);
  font-style:italic;font-weight:300;
  font-size:clamp(2.8rem,11vw,6.5rem);
  line-height:1.08;
  color:var(--ouro);
  text-wrap:balance;
}
.lugar .palavra{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(6px)}

/* ---------- o pedido ---------- */
.pedido-frase{
  font-family:var(--serif-display);font-style:italic;font-weight:320;
  font-size:clamp(1.6rem,5.4vw,2.8rem);
  color:var(--creme);
}
.pedido-data{
  font-family:var(--serif-display);font-weight:560;
  font-size:clamp(3.4rem,15vw,9rem);
  line-height:1;letter-spacing:-.01em;
  margin:.25em 0 .3em;
  color:var(--ouro);
  text-shadow:0 0 80px rgba(245,212,144,.35);
  font-variant-numeric:tabular-nums;
}
.pedido-eco{
  font-family:var(--serif-display);font-style:italic;font-weight:340;
  font-size:clamp(1.5rem,5vw,2.5rem);
  color:var(--rosa);
}
.pedido-sim{
  margin-top:2.4em;
  font-family:var(--manuscrita);
  font-size:clamp(1.6rem,5.5vw,2.4rem);
  color:var(--creme-suave);
  transform:rotate(-2deg);
}

/* ---------- contador ---------- */
.contador-wrap{max-width:720px}
.contador-titulo{
  font-family:var(--serif-display);font-weight:340;font-style:italic;
  font-size:clamp(1.4rem,4.4vw,2.1rem);
}
.contador{
  margin:1.2em 0 .6em;
  display:flex;align-items:baseline;justify-content:center;gap:.18em;
  flex-wrap:wrap;
}
.contador .num{
  font-family:var(--serif-display);font-weight:480;
  font-size:clamp(4rem,16vw,8.5rem);
  line-height:1;color:var(--ouro);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 60px rgba(245,212,144,.25);
}
.contador .rotulo{
  font-style:italic;
  font-size:clamp(1.1rem,3.4vw,1.6rem);color:var(--creme-suave);
}
.relogio{
  font-family:var(--mono);font-weight:400;
  font-size:clamp(1.1rem,4vw,1.7rem);
  color:var(--rosa);letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}
.desde{
  margin-top:1.6em;font-style:italic;color:var(--creme-suave);
  font-size:clamp(.95rem,2.6vw,1.1rem);
}
#constelacao{margin-top:3rem;width:min(78vw,360px);height:auto;overflow:visible;outline:none;user-select:none}
#constelacao:focus{outline:none}
#constelacao .traco{
  fill:none;stroke:var(--ouro);stroke-width:1.1;opacity:.65;
  stroke-dasharray:1200;stroke-dashoffset:1200;
}
#constelacao .estrela-c{fill:#fffaf0;opacity:0}
.constelacao-legenda{
  margin-top:.8rem;
  font-family:var(--mono);font-size:clamp(9px,2vw,11px);
  letter-spacing:.18em;color:var(--creme-suave);
}

/* ---------- carta ---------- */
.secao-carta{padding-top:8vh}
.carta{
  background:var(--papel);
  color:var(--tinta);
  max-width:620px;width:100%;
  padding:clamp(2rem,6vw,3.6rem) clamp(1.6rem,5.5vw,3.2rem);
  border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.06) inset;
  transform:rotate(-1.2deg);
  text-align:left;
  position:relative;
}
.carta::before{
  content:"";position:absolute;inset:10px;
  border:1px solid rgba(61,44,42,.18);border-radius:2px;pointer-events:none;
}
.carta .selo{
  position:absolute;top:-22px;right:26px;
  width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff9aa6,var(--rosa) 65%,#d4505f);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;transform:rotate(8deg);
  color:#f6edd9;
}
.carta p{
  font-size:clamp(1.05rem,2.9vw,1.25rem);
  line-height:1.75;margin-bottom:1.1em;
}
.carta p em{color:#8a4a3d}
.carta .assinatura{
  font-family:var(--manuscrita);
  font-size:clamp(1.9rem,6vw,2.6rem);
  color:#8a4a3d;margin-top:1.2em;margin-bottom:0;
  transform:rotate(-2deg);display:inline-block;
}
.coracao-assinatura{color:#d4505f;font-size:.75em}

/* ---------- final ---------- */
.secao-final{min-height:92vh;min-height:92svh}
.final-frase{
  font-family:var(--serif-display);font-style:italic;font-weight:320;
  font-size:clamp(1.9rem,7vw,3.6rem);
  max-width:18ch;text-wrap:balance;line-height:1.18;
}
.final-frase em{color:var(--ouro)}
#botao-mimo{
  margin-top:2.6em;
  font-family:var(--serif-texto);font-style:italic;
  font-size:clamp(1rem,3vw,1.15rem);
  color:var(--noite-profunda);
  background:linear-gradient(135deg,var(--ouro),var(--ambar));
  border:none;border-radius:999px;
  padding:.9em 1.8em;cursor:pointer;
  box-shadow:0 10px 34px rgba(255,179,92,.3);
  transition:transform .25s ease,box-shadow .25s ease;
}
#botao-mimo:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 44px rgba(255,179,92,.45)}
#botao-mimo:active{transform:scale(.97)}
.coracao-voa{
  position:fixed;z-index:97;pointer-events:none;  /* acima do overlay da jornada 2 */
  width:26px;height:26px;will-change:transform,opacity;
}
.coracao-voa .icone{width:100%;height:100%}
footer{
  position:relative;z-index:3;
  text-align:center;padding:4vh 6vw 6vh;
  font-style:italic;color:rgba(243,234,216,.45);
  font-size:clamp(.8rem,2.2vw,.9rem);
}
footer .jr{font-family:var(--serif-display);color:var(--creme-suave);font-size:1.05em}
.reiniciar{
  margin-top:1.6em;
  display:inline-flex;align-items:center;gap:.55em;
  background:none;border:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:lowercase;
  color:rgba(243,234,216,.4);
  border-bottom:1px dashed rgba(243,234,216,.25);
  padding-bottom:.4em;
  transition:color .25s ease,border-color .25s ease;
}
.reiniciar:hover{color:var(--ouro);border-color:var(--ouro)}

/* ---------- player ---------- */
#player{
  position:fixed;z-index:60;
  right:calc(16px + env(safe-area-inset-right, 0px));
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:center;gap:.6em;
  background:rgba(11,13,38,.78);
  border:1px solid rgba(243,234,216,.18);
  backdrop-filter:blur(10px);
  border-radius:999px;padding:.5em .95em .5em .55em;
  color:var(--creme);cursor:pointer;
  font-family:var(--serif-texto);font-style:italic;
  font-size:clamp(.85rem,2.4vw,.95rem);
  transition:border-color .25s ease,transform .25s ease;
}
#player:hover{border-color:var(--ouro);transform:translateY(-2px)}
#player #player-rotulo{
  max-width:200px;overflow:hidden;white-space:nowrap;
  transition:max-width .45s ease,opacity .45s ease,margin .45s ease;
}
#player.recolhido{padding:.5em .55em}
#player.recolhido #player-rotulo{max-width:0;opacity:0;margin:0}
#player .vinil{
  width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at center,var(--ouro) 0 17%,#171530 18% 44%,#23204a 45% 48%,#171530 49% 100%);
  border:1px solid rgba(243,234,216,.25);
  flex:none;
}
#player.tocando .vinil{animation:girar 2.4s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
#aviso-musica{
  position:fixed;z-index:60;
  right:calc(16px + env(safe-area-inset-right, 0px));
  bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  max-width:280px;background:rgba(11,13,38,.92);
  border:1px solid rgba(255,122,138,.4);border-radius:12px;
  padding:.8em 1em;font-size:.85rem;font-style:italic;
  color:var(--creme-suave);display:none;
}

/* ---------- modo "slides" no touch ---------- */
@media (pointer:coarse){
  html{scroll-snap-type:y proximity}      /* no html (root scroller), não no body */
  .secao{scroll-snap-align:start}
  .secao-carta{scroll-snap-align:none}    /* carta longa: rolagem livre */

  /* afastada da borda esquerda (gesto "voltar" do iOS) e limitada pra não
     invadir o conteúdo em tablets */
  .tap-zonas{position:fixed;top:16vh;bottom:24vh;left:14px;right:0;z-index:40;display:flex;justify-content:space-between;pointer-events:none}
  .tap-zonas button{
    pointer-events:auto;border:0;background:transparent;
    width:clamp(24px,11vw,48px);height:100%;
    -webkit-tap-highlight-color:transparent;cursor:pointer;
    touch-action:manipulation;
  }
  /* no touch o trilho vira indicador de progresso (alvos de 7px não são tocáveis) */
  .trilho{pointer-events:none}
}
@media (pointer:fine){
  .tap-zonas{display:none}
}

@media (prefers-reduced-motion:reduce){
  .balao-flutua{animation:none}
}
@media (max-width:640px){
  .momento-inner,.momento-inner.invertido{flex-direction:column;gap:2.2rem;text-align:center}
  .momento-texto,.momento-inner.invertido .momento-texto{text-align:center}
  .momento-texto p,.momento-inner.invertido .momento-texto p{margin:0 auto}
  .balao{left:-16px;bottom:4vh;width:62px;opacity:.92}
  .lua{width:50px;height:50px;top:2.5vh}
  .trilho{right:8px;gap:14px}
  .trilho a .rotulo-cap{display:none}
  .altimetro{top:10px;left:10px;font-size:10px}
}