html { scroll-behavior: smooth; }

    :root {
        --ind-bg:           #f4f7fc;
        --ind-card:         #ffffff;
        --ind-line:         #e2e8f0;
        --ind-text:         #475569;
        --ind-text-strong:  #0f172a;
        --ind-muted:        #94a3b8;
        --ind-primary:      #2563eb;
        --ind-primary-dark: #1d4ed8;
        --ind-primary-soft: #eff6ff;
        --ind-shadow:       0 20px 55px rgba(15,23,42,.08);
        --ind-shadow-soft:  0 12px 30px rgba(15,23,42,.06);
        --ind-radius:       26px;

        --navbar-h:         80px;
        --sticky-top:       calc(var(--navbar-h) + 16px);
        --sticky-gap:       18px;
    }

    html,
    body,
    #mainSection,
    .course-main,
    .course-shell,
    .course-layout,
    .course-nav-wrap,
    .course-form-wrap {
        overflow: visible !important;
    }

    body {
        background:
            radial-gradient(circle at top left, rgba(59,130,246,.08), transparent 20%),
            radial-gradient(circle at top right, rgba(14,165,233,.08), transparent 18%),
            linear-gradient(180deg, #f5f8fe 0%, #f8fafc 38%, #ffffff 100%);
    }

    .course-shell {
        max-width: 1480px;
        margin: 0 auto;
        padding: 0 1.5rem;
        overflow: visible !important;
    }

    .course-hero {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 15% 18%, rgba(99,102,241,.22), transparent 24%),
            radial-gradient(circle at 86% 22%, rgba(56,189,248,.20), transparent 18%),
            linear-gradient(135deg, #071127 0%, #10224f 42%, #1d4ed8 100%);
    }

    .course-hero__bg {
        position: absolute;
        inset: 0;
        opacity: .08;
        background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='white' fill-opacity='1'%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/g%3E%3C/svg%3E");
    }

    .course-hero__inner {
        position: relative;
        z-index: 2;
        padding: 5.4rem 0 3.8rem;
    }

    .course-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        gap: .45rem;
        align-items: center;
        margin-bottom: 1rem;
        color: rgba(255,255,255,.72);
        font-size: .8rem;
        font-weight: 700;
    }

    .course-breadcrumbs a {
        color: #dbeafe;
        text-decoration: none;
    }

    .course-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
        gap: 3rem;
        align-items: center;
    }

    .course-hero__content {
        max-width: 860px;
    }

    .course-code {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .55rem .85rem;
        border-radius: 14px;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.18);
        color: #dbeafe;
        font-size: .75rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-bottom: 1rem;
    }

    .course-title {
        margin: 0 0 1rem;
        color: #fff;
        font-size: clamp(2.2rem, 4vw, 3.7rem);
        line-height: 1.02;
        font-weight: 900;
        letter-spacing: -.05em;
    }

    .course-intro {
        margin: 0;
        color: rgba(255,255,255,.92);
        font-size: 1.05rem;
        line-height: 1.9;
        max-width: 760px;
    }

    .course-intro strong { color: #fff; }
    .course-intro em {
        color: #e0f2fe;
        font-style: normal;
        font-weight: 800;
    }

    .course-pills {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        margin-top: 1.5rem;
    }

    .course-pill {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        min-height: 44px;
        padding: .8rem 1rem;
        border-radius: 999px;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.16);
        color: #fff;
        font-size: .84rem;
        font-weight: 800;
        backdrop-filter: blur(10px);
    }

    .course-pill--success {
        background: rgba(34,197,94,.16);
        border-color: rgba(134,239,172,.28);
        color: #dcfce7;
    }

    .course-pill--warning {
        background: rgba(245,158,11,.16);
        border-color: rgba(252,211,77,.28);
        color: #fef3c7;
    }

    .course-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: .8rem;
        margin-top: 1.5rem;
    }

    .course-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        min-height: 50px;
        padding: .95rem 1.2rem;
        border-radius: 18px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        font-size: .9rem;
        font-weight: 900;
        transition: all .22s ease;
    }

    .course-btn:hover { transform: translateY(-2px); }

    .course-btn--primary {
        background: #fff;
        color: #1e40af;
        box-shadow: 0 16px 34px rgba(0,0,0,.16);
    }

    .course-btn--ghost {
        background: rgba(255,255,255,.08);
        color: #fff;
        border: 1px solid rgba(255,255,255,.18);
    }

    .course-btn--submit {
        width: 100%;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        color: #fff;
        box-shadow: 0 14px 28px rgba(37,99,235,.22);
    }

    .course-btn--submit:disabled {
        background: #f1f5f9;
        color: #94a3b8;
        box-shadow: none;
        cursor: not-allowed;
        transform: none;
    }

    .course-hero__image {
        position: relative;
        min-height: 380px;
        border-radius: 28px;
        overflow: hidden;
        background: #0b1022;
        border: 1px solid rgba(255,255,255,.14);
        box-shadow: 0 30px 70px rgba(0,0,0,.22);
    }

    .course-hero__image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .course-main {
        padding: 2rem 0 4.2rem;
        overflow: visible !important;
    }

    .course-layout {
        display: grid;
        grid-template-columns: 250px minmax(0,1fr) 360px;
        gap: 1.4rem;
        align-items: stretch;
        position: relative;
        overflow: visible !important;
    }

    .course-nav-wrap,
    .course-form-wrap {
        min-width: 0;
        align-self: stretch;
        position: relative;
        overflow: visible !important;
    }

    .course-content {
        min-width: 0;
    }

    .sticky-shell {
        position: sticky;
        top: var(--sticky-top);
        width: 100%;
        align-self: start;
    }

    .course-nav {
        position: relative;
        background: rgba(255,255,255,.94);
        backdrop-filter: blur(14px);
        border: 1px solid rgba(226,232,240,.92);
        border-radius: 24px;
        box-shadow: var(--ind-shadow-soft);
        padding: 1rem .75rem .75rem 0;
        padding-left: 2.75rem;
    }

    .course-nav__head {
        padding: 0 .8rem .85rem .1rem;
        margin-bottom: .25rem;
        border-bottom: 1px solid rgba(226,232,240,.78);
    }

    .course-nav__eyebrow {
        margin: 0 0 .2rem;
        color: #64748b;
        font-size: .68rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .12em;
    }

    .course-nav__title {
        margin: 0;
        color: #0f172a;
        font-size: 1.05rem;
        font-weight: 900;
        letter-spacing: -.02em;
    }

    .cnav-track {
        position: absolute;
        left: 1.2rem;
        top: 5.1rem;
        bottom: 1.2rem;
        width: 3px;
    }

    .cnav-track__line {
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: #e2e8f0;
    }

    .cnav-track__fill {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0%;
        border-radius: 999px;
        background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%);
        transition: height .35s cubic-bezier(.4,0,.2,1);
        box-shadow: 0 0 10px rgba(37,99,235,.3);
    }

    .cnav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: .6rem;
        min-height: 48px;
        padding: .78rem .85rem .78rem .55rem;
        border-radius: 18px;
        color: #64748b;
        text-decoration: none;
        font-size: .82rem;
        font-weight: 800;
        transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
        overflow: visible;
    }

    .cnav-link:hover {
        color: #1d4ed8;
        background: #eff6ff;
        transform: translateX(3px);
    }

    .cnav-link__dot {
        position: absolute;
        left: -1.95rem;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #fff;
        border: 2px solid #e2e8f0;
        transition: border-color .22s ease, width .22s cubic-bezier(.34,1.56,.64,1), height .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .22s ease;
        z-index: 2;
    }

    .cnav-link__dot-inner {
        width: 4px;
        height: 4px;
        border-radius: 999px;
        background: #94a3b8;
        transition: width .22s ease, height .22s ease, background .22s ease, transform .22s ease;
    }

    .cnav-link:hover .cnav-link__dot {
        border-color: #93c5fd;
        background: #eff6ff;
    }

    .cnav-link:hover .cnav-link__dot-inner {
        background: #60a5fa;
    }

    .cnav-link__icon {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .72rem;
        transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    }

    .cnav-link:hover .cnav-link__icon {
        transform: scale(1.12) rotate(-4deg);
    }

    .cnav-link__icon.is-blue   { background: #dbeafe; color: #2563eb; }
    .cnav-link__icon.is-indigo { background: #e0e7ff; color: #4f46e5; }
    .cnav-link__icon.is-amber  { background: #fef3c7; color: #d97706; }
    .cnav-link__icon.is-purple { background: #ede9fe; color: #7c3aed; }
    .cnav-link__icon.is-teal   { background: #ccfbf1; color: #0f766e; }
    .cnav-link__icon.is-green  { background: #dcfce7; color: #16a34a; }
    .cnav-link__icon.is-yellow { background: #fef9c3; color: #ca8a04; }
    .cnav-link__icon.is-rose   { background: #ffe4e6; color: #e11d48; }

    .cnav-link__label {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cnav-link__arrow {
        font-size: .6rem;
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity .18s ease, transform .18s ease;
        color: #93c5fd;
    }

    .cnav-link:hover .cnav-link__arrow,
    .cnav-link.activo .cnav-link__arrow {
        opacity: 1;
        transform: translateX(0);
    }

    .cnav-link.activo {
        color: #1e40af;
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        box-shadow: inset 0 0 0 1px rgba(96,165,250,.34), 0 8px 18px rgba(37,99,235,.12);
        transform: translateX(5px);
    }

    .cnav-link.activo .cnav-link__dot {
        width: 18px;
        height: 18px;
        left: -2.1rem;
        border-color: #2563eb;
        background: #2563eb;
        box-shadow: 0 0 0 4px rgba(37,99,235,.15), 0 0 14px rgba(37,99,235,.35);
    }

    .cnav-link.activo .cnav-link__dot-inner {
        width: 6px;
        height: 6px;
        background: #fff;
        transform: scale(1);
    }

    .cnav-link.activo .cnav-link__icon {
        box-shadow: 0 4px 14px rgba(0,0,0,.12);
        transform: scale(1.08);
    }

    .cnav-progress-bar {
        margin: .7rem .65rem 0 .55rem;
        height: 4px;
        border-radius: 999px;
        background: #e2e8f0;
        overflow: hidden;
    }

    .cnav-progress-bar__fill {
        height: 100%;
        width: 0%;
        border-radius: 999px;
        background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
        transition: width .25s ease;
    }

    .course-card-section {
        background: #fff;
        border: 1px solid rgba(226,232,240,.9);
        border-radius: 26px;
        overflow: hidden;
        box-shadow: var(--ind-shadow-soft);
        scroll-margin-top: calc(var(--sticky-top) + 12px);
    }

    .course-card-section + .course-card-section {
        margin-top: 1rem;
    }

    .course-card-section__head {
        display: flex;
        align-items: center;
        gap: .82rem;
        padding: 1rem 1.2rem;
        border-bottom: 1px solid rgba(226,232,240,.78);
        background: linear-gradient(180deg, rgba(248,250,252,.94) 0%, rgba(255,255,255,.95) 100%);
    }

    .course-card-section__icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .course-card-section__icon.is-blue   { background: #dbeafe; color: #2563eb; }
    .course-card-section__icon.is-indigo { background: #e0e7ff; color: #4f46e5; }
    .course-card-section__icon.is-amber  { background: #fef3c7; color: #d97706; }
    .course-card-section__icon.is-purple { background: #ede9fe; color: #7c3aed; }
    .course-card-section__icon.is-teal   { background: #ccfbf1; color: #0f766e; }
    .course-card-section__icon.is-green  { background: #dcfce7; color: #16a34a; }
    .course-card-section__icon.is-yellow { background: #fef9c3; color: #ca8a04; }
    .course-card-section__icon.is-rose   { background: #ffe4e6; color: #e11d48; }

    .course-card-section__title {
        margin: 0;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 900;
        letter-spacing: -.02em;
    }

    .course-card-section__tag {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: .35rem .6rem;
        border-radius: 999px;
        background: #f8fafc;
        color: #64748b;
        font-size: .68rem;
        font-weight: 900;
        border: 1px solid #e2e8f0;
    }

    .course-card-section__body {
        padding: 1.35rem 1.2rem 1.45rem;
    }

    .contenido-curso p {
        margin-bottom: .75em;
        line-height: 1.8;
        color: #475569;
    }

    .contenido-curso ul {
        list-style: disc;
        padding-left: 1.5em;
        margin-bottom: .75em;
    }

    .contenido-curso ol {
        list-style: decimal;
        padding-left: 1.5em;
        margin-bottom: .75em;
    }

    .contenido-curso li {
        margin-bottom: .3em;
        line-height: 1.7;
        color: #475569;
    }

    .contenido-curso strong {
        font-weight: 800;
        color: #111827;
    }

    .contenido-curso em {
        font-style: italic;
    }

    .contenido-curso a {
        color: #2563eb;
        text-decoration: underline;
    }

    .contenido-curso a:hover {
        color: #1e40af;
    }

    .contenido-curso h1,
    .contenido-curso h2,
    .contenido-curso h3 {
        font-weight: 800;
        color: #111827;
        margin: 1.25em 0 .5em;
        line-height: 1.4;
    }

    .contenido-curso h1 { font-size: 1.2em; }
    .contenido-curso h2 { font-size: 1.1em; }
    .contenido-curso h3 { font-size: 1em; }

    .contenido-curso br + br { display: none; }
    .contenido-curso p:empty { display: none; }

    .teacher-box {
        display: grid;
        grid-template-columns: 90px minmax(0,1fr);
        gap: 1rem;
        align-items: start;
    }

    .teacher-box--extra {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid #e5e7eb;
    }

    .teacher-box img {
        width: 90px;
        height: 90px;
        object-fit: cover;
        border-radius: 20px;
        background: #e2e8f0;
        box-shadow: 0 12px 26px rgba(15,23,42,.10);
    }

    .teacher-box h3 {
        margin: 0 0 .25rem;
        color: #0f172a;
        font-size: 1.02rem;
        font-weight: 900;
    }

    .teacher-box p {
        margin: 0;
        color: #475569;
        line-height: 1.8;
    }

    .teacher-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        min-height: 28px;
        padding: .35rem .7rem;
        border-radius: 999px;
        font-size: .7rem;
        font-weight: 900;
        background: #ecfeff;
        color: #0f766e;
        border: 1px solid #a5f3fc;
        margin-bottom: .55rem;
    }

    .audience-banner {
        display: flex;
        gap: .8rem;
        padding: 1rem;
        border-radius: 20px;
        border: 1px solid #bfdbfe;
        background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
    }

    .audience-banner__icon {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: #2563eb;
        color: #fff;
    }

    .audience-banner__text {
        color: #1e3a8a;
        line-height: 1.8;
    }

    .audience-profile {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e5e7eb;
    }

    .audience-profile__title {
        margin: 0 0 .55rem;
        font-size: .68rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: #94a3b8;
    }

    .course-form-sticky {
        position: relative;
    }

    .course-form-card {
        background: #fff;
        border: 1px solid rgba(226,232,240,.92);
        border-radius: 26px;
        overflow: hidden;
        box-shadow: 0 24px 60px rgba(15,23,42,.12);
    }

    .course-form-card__head {
        position: relative;
        overflow: hidden;
        padding: 1.2rem;
        background: linear-gradient(135deg, #0b132a 0%, #12398b 48%, #2563eb 100%);
    }

    .course-form-card__head::after {
        content: "";
        position: absolute;
        top: -22px;
        right: -22px;
        width: 94px;
        height: 94px;
        border-radius: 999px;
        background: rgba(255,255,255,.08);
    }

    .course-form-card__kicker {
        position: relative;
        z-index: 2;
        margin: 0 0 .3rem;
        color: #bfdbfe;
        font-size: .68rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .course-form-card__title {
        position: relative;
        z-index: 2;
        margin: 0 0 .25rem;
        color: #fff;
        font-size: 1.42rem;
        line-height: 1.03;
        font-weight: 900;
    }

    .course-form-card__sub {
        position: relative;
        z-index: 2;
        margin: 0;
        color: #dbeafe;
        font-size: .79rem;
        line-height: 1.7;
    }

    .course-form-card__alert {
        display: flex;
        align-items: flex-start;
        gap: .55rem;
        padding: .82rem 1rem;
        background: #fffbeb;
        border-bottom: 1px solid #fde68a;
        color: #92400e;
        font-size: .76rem;
        line-height: 1.6;
    }

    .course-form {
        padding: 1rem;
    }

    .course-field {
        margin-bottom: .78rem;
    }

    .course-field label {
        display: block;
        margin-bottom: .35rem;
        color: #94a3b8;
        font-size: .64rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .course-field label span {
        color: #235fe7;
    }

    .course-field input {
        width: 100%;
        min-height: 46px;
        border: 1px solid #e2e8f0;
        border-radius: 15px;
        padding: .84rem .95rem;
        font-size: .92rem;
        color: #0f172a;
        background: #f8fafc;
        outline: none;
        transition: all .18s ease;
    }

    .course-field input:focus {
        background: #fff;
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96,165,250,.18);
    }

    .checkbox-group--modern {
        display: grid;
        gap: .75rem;
    }

    .grupo-card {
        position: relative;
        display: grid;
        grid-template-columns: 22px minmax(0,1fr);
        align-items: start;
        gap: .85rem;
        padding: 1rem;
        border: 1px solid #dbe4f0;
        border-radius: 20px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: 0 10px 24px rgba(15,23,42,.05);
        cursor: pointer;
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
        overflow: hidden;
    }

    .grupo-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: linear-gradient(180deg, #93c5fd 0%, #dbeafe 100%);
        opacity: .85;
        transition: background .2s ease, opacity .2s ease;
    }

    .grupo-card:hover {
        transform: translateY(-2px);
        border-color: #93c5fd;
        box-shadow: 0 16px 30px rgba(37,99,235,.08);
        background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    }

    .grupo-card__input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .grupo-card__check {
        width: 22px;
        height: 22px;
        margin-top: .2rem;
        margin-right: .2rem;
        border-radius: 999px;
        border: 2px solid #cbd5e1;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .22s ease;
        box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
        float:left;
    }

    .grupo-card__check-inner {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: transparent;
        transform: scale(.4);
        transition: all .22s ease;
    }

    .grupo-card__body {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .grupo-card__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: .55rem;
    }

    .grupo-card__badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .38rem .65rem;
        border-radius: 999px;
        background: #eef6ff;
        color: #2563eb;
        font-size: .66rem;
        font-weight: 900;
        letter-spacing: .02em;
        border: 1px solid #cfe2ff;
    }

    .grupo-card__title {
        display: block;
        color: #0f172a;
        font-size: .9rem;
        font-weight: 900;
        line-height: 1.45;
        letter-spacing: -.01em;
    }

    .grupo-card__arrow {
        color: #60a5fa;
        font-weight: 900;
    }

    .grupo-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: .55rem;
    }

    .grupo-card__meta-item {
        display: inline-flex;
        align-items: center;
        gap: .38rem;
        padding: .42rem .62rem;
        border-radius: 999px;
        background: #f8fafc;
        color: #64748b;
        font-size: .72rem;
        font-weight: 700;
        border: 1px solid #e2e8f0;
    }

    .grupo-card.activo {
        border-color: #60a5fa;
        background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
        box-shadow: 0 18px 34px rgba(37,99,235,.12);
        transform: translateY(-1px);
    }

    .grupo-card.activo::before {
        background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%);
        opacity: 1;
    }

    .grupo-card.activo .grupo-card__check {
        border-color: #2563eb;
        background: #2563eb;
        box-shadow: 0 0 0 5px rgba(37,99,235,.12);
    }

    .grupo-card.activo .grupo-card__check-inner {
        background: #fff;
        transform: scale(1);
    }

    .grupo-card.activo .grupo-card__badge {
        background: #ffffff;
        color: #1d4ed8;
        border-color: rgba(147,197,253,.65);
    }

    .grupo-card.is-disabled {
        opacity: .58;
        cursor: not-allowed;
        filter: grayscale(.08);
        box-shadow: none;
    }

    .grupo-card.is-disabled:hover {
        transform: none;
        border-color: #dbe4f0;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: none;
    }

    .grupo-card.is-disabled::before {
        background: linear-gradient(180deg, #cbd5e1 0%, #e2e8f0 100%);
    }

    .grupo-card__ended {
        display: inline-flex;
        align-items: center;
        gap: .38rem;
        margin-top: .65rem;
        padding: .38rem .62rem;
        border-radius: 999px;
        background: #fef2f2;
        color: #dc2626;
        font-size: .68rem;
        font-weight: 800;
        border: 1px solid #fecaca;
    }

    .empty-groups {
        background: #f8fafc;
        border: 1px dashed #e2e8f0;
        border-radius: 16px;
        padding: 1rem;
        text-align: center;
    }

    .empty-groups i {
        font-size: 1.45rem;
        color: #cbd5e1;
    }

    .empty-groups p {
        margin: .45rem 0 0;
        color: #94a3b8;
        font-size: .78rem;
        line-height: 1.6;
    }

    .course-contact-card {
        margin-top: .8rem;
        padding: 1rem;
        text-align: center;
        background: #fff;
        border: 1px solid rgba(226,232,240,.92);
        border-radius: 22px;
        box-shadow: var(--ind-shadow-soft);
    }

    .course-contact-card p {
        margin: 0 0 .45rem;
        color: #94a3b8;
        font-size: .76rem;
    }

    .course-contact-card a {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        color: #2563eb;
        text-decoration: none;
        font-size: .89rem;
        font-weight: 900;
    }

    .course-empty {
        max-width: 940px;
        margin: 2.5rem auto 4rem;
        padding: 2.2rem;
        text-align: center;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 30px;
        box-shadow: var(--ind-shadow);
    }

    .course-empty__icon {
        width: 78px;
        height: 78px;
        margin: 0 auto 1rem;
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg,#eff6ff,#dbeafe);
        color: #2563eb;
        font-size: 1.6rem;
        box-shadow: 0 14px 26px rgba(37,99,235,.12);
    }

    .course-empty h1 {
        margin: 0 0 .7rem;
        color: #0f172a;
        font-size: 2rem;
        font-weight: 900;
    }

    .course-empty p {
        margin: 0 0 1.3rem;
        color: #64748b;
        line-height: 1.8;
    }

    .course-mobile-cta {
        display: none !important;
    }

    .course-modal {
        position: fixed;
        inset: 0;
        z-index: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: rgba(15,23,42,.62);
        backdrop-filter: blur(4px);
    }

    .course-modal__box {
        width: min(100%, 440px);
        padding: 1.8rem;
        text-align: center;
        background: #fff;
        border-radius: 30px;
        box-shadow: 0 30px 70px rgba(15,23,42,.25);
    }

    .course-modal__icon {
        width: 68px;
        height: 68px;
        margin: 0 auto 1rem;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #dcfce7;
        color: #16a34a;
    }

    @media (max-width: 1365px) {
        .course-layout {
            grid-template-columns: 220px minmax(0,1fr) 330px;
        }
    }

    @media (max-width: 1180px) {
        .course-layout {
            grid-template-columns: 205px minmax(0,1fr) 310px;
        }

        .cnav-link__label {
            font-size: .76rem;
        }

        .cnav-link__icon {
            width: 26px;
            height: 26px;
            font-size: .66rem;
        }
    }

    @media (max-width: 1023px) {
        .course-hero__grid {
            grid-template-columns: 1fr;
            gap: 1.6rem;
        }

        .course-layout {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .sticky-shell {
            position: static !important;
            top: auto !important;
            width: auto !important;
        }

        .course-nav-wrap {
            display: none !important;
        }

        .course-content {
            order: 1;
        }

        .course-form-wrap {
            order: 2;
            margin-top: .25rem;
        }

        .course-form-sticky,
        .course-nav {
            position: static;
        }

        .course-mobile-cta {
            display: none !important;
        }

        body {
            padding-bottom: 0;
        }
    }

    @media (max-width: 768px) {
        .course-shell {
            padding: 0 1rem;
        }

        .course-hero__inner {
            padding: 4rem 0 2.8rem;
        }

        .course-hero__image {
            min-height: 245px;
        }

        .teacher-box {
            grid-template-columns: 1fr;
        }

        .course-title {
            font-size: 2.15rem;
        }

        .course-form-card__title {
            font-size: 1.26rem;
        }

        .grupo-card {
            grid-template-columns: 1fr;
            gap: .8rem;
        }

        .grupo-card__check {
            margin-top: 0;
        }
    }
    .course-form-legal {
        margin: .35rem 0 1rem;
        padding: .9rem 1rem;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #64748b;
        font-size: .78rem;
        line-height: 1.7;
    }

    .course-form-legal a {
        color: #2563eb;
        font-weight: 800;
        text-decoration: none;
    }

    .course-form-legal a:hover {
        text-decoration: underline;
    }

    .course-form-legal-check {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        margin: .4rem 0 1rem;
        padding: .9rem 1rem;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        font-size: .78rem;
        line-height: 1.6;
        cursor: pointer;
    }

    .course-form-legal-check input {
        margin-top: .2rem;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .course-form-legal-check a {
        color: #2563eb;
        font-weight: 800;
        text-decoration: none;
    }

    .course-form-legal-check a:hover {
        text-decoration: underline;
    }