/* ==========================================================
   HOME CONTENT
========================================================== */

.main-shell {

    display: flex;

    flex-direction: column;

    gap: 14px;
    font-family: "Nunito", sans-serif;

}

/* ==========================================================
   HOME · PORTADA RETRO
========================================================== */

.main-shell.home-shell {
    --home-border: rgba(88, 123, 174, .28);
    --home-panel: rgba(4, 12, 23, .94);
    gap: 10px;
    width: 100%;
    max-width: 1450px;
    margin-inline: auto;
    color: #f4f7fb;
}

.home-hero,
.home-about,
.home-metrics {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--home-border);
    border-radius: 15px;
    background:
        radial-gradient(circle at 72% 45%, rgba(37, 104, 255, .08), transparent 36%),
        linear-gradient(145deg, rgba(3, 10, 20, .98), rgba(4, 13, 25, .96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 14px 34px rgba(0, 0, 0, .12);
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(400px, 1.1fr);
    align-items: stretch;
    min-height: clamp(340px, 27vw, 425px);
    isolation: isolate;
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(52, 111, 190, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52, 111, 190, .13) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: .42;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 100%);
    mask-image: linear-gradient(90deg, transparent, #000 24%, #000 100%);
}

.home-hero::after {
    content: "";
    position: absolute;
    top: 28px;
    right: 24px;
    z-index: -1;
    width: 180px;
    height: 132px;
    background-image: radial-gradient(circle, rgba(47, 124, 255, .78) 1.4px, transparent 1.6px);
    background-size: 21px 21px;
    opacity: .55;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, transparent 74%);
    mask-image: radial-gradient(ellipse at center, #000 28%, transparent 74%);
}

.home-hero-copy {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 34px 18px 34px 30px;
}

.home-kicker {
    margin: 0;
    color: #2f8aff;
    font-family: "Nunito", sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 1.35px;
    text-transform: uppercase;
}

.home-kicker-rule {
    width: 27px;
    height: 2px;
    margin: 13px 0 16px;
    border-radius: 999px;
    background: #2f7cff;
    box-shadow: 0 0 12px rgba(47, 124, 255, .58);
}

.home-hero-title {
    margin: 0;
    color: #f7f8fc;
    font-family: "Nunito", sans-serif;
    font-size: clamp(2.9rem, 3.9vw, 4.75rem);
    font-weight: 800;
    line-height: .94;
    letter-spacing: -.052em;
    text-wrap: balance;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .36);
}

.home-hero-title span {
    display: inline-block;
    color: #2478ff;
    white-space: nowrap;
}

.home-hero-text {
    margin: 20px 0 0;
    color: #aeb7c7;
    font-size: clamp(.86rem, 1.05vw, 1.03rem);
    font-weight: 500;
    line-height: 1.58;
}

.home-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.home-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.home-action i {
    font-size: 13px;
    transition: transform .2s ease;
}

.home-action:hover,
.home-action:focus-visible {
    transform: translateY(-2px);
}

.home-action:hover i,
.home-action:focus-visible i {
    transform: translateX(3px);
}

.home-action--primary {
    color: #fff;
    background: linear-gradient(135deg, #2f8aff, #1265f2);
    box-shadow: 0 8px 24px rgba(24, 103, 242, .28), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.home-action--primary:hover,
.home-action--primary:focus-visible {
    color: #fff;
    box-shadow: 0 11px 30px rgba(24, 103, 242, .38), inset 0 1px 0 rgba(255, 255, 255, .24);
}

.home-action--secondary {
    color: #e7edf7;
    border-color: rgba(116, 144, 182, .25);
    background: rgba(6, 15, 28, .7);
}

.home-action--secondary:hover,
.home-action--secondary:focus-visible {
    color: #fff;
    border-color: rgba(47, 124, 255, .5);
    background: rgba(12, 27, 49, .88);
}

.home-hero-art {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 8px 18px 4px 0;
}

.home-hero-art::before {
    content: "";
    position: absolute;
    right: 3%;
    bottom: -33%;
    width: 108%;
    height: 72%;
    transform: perspective(420px) rotateX(64deg);
    transform-origin: center bottom;
    background-image:
        linear-gradient(rgba(35, 104, 208, .17) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35, 104, 208, .17) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .58;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
    pointer-events: none;
}

.home-machine-glow {
    position: absolute;
    inset: 16% 8% 8% 2%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 48% 48%, rgba(50, 112, 255, .18), transparent 48%),
        radial-gradient(circle at 70% 34%, rgba(174, 84, 255, .13), transparent 34%);
    filter: blur(24px);
    opacity: .75;
    animation: homeGlowPulse 6.5s ease-in-out infinite;
    pointer-events: none;
}

.home-machine-stage {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    animation: homeMachineFloat 7s ease-in-out infinite;
    will-change: transform;
}

.home-machine-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: calc(100% - 4px);
    max-height: 410px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 28px 28px rgba(0, 0, 0, .5));
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s ease;
}

.home-hero-art:hover .home-machine-image {
    transform: scale(1.018) rotate(.25deg);
    filter: drop-shadow(0 32px 36px rgba(0, 0, 0, .56)) drop-shadow(0 0 18px rgba(52, 108, 255, .12));
}

.home-about {
    display: grid;
    grid-template-columns: 1.08fr 1fr 1fr;
    min-height: 200px;
    padding: 24px 0;
}

.home-about-intro,
.home-path {
    min-width: 0;
    padding: 0 24px;
}

.home-about-intro h2 {
    margin: 13px 0 10px;
    color: #f2f5fa;
    font-size: clamp(1rem, 1.32vw, 1.28rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.025em;
}

.home-about-intro h2 span {
    color: #2f7cff;
}

.home-about-intro > p:last-child,
.home-path > p {
    margin: 0;
    color: #929cad;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.52;
}

.home-path {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px dashed rgba(91, 118, 157, .25);
}

.home-path-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

.home-path-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 20px;
    background:
        linear-gradient(rgba(53, 116, 196, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(53, 116, 196, .08) 1px, transparent 1px),
        rgba(5, 15, 28, .78);
    background-size: 8px 8px;
    box-shadow: inset 0 0 18px rgba(47, 124, 255, .05);
}

.home-path-number {
    font-family: "Nunito", sans-serif;
    font-size: 17px;
    line-height: 1;
}

.home-path-label {
    font-family: "Nunito", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
}

.home-path h3 {
    margin: 14px 0 9px 60px;
    color: #f1f4f9;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.home-path > p {
    max-width: 260px;
    min-height: 53px;
}

.home-path > a {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: 14px;
    font-size: 10.5px;
    font-weight: 700;
    transition: gap .2s ease, filter .2s ease;
}

.home-path > a:hover,
.home-path > a:focus-visible {
    gap: 12px;
    filter: brightness(1.2);
}

.home-path--blue,
.home-path--blue > a {
    color: #2f8aff;
}

.home-path--green,
.home-path--green > a {
    color: #20d67b;
}

.home-path--blue h3,
.home-path--green h3,
.home-path--blue > p,
.home-path--green > p {
    color: revert;
}

.home-path--blue h3,
.home-path--green h3 {
    color: #f1f4f9;
}

.home-path--blue > p,
.home-path--green > p {
    color: #929cad;
}

.home-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 74px;
    padding: 10px 0;
}

.home-metric {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 0 22px;
}

.home-metric + .home-metric {
    border-left: 1px solid rgba(91, 118, 157, .23);
}

.home-metric-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid currentColor;
    border-radius: 7px;
    font-size: 15px;
    background: rgba(8, 16, 29, .86);
}

.home-metric > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.home-metric strong {
    color: #f4f7fb;
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.home-metric span:last-child {
    color: #7f899a;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .45px;
    line-height: 1.2;
    text-transform: uppercase;
}

.home-metric--violet { color: #bb55ff; }
.home-metric--green { color: #20d67b; }
.home-metric--blue { color: #2f7cff; }
.home-metric--amber { color: #f2c319; }

@keyframes homeMachineFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -7px, 0); }
}

@keyframes homeGlowPulse {
    0%, 100% { opacity: .56; transform: scale(.98); }
    50% { opacity: .88; transform: scale(1.04); }
}

@media (max-width: 1180px) and (min-width: 961px) {
    .home-hero {
        grid-template-columns: minmax(270px, .9fr) minmax(320px, 1.1fr);
        min-height: 330px;
    }

    .home-hero-copy {
        padding-left: 24px;
    }

    .home-hero-title {
        font-size: clamp(2.4rem, 4vw, 3.3rem);
    }

    .home-about-intro,
    .home-path {
        padding-right: 17px;
        padding-left: 17px;
    }

    .home-path h3 {
        margin-left: 0;
    }

    .home-metric {
        padding-right: 14px;
        padding-left: 14px;
    }
}

/* Aprovecha la altura extra de monitores grandes sin alterar laptops. */
@media (min-width: 1500px) and (min-height: 850px) {
    .main-shell.home-shell {
        min-height: calc(100vh - 70px);
        justify-content: center;
    }

    .home-hero {
        flex: 1 1 clamp(425px, 49vh, 535px);
        min-height: clamp(425px, 49vh, 535px);
        max-height: 535px;
    }

    .home-hero-copy {
        padding-top: clamp(34px, 4.5vh, 52px);
        padding-bottom: clamp(34px, 4.5vh, 52px);
    }

    .home-machine-image {
        max-height: clamp(410px, 47vh, 510px);
    }

    .home-about {
        min-height: clamp(200px, 24vh, 270px);
    }

    .home-metrics {
        min-height: clamp(74px, 8vh, 88px);
    }

}

/* En pantallas ultrawide, evita que el centrado abra un vacío junto al sidebar. */
@media (min-width: 1800px) {
    .main-shell.home-shell {
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 800px) {
    .home-about {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: 20px;
    }

    .home-about-intro {
        grid-column: 1 / -1;
        padding-bottom: 20px;
    }

    .home-about-intro h2 br {
        display: none;
    }

    .home-about-intro > p:last-child {
        max-width: 690px;
    }

    .home-path {
        padding-top: 20px;
        border-top: 1px dashed rgba(91, 118, 157, .25);
    }

    .home-path--blue {
        border-left: 0;
    }

    .home-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-metric:nth-child(3) {
        border-left: 0;
    }

    .home-metric:nth-child(n + 3) {
        padding-top: 12px;
        border-top: 1px solid rgba(91, 118, 157, .23);
    }

    .home-metric {
        min-height: 56px;
    }
}

@media (max-width: 700px) {
    .home-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .home-hero-copy {
        padding: 28px 20px 10px;
    }

    .home-hero-title {
        font-size: clamp(2.45rem, 11.3vw, 3.8rem);
    }

    .home-hero-art {
        min-height: 270px;
        padding: 0 8px 4px;
    }

    .home-machine-image {
        width: min(100%, 520px);
        height: auto;
        max-height: 300px;
    }

    .home-hero::before {
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 100%);
        mask-image: linear-gradient(180deg, transparent, #000 40%, #000 100%);
    }

    .home-hero::after {
        top: auto;
        right: 5px;
        bottom: 110px;
    }
}

@media (max-width: 500px) {
    .main-shell.home-shell {
        gap: 8px;
    }

    .home-hero,
    .home-about,
    .home-metrics {
        border-radius: 12px;
    }

    .home-hero-copy {
        padding: 23px 14px 6px;
    }

    .home-kicker {
        font-size: 9px;
        letter-spacing: 1.05px;
    }

    .home-kicker-rule {
        margin: 10px 0 13px;
    }

    .home-hero-title {
        font-size: clamp(2.18rem, 10.7vw, 3.05rem);
    }

    .home-hero-text {
        margin-top: 15px;
        font-size: 12.5px;
    }

    .home-copy-break {
        display: none;
    }

    .home-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
        margin-top: 16px;
    }

    .home-action {
        min-width: 0;
        min-height: 39px;
        padding: 0 8px;
        gap: 6px;
        font-size: 10.5px;
    }

    .home-hero-art {
        min-height: 225px;
    }

    .home-machine-image {
        max-height: 246px;
    }

    .home-about {
        padding: 17px 0 0;
    }

    .home-about-intro,
    .home-path {
        padding-right: 13px;
        padding-left: 13px;
    }

    .home-about-intro {
        padding-bottom: 17px;
    }

    .home-about-intro h2 {
        margin-top: 10px;
        font-size: 15px;
    }

    .home-about-intro > p:last-child,
    .home-path > p {
        font-size: 10.5px;
    }

    .home-path {
        justify-content: flex-start;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .home-path-heading {
        flex-wrap: wrap;
        gap: 6px;
    }

    .home-path-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 17px;
    }

    .home-path-number {
        font-size: 14px;
    }

    .home-path-label {
        font-size: 7.5px;
    }

    .home-path h3 {
        min-height: 34px;
        margin: 10px 0 7px;
        font-size: 12.5px;
    }

    .home-path > p {
        min-height: 0;
    }

    .home-path > a {
        margin-top: auto;
        padding-top: 12px;
        font-size: 9.5px;
    }

    .home-metrics {
        padding: 0;
    }

    .home-metric {
        gap: 9px;
        min-height: 66px;
        padding: 9px 11px;
    }

    .home-metric:nth-child(n + 3) {
        padding-top: 9px;
    }

    .home-metric-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 13px;
    }

    .home-metric strong {
        font-size: 14px;
    }

    .home-metric span:last-child {
        font-size: 7px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .home-machine-stage,
    .home-machine-glow {
        animation: none;
    }

    .home-machine-image,
    .home-action,
    .home-action i,
    .home-path > a {
        transition: none;
    }
}

/* Contenido definitivo de Sobre mí */
.about-profile,
.about-toolbox,
.about-education,
.about-contact {
    border: 1px solid rgba(75, 111, 160, .25);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(4, 12, 23, .98), rgba(5, 15, 29, .95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 16px 40px rgba(0, 0, 0, .12);
}

.about-role {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -4px 0 14px;
    color: #d5deeb;
    font-size: 12px;
    font-weight: 800;
}

.about-role span {
    color: #67a2fa;
}

.about-profile {
    display: grid;
    grid-template-columns: minmax(330px, .85fr) minmax(480px, 1.15fr);
    gap: 36px;
    padding: 40px;
}

.about-profile-copy h2,
.about-education-main > h2,
.about-contact-copy h2 {
    margin: 13px 0 18px;
    color: #f3f6fb;
    font-size: clamp(1.8rem, 2.65vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.06;
}

.about-profile-copy h2 span {
    color: var(--about-blue);
}

.about-profile-copy > p:not(.about-kicker),
.about-contact-copy > p:not(.about-kicker) {
    margin: 0 0 13px;
    color: #8f9bad;
    font-size: 12px;
    line-height: 1.72;
}

.about-focus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.about-focus-grid article {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    align-content: start;
    gap: 13px;
    min-height: 172px;
    padding: 17px;
    overflow: hidden;
    border: 1px solid rgba(75, 111, 160, .2);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(8, 19, 35, .82), rgba(4, 12, 23, .74));
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.about-focus-grid article:hover {
    border-color: rgba(47, 124, 255, .45);
    box-shadow: 0 15px 28px rgba(0, 0, 0, .2);
    transform: translateY(-4px);
}

.about-focus-grid article > span {
    position: absolute;
    top: 10px;
    right: 12px;
    color: rgba(102, 145, 207, .2);
    font-size: 20px;
    font-weight: 800;
}

.about-focus-grid article > i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(47, 124, 255, .38);
    border-radius: 9px;
    background: rgba(47, 124, 255, .075);
    color: var(--about-blue);
    font-size: 17px;
}

.about-focus-grid article:nth-child(2) > i { color: var(--about-violet); border-color: rgba(168, 85, 247, .38); background: rgba(168, 85, 247, .075); }
.about-focus-grid article:nth-child(3) > i { color: var(--about-green); border-color: rgba(32, 214, 123, .38); background: rgba(32, 214, 123, .075); }
.about-focus-grid article:nth-child(4) > i { color: #f3c728; border-color: rgba(243, 199, 40, .38); background: rgba(243, 199, 40, .075); }
.about-focus-grid small { color: #568ece; font-size: 7px; font-weight: 800; letter-spacing: .8px; }
.about-focus-grid h3 { margin: 4px 0 0; color: #eaf0f8; font-size: 13px; font-weight: 800; }
.about-focus-grid p { grid-column: 1 / -1; margin: 1px 0 0; color: #8490a3; font-size: 10px; line-height: 1.55; }

.about-toolbox {
    padding: 34px 28px 28px;
}

.about-toolbox-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.about-toolbox-grid article {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px;
    border: 1px solid rgba(75, 111, 160, .2);
    border-radius: 9px;
    background: rgba(7, 17, 31, .62);
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}

.about-toolbox-grid article:hover {
    border-color: rgba(47, 124, 255, .48);
    background: rgba(10, 24, 44, .72);
    transform: translateY(-3px);
}

.about-toolbox-grid article > i {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    border-radius: 8px;
    background: rgba(47, 124, 255, .08);
    color: #4d95ff;
    font-size: 17px;
}

.about-toolbox-grid article:nth-child(2n) > i { color: var(--about-green); background: rgba(32, 214, 123, .07); }
.about-toolbox-grid article:nth-child(3n) > i { color: var(--about-violet); background: rgba(168, 85, 247, .07); }
.about-toolbox-grid article > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.about-toolbox-grid strong { color: #dfe7f2; font-size: 11px; }
.about-toolbox-grid span { color: #78859a; font-size: 8.5px; line-height: 1.35; }

.about-education {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 35px;
    padding: 38px;
}

.about-degree {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 18px;
    border: 1px solid rgba(47, 124, 255, .27);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(47, 124, 255, .08), rgba(6, 16, 30, .65));
}

.about-degree-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(47, 124, 255, .4);
    border-radius: 10px;
    color: #61a0ff;
    font-size: 21px;
    background: rgba(47, 124, 255, .08);
}

.about-degree small { color: #4e91ee; font-size: 7px; font-weight: 800; letter-spacing: .9px; }
.about-degree h3 { margin: 5px 0; color: #edf2f9; font-size: 14px; font-weight: 800; }
.about-degree p { margin: 0; color: #8290a4; font-size: 10px; }
.about-degree-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(32, 214, 123, .25); border-radius: 99px; color: #68c899; font-size: 8px; font-weight: 800; white-space: nowrap; }
.about-degree-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--about-green); box-shadow: 0 0 8px rgba(32, 214, 123, .65); }

.about-certifications {
    padding: 22px;
    border: 1px solid rgba(75, 111, 160, .2);
    border-radius: 11px;
    background: rgba(7, 17, 31, .55);
}

.about-certifications-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.about-certifications-heading > i { color: var(--about-violet); font-size: 24px; }
.about-certifications-heading h3 { margin: 6px 0 0; color: #e7edf6; font-size: 15px; font-weight: 800; }
.about-certifications ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.about-certifications li { display: flex; align-items: center; gap: 7px; min-height: 37px; padding: 7px 9px; border: 1px solid rgba(75, 111, 160, .16); border-radius: 7px; color: #929eaf; font-size: 9px; line-height: 1.3; }
.about-certifications li i { color: var(--about-green); }

.about-contact {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 36px;
    padding: 38px;
    overflow: hidden;
}

.about-contact::before {
    content: "@";
    position: absolute;
    z-index: -1;
    left: 32%;
    bottom: -70px;
    color: rgba(47, 124, 255, .025);
    font-size: 240px;
    font-weight: 800;
}

.about-contact-copy h2 { margin-bottom: 12px; }
.about-location { display: inline-flex; align-items: center; gap: 8px; margin-top: 11px; color: #8895a8; font-size: 10px; }
.about-location i { color: var(--about-blue); }
.about-contact-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-content: center; }
.about-contact-links > a { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; min-height: 78px; padding: 12px; border: 1px solid rgba(75, 111, 160, .22); border-radius: 10px; background: rgba(7, 17, 31, .65); transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.about-contact-links > a:hover { color: inherit; border-color: rgba(47, 124, 255, .48); background: rgba(10, 25, 46, .76); transform: translateY(-4px); }
.about-contact-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(47, 124, 255, .35); border-radius: 9px; color: #5b9cff; background: rgba(47, 124, 255, .08); font-size: 17px; }
.about-contact-links > a:nth-child(2) .about-contact-icon { color: #dce4ef; border-color: rgba(220, 228, 239, .25); background: rgba(220, 228, 239, .055); }
.about-contact-links > a:nth-child(3) .about-contact-icon { color: #ef66c5; border-color: rgba(239, 102, 197, .3); background: rgba(239, 102, 197, .06); }
.about-contact-links > a > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.about-contact-links small { color: #65738a; font-size: 6.5px; font-weight: 800; letter-spacing: .5px; }
.about-contact-links strong { color: #dbe4f0; font-size: 11px; }
.about-contact-links > a > i { color: #687991; font-size: 12px; }

@media (max-width: 1180px) {
    .about-profile { gap: 25px; padding: 32px; }
    .about-toolbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-education { gap: 24px; padding: 30px; }
    .about-contact { grid-template-columns: 1fr; padding: 30px; }
}

@media (max-width: 850px) {
    .about-profile { grid-template-columns: 1fr; }
    .about-education { grid-template-columns: 1fr; }
    .about-contact-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .about-profile, .about-toolbox, .about-education, .about-contact { border-radius: 12px; }
    .about-role { font-size: 10px; }
    .about-profile { gap: 20px; padding: 24px 15px; }
    .about-profile-copy h2, .about-education-main > h2, .about-contact-copy h2 { font-size: 1.65rem; }
    .about-profile-copy > p:not(.about-kicker), .about-contact-copy > p:not(.about-kicker) { font-size: 11px; }
    .about-focus-grid { gap: 7px; }
    .about-focus-grid article { grid-template-columns: 34px 1fr; min-height: 166px; padding: 12px; gap: 9px; }
    .about-focus-grid article > i { width: 33px; height: 33px; font-size: 14px; }
    .about-focus-grid h3 { font-size: 11px; }
    .about-focus-grid p { font-size: 8.5px; }
    .about-toolbox { padding: 24px 12px 12px; }
    .about-toolbox-grid { gap: 7px; }
    .about-toolbox-grid article { min-height: 64px; padding: 9px; gap: 8px; }
    .about-toolbox-grid article > i { width: 32px; height: 32px; flex-basis: 32px; font-size: 14px; }
    .about-toolbox-grid strong { font-size: 10px; }
    .about-toolbox-grid span { font-size: 7.5px; }
    .about-education { gap: 18px; padding: 24px 15px; }
    .about-degree { grid-template-columns: 40px 1fr; padding: 13px; gap: 10px; }
    .about-degree-icon { width: 38px; height: 38px; font-size: 17px; }
    .about-degree h3 { font-size: 12px; }
    .about-degree-status { grid-column: 2; justify-self: start; }
    .about-certifications { padding: 14px; }
    .about-certifications ul { grid-template-columns: 1fr; }
    .about-contact { gap: 20px; padding: 24px 15px; }
    .about-contact-links { grid-template-columns: 1fr; }
    .about-contact-links > a { min-height: 66px; }
}

.hero-panel,
.content-panel {

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .06);

    border-radius: 20px;

    background: linear-gradient(180deg, rgba(7, 13, 24, .96), rgba(4, 8, 16, .95));

    box-shadow: 0 0 0 1px rgba(255, 255, 255, .015) inset;

}

.hero-panel {

    display: grid;

    grid-template-columns: minmax(0, .98fr) minmax(320px, 1.02fr);

    gap: 8px;

    align-items: stretch;

    padding: 12px 20px 8px;

}

.hero-panel::before,
.hero-panel::after {

    content: "";

    position: absolute;

    border-radius: 999px;

    pointer-events: none;

    filter: blur(10px);

    opacity: .65;

}

.hero-panel::before {

    top: -90px;

    right: -70px;

    width: 220px;

    height: 220px;

    background: radial-gradient(circle, rgba(47, 124, 255, .18), transparent 70%);

}

.hero-panel::after {

    left: -90px;

    bottom: -100px;

    width: 240px;

    height: 240px;

    background: radial-gradient(circle, rgba(32, 214, 123, .08), transparent 70%);

}

.hero-copy,
.hero-visual,
.section-heading,
.empty-band,
.empty-grid {

    position: relative;

    z-index: 1;

}

.hero-copy {

    display: flex;

    flex-direction: column;
    justify-content: flex-start;
    padding: 14px 8px 0 10px;

}

.hero-content {

    display: flex;

    flex-direction: column;

    margin-top: 10px;

}

.hero-kicker,
.section-kicker {

    margin: 0;

    color: #6F7686;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.hero-kicker {

    color: #2F7CFF;

}

.hero-title {

    margin: 0 0 14px;

    color: #F4F7FB;

    font-size: clamp(2.6rem, 4.9vw, 5rem);

    font-weight: 800;

    line-height: .92;

    letter-spacing: -.055em;

}

.hero-title-line {

    display: block;

    white-space: nowrap;

}

.hero-title span {

    display: inline;

    color: #2F7CFF;

}

.hero-rule {

    display: block;

    width: 22px;

    height: 2px;

    margin: 8px 0 12px;

    border-radius: 999px;

    background: #2F7CFF;

    box-shadow: 0 0 18px rgba(47, 124, 255, .38);

}

.hero-text {

    max-width: 520px;

    margin: 0;

    color: #9AA5B5;

    font-size: 15px;

    line-height: 1.66;

}

.hero-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 12px;

    flex-wrap: wrap;

}

.hero-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 44px;

    padding: 0 18px;

    border-radius: 12px;

    border: 1px solid transparent;

    font-size: 14px;

    font-weight: 700;

    transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;

}

.hero-btn-mark {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 1ch;

    color: #DCE7FF;

    font-size: 12px;

    font-weight: 800;

    line-height: 1;

}

.hero-btn:hover {

    transform: translateY(-10px);

}

.hero-btn-primary {

    background: #2F7CFF;

    color: #F4F7FB;

    box-shadow: 0 10px 24px rgba(47, 124, 255, .24);

}

.hero-btn-secondary {

    background: rgba(255, 255, 255, .02);

    border-color: rgba(255, 255, 255, .08);

    color: #DCE7FF;

}

.hero-visual {

    display: flex;

    justify-content: flex-end;

    align-items: center;
    padding-top: 0;
    min-height: 420px;
    background:
        radial-gradient(circle at 62% 38%, rgba(47, 124, 255, .18), transparent 24%),
        radial-gradient(circle at 30% 72%, rgba(32, 214, 123, .05), transparent 26%),
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, .04), transparent 10%);

}

.hero-image {

    display: block;

    width: min(100%, 720px);

    height: auto;

    object-fit: contain;
    object-position: right center;

    margin-right: 14px;
    margin-bottom: 0;

    filter: drop-shadow(0 32px 62px rgba(0, 0, 0, .46));

}

.hero-visual::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, rgba(7, 13, 24, .12), rgba(7, 13, 24, .54) 58%, rgba(7, 13, 24, .1));

    pointer-events: none;

}

.content-panel {

    padding: 12px;

}

.dashboard-section {

    position: relative;

    overflow: hidden;

    padding: 12px;

    border: 1px solid rgba(255, 255, 255, .06);

    border-radius: 20px;

    background: linear-gradient(180deg, rgba(7, 13, 24, .96), rgba(4, 8, 16, .95));

    box-shadow: 0 0 0 1px rgba(255, 255, 255, .015) inset;

}

.dashboard-section + .dashboard-section {

    margin-top: 0;

}

.section-heading--split {

    gap: 12px;

}

.section-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #7E8898;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

}

.section-link i {

    color: #2F7CFF;

}

.section-link--static {

    color: #7E8898;

}

.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 12px;

}

.stat-card {

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, .06);

    border-radius: 16px;

    background: rgba(255, 255, 255, .02);

}

.stat-icon {

    display: grid;

    place-items: center;

    width: 38px;

    height: 38px;

    border-radius: 12px;

    font-size: 18px;

}

.stat-icon--violet {

    color: #b56cff;

    background: rgba(181, 108, 255, .12);

}

.stat-icon--green {

    color: #20D67B;

    background: rgba(32, 214, 123, .1);

}

.stat-icon--blue {

    color: #2F7CFF;

    background: rgba(47, 124, 255, .12);

}

.stat-icon--amber {

    color: #f6c351;

    background: rgba(246, 195, 81, .12);

}

.stat-value {

    margin: 0;

    color: #F4F7FB;

    font-size: 20px;

    font-weight: 800;

    line-height: 1;

}

.stat-label {

    margin: 0;

    color: #9AA5B5;

    font-size: 14px;

    line-height: 1.45;

}

.resource-grid,
.summary-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;

}

.summary-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.resource-card,
.summary-card {

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, .06);

    border-radius: 16px;

    background: rgba(255, 255, 255, .02);

}

.resource-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}

.resource-card-symbol {

    display: grid;

    place-items: center;

    width: 40px;

    height: 40px;

    border-radius: 12px;

    font-size: 18px;

}

.resource-card-symbol--violet {

    color: #b56cff;

    background: rgba(181, 108, 255, .12);

}

.resource-card-symbol--green {

    color: #20D67B;

    background: rgba(32, 214, 123, .1);

}

.resource-card-symbol--blue {

    color: #2F7CFF;

    background: rgba(47, 124, 255, .12);

}

.resource-badge {

    padding: 4px 10px;

    border-radius: 999px;

    background: rgba(32, 214, 123, .12);

    color: #20D67B;

    font-size: 12px;

    font-weight: 700;

}

.resource-badge--soft {

    background: rgba(47, 124, 255, .08);

    color: #7E8898;

}

.resource-card-title,
.summary-card-title {

    margin: 0;

    color: #F4F7FB;

    font-size: 15px;

    font-weight: 800;

}

.resource-card-text {

    margin: 0;

    color: #9AA5B5;

    font-size: 14px;

    line-height: 1.55;

}

.resource-card-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: auto;

    color: #7E8898;

    font-size: 12px;

}

.resource-card-meta span {

    padding: 5px 8px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .03);

    border: 1px solid rgba(255, 255, 255, .05);

}

.summary-card {

    min-height: 160px;

}

.summary-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin: 0;

    padding: 0;

    list-style: none;

    color: #9AA5B5;

    font-size: 14px;

}

.summary-list li {

    padding: 10px 12px;

    border-radius: 12px;

    background: rgba(255, 255, 255, .02);

    border: 1px solid rgba(255, 255, 255, .05);

}

.tech-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.tech-pill {

    padding: 8px 10px;

    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, .06);

    background: rgba(255, 255, 255, .03);

    color: #DCE7FF;

    font-size: 13px;

}

.section-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;

}

.section-kicker {

    display: inline-flex;

    align-items: center;

    gap: 8px;

}

.section-kicker i {

    color: #2F7CFF;

    font-size: 15px;

}

.empty-band {

    min-height: 116px;

    border-radius: 14px;

    border: 1px dashed rgba(255, 255, 255, .06);

    background:
        linear-gradient(90deg, rgba(47, 124, 255, .04), transparent 50%),
        rgba(255, 255, 255, .01);

}

.empty-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

}

.empty-tile {

    min-height: 122px;

    border-radius: 14px;

    border: 1px dashed rgba(255, 255, 255, .06);

    background:
        linear-gradient(180deg, rgba(255, 255, 255, .03), transparent),
        rgba(255, 255, 255, .01);

}

@media (max-width: 1280px) {

    .hero-panel {

        grid-template-columns: 1fr;

    }

    .hero-visual {

        order: -1;
        min-height: 320px;
        justify-content: center;
        align-items: center;
        padding-top: 0;

    }

    .empty-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}

@media (max-width: 960px) {

    .hero-panel,
    .content-panel {

        border-radius: 18px;

    }

    .hero-panel {

        padding: 10px 16px 8px;

    }

    .hero-title {

        font-size: clamp(2.2rem, 7.8vw, 3.2rem);

    }

    .hero-actions {

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;

    }

    .hero-btn {

        width: auto;
        min-height: 40px;
        padding: 0 10px;
        gap: 7px;
        font-size: 12px;
        text-align: center;

    }

    .hero-rule {

        margin: 6px 0 10px;

    }

    .hero-text {

        max-width: 100%;

    }

    .empty-grid {

        grid-template-columns: 1fr;

    }

    .stats-grid,
    .resource-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .summary-grid {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 640px) {

    .main-shell {

        gap: 12px;

    }

    .hero-panel,
    .content-panel {

        padding: 8px 10px 7px;

    }

    .hero-visual {

        min-height: 240px;

    }

    .hero-text {

        font-size: 13px;

    }

    .hero-image {

        width: min(100%, 380px);

        margin-right: 0;
        margin-bottom: 0;

    }

    .dashboard-section {

        padding: 10px;

        border-radius: 18px;

    }

    .stats-grid,
    .resource-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .resource-card,
    .summary-card {

        padding: 10px;

    }

    .stat-card {

        padding: 10px;

    }

    .resource-card-title,
    .summary-card-title {

        font-size: 14px;

    }

    .resource-card-text,
    .stat-label {

        font-size: 13px;

    }

    .resource-card-symbol,
    .stat-icon {

        width: 36px;
        height: 36px;

    }

    .empty-band,
    .empty-tile {

        border-radius: 12px;

    }

    .empty-band {

        min-height: 128px;

    }

    .empty-tile {

        min-height: 118px;

    }

}

/* ==========================================================
   PRACTICE WORKSPACE
========================================================== */
.practice-dashboard-layout {
    grid-template-columns: 300px minmax(0, 1fr);
}

.practice-dashboard-layout .dashboard-main {
    min-width: 0;
    padding: 18px 30px 24px 14px;
}

@media (min-width: 961px) and (max-width: 1280px) {
    .practice-dashboard-layout {
        grid-template-columns: 288px minmax(0, 1fr);
    }

    .practice-dashboard-layout .dashboard-main {
        padding-right: 22px;
        padding-left: 12px;
    }
}

.practice-workspace {
    width: 100%;
    margin: 0;
    color: #f4f7fb;
    font-family: "Nunito", sans-serif;
}

.practice-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.practice-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7e8898;
    font-size: 12px;
}

.practice-breadcrumb a {
    color: #aebbd0;
    text-decoration: none;
}

.practice-breadcrumb strong {
    color: #2f7cff;
    font-weight: 700;
}

.practice-top-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8f59eb;
}

.practice-code {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 4px;
    color: #dce7ff;
    font: 10px Consolas, monospace;
}

.practice-terminal-mark {
    padding: 4px 7px;
    border: 1px solid #7546d3;
    border-radius: 5px;
    color: #2f7cff;
    font: 14px Consolas, monospace;
}

.practice-top-lines {
    color: #9b4dff;
    font-size: 18px;
}

.practice-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    gap: 18px;
}

.practice-heading h1 {
    margin: 0;
    color: #f4f7fb;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: .02em;
}

.practice-heading h1::after {
    display: block;
    width: 42px;
    height: 2px;
    margin-top: 10px;
    border-radius: 99px;
    background: #974cff;
    content: "";
}

.practice-heading p {
    margin: 8px 0 0;
    color: #7582a1;
    font: 12px Consolas, monospace;
}

.practice-mode-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 138px;
    padding: 10px 12px;
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.practice-mode-badge > i {
    color: #26d7e8;
    font-size: 18px;
}

.practice-mode-badge span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.practice-mode-badge strong {
    color: #26d7e8;
    font-size: 12px;
}

.practice-mode-badge small {
    color: #8390aa;
    font-size: 10px;
}

.practice-body {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    gap: 9px;
}

.practice-progress-panel,
.practice-question-panel,
.practice-navigation {
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(10, 20, 35, .9), rgba(5, 13, 25, .96));
}

.practice-progress-panel {
    padding: 16px;
}

.practice-progress-heading > span,
.practice-question-index > span {
    display: block;
    color: #1fd1eb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
}

.practice-progress-heading strong {
    display: block;
    margin-top: 7px;
    color: #aab8d2;
    font: 700 21px Consolas, monospace;
}

.practice-progress-heading small {
    color: #8390aa;
    font-size: 10px;
}

.practice-progress-track {
    height: 4px;
    margin: 10px 0 18px;
    border-radius: 99px;
    background: #1b2940;
}

.practice-progress-track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #1ed4e6;
    transition: width .2s ease;
}

.practice-question-index {
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.practice-question-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 11px;
}

.practice-question-grid button {
    position: relative;
    min-height: 31px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    background: rgba(255, 255, 255, .015);
    color: #7886a1;
    font: 11px Consolas, monospace;
    cursor: pointer;
}

.practice-question-grid button.is-current {
    border-color: #2f7cff;
    background: #1350bc;
    color: #fff;
}

.practice-question-grid button.is-answered {
    border-color: #21d1dd;
    color: #d9fbff;
}

.practice-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 4px;
    margin-top: 18px;
    color: #8591a8;
    font-size: 9px;
}

.practice-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.practice-legend i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: #66748e;
}

.practice-legend i.is-answered { background: #19c6d6; }
.practice-legend i.is-current { background: #2f7cff; }
.practice-legend i.is-marked { background: #9b4dff; }

.practice-finish-side {
    width: 100%;
    margin-top: 19px;
    padding: 9px 5px;
    border: 1px solid #a63e55;
    border-radius: 4px;
    background: transparent;
    color: #ff6876;
    font: 11px "Nunito", sans-serif;
    cursor: pointer;
}

.practice-finish-side:hover {
    background: rgba(255, 70, 95, .08);
}

.practice-question-panel {
    min-width: 0;
    padding: 20px 18px 16px;
}

.practice-question {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.practice-question:not([hidden]) {
    display: block;
}

.practice-question-card,
.practice-question .question-card-heading {
    border-bottom: 0;
}

.practice-question .question-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(155, 77, 255, .55);
}

.practice-question .question-number {
    color: #a95cff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
}

.practice-question .question-type {
    color: #a95cff;
    font-size: 10px;
}

.practice-question .question-type i {
    margin-left: 5px;
    font-size: 13px;
}

.practice-question .question-text {
    margin: 29px 0 22px;
    color: #edf2fb;
    font-size: 18px;
    line-height: 1.45;
}

.practice-question .question-options {
    display: grid;
    gap: 11px;
}

.practice-question .practice-option {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) 20px;
    align-items: center;
    min-height: 54px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 7px;
    background: rgba(5, 14, 27, .45);
}

.practice-question .practice-option:has(input:checked) {
    border-color: #2f7cff;
    background: rgba(47, 124, 255, .1);
}

.practice-form--completed {
    display: none;
}

.practice-review {
    margin-top: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(10, 20, 35, .92), rgba(5, 13, 25, .98));
}

.practice-review-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.practice-review-heading h2 {
    margin: 5px 0 0;
    color: #f4f7fb;
    font-size: 22px;
}

.practice-review-heading > strong {
    color: #2f7cff;
    font: 700 22px Consolas, monospace;
}

.practice-review-list {
    display: grid;
    gap: 12px;
    margin-top: 15px;
}

.practice-review-card {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    background: rgba(4, 12, 23, .6);
}

.practice-review-card.is-correct {
    border-color: rgba(30, 211, 221, .38);
}

.practice-review-card.is-incorrect {
    border-color: rgba(255, 104, 118, .32);
}

.practice-review-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #a95cff;
    font-size: 10px;
    font-weight: 800;
}

.practice-review-card.is-correct .practice-review-card-heading strong {
    color: #26d7e8;
}

.practice-review-card.is-incorrect .practice-review-card-heading strong {
    color: #ff6876;
}

.practice-review-card h3 {
    margin: 13px 0;
    color: #edf2fb;
    font-size: 16px;
    line-height: 1.45;
}

.practice-review-options {
    display: grid;
    gap: 7px;
}

.practice-review-option {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 39px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 5px;
    color: #aebbd0;
    font-size: 12px;
}

.practice-review-option .question-option-marker {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    color: #dce7ff;
    font: 11px Consolas, monospace;
}

.practice-review-option small {
    color: #26d7e8;
    font-size: 10px;
}

.practice-review-option.is-correct-option {
    border-color: rgba(30, 211, 221, .5);
    background: rgba(30, 211, 221, .08);
    color: #e7fdff;
}

.practice-review-option.is-correct-option .question-option-marker {
    background: #159fae;
}

.practice-review-option.is-selected-wrong {
    border-color: rgba(255, 104, 118, .42);
    background: rgba(255, 104, 118, .08);
}

.practice-review-option.is-selected-wrong small {
    color: #ff8791;
}

.practice-review-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    color: #8794ad;
    font-size: 11px;
}

.practice-review-pagination a {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 1px solid rgba(47, 124, 255, .35);
    border-radius: 5px;
    color: #9ec5ff;
    text-decoration: none;
}

.practice-review-pagination a:hover {
    border-color: #2f7cff;
    background: rgba(47, 124, 255, .12);
}

.practice-question-grid {
    max-height: 176px;
    overflow-y: auto;
    align-content: start;
    padding-right: 3px;
    scrollbar-color: #2f7cff #101b2d;
    scrollbar-width: thin;
}

.practice-question-grid::-webkit-scrollbar {
    width: 5px;
}

.practice-question-grid::-webkit-scrollbar-track {
    background: #101b2d;
}

.practice-question-grid::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #2f7cff;
}

.practice-question .practice-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.practice-question .question-option-marker {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    color: #dce7ff;
    font: 12px Consolas, monospace;
}

.practice-question .practice-option:has(input:checked) .question-option-marker {
    background: #135bc9;
}

.practice-question .question-option-text {
    padding-left: 10px;
    color: #b8c3d6;
    font-size: 14px;
}

.question-option-check {
    display: none;
    color: #fff;
}

.practice-question .practice-option:has(input:checked) .question-option-check {
    display: block;
    place-self: center end;
    width: 19px;
    height: 19px;
    padding: 2px;
    border-radius: 50%;
    background: #2f7cff;
}

.practice-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 9px;
    padding: 11px;
}

.practice-navigation > span {
    color: #71809d;
    font-size: 10px;
}

.practice-nav-button {
    margin: 0;
    padding: 8px 13px;
    border-radius: 5px;
}

.practice-nav-button--next {
    justify-self: end;
    background: #2f7cff;
    color: #fff;
}

.practice-nav-button--next:hover {
    background: #4b8eff;
}

@media (max-width: 960px) {
    .practice-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .practice-dashboard-layout .dashboard-main {
        padding: 80px 12px 20px;
    }
}

@media (max-width: 680px) {
    .practice-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 12px 0;
    }

    .practice-mode-badge {
        border-left: 0;
        padding: 0;
    }

    .practice-body {
        grid-template-columns: 1fr;
    }

    .practice-progress-panel {
        order: 2;
    }

    .practice-question-panel {
        order: 1;
    }

    .practice-navigation {
        grid-template-columns: 1fr 1fr;
    }

    .practice-navigation > span {
        display: none;
    }
}

/* Pantalla de configuración del simulador */
.practice-command-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: center;
    gap: 24px;
    min-height: 190px;
    margin-bottom: 14px;
    padding: 8px 8px 0;
}

.practice-command-header .public-page-header {
    margin-bottom: 0;
}

.practice-command-header .public-page-title {
    letter-spacing: .18em;
    text-transform: uppercase;
}

.practice-command-visual {
    position: relative;
    justify-self: end;
    width: 210px;
    height: 145px;
    border: 1px solid rgba(47, 124, 255, .22);
    border-radius: 18px;
    background: radial-gradient(circle at 50% 50%, rgba(47, 124, 255, .12), transparent 62%);
    clip-path: polygon(10% 0, 90% 0, 100% 12%, 100% 88%, 90% 100%, 10% 100%, 0 88%, 0 12%);
}

.practice-command-screen {
    position: absolute;
    top: 28px;
    left: 54px;
    display: grid;
    place-items: center;
    width: 100px;
    height: 70px;
    border: 2px solid #2f7cff;
    border-radius: 7px;
    color: #2f7cff;
    font: 800 28px Consolas, monospace;
    box-shadow: inset 0 0 22px rgba(47, 124, 255, .14), 0 0 22px rgba(47, 124, 255, .14);
}

.practice-command-number {
    position: absolute;
    bottom: 16px;
    left: 91px;
    color: #f4f7fb;
    font: 700 17px Consolas, monospace;
}

.practice-command-line {
    position: absolute;
    right: 18px;
    width: 20px;
    height: 2px;
    background: #974cff;
    box-shadow: 0 0 8px rgba(151, 76, 255, .7);
}

.practice-command-line--one { top: 48px; }
.practice-command-line--two { top: 64px; width: 14px; }
.practice-command-line--three { top: 80px; width: 20px; }

.practice-config-shell {
    overflow: hidden;
    border: 1px solid rgba(47, 124, 255, .38);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(10, 22, 39, .98), rgba(5, 13, 25, .98));
    box-shadow: 0 18px 38px rgba(0, 0, 0, .18);
}

.practice-config-bar {
    display: flex;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #ae6bff;
    font: 800 12px Consolas, monospace;
    letter-spacing: .05em;
}

.practice-config-bar strong {
    color: #40d7f2;
    font-size: 11px;
}

.practice-config-bar strong i {
    margin-right: 5px;
    font-size: 7px;
}

.practice-config-shell .practice-setup {
    margin: 0;
    padding: 24px 26px 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.practice-config-shell .practice-mode-option {
    min-height: 104px;
    padding: 16px;
    grid-template-columns: 18px 54px 1fr 22px;
    border-color: rgba(255, 255, 255, .12);
    background: rgba(3, 12, 25, .35);
}

.practice-config-shell .practice-mode-option > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(47, 124, 255, .3);
    border-radius: 7px;
    font-size: 25px;
}

.practice-config-shell .practice-mode-option::after {
    content: "";
    width: 17px;
    height: 17px;
    border: 2px solid #657287;
    border-radius: 50%;
}

.practice-config-shell .practice-mode-option.is-selected::after {
    border-color: #2f7cff;
    box-shadow: inset 0 0 0 4px #2f7cff;
}

.practice-config-shell .practice-submit {
    margin-top: 8px;
    padding: 13px 22px;
    border-radius: 7px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.practice-config-hint {
    display: inline-flex;
    gap: 8px;
    margin-left: 20px;
    color: #9aa5b5;
    font-size: 12px;
}

@media (max-width: 700px) {
    .practice-command-header {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .practice-command-visual {
        display: none;
    }

    .practice-config-shell .practice-setup {
        padding: 20px 16px 22px;
    }

    .practice-config-shell .practice-mode-options {
        grid-template-columns: 1fr;
    }

    .practice-config-hint {
        display: flex;
        margin: 14px 0 0;
    }
}

@media (max-width: 380px) {

    .hero-actions {

        grid-template-columns: 1fr;

    }

    .stats-grid,
    .resource-grid {

        grid-template-columns: 1fr;

    }

}

/* ==========================================================
   DASHBOARD PÚBLICO · SYSTEM ANALYTICS
========================================================== */
.dashboard-page-shell {
    --dashboard-border: rgba(88, 123, 174, .27);
    --dashboard-panel: rgba(4, 12, 24, .92);
    display: flex;
    width: 100%;
    max-width: 1540px;
    margin-inline: auto;
    flex-direction: column;
    gap: 12px;
    color: #f2f6fc;
    font-family: "Nunito", sans-serif;
}

.dashboard-page-hero,
.dashboard-kpi,
.dashboard-panel {
    border: 1px solid var(--dashboard-border);
    background:
        linear-gradient(rgba(47, 124, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 124, 255, .025) 1px, transparent 1px),
        linear-gradient(145deg, rgba(5, 14, 28, .97), rgba(3, 10, 20, .96));
    background-size: 23px 23px, 23px 23px, auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 14px 34px rgba(0, 0, 0, .1);
}

.dashboard-page-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 150px;
    padding: 27px 31px;
    overflow: hidden;
    border-radius: 14px;
}

.dashboard-page-hero::before {
    position: absolute;
    top: -90px;
    right: 4%;
    width: 340px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 61, 226, .17), transparent 67%);
    content: "";
    pointer-events: none;
}

.dashboard-page-hero::after {
    position: absolute;
    right: 17px;
    bottom: 15px;
    width: 62px;
    height: 38px;
    border-right: 2px solid rgba(47, 124, 255, .7);
    border-bottom: 2px solid rgba(47, 124, 255, .7);
    content: "";
    pointer-events: none;
}

.dashboard-eyebrow,
.dashboard-panel-heading p {
    margin: 0;
    color: #3787ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.45px;
}

.dashboard-page-hero h1 {
    margin: 7px 0 5px;
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 900;
    letter-spacing: -1.7px;
    line-height: 1;
}

.dashboard-page-hero h1 span {
    color: #2f7cff;
}

.dashboard-page-hero > div:first-child > p:last-child {
    max-width: 650px;
    margin: 0;
    color: #9ca9bc;
    font-size: 12.5px;
    line-height: 1.55;
}

.dashboard-live-status {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
    min-width: 165px;
    padding: 13px 15px;
    border: 1px solid rgba(36, 221, 133, .23);
    border-radius: 9px;
    background: rgba(4, 21, 25, .63);
}

.dashboard-live-status span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #20db82;
    font: 800 10px Consolas, monospace;
    letter-spacing: .7px;
}

.dashboard-live-status span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #20e889;
    box-shadow: 0 0 9px rgba(32, 232, 137, .8);
    animation: dashboardPulse 1.7s ease-in-out infinite;
}

.dashboard-live-status small {
    color: #718097;
    font-size: 9px;
}

@keyframes dashboardPulse {
    50% { opacity: .45; transform: scale(.78); }
}

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-kpi {
    --kpi-color: #2f7cff;
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 93px;
    padding: 14px 15px 12px;
    overflow: hidden;
    border-radius: 11px;
}

.dashboard-kpi::after {
    position: absolute;
    right: -24px;
    bottom: -38px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--kpi-color) 14%, transparent), transparent 68%);
    content: "";
}

.dashboard-kpi--violet { --kpi-color: #a761ff; }
.dashboard-kpi--cyan { --kpi-color: #21d4dd; }
.dashboard-kpi--blue { --kpi-color: #2f7cff; }
.dashboard-kpi--green { --kpi-color: #20db82; }

.dashboard-kpi-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--kpi-color) 45%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--kpi-color) 8%, transparent);
    color: var(--kpi-color);
    font-size: 17px;
    box-shadow: 0 0 18px color-mix(in srgb, var(--kpi-color) 10%, transparent);
}

.dashboard-kpi > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.dashboard-kpi small {
    color: #8491a5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.dashboard-kpi strong {
    color: #f2f6fc;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -.7px;
    line-height: 1.1;
}

.dashboard-kpi > em {
    grid-column: 2;
    color: #657389;
    font-size: 8.5px;
    font-style: normal;
    line-height: 1;
}

.dashboard-kpi > em.is-positive { color: #20c97a; }
.dashboard-kpi > em.is-negative { color: #ff6876; }

.dashboard-analytics-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-panel {
    position: relative;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
    border-radius: 12px;
}

.dashboard-panel--activity { grid-column: span 8; min-height: 325px; }
.dashboard-panel--accuracy { grid-column: span 4; min-height: 325px; }
.dashboard-panel--sources { grid-column: span 4; min-height: 295px; }
.dashboard-panel--categories { grid-column: span 4; min-height: 295px; }
.dashboard-panel--ranking { grid-column: span 4; min-height: 295px; }

.dashboard-panel-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 43px;
}

.dashboard-panel-heading h2 {
    margin: 3px 0 0;
    color: #eaf0f9;
    font-size: 15px;
    font-weight: 900;
}

.dashboard-panel-symbol {
    color: #526984;
    font-size: 17px;
}

.dashboard-chart-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #7d899c;
    font-size: 9px;
}

.dashboard-chart-legend span,
.dashboard-source-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-chart-legend i,
.dashboard-source-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.dashboard-chart-legend .is-blue,
.dashboard-source-legend .is-blue { background: #2f7cff; box-shadow: 0 0 7px rgba(47, 124, 255, .65); }
.dashboard-chart-legend .is-violet,
.dashboard-source-legend .is-violet { background: #a761ff; box-shadow: 0 0 7px rgba(167, 97, 255, .55); }

.dashboard-chart-wrap {
    position: relative;
    min-width: 0;
}

.dashboard-chart-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.dashboard-chart-wrap--wide { height: 220px; margin-top: 5px; }
.dashboard-chart-wrap--gauge { height: 185px; margin-top: 3px; }
.dashboard-chart-wrap--donut { width: 155px; height: 155px; }
.dashboard-chart-wrap--polar { width: 158px; height: 158px; }

.dashboard-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px dashed rgba(84, 112, 151, .2);
    color: #69768a;
    font-size: 9px;
}

.dashboard-panel-foot strong {
    color: #8e9cb0;
    font-size: 9px;
}

.dashboard-accuracy-copy {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -16px;
    text-align: center;
}

.dashboard-accuracy-copy > strong {
    display: none;
}

.dashboard-accuracy-copy span {
    color: #a7b3c4;
    font-size: 10px;
    font-weight: 800;
}

.dashboard-accuracy-copy small {
    margin-top: 4px;
    color: #68758a;
    font-size: 8.5px;
}

.dashboard-donut-layout,
.dashboard-polar-layout {
    display: grid;
    grid-template-columns: minmax(130px, .9fr) minmax(115px, 1.1fr);
    align-items: center;
    gap: 7px;
    min-height: 205px;
}

.dashboard-source-legend,
.dashboard-category-legend {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 9px;
}

.dashboard-source-legend span {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    min-width: 0;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(84, 112, 151, .18);
}

.dashboard-source-legend b,
.dashboard-category-legend b {
    overflow: hidden;
    color: #aeb9c9;
    font-size: 9.5px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-source-legend strong {
    color: #f0f4fa;
    font-size: 11px;
    font-weight: 900;
}

.dashboard-category-legend {
    max-height: 176px;
    padding-right: 3px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #234a82 transparent;
}

.dashboard-category-legend span {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
}

.dashboard-category-legend span > i {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--category-color);
    box-shadow: 0 0 6px color-mix(in srgb, var(--category-color) 60%, transparent);
}

.dashboard-category-legend small {
    color: #69768a;
    font-size: 8px;
}

.dashboard-category-legend p {
    margin: 0;
    color: #69768a;
    font-size: 9px;
}

.dashboard-ranking {
    display: flex;
    margin: 8px 0 0;
    padding: 0;
    flex-direction: column;
    list-style: none;
}

.dashboard-ranking li {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 5px 3px 7px;
    overflow: hidden;
    border-bottom: 1px dashed rgba(84, 112, 151, .18);
}

.dashboard-rank-number {
    color: #3c8aff;
    font: 800 9px Consolas, monospace;
}

.dashboard-ranking a {
    display: flex;
    min-width: 0;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.dashboard-ranking a b {
    overflow: hidden;
    color: #dce4ef;
    font-size: 9.5px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-ranking a small {
    color: #647187;
    font-size: 7.8px;
}

.dashboard-ranking li > strong {
    color: #9ca9bc;
    font-size: 9px;
}

.dashboard-ranking li > i {
    position: absolute;
    bottom: 0;
    left: 39px;
    width: var(--rank-progress);
    max-width: calc(100% - 43px);
    height: 1px;
    background: linear-gradient(90deg, var(--rank-color), transparent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--rank-color) 50%, transparent);
}

.dashboard-ranking li:hover a b { color: #fff; }

.dashboard-ranking .dashboard-ranking-empty {
    display: flex;
    color: #69768a;
    font-size: 9px;
}

@media (max-width: 1180px) and (min-width: 961px) {
    .dashboard-public-layout .dashboard-main { padding-inline: 10px 16px; }
    .dashboard-panel--activity { grid-column: span 7; }
    .dashboard-panel--accuracy { grid-column: span 5; }
    .dashboard-panel--sources,
    .dashboard-panel--categories { grid-column: span 6; }
    .dashboard-panel--ranking { grid-column: 1 / -1; min-height: auto; }
    .dashboard-ranking { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}

@media (max-width: 960px) {
    .dashboard-page-shell { gap: 10px; }
    .dashboard-page-hero { min-height: 142px; padding: 23px 20px; }
    .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-panel--activity,
    .dashboard-panel--accuracy,
    .dashboard-panel--sources,
    .dashboard-panel--categories,
    .dashboard-panel--ranking { grid-column: span 6; }
    .dashboard-panel--activity { grid-column: 1 / -1; }
    .dashboard-ranking { margin-top: 5px; }
}

@media (max-width: 700px) {
    .dashboard-page-hero { align-items: flex-start; flex-direction: column; gap: 15px; }
    .dashboard-live-status { align-items: flex-start; min-width: 0; padding: 9px 11px; }
    .dashboard-page-hero h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
    .dashboard-panel--activity,
    .dashboard-panel--accuracy,
    .dashboard-panel--sources,
    .dashboard-panel--categories,
    .dashboard-panel--ranking { grid-column: 1 / -1; }
    .dashboard-panel--accuracy { min-height: 300px; }
    .dashboard-chart-wrap--wide { height: 205px; }
    .dashboard-donut-layout,
    .dashboard-polar-layout { grid-template-columns: minmax(135px, .8fr) minmax(135px, 1.2fr); }
}

@media (max-width: 480px) {
    .dashboard-public-layout .dashboard-main { padding-inline: 9px; }
    .dashboard-page-hero { padding: 20px 15px; border-radius: 11px; }
    .dashboard-page-hero > div:first-child > p:last-child { font-size: 11px; }
    .dashboard-kpis { gap: 7px; }
    .dashboard-kpi { grid-template-columns: 34px 1fr; gap: 8px; min-height: 82px; padding: 11px 9px 9px; }
    .dashboard-kpi-icon { width: 33px; height: 33px; border-radius: 8px; font-size: 14px; }
    .dashboard-kpi strong { font-size: 20px; }
    .dashboard-kpi small { font-size: 7.5px; }
    .dashboard-kpi > em { font-size: 7.5px; }
    .dashboard-panel { padding: 13px 11px; border-radius: 10px; }
    .dashboard-panel-heading h2 { font-size: 14px; }
    .dashboard-chart-legend { gap: 7px; font-size: 8px; }
    .dashboard-chart-wrap--wide { height: 190px; }
    .dashboard-panel-foot { align-items: flex-start; flex-direction: column; gap: 3px; }
    .dashboard-donut-layout,
    .dashboard-polar-layout { grid-template-columns: 125px minmax(0, 1fr); }
    .dashboard-chart-wrap--donut,
    .dashboard-chart-wrap--polar { width: 125px; height: 145px; }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-live-status span i { animation: none; }
}

/* ==========================================================
   PUBLIC ACADEMIC CONTENT
========================================================== */

.public-page-shell {

    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 24px 14px 36px;
    font-family: "Nunito", sans-serif;

}

.public-page-header {

    margin-bottom: 18px;

}

.public-back-link {

    display: inline-flex;
    margin-bottom: 18px;
    color: #7E8898;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;

}

.public-back-link:hover {

    color: #2F7CFF;
    transform: translateX(-2px);

}

.public-page-title {

    margin: 6px 0 8px;
    color: #F4F7FB;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;

}

.public-page-intro {

    max-width: 680px;
    margin: 0;
    color: #9AA5B5;
    font-size: 15px;
    line-height: 1.6;

}

.public-resource-grid {

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;

}

.public-resource-context {

    margin: 0 0 4px;
    color: #7E8898;
    font-size: 12px;
    font-weight: 700;

}

.resource-card-action {

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: fit-content;
    margin-top: auto;
    padding: 7px 9px;
    border: 1px solid rgba(47, 124, 255, .18);
    border-radius: 8px;
    background: rgba(47, 124, 255, .045);
    color: #2F7CFF;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;

}

.resource-card-action:hover {

    border-color: rgba(47, 124, 255, .45);
    background: rgba(47, 124, 255, .1);
    transform: translateY(-1px);

}

.resource-card-action span {

    font-size: 14px;
    font-weight: 800;

}

.resource-empty {

    padding: 18px;
    border: 1px dashed rgba(255, 255, 255, .1);
    border-radius: 14px;
    color: #7E8898;
    font-size: 14px;

}

.resource-empty--panel {

    grid-column: 1 / -1;
    background: rgba(255, 255, 255, .02);

}

.questionnaire-note {

    display: inline-flex;
    margin: 14px 0 0;
    padding: 8px 10px;
    border-left: 2px solid #2F7CFF;
    background: rgba(47, 124, 255, .06);
    color: #A7B1C1;
    font-size: 13px;

}

.questionnaire-list {

    display: flex;
    flex-direction: column;
    gap: 14px;

}

.question-card {

    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(7, 13, 24, .96), rgba(4, 8, 16, .95));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .015) inset;

}

.question-card-heading {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;

}

.question-number {

    color: #2F7CFF;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;

}

.question-type {

    color: #7E8898;
    font-size: 12px;
    font-weight: 700;

}

.question-text {

    margin: 0 0 14px;
    color: #F4F7FB;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;

}

.question-options {

    display: grid;
    gap: 8px;

}

.question-option {

    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    color: #A7B1C1;
    font-size: 14px;

}

.question-option--correct {

    border-color: rgba(32, 214, 123, .42);
    background: rgba(32, 214, 123, .08);
    color: #E6FFF2;

}

.question-option-marker {

    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .06);
    color: #7E8898;
    font-size: 12px;
    font-weight: 800;

}

.question-option--correct .question-option-marker {

    background: rgba(32, 214, 123, .18);
    color: #20D67B;

}

.question-option-text {

    flex: 1;

}

.question-correct-label {

    color: #20D67B;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;

}

@media (max-width: 960px) {

    .public-resource-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}

@media (max-width: 560px) {

    .public-page-shell {

        padding: 16px 10px 28px;

    }

    .public-resource-grid {

        grid-template-columns: 1fr;

    }

    .question-card {

        padding: 14px;

    }

    .question-text {

        font-size: 16px;

    }

}

/* ==========================================================
   SIMULATOR CATALOG
========================================================== */

.simulator-catalog-shell {

    gap: 14px;

}

.catalog-hero {

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    height: 320px;
    min-height: 320px;
    max-height: 384px;
    overflow: hidden;
    border: 1px solid rgba(47, 124, 255, .22);
    border-radius: 20px;
    background:
        radial-gradient(circle at 78% 46%, rgba(47, 124, 255, .17), transparent 27%),
        linear-gradient(180deg, rgba(7, 13, 24, .97), rgba(4, 8, 16, .96));
    box-shadow: 0 0 0 1px rgba(47, 124, 255, .06) inset;

}

.catalog-hero-copy {

    position: relative;
    z-index: 1;
    grid-column: 2;
    align-self: center;
    padding: 28px 24px;
    transform: translateX(-24px);

}

.catalog-title {

    max-width: 620px;
    margin: 10px 0 10px;
    color: #F4F7FB;
    font-size: clamp(2.35rem, 4.4vw, 4rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .94;

}

.catalog-title span {

    color: #2F7CFF;

}

.catalog-hero .hero-kicker {

    margin-left: 0;
    font-size: 13px;
    letter-spacing: 2.2px;

}

.catalog-intro {

    max-width: 620px;
    margin: 0;
    color: #9AA5B5;
    font-size: 15px;
    line-height: 1.6;

}

.catalog-hero-visual {

    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
    padding: 18px 34px;
    box-sizing: border-box;

}

.catalog-hero-visual img {

    display: block;
    width: min(100%, 600px);
    max-width: 100%;
    height: auto;
    max-height: 284px;
    object-fit: contain;
    object-position: center;
    align-self: center;
    margin: auto;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .52));

}

.catalog-toolbar {

    padding: 0 0 2px;

}

.catalog-filters {

    display: grid;
    grid-template-columns: minmax(260px, 1.55fr) repeat(2, minmax(180px, 1fr)) auto auto;
    gap: 10px;
    align-items: stretch;

}

.catalog-search,
.catalog-select {

    display: flex;
    align-items: center;
    min-height: 48px;
    border: 1px solid rgba(47, 124, 255, .3);
    border-radius: 10px;
    background: rgba(7, 13, 24, .9);
    color: #7E8898;

}

.catalog-search {

    gap: 10px;
    padding: 0 12px;

}

.catalog-search:focus-within,
.catalog-select:focus-within {

    border-color: rgba(47, 124, 255, .72);
    box-shadow: 0 0 0 3px rgba(47, 124, 255, .1);

}

.catalog-search i,
.catalog-select-icon {

    flex: 0 0 auto;
    color: #2F7CFF;

}

.catalog-search input {

    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #DCE7FF;
    font-family: "Nunito", sans-serif;
    font-size: 13px;

}

.catalog-search input::placeholder {

    color: #7E8898;

}

.catalog-shortcut {

    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 5px;
    color: #7E8898;
    font-size: 10px;

}

.catalog-select {

    gap: 9px;
    padding: 5px 10px;

}

.catalog-select-content {

    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;

}

.catalog-select-label {

    color: #2F7CFF;
    font-size: 10px;
    font-weight: 700;

}

.catalog-select select {

    width: 100%;
    border: 0;
    outline: 0;
    appearance: none;
    background: transparent;
    color: #DCE7FF;
    font-family: "Nunito", sans-serif;
    font-size: 12px;

}

.catalog-select select option {

    color: #172238;

}

.catalog-filter-submit {

    min-width: 74px;
    border: 1px solid rgba(47, 124, 255, .3);
    border-radius: 10px;
    background: rgba(47, 124, 255, .1);
    color: #DCE7FF;
    font-family: "Nunito", sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;

}

.catalog-filter-submit:hover {

    border-color: #2F7CFF;
    background: rgba(47, 124, 255, .17);

}

.catalog-clear {

    align-self: center;
    color: #2F7CFF;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;

}

.catalog-clear:hover {

    color: #75A8FF;

}

.catalog-results {

    padding-top: 2px;

}

.catalog-results-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;

}

.catalog-results-header--legacy {
    display: none;
}

.catalog-results-count {

    margin: 0;
    color: #7E8898;
    font-size: 13px;

}

.catalog-results-count span {

    color: #2F7CFF;
    font-weight: 800;

}

.catalog-view-toggle {

    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(47, 124, 255, .18);
    border-radius: 9px;
    background: rgba(7, 13, 24, .84);

}

.catalog-view-toggle button {

    display: grid;
    place-items: center;
    width: 30px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #7E8898;

}

.catalog-view-toggle button.is-active {

    background: rgba(47, 124, 255, .14);
    color: #2F7CFF;

}

.catalog-grid {

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

}

.catalog-card {

    display: flex;
    min-height: 232px;
    flex-direction: column;
    padding: 14px;
    border: 1px solid rgba(47, 124, 255, .15);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(9, 16, 29, .96), rgba(5, 10, 19, .96));
    box-shadow: 0 0 0 1px rgba(47, 124, 255, .04) inset;
    transition: transform .2s ease, border-color .2s ease;

}

.catalog-card:hover {

    border-color: rgba(47, 124, 255, .32);
    transform: translateY(-2px);

}

.catalog-card-top,
.catalog-card-actions,
.catalog-card-meta {

    display: flex;
    align-items: center;

}

.catalog-card-top,
.catalog-card-actions {

    justify-content: space-between;
    gap: 10px;

}

.catalog-category-tag {

    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(47, 124, 255, .1);
    color: #65A0FF;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;

}

.catalog-card-menu {

    color: #596477;
    font-size: 13px;
    letter-spacing: 2px;

}

.catalog-card-title {

    margin: 16px 0 7px;
    color: #F4F7FB;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;

}

.catalog-card-description {

    min-height: 42px;
    margin: 0;
    color: #9AA5B5;
    font-size: 13px;
    line-height: 1.5;

}

.catalog-card-meta {

    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 14px;
    color: #7E8898;
    font-size: 11px;

}

.catalog-card-meta i {

    margin-right: 3px;
    color: #A7B1C1;

}

.catalog-card-actions {

    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .06);

}

.catalog-start-link {

    padding: 0;
    border: 0;
    background: transparent;
    color: #2F7CFF;
    font-size: 13px;
    font-weight: 800;
    font-family: "Nunito", sans-serif;
    text-decoration: none;
    cursor: pointer;

}

.catalog-start-link span {

    margin-left: 5px;
    font-size: 15px;

}

.catalog-open-button {

    display: grid;
    place-items: center;
    width: 30px;
    height: 28px;
    border: 1px solid rgba(47, 124, 255, .2);
    border-radius: 8px;
    color: #DCE7FF;
    font-size: 13px;
    text-decoration: none;

}

.catalog-open-button:hover {

    border-color: #2F7CFF;
    color: #2F7CFF;

}

.catalog-modal[hidden] {

    display: none;

}

.catalog-modal {

    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;

}

.catalog-modal-backdrop {

    position: absolute;
    inset: 0;
    background: rgba(1, 5, 12, .78);
    backdrop-filter: blur(7px);

}

.catalog-modal-dialog {

    position: relative;
    z-index: 1;
    width: min(100%, 540px);
    padding: 25px;
    border: 1px solid rgba(47, 124, 255, .24);
    border-radius: 18px;
    background: linear-gradient(180deg, #0b1423, #060d18);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 35px rgba(47, 124, 255, .12);

}

.catalog-modal-dialog.is-practice-step [data-modal-intro] {
    display: none;
}

.catalog-modal-close {

    position: absolute;
    top: 13px;
    right: 13px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: transparent;
    color: #8D98AA;
    cursor: pointer;

}

.catalog-modal-close:hover {

    color: #F4F7FB;
    border-color: rgba(47, 124, 255, .42);

}

.catalog-modal-dialog h2 {

    max-width: 330px;
    margin: 8px 35px 7px 0;
    color: #F4F7FB;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;

}

.catalog-modal-dialog > p:not(.hero-kicker) {

    margin: 0 0 18px;
    color: #9AA5B5;
    font-size: 13px;

}

.catalog-modal-actions {

    display: grid;
    gap: 9px;

}

.catalog-modal-action {

    display: grid;
    grid-template-columns: 22px 1fr 16px;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 11px;
    color: #DCE7FF;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;

}

.catalog-modal-action:hover {

    border-color: rgba(47, 124, 255, .48);
    background: rgba(47, 124, 255, .08);
    color: #FFFFFF;
    transform: translateY(-1px);

}

.catalog-modal-action > i:first-child {

    color: #2F7CFF;
    font-size: 18px;

}

.catalog-modal-action > i:last-child {

    color: #7E8898;
    font-size: 13px;

}

.catalog-modal-action span {

    display: flex;
    flex-direction: column;
    gap: 2px;

}

.catalog-modal-action strong {

    font-size: 13px;

}

.catalog-modal-action small {

    color: #7E8898;
    font-size: 11px;

}

.catalog-toast {

    position: fixed;
    z-index: 1300;
    right: 22px;
    bottom: 22px;
    padding: 10px 14px;
    border: 1px solid rgba(47, 124, 255, .32);
    border-radius: 9px;
    background: #0B1423;
    color: #DCE7FF;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;

}

.catalog-toast.is-visible {

    opacity: 1;
    transform: translateY(0);

}

.catalog-modal-practice-step[hidden] {
    display: none;
}

.catalog-modal-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7e8898;
    font: 700 12px "Nunito", sans-serif;
    cursor: pointer;
}

.catalog-modal-back:hover {
    color: #2f7cff;
}

.catalog-modal-step-kicker {
    margin: 0 0 8px;
    color: #2f7cff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.catalog-modal-practice-step h3 {
    margin: 0 0 6px;
    color: #f4f7fb;
    font-size: 19px;
    font-weight: 800;
}

.catalog-modal-practice-step > p:not(.catalog-modal-step-kicker) {
    margin: 0 0 15px;
    color: #9aa5b5;
    font-size: 12px;
}

.catalog-modal-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.catalog-modal-mode {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    color: #dce7ff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.catalog-modal-mode:hover,
.catalog-modal-mode.is-selected {
    border-color: rgba(47, 124, 255, .65);
    background: rgba(47, 124, 255, .08);
}

.catalog-modal-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.catalog-modal-mode > i {
    grid-column: 1;
}

.catalog-modal-mode > span {
    grid-column: 2;
    min-width: 0;
}

.catalog-modal-mode > b {
    grid-column: 3;
}

.catalog-modal-mode > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(47, 124, 255, .3);
    border-radius: 7px;
    color: #2f7cff;
    font-size: 18px;
}

.catalog-modal-mode:nth-child(2) > i {
    color: #a95cff;
}

.catalog-modal-mode span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.catalog-modal-mode strong {
    font-size: 13px;
    line-height: 1.2;
}

.catalog-modal-mode small {
    color: #7e8898;
    font-size: 10px;
}

@media (max-width: 560px) {
    .catalog-modal-dialog {
        width: min(100%, 430px);
        padding: 22px 18px;
    }

    .catalog-modal-mode-options {
        grid-template-columns: 1fr;
    }
}

.catalog-modal-mode b {
    width: 15px;
    height: 15px;
    border: 2px solid #657287;
    border-radius: 50%;
}

.catalog-modal-mode.is-selected b {
    border-color: #2f7cff;
    box-shadow: inset 0 0 0 4px #2f7cff;
}

.catalog-modal-start-practice {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 11px;
    padding: 10px 13px;
    border: 1px solid rgba(47, 124, 255, .3);
    border-radius: 8px;
    background: #2f7cff;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}

.catalog-modal-start-practice:hover {
    background: #4b8eff;
    color: #fff;
}

body.catalog-modal-open {

    overflow: hidden;

}

.practice-option {

    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;

}

.practice-option input {

    accent-color: #2F7CFF;

}

.practice-result {

    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(47, 124, 255, .2);
    border-radius: 12px;
    background: rgba(47, 124, 255, .07);
    color: #9AA5B5;

}

.practice-setup {

    margin-bottom: 16px;
    padding: 22px;
    border: 1px solid rgba(47, 124, 255, .2);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(10, 20, 35, .95), rgba(6, 12, 22, .95));

}

.practice-setup h2 {

    margin: 8px 0 5px;
    color: #F4F7FB;
    font-size: 22px;
    font-weight: 800;

}

.practice-setup > p {

    margin: 0 0 16px;
    color: #9AA5B5;
    font-size: 13px;

}

.practice-mode-options {

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;

}

.practice-mode-option {

    display: grid;
    grid-template-columns: 18px 22px 1fr;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    color: #DCE7FF;
    cursor: pointer;

}

.practice-mode-option.is-selected {

    border-color: rgba(47, 124, 255, .55);
    background: rgba(47, 124, 255, .09);

}

.practice-mode-option input {

    accent-color: #2F7CFF;

}

.practice-mode-option > i {

    color: #2F7CFF;
    font-size: 18px;

}

.practice-mode-option span {

    display: flex;
    flex-direction: column;
    gap: 2px;

}

.practice-mode-option strong {

    font-size: 12px;

}

.practice-mode-option small {

    color: #7E8898;
    font-size: 10px;

}

.practice-session-bar {

    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 9px;
    background: rgba(7, 13, 24, .86);
    color: #9AA5B5;
    font-size: 12px;

}

.practice-session-bar strong {

    color: #2F7CFF;
    font-variant-numeric: tabular-nums;

}

.practice-question[hidden],
.practice-form[hidden],
.practice-session-bar[hidden],
.practice-setup[hidden] {

    display: none;

}

.practice-navigation {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;

}

.practice-nav-button {

    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 9px;
    background: transparent;
    color: #9AA5B5;
    font-family: "Nunito", sans-serif;
    font-size: 12px;
    cursor: pointer;

}

.practice-nav-button:hover:not(:disabled) {

    border-color: rgba(47, 124, 255, .45);
    color: #F4F7FB;

}

.practice-nav-button:disabled {

    cursor: not-allowed;
    opacity: .4;

}

.practice-result strong {

    color: #F4F7FB;
    font-size: 22px;

}

.practice-submit {

    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 16px;
    border: 1px solid rgba(47, 124, 255, .35);
    border-radius: 9px;
    background: #2F7CFF;
    color: #FFFFFF;
    font-family: "Nunito", sans-serif;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;

}

.practice-submit:hover {

    background: #4B8EFF;

}

@media (max-width: 1180px) {

    .catalog-filters {

        grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, 1fr)) auto;

    }

    .catalog-clear {

        grid-column: 4;
        justify-self: end;

    }

}

@media (max-width: 960px) {

    .catalog-hero {

        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        max-height: none;

    }

    .catalog-hero-copy,
    .catalog-hero-visual {

        grid-column: 1;

    }

    .catalog-hero-copy {

        transform: none;

    }

    .catalog-hero-visual {

        position: relative;
        inset: auto;
        width: auto;
        order: -1;
        min-height: 180px;
        height: auto;

    }

    .catalog-hero-visual img {

        width: min(100%, 320px);
        height: auto;
        transform: none;

    }

    .catalog-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}

@media (max-width: 640px) {

    .practice-mode-options {

        grid-template-columns: 1fr;

    }

    .practice-setup {

        padding: 17px;

    }

    .catalog-hero-copy {

        padding: 20px 16px 22px;

    }

    .catalog-hero-visual {

        min-height: 145px;

    }

    .catalog-filters {

        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;

    }

    .catalog-search {

        grid-column: 1 / -1;
        justify-content: center;

    }

    .catalog-select {

        min-width: 0;
        gap: 5px;
        padding: 5px 7px;

    }

    .catalog-select-icon {

        display: none;

    }

    .catalog-select-label,
    .catalog-select select {

        font-size: 10px;

    }

    .catalog-filter-submit {

        grid-column: auto;
        min-width: 0;
        padding: 0 8px;
        min-height: 42px;

    }

    .catalog-clear {

        grid-column: 1 / -1;
        justify-self: center;

    }

    .catalog-modal-dialog {

        padding: 22px 17px;

    }

    .catalog-grid {

        grid-template-columns: 1fr;

    }

}

/* Ajuste final del catálogo de simuladores */
.simulator-catalog-shell {
    gap: 14px;
}

.catalog-hero {
    height: 280px;
    min-height: 280px;
    border-radius: 15px;
    border-color: rgba(74, 122, 190, .28);
    background:
        radial-gradient(circle at 88% 44%, rgba(47, 124, 255, .12), transparent 25%),
        linear-gradient(rgba(47, 124, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 124, 255, .025) 1px, transparent 1px),
        linear-gradient(180deg, #06101d, #030914);
    background-size: auto, 28px 28px, 28px 28px, auto;
}

.catalog-hero::after {
    position: absolute;
    top: 20px;
    right: 22px;
    bottom: 20px;
    width: 125px;
    border-top: 1px solid rgba(47, 124, 255, .65);
    border-right: 1px solid rgba(47, 124, 255, .65);
    border-bottom: 1px solid rgba(47, 124, 255, .65);
    content: "";
    opacity: .65;
}

.catalog-hero-copy {
    padding: 25px 18px 25px 7px;
    transform: none;
}

.catalog-title {
    max-width: 530px;
    margin: 12px 0 13px;
    font-size: clamp(2.15rem, 3.8vw, 3.65rem);
    letter-spacing: -.045em;
    line-height: 1.03;
}

.catalog-intro {
    max-width: 560px;
    font-size: 14px;
    line-height: 1.55;
}

.catalog-hero-visual {
    width: 49%;
    padding: 12px 4px 12px 18px;
}

.catalog-hero-visual img {
    max-height: 260px;
    filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .58));
}

.catalog-toolbar {
    padding: 14px;
    border: 1px solid rgba(74, 122, 190, .28);
    border-radius: 14px;
    background: rgba(4, 12, 23, .72);
}

.catalog-filters {
    grid-template-columns: minmax(230px, 1.4fr) repeat(2, minmax(170px, 1fr)) auto auto;
    gap: 12px;
}

.catalog-search,
.catalog-select {
    min-height: 47px;
    border-radius: 8px;
    border-color: rgba(74, 122, 190, .35);
    background: rgba(5, 14, 27, .75);
}

.catalog-toolbar-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 95px;
    color: #aebbd0;
    font-size: 12px;
    white-space: nowrap;
}

.catalog-toolbar-summary b {
    color: #dce7ff;
}

.catalog-toolbar-summary a {
    color: #2f7cff;
    font-size: 10px;
    text-decoration: none;
}

.catalog-toolbar .catalog-view-toggle {
    align-self: center;
    min-height: 39px;
}

.catalog-toolbar .catalog-view-toggle button {
    width: 38px;
    height: 33px;
}

.catalog-toolbar .catalog-view-toggle button.is-active {
    background: #135bc9;
    color: #fff;
}

.catalog-grid {
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.catalog-card {
    min-height: 244px;
    padding: 14px 16px 12px;
    border-radius: 13px;
    border-color: rgba(74, 122, 190, .2);
    background: linear-gradient(145deg, rgba(8, 18, 32, .98), rgba(4, 11, 21, .98));
}

.catalog-card-content {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 93px;
    margin-top: 12px;
}

.catalog-card-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border: 1px solid color-mix(in srgb, var(--category-color, #2f7cff) 42%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--category-color, #2f7cff) 8%, transparent);
    color: var(--category-color, #2f7cff);
    font-size: 32px;
}

.catalog-card-copy {
    min-width: 0;
}

.catalog-card-title {
    margin: 1px 0 7px;
    font-size: 18px;
    line-height: 1.2;
}

.catalog-card-description {
    min-height: 0;
    font-size: 12px;
    line-height: 1.45;
}

.catalog-card-meta {
    gap: 7px 10px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 10px;
}

.catalog-card-meta span + span {
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .15);
}

.catalog-card-actions {
    gap: 12px;
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}

.catalog-start-link {
    flex: 1;
    min-height: 38px;
    border: 1px solid rgba(47, 124, 255, .36);
    border-radius: 7px;
    background: rgba(47, 124, 255, .045);
    color: #2f7cff;
}

.catalog-start-link:hover {
    background: rgba(47, 124, 255, .12);
}

.catalog-open-button {
    width: 39px;
    height: 38px;
    border-color: rgba(47, 124, 255, .38);
    border-radius: 7px;
    background: rgba(47, 124, 255, .07);
    color: #9ec5ff;
}

.catalog-open-button i {
    color: #9ec5ff;
}

.catalog-open-button:hover {
    border-color: #2f7cff;
    background: rgba(47, 124, 255, .16);
    color: #dce7ff;
    box-shadow: 0 0 0 2px rgba(47, 124, 255, .08);
}

.catalog-select select {
    color-scheme: dark;
    color: #dce7ff;
    background-color: #071321;
}

.catalog-select select option,
.catalog-select select optgroup {
    background-color: #0a1829;
    color: #e7eef9;
}

.catalog-select select option:checked {
    background: #145bc5;
    color: #fff;
}

.catalog-select {
    position: relative;
    padding-right: 30px;
    cursor: pointer;
    text-decoration: none !important;
}

.catalog-select:hover {
    border-color: rgba(47, 124, 255, .58);
    background: rgba(8, 20, 36, .92);
}

.catalog-select select,
.catalog-select select:hover,
.catalog-select select:focus {
    display: block;
    min-height: 20px;
    padding: 1px 0;
    border: 0 !important;
    outline: 0;
    box-shadow: none !important;
    text-decoration: none !important;
    text-underline-offset: 0;
    cursor: pointer;
}

.catalog-select::after {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #8fa8c9;
    border-bottom: 2px solid #8fa8c9;
    content: "";
    pointer-events: none;
    transform: translateY(-65%) rotate(45deg);
}

.catalog-select:focus-within::after {
    border-color: #2f7cff;
}

.catalog-category-tag {
    border-color: color-mix(in srgb, var(--category-color, #2f7cff) 32%, transparent);
    background-color: color-mix(in srgb, var(--category-color, #2f7cff) 12%, transparent);
    color: var(--category-color, #2f7cff);
}

.catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
}

.catalog-pagination a {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #8290a9;
    font-size: 12px;
    text-decoration: none;
}

.catalog-pagination a:hover,
.catalog-pagination a.is-active {
    border-color: rgba(47, 124, 255, .45);
    background: rgba(47, 124, 255, .12);
    color: #2f7cff;
}

@media (max-width: 1080px) {
    .catalog-filters {
        grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(150px, 1fr)) auto auto;
    }

    .catalog-card-content {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .catalog-card-icon {
        width: 54px;
        height: 54px;
        font-size: 26px;
    }
}

@media (max-width: 760px) {
    .catalog-hero {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        padding-top: 0;
    }

    .catalog-hero-visual {
        position: relative;
        grid-column: 1;
        order: -1;
        width: 100%;
        height: 175px;
        padding: 8px 20px;
    }

    .catalog-hero-visual img {
        max-height: 170px;
    }

    .catalog-hero-copy {
        grid-column: 1;
        padding: 12px 18px 22px;
    }

    .catalog-hero::after {
        display: none;
    }

    .catalog-filters {
        grid-template-columns: 1fr 1fr;
    }

    .catalog-search {
        grid-column: 1 / -1;
    }

    .catalog-toolbar-summary,
    .catalog-toolbar .catalog-view-toggle {
        grid-column: auto;
    }

    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1280px) {
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

@media (max-width: 500px) {
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .catalog-filters {
        grid-template-columns: 1fr;
    }

    .catalog-toolbar-summary,
    .catalog-toolbar .catalog-view-toggle {
        justify-self: center;
    }

    .catalog-card {
        min-height: 218px;
        padding: 10px;
        border-radius: 10px;
    }

    .catalog-card-top {
        min-width: 0;
    }

    .catalog-category-tag {
        max-width: 100%;
        overflow: hidden;
        padding: 3px 6px;
        font-size: 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .catalog-card-menu {
        display: none;
    }

    .catalog-card-content {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px;
        min-height: 72px;
        margin-top: 10px;
    }

    .catalog-card-icon {
        width: 36px;
        height: 36px;
        border-radius: 7px;
        font-size: 20px;
    }

    .catalog-card-title {
        margin: 0 0 5px;
        font-size: 13px;
        line-height: 1.2;
    }

    .catalog-card-description {
        display: -webkit-box;
        overflow: hidden;
        font-size: 10px;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .catalog-card-meta {
        gap: 5px;
        margin-top: 8px;
        padding-top: 8px;
        font-size: 9px;
    }

    .catalog-card-meta span {
        width: 100%;
    }

    .catalog-card-meta span + span {
        padding-left: 0;
        border-left: 0;
    }

    .catalog-card-actions {
        gap: 7px;
        margin-top: 8px;
    }

    .catalog-start-link {
        min-height: 34px;
        padding: 0 7px;
        font-size: 11px;
    }

    .catalog-open-button {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* Overrides finales de la interfaz de resolución */
.practice-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: initial;
    margin-top: 9px;
    padding: 11px;
}

.practice-question {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.practice-question:not([hidden]) {
    display: block;
}

.practice-question .practice-option {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) 20px;
    align-items: center;
    min-height: 54px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 7px;
    background: rgba(5, 14, 27, .45);
}

.practice-question .practice-option:has(input:checked) {
    border-color: #2f7cff;
    background: rgba(47, 124, 255, .1);
}

@media (max-width: 680px) {
    /* En móvil, la acción principal debe quedar junto a la pregunta. */
    .practice-form {
        display: flex;
        flex-direction: column;
    }

    .practice-body {
        display: contents;
    }

    .practice-question-panel {
        order: 1;
        width: 100%;
    }

    .practice-navigation {
        order: 2;
        width: 100%;
    }

    .practice-progress-panel {
        order: 3;
        width: 100%;
    }

    .practice-navigation {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================
   CUESTIONARIO DE LECTURA
========================================================== */

.questionnaire-page {
    width: min(100%, 1120px);
    padding: 16px 10px 34px;
}

.questionnaire-header {
    position: relative;
    margin-bottom: 12px;
    padding: 8px 2px 16px;
    border-bottom: 1px solid rgba(75, 111, 160, .2);
}

.questionnaire-header .public-back-link {
    position: static;
    align-items: center;
    gap: 7px;
    margin: 0 0 15px;
    padding: 7px 10px;
    border: 1px solid rgba(82, 112, 154, .2);
    border-radius: 7px;
    background: rgba(6, 15, 28, .58);
    color: #8290a7;
    font-size: 12px;
}

.questionnaire-header .public-back-link:hover,
.questionnaire-header .public-back-link:focus-visible {
    border-color: rgba(47, 124, 255, .48);
    color: #7eb1ff;
    transform: translateX(-2px);
}

.questionnaire-page .public-page-title {
    max-width: 100%;
    margin: 13px 0 8px;
    font-size: clamp(1.65rem, 2.9vw, 2.45rem);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.questionnaire-page .public-resource-context {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #a0aabb;
    font-size: 13px;
}

.questionnaire-context-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #9b55ff;
    box-shadow: 0 0 10px rgba(155, 85, 255, .62);
}

.questionnaire-page .questionnaire-note {
    display: block;
    margin: 11px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7f8a9e;
    font-size: 13px;
}

.questionnaire-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 480px) auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding: 10px 0;
}

.questionnaire-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 42px;
    padding: 0 13px;
    border: 1px solid rgba(77, 108, 150, .24);
    border-radius: 8px;
    background: rgba(5, 14, 26, .84);
    color: #6f7d93;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.questionnaire-search:focus-within {
    border-color: rgba(47, 124, 255, .62);
    background: rgba(7, 18, 34, .92);
    box-shadow: 0 0 0 3px rgba(47, 124, 255, .08);
}

.questionnaire-search i {
    flex: 0 0 auto;
    font-size: 14px;
}

.questionnaire-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #dfe7f4;
    font-family: "Nunito", sans-serif;
    font-size: 13px;
}

.questionnaire-search input::placeholder {
    color: #6f7b8e;
    opacity: 1;
}

.questionnaire-search input::-webkit-search-cancel-button {
    filter: invert(.65);
}

.questionnaire-toolbar-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(77, 108, 150, .2);
    border-radius: 7px;
    background: rgba(5, 14, 26, .62);
    color: #8190a6;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.questionnaire-toolbar-meta i {
    color: #2f7cff;
}

.questionnaire-page .questionnaire-list {
    gap: 10px;
}

.questionnaire-page .question-card {
    position: relative;
    padding: 14px;
    border-color: rgba(75, 111, 160, .21);
    border-radius: 10px;
    background:
        radial-gradient(circle at 92% 0, rgba(47, 124, 255, .045), transparent 27%),
        linear-gradient(145deg, rgba(5, 14, 27, .97), rgba(5, 12, 23, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

.questionnaire-page .question-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 13px;
    width: 34px;
    height: 1px;
    background: #2f7cff;
    box-shadow: 0 0 9px rgba(47, 124, 255, .44);
}

.questionnaire-page .question-card-heading {
    margin-bottom: 7px;
}

.questionnaire-page .question-number {
    color: #49b4ff;
    font-size: 13px;
    letter-spacing: .6px;
}

.questionnaire-page .question-type {
    color: #478ddc;
    font-size: 11px;
    font-weight: 700;
}

.questionnaire-page .question-text {
    margin-bottom: 11px;
    color: #eef3fa;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.42;
}

.questionnaire-page .question-options {
    gap: 6px;
}

.questionnaire-page .question-option {
    min-height: 36px;
    padding: 6px 9px;
    border-color: rgba(75, 104, 144, .2);
    border-radius: 6px;
    background: rgba(255, 255, 255, .018);
    color: #aab4c4;
    font-size: 13px;
    line-height: 1.4;
}

.questionnaire-page .question-option--correct {
    border-color: rgba(32, 214, 123, .38);
    background: linear-gradient(90deg, rgba(14, 121, 73, .2), rgba(18, 92, 62, .13));
    color: #d9f8e8;
    box-shadow: inset 2px 0 0 rgba(32, 214, 123, .58);
}

.questionnaire-page .question-option-marker {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(94, 115, 148, .1);
    color: #8290a6;
    font-size: 11px;
}

.questionnaire-page .question-option--correct .question-option-marker {
    background: rgba(32, 214, 123, .16);
    color: #33df88;
}

.questionnaire-page .question-correct-label {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #2fe186;
    font-size: 15px;
}

.questionnaire-no-options {
    margin: 0;
    color: #7f899a;
    font-size: 12px;
}

.questionnaire-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 110px;
    text-align: center;
}

.questionnaire-empty i {
    color: #2f7cff;
}

.questionnaire-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(75, 111, 160, .2);
    border-radius: 9px;
    background: rgba(4, 12, 23, .82);
}

.questionnaire-page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.questionnaire-page-number,
.questionnaire-page-ellipsis {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #7f8ba0;
    font-size: 12px;
    font-weight: 700;
}

a.questionnaire-page-number:hover,
a.questionnaire-page-number:focus-visible,
.questionnaire-page-number.is-active {
    border-color: rgba(47, 124, 255, .42);
    background: linear-gradient(145deg, rgba(47, 124, 255, .2), rgba(31, 91, 195, .12));
    color: #65a2ff;
}

.questionnaire-page-direction {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    min-height: 30px;
    padding: 0 8px;
    border-radius: 6px;
    color: #67a2fa;
    font-size: 12px;
    font-weight: 700;
    transition: color .2s ease, background-color .2s ease;
}

.questionnaire-page-direction:last-child {
    justify-self: end;
}

a.questionnaire-page-direction:hover,
a.questionnaire-page-direction:focus-visible {
    color: #9fc5ff;
    background: rgba(47, 124, 255, .08);
}

.questionnaire-page-direction.is-disabled {
    color: #475267;
    cursor: default;
}

@media (max-width: 700px) {
    .questionnaire-page {
        padding-top: 8px;
    }

    .questionnaire-page .public-page-title {
        max-width: 100%;
        font-size: clamp(1.45rem, 7vw, 2rem);
    }

    .questionnaire-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .questionnaire-toolbar-meta span {
        display: none;
    }

    .questionnaire-toolbar-meta {
        width: 42px;
        padding: 0;
    }

    .questionnaire-pagination {
        gap: 6px;
        padding-right: 6px;
        padding-left: 6px;
    }
}

@media (max-width: 480px) {
    .questionnaire-page .question-card {
        padding: 11px;
    }

    .questionnaire-page .question-text {
        font-size: 14px;
    }

    .questionnaire-page .question-option {
        align-items: flex-start;
        min-height: 34px;
        padding: 6px 7px;
        font-size: 12px;
    }

    .questionnaire-page .question-correct-label {
        align-self: center;
    }

    .questionnaire-page-direction span {
        display: none;
    }

    .questionnaire-page-direction {
        justify-content: center;
        width: 30px;
        padding: 0;
    }

    .questionnaire-page-number,
    .questionnaire-page-ellipsis {
        min-width: 27px;
        height: 28px;
        padding: 0 5px;
        font-size: 11px;
    }
}

/* ==========================================================
   SOBRE MÍ · PERFIL INTERACTIVO
========================================================== */

.about-shell {
    --about-blue: #2f7cff;
    --about-cyan: #36c9ff;
    --about-green: #20d67b;
    --about-violet: #a855f7;
    width: min(100%, 1450px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: "Nunito", sans-serif;
}

.about-hero,
.about-stats,
.about-story,
.about-workbench,
.about-stack,
.about-cta {
    border: 1px solid rgba(75, 111, 160, .25);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(4, 12, 23, .98), rgba(5, 15, 29, .95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 16px 40px rgba(0, 0, 0, .12);
}

.about-kicker {
    margin: 0;
    color: var(--about-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.4;
    text-transform: uppercase;
}

.about-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(390px, 1.05fr) minmax(330px, .95fr);
    grid-template-rows: 1fr auto;
    min-height: 550px;
    overflow: hidden;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image:
        linear-gradient(rgba(47, 124, 255, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 124, 255, .075) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 52%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 4%, #000 52%, #000 100%);
}

.about-hero::after {
    content: "";
    position: absolute;
    z-index: -2;
    top: -35%;
    right: -10%;
    width: 68%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 124, 255, .14), rgba(168, 85, 247, .055) 36%, transparent 68%);
    filter: blur(8px);
}

.about-hero-copy {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 46px 20px 36px 42px;
}

.about-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 6px 10px;
    border: 1px solid rgba(32, 214, 123, .24);
    border-radius: 999px;
    background: rgba(32, 214, 123, .055);
    color: #94bbaa;
    font-size: 10px;
    font-weight: 700;
}

.about-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--about-green);
    box-shadow: 0 0 10px rgba(32, 214, 123, .8);
    animation: aboutPulse 2s ease-in-out infinite;
}

.about-hero h1 {
    margin: 22px 0 18px;
    color: #f6f8fc;
    font-size: clamp(2.8rem, 4.35vw, 5.25rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .97;
}

.about-hero h1 > span {
    color: var(--about-blue);
}

.about-hero h1 em {
    color: transparent;
    font-style: normal;
    -webkit-text-stroke: 1.4px rgba(71, 148, 255, .9);
    text-shadow: 0 0 26px rgba(47, 124, 255, .14);
}

.about-lead {
    max-width: 620px;
    margin: 0;
    color: #9da8ba;
    font-size: 14px;
    line-height: 1.7;
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 23px;
}

.about-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(94, 125, 168, .28);
    border-radius: 8px;
    background: rgba(7, 18, 33, .72);
    color: #c4cfdf;
    font-size: 11px;
    font-weight: 800;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.about-button:hover,
.about-button:focus-visible {
    color: #fff;
    border-color: rgba(47, 124, 255, .56);
    background: rgba(47, 124, 255, .1);
    transform: translateY(-2px);
}

.about-button--primary {
    border-color: #2f7cff;
    background: linear-gradient(135deg, #3188ff, #175fdf);
    color: #fff;
    box-shadow: 0 10px 26px rgba(23, 95, 223, .25);
}

.about-identity {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    min-height: 410px;
    transform-style: preserve-3d;
    transition: transform .22s ease-out;
}

.about-identity::before {
    content: "";
    position: absolute;
    width: min(72%, 410px);
    aspect-ratio: 1;
    border: 1px solid rgba(47, 124, 255, .1);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 124, 255, .12), transparent 67%);
    box-shadow: 0 0 70px rgba(47, 124, 255, .07);
}

.about-orbit {
    position: absolute;
    border: 1px solid rgba(71, 148, 255, .22);
    border-radius: 50%;
    transform: rotate(-18deg);
}

.about-orbit--one {
    width: min(74%, 420px);
    aspect-ratio: 1.45;
    animation: aboutOrbit 14s linear infinite;
}

.about-orbit--two {
    width: min(60%, 340px);
    aspect-ratio: 1;
    border-style: dashed;
    border-color: rgba(168, 85, 247, .22);
    animation: aboutOrbitReverse 20s linear infinite;
}

.about-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: min(44%, 230px);
    aspect-ratio: .84;
    overflow: hidden;
    border: 1px solid rgba(66, 140, 255, .56);
    border-radius: 22% 22% 30% 30% / 18% 18% 24% 24%;
    background:
        linear-gradient(rgba(47, 124, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 124, 255, .08) 1px, transparent 1px),
        linear-gradient(145deg, #0b1d38, #07111f 65%);
    background-size: 18px 18px, 18px 18px, auto;
    box-shadow: inset 0 0 50px rgba(47, 124, 255, .12), 0 25px 60px rgba(0, 0, 0, .42), 0 0 30px rgba(47, 124, 255, .1);
    transform: translateZ(25px);
}

.about-avatar::before,
.about-avatar::after {
    content: "";
    position: absolute;
    width: 36px;
    height: 5px;
    bottom: 13px;
    border-radius: 99px;
    background: rgba(47, 124, 255, .7);
    box-shadow: 0 0 14px rgba(47, 124, 255, .7);
}

.about-avatar::before { left: 24px; }
.about-avatar::after { right: 24px; background: rgba(168, 85, 247, .75); }

.about-avatar strong {
    color: #f0f6ff;
    font-size: clamp(3.2rem, 5.8vw, 6rem);
    font-weight: 800;
    letter-spacing: -.09em;
    text-shadow: 4px 4px 0 rgba(47, 124, 255, .4), -2px -2px 0 rgba(168, 85, 247, .28);
}

.about-avatar-prompt {
    position: absolute;
    top: 16px;
    left: 19px;
    color: var(--about-green);
    font-size: 12px;
    font-weight: 800;
}

.about-avatar-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
    background: linear-gradient(180deg, transparent, rgba(54, 201, 255, .28), transparent);
    box-shadow: 0 0 18px rgba(54, 201, 255, .2);
    animation: aboutScan 4.8s linear infinite;
}

.about-float-tag {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(47, 124, 255, .4);
    border-radius: 12px;
    background: rgba(5, 15, 29, .9);
    color: var(--about-cyan);
    font-size: 17px;
    font-weight: 800;
    box-shadow: 0 13px 28px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.about-float-tag--code { top: 18%; left: 13%; animation: aboutFloat 5s ease-in-out infinite; }
.about-float-tag--db { right: 12%; top: 29%; color: var(--about-violet); animation: aboutFloat 6s ease-in-out -1.5s infinite; }
.about-float-tag--idea { right: 22%; bottom: 9%; color: #f3c728; animation: aboutFloat 5.5s ease-in-out -.8s infinite; }

.about-terminal {
    position: relative;
    z-index: 5;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 170px 1fr;
    min-height: 96px;
    border-top: 1px solid rgba(75, 111, 160, .24);
    background: rgba(2, 8, 16, .78);
}

.about-terminal-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 15px 20px;
    border-right: 1px solid rgba(75, 111, 160, .2);
    color: #74839a;
    font-size: 10px;
}

.about-terminal-lights { display: flex; gap: 6px; }
.about-terminal-lights i { width: 7px; height: 7px; border-radius: 50%; background: #ff5c67; }
.about-terminal-lights i:nth-child(2) { background: #f3bd36; }
.about-terminal-lights i:nth-child(3) { background: #20d67b; }

.about-terminal-body {
    display: grid;
    grid-template-columns: auto minmax(130px, 1fr) auto minmax(200px, 1.2fr) auto;
    align-items: center;
    gap: 9px 14px;
    padding: 15px 22px;
    font-size: 10.5px;
}

.about-terminal-body p { margin: 0; color: #8190a6; }
.about-terminal-prompt { color: var(--about-green); font-weight: 800; }
.about-terminal-result { color: #c8d3e3 !important; }
.about-cursor { display: inline-block; width: 7px; height: 12px; margin-left: 5px; vertical-align: -2px; background: var(--about-green); animation: aboutBlink 1s steps(1) infinite; }

.about-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 10px 0;
}

.about-stats article {
    display: grid;
    grid-template-columns: 40px auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    min-height: 62px;
    padding: 0 24px;
}

.about-stats article + article { border-left: 1px solid rgba(75, 111, 160, .2); }
.about-stats i { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(47, 124, 255, .35); border-radius: 9px; color: var(--about-blue); background: rgba(47, 124, 255, .07); }
.about-stats article:nth-child(2) i { color: var(--about-violet); border-color: rgba(168, 85, 247, .35); background: rgba(168, 85, 247, .07); }
.about-stats article:nth-child(3) i { color: var(--about-green); border-color: rgba(32, 214, 123, .35); background: rgba(32, 214, 123, .07); }
.about-stats article:nth-child(4) i { color: var(--about-cyan); border-color: rgba(54, 201, 255, .35); background: rgba(54, 201, 255, .07); }
.about-stats strong { color: #f2f6fb; font-size: 20px; line-height: 1; }
.about-stats span { align-self: start; color: #778398; font-size: 8px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }

.about-story {
    display: grid;
    grid-template-columns: minmax(320px, .92fr) minmax(400px, 1.08fr);
    gap: 42px;
    padding: 42px;
}

.about-story-intro h2,
.about-section-heading h2,
.about-stack-copy h2,
.about-cta h2 {
    margin: 13px 0 18px;
    color: #f3f6fb;
    font-size: clamp(1.8rem, 2.65vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.05;
}

.about-story-intro h2 span { color: var(--about-blue); }
.about-story-intro > p:not(.about-kicker), .about-stack-copy > p:not(.about-kicker) { max-width: 620px; margin: 0 0 13px; color: #8d99ab; font-size: 12.5px; line-height: 1.7; }

.about-timeline { position: relative; display: flex; flex-direction: column; gap: 9px; }
.about-timeline::before { content: ""; position: absolute; top: 25px; bottom: 25px; left: 28px; width: 1px; background: linear-gradient(var(--about-blue), var(--about-violet), var(--about-green)); opacity: .55; }
.about-timeline article { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 15px; padding: 15px; border: 1px solid rgba(75, 111, 160, .19); border-radius: 10px; background: rgba(7, 17, 31, .5); transition: border-color .2s ease, transform .2s ease, background-color .2s ease; }
.about-timeline article:hover { border-color: rgba(47, 124, 255, .42); background: rgba(10, 25, 46, .67); transform: translateX(4px); }
.about-timeline-index { position: relative; z-index: 1; display: grid; place-items: center; align-self: start; width: 28px; height: 28px; margin-top: 4px; border: 1px solid rgba(47, 124, 255, .5); border-radius: 50%; background: #07111f; color: #68a4ff; font-size: 9px; font-weight: 800; }
.about-timeline small { color: var(--about-blue); font-size: 7px; font-weight: 800; letter-spacing: 1px; }
.about-timeline h3 { margin: 3px 0 5px; color: #eaf0f8; font-size: 15px; font-weight: 800; }
.about-timeline p { margin: 0; color: #8793a5; font-size: 11px; line-height: 1.5; }

.about-workbench { padding: 36px 28px 28px; }
.about-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding: 0 6px; }
.about-section-heading h2 { margin-bottom: 0; }
.about-section-heading > span { padding: 7px 10px; border: 1px solid rgba(168, 85, 247, .27); border-radius: 6px; color: #b579ed; font-size: 8px; font-weight: 800; letter-spacing: .8px; }
.about-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.about-principles article { position: relative; min-height: 205px; overflow: hidden; padding: 21px; border: 1px solid rgba(75, 111, 160, .2); border-radius: 11px; background: linear-gradient(145deg, rgba(8, 19, 35, .8), rgba(4, 12, 23, .7)); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.about-principles article::after { content: ""; position: absolute; right: -38px; bottom: -45px; width: 100px; height: 100px; border: 1px solid rgba(47, 124, 255, .12); border-radius: 50%; }
.about-principles article:hover { transform: translateY(-5px); border-color: rgba(47, 124, 255, .42); box-shadow: 0 18px 32px rgba(0, 0, 0, .2); }
.about-principles article > span { position: absolute; top: 13px; right: 15px; color: rgba(104, 148, 210, .25); font-size: 22px; font-weight: 800; }
.about-principles i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 26px; border: 1px solid rgba(47, 124, 255, .35); border-radius: 9px; background: rgba(47, 124, 255, .07); color: var(--about-blue); font-size: 17px; }
.about-principles article:nth-child(2) i { color: var(--about-green); border-color: rgba(32, 214, 123, .35); background: rgba(32, 214, 123, .07); }
.about-principles article:nth-child(3) i { color: var(--about-violet); border-color: rgba(168, 85, 247, .35); background: rgba(168, 85, 247, .07); }
.about-principles article:nth-child(4) i { color: #f3c728; border-color: rgba(243, 199, 40, .35); background: rgba(243, 199, 40, .07); }
.about-principles h3 { margin: 0 0 8px; color: #eaf0f8; font-size: 14px; font-weight: 800; }
.about-principles p { margin: 0; color: #8490a3; font-size: 10.5px; line-height: 1.55; }

.about-stack { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; padding: 38px; }
.about-stack-copy h2 { margin-bottom: 12px; }
.about-update { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 18px; color: #78859a; font-size: 9px; }
.about-update i { color: var(--about-green); }
.about-update strong { color: #b8c3d2; }
.about-stack-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; align-content: center; }
.about-stack-grid span { display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 0 12px; border: 1px solid rgba(75, 111, 160, .2); border-radius: 9px; background: rgba(7, 17, 31, .62); color: #aeb9c9; font-size: 10px; font-weight: 700; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.about-stack-grid span:hover { color: #fff; border-color: rgba(47, 124, 255, .5); transform: translateY(-3px); }
.about-stack-grid i { color: var(--about-blue); font-size: 18px; }

.about-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px 40px; }
.about-cta::after { content: ">_"; position: absolute; right: 16%; color: rgba(47, 124, 255, .035); font-size: 130px; font-weight: 800; line-height: 1; }
.about-cta h2 { margin-bottom: 0; font-size: clamp(1.7rem, 2.7vw, 3rem); }
.about-cta a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 190px; min-height: 52px; padding: 0 16px; border: 1px solid rgba(47, 124, 255, .5); border-radius: 9px; background: rgba(47, 124, 255, .09); color: #71a8ff; font-size: 11px; font-weight: 800; transition: transform .2s ease, background-color .2s ease; }
.about-cta a:hover { color: #fff; background: rgba(47, 124, 255, .18); transform: translateY(-3px); }

.about-reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.2, .8, .2, 1); }
.about-reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes aboutPulse { 50% { opacity: .45; transform: scale(.75); } }
@keyframes aboutBlink { 50% { opacity: 0; } }
@keyframes aboutScan { from { top: -12px; } to { top: 105%; } }
@keyframes aboutFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes aboutOrbit { to { transform: rotate(342deg); } }
@keyframes aboutOrbitReverse { to { transform: rotate(-378deg); } }

@media (min-width: 1800px) {
    .about-shell { margin-left: 0; margin-right: auto; }
}

@media (max-width: 1180px) {
    .about-hero h1 { font-size: clamp(2.5rem, 4.7vw, 4rem); }
    .about-hero-copy { padding-left: 30px; }
    .about-story { gap: 26px; padding: 32px; }
    .about-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .about-hero { grid-template-columns: 1fr; }
    .about-hero-copy { padding: 34px 24px 12px; }
    .about-identity { min-height: 360px; }
    .about-avatar { width: min(38%, 190px); }
    .about-terminal { grid-template-columns: 1fr; }
    .about-terminal-top { flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid rgba(75, 111, 160, .2); }
    .about-terminal-body { grid-template-columns: auto 1fr; }
    .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-stats article:nth-child(3) { border-left: 0; }
    .about-stats article:nth-child(n + 3) { border-top: 1px solid rgba(75, 111, 160, .2); }
    .about-story { grid-template-columns: 1fr; }
    .about-stack { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .about-shell { gap: 9px; }
    .about-hero, .about-stats, .about-story, .about-workbench, .about-stack, .about-cta { border-radius: 12px; }
    .about-hero-copy { padding: 26px 15px 8px; }
    .about-hero h1 { margin-top: 18px; font-size: clamp(2.15rem, 10.5vw, 3.1rem); }
    .about-lead { font-size: 12px; }
    .about-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .about-button { min-width: 0; padding: 0 8px; font-size: 9.5px; text-align: center; }
    .about-identity { min-height: 300px; }
    .about-avatar { width: min(45%, 165px); }
    .about-float-tag { width: 38px; height: 38px; font-size: 14px; }
    .about-terminal-body { padding: 13px; font-size: 9px; }
    .about-stats article { grid-template-columns: 32px auto; min-height: 64px; padding: 8px 12px; column-gap: 9px; }
    .about-stats i { width: 31px; height: 31px; font-size: 13px; }
    .about-stats strong { font-size: 16px; }
    .about-stats span { font-size: 6.5px; }
    .about-story { gap: 22px; padding: 24px 15px; }
    .about-story-intro h2, .about-section-heading h2, .about-stack-copy h2, .about-cta h2 { font-size: 1.65rem; }
    .about-story-intro > p:not(.about-kicker), .about-stack-copy > p:not(.about-kicker) { font-size: 11px; }
    .about-timeline article { grid-template-columns: 40px 1fr; padding: 12px; }
    .about-timeline::before { left: 25px; }
    .about-workbench { padding: 25px 12px 12px; }
    .about-section-heading { align-items: flex-start; flex-direction: column; }
    .about-principles { gap: 8px; }
    .about-principles article { min-height: 188px; padding: 15px; }
    .about-principles i { margin-bottom: 21px; }
    .about-principles h3 { font-size: 12px; }
    .about-principles p { font-size: 9px; }
    .about-stack { gap: 20px; padding: 25px 15px; }
    .about-stack-grid { gap: 7px; }
    .about-stack-grid span { min-height: 48px; padding: 0 9px; font-size: 9px; }
    .about-cta { align-items: flex-start; flex-direction: column; padding: 25px 15px; }
    .about-cta a { width: 100%; min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .about-status span, .about-orbit, .about-avatar-scan, .about-float-tag, .about-cursor { animation: none; }
    .about-reveal { opacity: 1; transform: none; transition: none; }
    .about-identity { transition: none; }
}

/* ==========================================================
   SOBRE MÍ · PERFIL DASHBOARD
========================================================== */

.profile-shell {
    --profile-blue: #2f7cff;
    --profile-cyan: #24a8ff;
    --profile-violet: #a960ff;
    --profile-green: #20d67b;
    --profile-border: rgba(51, 91, 146, .36);
    width: min(100%, 1450px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #f4f7fb;
    font-family: "Nunito", sans-serif;
}

.profile-hero,
.profile-learning,
.profile-tools,
.profile-contact {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--profile-border);
    border-radius: 14px;
    background:
        radial-gradient(circle at 88% 15%, rgba(47, 124, 255, .07), transparent 32%),
        linear-gradient(145deg, rgba(3, 11, 22, .98), rgba(4, 14, 27, .97));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02), 0 14px 35px rgba(0, 0, 0, .14);
}

.profile-kicker,
.profile-section-title h2 {
    margin: 0;
    color: #2992ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.25px;
    line-height: 1.4;
    text-transform: uppercase;
}

.profile-hero {
    display: grid;
    grid-template-columns: minmax(295px, 1fr) minmax(360px, 1.05fr) minmax(235px, .72fr);
    min-height: 390px;
    isolation: isolate;
}

.profile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(47, 124, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 124, 255, .055) 1px, transparent 1px);
    background-size: 31px 31px;
    opacity: .48;
    -webkit-mask-image: linear-gradient(90deg, transparent 25%, transparent 58%, #000 82%, #000);
    mask-image: linear-gradient(90deg, transparent 25%, transparent 58%, #000 82%, #000);
}

.profile-intro {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 28px 22px 30px;
}

.profile-intro h1 {
    display: flex;
    flex-direction: column;
    margin: 15px 0 21px;
    font-size: clamp(3.8rem, 5.25vw, 6rem);
    font-weight: 800;
    letter-spacing: -.065em;
    line-height: .79;
}

.profile-intro h1 span {
    color: #f6f7fb;
    text-shadow: 0 5px 24px rgba(0, 0, 0, .34);
}

.profile-intro h1 strong {
    color: transparent;
    background: linear-gradient(105deg, #287aff 4%, #586dff 52%, #a65cfa 100%);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 5px 18px rgba(55, 91, 255, .17));
}

.profile-intro-text {
    margin: 0;
    color: #c0c7d3;
    font-size: clamp(.9rem, 1.2vw, 1.16rem);
    font-weight: 600;
    line-height: 1.55;
}

.profile-intro-text mark,
.profile-intro-text em {
    padding: 0;
    background: transparent;
    color: #3789ff;
    font-style: normal;
    font-weight: 800;
}

.profile-intro-text em {
    color: #a764ff;
}

.profile-education-card {
    align-self: center;
    min-width: 0;
    margin: 25px 0;
    overflow: hidden;
    border: 1px solid rgba(51, 91, 146, .38);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(5, 16, 31, .88), rgba(3, 11, 22, .82));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .02);
}

.profile-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 21px 24px 0;
    color: #3496ff;
}

.profile-card-heading i {
    font-size: 20px;
}

.profile-card-heading span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.profile-degree-copy {
    padding: 20px 24px 21px 57px;
}

.profile-degree-copy small {
    color: #a4adbc;
    font-size: 10.5px;
    font-weight: 600;
}

.profile-degree-copy h2 {
    margin: 6px 0 6px;
    color: #f2f5fa;
    font-size: clamp(1.25rem, 1.6vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
}

.profile-degree-copy > p {
    margin: 0;
    color: #929dad;
    font-size: 10.5px;
}

.profile-active-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding: 5px 10px;
    border: 1px solid rgba(32, 214, 123, .29);
    border-radius: 999px;
    background: rgba(32, 214, 123, .045);
    color: #42d98d;
    font-size: 8px;
    font-weight: 800;
}

.profile-active-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--profile-green);
    box-shadow: 0 0 9px rgba(32, 214, 123, .8);
    animation: profileStatusPulse 2s ease-in-out infinite;
}

.profile-quick-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 380px);
    max-width: 100%;
    margin-inline: auto;
    border-top: 1px solid rgba(51, 91, 146, .31);
}

.profile-quick-facts > div {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 76px;
    padding: 12px 13px;
}

.profile-quick-facts > div + div {
    border-left: 1px solid rgba(51, 91, 146, .25);
}

.profile-quick-facts > div > i {
    color: #2f8fff;
    font-size: 20px;
}

.profile-quick-facts p {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.profile-quick-facts small {
    color: #298af1;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .65px;
}

.profile-quick-facts strong {
    color: #dbe2ed;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.profile-semester-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    transform-style: preserve-3d;
    transition: transform .22s ease-out;
}

.profile-semester-stage::before,
.profile-semester-stage::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 35px;
    border-color: #2283ff;
    opacity: .82;
}

.profile-semester-stage::before {
    top: 35px;
    right: 34px;
    border-top: 1px solid;
    border-right: 1px solid;
}

.profile-semester-stage::after {
    left: 24px;
    bottom: 33px;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-color: #9359ee;
}

.profile-semester-number {
    position: relative;
    z-index: 2;
    color: transparent;
    font-size: clamp(7.6rem, 11vw, 12rem);
    font-weight: 700;
    letter-spacing: -.1em;
    line-height: .75;
    -webkit-text-stroke: 1.5px #2588ff;
    text-shadow: 0 0 28px rgba(47, 124, 255, .1);
    animation: profileNumberGlow 4.8s ease-in-out infinite;
}

.profile-semester-stage > strong {
    position: relative;
    z-index: 2;
    margin-top: 27px;
    color: #ac66f7;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 7px;
    transform: translateX(3px);
}

.profile-semester-grid,
.profile-semester-dots {
    position: absolute;
    pointer-events: none;
}

.profile-semester-grid {
    inset: 37% 7% 17% 2%;
    background-image:
        linear-gradient(rgba(47, 124, 255, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 124, 255, .11) 1px, transparent 1px);
    background-size: 19px 19px;
    -webkit-mask-image: radial-gradient(ellipse, #000 5%, transparent 70%);
    mask-image: radial-gradient(ellipse, #000 5%, transparent 70%);
}

.profile-semester-dots {
    right: 27px;
    bottom: 26px;
    width: 120px;
    height: 70px;
    background-image: radial-gradient(circle, rgba(38, 135, 255, .9) 1.2px, transparent 1.5px);
    background-size: 17px 17px;
    opacity: .72;
    -webkit-mask-image: radial-gradient(ellipse, #000 10%, transparent 74%);
    mask-image: radial-gradient(ellipse, #000 10%, transparent 74%);
    animation: profileDots 5s ease-in-out infinite;
}

.profile-knowledge-row {
    display: grid;
    grid-template-columns: minmax(360px, .62fr) minmax(520px, 1fr);
    gap: 10px;
}

.profile-learning,
.profile-tools {
    min-width: 0;
    padding: 18px;
}

.profile-learning {
    background:
        radial-gradient(circle at 90% 2%, rgba(161, 80, 255, .12), transparent 36%),
        linear-gradient(145deg, rgba(8, 11, 29, .98), rgba(7, 10, 27, .97));
    border-color: rgba(102, 55, 152, .39);
}

.profile-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.profile-section-title > i {
    color: #2f91ff;
    font-size: 16px;
}

.profile-section-title--violet h2,
.profile-section-title--violet > i {
    color: #a969ff;
}

.profile-learning-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.profile-learning-grid article,
.profile-tools-grid article {
    display: flex;
    align-items: center;
    min-width: 0;
    border: 1px solid rgba(71, 69, 135, .29);
    border-radius: 8px;
    background: rgba(10, 14, 36, .58);
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.profile-learning-grid article {
    gap: 10px;
    min-height: 60px;
    padding: 9px 11px;
}

.profile-learning-grid article:hover,
.profile-tools-grid article:hover {
    border-color: rgba(54, 133, 255, .48);
    background: rgba(13, 25, 49, .72);
    box-shadow: 0 12px 23px rgba(0, 0, 0, .16);
    transform: translateY(-3px);
}

.profile-learning-grid p {
    margin: 0;
    color: #b8bfcd;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
}

.profile-tech-mark,
.profile-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-weight: 900;
}

.profile-tech-mark {
    width: 27px;
    height: 27px;
    color: #e1e7f0;
    font-size: 13px;
}

.profile-tech-mark--python,
.profile-tool-icon--python {
    border-radius: 7px;
    background: linear-gradient(135deg, #2d8cff 50%, #f0cc3a 50%);
    color: #07111f;
    font-size: 9px;
}

.profile-tech-mark--django,
.profile-tool-icon--django {
    color: #edf2fa;
    font-size: 20px;
    letter-spacing: -2px;
}

.profile-tech-mark--database { color: #b9a5ed; font-size: 21px; }
.profile-tech-mark--web { color: #be75f6; font-size: 20px; }
.profile-tech-mark--data { color: #b8c2d5; font-size: 20px; }
.profile-tech-mark--security { color: #c784ff; font-size: 21px; }

.profile-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.profile-tools-grid article {
    gap: 10px;
    min-height: 58px;
    padding: 8px 11px;
    border-color: rgba(41, 83, 137, .31);
    background: rgba(5, 16, 31, .6);
}

.profile-tool-icon {
    width: 31px;
    height: 31px;
    color: #b8c7dc;
    font-size: 22px;
}

.profile-tool-icon--sql { color: #c2b6e9; }
.profile-tool-icon--postgres { color: #4e9cf5; }
.profile-tool-icon--etl { color: #3294ff; }
.profile-tool-icon--html { gap: 0; color: #258cff; font-size: 20px; }
.profile-tool-icon--html i:last-child { color: #b05bff; margin-left: -6px; }
.profile-tool-icon--git { color: #eef2f8; }
.profile-tool-icon--javascript { color: #f1ce36; }
.profile-tool-icon--linux { color: #f0f3f8; }

.profile-tools-grid p {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.profile-tools-grid strong {
    color: #e0e6ef;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.profile-tools-grid small {
    color: #78869a;
    font-size: 8.5px;
    line-height: 1.25;
}

.profile-contact {
    display: grid;
    grid-template-columns: minmax(255px, .9fr) minmax(190px, .72fr) minmax(390px, 1.25fr) minmax(180px, .7fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 20px;
    min-height: 255px;
    padding: 21px 21px 0;
}

.profile-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(47, 124, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 124, 255, .045) 1px, transparent 1px);
    background-size: 27px 27px;
    opacity: .42;
    -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 45%, #000 100%);
    pointer-events: none;
}

.profile-contact-heading,
.profile-contact-copy,
.profile-social-grid,
.profile-contact-cta,
.profile-status-bar {
    position: relative;
    z-index: 1;
}

.profile-contact-heading h2 {
    margin: 10px 0 0;
    color: #f0f3f8;
    font-size: clamp(1.55rem, 2.15vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.profile-contact-heading h2 span {
    color: #2f83ff;
}

.profile-contact-heading h2 strong {
    color: #a55dff;
}

.profile-contact-copy {
    margin: 0;
    color: #929daf;
    font-size: 10.5px;
    line-height: 1.6;
}

.profile-social-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: min(100%, 540px);
    justify-self: center;
}

.profile-social-grid a {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    grid-template-areas: "icon name arrow";
    align-items: center;
    min-width: 0;
    min-height: 64px;
    padding: 8px 9px;
    border: 1px solid rgba(51, 91, 146, .31);
    border-radius: 9px;
    background: rgba(5, 16, 31, .68);
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.profile-social-grid a:hover {
    color: inherit;
    border-color: rgba(47, 124, 255, .5);
    background: rgba(9, 23, 43, .82);
    transform: translateY(-4px);
}

.profile-social-grid a > span {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(47, 124, 255, .4);
    border-radius: 7px;
    background: rgba(47, 124, 255, .08);
    color: #3e91ff;
    font-size: 19px;
}

.profile-social-grid a:nth-child(2) > span { color: #eef2f8; border-color: rgba(238, 242, 248, .22); background: rgba(238, 242, 248, .045); }
.profile-social-grid a:nth-child(3) > span { color: #ed60c0; border-color: rgba(237, 96, 192, .28); background: rgba(237, 96, 192, .055); }

.profile-social-grid a > i {
    grid-area: arrow;
    justify-self: end;
    color: #687890;
    font-size: 11px;
}

.profile-social-grid strong,
.profile-social-grid small {
    grid-column: auto;
}

.profile-social-grid strong {
    grid-area: name;
    align-self: center;
    margin: 0;
    color: #e2e8f1;
    font-size: 11px;
}

.profile-social-grid small {
    color: #77859a;
    font-size: 7.5px;
}

.profile-contact-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 122px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(62, 110, 255, .5);
    border-radius: 9px;
    background:
        radial-gradient(circle at 100% 0, rgba(130, 59, 255, .55), transparent 44%),
        linear-gradient(145deg, #1f42cf, #081e72);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 27px rgba(23, 64, 198, .24);
    transition: transform .2s ease, filter .2s ease;
}

.profile-contact-cta:hover {
    color: #fff;
    filter: brightness(1.12);
    transform: translateY(-4px);
}

.profile-contact-cta > strong {
    font-size: 12px;
    line-height: 1.35;
}

.profile-contact-cta > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    font-size: 8px;
    font-weight: 700;
}

.profile-contact-cta > i {
    position: absolute;
    top: 13px;
    right: 13px;
    font-size: 11px;
}

.profile-status-bar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 43px;
    margin: 0 -21px;
    padding: 0 26px;
    border-top: 1px solid rgba(51, 91, 146, .25);
    color: #8c96a7;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 2px;
}

.profile-status-bar span:nth-child(2) { justify-self: center; }
.profile-status-bar span:nth-child(3) { justify-self: end; }
.profile-status-bar i { display: inline-block; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%; background: #758399; vertical-align: middle; }

.profile-reveal {
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .22s ease-out, transform .22s ease-out;
}

.profile-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* El primer bloque debe estar disponible desde el primer render. */
.profile-hero.profile-reveal {
    opacity: 1;
    transform: none;
}

@keyframes profileStatusPulse {
    50% { opacity: .45; transform: scale(.74); }
}

@keyframes profileNumberGlow {
    0%, 100% { -webkit-text-stroke-color: #2588ff; filter: drop-shadow(0 0 0 rgba(47, 124, 255, 0)); }
    50% { -webkit-text-stroke-color: #649eff; filter: drop-shadow(0 0 10px rgba(47, 124, 255, .18)); }
}

@keyframes profileDots {
    0%, 100% { opacity: .48; transform: translateY(0); }
    50% { opacity: .85; transform: translateY(-3px); }
}

@media (min-width: 1800px) {
    .profile-shell {
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 1240px) and (min-width: 961px) {
    .profile-hero {
        grid-template-columns: minmax(250px, .85fr) minmax(325px, 1.08fr) minmax(185px, .6fr);
    }

    .profile-intro {
        padding-left: 17px;
    }

    .profile-intro h1 {
        font-size: clamp(3.25rem, 5vw, 4.6rem);
    }

    .profile-degree-copy {
        padding-left: 24px;
    }

    .profile-quick-facts > div {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 9px;
    }

    .profile-quick-facts > div > i {
        font-size: 15px;
    }

    .profile-knowledge-row {
        grid-template-columns: minmax(330px, .7fr) minmax(440px, 1fr);
    }

    .profile-learning,
    .profile-tools {
        padding: 14px;
    }

    .profile-tools-grid article {
        padding-right: 7px;
        padding-left: 7px;
    }

    .profile-contact {
        grid-template-columns: minmax(225px, .9fr) minmax(170px, .65fr) minmax(350px, 1.35fr);
    }

    .profile-contact-cta {
        grid-column: 3;
        min-height: 72px;
    }

    .profile-social-grid {
        grid-row: span 2;
    }
}

@media (max-width: 900px) {
    .profile-hero {
        grid-template-columns: 1fr 1fr;
    }

    .profile-intro {
        grid-column: 1;
    }

    .profile-education-card {
        grid-column: 2;
        margin-right: 16px;
    }

    .profile-semester-stage {
        grid-column: 1 / -1;
        min-height: 250px;
        border-top: 1px solid rgba(51, 91, 146, .25);
    }

    .profile-semester-number {
        font-size: 9rem;
    }

    .profile-knowledge-row {
        grid-template-columns: 1fr;
    }

    .profile-contact {
        grid-template-columns: 1fr 1fr;
    }

    .profile-social-grid {
        grid-column: 1 / -1;
    }

    .profile-contact-cta {
        min-height: 100px;
    }
}

@media (max-width: 620px) {
    .profile-shell {
        gap: 8px;
    }

    .profile-hero,
    .profile-learning,
    .profile-tools,
    .profile-contact {
        border-radius: 11px;
    }

    .profile-hero {
        grid-template-columns: 1fr;
    }

    .profile-intro,
    .profile-education-card,
    .profile-semester-stage {
        grid-column: 1;
    }

    .profile-intro {
        padding: 24px 14px 22px;
    }

    .profile-intro h1 {
        margin-top: 13px;
        font-size: clamp(3.35rem, 18vw, 5rem);
    }

    .profile-intro-text {
        font-size: 13px;
    }

    .profile-education-card {
        margin: 0 11px 12px;
    }

    .profile-card-heading,
    .profile-degree-copy {
        padding-right: 15px;
        padding-left: 15px;
    }

    .profile-degree-copy h2 {
        font-size: 1.25rem;
    }

    .profile-degree-copy > p {
        font-size: 10px;
    }

    .profile-quick-facts > div {
        grid-template-columns: 24px minmax(0, auto);
        justify-content: center;
        padding: 9px;
    }

    .profile-quick-facts strong {
        font-size: 9px;
    }

    .profile-semester-stage {
        min-height: 225px;
    }

    .profile-semester-number {
        font-size: 8rem;
    }

    .profile-learning,
    .profile-tools {
        padding: 13px;
    }

    .profile-learning-grid,
    .profile-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-learning-grid article,
    .profile-tools-grid article {
        min-height: 64px;
        padding: 8px;
    }

    .profile-tools-grid strong {
        font-size: 9px;
    }

    .profile-tools-grid small,
    .profile-learning-grid p {
        font-size: 8px;
    }

    .profile-contact {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 20px 13px 0;
    }

    .profile-social-grid,
    .profile-contact-heading,
    .profile-contact-copy,
    .profile-contact-cta {
        grid-column: 1;
    }

    .profile-contact-heading h2 {
        font-size: 1.8rem;
    }

    .profile-contact-copy {
        font-size: 10px;
    }

    .profile-social-grid {
        gap: 6px;
    }

    .profile-social-grid a {
        min-height: 70px;
        padding: 8px;
    }

    .profile-social-grid a > span {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .profile-social-grid strong {
        margin: 0;
        font-size: 10px;
    }

    .profile-contact-cta {
        width: min(100%, 240px);
        min-height: 104px;
        justify-self: center;
        align-items: center;
        text-align: center;
    }

    .profile-status-bar {
        margin: 0 -13px;
        padding: 0 13px;
        font-size: 6px;
        letter-spacing: 1px;
    }
}

@media (max-width: 390px) {
    .profile-quick-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-quick-facts > div + div {
        border-top: 0;
        border-left: 1px solid rgba(51, 91, 146, .25);
    }

    .profile-social-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .profile-social-grid a {
        grid-template-columns: auto auto;
        grid-template-rows: 30px auto;
        grid-template-areas:
            "icon icon"
            "name arrow";
        justify-content: center;
        min-height: 82px;
        padding: 8px 5px;
        column-gap: 4px;
        row-gap: 6px;
        text-align: center;
    }

    .profile-social-grid a > span {
        justify-self: center;
    }

    .profile-social-grid strong {
        justify-self: end;
        font-size: 8.5px;
    }

    .profile-social-grid a > i {
        justify-self: start;
        font-size: 9px;
    }

    .profile-status-bar span:first-child {
        max-width: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-active-status i,
    .profile-semester-number,
    .profile-semester-dots {
        animation: none;
    }

    .profile-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .profile-semester-stage {
        transition: none;
    }
}

/* Legibilidad final del perfil */
.profile-kicker,
.profile-section-title h2 {
    font-size: 10px;
}

.profile-card-heading span {
    font-size: 10px;
}

.profile-degree-copy small {
    font-size: 11px;
}

.profile-degree-copy > p {
    font-size: 10.5px;
}

.profile-active-status {
    font-size: 9px;
}

.profile-quick-facts small {
    font-size: 7.5px;
}

.profile-quick-facts strong {
    font-size: 10px;
}

.profile-learning-grid p {
    font-size: 10px;
}

.profile-tools-grid strong {
    font-size: 11.5px;
}

.profile-tools-grid small {
    font-size: 8.5px;
}

.profile-contact-copy {
    font-size: 10.5px;
}

.profile-social-grid strong {
    font-size: 11px;
}

.profile-social-grid small {
    font-size: 8.5px;
}

.profile-contact-cta > strong {
    font-size: 13px;
}

.profile-contact-cta > span {
    font-size: 9px;
}

.profile-status-bar {
    font-size: 8px;
}

@media (max-width: 620px) {
    .profile-tools-grid strong {
        font-size: 10px;
    }

    .profile-tools-grid small,
    .profile-learning-grid p {
        font-size: 8px;
    }
}

/* ==========================================================
   RESPONSIVE MÓVIL · COMPORTAMIENTO TIPO APP
========================================================== */

@media (max-width: 760px) {
    /* Cuando existe un recurso visual, se presenta antes del contenido. */
    .home-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .home-hero-art {
        grid-column: 1;
        grid-row: 1;
        order: -1;
        min-height: 235px;
        padding: 8px 10px 0;
    }

    .home-hero-copy {
        grid-column: 1;
        grid-row: 2;
        padding-top: 12px;
    }

    .home-machine-image {
        width: min(100%, 470px);
        height: auto;
        max-height: 250px;
    }

    .catalog-hero-visual {
        grid-column: 1;
        grid-row: 1;
        order: -1;
    }

    .catalog-hero-copy {
        grid-column: 1;
        grid-row: 2;
    }

    /* Acciones agrupadas, cómodas al tacto y sin estirarse. */
    .home-hero-actions {
        display: flex;
        align-items: center;
        align-self: flex-start;
        flex-wrap: wrap;
        width: auto;
        max-width: 100%;
        gap: 8px;
    }

    .home-action {
        width: auto;
        min-width: 0;
        min-height: 42px;
        padding-inline: 13px;
        border-radius: 10px;
    }

    .catalog-toolbar {
        padding: 10px;
        border-radius: 12px;
    }

    .catalog-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .catalog-search {
        grid-column: 1 / -1;
        min-height: 44px;
    }

    .catalog-select {
        grid-column: auto;
        min-width: 0;
        min-height: 45px;
        padding: 4px 8px;
    }

    .catalog-select-icon {
        font-size: 13px;
    }

    .catalog-select-label {
        font-size: 8px;
    }

    .catalog-select select {
        min-width: 0;
        font-size: 10px;
    }

    .catalog-toolbar-summary {
        grid-column: 1;
        justify-self: start;
        min-width: 0;
        min-height: 36px;
        padding-inline: 5px;
    }

    .catalog-toolbar .catalog-view-toggle {
        grid-column: 2;
        justify-self: end;
    }

    .catalog-card-actions {
        justify-content: flex-start;
        gap: 7px;
    }

    .catalog-start-link {
        flex: 0 0 auto;
        width: auto;
        min-width: 72px;
        min-height: 36px;
        padding-inline: 12px;
    }

    .catalog-open-button {
        flex: 0 0 36px;
        width: 36px;
        min-width: 36px;
        height: 36px;
    }

    /* El selector se comporta como una hoja inferior de aplicación. */
    .catalog-modal {
        align-items: flex-end;
        padding: 14px 10px 0;
    }

    .catalog-modal-dialog {
        box-sizing: border-box;
        width: min(480px, calc(100vw - 20px));
        max-height: calc(100dvh - 24px);
        margin: 0 auto;
        padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
    }

    .catalog-modal-dialog h2 {
        max-width: calc(100% - 34px);
        margin-right: 34px;
        font-size: clamp(20px, 5.5vw, 24px);
        overflow-wrap: anywhere;
    }

    .catalog-modal-dialog > p:not(.hero-kicker) {
        max-width: 100%;
        line-height: 1.45;
    }

    .catalog-modal-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .catalog-modal-action {
        position: relative;
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-rows: 32px auto;
        align-content: start;
        min-height: 112px;
        padding: 12px;
    }

    .catalog-modal-action > i:first-child {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 1px solid rgba(47, 124, 255, .28);
        border-radius: 8px;
        background: rgba(47, 124, 255, .08);
    }

    .catalog-modal-action > i:last-child {
        position: absolute;
        top: 13px;
        right: 12px;
    }

    .catalog-modal-action span {
        grid-column: 1 / -1;
        align-self: end;
        margin-top: 9px;
    }

    .catalog-modal-action strong {
        font-size: 12px;
    }

    .catalog-modal-action small {
        font-size: 9px;
    }

    .catalog-modal-mode-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-modal-mode {
        position: relative;
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-rows: 32px auto;
        align-content: start;
        min-height: 112px;
        padding: 11px;
    }

    .catalog-modal-mode > i {
        width: 32px;
        height: 32px;
    }

    .catalog-modal-mode > span {
        grid-column: 1 / -1;
        align-self: end;
        margin-top: 9px;
    }

    .catalog-modal-mode > b {
        position: absolute;
        top: 18px;
        right: 12px;
    }

    .catalog-modal-start-practice {
        width: fit-content;
        max-width: 100%;
        min-height: 42px;
        padding-inline: 14px;
        gap: 18px;
        border-radius: 9px;
    }

    .practice-finish-side {
        width: fit-content;
        max-width: 100%;
        min-height: 40px;
        padding-inline: 14px;
    }

    .practice-navigation {
        grid-template-columns: auto 1fr auto;
    }

    .practice-nav-button {
        width: auto;
        min-width: 96px;
        min-height: 42px;
        padding-inline: 12px;
    }

    .practice-nav-button:first-child {
        justify-self: start;
    }

    .practice-nav-button--next {
        justify-self: end;
    }

    .profile-contact-cta {
        justify-self: start;
        width: min(100%, 250px);
    }

    .practice-workspace[data-completed="true"] {
        width: min(100%, 760px);
    }

    .practice-workspace[data-completed="true"] .practice-review {
        margin-top: 0;
    }
}

@media (max-width: 500px) {
    .home-hero-art {
        min-height: 205px;
        padding-bottom: 0;
    }

    .home-machine-image {
        max-height: 220px;
    }

    .home-hero-copy {
        padding: 11px 14px 20px;
    }

    .home-hero-actions {
        display: inline-flex;
        width: auto;
    }

    .home-action {
        min-height: 40px;
        padding-inline: 11px;
        font-size: 10px;
    }

    .catalog-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-search {
        grid-column: 1 / -1;
    }

    .catalog-toolbar-summary,
    .catalog-toolbar .catalog-view-toggle {
        justify-self: initial;
    }

    .catalog-toolbar .catalog-view-toggle {
        justify-self: end;
    }

    .catalog-start-link {
        flex: 0 0 auto;
        min-width: 68px;
        padding-inline: 9px;
        font-size: 10.5px;
    }

    .practice-navigation {
        grid-template-columns: auto 1fr auto;
        gap: 7px;
        padding: 9px;
    }

    .practice-nav-button {
        min-width: 0;
        min-height: 40px;
        padding-inline: 10px;
        font-size: 10px;
    }

    .catalog-modal {
        padding: 10px 6px 0;
    }

    .catalog-modal-dialog {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 16px);
        padding: 20px 13px calc(14px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
    }

    .catalog-modal-actions,
    .catalog-modal-mode-options {
        gap: 7px;
    }

    .catalog-modal-action,
    .catalog-modal-mode {
        min-width: 0;
        padding: 10px;
    }

    .catalog-modal-action strong,
    .catalog-modal-mode strong {
        font-size: 11px;
    }

    .catalog-modal-action small,
    .catalog-modal-mode small {
        font-size: 9px;
        line-height: 1.3;
    }
}

@media (max-width: 360px) {
    .home-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-modal-actions,
    .catalog-modal-mode-options {
        grid-template-columns: 1fr;
    }

    .catalog-modal-action,
    .catalog-modal-mode {
        min-height: 82px;
    }
}

/* Correcciones finales para móviles compactos y pantallas bajas */
@media (max-width: 760px) {
    .practice-navigation {
        margin-bottom: 12px;
    }

    .practice-progress-panel {
        margin-top: 0;
    }
}

@media (max-width: 900px) and (max-height: 650px) {
    .catalog-modal {
        align-items: center;
        overflow-y: auto;
        padding: 8px;
    }

    .catalog-modal-dialog {
        width: min(600px, calc(100vw - 16px));
        max-height: calc(100dvh - 16px);
        padding: 16px 14px;
        border-radius: 16px;
    }

    .catalog-modal-dialog h2 {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: clamp(18px, 3vw, 22px);
    }

    .catalog-modal-dialog > p:not(.hero-kicker) {
        margin-bottom: 10px;
        font-size: 12px;
    }

    .catalog-modal-actions,
    .catalog-modal-mode-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-modal-actions,
    .catalog-modal-mode-options {
        gap: 7px;
    }

    .catalog-modal-action,
    .catalog-modal-mode {
        min-height: 84px;
        padding: 9px;
    }

    .catalog-modal-action > i:first-child,
    .catalog-modal-mode > i {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }

    .catalog-modal-action span,
    .catalog-modal-mode > span {
        margin-top: 5px;
    }

    .catalog-modal-action strong,
    .catalog-modal-mode strong {
        font-size: 11px;
    }

    .catalog-modal-action small,
    .catalog-modal-mode small {
        font-size: 9px;
        line-height: 1.2;
    }

    .catalog-modal-close {
        top: 9px;
        right: 9px;
        width: 28px;
        height: 28px;
    }
}

/* ==========================================================
   CIERRE Y RESULTADO DE LA PRÁCTICA
========================================================== */
.practice-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(47, 124, 255, .28);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(13, 31, 60, .9), rgba(7, 15, 29, .96));
}

.practice-result > .hero-kicker {
    grid-column: 1;
    margin: 0 0 4px;
}

.practice-result > strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: #f4f7fb;
    font: 800 clamp(26px, 3vw, 36px) Consolas, monospace;
    white-space: nowrap;
}

.practice-result > span:last-child {
    grid-column: 1;
    color: #9aa5b5;
    font-size: 12px;
}

.practice-result-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.practice-result-action {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(7, 17, 31, .62);
    color: #dce7ff;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.practice-result-action:hover,
.practice-result-action:focus-visible {
    border-color: rgba(47, 124, 255, .6);
    background: rgba(47, 124, 255, .1);
    color: #fff;
    transform: translateY(-2px);
}

.practice-result-action > i:first-child {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(47, 124, 255, .35);
    border-radius: 8px;
    color: #2f7cff;
}

.practice-result-action > i:last-child {
    color: #7e8898;
    font-size: 13px;
}

.practice-result-action span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.practice-result-action strong {
    font-size: 12px;
}

.practice-result-action small {
    color: #7e8898;
    font-size: 10px;
}

.practice-result-action--primary {
    border-color: rgba(47, 124, 255, .34);
    background: rgba(47, 124, 255, .08);
}

.practice-confirm-modal[hidden] {
    display: none;
}

.practice-confirm-modal {
    position: fixed;
    z-index: 1400;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.practice-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 12, .78);
    backdrop-filter: blur(7px);
}

.practice-confirm-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    padding: 25px;
    border: 1px solid rgba(47, 124, 255, .4);
    border-radius: 16px;
    background: linear-gradient(180deg, #0b1627, #060d18);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58), 0 0 35px rgba(47, 124, 255, .13);
}

.practice-confirm-close {
    position: absolute;
    top: 13px;
    right: 13px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: transparent;
    color: #8d98aa;
    cursor: pointer;
}

.practice-confirm-close:hover,
.practice-confirm-close:focus-visible {
    border-color: rgba(47, 124, 255, .5);
    color: #fff;
}

.practice-confirm-dialog h2 {
    max-width: calc(100% - 42px);
    margin: 7px 0 6px;
    color: #f4f7fb;
    font-size: 24px;
    line-height: 1.12;
}

.practice-confirm-dialog > p:not(.hero-kicker):not(.practice-confirm-warning) {
    margin: 0 0 17px;
    color: #9aa5b5;
    font-size: 13px;
    line-height: 1.45;
}

.practice-confirm-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.practice-confirm-summary > div {
    display: flex;
    min-height: 58px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 9px;
    background: rgba(5, 14, 27, .55);
}

.practice-confirm-summary span {
    color: #7e8898;
    font-size: 10px;
}

.practice-confirm-summary strong {
    color: #dce7ff;
    font: 700 16px Consolas, monospace;
}

.practice-confirm-warning {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 13px;
    color: #f5bd4f;
    font-size: 11px;
}

.practice-confirm-warning[hidden] {
    display: none;
}

.practice-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.practice-confirm-button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    font: 700 11px "Nunito", sans-serif;
    cursor: pointer;
}

.practice-confirm-button--cancel {
    background: transparent;
    color: #9aa5b5;
}

.practice-confirm-button--submit {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-color: rgba(47, 124, 255, .55);
    background: #2f7cff;
    color: #fff;
}

.practice-confirm-button--cancel:hover,
.practice-confirm-button--cancel:focus-visible {
    border-color: rgba(47, 124, 255, .45);
    color: #fff;
}

.practice-confirm-button--submit:hover,
.practice-confirm-button--submit:focus-visible {
    background: #4b8eff;
}

body.practice-confirm-open {
    overflow: hidden;
}

@media (max-width: 560px) {
    .practice-result {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 15px;
    }

    .practice-result > strong {
        font-size: 24px;
    }

    .practice-result-actions {
        gap: 8px;
    }

    .practice-result-action {
        grid-template-columns: 26px minmax(0, 1fr) 12px;
        gap: 7px;
        min-height: 58px;
        padding: 8px;
    }

    .practice-result-action > i:first-child {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .practice-result-action strong {
        font-size: 10px;
    }

    .practice-result-action small {
        font-size: 8px;
    }

    .practice-confirm-modal {
        place-items: center;
        padding: 12px;
        overflow-y: auto;
    }

    .practice-confirm-dialog {
        box-sizing: border-box;
        width: min(100%, 460px);
        max-height: calc(100dvh - 24px);
        margin: auto;
        padding: 20px 15px calc(16px + env(safe-area-inset-bottom));
        overflow-y: auto;
        border-radius: 16px;
    }

    .practice-confirm-dialog h2 {
        font-size: 21px;
    }

    .practice-confirm-dialog > p:not(.hero-kicker):not(.practice-confirm-warning) {
        font-size: 12px;
    }

    .practice-confirm-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    .practice-confirm-button {
        width: auto;
        min-width: 0;
        padding-inline: 12px;
        font-size: 10px;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .practice-result-actions {
        grid-template-columns: 1fr;
    }

    .practice-confirm-summary {
        gap: 6px;
    }

    .practice-confirm-summary > div {
        padding-inline: 8px;
    }

    .practice-confirm-actions {
        justify-content: space-between;
    }

    .practice-confirm-button {
        padding-inline: 9px;
        font-size: 9px;
    }
}

/* Resultado compacto: navegación superior y acciones junto al paginador */
.practice-result-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.practice-result-topbar > a,
.practice-result-topbar > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}

.practice-result-topbar > a {
    border: 1px solid rgba(47, 124, 255, .3);
    background: rgba(47, 124, 255, .07);
    color: #8eb9ff;
    text-decoration: none;
}

.practice-result-topbar > a:hover,
.practice-result-topbar > a:focus-visible {
    border-color: rgba(47, 124, 255, .62);
    background: rgba(47, 124, 255, .13);
    color: #fff;
}

.practice-result-topbar > span {
    padding-right: 2px;
    color: #26d7e8;
}

.practice-review-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.practice-review-footer .practice-review-pagination {
    grid-column: 2;
    margin: 0;
    gap: 8px;
    white-space: nowrap;
}

.practice-review-footer .practice-review-pagination span {
    min-width: 38px;
    text-align: center;
    font: 700 10px Consolas, monospace;
}

.practice-review-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(7, 17, 31, .64);
    color: #aebbd0;
    font-size: 10.5px;
    font-weight: 800;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.practice-review-control:hover,
.practice-review-control:focus-visible {
    border-color: rgba(47, 124, 255, .58);
    background: rgba(47, 124, 255, .1);
    color: #fff;
}

.practice-review-control--restart {
    grid-column: 1;
    justify-self: start;
    border-color: rgba(47, 124, 255, .35);
    color: #74aaff;
}

.practice-review-control--catalog {
    grid-column: 3;
    justify-self: end;
}

@media (max-width: 560px) {
    .practice-workspace[data-completed="true"] {
        padding-top: 2px;
    }

    .practice-result-topbar {
        margin-bottom: 7px;
    }

    .practice-result-topbar > a,
    .practice-result-topbar > span {
        min-height: 30px;
        padding-inline: 8px;
        font-size: 9px;
    }

    .practice-result {
        margin-bottom: 9px;
    }

    .practice-review {
        padding: 14px 11px;
    }

    .practice-review-footer {
        gap: 6px;
        margin-top: 12px;
        padding-top: 11px;
    }

    .practice-review-control {
        min-height: 34px;
        padding-inline: 9px;
        font-size: 9px;
    }

    .practice-review-footer .practice-review-pagination {
        gap: 5px;
    }

    .practice-review-footer .practice-review-pagination a {
        width: 27px;
        height: 27px;
    }
}

@media (max-width: 380px) {
    .practice-review-control {
        gap: 5px;
        padding-inline: 7px;
    }

    .practice-review-control--catalog span {
        display: none;
    }

    .practice-review-control--catalog {
        width: 34px;
        padding: 0;
        justify-content: center;
    }
}

/* Legibilidad definitiva del dashboard público. */
.dashboard-eyebrow,
.dashboard-panel-heading p {
    font-size: 11.5px;
}

.dashboard-page-hero > div:first-child > p:last-child {
    font-size: 14px;
}

.dashboard-live-status span {
    font-size: 11px;
}

.dashboard-live-status small {
    font-size: 10.5px;
}

.dashboard-kpi small {
    font-size: 11px;
}

.dashboard-kpi strong {
    font-size: 28px;
}

.dashboard-kpi > em {
    font-size: 10.5px;
    line-height: 1.25;
}

.dashboard-panel-heading h2 {
    font-size: 17px;
}

.dashboard-chart-legend {
    font-size: 11px;
}

.dashboard-panel-foot,
.dashboard-panel-foot strong {
    font-size: 11px;
}

.dashboard-accuracy-copy span {
    font-size: 12px;
}

.dashboard-accuracy-copy small {
    font-size: 10.5px;
}

.dashboard-source-legend b,
.dashboard-category-legend b {
    font-size: 11.5px;
}

.dashboard-source-legend strong {
    font-size: 13px;
}

.dashboard-category-legend small {
    font-size: 10px;
}

.dashboard-category-legend p,
.dashboard-ranking .dashboard-ranking-empty {
    font-size: 11px;
}

.dashboard-rank-number {
    font-size: 10.5px;
}

.dashboard-ranking a b {
    font-size: 11.5px;
}

.dashboard-ranking a small {
    font-size: 10px;
}

.dashboard-ranking li > strong {
    font-size: 11px;
}

@media (max-width: 480px) {
    .dashboard-page-hero > div:first-child > p:last-child {
        font-size: 12.5px;
    }

    .dashboard-kpi small {
        font-size: 9.5px;
    }

    .dashboard-kpi strong {
        font-size: 23px;
    }

    .dashboard-kpi > em {
        font-size: 9.5px;
    }

    .dashboard-panel-heading h2 {
        font-size: 16px;
    }

    .dashboard-chart-legend {
        font-size: 10px;
    }
}

/* Rendimiento por materia: aciertos, errores y lectura emocional. */
.dashboard-panel--sources {
    grid-column: span 4;
    min-height: 325px;
}

.dashboard-panel--categories {
    grid-column: span 4;
    min-height: 330px;
}

.dashboard-panel--performance {
    grid-column: span 8;
    min-height: 330px;
}

.dashboard-performance-global {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(47, 124, 255, .27);
    border-radius: 7px;
    background: rgba(47, 124, 255, .07);
    color: #8ab6ff;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.dashboard-performance-list {
    display: flex;
    margin-top: 7px;
    flex-direction: column;
}

.dashboard-performance-row {
    --performance-color: #2f7cff;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 47px;
    align-items: center;
    gap: 10px;
    min-height: 49px;
    padding: 6px 4px;
    border-bottom: 1px dashed rgba(84, 112, 151, .2);
}

.dashboard-performance-row.is-excellent { --performance-color: #20db82; }
.dashboard-performance-row.is-good { --performance-color: #25c9d5; }
.dashboard-performance-row.is-progress { --performance-color: #2f7cff; }
.dashboard-performance-row.is-difficult { --performance-color: #f1b83a; }
.dashboard-performance-row.is-critical { --performance-color: #ff6876; }

.dashboard-performance-face {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--performance-color) 43%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--performance-color) 8%, transparent);
    color: var(--performance-color);
    font-size: 17px;
    box-shadow: 0 0 13px color-mix(in srgb, var(--performance-color) 9%, transparent);
}

.dashboard-performance-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.dashboard-performance-meta,
.dashboard-performance-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    min-width: 0;
}

.dashboard-performance-meta a {
    overflow: hidden;
    color: #dce5f1;
    font-size: 11.5px;
    font-weight: 900;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-performance-meta a:hover {
    color: #fff;
}

.dashboard-performance-meta span {
    color: #738096;
    font-size: 10px;
    white-space: nowrap;
}

.dashboard-performance-bar {
    position: relative;
    height: 7px;
    overflow: hidden;
    border: 1px solid rgba(97, 116, 148, .18);
    border-radius: 99px;
    background:
        repeating-linear-gradient(90deg, transparent 0 9%, rgba(3, 9, 18, .55) 9% 10%),
        rgba(98, 56, 98, .24);
}

.dashboard-performance-bar > span {
    display: block;
    width: var(--performance-width);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--performance-color) 72%, #1459c8), var(--performance-color));
    box-shadow: 0 0 10px color-mix(in srgb, var(--performance-color) 48%, transparent);
}

.dashboard-performance-detail {
    font-size: 9.5px;
}

.dashboard-performance-detail b {
    color: var(--performance-color);
    font-weight: 900;
}

.dashboard-performance-detail span {
    color: #7a879b;
}

.dashboard-performance-row > strong {
    color: var(--performance-color);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.4px;
    text-align: right;
}

.dashboard-performance-empty {
    display: grid;
    min-height: 210px;
    margin: 0;
    place-items: center;
    color: #748196;
    font-size: 11px;
    text-align: center;
}

@media (max-width: 1180px) and (min-width: 961px) {
    .dashboard-panel--categories {
        grid-column: span 5;
    }

    .dashboard-panel--performance {
        grid-column: span 7;
    }
}

@media (max-width: 960px) {
    .dashboard-panel--sources,
    .dashboard-panel--categories,
    .dashboard-panel--performance {
        grid-column: span 6;
    }

    .dashboard-panel--performance {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .dashboard-panel--sources,
    .dashboard-panel--categories,
    .dashboard-panel--performance {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .dashboard-performance-global {
        min-height: 26px;
        padding-inline: 7px;
        font-size: 9.5px;
    }

    .dashboard-performance-row {
        grid-template-columns: 31px minmax(0, 1fr) 40px;
        gap: 7px;
        min-height: 55px;
        padding-block: 7px;
    }

    .dashboard-performance-face {
        width: 29px;
        height: 29px;
        font-size: 15px;
    }

    .dashboard-performance-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }

    .dashboard-performance-meta a {
        max-width: 100%;
        font-size: 10.5px;
    }

    .dashboard-performance-meta span,
    .dashboard-performance-detail {
        font-size: 9px;
    }

    .dashboard-performance-row > strong {
        font-size: 15px;
    }
}

/* ==========================================================
   PORTAFOLIO · CATÁLOGO Y DETALLE DE PROYECTOS
========================================================== */
.project-shell,
.project-detail {
    --project-border: rgba(88, 123, 174, .27);
    display: flex;
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
    flex-direction: column;
    gap: 12px;
    color: #f2f6fc;
    font-family: "Nunito", sans-serif;
}

.project-hero,
.project-toolbar,
.project-card,
.project-detail-header,
.project-detail-story,
.project-related {
    border: 1px solid var(--project-border, rgba(88, 123, 174, .27));
    background:
        linear-gradient(rgba(47, 124, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 124, 255, .025) 1px, transparent 1px),
        linear-gradient(145deg, rgba(5, 14, 28, .98), rgba(3, 10, 20, .97));
    background-size: 24px 24px, 24px 24px, auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 14px 32px rgba(0, 0, 0, .11);
}

.project-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    align-items: center;
    gap: 35px;
    min-height: 285px;
    padding: 31px 38px;
    overflow: hidden;
    border-radius: 15px;
}

.project-hero::after {
    position: absolute;
    right: 17px;
    bottom: 15px;
    width: 72px;
    height: 42px;
    border-right: 2px solid rgba(38, 218, 135, .72);
    border-bottom: 2px solid rgba(38, 218, 135, .72);
    content: "";
}

.project-kicker {
    margin: 0;
    color: #25d88a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.35px;
}

.project-hero h1 {
    max-width: 760px;
    margin: 11px 0 12px;
    font-size: clamp(2.4rem, 4.1vw, 4.35rem);
    font-weight: 900;
    letter-spacing: -2.4px;
    line-height: .98;
}

.project-hero h1 span {
    color: #2f7cff;
}

.project-hero-copy > p:last-child {
    max-width: 650px;
    margin: 0;
    color: #9aa8bb;
    font-size: 14px;
    line-height: 1.6;
}

.project-hero-terminal {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid rgba(114, 92, 181, .48);
    border-radius: 8px;
    background: #030914;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .28), 0 0 32px rgba(93, 66, 193, .08);
    transform: rotate(1.2deg);
}

.project-hero-terminal > div {
    display: grid;
    grid-template-columns: 8px 8px 8px 1fr;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    padding: 0 8px;
    background: linear-gradient(180deg, #756fb5, #48437a);
}

.project-hero-terminal > div i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #a9a3db;
    box-shadow: inset 0 0 0 1px rgba(19, 18, 47, .55);
}

.project-hero-terminal > div span {
    justify-self: center;
    color: #f2f0ff;
    font-size: 9px;
    font-weight: 800;
}

.project-hero-terminal pre {
    min-height: 190px;
    margin: 0;
    padding: 19px 21px;
    background: radial-gradient(circle, rgba(47, 124, 255, .1) 1px, transparent 1px);
    background-size: 8px 8px;
    color: #8ca1bd;
    font: 600 12px/1.55 Consolas, monospace;
}

.project-hero-terminal pre b { color: #2f7cff; }
.project-hero-terminal pre span { color: #20dc83; }
.project-hero-terminal pre em { color: #a86dff; font-style: normal; }

.project-toolbar {
    padding: 12px;
    border-radius: 12px;
}

.project-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(190px, .75fr) minmax(190px, .75fr) auto;
    align-items: stretch;
    gap: 9px;
}

.project-search,
.project-filter-select {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 52px;
    border: 1px solid rgba(64, 112, 180, .3);
    border-radius: 9px;
    background: rgba(4, 13, 25, .84);
    color: #2f7cff;
}

.project-search {
    gap: 11px;
    padding: 0 14px;
}

.project-search > i,
.project-filter-select > i {
    flex: 0 0 auto;
    font-size: 16px;
}

.project-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #dce6f5;
    font: 600 12px "Nunito", sans-serif;
}

.project-search input::placeholder { color: #68768b; }

.project-filter-select {
    gap: 10px;
    padding: 6px 12px;
}

.project-filter-select > span {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-direction: column;
}

.project-filter-select small {
    color: #438cff;
    font-size: 9px;
    font-weight: 900;
}

.project-filter-select select {
    width: 100%;
    border: 0;
    outline: 0;
    background: #07111f;
    color: #d9e3f2;
    font: 700 11.5px "Nunito", sans-serif;
    color-scheme: dark;
}

.project-filter-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    min-width: 105px;
    padding: 7px 11px;
    color: #8996a9;
    font-size: 10.5px;
}

.project-filter-summary b { color: #25da88; }
.project-filter-summary a { color: #5597ff; font-size: 10px; text-decoration: none; }

.project-results {
    min-height: 260px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.project-card {
    --project-color: #2f7cff;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.project-card:hover {
    border-color: color-mix(in srgb, var(--project-color) 48%, transparent);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .22), 0 0 24px color-mix(in srgb, var(--project-color) 8%, transparent);
    transform: translateY(-4px);
}

.project-card-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 8.2;
    overflow: hidden;
    border-bottom: 1px solid rgba(83, 113, 157, .22);
    background: #07111f;
}

.project-card-cover::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(3, 9, 18, .72));
    content: "";
}

.project-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
}

.project-card:hover .project-card-cover img {
    filter: saturate(1.08) contrast(1.03);
    transform: scale(1.035);
}

.project-card-code {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 10px;
    display: grid;
    width: 33px;
    height: 33px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--project-color) 52%, transparent);
    border-radius: 8px;
    background: rgba(3, 10, 21, .82);
    color: var(--project-color);
    font: 800 12px Consolas, monospace;
    backdrop-filter: blur(5px);
}

.project-card-cover em {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: 5px 8px;
    border: 1px solid rgba(167, 97, 255, .4);
    border-radius: 99px;
    background: rgba(38, 17, 66, .8);
    color: #c999ff;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
}

.project-card-body {
    display: flex;
    min-height: 174px;
    padding: 12px;
    flex-direction: column;
}

.project-card-tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.project-card-tags span {
    overflow: hidden;
    color: var(--project-color);
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .35px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.project-card-tags small {
    flex: 0 0 auto;
    padding: 3px 6px;
    border: 1px solid rgba(96, 118, 151, .22);
    border-radius: 5px;
    color: #8390a3;
    font-size: 9px;
}

.project-card h2 {
    margin: 9px 0 5px;
    font-size: 16.5px;
    font-weight: 900;
    line-height: 1.18;
}

.project-card h2 a { color: #edf2f9; text-decoration: none; }
.project-card h2 a:hover { color: #fff; }

.project-card-body > p {
    margin: 0;
    color: #8996a9;
    font-size: 10.8px;
    line-height: 1.55;
}

.project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 11px;
}

.project-card-footer > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4590ff;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.project-card-footer > a:hover { color: #7bb0ff; }

.project-card-footer > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(91, 119, 159, .24);
    border-radius: 7px;
    color: #99a7b9;
}

.project-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 17px;
}

.project-pagination a {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(72, 108, 161, .3);
    border-radius: 8px;
    background: rgba(6, 15, 28, .7);
    color: #8f9db0;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.project-pagination a.is-active,
.project-pagination a:hover { border-color: #2f7cff; background: rgba(47, 124, 255, .16); color: #fff; }

.project-empty {
    display: flex;
    min-height: 310px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px dashed rgba(80, 116, 171, .3);
    border-radius: 12px;
    background: rgba(4, 12, 23, .72);
    text-align: center;
}

.project-empty > i { color: #2f7cff; font-size: 31px; }
.project-empty h2 { margin: 10px 0 3px; font-size: 18px; }
.project-empty p { margin: 0; color: #8190a4; font-size: 12px; }
.project-empty a { margin-top: 13px; color: #4d95ff; font-size: 11px; font-weight: 900; text-decoration: none; }

/* Detalle */
.project-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    color: #66758a;
    font-size: 11px;
}

.project-detail-breadcrumb a { color: #a8b6c9; text-decoration: none; }
.project-detail-breadcrumb strong { color: var(--project-color); }

.project-detail-header {
    display: grid;
    grid-template-columns: minmax(320px, .88fr) minmax(400px, 1.12fr);
    align-items: center;
    gap: 34px;
    min-height: 445px;
    padding: 35px;
    border-radius: 15px;
}

.project-detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.project-detail-tags span { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--project-color) 32%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--project-color) 6%, transparent); color: var(--project-color); font-size: 10px; font-weight: 900; }

.project-detail-copy h1 { margin: 15px 0 11px; font-size: clamp(2.4rem, 4.6vw, 4.8rem); font-weight: 900; letter-spacing: -2.5px; line-height: .98; }
.project-detail-copy > p:not(.project-kicker) { max-width: 620px; margin: 0; color: #9ba8ba; font-size: 14px; line-height: 1.65; }

.project-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.project-external-button,
.project-back-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 0 14px; border-radius: 8px; font-size: 11px; font-weight: 900; text-decoration: none; }
.project-external-button { border: 1px solid #2f7cff; background: linear-gradient(135deg, #1769f2, #2f7cff); color: #fff; box-shadow: 0 8px 22px rgba(47, 124, 255, .2); }
.project-back-button { border: 1px solid rgba(91, 119, 159, .3); color: #aeb9c9; }

.project-detail-cover { position: relative; margin: 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--project-color) 35%, transparent); border-radius: 12px; background: rgba(3, 10, 20, .8); transform: rotate(.6deg); }
.project-detail-cover img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 7px; }
.project-detail-cover figcaption { display: flex; align-items: center; gap: 7px; padding: 9px 3px 0; color: #708096; font: 700 9px Consolas, monospace; }
.project-detail-cover figcaption i { width: 6px; height: 6px; border-radius: 50%; background: #20db82; box-shadow: 0 0 7px rgba(32, 219, 130, .7); }

.project-detail-story { display: grid; grid-template-columns: 62px minmax(0, 1fr) minmax(210px, .38fr); gap: 24px; padding: 29px; border-radius: 13px; }
.project-story-index { display: flex; align-items: center; flex-direction: column; color: #347fff; font: 900 16px Consolas, monospace; }
.project-story-index i { width: 1px; height: 100%; min-height: 130px; margin-top: 8px; background: linear-gradient(#2f7cff, transparent); }
.project-detail-story h2 { margin: 8px 0 14px; font-size: clamp(1.7rem, 2.5vw, 2.5rem); font-weight: 900; }
.project-description { color: #98a5b7; font-size: 13px; line-height: 1.75; }
.project-description p:last-child { margin-bottom: 0; }

.project-detail-meta { display: flex; align-self: start; padding: 4px 0 4px 20px; flex-direction: column; border-left: 1px dashed rgba(83, 113, 157, .28); }
.project-detail-meta > span { display: flex; padding: 10px 0; flex-direction: column; border-bottom: 1px solid rgba(83, 113, 157, .16); }
.project-detail-meta small { color: #68768b; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.project-detail-meta strong { margin-top: 2px; color: #d5dfec; font-size: 11px; }
.project-detail-meta strong i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #20db82; }

.project-related { padding: 20px; border-radius: 13px; }
.project-related > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.project-related h2 { margin: 4px 0 0; font-size: 20px; font-weight: 900; }
.project-related > header > a { color: #4e95ff; font-size: 11px; font-weight: 900; text-decoration: none; }
.project-grid--related .project-card { box-shadow: none; }

@media (max-width: 1100px) {
    .project-hero { grid-template-columns: 1fr minmax(270px, .65fr); padding-inline: 26px; }
    .project-filters { grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(170px, .8fr)); }
    .project-filter-summary { grid-column: 1 / -1; align-items: center; min-height: 30px; flex-direction: row; }
    .project-detail-header { grid-template-columns: 1fr 1fr; padding: 27px; }
}

@media (max-width: 1250px) {
    .project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .project-hero { grid-template-columns: 1fr; gap: 22px; }
    .project-hero-terminal { width: min(100%, 500px); }
    .project-filters { grid-template-columns: 1fr 1fr; }
    .project-search { grid-column: 1 / -1; }
    .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-detail-header { grid-template-columns: 1fr; }
    .project-detail-cover { order: -1; max-width: 680px; transform: none; }
    .project-detail-story { grid-template-columns: 42px 1fr; }
    .project-detail-meta { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; border-left: 0; }
}

@media (max-width: 560px) {
    .project-public-layout .dashboard-main { padding-inline: 9px; }
    .project-hero { min-height: 0; padding: 22px 15px; border-radius: 11px; }
    .project-hero h1 { font-size: clamp(2.2rem, 12vw, 3.15rem); }
    .project-hero-copy > p:last-child { font-size: 12.5px; }
    .project-hero-terminal pre { min-height: 170px; padding: 15px; font-size: 10.5px; }
    .project-toolbar { padding: 8px; }
    .project-filters { grid-template-columns: 1fr; }
    .project-search,
    .project-filter-select,
    .project-filter-summary { grid-column: 1; min-height: 46px; }
    .project-filter-summary { min-height: 28px; }
    .project-card-body { min-height: 188px; padding: 11px; }
    .project-card h2 { font-size: 16px; }
    .project-card-body > p { font-size: 10.5px; }
    .project-card-footer > a { font-size: 10px; }
    .project-card-tags span { font-size: 8.5px; }
    .project-card-tags small { font-size: 8px; }
    .project-detail-header { min-height: 0; padding: 18px 14px; border-radius: 11px; }
    .project-detail-copy h1 { font-size: clamp(2.25rem, 12vw, 3.4rem); }
    .project-detail-copy > p:not(.project-kicker) { font-size: 12.5px; }
    .project-detail-actions { align-items: flex-start; flex-direction: column; }
    .project-external-button,
    .project-back-button { width: fit-content; }
    .project-detail-story { grid-template-columns: 1fr; gap: 13px; padding: 18px 14px; }
    .project-story-index { display: none; }
    .project-detail-meta { grid-column: 1; }
    .project-related { padding: 14px; }
}

@media (max-width: 430px) {
    .project-grid { grid-template-columns: 1fr; }
    .project-card-cover { aspect-ratio: 16 / 8.5; }
    .project-detail-meta { grid-template-columns: 1fr; }
    .project-related > header { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .project-card,
    .project-card-cover img { transition: none; }
    .project-card:hover { transform: none; }
}