/* ═══════════════════════════════════════════
   v1.45 · Animaciones de las páginas interiores
   (solo se carga fuera de la home: inc/inner-motion.php)
   Reglas: solo transform/opacity/clip (sin saltos de diseño), el texto
   siempre visible, ligero en móvil y nada con «reducir movimiento».
   ═══════════════════════════════════════════ */

/* ── 1 · Proceso en 4 fases: baraja que se apila + línea de progreso ── */
@media (min-width: 861px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .phases { position: relative; }
  .phases .phase { position: sticky; transform-origin: 50% 0; will-change: transform; }
  .phases .phase:nth-child(1) { top: 104px; }
  .phases .phase:nth-child(2) { top: 122px; }
  .phases .phase:nth-child(3) { top: 140px; }
  .phases .phase:nth-child(4) { top: 158px; }
  .phases .phase:nth-child(5) { top: 176px; }
  /* sombra para separar cada carta de la que tapa */
  .phases .phase { box-shadow: 0 -18px 40px -28px rgba(24, 19, 13, .45); }
}
.phases__rail { display: none; }
@media (min-width: 1180px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .phases__rail {
    display: block; position: absolute; left: -34px; top: 0; bottom: 0; width: 2px;
    background: var(--color-border); border-radius: 2px;
  }
  .phases__rail i {
    position: absolute; inset: 0; border-radius: 2px; background: var(--color-accent);
    transform-origin: 50% 0; transform: scaleY(var(--prog, 0));
  }
}
/* v1.47.6: con el contenido alineado al logo, entre 1180 y 1360 px la línea
   quedaba a ~14 px del borde de la pantalla → más pegada a las tarjetas */
@media (min-width: 1180px) and (max-width: 1360px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .phases__rail { left: -18px; }
}

/* ── 2 · «Todo lo que incluye»: las marcas se dibujan una a una ── */
.svc-includes__list svg path { stroke-dasharray: 24; stroke-dashoffset: var(--tick, 0); }

/* ── 3 · Cierres con cambio de ambiente (crema → espresso) ── */
.svc-cta { position: relative; isolation: isolate; overflow: hidden; }
.svc-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 500px at 50% 0%, #2E2417, #18130D 72%);
  opacity: var(--amb, 0);
}

/* ── 4 · Proyectos: capturas con parallax dentro del marco ── */
.cases-grid .case-card { will-change: transform; }
.cases-grid .case-card__img { transform: scale(1.12) translateY(var(--py, 0%)); }

/* ── 5 · Ficha de concepto: la demo «se abre» ── */
.demo-frame { transform-origin: 50% 0; }