/* =====================================================
   Animaciones del sitio público - JOBAR TECHNOLOGY SAC
   Suaves y rápidas. Se desactivan si el visitante pidió
   "reducir movimiento" en su sistema.
   ===================================================== */

/* ---------- Aparición al hacer scroll ---------- */
.js-anim .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--delay, 0s);
}
.js-anim .reveal.reveal-left  { transform: translateX(-34px); }
.js-anim .reveal.reveal-right { transform: translateX(34px); }
.js-anim .reveal.reveal-zoom  { transform: scale(.94); }
.js-anim .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Hero: entrada al cargar la página ---------- */
@keyframes jtSubir {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@keyframes jtFondo {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}
.js-anim .hero-copy > * {
    opacity: 0;
    animation: jtSubir .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.js-anim .hero-copy > *:nth-child(1) { animation-delay: .10s; }
.js-anim .hero-copy > *:nth-child(2) { animation-delay: .25s; }
.js-anim .hero-copy > *:nth-child(3) { animation-delay: .40s; }
.js-anim .hero-copy > *:nth-child(4) { animation-delay: .55s; }
.js-anim .hero-copy > *:nth-child(5) { animation-delay: .70s; }

.js-anim .page-hero h1,
.js-anim .page-hero p,
.js-anim .page-hero .breadcrumb {
    opacity: 0;
    animation: jtSubir .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.js-anim .page-hero .breadcrumb { animation-delay: .05s; }
.js-anim .page-hero h1 { animation-delay: .15s; }
.js-anim .page-hero p  { animation-delay: .28s; }

/* ---------- Efectos al pasar el mouse ---------- */
.product-card,
.blog-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card:hover,
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(20,42,111,.12);
    border-color: #C9D2EC;
}
.product-media img,
.blog-card-media img {
    transition: transform .45s ease;
}
.product-card:hover .product-media img,
.blog-card:hover .blog-card-media img {
    transform: scale(1.06);
}

.card-cut .card-icon { transition: transform .3s ease, background .3s ease; }
.card-cut:hover .card-icon { transform: translateY(-3px) rotate(-4deg); background: var(--blue); }

.btn-whatsapp { transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37,211,102,.35); }

/* Botón flotante de WhatsApp: pulso suave para llamar la atención */
@keyframes jtPulso {
    0%   { box-shadow: 0 8px 20px rgba(0,0,0,.2), 0 0 0 0 rgba(37,211,102,.55); }
    70%  { box-shadow: 0 8px 20px rgba(0,0,0,.2), 0 0 0 16px rgba(37,211,102,0); }
    100% { box-shadow: 0 8px 20px rgba(0,0,0,.2), 0 0 0 0 rgba(37,211,102,0); }
}
.wa-float { animation: jtPulso 2.4s ease-out infinite; transition: transform .2s ease; }
.wa-float:hover { transform: scale(1.08); }

/* Encabezado: sombra al bajar */
.site-header { transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 6px 18px rgba(12,28,80,.08); }

/* ---------- Respeta "reducir movimiento" ---------- */
@media (prefers-reduced-motion: reduce) {
    .js-anim .reveal,
    .js-anim .hero-copy > *,
    .js-anim .page-hero h1,
    .js-anim .page-hero p,
    .js-anim .page-hero .breadcrumb {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .wa-float { animation: none; }
    .product-card:hover, .blog-card:hover,
    .product-card:hover .product-media img,
    .blog-card:hover .blog-card-media img { transform: none; }
}

/* =====================================================
   Pantalla de carga: enchufe que se llena como batería
   ===================================================== */
.jt-loader { display: none; }
.js-anim .jt-loader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: var(--navy-dark, #0C1C50);
    transition: opacity .45s ease, visibility .45s ease;
}
.js-anim .jt-loader.oculto { opacity: 0; visibility: hidden; pointer-events: none; }
.jt-loader svg { width: 92px; height: auto; overflow: visible; }
.jt-loader .jt-borde { fill: none; stroke: #4864C4; stroke-width: 2.5; stroke-linejoin: round; }
.jt-loader .jt-cable { fill: none; stroke: #4864C4; stroke-width: 4; stroke-linecap: round; }
.jt-loader .jt-relleno { transition: y .25s ease, height .25s ease; }
.jt-loader .jt-rayo { fill: #fff; opacity: 0; transform-origin: 32px 41px; transform: scale(.6); transition: opacity .25s ease, transform .3s cubic-bezier(.3,1.6,.5,1); }
.jt-loader.lleno .jt-rayo { opacity: 1; transform: scale(1); }
.jt-loader.lleno svg { filter: drop-shadow(0 0 14px rgba(37,211,102,.55)); }
.jt-loader .jt-porcentaje {
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.15rem;
    color: #fff; letter-spacing: .06em; min-width: 4ch; text-align: center;
}
.jt-loader .jt-texto { color: #9FB0E0; font-size: .82rem; letter-spacing: .08em; margin-top: -10px; }

/* Mientras carga, la entrada del hero espera */
.js-anim.cargando .hero-copy > *,
.js-anim.cargando .page-hero h1,
.js-anim.cargando .page-hero p,
.js-anim.cargando .page-hero .breadcrumb { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .jt-loader .jt-relleno, .jt-loader .jt-rayo { transition: none; }
}

/* Navegación dentro de productos: sin pantalla de carga */
.sin-loader .jt-loader { display: none !important; }

/* El zoom de la imagen queda siempre debajo de la etiqueta de categoría y de "Sin existencias" */
.product-media img { position: relative; z-index: 0; }
.product-media .product-cat-tag,
.product-media .stock-badge { z-index: 2; }

/* =====================================================
   Inicio: carrusel de fondo con 3 imágenes (fundido + zoom lento)
   ===================================================== */
.hero { background-image: none; }
.hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero::before { z-index: 1; }
.hero .container { z-index: 2; }
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    animation: jtSlide 18s linear infinite;
    will-change: opacity, transform;
}
.hero-slide:nth-child(1) { animation-delay: -1s; }
.hero-slide:nth-child(2) { animation-delay: 5s; }
.hero-slide:nth-child(3) { animation-delay: 11s; }
@keyframes jtSlide {
    0%   { opacity: 0; transform: scale(1.02); }
    6%   { opacity: 1; }
    33%  { opacity: 1; }
    40%  { opacity: 0; transform: scale(1.12); }
    100% { opacity: 0; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide { animation: none; }
    .hero-slide:nth-child(1) { opacity: 1; }
}

/* =====================================================
   Inicio: carrusel de categorías en movimiento horizontal continuo
   ===================================================== */
.cat-carrusel { position: relative; }
.cat-pista {
    overflow: hidden;
    padding: 10px 2px 14px;
    margin: -10px 0 -4px;
    touch-action: pan-y;            /* el dedo desliza horizontal; vertical sigue moviendo la página */
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.cat-pista.arrastrando { cursor: grabbing; user-select: none; }
.cat-pista.arrastrando a { pointer-events: none; }
.cat-pista:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.cat-fila { display: flex; gap: 22px; width: max-content; will-change: transform; }
.cat-item {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
}
.cat-item p { flex: 1; }
.cat-item, .cat-item * { -webkit-user-drag: none; }

.cat-flecha {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 44px; height: 44px;
    margin-top: -26px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy-dark);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(12,28,80,.12);
    clip-path: polygon(22% 0, 100% 0, 78% 100%, 0% 100%);
    transition: background .2s ease, color .2s ease;
}
.cat-flecha svg { width: 22px; height: 22px; pointer-events: none; }
.cat-flecha:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.cat-prev { left: -22px; }
.cat-next { right: -22px; }

@media (max-width: 1240px) {
    .cat-prev { left: -6px; }
    .cat-next { right: -6px; }
}
@media (max-width: 720px) {
    .cat-item { flex-basis: min(78vw, 280px); }
    .cat-fila { gap: 14px; }
    .cat-flecha { display: none; }
    .cat-pista {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }
}

/* =====================================================
   Inicio: productos destacados en carrusel continuo
   (en computadora y en celular)
   ===================================================== */
.js-anim .carrusel-clon.reveal { opacity: 1; transform: none; }
.dest-carrusel { position: relative; }
.dest-pista {
    overflow: hidden;
    padding: 10px 2px 14px;
    margin: -10px 0 -4px;
    touch-action: pan-y;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.dest-pista.arrastrando { cursor: grabbing; user-select: none; }
.dest-pista.arrastrando a { pointer-events: none; }
.dest-pista:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.dest-fila.grid {
    display: flex;
    gap: 22px;
    width: max-content;
    will-change: transform;
}
.dest-fila > .product-card { flex: 0 0 340px; height: auto; }
.dest-fila > .card-cut { flex: 0 0 340px; }
.dest-fila .product-card, .dest-fila .product-card * { -webkit-user-drag: none; }
.dest-fila .product-card:hover { transform: none; }
@media (max-width: 720px) {
    .dest-fila.grid { gap: 14px; }
    .dest-fila > .product-card, .dest-fila > .card-cut { flex-basis: min(80vw, 300px); }
    .dest-pista {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }
}