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

body{
    font-family:'Segoe UI',sans-serif;

    min-height:100vh;

    display:flex;
    flex-direction:column;

    background:
    linear-gradient(
    -45deg,
    #0f172a,
    #1e293b,
    #2563eb,
    #7c3aed);

    background-size:400% 400%;
    animation:fondo 12s ease infinite;

    color:white;
}

.contenedor{
    flex:1;

    max-width:1200px;
    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;
    padding:30px;

    perspective:1200px;
}

@keyframes fondo{
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}

header{
    text-align:center;
    padding:50px 20px;
}

header h1{
    font-size:3rem;
    margin-bottom:10px;
    text-shadow:0 0 15px rgba(255,255,255,.4);
}

header p{
    font-size:1.1rem;
    opacity:.8;
}

.contenedor{
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;
    padding:30px;
}

.card{
    height:230px;

    border-radius:25px;

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

    text-decoration:none;
    color:white;

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

    position:relative;
    overflow:hidden;

    backdrop-filter:blur(10px);

    box-shadow:
    0 10px 30px rgba(0,0,0,.35);

    transition:
    transform .6s ease,
    box-shadow .6s ease;
}

.card::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.55));
}

.card::after{
    content:"";
    position:absolute;

    top:-100%;
    left:-100%;

    width:200%;
    height:200%;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.2),
    transparent);

    transform:rotate(25deg);

    transition:1s;
}

.card:hover{
    transform:
    translateY(-18px)
    scale(1.06)
    rotateX(8deg)
    rotateY(-8deg);

    box-shadow:
    0 25px 50px rgba(0,0,0,.5),
    0 0 25px rgba(0,212,255,.5),
    0 0 60px rgba(124,58,237,.4);

    animation:rebote .6s ease;
}

.card h2{
    position:relative;
    z-index:2;

    text-align:center;
    font-size:1.7rem;

    text-shadow:
    0 0 10px rgba(0,0,0,.8);
}

.menu{
    position:sticky;
    top:15px;

    width:fit-content;
    margin:auto;

    display:flex;
    gap:15px;

    padding:12px 18px;

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

    backdrop-filter:blur(15px);

    border-radius:50px;

    z-index:100;
}

.menu a{
    text-decoration:none;
    color:white;

    padding:10px 18px;

    border-radius:30px;

    transition:.4s;
}

.menu a:hover{
    background:#00d4ff;
    color:#111;

    transform:translateY(-3px);
}
.card{
    position:relative;

    min-height:180px;

    padding:25px;

    border-radius:25px;

    overflow:hidden;

    text-decoration:none;
    color:white;

    backdrop-filter:blur(12px);

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

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

    animation:
    aparecer .8s ease forwards;
}

.card::before{
    content:"";

    position:absolute;

    top:-50%;
    left:-50%;

    width:200%;
    height:200%;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.18),
    transparent);

    transform:rotate(25deg);

    transition:1s;
}

.card:hover{
    transform:
    translateY(-12px)
    rotateX(4deg);

    box-shadow:
    0 15px 40px rgba(0,0,0,.4),
    0 0 25px rgba(0,212,255,.3);
}

.card:hover::before{
    left:100%;
}

.card h3{
    font-size:1.4rem;
    margin-bottom:10px;
}

.card p{
    opacity:.85;
    font-size:.95rem;
}

.unidad{
    margin:60px auto;
    max-width:1200px;
}

.unidad h2{
    margin-bottom:25px;

    font-size:2rem;

    display:flex;
    align-items:center;
    gap:10px;
}

.unidad span{
    font-size:1rem;
    opacity:.7;
}

@keyframes aparecer{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes rebote{

    0%{
        transform:
        translateY(0)
        scale(1);
    }

    50%{
        transform:
        translateY(-25px)
        scale(1.08);
    }

    100%{
        transform:
        translateY(-18px)
        scale(1.06);
    }

}
.volver{

    display:inline-block;

    margin-top:15px;

    padding:10px 18px;

    border-radius:30px;

    text-decoration:none;
    color:white;

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

    transition:.4s;
}

.volver:hover{

    background:#00d4ff;

    color:black;

    transform:translateX(-5px);

}

.card1{
    background-image:url("../img/LMSGI.jpg");
}

.card2{
    background-image:url("../img/programacion.jpg");
}

.card3{
    background-image:url("../img/sistemas informaticos.jpg");
}

.card4{
    background-image:url("../img/bases de datos.jpg");
}

.card5{
    background-image:url("../img/Entornos de desarrollo.jpg");
}

.card6{
    background-image:url("../img/Ingles.png");
}

.card7{
    background-image:url("../img/IPE.jpg");
}

.autor{
    margin-top:10px;

    font-size:1.1rem;

    color:rgba(255,255,255,.8);

    letter-spacing:1px;

    text-shadow:0 0 10px rgba(255,255,255,.2);
}

.markdown-card{
    background-image:url("../img/markdown.png");
    background-size:cover;
    background-position:center;
}
.markdown-card h3,
.markdown-card p{
    color:black;
    font-weight:bold;
}

.horario-card{
    background-image:url("../img/horarios.jpg");
    background-size:cover;
    background-position:center;
}

.menu-card{
    background-image:url("../img/menu.jpg");
    background-size:cover;
    background-position:center;
}

.perfil-card{
    background-image:url("../img/perfil.jpg");
    background-size:cover;
    background-position:center;
}
.card h3{
    color:black;
    background:rgba(255,255,255,0.8);
    padding:10px 20px;
    border-radius:10px;
    font-weight:bold;
}

.html1-card{
    background-image:url("../img/bigdata.png");
    background-size:cover;
    background-position:center;
}

.html2-card{
    background-image:url("../img/enobras.jpg.png");
    background-size:cover;
    background-position:center;
}

.html3-card{
    background-image:url("../img/etiquetas.jpg.png");
    background-size:cover;
    background-position:center;
}

.html4-card{
    background-image:url("../img/conceptos.jpg.png");
    background-size:cover;
    background-position:center;
}

.videos-card{
    background-image:url("../img/videos.jpg.png");
    background-size:cover;
    background-position:center;
}

.tecnologia-card{
    background-image:url("../img/tecnologia.jpg.png");
    background-size:cover;
    background-position:center;
}

.codigos-card{
    background-image:url("../img/codigos.png");
    background-size:cover;
    background-position:center;
}

.horarios-card{
    background-image:url("../img/horario.png");
    background-size:cover;
    background-position:center;
}

.listas-card{
    background-image:url("../img/listas.png");
    background-size:cover;
    background-position:center;
}

.multimedia-card{
    background-image:url("../img/multimedia.png");
    background-size:cover;
    background-position:center;
}

.tabla_imagenes-card{
    background-image:url("../img/tabla_imagenes.png");
    background-size:cover;
    background-position:center;
}

.tablas-card{
    background-image:url("../img/tablas.png");
    background-size:cover;
    background-position:center;
}

.colores-card{
    background-image:url("../img/colores.png");
    background-size:cover;
    background-position:center;
}

.zen_garden-card{
    background-image:url("../img/zen_garden.png");
    background-size:cover;
    background-position:center;
}

.menu-card{
    background-image:url("../img/menu.png");
    background-size:cover;
    background-position:center;
}

.pruebas_estilos-card{
    background-image:url("../img/estilos_pruebas.png");
    background-size:cover;
    background-position:center;
}

.background-card{
    background-image:url("../img/background.png");
    background-size:cover;
    background-position:center;
}

.cursor-card{
    background-image:url("../img/cursores.png");
    background-size:cover;
    background-position:center;
}

.fragmentos-card{
    background-image:url("../img/fragmentos.png");
    background-size:cover;
    background-position:center;
}

.varios-card{
    background-image:url("../img/varios.png");
    background-size:cover;
    background-position:center;
}

.texto-card{
    background-image:url("../img/texto.png");
    background-size:cover;
    background-position:center;
}

.ajedrez-card{
    background-image:url("../img/ajedrez.png");
    background-size:cover;
    background-position:center;
}

.blog-card{
    background-image:url("../img/blog.png");
    background-size:cover;
    background-position:center;
}

.catalogo_peliculas-card{
    background-image:url("../img/catalogo_peliculas.png");
    background-size:cover;
    background-position:center;
}

.dado-card{
    background-image:url("../img/dados.png");
    background-size:cover;
    background-position:center;
}

.extremadura-card{
    background-image:url("../img/extremadura.png");
    background-size:cover;
    background-position:center;
}

.layout-card{
    background-image:url("../img/layout.png");
    background-size:cover;
    background-position:center;
}

.hospederia-card{
    background-image:url("../img/hospederias.png");
    background-size:cover;
    background-position:center;
}

.footer{
    text-align:center;
    margin-top:60px;
    padding:30px;
    background:#1e293b;
    color:white;
    border-top:2px solid rgba(255,255,255,.1);
}

.footer h3{
    margin-bottom:15px;
}

.footer p{
    margin:10px 0;
}

.footer a{
    color:#00d4ff;
    text-decoration:none;
}

.footer a:hover{
    text-decoration:underline;
}

html {
    scroll-behavior: smooth;
}

.unidad {
    scroll-margin-top: 90px;
}

.unidad:target {
    animation: reboteCalido 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes reboteCalido {
    0% {
        transform: scale(0.96) translateY(20px);
        opacity: 0.8;
    }
    60% {
        transform: scale(1.02) translateY(-8px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}