:root {
    --bg: #FAF7F2;
    --primary: #FE5A02;
    --primary-muted: #FFF0E7;
    --text-muted: #676767;
    --text-secondary: #2E3136;
    --border: #C9C6C1;
    --border-secondary: #F2A06A;
    --border-muted: rgba(238, 123, 52, 0.14);
}

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 8rem;
    margin: 0;
    font-family: 'Manrope';
    font-weight: 500;
    background: radial-gradient(circle at 82% 72%, rgba(217, 106, 29, 0.08), transparent 18%), linear-gradient(180deg, #fcfaf6 0%, var(--bg) 100%);

    > * {
        padding: 0 1rem;
    }
}

button {
    cursor: pointer;
}

.button {
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 800;
    border-radius: 15px;
    height: 44px;
    transition: transform .3s ease-in-out;

    &:hover {
        transform: translateY(-1px);
    }

    &.primary {
        background-color: var(--primary);
        color: #FFFFFF;
        box-shadow: 0 16px 34px rgba(217, 106, 29, 0.18);
    }

    &.secondary {
        background-color: transparent;
        border: 1px solid var(--primary);
        color: var(--primary);
    }
}

.overlay {
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    display: flex;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    height: 100%;
    padding: 0;
    z-index: 1;
    transition: opacity .3s ease, visibility .3s ease;

    &.overlay--visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        nav {
            transform: translateX(0);
        }
    }

    nav {
        background-color: #0B1624;
        display: flex;
        flex-direction: column;
        color: #FFFFFF;
        gap: 2rem;
        width: 75%;
        height: 100%;
        transform: translateX(-100%);
        transition: transform .3s ease;

        .nav__header {
            padding: 2rem 1rem;
            border-bottom: 2px solid var(--primary);
        }

        ul {
            display: flex;
            flex-direction: column;
            align-items: center;
            list-style: none;
            gap: 2rem;
            list-style: none;
            padding: 0;
            margin: 0;
            
            li a:not(.button__contact) {
                color: inherit;
                text-decoration: none;
                text-underline-offset: 8px;

                &:hover {
                    color: var(--primary);
                    text-decoration: underline;
                }
            }

            .button__contact {
                background: none;
                border: 2px solid var(--primary);
                border-radius: .5rem;
                outline: none;
                font: inherit;
                display: flex;
                align-items: center;
                text-decoration: none;
                gap: .5rem;
                color: var(--primary);
                padding: .5rem 1rem;
            }
        }
    }
}

.header-wrapper {
    display: flex;
    color: white;
    height: 128px;
    background: linear-gradient(
        to bottom,
        #132235 0%,
        #0B1624 100%
        );

    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;

        ul {
            display: flex;
            align-items: center;
            gap: 2rem;
            list-style: none;
            padding: 0;
            margin: 0;

            li a:not(.button__contact) {
                color: inherit;
                text-decoration: none;
                text-underline-offset: 8px;

                &:hover {
                    color: var(--primary);
                    text-decoration: underline;
                }
            }

            .button__contact {
                background: none;
                border: 2px solid var(--primary);
                border-radius: .5rem;
                outline: none;
                font: inherit;
                display: flex;
                align-items: center;
                text-decoration: none;
                gap: .5rem;
                color: var(--primary);
                padding: .5rem 1rem;
            }
        }

        .header__burger {
            background: none;
            display: none;
            align-items: center;
            justify-content: center;
            border-radius: .25rem;
            border: 1px solid #FFFFFF;
            width: 2.5rem;
            height: 2.5rem;
        }
    }
}

section {
    scroll-margin-top: 2rem;
}

.hero {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;

    >* {
        display: flex;
        justify-content: center;
        flex: 1;
    }

    .hero__content {
        flex-direction: column;
        gap: 1rem;

        .hero__title {
            font-size: 4rem;
            font-weight: 800;
            line-height: 100%;
            min-width: 0;
            overflow-wrap: anywhere;
            letter-spacing: -0.008em;

            .hero__full-stop {
                color: var(--primary);
            }
        }

        .hero__subtitle {
            color: var(--text-muted);
        }

        .hero__actions {
            display: flex;
            gap: 1.25rem;

            button,
            .button {
                padding: 0 4rem;
            }
        }
    }

    .hero__media img {
        aspect-ratio: 1.17 / 1;
        max-width: 100%;
    }
}

.msp {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;

    .msp__header {
        display: flex;
        flex-direction: column;
        width: 50%;
        gap: 1.125rem;

        .msp__title {
            font-weight: 800;
            font-size: 3rem;
            letter-spacing: -.065em;
            line-height: 3rem;
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .msp__subtitle {
            color: var(--text-muted);
        }
    }

    .msp__content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.125rem;

        >* {
            flex: 1;
        }

        .package-card {
            background-color: rgba(255, 255, 255, 0.12);
            display: flex;
            flex-direction: column;
            border: 1px solid var(--border);
            position: relative;
            align-self: flex-start;
            border-radius: 18px;
            padding: 1.75rem;
            gap: 1.5rem;

            &.package-card--recommended {
                border: 2px solid var(--primary);

                .package-card__labeled {
                    background-color: var(--primary);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    color: #FFFFFF;
                    line-height: 1rem;
                    font-weight: 600;
                    border-radius: 999px;
                    height: 1.25rem;
                    padding: 0 1.125rem;
                    font-size: .675rem;
                    left: 50%;
                    top: -10px;
                    transform: translateX(-50%);
                }

                button {
                    margin-top: 1.875rem;
                }
            }

            .package-card__label {
                text-transform: uppercase;
                font-size: 1.125rem;
                font-weight: 800;
                letter-spacing: -0.05em;
            }

            .package-card__description {
                color: var(--text-muted);
            }

            .package-card__price {
                color: var(--primary);
                font-size: 2.5rem;
                font-weight: 800;
            }

            .package-card__list {
                display: flex;
                flex-direction: column;
                gap: 1.125rem;
                list-style: none;
                padding: 0;
                margin: 0;

                li {
                    position: relative;
                    padding-left: 22px;
                    line-height: 1rem;
                    color: var(--text-muted);

                    ::before {
                        content: "\2713";
                        position: absolute;
                        left: 0;
                        top: 0;
                        color: var(--primary);
                        font-size: 1.05rem;
                        line-height: 1;
                    }
                }
            }
        }
    }
}

.packages {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 4rem;
    width: 100%;
    max-width: 1440px;

    .package-card {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        .package-card__header {
            display: flex;
            flex-direction: column;
            align-items: center;

            .package-card__label {
                font-weight: 800;
                color: var(--primary);
            }

            .package-card__price {
                font-size: 4rem;
                font-weight: 800;
                letter-spacing: -0.075em;
                line-height: 1;
            }
        }

        .package-card__grid {
            display: grid;
            gap: 1.25rem;
            grid-template-columns: repeat(4, 1fr);

            .package-card__item {
                background-color: rgba(255, 255, 255, 0.14);
                display: flex;
                gap: 1.25rem;
                border: 1px solid var(--primary);
                border-radius: 18px;
                padding: 1.25rem;

                .package-card__item-content {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;

                    .package-card__item-title {
                        font-weight: 800;
                        font-size: 1.25rem;
                        letter-spacing: -0.055em;
                    }

                    .package-card__item-description {
                        color: var(--text-muted);
                    }

                    button {
                        align-self: flex-start;
                        font-size: .75rem;
                        height: 2rem;
                        padding: 0 1.125rem;
                    }
                }
            }
        }

        .package-card__info {
            position: relative;
            border: 1px solid var(--border);
            border-radius: 15px;

            &.package-card__info--open {

                .package-card__info-trigger {
                    border-bottom: 1px solid var(--border);
                }

                .package-card__info-content {
                    max-height: 32rem;
                    padding: 1.5rem;
                }
            }

            .package-card__info-trigger {
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                left: -5px;
                width: calc(100% + 10px);
                cursor: pointer;
                padding: 1.5rem;
                border: 1px solid transparent;
                border-radius: 15px;
                transition: border .15s ease-in-out;

                .package-card__trigger-label {
                    font-size: 1.125rem;
                    font-weight: 800;
                }

                .package-card__trigger-icon {
                    color: var(--primary);
                    font-size: 1.5rem;
                }
            }

            .package-card__info-content {
                display: block;
                overflow: hidden;
                max-height: 0;
                padding: 0 1.5rem;
                transition: padding .15s ease-in-out, max-height .15s ease-in-out;
            }
        }
    }
}

.press {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;
    gap: 2rem;

    .press__header {
        display: flex;
        flex-direction: column;
        width: 50%;
        gap: 1rem;

        .press__title {
            font-size: 4rem;
            font-weight: 800;
            letter-spacing: -0.08em;
        }

        .press__subtitle {
            color: var(--text-muted);
        }
    }

    .press__gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;

        .gallery-item {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            &.gallery-item--active img {
                width: 100%;
            }
        }

        img {
            width: 80%;
            cursor: pointer;
            transition: width .3s ease;
        }
    }

    .press__detail {
        background-color: rgba(255, 255, 255, 0.42);
        display: flex;
        border: 1px solid var(--primary);
        border-radius: 15px;
        padding: 2rem;
        gap: 2rem;

        >* {
            flex: 1;
        }

        .press__info {
            display: flex;
            flex-direction: column;
            color: var(--text-secondary);
            gap: 1rem;

            .press__newspaper {
                color: #000000;
                letter-spacing: -0.07em;
                font-size: 3rem;
                font-weight: 800;
                min-width: 0;
                overflow-wrap: anywhere;
            }

            ul {
                padding-left: 18px;
                margin: 0;
            }

            .press__actions {
                display: flex;
                margin-top: 16px;
                gap: 1rem;

                button,
                .button {
                    width: 210px;
                    padding: 0 2rem;
                }
            }
        }

        .press__grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.25rem;

            .grid-item {
                display: flex;
                border: 1px solid var(--border-secondary);
                border-radius: 18px;
                padding: 1.125rem;
                gap: .75rem;

                &:last-child {
                    grid-column: 1 / -1;
                }

                .grid-item__icon {
                    display: grid;
                    place-items: center;
                    flex-shrink: 0;
                    width: 32px;
                    height: 32px;

                    img {
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .grid-item__details {
                    display: flex;
                    flex-direction: column;
                    gap: .5rem;

                    .grid-item__title {
                        font-weight: 800;
                        letter-spacing: -0.045em;
                    }

                    .grid-item__subtitle {
                        color: var(--text-muted);
                        min-width: 0;
                        overflow-wrap: anywhere;
                    }
                }
            }
        }
    }
}

.web {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;
    gap: 2rem;

    .web__header {
        display: flex;
        flex-direction: column;
        width: 50%;
        gap: 1rem;

        .web__title {
            font-weight: 800;
            font-size: 3rem;
            letter-spacing: -.08em;
        }

        .web__subtitle {
            color: var(--text-muted);
        }
    }

    .web__tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;

        .tab-item {
            background-color: rgba(255, 255, 255, 0.42);
            display: flex;
            justify-content: space-between;
            border: 1px solid var(--border-secondary);
            border-radius: 18px;
            padding: 1rem;
            font: inherit;
            gap: 1rem;
            transition: transform .3s ease-in-out;

            &:hover {
                transform: translateY(-1px);
            }

            &.tab-item--active {
                border: 2px solid var(--primary);
            }

            .tab-item__details {
                display: flex;
                flex-direction: column;
                text-align: left;
                gap: 1rem;

                .tab-item__title {
                    font-size: 1.125rem;
                    letter-spacing: -0.05em;
                    font-weight: 800;
                }

                .tab-item__subtitle {
                    color: var(--text-muted);
                }
            }
        }
    }

    .web__panel {
        background-color: rgba(255, 255, 255, 0.42);
        display: flex;
        flex-direction: column;
        gap: 2rem;
        border: 1px solid var(--border-secondary);
        border-radius: 1.5rem;
        padding: 2rem;

        .web__details {
            display: flex;
            flex-direction: column;
            width: 50%;
            gap: 1rem;

            .web__details-title {
                letter-spacing: -.075em;
                font-weight: 800;
                font-size: 3rem;
            }

            .web__details-subtitle {
                color: var(--text-muted);
            }
        }

        hr {
            border: none;
            background-color: var(--border-secondary);
            margin: 0;
            width: 80%;
            height: 1px;
        }

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

            .grid-item {
                display: flex;
                flex-direction: column;
                padding: 1rem;
                gap: 1rem;

                &:not(:last-child) {
                    border-right: 1px solid var(--border-secondary);
                }

                .grid-item__label {
                    display: flex;
                    align-items: center;
                    gap: .5rem;
                    letter-spacing: -0.045em;
                    font-weight: 800;

                    > * {
                        display: flex;
                        align-items: center;
                    }
                }

                ul {
                    margin: 0;
                    padding-left: 18px;
                    color: var(--text-muted);
                }
            }
        }

        .web__actions {
            display: flex;
            gap: 1rem;

            button {
                padding: 0 2rem;
            }
        }
    }
}

.faq {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 2rem;
    max-width: 1440px;
    width: 100%;

    .faq__title {
        text-align: center;
        font-size: 4rem;
        font-weight: 800;
        letter-spacing: -0.085em;
    }

    .faq__questions {
        display: grid;
        align-self: flex-start;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
        width: 100%;

        .faq__column {
            display: grid;
            align-self: flex-start;
            gap: .5rem;
            grid-template-columns: repeat(1, 1fr);

            .faq__question {
                background-color: #FFFFFF;
                position: relative;
                border: 1px solid var(--border);
                align-self: flex-start;
                border-radius: 15px;
                transition: border .15s ease-in-out;

                &.faq__question--open {
                    border: 1px solid var(--primary);

                    .faq__question-trigger {
                        border-bottom: 1px solid var(--border);
                    }

                    .faq__question-content {
                        max-height: 32rem;
                        padding: 1.5rem;
                    }
                }

                .faq__question-trigger {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    position: relative;
                    left: -5px;
                    gap: 1rem;
                    width: calc(100% + 10px);
                    cursor: pointer;
                    padding: .75rem 1.5rem;
                    border: 1px solid transparent;
                    border-radius: 15px;
                    transition: border .15s ease-in-out;
                }

                .faq__question-trigger-label {
                    font-size: 1.125rem;
                    font-weight: 800;
                }

                .faq__question-trigger-icon {
                    color: var(--primary);
                    font-size: 1.5rem;
                }

                .faq__question-content {
                    display: block;
                    overflow: hidden;
                    max-height: 0;
                    padding: 0 1.5rem;
                    transition: padding .15s ease-in-out, max-height .15s ease-in-out;
                }
            }
        }
    }
}

.contact {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;

    .contact__intro {
        display: flex;
        flex-direction: column;
        width: 50%;
        gap: 1rem;

        .contact__eyebrow {
            text-transform: uppercase;
            font-weight: 800;
            color: var(--primary);
        }

        .contact__title {
            font-weight: 800;
            font-size: 4rem;
            line-height: 1;
            letter-spacing: -0.08em;
        }

        .contact__subtitle {
            color: var(--text-muted);
            font-size: 1.125rem;
        }
    }

    .contact__content {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;

        .contact__grid {
            display: grid;
            gap: 1.25rem;
            grid-template-columns: repeat(2, 1fr);

            .grid-item {
                background-color: #FFFFFF;
                display: flex;
                border: 1px solid var(--border-muted);
                text-decoration: none;
                color: inherit;
                min-width: 0;
                overflow-wrap: anywhere;
                width: 100%;
                border-radius: 18px;
                padding: 2rem;
                gap: 2rem;
                transition: transform .3s ease-in-out, border .3s ease-in-out, box-shadow .3s ease-in-out;

                &:hover {
                    transform: translateY(-1px);
                    border-color: rgba(255, 106, 0, 0.28);
                    box-shadow: 0 16px 32px rgba(169, 115, 74, 0.09);
                }

                .grid-item__icon {
                    display: grid;
                    place-items: center;
                    background-color: #fff0e7;
                    border-radius: 100%;
                    height: 80px;
                    aspect-ratio: 1 / 1;
                }

                .grid-item__content {
                    display: flex;
                    flex-direction: column;
                    gap: .75rem;

                    .grid-item__label {
                        font-weight: 700;
                        color: var(--text-muted);
                    }

                    .grid-item__detail {
                        font-size: 1.75rem;
                        font-weight: 800;
                        letter-spacing: -0.045em;
                    }
                }
            }
        }

        .contact__benefits {
            background-color: #FFFFFF;
            display: grid;
            border: 1px solid var(--border-muted);
            border-radius: 18px;
            padding: 1.5rem 0;
            grid-template-columns: repeat(3, 1fr);

            .contact__benefit {
                padding: 0 2rem;
                display: flex;
                gap: 1rem;

                &:not(:last-child) {
                    border-right: 1px solid rgba(238, 123, 52, 0.14);
                }

                .contact__benefit-icon {
                    background-color: #fff0e7;
                    display: grid;
                    place-items: center;
                    flex-shrink: 0;
                    border-radius: 100%;
                    width: 80px;
                    height: 80px;
                }

                .contact__benefit-details {
                    display: flex;
                    flex-direction: column;
                    gap: .5rem;

                    > * {
                        min-width: 0;
                        overflow-wrap: anywhere;
                    }

                    .contact__detail-title {
                        letter-spacing: -0.045em;
                        font-weight: 800;
                    }

                    .contact__detail-subtitle {
                        color: var(--text-muted);
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1280px) {
    .hero {
        flex-direction: column;
        justify-content: unset;
        gap: 2rem;

        .hero__content {
            text-align: center;
            width: 100%;
            align-items: center;

            .hero__subtitle {
                width: 60%;
            }
        }

        .hero__media img {
            max-height: 510px;
        }
    }

    .msp {
        .msp__header {
            width: 100%;
        }

        .msp__content {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .packages .package-card .package-card__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .press {
        .press__header {
            width: 100%;
        }

        .press__detail {
            flex-direction: column;
        }
    }

    .web {
        .web__header {
            width: 100%;
        }

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

        .web__panel {
            .web__details {
                width: 100%;
            }

            hr {
                width: 100%;
            }

            .web__panel-grid {
                grid-template-columns: repeat(1, 1fr);

                .grid-item:not(:last-child) {
                    border-right: none;
                }
            }
        }
    }

    .faq {
        .faq__title {
            font-size: 3rem;
        }

        .faq__questions {
            flex-direction: column;
            gap: 1rem;

            .faq__column {
                width: 100%;
            }
        }
    }

    .contact {
        .contact__intro {
            width: 100%;
        }

        .contact__content {
            .contact__grid {
                grid-template-columns: repeat(1, 1fr);
            }

            .contact__benefits {
                padding: 1rem 2rem;
                grid-template-columns: repeat(1, 1fr);

                .contact__benefit {
                    padding: 1rem 0;

                    &:not(:last-child) {
                        border-right: none;
                        border-bottom: 1px solid rgba(238, 123, 52, 0.14);
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    body {
        gap: 5rem;
    }
    
    .header-wrapper header {
        ul {
            display: none;
        }

        .header__burger {
            display: flex;
        }
    }

    .hero {
        flex-direction: column;
        justify-content: unset;

        .hero__content {
            text-align: left;
            align-items: flex-start;
            width: 100%;

            .hero__title {
                font-size: 3.5rem;
            }

            .hero__subtitle {
                width: 100%;
            }

            .hero__actions {
                width: 100%;

                .button {
                    padding: 0;
                    flex: 1;
                }
            }
        }
    }

    .msp {
        .msp__header .msp__title {
            font-size: 2.75rem;
        }

        .msp__content {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .packages .package-card {
        .package-card__header .package-card__price {
            font-size: 3rem;
            text-align: center;
        }

        .package-card__grid {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .press {
        .press__header .press__title {
            font-size: 3rem;
        }

        .press__gallery {
            width: 100%;
            grid-auto-flow: column;
            grid-auto-columns: 40%;
            grid-template-columns: none;
            scrollbar-width: none;
            overflow-x: auto;
            overflow-y: hidden;
        }

        .press__detail {
            .press__info {
                flex-direction: column;

                .press__actions {
                    flex-direction: column;

                    button,
                    .button {
                        width: 100%;
                    }
                }
            }

            .press__grid {
                grid-template-columns: repeat(1, 1fr);
            }
        }
    }

    .web {
        .web__tabs {
            grid-template-columns: repeat(1, 1fr);
        }

        .web__panel {
            hr {
                width: 100%;
            }

            .web__panel-grid {
                grid-template-columns: repeat(1, 1fr);

                .grid-item:not(:last-child) {
                    border-right: none;
                }
            }

            .web__actions {
                flex-direction: column;
            }
        }
    }

    .faq .faq__questions {
        gap: .5rem;
        grid-template-columns: repeat(1, 1fr);
    }

    .contact .contact__content {
        .contact__grid {
            grid-template-columns: repeat(1, 1fr);
        }

        .contact__benefits {
            padding: 1rem 2rem;
            grid-template-columns: repeat(1, 1fr);

            .contact__benefit {
                padding: 1rem 0;

                &:not(:last-child) {
                    border-right: none;
                    border-bottom: 1px solid rgba(238, 123, 52, 0.14);
                }
            }
        }
    }
}