/* ═══════════════════════════════════════════════════════════
   CREA — WEB · web-experience.css
   Capa final de experiencia: animaciones de Servicios,
   micro-interacciones del mockup de tienda y destaque del
   servicio de diseño web. Se carga ÚLTIMA en index.html.
═══════════════════════════════════════════════════════════ */

/* ── 1. Entrada escalonada del contenido del panel ─────────
   Al cambiar de servicio (display:none → block) las animaciones
   de los hijos se re-disparan solas. */
.srv__panel.on .srv__panel-eyebrow { animation: xpChild 0.5s var(--spring) 0.05s both; }
.srv__panel.on .srv__panel-title   { animation: xpChild 0.55s var(--spring) 0.12s both; }
.srv__panel.on .srv__panel-tag     { animation: xpChild 0.55s var(--spring) 0.19s both; }
.srv__panel.on .srv__chips         { animation: xpChild 0.5s var(--spring) 0.26s both; }
.srv__panel.on .srv__chip          { animation: xpPop 0.45s var(--spring) both; }
.srv__panel.on .srv__chip:nth-child(1) { animation-delay: 0.30s; }
.srv__panel.on .srv__chip:nth-child(2) { animation-delay: 0.36s; }
.srv__panel.on .srv__chip:nth-child(3) { animation-delay: 0.42s; }
.srv__panel.on .srv__chip:nth-child(4) { animation-delay: 0.48s; }
.srv__panel.on .srv__incluye li        { animation: xpChild 0.5s var(--spring) both; }
.srv__panel.on .srv__incluye li:nth-child(1) { animation-delay: 0.34s; }
.srv__panel.on .srv__incluye li:nth-child(2) { animation-delay: 0.42s; }
.srv__panel.on .srv__incluye li:nth-child(3) { animation-delay: 0.50s; }
.srv__panel.on .srv__incluye li svg { animation: xpCheck 0.5s var(--spring) both; }
.srv__panel.on .srv__incluye li:nth-child(1) svg { animation-delay: 0.48s; }
.srv__panel.on .srv__incluye li:nth-child(2) svg { animation-delay: 0.56s; }
.srv__panel.on .srv__incluye li:nth-child(3) svg { animation-delay: 0.64s; }
.srv__panel.on .srv__note,
.srv__panel.on .srv-logos,
.srv__panel.on .srv-store  { animation: xpChild 0.5s var(--spring) 0.55s both; }
.srv__panel.on .srv__cta   { animation: xpChild 0.5s var(--spring) 0.62s both; }

@keyframes xpChild { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes xpPop   { from { opacity: 0; transform: scale(0.88); }      to { opacity: 1; transform: scale(1); } }
@keyframes xpCheck { from { opacity: 0; transform: scale(0.4) rotate(-14deg); } to { opacity: 1; transform: none; } }

/* ── 2. Badge "Más pedido" en el servicio Web ────────────── */
.srv__hot {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--red, #CC2233);
  padding: 3px 8px; border-radius: 100px; margin-left: 8px;
  vertical-align: middle; white-space: nowrap;
  animation: xpHotIn 0.6s var(--spring) 0.8s both;
}
.srv__hot::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; animation: xpHotDot 1.8s ease-in-out infinite;
}
@keyframes xpHotIn  { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
@keyframes xpHotDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.srv__nav-item .srv__hot { margin-left: auto; }

/* ── 3. Micro-interacciones del mockup de tienda ─────────── */
/* Producto que se "agrega": pulso en el botón + y lift de la card */
.mk-pcard.adding { transform: translateY(-3px); transition: transform 0.25s var(--spring); }
.mk-pcard.adding .mk-pcard__add { animation: xpAdd 0.45s var(--spring); }
@keyframes xpAdd { 0% { transform: scale(1); } 45% { transform: scale(1.55); } 100% { transform: scale(1); } }

/* Contador del carrito: rebote al sumar */
.mk-web-cart.bump { animation: xpBump 0.4s var(--spring); }
@keyframes xpBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Punto que vuela del producto al carrito (posicionado por JS) */
.mk-web-frame { position: relative; }
.mk-flydot {
  position: absolute; z-index: 30; width: 10px; height: 10px; border-radius: 50%;
  background: var(--red, #CC2233); box-shadow: 0 2px 8px rgba(204,34,51,0.5);
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.4, -0.1, 0.6, 1), opacity 0.55s ease;
}

/* Sheen del botón del hero del mockup al reproducir la demo */
.mock.play .mk-web-hero .btn { position: relative; overflow: hidden; }
.mock.play .mk-web-hero .btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform: translateX(-110%);
  animation: xpSheen 1.4s ease 1.1s 2;
}
@keyframes xpSheen { to { transform: translateX(110%); } }

/* ── 4. Parallax sutil de los mockups al scrollear ───────── */
@supports (animation-timeline: view()) {
  @media (pointer: fine) {
    .srv__panel .mock, .srv__panel .cm3d {
      animation: xpFloat linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes xpFloat {
      from { transform: translateY(16px); }
      to   { transform: translateY(-16px); }
    }
  }
}

/* ── 5. Accesibilidad: sin movimiento si el usuario lo pide ── */
@media (prefers-reduced-motion: reduce) {
  .srv__panel.on .srv__panel-eyebrow, .srv__panel.on .srv__panel-title,
  .srv__panel.on .srv__panel-tag, .srv__panel.on .srv__chips,
  .srv__panel.on .srv__chip, .srv__panel.on .srv__incluye li,
  .srv__panel.on .srv__incluye li svg, .srv__panel.on .srv__note,
  .srv__panel.on .srv-logos, .srv__panel.on .srv-store, .srv__panel.on .srv__cta,
  .srv__hot, .mk-pcard.adding .mk-pcard__add, .mk-web-cart.bump,
  .mock.play .mk-web-hero .btn::after,
  .srv__panel .mock, .srv__panel .cm3d { animation: none !important; }
  .mk-flydot { display: none; }
}