/*
|--------------------------------------------------------------------------
| SYSTEMLEADSPRO — LANDING HINCHAZÓN
|--------------------------------------------------------------------------
*/

#slp-landing-hinchazon {

    margin: 0;
    padding: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #172b36;

    background: #ffffff;

}


#slp-landing-hinchazon * {

    box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| CONTENEDOR
|--------------------------------------------------------------------------
*/

.slp-hinchazon-container,
.slp-hinchazon-section-container {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding-left: 25px;

    padding-right: 25px;

}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.slp-hinchazon-hero {

    position: relative;

    padding: 45px 25px 70px;

    background:
        linear-gradient(
            135deg,
            #f7fbfa 0%,
            #edf7f5 100%
        );

    overflow: hidden;

}


.slp-hinchazon-container {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(400px, 0.95fr);

    align-items: center;

    gap: 70px;

}


/*
|--------------------------------------------------------------------------
| HERO — CONTENIDO
|--------------------------------------------------------------------------
*/

.slp-hinchazon-content {

    max-width: 650px;

}


.slp-hinchazon-label {

    display: inline-block;

    margin-bottom: 22px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2.5px;

    color: #5c9188;

}


.slp-hinchazon-content h1 {

    margin: 0;

    font-size: 58px;

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 700;

    color: #18343b;

}


.slp-hinchazon-content h1 span {

    display: block;

    color: #4d8b81;

}


.slp-hinchazon-intro {

    margin: 30px 0 0;

    max-width: 590px;

    font-size: 21px;

    line-height: 1.6;

    color: #526b72;

}


.slp-hinchazon-highlight {

    margin: 22px 0 0;

    max-width: 590px;

    font-size: 20px;

    line-height: 1.55;

    font-weight: 600;

    color: #244a4d;

}


/*
|--------------------------------------------------------------------------
| BOTÓN
|--------------------------------------------------------------------------
*/

.slp-hinchazon-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 35px;

    min-height: 58px;

    padding: 16px 34px;

    border-radius: 8px;

    background: #4d8b81;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: .3px;

    transition:
        transform .2s ease,
        background .2s ease;

}


.slp-hinchazon-button:hover {

    background: #3f756c;

    transform: translateY(-2px);

}


/*
|--------------------------------------------------------------------------
| HERO — IMAGEN
|--------------------------------------------------------------------------
*/

.slp-hinchazon-hero-image {

    position: relative;

    width: 100%;

}


.slp-hinchazon-hero-image img {

    display: block;

    width: 100%;

    height: 560px;

    object-fit: cover;

    object-position: center;

    border-radius: 20px;

    box-shadow:
        0 25px 65px rgba(
            25,
            65,
            65,
            0.15
        );

}


/*
|--------------------------------------------------------------------------
| SECCIONES
|--------------------------------------------------------------------------
*/

.slp-hinchazon-section {

    padding: 100px 25px;

}


.slp-hinchazon-section-heading {

    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;

}


.slp-hinchazon-section-label {

    display: block;

    margin-bottom: 18px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.5px;

    color: #5c9188;

}


.slp-hinchazon-section-heading h2 {

    margin: 0;

    font-size: 44px;

    line-height: 1.12;

    letter-spacing: -1.3px;

    color: #18343b;

}


.slp-hinchazon-section-heading p {

    margin: 22px auto 0;

    max-width: 720px;

    font-size: 18px;

    line-height: 1.65;

    color: #61757a;

}


/*
|--------------------------------------------------------------------------
| IDENTIFICACIÓN
|--------------------------------------------------------------------------
*/

.slp-hinchazon-identificacion {

    background: #f7faf9;

    padding-top: 85px;
    padding-bottom: 95px;

}


.slp-hinchazon-identificacion
.slp-hinchazon-section-heading {

    max-width: 900px;

    margin-bottom: 45px;

}


.slp-hinchazon-identificacion
.slp-hinchazon-section-heading h2 {

    font-size: 48px;

    line-height: 1.12;

}


.slp-hinchazon-identificacion
.slp-hinchazon-section-heading p {

    font-size: 18px;

    color: #60767a;

}


/*
|--------------------------------------------------------------------------
| TARJETAS
|--------------------------------------------------------------------------
*/

.slp-hinchazon-cards {

    display: grid;

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

    gap: 20px;

}


/*
|--------------------------------------------------------------------------
| TARJETA INDIVIDUAL
|--------------------------------------------------------------------------
*/

.slp-hinchazon-card {

    position: relative;

    min-height: 285px;

    padding: 30px 28px;

    background: #ffffff;

    border: 1px solid #e2ece9;

    border-radius: 18px;

    box-shadow:
        0 8px 25px
        rgba(
            24,
            52,
            59,
            .05
        );

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


/*
|--------------------------------------------------------------------------
| EFECTO HOVER
|--------------------------------------------------------------------------
*/

.slp-hinchazon-card:hover {

    transform: translateY(-6px);

    border-color: #b8d8d1;

    box-shadow:
        0 18px 40px
        rgba(
            24,
            52,
            59,
            .10
        );

}


/*
|--------------------------------------------------------------------------
| NÚMERO
|--------------------------------------------------------------------------
*/

.slp-hinchazon-card-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    margin-bottom: 25px;

    border-radius: 50%;

    background: #e8f3f0;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0;

    color: #4d8b81;

}


/*
|--------------------------------------------------------------------------
| TÍTULO
|--------------------------------------------------------------------------
*/

.slp-hinchazon-card h3 {

    margin: 0;

    font-size: 22px;

    line-height: 1.25;

    font-weight: 700;

    color: #18343b;

}


/*
|--------------------------------------------------------------------------
| TEXTO
|--------------------------------------------------------------------------
*/

.slp-hinchazon-card p {

    margin: 16px 0 0;

    font-size: 15px;

    line-height: 1.65;

    color: #667a7f;

}


/*
|--------------------------------------------------------------------------
| EXPLICACIÓN
|--------------------------------------------------------------------------
*/

.slp-hinchazon-explicacion {

    background: #f5f9f8;

}


.slp-hinchazon-explicacion
.slp-hinchazon-section-heading {

    margin-bottom: 0;

}


.slp-hinchazon-explicacion
.slp-hinchazon-section-heading p {

    max-width: 780px;

}



/*
|--------------------------------------------------------------------------
| SISTEMA
|--------------------------------------------------------------------------
*/

.slp-hinchazon-sistema {

    background:
        linear-gradient(
            135deg,
            #183b42 0%,
            #214f54 100%
        );

    padding-top: 85px;
    padding-bottom: 95px;

}


.slp-hinchazon-section-heading.light {

    margin-bottom: 50px;

}


.slp-hinchazon-section-heading.light h2 {

    color: #ffffff;

    font-size: 48px;

    line-height: 1.12;

}


.slp-hinchazon-section-heading.light
.slp-hinchazon-section-label {

    color: #b5ded6;

}


.slp-hinchazon-section-heading.light p {

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

    max-width: 700px;

}


/*
|--------------------------------------------------------------------------
| TARJETAS DEL SISTEMA
|--------------------------------------------------------------------------
*/

.slp-hinchazon-sistema-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


.slp-hinchazon-sistema-item {

    position: relative;

    min-height: 270px;

    padding: 32px 30px;

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

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;

}


.slp-hinchazon-sistema-item:hover {

    transform: translateY(-6px);

    background:
        rgba(
            255,
            255,
            255,
            .11
        );

    border-color:
        rgba(
            181,
            222,
            214,
            .45
        );

}


/*
|--------------------------------------------------------------------------
| NÚMERO
|--------------------------------------------------------------------------
*/

.slp-hinchazon-sistema-item > span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    margin-bottom: 28px;

    border-radius: 50%;

    background: #b5ded6;

    color: #183b42;

    font-size: 13px;

    font-weight: 800;

}


/*
|--------------------------------------------------------------------------
| TÍTULO
|--------------------------------------------------------------------------
*/

.slp-hinchazon-sistema-item h3 {

    margin: 0;

    font-size: 24px;

    line-height: 1.25;

    color: #ffffff;

}


/*
|--------------------------------------------------------------------------
| TEXTO
|--------------------------------------------------------------------------
*/

.slp-hinchazon-sistema-item p {

    margin: 15px 0 0;

    max-width: 330px;

    font-size: 16px;

    line-height: 1.6;

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

}

  




/*
|--------------------------------------------------------------------------
| FORMULARIO
|--------------------------------------------------------------------------
*/

.slp-hinchazon-formulario {

    background: #ffffff;

    padding-top: 90px;

    padding-bottom: 100px;

}


.slp-hinchazon-form-box {

    width: 100%;

    max-width: 760px;

    margin: 0 auto;

    padding: 42px 50px 48px;

    background: #f7faf9;

    border: 1px solid #dfece9;

    border-radius: 20px;

    box-shadow:
        0 20px 55px
        rgba(
            30,
            70,
            70,
            .09
        );

}


/*
|--------------------------------------------------------------------------
| GRUPOS DEL FORMULARIO
|--------------------------------------------------------------------------
*/

.slp-formulario-hinchazon .slp-form-group {

    margin-bottom: 24px;

}


.slp-formulario-hinchazon
.slp-form-group label {

    display: block;

    margin-bottom: 9px;

    font-size: 15px;

    font-weight: 700;

    color: #18343b;

}


/*
|--------------------------------------------------------------------------
| CAMPOS
|--------------------------------------------------------------------------
*/

.slp-formulario-hinchazon
.slp-form-group input {

    display: block;

    width: 100%;

    height: 56px;

    padding: 0 17px;

    border: 1px solid #cbdedb;

    border-radius: 9px;

    background: #ffffff;

    color: #18343b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.slp-formulario-hinchazon
.slp-form-group input:focus {

    border-color: #4d8b81;

    box-shadow:
        0 0 0 3px
        rgba(
            77,
            139,
            129,
            .13
        );

}


/*
|--------------------------------------------------------------------------
| BOTÓN
|--------------------------------------------------------------------------
*/

.slp-formulario-hinchazon
.slp-btn-hinchazon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 58px;

    margin-top: 30px;

    padding: 16px 25px;

    border: 0;

    border-radius: 9px;

    background: #4d8b81;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: .4px;

    cursor: pointer;

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

}


.slp-formulario-hinchazon
.slp-btn-hinchazon:hover {

    background: #3f756c;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(
            63,
            117,
            108,
            .20
        );

}


.slp-formulario-hinchazon
.slp-btn-hinchazon:active {

    transform: translateY(0);

}


/*
|--------------------------------------------------------------------------
| TEXTO DE PRIVACIDAD / AVISO
|--------------------------------------------------------------------------
*/

.slp-formulario-hinchazon
.slp-form-notice {

    margin-top: 18px;

    text-align: center;

    font-size: 13px;

    line-height: 1.5;

    color: #718287;

}


/*
|--------------------------------------------------------------------------
| CTA FINAL
|--------------------------------------------------------------------------
*/

.slp-hinchazon-final {

    padding: 100px 25px;

    text-align: center;

    background: #f5f9f8;

}


.slp-hinchazon-final h2 {

    max-width: 850px;

    margin: 0 auto;

    font-size: 43px;

    line-height: 1.15;

    letter-spacing: -1.2px;

    color: #18343b;

}


.slp-hinchazon-final p {

    margin: 20px auto 0;

    font-size: 18px;

    line-height: 1.6;

    color: #61757a;

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .slp-hinchazon-container {

        grid-template-columns: 1fr;

        max-width: 850px;

        gap: 50px;

    }


    .slp-hinchazon-content {

        max-width: 800px;

        text-align: center;

        margin: 0 auto;

    }


    .slp-hinchazon-intro,
    .slp-hinchazon-highlight {

        margin-left: auto;

        margin-right: auto;

    }


    .slp-hinchazon-cards {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .slp-hinchazon-hero-image img {

        height: 480px;

    }

}


/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 650px) {

    .slp-hinchazon-hero {

        padding: 65px 20px 75px;

    }


    .slp-hinchazon-section {

        padding: 75px 20px;

    }


    .slp-hinchazon-container,
    .slp-hinchazon-section-container {

        padding-left: 20px;

        padding-right: 20px;

    }


    .slp-hinchazon-content h1 {

        font-size: 39px;

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .slp-hinchazon-intro {

        margin-top: 23px;

        font-size: 17px;

    }


    .slp-hinchazon-highlight {

        font-size: 17px;

    }


    .slp-hinchazon-hero-image img {

        height: 390px;

        border-radius: 16px;

    }


    .slp-hinchazon-section-heading {

        margin-bottom: 38px;

    }


    .slp-hinchazon-section-heading h2 {

        font-size: 34px;

    }


    .slp-hinchazon-section-heading p {

        font-size: 16px;

    }


    .slp-hinchazon-cards {

        grid-template-columns: 1fr;

    }


    .slp-hinchazon-sistema-grid {

        grid-template-columns: 1fr;

    }


    .slp-hinchazon-form-box {

        padding: 25px 18px;

    }


    .slp-hinchazon-final {

        padding: 75px 20px;

    }


    .slp-hinchazon-final h2 {

        font-size: 34px;

    }


    .slp-hinchazon-final p {

        font-size: 16px;

    }


    .slp-hinchazon-button {

        width: 100%;

    }



.slp-hinchazon-form-box {

    padding: 30px 20px 35px;

}

.slp-formulario-hinchazon
.slp-form-group input {

    height: 54px;

    font-size: 16px;

}

.slp-formulario-hinchazon
.slp-btn-hinchazon {

    font-size: 15px;

}
	
	}