/* ==================================================================
   Convite — Capitão Martim, primeiro aninho
   Tema: náutico premium · azul-marinho a dominar, dourado a marcar
   ================================================================== */

:root{
  --marinho:#0B1F4D;
  --marinho-fundo:#081A40;
  --creme:#F8F1E3;
  --creme-cartao:#FDFAF3;
  --creme-borda:rgba(11,31,77,.12);
  --branco:#FFFFFF;
  --tinta:#0B1F4D;
  --tinta-suave:#4A5B82;
  --texto-sobre-fundo:#F8F1E3;
  --texto-sobre-fundo-suave:rgba(248,241,227,.72);
  --dourado:#C58A3A;
  --dourado-vago:rgba(197,138,58,.16);
  --vermelho:#B52B2B;
  --linha:rgba(248,241,227,.16);
  --linha-clara:rgba(11,31,77,.12);
  --sombra:0 20px 46px -24px rgba(3,10,28,.6);
  --sombra-clara:0 18px 40px -22px rgba(11,31,77,.28);
  --fonte-assinatura:'Mrs Saint Delafield', cursive;
  --fonte-titulo:'Cormorant', Georgia, 'Times New Roman', serif;
  --fonte-texto:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* O tema já é escuro por natureza — o "modo escuro" aqui é o mesmo
   tema, só um pouco mais fundo, não uma paleta invertida. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --marinho:#081A40; --marinho-fundo:#061530;
    --sombra:0 20px 46px -24px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --marinho:#081A40; --marinho-fundo:#061530;
  --sombra:0 20px 46px -24px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--marinho);color:var(--texto-sobre-fundo);
  font-family:var(--fonte-texto);font-weight:300;line-height:1.7;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--fonte-titulo);font-weight:500;margin:0;}
p{margin:0;}
.wrap{max-width:620px;margin:0 auto;padding:0 28px;}
.bloco{padding:74px 0;}
.bloco-claro{background:var(--marinho-fundo);}

/* ---------- Ornamentos: aguarela por baixo, traço fino por cima ---------- */
#ornamentos .tr,.orn .tr{
  fill:none;stroke:var(--dourado);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
#ornamentos .fino,.orn .fino{stroke-width:1;opacity:.7;}
#ornamentos .cheio,.orn .cheio{fill:var(--dourado);stroke:none;}
.lav-do{fill:var(--dourado);opacity:.20;}
.orn{display:block;overflow:visible;pointer-events:none;}
.orn.claro .tr{stroke:var(--texto-sobre-fundo);}
.orn.claro .cheio{fill:var(--texto-sobre-fundo);}
.orn.claro .lav-do{fill:var(--texto-sobre-fundo);opacity:.14;}

.cercadura{width:118px;margin:12px auto 0;opacity:.85;}
.solto{position:absolute;pointer-events:none;opacity:.55;}

/* ---------- Cena: foto a sangrar ---------- */
.cena{position:relative;width:100%;min-height:86vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--marinho-fundo);}
.cena--alta{min-height:94vh;}
.cena .foto{position:absolute;top:-4%;left:0;width:100%;height:108%;object-fit:cover;object-position:50% 22%;will-change:transform;}
.cena .veu{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(6,16,38,.86) 0%,rgba(6,16,38,.46) 30%,rgba(6,16,38,.10) 60%,rgba(6,16,38,.30) 100%);}
.cena .legenda{position:relative;width:100%;padding:0 28px 52px;color:var(--texto-sobre-fundo);}
.cena .legenda h1,.cena .legenda h2{color:var(--texto-sobre-fundo);}

.f-topo .foto{object-position:50% 16%;}
.f-fecho .foto{object-position:50% 22%;}
.f-diario1 .foto{object-position:60% 45%;}
.f-diario2 .foto{object-position:50% 30%;}
.f-diario3 .foto{object-position:44% 22%;}
.f-diario4 .foto{object-position:50% 18%;}
.f-diario5 .foto{object-position:50% 30%;}
.f-diario6 .foto{object-position:46% 24%;}
.f-diario7 .foto{object-position:50% 14%;}

/* ---------- Portão: cartão de embarque ---------- */
#portao{
  position:fixed;inset:0;z-index:60;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;
  background:var(--marinho-fundo);padding:8vh 24px 24px;
  transition:opacity .9s ease .3s, visibility .9s ease .3s;
}
#portao.aberto{opacity:0;visibility:hidden;pointer-events:none;}
#portao::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(248,241,227,.05) 0px, rgba(248,241,227,.05) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, rgba(248,241,227,.05) 0px, rgba(248,241,227,.05) 1px, transparent 1px, transparent 42px);
}
.bilhete{
  position:relative;width:min(288px,82vw);background:var(--creme-cartao);color:var(--tinta);
  border-radius:14px 14px 0 0;box-shadow:var(--sombra);padding:18px 22px 14px;text-align:center;
  transition:transform .5s cubic-bezier(.22,.8,.3,1), opacity .5s ease;
}
#portao.validado .bilhete{transform:translateY(-14px) scale(.96);opacity:.55;}
.bilhete .picotado{margin:12px 0;}
.bilhete .selo{width:32px;height:32px;margin:0 auto 8px;}
.bilhete::before,.bilhete::after{
  content:'';position:absolute;top:50%;width:22px;height:22px;border-radius:50%;
  background:var(--marinho-fundo);margin-top:-11px;pointer-events:none;
}
.bilhete::before{left:-11px;}
.bilhete::after{right:-11px;}
.bilhete .picotado{
  border-top:1.5px dashed var(--creme-borda);margin:18px 0;position:relative;
}
.bilhete .selo{width:38px;height:38px;margin:0 auto 12px;color:var(--dourado);}
.bilhete .rotulo{font-size:.66rem;letter-spacing:.1em;color:var(--tinta-suave);margin-bottom:2px;}
.bilhete .nome-passageiro{font-family:var(--fonte-titulo);font-size:1.95rem;letter-spacing:.03em;margin-bottom:2px;}
.bilhete .assinatura-mini{font-family:var(--fonte-assinatura);font-size:1.75rem;color:var(--dourado);margin-top:2px;}
.bilhete .campos{display:flex;justify-content:space-between;gap:10px;font-size:.72rem;color:var(--tinta-suave);text-align:left;}
.bilhete .campos div b{display:block;font-size:.88rem;color:var(--tinta);font-weight:500;margin-top:1px;}
#portao .luz-portao{
  position:absolute;top:50%;left:50%;width:52vmax;height:52vmax;margin:-26vmax 0 0 -26vmax;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, var(--dourado) 0%, rgba(197,138,58,.35) 34%, transparent 66%);
  opacity:0;transform:scale(.1);
}
#portao.aberto .luz-portao{animation:abrirLuzDourada 1.2s cubic-bezier(.19,1,.22,1) forwards;}
@keyframes abrirLuzDourada{
  0%{opacity:0;transform:scale(.1);}
  26%{opacity:.7;}
  100%{opacity:0;transform:scale(3.4);}
}

/* ---------- Vídeo em ecrã cheio ---------- */
#palcoVideo{
  position:fixed;inset:0;z-index:70;background:#040A18;
  display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .7s ease;
}
#palcoVideo.a-mostrar{display:flex;}
#palcoVideo.visivel{opacity:1;}
#palcoVideo video{width:100%;height:100%;object-fit:cover;}
#saltarVideo{
  position:absolute;right:16px;bottom:18px;z-index:2;
  background:rgba(6,16,38,.55);color:var(--texto-sobre-fundo);border:1px solid rgba(248,241,227,.35);
  border-radius:24px;padding:9px 20px;font-family:inherit;font-size:.8rem;cursor:pointer;
}

/* ---------- Som ---------- */
#som{
  position:fixed;right:15px;bottom:15px;z-index:45;width:42px;height:42px;border-radius:50%;
  background:var(--creme-cartao);border:1px solid var(--creme-borda);box-shadow:var(--sombra-clara);
  cursor:pointer;padding:0;display:none;align-items:center;justify-content:center;
}
#som.disponivel{display:flex;}
#som svg{width:18px;height:18px;stroke:var(--marinho);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
#som.mudo .onda{opacity:.2;}

/* ---------- Entradas com vida ---------- */
.rev{opacity:0;transform:translateY(24px);transition:opacity .85s cubic-bezier(.22,.8,.3,1),transform .85s cubic-bezier(.22,.8,.3,1);transition-delay:var(--d,0s);}
.rev.visto{opacity:1;transform:none;}
.rev-esc{opacity:0;transform:scale(.94);transition:opacity .9s ease var(--d,0s),transform .9s cubic-bezier(.22,.8,.3,1) var(--d,0s);}
.rev-esc.visto{opacity:1;transform:none;}

/* ---------- Topo ---------- */
.topo .etiqueta{font-size:1.08rem;letter-spacing:.04em;color:var(--texto-sobre-fundo-suave);margin-bottom:8px;}
.topo h1{font-size:clamp(3.6rem,15vw,5.3rem);line-height:.98;text-shadow:0 4px 30px rgba(0,0,0,.5);}
.topo .selo-capitao{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--fonte-titulo);font-style:italic;font-size:1.5rem;color:var(--dourado);
}

/* ---------- Frase de abertura ---------- */
.frase{text-align:center;}
.frase .assinatura-grande{font-family:var(--fonte-assinatura);font-size:clamp(2.9rem,12vw,3.8rem);color:var(--dourado);line-height:1;margin-bottom:18px;}
.frase p{color:var(--texto-sobre-fundo-suave);max-width:36ch;margin:0 auto 14px;font-size:1.18rem;}
.frase p:last-of-type{margin-bottom:0;}

/* ---------- Diário de bordo ---------- */
.diario-intro{text-align:center;}
.diario-intro h2{font-size:clamp(2.5rem,9vw,3.3rem);margin-bottom:10px;}
.diario-intro p{color:var(--texto-sobre-fundo-suave);max-width:30ch;margin:0 auto;font-size:1.15rem;}
.fio{position:relative;}
#fioSvg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:visible;}
#fioSvg .trilho{fill:none;stroke:rgba(248,241,227,.18);stroke-width:15;stroke-linecap:round;}
#fioSvg .corda-a{fill:none;stroke:#8A6329;stroke-width:15;stroke-linecap:round;}
#fioSvg .corda-b{fill:none;stroke:var(--dourado);stroke-width:15;stroke-linecap:round;stroke-dasharray:2 13;}
#fioSvg .marcador-ancora{overflow:visible;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));}
#fioSvg .marcador-ancora .tr{stroke:var(--dourado);}
#fioSvg .marcador-ancora .cheio{fill:var(--dourado);}
.diario-cena .legenda{padding-bottom:44px;}
.diario-cena .ordem{font-family:var(--fonte-titulo);font-size:2.7rem;line-height:1;color:rgba(248,241,227,.7);}
.diario-cena .ordem span{font-size:.68rem;letter-spacing:.14em;display:block;color:var(--dourado);margin-bottom:2px;font-family:var(--fonte-texto);}

/* ---------- Registo da viagem (álbum) ---------- */
.album-bloco{text-align:center;}
.album-bloco h2{font-size:clamp(2.5rem,9vw,3.3rem);margin-bottom:8px;}
.album-bloco .dica{color:var(--texto-sobre-fundo-suave);font-size:1.1rem;margin-bottom:26px;}
.album{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 0 10px;}
.album::-webkit-scrollbar{display:none;}
.album .pagina{
  flex:0 0 76%;max-width:320px;scroll-snap-align:center;border-radius:12px;overflow:hidden;aspect-ratio:9/12;
  background:var(--creme-cartao);border:1px solid rgba(248,241,227,.14);box-shadow:0 22px 44px -24px rgba(0,0,0,.6);
  transform:scale(.94);opacity:.6;transition:transform .45s cubic-bezier(.22,.8,.3,1),opacity .45s ease;
}
.album .pagina.a-ver{transform:scale(1);opacity:1;}
.album .pagina img{width:100%;height:100%;object-fit:cover;}
.album-pontos{display:flex;justify-content:center;gap:7px;margin-top:18px;}
.album-pontos span{width:7px;height:7px;border-radius:50%;background:rgba(248,241,227,.25);transition:background .35s ease,transform .35s ease;}
.album-pontos span.aceso{background:var(--dourado);transform:scale(1.5);}

/* ---------- Toma o rumo (revelar a data) ---------- */
.rumo{text-align:center;}
.rumo h2{font-size:clamp(2.5rem,9vw,3.3rem);margin-bottom:8px;}
.rumo .sub{color:var(--texto-sobre-fundo-suave);font-size:1.12rem;margin-bottom:32px;transition:opacity .5s ease;}
.rumo .sub.pronto{opacity:0;}
.palco-rumo{position:relative;width:min(320px,88vw);margin:0 auto;}
.mar-rumo{
  position:relative;width:100%;aspect-ratio:320/150;border-radius:16px;overflow:hidden;
  background:linear-gradient(to bottom, #0F2D5E 0%, #0B1F4D 55%, #081A40 100%);
  box-shadow:var(--sombra);border:1px solid rgba(248,241,227,.14);
}
.mar-rumo svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.mar-rumo .destino{position:absolute;right:8%;top:0;bottom:0;width:2px;pointer-events:none;background:repeating-linear-gradient(to bottom,var(--dourado) 0 4px,transparent 4px 9px);opacity:.55;}
.data-chegada{
  position:absolute;left:0;right:0;top:14%;text-align:center;opacity:0;transform:translateY(8px);
  pointer-events:none;transition:opacity .8s ease,transform .8s cubic-bezier(.22,.8,.3,1);
}
.data-chegada.a-mostrar{opacity:1;transform:none;}
.data-chegada .dia{font-family:var(--fonte-titulo);font-size:2rem;color:var(--texto-sobre-fundo);line-height:1;}
.data-chegada .porto{font-size:.72rem;letter-spacing:.06em;color:var(--dourado);margin-top:3px;}
.roda-leme{
  width:132px;height:132px;margin:22px auto 0;touch-action:none;cursor:grab;position:relative;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.roda-leme:active{cursor:grabbing;}
.roda-leme svg{width:100%;height:100%;}
.roda-leme .tr{stroke:var(--dourado);}
.roda-leme .cheio{fill:var(--dourado);}
.instrucao-rumo{margin-top:14px;font-size:1.15rem;font-weight:600;letter-spacing:.02em;color:var(--dourado);transition:opacity .5s ease;}
.instrucao-rumo.pronto{opacity:0;}
.nota-teste{margin-top:18px;font-size:.72rem;color:var(--texto-sobre-fundo-suave);opacity:.7;}

/* ---------- Contagem ---------- */
.contagem{text-align:center;}
.contagem h2{font-size:clamp(1.75rem,6.5vw,2.15rem);margin-bottom:26px;}
.grelha{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;}
.cel{width:76px;padding:17px 0;border-radius:10px;background:var(--creme-cartao);border:1px solid var(--creme-borda);box-shadow:var(--sombra-clara);}
.rolo{height:2.3rem;overflow:hidden;position:relative;font-family:var(--fonte-titulo);font-size:2.05rem;line-height:2.3rem;color:var(--tinta);font-variant-numeric:tabular-nums;}
.rolo span{display:block;height:2.3rem;line-height:2.3rem;}
.rolo .sai{position:absolute;inset:0;pointer-events:none;}
.cel .et{font-size:.76rem;color:var(--tinta-suave);}

/* ---------- Itinerário de bordo ---------- */
.itinerario h2{text-align:center;font-size:clamp(2.5rem,9vw,3.3rem);margin-bottom:32px;}
.cartao-itinerario{
  background:var(--creme-cartao);border-radius:18px;padding:32px 26px 30px;position:relative;
  box-shadow:0 26px 52px -30px rgba(3,10,28,.7);color:var(--tinta);
}
.cartao-itinerario .canto{position:absolute;width:52px;opacity:.5;}
.cartao-itinerario .canto.ce{top:-14px;left:-10px;transform:rotate(-20deg);}
.cartao-itinerario .canto.cd{bottom:-12px;right:-8px;transform:rotate(160deg);}
.carris{position:relative;}
.calha{position:absolute;left:21px;top:2px;bottom:24px;width:3px;border-radius:2px;pointer-events:none;background:rgba(11,31,77,.14);}
.fita-progresso{position:absolute;left:21px;top:2px;width:3px;height:0;border-radius:2px;pointer-events:none;background:var(--dourado);transition:height .25s linear;}
.passo{position:relative;z-index:1;display:flex;gap:16px;align-items:flex-start;padding-bottom:30px;}
.passo:last-child{padding-bottom:0;}
.passo-icone{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--creme-cartao);
  opacity:0;transform:translateY(8px) scale(.9);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.3,1);
}
.passo.chegou .passo-icone{opacity:1;transform:none;}
.passo-icone .vinheta{width:36px;}
.passo-texto{flex:1;padding-top:3px;min-width:0;}
.passo .h{font-weight:600;font-size:1rem;color:var(--dourado);}
.passo .t{font-family:var(--fonte-titulo);font-size:1.75rem;margin:2px 0 4px;}
.passo .d{font-size:1.05rem;color:var(--tinta-suave);}

/* ---------- Porto de embarque ---------- */
.porto h2{text-align:center;font-size:clamp(2.5rem,9vw,3.3rem);margin-bottom:8px;}
.porto .nome-porto{text-align:center;font-family:var(--fonte-titulo);font-style:italic;color:var(--dourado);font-size:1.5rem;}
.porto .onde{text-align:center;color:var(--texto-sobre-fundo-suave);font-size:1.06rem;max-width:32ch;margin:4px auto 26px;}
.ilustracao-porto{width:100%;border-radius:14px;overflow:hidden;box-shadow:var(--sombra);border:1px solid rgba(248,241,227,.14);margin-bottom:22px;}
.ilustracao-porto svg{display:block;width:100%;height:auto;}
.cartao-mapa{
  background:var(--creme-cartao);border:1px solid var(--creme-borda);border-radius:14px;padding:17px 19px;
  display:flex;align-items:center;gap:13px;box-shadow:var(--sombra-clara);color:var(--tinta);
}
.cartao-mapa svg{width:27px;height:27px;flex-shrink:0;stroke:var(--dourado);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.cartao-mapa a{font-size:.82rem;color:var(--marinho);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Fecho ---------- */
.fecho{align-items:flex-start;padding-top:9vh;}
.fecho .legenda{padding-bottom:0;padding-top:0;text-align:center;}
.fecho .presente{font-family:var(--fonte-assinatura);font-size:clamp(2.3rem,9vw,3rem);max-width:16ch;margin:0 auto;color:var(--texto-sobre-fundo);line-height:1.15;}
.botao{
  margin-top:20px;display:inline-flex;align-items:center;gap:9px;background:var(--dourado);color:#231604;
  text-decoration:none;padding:17px 36px;border-radius:6px;font-size:1.06rem;font-weight:500;letter-spacing:.02em;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.65);transition:transform .25s ease;
}
.botao:hover{transform:translateY(-2px);}
.botao:focus-visible,a:focus-visible,.bilhete:focus-visible,.roda-leme:focus-visible,#som:focus-visible{outline:2px solid var(--texto-sobre-fundo);outline-offset:3px;}
.nota-rsvp{margin-top:8px;font-size:.74rem;color:var(--texto-sobre-fundo-suave);}
.assinatura-final{margin-top:18px;font-family:var(--fonte-assinatura);font-size:1.8rem;color:var(--dourado);}

@media (min-width:760px){
  .bloco{padding:104px 0;}
  .cena .legenda{padding:0 40px 64px;}
}
@media (prefers-reduced-motion: reduce){
  #portao,.mar-rumo,.data-chegada,.instrucao-rumo,.passo::before,.fita-progresso,#fioSvg .corda-b,.botao,.rumo .sub{transition:none;}
  #portao.aberto .luz-portao{animation:none;}
  .luz-portao{display:none;}
  .cena .foto{top:0;height:108%;transform:none !important;}
  .album .pagina{transform:none;opacity:1;}
}


/* ---------- Escada de embarque ---------- */
.escada-zona{
  margin-top:0;display:flex;flex-direction:column;align-items:center;gap:10px;
  cursor:grab;touch-action:none;padding:6px 30px 18px;
  width:min(288px,82vw);background:var(--creme-cartao);border-radius:0 0 14px 14px;
  box-shadow:var(--sombra);
}
.escada-zona:active{cursor:grabbing;}
.escada-svg{width:148px;height:auto;overflow:visible;}
.escada-svg .corrimao{fill:none;stroke:var(--dourado);stroke-width:3;stroke-linecap:round;opacity:.85;}
.escada-svg .degrau{stroke:var(--texto-sobre-fundo-suave);stroke-width:4;stroke-linecap:round;transition:stroke .35s ease,opacity .35s ease;opacity:.55;}
.escada-svg .degrau.pisado{stroke:var(--dourado);opacity:1;}
.instrucao-escada{font-size:1.02rem;font-weight:600;color:#8A5A1E;transition:opacity .4s ease;}
.instrucao-escada.pronto{opacity:0;}