@import url('../global.css');
@import url("https://fonts.googleapis.com/css?family=Merriweather|Montserrat|Shadows+Into+Light");

body {
  background-color: #191c32;
}

/* Estilos portafolio */
#hero-portafolio {
  padding: 2rem;
  background-color: #191c32;
  height: 600px;
  display: flex;
  align-items: center;
}

.titulo-hero-portafolio {
  margin-top: 0;
}

.titulo-empresa-portafolio{
  text-align: right;
}

.hero-text h1 {
  font-size: 2.5rem;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  max-width: 500px;
}

.empresa-text{
  font-size: 1.5rem;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  max-width: 500px;
  text-align: justify;
}


.chatbot-text{
  font-size: 1.5rem;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  max-width: 400px;
  text-align: justify;
  margin-left: 100px;
}



.sistema-empresarial-text{
  font-size: 2.5rem;
  color: rgb(0, 0, 0);
  max-width: 500px;
  font-weight: bold;
}


.resaltado{
  -webkit-text-stroke: 1px #f8db04; /* Grosor y color del borde */

}

.highlight-hero {
  color: #2b7ffd; 
  font-weight: bold;
}

.highlight {
  color: #f8db04; 
  font-weight: bold;
}

.hero-image img {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Responsive design */
@media (max-width: 768px) {
  .hero-text h1 {
      font-size: 2rem;
      text-align: center;
  }

  .hero-image {
      margin-top: 1rem;
      text-align: center;
  }

  .col-12.col-md-6 {
      text-align: center;
  }
}


#estudiantil-portafolio{
  background-color: #2b7ffd;
  height: 500px;
}

#sistema-empresarial{
  background-color: #ffffff;
  
}


.empresa-image img {
  width: 80%; /* Ajusta el ancho al 100% del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  border-radius: 10px; /* Bordes redondeados para un aspecto más suave */
  max-width: 600px;
}



.empresa-image img {
  filter: brightness(0.9) contrast(1.1) saturate(0.9); /* Ajusta brillo, contraste y saturación */
}
.empresa-image{
  margin-top: 50px;
}


.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grid-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.grid-item img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.grid-item:hover img {
  transform: scale(1.1);
}

.grid-item:nth-child(1) {
  grid-column: span 2;
}

.descripcion-sistema {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-left: 4px solid #2b7ffd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 100px;
}


#paginas{
  height: 300px;
}




    h2, h3 {
      font-weight: 700;
    }

    /* ====== Sección Hero/Portfolio ====== */
    .hero-section {
      background: #f8f9fa; /* Puedes cambiar a un degradado si lo prefieres */
      padding: 4rem 2rem;
    }

    .hero-section .welcome-title {
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
    }

    .hero-section p {
      font-size: 1rem;
      color: #666;
      line-height: 1.6;
      margin-bottom: 2rem;
    }

    /* ====== Estadísticas ====== */
    .hero-section .stats {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin-bottom: 2rem;
    }

    .hero-section .stat {
      flex: 1 1 auto;
      min-width: 100px;
      text-align: center;
    }

    .hero-section .stat h3 {
      font-size: 2rem;
      color: #007bff; /* Color principal (azul de Bootstrap) */
      margin-bottom: 0.5rem;
    }

    .hero-section .stat small {
      font-size: 0.875rem;
      color: #555;
    }

    /* ====== Botón de llamada a la acción ====== */
    .hero-section .btn-primary {
      font-size: 1rem;
      padding: 0.75rem 1.5rem;
      border-radius: 50px;
      transition: background-color 0.3s ease;
    }

    .hero-section .btn-primary:hover {
      background-color: #0056b3; /* Oscurecer un poco el azul en hover */
    }

    /* ====== Imágenes del Portafolio ====== */
    .hero-section .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }

    .hero-section .portfolio-grid img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      object-fit: cover;
    }

    /* Efecto hover en las imágenes */
    .hero-section .portfolio-grid img:hover {
      transform: scale(1.03);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    /* ====== Responsivo ====== */
    @media (min-width: 768px) {
      .hero-section {
        padding: 5rem 3rem;
      }

      .hero-section .welcome-title {
        font-size: 3rem;
      }

      .hero-section .portfolio-grid {
        gap: 1.5rem;
      }
    }



/* Oculta los elementos inicialmente */
.observe-me {
  opacity: 0;
  visibility: hidden;
}

/* Animación de deslizamiento desde la izquierda */
@keyframes slideInLeft {
  from {
      transform: translateX(-100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
  }
}

.animate-slideInLeft {
  animation: slideInLeft 1s ease-out forwards;
}

/* Animación de deslizamiento desde la derecha */
@keyframes slideInRight {
  from {
      transform: translateX(100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
  }
}

.animate-slideInRight {
  animation: slideInRight 1s ease-out forwards;
}

/* Animación de aparición gradual */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
      visibility: visible;
  }
}

.animate-fadeIn {
  animation: fadeIn 1s ease-out forwards;
}

/* Animación de zoom */
@keyframes zoomIn {
  from {
      transform: scale(0.5);
      opacity: 0;
  }
  to {
      transform: scale(1);
      opacity: 1;
      visibility: visible;
  }
}

.animate-zoomIn {
  animation: zoomIn 0.8s ease-out forwards;
}
  /* Aplicar la animación al texto */
  .hero-text {
      animation: slideInLeft 1s ease-out forwards;
  }
  
  /* Aplicar la animación a la imagen */
  .hero-image {
      animation: slideInRight 1s ease-out forwards;
  }
  
  /* Estilos adicionales para el texto resaltado */
  .highlight-hero {
      color: #007bff; /* Cambia este color según tu diseño */
      font-weight: bold;
  }




  @keyframes bounceIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }
}

.animate-bounceIn {
    animation: bounceIn 0.8s ease-out forwards;
}

@keyframes dropIn {
  from {
      transform: translateY(-100vh);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
  }
}

.animate-dropIn {
  animation: dropIn 1s ease-out forwards;
}


@keyframes waveIn {
  0% {
      transform: translateY(20px);
      opacity: 0;
  }
  50% {
      transform: translateY(-10px);
      opacity: 1;
  }
  100% {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
  }
}

.animate-waveIn {
  animation: waveIn 1s ease-out forwards;
}


@keyframes glowIn {
  from {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
      opacity: 0;
  }
  to {
      box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0);
      opacity: 1;
      visibility: visible;
  }
}

.animate-glowIn {
  animation: glowIn 1.5s ease-out forwards;
}


.cta-text {
  font-size: 1.2rem;
  color: #ffffff; /* Color gris suave para el texto */
  margin-bottom: 20px; /* Espacio debajo del texto */
  text-align: left; /* Alineación de texto a la izquierda */
  max-width: 470px;
}

.btn-primary {
  font-size: 1.1rem;
  padding: 10px 20px;
  background-color: #007bff; /* Color del botón */
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #0056b3; /* Cambio de color al pasar el mouse */
}




@media (max-width: 767.98px) {
  #estudiantil-portafolio .chatbot-text h1 {
      font-size: 1.2rem; /* Reduce el tamaño de la fuente en móviles */
      text-align: center; /* Centra el texto en móviles */
      
  }

  
.chatbot-text{
  font-size: 1.2rem;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  max-width: 100000px;
  text-align: justify;
  margin-left: 0px;
}


  #estudiantil-portafolio .row.align-items-center {
      flex-direction: column; /* Cambia la dirección de la fila a columna en móviles */
  }

  #estudiantil-portafolio .col-12.col-md-6 {
      width: 100%; /* Asegura que las columnas ocupen el 100% del ancho en móviles */
      margin-bottom: 20px; /* Añade espacio entre las secciones */
  }
}