/* Home Page Styles */

/* Hero Section */
.hero {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: visible !important; /* Asegurar que las sombras de los iconos se vean completas */
  margin-top: 0;
  padding-top: 0;
  box-sizing: border-box;
  min-height: 700px;
}

/* Degradado de fondo usando pseudo-elemento para cubrir todo el viewport */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100%;
  max-height: 100%;
  background: linear-gradient(45.47deg, rgba(222, 143, 255, 0.2) 13.397%, rgba(61, 115, 235, 0.2) 86.603%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Escapar del contenedor limitado usando margin negativo basado en viewport */
  margin-left: calc((100vw - 100%) / -2);
  margin-right: calc((100vw - 100%) / -2);
}

.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  /* Escapar del contenedor limitado usando margin negativo basado en viewport */
  margin-left: calc((100vw - 100%) / -2);
  margin-right: calc((100vw - 100%) / -2);
}

.hero--copilot .hero__background,
.hero--agent-support .hero__background,
.hero--nexus .hero__background,
.hero--educacion .hero__background,
.hero--servicio-al-cliente .hero__background,
.hero--ventas .hero__background {
  /* Constrain to hero__content area */
  left: 5%;
  right: 5%;
  width: 90%;
  max-width: 90%;
  overflow: visible !important;
}

.hero__circles {
  position: absolute;
  left: 50%;
  top: -47px;
  transform: translateX(-50%);
  width: 1380px;
  height: 928px;
  /* Center point for orbit animation */
  --orbit-center-x: 50%;
  --orbit-center-y: calc(-47px + 464px); /* top + half height */
}

.hero__circles img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero__degrade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100%;
  min-height: 100%;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 14.815%, rgba(250, 250, 250, 1) 75.543%);
  z-index: 1;
  pointer-events: none;
  /* Escapar del contenedor limitado usando margin negativo basado en viewport */
  margin-left: calc((100vw - 100%) / -2);
  margin-right: calc((100vw - 100%) / -2);
}


.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 60px;
}

/* Product Items - Absolute positioning from Figma with orbit animation */
/* Transform origin is the center of the circles background */
/* Solo aplicar en desktop - mobile tiene sus propios estilos */
@media (min-width: 769px) {
  .hero__product-item {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7.982px !important;
    z-index: 1 !important; /* Detrás del título/hero card */
    /* Resetear posiciones para que JavaScript las calcule */
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    /* Estado inicial: invisible y en el centro de la hero */
    opacity: 0 !important;
    visibility: hidden !important;
    /* Asegurar que el icono y tag estén centrados */
    width: auto !important;
    height: auto !important;
    /* Prevenir escalado excesivo en Safari con zoom negativo */
    max-width: 220px !important;
    max-height: 200px !important;
    contain: none !important; /* Cambiar contain para permitir que las sombras se vean */
    will-change: transform, opacity; /* Solo durante las animaciones iniciales */
    overflow: visible !important; /* Permitir que las sombras de los iconos se vean completas */
    clip-path: none !important;
    backface-visibility: hidden; /* Optimizar renderizado */
    -webkit-font-smoothing: antialiased; /* Suavizar renderizado */
  }
}

/* Estado inicial: todos los product items en el centro, totalmente transparentes */
/* Solo aplicar en desktop - mobile tiene sus propios estilos */
@media (min-width: 769px) {
  .hero__product-item:not([data-product-animated]),
  .hero__product-item[data-product-animated=""] {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Aparecer desde el centro con fade in up */
/* Solo aplicar en desktop - mobile tiene sus propios estilos */
@media (min-width: 769px) {
  .hero__product-item[data-product-animated="appearing"] {
    opacity: 0 !important; /* Empezar transparente */
    visibility: visible !important;
    animation: productItemAppearFromCenter 0.8s ease-out forwards;
    /* Mantener alineación centrada durante la aparición */
    transform: translate(-50%, -50%) !important;
  }

  /* Estado final: moverse a posición radial con animación de arco suave */
  /* Usar cubic-bezier suave para crear una curvatura natural sin rebotes */
  .hero__product-item[data-product-animated="positioned"] {
    opacity: 0.5 !important; /* Empezar con transparencia */
    visibility: visible !important;
    /* Transición simplificada - usar ease-out simple para evitar tildado */
    transition: left 1.5s ease-out, 
                top 1.5s ease-out, 
                opacity 1.5s ease-out;
    /* Forzar límites de tamaño incluso con zoom negativo en Safari */
    max-width: 220px !important;
    max-height: 200px !important;
  }
  
  /* Cuando está listo para float, remover todas las transiciones para evitar conflictos */
  .hero__product-item[data-product-animated="positioned"][data-float-ready="true"] {
    transition: none !important; /* Sin transiciones cuando la animación float está activa */
  }
}

.hero__product-item--copilot {
  /* Posición calculada dinámicamente por JavaScript */
  width: auto;
  min-width: 100px;
  max-width: 200px !important; /* Limitar tamaño máximo para Safari con zoom */
  max-height: 180px !important; /* Limitar altura también */
  --orbit-radius: 500px;
  --orbit-angle: 0deg;
  /* Prevenir escalado excesivo */
  transform-origin: center center;
}

.hero__product-item--agent-support {
  /* Posición calculada dinámicamente por JavaScript */
  width: auto;
  min-width: 120px;
  max-width: 220px !important; /* Limitar tamaño máximo para Safari con zoom */
  max-height: 200px !important; /* Limitar altura también */
  --orbit-radius: 500px;
  --orbit-angle: 120deg;
  /* Prevenir escalado excesivo */
  transform-origin: center center;
}

.hero__product-item--nexus {
  /* Posición calculada dinámicamente por JavaScript */
  width: auto;
  min-width: 100px;
  max-width: 200px !important; /* Limitar tamaño máximo para Safari con zoom */
  max-height: 180px !important; /* Limitar altura también */
  --orbit-radius: 500px;
  --orbit-angle: 240deg;
  /* Prevenir escalado excesivo */
  transform-origin: center center;
}

/* Animación para que los product items aparezcan desde el centro */
@keyframes productItemAppearFromCenter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    max-width: 220px;
    max-height: 200px;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    max-width: 220px;
    max-height: 200px;
  }
}

/* Float animation - suave movimiento ascendente y descendente */

/* Apply float animation to all product items - suave movimiento ascendente y descendente */
/* Optimizado para GPU usando translate3d y movimiento más suave */
@keyframes float {
  0%, 100% {
    transform: translate3d(-50%, -50%, 0);
  }
  50% {
    transform: translate3d(-50%, calc(-50% - 12px), 0); /* Reducido de -15px a -12px para suavidad */
  }
}

/* Animaciones float específicas para cada item con sus transforms finales */
@keyframes floatAgentSupport {
  0%, 100% {
    transform: translate3d(-50%, 90%, 0);
  }
  50% {
    transform: translate3d(-50%, calc(90% - 12px), 0); /* Reducido de -15px a -12px para suavidad */
  }
}

@keyframes floatNexus {
  0%, 100% {
    transform: translate3d(-50%, 120%, 0);
  }
  50% {
    transform: translate3d(-50%, calc(120% - 12px), 0); /* Reducido de -15px a -12px para suavidad */
  }
}

/* Solo aplicar animación float en desktop, después de que JavaScript posicione los elementos */
@media (min-width: 769px) {
  /* Float animation solo cuando ya está en su posición final - aplicar después de la transición */
  /* Opacidad completa y animación float después de que termine la transición */
  /* Animación float deshabilitada temporalmente para pruebas */
  .hero__product-item--copilot[data-product-animated="positioned"][data-float-ready="true"] {
    opacity: 1 !important; /* Opacidad completa al final de la transición */
    transform: translate3d(-50%, -50%, 0) !important; /* Establecer transform base con GPU */
    /* animation: float 4s ease-in-out infinite; */ /* DESHABILITADA TEMPORALMENTE */
    max-width: 200px !important;
    max-height: 180px !important;
    will-change: auto; /* Remover will-change cuando no hay animación */
    transition: none !important; /* Sin transiciones cuando la animación float está activa */
    backface-visibility: hidden; /* Optimizar renderizado */
    -webkit-font-smoothing: antialiased; /* Suavizar renderizado */
    transform-style: preserve-3d; /* Optimizar renderizado 3D */
  }

  .hero__product-item--agent-support[data-product-animated="positioned"][data-float-ready="true"] {
    opacity: 1 !important; /* Opacidad completa al final de la transición */
    transform: translate3d(-50%, 90%, 0) !important; /* Establecer transform base con GPU */
    /* animation: floatAgentSupport 4.2s ease-in-out infinite; */ /* DESHABILITADA TEMPORALMENTE */
    max-width: 220px !important;
    max-height: 200px !important;
    will-change: auto; /* Remover will-change cuando no hay animación */
    transition: none !important; /* Sin transiciones cuando la animación float está activa */
    backface-visibility: hidden; /* Optimizar renderizado */
    -webkit-font-smoothing: antialiased; /* Suavizar renderizado */
    transform-style: preserve-3d; /* Optimizar renderizado 3D */
  }

  .hero__product-item--nexus[data-product-animated="positioned"][data-float-ready="true"] {
    opacity: 1 !important; /* Opacidad completa al final de la transición */
    transform: translate3d(-50%, 120%, 0) !important; /* Establecer transform base con GPU */
    /* animation: floatNexus 3.8s ease-in-out infinite; */ /* DESHABILITADA TEMPORALMENTE */
    max-width: 200px !important;
    max-height: 180px !important;
    will-change: auto; /* Remover will-change cuando no hay animación */
    transition: none !important; /* Sin transiciones cuando la animación float está activa */
    backface-visibility: hidden; /* Optimizar renderizado */
    -webkit-font-smoothing: antialiased; /* Suavizar renderizado */
    transform-style: preserve-3d; /* Optimizar renderizado 3D */
  }
  
  /* Asegurar opacidad completa para todos los items posicionados después de la transición */
  .hero__product-item[data-product-animated="positioned"] {
    opacity: 1 !important; /* Forzar opacidad completa después de la transición */
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero__product-item {
    animation: none !important;
  }
}

.hero__product-icon {
  width: 60px;
  height: 60px;
  max-width: 60px;
  max-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--component-colors-elements-neutral-white-dark);
  border-radius: 851.724px; /* Circular */
  flex-shrink: 0;
  overflow: visible !important; /* Permitir que las sombras se vean completas */
  position: relative; /* Para posicionar el pseudo-elemento de la sombra */
  /* Usar box-shadow en el círculo */
  box-shadow: 0px 2.063px 30.942px 0px rgba(89, 86, 142, 0.46);
}

.hero__product-icon img {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
  display: block;
}

.hero__product-tag {
  display: flex;
  align-items: flex-end;
  gap: 3.618px;
  border-radius: 999px;
  border: 1px solid var(--borders-white, #FAFAFA);
  background: var(--grandient-brand-light, linear-gradient(60deg, var(--gradients-brand-start-light, rgba(222, 143, 255, 0.20)) 13.4%, var(--gradients-brand-end-light, rgba(61, 115, 235, 0.20)) 86.6%));
  padding: 7.384px 11.61px 8.707px;
  width: fit-content;
  white-space: nowrap;
  /* Asegurar que el tag esté centrado horizontalmente */
  margin-left: auto;
  margin-right: auto;
}

.hero__product-tag-brand {
  font-family: var(--types-brand-font);
  font-weight: var(--types-font-weight-medium);
  font-size: 14px;
  line-height: 1;
  color: var(--text-icons-neutral-800, #2E2C2C);
  letter-spacing: 0.2211px;
  white-space: nowrap;
  display: none !important;
}

.hero__product-tag-title {
  font-family: var(--types-brand-font);
  font-weight: var(--types-font-weight-medium);
  font-size: 14px;
  line-height: 1;
  color: var(--text-icons-neutral-800, #2E2C2C);
  letter-spacing: 0.8846px;
  white-space: nowrap;
  text-transform: lowercase;
}

.hero__card {
  background-color: transparent;
  border-radius: 0;
  padding: 24px;
  /* width: 1150px; */
  max-width: 70%;
  position: relative;
  z-index: 10 !important; /* Delante de los product items */
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  box-shadow: none;
  position: relative;
  z-index: 1;
  margin-top: 200px;
}

/* Mobile / tablet: hero card más ancha */
@media (max-width: 900px) {
  .hero__card {
    max-width: 90%;
  }
}

/* Fade in up animation para hero__card en todas las páginas */
.hero__card[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hero__card[data-animate="fade-up"][data-animated="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* Mantener compatibilidad con estilos antiguos si no tiene data-animate */
.hero__card:not([data-animate]) {
  opacity: 1;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.hero__card:not([data-animate])[data-animated="true"] {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%);
}

.hero__card-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  width: 100%;
}

.hero__card-title {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-neutral-800);
  text-align: center;
  white-space: pre-wrap;
}

.hero__card-description {
  font-family: var(--body-1-regular-font-family);
  font-size: var(--body-1-regular-font-size);
  font-weight: var(--body-1-regular-font-weight);
  line-height: var(--body-1-regular-line-height);
  letter-spacing: var(--body-1-regular-letter-spacing);
  color: var(--text-icons-neutral-800);
  text-align: center;
  max-width: 100%;
}

.hero__card-action {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero__card-action-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__card-action .button {
  margin: 0;
}

.hero__card-pointer {
  position: absolute;
  width: 52px;
  height: 52px;
  object-fit: contain;
  right: 310px;
  top: 120%;
  transform: translateY(-50%);
  z-index: 2;
  display: none !important;
}

/* Hero Section - Agent Support (Two Column Layout) */
.hero--agent-support {
  position: relative;
  width: 100%;
  min-height: 50vh;
  padding: 60px 80px 80px;
  overflow: visible;
  background: none !important;
  background-color: #fafafa !important;
  background-size: unset !important;
}

.hero--agent-support::before {
  display: none !important;
}

.hero--copilot,
.hero--nexus,
.hero--educacion,
.hero--ventas,
.hero--servicio-al-cliente,
.hero--partners {
  position: relative;
  width: 100%;
  min-height: 50vh;
  padding: 60px 80px 80px;
  overflow: visible;
  background: none !important;
  background-color: #fafafa !important;
  background-size: unset !important;
}

/* Remover gradient ::before de todos los heros de productos/soluciones/partner */
.hero--copilot::before,
.hero--nexus::before,
.hero--educacion::before,
.hero--ventas::before,
.hero--servicio-al-cliente::before,
.hero--partners::before {
  display: none !important;
}

/* Librería de prompts y clientes SÍ tienen gradient */
.hero--libreria-de-prompts {
  position: relative;
  width: 100%;
  min-height: 50vh;
  padding: 60px 80px 80px;
  overflow: visible;
  background: none !important;
  background-color: transparent !important;
  background-size: unset !important;
  height: 600px;
  max-height: 500px;
  padding: 0;
}

/* Degradado de fondo para librería de prompts usando pseudo-elemento */
.hero--libreria-de-prompts::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  max-height: 100%;
  background: linear-gradient(35.82deg, rgba(222, 143, 255, 0.2) 13.397%, rgba(61, 115, 235, 0.2) 86.603%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero--libreria-de-prompts .hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.hero--libreria-de-prompts .hero__card {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.hero--libreria-de-prompts .hero__card-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  width: 100%;
}

.hero--libreria-de-prompts .hero__card-title {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-neutral-900);
  text-align: center;
  max-width: 100%;
}

.hero--libreria-de-prompts .hero__card-description {
  font-family: var(--body-1-regular-font-family);
  font-size: var(--body-1-regular-font-size);
  font-weight: var(--body-1-regular-font-weight);
  line-height: 1.55;
  letter-spacing: var(--body-1-regular-letter-spacing);
  color: var(--text-icons-neutral-800);
  text-align: center;
  max-width: 100%;
}

.hero--partners {
  position: relative;
  width: 100%;
  min-height: 50vh;
  max-height: 600px;
  padding: 120px 96px 80px;
  overflow: visible;
  background: none !important;
  background-color: var(--surfaces-white) !important;
  background-size: unset !important;
  border-radius: 16px;
}

/* Reducir altura de hero en pantallas entre 770px y 1024px */
@media (min-width: 771px) and (max-width: 1024px) {
  .hero--libreria-de-prompts {
    height: auto !important;
    min-height: auto !important;
    max-height: 400px !important;
    padding: 60px 48px !important;
  }

  .hero--libreria-de-prompts .hero__content {
    height: auto !important;
    padding: 0 !important;
  }

  .hero--partners {
    max-height: 400px !important;
    padding: 60px 48px 40px !important;
  }

  .hero--partners .hero__content {
    height: auto !important;
  }
}

/* Estilos específicos para rango 771px-860px para evitar superposición */
@media (min-width: 771px) and (max-width: 860px) {
  .hero--partners {
    padding: 60px 48px 60px !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 60px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .hero--partners .hero__content {
    gap: 40px;
    padding-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
  }

  .hero--partners .hero__card {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Asegurar que benefits section no se superponga */
  .benefits-section--partners {
    padding-top: 60px !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 10 !important;
  }
}

.hero--partners .hero__background {
  display: none;
}

.hero--agent-support .hero__content,
.hero--copilot .hero__content,
.hero--nexus .hero__content,
.hero--educacion .hero__content,
.hero--servicio-al-cliente .hero__content,
.hero--ventas .hero__content,
.hero--partners .hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 80px;
  padding-bottom: 0;
  justify-content: space-between;
}

.hero--copilot .hero__content,
.hero--nexus .hero__content,
.hero--agent-support .hero__content,
.hero--ventas .hero__content,
.hero--educacion .hero__content,
.hero--servicio-al-cliente .hero__content {
  overflow: visible;
}

/* Padding lateral para pantallas grandes */
@media (min-width: 1441px) {
  .hero__content,
  .hero--agent-support .hero__content,
  .hero--copilot .hero__content,
  .hero--nexus .hero__content,
  .hero--educacion .hero__content,
  .hero--servicio-al-cliente .hero__content,
  .hero--ventas .hero__content,
  .hero--partners .hero__content,
  .hero--libreria-de-prompts .hero__content {
    padding-left: 48px;
    padding-right: 48px;
  }
}

.hero--agent-support .hero__card,
.hero--copilot .hero__card,
.hero--nexus .hero__card,
.hero--educacion .hero__card,
.hero--servicio-al-cliente .hero__card,
.hero--ventas .hero__card,
.hero--partners .hero__card {
  flex: 1;
  max-width: 48%;
  margin-top: 0;
  align-items: flex-start;
  text-align: left;
  padding: 0;
}

.hero--agent-support .hero__card-content,
.hero--copilot .hero__card-content,
.hero--nexus .hero__card-content,
.hero--educacion .hero__card-content,
.hero--servicio-al-cliente .hero__card-content,
.hero--ventas .hero__card-content,
.hero--partners .hero__card-content {
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.hero--agent-support .hero__card-title,
.hero--copilot .hero__card-title,
.hero--nexus .hero__card-title,
.hero--educacion .hero__card-title,
.hero--servicio-al-cliente .hero__card-title,
.hero--ventas .hero__card-title,
.hero--partners .hero__card-title {
  text-align: left;
}

.hero--agent-support .hero__card-description,
.hero--copilot .hero__card-description,
.hero--nexus .hero__card-description,
.hero--educacion .hero__card-description,
.hero--servicio-al-cliente .hero__card-description,
.hero--ventas .hero__card-description,
.hero--partners .hero__card-description {
  text-align: left;
}

.hero--agent-support .hero__card-action,
.hero--copilot .hero__card-action,
.hero--nexus .hero__card-action,
.hero--educacion .hero__card-action,
.hero--servicio-al-cliente .hero__card-action,
.hero--ventas .hero__card-action,
.hero--partners .hero__card-action {
  justify-content: flex-start;
}

.hero--agent-support .hero__illustration,
.hero--copilot .hero__illustration,
.hero--nexus .hero__illustration,
.hero--educacion .hero__illustration,
.hero--servicio-al-cliente .hero__illustration,
.hero--ventas .hero__illustration,
.hero--partners .hero__illustration {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  max-width: 48%;
}

.hero--agent-support .hero__illustration img,
.hero--copilot .hero__illustration img,
.hero--nexus .hero__illustration img,
.hero--educacion .hero__illustration img,
.hero--servicio-al-cliente .hero__illustration img,
.hero--ventas .hero__illustration img,
.hero--partners .hero__illustration img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  /* border-radius: 16px; */
}
.hero--partners .hero__illustration img{
  width: 90% !important;
  border-radius: 24px !important;
}

/* Copilot, Nexus, Agent Support, Ventas, Educación, Servicio al Cliente Hero - Circuit and Main Image Layout */
.hero--copilot .hero__illustration,
.hero--nexus .hero__illustration,
.hero--agent-support .hero__illustration,
.hero--ventas .hero__illustration,
.hero--educacion .hero__illustration,
.hero--servicio-al-cliente .hero__illustration {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Center point for ellipse orbit */
  --orbit-center-x: 50%;
  --orbit-center-y: 50%;
}

.hero--copilot .hero__circuit,
.hero--nexus .hero__circuit,
.hero--agent-support .hero__circuit,
.hero--ventas .hero__circuit,
.hero--educacion .hero__circuit,
.hero--servicio-al-cliente .hero__circuit {
  position: absolute;
  z-index: 0;
}

.hero--copilot .hero__circuit--top {
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 532px;
  width: 100%;
  opacity: 0.7;
}

.hero--copilot .hero__circuit--bottom {
  bottom: -5%;
  left: 0%;
  max-width: 230px;
  width: 100%;
  opacity: 0.7;
}

.hero--nexus .hero__circuit--top {
  top: -20%;
  left: 60%;
  transform: translateX(-50%);
  max-width: 718px;
  width: 100%;
  opacity: 0.7;
  max-height: 260px;
}

.hero--nexus .hero__circuit--bottom {
  bottom: -22%;
  left: 0%;
  max-width: 231px;
  width: 100%;
  opacity: 0.7;
  max-height: 136px;
}

.hero--agent-support .hero__circuit--top {
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 754px;
  width: 100%;
  opacity: 0.7;
  max-height: 230px;
}

.hero--agent-support .hero__circuit--bottom {
  bottom: -12%;
  left: 0%;
  max-width: 224px;
  width: 100%;
  opacity: 0.7;
  max-height: 360px;
}

.hero--ventas .hero__circuit--top {
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 368px;
  width: 100%;
  opacity: 0.7;
}

.hero--ventas .hero__circuit--bottom {
  bottom: -22%;
  left: 20%;
  max-width: 351px;
  width: 100%;
  opacity: 0.7;
  max-height: 135px;
}

.hero--educacion .hero__circuit--top {
  bottom: 70%;
  left: 70%;
  transform: translateX(-50%);
  max-width: 27px;
  width: 100%;
  opacity: 0.7
}

.hero--educacion .hero__circuit--bottom {
  bottom: -20%;
  left: -6%;
  max-width: 137px;
  width: 100%;
  opacity: 0.7;
}

.hero--servicio-al-cliente .hero__circuit--top {
  top: -15%;
  left: 60%;
  transform: translateX(-50%);
  max-width: 348px;
  width: 100%;
  opacity: 0.7;
  max-height: 125px;
}

.hero--servicio-al-cliente .hero__circuit--bottom {
  bottom: -30%;
  left: -3%;
  max-width: 137px;
  width: 100%;
  opacity: 0.7;
  max-height: 230px;
}

.hero--copilot .hero__circuit img,
.hero--nexus .hero__circuit img,
.hero--agent-support .hero__circuit img,
.hero--ventas .hero__circuit img,
.hero--educacion .hero__circuit img,
.hero--servicio-al-cliente .hero__circuit img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.hero--copilot .hero__main-image,
.hero--nexus .hero__main-image,
.hero--agent-support .hero__main-image,
.hero--ventas .hero__main-image,
.hero--educacion .hero__main-image,
.hero--servicio-al-cliente .hero__main-image {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 600px;
}

.hero--copilot .hero__main-image img,
.hero--nexus .hero__main-image img,
.hero--agent-support .hero__main-image img,
.hero--ventas .hero__main-image img,
.hero--educacion .hero__main-image img,
.hero--servicio-al-cliente .hero__main-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  /* border-radius: 16px; */
}

@media (max-width: 768px) {
  /* Ajustar hero para mobile */
  .hero {
    min-height: 400px;
    height: auto;
    padding: 80px 16px 40px;
    position: relative;
    overflow: visible;
  }
  
  /* Ocultar circuitos en mobile */
  .hero--copilot .hero__circuit,
  .hero--nexus .hero__circuit,
  .hero--agent-support .hero__circuit,
  .hero--ventas .hero__circuit,
  .hero--educacion .hero__circuit,
  .hero--servicio-al-cliente .hero__circuit {
    display: none !important;
  }

  /* Ocultar elipses en mobile para partners */
  .hero--partners .hero__ellipse {
    display: none !important;
  }
  
  /* Ajustar hero content para mobile */
  .hero__content {
    padding-bottom: 40px;
    justify-content: flex-start;
    padding-top: 0;
    position: relative;
    z-index: 1;
  }

  
  /* Product items posicionados según Figma en mobile */
  /* Estilo tag horizontal: icono al lado del nombre */
  /* IMPORTANTE: Sobrescribir TODOS los estilos de desktop */
  .hero__product-item,
  .hero__product-item:not([data-product-animated]),
  .hero__product-item[data-product-animated=""],
  .hero__product-item[data-product-animated="appearing"],
  .hero__product-item[data-product-animated="positioned"] {
    position: absolute !important;
    display: flex !important;
    flex-direction: row !important; /* Tag horizontal: icono al lado del nombre */
    align-items: center !important;
    justify-content: center !important; /* Centrar el contenido del item */
    width: auto !important;
    height: auto !important;
    min-height: 48px;
    gap: 8px !important; /* Espacio horizontal entre icono y tag */
    z-index: 10 !important; /* Arriba de la card */
    /* Estado inicial: JavaScript establecerá las posiciones iniciales */
    /* Las posiciones finales están definidas en las clases específicas */
    /* Resetear valores de desktop */
    right: auto !important;
    bottom: auto !important;
    /* Deshabilitar animaciones de desktop */
    animation: none !important;
    /* Permitir transiciones para la animación de JavaScript */
    /* Resetear todos los estilos de desktop que puedan interferir */
    text-align: center !important;
  }
  
  /* Resetear estados de animación en mobile */
  .hero__product-item[data-product-animated="appearing"],
  .hero__product-item[data-product-animated="positioned"],
  .hero__product-item:not([data-product-animated]) {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Asegurar que el pointer se vea en mobile */
  .hero__card-pointer {
    display: block ;
    visibility: visible !important;
    opacity: 1 !important;
    right: -40px;
    display: none !important;
  }
  
  /* Posiciones en mobile: items distribuidos horizontalmente como en Figma */
  /* Estilo tag horizontal: icono al lado del nombre */
  /* IMPORTANTE: Usar !important para sobrescribir cualquier estilo inline de JavaScript */
  .hero__product-item--copilot {
    left: 40% !important;
    top: 6% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
  }
  
  .hero__product-item--nexus {
    left: 30% !important;
    top: 24% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
  }
  
  .hero__product-item--agent-support {
    left: 65% !important;
    top: 16% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
  }
  
  /* Asegurar que la card esté debajo de los items - solo para home */
  .page-home .hero__card {
    margin-top: 180px !important; /* Espacio suficiente para los 3 items apilados (110px + ~70px de altura) */
    z-index: 5 !important; /* Detrás de los items pero delante del fondo */
    position: relative;
  }

  /* Cards de otras hero sections */
  .hero--copilot .hero__card,
  .hero--nexus .hero__card,
  .hero--agent-support .hero__card,
  .hero--educacion .hero__card,
  .hero--servicio-al-cliente .hero__card,
  .hero--ventas .hero__card,
  .hero--partners .hero__card {
    margin-top: 80px !important;
    z-index: 1;
    position: relative;
  }
  
  /* Asegurar que el pointer se vea en mobile */
  .hero__card-pointer {
    display: block ;
    visibility: visible !important;
    opacity: 1 !important;
    right: -30px !important;
    display: none !important;
  }

  /* Circuit positioning and scaling for mobile */
  .hero--copilot .hero__circuit--top {
    top: -3%;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(532px, 85vw);
    width: 85%;
    opacity: 0.7;
  }

  .hero--nexus .hero__circuit--top {
    top: -3%;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(718px, 90vw);
    width: 90%;
    opacity: 0.7;
  }

  .hero--agent-support .hero__circuit--top {
    top: -3%;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(754px, 90vw);
    width: 90%;
    opacity: 0.7;
  }

  .hero--ventas .hero__circuit--top {
    top: -3%;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(368px, 75vw);
    width: 75%;
    opacity: 0.7;
  }

  .hero--educacion .hero__circuit--top {
    top: -3%;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(27px, 8vw);
    width: 8%;
    opacity: 0.7;
  }

  .hero--servicio-al-cliente .hero__circuit--top {
    top: -3%;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(348px, 75vw);
    width: 75%;
    opacity: 0.7;
  }

  .hero--copilot .hero__circuit--bottom {
    bottom: 1% !important;
    left: 10% !important;
    max-width: min(230px, 60vw) !important;
    width: 60% !important;
    transform: none !important;
    opacity: 0.7 !important;
  }

  .hero--nexus .hero__circuit--bottom {
    bottom: 1%;
    left: 10%;
    max-width: min(231px, 60vw);
    width: 60%;
    opacity: 0.7;
  }

  .hero--agent-support .hero__circuit--bottom {
    bottom: 1%;
    left: 10%;
    max-width: min(224px, 60vw);
    width: 60%;
    opacity: 0.7;
  }

  .hero--ventas .hero__circuit--bottom {
    bottom: 1%;
    left: 10%;
    max-width: min(351px, 70vw);
    width: 70%;
    opacity: 0.7;
  }

  .hero--educacion .hero__circuit--bottom {
    bottom: 1%;
    left: 10%;
    max-width: min(137px, 40vw);
    width: 40%;
    opacity: 0.7;
  }

  .hero--servicio-al-cliente .hero__circuit--bottom {
    bottom: 1%;
    left: 10%;
    max-width: min(137px, 40vw);
    width: 40%;
    opacity: 0.7;
  }
  
  /* Resetear estilos de icono y tag para mobile - layout horizontal */
  .hero__product-item .hero__product-icon {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    order: 0 !important;
    /* Tamaño más pequeño para mobile */
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    background-color: var(--component-colors-elements-neutral-white-dark) !important;
    box-shadow: 0px 0.758px 11.368px 0px rgba(89, 86, 142, 0.46) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important; /* El gap del item maneja el espaciado */
  }
  
  .hero__product-item .hero__product-icon img {
    width: 17.778px !important;
    height: 17.778px !important;
    max-width: 17.778px !important;
    max-height: 17.778px !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  .hero__product-item .hero__product-tag {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    order: 1 !important;
    display: flex !important;
    flex-direction: row !important; /* Tag horizontal: brand y title lado a lado */
    align-items: flex-end !important;
    gap: 3.618px !important;
    padding: 7.384px 11.61px 8.707px !important;
    margin: 0 !important; /* Sin márgenes, el gap del item maneja el espaciado */
    margin-left: 0 !important; /* Resetear auto margin de desktop */
    margin-right: 0 !important; /* Resetear auto margin de desktop */
    width: fit-content !important;
    white-space: nowrap !important;
  }
  
  /* En mobile, invertir el orden interno solo para agent-support:
     primero el tag, luego el icono. Debe ir después de los resets generales
     y usar !important para sobrescribirlos. */
  .hero__product-item--agent-support .hero__product-icon {
    order: 2 !important;
  }
  
  .hero__product-item--agent-support .hero__product-tag {
    order: 1 !important;
  }
  
  .hero--agent-support .hero__illustration,
  .hero--copilot .hero__illustration,
  .hero--nexus .hero__illustration,
  .hero--educacion .hero__illustration,
  .hero--servicio-al-cliente .hero__illustration,
  .hero--ventas .hero__illustration,
  .hero--partners .hero__illustration {
    max-width: 100%;
    width: 100%;
  }

  .hero--agent-support .hero__illustration img,
  .hero--copilot .hero__illustration img,
  .hero--nexus .hero__illustration img,
  .hero--educacion .hero__illustration img,
  .hero--servicio-al-cliente .hero__illustration img,
  .hero--ventas .hero__illustration img,
  .hero--partners .hero__illustration img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  .hero__card-title {
    font-size: 24px !important;
  }

  .hero__card-description {
    font-size: 16px !important;
  }
}

/* Hero Ellipses Background for Agent Support & Copilot & Nexus & Educacion & Servicio al Cliente & Ventas & Partners */
.hero--agent-support .hero__ellipse,
.hero--copilot .hero__ellipse,
.hero--nexus .hero__ellipse,
.hero--educacion .hero__ellipse,
.hero--servicio-al-cliente .hero__ellipse,
.hero--ventas .hero__ellipse,
.hero--partners .hero__ellipse {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero--agent-support .hero__ellipse--large,
.hero--copilot .hero__ellipse--large,
.hero--nexus .hero__ellipse--large,
.hero--educacion .hero__ellipse--large,
.hero--servicio-al-cliente .hero__ellipse--large,
.hero--ventas .hero__ellipse--large,
.hero--partners .hero__ellipse--large {
  width: 50%;
  height: 50%;
  max-width: 700px;
  aspect-ratio: 1;
  background: linear-gradient(60deg, #DE8FFF 13.4%, #3D73EB 86.6%);
  opacity: 0.45;
  filter: blur(60px);
  right: 10%;
  top: 20%;
  animation: ellipseOrbitLarge 20s linear infinite;
  transform-origin: center center;
}

.hero--agent-support .hero__ellipse--large,
.hero--nexus .hero__ellipse--large,
.hero--educacion .hero__ellipse--large,
.hero--servicio-al-cliente .hero__ellipse--large,
.hero--ventas .hero__ellipse--large {
  animation: ellipseOrbitCopilotLarge 20s linear infinite;
  right: auto;
  top: 50%;
  left: 74%;
  bottom: auto;
  max-width: 700px;
  width: 50%;
  height: 50%;
  max-height: 700px;
}

.hero--copilot .hero__ellipse--large {
  animation: ellipseOrbitCopilotLarge 20s linear infinite;
  /* Position relative to illustration center within hero__content */
  right: auto;
  top: 50%;
  left: 74%; /* Center of illustration area (approximately 74% from left of hero__content) */
  bottom: auto;
  /* Keep within hero content bounds */
  max-width: 700px;
  width: 50%;
  height: 50%;
  max-height: 700px;
}

.hero--agent-support .hero__ellipse--small,
.hero--copilot .hero__ellipse--small,
.hero--nexus .hero__ellipse--small,
.hero--educacion .hero__ellipse--small,
.hero--servicio-al-cliente .hero__ellipse--small,
.hero--ventas .hero__ellipse--small,
.hero--partners .hero__ellipse--small {
  width: 40%;
  height: 40%;
  max-width: 500px;
  aspect-ratio: 1;
  background: linear-gradient(60deg, #DE8FFF 13.4%, #3D73EB 86.6%);
  opacity: 0.45;
  filter: blur(60px);
  right: 5%;
  bottom: 15%;
  animation: ellipseOrbitSmall 15s linear infinite reverse;
  transform-origin: center center;
}

.hero--agent-support .hero__ellipse--small,
.hero--nexus .hero__ellipse--small,
.hero--educacion .hero__ellipse--small,
.hero--servicio-al-cliente .hero__ellipse--small,
.hero--ventas .hero__ellipse--small {
  animation: ellipseOrbitCopilotSmall 16s linear infinite;
  right: auto;
  bottom: auto;
  left: 74%;
  top: 50%;
  max-width: 500px;
  width: 40%;
  height: 40%;
  max-height: 500px;
  opacity: 0.45;
}

.hero--copilot .hero__ellipse--small {
  animation: ellipseOrbitCopilotSmall 16s linear infinite;
  /* Position relative to illustration center within hero__content */
  right: auto;
  bottom: auto;
  left: 74%; /* Center of illustration area */
  top: 50%;
  /* Keep within hero content bounds */
  max-width: 500px;
  width: 40%;
  height: 40%;
  max-height: 500px;
}

@keyframes ellipseOrbitLarge {
  0% {
    transform: rotate(0deg) translateX(0) translateY(0);
  }
  25% {
    transform: rotate(90deg) translateX(30px) translateY(-30px);
  }
  50% {
    transform: rotate(180deg) translateX(0) translateY(-60px);
  }
  75% {
    transform: rotate(270deg) translateX(-30px) translateY(-30px);
  }
  100% {
    transform: rotate(360deg) translateX(0) translateY(0);
  }
}

@keyframes ellipseOrbitSmall {
  0% {
    transform: rotate(0deg) translateX(0) translateY(0);
  }
  25% {
    transform: rotate(-90deg) translateX(-20px) translateY(20px);
  }
  50% {
    transform: rotate(-180deg) translateX(0) translateY(40px);
  }
  75% {
    transform: rotate(-270deg) translateX(20px) translateY(20px);
  }
  100% {
    transform: rotate(-360deg) translateX(0) translateY(0);
  }
}

@keyframes ellipseOrbitCopilotLarge {
  0% {
    transform: translate(-50%, -50%) translateX(220px) translateY(0) scale(0.8);
    opacity: 0.3;
  }
  12.5% {
    transform: translate(-50%, -50%) translateX(156px) translateY(-156px) scale(1.1);
    opacity: 0.5;
  }
  25% {
    transform: translate(-50%, -50%) translateX(0) translateY(-220px) scale(1.3);
    opacity: 0.6;
  }
  37.5% {
    transform: translate(-50%, -50%) translateX(-156px) translateY(-156px) scale(1.1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) translateX(-220px) translateY(0) scale(0.8);
    opacity: 0.3;
  }
  62.5% {
    transform: translate(-50%, -50%) translateX(-156px) translateY(156px) scale(1.1);
    opacity: 0.5;
  }
  75% {
    transform: translate(-50%, -50%) translateX(0) translateY(220px) scale(1.3);
    opacity: 0.6;
  }
  87.5% {
    transform: translate(-50%, -50%) translateX(156px) translateY(156px) scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) translateX(220px) translateY(0) scale(0.8);
    opacity: 0.3;
  }
}

@keyframes ellipseOrbitCopilotSmall {
  0% {
    transform: translate(-50%, -50%) translateX(0) translateY(-220px) scale(0.7);
    opacity: 0.25;
  }
  12.5% {
    transform: translate(-50%, -50%) translateX(156px) translateY(-156px) scale(1.15);
    opacity: 0.5;
  }
  25% {
    transform: translate(-50%, -50%) translateX(220px) translateY(0) scale(1.4);
    opacity: 0.6;
  }
  37.5% {
    transform: translate(-50%, -50%) translateX(156px) translateY(156px) scale(1.15);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) translateX(0) translateY(220px) scale(0.7);
    opacity: 0.25;
  }
  62.5% {
    transform: translate(-50%, -50%) translateX(-156px) translateY(156px) scale(1.15);
    opacity: 0.5;
  }
  75% {
    transform: translate(-50%, -50%) translateX(-220px) translateY(0) scale(1.4);
    opacity: 0.6;
  }
  87.5% {
    transform: translate(-50%, -50%) translateX(-156px) translateY(-156px) scale(1.15);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) translateX(0) translateY(-220px) scale(0.7);
    opacity: 0.25;
  }
}

/* Tablet orbit animations with larger radius */
@keyframes ellipseOrbitCopilotLargeTablet {
  0% {
    transform: translate(-50%, -50%) translateX(300px) translateY(0) scale(0.8);
    opacity: 0.3;
  }
  12.5% {
    transform: translate(-50%, -50%) translateX(212px) translateY(-212px) scale(1.1);
    opacity: 0.5;
  }
  25% {
    transform: translate(-50%, -50%) translateX(0) translateY(-300px) scale(1.3);
    opacity: 0.6;
  }
  37.5% {
    transform: translate(-50%, -50%) translateX(-212px) translateY(-212px) scale(1.1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) translateX(-300px) translateY(0) scale(0.8);
    opacity: 0.3;
  }
  62.5% {
    transform: translate(-50%, -50%) translateX(-212px) translateY(212px) scale(1.1);
    opacity: 0.5;
  }
  75% {
    transform: translate(-50%, -50%) translateX(0) translateY(300px) scale(1.3);
    opacity: 0.6;
  }
  87.5% {
    transform: translate(-50%, -50%) translateX(212px) translateY(212px) scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) translateX(300px) translateY(0) scale(0.8);
    opacity: 0.3;
  }
}

@keyframes ellipseOrbitCopilotSmallTablet {
  0% {
    transform: translate(-50%, -50%) translateX(0) translateY(-300px) scale(0.7);
    opacity: 0.25;
  }
  12.5% {
    transform: translate(-50%, -50%) translateX(212px) translateY(-212px) scale(1.15);
    opacity: 0.5;
  }
  25% {
    transform: translate(-50%, -50%) translateX(300px) translateY(0) scale(1.4);
    opacity: 0.6;
  }
  37.5% {
    transform: translate(-50%, -50%) translateX(212px) translateY(212px) scale(1.15);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) translateX(0) translateY(300px) scale(0.7);
    opacity: 0.25;
  }
  62.5% {
    transform: translate(-50%, -50%) translateX(-212px) translateY(212px) scale(1.15);
    opacity: 0.5;
  }
  75% {
    transform: translate(-50%, -50%) translateX(-300px) translateY(0) scale(1.4);
    opacity: 0.6;
  }
  87.5% {
    transform: translate(-50%, -50%) translateX(-212px) translateY(-212px) scale(1.15);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) translateX(0) translateY(-300px) scale(0.7);
    opacity: 0.25;
  }
}


@media (max-width: 1248px) {
  /* Larger orbit radius for tablet */
  /* Center the orbit point in tablet since layout is column */
  .hero--copilot .hero__ellipse--large,
  .hero--nexus .hero__ellipse--large,
  .hero--agent-support .hero__ellipse--large,
  .hero--educacion .hero__ellipse--large,
  .hero--servicio-al-cliente .hero__ellipse--large,
  .hero--ventas .hero__ellipse--large {
    animation: ellipseOrbitCopilotLargeTablet 20s linear infinite;
    left: 50% !important;
    right: auto;
  }

  .hero--copilot .hero__ellipse--small,
  .hero--nexus .hero__ellipse--small,
  .hero--agent-support .hero__ellipse--small,
  .hero--educacion .hero__ellipse--small,
  .hero--servicio-al-cliente .hero__ellipse--small,
  .hero--ventas .hero__ellipse--small {
    animation: ellipseOrbitCopilotSmallTablet 16s linear infinite;
    left: 50% !important;
    right: auto;
  }

  /* Reducir gap de 80px a 40px en pantallas menores a 1248px */
  .hero--agent-support .hero__content,
  .hero--copilot .hero__content,
  .hero--nexus .hero__content,
  .hero--educacion .hero__content,
  .hero--servicio-al-cliente .hero__content,
  .hero--ventas .hero__content,
  .hero--partners .hero__content {
    gap: 40px;
  }


  .hero--agent-support .hero__illustration,
  .hero--copilot .hero__illustration,
  .hero--nexus .hero__illustration,
  .hero--educacion .hero__illustration,
  .hero--servicio-al-cliente .hero__illustration,
  .hero--ventas .hero__illustration,
  .hero--partners .hero__illustration {
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  /* Cambiar a column layout en pantallas más chicas de 860px */
  .hero--agent-support .hero__content,
  .hero--copilot .hero__content,
  .hero--nexus .hero__content,
  .hero--educacion .hero__content,
  .hero--servicio-al-cliente .hero__content,
  .hero--ventas .hero__content,
  .hero--partners .hero__content {
    flex-direction: column;
    gap: 60px;
    align-items: center;
  }
  .hero--agent-support .hero__main-image img,
  .hero--copilot .hero__main-image img,
  .hero--nexus .hero__main-image img,
  .hero--educacion .hero__main-image img,
  .hero--servicio-al-cliente .hero__main-image img,
  .hero--ventas .hero__main-image img,
  .hero--partners .hero__illustration img {
    width: 70%;
  }
  /* Ocultar circuit cuando la hero está en modo columna */
  .hero--copilot .hero__circuit,
  .hero--nexus .hero__circuit,
  .hero--agent-support .hero__circuit,
  .hero--ventas .hero__circuit,
  .hero--educacion .hero__circuit,
  .hero--servicio-al-cliente .hero__circuit {
    display: none !important;
  }

  /* Hero card con max-width 80% y elementos centrados */
  .hero--agent-support .hero__card,
  .hero--copilot .hero__card,
  .hero--nexus .hero__card,
  .hero--educacion .hero__card,
  .hero--servicio-al-cliente .hero__card,
  .hero--ventas .hero__card,
  .hero--partners .hero__card {
    max-width: 80%;
    align-items: center;
    text-align: center;
  }

  .hero--agent-support .hero__card-content,
  .hero--copilot .hero__card-content,
  .hero--nexus .hero__card-content,
  .hero--educacion .hero__card-content,
  .hero--servicio-al-cliente .hero__card-content,
  .hero--ventas .hero__card-content,
  .hero--partners .hero__card-content {
    align-items: center;
    text-align: center;
  }

  .hero--agent-support .hero__card-title,
  .hero--copilot .hero__card-title,
  .hero--nexus .hero__card-title,
  .hero--educacion .hero__card-title,
  .hero--servicio-al-cliente .hero__card-title,
  .hero--ventas .hero__card-title,
  .hero--partners .hero__card-title {
    text-align: center;
  }

  .hero--agent-support .hero__card-description,
  .hero--copilot .hero__card-description,
  .hero--nexus .hero__card-description,
  .hero--educacion .hero__card-description,
  .hero--servicio-al-cliente .hero__card-description,
  .hero--ventas .hero__card-description,
  .hero--partners .hero__card-description {
    text-align: center;
  }

  .hero--agent-support .hero__card-action,
  .hero--copilot .hero__card-action,
  .hero--nexus .hero__card-action,
  .hero--educacion .hero__card-action,
  .hero--servicio-al-cliente .hero__card-action,
  .hero--ventas .hero__card-action,
  .hero--partners .hero__card-action {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero--agent-support {
    padding: 80px 24px 60px;
    min-height: auto;
  }

  .hero--agent-support .hero__content {
    gap: 40px;
  }

  .hero--partners {
    padding: 80px 24px 60px !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 60px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .hero--partners .hero__content {
    gap: 40px;
    padding-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .hero--partners .hero__card {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .products-section__item-image {
    display: none;
  }

  .products-section__main-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    min-height: auto;
  }

  .products-section__main-image img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  .products-section__analytics,
  .products-section__chat,
  .products-section__extra {
    display: none;
  }

  .products-section__item-content {
    padding: 0;
  }
  
  .products-section {
    padding: 40px 0;
  }

  .products-section__item-title {
    font-size: 28px !important;
  }

  .products-section__item-description {
    font-size: 16px !important;
  }

  .benefits-section__card {
    padding: 0;
  }

  .benefits-section__card-title {
    font-size: 20px !important;
  }

  .benefits-section__card-description {
    font-size: 16px !important;
  }
}

/* Marquee Section */
.marquee {
  width: 100%;
  height: 120px;
  background-color: var(--surfaces-tonal-200);
  overflow: hidden;
  position: relative;
}

.marquee__content {
  height: 100%;
  display: flex;
  align-items: center;
}

.marquee__track {
  display: flex;
  align-items: center;
  /* Más lento: aumentar la duración de la animación */
  animation: marquee-scroll 50s linear infinite;
  white-space: nowrap;
  will-change: transform;
}

.marquee__item {
  font-family: var(--types-family-font);
  font-size: var(--display-font-size);
  font-weight: var(--types-font-weight-semibold);
  color: var(--text-icons-neutral-700);
  font-style: italic;
  letter-spacing: var(--body-1-regular-letter-spacing);
  flex-shrink: 0;
  margin-right: 16px;
}

.marquee__separator {
  color: var(--text-icons-tonal-600);
  font-size: var(--display-font-size);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 16px;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Carousel Section */
.carousel-section {
  padding: 80px 96px;
  /* background-color: var(--surfaces-white); */
}

.carousel-section__container {
  max-width: 1248px;
  margin: 0 auto;
  width: 100%;
}

.carousel-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-bottom: 80px;
}

.carousel-section__header-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.carousel-section__tags {
  display: flex;
  justify-content: center;
}

.carousel-section__title {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-neutral-800);
  text-align: center;
  width: 100%;
  max-width: 75%;
}

.carousel-section__description {
  max-width: 83%;
  font-family: var(--body-1-regular-font-family);
  font-size: var(--body-1-regular-font-size);
  font-weight: var(--body-1-regular-font-weight);
  line-height: var(--body-1-regular-line-height);
  letter-spacing: var(--body-1-regular-letter-spacing);
  color: var(--text-icons-neutral-700);
  text-align: center;
  width: 100%;
}

.carousel-section__content {
  position: relative;
  min-height: auto;
}

.carousel-section__tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  justify-content: flex-start;
  overflow: visible;
  position: relative;
}

.carousel-section__tab {
  flex: 1 0 0;
  padding: 15.238px 30.476px;
  background: var(--surfaces-neutral-400);
  border: none;
  border-radius: 11.429px;
  font-family: var(--types-family-font);
  font-size: var(--types-font-size-24);
  font-weight: var(--types-font-weight-semibold);
  color: var(--text-icons-tonal-700);
  cursor: pointer;
  transition: all 0.3s ease-out;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
}

.carousel-section__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gradients-brand-start);
  border-radius: 11.429px;
}

.carousel-section__tab:hover:not(.carousel-section__tab--active) {
  background: var(--surfaces-tonal-200);
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.carousel-section__tab:hover:not(.carousel-section__tab--active)::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 11.429px;
  padding: 2px;
  background: linear-gradient(135deg, var(--gradients-brand-start) 0%, var(--gradients-brand-end) 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.carousel-section__tab--active {
  background: linear-gradient(19.47deg, var(--gradients-brand-start) 13.397%, var(--gradients-brand-end) 86.603%);
  color: var(--text-icons-white);
  position: relative;
  overflow: hidden;
}

.carousel-section__tab--active::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease-out;
}

.carousel-section__tab--active:hover::before {
  left: 100%;
}

.carousel-section__card {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  background: linear-gradient(40.34deg, var(--gradients-brand-start-light) 13.397%, var(--gradients-brand-end-light) 86.603%);
  border-radius: 24px;
  overflow: hidden;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  pointer-events: none;
  z-index: 1;
  justify-content: space-between;
}

/* Altura específica para las cards de la página de educación - SOLO EN DESKTOP */
@media (min-width: 901px) {
  .page-educacion .carousel-section__card {
    height: 560px;
  }
}

.carousel-section__card--active {
  opacity: 1;
  visibility: visible;
  position: relative;
  pointer-events: auto;
  z-index: 2;
}

.carousel-section__card-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 60px;
  width: 48%;
  max-width: 48%;
  height: 100%;
  justify-content: center;
}

.carousel-section__card-title {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  color: var(--text-icons-neutral-800);
  width: 442px;
}

.carousel-section__card-description {
  font-family: var(--body-1-regular-font-family);
  font-size: 18px;
  font-weight: var(--body-1-regular-font-weight);
  line-height: 1.2;
  letter-spacing: var(--body-1-regular-letter-spacing);
  color: var(--text-icons-neutral-800);
  width: 100%;
}

.carousel-section__card-action {
  align-self: flex-start;
}

.carousel-section__benefits-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.carousel-section__benefit-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.carousel-section__benefit-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-section__benefit-icon i.material-icons {
  font-size: 24px;
  color: var(--text-icons-neutral-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.carousel-section__benefit-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.carousel-section__benefit-title {
  font-family: var(--body-2-medium-font-family);
  font-size: var(--body-2-medium-font-size);
  font-weight: 600;
  line-height: var(--body-2-medium-line-height);
  letter-spacing: var(--body-2-medium-letter-spacing);
  color: var(--text-icons-neutral-800);
  margin: 0;
}

.carousel-section__benefit-description {
  font-family: var(--body-2-medium-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--body-2-medium-line-height);
  letter-spacing: var(--body-2-medium-letter-spacing);
  color: var(--text-icons-neutral-800);
  margin: 0;
}

@media (max-width: 900px) {
  .carousel-section__benefit-description {
    font-size: 16px;
  }
}

.carousel-section__card-image {
  width: 48%;
  max-width: 48%;
  height: auto;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
}

.carousel-section__image-ellipse {
  position: absolute;
  width: 400px;
  height: 347px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(60deg, var(--gradients-brand-start, #DE8FFF) 13.4%, var(--gradients-brand-end, #3D73EB) 86.6%);
  border-radius: 50%;
  opacity: 0.35;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.carousel-section__card-image img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  border-radius: 20px;
}

@media (max-width: 900px) {
  .carousel-section__card {
    flex-direction: column;
    height: auto !important; /* Forzar altura automática en mobile/tablet */
    min-height: auto;
    padding: 0;
    gap: 0;
    overflow: visible;
  }
  .carousel-section__content {
 
    min-height: unset;
  }
  

  .carousel-section__card-text {
    width: 100%;
    max-width: 100%;
    padding: 24px ;
    gap: 16px;
  }

  .carousel-section__card-title {
    width: 100%;
    max-width: 442px;
  }

  .carousel-section__card-description {
    width: 100%;
    max-width: none;
  }

  .carousel-section__card-image {
    width: 100%;
    max-width: 100%;
    height: auto !important; /* Permitir que la imagen determine la altura */
    min-height: auto;
    overflow: visible;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    display: flex; /* Asegurar que sea flex para centrar la imagen */
  }

  .carousel-section__card-image img {
    width: 100%;
    max-width: 100%;
    height: auto !important; /* Permitir altura natural de la imagen */
    max-height: none !important; /* Remover max-height en mobile/tablet */
    object-fit: contain;
    border-radius: 0;
    margin: 0;
    padding: 0;
    display: block;
  }
  
  /* Asegurar que picture también respete la altura */
  .carousel-section__card-image picture {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* Asegurar que picture también respete la altura */
  .carousel-section__card-image picture {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 768px) {
  /* Ajustar margin-bottom de todos los headers de secciones a 40px en mobile */
  .carousel-section__header,
  .products-section__header,
  .benefits-section__header,
  .features-section__header,
  .integrations-section__header,
  .partners-section__header,
  .benefits-carousel-section__header {
    margin-bottom: 24px !important;
  }

  .carousel-section {
    padding: 40px 0;
  }

  .carousel-section__container {
    padding: 0px;
  }

  .carousel-section__content {
    min-height: unset;
  }
  

  .carousel-section__tabs {
    flex: 1; /* Ocupar espacio entre las flechas */
    position: relative;
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px; /* Padding para centrar los tabs */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    cursor: grab;
    padding: 4px 6px; /* Padding vertical y horizontal para que el focus no se corte (6px para outline-offset: 2px + outline: 2px) */
    margin-bottom: 32px;
  }

  .carousel-section__tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .carousel-section__tabs:active {
    cursor: grabbing;
  }
  
  /* Contenedor de scroll */
  .carousel-section__tabs {
    position: relative;
  }
  

  .carousel-section__tab {
    flex: 0 0 auto;
    min-width: 120px;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 16px;
    position: relative;
    z-index: 1;
  }
  
  .carousel-section__tab:focus-visible {
    outline: 2px solid var(--gradients-brand-start);
    outline-offset: 2px;
    border-radius: 11.429px;
  }

  .carousel-section__card {
    flex-direction: column;
    padding: 0;
    overflow: visible;
  }

  .carousel-section__card-text {
    padding: 24px ;
  }

  .carousel-section__card-description {
    max-width: none;
    font-size: 16px;
  }

  .carousel-section__card-image {
    width: 100%;
    max-width: 100%;
    height: auto !important; /* Permitir que la imagen determine la altura */
    min-height: auto;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
    display: flex; /* Asegurar que sea flex para centrar la imagen */
  }

  .carousel-section__image-ellipse {
    width: 250px;
    height: 217px;
  }

  .carousel-section__card-image picture {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
  }

  .carousel-section__card-image img {
    width: 100%;
    max-width: 100%;
    height: auto !important; /* Permitir altura natural de la imagen */
    max-height: none !important; /* Remover max-height en mobile */
    object-fit: contain;
    border-radius: 0;
    margin: 0;
    padding: 0;
    display: block;
  }
}

@media (max-width: 600px) {
  .carousel-section__card {
    flex-direction: column;
    gap: 0;
  }
}

/* Products Section */
.products-section {
  padding: 80px 96px;
  /* padding-bottom: 160px !important;  */
  background-color: var(--surfaces-white);
  position: relative;
  z-index: 1;
  margin-bottom: 0 !important;
  overflow: visible !important; /* Permitir que las imágenes se extiendan más allá */
}

.products-section__container {
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
  overflow: visible !important; /* Permitir que las imágenes se extiendan más allá */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 60px; /* Espacio entre header y list */
}

.products-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-bottom: 0; /* Usar gap del container */
  padding: 0;
  position: relative;
  z-index: 1;
}

.products-section__header-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.products-section__tags {
  display: flex;
  justify-content: center;
}

.products-section__title {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-neutral-800);
  text-align: center;
  width: 100%;
  max-width: 75%;
  max-width: 941px;
}

.products-section__description {
  font-family: var(--body-1-regular-font-family);
  font-size: var(--body-1-regular-font-size);
  font-weight: var(--body-1-regular-font-weight);
  line-height: var(--body-1-regular-line-height);
  letter-spacing: var(--body-1-regular-letter-spacing);
  color: var(--text-icons-neutral-700);
  text-align: center;
  width: 100%;
  max-width: 1036px;
}

.products-section__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 120px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding: 0;
  position: relative;
  z-index: 1;
  width: 100%; /* Asegurar que respete el ancho del container */
  min-height: 0; /* Prevenir colapso de márgenes */
}

.products-section__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  position: relative;
  min-height: auto !important; /* Permitir que la altura se ajuste al contenido */
  height: auto !important; /* No forzar altura fija */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  width: 100%; /* Asegurar que respete el ancho de la lista */
  max-width: 100%; /* Prevenir que se extienda más allá */
  box-sizing: border-box;
  overflow: hidden !important;
  flex-shrink: 0; /* Prevenir que el gap se colapse */
  flex-grow: 0; /* Prevenir que el gap se colapse */
}

/* Products Section - Desktop/Mobile Image Visibility */
.products-section__image-desktop {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 400px;
  padding: 40px !important;
  margin: 0 !important;
  position: relative;
  overflow: visible !important;
  border-radius: 20px;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.products-section__image-mobile {
  display: none !important;
}

@media (max-width: 1248px) {
  /* Tablet - agregar padding y gap */
  .products-section {
    padding: 40px 24px;
    gap: 24px;
  }
  
  .products-section__container {
    padding: 0 24px;
    box-sizing: border-box;
    gap: 40px; /* Menos espacio en tablet */
  }
  
  .products-section__header {
    margin-bottom: 0; /* Usar gap del container */
    width: 100%;
  }
  
  .products-section__list {
    gap: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important; /* Forzar ancho completo */
    min-height: 0; /* Prevenir colapso de márgenes */
  }
  
  .products-section__item {
    margin-bottom: 0;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .products-section__image-desktop {
    display: block !important;
    width: 100%;
    height: auto !important; /* Cambiar de 100% a auto para evitar altura fija */
    min-height: 400px; /* Mantener altura mínima pero permitir crecimiento */
  }
  
  .products-section__image-mobile {
    display: none !important;
  }
}

.products-section__item[data-animated="true"] {
  opacity: 1;
  transform: translateY(0);
}

.products-section__item--reverse {
  grid-template-columns: 1fr 1fr;
}

.products-section__item--reverse .products-section__item-image {
  order: 1;
}

.products-section__item--reverse .products-section__item-content {
  order: 2;
}

.products-section__item-content {
  display: flex;
  align-items: center;
}

.products-section__item-image {
  position: relative;
  width: 100%;
  height: auto !important; /* Cambiar de 100% a auto para evitar altura fija */
  min-height: 400px; /* Mantener altura mínima pero permitir crecimiento */
  padding: 40px !important; /* Padding más grande para que las sombras de los iconos no se corten */
  margin: 0 !important; /* Eliminar cualquier margin que pueda desplazar las imágenes */
  overflow: visible !important; /* Permitir que las imágenes se salgan del contenedor */
  /* Remover contain: layout que puede limitar el flujo */
}




/* image-wrapper eliminado - estilos consolidados en image-desktop */

/* Imágenes posicionadas cerca del borde */
/* El image-desktop debe ser position: relative para que las imágenes absolutas se posicionen correctamente */
/* Remover justify-content que puede interferir con position: absolute - las imágenes absolutas no se ven afectadas por flex */

/* Asegurar posicionamiento correcto - las imágenes deben llegar a los extremos del item completo */
/* Permitir overflow visible en todos los items para que las imágenes se extiendan */
.products-section__item {
  /* overflow: visible !important; */
  /* Asegurar que las sombras de los iconos no se corten */
  padding: 20px !important; /* Padding para que las sombras se vean completas */
  margin: -20px !important; /* Margen negativo para compensar y mantener el layout */
}

/* Copilot y Nexus: imagen en el extremo derecho - SOLO EN DESKTOP */
@media (min-width: 861px) {
  .products-section__item--copilot .products-section__item-image,
  .products-section__item--nexus .products-section__item-image {
    position: relative;
    overflow: visible !important;
  }

  /* Posicionar las imágenes para que lleguen al extremo del item completo */
  /* El grid tiene gap: 24px, así que necesitamos extender las imágenes más allá de su columna */
  .products-section__item--copilot .products-section__item-image,
  .products-section__item--nexus .products-section__item-image,
  .products-section__item--agent-support .products-section__item-image {
    position: static !important; /* Cambiar a static para que las imágenes se posicionen relativas al item */
    overflow: visible !important;
  }
}

/* NO cambiar image-desktop a static - necesita position: relative para las imágenes absolutas */
/* En su lugar, las imágenes principales se posicionarán usando el JavaScript */

/* Copilot y Nexus: imagen en el extremo derecho del item completo */
/* IMPORTANTE: Estas reglas se aplican cuando item-image e image-desktop son static */
/* El JavaScript en Safari fuerza estos contenedores a static para que las imágenes se posicionen relativas al item */
/* Copilot y Nexus: imagen en el extremo derecho */
/* image-desktop tiene position: relative, así que las imágenes se posicionan relativas a él */
.products-section__item--copilot .products-section__image-desktop .products-section__main-image,
.products-section__item--nexus .products-section__image-desktop .products-section__main-image,
.products-section__item--copilot .products-section__main-image,
.products-section__item--nexus .products-section__main-image,
.products-section__main-image--copilot,
.products-section__main-image--nexus {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 0 !important;
  left: auto !important;
  margin-right: 0 !important;
  margin-left: auto !important;
  z-index: 3 !important;
  width: auto !important;
  max-width: 70% !important;
  max-height: 80% !important;
}

/* Agent Support: imagen en el extremo izquierdo */
.products-section__item--agent-support .products-section__image-desktop .products-section__main-image,
.products-section__item--agent-support .products-section__main-image,
.products-section__main-image--agent-support {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 0 !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  z-index: 3 !important;
  width: auto !important;
  max-width: 70% !important;
  max-height: 80% !important;
}

.products-section__image-bg {
  position: absolute;
  top: 50%;
  z-index: 0;
  pointer-events: none;
  width: 60%;
  height: 60%;
  max-width: 370px;
  aspect-ratio: 1;
}

/* Elipse posicionado en el borde contrario a la imagen principal */
.products-section__item:not(.products-section__item--reverse) .products-section__image-bg {
  left: 0;
  transform: translateY(-50%);
}

.products-section__item--reverse .products-section__image-bg {
  right: 0;
  transform: translateY(-50%);
}

/* Specific styles for each product item */

/* Base styles for all product images */
.products-section__bg-shape {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.products-section__main-image {
  position: absolute !important; /* Forzar posición absoluta */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  max-width: 100%;
  max-height: 80% !important; /* Limitar altura máxima en porcentaje para Safari */
  height: auto !important; /* Cambiar de 75% a auto para mejor control */
  min-height: 400px;
  object-fit: contain;
  border-radius: 20px;
  z-index: 1;
  /* Prevenir escalado excesivo en Safari con zoom negativo */
  contain: layout style paint;
  /* left y right se definen en las clases específicas */
  left: auto;
  right: auto;
}

/* Copilot - Main image pegado al borde derecho */
.products-section__main-image--copilot {
  right: 0 !important;
  left: auto !important;
  max-width: 70% !important; /* Limitar ancho máximo en porcentaje para Safari */
  max-height: 80% !important; /* Limitar altura máxima en porcentaje para Safari */
  width: auto !important;
  transform: translateY(-50%) !important;
  position: absolute !important; /* Asegurar posicionamiento absoluto en Safari */
  top: 50% !important;
  bottom: auto !important;
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* Agent Support - Main image pegado al borde izquierdo */
.products-section__main-image--agent-support {
  left: 0 !important;
  right: auto !important;
  max-width: 70% !important; /* Limitar ancho máximo en porcentaje para Safari */
  max-height: 80% !important; /* Limitar altura máxima en porcentaje para Safari */
  width: auto !important;
  transform: translateY(-50%) !important;
  position: absolute !important; /* Asegurar posicionamiento absoluto en Safari */
  top: 50% !important;
  bottom: auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Nexus - Main image pegado al borde derecho */
.products-section__main-image--nexus {
  right: 0 !important;
  left: auto !important;
  max-width: 70% !important; /* Limitar ancho máximo en porcentaje para Safari */
  max-height: 80% !important; /* Limitar altura máxima en porcentaje para Safari */
  width: auto !important;
  transform: translateY(-50%) !important;
  position: absolute !important; /* Asegurar posicionamiento absoluto en Safari */
  top: 50% !important;
  bottom: auto !important;
  margin-right: 0 !important;
  margin-left: auto !important;
}

.products-section__analytics,
.products-section__chat,
.products-section__extra {
  position: absolute;
  z-index: 4; /* Por encima de main-image (z-index: 3) y bg-shape (z-index: 0) */
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  padding: 30px; /* Padding generoso para que las sombras de las imágenes no se corten */
  margin: -30px; /* Margen negativo para compensar el padding y mantener la posición exacta */
  pointer-events: none;
  overflow: visible !important; /* Permitir que las sombras se vean completas */
  /* Asegurar que las sombras no se corten */
  clip-path: none !important;
  will-change: transform;
}

.products-section__analytics img,
.products-section__chat img,
.products-section__extra img {
  width: auto;
  height: auto;
  display: block;
  /* Si las imágenes ya tienen sombras, no agregar más */
  /* filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.15)); */
}

/* Copilot specific styles */
.products-section__analytics--copilot {
  bottom: 12%;
  left: 5%;
}

.products-section__analytics--copilot img {
  max-width: 70%;
}

/* Agent Support specific styles */
.products-section__chat--agent-support {
  bottom: 24%;
  right: -23%;
  max-width: 70%;
}

.products-section__chat--agent-support img {
  max-width: 80%;
}

/* Nexus specific styles */
.products-section__analytics--nexus {
  bottom: 8.59%;
  left: 0%;
}

.products-section__analytics--nexus img {
  max-width: 80%;
}

.products-section__extra--nexus {
  top: 28%;
  left: -2.34%;
}

.products-section__extra--nexus img {
  max-width: 90%;
}

/* Media query for medium screens (860px - 1347px) */
@media (min-width: 861px) and (max-width: 1347px) {
  .products-section__main-image,
  .products-section__main-image--copilot,
  .products-section__main-image--agent-support,
  .products-section__main-image--nexus {
    max-width: 70% !important;
    max-height: 80% !important; /* Limitar altura en porcentaje también en pantallas medianas */
    width: auto !important;
  }
  
  .products-section__item-content .descriptive-card__description {
    font-size: 16px !important;
  }
}

/* Media query for very large screens (1348px+) */
@media (min-width: 1348px) {
  .products-section__item:not(.products-section__item--reverse) .products-section__image-bg {
    left: 10%;
    transform: translateY(-50%);
  }
  
  .products-section__analytics--copilot {
    bottom: 12%;
    left: 10%;
  }

  .products-section__item--reverse .products-section__image-bg {
    right: 10%;
    transform: translateY(-50%);
  }
  
  .products-section__chat--agent-support {
    bottom: 24%;
    right: -3%;
  }

  .products-section__analytics--nexus {
    bottom: 8.59%;
    left: 5%;
  }
}

/* Benefits Section */
.benefits-section {
  padding: 5% 6%;
  padding-top: 80px !important; /* Espacio superior reducido */
  /* background-color: var(--surfaces-white); */
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
  overflow: visible !important;
}

.benefits-section__container {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
}

.benefits-section--agent-support .benefits-section__container {
  gap: 0;
}

.benefits-section__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
  max-width: 1036px;
}

.benefits-section__header-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 941px;
}

.benefits-section__tags {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

.benefits-section__tag {
  border: 1px solid var(--borders-neutral-600);
  border-radius: 9999px;
  padding: 12px 24px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--types-family-font);
  font-size: var(--button-default-font-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.46px;
  color: var(--text-icons-neutral-800);
  white-space: nowrap;
}

.benefits-section__title {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-neutral-800);
  text-align: center;
  width: 100%;
  
}

.benefits-section__description {
  font-family: var(--body-1-medium-font-family);
  font-size: var(--body-1-medium-font-size);
  font-weight: var(--body-1-medium-font-weight);
  line-height: var(--body-1-medium-line-height);
  letter-spacing: var(--body-1-medium-letter-spacing);
  color: var(--text-icons-neutral-700);
  text-align: center;
  width: 100%;
  max-width: 83%;
}

.benefits-section__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  position: relative;
}

.benefits-section__card {
  background: var(--surfaces-neutral-200);
  border: 1px solid var(--borders-tonal-400);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* En mobile, mostrar las cards inmediatamente para evitar pantalla en blanco */
@media (max-width: 768px) {
  .benefits-section__card {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }
  
  /* Solo aplicar animación si el elemento ya tiene data-animated */
  .benefits-section__card[data-animate]:not([data-animated]) {
    opacity: 1;
    transform: translateY(0);
  }
}

.benefits-section__card[data-animated="true"] {
  opacity: 1;
  transform: translateY(0);
}

.benefits-section__card-icon {
  background: var(--surfaces-tonal-200);
  border: 0.8px solid var(--borders-tonal-400);
  border-radius: 16px;
  width: 7.5%;
  min-width: 80px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.benefits-section__card-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.benefits-section__card-icon i {
  font-size: var(--types-font-size-48);
  width: 48px;
  height: 48px;
}

@media (max-width: 1024px) {
  .benefits-section__card-icon i {
    font-size: 40px;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 768px) {
  .benefits-section__card-icon {
    min-width: 60px;
    width: 60px;
  }
  
  .benefits-section__card-icon i {
    font-size: 36px;
    width: 36px;
    height: 36px;
  }
  
  .benefits-section__card-icon img {
    width: 36px;
    height: 36px;
  }
}

.benefits-section__card-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-icons-tonal-700);
}

@media (max-width: 480px) {
  .benefits-section__card-icon {
    min-width: 52px;
    width: 52px;
  }
  
  .benefits-section__card-icon i {
    font-size: 32px;
    width: 32px;
    height: 32px;
  }
  
  .benefits-section__card-icon img {
    width: 32px;
    height: 32px;
  }
}

.benefits-section__card-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.benefits-section__card-title {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  color: var(--text-icons-neutral-800);
  margin: 0;
}

.benefits-section__card-description {
  font-family: var(--body-2-medium-font-family);
  font-size: var(--body-2-medium-font-size);
  font-weight: var(--body-2-medium-font-weight);
  line-height: var(--body-2-medium-line-height);
  letter-spacing: var(--body-2-medium-letter-spacing);
  color: var(--text-icons-neutral-800);
  margin: 0;
}

@media (max-width: 1000px) {
  .benefits-section__cards {
    /* Scroll horizontal tipo drag sin barra visible */
    flex: 1; /* Ocupar espacio entre las flechas */
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 24px;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px; /* Padding para centrar las cards */
    -webkit-overflow-scrolling: touch; /* Smooth scroll en iOS */
    cursor: grab; /* Indicar que es arrastrable */
    /* Gradientes de fade en los bordes - área central sin fade para la card principal - muy suave */
    /* Solo aplicar en desktop/tablet (601px+), no en mobile */
    /* Nota: El gradiente específico para tablet (768px-1000px) se define en su propio media query */
    @media (min-width: 601px) and (max-width: 767px) {
      mask-image: linear-gradient(to right, transparent 0%, black 20px, black calc(50% - 240px), black calc(50% + 240px), black calc(100% - 20px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20px, black calc(50% - 240px), black calc(50% + 240px), black calc(100% - 20px), transparent 100%);
    }
    
    /* En pantallas pequeñas (mobile), eliminar gradiente completamente */
    @media (max-width: 600px) {
      mask-image: none;
      -webkit-mask-image: none;
    }
    /* Ocultar completamente la scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
  }
  
  /* Ocultar scrollbar en WebKit (Chrome, Safari, etc.) */
  .benefits-section__cards::-webkit-scrollbar {
    display: none;
  }
  
  .benefits-section__card {
    /* Ancho razonable para las cards en scroll horizontal - sin restar espacio de flechas */
    flex: 0 0 calc(100% - 16px); /* Ancho casi completo, solo padding mínimo */
    min-width: 280px; /* Ancho mínimo absoluto para que no queden muy angostas */
    max-width: 400px; /* Ancho máximo para mantener proporción */
    scroll-snap-align: center; /* Centrar la card principal */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  }
  
  /* Card central agrandada cuando está centrada */
  .benefits-section__card--centered {
    transform: scale(1.05);
    z-index: 2;
    position: relative;
  }
  
  /* Cards laterales cuando hay una card central agrandada */
  .benefits-section__card:not(.benefits-section__card--centered) {
    opacity: 0.85;
  }
  
  /* En tablet (768px - 1000px), mostrar efecto carousel con cards laterales visibles */
  @media (min-width: 768px) and (max-width: 1000px) {
    .benefits-section__card {
      /* Ancho que permita ver 3 cards parcialmente - card central completa, laterales difuminadas */
      /* En iPad Mini (768px), cada card ocupa ~35% para que se vean bien las 3 cards */
      flex: 0 0 calc(35% - 8px);
      min-width: 280px; /* Mantener mínimo de 280px */
      max-width: calc(35% - 8px);
    }
    
    /* Restaurar gradiente en tablet para efecto difuminado de las cards laterales */
    /* Gradiente más suave para que las cards laterales sean visibles pero difuminadas */
    .benefits-section__cards {
      mask-image: linear-gradient(to right, transparent 0%, black 50px, black calc(50% - 220px), black calc(50% + 220px), black calc(100% - 50px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50px, black calc(50% - 220px), black calc(50% + 220px), black calc(100% - 50px), transparent 100%);
    }
    
    /* Asegurar que el contenedor tenga suficiente espacio para mostrar las cards laterales */
    .benefits-section__cards-wrapper {
      padding: 0 16px; /* Menos padding en tablet para dar más espacio a las cards */
    }
  }
  
  /* Cuando las cards son muy angostas (menos de 280px), aplicar efecto de agrandamiento de card central */
  @media (max-width: 1000px) {
    .benefits-section__cards--narrow .benefits-section__card {
      min-width: 280px;
    }
    
    .benefits-section__cards--narrow .benefits-section__card--centered {
      transform: scale(1.08);
      opacity: 1;
    }
    
    .benefits-section__cards--narrow .benefits-section__card:not(.benefits-section__card--centered) {
      opacity: 0.7;
    }
  }
  
  /* En pantallas muy pequeñas, ajustar ancho de cards */
  @media (max-width: 480px) {
    .benefits-section__card {
      min-width: calc(100vw - 72px); /* Menos padding en pantallas muy pequeñas */
    }
  }
  
  /* Cursor cuando se está arrastrando */
  .benefits-section__cards:active {
    cursor: grabbing;
  }
  
  /* Contenedor para las flechas - estructura para que las flechas queden fuera */
  .benefits-section__cards-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  
  /* Botones de flechas funcionales - posición absoluta para no ocupar espacio */
  .benefits-section__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--surfaces-white);
    border: 1px solid var(--borders-neutral-300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  
  .benefits-section__arrow--left {
    left: -20px;
  }
  
  .benefits-section__arrow--right {
    right: -20px;
  }
  
  .benefits-section__arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }
  
  .benefits-section__arrow:active {
    transform: translateY(-50%) scale(0.95);
  }
  
  .benefits-section__arrow svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-icons-neutral-700);
  }
  
  .benefits-section__arrow--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  /* Agregar padding lateral a la sección de benefits en pantallas ≤ 1000px */
  .benefits-section {
    padding-left: 24px;
    padding-right: 24px;
  }
  
  .benefits-section__cards-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px; /* Padding para que las flechas no tapen el contenido */
  }
  
  @media (max-width: 480px) {
    .benefits-section__cards-wrapper {
      padding: 0 12px; /* Menos padding en pantallas muy pequeñas */
    }
  }
}

/* Ocultar flechas en pantallas grandes */
@media (min-width: 1001px) {
  .benefits-section__arrow {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .benefits-section {
    padding: 40px 24px;
    position: relative !important;
    z-index: 2 !important;
  }
  
  /* En mobile muy pequeño, eliminar gradiente completamente para no tapar contenido */
  .benefits-section__cards {
    /* Sin gradiente en mobile para que todo el contenido sea visible */
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  
  /* Ajustar posición de flechas en mobile para que no se salgan */
  .benefits-section__arrow--left {
    left: -12px;
  }
  
  .benefits-section__arrow--right {
    right: -12px;
  }
  
  /* Reducir tamaño de flechas en mobile muy pequeño */
  @media (max-width: 480px) {
    .benefits-section__arrow {
      width: 32px;
      height: 32px;
    }
    
    .benefits-section__arrow svg {
      width: 16px;
      height: 16px;
    }
    
    .benefits-section__arrow--left {
      left: -8px;
    }
    
    .benefits-section__arrow--right {
      right: -8px;
    }
  }

  .benefits-section__container {
    gap: 0px;
    margin: 0;
    max-width: 100%;
    position: relative !important;
  }

  /* Asegurar que no haya superposición con la hero de partners */
  .benefits-section--partners {
    padding-top: 60px !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .benefits-section__cards {
    grid-template-columns: 1fr;
  }
  .banner-section__container {
    max-width: 100% !important;
    margin: 0 !important;
}
  .benefits-section__tags {
    flex-direction: column;
    align-items: center;
  }

  .benefits-section__tag {
    width: 100%;
    max-width: 300px;
  }
}

/* Features Section */
.features-section {
  padding: 5% 6%;
  background-color: var(--surfaces-white);
}

.features-section__container {
  max-width: 1248px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.features-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.features-section__header-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.features-section__tags {
  display: flex;
  justify-content: center;
}

.features-section__title {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-neutral-800);
  text-align: center;
  width: 100%;
  max-width: 75%;
}

.features-section__description {
  font-family: var(--body-1-medium-font-family);
  font-size: var(--body-1-medium-font-size);
  font-weight: var(--body-1-medium-font-weight);
  line-height: var(--body-1-medium-line-height);
  letter-spacing: var(--body-1-medium-letter-spacing);
  color: var(--text-icons-neutral-700);
  text-align: center;
  width: 100%;
  max-width: 83%;
}

.features-section__list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
}

.features-section__item {
  display: flex;
  align-items: center;
  gap: 5%;
  width: 100%;
  min-height: 500px;
  overflow: visible; 
}

/* Segundas cards de cada página - orden normal (imagen primero en HTML = imagen a la izquierda) */
/* No necesitamos row-reverse porque la imagen ya está primero en el HTML */
.features-section__item--reverse {
  flex-direction: row;
}

/* Copilot - segunda card también usa orden normal */
.features-section__item--reports {
  flex-direction: row;
}

.features-section__item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.features-section__item-icon {
  background: var(--surfaces-tonal-200);
  border: 0.8px solid var(--borders-tonal-400);
  border-radius: 16px;
  width: 7.5%;
  min-width: 80px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.features-section__item-icon i {
  font-size: var(--types-font-size-48);
  width: 48px;
  height: 48px;
}

@media (max-width: 1024px) {
  .features-section__item-icon i {
    font-size: 40px;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 768px) {
  .features-section__item-icon {
    min-width: 60px;
    width: 60px;
  }
  
  .features-section__item-icon i {
    font-size: 36px;
    width: 36px;
    height: 36px;
  }
}

.features-section__item-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-icons-tonal-700);
}

@media (max-width: 480px) {
  .features-section__item-icon {
    min-width: 52px;
    width: 52px;
  }
  
  .features-section__item-icon i {
    font-size: 32px;
    width: 32px;
    height: 32px;
  }
}

.features-section__item-title {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  color: var(--text-icons-neutral-800);
  margin: 0;
}

.features-section__item-description {
  font-family: var(--body-2-medium-font-family);
  font-size: var(--body-2-medium-font-size);
  font-weight: var(--body-2-medium-font-weight);
  line-height: var(--body-2-medium-line-height);
  letter-spacing: var(--body-2-medium-letter-spacing);
  color: var(--text-icons-neutral-800);
  margin: 0;
}

.features-section__item-description ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.features-section__item-description li {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}

.features-section__list-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.features-section__list-icon i.material-icons {
  font-size: 24px;
  color: var(--text-icons-neutral-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.features-section__list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.features-section__item-description li strong {
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.features-section__item-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  position: relative;
  overflow: visible; /* Mantener visible para el blur */
  z-index: 1; /* Crear contexto de apilamiento */
}

.features-section__image-bg {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  width: 70%;
  height: 70%;
  /* display: none; */
  left: 20%;
}

.features-section__item .features-section__image-bg--ellipse {
  position: absolute;
  width: 70%;
  height: 70%;
  max-width: none;
  aspect-ratio: 1;
  background: linear-gradient(60deg, #DE8FFF 13.4%, #3D73EB 86.6%);
  opacity: 0.35;
  filter: blur(60px);
  z-index: 0 !important; /* Forzar z-index bajo siempre */
  pointer-events: none;
  border-radius: 50%;
}

/* Desktop: elipse dentro del área de imágenes */
@media (min-width: 861px) {
  .features-section__item {
    position: relative;
  }
  
  .features-section__item .features-section__image-bg--ellipse {
    display: block;
    /* Posicionar dentro del área de imágenes en desktop */
    top: 50%;
    right: 0;
    left: auto;
    transform: translateY(-50%);
    width: 40%;
    height: 40%;
  }
  
  /* Nexus: ocultar elipse en desktop (usa Subtract.png) */
  .features-section--nexus .features-section__item .features-section__image-bg--ellipse {
    display: none !important;
  }
  
  /* Para items con imagen a la izquierda (reverse) */
  .features-section__item--reverse .features-section__image-bg--ellipse {
    left: 0;
    right: auto;
  }
  
  /* Para el segundo item de Copilot (reports) - elipse dentro de item-image */
  .features-section__item--reports .features-section__item-image .features-section__image-bg--ellipse {
    /* El elipse ahora está dentro de item-image, así que se posiciona relativo a él */
    left: 0;
    right: auto;
    width: 40%;
    height: 40%;
  }
  
  /* El elipse debe estar dentro del área de imagen, no del contenido */
  /* Como el elipse está dentro de item pero queremos que esté en item-image, */
  /* necesitamos posicionarlo desde el inicio del item-image */
  /* El item-image tiene flex: 1, así que está después del contenido */
  /* Pero como el elipse está dentro de item, necesitamos calcular su posición */
  /* Una solución: usar left: 0 y asegurar que item-image tenga position: relative */
  /* O mejor: mover el elipse dentro de item-image solo para reports en desktop */
  
  .features-section__item-image {
    position: relative;
  }
}

/* Mobile: elipse dentro de toda la card */
@media (max-width: 860px) {
  .features-section__item .features-section__image-bg--ellipse {
    display: block !important;
    visibility: visible !important;
    width: 70% !important;
    height: 70% !important;
    top: 80% !important;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }
}

/* Images inside wrapper will use absolute positioning */
/* Note: This selector should not affect .features-section__image-base or .features-section__image-overlay */
.features-section__item-image > img:not(.features-section__image-base):not(.features-section__image-overlay) {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.features-section__image-wrapper {
  position: relative;
  z-index: 2 !important; /* Asegurar que esté delante del elipse */
  width: 100%;
  height: 100%;
  min-height: 500px;
  display: block;
  /* overflow: hidden; */
}

/* Desktop: mostrar desktop, ocultar mobile */
.features-section__image-desktop {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.features-section__image-mobile {
  display: none !important;
}

.features-section__image-base,
.features-section__image-overlay {
  position: absolute;
  width: auto;
  max-width: 90%; /* Asegurar que no sobresalgan */
  max-height: 90%; /* Asegurar que no sobresalgan */
  height: auto;
  object-fit: contain;
}

.features-section__image-base {
  position: absolute;
  z-index: 2 !important; /* Asegurar que esté delante del elipse */
  top: 70%;
  left: 30%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.features-section__image-overlay {
  z-index: 3 !important; /* Asegurar que esté delante del elipse y de la imagen base */
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Features Section - Copilot - Image Base Positioning */
/* Estilos específicos para cada imagen base (screen.webp) en cada card */

/* Feature 1: Queries - Screen Base Image */
.features-section__item--queries .features-section__image-base {
  position: absolute;
  z-index: 1;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Feature 3: Integration - Screen Base Image */
.features-section__item--integration .features-section__image-base {
  position: absolute;
  z-index: 1;
  top: 64%;
  left: 30%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Animaciones de aparición con rebote */
@keyframes featurePopCentered {
  0% {
    opacity: 0;
    transform: translateY(calc(-50% + 24px)) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(calc(-50% - 6px)) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes featurePopOffset {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(-6px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* === Features (todas las páginas) ===
   - Cada card hace fade-up al scrollear (via [data-animated="true"])
   - Las ilustraciones del bloque aparecen una a una con rebote */

/* Fade-up por card */
.features-section__item[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.features-section__item[data-animate="fade-up"][data-animated="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* Ocultar ilustraciones hasta que el item entre en viewport */
.features-section__item[data-animate]:not([data-animated="true"]) .features-section__image-wrapper > .features-section__image-base,
.features-section__item[data-animate]:not([data-animated="true"]) .features-section__image-wrapper > .features-section__image-overlay {
  opacity: 0;
}

/* En mobile, mostrar imágenes inmediatamente para evitar parpadeo en Safari */
@media (max-width: 860px) {
  .features-section__item[data-animate] .features-section__image-wrapper > .features-section__image-base,
  .features-section__item[data-animate] .features-section__image-wrapper > .features-section__image-overlay {
    opacity: 1 !important; /* Mostrar inmediatamente en mobile */
    animation: none !important; /* Desactivar animaciones en mobile para evitar parpadeo */
  }
}

/* Secuencia base + overlays (según orden del DOM en `features-image-desktop.php`) */
/* Las imágenes base usan translate(-50%, -50%), necesitan animación que preserve eso */
.features-section__item[data-animated="true"] .features-section__image-wrapper > .features-section__image-base {
  animation: featurePopCenteredWithTranslate 0.95s ease-out 0.05s both;
}

/* Animación para imágenes base que preserva translate(-50%, -50%) */
@keyframes featurePopCenteredWithTranslate {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(24px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-6px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}

.features-section__item[data-animated="true"] .features-section__image-wrapper > .features-section__image-overlay:nth-child(2) {
  animation: featurePopOffset 0.95s ease-out 0.18s both;
}

.features-section__item[data-animated="true"] .features-section__image-wrapper > .features-section__image-overlay:nth-child(3) {
  animation: featurePopOffset 0.95s ease-out 0.30s both;
}

.features-section__item[data-animated="true"] .features-section__image-wrapper > .features-section__image-overlay:nth-child(4) {
  animation: featurePopOffset 0.95s ease-out 0.42s both;
}

/* Algunos overlays están centrados (ej: integrations) */
.features-section__item[data-animated="true"] .features-section__image-overlay--integrations {
  animation: featurePopCentered 0.95s ease-out 0.30s both;
}

/* Features Section - Nexus - Animaciones de rebote */
.features-section--nexus .features-section__item[data-animate]:not([data-animated="true"]) .features-section__image-wrapper > .features-section__main-image,
.features-section--nexus .features-section__item[data-animate]:not([data-animated="true"]) .features-section__image-wrapper > .features-section__circuit,
.features-section--nexus .features-section__item[data-animate]:not([data-animated="true"]) .features-section__image-wrapper > .features-section__products,
.features-section--nexus .features-section__item[data-animate]:not([data-animated="true"]) .features-section__image-wrapper > .features-section__circuit-1,
.features-section--nexus .features-section__item[data-animate]:not([data-animated="true"]) .features-section__image-wrapper > .features-section__pictures,
.features-section--nexus .features-section__item[data-animate]:not([data-animated="true"]) .features-section__image-wrapper > .features-section__analytics,
.features-section--nexus .features-section__item[data-animate]:not([data-animated="true"]) .features-section__circuit img,
.features-section--nexus .features-section__item[data-animate]:not([data-animated="true"]) .features-section__products img,
.features-section--nexus .features-section__item[data-animate]:not([data-animated="true"]) .features-section__circuit-1 img,
.features-section--nexus .features-section__item[data-animate]:not([data-animated="true"]) .features-section__pictures img,
.features-section--nexus .features-section__item[data-animate]:not([data-animated="true"]) .features-section__analytics img {
  opacity: 0;
}

.features-section--nexus .features-section__item[data-animated="true"] .features-section__image-wrapper > .features-section__main-image {
  animation: featurePopCentered 0.95s ease-out 0.05s both;
}

.features-section--nexus .features-section__item[data-animated="true"] .features-section__image-wrapper > .features-section__circuit {
  animation: featurePopOffset 0.95s ease-out 0.18s both;
}

.features-section--nexus .features-section__item[data-animated="true"] .features-section__image-wrapper > .features-section__products {
  animation: featurePopOffset 0.95s ease-out 0.30s both;
}

.features-section--nexus .features-section__item[data-animated="true"] .features-section__image-wrapper > .features-section__circuit-1 {
  animation: featurePopOffset 0.95s ease-out 0.42s both;
}

.features-section--nexus .features-section__item[data-animated="true"] .features-section__image-wrapper > .features-section__pictures {
  animation: featurePopOffset 0.95s ease-out 0.18s both;
}

.features-section--nexus .features-section__item[data-animated="true"] .features-section__image-wrapper > .features-section__analytics {
  animation: featurePopOffset 0.95s ease-out 0.30s both;
}

/* Products Section (Home) - Animaciones de rebote */
.products-section__item[data-animate]:not([data-animated="true"]) .products-section__image-desktop > .products-section__main-image,
.products-section__item[data-animate]:not([data-animated="true"]) .products-section__image-desktop > .products-section__analytics,
.products-section__item[data-animate]:not([data-animated="true"]) .products-section__image-desktop > .products-section__chat,
.products-section__item[data-animate]:not([data-animated="true"]) .products-section__image-desktop > .products-section__extra,
.products-section__item[data-animate]:not([data-animated="true"]) .products-section__analytics img,
.products-section__item[data-animate]:not([data-animated="true"]) .products-section__chat img,
.products-section__item[data-animate]:not([data-animated="true"]) .products-section__extra img {
  opacity: 0;
}

.products-section__item[data-animated="true"] .products-section__image-desktop > .products-section__main-image {
  animation: featurePopCentered 0.95s ease-out 0.05s both;
}

.products-section__item[data-animated="true"] .products-section__image-desktop > .products-section__analytics,
.products-section__item[data-animated="true"] .products-section__image-desktop > .products-section__chat,
.products-section__item[data-animated="true"] .products-section__image-desktop > .products-section__extra {
  animation: featurePopOffset 0.95s ease-out 0.18s both;
}

/* Aplicar animación a imágenes dentro de divs (Nexus y Products) */
.features-section--nexus .features-section__item[data-animated="true"] .features-section__circuit img,
.features-section--nexus .features-section__item[data-animated="true"] .features-section__products img,
.features-section--nexus .features-section__item[data-animated="true"] .features-section__circuit-1 img,
.features-section--nexus .features-section__item[data-animated="true"] .features-section__pictures img,
.features-section--nexus .features-section__item[data-animated="true"] .features-section__analytics img {
  animation: featurePopOffset 0.95s ease-out 0.18s both;
}

.products-section__item[data-animated="true"] .products-section__analytics img,
.products-section__item[data-animated="true"] .products-section__chat img,
.products-section__item[data-animated="true"] .products-section__extra img {
  animation: featurePopOffset 0.95s ease-out 0.18s both;
}

@media (prefers-reduced-motion: reduce) {
  .features-section__item[data-animate="fade-up"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .features-section__item[data-animate] .features-section__image-wrapper > .features-section__image-base,
  .features-section__item[data-animate] .features-section__image-wrapper > .features-section__image-overlay {
    opacity: 1;
    animation: none !important;
  }

  .features-section--nexus .features-section__item[data-animate] .features-section__image-wrapper > .features-section__main-image,
  .features-section--nexus .features-section__item[data-animate] .features-section__image-wrapper > .features-section__circuit,
  .features-section--nexus .features-section__item[data-animate] .features-section__image-wrapper > .features-section__products,
  .features-section--nexus .features-section__item[data-animate] .features-section__image-wrapper > .features-section__circuit-1,
  .features-section--nexus .features-section__item[data-animate] .features-section__image-wrapper > .features-section__pictures,
  .features-section--nexus .features-section__item[data-animate] .features-section__image-wrapper > .features-section__analytics,
  .features-section--nexus .features-section__item[data-animate] .features-section__circuit img,
  .features-section--nexus .features-section__item[data-animate] .features-section__products img,
  .features-section--nexus .features-section__item[data-animate] .features-section__circuit-1 img,
  .features-section--nexus .features-section__item[data-animate] .features-section__pictures img,
  .features-section--nexus .features-section__item[data-animate] .features-section__analytics img {
    opacity: 1;
    animation: none !important;
  }

  .products-section__item[data-animate] .products-section__image-desktop > .products-section__main-image,
  .products-section__item[data-animate] .products-section__image-desktop > .products-section__analytics,
  .products-section__item[data-animate] .products-section__image-desktop > .products-section__chat,
  .products-section__item[data-animate] .products-section__image-desktop > .products-section__extra,
  .products-section__item[data-animate] .products-section__analytics img,
  .products-section__item[data-animate] .products-section__chat img,
  .products-section__item[data-animate] .products-section__extra img {
    opacity: 1;
    animation: none !important;
  }
}

/* Features Section - Copilot - Image Overlays Positioning */
/* Convertir posiciones de px a porcentajes para que sean responsivas */
/* Asumiendo un contenedor base de ~600px de ancho y ~400px de alto */
.features-section__item--queries .features-section__image-overlay--analytics {
  left: -16%; /* -70px / 600px ≈ -11.67% */
  bottom: -15%; /* -30px / 400px ≈ -7.5% */
  top: auto;
  right: auto;
  transform: none;
  z-index: 1;
  max-height: 95%;
}

.features-section__item--queries .features-section__image-overlay--chat {
  right: -16.67%; /* -100px / 600px ≈ -16.67% */
  top: -16%;
  bottom: auto;
  left: auto;
  transform: none;
  z-index: 2;
  max-height: 95%;
}

/* Feature 2: Reports - Table Base Image */
.features-section__item--reports .features-section__image-base {
  position: absolute;
  left: 33.33% !important; /* 200px / 600px ≈ 33.33% */
  top: 43% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 62% !important; /* 400px / 600px ≈ 66.67% */
  max-height: 90%;
  z-index: 1;
}

/* Feature 2: Reports - Welcome Chat Overlay */
.features-section__item--reports .features-section__image-overlay--welcome {
  right: 15%; /* 90px / 600px ≈ 15% */
  bottom: 24%; /* 50px / 400px ≈ 12.5% */
  top: auto;
  left: auto;
  transform: none;
  max-height: 60%; /* 260px / 400px ≈ 65% */
  max-width: auto;
  z-index: 2;
}

/* Feature 3: Integration - Integrations and Team List */
.features-section__item--integration .features-section__image-overlay--integrations {
  /* Posición centrada o ajustar según diseño */
  top: 4%;
  left: 14%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
  z-index: 1;
}

.features-section__item--integration .features-section__image-overlay--team-list {
  right: 33.33%; /* 200px / 600px ≈ 33.33% */
  top: 25%; /* 160px / 400px ≈ 40% */
  left: auto;
  bottom: auto;
  transform: none;
  max-width: 50%; /* 300px / 600px ≈ 50% */
  max-height: auto;
  z-index: 2;
}

/* Feature 1: Assistance - Chat Window */
/* Agent Support - Feature 1: Assistance - Screen Base Image */
.features-section__image-base--assistance {
  position: absolute;
  top: 40% !important;
  left: 60% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
}

.features-section__item--assistance .features-section__image-overlay--chat-window {
  top: 16%;
  left: 2%;
  transform: none;
  max-width: 80%;
  max-height: 80%;
}

/* Agent Support - Feature 2: Tickets - Screen Base Image */
.features-section__image-base--tickets {
  position: absolute;
  top: 50% !important;
  left: 35% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
}

.features-section__item--tickets .features-section__image-overlay--ticket {
  bottom: 17%;
  right: 7%;
  top: auto;
  left: auto;
  transform: none;
  max-width: 55%;
  max-height: 55%;
}

.features-section__item--tickets .features-section__image-overlay--team-list {
  top: 13%;
  left: 40%;
  transform: none;
  max-width: 50%;
  max-height: 60%;
}

/* Agent Support - Feature 3: Scalability - Screen Base Image */
.features-section__image-base--scalability {
  position: absolute;
  top: 60% !important;
  left: 60% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
}

.features-section__item--scalability .features-section__image-overlay--data-cards {
  top: 23%;
  left: 16%;
  transform: none;
  max-width: 45%;
  max-height: 35%;
}

.features-section__item--scalability .features-section__image-overlay--team-avatar {
  bottom: 8%;
  right: 7%;
  top: auto;
  left: auto;
  transform: none;
  max-width: 55%;
  max-height: 55%;
}

.features-section__item--scalability .features-section__image-overlay--arrow {
  top: 9%;
  right: 7%;
  left: auto;
  transform: none;
  max-width: 80%;
  max-height: 80%;
  z-index: 1;
}

/* Education - Feature Images Base */
.features-section__image-base--schedule {
  position: absolute;
  top: 45%;
  left: 55%;
  transform: translate(-50%, -50%);
  max-width: 70%;
  max-height: 70%;
  z-index: 1;
}

.features-section__image-base--content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
}

.features-section__image-base--classes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
}

/* Client Service - Feature Images Base */
.features-section__image-base--tickets-client {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
  z-index: 1;
}

.features-section__image-base--operations {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
}

.features-section__image-base--assistance-client {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
}

/* Sales - Feature Images Base */
.features-section__image-base--analysis {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
}

.features-section__image-base--crm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
}

.features-section__image-base--queries-sales {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
}

/* Education - Feature Overlays Positioning */
/* Feature 1: Schedule - Modal Events */
.features-section__item--schedule .features-section__image-overlay--modal-events {
  left: 5%;
  bottom: 0;
  top: auto;
  right: auto;
  transform: none;
  max-width: 50%;
  max-height: 50%;
  z-index: 2;
}

/* Feature 2: Content - Table and Card Folder */
.features-section__item--content .features-section__image-overlay--table {
  /* Agregar posición específica cuando la proporciones */
  top: 40%;
  left: 30%;
  transform: translate(-50%, -50%);
  max-width: 70%;
  max-height: 70%;
  z-index: 2;
}

.features-section__item--content .features-section__image-overlay--card-folder {
  /* Agregar posición específica cuando la proporciones */
  top: 15%;
  left: 60%;
  transform: translate(-50%, -50%);
  max-width: 40%;
  max-height: 40%;
  z-index: 2;
}

/* Feature 3: Classes - Content, Card Signature, Students */
.features-section__item--classes .features-section__image-overlay--content {
  /* Agregar posición específica cuando la proporciones */
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 70%;
  max-height: 70%;
  z-index: 2;
}

.features-section__item--classes .features-section__image-overlay--card-signature {
  /* Agregar posición específica cuando la proporciones */
  top: 40%;
  left: 0%;
  transform: translate(-50%, -50%);
  max-width: 55%;
  max-height: 55%;
  z-index: 2;
}

  .features-section__item--classes .features-section__image-overlay--students {
    /* Agregar posición específica cuando la proporciones */
    top: 27%;
    left: 14%;
    transform: translate(-50%, -50%);
    max-width: 55%;
    max-height: 55%;
    z-index: 2;
  }

/* Features Section - Ventas - Image Overlays Positioning */
.features-section__item--analysis .features-section__image-overlay--proposal {
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  max-height: 50%;
  z-index: 2;
}

.features-section__item--analysis .features-section__image-overlay--analytics {
  top: 35%;
  left: 10%;
  transform: translate(-50%, -50%);
  max-width: 40%;
  max-height: 40%;
  z-index: 2;
}

.features-section__item--crm .features-section__image-overlay--integrations {
  top: 20%;
  left: 25%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
  z-index: 2;
}

.features-section__item--queries .features-section__image-overlay--chat {
  top: 0%;
  left: 30%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
  z-index: 2;
}

/* Features Section - Servicio al Cliente - Image Overlays Positioning */
.features-section__item--tickets .features-section__image-overlay--modal {
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  max-width: 70%;
  max-height: 70%;
  z-index: 2;
}

.features-section__item--assistance .features-section__image-overlay--chat {
  top: 24%;
  left: 20%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  z-index: 2;
}

.features-section__item--operations .features-section__image-overlay--analytics {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
  z-index: 2;
}

.features-section__item--operations .features-section__image-overlay--ratings {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
  z-index: 2;
}

.features-section__item--assistance .features-section__image-overlay--suggestions {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
  z-index: 2;
}

@media (max-width: 1248px) {
  /* Permitir que las imágenes con posiciones negativas se vean sin cambiar sus posiciones */
  .features-section__item-image {
    overflow: visible;
    min-height: auto;
  }
  
  .features-section__image-desktop .features-section__image-wrapper {
    min-height: auto;
    overflow: visible;
  }

  /* En tablet (860-1248px) seguir mostrando desktop */
  .features-section__item-image {
    min-height: 400px !important;
  }

  .features-section__image-desktop {
    display: block !important;
    width: 100%;
    height: 100%;
    min-height: 400px;
  }

  .features-section__image-desktop .features-section__image-wrapper {
    min-height: 400px;
    height: 100%;
  }

  .features-section__image-mobile {
    display: none !important;
  }
}

@media (max-width: 860px) {
  /* Agregar padding lateral en pantallas menores a 860px */
  .features-section {
    padding: 40px 24px;
  }

  /* Cambiar a column layout en pantallas más chicas de 860px - aplicar a todas las secciones de features */
  .features-section__item {
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--borders-neutral-400, #c3c7ce);
    border-radius: 24px;
    padding: 0;
    /* overflow: visible; */
    position: relative;
    min-height: auto !important;
    display: flex;
    height: auto !important;
    overflow: hidden;
  }

  /* Asegurar que la imagen esté pegada al borde inferior sin espacios */
  .features-section__item-image {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .features-section__image-mobile {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .features-section__image-mobile .features-section__image-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Todas las segundas cards (reverse) deben tener column-reverse en mobile */
  .features-section__item--reverse {
    flex-direction: column-reverse;
  }

  /* Column reverse para reports (también es una segunda card) */
  .features-section__item--reports {
    flex-direction: column-reverse;
  }

  /* Estilos para el contenido de la card similar al carousel */
  .features-section__item-content {
    width: 100%;
    padding: 24px;
    padding-bottom: 8px;
    gap: 24px;
    flex-shrink: 0;
    flex-grow: 0;
    margin-bottom: 0;
  }
  
  /* Espaciado adicional para Nexus en mobile */
  .features-section--nexus .features-section__item-content {
    padding-bottom: 20px;
  }
  
  .features-section--nexus .features-section__item-image {
    margin-top: 8px !important;
  }

  /* Estilos para listas en tablet/mobile */
  .features-section__item-description ul {
    padding-left: 0;
    margin-left: 0;
    gap: 12px;
  }

  .features-section__item-description li {
    padding-left: 0;
    margin-left: 0;
    text-align: left;
    gap: 12px;
  }

  .features-section__list-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .features-section__list-icon i.material-icons {
    font-size: 20px;
  }

  /* Ocultar desktop, mostrar mobile */
  .features-section__image-desktop {
    display: none !important;
  }

  .features-section__image-mobile {
    display: block !important;
    width: 100%;
    position: relative;
  }

  /* Mostrar el elipse de fondo en mobile y hacerlo más grande - position absolute para que no afecte layout */
  .features-section__image-mobile .features-section__image-bg {
    display: block !important;
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    width: auto !important;
    height: auto !important;
  }

  .features-section__item .features-section__image-bg--ellipse {
    display: block !important;
    visibility: visible !important;
    opacity: 0.35 !important;
    width: 70% !important;
    height: 70% !important;
    max-width: none !important;
    aspect-ratio: 1;
    background: linear-gradient(60deg, #DE8FFF 13.4%, #3D73EB 86.6%) !important;
    filter: blur(60px) !important;
    top: 80% !important;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none;
    border-radius: 50%;
  }

  .features-section__image-mobile .features-section__image-wrapper {
    position: relative;
    z-index: 1;
  }

  /* Simplificar estructura en mobile - igual que carousel */
  .features-section__item-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
    flex-shrink: 0;
    min-height: auto !important;
  }
  
  /* Para column-reverse, asegurar que la imagen esté al final (arriba visualmente) */
  .features-section__item--reports .features-section__item-image {
    order: -1;
  }

  /* En mobile, el wrapper solo contiene el picture - simplificar */
  .features-section__image-mobile .features-section__image-wrapper {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow: visible;
    position: relative;
  }

  /* Mostrar solo las imágenes mobile - igual que carousel */
  .features-section__image-mobile .features-section__image-wrapper {
    position: relative;
    z-index: 1;
    align-content: flex-end;
  }

  .features-section__image-mobile .features-section__image-wrapper picture {
    width: 100%;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0;
    padding: 0;
    line-height: 0;
    vertical-align: bottom;
  }

  .features-section__image-mobile .features-section__image-wrapper picture img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    margin: 0;
    padding: 0;
    border-radius: 0;
    z-index: 1;
    vertical-align: bottom;
  }

  /* Ocultar el elipse en mobile - solo mostrar las imágenes mobile */
  .features-section__item-image::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .features-section {
    padding: 40px 24px; /* Agregar padding lateral como otras secciones */
  }

  .features-section__container {
    gap: 32px;
  }

  .features-section__list {
    gap: 40px;
  }

  /* Ajustar padding de las cards en mobile - sin padding para que imagen esté pegada */
  .features-section__item {
    padding: 0;
  }

  /* Ajustar padding del contenido en mobile - reducir espacio inferior */
  .features-section__item-content {
    padding: 24px;
    padding-bottom: 8px;
    margin-bottom: 0;
  }

  /* Estilos para listas en mobile */
  .features-section__item-description ul {
    padding-left: 0;
    margin-left: 0;
    gap: 12px;
  }

  .features-section__item-description li {
    padding-left: 0;
    margin-left: 0;
    text-align: left;
    gap: 12px;
  }

  .features-section__list-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .features-section__list-icon i.material-icons {
    font-size: 20px;
  }

  /* Reducir espacio entre contenido e imagen en mobile */
  .features-section__item {
    gap: 12px;
  }

  .features-section__item-image {
    margin-top: -20px;
    min-height: 0 !important;
    height: auto;
  }

  .features-section__image-mobile {
    margin-top: 0;
    height: auto;
    min-height: 0;
  }

  /* Reducir aún más el espacio del contenido */
  .features-section__item-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Asegurar que el elipse no afecte la altura del contenedor */
  .features-section__image-mobile .features-section__image-wrapper {
    position: relative;
    height: auto;
    min-height: 0;
  }

  /* Ajustar tamaño del elipse en mobile */
  .features-section__item-image::before {
    width: 250px;
    height: 217px;
  }

  /* Las imágenes overlay ya están ocultas en el media query de 860px */
}

/* Integrations Section */
.integrations-section {
  padding: 5% 6%;
  background-color: #F3F3F3;
}

.integrations-section__container {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}

.integrations-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.integrations-section__header-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.integrations-section__tags {
  display: flex;
  justify-content: center;
}

.integrations-section__title {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-neutral-800);
  text-align: center;
  width: 100%;
  max-width: 75%;
}

.integrations-section__description {
  font-family: var(--body-1-medium-font-family);
  font-size: var(--body-1-medium-font-size);
  font-weight: var(--body-1-medium-font-weight);
  line-height: var(--body-1-medium-line-height);
  letter-spacing: var(--body-1-medium-letter-spacing);
  color: var(--text-icons-neutral-700);
  text-align: center;
  width: 100%;
  max-width: 83%;
}

.integrations-section__logos-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Gradiente de fade en los extremos */
  mask-image: linear-gradient(to right, transparent 0%, black 60px, black calc(100% - 60px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60px, black calc(100% - 60px), transparent 100%);
}

.integrations-section__logos {
  display: flex;
  align-items: center;
  gap: clamp(40px, 8%, 80px);
  width: max-content;
  animation: integrations-marquee 40s linear infinite;
  white-space: nowrap;
}

.integrations-section__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  height: 60px;
  min-width: 120px;
}

.integrations-section__logo img {
  height: 60px;
  width: auto;
  max-width: 250px;
  min-width: 120px;
  object-fit: contain;
}

.integrations-section__logo:hover {
  opacity: 1;
}

@keyframes integrations-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .integrations-section__logos {
    animation: none;
  }
}

.integrations-section__logo img {
  max-width: 12%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .integrations-section {
    padding: 40px 0;
  }

  .integrations-section__logos {
    gap: 24px;
  }

  .integrations-section__logo img {
    max-width: 120px;
    max-height: 50px;
  }

  /* Fade más suave en mobile */
  .integrations-section__logos-wrapper {
    mask-image: linear-gradient(to right, transparent 0%, black 30px, black calc(100% - 30px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30px, black calc(100% - 30px), transparent 100%);
  }
}

/* Clients Section (Logo Marquee) - Copiado de integrations-section */
.clients-section {
  padding: 5% 6%;
  background-color: #F3F3F3;
}

.clients-section__container {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}

.clients-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.clients-section__header-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.clients-section__tags {
  display: flex;
  justify-content: center;
}

.clients-section__title {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-neutral-800);
  text-align: center;
  width: 100%;
  max-width: 75%;
}

.clients-section__description {
  font-family: var(--body-1-medium-font-family);
  font-size: var(--body-1-medium-font-size);
  font-weight: var(--body-1-medium-font-weight);
  line-height: var(--body-1-medium-line-height);
  letter-spacing: var(--body-1-medium-letter-spacing);
  color: var(--text-icons-neutral-700);
  text-align: center;
  width: 100%;
  max-width: 83%;
}

.clients-section__logos-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Gradiente de fade en los extremos */
  mask-image: linear-gradient(to right, transparent 0%, black 60px, black calc(100% - 60px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60px, black calc(100% - 60px), transparent 100%);
}

.clients-section__logos {
  display: flex;
  align-items: center;
  gap: clamp(40px, 8%, 80px);
  width: max-content;
  animation: clients-marquee 40s linear infinite;
  white-space: nowrap;
}

.clients-section__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  /* Contenedor con dimensiones fijas para normalizar tamaños */
  width: 180px;
  height: 60px;
  min-width: 180px;
  max-width: 180px;
}

.clients-section__logo img {
  /* Altura fija para todos los logos */
  height: 50px;
  max-height: 50px;
  /* Ancho automático pero limitado */
  width: auto;
  max-width: 160px;
  /* Asegurar que se ajuste proporcionalmente */
  object-fit: contain;
  object-position: center;
}

.clients-section__logo:hover {
  opacity: 1;
}

@keyframes clients-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-section__logos {
    animation: none;
  }
}

@media (max-width: 768px) {
  .clients-section {
    padding: 40px 0;
  }

  .clients-section__logos {
    gap: 24px;
  }

  .clients-section__logo {
    width: 140px;
    height: 50px;
    min-width: 140px;
    max-width: 140px;
  }

  .clients-section__logo img {
    max-width: 120px;
    max-height: 40px;
    height: 40px;
  }

  /* Fade más suave en mobile */
  .clients-section__logos-wrapper {
    mask-image: linear-gradient(to right, transparent 0%, black 30px, black calc(100% - 30px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30px, black calc(100% - 30px), transparent 100%);
  }
}

/* FAQs Section */
.faqs-section {
  padding: clamp(60px, 7.5%, 120px) 6%;
  background-color: var(--surfaces-white);
}

.faqs-section__container {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 7.5%, 120px);
}

.faqs-section__title {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-neutral-800);
  text-align: center;
  margin: 0;
}

.faqs-section__list {
  display: flex;
  gap: clamp(20px, 1.875%, 24px);
  width: 100%;
  justify-content: center;
}

.faqs-section__column {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.875%, 24px);
  width: 100%;
  max-width: 612px;
}

.faqs-section__item {
  width: 100%;
  padding: 24px;
  background-color: var(--surfaces-neutral-200);
  /* border: 2px solid var(--borders-tonal-400); */
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0s ease; /* Instant border color change */
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  outline: none;
  box-shadow: none;
}

.faqs-section__item:focus,
.faqs-section__item:focus-visible,
.faqs-section__item:active {
  outline: none !important;
  border: 2px solid var(--borders-tonal-400) !important;
  box-shadow: none !important;
}

.faqs-section__item--active {
  border-color: var(--borders-tonal-700); /* More intense violet when active */
}

.faqs-section__item-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.faqs-section__item-header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 48px; /* Fixed height for consistent card height when closed */
}

.faqs-section__question {
  flex: 1 0 0;
  font-family: var(--h4-font-family);
  font-size: 16px; /* Fixed 16px as per requirements */
  font-weight: var(--h4-font-weight);
  line-height: 1.5;
  letter-spacing: 0.46px;
  color: var(--text-icons-neutral-900);
  margin: 0;
  text-align: left;
}

.faqs-section__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: var(--surfaces-neutral-400);
  flex-shrink: 0;
}

.faqs-section__icon-container i.material-icons {
  font-size: 13.5px;
  width: 13.5px;
  height: 13.5px;
  color: var(--text-icons-neutral-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.faqs-section__item--active .faqs-section__icon-container i.material-icons {
  transform: rotate(180deg);
}

.faqs-section__item-answer {
  width: 100%;
  padding-top: 0; /* No padding when closed */
  padding-right: 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding-top 0.3s ease;
}

.faqs-section__item--active .faqs-section__item-answer {
  max-height: 500px;
  padding-top: 20px; /* Padding only when active */
}

.faqs-section__answer {
  font-family: var(--body-2-medium-font-family);
  font-size: 14px; /* Fixed 14px as per requirements */
  font-weight: 400; /* Regular weight as per Figma */
  line-height: 1.5;
  letter-spacing: 0.46px;
  color: var(--text-icons-neutral-900);
  margin: 0;
  text-align: left;
}

@media (max-width: 1248px) {
  .faqs-section__list {
    flex-direction: column;
    align-items: center;
  }

  .faqs-section__column {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .faqs-section {
    padding: 40px 0;
  }

  .faqs-section__container {
    gap: 40px;
  }

  .faqs-section__item {
    padding: 20px;
  }

  .faqs-section__item-header {
    gap: 12px;
  }

  .faqs-section__icon-container {
    width: 28px;
    height: 28px;
  }

  .faqs-section__icon-container i {
    font-size: 12px;
    width: 12px;
    height: 12px;
  }
}

/* Banner Section */
.banner-section {
  padding: 96px;
  background-color: var(--surfaces-white);
}

.banner-section__container {
  max-width: 90%;
  margin: 0 auto;
}

.banner-section__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 48px;
  min-height: 432px;
  background-color: #5e17eb;
  background: linear-gradient(86.39deg, #5e17eb 0.13%, #8982ff 87.54%);
  border-radius: 12px;
  box-shadow: 0px 0px 5.21px 0px rgba(119, 114, 240, 0.1), 0px 0px 36.49px 0px rgba(119, 114, 240, 0.12), 1.07px 1.07px 52.13px 0px rgba(119, 114, 240, 0.12);
  overflow: hidden;
}

.banner-section__content[data-animated="true"] .banner-section__title,
.banner-section__content[data-animated="true"] .banner-section__description,
.banner-section__content[data-animated="true"] .banner-section__action,
.banner-section__content[data-animated="true"] .banner-section__stars {
  opacity: 1;
  transform: translateY(0);
}

.banner-section__title,
.banner-section__description,
.banner-section__action {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s;
}

.banner-section__stars {
  position: absolute;
  left: -82px;
  top: 167px;
  width: 356px;
  height: 356px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease-out 0.2s;
}

.banner-section__stars img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.banner-section__title {
  font-family: var(--h1-bold-font-family);
  font-size: var(--h1-bold-font-size);
  font-weight: 600; /* Changed from var(--h1-bold-font-weight) which is 700 */
  line-height: 1.2;
  letter-spacing: 0.46px;
  color: var(--text-icons-neutral-100);
  max-width: 980px;
  width: 100%;
  margin: 0;
}

.banner-section__description {
  font-family: var(--body-1-medium-font-family);
  font-size: var(--body-1-medium-font-size);
  font-weight: var(--body-1-medium-font-weight);
  line-height: var(--body-1-medium-line-height);
  letter-spacing: var(--body-1-medium-letter-spacing);
  color: var(--text-icons-neutral-300);
  max-width: 774px;
  margin: 0;
}

.banner-section__action {
  margin-top: 0;
}

/* Animation States - defaults para todos los data-animate */
[data-animate] {
  opacity: 0;
}

[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

[data-animate="fade-in"] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate="fade-up"][data-animated="true"],
[data-animate="fade-in"][data-animated="true"] {
  opacity: 1;
  transform: translateY(0);
}

[data-animated="true"] {
  opacity: 1;
  transform: translateY(0) !important;
}

/* Initially show hero elements - solo si no tienen data-animate */
.hero__products:not([data-animate]),
.hero__card:not([data-animate]) {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Responsive - Large screens */
@media (min-width: 1920px) {
  .hero {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
  }
  
  .hero__card {
    max-width: 1200px;
  }
  
  .hero__circles {
    width: 1380px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hero__content {
    max-width: 1400px;
    margin: 0 auto;
  }
  
  /* Las posiciones se calculan dinámicamente por JavaScript */
}

/* Responsive - Medium screens */
@media (max-width: 1024px) {
  .hero {
    height: auto;
    min-height: 600px;
    padding: 48px 0;
  }
  
  .hero__content {
    padding: 0 48px;
  }
  
  .hero__products {
    position: relative;
    top: 0;
    padding: 0;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 24px;
  }
  
  .products-section,
  .carousel-section,
  .benefits-section {
    padding: 48px;
  }
  
  .banner-section {
    padding: 48px;
  }
}

@media (max-width: 860px) {
  /* Products Section - Mobile Card Styles (similar to features-section) */
  .products-section {
    padding: 40px 24px;
    gap: 24px;
  }
  
  .products-section__container {
    padding: 0; /* Sin padding en mobile, el padding está en la sección */
    gap: 32px; /* Espacio entre header y list en mobile */
  }
  
  .products-section__header {
    margin-bottom: 0; /* Usar gap del container */
    width: 100%;
  }
  
  .products-section__list {
    gap: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important; /* Forzar ancho completo */
    min-height: 0; /* Prevenir colapso de márgenes */
  }
  
  .products-section__item {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Borde con gradiente respetando border-radius usando background-clip */
    border: 1px solid transparent;
    background:
      linear-gradient(var(--surfaces-white, #ffffff), var(--surfaces-white, #ffffff)) padding-box,
      linear-gradient(60deg, var(--gradients-brand-start, #DE8FFF) 13.4%, var(--gradients-brand-end, #3D73EB) 86.6%) border-box;
    border-radius: 24px;
    padding: 0;
    padding-bottom: 0 !important;
    position: relative;
    min-height: auto !important;
    display: flex;
    flex-direction: column;
    height: auto !important;
    overflow: hidden;
    box-sizing: border-box; /* Asegurar que el border no cause overflow */
    width: 100% !important; /* Forzar ancho completo en mobile */
    max-width: 100% !important; /* Prevenir extensión */
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0; /* Asegurar que cada item ocupe su espacio y respete el gap */
    flex-grow: 0; /* Asegurar que cada item ocupe su espacio y respete el gap */
  }
  
  /* Elipse degradado para mobile */
  .products-section__item .products-section__image-bg--ellipse {
    display: block !important;
    visibility: visible !important;
    opacity: 0.35 !important;
    width: 70% !important;
    height: 70% !important;
    max-width: none !important;
    aspect-ratio: 1;
    background: linear-gradient(60deg, #DE8FFF 13.4%, #3D73EB 86.6%) !important;
    filter: blur(60px) !important;
    top: 80% !important;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none;
    border-radius: 50%;
  }
  
  /* Ajuste específico para Copilot en mobile - ajustar elipse para que no se corte */
  .products-section__item--copilot .products-section__image-bg--ellipse {
    top: 70% !important; /* Mover un poco más arriba para que el blur no se corte */
    filter: blur(50px) !important; /* Reducir blur ligeramente para que quepa mejor */
  }
  
  /* Desktop images ocultas en mobile */
  .products-section__image-desktop {
    display: none !important;
  }
  
  /* Mobile images visibles */
  .products-section__image-mobile {
    display: block !important;
    width: 100%;
    position: relative;
  }
  
  /* Estilos para el contenido de la card */
  .products-section__item-content {
    width: 100%;
    padding: 24px;
    padding-bottom: 24px;
    gap: 24px;
    flex-shrink: 0;
    flex-grow: 0;
    margin-bottom: 0;
  }
  
  /* Remover padding de descriptive-card cuando está dentro de products-section en mobile */
  .products-section__item-content .descriptive-card {
    padding: 0 !important; /* Remover padding del card en mobile */
  }
  
  /* Estilos para la imagen en mobile */
  .products-section__item-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    position: static !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    overflow: hidden !important; /* Respetar el overflow del padre en mobile */
    flex: 1;
    min-height: 0 !important;
    margin-top: 0;
    box-sizing: border-box;
  }
  
  /* Desactivar animación de click en mobile */
  .products-section__item-content .descriptive-card,
  .products-section__item-content .descriptive-card * {
    transition: none !important;
  }
  
  .products-section__item-content .descriptive-card:active,
  .products-section__item-content .descriptive-card *:active {
    transform: none !important;
  }
  
  /* Desactivar animación de botones dentro de descriptive-card en mobile */
  .products-section__item-content .descriptive-card .button--primary:active,
  .products-section__item-content .descriptive-card .button--secondary:active,
  .products-section__item-content .descriptive-card .button--terciary:active {
    transform: none !important;
  }
  
  .products-section__image-mobile .features-section__image-wrapper {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    overflow: visible;
    position: relative;
    margin: 0;
    padding: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
    height: auto;
    min-height: 0;
    align-content: flex-end;
  }
  
  .products-section__image-mobile .features-section__image-wrapper picture {
    width: 100%;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0;
    padding: 0 !important;
    margin-bottom: 0 !important;
    line-height: 0;
    vertical-align: bottom;
  }
  
  .products-section__image-mobile .features-section__image-wrapper picture img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    margin: 0;
    padding: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0;
    z-index: 1;
    vertical-align: bottom;
  }
  
  /* Column reverse para items reverse */
  .products-section__item--reverse {
    flex-direction: column-reverse;
  }
  
  /* Ajustar imágenes en pantallas medianas */
  .products-section__image-desktop {
    min-height: 150px;
    max-height: 200px;
  }
  
  .products-section__main-image {
    max-width: 100% !important;
    max-height: none !important;
    height: auto;
    min-height: auto;
  }
  
  .products-section__main-image img {
    max-width: 100% !important;
    max-height: 80% !important; /* Limitar altura de la imagen en porcentaje también */
    height: auto;
    object-fit: contain;
  }
  
  /* Reducir tamaño de elementos extra */
  .products-section__analytics,
  .products-section__chat,
  .products-section__extra {
    transform: scale(0.7);
  }
  
  /* Ajustar posiciones para que no queden tan dispersos */
  .products-section__chat--agent-support {
    top: 3%;
    right: -5%;
  }
  
  .products-section__chat--agent-support img {
    max-width: 60%;
  }
  
  .products-section__analytics--nexus {
    bottom: 6%;
    left: 0%;
  }
  
  .products-section__analytics--nexus img {
    max-width: 65%;
  }
  
  .products-section__extra--nexus {
    top: 18%;
    left: -2%;
  }
  
  .products-section__extra--nexus img {
    max-width: 70%;
  }
  
  .products-section__analytics--copilot {
    bottom: 8%;
    left: 3%;
  }
  
  .products-section__analytics--copilot img {
    max-width: 55%;
  }
  
  /* Reducir tamaño del fondo */
  .products-section__image-bg {
    width: 50%;
    height: 50%;
    max-width: 280px;
  }
}

@media (max-width: 768px) {
  .hero {
    margin-top: 0;
    padding: 24px 0;
  }
  
  .hero__content {
    padding: 0 24px;
  }
  
  .hero__card {
    padding: 16px;
    margin-top: 0px;
  }
  
  .hero__card-title {
    font-size: var(--h3-font-size);
  }
  
  .products-section,
  .carousel-section,
  .benefits-section {
    padding: 24px;
  }
  
  .products-section__list {
    gap: 40px;
  }
  
  .banner-section {
    padding: 24px;
  }
  
  .banner-section__content {
    padding: 16px;
  }
}

/* Banner Section Full Width */
.banner-section-full {
  position: relative;
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6%;
  background-color: #6C63FF;
  overflow: hidden;
}

.banner-section-full__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Star pattern background */
.banner-section-full__pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/star.svg');
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.7;
  z-index: 1;
}

/* Ellipse backgrounds */
.banner-section-full__ellipse {
  position: absolute;
  width: clamp(400px, 49.6875%, 636px);
  height: clamp(400px, 49.765625%, 637px);
  border-radius: 50%;
  background: radial-gradient(60.97% 60.97% at 75.55% 40.03%, rgba(170, 167, 242, 0.7) 20%, rgba(220, 219, 255, 0.7) 100%);
  filter: blur(179.44px);
  z-index: 2;
  transform-origin: center center;
}

.banner-section-full__ellipse--1 {
  top: clamp(-150px, -15.625%, -200px);
  left: clamp(-150px, -15.625%, -200px);
  background: #4F19BC; /* Color más oscuro para mayor visibilidad */
  filter: blur(179.44px);
}

.banner-section-full__ellipse--2 {
  bottom: clamp(-150px, -15.625%, -200px);
  right: clamp(-150px, -15.625%, -200px);
  background: radial-gradient(60.97% 60.97% at 75.55% 40.03%, rgba(137, 130, 255, 0.8) 20%, rgba(222, 219, 255, 0.8) 100%);
  filter: blur(179.44px);
}

.banner-section-full__content {
  position: relative;
  z-index: 3;
  max-width: 90%;
  width: 100%;
  text-align: center;
}

.banner-section-full__title {
  font-family: var(--h1-bold-font-family);
  font-size: 48px; /* Fixed 48px as per requirements */
  font-weight: 700; 
  line-height: 1.2;
  letter-spacing: 0.46px;
  color: var(--text-icons-white);
  margin: 0;
  text-align: center;
}


@media (max-width: 768px) {
  .banner-section-full {
    height: 400px; /* Reduced height for mobile */
    padding: 0 24px;
  }

  .banner-section-full__content {
    max-width: 100%;
  }

  .banner-section-full__title {
    font-size: clamp(28px, 5.833%, 48px); /* Responsive 48px */
  }

  .banner-section-full__ellipse {
    width: clamp(300px, 75%, 500px);
    height: clamp(300px, 75%, 500px);
    filter: blur(120px);
  }
}


/* Partners Section */
.partners-section {
  padding: 120px 0;
  width: 100%;
  overflow-x: hidden;
}

.partners-section__container {
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: space-between;
}

.partners-section__content {
  flex: 1;
  max-width: 612px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.partners-section__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.partners-section__tags {
  display: flex;
  gap: 16px;
}

.partners-section__title {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-neutral-800);
  margin: 0;
}

.partners-section__description {
  font-family: var(--body-1-medium-font-family);
  font-size: var(--body-1-medium-font-size);
  font-weight: var(--body-1-medium-font-weight);
  line-height: var(--body-1-medium-line-height);
  letter-spacing: var(--body-1-medium-letter-spacing);
  color: var(--text-icons-neutral-700);
  margin: 0;
}

.partners-section__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}

.partners-section__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.partners-section__item-line {
  width: 10px;
  height: 100px;
  background-color: var(--surfaces-tonal-500, #c5c2ff);
  border-radius: 13.333px;
  flex-shrink: 0;
}

.partners-section__item-content {
  flex: 1;
  display: flex;
  align-items: center;
}

.partners-section__item-text {
  font-family: var(--body-1-regular-font-family);
  font-size: var(--body-1-regular-font-size);
  font-weight: var(--body-1-regular-font-weight);
  line-height: 1.4;
  letter-spacing: var(--body-1-regular-letter-spacing);
  color: var(--text-icons-neutral-900);
  margin: 0;
}

.partners-section__item-text strong {
  font-family: var(--body-1-semibold-font-family);
  font-weight: 600;
  display: inline;
  line-height: 1.4;
}

.partners-section__illustration {
  flex: 1;
  max-width: 611px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Partners Section - Animaciones de ilustración */
/* Ocultar elementos de ilustración hasta que la sección entre en viewport */
.partners-section[data-animate]:not([data-animated="true"]) .partners-section__illustration-ellipse,
.partners-section[data-animate]:not([data-animated="true"]) .partners-section__illustration-circles,
.partners-section[data-animate]:not([data-animated="true"]) .partners-section__illustration-handshake,
.partners-section[data-animate]:not([data-animated="true"]) .partners-section__icon {
  opacity: 0;
}

/* Secuencia de animaciones cuando la sección está animada */
/* Usar animación personalizada que preserve translate(-50%, -50%) */
.partners-section[data-animated="true"] .partners-section__illustration-ellipse {
  animation: partnersPopCentered 0.95s ease-out 0.05s both;
}

.partners-section[data-animated="true"] .partners-section__illustration-circles {
  animation: partnersPopCentered 0.95s ease-out 0.18s both;
}

.partners-section[data-animated="true"] .partners-section__illustration-handshake {
  animation: partnersPopCentered 0.95s ease-out 0.30s both;
}

/* Animación para partners que preserva translate(-50%, -50%) */
@keyframes partnersPopCentered {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(24px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-6px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}

/* Animación personalizada para iconos que preserva translate(-50%, -50%) */
@keyframes partnersIconPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(24px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-6px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}

/* Iconos con animación secuencial preservando su posición */
.partners-section[data-animated="true"] .partners-section__icon--1 {
  animation: partnersIconPop 0.95s ease-out 0.42s both;
}

.partners-section[data-animated="true"] .partners-section__icon--2 {
  animation: partnersIconPop 0.95s ease-out 0.54s both;
}

.partners-section[data-animated="true"] .partners-section__icon--3 {
  animation: partnersIconPop 0.95s ease-out 0.66s both;
}

.partners-section[data-animated="true"] .partners-section__icon--4 {
  animation: partnersIconPop 0.95s ease-out 0.78s both;
}

.partners-section[data-animated="true"] .partners-section__icon--5 {
  animation: partnersIconPop 0.95s ease-out 0.90s both;
}

.partners-section[data-animated="true"] .partners-section__icon--6 {
  animation: partnersIconPop 0.95s ease-out 1.02s both;
}

.partners-section__illustration-bg {
  position: relative;
  width: 100%;
  height: 660px;
  border-radius: 16px;
  background: linear-gradient(60deg, rgba(222, 143, 255, 0.20) 13.4%, rgba(61, 115, 235, 0.20) 86.6%);
  overflow: hidden;
}

.partners-section__illustration-ellipse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 611px;
  height: 660px;
  z-index: 1;
  pointer-events: none;
}

.partners-section__illustration-ellipse svg {
  width: 100%;
  height: 100%;
}

.partners-section__illustration-circles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners-section__illustration-circles img {
  width: 80%;
  height: 100%;
  object-fit: contain;
}

.partners-section__illustration-handshake {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.partners-section__illustration-handshake img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.partners-section__illustration-icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

.partners-section__icon {
  position: absolute;
  width: auto;
  height: auto;
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners-section__icon img {
  display: block;
  width: auto;
  height: auto;
}

/* Iconos posicionados en círculo alrededor del centro (handshake) */
/* 6 iconos distribuidos uniformemente en 360 grados */
/* Radio: ~40% del contenedor */
.partners-section__icon--1 {
  top: calc(50% - 40%);
  left: 50%;
  transform: translate(-50%, -50%);
}

.partners-section__icon--2 {
  top: calc(50% - 20%);
  left: calc(50% + 34.64%);
  transform: translate(-50%, -50%);
}

.partners-section__icon--3 {
  top: calc(50% + 20%);
  left: calc(50% + 34.64%);
  transform: translate(-50%, -50%);
}

.partners-section__icon--4 {
  top: calc(50% + 40%);
  left: 50%;
  transform: translate(-50%, -50%);
}

.partners-section__icon--5 {
  top: calc(50% + 20%);
  left: calc(50% - 34.64%);
  transform: translate(-50%, -50%);
}

.partners-section__icon--6 {
  top: calc(50% - 20%);
  left: calc(50% - 34.64%);
  transform: translate(-50%, -50%);
}

/* Reducir altura de ilustración entre 771px y 900px */
@media (min-width: 771px) and (max-width: 900px) {
  .partners-section__illustration-bg {
    height: 450px !important;
    max-height: 450px !important;
  }

  .partners-section__illustration-ellipse {
    width: 100% !important;
    max-width: 100% !important;
    height: 450px !important;
    max-height: 450px !important;
  }

  .partners-section__illustration-handshake img {
    max-width: 100% !important;
    max-height: 75% !important;
  }

  .partners-section__illustration-circles img {
    max-width: 75% !important;
    max-height: 75% !important;
  }
}

@media (max-width: 900px) {
  .partners-section__container {
    flex-direction: column;
    gap: 60px;
  }

  .partners-section__content {
    max-width: 100%;
    gap: 0px;
  }

  .partners-section__illustration {
    max-width: 100%;
    width: 100%;
  }
  .partners-section__item-line{
    height: 80px;
  }
}

@media (max-width: 768px) {
  .partners-section {
    padding: 60px 0;
  }
  .partners-section__item-line{
    height: 80px;
  }
  /* Reducir altura de la ilustración en mobile */
  .partners-section__illustration-bg {
    height: 400px !important;
    max-height: 400px !important;
  }

  .partners-section__illustration-ellipse {
    width: 100% !important;
    max-width: 100% !important;
    height: 400px !important;
    max-height: 400px !important;
  }

  .partners-section__illustration-handshake img {
    max-width: 100% !important;
    max-height: 70% !important;
  }

  .partners-section__illustration-circles img {
    max-width: 70% !important;
    max-height: 70% !important;
  }

  .partners-section__container {
    padding: 0 16px;
    gap: 40px;
  }

  .partners-section__list {
    margin-top: 24px;
  }
}

/* Features Section - Nexus (Numbered Steps) */

.features-section--nexus .features-section__item-number {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-tonal-600);
  margin: 0;
  margin-bottom: 8px;
}

.features-section--nexus .features-section__image-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.features-section--nexus .features-section__main-image {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0 !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  max-width: 70% !important;
  max-height: 80% !important;
  width: auto !important;
  height: auto;
  object-fit: contain;
}

.features-section--nexus .features-section__bg-shape {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.features-section--nexus .features-section__circuit,
.features-section--nexus .features-section__products,
.features-section--nexus .features-section__circuit-1,
.features-section--nexus .features-section__pictures,
.features-section--nexus .features-section__analytics {
  position: absolute;
  z-index: 3;
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  object-fit: contain;
}

.features-section--nexus .features-section__circuit img,
.features-section--nexus .features-section__products img,
.features-section--nexus .features-section__circuit-1 img,
.features-section--nexus .features-section__pictures img,
.features-section--nexus .features-section__analytics img {
  width: 80%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.features-section--nexus .features-section__item--audit .features-section__circuit {
  top: 6%;
  left: 10%;
  max-width: 40%;
  max-height: 380px;
  z-index: 1;
}

.features-section--nexus .features-section__item--implementation .features-section__products {
  top: -1%;
  left: 33%;
  max-width: 35%;
  max-height: 35%;
  z-index: 2;
}

.features-section--nexus .features-section__item--implementation .features-section__circuit-1 {
  bottom: 0%;
  left: 10%;
  width: 40%;
  max-height: 380px;
  z-index: 1;
}

.features-section--nexus .features-section__item--monitoring .features-section__pictures {
  top: 2%;
  left: -4%;
  max-width: 65%;
  max-height: 65%;
}

.features-section--nexus .features-section__item--monitoring .features-section__analytics {
  bottom: 18%;
  left: 10%;
  max-width: 45%;
  max-height: 45%;
}

/* Benefits Carousel Section (Educacion) */
.benefits-carousel-section {
  padding: 80px 96px;
  background-color: var(--surfaces-white);
}

.benefits-carousel-section__container {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.benefits-carousel-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.benefits-carousel-section__header-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.benefits-carousel-section__tags {
  display: flex;
  justify-content: center;
}

.benefits-carousel-section__title {
  font-family: var(--h2-bold-font-family);
  font-size: var(--h2-bold-font-size);
  font-weight: var(--h2-bold-font-weight);
  line-height: var(--h2-bold-line-height);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--text-icons-neutral-800);
  text-align: center;
  width: 100%;
  max-width: 75%;
}

.benefits-carousel-section__description {
  font-family: var(--body-1-medium-font-family);
  font-size: var(--body-1-medium-font-size);
  font-weight: var(--body-1-medium-font-weight);
  line-height: var(--body-1-medium-line-height);
  letter-spacing: var(--body-1-medium-letter-spacing);
  color: var(--text-icons-neutral-700);
  text-align: center;
  width: 100%;
  max-width: 83%;
}

.benefits-carousel-section__tabs {
  display: flex;
  gap: 36.19px;
  margin-bottom: 60px;
  justify-content: center;
}

.benefits-carousel-section__tab {
  flex: 1 0 0;
  padding: 15.238px 30.476px;
  background: var(--surfaces-neutral-400);
  border: none;
  border-radius: 11.429px;
  font-family: var(--types-family-font);
  font-size: var(--types-font-size-24);
  font-weight: var(--types-font-weight-semibold);
  color: var(--text-icons-tonal-700);
  cursor: pointer;
  transition: all 0.3s ease-out;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
}

.benefits-carousel-section__tab:hover:not(.benefits-carousel-section__tab--active) {
  background: var(--surfaces-tonal-200);
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.benefits-carousel-section__tab:hover:not(.benefits-carousel-section__tab--active)::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 11.429px;
  padding: 2px;
  background: linear-gradient(135deg, var(--gradients-brand-start) 0%, var(--gradients-brand-end) 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.benefits-carousel-section__tab--active {
  background: linear-gradient(19.47deg, var(--gradients-brand-start) 13.397%, var(--gradients-brand-end) 86.603%);
  color: var(--text-icons-white);
  position: relative;
  overflow: hidden;
}

.benefits-carousel-section__content {
  position: relative;
  min-height: 612px;
}

.benefits-carousel-section__card {
  display: flex;
  gap: 24px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 612px;
  background: linear-gradient(40.34deg, var(--gradients-brand-start-light) 13.397%, var(--gradients-brand-end-light) 86.603%);
  border-radius: 24px;
  overflow: hidden;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  pointer-events: none;
  z-index: 1;
}

.benefits-carousel-section__card--active {
  opacity: 1;
  visibility: visible;
  position: relative;
  pointer-events: auto;
  z-index: 2;
}

.benefits-carousel-section__card-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 60px;
  width: 48%;
  max-width: 48%;
  height: 100%;
  justify-content: center;
}

.benefits-carousel-section__card-title {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  color: var(--text-icons-neutral-800);
  margin: 0;
}

.benefits-carousel-section__benefits-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.benefits-carousel-section__benefit-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.benefits-carousel-section__benefit-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefits-carousel-section__benefit-icon i.material-icons {
  font-size: 24px;
  color: var(--text-icons-neutral-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.benefits-carousel-section__benefit-text {
  font-family: var(--body-2-medium-font-family);
  font-size: var(--body-2-medium-font-size);
  font-weight: var(--body-2-medium-font-weight);
  line-height: var(--body-2-medium-line-height);
  letter-spacing: var(--body-2-medium-letter-spacing);
  color: var(--text-icons-neutral-800);
  flex: 1;
  margin: 0;
}

.benefits-carousel-section__benefit-text strong {
  font-weight: 600;
}

.benefits-carousel-section__card-image {
  width: 48%;
  max-width: 48%;
  height: 612px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}

.benefits-carousel-section__illustration {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: contain;
}

.benefits-carousel-section__illustration img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 1248px) {
  .benefits-carousel-section__card {
    flex-direction: column;
    min-height: auto;
    padding: 24px;
  }

  .benefits-carousel-section__card-content {
    width: 100%;
    max-width: 100%;
    padding: 24px 32px;
  }

  .benefits-carousel-section__card-image {
    width: 100%;
    max-width: 612px;
    height: auto;
    min-height: 300px;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 768px) {
  .benefits-carousel-section {
    padding: 40px 0;
  }

  .benefits-carousel-section__tabs {
    flex-direction: column;
    gap: 16px;
  }

  .benefits-carousel-section__tab {
    width: 100%;
    min-height: 60px;
  }

  .benefits-carousel-section__card-content {
    padding: 24px 32px;
  }
}

/* Features Section - Servicio al Cliente */
.features-section__item--tickets .features-section__image-overlay--chat {
  top: 15%;
  left: 10%;
  max-width: 50%;
  max-height: 60%;
}

.features-section__item--tickets .features-section__image-overlay--team {
  bottom: 15%;
  right: 10%;
  max-width: 45%;
  max-height: 50%;
}

.features-section__item--operations .features-section__image-overlay--analytics {
  top: 36%;
  left: 18%;
  max-width: 49%;
  max-height: 40%;
}

.features-section__item--operations .features-section__image-overlay--ratings {
  top: 20%;
  left: 38%;
  max-width: 60%;
  max-height: 60%;
}

.features-section__item--assistance .features-section__image-overlay--suggestions {
  top: 20%;
  left: 55%;
  transform: translate(-50%, -50%);
  max-width: 35%;
  max-height: 35%;
  z-index: 3;
}

/* Prompts Section */
.prompts-section {
  padding: 80px 96px;
  background-color: var(--surfaces-white);
}

.prompts-section__container {
  max-width: 1248px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.prompts-section__filters {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.prompts-section__filter {
  padding: 12px 24px;
  height: 40px;
  border: 1px solid var(--borders-neutral-600);
  border-radius: 999px;
  background: var(--surfaces-white);
  font-family: var(--types-family-font);
  font-size: var(--types-font-size-16);
  font-weight: var(--types-font-weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.46px;
  color: var(--text-icons-neutral-800);
  cursor: pointer;
  transition: all 0.3s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.prompts-section__filter:hover:not(.prompts-section__filter--active) {
  background: var(--surfaces-neutral-300);
  border-color: var(--borders-neutral-600);
}

.prompts-section__filter--active {
  background: var(--text-icons-neutral-900);
  border-color: var(--text-icons-neutral-900);
  color: var(--text-icons-neutral-100);
}

.prompts-section__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
  width: 100%;
}

.prompts-section__card {
  background: var(--surfaces-neutral-200);
  border: 1px solid var(--borders-tonal-400);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 300px;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, box-shadow 0.3s ease-out;
  opacity: 1;
  transform: scale(1);
}

.prompts-section__card:hover {
  transform: translateY(-4px) scale(1);
  box-shadow: 0px 4px 42px rgba(0, 0, 0, 0.1);
}

.prompts-section__card-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.prompts-section__card-title {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  color: var(--text-icons-neutral-900);
  margin: 0;
}

.prompts-section__card-description {
  font-family: var(--body-2-medium-font-family);
  font-size: var(--body-2-medium-font-size);
  font-weight: var(--body-2-medium-font-weight);
  line-height: var(--body-2-medium-line-height);
  letter-spacing: var(--body-2-medium-letter-spacing);
  color: var(--text-icons-neutral-900);
  margin: 0;
}

.prompts-section__card-tag {
  padding: 6px 16px;
  height: 32px;
  border-radius: 6px;
  font-family: var(--types-family-font);
  font-size: 12px;
  font-weight: var(--types-font-weight-semibold);
  line-height: 1;
  letter-spacing: 0.46px;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: fit-content;
}

.prompts-section__card-tag--pink {
  background: #faf0ff;
  border: 1px solid #c852ff;
  color: #c852ff;
}

.prompts-section__card-tag--orange {
  background: #fffaf5;
  border: 1px solid #fc851b;
  color: #fc851b;
}

.prompts-section__card-tag--green {
  background: #f1fff3;
  border: 1px solid #44c951;
  color: #44c951;
}

/* Banner Section - Prompts */
.banner-section--prompts {
  padding: 96px;
  background-color: var(--surfaces-white);
}

.banner-section--prompts .banner-section__container {
  max-width: 90%;
  margin: 0 auto;
}

.banner-section--prompts .banner-section__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 48px;
  min-height: 432px;
  background-color: #5e17eb;
  background: linear-gradient(86.39deg, #5e17eb 0.13%, #8982ff 87.54%);
  border-radius: 12px;
  box-shadow: 0px 0px 5.21px 0px rgba(119, 114, 240, 0.1), 0px 0px 36.49px 0px rgba(119, 114, 240, 0.12), 1.07px 1.07px 52.13px 0px rgba(119, 114, 240, 0.12);
  overflow: hidden;
}

.banner-section--prompts .banner-section__stars {
  position: absolute;
  left: -82px;
  top: 167px;
  width: 356px;
  height: 356px;
  pointer-events: none;
  opacity: 1 !important;
  z-index: 1;
}

.banner-section--prompts .banner-section__stars img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.banner-section--prompts .banner-section__title {
  font-family: var(--h1-bold-font-family);
  font-size: var(--h1-bold-font-size);
  font-weight: var(--h1-bold-font-weight);
  line-height: var(--h1-bold-line-height);
  letter-spacing: var(--h1-bold-letter-spacing);
  color: var(--text-icons-neutral-100);
  margin: 0;
  max-width: 1100px;
  opacity: 1 !important;
  transform: none !important;
  position: relative;
  z-index: 2;
}

.banner-section--prompts .banner-section__description {
  font-family: var(--body-1-medium-font-family);
  font-size: var(--body-1-medium-font-size);
  font-weight: var(--body-1-medium-font-weight);
  line-height: var(--body-1-medium-line-height);
  letter-spacing: var(--body-1-medium-letter-spacing);
  color: var(--text-icons-neutral-300);
  margin: 0;
  max-width: 774px;
  opacity: 1 !important;
  transform: none !important;
  position: relative;
  z-index: 2;
}

.banner-section--prompts .banner-section__action {
  margin-top: 0;
  opacity: 1 !important;
  transform: none !important;
  position: relative;
  z-index: 2;
}

@media (max-width: 1248px) {
  .prompts-section__cards {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 900px) {
  /* Reducir altura de hero en mobile/tablet */
  .hero--libreria-de-prompts {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 40px 24px !important;
  }

  .hero--libreria-de-prompts .hero__content {
    padding: 0 !important;
    height: auto !important;
  }

  .hero--libreria-de-prompts .hero__card {
    gap: 16px;
  }

  .hero--libreria-de-prompts .hero__card-content {
    gap: 16px;
  }

  /* Agregar padding lateral a prompts-section */
  .prompts-section {
    padding: 40px 24px;
  }

  .prompts-section__container {
    gap: 40px;
  }

  /* Mantener filtros en row con scroll horizontal draggeable - igual que carousel */
  .prompts-section__filters {
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    cursor: grab;
    padding: 4px 24px;
    margin-left: -24px;
    margin-right: -24px;
    scroll-padding-left: 24px;
    scroll-padding-right: 24px;
    padding-bottom: 8px;
  }

  .prompts-section__filters::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .prompts-section__filters:active {
    cursor: grabbing;
  }

  .prompts-section__filter {
    flex: 0 0 auto;
    width: auto;
    min-width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    position: relative;
    z-index: 1;
  }

  .prompts-section__cards {
    grid-template-columns: 1fr;
  }

  .banner-section--prompts {
    padding: 48px 24px;
  }

  .banner-section--prompts .banner-section__content {
    padding: 24px 16px;
    min-height: auto;
  }

  .banner-section--prompts .banner-section__title {
    font-size: 32px;
  }
}

/* Testimonials Section */
.testimonials-section {
  padding: 80px 96px;
  background-color: var(--surfaces-white);
}

.testimonials-section__container {
  max-width: 1248px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.testimonials-section__featured {
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.testimonials-section__featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(135deg, var(--gradients-brand-start) 0%, var(--gradients-brand-end) 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 0;
}

.testimonials-section__featured > * {
  position: relative;
  z-index: 1;
}

.testimonials-section__quote-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(180deg) scaleY(-1);
  width: 80px;
  height: 67px;
  flex-shrink: 0;
}

.testimonials-section__quote-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleX(-1);

}

.testimonials-section__rating {
  display: flex;
  gap: 8px;
  align-items: center;
}

.testimonials-section__rating .material-icons {
  font-size: 24px;
  color: #f4c51d;
  width: 24px;
  height: 24px;
}

.testimonials-section__featured-text {
  font-family: var(--body-3-medium-font-family);
  font-size: var(--body-3-medium-font-size);
  font-weight: var(--body-3-medium-font-weight);
  line-height: var(--body-3-medium-line-height);
  letter-spacing: var(--body-3-medium-letter-spacing);
  color: var(--text-icons-neutral-800);
  margin: 0;
}

.testimonials-section__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

@media (max-width: 1280px) {
  .testimonials-section__cards {
    /* Scroll horizontal tipo drag sin barra visible */
    flex: 1; /* Ocupar espacio entre las flechas */
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 24px;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px; /* Padding para centrar las cards */
    -webkit-overflow-scrolling: touch; /* Smooth scroll en iOS */
    cursor: grab; /* Indicar que es arrastrable */
    /* Gradientes de fade en los bordes - área central sin fade para la card principal */
    mask-image: linear-gradient(to right, transparent 0%, black 80px, black calc(50% - 200px), black calc(50% + 200px), black calc(100% - 80px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 80px, black calc(50% - 200px), black calc(50% + 200px), black calc(100% - 80px), transparent 100%);
    /* Ocultar completamente la scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
  }
  
  /* Ocultar scrollbar en WebKit (Chrome, Safari, etc.) */
  .testimonials-section__cards::-webkit-scrollbar {
    display: none;
  }
  
  .testimonials-section__card {
    /* Ancho razonable para las cards en scroll horizontal */
    flex: 0 0 calc(100% - 48px); /* Ancho casi completo menos padding */
    min-width: 320px; /* Ancho mínimo para que no queden muy angostas */
    max-width: 400px; /* Ancho máximo para mantener proporción */
    scroll-snap-align: center; /* Centrar la card principal */
  }
  
  /* Cursor cuando se está arrastrando */
  .testimonials-section__cards:active {
    cursor: grabbing;
  }
  
  /* Contenedor para las flechas - estructura para que las flechas queden fuera */
  .testimonials-section__cards-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  
  /* Botones de flechas funcionales - realmente fuera del contenedor de scroll */
  .testimonials-section__arrow {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--surfaces-white);
    border: 1px solid var(--borders-neutral-300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  
  .testimonials-section__arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }
  
  .testimonials-section__arrow:active {
    transform: translateY(-50%) scale(0.95);
  }
  
  .testimonials-section__arrow svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-icons-neutral-700);
  }
  
  .testimonials-section__arrow--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  .testimonials-section__arrow--left {
    left: 0;
  }
  
  .testimonials-section__arrow--right {
    right: 0;
  }
}

@media (min-width: 1281px) {
  .testimonials-section__arrow {
    display: none !important;
  }
}

.testimonials-section__card {
  border: 1px solid var(--borders-neutral-300);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 320px;
  justify-content: space-between;
}

.testimonials-section__card-text {
  font-family: var(--body-3-medium-font-family);
  font-size: var(--body-3-medium-font-size);
  font-weight: var(--body-3-medium-font-weight);
  line-height: var(--body-3-medium-line-height);
  letter-spacing: var(--body-3-medium-letter-spacing);
  color: var(--text-icons-neutral-800);
  margin: 0;
  flex: 1;
}

.testimonials-section__profile {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  margin-top: auto;
}

.testimonials-section__avatar {
  width: 56px;
  height: 56px;
  border-radius: 96px;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonials-section__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials-section__profile-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.testimonials-section__profile-name {
  font-family: var(--body-2-semibold-font-family);
  font-size: var(--body-2-semibold-font-size);
  font-weight: var(--body-2-semibold-font-weight);
  line-height: var(--body-2-semibold-line-height);
  letter-spacing: var(--body-2-semibold-letter-spacing);
  color: var(--text-icons-neutral-800);
  margin: 0;
}

.testimonials-section__profile-company {
  font-family: var(--body-3-regular-font-family);
  font-size: var(--body-3-regular-font-size);
  font-weight: var(--body-3-regular-font-weight);
  line-height: var(--body-3-regular-line-height);
  letter-spacing: var(--body-3-regular-letter-spacing);
  color: var(--text-icons-neutral-500);
  margin: 0;
}

@media (min-width: 1001px) and (max-width: 1248px) {
  .testimonials-section__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .testimonials-section {
    padding: 40px 24px;
  }

  .testimonials-section__card {
    min-height: auto;
  }

  .testimonials-section__profile {
    width: 100%;
  }
}


/* Prompt Detail Page */
.prompt-detail {
    padding: 80px 0;
    background-color: var(--surfaces-white);
    min-height: 100vh;
}

.prompt-detail__container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 96px;
}

.prompt-detail__top-nav {
    margin-bottom: 48px;
}

.prompt-detail__top-nav .button--link {
    color: var(--text-icons-neutral-700);
    font-size: 14px;
    font-weight: var(--types-font-weight-semibold);
    text-transform: none;
    letter-spacing: 0;
    gap: 8px;
    padding: 0;
}

.prompt-detail__top-nav .button--link:hover {
    color: var(--text-icons-tonal-700);
}

.prompt-detail__top-nav .button--link i {
    font-size: 18px;
}

.prompt-detail__layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 0;
    align-items: start;
}

/* Sidebar Refined */
.prompt-detail__sidebar {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    border-left: 1px solid var(--borders-neutral-300);
    padding-left: 64px;
    height: 100%;
}

.prompt-detail__sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.prompt-detail__sidebar-group > * {
    flex: 1;
}

@media (min-width: 601px) and (max-width: 1000px) {
    .prompt-detail__sidebar {
        display: grid;
        grid-template-columns: 1fr 340px;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        gap: 32px;
        border-top: 1px solid var(--borders-neutral-300);
        padding-top: 40px;
        margin-top: 40px;
        position: static;
        align-items: center;
    }

    .prompt-detail__sidebar-group {
        gap: 32px;
    }

    .prompt-detail__layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .prompt-detail__main {
        padding-right: 0;
    }
}

.prompt-detail__main {
    padding-right: 64px;
}

.prompt-detail__customer-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prompt-detail__sidebar-title {
    font-family: var(--h3-font-family);
    font-size: 20px;
    line-height: 1.3;
    color: var(--text-icons-neutral-900);
    margin: 0;
}

.prompt-detail__sidebar-text {
    font-family: var(--types-family-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-icons-neutral-700);
    margin: 0;
}

.prompt-detail__sidebar-action {
    margin-top: 4px;
}

.prompt-detail__sidebar-action .button--link {
    padding: 0;
    justify-content: flex-start;
    gap: 6px;
    font-size: 14px;
    color: var(--text-icons-tonal-700);
}

.prompt-detail__sidebar-action .button--link i {
    font-size: 16px;
}

.prompt-detail__demo-banner {
    background: linear-gradient(135deg, var(--gradients-banner-start) 0%, var(--gradients-banner-end) 100%);
    border-radius: 24px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-web);
}

.prompt-detail__demo-stars {
    width: 60px;
}

.prompt-detail__demo-stars img {
    width: 100%;
    filter: brightness(0) invert(1);
}

.prompt-detail__instructions-title {
    font-family: var(--h3-font-family);
    font-size: 24px;
    margin-bottom: 24px;
}

.prompt-detail__instructions-list {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
    counter-reset: step-counter;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prompt-detail__instructions-list li {
    display: flex;
    gap: 12px;
    line-height: 1.5;
    color: var(--text-icons-neutral-700);
}

.prompt-detail__instructions-list li::before {
    content: counter(step-counter) ".";
    counter-increment: step-counter;
    flex-shrink: 0;
    font-weight: var(--types-font-weight-semibold);
    color: var(--text-icons-neutral-800);
    min-width: 20px;
}

.prompt-detail__demo-title {
    font-family: var(--h3-font-family);
    font-size: 21px;
    line-height: 1.3;
    color: white;
    margin: 0;
}

.prompt-detail__demo-action {
    width: 100%;
}

.prompt-detail__demo-action .button {
    width: 100%;
    background: white;
    color: var(--text-icons-tonal-700);
}

.prompt-detail__demo-action .button:hover {
    background: var(--surfaces-tonal-100);
    color: var(--text-icons-tonal-800);
}

/* Main Content Refined */
.prompt-detail__header {
    margin-bottom: 40px;
}

.prompt-detail__title {
    font-family: var(--h1-bold-font-family);
    font-size: var(--h2-bold-font-size);
    font-weight: var(--h1-bold-font-weight);
    line-height: 1.1;
    color: var(--text-icons-neutral-900);
    margin: 16px 0;
}

.prompt-detail__box {
    background: var(--surfaces-neutral-200);
    border: 1px solid var(--borders-tonal-400);
    border-radius: 24px;
    overflow: hidden;
    /* box-shadow: var(--shadow-web); */
    margin-bottom: 48px;
}

.prompt-detail__box-content {
    padding: 40px;
    position: relative;
    min-height: 200px;
}

.prompt-detail__box-content pre {
    margin: 0;
    white-space: pre-wrap;
    padding-bottom: 40px;
}

.prompt-detail__box-content code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-icons-neutral-800);
}

.prompt-detail__copy-icon {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: var(--surfaces-tonal-100);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-icons-tonal-700);
    transition: all 0.3s;
    z-index: 10;
}

.prompt-detail__copy-icon:hover {
    background: var(--surfaces-tonal-200);
    transform: scale(1.05);
}

.prompt-detail__copy-icon.success {
    background: var(--borders-border-success) !important;
    color: white !important;
}

.prompt-detail__copy-icon i {
    font-size: 20px;
}

/* Social Share Refined */
.prompt-detail__share {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prompt-detail__share-title {
    font-family: var(--types-family-font);
    font-size: 14px;
    font-weight: var(--types-font-weight-semibold);
    color: var(--text-icons-neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.prompt-detail__share-links {
    display: flex;
    gap: 12px;
}

.prompt-detail__share-link {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--surfaces-tonal-100);
    border: 1px solid var(--borders-tonal-400);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-icons-tonal-700);
    text-decoration: none;
    transition: all 0.3s;
}

.prompt-detail__share-link:hover {
    background: var(--surfaces-tonal-200);
    color: var(--text-icons-tonal-800);
    transform: translateY(-2px);
}

.prompt-detail__share-link i {
    font-size: 20px;
}

/* Related Prompts Refined */
.prompt-detail__related {
    margin-top: 100px;
    padding-top: 80px;
    border-top: 1px solid var(--borders-neutral-300);
}

.prompt-detail__related-title {
    font-family: var(--h2-bold-font-family);
    font-size: var(--h3-font-size);
    margin-bottom: 48px;
    color: var(--text-icons-neutral-900);
}

/* Related Prompts Carousel (Replicating Benefits Model) */
/* Wrapper removed/simplified for static grid */
.prompt-detail__related-cards-wrapper {
    position: relative;
    width: 100%;
    margin-top: 40px;
}

/* Related Prompts - Static Grid Layout */
.prompt-detail__related-cards {
    display: flex;
    gap: 24px;
    flex-wrap: wrap; /* Allow wrapping on mobile */
    width: 100%;
    padding: 20px 0;
}

.prompt-detail__related-cards::-webkit-scrollbar {
    display: none;
}

.prompt-detail__related-cards .prompts-section__card {
    flex: 0 0 calc(33.333% - 22px);
    min-width: 320px;
    /* transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); */
    cursor: pointer;
    opacity: 0.6;
    /* transform: scale(0.9); */
}

.prompt-detail__related-cards .prompts-section__card--centered {
    opacity: 1;
    /* transform: scale(1.05);  */
    box-shadow: 0 20px 40px rgba(119, 79, 246, 0.2);
    z-index: 6;
    position: relative;
}

/* Arrows mirroring benefits-section__arrow */
.prompt-detail__related-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--surfaces-white);
    border: 1px solid var(--borders-neutral-200);
    color: var(--text-icons-neutral-800);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.prompt-detail__related-arrow:hover {
    background: var(--surfaces-neutral-100);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.prompt-detail__related-arrow svg {
    width: 24px;
    height: 24px;
}

.prompt-detail__related-arrow--left {
    left: 10px;
}

.prompt-detail__related-arrow--right {
    right: 10px;
}

.prompt-detail__related-arrow:focus {
    outline: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.prompt-detail__related-arrow:active {
    transform: translateY(-50%) scale(0.95);
    background: #EAEAEA;
    opacity: 1 !important;
}

@media (max-width: 1280px) {
    .prompt-detail__related-cards-wrapper {
        padding: 0 40px;
    }
    .prompt-detail__related-cards-wrapper::before { left: 40px; }
    .prompt-detail__related-cards-wrapper::after { right: 40px; }
}

@media (max-width: 1000px) {
    .prompt-detail__related-cards {
        flex-direction: column; /* Stack vertically on mobile/tablet */
    }
    
    .prompt-detail__related-cards .prompts-section__card {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 600px) {
    .prompt-detail__container {
        padding: 0 24px;
    }

    .prompt-detail {
        padding: 100px 0 60px;
    }

    .prompt-detail__layout {
        display: flex;
        flex-direction: column;
        gap: 48px;
    }

    .prompt-detail__sidebar {
        position: static;
        order: 2;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        gap: 32px;
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--borders-neutral-300);
        padding-top: 40px;
    }
    
    .prompt-detail__main {
        order: 1;
        padding-right: 0;
    }

    .prompt-detail__title {
        font-size: 28px;
    }

    .prompt-detail__box-content {
        padding: 24px;
    }
    
    .prompt-detail__copy-icon {
        bottom: 16px;
        right: 16px;
    }

    .prompt-detail__demo-banner {
        padding: 32px;
    }
}

@media (min-width: 601px) and (max-width: 991px) {
    .prompt-detail__container {
        padding: 0 40px;
    }
}