/* ==========================================================================
   motion.css — entradas, revelado, hovers
   ========================================================================== */

@keyframes subir{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes gota{
  0%  { transform:scaleY(.15); opacity:0; transform-origin:top; }
  45% { transform:scaleY(1);   opacity:.85; transform-origin:top; }
  100%{ transform:scaleY(1);   opacity:0; transform-origin:bottom; }
}
@keyframes avisoIn{ from{ opacity:0; transform:translate(-50%,150%);} to{ opacity:1; transform:translate(-50%,0);} }
@keyframes avisoOut{ from{ opacity:1; transform:translate(-50%,0);} to{ opacity:0; transform:translate(-50%,150%);} }

/* entrada del hero, escalonada */
.hero .kicker,.hero h1,.hero .lead,.hero .ctas,.hero .escasez{
  animation:subir 1.05s var(--ease-entrada) both;
}
.hero h1{ animation-delay:.55s; }
.hero .lead{ animation-delay:.85s; }
.hero .ctas{ animation-delay:1.02s; }
.hero .escasez{ animation-delay:1.16s; }

.pista-l{ animation:gota 2.6s var(--ease-ui) infinite; }

/* revelado al entrar en pantalla: el contenido sube de verdad.
   El estado por defecto es VISIBLE: sin JavaScript los nueve bloques se leen.
   El ocultado inicial lo aplica con-js.js, que marca <html class="con-js">
   antes del primer pintado. */
.rev{
  transition:opacity .9s var(--ease-entrada), transform .9s var(--ease-entrada);
}
.con-js .rev{ opacity:0; transform:translateY(26px); }
.con-js .rev.visible{ opacity:1; transform:none; }

/* transiciones base */
.btn,.tarjeta,.banda,.resena,.input,.info-marco{
  transition:transform .45s var(--ease-ui),
             border-color .45s var(--ease-ui),
             color .45s var(--ease-ui),
             background-color .45s var(--ease-ui);
}
.fl{ transition:transform .45s var(--ease-ui); }

/* hovers */
.btn-p:hover{ transform:translateY(-2px); border-color:var(--espiga); background:rgba(201,169,97,.07); }
.btn-q:hover{ color:var(--hueso); }
.btn:hover .fl{ transform:translateX(4px); }
.tarjeta:hover,.banda:hover,.resena:hover{ transform:translateY(-3px); border-color:var(--linea-alta); }
.input:focus{ outline:none; border-color:var(--espiga); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .con-js .rev{ opacity:1; transform:none; }
}