/* =========================================================
   CDC — PÁGINA "O CDC"
   Versão consolidada
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

main {
    overflow: hidden;
}

.ocdc-kicker {
    display: inline-block;
    margin-bottom: 11px;

    color: var(--cdc-blue, #1264e3);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ocdc-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;
    margin-bottom: 30px;
}

.ocdc-section-heading h2,
.ocdc-section-copy h2 {
    margin: 0;

    color: var(--cdc-navy, #071f3d);

    font-size: clamp(31px, 3vw, 48px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.ocdc-section-heading > p {
    max-width: 390px;

    margin: 0 0 5px;

    color: #607086;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   BOTÕES
   ========================================================= */

.ocdc-btn {
    min-height: 52px;

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

    gap: 10px;

    padding: 0 22px;

    border-radius: 14px;

    font-size: 13px;
    font-weight: 900;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.ocdc-btn:hover {
    transform: translateY(-2px);
}

.ocdc-btn-primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #12ac6d,
            #0bc97c
        );

    box-shadow:
        0 13px 28px
        rgba(15, 184, 116, .20);
}

.ocdc-btn-secondary {
    color: var(--cdc-blue, #1264e3);

    background: #ffffff;

    border:
        2px solid
        rgba(18, 100, 227, .72);
}


/* =========================================================
   PLACEHOLDERS
   ========================================================= */

.ocdc-image-placeholder {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    overflow: hidden;

    color:
        rgba(7, 31, 61, .30);

    background:
        linear-gradient(
            135deg,
            #dceeff 0%,
            #ecf8ff 48%,
            #d8f6ed 100%
        );

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.ocdc-image-placeholder::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .43);
}

.ocdc-image-placeholder span {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HERO
   ========================================================= */

.ocdc-hero {
    background:
        linear-gradient(
            90deg,
            #f2f8ff 0%,
            #f4f9ff 43%,
            #ffffff 43%
        );
}

.ocdc-hero-grid {
    min-height: 520px;

    display: grid;

    grid-template-columns:
        minmax(350px, .78fr)
        minmax(0, 1.38fr);

    align-items: stretch;
}

.ocdc-hero-copy {
    position: relative;
    z-index: 3;

    align-self: center;

    max-width: 530px;

    padding:
        48px 42px 48px 0;
}

.ocdc-hero-copy h1 {
    margin: 0 0 18px;

    color: var(--cdc-navy, #071f3d);

    font-size: clamp(41px, 4vw, 66px);
    line-height: .96;
    letter-spacing: -.055em;
}

.ocdc-hero-copy h1 strong {
    display: block;

    color: var(--cdc-blue, #1264e3);
    font-weight: 900;
}

.ocdc-hero-copy > p {
    max-width: 455px;

    margin: 0 0 26px;

    color: #53657b;

    font-size: 15px;
    line-height: 1.62;
}

.ocdc-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.ocdc-hero-media {
    position: relative;

    min-height: 520px;

    overflow: hidden;
}

.ocdc-hero-media::after {
    content: "";

    position: absolute;
    inset: auto 0 0 0;

    height: 30%;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(7, 31, 61, .14)
        );
}

.ocdc-handwritten {
    position: absolute;
    z-index: 4;

    right: 32px;
    bottom: 35px;

    color: #ffffff;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 23px;
    font-weight: 800;
    line-height: 1.04;

    text-align: right;

    transform: rotate(-5deg);

    text-shadow:
        0 4px 14px
        rgba(0, 0, 0, .17);
}

.ocdc-handwritten::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -11px;

    width: 72px;
    height: 5px;

    border-radius: 999px;

    background: #18c97c;

    transform: rotate(-8deg);
}


/* =========================================================
   O QUE É O CDC
   ========================================================= */

.ocdc-what {
    padding: 76px 0;

    background: #ffffff;
}

.ocdc-what-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, .86fr)
        minmax(0, 1.22fr);

    align-items: center;

    gap: 65px;
}

.ocdc-section-copy p {
    max-width: 520px;

    margin: 19px 0 0;

    color: #5a6a80;

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


/* =========================================================
   CONCEITO CDC
   ========================================================= */

.ocdc-concept {
    display: grid;

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

    grid-template-areas:
        "connect center solve"
        "learn center grow";

    align-items: center;

    gap: 14px;

    min-height: 300px;
}

.ocdc-concept-item {
    min-height: 112px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 18px;

    border-radius: 19px;

    background: #f4f9ff;

    box-shadow:
        0 10px 28px
        rgba(7, 31, 61, .045);
}

.ocdc-concept-item:nth-child(1) {
    grid-area: connect;
}

.ocdc-concept-item:nth-child(2) {
    grid-area: solve;
}

.ocdc-concept-item:nth-child(4) {
    grid-area: learn;
}

.ocdc-concept-item:nth-child(5) {
    grid-area: grow;
}

.ocdc-concept-item strong {
    display: block;

    margin-bottom: 4px;

    color: var(--cdc-navy, #071f3d);

    font-size: 14px;
    font-weight: 900;
}

.ocdc-concept-item span {
    display: block;

    color: #627187;

    font-size: 10px;
    line-height: 1.4;
}

.ocdc-concept-icon {
    width: 49px;
    height: 49px;

    flex: 0 0 49px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 21px;
}

.concept-blue {
    background: #1681f4;
}

.concept-coral {
    background: #ff725c;
}

.concept-green {
    background: #14b56c;
}

.concept-yellow {
    background: #f3ba10;
}

.ocdc-concept-center {
    grid-area: center;

    width: 155px;
    height: 155px;

    display: flex;
    flex-direction: column;

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

    margin: auto;

    border-radius: 50%;

    color: var(--cdc-navy, #071f3d);

    background:
        linear-gradient(
            145deg,
            #e3f4ff,
            #f5fbff
        );

    box-shadow:
        0 0 0 14px
        rgba(225, 243, 255, .54);
}

.ocdc-concept-logo {
    margin-bottom: 6px;

    color: var(--cdc-blue, #1264e3);

    font-size: 29px;
    font-weight: 950;
    letter-spacing: -.04em;
}

.ocdc-concept-center > span {
    max-width: 100px;

    font-size: 9px;
    font-weight: 750;
    line-height: 1.25;

    text-align: center;
}


/* =========================================================
   COMO FUNCIONA
   ========================================================= */

.ocdc-how {
    padding: 56px 0 62px;

    background:
        linear-gradient(
            180deg,
            #edf7ff 0%,
            #f6fbff 100%
        );
}

.ocdc-steps {
    display: grid;

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

    align-items: center;

    gap: 9px;
}

.ocdc-step {
    position: relative;

    min-height: 126px;

    display: grid;

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

    align-items: center;

    gap: 15px;

    padding: 24px 22px;

    border-radius: 19px;
}

.step-blue {
    background: #dfefff;
}

.step-green {
    background: #daf7e9;
}

.step-yellow {
    background: #fff0bc;
}

.ocdc-step-number {
    position: absolute;

    top: 10px;
    left: 12px;

    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background: var(--cdc-blue, #1264e3);

    font-size: 10px;
    font-weight: 900;
}

.step-green .ocdc-step-number {
    background: #16ad69;
}

.step-yellow .ocdc-step-number {
    background: #ecb313;
}

.ocdc-step-icon {
    color: var(--cdc-blue, #1264e3);

    font-size: 35px;

    text-align: center;
}

.step-green .ocdc-step-icon {
    color: #16ad69;
}

.step-yellow .ocdc-step-icon {
    color: #dda700;
}

.ocdc-step h3 {
    margin: 0 0 6px;

    color: var(--cdc-navy, #071f3d);

    font-size: 16px;
    font-weight: 900;
}

.ocdc-step p {
    margin: 0;

    color: #53647a;

    font-size: 11px;
    line-height: 1.5;
}

.ocdc-step-arrow {
    color: var(--cdc-navy, #071f3d);

    font-size: 25px;
    font-weight: 700;

    text-align: center;
}


/* =========================================================
   PARA QUEM
   ========================================================= */

.ocdc-audiences {
    padding: 66px 0 72px;

    background: #ffffff;
}

.ocdc-audience-grid {
    display: grid;

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

    gap: 16px;
}

.ocdc-audience-card {
    overflow: hidden;

    border:
        1px solid
        rgba(7, 31, 61, .055);

    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 12px 32px
        rgba(7, 31, 61, .065);
}

.ocdc-audience-photo {
    position: relative;

    height: 165px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #d8edff,
            #dcf7ec
        );
}

.ocdc-audience-photo span {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color:
        rgba(7, 31, 61, .28);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ocdc-audience-copy {
    min-height: 105px;

    padding: 17px 18px 18px;
}

.ocdc-audience-copy h3 {
    margin: 0 0 6px;

    color: var(--cdc-navy, #071f3d);

    font-size: 14px;
    font-weight: 900;
}

.ocdc-audience-copy p {
    margin: 0;

    color: #68768a;

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   SERVIÇOS
   ========================================================= */

.ocdc-services {
    padding: 64px 0 72px;

    background:
        linear-gradient(
            180deg,
            #f5faff,
            #edf7ff
        );
}

.ocdc-services-grid {
    display: grid;

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

    gap: 13px;
}

.ocdc-service {
    min-height: 170px;

    display: flex;
    flex-direction: column;

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

    padding: 20px 13px;

    border:
        1px solid
        rgba(7, 31, 61, .05);

    border-radius: 17px;

    color: inherit;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 11px 27px
        rgba(7, 31, 61, .05);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.ocdc-service:hover {
    transform: translateY(-4px);

    box-shadow:
        0 17px 35px
        rgba(7, 31, 61, .09);
}

.service-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    margin-bottom: 14px;

    border-radius: 50%;

    color: #ffffff;

    font-size: 19px;
}

.service-blue {
    background: #1681f4;
}

.service-green {
    background: #15b46c;
}

.service-coral {
    background: #ff735c;
}

.service-purple {
    background: #7657eb;
}

.service-yellow {
    background: #eab410;
}

.service-teal {
    background: #0bb3b4;
}

.ocdc-service h3 {
    margin: 0 0 7px;

    color: var(--cdc-navy, #071f3d);

    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
}

.ocdc-service p {
    margin: 0;

    color: #6d7c8f;

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


/* =========================================================
   LOCAL POR NATUREZA / REDE CDC
   ========================================================= */

.ocdc-network {
    position: relative;

    padding: 0;

    background:
        linear-gradient(
            110deg,
            #e8f6ff 0%,
            #effaff 100%
        );
}

.ocdc-network-grid {
    min-height: 500px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(330px, .72fr);

    align-items: stretch;

    gap: 36px;
}

.ocdc-network-content {
    align-self: center;

    min-width: 0;

    padding: 58px 0;
}

.ocdc-network-content > h2 {
    max-width: 700px;

    margin: 0 0 12px;

    color: var(--cdc-navy, #071f3d);

    font-size: clamp(31px, 3.1vw, 49px);
    line-height: 1;
    letter-spacing: -.045em;
}

.ocdc-network-intro {
    max-width: 655px;

    margin: 0 0 28px;

    color: #58697f;

    font-size: 13px;
    line-height: 1.62;
}

.ocdc-network-flow {
    display: grid;

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

    align-items: center;

    gap: 15px;
}

.ocdc-network-box {
    min-width: 0;

    min-height: 220px;

    padding: 22px;

    border-radius: 19px;

    box-shadow:
        0 11px 27px
        rgba(7, 31, 61, .045);
}

.network-local {
    background: #ddf6e8;
}

.network-central {
    background: #ddebff;
}

.ocdc-network-box h3 {
    margin: 0 0 15px;

    color: var(--cdc-navy, #071f3d);

    font-size: 16px;
    font-weight: 900;
}

.ocdc-network-box ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.ocdc-network-box li {
    position: relative;

    margin-bottom: 10px;

    padding-left: 22px;

    color: #42566f;

    font-size: 10px;
    line-height: 1.4;
}

.ocdc-network-box li:last-child {
    margin-bottom: 0;
}

.ocdc-network-box li::before {
    content: "✓";

    position: absolute;

    top: 0;
    left: 0;

    width: 15px;
    height: 15px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background: #14b46b;

    font-size: 8px;
    font-weight: 900;
}

.network-central li::before {
    background: #167fe9;
}

.ocdc-network-center {
    display: flex;
    flex-direction: column;

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

    gap: 6px;

    min-width: 0;

    text-align: center;
}

.ocdc-network-center span {
    color: var(--cdc-navy, #071f3d);

    font-size: 8px;
    font-weight: 950;
    letter-spacing: .08em;
}

.ocdc-network-center strong {
    color: var(--cdc-blue, #1264e3);

    font-size: 19px;
}

.network-house {
    width: 76px;
    height: 64px;

    display: grid;
    place-items: center;

    border-radius:
        14px 14px 8px 8px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #116fe5,
            #0aa5b4
        );

    font-size: 16px;
    font-weight: 950;

    box-shadow:
        0 11px 24px
        rgba(18, 100, 227, .17);
}

.ocdc-network-photo {
    position: relative;

    min-width: 0;
    min-height: 500px;

    overflow: hidden;
}

.ocdc-network-photo::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .04) 25%,
            rgba(7, 31, 61, .18) 100%
        );
}

.ocdc-network-message {
    position: absolute;
    z-index: 3;

    top: 40px;
    right: 24px;

    max-width: 220px;

    color: var(--cdc-navy, #071f3d);

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.05;

    text-align: right;

    transform: rotate(-5deg);
}


/* =========================================================
   PORQUE O CDC EXISTE / IMPACTO
   ========================================================= */

.ocdc-impact {
    width: 100%;

    min-height: 320px;

    display: grid;

    grid-template-columns:
        minmax(360px, .82fr)
        minmax(0, 1.18fr);

    align-items: stretch;

    background: #ffffff;
}

.ocdc-impact-photo {
    position: relative;

    min-width: 0;
    min-height: 320px;

    overflow: hidden;
}

.ocdc-impact-content.container {
    width: auto;
    max-width: none;

    margin: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        45px
        clamp(38px, 5vw, 78px);

    box-sizing: border-box;
}

.ocdc-impact-content h2 {
    max-width: 720px;

    margin: 0 0 12px;

    color: var(--cdc-navy, #071f3d);

    font-size: clamp(29px, 2.8vw, 45px);
    line-height: 1.03;
    letter-spacing: -.04em;
}

.ocdc-impact-content > p {
    max-width: 650px;

    margin: 0 0 24px;

    color: #607086;

    font-size: 12px;
    line-height: 1.62;
}

.ocdc-impact-items {
    display: flex;
    flex-wrap: wrap;

    gap:
        16px 30px;
}

.ocdc-impact-items > div {
    display: flex;
    align-items: center;

    gap: 9px;
}

.ocdc-impact-items strong {
    color: var(--cdc-navy, #071f3d);

    font-size: 11px;
    font-weight: 900;
}

.impact-dot {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    display: block;

    border-radius: 50%;
}

.impact-dot-blue {
    background: #1681f4;
}

.impact-dot-green {
    background: #17b46d;
}

.impact-dot-yellow {
    background: #eab410;
}


/* =========================================================
   CTA FINAL
   ========================================================= */

.ocdc-final-cta {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            105deg,
            #086ce8 0%,
            #0495ca 50%,
            #10b66d 100%
        );
}

.ocdc-final-cta::after {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -45px;
    top: -115px;

    border:
        36px solid
        rgba(255, 255, 255, .075);

    border-radius: 50%;
}

.ocdc-final-cta-inner {
    position: relative;
    z-index: 2;

    min-height: 190px;

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

    gap: 38px;

    padding-top: 34px;
    padding-bottom: 34px;
}

.ocdc-final-cta-inner > div:first-child > span {
    display: block;

    margin-bottom: 8px;

    color:
        rgba(255, 255, 255, .78);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .17em;
}

.ocdc-final-cta h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(27px, 2.9vw, 43px);
    line-height: 1.04;
    letter-spacing: -.04em;
}

.ocdc-final-actions {
    display: flex;
    align-items: center;

    gap: 11px;

    flex: 0 0 auto;
}

.ocdc-final-btn {
    min-height: 50px;

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

    gap: 8px;

    padding: 0 21px;

    border-radius: 14px;

    font-size: 11px;
    font-weight: 900;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.ocdc-final-btn:hover {
    transform: translateY(-2px);
}

.final-find {
    color: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, .62);

    background:
        rgba(255, 255, 255, .10);
}

.final-open {
    color: var(--cdc-blue, #1264e3);

    background: #ffffff;

    box-shadow:
        0 13px 27px
        rgba(7, 31, 61, .12);
}


/* =========================================================
   ECRÃS GRANDES
   ========================================================= */

@media (min-width: 1600px) {

    .ocdc-hero-grid {
        min-height: 540px;
    }

    .ocdc-hero-media {
        min-height: 540px;
    }

    .ocdc-network-grid {
        min-height: 520px;
    }

    .ocdc-network-photo {
        min-height: 520px;
    }

    .ocdc-impact {
        min-height: 340px;
    }

    .ocdc-impact-photo {
        min-height: 340px;
    }

}


/* =========================================================
   TABLET GRANDE
   ========================================================= */

@media (max-width: 1180px) {

    .ocdc-hero-grid {
        grid-template-columns:
            .9fr
            1.12fr;
    }

    .ocdc-what-grid {
        gap: 40px;
    }

    .ocdc-concept {
        grid-template-columns:
            1fr
            140px
            1fr;
    }

    .ocdc-concept-center {
        width: 140px;
        height: 140px;
    }

    .ocdc-services-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .ocdc-network-grid {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(290px, .65fr);
    }

    .ocdc-network-flow {
        grid-template-columns:
            1fr
            110px
            1fr;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .ocdc-section-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 11px;
    }


    /* HERO */

    .ocdc-hero {
        background: #f2f8ff;
    }

    .ocdc-hero-grid {
        grid-template-columns: 1fr;

        padding-left: 0;
        padding-right: 0;
    }

    .ocdc-hero-copy {
        max-width: none;

        padding:
            50px
            28px
            42px;
    }

    .ocdc-hero-media {
        min-height: 440px;
    }


    /* O QUE É */

    .ocdc-what-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .ocdc-concept {
        max-width: 750px;

        margin: 0 auto;
    }


    /* COMO FUNCIONA */

    .ocdc-steps {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .ocdc-step-arrow {
        transform: rotate(90deg);
    }


    /* PÚBLICOS */

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


    /* REDE */

    .ocdc-network-grid {
        grid-template-columns: 1fr;

        gap: 0;

        padding-left: 0;
        padding-right: 0;
    }

    .ocdc-network-content {
        padding:
            56px
            28px;
    }

    .ocdc-network-photo {
        min-height: 400px;
    }


    /* IMPACTO */

    .ocdc-impact {
        grid-template-columns: 1fr;
    }

    .ocdc-impact-photo {
        min-height: 320px;
    }

    .ocdc-impact-content.container {
        width: 100%;

        padding:
            46px
            28px
            52px;
    }


    /* CTA */

    .ocdc-final-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .ocdc-kicker {
        font-size: 8px;
    }


    /* HERO */

    .ocdc-hero-copy {
        padding:
            40px
            20px
            34px;
    }

    .ocdc-hero-copy h1 {
        font-size:
            clamp(40px, 12vw, 56px);
    }

    .ocdc-hero-copy > p {
        font-size: 14px;
    }

    .ocdc-hero-actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .ocdc-btn {
        width: 100%;
    }

    .ocdc-hero-media {
        min-height: 350px;
    }

    .ocdc-handwritten {
        right: 20px;
        bottom: 28px;

        font-size: 18px;
    }


    /* SECÇÕES */

    .ocdc-what,
    .ocdc-audiences,
    .ocdc-services {
        padding:
            52px 0;
    }

    .ocdc-how {
        padding:
            47px 0;
    }

    .ocdc-section-heading h2,
    .ocdc-section-copy h2 {
        font-size: 33px;
    }


    /* CONCEITO */

    .ocdc-concept {
        grid-template-columns:
            1fr
            1fr;

        grid-template-areas:
            "center center"
            "connect solve"
            "learn grow";

        gap: 11px;
    }

    .ocdc-concept-center {
        width: 150px;
        height: 150px;

        margin:
            0 auto 14px;
    }

    .ocdc-concept-item {
        min-height: 138px;

        flex-direction: column;

        align-items: flex-start;

        padding: 17px;
    }


    /* PASSOS */

    .ocdc-step {
        min-height: 118px;

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

        padding:
            24px
            17px;
    }


    /* PÚBLICOS */

    .ocdc-audience-grid {
        grid-template-columns: 1fr;
    }

    .ocdc-audience-photo {
        height: 215px;
    }


    /* SERVIÇOS */

    .ocdc-services-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;
    }

    .ocdc-service {
        min-height: 155px;

        padding:
            17px
            11px;
    }


    /* REDE */

    .ocdc-network-content {
        padding:
            49px
            20px;
    }

    .ocdc-network-flow {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .ocdc-network-center {
        padding: 9px 0;
    }

    .ocdc-network-box {
        min-height: auto;
    }

    .ocdc-network-photo {
        min-height: 350px;
    }

    .ocdc-network-message {
        top: 25px;
        right: 18px;

        font-size: 17px;
    }


    /* IMPACTO */

    .ocdc-impact-photo {
        min-height: 260px;
    }

    .ocdc-impact-content.container {
        padding:
            40px
            20px
            46px;
    }

    .ocdc-impact-items {
        display: grid;

        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* CTA */

    .ocdc-final-cta-inner {
        padding-top: 39px;
        padding-bottom: 39px;
    }

    .ocdc-final-actions {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr;
    }

    .ocdc-final-btn {
        width: 100%;
    }

}


/* =========================================================
   MOBILE PEQUENO
   ========================================================= */

@media (max-width: 440px) {

    .ocdc-concept {
        grid-template-columns: 1fr;

        grid-template-areas:
            "center"
            "connect"
            "solve"
            "learn"
            "grow";
    }

    .ocdc-concept-item {
        min-height: 96px;

        flex-direction: row;
        align-items: center;
    }

    .ocdc-services-grid {
        grid-template-columns: 1fr;
    }

    .ocdc-service {
        min-height: 138px;
    }

}


/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ocdc-btn,
    .ocdc-service,
    .ocdc-final-btn {
        transition: none;
    }

}