:root{--navy:#071d49;--blue:#1668c7;--light:#eef5ff;--text:#17233b;--muted:#66728a;--line:#dbe4f1;--white:#fff;--green:#137a55;--red:#b42318;--radius:18px;--shadow:0 12px 32px rgba(7,29,73,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:#f7f9fc;line-height:1.55}.topbar{height:76px;padding:0 max(24px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;position:sticky;top:0;z-index:10}.brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none}.brand-icon{font-size:28px}.brand small{display:block;opacity:.75}.topbar nav{display:flex;align-items:center;gap:20px}.topbar nav a,.link-button{color:#fff;text-decoration:none;font:inherit}.inline{display:inline}.link-button{border:0;background:none;cursor:pointer}.container{max-width:1180px;margin:auto;padding:34px 22px 80px}.hero{min-height:390px;padding:54px;border-radius:28px;background:linear-gradient(135deg,#fff 0%,#e8f2ff 100%);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;box-shadow:var(--shadow)}h1{font-size:clamp(2.2rem,5vw,4.5rem);line-height:1.02;margin:.2em 0}h2{font-size:1.8rem;margin:0 0 20px}h3{margin:.2em 0}.hero p,.page-title p{font-size:1.1rem;color:var(--muted);max-width:720px}.hero-art{display:grid;place-items:center}.screen{width:260px;height:160px;border:12px solid var(--navy);border-bottom-width:24px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:48px;color:var(--blue);box-shadow:var(--shadow)}.screen span{font-size:18px}.books{margin-top:20px;color:var(--blue);font-size:30px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--blue);font-weight:800;font-size:.78rem}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:12px 18px;background:var(--navy);color:#fff;text-decoration:none;font-weight:700;cursor:pointer;margin-top:10px}.button.small{padding:9px 13px;font-size:.9rem}.button.secondary{background:#e7eef8;color:var(--navy)}section{margin-top:44px}.section-head{display:flex;justify-content:space-between;align-items:end}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card,.panel,.auth-card,.resource-row,.announcement,.empty{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.subject-card{text-decoration:none;color:inherit;transition:.2s}.subject-card:hover{transform:translateY(-3px)}.subject-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--light);color:var(--blue);font-size:24px}.stack{display:grid;gap:12px}.announcement{border-left:5px solid var(--blue)}.announcement.important{border-left-color:#c4320a}.announcement.warning{border-left-color:#f79009}.badge{display:inline-block;border-radius:999px;background:var(--light);color:var(--blue);padding:4px 9px;font-size:.75rem;font-weight:800;text-transform:capitalize}.badge.success,.alert.success{background:#e8f7f0;color:var(--green)}.resource-row{display:flex;align-items:center;justify-content:space-between;gap:24px}.resource-row p{margin:.2em 0;color:var(--muted)}.page-title{padding:34px 0 10px}.tabs{display:flex;gap:10px;flex-wrap:wrap;position:sticky;top:86px;background:#f7f9fc;padding:10px 0;z-index:5}.tabs a{background:#fff;border:1px solid var(--line);padding:9px 13px;border-radius:999px;text-decoration:none;color:var(--navy)}.auth-card{max-width:520px;margin:60px auto}.auth-card.wide{max-width:720px}.panel.narrow{max-width:620px}.auth-card h1{font-size:2.4rem}form{display:grid;gap:14px}label{display:grid;gap:7px;font-weight:700}input,textarea,select{width:100%;padding:12px;border:1px solid #bbc8dc;border-radius:9px;font:inherit;background:#fff}textarea{min-height:100px;resize:vertical}.check{display:flex;align-items:center}.check input{width:auto}.alert,.window{padding:14px;border-radius:10px;margin:14px 0}.alert.error{background:#fff0ee;color:var(--red)}.window{background:var(--light);display:grid;gap:4px}.help,small{color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stats div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.stats b{font-size:2rem;display:block;color:var(--navy)}.stats span{color:var(--muted)}.admin-actions{display:flex;gap:12px;margin:20px 0}.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.empty{text-align:center;color:var(--muted)}footer{text-align:center;padding:35px;color:var(--muted);border-top:1px solid var(--line)}@media(max-width:800px){.topbar{height:auto;padding:14px 18px;align-items:flex-start}.topbar nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}.topbar nav a:not(.button){display:none}.hero{grid-template-columns:1fr;padding:32px}.hero-art{margin-top:32px}.grid,.cards,.admin-grid,.stats{grid-template-columns:1fr}.resource-row{align-items:flex-start;flex-direction:column}.resource-row .button,.resource-row form{width:100%}.resource-row .button{width:100%}.tabs{top:72px;overflow-x:auto;flex-wrap:nowrap}.container{padding:24px 16px 60px}}
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
}

.video-card {
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.video-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #07111f;
}

.video-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-card-content {
    padding: 20px;
}

.video-card-content h2 {
    margin: 12px 0 8px;
    font-size: 1.2rem;
}

.video-card-content p {
    margin: 0;
    color: var(--muted);
}

.classroom-button {
    white-space: nowrap;
}

@media (max-width: 950px) {
    .video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-card-content {
        padding: 17px;
    }
}

/* Navegación móvil */
.mobile-menu-button {
    display: none;
}

@media (max-width: 800px) {
    .topbar {
        height: 72px;
        padding: 0 18px;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 1200;
    }

    .brand {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .brand b {
        display: block;
        color: #fff;
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .brand small {
        display: block;
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .brand-icon {
        color: #fff;
    }

    .mobile-menu-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;

        width: 44px;
        height: 44px;
        padding: 10px;

        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 10px;
        background: transparent;
        color: #fff;
        cursor: pointer;
    }

    .mobile-menu-button span {
        display: block;
        width: 23px;
        height: 2px;
        border-radius: 999px;
        background: #fff;
        transition:
            transform 180ms ease,
            opacity 180ms ease;
    }

    .mobile-menu-button.mobile-menu-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-button.mobile-menu-active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.mobile-menu-active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .topbar nav.main-menu {
        position: fixed;
        top: 72px;
        right: 0;
        bottom: 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;

        width: min(320px, 86vw);
        padding: 22px 16px;

        background: var(--navy);
        box-shadow: -12px 0 35px rgba(0, 0, 0, 0.28);

        transform: translateX(105%);
        visibility: hidden;
        pointer-events: none;

        transition:
            transform 220ms ease,
            visibility 220ms ease;
    }

    .topbar nav.main-menu.mobile-menu-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .topbar nav.main-menu a,
    .topbar nav.main-menu a:not(.button),
    .topbar nav.main-menu .link-button {
        display: flex !important;
        align-items: center;

        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 12px 14px;

        border: 0;
        border-radius: 10px;

        background: transparent;
        color: #fff;
        text-align: left;
        text-decoration: none;
        font: inherit;
        cursor: pointer;
    }

    .topbar nav.main-menu a:hover,
    .topbar nav.main-menu a:focus-visible,
    .topbar nav.main-menu .link-button:hover,
    .topbar nav.main-menu .link-button:focus-visible {
        background: rgba(255, 255, 255, 0.12);
    }

    .topbar nav.main-menu .button {
        justify-content: center;
        margin-top: 10px;
        background: #fff;
        color: var(--navy);
        font-weight: 700;
    }

    .topbar nav.main-menu form {
        display: block;
        width: 100%;
        margin: 0;
    }

    body.mobile-navigation-open {
        overflow: hidden;
    }
}

@media (max-width: 380px) {
    .brand-icon {
        display: none;
    }

    .brand b {
        font-size: 0.88rem;
    }
}
/* Navegación móvil */
.mobile-menu-button {
    display: none;
}

@media (max-width: 800px) {
    .topbar {
        height: 72px;
        padding: 0 18px;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 1200;
    }

    .brand {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .brand b {
        display: block;
        color: #fff;
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .brand small {
        display: block;
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .brand-icon {
        color: #fff;
    }

    .mobile-menu-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;

        width: 44px;
        height: 44px;
        padding: 10px;

        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 10px;
        background: transparent;
        color: #fff;
        cursor: pointer;
    }

    .mobile-menu-button span {
        display: block;
        width: 23px;
        height: 2px;
        border-radius: 999px;
        background: #fff;
        transition:
            transform 180ms ease,
            opacity 180ms ease;
    }

    .mobile-menu-button.mobile-menu-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-button.mobile-menu-active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.mobile-menu-active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .topbar nav.main-menu {
        position: fixed;
        top: 72px;
        right: 0;
        bottom: 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;

        width: min(320px, 86vw);
        padding: 22px 16px;

        background: var(--navy);
        box-shadow: -12px 0 35px rgba(0, 0, 0, 0.28);

        transform: translateX(105%);
        visibility: hidden;
        pointer-events: none;

        transition:
            transform 220ms ease,
            visibility 220ms ease;
    }

    .topbar nav.main-menu.mobile-menu-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .topbar nav.main-menu a,
    .topbar nav.main-menu a:not(.button),
    .topbar nav.main-menu .link-button {
        display: flex !important;
        align-items: center;

        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 12px 14px;

        border: 0;
        border-radius: 10px;

        background: transparent;
        color: #fff;
        text-align: left;
        text-decoration: none;
        font: inherit;
        cursor: pointer;
    }

    .topbar nav.main-menu a:hover,
    .topbar nav.main-menu a:focus-visible,
    .topbar nav.main-menu .link-button:hover,
    .topbar nav.main-menu .link-button:focus-visible {
        background: rgba(255, 255, 255, 0.12);
    }

    .topbar nav.main-menu .button {
        justify-content: center;
        margin-top: 10px;
        background: #fff;
        color: var(--navy);
        font-weight: 700;
    }

    .topbar nav.main-menu form {
        display: block;
        width: 100%;
        margin: 0;
    }

    body.mobile-navigation-open {
        overflow: hidden;
    }
}

@media (max-width: 380px) {
    .brand-icon {
        display: none;
    }

    .brand b {
        font-size: 0.88rem;
    }
}