
  /*-----------------------------------*\
    #HERO
  \*-----------------------------------*/
.hero-AJsystem {
    background: linear-gradient(135deg, var(--AJsystem-blue) 20%, var(--AJsystem-violet) 100%); /* Gradiente llamativo */
    padding: 60px 0 80px 0; /* Más padding vertical */
    color: var(--AJsystem-white);
    overflow: hidden; /* Para contener elementos visuales si se animan */
    padding-top: 80px; /* Adjust top padding as needed, e.g., 100px from your .AJsystem style */
    padding-bottom: 0px;  /* CRITICAL: Reduce this significantly. Start with a small value like 0px or 5px and adjust. */
    position: relative;
  }
  
  .hero-AJsystem__container {
    display: grid;
    grid-template-columns: 1fr; /* Stack en móvil */
    align-items: center;
    gap: 40px;
    text-align: center; /* Centrado en móvil */
  }
  
  .hero-AJsystem__title {
    font-size: clamp(4.45rem, 5vw, 3.8rem); /* Tamaño de fuente adaptable */
    color: var(--AJsystem-white);
    font-weight: var(--fw-700); /* Más peso */
    margin-bottom: 20px;
    line-height: 1.3;
  }
  
  
  .hero-AJsystem__description {
    font-size: clamp(2rem, 2.5vw, 1.2rem);
    color: var(--AJsystem-soft-white);
    max-width: 60ch;
    margin: 0 auto 30px auto; /* Centrado y con margen inferior */
    line-height: 1.7;
  }
  
  .hero-AJsystem__cta-group {
    display: flex;
    flex-wrap: wrap; /* Para que no se desborden en pantallas pequeñas */
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
  }
  
  .btn-AJsystem-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 48px; /* Botones más grandes */
  font-size: 1.2rem;   /* Texto ligeramente más grande */
  font-weight: var(--fw-600);
  border-radius: 30px;
  border: 2px solid transparent;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  
  .btn-primary.btn-AJsystem-cta {
    background-color: var(--AJsystem-white);
    color: var(--AJsystem-violet); /* Texto violeta */
    font-weight: var(--fw-600);
  }
  
  .btn-primary.btn-AJsystem-cta:hover {
    background-color: transparent;
    color: var(--AJsystem-white);
    border-color: var(--AJsystem-white);
  }
  
  .btn-secondary.btn-AJsystem-cta {
    background-color: transparent;
    color: var(--AJsystem-white);
    border: 2px solid var(--AJsystem-soft-white); /* Borde sutil */
    font-weight: var(--fw-600);
  }
  
  .btn-secondary.btn-AJsystem-cta:hover {
    background-color: var(--AJsystem-white);
    color: var(--AJsystem-blue); /* Texto azul al hacer hover */
    border-color: var(--AJsystem-white);
  }
  
  .hero-AJsystem__subtext {
    font-size: 1.3rem;
    color: var(--AJsystem-soft-white);
    opacity: 0.9;
  }
  
  .hero-AJsystem__visual {
    max-width: 450px; /* Ajusta según tu imagen */
    margin: 0 auto; /* Centrar imagen en móvil */
  }
  
  .hero-AJsystem__img {
    width: 80%;
    height: auto;
    /* Podrías añadir una animación sutil si quieres */
    /* animation: float 3s ease-in-out infinite; */
  }
  
  /* Responsive para Desktop en Hero */
  @media (min-width: 768px) {
    .hero-AJsystem__container {
      grid-template-columns: 1.5fr 1fr; /* Dos columnas */
      text-align: left; /* Alinear texto a la izquierda */
       gap: 60px;
    }
     .hero-AJsystem__content {
       order: 1.5; /* Contenido a la izquierda */
     }
    .hero-AJsystem__visual {
       order: 2; /* Visual a la derecha */
       margin: 0; /* Resetear margen */
     }
    .hero-AJsystem__description {
       margin: 0 0 30px 0; /* Resetear margen horizontal */
     }
     .hero-AJsystem__cta-group {
        justify-content: flex-start; /* Alinear botones a la izquierda */
     }
  }
  
  /* Keyframes para animación (opcional) */
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
  }
   
  /*-----------------------------------*\
    #PROMO
  \*-----------------------------------*/
  .features-AJsystem {
    background-color: var(--AJsystem-soft-background); /* Fondo suave */
    padding: 80px 0;
  }
  
  .text-center {
    text-align: center;
  }
  
  .section-title.text-center {
    font-size: 3rem;
    color: var(--AJsystem-black-intense);
  }
  
  .section-subtitle.text-center {
    font-size: 2rem;
    margin-bottom: 50px;
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
     color: var(--AJsystem-black-intense); /* Heredado, pero por si acaso */
  }
  
  .features-AJsystem__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Grid adaptable */
    gap: 30px;
  }
  
  .feature-card {
    background-color: var(--AJsystem-white);
    padding: 35px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
  
  .feature-card__icon {
    margin: 0 auto 20px auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--AJsystem-white); /* Icono blanco */
  }
  
  .feature-card__icon.icon-blue {
    background-color: var(--AJsystem-blue);
  }
  
  .feature-card__icon.icon-black {
    background-color: var(--AJsystem-black);
  }
  
  .feature-card__icon svg {
     width: 30px; /* Tamaño del icono dentro del círculo */
     height: 30px;
  }
  
  
  .feature-card__title {
    font-size:  2.2rem; /* 1.8rem */
    color: var(--AJsystem-black-intense);
    margin-bottom: 10px;
    font-weight: var(--fw-600);
  }

  .feature-card__title-2 {
    font-size:  2.2rem; /* 1.8rem */
    color: var(--AJsystem-blue);
    margin-bottom: 10px;
    font-weight: var(--fw-600);
  }
  
  .feature-card__text {
    font-size: 1.5rem;
    color: var(--AJsystem-silver);
    line-height: 1.6;
    text-align: left;
  }

.top-banner-ip {
  background-color: #000;
  color: #fff;
  font-size: 1.2rem;
  padding: 12px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
  top: -20px;
  z-index: 1;
}

.top-banner-status.protegido {
  color: #00e676;
  font-weight: bold;
}

.top-banner-status.desprotegido {
  color: #ff5252;
  font-weight: bold;
}
.hero-AJsystem {
  margin-top: 25px;
}

/*-----------------------------------*\
  #LEYES
\*-----------------------------------*/

.new-info-section .new-info-header {
  margin-bottom: 40px; /* Espacio entre el texto y las imágenes */
}

.new-info-section .text-center { /* Helper class if not already broadly defined */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-block: 15px 15px;
}
.new-info-section .section-text { /* Helper class if not already broadly defined */
  text-align: justify;
}

.new-info-section .section-title.text-center {
  max-width: 100%; /* Asegura que el título centrado pueda usar todo el ancho si es necesario */
  
}

.new-info-images {
  display: grid;
  grid-template-columns: 1fr; /* Por defecto, una imagen encima de la otra en móviles */
  gap: 30px; /* Espacio entre las imágenes si están en columna, o entre contenedores de imagen */
  justify-items: center; /* Centra los contenedores de imagen dentro de las columnas del grid */
}

.new-info-image-container {
  width: 100%;
  max-width: 450px; /* Ajusta el tamaño máximo de cada contenedor de imagen */
}

.new-info-img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* Opcional: bordes redondeados para las imágenes */
  box-shadow: var(--shadow-1); /* Opcional: una sombra sutil */
  margin-bottom: 10px; /* Espacio entre la imagen y su caption */
}

.image-caption {
  font-size: var(--fs-5);
  color: var(--AJsystem-silver);
}

/* Media Query para mostrar imágenes lado a lado en pantallas más grandes */
@media (min-width: 768px) {
  .new-info-images {
    grid-template-columns: 1fr 1fr; /* Dos columnas para las imágenes */
    align-items: start; /* Alinea los contenedores de imagen en la parte superior de su celda */
  }

  
}
