/* ==================================================================
   Convite — Alicia Maria, primeiro aninho
   Fotografia a sangrar · fita como fio condutor · rosa antigo e sálvia
   ================================================================== */

:root{
  --fundo:#F7EDE8;
  --cartao:#FDF8F4;
  --cartao-borda:rgba(74,53,64,.10);
  --tinta:#4A3540;
  --tinta-suave:#8A6E77;
  --rosa:#C97B92;
  --rosa-claro:#F2DCE2;
  --rosa-vago:rgba(201,123,146,.14);
  --verde:#7E9B76;
  --dourado:#BD9142;
  --linha:rgba(74,53,64,.14);
  --sombra:0 18px 40px -22px rgba(74,53,64,.32);
  --fonte-titulo:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fonte-texto:'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fundo:#241A1F; --cartao:#2E2228; --cartao-borda:rgba(247,237,232,.10);
    --tinta:#F6E8EC; --tinta-suave:#C9AEB8; --rosa:#E5A0B4; --rosa-claro:#4A3038;
    --rosa-vago:rgba(229,160,180,.16); --verde:#A6BE9D; --dourado:#D9B36A; --linha:rgba(247,237,232,.16);
    --sombra:0 18px 40px -22px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --fundo:#241A1F; --cartao:#2E2228; --cartao-borda:rgba(247,237,232,.10);
  --tinta:#F6E8EC; --tinta-suave:#C9AEB8; --rosa:#E5A0B4; --rosa-claro:#4A3038;
  --rosa-vago:rgba(229,160,180,.16); --verde:#A6BE9D; --dourado:#D9B36A; --linha:rgba(247,237,232,.16);
  --sombra:0 18px 40px -22px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--fundo);color:var(--tinta);
  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:72px 0;}

/* ---------- Cena: foto a sangrar ---------- */
.cena{
  position:relative;width:100%;min-height:86vh;
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--tinta);
}
.cena--alta{min-height:94vh;}
.cena .foto{
  position:absolute;top:-4%;left:0;width:100%;height:108%;
  object-fit:cover;object-position:50% 24%;will-change:transform;
}
.cena .veu{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(36,22,28,.82) 0%,
    rgba(36,22,28,.44) 30%,
    rgba(36,22,28,.06) 60%,
    rgba(36,22,28,.24) 100%);
}
.cena .legenda{position:relative;width:100%;padding:0 28px 52px;color:#FFF6F1;}
.cena .legenda h1,.cena .legenda h2{color:#FFF6F1;}

/* ---------- Abertura ---------- */
#portao{
  position:fixed;inset:0;z-index:60;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  text-align:center;padding:24px;background:var(--tinta);
  transition:opacity 1s ease .35s, visibility 1s ease .35s;
}
#portao.aberto{opacity:0;visibility:hidden;pointer-events:none;}
#portao .fundo-capa,#portao #videoCapa{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
#portao #videoCapa{display:none;}
#portao.tem-video #videoCapa{display:block;}
#portao.tem-video .fundo-capa{display:none;}
#portao .veu-portao{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 50% 46%, rgba(36,22,28,.28) 0%, rgba(36,22,28,.74) 74%);
}
.luz{
  position:absolute;top:50%;left:50%;z-index:2;
  width:42vmax;height:42vmax;margin:-21vmax 0 0 -21vmax;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, var(--rosa) 0%, var(--rosa-claro) 36%, transparent 68%);
  opacity:0;transform:scale(.1);
}
#portao.aberto .luz{animation:abrirLuz 1.3s cubic-bezier(.19,1,.22,1) forwards;}
@keyframes abrirLuz{
  0%{opacity:0;transform:scale(.1);}
  26%{opacity:.9;}
  100%{opacity:0;transform:scale(3.8);}
}
.laco-portao{width:190px;height:230px;position:relative;z-index:3;cursor:grab;touch-action:none;}
.laco-portao:active{cursor:grabbing;}
.laco-portao svg{width:100%;height:100%;overflow:visible;}
.laco-portao .fita{stroke:#FFF6F1;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.laco-portao .no{fill:#FFF6F1;}
/* o laco do portao e comandado por JS enquanto se puxa */
#portao .puxa{font-size:.98rem;color:rgba(255,246,241,.72);position:relative;z-index:3;
  transition:opacity .4s ease;}
#portao .puxa.fora{opacity:0;}

/* ---- Vídeo em ecra cheio depois de desatar ---- */
#palcoVideo{
  position:fixed;inset:0;z-index:70;background:#241A1F;
  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(36,22,28,.55);color:#FFF6F1;border:1px solid rgba(255,246,241,.35);
  border-radius:24px;padding:9px 20px;font-family:inherit;font-size:.8rem;cursor:pointer;
}
#portao .nome-portao{
  font-family:var(--fonte-titulo);font-size:clamp(2.6rem,12vw,3.8rem);
  line-height:1.04;color:#FFF6F1;position:relative;z-index:3;
  text-shadow:0 4px 30px rgba(36,22,28,.55);
}
#portao .pista{font-size:.8rem;color:rgba(255,246,241,.78);position:relative;z-index:3;}

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

/* ---------- Topo ---------- */
.topo .etiqueta{font-size:1rem;color:rgba(255,246,241,.85);margin-bottom:8px;}
.topo h1{font-size:clamp(3.4rem,15vw,5.4rem);line-height:.96;text-shadow:0 4px 34px rgba(36,22,28,.5);}
.topo .aninho{font-family:var(--fonte-titulo);font-style:italic;font-size:clamp(1.5rem,5.5vw,1.9rem);color:rgba(255,246,241,.9);margin-top:8px;}

/* ---------- Frase ---------- */
.frase{text-align:center;}
.frase .destaque{
  font-family:var(--fonte-titulo);font-size:clamp(2.1rem,8vw,2.9rem);
  color:var(--verde);line-height:1.28;margin-bottom:20px;
}
.frase p{color:var(--tinta-suave);max-width:34ch;margin:0 auto;font-size:1.14rem;}

/* ---------- O primeiro ano ---------- */
.ano-intro{text-align:center;}
.ano-intro h2{font-size:clamp(2.2rem,8vw,3rem);margin-bottom:14px;}
.ano-intro p{color:var(--tinta-suave);max-width:28ch;margin:0 auto;font-size:1.12rem;}

.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(255,246,241,.18);stroke-width:17;stroke-linecap:round;}
#fioSvg .cetim{fill:none;stroke:url(#brilhoFita);stroke-width:17;stroke-linecap:round;}
#fioSvg .vinco{fill:none;stroke:rgba(255,255,255,.40);stroke-width:2.6;stroke-linecap:round;}
#fioSvg .borda{fill:none;stroke:rgba(122,58,80,.30);stroke-width:17;stroke-linecap:round;}
#fioSvg .lacinho{stroke:#F6D3DE;fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 3px 8px rgba(60,20,35,.5));}
#fioSvg .lacinho-no{fill:#F6D3DE;stroke:none;}
.ano-cena{min-height:78vh;}
.ano-cena .legenda{padding-bottom:42px;}
.ano-cena .ordem{font-family:var(--fonte-titulo);font-size:3.4rem;line-height:1;color:rgba(255,246,241,.72);
  text-shadow:0 3px 20px rgba(36,22,28,.6);}

/* ---------- Tira ---------- */
.tira{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.tira figure{margin:0;border-radius:10px;overflow:hidden;aspect-ratio:9/14;
  border:1px solid var(--cartao-borda);background:var(--cartao);box-shadow:var(--sombra);}
.tira img{width:100%;height:100%;object-fit:cover;}

/* ---------- Data: puxar a fita ---------- */
.data{text-align:center;}
.data h2{font-size:clamp(2.2rem,8vw,2.9rem);margin-bottom:10px;}
.data .sub{color:var(--tinta-suave);font-size:1.06rem;margin-bottom:28px;transition:opacity .5s ease;}
.data .sub.pronto{opacity:0;}
.palco-laco{
  position:relative;width:min(318px,86vw);aspect-ratio:318/204;margin:0 auto;
  border-radius:16px;background:var(--cartao);
  border:1px solid var(--cartao-borda);box-shadow:var(--sombra);overflow:hidden;
  transition:box-shadow 1s ease, transform 1s cubic-bezier(.22,.8,.3,1);
}
.palco-laco.desatado{
  box-shadow:0 22px 46px -20px rgba(201,123,146,.45), 0 0 0 1px var(--rosa-vago);
  transform:translateY(-3px);
}
.data-por-baixo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.data-por-baixo .dia{
  font-family:var(--fonte-titulo);font-size:clamp(2.3rem,11vw,3rem);color:var(--rosa);line-height:1;
  transform:scale(.94);opacity:.22;
  transition:transform 1.1s cubic-bezier(.22,.8,.3,1), opacity .8s ease, text-shadow 1.1s ease;
}
.desatado .data-por-baixo .dia{transform:scale(1);opacity:1;text-shadow:0 0 26px rgba(201,123,146,.3);}
.data-por-baixo .mes-ano{font-size:.86rem;color:var(--tinta-suave);opacity:.22;transition:opacity .8s ease .1s;}
.desatado .data-por-baixo .mes-ano{opacity:1;}
.data-por-baixo .hora{font-size:.8rem;color:var(--verde);opacity:.22;transition:opacity .8s ease .2s;}
.desatado .data-por-baixo .hora{opacity:1;}
#cobertura,#migalhas{position:absolute;inset:0;width:100%;height:100%;}
#cobertura{touch-action:none;cursor:pointer;}
#migalhas{pointer-events:none;}
.nota-teste{margin-top:16px;font-size:.74rem;color:var(--tinta-suave);opacity:.75;}

/* ---------- Contagem ---------- */
.contagem{text-align:center;}
.contagem h2{font-size:clamp(1.9rem,7vw,2.4rem);margin-bottom:28px;}
.grelha{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;}
.cel{width:78px;padding:17px 0;border-radius:12px;background:var(--cartao);
  border:1px solid var(--cartao-borda);box-shadow:var(--sombra);}
.rolo{height:2.35rem;overflow:hidden;position:relative;
  font-family:var(--fonte-titulo);font-size:2.1rem;line-height:2.35rem;
  color:var(--tinta);font-variant-numeric:tabular-nums;}
.rolo span{display:block;height:2.35rem;line-height:2.35rem;}
.rolo .sai{position:absolute;inset:0;}
.cel .et{font-size:.74rem;color:var(--tinta-suave);}

/* ---------- Programa ---------- */
.programa h2{text-align:center;font-size:clamp(2.2rem,8vw,2.9rem);margin-bottom:36px;}
.cartao-programa{
  background:var(--cartao);border:1px solid var(--cartao-borda);
  border-radius:18px;padding:30px 24px 28px;
  box-shadow:0 26px 52px -30px rgba(74,53,64,.55);
  position:relative;
}
.cartao-programa .canto{position:absolute;width:56px;opacity:.5;}
.cartao-programa .canto.ce{top:-14px;left:-10px;transform:rotate(-26deg);}
.cartao-programa .canto.cd{bottom:-12px;right:-8px;transform:rotate(154deg);}

.carris{position:relative;padding-left:64px;}
.calha{
  position:absolute;left:46px;top:6px;bottom:12px;width:5px;border-radius:3px;
  background:linear-gradient(to right,
    rgba(122,58,80,.18) 0%, var(--rosa-vago) 34%, rgba(255,255,255,.5) 52%,
    var(--rosa-vago) 70%, rgba(122,58,80,.18) 100%);
  opacity:.5;
}
.fita-progresso{
  position:absolute;left:46px;top:6px;width:5px;height:0;border-radius:3px;
  background:linear-gradient(to right,#A85E75 0%,#E8A8BC 34%,#F6D3DE 52%,#D98BA0 70%,#A85E75 100%);
  box-shadow:0 2px 8px -2px rgba(168,94,117,.6);
  transition:height .25s linear;
}
.passo{position:relative;padding-bottom:34px;min-height:52px;}
.passo:last-child{padding-bottom:0;}
.passo::before{
  content:'';position:absolute;left:41px;top:5px;width:15px;height:15px;border-radius:50%;
  background:var(--cartao);border:2px solid var(--linha);z-index:2;
  transition:background .5s ease,border-color .5s ease,transform .5s cubic-bezier(.22,.8,.3,1),box-shadow .5s ease;
}
.passo.chegou::before{
  background:var(--rosa);border-color:var(--rosa);transform:scale(1.15);
  box-shadow:0 0 0 5px var(--rosa-vago);
}
.passo .vinheta{
  position:absolute;left:-6px;top:-4px;width:40px;opacity:0;
  transform:translateY(8px) scale(.9);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.3,1);
}
.passo.chegou .vinheta{opacity:1;transform:none;}
.passo .h{font-weight:600;font-size:.94rem;letter-spacing:.03em;color:var(--verde);}
.passo .t{font-family:var(--fonte-titulo);font-size:1.55rem;margin:2px 0 5px;line-height:1.16;}
.passo .d{font-size:1.02rem;color:var(--tinta-suave);max-width:40ch;}

@media (min-width:520px){
  .cartao-programa{padding:36px 34px 34px;}
  .carris{padding-left:84px;}
  .calha,.fita-progresso{left:58px;}
  .passo::before{left:53px;}
  .passo .vinheta{width:48px;left:-4px;}
}

/* ---------- Local ---------- */
.local h2{text-align:center;font-size:clamp(2.2rem,8vw,2.9rem);margin-bottom:10px;}
.local .casa{text-align:center;font-family:var(--fonte-titulo);font-style:italic;color:var(--rosa);font-size:1.55rem;}
.local .onde{text-align:center;color:var(--tinta-suave);font-size:1.02rem;max-width:32ch;margin:4px auto 24px;}
.cartao-mapa{background:var(--cartao);border:1px solid var(--cartao-borda);border-radius:14px;
  padding:17px 19px;display:flex;align-items:center;gap:13px;box-shadow:var(--sombra);}
.cartao-mapa svg{width:27px;height:27px;flex-shrink:0;stroke:var(--rosa);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.cartao-mapa .n{font-size:.9rem;}
.cartao-mapa a{font-size:.82rem;color:var(--verde);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Fecho ---------- */
.fecho .legenda{padding-bottom:56px;text-align:center;}
.fecho .presente{font-family:var(--fonte-titulo);font-style:italic;
  font-size:clamp(1.7rem,6.5vw,2.2rem);line-height:1.22;
  max-width:18ch;margin:0 auto;color:#FFF6F1;text-shadow:0 3px 24px rgba(36,22,28,.55);}
.botao{
  margin-top:26px;display:inline-flex;align-items:center;gap:9px;
  background:var(--rosa);color:#FFF8FA;text-decoration:none;
  padding:16px 36px;border-radius:32px;font-size:1.04rem;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6);transition:transform .25s ease;
}
.botao:hover{transform:translateY(-2px);}
.botao:focus-visible,a:focus-visible,.laco-portao:focus-visible,#lacoGrande:focus-visible,#som:focus-visible{
  outline:2px solid #FFF6F1;outline-offset:3px;
}
.nota-rsvp{margin-top:10px;font-size:.72rem;color:rgba(255,246,241,.7);}
.assinatura{margin-top:30px;font-family:var(--fonte-titulo);font-style:italic;color:rgba(255,246,241,.82);font-size:1.05rem;}

@media (min-width:760px){
  .bloco{padding:100px 0;}
  .cena .legenda{padding:0 40px 64px;}
}

@media (prefers-reduced-motion: reduce){
  #portao,.palco-laco,.data-por-baixo .dia,.data-por-baixo .mes-ano,.data-por-baixo .hora,
  .passo::before,.fita-progresso,.fio-fita,.botao,.data .sub{transition:none;}
  #portao.aberto .luz,#portao.aberto .laco-portao{animation:none;}
  .luz{display:none;}
  .cena .foto{top:0;height:108%;transform:none !important;}
}

/* ==================================================================
   Entradas com vida — cada coisa aparece quando chega
   ================================================================== */
.rev{opacity:0;transform:translateY(26px);
  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(.93);
  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;}

/* nome do portão a assentar */
#portao .nome-portao{
  animation:assentar 1.4s cubic-bezier(.22,.8,.3,1) .25s both;
}
#portao .puxa{animation:assentar 1.4s cubic-bezier(.22,.8,.3,1) .5s both;}
@keyframes assentar{
  from{opacity:0;transform:translateY(20px);letter-spacing:.06em;}
  to{opacity:1;transform:none;letter-spacing:normal;}
}
/* o laço respira até alguém lhe tocar */
.laco-portao{animation:respirar 4s ease-in-out 1.2s infinite;}
.laco-portao.a-puxar{animation:none;}
@keyframes respirar{
  0%,100%{transform:translateY(0) rotate(0);}
  50%{transform:translateY(-6px) rotate(-1.2deg);}
}

/* ==================================================================
   Álbum — passa-se com o dedo, não com o scroll
   ================================================================== */
.album-bloco h2{text-align:center;font-size:clamp(2.2rem,8vw,2.9rem);margin-bottom:8px;}
.album-bloco .dica{text-align:center;color:var(--tinta-suave);font-size: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 78%;max-width:340px;
  scroll-snap-align:center;
  border-radius:14px;overflow:hidden;
  aspect-ratio:9/13;
  background:var(--cartao);
  border:1px solid var(--cartao-borda);
  box-shadow:0 22px 44px -24px rgba(74,53,64,.55);
  transform:scale(.94);opacity:.62;
  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:var(--linha);
  transition:background .35s ease, transform .35s ease;
}
.album-pontos span.aceso{background:var(--rosa);transform:scale(1.5);}

@media (min-width:760px){
  .album .pagina{flex-basis:300px;}
}

@media (prefers-reduced-motion: reduce){
  .rev,.rev-esc{opacity:1 !important;transform:none !important;transition:none;}
  #portao .nome-portao,#portao .puxa,.laco-portao{animation:none;}
  .album .pagina{transform:none;opacity:1;transition:none;}
}

/* ==================================================================
   Ornamentos desenhados — traço fino sobre mancha de aguarela
   ================================================================== */
#ornamentos .tr,
.orn .tr{
  fill:none;stroke:var(--rosa);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
#ornamentos .tr .fino,.orn .fino{stroke-width:1;opacity:.55;}
#ornamentos .pv,.orn .pv{stroke:var(--verde);}
#ornamentos .cheio,.orn .cheio{fill:var(--rosa);stroke:none;}
#ornamentos .pv .cheio,.orn .pv .cheio{fill:var(--verde);}
#ornamentos .do,.orn .do{stroke:var(--dourado);}
#ornamentos .do .cheio,.orn .do .cheio{fill:var(--dourado);}
.lav-rosa{fill:var(--rosa);opacity:.26;}
.lav-verde{fill:var(--verde);opacity:.24;}
.lav-dourado{fill:var(--dourado);opacity:.26;}

.orn{display:block;overflow:visible;pointer-events:none;}

/* --- arco floral por cima das secções claras --- */
.arco{
  position:relative;
  display:flex;justify-content:center;align-items:flex-start;
  height:96px;margin-bottom:-26px;
}
.arco .peca{position:absolute;}
.arco .r1{width:52px;top:8px;left:calc(50% - 96px);transform:rotate(-14deg);}
.arco .r2{width:38px;top:30px;left:calc(50% - 52px);transform:rotate(12deg);}
.arco .r3{width:44px;top:4px;left:calc(50% + 6px);transform:rotate(8deg);}
.arco .b1{width:26px;top:36px;left:calc(50% + 56px);transform:rotate(-18deg);}
.arco .f1{width:56px;top:46px;left:calc(50% - 138px);transform:rotate(-8deg);}
.arco .f2{width:52px;top:44px;left:calc(50% + 78px);transform:scaleX(-1) rotate(-6deg);}
.arco .laco{width:66px;top:0;left:calc(50% - 33px);}

/* --- cercadura por baixo dos títulos --- */
.cercadura{width:132px;margin:10px auto 0;opacity:.85;}

/* --- motivos soltos no fundo das secções claras --- */
.bloco{position:relative;}
.solto{position:absolute;pointer-events:none;opacity:.5;}
.solto.e1{width:76px;left:-14px;top:24px;transform:rotate(-16deg);}
.solto.e2{width:62px;right:-10px;bottom:30px;transform:scaleX(-1) rotate(-10deg);}
.solto.e3{width:44px;right:16px;top:40px;transform:rotate(22deg);}

/* --- vinhetas do programa --- */
.passo{padding-left:0;}
.passo .vinheta{
  position:absolute;left:-84px;top:-2px;width:38px;
  opacity:.9;
}
.carris{padding-left:32px;}
@media (max-width:420px){
  .passo .vinheta{display:none;}
}
@media (min-width:421px){
  .carris{padding-left:96px;}
  .passo::before{left:-100px;}
  .calha,.fita-progresso{left:-64px;}
}

/* --- cantos ornamentados nos cartões --- */
.com-cantos{position:relative;}
.com-cantos .canto{position:absolute;width:52px;opacity:.55;}
.com-cantos .canto.ce{top:-16px;left:-12px;transform:rotate(-24deg);}
.com-cantos .canto.cd{bottom:-14px;right:-10px;transform:rotate(156deg);}

@media (prefers-reduced-motion: reduce){
  .arco .peca,.solto{transition:none;}
}


/* ==================================================================
   Onde está a cara em cada foto — para o corte nunca a apanhar
   ================================================================== */
.f-ano1 .foto{object-position:62% 52%;}   /* recém-nascida, foto deitada */
.f-ano2 .foto{object-position:50% 14%;}   /* laço vermelho, cabeça em cima */
.f-ano3 .foto{object-position:46% 17%;}   /* laço de orelhas */
.f-ano4 .foto{object-position:50% 12%;}   /* fato felpudo */
.f-ano5 .foto{object-position:63% 15%;}   /* com o urso, cara à direita */
.f-ano6 .foto{object-position:36% 14%;}   /* sentada, cara à esquerda */
.f-topo .foto{object-position:50% 20%;}
.f-fecho .foto{object-position:50% 12%;}