/* ========================= */
/* VARIABLES */
/* ========================= */

:root{

    --verde:#00ff88;
    --azul:#00b7ff;
    --rojo:#ff3c3c;

    --fondo:#05080d;
    --panel:#0c1118;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:var(--fondo);

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

    min-height:100vh;

    overflow-x:hidden;

    color:white;

    position:relative;
}

/* ========================= */
/* FONDO CIRCUITOS */
/* ========================= */

.circuitos{

    position:fixed;

    inset:0;

    background:

    linear-gradient(
    rgba(0,255,120,.05),
    rgba(0,255,120,.02)
    ),

    url("https://www.transparenttextures.com/patterns/circuit-board.png");

    opacity:.35;

    animation:mover 20s linear infinite;

    z-index:0;
}

@keyframes mover{

    from{

        background-position:0 0;
    }

    to{

        background-position:1000px 1000px;
    }
}

/* ========================= */
/* CONTENEDOR */
/* ========================= */

.contenedor{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1400px;

    margin:auto;

    padding:100px 0;
}

/* ========================= */
/* IMAGEN CARD */
/* ========================= */

.imagen-card{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:14px;

    margin-bottom:25px;

    border:2px solid rgba(255,255,255,.08);

    transition:.4s;

    box-shadow:
    0 0 15px rgba(0,0,0,.4);
}

/* EFECTO HOVER */

.card-verde:hover .imagen-card{

    box-shadow:
    0 0 20px rgba(0,255,136,.5);

    transform:scale(1.02);
}

.card-azul:hover .imagen-card{

    box-shadow:
    0 0 20px rgba(0,183,255,.5);

    transform:scale(1.02);
}

.card-roja:hover .imagen-card{

    box-shadow:
    0 0 20px rgba(255,60,60,.5);

    transform:scale(1.02);
}

/* ========================= */
/* HERO */
/* ========================= */

.hero{

    text-align:center;

    margin-bottom:70px;
}

.badge-sistema{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border:1px solid rgba(0,255,120,.3);

    border-radius:50px;

    background:rgba(0,255,120,.08);

    color:var(--verde);

    margin-bottom:25px;

    font-size:.9rem;
}

.hero h1{

    font-size:5rem;

    font-weight:900;

    margin-bottom:20px;

    letter-spacing:3px;
}

.hero h1 span{

    color:var(--verde);

    text-shadow:
    0 0 20px var(--verde),
    0 0 40px var(--verde);
}

.hero p{

    color:#93a0b5;

    font-size:1.1rem;
}

/* ========================= */
/* CARD */
/* ========================= */

.card-calc{

    display:block;

    text-decoration:none;

    color:white;

    background:rgba(12,17,24,.92);

    border:2px solid rgba(255,255,255,.08);

    border-radius:20px;

    overflow:hidden;

    transition:.4s;

    backdrop-filter:blur(10px);

    position:relative;

    height:100%;
}

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

.card-verde:hover{

    transform:translateY(-10px);

    border-color:var(--verde);

    box-shadow:
    0 0 25px rgba(0,255,136,.5),
    0 0 60px rgba(0,255,136,.2);
}

.card-azul:hover{

    transform:translateY(-10px);

    border-color:var(--azul);

    box-shadow:
    0 0 25px rgba(0,183,255,.5),
    0 0 60px rgba(0,183,255,.2);
}

.card-roja:hover{

    transform:translateY(-10px);

    border-color:var(--rojo);

    box-shadow:
    0 0 25px rgba(255,60,60,.5),
    0 0 60px rgba(255,60,60,.2);
}

/* ========================= */
/* LINEA SUPERIOR */
/* ========================= */

.linea{

    height:5px;

    background:linear-gradient(
    90deg,
    #00ff88,
    #00b7ff,
    #ff3c3c
    );
}

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

.contenido-card{

    padding:35px;
}

.icono{

    width:70px;

    height:70px;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    margin-bottom:25px;

    background:rgba(255,255,255,.08);
}

.nivel{

    color:#8b9ab0;

    font-size:.8rem;

    letter-spacing:2px;
}

.contenido-card h2{

    margin:15px 0;

    font-size:2rem;

    line-height:1.2;
}

.contenido-card p{

    color:#93a0b5;

    line-height:1.8;
}

/* ========================= */
/* HABILIDADES */
/* ========================= */

.habilidades{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    padding:0 35px 25px;
}

.habilidades span{

    background:#121923;

    border:1px solid rgba(255,255,255,.08);

    border-radius:30px;

    padding:8px 14px;

    font-size:.75rem;

    color:#9fb0c8;
}

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

.footer-card{

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

    padding:20px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.footer-card small{

    color:#94a3b8;
}

.footer-card button{

    border:none;

    padding:10px 20px;

    border-radius:30px;

    background:var(--verde);

    color:black;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

.footer-card button:hover{

    transform:scale(1.05);
}

/* ========================= */
/* BOTON REGRESAR */
/* ========================= */

.btn-regresar{

    position:fixed;

    top:20px;

    left:20px;

    z-index:999;

    text-decoration:none;

    background:#101820;

    border:2px solid var(--verde);

    color:var(--verde);

    padding:12px 20px;

    border-radius:12px;

    font-weight:bold;

    box-shadow:
    0 0 15px rgba(0,255,136,.3);

    transition:.3s;
}

.btn-regresar:hover{

    background:var(--verde);

    color:black;

    transform:scale(1.05);
}

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

@media(max-width:768px){

    .hero h1{

        font-size:3rem;
    }

    .contenido-card h2{

        font-size:1.5rem;
    }

}