/* ==================== ENCABEZADO ANIMADO ==================== */

/* Contenedor principal */
.heading-stack-title {
    position: relative;
    overflow: hidden;
    min-height: 75vh;
    --hero-bg: url("/static/img/claudio_explaining.webp");
    background-image: none;
}

/* Overlay negro opaco tras animación */
.heading-stack-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--degraded-bg-color);
    z-index: 1;
}

/* Imagen animada inicial */
.heading-stack-title::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: heroBgReveal 0.5s ease-out forwards;
}

/* Contenido siempre encima */
.heading-stack-title>* {
    position: relative;
    z-index: 2;
}

/* Texto de entra después del fondo */
.heading-stack-title .generic-title-page {
    opacity: 0;
    transform: translateY(10px);
    animation: heroTextIn 0.75s ease-out forwards;
    animation-delay: 0.5s;
    margin: 0 1.5rem;
}

/* Keyframes */
@keyframes heroBgReveal {
    0% {
        opacity: 0;
        filter: brightness(0.25) saturate(0.85);
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        filter: brightness(1) saturate(1);
        transform: scale(1);
    }
}

@keyframes heroTextIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== STACK CARD ==================== */

/* .stack-tool-card {
    margin-bottom: 4px;
} */

/* Contenedor interno con glass y efectos */
.stack-tool-card-inner {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--card-radius);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 18px 18px 16px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--degraded-box_shadow-card);
}

/* Icono */
/* .stack-tool-card-icon-wrapper { */
/* flex-shrink: 0; */
/* evita que el icono se deforme */
/* } */

/* Necesario cuando hay dos icon */
.stack-tool-card-multi-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
}

/* Tamaño del icon */
.stack-tool-card-icon {
    width: 125px;
    height: 125px;
    /* object-fit: contain; */
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

@media (max-width: 768px) {

    /* Organización vertical */
    .stack-tool-card-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Organización de íconos horizontal */
    .stack-tool-card-multi-icon {
        flex-direction: row;
    }

}

/* Contenido textual */
.stack-tool-card-content {
    flex: 1;
    font-family: var(--font-cabinet);
    color: var(--color-text-primary);
}

.stack-tool-card-title {
    font-size: var(--size-font-card-title);
    font-weight: 800;
    text-align: center;
}

.stack-tool-card-text {
    font-size: var(--size-font-card-description);
    text-align: justify;
}

.stack-tool-card-list {
    font-size: var(--size-font-card-description);
    text-align: justify;
}


/* Link a proyectos (por ahora deshabilitado visualmente) */
.stack-tool-card-link {
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;

    /* Puedes ajustar el color según tu paleta */
    color: #929292;
    /* texto base */
    border-bottom: 1px dashed #ffffff;
    opacity: 0.55;
}

.stack-tool-card-link:hover {
    opacity: 0.9;
}

/* Clase opcional para indicar que aún no hay link real */
.disabled-link {
    cursor: default;
    /* default | pointer */
    pointer-events: none;
    /* evita clics */
}