/* ========================= */
/* style__certificate */
/* ========================= */
.conteiner--certificates {
    display: grid;                     /* Usar Grid Layout para disposición */
    grid-template-columns: repeat(2, 1fr); /* Dos columnas por defecto */
    gap: 2rem;                         /* Espaciado entre elementos */
    padding: 2rem;                     /* Espaciado interno */
    animation: scaleUp 1s ease-out; /* Animación de escala */
}
/* Hacer el grid responsivo: 1 columna en pantallas pequeñas */
@media (max-width: 768px) {
    .conteiner--certificates {
        grid-template-columns: 1fr;    /* Una sola columna en pantallas pequeñas */
        padding: 1rem;                 /* Reducir espaciado interno */
    }
}
/* Certificate hover animation */
.conteiner--certificates img {
    border-radius: 10px;               /* Bordes redondeados en las imágenes */
    cursor: pointer;                   /* Cambiar el cursor al pasar sobre la imagen */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animaciones suaves para zoom y sombra */
    width: 100%;                       /* Asegura que las imágenes se adapten al tamaño del contenedor */
}
/* Certificate hover effect */
.conteiner--certificates img:hover {
    transform: scale(1.05);            /* Zoom suave al pasar el cursor */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Sombra al hacer hover */
}
/* Lightbox styles */
.lightbox {
    position: fixed;                   /* Fijar la caja de luz en la pantalla */
    top: 0;                            /* Ubicación en la parte superior */
    left: 0;                           /* Ubicación en la parte izquierda */
    width: 100%;                       /* Ocupa todo el ancho de la pantalla */
    height: 100%;                      /* Ocupa todo el alto de la pantalla */
    background: rgba(0, 0, 0, 0.8);    /* Fondo oscuro con opacidad */
    display: flex;                     /* Usar Flexbox para centrar la imagen */
    justify-content: center;           /* Centrar horizontalmente */
    align-items: center;               /* Centrar verticalmente */
    z-index: 999;                      /* Asegura que esté encima de otros elementos */
    visibility: hidden;                /* Inicialmente oculto */
    opacity: 0;                        /* Inicialmente invisible */
    transition: visibility 0.3s, opacity 0.3s; /* Transición suave */
}
.lightbox.visible {
    visibility: visible;               /* Hacer visible la lightbox */
    opacity: 1;                        /* Hacer opaca la lightbox */
}
/* Estilos de la imagen dentro de la lightbox */
.lightbox__image {
    max-width: 90%;                    /* Limitar el tamaño máximo a un 90% */
    max-height: 80%;                   /* Limitar el tamaño máximo a un 80% */
    border-radius: 10px;               /* Bordes redondeados */
    box-shadow: 0 8px 15px rgba(255, 255, 255, 0.3); /* Sombra suave */
}
/* Close button styles for lightbox */
.lightbox__close {
    position: absolute;                /* Fijar el botón de cerrar en la esquina superior derecha */
    top: 1.5rem;                       /* Espaciado desde la parte superior */
    right: 1.5rem;                     /* Espaciado desde la derecha */
    font-size: 3rem;                   /* Tamaño grande del icono */
    color: var(--blanco);              /* Color blanco */
    cursor: pointer;                   /* Cambiar el cursor a puntero */
    transition: color 0.3s;            /* Transición suave para el cambio de color */
}
/* Hover effect for close button */
.lightbox__close:hover {
    color: var(--azulClaro);           /* Cambiar color al pasar el cursor */
}
/* ========================= */
/* END - style__certificate */
/* ========================= */