/* Movimiento ligero de Cargoprime: solo CSS, con propósito, respeta "reducir movimiento". */

/* 1. Entrada escalonada de la portada */
.hero .rev > *{opacity:0;transform:translateY(14px);animation:subir .55s cubic-bezier(.2,.8,.2,1) forwards}
.hero .rev > :nth-child(1){animation-delay:.05s}
.hero .rev > :nth-child(2){animation-delay:.15s}
.hero .rev > :nth-child(3){animation-delay:.25s}
.hero .rev > :nth-child(4){animation-delay:.35s}
.hero .rev > :nth-child(5){animation-delay:.45s}
.hero .foto-hero{opacity:0;transform:translateX(18px);animation:entrarFoto .7s .2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes subir{to{opacity:1;transform:none}}
@keyframes entrarFoto{to{opacity:1;transform:none}}

/* 2. La etiqueta de envío "se pega" y el sello da un golpecito */
.etiqueta-envio{animation:pegar .5s .9s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes pegar{from{opacity:0;transform:rotate(-9deg) scale(1.08) translateY(10px)}to{opacity:1;transform:rotate(-3deg)}}
.sello{animation:sellar .35s 1.3s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes sellar{from{opacity:0;transform:rotate(4deg) scale(1.6)}to{opacity:1;transform:rotate(4deg) scale(1)}}

/* 3. La cinta de balizamiento avanza despacio, como una cinta transportadora */
.cinta{background:repeating-linear-gradient(135deg,var(--senal) 0 14px,var(--negro) 14px 28px);background-size:39.6px 10px;animation:cinta 1.6s linear infinite}
@keyframes cinta{to{background-position:39.6px 0}}

/* 4. El botón principal late suavemente */
.btn-senal{position:relative}
.btn-senal::after{content:"";position:absolute;inset:-2px;border:2px solid var(--negro);opacity:0;animation:latir 4s 2s ease-out infinite;pointer-events:none}
@keyframes latir{0%{opacity:.6;transform:scale(1)}40%,100%{opacity:0;transform:scale(1.08)}}

/* 5. Cabecera que se encoge al bajar */
header.nav{transition:padding .25s ease,box-shadow .25s ease}
header.nav.encogida .nav-in{padding-top:8px;padding-bottom:8px}
header.nav.encogida{box-shadow:0 4px 0 var(--negro)}

/* 6. Resultado de la calculadora: pequeño pulso cuando cambia */
.res-total b.tic{animation:tic .3s ease}
@keyframes tic{0%{transform:scale(1.04);opacity:.6}100%{transform:none;opacity:1}}
.duelo b.tic{animation:tic .3s ease}

/* 7. Las piezas que aparecen al bajar, escalonadas dentro de cada rejilla */
.dolores .dolor-item,.testis .testi,.pasos .paso{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.in .dolor-item,.in .testi,.in .paso,.dolor-item.in,.testi.in,.paso.in{opacity:1;transform:none}
.in > :nth-child(2){transition-delay:.1s}
.in > :nth-child(3){transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  .hero .rev > *,.hero .foto-hero,.etiqueta-envio,.sello,.cinta,.btn-senal::after,.res-total b.tic,.duelo b.tic{animation:none!important;opacity:1;transform:none}
  .etiqueta-envio{transform:rotate(-3deg)}
  .sello{transform:rotate(4deg)}
  .dolores .dolor-item,.testis .testi,.pasos .paso{opacity:1;transform:none;transition:none}
}