/* style.css */

/* Efecto Hover para levantar tarjetas */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px); /* Sube 5 pixeles */
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; /* Sombra más profunda */
    cursor: pointer; /* Cambia el cursor a la manito */
}

/* Opcional: Para que el link extendido (stretched-link) no se ponga azul */
a.text-technical {
    color: #2c3e50; /* O el color oscuro que uses en tu tema */
    transition: color 0.2s;
}

a.text-technical:hover {
    color: #198754; /* Un verde al pasar el mouse sobre el título */
}

/* Utilidad para cortar texto a 2 líneas */
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    height: 2.8em; /* 1.4 line-height * 2 líneas = 2.8em */
}

/* Estilo para las flechas de navegación del Lightbox */
.lightbox-nav {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro semitransparente */
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Círculo perfecto */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.lightbox-nav:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Ocultar flechas en móvil */
@media (max-width: 768px) {
    .lightbox-arrow-btn {
        display: none !important;
    }
}