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

body{
    font-family: 'Poppins', sans-serif;
    height:100vh;
    overflow-x:hidden;
    background:#050b2e;
    color:white;
}

/* ===== FONDO TECNOLÓGICO ===== */
.bg-tech{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%, #00c6ff33, transparent 40%),
        radial-gradient(circle at 80% 80%, #260a8b55, transparent 40%),
        linear-gradient(120deg, #020024, #090979, #00d4ff);
    animation: bgMove 12s infinite alternate;
    z-index:-1;
}

@keyframes bgMove{
    0%{filter:hue-rotate(0deg);}
    100%{filter:hue-rotate(60deg);}
}

/* ===== HEADER ===== */
.header{
    text-align:center;
    padding:80px 20px 40px;
}

.header h1{
    font-family:'Rozha One', serif;
    font-size:48px;
    text-shadow:0 0 20px #00c6ff;
}

.header p{
    font-size:20px;
    opacity:0.85;
}

/* ===== PERIODOS ===== */
.periodos{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:40px;
    padding:60px 10%;
}

.card{
    position:relative;
    height:260px;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(15px);
    border-radius:30px;
    padding:30px;
    text-decoration:none;
    color:white;
    overflow:hidden;
    transition:all 0.5s ease;
    box-shadow:0 25px 40px rgba(0,0,0,0.5);
}

.card h2{
    font-size:36px;
    margin-bottom:15px;
}

.card p{
    font-size:18px;
    opacity:0.8;
}

/* EFECTO SHINE */
.shine{
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transform:rotate(25deg);
    opacity:0;
}

.card:hover .shine{
    animation:shine 1.2s ease;
}

@keyframes shine{
    0%{transform:translateX(-100%) rotate(25deg); opacity:0;}
    50%{opacity:1;}
    100%{transform:translateX(100%) rotate(25deg); opacity:0;}
}

/* HOVER 3D */
.card:hover{
    transform:translateY(-20px) scale(1.05);
    box-shadow:0 40px 80px rgba(0,198,255,0.5);
}

/* DESHABILITADAS */
.card.disabled{
    filter:grayscale(1);
    cursor:not-allowed;
    opacity:0.5;
}

.card.disabled:hover{
    transform:none;
    box-shadow:none;
}

/* ===== FOOTER ===== */
footer{
    text-align:center;
    padding:20px;
    font-size:14px;
    opacity:0.7;
}