/* --- Reset Básico y Estilos Globales --- */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: 'Poppins', sans-serif;
   line-height: 1.7;
   color: #333;
   background-color: #f9f9f9;
   /* Un fondo claro para la página */
}

.container {
   width: 90%;
   max-width: 1200px;
   margin: 0 auto;
}

a {
   text-decoration: none;
   color: inherit;
   /* Heredar color por defecto */
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

h1,
h2,
h3 {
   margin-bottom: 1rem;
   font-weight: 600;
   color: #2c3e50;
   /* Azul oscuro para títulos */
}

   /* --- Estilos del Header y Navegación --- */
.main-header {
   background-color: #ffffff;
   /* Fondo blanco para el header */
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   padding: 15px 0;
   position: sticky;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
}

.main-header .header-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo-area a {
   display: flex;
   align-items: center;
   color: #2c3e50;
   /* Color del texto del logo */
   font-size: 1.5rem;
   /* Tamaño del título del sitio */
   font-weight: 700;
}

.logo-area img {
   height: 50px;
   /* Ajusta el tamaño de tu logo */
   margin-right: 12px;
   /* Si tu logo es oscuro y el fondo del header es oscuro, considera un logo claro o un fondo claro para el logo */
}

   .main-nav ul {
   list-style: none;
   display: flex;
   align-items: center;
   }

   .main-nav li {
   margin-left: 25px;
   /* Espacio entre ítems del menú */
   }

   .main-nav a {
   color: #34495e;
   /* Color de los enlaces del menú */
   font-weight: 500;
   padding: 8px 0;
   /* Padding vertical para hacer el área de clic más grande */
   position: relative;
   transition: color 0.3s ease;
   }

   .main-nav a::after {
   /* Subrayado animado opcional */
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   bottom: 0;
   left: 0;
   background-color: #3498db;
   /* Color del subrayado */
   transition: width 0.3s ease;
   }

   .main-nav a:hover,
   .main-nav a.active {
   /* Clase para la página activa */
   color: #3498db;
   /* Color de hover/activo */
   }

   .main-nav a:hover::after,
   .main-nav a.active::after {
   width: 100%;
   }

   /* Botón de Intranet (estilo especial) */
   .main-nav .btn-intranet a {
   background-color: #3498db;
   /* Azul distintivo */
   color: #fff;
   padding: 10px 20px;
   border-radius: 25px;
   /* Botón redondeado */
   transition: background-color 0.3s ease, transform 0.2s ease;
   }

   .main-nav .btn-intranet a:hover {
   background-color: #2980b9;
   /* Azul más oscuro al pasar el cursor */
   transform: translateY(-2px);
   color: #fff;
   /* Asegurar que el color del texto no cambie */
   }

   .main-nav .btn-intranet a::after {
   /* Quitar el subrayado del botón intranet */
   display: none;
   }

   /* --- Botón de Hamburguesa --- */
   .hamburger-toggle {
   display: none;
   /* Oculto en escritorio */
   background: none;
   border: none;
   cursor: pointer;
   padding: 10px;
   z-index: 1001;
   /* Por encima de otros elementos si es necesario */
   }

   .hamburger-toggle .bar {
   display: block;
   width: 28px;
   height: 3px;
   background-color: #2c3e50;
   /* Color de las barras */
   margin: 6px 0;
   transition: all 0.3s ease-in-out;
   }

   /* --- Estilos Responsivos para el Menú --- */
   @media (max-width: 992px) {

   /* Breakpoint para tablets y móviles */
   .main-nav {
      display: none;
      /* Ocultar navegación normal */
      position: absolute;
      top: 100%;
      /* Justo debajo del header */
      left: 0;
      width: 100%;
      background-color: #fff;
      /* Fondo para el menú desplegable */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-top: 1px solid #eee;
      max-height: 0;
      /* Inicialmente oculto */
      overflow: hidden;
      transition: max-height 0.4s ease-out;
   }

   .main-nav.active {
      /* Clase para mostrar el menú */
      display: block;
      max-height: 500px;
      /* Un valor suficientemente grande para el contenido */
   }

   .main-nav ul {
      flex-direction: column;
      /* Apilar enlaces verticalmente */
      padding: 10px 0;
   }

   .main-nav li {
      margin: 0;
      width: 100%;
   }

   .main-nav a {
      display: block;
      /* Hacer que cada enlace ocupe todo el ancho */
      padding: 15px 20px;
      /* Padding para los ítems del menú móvil */
      text-align: center;
      /* Centrar texto */
      border-bottom: 1px solid #f0f0f0;
   }

   .main-nav li:last-child a {
      border-bottom: none;
   }

   .main-nav a::after {
      /* Quitar subrayado en móvil o ajustar */
      display: none;
   }

   .main-nav .btn-intranet a {
      /* Estilo del botón intranet en móvil */
      margin: 10px 20px;
      text-align: center;
      display: block;
   }

   .hamburger-toggle {
      display: block;
      /* Mostrar el botón de hamburguesa */
   }

   /* Animación del icono de hamburguesa a "X" */
   .hamburger-toggle.active .bar:nth-child(1) {
      transform: translateY(9px) rotate(45deg);
   }

   .hamburger-toggle.active .bar:nth-child(2) {
      opacity: 0;
   }

   .hamburger-toggle.active .bar:nth-child(3) {
      transform: translateY(-9px) rotate(-45deg);
   }
   }

   /* --- Estilos para el Contenido de la Página (Ejemplo) --- */
   .hero-section {
   background-color: #e0e0e0;
   /* Un color de fondo para la sección principal */
   padding: 60px 0;
   text-align: center;
   min-height: calc(100vh - 80px);
   /* Ocupar el resto de la altura de la pantalla menos el header */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   }

   .hero-section h1 {
   font-size: 2.5rem;
   margin-bottom: 20px;
   }

   .hero-section p {
   font-size: 1.2rem;
   max-width: 700px;
   margin: 0 auto 30px auto;
   }

   .cta-button {
   background-color: #3498db;
   color: #fff;
   padding: 12px 25px;
   border-radius: 5px;
   font-weight: 600;
   transition: background-color 0.3s ease;
   }

   .cta-button:hover {
   background-color: #2980b9;
   }

   /* --- Estilos para el Footer (Ejemplo) --- */
   .main-footer {
   background-color: #2c3e50;
   /* Azul oscuro */
   color: #ecf0f1;
   /* Texto claro */
   text-align: center;
   padding: 30px 0;
   margin-top: 40px;
   /* Espacio antes del footer */
   }

   .main-footer p {
   margin: 0;
   font-size: 0.9rem;
   }
   /* --- Estilos para la Sección del Carrusel --- */
.image-carousel-section {
    padding: 30px 0; /* Espacio arriba y abajo de la sección del carrusel */
    background-color: #e9ecef; /* Un fondo ligeramente diferente para la sección */
}

.carousel-wrapper {
    position: relative;
    max-width: 900px; /* Ancho máximo del carrusel, ajusta según necesites */
    margin: 0 auto; /* Centrar el carrusel */
    overflow: hidden; /* Ocultar las diapositivas que no están activas */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.carousel-slides {
    display: flex; /* Alinear las diapositivas horizontalmente */
    transition: transform 0.5s ease-in-out; /* Animación de deslizamiento */
    /* El ancho se establecerá con JavaScript basado en el número de diapositivas */
}

.carousel-slide {
    min-width: 100%; /* Cada diapositiva ocupa el 100% del ancho del wrapper */
    box-sizing: border-box;
    position: relative; /* Para el caption */
    /* display: none; // Se maneja con transform ahora, no con display */
}
/* .carousel-slide.active {
    display: block; // No necesario si se usa transform
} */

.carousel-slide img {
    width: 100%;
    height: auto; /* Mantiene la proporción */
    max-height: 500px; /* Altura máxima para que no sea demasiado grande, ajusta */
    object-fit: cover; /* Cubre el área sin distorsionar, puede recortar */
    display: block;
    border-radius: 8px; /* Si las imágenes individuales deben tener bordes redondeados */
}

.carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro semi-transparente */
    color: #fff;
    padding: 15px 20px;
    text-align: center;
    font-size: 0.9rem;
    box-sizing: border-box;
    /* border-bottom-left-radius: 8px; */ /* Si las imágenes tienen borde redondeado */
    /* border-bottom-right-radius: 8px; */
}

/* Controles de Anterior/Siguiente */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 24px; /* Tamaño de las flechas */
    cursor: pointer;
    z-index: 10;
    border-radius: 50%; /* Hacerlos circulares */
    width: 45px;
    height: 45px;
    line-height: 25px; /* Alinear flecha verticalmente */
    transition: background-color 0.2s ease;
}
.carousel-control:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.carousel-control.prev {
    left: 15px;
}
.carousel-control.next {
    right: 15px;
}

/* Indicadores de Diapositiva (círculos) */
.carousel-indicators {
    position: absolute;
    bottom: 20px; /* Ajusta si tienes caption */
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    padding-left: 0;
    margin-right: 15%; /* Bootstrap defaults */
    margin-left: 15%;  /* Bootstrap defaults */
    list-style: none;
}
.carousel-indicators span {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 10px; /* Tamaño de los indicadores */
    height: 10px;
    margin-right: 5px;
    margin-left: 5px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-radius: 50%; /* Hacerlos circulares */
    opacity: 0.5;
    transition: opacity .6s ease;
}
.carousel-indicators span.active {
    opacity: 1;
    background-color: #3498db; /* Color del indicador activo */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .carousel-caption {
        font-size: 0.8rem;
        padding: 10px 15px;
    }
    .carousel-control {
        font-size: 18px;
        padding: 8px 12px;
        width: 38px;
        height: 38px;
        line-height: 22px;
    }
    .carousel-indicators {
        bottom: 10px; /* Subir un poco los indicadores */
    }
     .carousel-slide img {
        max-height: 350px; /* Menor altura en móviles */
    }
}