@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
/* --- CONFIGURACIÓN GENERAL BLOQUE TRADER HÍBRIDO --- */
.seccion-trader-hibrido {
  background-color: #070e17; /* Fondo oscuro azulado */
  color: #ffffff;
  font-family: 'Monserrat' , sans-serif;
  width: 92%;
  max-width: 1700px;
  margin: 0 auto;
  
  /* CAMBIO AQUÍ: Reducimos el espacio de abajo a casi nada (1rem) */
  padding: 5rem 4rem 1rem; 
  box-sizing: border-box;
}

.img-fluida {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* --- CABECERA --- */
.hibrido-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 2rem;
}

.hibrido-texto-principal {
  flex: 1 1 50%;
}

.titulo-hibrido {
  font-size: 3.5rem;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  letter-spacing: -1px;
  color: #e2e8f0;
}

.resaltado-cyan {
  color: #0edaff; /* Un cyan/grisáceo más sutil basado en la imagen */
}

.descripcion-hibrido {
  font-size: 1.25rem;
  line-height: 1.5;
  color: #e3e6eb;
  margin-bottom: 1rem;
}

.desc-secundaria {
  font-size: 1.05rem;
  color: #94a3b8;
  max-width: 90%;
}

.hibrido-imagen-principal {
  flex: 1 1 50%;
}

/* --- TARJETAS --- */
.hibrido-tarjetas {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  text-align: justify;
}

.tarjeta {
  flex: 1;
  background-color: #0b131e; /* Fondo de tarjeta sutil */
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 2.5rem;
  display: flex;
  gap: 3rem;
  align-items: center;
  margin-top: 1rem;
}

.tarjeta-texto {
  flex: 1;
}

.tarjeta-numero {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #64748b;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.linea-numero {
  height: 1px;
  width: 30px;
  background-color: #64748b;
}

.tarjeta-titulo {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 1rem 0;
  color: #f1f5f9;
}

.tarjeta-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

.tarjeta-img-contenedor {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- FLUJO INFERIOR --- */
.hibrido-flujo {
  background-color: #0b131e;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 6rem;
}

.flujo-titulo-superior {
  font-size: 1rem;
  color: #ffffff;
  letter-spacing: 2px;
  font-weight: 600;
  margin: 0 0 2rem 0;
}

.flujo-cuerpo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}

.flujo-pasos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
}

.paso-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 120px;
}

.icono-circulo {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  color: #94a3b8;
}

.icono-circulo svg {
  width: 24px;
  height: 24px;
}

.paso-titulo {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #e2e8f0;
}

.paso-desc {
  font-size: 0.75rem;
  color: #989da5;
  margin: 0;
  line-height: 1.4;
}

.flecha-paso svg {
  width: 24px;
  height: 24px;
}

.flujo-separador {
  width: 1px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0 3rem;
}

.flujo-mensaje {
  min-width: 250px;
}

.flujo-mensaje p {
  font-size: 1.1rem;
  line-height: 1.4;
  color: #ffffff;
  font-weight: 500;
  margin: 0;
}

.flujo-mensaje p span {
  color: rgb(5, 212, 248);
}

/* --- ANIMACIONES CSS --- */
.animar-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.animar-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: 0.2s;
}
.delay-2 {
  transition-delay: 0.4s;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .hibrido-cabecera {
    flex-direction: column;
    text-align: center;
  }
  .etiqueta-bloque {
    justify-content: center;
  }
  .desc-secundaria {
    max-width: 100%;
    margin: 0 auto;
  }
  .hibrido-tarjetas {
    flex-direction: column;
  }
  .flujo-cuerpo {
    flex-direction: column;
    gap: 3rem;
  }
  .flujo-separador {
    width: 100%;
    height: 1px;
    margin: 0;
  }
  .flujo-pasos {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .tarjeta {
    flex-direction: column;
    text-align: center;
  }
  .tarjeta-numero {
    justify-content: center;
  }
  .flujo-pasos {
    flex-direction: column;
  }
  .flecha-paso {
    transform: rotate(90deg);
    margin: 1rem 0;
  }
  .flujo-titulo-superior {
    text-align: center;
  }
  .flujo-mensaje {
    text-align: center;
  }
}

/* --- BLOQUE 2: SINERGIA --- */
.seccion-sinergia {
  background-color: #0b131e; /* Un tono ligeramente diferente si quieres separarlo, o usa #070e17 */
  color: #ffffff;
  font-family: "Inter", sans-serif;
  width: 92%;
  max-width: 1400px;
  margin: 0 auto;
   /* CAMBIO AQUÍ: Reducimos el espacio de abajo a casi nada (1rem) */
  padding: 2rem 4rem 2rem; 
  box-sizing: border-box;
}

/* Cabecera Sinergia */
.sinergia-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  margin-bottom: 0.5rem;
}

.sinergia-texto {
  flex: 1 1 40%;
}

.titulo-sinergia {
  font-size: 3.5rem;
  line-height: 1.1;
  font-weight: 700; /* Más fino como en el diseño */
  margin: 0 0 1.5rem 0;
  color: #0edaff;
}

.titulo-hibrido {
  font-size: 3.5rem;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  letter-spacing: -1px;
  color: #e2e8f0;
}

.resaltado-blanco {
  font-weight: 700;
  color: #ffffff;
}

.descripcion-sinergia {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #cbd5e1;
}

.sinergia-imagen-principal {
  flex: 1 1 60%;
}

/* Cuadrícula de Tarjetas */
.sinergia-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.tarjeta-grid {
  margin-top: 0.5rem;
  background-color: #121c29;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 3rem;
  display: flex;
  gap: 3rem;
  overflow: hidden;
}

/* La tarjeta 03 ocupa las 2 columnas */
.tarjeta-ancha {
  grid-column: 1 / -1;
}

.tarjeta-contenido {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

.ancho-texto {
  flex: 0 0 35%; /* Limita el ancho del texto en la tarjeta inferior */
}

.tarjeta-cabecera {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}


.numero-gris {
  font-size: 1.2rem;
  color: #64748b;
  font-weight: 300;
}

.linea-corta {
  height: 1px;
  width: 40px;
  background-color: #64748b;
}

.tarjeta-titulo-chico {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 1rem 0;
  color: #f1f5f9;
  
}

.tarjeta-desc-chica {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
  text-align: justify;
}

.tarjeta-img-lateral {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.tarjeta-img-ancha {
  flex: 1 1 60%;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  margin: 0; /* ELIMINAMOS los márgenes negativos */
}

.tarjeta-img-ancha img {
  width: 100%;
  height: 100%;
  max-height: 300px; /* Controla la altura máxima para que la caja 5 no se haga gigante */
  object-fit: cover; /* Recorta la imagen sin deformarla */
  border-radius: 8px; /* Le ponemos los mismos 8px de borde que tienen las imágenes de arriba */
}


/* Banner CTA */
.sinergia-cta {
  background-color: #0e1724;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3rem 4rem;
  border-radius: 0 0 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cta-texto h2 {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 3rem ;
  color: #ffffff;
}

/* Nuevo contenedor para la imagen del CTA */
.cta-imagen {
  flex: 0 0 auto; /* Evita que el flexbox aplaste la imagen */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 3rem 0 0;
}

/* Estilos de la imagen bonita */
.cta-imagen img {
  max-width: 250px; /* Puedes subir o bajar este número para cambiar el tamaño (ej. 150px o 250px) */
  height: auto;
  border-radius: 8px; /* Le da bordes suavemente redondeados (bórralo si tu imagen es PNG sin fondo) */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Sombra sutil para que resalte del fondo oscuro */
  object-fit: contain;
}

/* Actualización del Responsive para móviles */
@media (max-width: 1024px) {
  /* ... (mantén lo que ya tenías y asegúrate de que el CTA se vea así) ... */
  .sinergia-cta { 
    flex-direction: column; 
    text-align: center; 
    gap: 2rem; 
    padding: 3rem 2rem; 
  }
  
  .cta-imagen img {
    max-width: 150px; /* En móviles la hacemos un poco más pequeña */
  }
}

/* Animaciones compartidas (si no las has puesto ya globalmente) */
.animar-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.animar-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.delay-1 {
  transition-delay: 0.2s;
}
.delay-2 {
  transition-delay: 0.4s;
}
.delay-3 {
  transition-delay: 0.6s;
}

/* Responsive */
@media (max-width: 1024px) {
  .sinergia-cabecera {
    flex-direction: column;
    text-align: center;
  }
  .sinergia-grid {
    grid-template-columns: 1fr;
  }
  .tarjeta-ancha {
    grid-column: 1;
  }
  .tarjeta-grid {
    flex-direction: column;
  }
  .tarjeta-img-ancha {
    margin: 1.5rem -2.5rem -2.5rem -2.5rem;
  }
  .tarjeta-img-ancha img {
    border-radius: 0 0 16px 16px;
  }
  .sinergia-cta {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    padding: 3rem 2rem;
  }
}