/* Textos de RH del 06/05/2026, integrados el 20/10/2026.
 * Una tarjeta completa por ventana permite leer el descriptivo de Compromiso.
 * La animación se detiene al señalar el bloque o enfocar una tarjeta.
 */
html .desktop .filosofa .valores {
  --rh-card-width: 304px;
  --rh-card-gap: 18px;
}

html .desktop .filosofa .valores .valores-carrusel {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: var(--rh-card-width) !important;
  max-width: 100% !important;
  height: 280px !important;
  gap: var(--rh-card-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  animation: none !important;
}

html .desktop .filosofa .valores .valores-carrusel > article {
  display: flex !important;
  flex: 0 0 var(--rh-card-width) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--rh-card-width) !important;
  min-width: var(--rh-card-width) !important;
  height: 274px !important;
  min-height: 274px !important;
  margin: 0 !important;
  padding: 12px !important;
  gap: 8px !important;
  overflow: visible !important;
  opacity: 1 !important;
  animation: cepron-rh-values 70s linear infinite !important;
}

html .desktop .filosofa .valores .cono-2 {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
}

html .desktop .filosofa .valores .cono-2 img {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  margin: auto !important;
}

html .desktop .filosofa .valores .div-wrapper-3 {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}

html .desktop .filosofa .valores .text-wrapper-13 {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  text-align: center !important;
}

html .desktop .filosofa .valores .text-wrapper-14 {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  text-align: center !important;
}

html .desktop .filosofa .valores:hover .valores-carrusel > article,
html .desktop .filosofa .valores:focus-within .valores-carrusel > article {
  animation-play-state: paused !important;
}

@keyframes cepron-rh-values {
  /* translate evita que los reinicios transform:none del CSS móvil anulen el recorrido. */
  from { translate: 0 0; }
  to { translate: calc(-7 * (var(--rh-card-width) + var(--rh-card-gap))) 0; }
}

@media (max-width: 1024px) {
  html .desktop .filosofa .valores {
    --rh-card-width: min(304px, calc(100vw - 100px));
    --rh-card-gap: 14px;
  }

  html .desktop .filosofa .valores .valores-carrusel {
    height: 336px !important;
  }

  html .desktop .filosofa .valores .valores-carrusel > article {
    height: 330px !important;
    min-height: 330px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html .desktop .filosofa .valores .valores-carrusel {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
  }

  html .desktop .filosofa .valores .valores-carrusel > article {
    transform: none !important;
    translate: none !important;
    animation: none !important;
    scroll-snap-align: start;
  }

  html .desktop .filosofa .valores .valores-carrusel > article[aria-hidden="true"] {
    display: none !important;
  }
}