/* =====================================================
   UNIVERSIDAD ECCI
   INGENIEROVIZCAINO.COM
===================================================== */


/* =====================================================
   CONFIGURACIÓN GENERAL
===================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    margin: 0;

    color: white;

    font-family:
        'Rajdhani',
        sans-serif;


    background:

        radial-gradient(
            circle at 50% -20%,
            #07345d 0%,
            #021829 35%,
            #000a12 70%,
            #000508 100%
        );


    overflow-x: hidden;

}



/* =====================================================
   FONDO TECNOLÓGICO
===================================================== */

#fondoParticulas {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -2;

    pointer-events: none;

}


.fondo-grid {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -3;


    background-image:

        linear-gradient(
            rgba(0, 220, 255, 0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 220, 255, 0.035) 1px,
            transparent 1px
        );


    background-size:
        50px 50px;

}



/* =====================================================
   LÍNEA SUPERIOR ECCI
===================================================== */

.linea-superior {

    width: 100%;

    height: 5px;


    background:

        linear-gradient(
            90deg,
            transparent,
            #0066cc,
            #00ccff,
            #ffffff,
            #e52b38,
            #f4c430,
            #ffffff,
            #00ccff,
            #0066cc,
            transparent
        );


    box-shadow:

        0 0 10px #0066cc,

        0 0 22px rgba(
            0,
            204,
            255,
            0.75
        );

}



/* =====================================================
   BARRA DE NAVEGACIÓN
===================================================== */

nav {

    width: 100%;

    max-width: 1500px;

    margin: auto;

    padding:
        25px
        35px;


    display: flex;

    justify-content: space-between;

    align-items: center;

}


.volver {

    color: #8beeff;

    text-decoration: none;


    font-family:
        'Orbitron',
        sans-serif;


    font-size: 13px;

    letter-spacing: 2px;

    transition: 0.3s;

}


.volver:hover {

    color: white;


    text-shadow:

        0 0 8px #00eaff,

        0 0 16px #00eaff;

}


.estado {

    font-family:
        'Orbitron',
        sans-serif;


    font-size: 11px;

    letter-spacing: 2px;

    color: #55ffaa;

}


.punto-online {

    display: inline-block;


    width: 9px;

    height: 9px;


    border-radius: 50%;


    background:
        #00ff88;


    margin-right: 8px;


    box-shadow:

        0 0 7px #00ff88,

        0 0 15px #00ff88,

        0 0 25px rgba(
            0,
            255,
            136,
            0.5
        );

}



/* =====================================================
   HEADER
===================================================== */

header {

    width: 100%;

    max-width: 1500px;

    margin: auto;


    text-align: center;


    padding:

        40px
        20px
        55px;

}



/* Texto superior pequeño */

.codigo-superior {

    font-family:
        'Orbitron',
        sans-serif;


    color:
        #00d9ff;


    font-size:
        12px;


    letter-spacing:
        6px;


    margin-bottom:
        24px;


    opacity:
        0.85;

}



/* =====================================================
   TÍTULO UNIVERSIDAD ECCI
===================================================== */

header h1 {

    font-family:
        'Orbitron',
        sans-serif;


    font-size:

        clamp(
            42px,
            5vw,
            78px
        );


    font-weight:
        900;


    letter-spacing:
        3px;


    line-height:
        1.1;


    color:
        white;


    text-shadow:

        0 0 5px #00d9ff,

        0 0 15px rgba(
            0,
            217,
            255,
            0.65
        ),

        0 0 35px rgba(
            0,
            120,
            255,
            0.45
        );

}


/* ECCI grande */

header h1 span {

    display: block;


    margin-top:
        8px;


    color:
        #ffffff;


    font-size:
        1.35em;


    letter-spacing:
        15px;


    text-shadow:

        0 0 7px #00eaff,

        0 0 20px #008cff,

        0 0 45px #0066ff,

        0 0 75px rgba(
            0,
            102,
            255,
            0.45
        );

}



/* =====================================================
   LÍNEA LUMINOSA DEBAJO DEL TÍTULO
===================================================== */

.linea-titulo {

    width:

        min(
            900px,
            80%
        );


    height:
        2px;


    margin:

        28px
        auto;


    background:

        linear-gradient(
            90deg,
            transparent,
            #0066cc,
            #00eaff,
            white,
            #00eaff,
            #0066cc,
            transparent
        );


    box-shadow:

        0 0 10px #00eaff,

        0 0 25px rgba(
            0,
            234,
            255,
            0.55
        );

}



/* =====================================================
   SUBTÍTULO
===================================================== */

header h2 {

    font-family:
        'Orbitron',
        sans-serif;


    font-size:

        clamp(
            16px,
            2vw,
            24px
        );


    color:
        #dffaff;


    letter-spacing:
        6px;


    margin-bottom:
        13px;

}


.descripcion {

    font-size:
        20px;


    color:
        #8ab7c4;


    letter-spacing:
        2px;

}



/* =====================================================
   CONTENIDO
===================================================== */

main {

    width: 100%;

    padding:

        0
        25px;

}



/* =====================================================
   PANEL PRINCIPAL
===================================================== */

.panel {

    max-width:
        1450px;


    margin:
        auto;


    background:

        rgba(
            0,
            9,
            20,
            0.80
        );


    border:

        1px solid
        rgba(
            0,
            220,
            255,
            0.25
        );


    border-radius:
        18px;


    overflow:
        hidden;


    box-shadow:

        0 0 35px
        rgba(
            0,
            180,
            255,
            0.10
        ),

        0 15px 50px
        rgba(
            0,
            0,
            0,
            0.35
        );


    backdrop-filter:
        blur(10px);

}



/* =====================================================
   ENCABEZADO DEL PANEL
===================================================== */

.encabezado-panel {

    display:
        flex;


    justify-content:
        space-between;


    align-items:
        center;


    padding:

        20px
        28px;


    border-bottom:

        1px solid
        rgba(
            0,
            220,
            255,
            0.20
        );


    background:

        linear-gradient(
            90deg,
            rgba(
                0,
                60,
                100,
                0.14
            ),
            rgba(
                0,
                10,
                22,
                0.2
            )
        );


    font-family:

        'Orbitron',
        sans-serif;


    color:
        #00eaff;


    font-size:
        14px;


    letter-spacing:
        3px;

}


.indicador {

    display:
        inline-block;


    width:
        8px;


    height:
        8px;


    margin-right:
        12px;


    background:
        #00eaff;


    box-shadow:

        0 0 8px #00eaff,

        0 0 18px #00eaff;

}


.cantidad {

    color:
        #779ca8;


    font-size:
        11px;

}



/* =====================================================
   BUSCADOR
===================================================== */

.zona-buscador {

    padding:

        30px
        30px
        10px;

}


.buscador {

    max-width:
        650px;


    margin:
        auto;


    position:
        relative;

}


.buscador input {

    width:
        100%;


    padding:

        17px
        25px
        17px
        55px;


    border-radius:
        8px;


    border:

        1px solid
        rgba(
            0,
            220,
            255,
            0.30
        );


    outline:
        none;


    background:

        rgba(
            0,
            20,
            35,
            0.82
        );


    color:
        white;


    font-family:

        'Rajdhani',
        sans-serif;


    font-size:
        18px;


    transition:
        0.3s;

}


.buscador input:hover {

    border-color:

        rgba(
            0,
            234,
            255,
            0.55
        );

}


.buscador input:focus {

    border-color:
        #00eaff;


    background:

        rgba(
            0,
            25,
            42,
            0.95
        );


    box-shadow:

        0 0 15px
        rgba(
            0,
            234,
            255,
            0.20
        ),

        inset 0 0 15px
        rgba(
            0,
            234,
            255,
            0.035
        );

}


.buscador input::placeholder {

    color:
        #63818b;

}


.lupa {

    position:
        absolute;


    left:
        20px;


    top:
        50%;


    transform:
        translateY(-50%);


    color:
        #00eaff;


    font-size:
        25px;


    z-index:
        2;

}



/* =====================================================
   GRID DE ASIGNATURAS
===================================================== */

.grid-materias {

    display:
        grid;


    grid-template-columns:

        repeat(
            auto-fit,
            minmax(
                360px,
                1fr
            )
        );


    gap:
        22px;


    padding:
        30px;

}



/* =====================================================
   TARJETAS
===================================================== */

.tarjeta-materia {

    position:
        relative;


    min-height:
        135px;


    display:
        flex;


    align-items:
        center;


    padding:

        22px
        25px;


    text-decoration:
        none;


    color:
        white;


    border-radius:
        10px;


    border:

        1px solid
        rgba(
            0,
            220,
            255,
            0.18
        );


    background:

        linear-gradient(
            120deg,
            rgba(
                7,
                32,
                50,
                0.88
            ),
            rgba(
                0,
                11,
                24,
                0.96
            )
        );


    overflow:
        hidden;


    cursor:
        pointer;


    transition:

        transform 0.3s,

        box-shadow 0.3s,

        border-color 0.3s,

        background 0.3s;

}



/* Línea luminosa izquierda */

.tarjeta-materia::before {

    content:
        "";


    position:
        absolute;


    left:
        0;


    top:
        0;


    width:
        4px;


    height:
        100%;


    background:

        linear-gradient(
            #00eaff,
            #0077ff
        );


    box-shadow:

        0 0 15px
        #00d9ff;

}



/* Barrido luminoso */

.tarjeta-materia::after {

    content:
        "";


    position:
        absolute;


    top:
        0;


    left:
        -140%;


    width:
        100%;


    height:
        100%;


    background:

        linear-gradient(
            110deg,
            transparent 35%,
            rgba(
                0,
                234,
                255,
                0.10
            ) 50%,
            transparent 65%
        );


    transition:
        0.65s;

}


.tarjeta-materia:hover::after {

    left:
        145%;

}


.tarjeta-materia:hover {

    transform:

        translateY(-6px)
        scale(1.01);


    border-color:

        rgba(
            0,
            234,
            255,
            0.75
        );


    background:

        linear-gradient(
            120deg,
            rgba(
                0,
                55,
                82,
                0.88
            ),
            rgba(
                0,
                15,
                35,
                0.98
            )
        );


    box-shadow:

        0 0 20px
        rgba(
            0,
            220,
            255,
            0.22
        ),

        0 20px 35px
        rgba(
            0,
            0,
            0,
            0.30
        );

}



/* =====================================================
   NÚMERO DE TARJETA
===================================================== */

.numero {

    position:
        absolute;


    top:
        10px;


    right:
        13px;


    font-family:

        'Orbitron',
        sans-serif;


    font-size:
        10px;


    color:

        rgba(
            0,
            234,
            255,
            0.38
        );

}



/* =====================================================
   ICONO
===================================================== */

.icono {

    width:
        72px;


    min-width:
        72px;


    height:
        72px;


    display:
        flex;


    justify-content:
        center;


    align-items:
        center;


    margin-right:
        20px;


    border-radius:
        12px;


    border:

        1px solid
        rgba(
            0,
            234,
            255,
            0.30
        );


    background:

        rgba(
            0,
            234,
            255,
            0.06
        );


    color:
        #00eaff;


    font-family:

        'Orbitron',
        sans-serif;


    font-size:
        29px;


    font-weight:
        600;


    box-shadow:

        inset 0 0 20px
        rgba(
            0,
            234,
            255,
            0.05
        );


    transition:

        transform 0.3s,

        box-shadow 0.3s;

}


.tarjeta-materia:hover .icono {

    transform:
        scale(1.08);


    box-shadow:

        0 0 18px
        rgba(
            0,
            234,
            255,
            0.25
        ),

        inset 0 0 18px
        rgba(
            0,
            234,
            255,
            0.12
        );

}



/* =====================================================
   INFORMACIÓN DE LA TARJETA
===================================================== */

.info {

    flex:
        1;


    position:
        relative;


    z-index:
        2;

}


.etiqueta {

    color:
        #4e8798;


    font-family:

        'Orbitron',
        sans-serif;


    font-size:
        9px;


    letter-spacing:
        3px;


    margin-bottom:
        7px;

}


.info h3 {

    font-family:

        'Orbitron',
        sans-serif;


    font-size:
        18px;


    color:
        #ecfbff;


    letter-spacing:
        0.5px;


    margin-bottom:
        7px;


    line-height:
        1.35;


    transition:
        0.3s;

}


.tarjeta-materia:hover h3 {

    color:
        #00eaff;


    text-shadow:

        0 0 10px
        rgba(
            0,
            234,
            255,
            0.25
        );

}


.info p {

    color:
        #789aa5;


    font-size:
        16px;


    line-height:
        1.25;

}



/* =====================================================
   FLECHA
===================================================== */

.flecha {

    margin-left:
        10px;


    font-family:

        'Orbitron',
        sans-serif;


    color:
        #00eaff;


    font-size:
        27px;


    transition:
        0.3s;


    position:
        relative;


    z-index:
        2;

}


.tarjeta-materia:hover .flecha {

    transform:
        translateX(7px);


    text-shadow:

        0 0 10px
        #00eaff;

}



/* =====================================================
   ESQUINAS DECORATIVAS
===================================================== */

.esquina {

    position:
        absolute;


    width:
        13px;


    height:
        13px;

}


.superior {

    top:
        7px;


    left:
        8px;


    border-top:
        1px solid #00eaff;


    border-left:
        1px solid #00eaff;

}


.inferior {

    right:
        8px;


    bottom:
        7px;


    border-right:
        1px solid #00eaff;


    border-bottom:
        1px solid #00eaff;

}



/* =====================================================
   SIN RESULTADOS
===================================================== */

.sin-resultados {

    display:
        none;


    text-align:
        center;


    color:
        #6f929c;


    font-family:

        'Orbitron',
        sans-serif;


    padding:
        50px;


    letter-spacing:
        2px;


    font-size:
        15px;

}



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

footer {

    text-align:
        center;


    padding:

        70px
        20px
        40px;

}


.linea-footer {

    max-width:
        700px;


    height:
        1px;


    margin:

        auto
        auto
        28px;


    background:

        linear-gradient(
            90deg,
            transparent,
            #0066cc,
            #00eaff,
            white,
            #00eaff,
            #0066cc,
            transparent
        );

}


.footer-dominio {

    font-family:

        'Orbitron',
        sans-serif;


    color:
        #00eaff;


    font-weight:
        700;


    letter-spacing:
        4px;


    margin-bottom:
        8px;

}


.footer-universidad {

    color:
        #91adb5;


    letter-spacing:
        2px;


    font-size:
        17px;

}


.footer-texto {

    color:
        #526d76;


    margin-top:
        7px;


    font-size:
        15px;

}


.copyright {

    font-family:

        'Orbitron',
        sans-serif;


    font-size:
        10px;


    color:
        #39515a;


    margin-top:
        15px;

}



/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar {

    width:
        10px;

}


::-webkit-scrollbar-track {

    background:
        #000810;

}


::-webkit-scrollbar-thumb {

    background:

        linear-gradient(
            #0066cc,
            #00d9ff
        );


    border-radius:
        10px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        #00eaff;

}



/* =====================================================
   TABLET
===================================================== */

@media(
    max-width: 1000px
) {


    .grid-materias {

        grid-template-columns:

            repeat(
                2,
                1fr
            );

    }


}



/* =====================================================
   CELULAR
===================================================== */

@media(
    max-width: 700px
) {


    nav {

        padding:

            20px
            15px;

    }


    .estado {

        display:
            none;

    }


    .volver {

        font-size:
            10px;


        letter-spacing:
            1px;

    }



    header {

        padding:

            30px
            15px
            40px;

    }


    .codigo-superior {

        font-size:
            9px;


        letter-spacing:
            2px;


        line-height:
            1.5;

    }


    header h1 {

        font-size:
            34px;

    }


    header h1 span {

        font-size:
            1.25em;


        letter-spacing:
            8px;

    }


    header h2 {

        font-size:
            14px;


        letter-spacing:
            3px;


        line-height:
            1.5;

    }


    .descripcion {

        font-size:
            16px;


        line-height:
            1.4;

    }



    main {

        padding:

            0
            12px;

    }



    .encabezado-panel {

        padding:

            17px
            15px;


        font-size:
            11px;


        letter-spacing:
            2px;

    }


    .cantidad {

        display:
            none;

    }



    .zona-buscador {

        padding:

            20px
            15px
            5px;

    }


    .buscador input {

        font-size:
            16px;


        padding:

            15px
            18px
            15px
            48px;

    }


    .lupa {

        left:
            17px;


        font-size:
            21px;

    }



    .grid-materias {

        grid-template-columns:
            1fr;


        padding:

            18px
            15px;


        gap:
            15px;

    }



    .tarjeta-materia {

        min-height:
            110px;


        padding:
            15px;

    }



    .icono {

        width:
            55px;


        min-width:
            55px;


        height:
            55px;


        font-size:
            21px;


        margin-right:
            14px;


        border-radius:
            9px;

    }



    .etiqueta {

        font-size:
            7px;


        letter-spacing:
            2px;

    }



    .info h3 {

        font-size:
            14px;

    }



    .info p {

        font-size:
            14px;

    }



    .flecha {

        font-size:
            21px;

    }



    footer {

        padding:

            50px
            15px
            30px;

    }



    .footer-dominio {

        font-size:
            13px;


        letter-spacing:
            2px;

    }



    .footer-universidad {

        font-size:
            14px;

    }


}



/* =====================================================
   CELULARES PEQUEÑOS
===================================================== */

@media(
    max-width: 420px
) {


    header h1 {

        font-size:
            29px;

    }


    header h1 span {

        letter-spacing:
            5px;

    }


    .tarjeta-materia {

        padding:

            14px
            12px;

    }


    .icono {

        width:
            48px;


        min-width:
            48px;


        height:
            48px;


        font-size:
            18px;


        margin-right:
            10px;

    }


    .info h3 {

        font-size:
            12px;

    }


    .info p {

        font-size:
            12px;

    }


    .flecha {

        font-size:
            18px;

    }


}