/* ===========================
   GRID DE CARRERAS
=========================== */

.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-top:24px;
}

@media (max-width:768px){
    .cards-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }
}

@media (max-width:480px){
    .cards-grid{
        grid-template-columns:1fr;
    }
}

/* ===========================
   TARJETA
=========================== */

.story-card{
    position:relative;
    height:400px;
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;

    background:#0d1117;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}

.card-bg{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    transition:transform .6s ease;
}

.card-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.90) 0%,
        rgba(0,0,0,.55) 45%,
        rgba(0,0,0,.15) 75%,
        transparent 100%
    );
}

/* ===========================
   CONTENIDO DE LA TARJETA
=========================== */

.card-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    z-index:2;

    padding:32px 24px;

    display:flex;
    flex-direction:column;
    gap:8px;
}

.card-category{
    align-self:flex-start;

    background:rgba(255,255,255,.15);
    backdrop-filter:blur(8px);

    color:#fff;

    padding:6px 12px;

    border-radius:999px;

    font-size:.75rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;
}

.career-title{
    color:#fff;
    font-size:1.45rem;
    font-weight:700;
    line-height:1.2;

    margin:0;
}

.career-tagline{
    color:rgba(255,255,255,.85);
    font-size:.95rem;
    line-height:1.5;

    max-height:0;
    opacity:0;
    overflow:hidden;

    transition:all .35s ease;
}

.card-arrow{
    color:#fff;
    font-weight:600;

    opacity:0;

    transform:translateY(10px);

    transition:all .35s ease;
}

/* ===========================
   EFECTOS HOVER
=========================== */

.story-card{
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    border:2px solid transparent;
}

.story-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 45px rgba(0,0,0,.35);
    border-color:#c8102e; /* rojo UNSL */
}

.story-card:hover .card-bg{
    transform:scale(1.08);
}

.story-card:hover .card-arrow{
    transform:translateX(8px);
    color:#4da6ff;
}

.story-card:hover .card-category{
    background:#c8102e;
}

.story-card:hover .career-title{
    color:#ffffff;
}

.story-card:hover .career-tagline{
    max-height:80px;
    opacity:1;
    margin-top:8px;
}

.story-card:hover .card-arrow{
    opacity:1;
    transform:translateY(0) translateX(6px);
}

.section-header{
    max-width:700px;
    margin:0 auto 30px;
    text-align:center;
}

.section-chip{
    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:#c8102e;

    color:#fff;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;
}

.section-heading{

    margin:18px 0;

    font-size:2.5rem;
    line-height:1.15;

    font-weight:800;

    color:var(--azul);

}
@media (max-width:768px){

    .section-heading{
        font-size:2.1rem;
    }

}
.section-description{
    font-size:1.1rem;

    color:#666;

    line-height:1.7;
}	

.career-group{
    margin: 80px 0;
}

#estudiar{
    background:#fffff;
}