@layer components {

    .hero {
        position: relative;
        display: grid;
        align-items: end;
        min-height: clamp(520px, calc(100svh - var(--h-header) - var(--h-announce)), 900px);
        overflow: hidden;
        background: var(--c-tile);
        color: var(--c-dark-ink);
        isolation: isolate;
    }

    .hero__media {
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    .hero__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to top, var(--c-scrim), transparent 62%),
            linear-gradient(to right, var(--c-scrim), transparent 58%);
    }

    .hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero__content {
        display: grid;
        gap: var(--s-4);
        width: 100%;
        max-width: var(--w-page);
        margin-inline: auto;
        padding: var(--s-9) var(--gutter) clamp(40px, 6vw, 88px);
    }

    .hero__eyebrow {
        color: inherit;
        opacity: .86;
    }

    .hero__title {
        max-width: 13ch;
        font-size: var(--t-3xl);
    }

    .hero__text {
        max-width: 44ch;
        font-size: var(--t-md);
        opacity: .92;
    }

    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s-4) var(--s-5);
        margin-top: var(--s-3);
    }

    .hero__link {
        font-size: var(--t-sm);
        font-weight: 500;
        letter-spacing: .04em;
    }

    @media (max-width: 767px) {
        .hero {
            min-height: min(640px, calc(100svh - var(--h-header) - var(--h-announce)));
        }

        .hero__media::after {
            background: linear-gradient(to top, var(--c-scrim), transparent 78%);
        }
    }

    @media (max-width: 1023px), (min-width: 1280px) {
        .hero--stack[data-foco="direita"] .hero__img {
            object-position: 100% 50%;
        }
    }

    @media (max-width: 1023px) {
        .hero--stack {
            display: block;
            min-height: 0;
            background: var(--c-page);
            color: var(--c-ink);
        }

        .hero--stack .hero__media {
            position: relative;
            z-index: 0;
            aspect-ratio: 5 / 2;
        }

        .hero--stack .hero__media::after {
            content: none;
        }

        .hero--stack .hero__content {
            padding: var(--s-6) var(--gutter) var(--s-7);
        }

        .hero--stack .hero__title {
            max-width: 16ch;
        }

        .hero--stack .hero__actions .btn {
            background: var(--c-accent);
            color: var(--c-accent-ink);
        }
    }

    @media (max-width: 899px) {
        .hero--stack .hero__media {
            aspect-ratio: 16 / 9;
        }
    }

    @media (max-width: 599px) {
        .hero--stack .hero__media {
            aspect-ratio: 1 / 1;
        }
    }

}

@layer components {

    .assure {
        border-bottom: 1px solid var(--c-line);
    }

    .assure__list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: var(--w-page);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .assure__item {
        display: flex;
        align-items: center;
        gap: var(--s-3);
        padding: var(--s-5) var(--s-5) var(--s-5) 0;
        font-size: var(--t-sm);
        line-height: 1.4;
    }

    .assure__item + .assure__item {
        padding-left: var(--s-5);
        border-left: 1px solid var(--c-line);
    }

    .assure__text {
        color: var(--c-muted);
    }

    .assure__text strong {
        display: block;
        font-weight: 500;
        color: var(--c-ink);
    }

    @media (max-width: 1023px) {
        .assure__list {
            display: flex;
            padding-inline: 0;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
        }

        .assure__item,
        .assure__item + .assure__item {
            flex: none;
            width: min(78vw, 320px);
            padding-inline: var(--gutter) 0;
            border-left: 0;
            scroll-snap-align: start;
        }
    }

}

@layer components {

    .rail {
        position: relative;
        margin-inline: calc(var(--gutter) * -1);
    }

    .rail__track {
        position: relative;
        display: flex;
        gap: var(--s-5);
        padding-inline: var(--gutter);
        overflow-x: auto;
        scroll-padding-inline: var(--gutter);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .rail__track::-webkit-scrollbar {
        display: none;
    }

    .rail__item {
        flex: none;
        width: calc((100% - 3 * var(--s-5)) / 4);
        min-width: 230px;
        scroll-snap-align: start;
    }

    .rail__track--pair .rail__item {
        width: calc((100% - var(--s-5)) / 2);
    }

    .rail__track--pair .card__frame {
        aspect-ratio: 3 / 2;
    }

    .rail__track--trio .rail__item {
        width: calc((100% - 2 * var(--s-5)) / 3);
    }

    .rail__nav {
        position: absolute;
        top: 30%;
        left: var(--s-4);
        right: var(--s-4);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

    .rail__btn {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: var(--r-pill);
        background: var(--c-surface);
        box-shadow: var(--shadow-pop);
        pointer-events: auto;
        transition: opacity var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
    }

    .rail__btn:hover {
        background: var(--c-ink);
        color: var(--c-page);
    }

    .rail__btn:disabled {
        opacity: 0;
        pointer-events: none;
    }

    @media (max-width: 767px) {
        .rail__track {
            gap: var(--s-3);
        }

        .rail__item,
        .rail__track--pair .rail__item,
        .rail__track--trio .rail__item {
            width: 64vw;
            min-width: 0;
        }

        .rail__track--pair .card__frame {
            aspect-ratio: 5 / 6;
        }

        .rail__nav {
            display: none;
        }
    }

}

@layer components {

    .tiles {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--s-5);
    }

    .tiles__item {
        grid-column: span 2;
    }

    .tiles__item:first-child:nth-last-child(5),
    .tiles__item:first-child:nth-last-child(5) + .tiles__item,
    .tiles__item:first-child:nth-last-child(4),
    .tiles__item:first-child:nth-last-child(4) ~ .tiles__item {
        grid-column: span 3;
    }

    .tiles__item:first-child:nth-last-child(7) {
        grid-row: span 2;
    }

    .tiles__item:first-child:nth-last-child(7) ~ .tiles__item:nth-last-child(-n + 2) {
        grid-column: span 3;
    }

    .tile {
        position: relative;
        display: grid;
        align-items: end;
        height: 100%;
        min-height: clamp(320px, 36vw, 600px);
        overflow: hidden;
        border-radius: var(--r-1);
        background: var(--c-tile);
        color: var(--c-dark-ink);
        isolation: isolate;
    }

    .tile__media {
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    .tile__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, var(--c-scrim), transparent 60%);
    }

    .tile__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--dur-3) var(--ease);
    }

    .tile:hover .tile__img {
        transform: scale(1.035);
    }

    .tile__body {
        display: grid;
        gap: var(--s-1);
        padding: var(--s-5);
    }

    .tile__name {
        font-size: var(--t-xl);
    }

    .tile__theme {
        max-width: 34ch;
        font-size: var(--t-sm);
        opacity: .9;
    }

    .tile__go {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        margin-top: var(--s-3);
        font-size: var(--t-xs);
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .tile:hover .icon--arrow {
        transform: translateX(4px);
    }

    @media (max-width: 899px) {
        .tiles {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--s-3);
        }

        .tiles__item:nth-child(n) {
            grid-column: span 1;
        }

        .tiles__item:first-child:nth-last-child(7) {
            grid-column: span 2;
            grid-row: auto;
        }

        .tiles__item:first-child:nth-last-child(7) ~ .tiles__item:nth-last-child(-n + 2) {
            grid-column: span 1;
        }

        .tile {
            min-height: 62vw;
        }

        .tile__body {
            padding: var(--s-4);
        }

        .tile__theme {
            display: none;
        }
    }

}

@layer components {

    .manifesto {
        margin-top: var(--s-10);
        background: var(--c-tile);
    }

    .manifesto__inner {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        max-width: var(--w-page);
        margin-inline: auto;
    }

    .manifesto__body {
        display: grid;
        align-content: center;
        justify-items: start;
        gap: var(--s-5);
        padding: var(--s-10) clamp(24px, 7vw, 128px) var(--s-10) var(--gutter);
    }

    .manifesto__title {
        max-width: 17ch;
        font-size: var(--t-2xl);
    }

    .manifesto__text {
        display: grid;
        gap: var(--s-4);
        max-width: 56ch;
        font-size: var(--t-md);
    }

    .manifesto__sign {
        font-size: var(--t-lg);
        font-style: italic;
    }

    .manifesto__media {
        min-height: 100%;
    }

    .manifesto__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @media (max-width: 899px) {
        .manifesto__inner {
            grid-template-columns: minmax(0, 1fr);
        }

        .manifesto__body {
            padding: var(--s-9) var(--gutter);
        }

        .manifesto__media {
            aspect-ratio: 4 / 3;
            min-height: 0;
        }
    }

}