/* =====================================================================
   SafeTech · Capa de movimiento (motion) · v10.44
   ---------------------------------------------------------------------
   Solo añade animación. No modifica colores, tipografías, tamaños ni
   distribución del diseño existente. Todo lo que oculta contenido está
   condicionado a html.st-motion, que solo se activa si el visitante no
   pidió "reducir movimiento" y si este sistema llega a cargar.
   ===================================================================== */

:root{
  --stm-ease-out:cubic-bezier(.23,1,.32,1);
  --stm-ease-in-out:cubic-bezier(.77,0,.175,1);
  --stm-ease-soft:cubic-bezier(.22,.61,.36,1);
  --stm-rise:18px;
}

/* ---------------------------------------------------------------------
   1. Entrada de página (sobre el pliegue, sin depender del scroll)
   --------------------------------------------------------------------- */
@keyframes stmRise{from{opacity:0;transform:translate3d(0,var(--stm-rise),0)}to{opacity:1;transform:none}}
@keyframes stmRiseBlur{from{opacity:0;transform:translate3d(0,14px,0);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes stmFade{from{opacity:0}to{opacity:1}}
@keyframes stmDrop{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:none}}
@keyframes stmSlideIn{from{opacity:0;transform:translate3d(28px,0,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes stmRowIn{from{opacity:0;transform:translate3d(-10px,0,0)}to{opacity:1;transform:none}}

.st-motion .st-header__inner{animation:stmDrop .6s var(--stm-ease-out) both}

/* Hero de inicio: el contenedor aparece y su contenido entra en cascada */
.st-motion .st-sales-hero{animation:stmFade .5s var(--stm-ease-soft) both}
.st-motion .st-sales-hero__copy>*{animation:stmRise .75s var(--stm-ease-out) both}
.st-motion .st-sales-hero__copy>:nth-child(1){animation-delay:.08s}
.st-motion .st-sales-hero__copy>h1{animation-name:stmRiseBlur;animation-duration:.9s;animation-delay:.16s}
.st-motion .st-sales-hero__copy>:nth-child(3){animation-delay:.28s}
.st-motion .st-sales-hero__copy>:nth-child(4){animation-delay:.36s}
.st-motion .st-sales-hero__copy>:nth-child(5){animation-delay:.44s}
.st-motion .st-sales-hero__copy>:nth-child(n+6){animation-delay:.5s}
.st-motion .st-hero-points>span{animation:stmRise .6s var(--stm-ease-out) both}
.st-motion .st-hero-points>span:nth-child(1){animation-delay:.5s}
.st-motion .st-hero-points>span:nth-child(2){animation-delay:.56s}
.st-motion .st-hero-points>span:nth-child(3){animation-delay:.62s}
.st-motion .st-hero-points>span:nth-child(4){animation-delay:.68s}

.st-motion .st-sales-hero__panel{animation:stmSlideIn .9s var(--stm-ease-out) .22s both}
.st-motion .st-sales-hero__panel>a{animation:stmRowIn .55s var(--stm-ease-out) both}
.st-motion .st-sales-hero__panel>a:nth-of-type(1){animation-delay:.5s}
.st-motion .st-sales-hero__panel>a:nth-of-type(2){animation-delay:.57s}
.st-motion .st-sales-hero__panel>a:nth-of-type(3){animation-delay:.64s}
.st-motion .st-sales-hero__panel>a:nth-of-type(n+4){animation-delay:.7s}
.st-motion .st-panel-note{animation:stmFade .6s var(--stm-ease-soft) .8s both}

/* Hero genérico (otras páginas que usan .st-hero) */
.st-motion .st-hero>*{animation:stmRise .7s var(--stm-ease-out) both}
.st-motion .st-hero>:nth-child(2){animation-delay:.07s}
.st-motion .st-hero>:nth-child(3){animation-delay:.14s}
.st-motion .st-hero>:nth-child(n+4){animation-delay:.2s}

/* ---------------------------------------------------------------------
   2. Aparición al hacer scroll
   El estado oculto se declara aquí (no en JS) para evitar parpadeos.
   motion.js marca .is-in cuando el bloque entra en pantalla.
   --------------------------------------------------------------------- */
.st-motion :is(
  .st-section__head,.st-page-head,.st-trust-strip>div,.st-featured-grid>*,.st-featured-track>*,
  .st-featured-footer,.st-category-cards>a,.st-confidence-grid>article,.st-final-cta,
  .st-sidebar,.st-catalog-tools,.st-catalog-grid>*,
  .st-product-intro,.st-product-panel,.st-info-box,.st-product-main>.st-alert,.st-purchase-scope,.st-checkout-card,
  .st-service-builder>*,.st-option,
  .st-delivery-glossary,.st-cart-card,
  .st-content,.st-grid>.st-card,
  .article-header,.intro-card,.alert-card,.faq-item,.cta-card,.table-card,.program-block,.ideal-card,.feature-summary,.wrapper>.card,
  .st-footer__grid>div
):not(.is-in){opacity:0;transform:translate3d(0,var(--stm-rise),0)}

.st-motion .is-in.stm-animating{
  transition:opacity .65s var(--stm-ease-soft) var(--stm-d,0ms),transform .8s var(--stm-ease-out) var(--stm-d,0ms)!important;
}

/* Las fichas de apps de Office entran en cascada cuando su panel aparece */
.st-motion .st-product-panel:not(.is-in) .st-app{opacity:0;transform:translate3d(0,10px,0) scale(.97)}
.st-motion .st-product-panel.stm-animating .st-app{transition:opacity .45s var(--stm-ease-soft),transform .55s var(--stm-ease-out)}
.st-motion .st-product-panel.stm-animating .st-app:nth-child(2){transition-delay:.04s}
.st-motion .st-product-panel.stm-animating .st-app:nth-child(3){transition-delay:.08s}
.st-motion .st-product-panel.stm-animating .st-app:nth-child(4){transition-delay:.12s}
.st-motion .st-product-panel.stm-animating .st-app:nth-child(5){transition-delay:.16s}
.st-motion .st-product-panel.stm-animating .st-app:nth-child(6){transition-delay:.2s}
.st-motion .st-product-panel.stm-animating .st-app:nth-child(7){transition-delay:.24s}
.st-motion .st-product-panel.stm-animating .st-app:nth-child(n+8){transition-delay:.28s}

/* ---------------------------------------------------------------------
   3. Microinteracciones
   --------------------------------------------------------------------- */

/* Presión de botones: confirma el clic */
.st-btn,.st-cart,.st-cat-btn,.st-carousel-controls button,.st-menu,.st-theme-toggle,.st-option,.cta-btn,.btn-link,.st-support-btn{
  -webkit-tap-highlight-color:transparent;
}
.st-btn:active:not(:disabled),.st-cart:active,.st-cat-btn:active,.st-carousel-controls button:active,
.st-menu:active,.st-theme-toggle:active,.cta-btn:active,.btn-link:active,.st-support-btn:active{
  transform:scale(.97)!important;transition-duration:.12s!important;
}

/* Brillo que recorre los botones principales al pasar el cursor */
.st-btn--primary{position:relative;overflow:hidden;isolation:isolate}
.st-btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 48%,rgba(255,255,255,.08) 56%,transparent 70%);
  transform:translateX(-120%);
}

@media (hover:hover) and (pointer:fine){
  .st-btn--primary:hover::after{transform:translateX(120%);transition:transform .85s var(--stm-ease-in-out)}

  /* Tarjetas de producto: leve elevación, igual que las de categoría */
  .st-card,.st-confidence-grid article,.st-trust-strip>div,.st-checkout-card{
    transition:transform .35s var(--stm-ease-out),box-shadow .35s var(--stm-ease-soft),border-color .25s ease;
  }
  .st-product-card:not(.st-checkout-card):hover,.st-catalog-card:hover,.st-service-card:hover{transform:translateY(-4px)}
  .st-confidence-grid article:hover{transform:translateY(-3px);border-color:rgba(220,38,38,.28);box-shadow:0 12px 28px rgba(15,23,42,.07)}
  .st-confidence-grid article>span{transition:transform .45s var(--stm-ease-out),background-color .25s ease}
  .st-confidence-grid article:hover>span{transform:rotate(-6deg) scale(1.08)}

  /* Flecha "Ver Opciones →" avanza */
  .st-category-cards b{transition:transform .35s var(--stm-ease-out)}
  .st-category-cards>a:hover b{transform:translateX(5px)}

  /* Filas del panel "Los más buscados" */
  .st-sales-hero__panel>a>span{transition:transform .35s var(--stm-ease-out)}
  .st-sales-hero__panel>a>b{transition:transform .35s var(--stm-ease-out),color .2s ease}
  .st-sales-hero__panel>a:hover>span{transform:translateX(5px)}
  .st-sales-hero__panel>a:hover>b{transform:translateX(-3px)}

  /* Fichas de apps */
  .st-app{transition:transform .3s var(--stm-ease-out),box-shadow .3s var(--stm-ease-soft)}
  .st-app:hover{transform:translateY(-2px)}

  /* Enlaces del footer */
  .st-footer__grid a{transition:color .2s ease,transform .3s var(--stm-ease-out)}
  .st-footer__grid div:not(:first-child)>a:hover{transform:translateX(3px)}
}

/* Punto de "stock verificado": pulso suave */
.st-panel-dot{position:relative}
.st-panel-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:#10b981;
  animation:stmPing 2.4s var(--stm-ease-out) infinite;
}
@keyframes stmPing{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.8);opacity:0}}

/* Botón flotante de WhatsApp: entrada y anillo de atención */
.st-motion .st-wa-float{animation:stmWaIn .7s var(--stm-ease-out) .9s both}
@keyframes stmWaIn{from{opacity:0;transform:translate3d(0,16px,0) scale(.9)}to{opacity:1;transform:none}}
.st-wa-float::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.45);
  animation:stmWaRing 5s var(--stm-ease-out) 2.5s infinite;
}
@keyframes stmWaRing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}18%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}

/* Contador del carrito: salto al cambiar (clase puesta por motion.js) */
.st-cart__count.stm-bump{animation:stmBump .45s var(--stm-ease-out)}
@keyframes stmBump{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}

/* Acordeones (<details>): el contenido se despliega en lugar de saltar */
@keyframes stmReveal{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
.faq-item[open]>:not(summary),.st-purchase-scope[open]>:not(summary),details[open]>.st-purchase-scope__body{
  animation:stmReveal .35s var(--stm-ease-out) both;
}
.faq-icon,.st-purchase-scope summary>*:last-child{transition:transform .3s var(--stm-ease-out)}
.faq-item[open] .faq-icon{transform:rotate(180deg)}

/* Menú móvil: aparece desde el botón */
@media(max-width:980px){
  .st-nav.is-open{animation:stmMenu .24s var(--stm-ease-out) both;transform-origin:top right}
  .st-nav.is-open>a{animation:stmRise .35s var(--stm-ease-out) both;--stm-rise:6px}
  .st-nav.is-open>a:nth-child(2){animation-delay:.03s}
  .st-nav.is-open>a:nth-child(3){animation-delay:.06s}
  .st-nav.is-open>a:nth-child(n+4){animation-delay:.09s}
}
@keyframes stmMenu{from{opacity:0;transform:translate3d(0,-6px,0) scale(.98)}to{opacity:1;transform:none}}

/* Cambio de tema claro/oscuro: revelado circular desde el interruptor */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.stm-theme-switching::view-transition-new(root){
  animation:stmThemeReveal .55s var(--stm-ease-in-out) both;
}
@keyframes stmThemeReveal{
  from{clip-path:circle(0 at var(--stm-x,100%) var(--stm-y,0))}
  to{clip-path:circle(var(--stm-r,150vmax) at var(--stm-x,100%) var(--stm-y,0))}
}

/* Navegación entre páginas: fundido corto (Chrome, Edge y Safari recientes) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  html:not(.stm-theme-switching)::view-transition-old(root){animation:stmVtOut .18s var(--stm-ease-soft) both}
  html:not(.stm-theme-switching)::view-transition-new(root){animation:stmVtIn .28s var(--stm-ease-soft) both}
}
@keyframes stmVtOut{to{opacity:0}}
@keyframes stmVtIn{from{opacity:0}}

/* ---------------------------------------------------------------------
   4. Accesibilidad: sin desplazamientos para quien pide menos movimiento
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .st-panel-dot::after,.st-wa-float::before{animation:none!important;display:none}
  .st-btn--primary::after{display:none}
  .st-cart__count.stm-bump,.faq-item[open]>:not(summary),.st-purchase-scope[open]>:not(summary),.st-nav.is-open,.st-nav.is-open>a{animation:none!important}
}