/* ==========================================================================
   KRAVITTAL — animations.css
   Movimiento discreto: aparición al hacer scroll y microinteracciones.
   Todo se desactiva con «prefers-reduced-motion: reduce».
   Equivalencias en Elementor en ELEMENTOR-MAPPING.md (columna «Animación»).
   ========================================================================== */

/* --- 1. Aparición al entrar en pantalla ---------------------------------- */
/*  La clase .kv-js la añade main.js: sin JavaScript nada se oculta.        */

.kv-js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

.kv-js [data-reveal="fade"]  { transform: none; }
.kv-js [data-reveal="left"]  { transform: translateX(-28px); }
.kv-js [data-reveal="right"] { transform: translateX(28px); }
.kv-js [data-reveal="scale"] { transform: scale(.97); }

.kv-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity   .95s var(--kv-ease-out) var(--kv-delay, 0s),
              transform .95s var(--kv-ease-out) var(--kv-delay, 0s);
  will-change: auto;
}

/* Escalonado: el índice lo escribe main.js en --kv-delay */


/* --- 2. Imágenes al pasar el cursor -------------------------------------- */
/*  Cada sección define su propio acercamiento con el valor y la duración
    exactos del sitio que el cliente ya validó (1,03 a 1,05 según el bloque).
    No hay clase genérica: un único valor para todo obligaba a desviarse de
    esos valores en la mitad de los casos.                                  */


/* --- 3. Enlaces con subrayado progresivo --------------------------------- */

.kv-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size var(--kv-dur) var(--kv-ease);
}

.kv-underline:hover,
.kv-underline:focus-visible { background-size: 100% 1px; }


/* --- 4. Pestañas de «Qué hacemos» ---------------------------------------- */

.tabs__panel[hidden] { display: none; }

.tabs__panel {
  animation: kv-fade-in .5s var(--kv-ease-out) both;
}

@keyframes kv-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}


/* --- 5. Respeto por la preferencia del sistema --------------------------- */

@media (prefers-reduced-motion: reduce) {

  .kv-js [data-reveal],
  .kv-js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Ningún acercamiento ni desplazamiento al pasar el cursor */
  .esencia__figure:hover img,
  .member:hover .member__photo img,
  .member:hover .member__card,
  .areas__item:hover .areas__icon,
  .areas__band:hover .areas__media img,
  .representamos__item:hover .representamos__icon,
  .efecto__item:hover .efecto__icon,
  .contacto__media:hover img,
  .button--primary:hover svg { transform: none; }

  /* La imagen lateral de «Nuestra esencia» conserva el espejado */
  .esencia__aside:hover img { transform: scaleX(-1); }

  .tabs__panel { animation: none; }

  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}