.technicalstack-page{
    /* Tokens */
    --ts-bg: #0b0f14;
    --ts-text: #e6edf3;
    --ts-muted: #c9d1d9;

    --ts-border: rgba(255,255,255,.10);
    --ts-glass: rgba(255,255,255,.04);
    --ts-glass-strong: rgba(255,255,255,.06);
    --ts-shadow: 0 18px 50px rgba(0,0,0,.45);

    --ts-accent: #7ee787;

    min-height: 100vh;
    color: var(--ts-text);

    background:
            radial-gradient(1200px 600px at 20% 20%, #1f2937 0%, var(--ts-bg) 60%),
            radial-gradient(1000px 520px at 80% 70%, #111827 0%, var(--ts-bg) 55%);
}

/* Tipografía */
.technicalstack-page h1,
.technicalstack-page h2,
.technicalstack-page h3{
    color: var(--ts-text);
    letter-spacing: .2px;
}
.technicalstack-page p{
    color: var(--ts-muted);
}

.technicalstack-page .container{
    background: transparent;
}

/* Bootstrap helpers */
.technicalstack-page .text-muted{
    color: rgba(201,209,217,.75) !important;
}
.technicalstack-page .text-body-secondary{
    color: rgba(201,209,217,.78) !important;
}

/* Links (en esta página casi no hay, pero mantenemos coherencia) */
.technicalstack-page a{
    color: var(--ts-accent);
    text-decoration: none;
    font-weight: 700;
}
.technicalstack-page a:hover{
    text-decoration: underline;
}

/* HR */
.technicalstack-page hr{
    border-color: rgba(255,255,255,.12);
    opacity: 1;
}

/* Badges */
.technicalstack-page .badge{
    border: 1px solid rgba(255,255,255,.10);
}
.technicalstack-page .badge.text-bg-primary{
    background: rgba(13,110,253,.18) !important;
    color: rgba(230,237,243,.92) !important;
}

/* ===== Header Title ===== */
.ts-title{
    position: relative;
    display: inline-block;
    padding-bottom: .4rem;
    letter-spacing: .2px;
}
.ts-title::after{
    content:"";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46%;
    height: 3px;
    background: linear-gradient(
            to right,
            var(--bs-primary),
            rgba(13,110,253,.25)
    );
    border-radius: 3px;
}
.ts-intro{
    max-width: 720px;
    line-height: 1.6;
}

/* ===== Stack Cards ===== */

.stack-card-link{
    text-decoration: none;
    color: inherit;
    display: block;
}
.stack-card-link:hover{
    text-decoration: none;
}

/* Card */
.stack-card{
    border: 1px solid var(--ts-border) !important;
    border-radius: 18px;
    overflow: hidden;
    min-height: 170px;

    /* glass + shadow */
    background: linear-gradient(180deg, var(--ts-glass), rgba(255,255,255,.02)) !important;
    box-shadow: var(--ts-shadow) !important;
    backdrop-filter: blur(10px);

    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.stack-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 .9rem 1.8rem rgba(0,0,0,.55) !important;
}

/* Imagen */
.stack-card .card-img{
    height: 180px;
    object-fit: cover;

    /* Mantén legible el overlay */
    filter: brightness(.60) saturate(1.05);
    transform: scale(1.01);
    transition: transform .25s ease, filter .25s ease;
}
.stack-card:hover .card-img{
    transform: scale(1.04);
    filter: brightness(.55) saturate(1.10);
}

/* Overlay */
.stack-overlay{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* Texto del overlay */
.stack-overlay h3,
.stack-overlay p{
    color: rgba(230,237,243,.95);
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.stack-overlay p{
    color: rgba(201,209,217,.92);
}

/* Ajustes de altura en pantallas pequeñas */
@media (max-width: 768px){
    .stack-card{ min-height: 160px; }
    .stack-card .card-img{ height: 170px; }
}