/* css/proyectos.css */
/* --- Estilos para la cabecera (banner) de las páginas de proyecto --- */
.project-hero {
    /* Posicionamiento y Dimensiones */
    position: relative; /* Contenedor para el header que irá superpuesto */
    height: 60vh; /* Altura del banner (60% de la ventana). ¡Puedes ajustar este valor! */
    max-height: 140px; /* Límite de altura para pantallas muy grandes */
    /* Imagen de Fondo */
    /* NOTA: Esta imagen deberá cambiarse dinámicamente o por página */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../assets/images/hero-bg-b.jpg');
    background-size: cover;
    background-position: center;
    /* Alineación del contenido (el header) */
    display: flex;
    align-items: flex-start; /* Alinea el header en la parte superior */
}
/* Regla para el header CUANDO está dentro del banner de un proyecto */
.project-hero .main-header {
    position: absolute; /* Superpone el header sobre la imagen de fondo */
    background-color: rgba(0, 0, 0, 0.2); /* Mantiene la transparencia deseada */
}
/* --- Estilos para la galería de imágenes --- */
.project-gallery {
    padding: 80px 0;
    background-color: var(--color-dominant); /* Fondo blanco humo */
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-grid img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Estilo para cada imagen dentro del carrusel */
.splide__slide img {
    width: 100%;
    height: auto;
    max-height: 70vh; /* Límite de altura para que no sea demasiado grande */
    object-fit: contain; /* Asegura que la imagen completa sea visible */
    border-radius: 5px;
}
/* Personalización de las flechas de navegación */
.splide__arrow {
    background: rgba(33, 37, 41, 0.7); /* Fondo semi-transparente oscuro */
}
.splide__arrow svg {
    fill: #FFFFFF; /* Color de la flecha (blanco) */
}
.splide__arrow:hover {
    background: rgba(33, 37, 41, 1); /* Fondo sólido al pasar el mouse */
}
/* Personalización de los puntos de paginación */
.splide__pagination__page {
    background: #ccc; /* Color de los puntos inactivos */
    opacity: 1;
}
.splide__pagination__page.is-active {
    background: var(--color-accent); /* Color del punto activo (Rojo KENARQ) */
    transform: scale(1.2);
}