/* ====================================================================
   Página: Contratar Talentos
   ==================================================================== */

/* ----- Section: Hero ----- */
.ctr-hero {
    background-color: var(--semantics-colors-fill-primary);
    color: var(--semantics-colors-text-on-dark);
    overflow: hidden;
}

.ctr-hero__inner {
    width: 100%;
    padding-left: max(var(--semantics-spacing-large), calc((100% - var(--semantics-container-max)) / 2 + var(--semantics-spacing-large)));
    display: flex;
    align-items: center;
    gap: var(--semantics-spacing-bigger);
}

.ctr-hero__content {
    flex: 0 0 540px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--semantics-spacing-wide);
    padding: var(--semantics-padding-broad) 0;
}

.ctr-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-medium);
}

.ctr-hero__title {
    font-family: var(--semantics-typography-family-poppins);
    font-weight: 700;
    font-size: var(--semantics-typography-display-48);
    line-height: var(--semantics-typography-baseline-tight);
    letter-spacing: var(--semantics-typography-tracking-tight-2);
    color: var(--semantics-colors-text-on-dark);
    margin: 0;
    max-width: 546px;
}

.ctr-hero__desc {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-18);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-on-dark);
    margin: 0;
    max-width: 498px;
}

.ctr-hero__image {
    position: relative;
    flex: 1 1 0;
    height: 621px;
    overflow: hidden;
}

.ctr-hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.ctr-hero__overlay {
    position: absolute;
    top: 85px;
    left: 61px;
    width: 383px;
    height: auto;
    pointer-events: none;
}

/* Wrapper compartilhado */
.ctr-resp__inner,
.ctr-inova__inner,
.ctr-como__inner,
.ctr-prog__inner,
.ctr-cta__inner,
.ctr-banner__inner {
    width: 100%;
    max-width: var(--semantics-container-max);
    margin: 0 auto;
    padding: 0 var(--semantics-spacing-large);
}

/* ----- Section 1: Responsabilidade Social ----- */
.ctr-resp {
    background-color: var(--semantics-colors-fill-neutral);
    padding: var(--semantics-padding-vast) 0;
}

.ctr-resp__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--semantics-spacing-wide);
}

.ctr-resp__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--semantics-spacing-large);
    text-align: center;
    max-width: 800px;
}

.ctr-resp__title {
    font-family: var(--semantics-typography-family-poppins);
    font-weight: 700;
    font-size: var(--semantics-typography-heading-x-large);
    line-height: var(--semantics-typography-baseline-tight);
    letter-spacing: var(--semantics-typography-tracking-tight-2);
    color: var(--semantics-colors-text-primary);
    margin: 0;
}

.ctr-resp__desc {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-16);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-secondary);
    margin: 0;
}

.ctr-resp__ods {
    display: flex;
    flex-wrap: wrap;
    gap: var(--semantics-spacing-bigger);
    justify-content: center;
}

.ctr-ods {
    width: 156px;
    height: auto;
    display: block;
    border-radius: var(--semantics-radius-larger);
}

/* ----- Section 2: Inovação na sua empresa ----- */
.ctr-inova {
    position: relative;
    background-color: var(--semantics-colors-fill-primary);
    color: var(--semantics-colors-text-on-dark);
    min-height: 761px;
    padding: var(--semantics-padding-broad) 0;
    overflow: hidden;
}

.ctr-inova__photo {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 740px;
    height: 688px;
    max-width: 60%;
    background: url("../assets/images/contratar-talentos/inovacao-empresa/percorre-jovem.png") center bottom/contain no-repeat;
    z-index: 1;
}

.ctr-inova__inner {
    position: relative;
    z-index: 2;
}

.ctr-inova__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--semantics-spacing-bigger);
}

.ctr-inova__left {
    flex: 0 0 428px;
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-bigger);
    align-items: flex-start;
}

.ctr-inova__title {
    display: block;
    width: 100%;
    max-width: 311px;
    height: auto;
}

.ctr-inova__desc {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-18);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-on-dark);
    margin: 0;
}

.ctr-inova__desc-highlight {
    color: var(--semantics-colors-text-accent-ponkan);
    font-weight: 700;
}

.ctr-inova__card {
    flex: 0 0 432px;
    background-color: rgb(from var(--semantics-colors-fill-overlay-light) r g b / 0.1);
    color: var(--semantics-colors-text-on-dark);
    border-radius: var(--semantics-radius-larger);
    padding: var(--semantics-spacing-big);
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-bigger);
    align-items: flex-start;
    justify-content: center;
}

.ctr-inova__card-text {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-large);
}

.ctr-inova__card-headline {
    font-family: var(--semantics-typography-family-poppins);
    font-weight: 700;
    font-size: var(--semantics-typography-heading-x-small);
    line-height: var(--semantics-typography-baseline-tight);
    letter-spacing: var(--semantics-typography-tracking-tight-1);
    color: var(--semantics-colors-text-accent-pistache);
    margin: 0;
}

.ctr-inova__card-desc {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-16);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-on-dark);
    margin: 0;
}

.ctr-inova__courses {
    position: absolute;
    bottom: 52px;
    left: 0;
    right: 0;
    z-index: 3;
    overflow: hidden;
}

.ctr-inova__courses-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: ctr-marquee 40s linear infinite;
    will-change: transform;
}

.ctr-inova__courses-set {
    display: flex;
    align-items: center;
    gap: var(--semantics-spacing-big);
    padding-right: var(--semantics-spacing-big);
    flex-shrink: 0;
}

.ctr-inova__courses:hover .ctr-inova__courses-track {
    animation-play-state: paused;
}

@keyframes ctr-marquee {
    from { transform: translateX(-25%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ctr-inova__courses-track {
        animation: none;
    }
}

.ctr-inova__pill {
    background-color: var(--semantics-colors-fill-accent-petunia);
    color: var(--semantics-colors-text-accent-ponkan);
    border-radius: var(--semantics-radius-big);
    padding: var(--semantics-spacing-small) var(--semantics-spacing-large);
    font-family: var(--semantics-typography-family-inter);
    font-weight: 600;
    font-size: var(--semantics-typography-body-14);
    line-height: var(--semantics-typography-baseline-normal);
}

/* ----- Section 3: Como Funciona ----- */
.ctr-como {
    background-color: var(--semantics-colors-fill-neutral);
    padding: var(--semantics-padding-broad) 0;
}

.ctr-como__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--semantics-spacing-broad);
}

.ctr-como__header {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-medium);
    align-self: flex-start;
    max-width: 800px;
}

.ctr-como__title {
    font-family: var(--semantics-typography-family-poppins);
    font-weight: 700;
    font-size: var(--semantics-typography-heading-x-large);
    line-height: var(--semantics-typography-baseline-tight);
    letter-spacing: var(--semantics-typography-tracking-tight-2);
    color: var(--semantics-colors-text-accent-petunia);
    margin: 0;
}

.ctr-como__subtitle {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-18);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-secondary);
    margin: 0;
}

.ctr-como__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--semantics-spacing-wide);
    width: 100%;
}

.ctr-como__line {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: min(960px, calc(100% - 256px));
    height: 3px;
    background-color: var(--semantics-colors-fill-neutral-strong);
    z-index: 0;
}

.ctr-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--semantics-spacing-bigger);
    text-align: center;
}

.ctr-step__circle {
    width: 64px;
    height: 64px;
    border-radius: var(--semantics-radius-full);
    color: var(--semantics-colors-text-on-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--semantics-typography-family-poppins);
    font-weight: 700;
    font-size: var(--semantics-typography-heading-x-small);
    line-height: 1;
    letter-spacing: var(--semantics-typography-tracking-tight-1);
}

.ctr-step__circle--purpura { background-color: var(--semantics-colors-fill-accent-purpura); }
.ctr-step__circle--ponkan { background-color: var(--semantics-colors-fill-accent-ponkan); }
.ctr-step__circle--pitaya { background-color: var(--semantics-colors-fill-accent-pitaya); }
.ctr-step__circle--pistache { background-color: var(--semantics-colors-fill-accent-pistache); }

.ctr-step__title {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 700;
    font-size: var(--semantics-typography-body-16);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-primary);
    margin: 0;
}

.ctr-step__desc {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-14);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-secondary);
    margin: 0;
    max-width: 222px;
}

.ctr-como__cta {
    align-self: center;
}

/* ----- Section 4: Nossos Programas ----- */
.ctr-prog {
    background-color: var(--semantics-colors-fill-primary-subtle);
    padding: var(--semantics-spacing-massive) 0;
}

.ctr-prog__inner {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-broad);
}

.ctr-prog__title {
    font-family: var(--semantics-typography-family-poppins);
    font-weight: 700;
    font-size: var(--semantics-typography-heading-x-large);
    line-height: var(--semantics-typography-baseline-tight);
    letter-spacing: var(--semantics-typography-tracking-tight-2);
    color: var(--semantics-colors-text-heading-default);
    text-align: center;
    margin: 0;
}

.ctr-prog__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 624px;
    gap: var(--semantics-spacing-wide);
    align-items: center;
}

.ctr-prog__row--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ctr-prog__text {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-bigger);
    align-items: flex-start;
    min-width: 0;
}

.ctr-prog__heading {
    font-family: var(--semantics-typography-family-poppins);
    font-weight: 700;
    font-size: var(--semantics-typography-heading-large);
    line-height: var(--semantics-typography-baseline-tight);
    letter-spacing: var(--semantics-typography-tracking-tight-1);
    color: var(--semantics-colors-text-heading-default);
    margin: 0;
}

.ctr-prog__desc {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-large);
}

.ctr-prog__desc p {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-16);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-secondary);
    margin: 0;
}

.ctr-prog__lede {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-16);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-secondary);
    margin: 0;
}

.ctr-prog__highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-medium);
    width: 100%;
}

.ctr-prog__highlights li {
    display: flex;
    align-items: center;
    gap: var(--semantics-spacing-medium);
    padding-top: var(--semantics-spacing-small);
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-16);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-secondary);
}

.ctr-prog__bullet {
    width: 8px;
    height: 8px;
    border-radius: var(--semantics-radius-full);
    background-color: var(--semantics-colors-fill-accent-pistache);
    flex-shrink: 0;
}

.ctr-prog__image {
    height: 480px;
    border-radius: var(--semantics-radius-larger);
    background-color: var(--semantics-colors-fill-neutral-strong);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ctr-prog__image--aprendiz {
    background-image: url("../assets/images/contratar-talentos/programas/programa-jovem-aprendiz.png");
}

.ctr-prog__image--pcd {
    background-image: url("../assets/images/contratar-talentos/programas/programa-inclusao-pcd.png");
}

/* ----- Section 5: CTA Final ----- */
.ctr-cta {
    background-color: var(--semantics-colors-fill-interactive-primary-hover);
    color: var(--semantics-colors-text-on-dark);
    padding: var(--semantics-spacing-massive) 0;
}

.ctr-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--semantics-spacing-bigger);
    text-align: center;
}

.ctr-cta__title {
    font-family: var(--semantics-typography-family-poppins);
    font-weight: 700;
    font-size: var(--semantics-typography-heading-large);
    line-height: var(--semantics-typography-baseline-tight);
    letter-spacing: var(--semantics-typography-tracking-tight-1);
    color: var(--semantics-colors-text-on-dark);
    margin: 0;
    max-width: 704px;
}

.ctr-cta__desc {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-16);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-on-dark);
    margin: 0;
    max-width: 600px;
}

.ctr-cta__contact {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-16);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-on-dark);
    margin: 0;
}

.ctr-cta__contact a {
    text-decoration: underline;
}

/* ----- Section 6: Banner Investir ----- */
.ctr-banner {
    background-color: var(--semantics-colors-fill-neutral);
    padding: var(--semantics-padding-broad) 0;
}

.ctr-banner__card {
    background-color: var(--semantics-colors-fill-accent-petunia);
    color: var(--semantics-colors-text-on-dark);
    border-radius: var(--semantics-radius-larger);
    padding: var(--semantics-spacing-broad);
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-bigger);
    align-items: flex-start;
}

.ctr-banner__title {
    font-family: var(--semantics-typography-family-poppins);
    font-weight: 700;
    font-size: var(--semantics-typography-heading-large);
    line-height: var(--semantics-typography-baseline-tight);
    letter-spacing: var(--semantics-typography-tracking-tight-1);
    color: var(--semantics-colors-text-on-dark);
    margin: 0;
    max-width: 600px;
}

.ctr-banner__desc {
    font-family: var(--semantics-typography-family-inter);
    font-weight: 400;
    font-size: var(--semantics-typography-body-18);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-on-dark);
    margin: 0;
}

/* ====================================================================
   Responsivo (576/768/1024)
   ==================================================================== */
@media (max-width: 1024px) {
    .ctr-hero__inner {
        flex-direction: column;
        padding: 0 var(--semantics-spacing-large);
        gap: 0;
        align-items: center;
    }

    .ctr-hero__content {
        flex: 0 0 auto;
        width: 100%;
        max-width: 540px;
        padding-bottom: var(--semantics-spacing-broad);
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }

    .ctr-hero__image {
        flex: 0 0 auto;
        width: calc(100% + var(--semantics-spacing-large) * 2);
        margin-left: calc(var(--semantics-spacing-large) * -1);
        margin-right: calc(var(--semantics-spacing-large) * -1);
        height: 480px;
    }

    .ctr-hero__overlay {
        width: 300px;
        top: 48px;
        left: 32px;
    }

    .ctr-inova {
        min-height: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .ctr-inova__photo {
        position: static;
        transform: none;
        width: 100%;
        max-width: 540px;
        height: auto;
        aspect-ratio: 740 / 688;
        margin: var(--semantics-spacing-bigger) auto 0;
        order: 999;
    }

    .ctr-inova__row {
        flex-direction: column;
        align-items: stretch;
    }

    .ctr-inova__left,
    .ctr-inova__card {
        flex: 0 0 auto;
        width: 100%;
    }

    .ctr-inova__courses {
        position: absolute;
        bottom: var(--semantics-spacing-wide);
        left: 0;
        right: 0;
        z-index: 3;
    }

    .ctr-como__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--semantics-spacing-bigger);
    }

    .ctr-como__line {
        display: none;
    }

    .ctr-prog__row,
    .ctr-prog__row--reverse {
        grid-template-columns: 1fr;
    }

    .ctr-prog__row--reverse .ctr-prog__image {
        order: -1;
    }
}

@media (max-width: 768px) {
    .ctr-hero__title {
        font-size: var(--semantics-typography-heading-xx-large);
    }

    .ctr-hero__content {
        padding-top: var(--semantics-spacing-broad);
    }

    .ctr-resp__title,
    .ctr-prog__title,
    .ctr-como__title {
        font-size: var(--semantics-typography-heading-large);
    }

    .ctr-cta__title,
    .ctr-banner__title,
    .ctr-prog__heading {
        font-size: var(--semantics-typography-heading-small);
    }

    .ctr-inova__courses {
        gap: var(--semantics-spacing-medium);
    }
}

@media (max-width: 576px) {
    .ctr-hero__inner {
        align-items: flex-start;
    }

    .ctr-hero__content {
        align-items: flex-start;
        text-align: left;
        margin: 0;
    }

    .ctr-hero__title {
        font-size: var(--semantics-typography-heading-xx-large);
    }

    .ctr-hero__image {
        height: 360px;
    }

    .ctr-hero__overlay {
        display: none;
    }

    .ctr-resp,
    .ctr-como,
    .ctr-banner {
        padding: var(--semantics-padding-bigger) 0;
    }

    .ctr-prog,
    .ctr-cta {
        padding: var(--semantics-padding-broad) 0;
    }

    .ctr-inova {
        padding-top: var(--semantics-padding-broad);
    }

    .ctr-resp__title,
    .ctr-prog__title,
    .ctr-como__title {
        font-size: var(--semantics-typography-heading-small);
    }

    .ctr-como__steps {
        grid-template-columns: 1fr;
    }

    .ctr-prog__image {
        height: 320px;
    }

    .ctr-banner__card {
        padding: var(--semantics-spacing-bigger);
    }
}