.contentMarketingSection {
    width: 100%;
    padding: 6vw;
    background: #f3f4f6;
    overflow: hidden;
}

.color-gray{
    color: var(--gray);
    font-family: var(--font-dmserif);
}

.contentMarketingSection .img-our-work {
    height: 400px;
}

.contentMarketingContainer {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;  
    grid-template-columns: 1.5fr 1fr;
    gap: 5vw;
    align-items: center;
}

.contentMarketingContent {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.contentMarketingLabel {
    font-family: "Lato", sans-serif;
    font-size: clamp(.8rem, .8vw, 1rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray);
}

.contentMarketingContent h1 span {
    color: var(--gray);
    font-family: var(--font-dmserif);
}

.contentMarketingContent h1 {
    font-family: var(--font-dmserif);
    font-size: var(--text-title);
    color: var(--blue);
    font-weight: 400;
}
.contentMarketingContent h3{
    color: var(--gray);
}
.contentMarketingContent h2 {
    color: var(--gray);
    font-size: var(--text-paragraph);
}
.contentMarketingCards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1vw;
    margin: .5vw 0;
}

.contentMarketingCard {
    background: #ffffff;
    padding: 1vw;
    border-radius: 1vw;
    box-shadow: 0 10px 40px rgba(0,0,0,.06);

    transition: .3s ease;
}

.contentMarketingCard b{
    color: var(--gray);
}

.contentMarketingCard:hover {
    transform: translateY(-6px);
}

.contentMarketingCard span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;
    border-radius: 50%;

    background: #0f4cff;
    color: #ffffff;

    font-family: "Bodoni Moda", serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.contentMarketingCard p {
    font-size: .95rem;
}

.contentMarketingButton {
    width: fit-content;
    border: none;
    padding: 1rem 2rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--blue2));
    color: #ffffff;
    text-decoration: none;
    font-family: "Lato", sans-serif;
    font-weight: 400;

    transition: .3s ease;
}

.contentMarketingButton:hover {
    transform: translateY(-3px);
}

.contentMarketingImage {
    position: relative;
}

.contentMarketingImage img {
    width: 100%;
    height: 650px;
    object-fit: cover;

    border-radius: 2vw;
    display: block;
}

p {
    color: var(--gray);
}


/* RESPONSIVE */
@media (max-width: 991px) {

    .contentMarketingSection {
        padding: 12vw 6vw;
    }

    .contentMarketingContainer {
        grid-template-columns: 1fr;
    }

    .contentMarketingCards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contentMarketingCard {
        padding: 30px;
        border-radius: 24px;
    }

    .contentMarketingImage img {
        height: 500px;
        border-radius: 24px;
    }

    .contentMarketingContent {
        gap: 1rem;
    }

}

/* 2  */

.copywritingSection {
    position: relative;
    width: 100%;
    padding: 6vw;
    background: #ffffff;
    overflow: hidden;
}

.copywritingGlow {
    position: absolute;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15,76,255,.12) 0%, transparent 70%);
    top: -10%;
    right: -10%;
    pointer-events: none;
}

.copywritingContainer {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.8fr 2fr;
    gap: 6vw;
    align-items: center;

    position: relative;
    z-index: 2;
}

.copywritingImage {
    position: relative;
}

.copywritingImage img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 2vw;
    display: block;
}

.copywritingContent {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.copywritingLabel {
    font-family: "Lato", sans-serif;
    font-size: clamp(.8rem, .8vw, 1rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray);
}

.copywritingContent h2 {
    font-family: var(--font-dmserif);
    font-size: var(--text-title);
    color: #0f4cff;
    font-weight: 400;
}

.copywritingContent p {
    font-family: var(--font-lato);
    font-size: var(--text-paragraph);
    color: #475569;
    max-width: 760px;
}



.copywritingButton {
    width: fit-content;
    padding: 1rem 2rem;

    background: linear-gradient(90deg, var(--blue), var(--blue2));
    color: #ffffff;

    border-radius: 999px;

    text-decoration: none;
    font-family: "Lato", sans-serif;
    font-weight: 400;

    transition: .3s ease;
}

.copywritingButton:hover {
    background: #0038d6;
    transform: translateY(-4px);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .copywritingSection {
        padding: 12vw 6vw;
    }

    .copywritingContainer {
        grid-template-columns: 1fr;
    }

    .copywritingContent {
        gap: 4vw;
    }

    .copywritingFeature {
        padding: 24px;
        border-radius: 24px;
        gap: 20px;
    }

    .copywritingImage img {
        height: 500px;
        border-radius: 24px;
    }

    .copywritingFeature span {
        min-width: 60px;
        height: 60px;
    }

}

/* 3 */
.brandingMiniLabel {
    font-family: "Lato", sans-serif;
    font-size: clamp(.8rem, .8vw, 1rem);
    letter-spacing: .35em;
    text-transform: uppercase;
    color: #0f172a;
}

/* HERO */
.brandingHeroSection {
    padding: 6vw;
}

.brandingHeroContainer {
    max-width: 1450px;
    margin: 0 auto;
    text-align: center;
}

.brandingHeroContainer h1 span {
    color: var(--gray);
    font-family: var(--font-dmserif);
}

.brandingHeroLabel {
    display: block;
    font-family: "Lato", sans-serif;
    font-size: clamp(.8rem, .8vw, 1rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1vw;
    color: var(--gray);
}

.brandingHeroSection h1 {
    font-family: var(--font-dmserif);
    font-size: var(--text-title);
    color: var(--blue);
    font-weight: 400;
}

.brandingHeroContent {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1vw;
}

.brandingHeroLeft h2 {
    font-family: var(--font-dmserif);
    font-size: var(--text-paragraph);
    color: var(--gray);
}

.brandingHeroRight {
    display: flex;
    flex-direction: column;
    gap: .3vw;
}
.brandingHeroRight h2{
    font-family: var(--font-lato);
    font-size: var(--text-paragraph);
    color: var(--gray);
}

.brandingHeroRight p {
    font-family: var(--font-poppins);
    font-size: var(--text-paragraph);
    color: var(--gray);
}

/* INTRO */
.brandingIntroSection {
    padding: 0 6vw 0 6vw;
}

.brandingIntroSection .img-corporate{
    height: 600px;
}



.brandingIntroContainer {
    max-width: 1450px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 5vw;
    align-items: center;
}

.brandingIntroImage img {
    height: 350px;
    object-fit: cover;
    border-radius: 2vw;
}

.brandingIntroContent {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.brandingIntroContent h2,
.brandingWhySection h2,
.brandingBenefitsSection h2,
.brandingPositioningHeader h2,
.brandingDetailContent h2,
.brandingCtaContainer h2 {
    font-family: var(--font-dmserif);
    font-size: clamp(2.5rem, 2vw, 5rem);
    color: var(--blue);
    font-weight: 400;
}

.brandingIntroContent p,
.brandingWhyGrid p,
.brandingBenefitsSection p,
.brandingPositioningContent p,
.brandingDetailContent p,
.brandingCtaContainer p {
    font-family: "Lato", sans-serif;
    font-size: clamp(1rem, 1vw, 1.12rem);
    color:var(--gray);
}

/* WHY */
.brandingWhySection {
    padding: 6vw 6vw 0vw 6vw;
}

.brandingWhyContainer {
    max-width: 1400px;
    margin: 0 auto;
}

.brandingWhyContainer h2 {
    max-width: 1000px;
}

.brandingWhyGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
}
.brandingWhyGrid div{
        background: #f7f7f7;
    padding: 2vw;
    border-radius: 12px;
}

/* BENEFITS */
.brandingBenefitsSection {
    padding: 6vw 0;
}

.brandingBenefitsContainer {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

.brandingBenefitsCards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
    margin-top: 4vw;
}

.brandingBenefitsCard {
    background: #ffffff;
    padding: 2.2vw;
    border-radius: 2vw;
    box-shadow: 0 15px 40px rgba(0,0,0,.05);

    transition: .3s ease;
}

.brandingBenefitsCard:hover {
    transform: translateY(-10px);
}

.brandingBenefitsCard span {
    width: 70px;
    height: 70px;

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

    border-radius: 50%;
    background: #0f4cff;
    color: #ffffff;

    font-family: "Bodoni Moda", serif;
    font-size: 1.4rem;

    margin-bottom: 1.5rem;
}

.brandingBenefitsCard h3 {
    font-family: "Lato", sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* POSITIONING */
.brandingPositioningSection {
    padding: 6vw 0;
}

.brandingPositioningContainer {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

.brandingPositioningContent {
    margin-top: 2vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
}

/* DETAILS */
.brandingDetailsSection {
    padding: 6vw 0;
}

.brandingDetailsContainer {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 3vw;
}

.brandingDetailItem {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 3vw;

    padding-bottom: 3vw;
    border-bottom: 1px solid rgba(15,76,255,.15);
}

.brandingDetailNumber {
    width: 100px;
    height: 100px;

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

    border-radius: 50%;

    background: #0f4cff;
    color: #ffffff;

    font-family: "Bodoni Moda", serif;
    font-size: 2rem;
}

.brandingDetailContent {
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
}

/* CTA */
.brandingCtaSection {
    padding: 6vw 0;
    background-color: #f6f8fb;
}

.brandingCtaContainer {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
}

.brandingCtaContainer a {
    width: fit-content;
    margin: 2vw auto 0;

    padding: 1rem 2rem;
    border-radius: 999px;

    background: linear-gradient(90deg, var(--blue), var(--blue2));
    color: #ffffff;

    font-family: "Lato", sans-serif;
    font-weight: 400;

    transition: .3s ease;
}

.brandingCtaContainer a:hover {
    transform: translateY(-4px);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .brandingCtaSection{
    padding: 12vw 6vw;
 }
    .brandingBenefitsSection {
    padding: 0 6vw;
}
    .brandingWhyGrid div {
        padding: 6vw;
    }
    .brandingWhySection {
    padding: 12vw 6vw;
}
    .brandingHeroSection {
        padding: 12vw 6vw;
    }

    .brandingHeroContent,
    .brandingIntroContainer,
    .brandingWhyGrid,
    .brandingBenefitsCards,
    .brandingPositioningContent,
    .brandingDetailItem {
        grid-template-columns: 1fr;
    }

    .brandingHeroRight,
    .brandingIntroContent,
    .brandingDetailContent,
    .brandingCtaContainer {
        gap: 3vw;
    }

    .brandingIntroImage img {
        height: 500px;
        border-radius: 24px;
    }

    .brandingBenefitsCard {
        padding: 5vw;
        border-radius: 24px;
    }

    .brandingDetailItem {
        gap: 24px;
    }

    .brandingDetailNumber {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
    }

}
.network_section2 {
    width: 100%;
    padding: clamp(20px, 6vw, 140px) 0;
    background: #f1f1f1;
    overflow: hidden;
    position: relative;
}

.network_section2::before {
    content: "";
    position: absolute;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 76, 255, 0.12) 0%, transparent 70%);
    top: -15%;
    left: -10%;
    pointer-events: none;
}

.network_section2 .contain {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.network_section2 .social_media_networks_contan {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
}

.network_section2 .icon_contain {
    background: #ffffff;
    padding: 2vw;
    border-radius: 2vw;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    transition: .4s ease;
    position: relative;
    overflow: hidden;
}

.network_section2 .icon_contain::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(15, 76, 255, 0.04),
        transparent
    );
    opacity: 0;
    transition: .4s ease;
}

.network_section2 .icon_contain:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 70px rgba(15, 76, 255, 0.12);
}

.network_section2 .icon_contain:hover::before {
    opacity: 1;
}

.network_section2 .icon_contain i {
    width: 60px;
    height:60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0f4cff;
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
    transition: .4s ease;
}

.network_section2 .icon_contain:hover i {
    transform: scale(1.08) rotate(5deg);
}

.network_section2 .icon_contain h2 {
    font-family: var(--font-dmserif);
    font-size: clamp(2rem, 2vw, 2.8rem);
    color: var(--gray);
    font-weight: 400;
    margin-bottom: 1rem;

    position: relative;
    z-index: 2;
}

.network_section2 .icon_contain p {
    font-family: "Lato", sans-serif;
    font-size: clamp(1rem, 1vw, 1.1rem);
    color: var(--gray);

    position: relative;
    z-index: 2;
}

.contentMarketingCards2{
        display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vw;
    margin: .5vw 0;
}
/* RESPONSIVE */
@media (max-width: 991px) {

    .network_section2 .social_media_networks_contan {
        grid-template-columns: 1fr;
        gap: 3vw;
    }

    .network_section2 .icon_contain {
        padding: 35px 30px;
        border-radius: 24px;
    }

    .network_section2 .icon_contain i {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    .contentMarketingCards2{
        gap: 3vw;
    grid-template-columns: repeat(1, 1fr);
    }

}

.fichas100 {
    width: 100%;
    padding: clamp(20px, 6vw, 140px);
    overflow: hidden;
    position: relative;
}

.fichas100::before {
    content: "";
    position: absolute;
    width: 45vw;
    height: 45vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 76, 255, 0.08) 0%, transparent 70%);
    top: 0%;
    right: 0%;
    pointer-events: none;
}

.fichas100 .grid_contain {
    max-width: 1450px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4vw;
    align-items: flex-start;

    position: relative;
    z-index: 2;
}

.fichas100 .title_contain h2 {
    font-family: var(--font-dmserif);
    font-size: clamp(2.5rem, 2vw, 5rem);
        color: var(--blue);
    font-weight: 400;
    margin: 0;
}

.fichas100 .cards_contain {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2vw;
}

.fichas100 .card_contain {
    background: #ffffff;
    border-radius: 2vw;
    padding: 2vw;

    display: grid;
    grid-template-columns: 1fr;
    gap: 1vw;
    align-items: center;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);

    transition: .4s ease;
    position: relative;
    overflow: hidden;
}

.fichas100 .card_contain::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(15, 76, 255, 0.04),
        transparent
    );
    opacity: 0;
    transition: .4s ease;
}

.fichas100 .card_contain:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(15, 76, 255, 0.12);
}

.fichas100 .card_contain:hover::before {
    opacity: 1;
}

.fichas100 .statistics_contain,
.fichas100 .info_contain {
    position: relative;
    z-index: 2;
}

.fichas100 .statistics_contain p {
    font-family: var(--font-dmserif);
   font-size: clamp(2.5rem, 2vw, 5rem);
    line-height: .9;
    color: #0f4cff;
    margin: 0;
}

.fichas100 .statistics_contain hr {
    width: 100%;
    height: 2px;
    border: none;
    background: rgba(15, 76, 255, 0.15);
    margin: 1.5rem 0;
}

.fichas100 .statistics_contain h2 {
    font-family: "Lato", sans-serif;
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    text-transform: uppercase;
    color: var(--gray);
    font-weight: 700;
    margin: 0;
}

.fichas100 .info_contain p {
    font-family: "Lato", sans-serif;
    font-size: clamp(1rem, 1vw, 1.1rem);
    line-height: 1.9;
    color: #475569;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 991px) {

    .fichas100 .grid_contain {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .fichas100 .title_contain {
        position: relative;
        top: auto;
    }

    .fichas100 .card_contain {
        grid-template-columns: 1fr;
        gap: 30px;

        padding: 35px 30px;
        border-radius: 24px;
    }

    .fichas100 .cards_contain {
        gap: 24px;
    }

}