/* 
  ==================================================
  IMPORTAR FUENTE (Opcional)
  ==================================================
  Si deseas usar la fuente "Poppins", 
  agrega este import al inicio de tu CSS:
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/*
  ==================================================
  ESTILOS BASE / RESET
  ==================================================
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', Arial, sans-serif;
  margin: 0;
  padding-top: 70px; /* Espacio para la navbar fija */
  background-color: #fff; /* Fondo global blanco */
  color: #333; /* Color de texto base */
}

/*
  ==================================================
  HEADER / NAVBAR
  ==================================================
*/

header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar {
  padding: 0.75rem 1rem;
}

/* Marca de la empresa (AImpulso) */
.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;      /* Más grande para destacar */
  color: #5a2ff5 !important; /* Color principal */
  letter-spacing: -0.5px; /* Ajuste leve para un look profesional */
}

.logo-icon {
  width: 40px;   /* Ajusta el tamaño según necesites */
  height: auto;  /* Mantiene la proporción de la imagen */
  vertical-align: middle; /* Alinea verticalmente con el texto */
}

/* Estilo de los links de la navbar */
.nav-link {
  color: #333 !important;
  font-weight: 500;
  margin-left: 1rem;
  transition: color 0.2s ease-in-out;
}

.nav-link:hover {
  color: #5a2ff5 !important; /* Hover en púrpura */
}

/* Botón del navbar (Chequeo de Procesos) */
.btn-orange {
  background-color: #FF7A00;
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.btn-orange:hover {
  background-color: #e86c00;
}

/*
  ==================================================
  HERO SECTION
  ==================================================
*/

.hero {
  /* Si quieres que ocupe toda la pantalla: 
     min-height: calc(100vh - 70px); */
  padding: 4rem 0;
  display: flex;
  align-items: center;
  background-color: #fff; 
}

/* Título principal del Hero */
.hero-title {
  font-size: 3rem;       /* Ajusta según tu preferencia */
  line-height: 1.2;
  font-weight: 700;
  color: #5a2ff5;        /* Púrpura principal */
  margin-bottom: 1.5rem;
}

/* Subtítulo / Texto descriptivo */
.hero-subtitle {
  font-size: 1.125rem;   /* 18px aprox */
  line-height: 1.6;
  color: #444;           /* Gris oscuro */
}

/* Ajustes de imagen en la columna derecha */
.hero img {
  max-width: 100%;
  height: auto;
}

/* 
  Botones en la sección Hero 
  (Se aprovechan las clases de Bootstrap, 
   aquí solo ajustamos un poco más)
*/
.btn-orange.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 4px;
}

.btn-outline-secondary.btn-lg {
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 4px;
  color: #333;
  border-color: #333;
}
.btn-outline-secondary.btn-lg:hover {
  color: #5a2ff5;
  border-color: #5a2ff5;
}

/*
==================================================
TARJETAS - 4 PASOS (steps-section)
==================================================
*/
.steps-section {
background-color: #f9f9f9; /* Fondo suave */
padding: 3rem 1rem;
}

.steps-section h2 {
text-align: center;
margin-bottom: 2rem;
}

.hero-steps-title {
    font-size: 2.0rem;       /* Ajusta según tu gusto */
    font-weight: 400;        /* Negrita */
    color: #5a2ff5;          /* Morado vibrante, cámbialo al tono que prefieras */
    letter-spacing: -0.5px;  /* Ajuste leve de espaciado entre letras */
    line-height: 1.2;        /* Espaciado vertical */
    margin-bottom: 2rem;     /* Espacio debajo del título (o usa la clase .mb-5) */
    font-family: 'Poppins', sans-serif; /* Si usas Poppins u otra fuente */
  }

/* Tarjetas en "Tus 4 pasos" */
.steps-section .card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.steps-section .card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.steps-section .card-body {
padding: 1.5rem;
}

.steps-section .card-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.75rem;
}

/*
Para forzar la misma altura en las tarjetas, 
usamos "align-items-stretch" en la fila + .card.h-100
o la regla h-100. 
Si en tu HTML ya pusiste la clase h-100, esto refuerza 
el 100% de altura en la tarjeta.
*/
.steps-section .row-cols-md-4 > .col > .card.h-100 {
height: 100%;
}

/* Sección de Confianza con menos padding vertical */
.trust-section {
    background-color: #fff; /* O el color que prefieras */
    padding: 1.5rem 0;      /* py-3 en Bootstrap equivaldría a ~1rem, ajusta según tu gusto */
  }
  
  /* Cada bloque: fondo y borde para resaltar */
  .step-block {
    background-color: #ecf2f9; /* Color de fondo del bloque */
    border: 1px solid #b9f3e1;
    border-radius: 8px;
    margin: 0; /* Quita márgenes propios, usaremos my-3 en la row */
    padding: 0.2rem; /* Ajusta el espacio interno de cada bloque */
  }
  
  /* Control de imágenes */
  .trust-image {
    max-width: 200px; /* Tamaño máximo */
    height: auto;
    object-fit: cover;
    margin: 0.5rem auto; 
  }
  
  /* Títulos */
  .step-block h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #5a2ff5;
    margin-bottom: 0.75rem;
  }
  
  /* Texto */
  .step-block p {
    color: #555;
    line-height: 1.6;
  }
  
  /* 
    Animaciones: 
    slide-from-left y slide-from-right
  */
  .slide-from-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .slide-from-left.show {
    opacity: 1;
    transform: translateX(0);
  }
  
  .slide-from-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .slide-from-right.show {
    opacity: 1;
    transform: translateX(0);
  }
  
  

/*
  ==================================================
  TARJETAS - RECURSOS (resources-section)
  ==================================================
*/
.resources-section {
    padding: 3rem 1rem;
    background-color: #fff; /* Distinto al de steps-section */
  }
  
  .resources-section h2 {
    margin-bottom: 2rem;
  }
  
  /* Tarjetas en "Estudios de Caso, Artículos y Recursos" */
  .resources-section .card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  .resources-section .card:hover {
    background-color: #f0f0f0; /* Cambia sutilmente el fondo al hacer hover */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  
  .resources-section .card-body {
    padding: 1.5rem;
  }
  
  .resources-section .card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #5a2ff5; /* Diferencia el color del título */
    margin-bottom: 0.75rem;
  }
  
  .resources-section .card-footer {
    background-color: transparent;
    border-top: none;
  }
  
  /* Igual que en la sección anterior, forzamos altura */
  .resources-section .row-cols-md-4 > .col > .card.h-100 {
    height: 100%;
  }
  
  /*

/*
  ==================================================
  SECCIÓN DESTACADA (highlight-section)
  ==================================================
*/

.highlight-section {
  background-color: #673de6; /* Morado aproximado */
  color: #fff;
  padding: 3rem 1rem;
  text-align: center;
}

.highlight-section .row .col img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
}
/*
  ==================================================
  ANIMACIONES (fade-in, slide-up)
  ==================================================
*/

/* Efecto fade-in */
.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.fade-in.show {
  opacity: 1;
}

/* Efecto slide-up */
.slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.slide-up.show {
  opacity: 1;
  transform: translateY(0);
}

/*
  ==================================================
  OTRAS SECCIONES (EJEMPLOS)
  ==================================================
*/

.services-col img {
  width: 60px;
  margin-bottom: 1rem;
}

.steps-section .step-box {
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  text-align: center;
}

.subscribe-section {
  background-color: #f0f0f0;
  padding: 2rem 1rem;
  text-align: center;
}

.resources-section {
  padding: 3rem 1rem;
  text-align: center;
}
.resources-section .card h5 {
  min-height: 50px;
}

.cta-final {
  background-color: #673de6;
  color: #fff;
  padding: 3rem 1rem;
  text-align: center;
}

/*
  ==================================================
  FOOTER
  ==================================================
*/

/* Footer oscuro */
.footer-dark {
  background-color: #121212; /* Ajusta al color que desees */
  color: #fff;
}

/* Ajuste de texto y enlaces en el footer */
.footer-dark a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-dark a:hover {
  color: #5a2ff5; /* Púrpura de ejemplo para hover */
}

/* Separador blanco */
.footer-dark hr.text-white {
  opacity: 0.2; /* Para un efecto tenue */
}

/* Botón principal (ya definido, si no, agrégalo) */
.btn-orange {
  background-color: #FF7A00;
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.btn-orange:hover {
  background-color: #e86c00;
}