/* ==========================================================================
   K21 — sistema de animación sutil (koncept21.com)
   Un solo lenguaje: fade + translateY, cubic-bezier(0.22,1,0.36,1), 500-600ms.
   Anima solo opacity/transform (compositado). Cero layout shift.
   ========================================================================== */

:root {
  --k21-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --k21-duration: 0.6s;
  --k21-offset: 24px;
}

/* ---- Reveal base: fade-up, una vez ----
   Los widgets sueltos (heading, divider, text-editor...) no tienen control
   "CSS Classes" en Elementor (solo lo tienen container/column/section), así
   que en esos casos se marcan por Advanced -> CSS ID con prefijo "k21-reveal-"
   en vez de clase. :is() une ambos casos en una sola regla. */
:is(.k21-reveal, [id^="k21-reveal-"]) {
  opacity: 0;
  transform: translateY(var(--k21-offset));
  transition: opacity var(--k21-duration) var(--k21-ease),
              transform var(--k21-duration) var(--k21-ease);
}
:is(.k21-reveal, [id^="k21-reveal-"]).is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Reveal fade-only (CTA bands, sin desplazamiento) ---- */
:is(.k21-reveal-fade, [id^="k21-reveal-fade-"]) {
  opacity: 0;
  transition: opacity var(--k21-duration) var(--k21-ease);
}
:is(.k21-reveal-fade, [id^="k21-reveal-fade-"]).is-visible {
  opacity: 1;
}

/* ---- Hero: secuencia única al cargar, no ligada a scroll ----
   El ID codifica el slot de retardo (k21-hero0- ... k21-hero4-) porque el
   propio elemento suele ser un widget suelto (heading, text-editor). */
:is(.k21-hero, [id^="k21-hero0-"], [id^="k21-hero1-"], [id^="k21-hero2-"], [id^="k21-hero3-"], [id^="k21-hero4-"]) {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--k21-duration) var(--k21-ease),
              transform var(--k21-duration) var(--k21-ease);
}
:is(.k21-hero, [id^="k21-hero0-"], [id^="k21-hero1-"], [id^="k21-hero2-"], [id^="k21-hero3-"], [id^="k21-hero4-"]).is-visible {
  opacity: 1;
  transform: translateY(0);
}
:is(.k21-hero-0, [id^="k21-hero0-"]) { transition-delay: 0ms; }
:is(.k21-hero-1, [id^="k21-hero1-"]) { transition-delay: 100ms; }
:is(.k21-hero-2, [id^="k21-hero2-"]) { transition-delay: 200ms; }
:is(.k21-hero-3, [id^="k21-hero3-"]) { transition-delay: 300ms; }
:is(.k21-hero-4, [id^="k21-hero4-"]) { transition-delay: 400ms; }

/* ---- Divisor: se dibuja de 0 a su ancho (scaleX, sin layout shift) ---- */
:is(.k21-line, [id^="k21-line-"]) {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--k21-ease);
  transition-delay: 0.15s;
}
:is(.k21-line, [id^="k21-line-"]).is-visible {
  transform: scaleX(1);
}

/* ---- Gráfico 80/20: barras crecen con scaleX ---- */
:is(.k21-bar, [id^="k21-bar-"]) {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--k21-ease);
}
:is(.k21-bar, [id^="k21-bar-"]).is-visible {
  transform: scaleX(1);
}
:is(.k21-bar-20, [id^="k21-bar20-"]).is-visible {
  transition-delay: 0.2s;
}

/* ---- Stagger de rejillas: 90ms entre ítems, tope en el 6º ---- */
.k21-stagger > .k21-reveal:nth-child(1) { transition-delay: 0ms; }
.k21-stagger > .k21-reveal:nth-child(2) { transition-delay: 90ms; }
.k21-stagger > .k21-reveal:nth-child(3) { transition-delay: 180ms; }
.k21-stagger > .k21-reveal:nth-child(4) { transition-delay: 270ms; }
.k21-stagger > .k21-reveal:nth-child(5) { transition-delay: 360ms; }
.k21-stagger > .k21-reveal:nth-child(6) { transition-delay: 450ms; }
.k21-stagger > .k21-reveal:nth-child(n+7) { transition-delay: 450ms; }

/* ---- Stagger 120ms (pasos numerados 01-04/05) ---- */
.k21-stagger-120 > .k21-reveal:nth-child(1) { transition-delay: 0ms; }
.k21-stagger-120 > .k21-reveal:nth-child(2) { transition-delay: 120ms; }
.k21-stagger-120 > .k21-reveal:nth-child(3) { transition-delay: 240ms; }
.k21-stagger-120 > .k21-reveal:nth-child(4) { transition-delay: 360ms; }
.k21-stagger-120 > .k21-reveal:nth-child(5) { transition-delay: 480ms; }
.k21-stagger-120 > .k21-reveal:nth-child(n+6) { transition-delay: 480ms; }

/* ---- Microinteracciones hover (CSS puro, 200ms) ---- */
.k21-card {
  transition: transform 0.2s var(--k21-ease), box-shadow 0.2s var(--k21-ease);
}
.k21-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -8px rgba(26, 26, 26, 0.18);
}
.k21-card-img {
  overflow: hidden;
}
.k21-card-img img {
  transition: transform 0.2s var(--k21-ease);
}
.k21-card:hover .k21-card-img img {
  transform: scale(1.03);
}

/* Enlaces flecha: la flecha se mueve 4px a la derecha en hover */
.k21-arrow-link .k21-arrow,
.k21-arrow-link i,
.k21-arrow-link svg {
  display: inline-block;
  transition: transform 0.2s var(--k21-ease);
}
.k21-arrow-link:hover .k21-arrow,
.k21-arrow-link:hover i,
.k21-arrow-link:hover svg {
  transform: translateX(4px);
}

/* Botones: mismo easing/duración que el resto del sistema */
.elementor-button {
  transition: background-color 0.2s var(--k21-ease), color 0.2s var(--k21-ease),
              border-color 0.2s var(--k21-ease), transform 0.2s var(--k21-ease) !important;
}

/* ---- Móvil: desplazamiento reducido y duraciones -20% ---- */
@media (max-width: 767px) {
  :root {
    --k21-offset: 12px;
    --k21-duration: 0.48s;
  }
  .k21-stagger > .k21-reveal:nth-child(1) { transition-delay: 0ms; }
  .k21-stagger > .k21-reveal:nth-child(2) { transition-delay: 72ms; }
  .k21-stagger > .k21-reveal:nth-child(3) { transition-delay: 144ms; }
  .k21-stagger > .k21-reveal:nth-child(4) { transition-delay: 216ms; }
  .k21-stagger > .k21-reveal:nth-child(5) { transition-delay: 288ms; }
  .k21-stagger > .k21-reveal:nth-child(6),
  .k21-stagger > .k21-reveal:nth-child(n+7) { transition-delay: 360ms; }
}

/* ---- Accesibilidad: prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  :is(.k21-reveal, [id^="k21-reveal-"]),
  :is(.k21-reveal-fade, [id^="k21-reveal-fade-"]),
  :is(.k21-hero, [id^="k21-hero0-"], [id^="k21-hero1-"], [id^="k21-hero2-"], [id^="k21-hero3-"], [id^="k21-hero4-"]),
  :is(.k21-line, [id^="k21-line-"]),
  :is(.k21-bar, [id^="k21-bar-"]) {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .k21-card,
  .k21-card:hover,
  .k21-card-img img,
  .k21-card:hover .k21-card-img img,
  .k21-arrow-link .k21-arrow,
  .k21-arrow-link:hover .k21-arrow {
    transition: none !important;
    transform: none !important;
  }
}