/* ========= SECCIÓN MAIN (INTRO) ========= */

.main-section {
    background-color: #e8e8e8;
    margin: 80px 0 60px 0;
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2% 10%;
}

.text-right-main {
    color: #000a3c;
    font-size: 1em;
}

.custom-bullets {
    list-style: none;
    padding-left: 0;
    font-weight: bold;
}

.custom-bullets li {
    position: relative;
    padding-left: 20px;
    margin: 5px 0;
}

.custom-bullets li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: #6482e6;
    font-weight: bold;
}

/* ========= SECCIÓN 1: SOLUCIONES DE DIAGNÓSTICO ========= */

.service-section {
    background: linear-gradient(to bottom, #e8e8e8 50%, transparent),
                linear-gradient(to right, #000a3c, #0a1e6e 50%, #000a3c 100%);
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0;
}

.service-container {
    display: flex;
    margin: 0;
    width: 100%;
}

.service-text {
    background-color: #6482e6;
    color: #e8e8e8;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    clip-path: polygon(0 2%, 44% 2%, 53% 13%, 100% 13%, 100% 85%, 41% 85%, 30% 100%, 0 100%);
}

.service-text h2 {
    color: #0a1e6e;
    font-weight: bold;
    padding-left: 33%;
}

.service-text p {
    color: #e8e8e8;
    margin-top: 1px;
    line-height: 1.5;
    padding-left: 33%;
}

.service-image {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    clip-path: polygon(0% 13%, 15% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 85%);
}

p.underline {
    position: relative;
    padding-bottom: 5px;
}

p.underline::after {
    content: '';
    position: absolute;
    left: 33%;
    bottom: 0;
    width: 26%;
    height: 1px;
    background: linear-gradient(to right, #0a1e6e, #e8e8e8);
}

/* ========= ICONOS (OCULTOS / OPCIONALES) ========= */

.icons-section {
    background: linear-gradient(to right, #000a3c, #0a1e6e 50%, #000a3c 100%);
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0;
}

.icons-container {
    display: flex;
    margin: 4% 20% 2% 20%;
}

.icons-service {
    flex: auto;
    padding: 0;
    text-align: center;
    color: #e8e8e8;
    margin-bottom: 20px;
}

.icons-service img {
    width: 30%;
    height: auto;
    margin-bottom: 1px;
}

/* ========= SECCIÓN 2: SOLUCIONES ESTRATÉGICAS ========= */

.service-section-2 {
    background: linear-gradient(to right, #000a3c, #0a1e6e 50%, #000a3c 100%);
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5% 0;
}

.container-section-2-left {
    color: #e8e8e8;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    height: 100%;
    padding-right: 5%;
}

.container-section-2-right {
    color: #e8e8e8;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    height: 100%;
}

.container-section-2-right .text {
    line-height: 1.5;
}

p.underline-2 {
    position: relative;
    padding-bottom: 5px;
}

p.underline-2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 1px;
    background: linear-gradient(to right, #e8e8e8, #6482e6);
}

/* ========= SECCIÓN 3: SOLUCIONES DE GESTIÓN DE TI ========= */

.service-section-3 {
    background:
        linear-gradient(to right, #000a3c, #0a1e6e 50%, #000a3c 100%) top / 100% 50% no-repeat,
        white bottom / 100% 50% no-repeat;
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
}

.service-text-3 {
    background-color: #e8e8e8;
    color: #0a1e6e;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    clip-path: polygon(0% 100%, 77% 100%, 81% 93%, 97% 93%, 100% 93%, 100% 25%, 75% 25%, 70% 17%, 0% 17%);
}

.service-text-3 h2 {
    font-weight: bold;
    padding-left: 15%;
}

.service-text-3 p {
    padding-bottom: 1%;
    line-height: 1.5;
    padding-left: 15%;
}

.service-image-3 {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-image-3 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    clip-path: polygon(0% 0%, 100% 0%, 90% 0%, 150% 100%, 0% 100%);
}

p.underline-3 {
    position: relative;
    padding-bottom: 5px;
}

p.underline-3::after {
    content: '';
    position: absolute;
    left: 7.5vw;
    bottom: 0;
    width: 14vw;
    height: 1px;
    background: linear-gradient(to right, #0a1e6e, #e8e8e8);
}

/* ========= SLOGAN ========= */

.slogan-text {
    background-color: white;
    color: #0a1e6e;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.slogan-text p {
    color: #0a1e6e;
    margin-top: 10px;
    line-height: 1.5;
    text-align: center;
    font-weight: bold;
    font-size: x-large;
    padding: 5%;
}

/* ========= ANGLED LINES (SI LOS USAS) ========= */

.angled-line-top {
    position: absolute;
    top: 32%;
    left: 0;
    width: 100%;
    height: 100%;
}

.angled-line-inside {
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
    height: 100%;
}

/* =========================================================================
   MEDIA QUERIES
   ========================================================================= */

/* >= 1440px */
@media (min-width: 1440px) {

    .service-section-2 p {
        margin-right: 40px;
    }

    .service-section-3 {
        align-items: center;
    }

    .service-text-3 {
        clip-path: polygon(0% 100%, 77% 100%, 81% 93%, 97% 93%, 100% 93%, 100% 15%, 75% 15%, 70% 8%, 0% 8%);
    }

    .service-text-3 p {
        padding-right: 5%;
        font-size: 0.9em;
        max-width: 85%;
    }

    .service-text-3 h2 {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .service-image-3 img {
        clip-path: polygon(0% 0%, 100% 0%, 90% 0%, 150% 100%, 0% 100%);
        max-height: 500px;
        object-fit: cover;
    }
}

/* < 1440px */
@media (max-width: 1439px) {

    .service-text-3 {
        clip-path: polygon(0% 100%, 77% 100%, 81% 93%, 97% 93%, 100% 93%, 100% 25%, 75% 25%, 70% 17%, 0% 17%);
    }
}

/* ========= 1024px (992–1200) – AJUSTE SECCIÓN 1 ========= */

@media (min-width: 992px) and (max-width: 1200px) {

    .service-container {
        align-items: stretch;
    }

    .service-text {
        clip-path: none;
        padding: 4% 6% 5% 6%;
        flex: 1.2;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .service-text h2 {
        padding-left: 0;
        max-width: 90%;
        font-size: 1.9rem;
        line-height: 1.1;
        margin-bottom: 6px;
    }

    .service-text p {
        padding-left: 0;
        max-width: 95%;
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .service-image {
        flex: 0.8;
        display: flex;
        align-items: stretch;
    }

    .service-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        clip-path: polygon(0% 13%, 15% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 85%);
    }

    p.underline::after {
        left: 0;
        width: 40%;
    }
}

/* < 1200px – ajustes leves globales */

@media (max-width: 1200px) {

    .service-text p {
        padding-left: 5%;
        margin: 10px;
    }

    .service-text h2 {
        padding-left: 5%;
    }

    .service-image img {
        width: 122%;
    }
}

/* ========= < 768px (MÓVIL) – UNIFICAR TÍTULOS Y PÁRRAFOS ========= */
@media (max-width: 768px) {

    /* Intro */
    .main-section {
        flex-direction: column;
        padding: 40px 8% 30px;
    }

    .text-right-main p,
    .custom-bullets {
        font-size: 0.96rem;
        line-height: 1.6;
        text-align: justify;
    }

    .icons-container {
        flex-direction: column;
    }

    /* ===== Sección 1: SOLUCIONES DE DIAGNÓSTICO ===== */

    .service-section {
        background: transparent;
    }

    .service-container {
        flex-direction: column;
    }

    .service-text {
        clip-path: none;
        padding: 24px 0 28px;
    }

    .service-text h2 {
        padding: 0 10%;
        margin: 0;
        font-size: 1.7rem;
        line-height: 1.15;
    }

    .service-text p {
        padding: 0 10%;
        margin: 8px 0;
        text-align: justify;
        font-size: 0.96rem;
        line-height: 1.6;
    }

    p.underline {
        margin: 0 0% 10px;
    }

    p.underline::after {
        left: 10%;
        width: 40%;
    }

    .service-image {
        background: linear-gradient(to bottom, #6482e6, #000a3c);
        max-width: 900px;
        margin: 0 auto;
    }

    .service-image img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        clip-path: polygon(
            0% 15%,
            30% 15%,
            40% 5%,
            100% 5%,
            100% 100%,
            20% 100%,
            0% 80%
        );
    }

    /* ===== Sección 2: SOLUCIONES ESTRATÉGICAS ===== */

    .service-section-2 {
        flex-direction: column;
        padding: 32px 0 36px;
    }

    .container-section-2-left,
    .container-section-2-right {
        flex: 1 1 100%;
        padding: 0;
        justify-content: center;
    }

    .container-section-2-left > div {
        width: 100%;
        padding: 0 10%;
    }

    .container-section-2-left h2,
    .container-section-2-left p.underline-2 {
        padding: 0;
        margin: 0 0% 16px;
    }

    p.underline-2 {
        margin-bottom: 10px;
    }

    p.underline-2::after {
        left: 10%;
        width: 40%;
    }

    .container-section-2-right .text {
        padding: 8px 10% 0 10%;
        text-align: justify;
        font-size: 0.96rem;
        line-height: 1.6;
    }

    /* ===== Sección 3: SOLUCIONES DE GESTIÓN DE TI ===== */

    .service-text-3 {
        clip-path: none;
        padding: 24px 0 28px;
    }

    .service-text-3 h2 {
        padding: 0 10%;
        margin: 0;
        font-size: 1.7rem;
        line-height: 1.15;
    }

    .service-text-3 p {
        padding: 0 10%;
        margin: 8px 0;
        text-align: justify;
        font-size: 0.96rem;
        line-height: 1.6;
    }

    p.underline-3 {
        margin: 0 0% 10px;
    }

    p.underline-3::after {
        left: 10%;
        width: 40%;
    }

    .service-image-3 {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to bottom, #000a3c, #e8e8e8);
    }

    .service-image-3 img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        clip-path: polygon(
            0% 0%,
            85% 0%,
            100% 15%,
            100% 90%,
            85% 90%,
            70% 80%,
            0% 80%
        );
    }
}