:root{
    --bg:#02070d;
    --panel:#06111b;
    --panel-2:#020a10;
    --cyan:#16d8ff;
    --orange:#ff9818;
    --text:#f5f8fb;
    --muted:#98a9b4;
    --line:#0b7893;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    width:100%;
    min-height:100%;
    background:#000;
    color:var(--text);
    font-family:Inter,"Segoe UI",Arial,sans-serif;
}

body{
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}


/* =========================================================
   FONDO GENERAL
   ========================================================= */

.portal-shell{
    min-height:100vh;
    position:relative;
    overflow:hidden;

    padding:4vh 6vw 4vh;

    background:
            radial-gradient(
                    circle at 12% 40%,
                    rgba(0,190,255,.15),
                    transparent 33%
            ),
            radial-gradient(
                    circle at 90% 12%,
                    rgba(255,130,0,.10),
                    transparent 28%
            ),
            linear-gradient(
                    145deg,
                    #02070d,
                    #020b13 58%,
                    #010306
            );
}

.portal-shell::before{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.16;

    background-image:
            linear-gradient(
                    rgba(0,216,255,.05) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(0,216,255,.05) 1px,
                    transparent 1px
            );

    background-size:54px 54px;
}


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

.portal-header{
    position:relative;
    z-index:2;

    max-width:1300px;
    margin:0 auto 4vh;
}

.eyebrow{
    color:#84dff2;

    font-weight:900;
    letter-spacing:.22em;

    font-size:13px;
}

.accent-line{
    width:185px;
    height:3px;

    margin:16px 0 25px;

    background:
            linear-gradient(
                    90deg,
                    var(--cyan),
                    var(--orange)
            );
}

.portal-header h1{
    margin:0;

    max-width:1200px;

    font-size:
            clamp(42px,4.6vw,74px);

    line-height:.98;

    letter-spacing:-.045em;
}

.portal-header h1 span{
    color:var(--cyan);
}

.portal-header p{
    max-width:900px;

    margin:16px 0 0;

    color:#b7c4cc;

    font-size:
            clamp(16px,1.35vw,21px);

    line-height:1.35;
}


/* =========================================================
   BOTÓN REGRESAR
   ========================================================= */

.back-link{
    display:inline-block;

    margin-bottom:18px;

    color:#8fc8d6;

    font-size:14px;

    transition:.2s ease;
}

.back-link:hover{
    color:var(--cyan);
}


/* =========================================================
   PANTALLA PRINCIPAL · 3 COLUMNAS
   ========================================================= */

.three-column-layout{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
    minmax(130px,1fr)
    minmax(620px,2.4fr)
    minmax(130px,1fr);

    gap:28px;

    max-width:1450px;

    margin:0 auto;

    align-items:stretch;
}

.side-column{
    min-height:390px;

    border:
            1px solid rgba(0,216,255,.12);

    border-radius:24px;

    background:
            linear-gradient(
                    180deg,
                    rgba(3,14,22,.64),
                    rgba(1,6,10,.30)
            );

    overflow:hidden;

    position:relative;
}


/* =========================================================
   DECORACIÓN LATERAL IZQUIERDA
   ========================================================= */

.side-decoration{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:18px;

    transform:rotate(-90deg);
}

.side-kicker{
    color:var(--cyan);

    font-size:38px;

    font-weight:900;

    letter-spacing:.18em;
}

.side-line{
    width:180px;
    height:1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    var(--cyan),
                    var(--orange),
                    transparent
            );
}

.side-copy{
    color:#5f7b89;

    font-size:12px;

    letter-spacing:.14em;

    text-transform:uppercase;
}


/* =========================================================
   DECORACIÓN DERECHA
   ========================================================= */

.right-column::before,
.right-column::after{
    content:"";

    position:absolute;

    width:70%;
    height:1px;

    right:-5%;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    var(--cyan)
            );

    transform-origin:right center;
}

.right-column::before{
    top:35%;
    transform:rotate(-22deg);
}

.right-column::after{
    top:63%;
    transform:rotate(17deg);
}

.circuit-lines{
    position:absolute;
    inset:0;

    opacity:.48;

    background:
            radial-gradient(
                    circle at 78% 24%,
                    var(--orange) 0 3px,
                    transparent 4px
            ),
            radial-gradient(
                    circle at 70% 49%,
                    var(--cyan) 0 3px,
                    transparent 4px
            ),
            radial-gradient(
                    circle at 82% 72%,
                    var(--cyan) 0 3px,
                    transparent 4px
            );
}


/* =========================================================
   CURSOS PRINCIPALES
   ========================================================= */

.main-column{
    display:flex;
    flex-direction:column;

    gap:18px;
}

.section-label{
    color:var(--orange);

    font-weight:900;

    letter-spacing:.16em;

    font-size:12px;

    margin:
            0 0 2px 2px;
}

.course-card{
    min-height:170px;

    display:grid;

    grid-template-columns:
    110px
    minmax(0,1fr)
    50px;

    gap:22px;

    align-items:center;

    padding:24px 26px;

    border:
            1px solid rgba(0,216,255,.34);

    border-radius:20px;

    background:
            linear-gradient(
                    90deg,
                    rgba(2,17,28,.96),
                    rgba(3,9,15,.90)
            );

    transition:.2s ease;
}

.course-card:hover{
    transform:translateY(-4px);

    border-color:var(--cyan);

    box-shadow:
            0 16px 40px rgba(0,0,0,.35),
            0 0 24px rgba(0,216,255,.08);
}

.course-code{
    display:grid;

    place-items:center;

    min-height:88px;

    border:
            1px solid var(--orange);

    border-radius:16px;

    color:var(--orange);

    font-size:23px;

    font-weight:900;
}

.course-content h2{
    margin:0 0 8px;

    font-size:
            clamp(22px,2vw,32px);

    line-height:1.08;
}

.course-content p{
    margin:0;

    color:var(--muted);

    font-size:15px;

    line-height:1.35;
}

.course-arrow{
    color:var(--cyan);

    font-size:38px;

    text-align:center;
}


/* =========================================================
   BI2005B
   ========================================================= */

.course-shell{
    padding-top:3vh;
}

.compact-header{
    margin-bottom:3.4vh;
}

.compact-header h1{
    font-size:
            clamp(38px,4.1vw,66px);
}


/* =========================================================
   BLOQUES 05–08 · CUADRÍCULA 2 × 2
   ========================================================= */

.module-grid{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1300px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
    repeat(2,minmax(0,1fr));

    grid-template-rows:
    repeat(2,minmax(0,1fr));

    gap:18px;
}

.module-card{
    min-width:0;

    min-height:200px;

    display:grid;

    grid-template-columns:
    72px
    minmax(0,1fr)
    38px;

    gap:16px;

    align-items:center;

    padding:22px;

    border:
            1px solid rgba(0,216,255,.26);

    border-radius:18px;

    background:
            linear-gradient(
                    145deg,
                    rgba(2,16,26,.95),
                    rgba(1,8,13,.92)
            );

    transition:.2s ease;
}

.module-card:hover{
    transform:translateY(-3px);

    border-color:var(--cyan);

    box-shadow:
            0 12px 30px rgba(0,0,0,.28),
            0 0 24px rgba(0,216,255,.07);
}


/* =========================================================
   BLOQUE ACTIVO
   ========================================================= */

.module-primary{
    grid-column:auto;

    min-height:200px;

    border-color:
            rgba(0,216,255,.55);
}

.module-primary:hover{
    border-color:var(--cyan);

    box-shadow:
            0 12px 30px rgba(0,0,0,.28),
            0 0 28px rgba(0,216,255,.10);
}


/* =========================================================
   NÚMEROS
   ========================================================= */

.module-number{
    display:grid;

    place-items:center;

    width:58px;
    height:58px;

    border:
            1px solid var(--orange);

    border-radius:14px;

    color:var(--orange);

    font-size:22px;

    font-weight:900;
}


/* =========================================================
   CONTENIDO DE BLOQUES
   ========================================================= */

.module-content{
    min-width:0;
}

.module-content h2{
    margin:0 0 8px;

    color:#fff;

    font-size:
            clamp(21px,1.75vw,29px);

    line-height:1.08;
}

.module-content p{
    margin:0;

    color:var(--muted);

    line-height:1.35;

    font-size:14px;
}

.module-arrow{
    color:var(--cyan);

    font-size:32px;

    text-align:center;
}


/* =========================================================
   BLOQUES AÚN NO DISPONIBLES
   ========================================================= */

.placeholder-card{
    opacity:.58;

    border-style:dashed;
}


/* =========================================================
   FOOTER
   ========================================================= */

.portal-footer{
    position:relative;
    z-index:2;

    max-width:1300px;

    margin:4vh auto 0;

    padding-top:14px;

    border-top:
            1px solid rgba(255,255,255,.10);

    display:flex;

    justify-content:space-between;

    gap:20px;

    color:#718691;

    font-size:12px;
}


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

@media(max-width:1000px){

    .three-column-layout{
        grid-template-columns:1fr;
    }

    .side-column{
        display:none;
    }

    .main-column{
        max-width:780px;

        width:100%;

        margin:0 auto;
    }

}


@media(max-width:760px){

    .portal-shell{
        padding:
                5vh 5vw 4vh;
    }

    .course-card{
        grid-template-columns:1fr;

        gap:14px;

        padding:20px;
    }

    .course-code{
        min-height:58px;

        width:120px;
    }

    .course-arrow{
        display:none;
    }

    .module-grid{
        grid-template-columns:1fr;
        grid-template-rows:none;
    }

    .module-card{
        min-height:145px;

        grid-template-columns:
      60px
      minmax(0,1fr);

        padding:18px;
    }

    .module-arrow{
        display:none;
    }

    .portal-footer{
        flex-direction:column;
    }

}