:root {
    --black: #070707;
    --black2: #0e0e0e;
    --black3: #171717;

    --orange: #ff4b0a;
    --orange2: #e93e00;

    --white: #f6f3ee;
    --gray: #9a9a9a;
    --line: rgba(255,255,255,.12);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--black);
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

/* ==========================================================
   PAGE PROGRESS
   ========================================================== */

.page-progress {
    position: fixed;
    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: var(--orange);

    z-index: 9999;
}

/* ==========================================================
   HEADER
   ========================================================== */

.main-header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    border-bottom: 1px solid rgba(255,255,255,.08);

    transition:
        background .3s ease,
        backdrop-filter .3s ease;
}

.main-header.scrolled {
    background: rgba(6,6,6,.92);
    backdrop-filter: blur(10px);
}

.header-inner {
    width: min(1240px, calc(100% - 100px));

    min-height: 86px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.brand {
    display: flex;
    align-items: center;

    gap: 11px;
}

.brand-symbol {
    width: 52px;
    height: 38px;

    display: grid;
    place-items: center;

    background: var(--orange);

    color: #fff;

    transform: skewX(-13deg);

    font-family: Impact, "Arial Narrow", sans-serif;

    font-size: 20px;
    letter-spacing: 1px;
}

.brand-copy {
    display: flex;
    flex-direction: column;

    line-height: .92;
}

.brand-copy strong {
    font-family: Impact, "Arial Narrow", sans-serif;

    font-size: 18px;
    letter-spacing: 1.4px;
}

.brand-copy small {
    color: var(--orange);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 3px;
}

.desktop-nav {
    display: flex;
    align-items: center;

    gap: 36px;
}

.desktop-nav a {
    position: relative;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;
}

.desktop-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -12px;

    width: 0;
    height: 3px;

    background: var(--orange);

    transition: width .25s ease;
}

.desktop-nav a:hover::after {
    width: 100%;
}

.header-login {
    position: relative;

    padding: 17px 25px;

    background: var(--orange);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1px;

    clip-path: polygon(
        8% 0,
        100% 0,
        92% 100%,
        0 100%
    );

    transition: transform .2s ease;
}

.header-login:hover {
    transform: translateY(-2px);
}

/* ==========================================================
   HERO
   ========================================================== */

.home-hero {
    position: relative;

    min-height: 100svh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 32%,
            #2f160a,
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #090909,
            #111
        );
}

.hero-photo {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.58) 44%,
            rgba(0,0,0,.35) 74%,
            rgba(0,0,0,.72) 100%
        ),
        url("../img/hero-home.jpg")
        center center / cover
        no-repeat;

    transform: scale(1.05);

    transition: transform 8s linear;
}

.home-hero.loaded .hero-photo {
    transform: scale(1.12);
}

.hero-shade {
    position: absolute;

    inset: auto 0 0;

    height: 42%;

    z-index: 2;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.96)
        );
}

.hero-watermark {
    position: absolute;

    z-index: 0;

    right: -5vw;
    top: 1vh;

    color: rgba(255,75,10,.20);

    font-family: Impact, "Arial Narrow", sans-serif;

    font-size: clamp(280px, 50vw, 720px);

    line-height: .9;

    letter-spacing: -40px;

    user-select: none;

    transform: skewX(-8deg);
}

.side-rail {
    position: absolute;

    z-index: 20;

    left: 18px;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(-90deg);

    transform-origin: center;

    display: flex;
    align-items: center;

    gap: 13px;

    color: rgba(255,255,255,.55);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 3px;
}

.side-rail span:nth-child(2),
.side-rail span:nth-child(4) {
    color: var(--orange);
}

.hero-slides {
    position: relative;

    z-index: 10;

    min-height: 100svh;
}

.main-slide {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: flex-end;

    visibility: hidden;
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .55s ease,
        transform .55s ease,
        visibility .55s;
}

.main-slide.active {
    visibility: visible;
    opacity: 1;

    transform: translateY(0);
}

.slide-content {
    width: min(1000px, calc(100% - 170px));

    margin:
        0 auto
        clamp(120px, 14vh, 170px);

    text-align: center;
}

.slide-tag {
    display: inline-block;

    padding: 11px 28px;

    margin-bottom: 22px;

    background: rgba(5,5,5,.88);

    border: 1px solid rgba(255,75,10,.45);

    color: var(--orange);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 7px;
}

.slide-content h1 {
    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(64px, 9.3vw, 142px);

    font-weight: 900;

    line-height: .82;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-shadow:
        0 7px 35px rgba(0,0,0,.55);
}

.slide-content h1 span {
    color: transparent;

    -webkit-text-stroke:
        2px var(--white);

    text-stroke:
        2px var(--white);
}

.slide-content p {
    max-width: 620px;

    margin: 25px auto 0;

    color: rgba(255,255,255,.74);

    font-size: 15px;

    line-height: 1.65;
}

.slide-actions {
    display: flex;
    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 32px;
}

.cut-button {
    min-width: 245px;
    min-height: 67px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    padding: 0 31px;

    background: var(--orange);

    color: white;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: 19px;

    letter-spacing: 1.5px;

    clip-path: polygon(
        8% 0,
        100% 0,
        91% 100%,
        0 100%
    );

    transition:
        transform .2s ease,
        background .2s ease;
}

.cut-button:hover {
    transform: translateY(-4px);

    background: #ff612a;
}

.cut-button b {
    font-size: 25px;
}

.cut-button.big {
    min-width: 310px;
}

.ghost-action {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: 17px;

    letter-spacing: 1px;
}

.play-circle {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

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

    border-radius: 50%;

    font-size: 13px;

    transition:
        background .2s,
        border-color .2s;
}

.ghost-action:hover .play-circle {
    background: var(--orange);

    border-color: var(--orange);
}

.hero-pagination {
    position: absolute;

    z-index: 30;

    left: 27px;
    bottom: 22%;

    display: grid;

    gap: 8px;
}

.hero-dot {
    padding: 0;

    border: 0;

    background: transparent;

    color: rgba(255,255,255,.32);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1px;

    transition:
        color .2s,
        transform .2s;
}

.hero-dot.active {
    color: var(--orange);

    transform: translateX(6px);
}

.hero-arrows {
    position: absolute;

    z-index: 30;

    right: 42px;
    bottom: 42px;

    display: flex;

    gap: 8px;
}

.hero-arrows button {
    width: 48px;
    height: 48px;

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

    background:
        rgba(0,0,0,.45);

    color: white;

    font-size: 18px;

    transition: .2s;
}

.hero-arrows button:hover {
    background: var(--orange);

    border-color: var(--orange);
}

.hero-progress {
    position: absolute;

    z-index: 30;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 4px;

    background: rgba(255,255,255,.08);
}

.hero-progress span {
    display: block;

    width: 0;
    height: 100%;

    background: var(--orange);
}

.hero-progress span.running {
    animation:
        heroTimer 6s linear forwards;
}

@keyframes heroTimer {
    from { width: 0; }
    to { width: 100%; }
}

.scroll-down {
    position: absolute;

    z-index: 30;

    left: 50%;
    bottom: 32px;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;

    color: rgba(255,255,255,.38);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 3px;
}

.scroll-down i {
    width: 1px;
    height: 30px;

    background: var(--orange);

    animation:
        scrollLine 1.4s ease-in-out infinite;
}

@keyframes scrollLine {
    0%,100% {
        transform: scaleY(.4);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
    }
}

/* ==========================================================
   MOVING BAND
   ========================================================== */

.moving-band {
    overflow: hidden;

    background: var(--orange);

    color: #080808;
}

.moving-track {
    width: max-content;

    display: flex;
    align-items: center;

    gap: 35px;

    padding: 18px 0;

    animation:
        ticker 27s linear infinite;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: 18px;

    letter-spacing: 2px;
}

@keyframes ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-45%);
    }
}

/* ==========================================================
   REVEAL
   ========================================================== */

.reveal {
    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.visible {
    opacity: 1;

    transform: translateY(0);
}

/* ==========================================================
   METHOD
   ========================================================== */

.method-section {
    position: relative;

    padding:
        125px
        max(7vw, 35px);

    background: #f2eee8;

    color: #111;
}

.section-count {
    position: absolute;

    right: 5vw;
    top: 55px;

    color: rgba(0,0,0,.09);

    font-family:
        Impact,
        sans-serif;

    font-size: 130px;
}

.section-count.dark {
    color: rgba(255,255,255,.07);
}

.method-layout {
    max-width: 1240px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    gap: 100px;
}

.orange-label {
    color: var(--orange);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 5px;
}

.method-heading h2,
.subjects-header h2,
.simulation-copy h2 {
    margin-top: 18px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(55px, 7vw, 105px);

    font-weight: 900;

    line-height: .89;

    letter-spacing: 1px;
}

.method-heading h2 span,
.simulation-copy h2 span {
    color: var(--orange);
}

.method-copy {
    padding-top: 70px;
}

.method-copy .big-copy {
    color: #111;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(23px, 3vw, 35px);

    line-height: 1.25;
}

.method-copy > p:not(.big-copy) {
    max-width: 500px;

    margin-top: 25px;

    color: #68645e;

    line-height: 1.75;
}

.text-arrow {
    display: inline-flex;
    align-items: center;

    gap: 17px;

    margin-top: 36px;

    padding-bottom: 8px;

    border-bottom: 2px solid var(--orange);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1px;
}

.text-arrow span {
    color: var(--orange);

    font-size: 22px;
}

.method-cards {
    max-width: 1240px;

    margin: 80px auto 0;

    display: grid;

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

.method-card {
    min-height: 320px;

    padding: 35px;

    border:
        1px solid #cec8bf;

    background: #f7f4ef;

    transition:
        background .25s,
        color .25s,
        transform .25s;
}

.method-card + .method-card {
    border-left: 0;
}

.method-card:hover {
    background: var(--orange);

    color: #090909;

    transform: translateY(-7px);
}

.method-card strong {
    color: var(--orange);

    font-size: 11px;

    letter-spacing: 3px;
}

.method-card:hover strong {
    color: #080808;
}

.method-card h3 {
    margin-top: 80px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: 44px;

    letter-spacing: 2px;
}

.method-card p {
    max-width: 280px;

    margin-top: 10px;

    color: #77716a;

    font-size: 13px;

    line-height: 1.6;
}

.method-card:hover p {
    color: rgba(0,0,0,.68);
}

/* ==========================================================
   ORANGE STATEMENT
   ========================================================== */

.orange-statement {
    padding:
        110px 30px;

    background: var(--orange);

    color: #080808;

    text-align: center;
}

.statement-small {
    font-size: 10px;
    font-weight: 900;

    letter-spacing: 6px;
}

.orange-statement h2 {
    margin-top: 28px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(62px, 9vw, 145px);

    line-height: .83;

    letter-spacing: 1px;
}

.orange-statement h2 span {
    color: #fff;
}

/* ==========================================================
   SUBJECTS
   ========================================================== */

.subjects-section {
    position: relative;

    padding:
        125px
        max(7vw, 35px);

    background: #0b0b0b;
}

.subjects-header {
    max-width: 1240px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr .7fr;

    gap: 80px;

    align-items: end;

    padding-bottom: 70px;
}

.subjects-header p {
    max-width: 430px;

    color: #888;

    line-height: 1.7;
}

.subject-row {
    max-width: 1240px;

    min-height: 170px;

    margin: auto;

    display: grid;

    grid-template-columns:
        80px 1fr 70px;

    align-items: center;

    border-top:
        1px solid rgba(255,255,255,.15);

    transition:
        padding-left .25s,
        background .25s;
}

.subject-row:last-child {
    border-bottom:
        1px solid rgba(255,255,255,.15);
}

.subject-row:hover {
    padding-left: 22px;

    background:
        linear-gradient(
            90deg,
            rgba(255,75,10,.14),
            transparent
        );
}

.subject-row > span {
    color: var(--orange);

    font-size: 11px;

    font-weight: 900;
}

.subject-row small {
    display: block;

    margin-bottom: 8px;

    color: #727272;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 4px;
}

.subject-row h3 {
    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(32px, 4vw, 59px);

    letter-spacing: 2px;
}

.subject-row b {
    color: var(--orange);

    font-size: 35px;

    font-weight: 400;
}

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

.simulator-section {
    padding:
        120px
        max(7vw, 35px);

    background: #191919;
}

.simulation-grid {
    max-width: 1240px;

    margin: auto;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 85px;

    align-items: center;
}

.simulation-copy p {
    max-width: 520px;

    margin-top: 22px;

    color: #8d8d8d;

    line-height: 1.75;
}

.answer-demo {
    padding: 37px;

    background: #f1ede7;

    color: #111;

    box-shadow:
        20px 25px 0 var(--orange);
}

.answer-demo header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 25px;

    border-bottom:
        2px solid #181818;
}

.answer-demo header div {
    display: grid;

    gap: 4px;
}

.answer-demo header small {
    color: #777;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 3px;
}

.answer-demo header strong {
    font-family:
        Impact,
        sans-serif;

    font-size: 27px;

    letter-spacing: 2px;
}

.answer-demo header > span {
    font-family:
        Impact,
        sans-serif;

    font-size: 52px;

    color: var(--orange);
}

.demo-line {
    display: grid;

    grid-template-columns:
        55px repeat(4, 1fr);

    align-items: center;

    gap: 15px;

    padding: 13px 0;

    border-bottom:
        1px solid #d1cbc3;
}

.demo-line b {
    font-size: 11px;
}

.demo-line i {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid #aaa;

    border-radius: 50%;

    font-style: normal;

    font-size: 11px;
    font-weight: 900;
}

.demo-line i.checked {
    background: var(--orange);

    border-color: var(--orange);
}

.demo-status {
    display: flex;
    justify-content: space-between;

    margin-top: 25px;

    font-size: 11px;
    font-weight: 900;
}

.demo-bar {
    height: 6px;

    margin-top: 10px;

    background: #d4cec6;
}

.demo-bar span {
    display: block;

    width: 100%;
    height: 100%;

    background: var(--orange);
}

.answer-demo button {
    width: 100%;
    height: 53px;

    margin-top: 24px;

    border: 0;

    background: #0d0d0d;

    color: white;

    font-family:
        Impact,
        sans-serif;

    font-size: 17px;

    letter-spacing: 2px;
}

/* ==========================================================
   JOIN
   ========================================================== */

.join-section {
    position: relative;

    min-height: 650px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #58200c,
            #110a07 65%,
            #060606
        );
}

.join-background {
    position: absolute;

    color: rgba(255,75,10,.17);

    font-family:
        Impact,
        sans-serif;

    font-size:
        min(64vw, 850px);

    letter-spacing: -50px;

    transform:
        skewX(-10deg);

    user-select: none;
}

.join-content {
    position: relative;

    z-index: 2;

    text-align: center;
}

.join-content > span {
    color: var(--orange);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 7px;
}

.join-content h2 {
    margin-top: 20px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(62px, 8vw, 120px);

    line-height: .85;
}

.join-content h2 em {
    color: var(--orange);

    font-style: normal;
}

.join-content .cut-button {
    margin-top: 38px;
}

/* ==========================================================
   LOGIN V2
   ========================================================== */

.login-v2 {
    position: relative;

    min-height: 100svh;

    display: grid;
    place-items: center;

    overflow: hidden;

    padding: 130px 7vw 80px;

    background:
        radial-gradient(
            circle at 20% 40%,
            #4b1a09,
            transparent 35%
        ),
        #090909;
}

.login-background {
    position: absolute;

    right: -7vw;
    bottom: -7vw;

    color: rgba(255,75,10,.12);

    font-family:
        Impact,
        sans-serif;

    font-size: 55vw;

    line-height: .75;

    transform: skewX(-10deg);
}

.login-v2-grid {
    position: relative;

    z-index: 2;

    width: min(1100px, 100%);

    display: grid;

    grid-template-columns:
        1fr .75fr;

    gap: 100px;

    align-items: center;
}

.login-v2-copy h1 {
    margin-top: 20px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(70px, 9vw, 130px);

    line-height: .79;
}

.login-v2-copy h1 span {
    color: var(--orange);
}

.login-v2-copy p {
    max-width: 430px;

    margin-top: 27px;

    color: #888;

    line-height: 1.7;
}

.login-v2-card {
    padding: 42px;

    background: #f2eee7;

    color: #111;

    box-shadow:
        18px 18px 0 var(--orange);
}

.login-mini {
    color: var(--orange);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 4px;
}

.login-v2-card h2 {
    margin-top: 14px;

    font-family:
        Impact,
        sans-serif;

    font-size: 52px;

    letter-spacing: 2px;
}

.login-v2-card > p {
    margin-top: 5px;

    color: #78736c;

    font-size: 13px;
}

.login-form {
    display: grid;

    gap: 20px;

    margin-top: 28px;
}

.login-form label {
    display: grid;

    gap: 8px;
}

.login-form label > span {
    font-size: 9px;
    font-weight: 900;

    letter-spacing: 2px;
}

.login-form input {
    width: 100%;
    height: 54px;

    padding: 0 15px;

    border:
        1px solid #bbb4aa;

    outline: 0;

    background: white;
}

.login-form input:focus {
    border-color: var(--orange);
}

.login-submit {
    height: 58px;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 25px;

    border: 0;

    background: var(--orange);

    color: white;

    font-family:
        Impact,
        sans-serif;

    font-size: 18px;

    letter-spacing: 1px;

    clip-path: polygon(
        5% 0,
        100% 0,
        95% 100%,
        0 100%
    );
}

.login-warning {
    margin-top: 20px;

    padding: 13px;

    border-left:
        3px solid var(--orange);

    background: #e5dfd5;

    color: #6d665d;

    font-size: 11px;
}

/* ==========================================================
   FOOTER
   ========================================================== */

.main-footer {
    position: relative;

    overflow: hidden;

    padding:
        90px
        max(6vw, 30px)
        25px;

    background: #050505;
}

.footer-big {
    position: absolute;

    right: -35px;
    top: -60px;

    color: rgba(255,255,255,.025);

    font-family:
        Impact,
        sans-serif;

    font-size: 280px;

    line-height: 1;
}

.footer-grid {
    position: relative;

    z-index: 2;

    max-width: 1240px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1.4fr .7fr .7fr;

    gap: 80px;
}

.footer-logo {
    width: 55px;
    height: 43px;

    display: grid;
    place-items: center;

    background: var(--orange);

    font-family:
        Impact,
        sans-serif;

    font-size: 21px;

    transform: skewX(-12deg);
}

.footer-grid p {
    max-width: 420px;

    margin-top: 20px;

    color: #717171;

    font-size: 13px;

    line-height: 1.7;
}

.footer-grid > div:not(:first-child) {
    display: flex;
    flex-direction: column;

    gap: 11px;
}

.footer-grid strong {
    margin-bottom: 12px;

    color: var(--orange);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 3px;
}

.footer-grid a,
.footer-grid span {
    color: #8b8b8b;

    font-size: 12px;
}

.footer-bottom {
    max-width: 1240px;

    margin: 70px auto 0;

    padding-top: 18px;

    border-top:
        1px solid rgba(255,255,255,.09);

    display: flex;
    justify-content: space-between;

    color: #4d4d4d;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1000px) {

    .desktop-nav {
        display: none;
    }

    .header-inner {
        width: calc(100% - 42px);
    }

    .side-rail {
        display: none;
    }

    .slide-content {
        width: calc(100% - 45px);
    }

    .method-layout,
    .subjects-header,
    .simulation-grid,
    .login-v2-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .method-copy {
        padding-top: 0;
    }

    .method-cards {
        grid-template-columns: 1fr;
    }

    .method-card + .method-card {
        border-left:
            1px solid #cec8bf;

        border-top:
            0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 650px) {

    .header-inner {
        min-height: 70px;
    }

    .brand-copy {
        display: none;
    }

    .brand-symbol {
        width: 46px;
        height: 34px;
    }

    .header-login {
        padding: 13px 18px;

        font-size: 9px;
    }

    .slide-content {
        margin-bottom: 125px;
    }

    .slide-tag {
        padding: 8px 16px;

        letter-spacing: 3px;

        font-size: 8px;
    }

    .slide-content h1 {
        font-size: clamp(58px, 17vw, 86px);
    }

    .slide-content h1 span {
        -webkit-text-stroke: 1px white;
    }

    .slide-content p {
        font-size: 13px;
    }

    .slide-actions {
        flex-direction: column;
    }

    .cut-button,
    .ghost-action {
        width: 100%;
    }

    .hero-arrows {
        right: 20px;
        bottom: 28px;
    }

    .hero-pagination {
        display: none;
    }

    .scroll-down {
        display: none;
    }

    .method-section,
    .subjects-section,
    .simulator-section {
        padding:
            90px 22px;
    }

    .section-count {
        top: 22px;

        font-size: 80px;
    }

    .method-heading h2,
    .subjects-header h2,
    .simulation-copy h2 {
        font-size: 57px;
    }

    .method-card {
        min-height: 250px;
    }

    .method-card h3 {
        margin-top: 45px;
    }

    .orange-statement h2 {
        font-size: 58px;
    }

    .subject-row {
        grid-template-columns:
            40px 1fr 25px;

        min-height: 140px;
    }

    .subject-row h3 {
        font-size: 34px;
    }

    .answer-demo {
        padding: 22px;

        box-shadow:
            9px 12px 0 var(--orange);
    }

    .demo-line {
        grid-template-columns:
            35px repeat(4, 1fr);

        gap: 7px;
    }

    .demo-line i {
        width: 32px;
        height: 32px;
    }

    .join-section {
        min-height: 520px;

        padding: 70px 20px;
    }

    .join-content h2 {
        font-size: 62px;
    }

    .join-content .cut-button {
        min-width: 100%;
    }

    .login-v2 {
        padding:
            110px 20px 60px;
    }

    .login-v2-copy h1 {
        font-size: 75px;
    }

    .login-v2-card {
        padding: 27px 22px;

        box-shadow:
            8px 10px 0 var(--orange);
    }

    .footer-bottom {
        flex-direction: column;

        gap: 10px;
    }

}

/* ==========================================================
   AUTH ALERT
   ========================================================== */

.auth-alert {

    margin-top: 20px;

    padding: 14px 16px;

    border-left: 4px solid var(--orange);

    background: #ded8ce;

    color: #332f2a;

    font-size: 12px;

    line-height: 1.5;
}


.auth-alert-error {

    border-left-color: #d83220;
}


.auth-alert-success {

    border-left-color: #208b4c;
}


/* ==========================================================
   PRIVATE DASHBOARD
   ========================================================== */

.private-dashboard {

    min-height: 100vh;

    padding:
        135px
        max(6vw, 30px)
        90px;

    background:
        #0b0b0b;
}


.private-dashboard-inner {

    max-width: 1240px;

    margin: auto;
}


.private-topbar {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    padding-bottom: 40px;

    border-bottom:
        1px solid rgba(255,255,255,.14);
}


.private-topbar h1 {

    margin-top: 10px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(48px, 7vw, 90px);

    line-height: .9;

    letter-spacing: 2px;
}


.private-topbar h1 span {

    color: var(--orange);
}


.private-logout {

    min-width: 105px;

    min-height: 44px;

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

    background:
        transparent;

    color:
        white;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


.private-logout:hover {

    border-color:
        var(--orange);

    background:
        var(--orange);
}


.private-welcome {

    position: relative;

    overflow: hidden;

    margin-top: 45px;

    padding: 55px;

    background:
        linear-gradient(
            120deg,
            #1c1c1c,
            #321507
        );

    border-left:
        6px solid var(--orange);
}


.private-welcome > span {

    color: var(--orange);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 4px;
}


.private-welcome h2 {

    max-width: 820px;

    margin-top: 12px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(42px, 6vw, 75px);

    line-height: .9;

    letter-spacing: 2px;
}


.private-welcome p {

    max-width: 620px;

    margin-top: 20px;

    color: #939393;

    line-height: 1.7;
}


.private-grid {

    display: grid;

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

    margin-top: 35px;
}


.private-grid article {

    min-height: 260px;

    padding: 30px;

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

    background:
        #111;

    transition:
        background .2s ease,
        transform .2s ease;
}


.private-grid article + article {

    border-left: 0;
}


.private-grid article:hover {

    background:
        var(--orange);

    color:
        #090909;

    transform:
        translateY(-5px);
}


.private-grid strong {

    color:
        var(--orange);

    font-size: 10px;

    letter-spacing: 3px;
}


.private-grid article:hover strong {

    color:
        #090909;
}


.private-grid h3 {

    margin-top: 85px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: 32px;

    letter-spacing: 2px;
}


.private-grid p {

    margin-top: 7px;

    color: #797979;

    font-size: 12px;

    line-height: 1.5;
}


.private-grid article:hover p {

    color:
        rgba(0,0,0,.68);
}


@media (max-width: 900px) {

    .private-grid {

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


    .private-grid article + article {

        border-left:
            1px solid rgba(255,255,255,.13);
    }

}


@media (max-width: 550px) {

    .private-dashboard {

        padding:
            110px 20px 70px;
    }


    .private-topbar {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .private-welcome {

        padding:
            32px 25px;
    }


    .private-grid {

        grid-template-columns:
            1fr;
    }

}

/* ==========================================================
   FASE 3 - ADMIN CONSOLE
   ========================================================== */

.admin-console {
    min-height: 100vh;

    display: grid;
    grid-template-columns: 250px 1fr;

    padding-top: 86px;

    background: #0a0a0a;
}


/* SIDEBAR */

.admin-sidebar {
    position: sticky;

    top: 86px;

    height: calc(100vh - 86px);

    display: flex;
    flex-direction: column;

    padding: 28px 20px;

    border-right:
        1px solid rgba(255,255,255,.09);

    background: #0e0e0e;
}


.admin-sidebar-brand {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 8px 28px;

    border-bottom:
        1px solid rgba(255,255,255,.09);
}


.admin-sidebar-brand > span {
    width: 48px;
    height: 37px;

    display: grid;
    place-items: center;

    background: var(--orange);

    transform: skewX(-12deg);

    font-family:
        Impact,
        sans-serif;

    font-size: 18px;
}


.admin-sidebar-brand > div {
    display: flex;
    flex-direction: column;
}


.admin-sidebar-brand strong {
    font-family:
        Impact,
        sans-serif;

    letter-spacing: 2px;
}


.admin-sidebar-brand small {
    margin-top: 3px;

    color: #666;

    font-size: 8px;

    letter-spacing: 2px;
}


.admin-menu {
    display: grid;

    gap: 7px;

    margin-top: 28px;
}


.admin-menu a,
.admin-menu-disabled {
    min-height: 55px;

    display: grid;

    grid-template-columns:
        35px 1fr auto;

    align-items: center;

    gap: 5px;

    padding: 0 13px;

    border-left:
        3px solid transparent;

    color: #7a7a7a;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

    transition: .2s;
}


.admin-menu a:hover,
.admin-menu a.active {
    border-left-color:
        var(--orange);

    background:
        rgba(255,75,10,.08);

    color: white;
}


.admin-menu i,
.admin-menu-disabled i {
    color: var(--orange);

    font-style: normal;

    font-size: 9px;
}


.admin-menu-disabled {
    opacity: .4;
}


.admin-menu-disabled small {
    font-size: 6px;

    color: var(--orange);
}


.admin-sidebar-user {
    margin-top: auto;

    padding: 20px 10px 0;

    border-top:
        1px solid rgba(255,255,255,.09);

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.admin-sidebar-user > small {
    color: #555;

    font-size: 7px;

    letter-spacing: 2px;
}


.admin-sidebar-user > strong {
    overflow: hidden;

    color: #aaa;

    font-size: 11px;

    text-overflow: ellipsis;
}


.admin-sidebar-user form {
    margin-top: 10px;
}


.admin-sidebar-user button {
    border: 0;

    background: transparent;

    color: var(--orange);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


/* MAIN */

.admin-main {
    min-width: 0;

    padding:
        55px
        clamp(25px, 5vw, 75px)
        90px;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(255,75,10,.06),
            transparent 25%
        ),
        #0a0a0a;
}


.admin-mobile-head {
    display: none;
}


.admin-alerts {
    display: grid;

    gap: 8px;

    margin-bottom: 25px;
}


.admin-alert {
    padding: 15px 18px;

    border-left:
        4px solid var(--orange);

    background: #171717;

    color: #aaa;

    font-size: 12px;
}


.admin-alert-success {
    border-left-color: #1fbd67;
}


.admin-alert-error {
    border-left-color: #e13f31;
}


/* PAGE HEADER */

.admin-page-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 40px;

    padding-bottom: 40px;

    border-bottom:
        1px solid rgba(255,255,255,.12);
}


.admin-eyebrow {
    color: var(--orange);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 4px;
}


.admin-page-header h1 {
    margin-top: 10px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(52px, 7vw, 92px);

    line-height: .85;

    letter-spacing: 2px;
}


.admin-page-header h1 span {
    color: var(--orange);
}


.admin-page-header p {
    margin-top: 15px;

    color: #707070;

    font-size: 13px;
}


/* BUTTONS */

.admin-primary-button,
.admin-secondary-button,
.admin-danger-button,
.admin-success-button {
    min-height: 48px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 22px;

    border: 0;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

    cursor: pointer;
}


.admin-primary-button {
    background: var(--orange);

    color: white;

    clip-path: polygon(
        6% 0,
        100% 0,
        94% 100%,
        0 100%
    );
}


.admin-secondary-button {
    border:
        1px solid rgba(255,255,255,.18);

    background: transparent;

    color: #aaa;
}


.admin-secondary-button:hover {
    border-color: var(--orange);

    color: white;
}


.admin-secondary-button:disabled {
    opacity: .3;

    cursor: not-allowed;
}


.admin-danger-button {
    background: #8f241c;

    color: white;
}


.admin-success-button {
    background: #1d8e51;

    color: white;
}


/* STATS */

.admin-stats {
    display: grid;

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

    margin-top: 35px;
}


.admin-stats article {
    min-height: 180px;

    padding: 25px;

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

    background: #101010;
}


.admin-stats article + article {
    border-left: 0;
}


.admin-stats small {
    display: block;

    color: #666;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;
}


.admin-stats strong {
    display: block;

    margin-top: 24px;

    font-family:
        Impact,
        sans-serif;

    font-size: 52px;

    line-height: 1;

    color: var(--orange);
}


.admin-stats span {
    display: block;

    margin-top: 12px;

    color: #686868;

    font-size: 11px;
}


/* DASHBOARD */

.admin-dashboard-banner {
    margin-top: 30px;

    padding: 45px;

    border-left:
        5px solid var(--orange);

    background:
        linear-gradient(
            110deg,
            #171717,
            #281006
        );
}


.admin-dashboard-banner > span {
    color: var(--orange);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 4px;
}


.admin-dashboard-banner h2 {
    margin-top: 12px;

    font-family:
        Impact,
        sans-serif;

    font-size:
        clamp(38px, 5vw, 70px);

    line-height: .88;

    letter-spacing: 2px;
}


.admin-dashboard-banner h2 em {
    color: var(--orange);

    font-style: normal;
}


.admin-dashboard-banner p {
    max-width: 580px;

    margin-top: 16px;

    color: #777;

    line-height: 1.6;

    font-size: 13px;
}


.admin-text-link {
    display: inline-block;

    margin-top: 25px;

    padding-bottom: 7px;

    border-bottom:
        2px solid var(--orange);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.admin-action-grid {
    display: grid;

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

    margin-top: 30px;
}


.admin-action-card {
    min-height: 260px;

    padding: 30px;

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

    background: #101010;
}


.admin-action-card.orange {
    background: var(--orange);

    color: #090909;
}


.admin-action-card > strong {
    color: var(--orange);

    font-size: 9px;

    letter-spacing: 3px;
}


.admin-action-card.orange > strong {
    color: #090909;
}


.admin-action-card h3 {
    margin-top: 55px;

    font-family:
        Impact,
        sans-serif;

    font-size: 38px;

    letter-spacing: 2px;
}


.admin-action-card p {
    margin-top: 8px;

    color: #707070;

    font-size: 12px;
}


.admin-action-card.orange p {
    color: rgba(0,0,0,.65);
}


.admin-action-card > span {
    display: block;

    margin-top: 25px;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* SEARCH */

.admin-search {
    display: flex;

    gap: 8px;

    margin-top: 30px;
}


.admin-search input {
    flex: 1;

    min-width: 0;

    height: 50px;

    padding: 0 17px;

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

    outline: none;

    background: #111;

    color: white;
}


.admin-search input:focus {
    border-color: var(--orange);
}


.admin-search button,
.admin-search a {
    min-height: 50px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 19px;

    border: 0;

    background: var(--orange);

    color: white;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.admin-search a {
    background: #242424;
}


.student-list-summary {
    margin-top: 25px;

    color: #555;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 3px;
}


/* TABLE */

.admin-table-wrap {
    margin-top: 12px;

    overflow-x: auto;

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


.admin-table {
    width: 100%;

    min-width: 950px;

    border-collapse: collapse;

    background: #101010;
}


.admin-table th {
    padding: 17px;

    border-bottom:
        1px solid rgba(255,255,255,.12);

    color: #555;

    text-align: left;

    font-size: 8px;

    letter-spacing: 2px;
}


.admin-table td {
    padding: 19px 17px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    color: #aaa;

    font-size: 11px;
}


.admin-table tbody tr:hover {
    background:
        rgba(255,75,10,.035);
}


.student-identification {
    display: flex;

    align-items: center;

    gap: 12px;
}


.student-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--orange);

    color: white;

    font-family:
        Impact,
        sans-serif;

    font-size: 18px;
}


.student-avatar.large {
    width: 65px;
    height: 65px;

    font-size: 29px;
}


.student-identification div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.student-identification strong {
    color: white;

    font-size: 12px;
}


.student-identification small {
    max-width: 250px;

    margin-top: 3px;

    overflow: hidden;

    color: #616161;

    text-overflow: ellipsis;
}


.status-badge,
.session-badge {
    display: inline-flex;

    align-items: center;

    min-height: 27px;

    padding: 0 10px;

    border-radius: 20px;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


.status-badge.active {
    background: rgba(31,189,103,.12);

    color: #35ce7d;
}


.status-badge.blocked {
    background: rgba(225,63,49,.12);

    color: #e65a4d;
}


.session-badge.online {
    background: rgba(255,75,10,.12);

    color: var(--orange);
}


.session-badge.offline {
    background: rgba(255,255,255,.05);

    color: #5a5a5a;
}


.admin-date {
    color: #616161;
}


.table-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 7px;
}


.table-actions a,
.table-actions button {
    min-height: 29px;

    display: inline-flex;

    align-items: center;

    padding: 0 10px;

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

    background: transparent;

    color: #8a8a8a;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


.table-actions a:hover,
.table-actions button:hover {
    border-color: var(--orange);

    color: white;
}


.table-actions button.danger {
    color: #df5d53;
}


.table-actions button.success {
    color: #38c67b;
}


.empty-table {
    padding: 70px !important;

    text-align: center;

    color: #555 !important;
}


/* FORM */

.admin-form-panel {
    margin-top: 35px;

    padding: 35px;

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

    background: #101010;
}


.admin-form-title > span {
    color: var(--orange);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 3px;
}


.admin-form-title h2,
.student-security-panel > div:first-child h2 {
    margin-top: 7px;

    font-family:
        Impact,
        sans-serif;

    font-size: 31px;

    letter-spacing: 1px;
}


.admin-form-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 30px;
}


.admin-form-grid label {
    display: grid;

    gap: 8px;
}


.admin-form-grid label.full {
    grid-column: 1 / -1;
}


.admin-form-grid label > span {
    color: #686868;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;
}


.admin-form-grid input,
.password-reset input {
    width: 100%;

    height: 52px;

    padding: 0 15px;

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

    outline: none;

    background: #080808;

    color: white;
}


.admin-form-grid input:focus,
.password-reset input:focus {
    border-color: var(--orange);
}


.admin-switch {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 25px;

    cursor: pointer;
}


.admin-switch input {
    position: absolute;

    opacity: 0;
}


.switch-control {
    width: 47px;
    height: 25px;

    position: relative;

    flex: 0 0 auto;

    border-radius: 20px;

    background: #333;

    transition: .2s;
}


.switch-control::after {
    content: "";

    position: absolute;

    top: 4px;
    left: 4px;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: white;

    transition: .2s;
}


.admin-switch input:checked + .switch-control {
    background: var(--orange);
}


.admin-switch input:checked + .switch-control::after {
    transform: translateX(22px);
}


.admin-switch div {
    display: flex;

    flex-direction: column;
}


.admin-switch strong {
    font-size: 9px;

    letter-spacing: 1px;
}


.admin-switch small {
    margin-top: 3px;

    color: #626262;

    font-size: 10px;
}


.admin-form-actions {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px solid rgba(255,255,255,.09);
}


/* STUDENT EDIT */

.student-profile-strip {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 30px;

    padding: 25px;

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

    background: #101010;
}


.student-profile-main {
    display: flex;

    align-items: center;

    gap: 17px;
}


.student-profile-main small {
    color: var(--orange);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 3px;
}


.student-profile-main h2 {
    margin-top: 4px;

    font-family:
        Impact,
        sans-serif;

    font-size: 28px;

    letter-spacing: 1px;
}


.student-profile-main p {
    margin-top: 2px;

    color: #666;

    font-size: 11px;
}


.student-profile-status {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.student-edit-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 25px;
}


.student-security-panel {
    margin-top: 35px;

    padding: 35px;

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

    background: #101010;
}


.security-action {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 25px;

    padding-top: 25px;

    border-top:
        1px solid rgba(255,255,255,.09);
}


.security-action strong,
.password-reset strong {
    font-size: 9px;

    letter-spacing: 1.5px;
}


.security-action p,
.password-reset p {
    max-width: 320px;

    margin-top: 5px;

    color: #626262;

    font-size: 10px;

    line-height: 1.5;
}


.password-reset {
    margin-top: 25px;

    padding-top: 25px;

    border-top:
        1px solid rgba(255,255,255,.09);
}


.password-reset form {
    display: grid;

    gap: 8px;

    margin-top: 17px;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .admin-console {
        grid-template-columns: 190px 1fr;
    }


    .admin-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .student-edit-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 750px) {

    .admin-console {
        display: block;

        padding-top: 70px;
    }


    .admin-sidebar {
        display: none;
    }


    .admin-main {
        padding:
            25px 17px 70px;
    }


    .admin-mobile-head {
        min-height: 45px;

        display: flex;

        justify-content: space-between;
        align-items: center;

        margin-bottom: 25px;

        padding-bottom: 15px;

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

        font-size: 9px;

        letter-spacing: 2px;
    }


    .admin-mobile-head a {
        color: var(--orange);
    }


    .admin-page-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .admin-page-header h1 {
        font-size: 57px;
    }


    .admin-stats {
        grid-template-columns: 1fr 1fr;
    }


    .admin-stats article + article {
        border-left:
            1px solid rgba(255,255,255,.11);
    }


    .admin-action-grid {
        grid-template-columns: 1fr;
    }


    .admin-search {
        flex-wrap: wrap;
    }


    .admin-search input {
        flex-basis: 100%;
    }


    .admin-form-panel,
    .student-security-panel {
        padding: 23px 18px;
    }


    .admin-form-grid {
        grid-template-columns: 1fr;
    }


    .admin-form-grid label.full {
        grid-column: auto;
    }


    .student-profile-strip {
        align-items: flex-start;

        flex-direction: column;
    }


    .security-action {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 430px) {

    .admin-stats {
        grid-template-columns: 1fr;
    }


    .admin-form-actions {
        flex-direction: column;
    }


    .admin-form-actions a,
    .admin-form-actions button {
        width: 100%;
    }

}

/* ==========================================================
   FASE 4 - AREA DO ALUNO
   ========================================================== */

.student-console {
    min-height: 100vh;

    display: grid;
    grid-template-columns: 250px 1fr;

    padding-top: 86px;

    background: #090909;
}


.student-sidebar {
    position: sticky;

    top: 86px;

    height: calc(100vh - 86px);

    display: flex;
    flex-direction: column;

    padding: 28px 20px;

    border-right:
        1px solid rgba(255,255,255,.09);

    background: #0e0e0e;
}


.student-sidebar-brand {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 8px 28px;

    border-bottom:
        1px solid rgba(255,255,255,.09);
}


.student-sidebar-brand > span {
    width: 48px;
    height: 37px;

    display: grid;
    place-items: center;

    background: var(--orange);

    color: white;

    transform: skewX(-12deg);

    font-family:
        Impact,
        sans-serif;

    font-size: 18px;
}


.student-sidebar-brand > div {
    display: flex;
    flex-direction: column;
}


.student-sidebar-brand strong {
    font-family:
        Impact,
        sans-serif;

    letter-spacing: 2px;
}


.student-sidebar-brand small {
    margin-top: 3px;

    color: #666;

    font-size: 8px;

    letter-spacing: 2px;
}


.student-menu {
    display: grid;

    gap: 7px;

    margin-top: 28px;
}


.student-menu a,
.student-menu-disabled {
    min-height: 55px;

    display: grid;

    grid-template-columns:
        35px 1fr auto;

    align-items: center;

    padding: 0 13px;

    border-left:
        3px solid transparent;

    color: #747474;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

    transition: .2s;
}


.student-menu a:hover,
.student-menu a.active {
    border-left-color:
        var(--orange);

    background:
        rgba(255,75,10,.08);

    color: white;
}


.student-menu i,
.student-menu-disabled i {
    color: var(--orange);

    font-style: normal;

    font-size: 9px;
}


.student-menu-disabled {
    opacity: .35;
}


.student-menu-disabled small {
    color: var(--orange);

    font-size: 6px;
}


.student-sidebar-progress {
    margin-top: 35px;

    padding: 20px 10px;

    border-top:
        1px solid rgba(255,255,255,.08);

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.student-sidebar-progress > small {
    color: #555;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.student-sidebar-progress > strong {
    display: block;

    margin-top: 8px;

    font-family:
        Impact,
        sans-serif;

    font-size: 34px;

    color: var(--orange);
}


.sidebar-progress-bar {
    height: 4px;

    margin-top: 10px;

    overflow: hidden;

    background: #282828;
}


.sidebar-progress-bar span {
    display: block;

    height: 100%;

    background: var(--orange);

    transition: width .4s ease;
}


.student-sidebar-progress p {
    margin-top: 9px;

    color: #585858;

    font-size: 9px;
}


.student-sidebar-user {
    margin-top: auto;

    padding: 20px 10px 0;

    border-top:
        1px solid rgba(255,255,255,.09);

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.student-sidebar-user > small {
    color: #555;

    font-size: 7px;

    letter-spacing: 2px;
}


.student-sidebar-user > strong {
    overflow: hidden;

    color: #aaa;

    font-size: 11px;

    text-overflow: ellipsis;
}


.student-sidebar-user form {
    margin-top: 10px;
}


.student-sidebar-user button {
    border: 0;

    background: transparent;

    color: var(--orange);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


/* MAIN */

.student-main {
    min-width: 0;

    padding:
        55px
        clamp(25px, 5vw, 75px)
        90px;

    background:
        radial-gradient(
            circle at 88% 2%,
            rgba(255,75,10,.07),
            transparent 22%
        ),
        #090909;
}


.student-mobile-head {
    display: none;
}


.student-alerts {
    display: grid;

    gap: 8px;

    margin-bottom: 25px;
}


.student-alert {
    padding: 15px 18px;

    border-left:
        4px solid var(--orange);

    background: #171717;

    color: #aaa;

    font-size: 12px;
}


.student-alert-success {
    border-left-color: #23b866;
}


.student-alert-error {
    border-left-color: #d84436;
}


/* HEADER */

.student-page-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 50px;

    padding-bottom: 42px;

    border-bottom:
        1px solid rgba(255,255,255,.12);
}


.student-eyebrow {
    color: var(--orange);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.student-page-header h1 {
    margin-top: 11px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(54px, 7vw, 94px);

    line-height: .85;

    letter-spacing: 2px;
}


.student-page-header h1 span {
    color: var(--orange);
}


.student-page-header p {
    margin-top: 15px;

    color: #727272;

    font-size: 13px;
}


.progress-circle {
    width: 150px;
    height: 150px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    padding: 10px;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--orange) var(--progress),
            #242424 0
        );
}


.progress-circle > div {
    width: 100%;
    height: 100%;

    display: grid;
    place-content: center;

    border-radius: 50%;

    background: #0a0a0a;

    text-align: center;
}


.progress-circle strong {
    font-family:
        Impact,
        sans-serif;

    font-size: 36px;
}


.progress-circle small {
    color: #626262;

    font-size: 7px;

    letter-spacing: 2px;
}


/* STATS */

.student-stats {
    display: grid;

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

    margin-top: 35px;
}


.student-stats article {
    min-height: 165px;

    padding: 25px;

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

    background: #101010;
}


.student-stats article + article {
    border-left: 0;
}


.student-stats small {
    color: #606060;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;
}


.student-stats strong {
    display: block;

    margin-top: 24px;

    font-family:
        Impact,
        sans-serif;

    font-size: 48px;

    color: var(--orange);
}


.student-stats span {
    color: #626262;

    font-size: 10px;
}


/* CURRENT DAY */

.current-study-card {
    display: grid;

    grid-template-columns:
        145px 1fr auto;

    align-items: center;

    gap: 35px;

    margin-top: 30px;

    padding: 38px;

    border-left:
        6px solid var(--orange);

    background:
        linear-gradient(
            115deg,
            #171717,
            #2b1107
        );
}


.current-study-number small {
    display: block;

    color: #777;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.current-study-number strong {
    display: block;

    margin-top: 6px;

    font-family:
        Impact,
        sans-serif;

    font-size: 72px;

    line-height: 1;

    color: var(--orange);
}


.current-study-copy > span {
    color: var(--orange);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.current-study-copy h2 {
    margin-top: 8px;

    font-family:
        Impact,
        sans-serif;

    font-size: clamp(28px, 4vw, 46px);

    letter-spacing: 1px;
}


.current-study-copy p {
    max-width: 650px;

    margin-top: 9px;

    color: #787878;

    font-size: 12px;

    line-height: 1.6;
}


.current-study-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 17px;

    color: #777;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}


.completed-label {
    color: #31c97a !important;
}


/* BUTTONS */

.student-primary-button,
.student-secondary-button {
    min-height: 52px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    padding: 0 24px;

    border: 0;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

    cursor: pointer;
}


.student-primary-button {
    background: var(--orange);

    color: white;

    clip-path: polygon(
        6% 0,
        100% 0,
        94% 100%,
        0 100%
    );
}


.student-primary-button b {
    font-size: 17px;
}


.student-secondary-button {
    border:
        1px solid rgba(255,255,255,.18);

    background: transparent;

    color: #aaa;
}


/* DASHBOARD DAYS */

.student-dashboard-section {
    margin-top: 60px;
}


.student-dashboard-section > header {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;
}


.student-dashboard-section h2 {
    margin-top: 7px;

    font-family:
        Impact,
        sans-serif;

    font-size: 38px;

    letter-spacing: 1px;
}


.student-dashboard-section > header > a {
    color: var(--orange);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;
}


.mini-day-grid {
    display: grid;

    grid-template-columns:
        repeat(10, 1fr);

    margin-top: 22px;
}


.mini-day {
    min-height: 110px;

    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

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

    background: #101010;

    transition: .2s;
}


.mini-day + .mini-day {
    border-left: 0;
}


.mini-day:hover {
    background: #181818;
}


.mini-day small {
    color: #555;

    font-size: 7px;

    letter-spacing: 2px;
}


.mini-day strong {
    margin-top: 3px;

    font-family:
        Impact,
        sans-serif;

    font-size: 29px;
}


.mini-day.completed {
    background:
        rgba(35,184,102,.08);
}


.mini-day.completed strong {
    color: #35c77a;
}


.mini-day.current {
    background: var(--orange);

    color: white;
}


.mini-day.current small {
    color:
        rgba(255,255,255,.7);
}


.mini-day > span {
    position: absolute;

    right: 7px;
    top: 6px;

    color: #35c77a;

    font-size: 9px;
}


/* MOTIVATION */

.student-motivation {
    margin-top: 65px;

    padding: 70px 35px;

    background: var(--orange);

    color: #080808;

    text-align: center;
}


.student-motivation > span {
    font-size: 8px;

    font-weight: 900;

    letter-spacing: 5px;
}


.student-motivation h2 {
    margin-top: 15px;

    font-family:
        Impact,
        sans-serif;

    font-size: clamp(45px, 6vw, 85px);

    line-height: .9;
}


.student-motivation h2 em {
    color: white;

    font-style: normal;
}


.student-motivation p {
    max-width: 560px;

    margin: 18px auto 0;

    color: rgba(0,0,0,.65);

    font-size: 12px;
}


/* PLAN PAGE */

.plan-progress-box {
    min-width: 250px;

    padding: 25px;

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

    background: #101010;
}


.plan-progress-box > span {
    color: #606060;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.plan-progress-box > strong {
    display: block;

    margin-top: 7px;

    font-family:
        Impact,
        sans-serif;

    font-size: 38px;

    color: var(--orange);
}


.plan-progress-box > div {
    height: 4px;

    margin-top: 10px;

    background: #292929;
}


.plan-progress-box > div i {
    display: block;

    height: 100%;

    background: var(--orange);

    transition: width .4s ease;
}


.plan-progress-box > small {
    display: block;

    margin-top: 9px;

    color: #656565;

    font-size: 8px;
}


.study-legend {
    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 30px;

    color: #666;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


.study-legend span {
    display: flex;

    align-items: center;

    gap: 7px;
}


.study-legend i {
    width: 9px;
    height: 9px;

    display: inline-block;

    border-radius: 50%;
}


.legend-current {
    background: var(--orange);
}


.legend-completed {
    background: #32c878;
}


.legend-pending {
    background: #333;
}


.study-days-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 25px;

    background:
        rgba(255,255,255,.1);
}


.study-day-card {
    min-height: 330px;

    display: flex;
    flex-direction: column;

    padding: 28px;

    background: #101010;

    transition:
        transform .2s,
        background .2s;
}


.study-day-card:hover {
    position: relative;

    z-index: 2;

    background: #171717;

    transform:
        translateY(-4px);
}


.study-day-card.current {
    background:
        linear-gradient(
            140deg,
            #281107,
            #111
        );

    box-shadow:
        inset 0 4px 0 var(--orange);
}


.study-day-card.completed {
    background:
        linear-gradient(
            140deg,
            rgba(35,184,102,.09),
            #101010
        );
}


.study-day-top {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;
}


.study-day-top > span {
    color: #555;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.study-day-top strong {
    font-family:
        Impact,
        sans-serif;

    font-size: 48px;

    line-height: 1;

    color: #333;
}


.study-day-card.current .study-day-top strong {
    color: var(--orange);
}


.study-day-card.completed .study-day-top strong {
    color: #2a8c59;
}


.study-day-subject {
    margin-top: 24px;

    color: var(--orange);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.study-day-card h2 {
    margin-top: 8px;

    font-family:
        Impact,
        sans-serif;

    font-size: 28px;

    line-height: 1;

    letter-spacing: 1px;
}


.study-day-card p {
    margin-top: 13px;

    color: #666;

    font-size: 11px;

    line-height: 1.6;
}


.study-day-card footer {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    margin-top: auto;

    padding-top: 25px;

    color: #555;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


.study-day-card footer strong {
    color: var(--orange);
}


.study-day-card.completed footer strong {
    color: #32c878;
}


/* STUDY DAY */

.study-day-navigation {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #5e5e5e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;
}


.study-day-navigation a:hover {
    color: var(--orange);
}


.study-day-hero {
    position: relative;

    min-height: 430px;

    display: flex;
    align-items: center;

    margin-top: 28px;

    padding: 55px;

    overflow: hidden;

    border-left:
        6px solid var(--orange);

    background:
        radial-gradient(
            circle at 80% 50%,
            #3a1609,
            transparent 35%
        ),
        #141414;
}


.study-day-big-number {
    position: absolute;

    right: -20px;
    bottom: -55px;

    color:
        rgba(255,75,10,.09);

    font-family:
        Impact,
        sans-serif;

    font-size:
        clamp(240px, 30vw, 450px);

    line-height: .8;
}


.study-day-hero-content {
    position: relative;

    z-index: 2;

    max-width: 820px;
}


.study-day-hero h1 {
    margin-top: 13px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(55px, 7vw, 100px);

    line-height: .85;

    letter-spacing: 2px;
}


.study-day-hero p {
    max-width: 680px;

    margin-top: 20px;

    color: #838383;

    font-size: 14px;

    line-height: 1.7;
}


.study-day-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 26px;
}


.study-day-tags span {
    padding: 9px 13px;

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

    color: #747474;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


.study-day-tags span.completed {
    border-color:
        rgba(50,200,120,.25);

    color: #32c878;
}


.study-day-content {
    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 60px;

    margin-top: 65px;
}


.study-day-content h2 {
    margin-top: 10px;

    font-family:
        Impact,
        sans-serif;

    font-size: 48px;

    line-height: .9;
}


.daily-steps {
    border-top:
        1px solid rgba(255,255,255,.12);
}


.daily-steps article {
    display: grid;

    grid-template-columns:
        60px 1fr;

    gap: 20px;

    padding: 25px 0;

    border-bottom:
        1px solid rgba(255,255,255,.12);
}


.daily-steps article > span {
    color: var(--orange);

    font-family:
        Impact,
        sans-serif;

    font-size: 24px;
}


.daily-steps h3 {
    font-family:
        Impact,
        sans-serif;

    font-size: 22px;

    letter-spacing: 1px;
}


.daily-steps p {
    margin-top: 6px;

    color: #686868;

    font-size: 11px;

    line-height: 1.6;
}


.complete-study-box {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 40px;

    margin-top: 65px;

    padding: 40px;

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

    background: #101010;
}


.complete-study-box h2 {
    margin-top: 8px;

    font-family:
        Impact,
        sans-serif;

    font-size: 38px;

    line-height: .9;
}


.complete-study-box p {
    margin-top: 10px;

    color: #686868;

    font-size: 11px;
}


.study-next-navigation {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 25px;
}


.study-next-navigation > a {
    min-height: 85px;

    display: flex;

    flex-direction: column;
    justify-content: center;

    padding: 20px;

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

    background: #101010;
}


.study-next-navigation > a.next {
    text-align: right;
}


.study-next-navigation small {
    color: #555;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.study-next-navigation strong {
    margin-top: 6px;

    font-family:
        Impact,
        sans-serif;

    font-size: 20px;

    color: var(--orange);

    letter-spacing: 1px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .student-console {
        grid-template-columns:
            190px 1fr;
    }


    .mini-day-grid {
        grid-template-columns:
            repeat(5, 1fr);
    }


    .mini-day:nth-child(6) {
        border-left:
            1px solid rgba(255,255,255,.1);
    }


    .study-days-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .current-study-card {
        grid-template-columns:
            110px 1fr;

        gap: 25px;
    }


    .current-study-card > a {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 760px) {

    .student-console {
        display: block;

        padding-top: 70px;
    }


    .student-sidebar {
        display: none;
    }


    .student-main {
        padding:
            25px 17px 70px;
    }


    .student-mobile-head {
        min-height: 45px;

        display: flex;

        justify-content: space-between;
        align-items: center;

        margin-bottom: 25px;

        padding-bottom: 15px;

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

        font-size: 9px;

        letter-spacing: 2px;
    }


    .student-mobile-head a {
        color: var(--orange);
    }


    .student-page-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .progress-circle {
        width: 125px;
        height: 125px;
    }


    .student-stats {
        grid-template-columns: 1fr;
    }


    .student-stats article + article {
        border-left:
            1px solid rgba(255,255,255,.1);

        border-top: 0;
    }


    .current-study-card {
        grid-template-columns: 1fr;

        padding: 27px 22px;
    }


    .current-study-card > a {
        grid-column: auto;
    }


    .current-study-number strong {
        font-size: 55px;
    }


    .student-dashboard-section > header {
        align-items: flex-start;

        flex-direction: column;
    }


    .mini-day-grid {
        grid-template-columns:
            repeat(5, 1fr);
    }


    .study-days-grid {
        grid-template-columns: 1fr;
    }


    .plan-progress-box {
        width: 100%;
    }


    .study-day-hero {
        min-height: 390px;

        padding: 38px 25px;
    }


    .study-day-content {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .complete-study-box {
        align-items: flex-start;

        flex-direction: column;

        padding: 27px 22px;
    }


    .complete-study-box form,
    .complete-study-box button {
        width: 100%;
    }

}


@media (max-width: 430px) {

    .mini-day-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .mini-day + .mini-day {
        border-left:
            1px solid rgba(255,255,255,.1);
    }


    .study-day-navigation {
        flex-direction: column;
    }


    .study-day-hero h1 {
        font-size: 54px;
    }


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

}

/* ==========================================================
   FASE 5 - CONTENT ADMIN
   ========================================================== */

.fase5-action-grid {
    grid-template-columns: repeat(3, 1fr);
}


.content-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 1px;

    margin-top: 35px;

    background: rgba(255,255,255,.1);
}


.content-admin-card {
    min-height: 320px;

    display: flex;
    flex-direction: column;

    padding: 28px;

    background: #101010;
}


.content-admin-card.published {
    box-shadow:
        inset 0 4px 0 var(--orange);
}


.content-admin-card > header {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;
}


.content-admin-card > header > div {
    display: flex;
    flex-direction: column;
}


.content-admin-card header small {
    color: #555;

    font-size: 7px;

    letter-spacing: 2px;
}


.content-admin-card header strong {
    margin-top: 3px;

    font-family: Impact, sans-serif;

    font-size: 48px;

    color: #333;
}


.content-published,
.content-ready,
.content-draft {
    padding: 7px 9px;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1px;
}


.content-published {
    background: rgba(255,75,10,.12);
    color: var(--orange);
}


.content-ready {
    background: rgba(46,197,116,.12);
    color: #35c77a;
}


.content-draft {
    background: rgba(255,255,255,.05);
    color: #666;
}


.content-admin-subject {
    margin-top: 22px;

    color: var(--orange);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.content-admin-card h2 {
    margin-top: 8px;

    font-family: Impact, sans-serif;

    font-size: 28px;
    line-height: 1;

    letter-spacing: 1px;
}


.content-checklist {
    display: grid;

    gap: 7px;

    margin-top: 23px;
}


.content-checklist span {
    color: #555;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1px;
}


.content-checklist span.ok {
    color: #35c77a;
}


.content-manage-link {
    margin-top: auto;

    padding-top: 22px;

    color: var(--orange);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 2px;
}


/* CONTENT EDIT */

.content-status-bar {
    display: grid;

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

    margin-top: 30px;
}


.content-status-bar > div {
    padding: 20px;

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

    background: #101010;
}


.content-status-bar > div + div {
    border-left: 0;
}


.content-status-bar small {
    display: block;

    color: #555;

    font-size: 7px;
    letter-spacing: 2px;
}


.content-status-bar strong {
    display: block;

    margin-top: 8px;

    color: #777;

    font-family: Impact, sans-serif;

    font-size: 23px;
}


.content-status-bar strong.ok {
    color: #35c77a;
}


.content-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 25px;
}


.content-setting-panel {
    display: flex;
    flex-direction: column;
}


.content-field,
.content-file-field {
    display: grid;

    gap: 9px;

    margin: 28px 0 20px;
}


.content-field > span,
.content-file-field > span {
    color: #666;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 2px;
}


.content-field input {
    width: 100%;

    height: 52px;

    padding: 0 15px;

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

    outline: 0;

    background: #080808;

    color: white;
}


.content-field input:focus {
    border-color: var(--orange);
}


.content-file-field input {
    padding: 15px;

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

    background: #080808;

    color: #888;
}


.content-helper {
    margin-bottom: 20px;

    color: #555;

    font-size: 9px;
}


/* QUESTIONS ADMIN */

.question-admin-section {
    margin-top: 35px;

    padding-top: 35px;

    border-top:
        1px solid rgba(255,255,255,.1);
}


.question-admin-section > header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}


.question-admin-section h2 {
    margin-top: 8px;

    font-family: Impact, sans-serif;

    font-size: 45px;
}


.question-admin-section > header > strong {
    font-family: Impact, sans-serif;

    font-size: 38px;

    color: var(--orange);
}


.question-slot-grid {
    display: grid;

    grid-template-columns:
        repeat(10, 1fr);

    gap: 1px;

    margin-top: 22px;

    background:
        rgba(255,255,255,.1);
}


.question-slot {
    min-height: 120px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: #101010;
}


.question-slot:hover {
    background: #171717;
}


.question-slot.filled {
    background:
        rgba(39,171,99,.08);
}


.question-slot small {
    color: #555;

    font-size: 6px;
    letter-spacing: 1px;
}


.question-slot strong {
    margin-top: 3px;

    font-family: Impact, sans-serif;

    font-size: 30px;
}


.question-slot > span {
    margin-top: 8px;

    color: #666;

    font-size: 6px;
    font-weight: 900;
}


.question-slot.filled > span {
    color: #35c77a;
}


.publish-content-panel {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 40px;

    padding: 40px;

    border-left:
        5px solid var(--orange);

    background:
        linear-gradient(
            120deg,
            #171717,
            #271006
        );
}


.publish-content-panel h2 {
    margin-top: 8px;

    font-family: Impact, sans-serif;

    font-size: 36px;
}


.publish-content-panel p {
    margin-top: 8px;

    color: #6b6b6b;

    font-size: 11px;
}


/* QUESTION EDITOR */

.question-editor {
    margin-top: 35px;

    padding: 35px;

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

    background: #101010;
}


.question-editor-block {
    display: grid;

    gap: 8px;
}


.question-editor-block > span,
.correct-answer-panel > span {
    color: var(--orange);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 2px;
}


.question-editor textarea {
    width: 100%;

    resize: vertical;

    padding: 15px;

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

    outline: 0;

    background: #080808;

    color: white;

    font-family: inherit;
    line-height: 1.5;
}


.question-editor textarea:focus {
    border-color: var(--orange);
}


.question-editor-option {
    display: grid;

    grid-template-columns:
        55px 1fr;

    align-items: stretch;

    margin-top: 15px;
}


.question-editor-option > strong {
    display: grid;
    place-items: center;

    background: var(--orange);

    font-family: Impact, sans-serif;

    font-size: 24px;
}


.correct-answer-panel {
    margin: 30px 0;

    padding: 25px;

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

    background: #090909;
}


.correct-answer-panel > div {
    display: flex;

    gap: 10px;

    margin-top: 16px;
}


.correct-answer-panel label input {
    position: absolute;

    opacity: 0;
}


.correct-answer-panel label strong {
    width: 55px;
    height: 48px;

    display: grid;
    place-items: center;

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

    cursor: pointer;

    font-family: Impact, sans-serif;

    font-size: 21px;
}


.correct-answer-panel label input:checked + strong {
    border-color: var(--orange);

    background: var(--orange);
}


/* ==========================================================
   STUDENT DAILY CONTENT
   ========================================================== */

.daily-content-heading {
    margin-top: 65px;
}


.daily-content-heading h2 {
    margin-top: 8px;

    font-family: Impact, sans-serif;

    font-size:
        clamp(42px, 6vw, 75px);

    line-height: .9;
}


.daily-content-heading h2 em {
    color: var(--orange);

    font-style: normal;
}


.daily-content-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 25px;

    background:
        rgba(255,255,255,.1);
}


.daily-resource-card {
    min-height: 420px;

    display: flex;
    flex-direction: column;

    padding: 30px;

    background: #101010;
}


.daily-resource-card > span {
    color: var(--orange);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 3px;
}


.daily-resource-card > small {
    margin-top: 50px;

    color: #666;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 2px;
}


.daily-resource-card h2 {
    margin-top: 7px;

    font-family: Impact, sans-serif;

    font-size: 40px;

    line-height: .9;
}


.daily-resource-card p {
    margin-top: 14px;

    color: #6c6c6c;

    font-size: 11px;

    line-height: 1.6;
}


.daily-resource-card >
.student-primary-button {
    margin-top: auto;
}


.youtube-frame {
    width: 100%;

    aspect-ratio: 16/9;

    margin-top: 20px;

    overflow: hidden;

    background: #050505;
}


.youtube-frame iframe {
    width: 100%;
    height: 100%;

    border: 0;
}


.youtube-external {
    margin-top: 15px;

    color: var(--orange);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1px;
}


.question-resource-actions {
    display: flex;

    gap: 8px;

    margin-top: auto;
}


.question-resource-actions a {
    flex: 1;
}


.content-not-published {
    margin-top: 45px;

    padding: 55px;

    border-left:
        5px solid #333;

    background: #101010;
}


.content-not-published h2 {
    margin-top: 9px;

    font-family: Impact, sans-serif;

    font-size: 48px;
}


.content-not-published p {
    max-width: 550px;

    margin-top: 12px;

    color: #666;

    line-height: 1.6;
}


/* RESULT ON DAY */

.latest-result-card {
    display: grid;

    grid-template-columns:
        .7fr 1.2fr auto;

    align-items: center;

    gap: 35px;

    margin-top: 35px;

    padding: 35px;

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

    background: #101010;
}


.latest-result-card h2 {
    margin-top: 7px;

    font-family: Impact, sans-serif;

    font-size: 55px;

    color: var(--orange);
}


.latest-result-card h2 small {
    color: #555;

    font-size: 20px;
}


.latest-result-numbers {
    display: grid;

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

    gap: 15px;
}


.latest-result-numbers div {
    display: flex;
    flex-direction: column;
}


.latest-result-numbers strong {
    font-family: Impact, sans-serif;

    font-size: 32px;
}


.latest-result-numbers span {
    color: #555;

    font-size: 6px;
    font-weight: 900;

    letter-spacing: 1px;
}


.latest-result-actions {
    display: grid;

    gap: 8px;
}


.attempt-history {
    margin-top: 40px;
}


.attempt-history h2 {
    margin-top: 8px;

    font-family: Impact, sans-serif;

    font-size: 35px;
}


.attempt-history > div {
    margin-top: 17px;

    border-top:
        1px solid rgba(255,255,255,.1);
}


.attempt-history a {
    display: grid;

    grid-template-columns:
        1fr auto auto;

    gap: 20px;

    padding: 18px 0;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.attempt-history span {
    color: #777;

    font-size: 9px;
    font-weight: 900;
}


.attempt-history strong {
    font-family: Impact, sans-serif;

    font-size: 18px;
}


.attempt-history em {
    min-width: 50px;

    color: var(--orange);

    font-style: normal;

    font-weight: 900;
}


/* ==========================================================
   PROTECTED REVIEW
   ========================================================== */

.protected-review-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    padding-bottom: 30px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.protected-review-header h1 {
    margin-top: 9px;

    font-family: Impact, sans-serif;

    font-size:
        clamp(40px, 5vw, 65px);

    line-height: .9;
}


.protected-review-header p {
    margin-top: 10px;

    color: #666;

    font-size: 10px;
}


.protected-review-document {
    max-width: 1000px;

    margin: 35px auto 0;

    user-select: none;
    -webkit-user-select: none;
}


.protected-pdf-page {
    position: relative;

    margin-bottom: 25px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);

    background: white;
}


.protected-pdf-page > img {
    width: 100%;

    display: block;

    pointer-events: none;

    user-select: none;
}


.document-watermarks {
    position: absolute;

    inset: 0;

    display: grid;

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

    align-items: center;

    pointer-events: none;

    overflow: hidden;

    transform: rotate(-18deg) scale(1.15);
}


.document-watermarks span {
    padding: 25px;

    color:
        rgba(0,0,0,.10);

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

    text-align: center;

    text-transform: uppercase;
}


.protected-page-number {
    position: absolute;

    right: 12px;
    bottom: 8px;

    padding: 5px 8px;

    background:
        rgba(0,0,0,.72);

    color: white;

    font-size: 7px;
}


/* ==========================================================
   QUIZ
   ========================================================== */

.quiz-header,
.quiz-result-hero {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 35px;

    padding-bottom: 35px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.quiz-header h1,
.quiz-result-hero h1 {
    margin-top: 9px;

    font-family: Impact, sans-serif;

    font-size:
        clamp(55px, 7vw, 90px);

    line-height: .85;
}


.quiz-header h1 span,
.quiz-result-hero h1 span {
    color: var(--orange);
}


.quiz-header p,
.quiz-result-hero p {
    margin-top: 12px;

    color: #686868;

    font-size: 12px;
}


.quiz-warning {
    margin-top: 30px;

    padding: 20px;

    border-left:
        4px solid var(--orange);

    background:
        rgba(255,75,10,.06);
}


.quiz-warning strong {
    color: var(--orange);

    font-size: 8px;
    letter-spacing: 2px;
}


.quiz-warning p {
    margin-top: 5px;

    color: #6d6d6d;

    font-size: 11px;
}


.quiz-form {
    margin-top: 30px;
}


.quiz-question {
    margin-bottom: 20px;

    padding: 30px;

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

    background: #101010;
}


.quiz-question > header {
    display: flex;

    align-items: center;

    gap: 8px;
}


.quiz-question > header span {
    color: #555;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 2px;
}


.quiz-question > header strong {
    color: var(--orange);

    font-family: Impact, sans-serif;

    font-size: 25px;
}


.quiz-question h2 {
    max-width: 900px;

    margin-top: 18px;

    font-size: 15px;

    line-height: 1.6;
}


.quiz-options {
    display: grid;

    gap: 8px;

    margin-top: 22px;
}


.quiz-options label {
    display: grid;

    grid-template-columns:
        50px 1fr;

    align-items: stretch;

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

    cursor: pointer;

    background: #090909;
}


.quiz-options input {
    position: absolute;

    opacity: 0;
}


.quiz-option-letter {
    display: grid;

    place-items: center;

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

    color: var(--orange);

    font-family: Impact, sans-serif;

    font-size: 20px;
}


.quiz-options p {
    padding: 15px;

    color: #8a8a8a;

    font-size: 11px;

    line-height: 1.5;
}


.quiz-options label:has(input:checked) {
    border-color: var(--orange);

    background:
        rgba(255,75,10,.08);
}


.quiz-options label:has(input:checked)
.quiz-option-letter {
    background: var(--orange);

    color: white;
}


.quiz-submit-box {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 35px;

    padding: 35px;

    border-left:
        5px solid var(--orange);

    background: #101010;
}


.quiz-submit-box h2 {
    margin-top: 8px;

    font-family: Impact, sans-serif;

    font-size: 40px;
}


.quiz-submit-box p {
    margin-top: 7px;

    color: #666;

    font-size: 11px;
}


/* RESULT */

.result-percentage {
    width: 150px;
    height: 150px;

    display: grid;

    place-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    border:
        7px solid var(--orange);

    text-align: center;
}


.result-percentage strong {
    font-family: Impact, sans-serif;

    font-size: 42px;
}


.result-percentage small {
    color: #666;

    font-size: 6px;
    letter-spacing: 1px;
}


.result-score-grid {
    display: grid;

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

    margin-top: 30px;
}


.result-score-grid article {
    padding: 30px;

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

    background: #101010;
}


.result-score-grid article + article {
    border-left: 0;
}


.result-score-grid small {
    color: #555;

    font-size: 7px;
    letter-spacing: 2px;
}


.result-score-grid strong {
    display: block;

    margin-top: 12px;

    font-family: Impact, sans-serif;

    font-size: 50px;
}


.result-score-grid strong.correct {
    color: #35c77a;
}


.result-score-grid strong.wrong {
    color: #de4d42;
}


.result-actions {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 20px;
}


.answer-key-section {
    margin-top: 60px;
}


.answer-key-section > h2 {
    margin-top: 8px;

    font-family: Impact, sans-serif;

    font-size:
        clamp(42px, 6vw, 70px);
}


.answer-key-section > h2 em {
    color: var(--orange);

    font-style: normal;
}


.answer-key-list {
    display: grid;

    gap: 15px;

    margin-top: 25px;
}


.answer-key-list article {
    padding: 28px;

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

    background: #101010;
}


.answer-key-list article.correct {
    border-left:
        4px solid #35c77a;
}


.answer-key-list article.wrong {
    border-left:
        4px solid #de4d42;
}


.answer-key-list article > header {
    display: flex;

    justify-content: space-between;

    gap: 20px;
}


.answer-key-list header span {
    color: #555;

    font-size: 7px;

    letter-spacing: 2px;
}


.answer-key-list header strong {
    margin-left: 5px;

    color: var(--orange);

    font-family: Impact, sans-serif;

    font-size: 21px;
}


.answer-key-list article.correct > header b {
    color: #35c77a;
}


.answer-key-list article.wrong > header b {
    color: #de4d42;
}


.answer-key-list header b {
    font-size: 8px;

    letter-spacing: 1px;
}


.answer-key-list h3 {
    max-width: 900px;

    margin-top: 18px;

    font-size: 13px;

    line-height: 1.6;
}


.answer-comparison {
    display: flex;

    gap: 30px;

    margin-top: 20px;
}


.answer-comparison > div {
    min-width: 120px;

    padding: 15px;

    background: #080808;
}


.answer-comparison small {
    display: block;

    color: #555;

    font-size: 6px;

    letter-spacing: 1px;
}


.answer-comparison strong {
    display: block;

    margin-top: 6px;

    font-family: Impact, sans-serif;

    font-size: 24px;

    color: var(--orange);
}


.answer-explanation {
    margin-top: 20px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,.09);
}


.answer-explanation small {
    color: var(--orange);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.answer-explanation p {
    margin-top: 7px;

    color: #777;

    font-size: 11px;

    line-height: 1.7;
}


/* RESPONSIVE FASE 5 */

@media (max-width: 1050px) {

    .content-admin-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .question-slot-grid {
        grid-template-columns:
            repeat(5, 1fr);
    }

    .daily-content-grid {
        grid-template-columns: 1fr;
    }

    .latest-result-card {
        grid-template-columns: 1fr;
    }

    .latest-result-actions {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 800px) {

    .fase5-action-grid {
        grid-template-columns: 1fr;
    }

    .content-settings-grid {
        grid-template-columns: 1fr;
    }

    .content-status-bar {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .content-status-bar > div + div {
        border-left:
            1px solid rgba(255,255,255,.1);
    }

    .publish-content-panel,
    .quiz-submit-box,
    .protected-review-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .quiz-header,
    .quiz-result-hero {
        align-items: flex-start;

        flex-direction: column;
    }

    .result-score-grid {
        grid-template-columns: 1fr;
    }

    .result-score-grid article + article {
        border-left:
            1px solid rgba(255,255,255,.1);

        border-top: 0;
    }

}


@media (max-width: 550px) {

    .content-admin-grid {
        grid-template-columns: 1fr;
    }

    .question-slot-grid {
        grid-template-columns:
            repeat(4, 1fr);
    }

    .question-editor {
        padding: 20px 15px;
    }

    .question-editor-option {
        grid-template-columns:
            45px 1fr;
    }

    .latest-result-numbers {
        grid-template-columns: 1fr;
    }

    .question-resource-actions,
    .result-actions {
        flex-direction: column;
    }

    .question-resource-actions a,
    .result-actions a {
        width: 100%;
    }

    .answer-comparison {
        flex-direction: column;

        gap: 8px;
    }

}

/* ==========================================================
   FASE 6 - SIMULADOS
   ========================================================== */

.simulation-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 1px;

    margin-top: 35px;

    background: rgba(255,255,255,.1);
}


.simulation-admin-grid > article {
    min-height: 340px;

    display: flex;
    flex-direction: column;

    padding: 30px;

    background: #101010;
}


.simulation-admin-grid article > header {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


.simulation-admin-grid header > span {
    color: var(--orange);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 3px;
}


.simulation-admin-grid header b {
    padding: 7px 9px;

    background:
        rgba(47,190,111,.11);

    color: #36c77a;

    font-size: 6px;

    letter-spacing: 1px;
}


.simulation-admin-grid header b.draft {
    background:
        rgba(255,255,255,.05);

    color: #666;
}


.simulation-admin-grid h2 {
    margin-top: 35px;

    font-family: Impact, sans-serif;

    font-size: 33px;
    line-height: .95;
}


.simulation-admin-grid p {
    margin-top: 12px;

    color: #6a6a6a;

    font-size: 11px;
    line-height: 1.6;
}


.simulation-admin-status {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;
}


.simulation-admin-status span {
    padding: 7px 9px;

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

    color: #666;

    font-size: 6px;
    font-weight: 900;
}


.simulation-key-status {
    margin-top: 14px;

    color: #777;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1px;
}


.simulation-key-status.published {
    color: var(--orange);
}


.simulation-empty,
.student-simulation-empty {
    margin-top: 35px;

    padding: 65px 45px;

    border-left:
        6px solid var(--orange);

    background:
        linear-gradient(
            120deg,
            #171717,
            #281006
        );
}


.simulation-empty h2,
.student-simulation-empty h2 {
    max-width: 750px;

    margin-top: 10px;

    font-family: Impact, sans-serif;

    font-size:
        clamp(45px, 6vw, 80px);

    line-height: .9;
}


.simulation-empty p,
.student-simulation-empty p {
    max-width: 600px;

    margin: 18px 0 30px;

    color: #777;

    line-height: 1.6;
}


/* FORM */

.simulation-form textarea {
    width: 100%;

    padding: 15px;

    resize: vertical;

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

    outline: 0;

    background: #080808;

    color: white;

    font-family: inherit;

    line-height: 1.5;
}


.simulation-form textarea:focus {
    border-color: var(--orange);
}


.simulation-status-grid {
    display: grid;

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

    margin-top: 30px;
}


.simulation-status-grid article {
    padding: 23px;

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

    background: #101010;
}


.simulation-status-grid article + article {
    border-left: 0;
}


.simulation-status-grid small {
    color: #555;

    font-size: 7px;

    letter-spacing: 2px;
}


.simulation-status-grid strong {
    display: block;

    margin-top: 8px;

    font-family: Impact, sans-serif;

    font-size: 28px;

    color: var(--orange);
}


.simulation-upload-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 25px;
}


.simulation-file {
    width: 100%;

    margin: 25px 0;

    padding: 16px;

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

    background: #080808;

    color: #777;
}


.simulation-key-panel,
.simulation-publish-key {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 35px;

    padding: 40px;

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

    background: #101010;
}


.simulation-key-panel h2,
.simulation-publish-key h2 {
    margin-top: 8px;

    font-family: Impact, sans-serif;

    font-size: 40px;
}


.simulation-key-panel p,
.simulation-publish-key p {
    margin-top: 8px;

    color: #666;

    font-size: 11px;
}


.simulation-publish-key {
    border-left:
        5px solid #a52d24;
}


/* KEY */

.scoring-rule {
    display: grid;

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

    margin-top: 30px;
}


.scoring-rule > div {
    padding: 22px;

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

    background: #101010;
}


.scoring-rule > div + div {
    border-left: 0;
}


.scoring-rule strong {
    display: block;

    font-family: Impact, sans-serif;

    font-size: 30px;

    color: var(--orange);
}


.scoring-rule span,
.scoring-rule b {
    display: block;

    margin-top: 5px;
}


.scoring-rule span {
    color: #777;

    font-size: 8px;
}


.scoring-rule b {
    color: #555;

    font-size: 7px;

    letter-spacing: 1px;
}


.simulation-key-form {
    margin-top: 30px;
}


.simulation-key-row {
    display: grid;

    grid-template-columns:
        65px 1fr 90px;

    align-items: center;

    gap: 20px;

    min-height: 70px;

    padding: 10px 15px;

    border-bottom:
        1px solid rgba(255,255,255,.09);

    background: #101010;
}


.simulation-key-row > strong {
    font-family: Impact, sans-serif;

    font-size: 27px;

    color: var(--orange);
}


.simulation-key-row > div {
    display: flex;

    flex-direction: column;
}


.simulation-key-row span {
    font-size: 10px;

    font-weight: 900;
}


.simulation-key-row small {
    margin-top: 4px;

    color: #666;

    font-size: 8px;
}


.simulation-key-row select {
    height: 43px;

    padding: 0 10px;

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

    background: #080808;

    color: white;

    font-weight: 900;
}


/* STUDENT LIST */

.student-simulation-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 35px;

    background:
        rgba(255,255,255,.1);
}


.student-simulation-card {
    min-height: 370px;

    display: flex;
    flex-direction: column;

    padding: 32px;

    background: #101010;

    transition: .2s;
}


.student-simulation-card:hover {
    position: relative;

    z-index: 2;

    transform:
        translateY(-5px);

    background: #171717;
}


.student-simulation-card > span {
    color: var(--orange);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 3px;
}


.student-simulation-card h2 {
    margin-top: 35px;

    font-family: Impact, sans-serif;

    font-size: 36px;

    line-height: .95;
}


.student-simulation-card p {
    margin-top: 12px;

    color: #6b6b6b;

    font-size: 11px;

    line-height: 1.6;
}


.student-simulation-state {
    margin-top: auto;

    display: flex;

    flex-direction: column;
}


.student-simulation-state strong {
    font-family: Impact, sans-serif;

    font-size: 42px;

    color: var(--orange);
}


.student-simulation-state small {
    color: #666;

    font-size: 7px;

    letter-spacing: 1px;
}


.student-simulation-card > b {
    margin-top: 25px;

    font-size: 8px;

    letter-spacing: 2px;
}


/* DETAIL */

.simulation-student-hero {
    padding:
        55px 0 40px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.simulation-student-hero h1 {
    max-width: 950px;

    margin-top: 10px;

    font-family: Impact, sans-serif;

    font-size:
        clamp(55px, 8vw, 105px);

    line-height: .85;
}


.simulation-student-hero p {
    max-width: 650px;

    margin-top: 20px;

    color: #747474;

    line-height: 1.6;
}


.exam-structure-grid {
    display: grid;

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

    margin-top: 30px;
}


.exam-structure-grid article {
    padding: 25px;

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

    background: #101010;
}


.exam-structure-grid article + article {
    border-left: 0;
}


.exam-structure-grid strong {
    display: block;

    font-family: Impact, sans-serif;

    font-size: 45px;

    color: var(--orange);
}


.exam-structure-grid span {
    display: block;

    margin-top: 5px;

    font-size: 8px;

    font-weight: 900;
}


.exam-structure-grid small {
    display: block;

    margin-top: 4px;

    color: #555;

    font-size: 8px;
}


.simulation-instructions {
    margin-top: 30px;

    padding: 30px;

    border-left:
        4px solid var(--orange);

    background: #101010;
}


.simulation-instructions p {
    margin-top: 10px;

    white-space: pre-line;

    color: #777;

    font-size: 11px;

    line-height: 1.7;
}


.simulation-student-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.waiting-key,
.simulation-result-preview {
    margin-top: 35px;

    padding: 45px;

    background:
        linear-gradient(
            120deg,
            #171717,
            #281006
        );

    border-left:
        5px solid var(--orange);
}


.waiting-key h2 {
    margin-top: 9px;

    font-family: Impact, sans-serif;

    font-size:
        clamp(45px, 6vw, 75px);
}


.waiting-key p {
    max-width: 650px;

    margin-top: 15px;

    color: #777;

    line-height: 1.6;
}


.simulation-result-preview h2 {
    margin-top: 8px;

    font-family: Impact, sans-serif;

    font-size: 70px;

    color: var(--orange);
}


.simulation-result-preview h2 small {
    color: #555;

    font-size: 24px;
}


/* ANSWER CARD */

.simulation-card-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-bottom: 35px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.simulation-card-header h1 {
    margin-top: 8px;

    font-family: Impact, sans-serif;

    font-size:
        clamp(55px, 7vw, 90px);
}


.simulation-card-header h1 span {
    color: var(--orange);
}


.simulation-card-header p {
    color: #666;
}


.simulation-card-warning {
    margin-top: 30px;

    padding: 20px;

    border-left:
        4px solid #cf3c30;

    background:
        rgba(207,60,48,.06);
}


.simulation-card-warning strong {
    color: #e55347;

    font-size: 8px;

    letter-spacing: 2px;
}


.simulation-card-warning p {
    margin-top: 5px;

    color: #777;

    font-size: 11px;
}


.answer-card-discipline {
    margin-top: 40px;
}


.answer-card-discipline > header {
    padding-bottom: 15px;

    border-bottom:
        1px solid rgba(255,255,255,.12);
}


.answer-card-discipline header div {
    display: flex;

    justify-content: space-between;

    gap: 20px;
}


.answer-card-discipline header span {
    font-family: Impact, sans-serif;

    font-size: 25px;
}


.answer-card-discipline header small {
    color: var(--orange);

    font-size: 8px;

    font-weight: 900;
}


.answer-card-rows {
    display: grid;

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

    gap: 1px;

    margin-top: 1px;

    background:
        rgba(255,255,255,.08);
}


.answer-card-row {
    display: grid;

    grid-template-columns:
        55px repeat(4, 1fr);

    min-height: 60px;

    align-items: center;

    padding: 8px;

    background: #101010;
}


.answer-card-row > strong {
    font-family: Impact, sans-serif;

    font-size: 21px;

    color: #777;
}


.answer-card-row label {
    display: flex;

    justify-content: center;
}


.answer-card-row input {
    position: absolute;

    opacity: 0;
}


.answer-card-row label span {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

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

    border-radius: 50%;

    cursor: pointer;

    font-family: Impact, sans-serif;
}


.answer-card-row input:checked + span {
    border-color: var(--orange);

    background: var(--orange);
}


.simulation-submit {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 40px;

    padding: 40px;

    border-left:
        5px solid var(--orange);

    background: #101010;
}


.simulation-submit h2 {
    margin-top: 7px;

    font-family: Impact, sans-serif;

    font-size: 40px;
}


.simulation-submit p {
    margin-top: 7px;

    color: #666;

    font-size: 11px;
}


/* RESULT */

.result-waiting h1 {
    margin-top: 10px;

    font-family: Impact, sans-serif;

    font-size:
        clamp(55px, 8vw, 100px);

    line-height: .86;
}


.result-waiting h1 em {
    color: var(--orange);

    font-style: normal;
}


.result-waiting a {
    margin-top: 30px;
}


.simulation-final-result {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 40px;

    padding-bottom: 40px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.simulation-final-result h1 {
    margin-top: 10px;

    font-family: Impact, sans-serif;

    font-size:
        clamp(75px, 10vw, 145px);

    line-height: .8;

    color: var(--orange);
}


.simulation-final-result h1 span {
    color: #555;

    font-size: .35em;
}


.minimum-met,
.minimum-not-met {
    max-width: 650px;

    margin-top: 25px;

    font-size: 12px;

    font-weight: 900;
}


.minimum-met {
    color: #38ca7d;
}


.minimum-not-met {
    color: #e05a4e;
}


.simulation-count-result {
    width: 180px;
    height: 180px;

    display: grid;

    place-content: center;

    flex: 0 0 auto;

    border:
        7px solid var(--orange);

    border-radius: 50%;

    text-align: center;
}


.simulation-count-result strong {
    font-family: Impact, sans-serif;

    font-size: 52px;
}


.simulation-count-result small {
    font-size: 7px;

    letter-spacing: 2px;
}


.simulation-count-result span {
    margin-top: 4px;

    color: #666;

    font-size: 8px;
}


.discipline-score-grid {
    display: grid;

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

    margin-top: 30px;
}


.discipline-score-grid article {
    padding: 30px;

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

    background: #101010;
}


.discipline-score-grid article + article {
    border-left: 0;
}


.discipline-score-grid small {
    color: #666;

    font-size: 8px;

    letter-spacing: 1px;
}


.discipline-score-grid strong {
    display: block;

    margin-top: 12px;

    font-family: Impact, sans-serif;

    font-size: 48px;

    color: var(--orange);
}


.discipline-score-grid strong span {
    color: #555;

    font-size: 20px;
}


.simulation-answer-review {
    margin-top: 60px;
}


.simulation-answer-review h2 {
    margin-top: 9px;

    font-family: Impact, sans-serif;

    font-size:
        clamp(42px, 6vw, 70px);
}


.simulation-answer-review h2 em {
    color: var(--orange);

    font-style: normal;
}


.simulation-review-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 25px;

    background:
        rgba(255,255,255,.1);
}


.simulation-review-grid article {
    min-height: 115px;

    display: grid;

    grid-template-columns:
        55px 1fr 1fr 40px;

    align-items: center;

    gap: 10px;

    padding: 15px;

    background: #101010;
}


.simulation-review-grid article.correct {
    box-shadow:
        inset 4px 0 0 #35c77a;
}


.simulation-review-grid article.wrong {
    box-shadow:
        inset 4px 0 0 #db5045;
}


.simulation-review-grid article > strong {
    font-family: Impact, sans-serif;

    font-size: 24px;
}


.simulation-review-grid div {
    display: flex;

    flex-direction: column;
}


.simulation-review-grid small {
    color: #555;

    font-size: 6px;
}


.simulation-review-grid b {
    margin-top: 4px;

    color: var(--orange);

    font-family: Impact, sans-serif;

    font-size: 20px;
}


.simulation-review-grid article > span {
    color: #35c77a;

    font-size: 8px;

    font-weight: 900;
}


.simulation-result-actions {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 30px;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .simulation-admin-grid,
    .student-simulation-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .simulation-review-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 800px) {

    .simulation-status-grid,
    .scoring-rule,
    .exam-structure-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .simulation-upload-grid {
        grid-template-columns: 1fr;
    }

    .simulation-key-panel,
    .simulation-publish-key,
    .simulation-submit,
    .simulation-final-result,
    .simulation-card-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .answer-card-rows {
        grid-template-columns: 1fr;
    }

    .discipline-score-grid {
        grid-template-columns: 1fr;
    }

    .discipline-score-grid article + article {
        border-left:
            1px solid rgba(255,255,255,.1);

        border-top: 0;
    }

}


@media (max-width: 550px) {

    .simulation-admin-grid,
    .student-simulation-grid,
    .simulation-review-grid {
        grid-template-columns: 1fr;
    }

    .simulation-status-grid,
    .scoring-rule,
    .exam-structure-grid {
        grid-template-columns: 1fr;
    }

    .simulation-key-row {
        grid-template-columns:
            50px 1fr 60px;
    }

    .simulation-student-actions,
    .simulation-result-actions {
        flex-direction: column;
    }

    .simulation-student-actions a,
    .simulation-result-actions a {
        width: 100%;
    }

    .answer-card-row {
        grid-template-columns:
            45px repeat(4, 1fr);
    }

    .answer-card-row label span {
        width: 32px;
        height: 32px;
    }

}

/* ==========================================================
   FASE 7 - ANALYTICS / PERFORMANCE
   ========================================================== */

/* STUDENT */

.performance-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 45px;

    padding-bottom: 40px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.performance-header h1 {
    margin-top: 10px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(58px, 8vw, 105px);

    line-height: .85;
}


.performance-header h1 span {
    color: var(--orange);
}


.performance-header p {
    margin-top: 16px;

    color: #707070;

    font-size: 12px;
}


.performance-main-circle {
    width: 170px;
    height: 170px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    padding: 10px;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--orange) var(--value),
            #252525 0
        );
}


.performance-main-circle > div {
    width: 100%;
    height: 100%;

    display: grid;
    place-content: center;

    border-radius: 50%;

    background: #090909;

    text-align: center;
}


.performance-main-circle strong {
    font-family:
        Impact,
        sans-serif;

    font-size: 44px;
}


.performance-main-circle small {
    margin-top: 3px;

    color: #606060;

    font-size: 7px;

    letter-spacing: 2px;
}


.performance-summary-grid {
    display: grid;

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

    margin-top: 30px;
}


.performance-summary-grid article {
    min-height: 160px;

    padding: 25px;

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

    background: #101010;
}


.performance-summary-grid article + article {
    border-left: 0;
}


.performance-summary-grid small {
    color: #5d5d5d;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.performance-summary-grid strong {
    display: block;

    margin-top: 22px;

    font-family:
        Impact,
        sans-serif;

    font-size: 47px;

    color: var(--orange);
}


.performance-summary-grid span {
    color: #656565;

    font-size: 9px;
}


.performance-section {
    margin-top: 60px;
}


.performance-section > header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;
}


.performance-section h2 {
    margin-top: 8px;

    font-family:
        Impact,
        sans-serif;

    font-size:
        clamp(38px, 5vw, 60px);
}


.performance-kpi-row {
    display: grid;

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

    margin-top: 25px;
}


.performance-kpi-row > div {
    padding: 24px;

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

    background: #101010;
}


.performance-kpi-row > div + div {
    border-left: 0;
}


.performance-kpi-row small {
    color: #5e5e5e;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.performance-kpi-row strong {
    display: inline-block;

    margin-top: 10px;

    font-family:
        Impact,
        sans-serif;

    font-size: 37px;

    color: var(--orange);
}


.performance-kpi-row span {
    margin-left: 3px;

    color: #555;

    font-size: 9px;
}


.performance-bars {
    display: grid;

    gap: 18px;

    margin-top: 30px;

    padding: 30px;

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

    background: #101010;
}


.performance-bar-row {
    display: grid;

    grid-template-columns:
        minmax(190px, .8fr)
        1.8fr
        55px;

    align-items: center;

    gap: 22px;
}


.performance-bar-label {
    display: flex;

    flex-direction: column;
}


.performance-bar-label strong {
    font-size: 10px;
}


.performance-bar-label small {
    margin-top: 4px;

    color: #555;

    font-size: 7px;
}


.performance-bar {
    height: 9px;

    overflow: hidden;

    background: #262626;
}


.performance-bar span {
    display: block;

    height: 100%;

    background: var(--orange);

    transition:
        width .4s ease;
}


.performance-bar-row > b {
    color: var(--orange);

    font-size: 10px;

    text-align: right;
}


.performance-priority {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 55px;

    padding: 40px;

    border-left:
        6px solid var(--orange);

    background:
        linear-gradient(
            120deg,
            #171717,
            #2a1006
        );
}


.performance-priority h2 {
    margin-top: 9px;

    font-family:
        Impact,
        sans-serif;

    font-size:
        clamp(36px, 5vw, 60px);
}


.performance-priority p {
    max-width: 600px;

    margin-top: 10px;

    color: #777;

    font-size: 11px;

    line-height: 1.6;
}


.performance-priority > strong {
    font-family:
        Impact,
        sans-serif;

    font-size: 65px;

    color: var(--orange);
}


.performance-history {
    margin-top: 25px;

    border-top:
        1px solid rgba(255,255,255,.1);
}


.performance-history > a {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 20px 5px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.performance-history > a:hover {
    background:
        rgba(255,75,10,.025);
}


.performance-history > a > div:first-child {
    display: flex;
    flex-direction: column;
}


.performance-history > a span {
    color: var(--orange);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.performance-history > a strong {
    margin-top: 5px;

    font-size: 12px;
}


.performance-history > a small {
    margin-top: 4px;

    color: #555;

    font-size: 8px;
}


.performance-history-result {
    text-align: right;
}


.performance-history-result strong {
    font-family:
        Impact,
        sans-serif;

    font-size: 28px !important;

    color: var(--orange);
}


/* EMPTY */

.analytics-empty {
    margin-top: 25px;

    padding: 35px;

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

    background: #0d0d0d;
}


.analytics-empty strong {
    color: #666;

    font-size: 8px;

    letter-spacing: 2px;
}


.analytics-empty p {
    max-width: 600px;

    margin-top: 7px;

    color: #555;

    font-size: 10px;

    line-height: 1.6;
}


/* ADMIN */

.analytics-admin-kpis {
    display: grid;

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

    margin-top: 30px;
}


.analytics-admin-kpis article {
    min-height: 160px;

    padding: 25px;

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

    background: #101010;
}


.analytics-admin-kpis article + article {
    border-left: 0;
}


.analytics-admin-kpis small {
    color: #5c5c5c;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;
}


.analytics-admin-kpis strong {
    display: block;

    margin-top: 21px;

    color: var(--orange);

    font-family:
        Impact,
        sans-serif;

    font-size: 46px;
}


.analytics-admin-kpis span {
    color: #606060;

    font-size: 9px;
}


.analytics-admin-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 30px;
}


.analytics-panel {
    min-height: 380px;

    padding: 30px;

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

    background: #101010;
}


.analytics-panel > h2 {
    margin-top: 7px;

    font-family:
        Impact,
        sans-serif;

    font-size: 38px;
}


.admin-progress-item {
    margin-top: 30px;
}


.admin-progress-item header {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    color: #777;

    font-size: 8px;
}


.admin-progress-item header span {
    color: var(--orange);
}


.admin-progress-item > div {
    height: 6px;

    margin-top: 9px;

    overflow: hidden;

    background: #282828;
}


.admin-progress-item > div i {
    display: block;

    height: 100%;

    background: var(--orange);
}


.analytics-large-number {
    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px solid rgba(255,255,255,.09);
}


.analytics-large-number strong {
    display: block;

    color: var(--orange);

    font-family:
        Impact,
        sans-serif;

    font-size: 48px;
}


.analytics-large-number span {
    color: #5f5f5f;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


.analytics-three {
    display: grid;

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

    gap: 8px;

    margin-top: 30px;
}


.analytics-three > div {
    min-width: 0;

    padding: 18px 10px;

    background: #080808;

    text-align: center;
}


.analytics-three strong {
    display: block;

    font-family:
        Impact,
        sans-serif;

    font-size: 30px;

    color: var(--orange);
}


.analytics-three small {
    color: #555;

    font-size: 6px;

    letter-spacing: 1px;
}


.analytics-wide-panel {
    margin-top: 30px;

    padding: 35px;

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

    background: #101010;
}


.analytics-wide-panel > header h2 {
    margin-top: 7px;

    font-family:
        Impact,
        sans-serif;

    font-size: 39px;
}


.admin-popular-days {
    margin-top: 25px;

    border-top:
        1px solid rgba(255,255,255,.09);
}


.admin-popular-row {
    display: grid;

    grid-template-columns:
        50px
        minmax(180px, .8fr)
        1.3fr
        40px;

    align-items: center;

    gap: 20px;

    min-height: 75px;

    border-bottom:
        1px solid rgba(255,255,255,.09);
}


.admin-popular-row > strong {
    color: var(--orange);

    font-family:
        Impact,
        sans-serif;

    font-size: 26px;
}


.admin-popular-info {
    display: flex;

    flex-direction: column;
}


.admin-popular-info span {
    font-size: 10px;

    font-weight: 900;
}


.admin-popular-info small {
    margin-top: 4px;

    color: #555;

    font-size: 7px;
}


.admin-popular-bar {
    height: 7px;

    overflow: hidden;

    background: #292929;
}


.admin-popular-bar i {
    display: block;

    height: 100%;

    background: var(--orange);
}


.admin-popular-row > b {
    color: var(--orange);

    text-align: right;
}


.analytics-student-list {
    margin-top: 25px;

    border-top:
        1px solid rgba(255,255,255,.09);
}


.analytics-student-list > div {
    min-height: 70px;

    display: grid;

    grid-template-columns:
        42px 1fr auto;

    align-items: center;

    gap: 13px;

    border-bottom:
        1px solid rgba(255,255,255,.09);
}


.analytics-avatar {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--orange);

    font-family:
        Impact,
        sans-serif;
}


.analytics-student-list > div > div {
    display: flex;

    flex-direction: column;
}


.analytics-student-list strong {
    font-size: 10px;
}


.analytics-student-list small {
    margin-top: 3px;

    color: #555;

    font-size: 8px;
}


.analytics-student-list b {
    color: #b94b42;

    font-size: 7px;

    letter-spacing: 1px;
}


.analytics-student-list b.active {
    color: #35c77a;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .performance-summary-grid,
    .analytics-admin-kpis {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .analytics-admin-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 760px) {

    .performance-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .performance-summary-grid,
    .performance-kpi-row,
    .analytics-admin-kpis {
        grid-template-columns: 1fr;
    }


    .performance-summary-grid article + article,
    .performance-kpi-row > div + div,
    .analytics-admin-kpis article + article {
        border-left:
            1px solid rgba(255,255,255,.1);

        border-top: 0;
    }


    .performance-bar-row {
        grid-template-columns: 1fr 50px;

        gap: 10px;
    }


    .performance-bar-label {
        grid-column: 1 / -1;
    }


    .performance-priority {
        align-items: flex-start;

        flex-direction: column;
    }


    .admin-popular-row {
        grid-template-columns:
            40px 1fr 35px;
    }


    .admin-popular-bar {
        grid-column:
            2 / 4;
    }

}


@media (max-width: 450px) {

    .performance-main-circle {
        width: 140px;
        height: 140px;
    }


    .analytics-wide-panel,
    .analytics-panel {
        padding: 22px 17px;
    }


    .analytics-three {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================
   FASE 8 - GUIAS / APOSTILAS
   ========================================================== */

/* ADMIN LIST */

.guide-admin-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 35px;

    background:
        rgba(255,255,255,.1);
}


.guide-admin-grid > article {
    min-height: 360px;

    display: flex;
    flex-direction: column;

    padding: 30px;

    background: #101010;
}


.guide-admin-grid > article.published {
    box-shadow:
        inset 0 4px 0 var(--orange);
}


.guide-admin-grid article > header {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


.guide-admin-grid header > span {
    color: var(--orange);

    font-family:
        Impact,
        sans-serif;

    font-size: 34px;
}


.guide-admin-grid header b {
    padding: 7px 9px;

    background:
        rgba(48,195,114,.12);

    color: #35c77a;

    font-size: 7px;
}


.guide-admin-grid header b.draft {
    background:
        rgba(255,255,255,.05);

    color: #666;
}


.guide-admin-grid article > small {
    margin-top: 30px;

    color: var(--orange);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;
}


.guide-admin-grid h2 {
    margin-top: 8px;

    font-family:
        Impact,
        sans-serif;

    font-size: 34px;

    line-height: .95;
}


.guide-admin-grid p {
    margin-top: 13px;

    color: #686868;

    font-size: 11px;

    line-height: 1.6;
}


.guide-admin-numbers {
    display: flex;

    gap: 30px;

    margin-top: 25px;
}


.guide-admin-numbers > div {
    display: flex;

    flex-direction: column;
}


.guide-admin-numbers strong {
    color: var(--orange);

    font-family:
        Impact,
        sans-serif;

    font-size: 30px;
}


.guide-admin-numbers span {
    color: #555;

    font-size: 6px;

    font-weight: 900;

    letter-spacing: 1px;
}


.guide-admin-grid
.content-manage-link {
    margin-top: auto;
}


/* FORM */

.guide-admin-form textarea {
    width: 100%;

    padding: 15px;

    resize: vertical;

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

    outline: none;

    background: #080808;

    color: white;

    font-family: inherit;

    line-height: 1.6;
}


.guide-admin-form textarea:focus {
    border-color: var(--orange);
}


/* STATUS */

.guide-status-strip {
    display: grid;

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

    margin-top: 30px;
}


.guide-status-strip article {
    padding: 25px;

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

    background: #101010;
}


.guide-status-strip article + article {
    border-left: 0;
}


.guide-status-strip small {
    color: #555;

    font-size: 7px;

    letter-spacing: 2px;
}


.guide-status-strip strong {
    display: block;

    margin-top: 8px;

    color: var(--orange);

    font-family:
        Impact,
        sans-serif;

    font-size: 30px;
}


/* ADMIN CHAPTERS */

.guide-chapters-admin {
    margin-top: 45px;
}


.guide-chapters-admin > header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;
}


.guide-chapters-admin h2 {
    margin-top: 8px;

    font-family:
        Impact,
        sans-serif;

    font-size: 45px;
}


.guide-chapter-admin-list {
    margin-top: 25px;

    border-top:
        1px solid rgba(255,255,255,.1);
}


.guide-chapter-admin-list > a {
    min-height: 80px;

    display: grid;

    grid-template-columns:
        55px 1fr auto;

    align-items: center;

    gap: 20px;

    padding: 10px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.guide-chapter-admin-list > a:hover {
    background:
        rgba(255,75,10,.035);
}


.guide-chapter-admin-list > a > strong {
    color: var(--orange);

    font-family:
        Impact,
        sans-serif;

    font-size: 27px;
}


.guide-chapter-admin-list > a > div {
    display: flex;

    flex-direction: column;
}


.guide-chapter-admin-list span {
    font-size: 11px;

    font-weight: 900;
}


.guide-chapter-admin-list small {
    margin-top: 5px;

    color: #666;

    font-size: 7px;
}


.guide-chapter-admin-list
small.published {
    color: #35c77a;
}


.guide-chapter-admin-list b {
    color: var(--orange);

    font-size: 8px;

    letter-spacing: 1px;
}


/* EDITOR */

.guide-chapter-editor {
    margin-top: 35px;

    padding: 35px;

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

    background: #101010;
}


.guide-chapter-editor > label {
    display: grid;

    gap: 9px;

    margin-bottom: 25px;
}


.guide-chapter-editor > label > span {
    color: var(--orange);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;
}


.guide-chapter-editor input[type="text"] {
    height: 52px;

    padding: 0 15px;

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

    outline: none;

    background: #080808;

    color: white;
}


.guide-chapter-editor textarea {
    width: 100%;

    min-height: 650px;

    padding: 22px;

    resize: vertical;

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

    outline: none;

    background: #080808;

    color: #ddd;

    font-family:
        Consolas,
        monospace;

    font-size: 13px;

    line-height: 1.7;
}


.guide-chapter-editor input:focus,
.guide-chapter-editor textarea:focus {
    border-color: var(--orange);
}


.markdown-help {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 20px;

    padding: 15px;

    background: #080808;
}


.markdown-help > strong {
    width: 100%;

    margin-bottom: 4px;

    color: #666;

    font-size: 7px;

    letter-spacing: 2px;
}


.markdown-help code {
    padding: 6px 9px;

    background: #1b1b1b;

    color: var(--orange);

    font-size: 9px;
}


.guide-publish-switch {
    display: flex !important;

    grid-template-columns: none !important;
}


/* STUDENT GUIDE LIST */

.student-guide-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 35px;

    background:
        rgba(255,255,255,.1);
}


.student-guide-grid > article {
    min-height: 440px;

    display: flex;
    flex-direction: column;

    padding: 32px;

    background: #101010;
}


.student-guide-grid > article > span {
    color: var(--orange);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;
}


.student-guide-grid h2 {
    margin-top: 40px;

    font-family:
        Impact,
        sans-serif;

    font-size: 42px;

    line-height: .92;
}


.student-guide-grid p {
    margin-top: 14px;

    color: #6c6c6c;

    font-size: 11px;

    line-height: 1.6;
}


.student-guide-progress {
    margin-top: auto;

    padding-top: 30px;
}


.student-guide-progress header {
    display: flex;

    justify-content: space-between;

    font-size: 7px;

    letter-spacing: 1px;
}


.student-guide-progress header b {
    color: var(--orange);
}


.student-guide-progress > div {
    height: 6px;

    margin-top: 9px;

    overflow: hidden;

    background: #292929;
}


.student-guide-progress > div i {
    display: block;

    height: 100%;

    background: var(--orange);
}


.student-guide-progress small {
    display: block;

    margin-top: 8px;

    color: #555;

    font-size: 8px;
}


.student-guide-grid
.student-primary-button {
    margin-top: 25px;
}


/* GUIDE DETAIL */

.guide-student-hero {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding-bottom: 40px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.guide-student-hero h1 {
    max-width: 850px;

    margin-top: 10px;

    font-family:
        Impact,
        sans-serif;

    font-size:
        clamp(55px, 8vw, 100px);

    line-height: .85;
}


.guide-student-hero p {
    max-width: 650px;

    margin-top: 18px;

    color: #727272;

    line-height: 1.6;
}


.guide-progress-circle {
    width: 150px;
    height: 150px;

    flex: 0 0 auto;

    display: grid;
    place-content: center;

    border:
        7px solid var(--orange);

    border-radius: 50%;

    text-align: center;
}


.guide-progress-circle strong {
    font-family:
        Impact,
        sans-serif;

    font-size: 40px;
}


.guide-progress-circle small {
    color: #666;

    font-size: 6px;

    letter-spacing: 1px;
}


.guide-progress-wide {
    margin-top: 30px;
}


.guide-progress-wide > div {
    height: 6px;

    overflow: hidden;

    background: #282828;
}


.guide-progress-wide > div span {
    display: block;

    height: 100%;

    background: var(--orange);
}


.guide-progress-wide small {
    display: block;

    margin-top: 8px;

    color: #5f5f5f;

    font-size: 8px;
}


/* CHAPTER LIST */

.guide-chapter-list {
    margin-top: 35px;

    border-top:
        1px solid rgba(255,255,255,.1);
}


.guide-chapter-list > a {
    min-height: 100px;

    display: grid;

    grid-template-columns:
        65px 1fr auto;

    align-items: center;

    gap: 25px;

    padding: 15px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.guide-chapter-list > a:hover {
    background:
        rgba(255,75,10,.035);
}


.guide-chapter-list > a.completed {
    background:
        rgba(48,195,114,.025);
}


.guide-chapter-list > a > strong {
    color: var(--orange);

    font-family:
        Impact,
        sans-serif;

    font-size: 32px;
}


.guide-chapter-list small {
    color: #555;

    font-size: 7px;

    letter-spacing: 2px;
}


.guide-chapter-list h2 {
    margin-top: 4px;

    font-size: 14px;
}


.guide-chapter-list > a > span {
    color: var(--orange);

    font-size: 8px;

    font-weight: 900;
}


.guide-chapter-done {
    color: #35c77a !important;
}


/* READER */

.guide-reader-navigation {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #666;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;
}


.guide-reader-navigation a:hover {
    color: var(--orange);
}


.guide-reader-header {
    max-width: 950px;

    margin-top: 45px;

    padding-bottom: 35px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}


.guide-reader-header h1 {
    margin-top: 10px;

    font-family:
        Impact,
        sans-serif;

    font-size:
        clamp(50px, 7vw, 90px);

    line-height: .9;
}


.protected-guide-reader {
    position: relative;

    max-width: 1000px;

    margin: 35px auto 0;

    overflow: hidden;

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

    background: #f8f6f1;

    color: #1b1b1b;

    user-select: none;
    -webkit-user-select: none;
}


.guide-watermarks {
    position: absolute;

    inset: -10%;

    z-index: 5;

    display: grid;

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

    align-items: center;

    pointer-events: none;

    transform:
        rotate(-20deg);
}


.guide-watermarks span {
    padding: 35px;

    color:
        rgba(0,0,0,.055);

    font-size: 12px;

    font-weight: 900;

    text-align: center;

    text-transform: uppercase;
}


.guide-article {
    position: relative;

    z-index: 2;

    padding:
        clamp(32px, 7vw, 85px);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    line-height: 1.85;
}


.guide-article h1,
.guide-article h2,
.guide-article h3,
.guide-article h4 {
    margin:
        1.8em 0 .6em;

    color: #111;

    font-family:
        Arial,
        sans-serif;

    line-height: 1.15;
}


.guide-article h1 {
    margin-top: 0;

    font-size: 38px;
}


.guide-article h2 {
    font-size: 29px;

    border-bottom:
        2px solid #ed4b13;

    padding-bottom: 8px;
}


.guide-article h3 {
    font-size: 22px;
}


.guide-article p {
    margin:
        0 0 1.25em;
}


.guide-article strong {
    color: #000;
}


.guide-article ul,
.guide-article ol {
    margin:
        0 0 1.5em 25px;
}


.guide-article li {
    margin-bottom: 8px;
}


.guide-article blockquote {
    margin:
        25px 0;

    padding:
        18px 22px;

    border-left:
        5px solid #ed4b13;

    background: #eeeae0;
}


.guide-article table {
    width: 100%;

    margin:
        25px 0;

    border-collapse: collapse;

    font-family: Arial, sans-serif;

    font-size: 13px;
}


.guide-article th,
.guide-article td {
    padding: 10px;

    border:
        1px solid #ccc;

    text-align: left;
}


.guide-article th {
    background: #ebe6dc;
}


.guide-article a {
    color: #d63f0b;

    text-decoration: underline;
}


.guide-reader-complete {
    max-width: 1000px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 35px;

    margin:
        30px auto 0;

    padding: 35px;

    border-left:
        5px solid var(--orange);

    background: #101010;
}


.guide-reader-complete h2 {
    margin-top: 7px;

    font-family:
        Impact,
        sans-serif;

    font-size: 38px;
}


.guide-reader-next {
    max-width: 1000px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin:
        20px auto 0;
}


.guide-reader-next > a {
    min-height: 90px;

    display: flex;

    flex-direction: column;
    justify-content: center;

    padding: 20px;

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

    background: #101010;
}


.guide-reader-next > a.next {
    text-align: right;
}


.guide-reader-next small {
    color: #555;

    font-size: 7px;

    letter-spacing: 2px;
}


.guide-reader-next strong {
    margin-top: 6px;

    color: var(--orange);

    font-size: 10px;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .guide-admin-grid,
    .student-guide-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 760px) {

    .guide-admin-grid,
    .student-guide-grid {
        grid-template-columns: 1fr;
    }


    .guide-status-strip {
        grid-template-columns: 1fr;
    }


    .guide-status-strip article + article {
        border-left:
            1px solid rgba(255,255,255,.1);

        border-top: 0;
    }


    .guide-chapters-admin > header,
    .guide-student-hero,
    .guide-reader-complete {
        align-items: flex-start;

        flex-direction: column;
    }


    .guide-chapter-editor {
        padding: 22px 16px;
    }


    .guide-chapter-editor textarea {
        min-height: 520px;
    }


    .guide-watermarks {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .guide-article {
        font-size: 16px;
    }

}


@media (max-width: 500px) {

    .guide-chapter-admin-list > a,
    .guide-chapter-list > a {
        grid-template-columns:
            48px 1fr;
    }


    .guide-chapter-admin-list > a > b,
    .guide-chapter-list > a > span {
        grid-column:
            2 / 3;
    }


    .guide-reader-navigation {
        flex-direction: column;
    }


    .guide-reader-next {
        grid-template-columns: 1fr;
    }


    .guide-article {
        padding: 30px 22px;
    }


    .guide-article h1 {
        font-size: 31px;
    }


    .guide-article h2 {
        font-size: 25px;
    }

}


/* ==========================================================
   ASSINE JA / WHATSAPP
   ========================================================== */

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


.header-subscribe {
    position: relative;

    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 23px;

    border: 1px solid var(--orange);

    background: rgba(7,7,7,.76);

    color: var(--orange);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.5px;

    clip-path: polygon(
        8% 0,
        100% 0,
        92% 100%,
        0 100%
    );

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.header-subscribe:hover {
    background: var(--orange);
    color: white;

    transform: translateY(-2px);
}


/* POPUP COMERCIAL */

.sales-contact-card {
    position: fixed;

    right: 26px;
    bottom: 110px;

    z-index: 950;

    width: 310px;

    padding: 20px;

    border:
        1px solid rgba(255,75,10,.5);

    border-left:
        4px solid var(--orange);

    background:
        linear-gradient(
            145deg,
            rgba(18,18,18,.98),
            rgba(5,5,5,.98)
        );

    box-shadow:
        0 24px 70px rgba(0,0,0,.55),
        0 0 35px rgba(255,75,10,.08);

    backdrop-filter: blur(12px);
}


.sales-contact-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 80px;
    height: 2px;

    background: var(--orange);
}


.sales-contact-top {
    display: flex;
    align-items: center;

    gap: 12px;
}


.sales-contact-dot {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--orange);

    color: white;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: 13px;

    letter-spacing: 1px;
}


.sales-contact-top div {
    display: flex;
    flex-direction: column;
}


.sales-contact-top small {
    color: var(--orange);

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 2px;
}


.sales-contact-top strong {
    margin-top: 3px;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: 23px;

    letter-spacing: .8px;
}


.sales-contact-card > p {
    margin-top: 13px;

    color: rgba(255,255,255,.62);

    font-size: 11px;

    line-height: 1.55;
}


.sales-contact-card > p b {
    color: white;
}


.sales-contact-price {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;

    margin-top: 14px;
    padding-top: 13px;

    border-top:
        1px solid rgba(255,255,255,.09);
}


.sales-contact-price span {
    color: rgba(255,255,255,.42);

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.sales-contact-price strong {
    color: white;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: 25px;

    letter-spacing: .5px;
}


.sales-contact-card > a {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 15px;
    padding: 0 17px;

    background: var(--orange);

    color: white;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: 13px;

    letter-spacing: 1px;

    transition:
        background .2s ease,
        transform .2s ease;
}


.sales-contact-card > a:hover {
    background: #ff612a;

    transform: translateY(-2px);
}


.sales-contact-card > a b {
    font-size: 20px;
}


/* TABLET */

@media (max-width: 900px) {

    .header-actions {
        gap: 6px;
    }


    .header-subscribe,
    .header-login {
        padding-left: 15px;
        padding-right: 15px;

        font-size: 9px;
    }


    .sales-contact-card {
        right: 18px;
        bottom: 90px;

        width: 290px;
    }

}


/* CELULAR */

@media (max-width: 600px) {

    .header-actions {
        gap: 4px;
    }


    .header-subscribe,
    .header-login {
        min-height: 42px;

        padding-left: 10px;
        padding-right: 10px;

        font-size: 8px;

        letter-spacing: .5px;
    }


    .sales-contact-card {
        right: 12px;
        bottom: 12px;

        width: calc(100% - 24px);

        padding: 16px;
    }


    .sales-contact-card > p {
        display: none;
    }


    .sales-contact-price {
        margin-top: 10px;
        padding-top: 10px;
    }


    .sales-contact-card > a {
        margin-top: 11px;
    }

}

/* ==========================================================
   WHATSAPP FLOATING WIDGET V2
   ========================================================== */

.sales-contact-widget {
    position: fixed;

    right: 26px;
    bottom: 26px;

    z-index: 1100;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    pointer-events: none;
}


/* ==========================================================
   BOLINHA
   ========================================================== */

.sales-contact-launcher {
    position: relative;

    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(255,75,10,.65);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ff5a1f,
            #e53e00
        );

    color: white;

    box-shadow:
        0 12px 40px rgba(0,0,0,.55),
        0 0 30px rgba(255,75,10,.23);

    cursor: pointer;

    pointer-events: auto;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.sales-contact-launcher:hover {
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 17px 45px rgba(0,0,0,.62),
        0 0 38px rgba(255,75,10,.35);
}


.sales-launcher-icon {
    position: relative;

    z-index: 3;

    width: 47px;
    height: 47px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

    background:
        rgba(0,0,0,.16);

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: 15px;

    letter-spacing: 1px;
}


/* PULSO */

.sales-launcher-pulse {
    position: absolute;

    inset: -1px;

    z-index: 1;

    border:
        2px solid rgba(255,75,10,.72);

    border-radius: 50%;

    animation:
        salesPulse 2.1s ease-out infinite;
}


@keyframes salesPulse {

    0% {
        opacity: .75;
        transform: scale(.9);
    }

    70% {
        opacity: 0;
        transform: scale(1.55);
    }

    100% {
        opacity: 0;
        transform: scale(1.55);
    }

}


/* ==========================================================
   CARD
   ========================================================== */

.sales-contact-card {
    position: absolute;

    right: 0;
    bottom: 76px;

    width: 310px;

    margin: 0;

    padding: 20px;

    border:
        1px solid rgba(255,75,10,.5);

    border-left:
        4px solid var(--orange);

    background:
        linear-gradient(
            145deg,
            rgba(18,18,18,.985),
            rgba(5,5,5,.99)
        );

    box-shadow:
        0 24px 70px rgba(0,0,0,.65),
        0 0 40px rgba(255,75,10,.10);

    backdrop-filter: blur(15px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(24px)
        scale(.90);

    transform-origin:
        bottom right;

    transition:
        opacity .28s ease,
        transform .34s cubic-bezier(.22,.8,.25,1),
        visibility .28s ease;
}


/* ABERTO */

.sales-contact-widget.open
.sales-contact-card {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* quando aberto, reduz a pulsacao */

.sales-contact-widget.open
.sales-launcher-pulse {

    animation: none;

    opacity: 0;
}


/* ==========================================================
   BOTAO MINIMIZAR
   ========================================================== */

.sales-contact-minimize {
    position: absolute;

    top: 10px;
    right: 11px;

    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    padding: 0;

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

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

    color:
        rgba(255,255,255,.72);

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.sales-contact-minimize:hover {

    background: var(--orange);

    border-color: var(--orange);

    color: white;
}


/* Mantem os elementos internos clicaveis */

.sales-contact-card a,
.sales-contact-card button {
    pointer-events: auto;
}


/* ==========================================================
   ENTRADA INICIAL DA BOLINHA
   ========================================================== */

.sales-contact-launcher {
    animation:
        launcherEntrance .65s
        cubic-bezier(.22,.8,.25,1)
        both;
}


@keyframes launcherEntrance {

    from {
        opacity: 0;

        transform:
            translateY(25px)
            scale(.55);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .sales-contact-widget {
        right: 14px;
        bottom: 14px;
    }


    .sales-contact-launcher {
        width: 56px;
        height: 56px;
    }


    .sales-launcher-icon {
        width: 42px;
        height: 42px;

        font-size: 13px;
    }


    .sales-contact-card {
        right: 0;
        bottom: 68px;

        width:
            min(
                310px,
                calc(100vw - 28px)
            );

        padding: 17px;
    }


    .sales-contact-card > p {
        display: block;
    }

}


/* usuarios que preferem menos animacao */

@media (prefers-reduced-motion: reduce) {

    .sales-contact-launcher,
    .sales-launcher-pulse,
    .sales-contact-card {
        animation: none;

        transition: none;
    }

}