@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --bg-deep: #e2e8f0; 
    --glass-bg: rgba(255, 255, 255, 0.75); 
    --glass-border: #0284c7; 
    --text-main: #0f172a; 
    --text-muted: #475569; 
    --accent: #0284c7; 
    --accent-glow: rgba(2, 132, 199, 0.25); 
    --bg-pattern: radial-gradient(rgba(2, 132, 199, 0.15) 1px, transparent 1px);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.10);
    --glow-top: 30%; --glow-left: 40%; --glow-width: 60vw; --glow-height: 60vh; --glow-blur: 90px;
    --logo-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: 0 4px 10px rgba(2, 132, 199, 0.2);
    --btn-primary-hover-shadow: 0 6px 15px rgba(2, 132, 199, 0.3);
    --btn-primary-hover-transform: translateY(-2px);
    --primary-color: #883997;
    --violet-glow: #8a2be2;
    --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    --hover-shadow: 0 15px 45px rgba(2, 132, 199, 0.2);
}

body.dark-mode {
    --bg-deep: #020617; 
    --glass-bg: rgba(15, 23, 42, 0.8); 
    --glass-border: rgba(56, 189, 248, 0.4); 
    --text-main: #f0f9ff; 
    --text-muted: #94a3b8; 
    --accent: #0ea5e9; 
    --accent-glow: rgba(14, 165, 233, 0.4);
    --bg-pattern: transparent;
    --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    --glow-top: 50%; --glow-left: 50%; --glow-width: 70vw; --glow-height: 70vh; --glow-blur: 120px;
    --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    --hover-shadow: 0 15px 45px rgba(14, 165, 233, 0.3);
}

body {
    margin: 0; 
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-deep); 
    background-image: var(--bg-pattern);
    background-size: 25px 25px; 
    color: var(--text-main);
    overflow-x: hidden; 
    scroll-behavior: smooth;
    transition: background-color 0.5s ease, color 0.5s ease;
    padding-top: 100px;
    padding-bottom: 80px;
}

.code-font { font-family: 'JetBrains Mono', monospace; }

.ambient-glow {
    position: fixed; top: var(--glow-top); left: var(--glow-left); transform: translate(-50%, -50%);
    width: var(--glow-width); height: var(--glow-height); 
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    z-index: -2; filter: blur(var(--glow-blur)); transition: all 0.5s ease;
    pointer-events: none;
}

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1.5px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow);
}

.progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 5px; z-index: 2000; }
.progress-bar { height: 100%; width: 0%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: width 0.1s;}

.navbar {
    position: fixed; top: 10px; left: 10px; right: 10px; height: 80px;
    border-radius: 16px; z-index: 1000; display: flex;
    justify-content: space-between; align-items: center; padding: 0 30px; box-sizing: border-box;
}

.nav-left { display: flex; align-items: center; gap: 15px; }

.nav-brand-title {
    display: flex; flex-direction: column; line-height: 1;
    border-left: 2px solid var(--accent); padding-left: 15px;
}
.nav-brand-title a { text-decoration: none; display: flex; flex-direction: column;}
.main-title { font-size: 1.2rem; font-weight: 900; letter-spacing: 1px; color: var(--text-main); }
.main-title .highlight { color: var(--accent); }
.sub-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); margin-top: 4px; }

.nav-menu { display: flex; gap: 20px; align-items: center; }
.nav-link { color: var(--text-main); text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: 0.3s; }
.nav-link:hover, .nav-link.active-page { color: var(--accent); }

.btn-theme {
    background: transparent; border: 1.5px solid var(--glass-border); color: var(--text-main);
    padding: 8px 18px; border-radius: 50px; cursor: pointer; font-weight: 600; transition: all 0.2s; font-size: 0.85rem;
}
.btn-theme:hover { background: var(--accent); color: white; border-color: var(--accent); }

.btn-action.primary {
    background: var(--accent); color: var(--btn-primary-text); padding: 10px 25px; 
    border: none; box-shadow: var(--btn-primary-shadow); cursor: pointer; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.3s;
}
.btn-action.primary:hover { 
    box-shadow: var(--btn-primary-hover-shadow); 
    transform: var(--btn-primary-hover-transform); 
    background: var(--text-main);
    color: var(--bg-deep);
}

.mobile-menu-btn { display: none; font-size: 2rem; color: var(--accent); cursor: pointer; }

.hero {
    min-height: calc(100vh - 200px); 
    display: flex; flex-direction: column; justify-content: center;
    padding: 20px 8% 60px; box-sizing: border-box;
}

.hero-grid {
    display: grid; grid-template-columns: 55% 45%; gap: 40px; 
    width: 100%; align-items: stretch; 
}

.hero-glass-card { padding: 50px; border-radius: 30px; display: flex; flex-direction: column; justify-content: center;}
.visual-container { 
    border-radius: 30px; display: flex; align-items: center; justify-content: center; 
    position: relative; padding: 0; min-height: 450px; overflow: hidden; background: transparent;
}
.visual-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; }
.badge {
    background: var(--accent); color: white; padding: 6px 16px; border-radius: 50px;
    font-size: 0.75rem; font-weight: 800; margin-bottom: 25px; display: inline-block;
}

h1 { font-size: clamp(3rem, 5vw, 4.8rem); margin: 0; line-height: 1.2; letter-spacing: -2px; font-weight: 900; }
h1.outline { color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
body:not(.dark-mode) h1.outline { color: rgba(2, 132, 199, 0.05); }

.hero-glass-card p { font-size: 1.15rem; margin: 20px 0 30px 0; color: var(--text-muted); line-height: 1.6;}

#constellation-canvas { width: 100%; height: 100%; pointer-events: auto; z-index: 2; display: block; border-radius: 30px;}

#hero-gif-carousel {
    display: flex; justify-content: center; align-items: center; gap: 20px; 
    width: 100%; margin: 40px auto 0; padding: 20px 5%; box-sizing: border-box;
    flex-wrap: wrap; z-index: 4;
}
.gif-container { 
    border-radius: 16px; overflow: hidden; opacity: 0.6; transform: scale(0.95); 
    transition: all 0.4s ease; border: 2px solid var(--glass-border); 
    box-shadow: var(--glass-shadow); background: var(--bg-deep);
}
.gif-container.small { width: 120px; height: 160px; }
.gif-container.large { width: 160px; height: 210px; }
.gif-container img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%); transition: filter 0.4s; }
.gif-container.gif-active { opacity: 1; transform: scale(1.05); border-color: var(--accent); box-shadow: 0 8px 25px var(--accent-glow); }
.gif-container.gif-active img { filter: grayscale(0%); }

.section-container { padding: 80px 8%; max-width: 1400px; margin: 0 auto;}
.section-title { font-size: 3rem; margin-bottom: 60px; text-align: center; font-weight: 900; }

.course-card-grid, .services-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 40px; 
}

.course-card { 
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 25px; 
    overflow: hidden; 
    box-shadow: var(--glass-shadow); 
    transition: all 0.4s ease; 
    border: 1.5px solid var(--glass-border); 
}

.course-card:hover { 
    transform: translateY(-12px); 
    box-shadow: 0 15px 35px var(--accent-glow); 
    border-color: var(--accent);
}

.card-img-bg { 
    width: 100%; 
    height: 220px; 
    object-fit: cover; 
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.course-card:hover .card-img-bg {
    transform: scale(1.08);
}

.card-content, .card-body { 
    padding: 30px; 
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    z-index: 2; 
}

.card-year { 
    align-self: flex-start;
    background: var(--accent); 
    color: var(--btn-primary-text); 
    padding: 6px 16px; 
    border-radius: 20px; 
    font-size: 0.8rem; 
    font-weight: 800; 
    margin-bottom: 15px; 
}

.card-content h3, .card-body h2 { 
    margin: 0 0 10px 0; 
    font-size: 1.5rem; 
    font-weight: 800; 
    color: var(--text-main); 
}

.card-content p, .card-body p { 
    margin: 0 0 25px 0; 
    color: var(--text-muted); 
    font-size: 0.95rem; 
    line-height: 1.6;
    flex-grow: 1; 
}

.btn-info { 
    background: transparent; 
    color: var(--accent); 
    border: 2px solid var(--accent); 
    padding: 12px 20px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: 700; 
    font-size: 0.95rem; 
    transition: all 0.3s ease; 
    width: 100%; 
    display: block; 
    text-align: center; 
    margin-top: auto; 
}

.centrar-proximamente {
    align-self: flex-start;
}

.btn-info:hover { 
    background: var(--accent); 
    color: var(--btn-primary-text); 
    box-shadow: 0 0 15px var(--accent-glow); 
}

.footer-fijo {
    position: fixed; bottom: 10px; left: 10px; right: 10px; height: 60px;
    border-radius: 16px; z-index: 1000; display: flex; justify-content: center; align-items: center;
    font-weight: 600; font-size: 0.85rem; color: var(--text-muted); margin: 0; padding: 0;
}

@keyframes revealUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.reveal-up { animation: revealUp 0.6s ease-out forwards; }
.anim-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.anim-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
    .navbar { padding: 0 20px; }
    .mobile-menu-btn { display: block; }
    .nav-menu {
        position: absolute; top: 85px; left: 10px; right: 10px;
        background: var(--bg-deep); border: 1.5px solid var(--glass-border);
        border-radius: 16px; flex-direction: column; padding: 25px; gap: 15px;
        box-shadow: var(--glass-shadow);
        opacity: 0; pointer-events: none; transform: translateY(-15px);
        transition: all 0.3s ease;
    }
    .nav-menu.active { opacity: 1; pointer-events: all; transform: translateY(0); }
    .nav-menu .nav-link, .nav-menu .btn-theme, .nav-menu .btn-action { width: 100%; text-align: center; justify-content: center; }
    .hero { align-items: flex-start; padding: 40px 5% 60px; height: auto; } 
    .hero-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .hero-glass-card { padding: 40px 20px; align-items: center;}
    h1 { font-size: clamp(2.5rem, 8vw, 3.5rem); line-height: 1.3; letter-spacing: -0.5px; } 
    .visual-container { height: 350px; min-height: 350px;}
}