/* PAGE COMPOSITION ONLY — HEADER, BUTTONS, ICONS, FLOATING BUTTONS AND TOKENS COME FROM THE SHARED SYSTEM. */

.comecar-choice-page {
    background: var(--color-surface);
}


/* PAGE TOKENS AND FULL-VIEWPORT COLUMN */

.comecar-choice-page .choice-page {
    --choice-gutter: max(var(--space-medium), calc((100% - 78rem) / 2));
    --choice-measure: 38.75rem;
    --choice-wave-depth: 40px;
    --choice-wave-edge: 13px;
    --choice-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 104' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C240,104 480,44 720,76 S1200,50 1440,86 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}


/* FLOATING BUTTONS BESIDE THE TEXT COLUMN */

.comecar-choice-page .choice-page .choice-floats.skills-cover-section {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(var(--choice-gutter) + var(--choice-measure));
    z-index: 0;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
}

.comecar-choice-page .choice-page .choice-floats.skills-cover-section::before {
    content: none;
}

.comecar-choice-page .choice-page .choice-floats.skills-cover-section .skills-cover-logos .skills-cover-el {
    background-image: url('/_content/Eesier.Web.Shared/img/logo.png');
}


/* SITE HEADER AS A FROSTED BAND WITH A WAVY BOTTOM EDGE, IN THE SITE'S DEFAULT CASE */

.comecar-choice-page .choice-page .header {
    text-transform: none;
}

.comecar-choice-page .choice-page .header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(-1 * var(--choice-wave-depth));
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-palette-primary) 7%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask: var(--choice-wave-mask) 0 0 / 100% 100% no-repeat;
    mask: var(--choice-wave-mask) 0 0 / 100% 100% no-repeat;
}

.comecar-choice-page .choice-page .header .header-inner {
    max-width: none;
    padding-left: var(--choice-gutter);
    padding-right: var(--choice-gutter);
}

.comecar-choice-page .choice-page .header .header-inner .header-nav .header-nav-link {
    opacity: .7;
}

.comecar-choice-page .choice-page .header .header-inner .header-nav .header-nav-link:hover {
    opacity: 1;
}


/* ONE CONTENT BLOCK CENTERED BELOW THE HEADER'S VISIBLE EDGE */

.comecar-choice-page .choice-page .choice-main {
    position: relative;
    z-index: 1;
    text-transform: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--choice-wave-edge) var(--choice-gutter) 0;
}

.comecar-choice-page .choice-page .choice-main .choice-content {
    display: flex;
    flex-direction: column;

    /* MESMOS DEGRAUS DA HERO DA HOME: 50px DO TÍTULO AO TEXTO, 25px ENTRE PARÁGRAFOS, 75px ATÉ OS BOTÕES. */

    gap: 50px;
    width: 100%;
    max-width: var(--choice-measure);
}

.comecar-choice-page .choice-page .choice-main .choice-content .choice-title {
    margin: 0;
    font-size: var(--type-size-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text-dark);
    text-wrap: balance;
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
}

.comecar-choice-page .choice-page .choice-main .choice-content .choice-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.comecar-choice-page .choice-page .choice-main .choice-content .choice-text::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--space-small)) calc(-1 * var(--space-medium));
    pointer-events: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--space-small), #000 calc(100% - var(--space-small)), transparent), linear-gradient(to right, transparent, #000 var(--space-medium), #000 calc(100% - var(--space-medium)), transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent, #000 var(--space-small), #000 calc(100% - var(--space-small)), transparent), linear-gradient(to right, transparent, #000 var(--space-medium), #000 calc(100% - var(--space-medium)), transparent);
    mask-composite: intersect;
}

.comecar-choice-page .choice-page .choice-main .choice-content .choice-text p {
    position: relative;
    margin: 0;
    font-size: var(--type-size-base);
    line-height: 1.5;
    color: var(--color-muted);
    text-align: left;
    text-align-last: left;
    hyphens: none;
    text-box-trim: none;
}

.comecar-choice-page .choice-page .choice-main .choice-content .choice-actions {
    margin-top: 25px;

    /* COMO NA HERO: NO DESKTOP CADA BOTÃO TEM A LARGURA DO SEU PRÓPRIO TEXTO. */

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
}

.comecar-choice-page .choice-page .choice-main .choice-content .choice-actions .btn > .eicon {
    fill: currentColor;
}

.comecar-choice-page .choice-page .choice-main .choice-content .choice-actions .btn {
    text-transform: none;
}


/* PHONES AND SMALL TABLETS */

@media (max-width: 900px) {

    .comecar-choice-page .choice-page {
        --choice-wave-depth: 28px;
        --choice-wave-edge: 10px;
        --choice-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 92' preserveAspectRatio='none'%3E%3Cpath d='M0,68 C65,92 130,54 195,72 S325,58 390,82 L390,0 L0,0 Z'/%3E%3C/svg%3E");
    }

    .comecar-choice-page .choice-page .choice-floats.skills-cover-section {
        left: 0;
    }

    .comecar-choice-page .choice-page .choice-main .choice-content .choice-title {
        font-size: var(--type-size-page);
    }


    /* NO CELULAR OS DOIS BOTÕES EMPILHAM E OCUPAM A LARGURA TODA. */

    .comecar-choice-page .choice-page .choice-main .choice-content .choice-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-small);
    }

    .comecar-choice-page .choice-page .choice-main .choice-content .choice-actions .btn {
        width: 100%;
    }

}