/* ==========================================================
   SECCIÓN PORTALES MODERNA
========================================================== */

.seccion-portales {
    background:
        linear-gradient(
            to bottom,
            #f8fafc,
            #ffffff
        );
}

/* ==========================================================
   BOTONES SUPERIORES
========================================================== */

.botones-superiores {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-superior {
    padding: 0.95rem 1.8rem;

    border-radius: 16px;

    text-decoration: none;
    color: #ffffff;

    font-weight: 700;
    font-size: 0.95rem;

    background:
        linear-gradient(
            135deg,
            #662445,
            #9d3d84
        );

    box-shadow:
        0 10px 25px rgba(102,36,69,0.22);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.btn-superior:hover {
    transform: translateY(-4px);

    color: #ffffff;

    box-shadow:
        0 18px 40px rgba(102,36,69,0.35);
}

/* ==========================================================
   CARDS VISUALES
========================================================== */

.portal-card {
    position: relative;

    display: block;

    height: 420px;

    border-radius: 28px;

    overflow: hidden;

    text-decoration: none;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.15);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

/* imagen */
.portal-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease,
        filter 0.4s ease;
}

/* overlay oscuro */
.portal-overlay {
    position: absolute;
    inset: 0;



    z-index: 1;
}

/* contenido */
.portal-content {
    z-index: 2;
}

.portal-content h2 {
    position: absolute;

    top: 20px;
    left: 25px;
    right: 25px;

    color: #ffffff;

    font-size: 2rem;
    font-weight: 800;

    margin-bottom: 1rem;

    text-shadow:
        0 3px 10px rgba(0,0,0,0.45);
}

.portal-content span {
    position: absolute;

    bottom: 20px;
    left: 25px;
    right: 25px;

    display: inline-block;

    padding: 0.75rem 1.3rem;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #662445,
            #a42c94
        );

    color: #ffffff;

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.5px;

    box-shadow:
        0 8px 20px rgba(102,36,69,0.35);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

/* hover */
.portal-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 25px 50px rgba(0,0,0,0.22);
}

.portal-card:hover img {
    transform: scale(1.08);

    filter: brightness(1.05);
}

.portal-card:hover span {
    transform: scale(1.05);

    background:
        linear-gradient(
            135deg,
            #7b2b57,
            #bf3ca7
        );

    box-shadow:
        0 12px 25px rgba(102,36,69,0.45);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .portal-card {
        height: 340px;
    }

}

@media (max-width: 768px) {

    .portal-card {
        height: 300px;
    }

    .portal-content h2 {
        font-size: 1.6rem;
    }

}/* ==========================================================
   GRID UNIDO
========================================================== */

.portales-grid {
    overflow: hidden;
    border-radius: 32px;

    box-shadow:
        0 20px 45px rgba(0,0,0,0.14);
}

/* tarjetas pegadas */
.portales-grid .col-lg-3 {
    padding: 0;
}

/* card */
.portal-card {
    border-radius: 0;

    height: 420px;

    position: relative;
}

/* líneas divisorias elegantes */
.portal-card::after {
    content: "";

    position: absolute;

    top: 10%;
    right: 0;

    width: 1px;
    height: 80%;

    background:
        rgba(255, 254, 254, 0.18);

    z-index: 3;
}

/* quitar línea de la última */
.portales-grid .col-lg-3:last-child .portal-card::after {
    display: none;
}

/* hover elegante */
.portal-card:hover {
    z-index: 5;
}