/* --- Estilos Dinámicos de Logística --- */

/* Animación de entrada para el Hero */
.reveal-content {
    animation: revealIn 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.reveal-frame {
    animation: frameIn 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes revealIn {
    from { opacity: 0; transform: translateY(100px); filter: blur(10px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes frameIn {
    from { opacity: 0; transform: scale(0.8) rotate(-5deg); }
    to { opacity: 1; transform: scale(1) rotate(2deg); }
}

/* Decoración detrás de la imagen */
.frame-decoration {
    position: absolute;
    inset: -20px;
    border: 2px solid #D4AF37;
    border-radius: 2.5rem;
    opacity: 0.2;
    z-index: -1;
    transform: rotate(-4deg);
}

/* Tarjetas de Eventos */
.event-card {
    background: #000000;
    border-radius: 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: all 0.5s ease;
    cursor: default;
    overflow: hidden;
    position: relative;
    height: 320px; /* Tamaño fijo para que todas sean iguales */
}

/* Sombra suave que nace desde abajo */
.event-card::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Degradado que termina en transparente, evitando el bloque negro */
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Al hacer hover, la sombra desaparece para dejar ver el dorado */
.event-card:hover::after {
    opacity: 0;
}

.event-card:hover {
    background: #D4AF37;
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* El contenido debe estar por encima de la sombra */
.event-card div {
    z-index: 2;
    position: relative;
}

.event-card:hover h3, 
.event-card:hover p, 
.event-card:hover span {
    color: #000000 !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(#000000, #D4AF37);
    border-radius: 20px;
}