/* Animaciones y experiencia en celular. Se carga en todas las paginas despues del
   CSS propio de cada una (lo inyecta scripts/mejoras_seo.py). */

html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
a,button,select,input,label,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ── Aparicion al hacer scroll: curva mas natural y cascada en las grillas ── */
.reveal{transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0ms)}
.reveal.visible{transition-delay:var(--d,0ms)}

/* ── Imagenes: aparecen con un fundido en vez de "saltar" al cargar ── */
img.img-fade{opacity:0;transition:opacity .45s ease}
img.img-fade.img-lista{opacity:1}

/* ── Boton flotante de WhatsApp: entra suave y late con transform/opacity
      (antes animaba box-shadow, que repinta en cada cuadro y gasta bateria) ── */
.fab-wa{animation:fab-in .5s cubic-bezier(.34,1.56,.64,1) .8s backwards}
.fab-wa::before{content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;animation:fab-ping 2.6s cubic-bezier(0,0,.2,1) 1.6s infinite}
@keyframes fab-in{from{opacity:0;transform:scale(.4) translateY(20px)}to{opacity:1;transform:none}}
@keyframes fab-ping{0%{transform:scale(1);opacity:.5}75%,100%{transform:scale(1.6);opacity:0}}

/* ── Respuesta al tocar ── */
.btn,.btn-buy,.btn-next,.btn-send,.btn-back,.nav-wa,.fab-wa,.cat-card,.prod-card,.modal-close-btn{-webkit-user-select:none;user-select:none}
.btn:active,.btn-buy:active,.btn-next:active,.btn-send:active,.btn-back:active,.nav-wa:active,.modal-close-btn:active{transform:scale(.96)!important;transition-duration:.08s!important}
.cat-card:active,.prod-card:active{transform:scale(.985)!important;transition-duration:.1s!important}
.fab-wa:active{transform:scale(.9)!important}

/* En pantallas tactiles el :hover queda "pegado" despues de tocar: sin saltos */
@media (hover:none){
  .btn:hover,.btn-primary:hover,.btn-wa-green:hover,.btn-buy:hover,.nav-wa:hover,.fab-wa:hover,
  .btn-next:hover,.btn-send:hover,.cat-card:hover,.prod-card:hover{transform:none}
}

body.menu-abierto{overflow:hidden}

@media (max-width:768px){
  /* Menu: fundido de fondo y links que entran en cascada */
  nav.open{animation:menu-in .25s ease both}
  nav.open>*{animation:menu-link .45s cubic-bezier(.22,.61,.36,1) both}
  nav.open>*:nth-child(1){animation-delay:.05s}
  nav.open>*:nth-child(2){animation-delay:.1s}
  nav.open>*:nth-child(3){animation-delay:.15s}
  nav.open>*:nth-child(4){animation-delay:.2s}
  nav.open>*:nth-child(5){animation-delay:.25s}
  nav.open>*:nth-child(6){animation-delay:.3s}
  nav.open>.nav-close{animation:menu-in .3s ease both}

  /* Header que se esconde al bajar y vuelve al subir: mas pantalla para el contenido */
  header{transition:transform .3s cubic-bezier(.22,.61,.36,1),background .3s,box-shadow .3s}
  header.hdr-oculto{transform:translateY(-100%)}
  header.scrolled{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

  /* iOS hace zoom al enfocar campos con letra menor a 16px */
  input,select,textarea,.size-select{font-size:16px!important}

  /* Alto real de pantalla (sin el salto de la barra del navegador) */
  .hero{min-height:88vh;min-height:88svh}

  /* Menos desplazamiento en la aparicion: se siente mas rapido en pantallas chicas */
  .reveal:not(.visible){transform:translateY(18px)}

  /* Hoja inferior del checkout: entra desde abajo y no arrastra la pagina */
  .modal-box{animation:sheet-up .38s cubic-bezier(.22,.61,.36,1)}
  .modal-box,.modal-overlay{overscroll-behavior:contain}
}
@keyframes menu-in{from{opacity:0}to{opacity:1}}
@keyframes menu-link{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}

/* Quien pidio menos movimiento en el sistema no ve animaciones */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  img.img-fade{opacity:1}
  .fab-wa::before{display:none}
}

/* El aviso "agregado al carrito" tapaba el boton de finalizar compra: en celular va arriba */
@media (max-width:768px){
  body .emi-toast{top:calc(12px + env(safe-area-inset-top));bottom:auto;left:12px;right:12px;max-width:none;transform:translateY(-150%)}
  body .emi-toast.show{transform:none}
}