/* --- SECCIÓN BANNER TRADER HÍBRIDO (PÁGINA PRINCIPAL) --- */
.seccion-banner-hibrido {
  position: relative;
  width: 92%;
  max-width: 1400px;
  margin: 3rem auto; /* Separa esta sección 5rem de la de arriba y la de abajo */
  min-height: 450px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 4rem;
  box-sizing: border-box;
  
  /* Gradiente que oscurece la izquierda y deja ver la imagen a la derecha */
  background: linear-gradient(to right, rgba(5, 11, 20, 0.95) 0%, rgba(5, 11, 20, 0.6) 50%, transparent 100%),
              url("../ImagenesFondos/FondoHibrido.jpg") no-repeat right center;
  background-size: cover;
}

.banner-contenido {
  max-width: 600px;
  z-index: 2; /* Asegura que el texto esté por encima de todo */
}

.banner-titulo {
  font-size: 3.5rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1rem 0;
  letter-spacing: -1px;
}

.banner-subtitulo {
  font-size: 1.1rem;
  color: #c1c2c2;
  font-weight: 400;
  margin: 0 0 2.5rem 0;
}

/* --- BOTÓN FUNCIONAL CON DEGRADADO --- */
.btn-degradado {
  display: inline-block; /* Es vital para que la etiqueta <a> respete los márgenes */
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none; /* Quita el subrayado típico de los enlaces */
  border-radius: 50px;
  
  /* Degradado azul de izquierda a derecha */
  background: linear-gradient(135deg, #1e88e5 0%, #00d2ff 100%);
  box-shadow: 0 5px 15px rgba(30, 136, 229, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-degradado:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(30, 136, 229, 0.5); /* Sombra más brillante al pasar el ratón */
}

/* --- ANIMACIÓN CSS --- */
.animar-fade-right {
  opacity: 0;
  transform: translateX(-50px); /* Empieza desplazado a la izquierda */
  transition: opacity 1s ease, transform 1s ease;
}

.animar-fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- RESPONSIVE DESIGN (MÓVILES) --- */
@media (max-width: 768px) {
  .seccion-banner-hibrido {
    /* En móviles, la imagen se ve arriba y el degradado oscuro sube desde abajo */
    background: linear-gradient(to top, rgba(5, 11, 20, 0.95) 0%, rgba(5, 11, 20, 0.4) 100%),
                url('../ImagenesFondos/FondoHibrido.jpg') no-repeat center top;
    background-size: cover;
    padding: 3rem 2rem;
    align-items: flex-end; /* Baja el texto para que no tape las caras */
    min-height: 500px;
    text-align: center;
  }

  .banner-contenido {
    margin: 0 auto;
  }

  .banner-titulo {
    font-size: 2.5rem;
  }
   .banner-subtitulo {
    font-size: 1rem;
  }

  .animar-fade-right {
    transform: translateY(30px); /* En móviles la animación viene de abajo */
  }
  .animar-fade-right.visible {
    transform: translateY(0);
  }
}