:root {
    --bg-dark: #0a0a0f;
    --bg-card: #12121a;
    --border: #2a2a3a;

    --text-primary: #f0f0f5;
    --text-secondary: #8b8b9e;
    --text-muted: #5a5a6e;

    /* Colores por categoría */
    --numeros: #f59e0b;
    --numeros-glow: rgba(245, 158, 11, 0.3);

    --algebra: #6366f1;
    --algebra-glow: rgba(99, 102, 241, 0.3);

    --funciones: #10b981;
    --funciones-glow: rgba(16, 185, 129, 0.3);

    --geometria: #ec4899;
    --geometria-glow: rgba(236, 72, 153, 0.3);

    --estadistica: #06b6d4;
    --estadistica-glow: rgba(6, 182, 212, 0.3);

    --probabilidad: #8b5cf6;
    --probabilidad-glow: rgba(139, 92, 246, 0.3);

    --ecuaciones: #ef4444;
    --ecuaciones-glow: rgba(239, 68, 68, 0.3);

    --semejanza: #84cc16;
    --semejanza-glow: rgba(132, 204, 22, 0.3);

    /* es mateix menta */
    --geometria-trigonometria: #84cc16;
    --geometria-trigonometria-glow: rgba(132, 204, 22, 0.3);

    --geometria-analitica: #3b82f6;
    --geometria-analitica-glow: rgba(59, 130, 246, 0.3);

    --combinatoria: #f97316;
    --combinatoria-glow: rgba(249, 115, 22, 0.3);

    --polinomios: #14b8a6;
    --polinomios-glow: rgba(20, 184, 166, 0.3);

    --trigonometria: #d946ef;
    --trigonometria-glow: rgba(217, 70, 239, 0.3);

    --metrico: #38bdf8;
    --metrico-glow: rgba(56, 189, 248, 0.3);

    --aritmetica: #94a3b8;
    --aritmetica-glow: rgba(148, 163, 184, 0.3);

    --figuras: #22c55e;
    --figuras-glow: rgba(34, 197, 94, 0.3);

    --tablas: #f43f5e;
    --tablas-glow: rgba(244, 63, 94, 0.3);

    --cuerpos: #facc15;
    --cuerpos-glow: rgba(250, 204, 21, 0.3);

    --potencias: #ffffff;
    --potencias-glow: rgba(255, 255, 255, 0.3);

    --progresiones: #818cf8;
    --progresiones-glow: rgba(129, 140, 248, 0.3);

    --proporcionalidad: #34d399;
    --proporcionalidad-glow: rgba(52, 211, 153, 0.3);

    --movimientos: #60a5fa;
    --movimientos-glow: rgba(96, 165, 250, 0.3);

    --complejos: #bef264;
    --complejos-glow: rgba(190, 242, 100, 0.3);

    --conicas: #f97316;
    --conicas-glow: rgba(249, 115, 22, 0.3);

    --bidimensionales: #0ea5e9;
    --bidimensionales-glow: rgba(14, 165, 233, 0.3);

    --derivadas: #fb7185;
    --derivadas-glow: rgba(251, 113, 133, 0.3);

    --matrices: #fca5a5;
    --matrices-glow: rgba(252, 165, 165, 0.3);

    --determinantes: #eab308;
    --determinantes-glow: rgba(234, 179, 8, 0.3);

    --vectores: #6ee7b7;
    --vectores-glow: rgba(110, 231, 183, 0.3);

    --limites: #7dd3fc;
    --limites-glow: rgba(125, 211, 252, 0.3);

    --integrales: #d8b4fe;
    --integrales-glow: rgba(216, 180, 254, 0.3);




    --font-sans: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

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

body {
    background: var(--bg-dark);
    font-family: var(--font-sans);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-dark);
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: #3b82f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* Main */
.main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
}

/* Page header */
.page-header {
    text-align: center;
    margin-bottom: 48px;
}

.page-subtitle {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 8px;
    margin-top: 3em;
}

.page-title-temario {
    font-size: 32px;
    font-weight: 600;
    background: linear-gradient(135deg, #fff 0%, #8b8b9e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1em;
}

/* Category sections */
.category-section {
    margin-bottom: 48px;
    scroll-margin-top: 80px;
    /* Compensa la altura del navbar fijo */
}

.category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.category-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.category-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
}

.category-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.3s;
}

.card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px -20px var(--glow);
}

.card:hover::before {
    opacity: 1;
}

/* Card visual */
.card-visual {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.formula {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--accent);
    text-align: center;
    line-height: 1.4;
}

.formula-lg {
    font-size: 36px;
}

.formula-md {
    font-size: 28px;
}

.formula-sm {
    font-size: 22px;
}

.formula sup {
    font-size: 60%;
    vertical-align: super;
}

.formula sub {
    font-size: 60%;
    vertical-align: sub;
}

.formula .dim {
    opacity: 0.5;
}

/* SVG visuals */
.card-visual svg {
    max-width: 140px;
    max-height: 80px;
}

.svg-stroke {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.svg-fill {
    fill: var(--accent);
    opacity: 0.2;
}

.svg-dot {
    fill: var(--accent);
}

.svg-text {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: var(--text-secondary);
}

.svg-axis {
    stroke: var(--border);
    stroke-width: 1;
}

/* Card content */
.card-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 4px;
}

.card-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.meta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.progress-bar {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Category colors */
.card.numeros {
    --accent: var(--numeros);
    --glow: var(--numeros-glow);
}

.card.algebra {
    --accent: var(--algebra);
    --glow: var(--algebra-glow);
}

.card.funciones {
    --accent: var(--funciones);
    --glow: var(--funciones-glow);
}

.card.geometria {
    --accent: var(--geometria);
    --glow: var(--geometria-glow);
}

.card.estadistica {
    --accent: var(--estadistica);
    --glow: var(--estadistica-glow);
}

.card.probabilidad {
    --accent: var(--probabilidad);
    --glow: var(--probabilidad-glow);
}

.card.ecuaciones {
    --accent: var(--ecuaciones);
    --glow: var(--ecuaciones-glow);
}

.card.geometria-trigonometria {
    --accent: var(--semejanza);
    --glow: var(--semejanza-glow);
}

.card.geometria-analitica {
    --accent: var(--geometria-analitica);
    --glow: var(--geometria-analitica-glow);
}

.card.combinatoria {
    --accent: var(--combinatoria);
    --glow: var(--combinatoria-glow);
}

.card.polinomios {
    --accent: var(--polinomios);
    --glow: var(--polinomios-glow);
}

.card.trigonometria {
    --accent: var(--trigonometria);
    --glow: var(--trigonometria-glow);
}

.card.metrico {
    --accent: var(--metrico);
    --glow: var(--metrico-glow);
}

.card.aritmetica {
    --accent: var(--aritmetica);
    --glow: var(--aritmetica-glow);
}

.card.figuras {
    --accent: var(--figuras);
    --glow: var(--figuras-glow);
}

.card.tablas {
    --accent: var(--tablas);
    --glow: var(--tablas-glow);
}

.card.semejanza {
    --accent: var(--semejanza);
    --glow: var(--semejanza-glow);
}

.card.cuerpos {
    --accent: var(--cuerpos);
    --glow: var(--cuerpos-glow);
}

.card.potencias {
    --accent: var(--potencias);
    --glow: var(--potencias-glow);
}

.card.progresiones {
    --accent: var(--progresiones);
    --glow: var(--progresiones-glow);
}

.card.proporcionalidad {
    --accent: var(--proporcionalidad);
    --glow: var(--proporcionalidad-glow);
}

.card.movimientos {
    --accent: var(--movimientos);
    --glow: var(--movimientos-glow);
}

.card.complejos {
    --accent: var(--complejos);
    --glow: var(--complejos-glow);
}

.card.conicas {
    --accent: var(--conicas);
    --glow: var(--conicas-glow);
}

.card.bidimensionales {
    --accent: var(--bidimensionales);
    --glow: var(--bidimensionales-glow);
}

.card.derivadas {
    --accent: var(--derivadas);
    --glow: var(--derivadas-glow);
}

.card.matrices {
    --accent: var(--matrices);
    --glow: var(--matrices-glow);
}

.card.determinantes {
    --accent: var(--determinantes);
    --glow: var(--determinantes-glow);
}

.card.vectores {
    --accent: var(--vectores);
    --glow: var(--vectores-glow);
}

.card.limites {
    --accent: var(--limites);
    --glow: var(--limites-glow);
}

.card.integrales {
    --accent: var(--integrales);
    --glow: var(--integrales-glow);
}

.dot-numeros {
    background: var(--numeros);
}

.dot-algebra {
    background: var(--algebra);
}

.dot-funciones {
    background: var(--funciones);
}

.dot-geometria {
    background: var(--geometria);
}

.dot-estadistica {
    background: var(--estadistica);
}

.dot-probabilidad {
    background: var(--probabilidad);
}

.dot-ecuaciones {
    background: var(--ecuaciones);
}

.dot-geometria-trigonometria {
    background: var(--semejanza);
}

.dot-geometria-analitica {
    background: var(--geometria-analitica);
}

.dot-combinatoria {
    background: var(--combinatoria);
}

.dot-polinomios {
    background: var(--polinomios);
}

.dot-trigonometria {
    background: var(--trigonometria);
}

.dot-metrico {
    background: var(--metrico);
}

.dot-aritmetica {
    background: var(--aritmetica);
}

.dot-figuras {
    background: var(--figuras);
}

.dot-tablas {
    background: var(--tablas);
}

.dot-semejanza {
    background: var(--semejanza);
}

.dot-cuerpos {
    background: var(--cuerpos);
}

.dot-potencias {
    background: var(--potencias);
}

.dot-progresiones {
    background: var(--progresiones);
}

.dot-proporcionalidad {
    background: var(--proporcionalidad);
}

.dot-movimientos {
    background: var(--movimientos);
}

.dot-complejos {
    background: var(--complejos);
}

.dot-conicas {
    background: var(--conicas);
}

.dot-bidimensionales {
    background: var(--bidimensionales);
}

.dot-derivadas {
    background: var(--derivadas);
}

.dot-matrices {
    background: var(--matrices);
}

.dot-determinantes {
    background: var(--determinantes);
}

.dot-vectores {
    background: var(--vectores);
}

.dot-limites {
    background: var(--limites);
}

.dot-integrales {
    background: var(--integrales);
}





/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.card {
    animation: fadeInUp 0.5s ease backwards;
}

.category-section:nth-child(1) .card {
    animation-delay: calc(var(--i, 0) * 0.05s);
}

.category-section:nth-child(2) .card {
    animation-delay: calc(0.2s + var(--i, 0) * 0.05s);
}

.category-section:nth-child(3) .card {
    animation-delay: calc(0.4s + var(--i, 0) * 0.05s);
}

.category-section:nth-child(4) .card {
    animation-delay: calc(0.6s + var(--i, 0) * 0.05s);
}

.category-section:nth-child(5) .card {
    animation-delay: calc(0.8s + var(--i, 0) * 0.05s);
}

/* Responsive */
@media (max-width: 640px) {
    .grid {
        grid-template-columns: 1fr;
    }

    .main {
        padding: 24px 16px;
    }

    .page-title {
        font-size: 24px;
    }

    .header {
        padding: 16px;
    }
}