/* =======================================================================
   CAPA DE MOVIMIENTO — CATÁLOGO PÚBLICO (constructor.ejs)
   Fuente única de animaciones del catálogo: se carga después del <style>
   inline de constructor.ejs y usa SOLO los tokens de tema que cada tienda
   ya define (--accent, --bg-card, --border, --radius, --shadow, etc.) —
   nunca colores fijos, para no imponer el estilo de una tienda a todas.
   Dirección de movimiento: "una vitrina que abre, responde y prepara el
   pedido". Consolida heroLogoIn/heroTextIn/badgeBounce/fadeInScale/fade-up
   y las entradas de tarjeta que antes estaban duplicadas en el <style>
   inline — esa duplicación ya se quitó de ahí; esto es lo único que queda.
   ======================================================================= */

:root {
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   1) APERTURA DEL CATÁLOGO — un solo momento focal (≤700ms)
   Orden: banner/superficie → logo → nombre/descripción/estado.
   Recorte con clip-path (no solo fade+translate genérico).
   Si JS falla, .hero-reveal ya no tiene el estado "pending" en el
   HTML base — el contenido nace visible (ver constructor.ejs).
   ============================================================ */
/* Pura CSS, sin depender de una clase que agregue JS: si el script nunca
   corre, la animación igual se dispara sola al pintar la página y termina
   en el estado final visible (fill-mode both) — nunca se queda oculto. */
.hero img.bg {
  transition: transform .4s var(--ease-premium);
  animation: heroSurfaceIn .38s var(--ease-premium) both;
}
@keyframes heroSurfaceIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.hero-logo { animation: heroLogoIn .26s .2s var(--ease-premium) both; }
@keyframes heroLogoIn { from { opacity: 0; transform: scale(.82) translateY(10px); } to { opacity: 1; transform: none; } }

.hero-name { animation: heroTextIn .26s .3s var(--ease-premium) both; }
.hero-desc { animation: heroTextIn .26s .38s var(--ease-premium) both; }
.hero-status { animation: heroTextIn .24s .46s var(--ease-premium) both; }
@keyframes heroTextIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Total: ~700ms desde que pinta hasta que el estado (abierto/cerrado) termina de entrar. */

/* ============================================================
   2) HEADER STICKY — transición suave hero → barra compacta
   ============================================================ */
.hdr { transition: box-shadow .3s var(--ease-premium), background-color .3s var(--ease-premium); }
.hdr.hdr-compact { box-shadow: 0 2px 16px rgba(0,0,0,.06); }
.hdr-logo {
  transform-origin: left center;
  opacity: 0; transform: scale(.6);
  transition: opacity .3s var(--ease-premium), transform .3s var(--ease-premium);
}
.hdr.hdr-compact .hdr-logo,
.hdr:not(:has(.hero)) .hdr-logo,
body:not(:has(.hero)) .hdr-logo { opacity: 1; transform: none; }
.hdr-title { transition: font-size .3s var(--ease-premium); }

/* ============================================================
   3) CATEGORÍAS / FILTROS — indicador que se mueve, no on/off
   ============================================================ */
.filter-cat, .filter-group-btn { position: relative; transition: background-color .22s var(--ease-premium), color .22s var(--ease-premium), border-color .22s var(--ease-premium); }
.cat-pill { transition: background-color .22s var(--ease-premium), color .22s var(--ease-premium), border-color .22s var(--ease-premium), box-shadow .22s var(--ease-premium), transform .15s var(--ease-premium); }

/* Contador de resultados: transición numérica discreta (solo opacidad/leve escala) */
#prodCount { display: inline-block; transition: opacity .15s var(--ease-premium); }
#prodCount.counting { opacity: .35; }

/* Estado sin resultados: entrada clara */
#noResults { animation: noResultsIn .28s var(--ease-premium) both; }
@keyframes noResultsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   4) PRODUCTOS — stagger de colección nueva (≤240ms total),
   sin fade-up genérico repetido en cada tarjeta.
   ============================================================ */
.prod-card, .oferta-card {
  opacity: 1; transform: none;
  transition: transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), border-color .3s var(--ease-premium);
}
.prod-card.card-enter, .oferta-card.card-enter {
  animation: cardEnter .32s var(--ease-premium) both;
  animation-delay: var(--card-delay, 0ms);
}
@keyframes cardEnter { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* FLIP: al reordenar por filtro, las tarjetas que se mueven lo hacen con transform, sin animar layout */
.prod-card.flip-move { transition: transform .28s var(--ease-premium); }

/* Confirmación táctil (móvil): escala breve, sin rebote */
.prod-card.tap-press, .oferta-card.tap-press { transform: scale(.98); transition: transform .1s var(--ease-premium); }

/* Imagen: fade-in suave cuando termina de cargar (evita flash de fondo) */
.prod-img-wrap img, .oferta-img-wrap img, .pd-img-col img { opacity: 0; transition: opacity .35s var(--ease-premium), transform .6s var(--ease-premium); background: var(--bg); }
.prod-img-wrap img.img-loaded, .oferta-img-wrap img.img-loaded, .pd-img-col img.img-loaded { opacity: 1; }

/* Badges: entrada corta, sin bounce/rotación */
.prod-badge-offer, .prod-badge-promo, .oferta-badge-pct, .oferta-badge-tag, .pd-badge-offer {
  animation: badgeIn .22s var(--ease-premium) both;
}
@keyframes badgeIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* ============================================================
   5) OFERTAS — carrusel manipulable, snap, sin autoplay infinito
   ============================================================ */
.ofertas-track { scroll-snap-type: x proximity; }
.ofertas-track .oferta-card { scroll-snap-align: start; }
.ofertas-arrow:active { transform: scale(.92); }

/* ============================================================
   6) AGREGAR AL CARRITO — segundo momento importante
   ============================================================ */
.prod-btn.added, .oferta-add-btn.added { transition: background-color .2s var(--ease-premium); }
.cart-fly {
  position: fixed; z-index: 10002; border-radius: 10px; object-fit: cover;
  pointer-events: none; will-change: transform, opacity;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
#cart-count, .cart-count-bump { transition: transform .18s var(--ease-premium); }
.cart-count-bump { animation: cartCountBump .32s var(--ease-premium); }
@keyframes cartCountBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ============================================================
   7) SELECTOR DE VARIANTES — overlay y panel por separado
   ============================================================ */
.vp-overlay { opacity: 0; transition: opacity .14s var(--ease-premium); }
.vp-overlay.vp-in { opacity: 1; }
.vp-panel { opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .3s var(--ease-premium), transform .3s var(--ease-premium); }
.vp-overlay.vp-in .vp-panel { opacity: 1; transform: none; }
@media (min-width: 640px) {
  .vp-panel { transform: translateY(0) scale(.94); }
  .vp-overlay.vp-in .vp-panel { transform: none; }
}
.vp-val { transition: background-color .18s var(--ease-premium), color .18s var(--ease-premium), border-color .18s var(--ease-premium), transform .12s var(--ease-premium); }
.vp-val:active { transform: scale(.96); }

/* ============================================================
   8) CARRITO (panel) — continuación de agregar, no pantalla aparte
   ============================================================ */
#chat-panel { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .26s var(--ease-premium), transform .26s var(--ease-premium); }
#chat-panel.chat-in { opacity: 1; transform: none; }
.chat-row-enter { animation: chatRowIn .22s var(--ease-premium) both; }
@keyframes chatRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat-row-leaving { transition: opacity .18s var(--ease-premium), transform .18s var(--ease-premium); opacity: 0; transform: translateX(12px); }

/* Nota: el timing de .pd-overlay/.pd-modal (detalle de producto) se fijó
   directamente en el <style> de constructor.ejs — ese bloque se carga
   después de esta hoja, así que una regla aquí quedaría sin efecto. */

/* ============================================================
   10) SCROLL REVEAL — solo secciones con significado real
   ============================================================ */
.anim-in { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease-premium), transform .5s var(--ease-premium); }
.anim-in.visible { opacity: 1; transform: none; }

/* ============================================================
   11) MÓVIL — controles táctiles ≥44px, safe areas
   ============================================================ */
.filter-fab, .cart-fab { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
@media (max-width: 900px) {
  .prod-btn, .prod-view-btn, .ofertas-arrow, .cat-pill, .filter-cat, .filter-group-btn { min-height: 40px; }
}

/* ============================================================
   ACCESIBILIDAD: prefers-reduced-motion
   Quita recorridos espaciales, FLIP, zoom y loops; conserva
   confirmaciones por color/borde/opacidad.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero img.bg, .hero-logo, .hero-name, .hero-desc, .hero-status,
  .prod-card, .oferta-card, .prod-img-wrap img, .oferta-img-wrap img, .pd-img-col img,
  .prod-badge-offer, .prod-badge-promo, .oferta-badge-pct, .oferta-badge-tag, .pd-badge-offer,
  #chat-panel, .vp-overlay, .vp-panel, .pd-modal, #prodCount, .cart-count-bump {
    animation: none !important;
    transition-duration: .01ms !important;
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .prod-card.flip-move { transition: none !important; }
  .cart-fly { display: none !important; }
}

/* ---- Print ---- */
@media print {
  .cart-fab, .filter-fab, .install-pill, .wa-pill { display: none !important; }
}