* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Barlow Condensed', sans-serif;
    
}

body {
    display: flex;
    justify-content: right;
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    background-color: #e02a24;
    padding: 0px 30px;
    width: 99vw;
    min-height: 160px;
}

header img {    
    width: 160px;
    height: 160px;
}

header .nav {
    margin: 20px;
    display: flex;
    height: 30px;
    align-items: center;
}

.nav p {
    padding: 10px;
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    font-weight: 500;
    border-left: 1px solid #022B3A;
}

.nav p:hover {
    background-color: #022B3A;
    color: white;
}

.nav span {
    color: yellow;
    border-radius: 5px;
}

.banner {
    display: flex;
    flex-direction: column;
    background-image: url(../images/burger-banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 99vw;
    min-height: 600px;
    box-shadow: inset -2px 1px 8px 4px rgba(0, 0, 0, 0.33);
}

.event {
    display: flex;
    height: 400px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.prop {
    flex: 1;
    padding: 40px;
    
}

.prop h1 {
    max-width: 440px;
    font-size: 70px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.314);
    color: #022B3A;
}

.prop p {
    max-width: 350px;
    margin-top: 30px;
    font-size: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.314);
}

.date {
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-right: 40px;
    width: 220px;
    background-color: rgba(0, 0, 0, 0.715);
    color: white;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    border-radius: 15px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.305);
}

#date {
    border: 3px solid white;
    border-radius: 0px 0px 15px 15px ;
}

.banner button {
    width: 120px;
    height: 28px;
    font-size: 18px;
    margin-left: 40px;
    background-color: #1F7A8C;
    color: white;
    border: 1px solid #022B3A;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.31);
}

.banner button:hover {
    color: #022B3A;
    background-color: #BFDBF7;
    cursor: pointer;
    border: 2px solid #022B3A;
    font-weight: bold;
}

.menu {
    display: flex;
    flex-direction: column;
    width: 99vw;
    min-height: 600px;
    background-color: #e02a24;
}

.menuDescription {
    flex: 1;
    padding: 40px;
    font-size: 28px;
    color: #022B3A;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.314);
}

.menuOptions {
    flex: 1;
    display: flex;
    margin: 40px;
}

.option1,
.option2,
.option3 {
    background-color: #BFDBF7;
    width: 200px;
    height: 350px;
    border: 5px solid #022B3A;
    border-radius: 10px;
    margin-right: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.314);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.31);
}

.option1:hover,
.option2:hover,
.option3:hover {
    box-shadow: 2px 2px 10px #BFDBF7;
    border-color: #BFDBF7;
}

.option1 h2,
.option2 h2,
.option3 h2 {
    font-size: 45px;
    text-align: center;
    color: #022B3A;
}

.option1 p,
.option2 p,
.option3 p {
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
    color: #022B3A;
}

.smallName {
    font-size: 10px;
}

.blueOption {
    color: #1F7A8C;
}

.redOption {
    color: #e02a24;
}

.address {
    background-color: orange;
    color: #022B3A;
    padding: 40px;
    font-size: 20px;
    font-weight: bold
}

.copyright {
    background-color: #022B3A;
    color:#1F7A8C;
    text-align: center;
}

.copyright a {
    text-decoration: none;
    color:#1F7A8C;
    font-weight: bold;
}



/* ================================
   RESPONSIVIDADE - CELULAR
   ================================ */

@media (max-width: 600px) {

    body {
        display: block;
        width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: 100% !important;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ---------- HEADER ---------- */

    header {
        width: 100%;
        min-height: 90px;
        height: auto;
        padding: 10px 15px;
        align-items: center;
    }

    header img {
        width: 85px;
        height: 85px;
        flex-shrink: 0;
    }

    header .nav {
        margin: 0;
        height: auto;
        display: flex;
        align-items: center;
    }

    .nav p {
        padding: 8px 7px;
        font-size: 16px;
        text-align: center;
        line-height: 1.1;
    }

    .nav span.material-symbols-outlined {
        font-size: 28px;
        display: block;
    }

    /* ---------- BANNER ---------- */

    .banner {
        width: 100%;
        min-height: 620px;
        background-attachment: scroll;
        background-position: center;
    }

    .event {
        height: auto;
        min-height: 500px;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 30px;
    }

    .prop {
        padding: 35px 25px 0 25px;
        flex: none;
    }

    .prop h1 {
        max-width: 100%;
        font-size: 52px;
        line-height: 0.95;
    }

    .prop p {
        max-width: 100%;
        margin-top: 25px;
        font-size: 25px;
        line-height: 1.15;
    }

    .date {
        align-self: center;
        width: 190px;
        margin-right: 0;
        font-size: 32px;
    }

    #date {
        width: 100%;
    }

    .banner button {
        width: 140px;
        margin: 0 0 30px 25px;
        flex-shrink: 0;
    }

    /* ---------- MENU ---------- */

    .menu {
        width: 100%;
        min-height: auto;
    }

    .menuDescription {
        padding: 35px 25px 20px 25px;
        font-size: 24px;
        line-height: 1.15;
    }

    .menuOptions {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px 20px 40px 20px;
        gap: 25px;
    }

    .option1,
    .option2,
    .option3 {
        width: 100%;
        max-width: 320px;
        height: auto;
        min-height: 300px;
        margin-right: 0;
    }

    .option1 h2,
    .option2 h2,
    .option3 h2 {
        font-size: 40px;
    }

    .option1 p,
    .option2 p,
    .option3 p {
        font-size: 19px;
        padding: 15px 20px;
    }

    /* ---------- FOOTER ---------- */

    .address {
        padding: 30px 25px;
        font-size: 18px;
        line-height: 1.3;
    }

    .copyright {
        padding: 10px;
        font-size: 16px;
    }
}

/* =========================================
   FASE 8 - NOVA IDENTIDADE VISUAL
   HEADER + BANNER
   ========================================= */


/* ---------- CORES DO PROJETO ---------- */

:root {
    --space-dark: #06131c;
    --space-panel: #0b2634;

    --paragon: #35c8f0;
    --paragon-glow: rgba(53, 200, 240, 0.35);

    --renegade: #e63b48;
    --renegade-glow: rgba(230, 59, 72, 0.30);

    --gold: #d8a93d;

    --text-light: #eef7fa;
    --text-muted: #9eb8c2;
}


/* ---------- BASE ---------- */

body {
    background-color: var(--space-dark);
}

.container {
    width: 100%;
}


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

header {
    position: relative;

    width: 100%;
    min-height: 120px;

    padding: 10px 35px;

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

    background:
        radial-gradient(
            circle at 5% 50%,
            rgba(53, 200, 240, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 50%,
            rgba(230, 59, 72, 0.13),
            transparent 28%
        ),
        linear-gradient(
            90deg,
            #071923,
            #08151d 50%,
            #11171d
        );

    border-bottom: 1px solid rgba(53, 200, 240, 0.22);
}


/* linha Paragon / Renegade */

header::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--paragon) 15%,
            rgba(53, 200, 240, 0.15) 43%,
            rgba(230, 59, 72, 0.15) 57%,
            var(--renegade) 85%,
            transparent 100%
        );
}


/* ---------- LOGO ---------- */

header img {
    width: 105px;
    height: 105px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 6px rgba(53, 200, 240, 0.15));
}


/* ---------- NAVEGAÇÃO ---------- */

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

    height: auto;
    margin: 0;
}

.nav p {
    position: relative;

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

    min-height: 45px;

    padding: 8px 16px;

    color: var(--text-light);

    border-left: 1px solid rgba(53, 200, 240, 0.18);

    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;

    cursor: pointer;

    transition: 0.2s ease;
}

.nav p:hover {
    color: #ffffff;

    background: rgba(53, 200, 240, 0.10);

    box-shadow:
        inset 0 -2px 0 var(--paragon);
}


/* último item = carrinho */

.nav p:last-child {
    color: var(--gold);

    border-right: 1px solid rgba(216, 169, 61, 0.18);
}

.nav p:last-child:hover {
    color: #f4cf6e;

    background: rgba(216, 169, 61, 0.08);

    box-shadow:
        inset 0 -2px 0 var(--gold);
}

.nav span {
    color: inherit;
}

.nav span.material-symbols-outlined {
    font-size: 28px;
}

#cartQt {
    margin-left: 3px;

    font-size: 17px;
    font-weight: 700;
}


/* =========================================
   BANNER
   ========================================= */

.banner {
    position: relative;

    display: flex;

    width: 100%;
    min-height: 590px;

    background-image:
        linear-gradient(
            90deg,
            rgba(2, 19, 29, 0.88) 0%,
            rgba(3, 20, 30, 0.62) 42%,
            rgba(19, 12, 18, 0.52) 68%,
            rgba(37, 9, 15, 0.72) 100%
        ),
        url(../images/burger-banner.jpg);

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    background-attachment: scroll;

    box-shadow: none;

    overflow: hidden;
}


/* brilho azul à esquerda */

.banner::before {
    content: '';

    position: absolute;

    left: -120px;
    top: 5%;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background: rgba(53, 200, 240, 0.10);

    filter: blur(80px);

    pointer-events: none;
}


/* brilho vermelho à direita */

.banner::after {
    content: '';

    position: absolute;

    right: -130px;
    bottom: 0;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background: rgba(230, 59, 72, 0.11);

    filter: blur(90px);

    pointer-events: none;
}


/* ---------- CONTEÚDO DO BANNER ---------- */

.event {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;

    width: 100%;
    min-height: 590px;
    height: auto;

    align-items: center;

    gap: 50px;

    padding: 70px 7%;
}


/* ---------- TEXTO PRINCIPAL ---------- */

.prop {
    padding: 0;
}

.prop h1 {
    max-width: 650px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(58px, 7vw, 92px);
    line-height: 0.9;
    letter-spacing: 2px;

    text-shadow:
        0 5px 25px rgba(0, 0, 0, 0.55);
}


/* pequeno detalhe abaixo do título */

.prop h1::after {
    content: '';

    display: block;

    width: 150px;
    height: 3px;

    margin-top: 22px;

    background:
        linear-gradient(
            90deg,
            var(--paragon),
            var(--renegade)
        );

    box-shadow:
        -15px 0 20px var(--paragon-glow),
        15px 0 20px var(--renegade-glow);
}


.prop p {
    max-width: 520px;

    margin-top: 28px;

    color: #d7e4e8;

    font-size: 27px;
    line-height: 1.25;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.75);
}


/* =========================================
   PRÓXIMA MISSÃO
   ========================================= */

.date {
    position: relative;

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

    width: 100%;
    min-height: 150px;

    margin: 0;
    padding: 22px;

    color: var(--text-light);

    background:
        linear-gradient(
            135deg,
            rgba(10, 45, 61, 0.72),
            rgba(8, 21, 29, 0.82)
        );

    border: 1px solid rgba(53, 200, 240, 0.42);
    border-radius: 6px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.28),
        inset 0 0 25px rgba(53, 200, 240, 0.03);

    backdrop-filter: blur(8px);

    font-size: 23px;
    font-weight: 500;
    text-align: left;
}


/* pequeno detalhe dourado */

.date::before {
    content: '';

    position: absolute;

    top: -1px;
    left: 20px;

    width: 70px;
    height: 3px;

    background: var(--gold);

    box-shadow:
        0 0 10px rgba(216, 169, 61, 0.45);
}


.date > p:first-child {
    color: var(--text-muted);

    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


#date {
    width: auto;

    margin-top: 8px;
    padding: 0;

    color: #ffffff;

    border: none;
    border-radius: 0;

    font-size: 42px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 2px;
}


/* botão antigo do banner não é mais utilizado */

.banner > button {
    display: none;
}

/* =========================================
   FASE 8 - HEADER/BANNER MOBILE
   ========================================= */

@media (max-width: 600px) {

    header {
        min-height: 82px;

        padding: 8px 12px;
    }

    header img {
        width: 72px;
        height: 72px;
    }

    header .nav {
        margin: 0;
    }

    .nav p {
        min-height: 40px;

        padding: 6px 8px;

        font-size: 14px;
        line-height: 1.05;
    }

    .nav span.material-symbols-outlined {
        font-size: 25px;
    }

    #cartQt {
        font-size: 15px;
    }


    /* ---------- BANNER ---------- */

    .banner {
        min-height: 590px;

        background-position: 58% center;
    }

    .event {
        display: flex;
        flex-direction: column;

        min-height: 590px;

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

        gap: 45px;

        padding: 55px 24px;
    }

    .prop {
        padding: 0;
    }

    .prop h1 {
        max-width: 100%;

        font-size: clamp(50px, 15vw, 68px);
        line-height: 0.92;
    }

    .prop h1::after {
        width: 110px;

        margin-top: 18px;
    }

    .prop p {
        max-width: 100%;

        margin-top: 22px;

        color: #e3edf0;

        font-size: 22px;
        line-height: 1.25;
    }


    /* ---------- PRÓXIMA MISSÃO ---------- */

    .date {
        align-self: stretch;

        width: 100%;
        max-width: 300px;

        min-height: 125px;

        margin: 0;

        padding: 18px 20px;

        font-size: 20px;
    }

    .date > p:first-child {
        font-size: 16px;
    }

    #date {
        font-size: 36px;
    }
}

/* =========================================
   FASE 8.2 - CARDÁPIO
   ========================================= */

.menu {
    position: relative;

    width: 100%;
    min-height: auto;

    padding: 80px 7% 90px;

    color: var(--text-light);

    background:
        radial-gradient(
            circle at 0% 20%,
            rgba(53, 200, 240, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 75%,
            rgba(230, 59, 72, 0.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #071923,
            #06131c
        );
}


/* ---------- INTRODUÇÃO ---------- */

.menuDescription {
    position: relative;

    max-width: 760px;

    padding: 0 0 35px;

    color: var(--text-light);

    font-size: 26px;
    line-height: 1.35;
}


/* título criado apenas visualmente */

.menuDescription::before {
    content: 'CARDÁPIO';

    display: block;

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 48px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* linha Paragon / Renegade */

.menuDescription::after {
    content: '';

    display: block;

    width: 180px;
    height: 3px;

    margin-top: 25px;

    background:
        linear-gradient(
            90deg,
            var(--paragon),
            var(--renegade)
        );

    box-shadow:
        -12px 0 20px var(--paragon-glow),
        12px 0 20px var(--renegade-glow);
}


/* ---------- CONJUNTO DE CARDS ---------- */

.menuOptions {
    display: grid;

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

    gap: 24px;

    margin: 25px 0 0;
}


/* ---------- CARD ---------- */

.option1,
.option2,
.option3 {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: auto;
    min-height: 410px;

    margin: 0;
    padding: 28px;

    overflow: hidden;

    color: var(--text-light);

    background:
        linear-gradient(
            145deg,
            rgba(14, 48, 64, 0.90),
            rgba(5, 21, 30, 0.96)
        );

    border: 1px solid rgba(53, 200, 240, 0.24);
    border-radius: 8px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.22);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* luz ciano à esquerda */

.option1::before,
.option2::before,
.option3::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 45%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--paragon),
            transparent
        );
}


/* luz vermelha à direita */

.option1::after,
.option2::after,
.option3::after {
    content: '';

    position: absolute;

    top: 0;
    right: 0;

    width: 45%;
    height: 2px;

    background:
        linear-gradient(
            270deg,
            var(--renegade),
            transparent
        );
}


.option1:hover,
.option2:hover,
.option3:hover {
    transform: translateY(-4px);

    border-color: rgba(53, 200, 240, 0.42);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.30),
        -8px 0 30px rgba(53, 200, 240, 0.04),
        8px 0 30px rgba(230, 59, 72, 0.04);
}


/* ---------- NOME DO BURGER ---------- */

.option1 h2,
.option2 h2,
.option3 h2 {
    margin: 0 0 25px;

    color: #ffffff;

    font-size: 44px;
    line-height: 1;
    text-align: left;

    text-shadow: none;
}


/* ---------- VARIAÇÕES ---------- */

.menuVariation {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-bottom: 25px;
}


.menuVariationItem {
    position: relative;

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

    min-height: 62px;

    margin: 0 !important;
    padding: 10px 12px !important;

    background: rgba(255, 255, 255, 0.025);

    font-size: 19px !important;
    font-weight: 700;
    line-height: 1.1 !important;

    text-shadow: none !important;
}


/* lado Paragon */

.menuVariationItem.paragonSide {
    color: #bcecf7;

    border-left: 2px solid var(--paragon);

    background:
        linear-gradient(
            90deg,
            rgba(53, 200, 240, 0.12),
            rgba(53, 200, 240, 0.025)
        );
}


/* lado Renegade */

.menuVariationItem.renegadeSide {
    color: #f3c0c5;

    border-right: 2px solid var(--renegade);

    background:
        linear-gradient(
            270deg,
            rgba(230, 59, 72, 0.11),
            rgba(230, 59, 72, 0.025)
        );

    text-align: right;
}


/* ---------- DESCRIÇÃO ---------- */

.option1 > p,
.option2 > p,
.option3 > p {
    flex: 1;

    margin: 0;

    padding: 10px 0 0;

    color: var(--text-muted);

    font-size: 20px;
    line-height: 1.4;

    text-shadow: none;
}


/* ---------- INDISPONÍVEL POR VARIAÇÃO ---------- */

.menuVariationItem.menuUnavailable {
    opacity: 0.36;

    color: #7f929a;

    filter: grayscale(0.7);
}


.menuVariationItem.menuUnavailable span {
    display: block;

    margin-top: 5px;

    color: #9ba9ae;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}


/* ---------- PRODUTO TOTALMENTE INDISPONÍVEL ---------- */

.menuAvailability {
    display: none;

    margin-top: 20px;
    padding-top: 15px;

    color: #a9b4b8;

    border-top: 1px solid rgba(169, 180, 184, 0.16);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
}


.menuAvailability.show {
    display: block;
}


.productUnavailable {
    border-color: rgba(140, 155, 162, 0.18);
}


.productUnavailable:hover {
    border-color: rgba(140, 155, 162, 0.30);
}

@media (max-width: 900px) {

    .menuOptions {
        grid-template-columns: 1fr;
    }

    .option1,
    .option2,
    .option3 {
        min-height: 0;
    }
}


@media (max-width: 600px) {

    .menu {
        padding: 55px 24px 65px;
    }

    .menuDescription {
        padding: 0 0 25px;

        font-size: 21px;
    }

    .menuDescription::before {
        margin-bottom: 16px;

        font-size: 38px;
    }

    .menuDescription::after {
        width: 130px;

        margin-top: 20px;
    }


    .menuOptions {
        gap: 18px;

        margin-top: 15px;
    }


    .option1,
    .option2,
    .option3 {
        max-width: none;

        padding: 24px 20px;

        border-radius: 7px;

        min-height: 0;
    }


    .option1 h2,
    .option2 h2,
    .option3 h2 {
        margin-bottom: 20px;

        font-size: 36px;

        text-align: left;
    }


    .menuVariation {
        gap: 7px;

        margin-bottom: 20px;
    }


    .menuVariationItem {
        min-height: 58px;

        padding: 9px !important;

        font-size: 17px !important;
    }


    .option1 > p,
    .option2 > p,
    .option3 > p {
        padding-top: 5px;

        font-size: 18px;
    }
}


@media (max-width: 380px) {

    .menuVariation {
        grid-template-columns: 1fr;
    }

    .menuVariationItem.renegadeSide {
        text-align: left;

        border-right: none;
        border-left: 2px solid var(--renegade);

        background:
            linear-gradient(
                90deg,
                rgba(230, 59, 72, 0.11),
                rgba(230, 59, 72, 0.025)
            );
    }
}

/* =========================================
   AJUSTES FINAIS DOS CARDS
   ========================================= */

.option1,
.option2,
.option3 {
    min-height: 330px;
}

/* nome do burger */
.option1 h2,
.option2 h2,
.option3 h2 {
    display: block;

    margin: 0 0 24px;

    color: #ffffff;

    font-size: 40px;
    font-weight: 700;
    line-height: 1;

    text-align: left;

    text-shadow: none;
}

/* aproxima descrição das opções */
.option1 > p,
.option2 > p,
.option3 > p {
    flex: 0;

    margin-top: 0;
}

/* status geral fica no final */
.menuAvailability {
    margin-top: auto;
    padding-top: 18px;
}

/* =========================================
   FASE 8.3 - RODAPÉ
   ========================================= */

.address {
    position: relative;

    width: 100%;

    padding: 45px 7%;

    color: var(--text-light);

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(53, 200, 240, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 50%,
            rgba(230, 59, 72, 0.06),
            transparent 28%
        ),
        #050f16;

    border-top: 1px solid rgba(53, 200, 240, 0.18);

    font-size: inherit;
}


/* linha superior Paragon / Renegade */

.address::before {
    content: '';

    position: absolute;

    top: 0;
    left: 7%;

    width: 160px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--paragon),
            var(--renegade)
        );
}


/* ---------- TÍTULO ---------- */

.addressLabel {
    margin-bottom: 18px;

    color: var(--text-muted);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* ---------- ENDEREÇO ---------- */

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

    gap: 14px;
}

.addressInfo .material-symbols-outlined {
    color: var(--gold);

    font-size: 30px;
}

.addressInfo p {
    margin: 0;

    color: #e5eff2;

    font-size: 20px;
    line-height: 1.45;
}


/* =========================================
   COPYRIGHT
   ========================================= */

.copyright {
    width: 100%;

    padding: 14px 7%;

    color: #71868f;
    background: #030a0e;

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

    font-size: 14px;
    text-align: center;
}

@media (max-width: 600px) {

    .address {
        padding: 35px 24px;
    }

    .address::before {
        left: 24px;

        width: 120px;
    }

    .addressLabel {
        margin-bottom: 16px;

        font-size: 13px;
    }

    .addressInfo {
        align-items: flex-start;

        gap: 11px;
    }

    .addressInfo .material-symbols-outlined {
        margin-top: 2px;

        font-size: 26px;
    }

    .addressInfo p {
        font-size: 18px;
    }

    .copyright {
        padding: 12px 24px;

        font-size: 13px;
    }
}

/* FASE 13 — Estado compacto da sincronização do cardápio */
.catalogFeedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 28px;
    margin: 0 0 14px;
}
.catalogStatus {
    margin: 0;
    color: #9eb8c2;
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: .15px;
}
.catalogStatusSuccess {
    color: #9eb8c2;
}
.catalogStatusLoading {
    color: #bcecf7;
}
.catalogStatusError {
    color: #ffb9ac;
}
.catalogRetryButton {
    min-height: 38px;
    padding: 7px 16px;
    border: 1px solid rgba(53, 200, 240, .55);
    border-radius: 5px;
    color: #d8f4fc;
    background: rgba(53, 200, 240, .10);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.catalogRetryButton:hover:not(:disabled) {
    border-color: #35c8f0;
    background: rgba(53, 200, 240, .20);
}
.catalogRetryButton[hidden] {
    display: none !important;
}
@media (max-width: 600px) {
    .catalogFeedback {
        margin-bottom: 12px;
    }
    .catalogStatus {
        font-size: 14px;
    }
}

/* FASE 13.2 — Exibição da missão / aviso no modal */
.date #date { overflow-wrap: anywhere; font-size: clamp(23px, 2.7vw, 42px); line-height: 1.15; }
.missionCartNotice {
    margin: 20px 0 0; padding: 13px 16px; color: #f2dfb1;
    background: rgba(216,169,61,.09); border: 1px solid rgba(216,169,61,.38);
    border-left: 3px solid #d8a93d; border-radius: 5px;
    font-size: 17px; line-height: 1.35;
}
.missionCartNotice[hidden] { display: none !important; }
.addCart button.missionClosedButton {
    color: #f2dfb1; background: rgba(216,169,61,.11);
    border-color: rgba(216,169,61,.48); box-shadow: none;
}
.addCart button.missionClosedButton:hover { background: rgba(216,169,61,.18); }
@media(max-width:600px) { .date #date { font-size: 27px; } .missionCartNotice { font-size: 16px; } }