.elementor-5874 .elementor-element.elementor-element-af4aee2{--display:flex;}.elementor-5874 .elementor-element.elementor-element-af4aee2:not(.elementor-motion-effects-element-type-background), .elementor-5874 .elementor-element.elementor-element-af4aee2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#060606;}.elementor-5874 .elementor-element.elementor-element-870b85d{--display:flex;}.elementor-5874 .elementor-element.elementor-element-870b85d:not(.elementor-motion-effects-element-type-background), .elementor-5874 .elementor-element.elementor-element-870b85d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-5874 .elementor-element.elementor-element-24fcdaa{--display:flex;}.elementor-5874 .elementor-element.elementor-element-24fcdaa:not(.elementor-motion-effects-element-type-background), .elementor-5874 .elementor-element.elementor-element-24fcdaa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-5874 .elementor-element.elementor-element-dc46878{--display:flex;}.elementor-5874 .elementor-element.elementor-element-dc46878:not(.elementor-motion-effects-element-type-background), .elementor-5874 .elementor-element.elementor-element-dc46878 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#060606;}.elementor-5874 .elementor-element.elementor-element-6e820d7{--display:flex;}.elementor-5874 .elementor-element.elementor-element-6e820d7:not(.elementor-motion-effects-element-type-background), .elementor-5874 .elementor-element.elementor-element-6e820d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-d54c5ea *//* =========================================================
   MTE — MARKETING DIGITAL
   CSS COMPLETO
   MejoraTuEquipo
   ========================================================= */


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.mte-marketing {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 80px 25px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.mte-marketing-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px;
}


/* ETIQUETA MARKETING DIGITAL */

.mte-marketing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 18px;
    margin-bottom: 22px;

    border-radius: 50px;

    background: rgba(108, 99, 255, 0.10);

    border: 1px solid rgba(108, 99, 255, 0.35);

    color: #9d97ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


/* TITULO PRINCIPAL */

.mte-marketing-header h2 {

    margin: 0;

    color: #ffffff !important;

    font-size: clamp(38px, 5vw, 64px);

    line-height: 1.05;

    font-weight: 850;

    letter-spacing: -2px;

}


/* SEGUNDA LINEA DEL TITULO */

.mte-marketing-header h2 span {

    display: block;

    margin-top: 8px;

    background:
        linear-gradient(
            90deg,
            #6c63ff,
            #00c6ff
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}


/* DESCRIPCION */

.mte-marketing-header p {

    max-width: 720px;

    margin: 25px auto 0;

    color: #aeb5c6;

    font-size: 18px;

    line-height: 1.7;

}


/* =========================================================
   GRID DE SERVICIOS
   ========================================================= */

.mte-marketing-grid {

    display: grid;

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

    gap: 20px;

}


/* =========================================================
   TARJETAS
   ========================================================= */

.mte-marketing-card {

    position: relative;

    min-height: 270px;

    padding: 30px 26px;

    box-sizing: border-box;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.085),
            rgba(255,255,255,0.025)
        );

    border: 1px solid
        rgba(255,255,255,0.10);

    overflow: hidden;

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

}


/* BRILLO DE LA TARJETA */

.mte-marketing-card::before {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -80px;
    right: -70px;

    border-radius: 50%;

    background: #6c63ff;

    opacity: .12;

    filter: blur(45px);

    pointer-events: none;

}


/* LINEA SUPERIOR */

.mte-marketing-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: 25px;

    right: 25px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(108,99,255,.7),
            transparent
        );

    opacity: 0;

    transition: opacity .35s ease;

}


/* EFECTO HOVER */

.mte-marketing-card:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(108,99,255,.50);

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.28);

}


.mte-marketing-card:hover::after {

    opacity: 1;

}


/* =========================================================
   ICONOS
   ========================================================= */

.mte-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #6c63ff,
            #00bfff
        );

    font-size: 25px;

    box-shadow:
        0 12px 28px
        rgba(108,99,255,.22);

    transition:
        transform .35s ease;

}


/* ANIMACION ICONO */

.mte-marketing-card:hover .mte-icon {

    transform:
        rotate(-4deg)
        scale(1.08);

}


/* =========================================================
   TITULO DE TARJETAS
   ========================================================= */

.mte-marketing-card h3 {

    margin: 0 0 13px;

    color: #ffffff !important;

    font-size: 21px;

    line-height: 1.2;

    font-weight: 800;

}


/* =========================================================
   TEXTO DE TARJETAS
   ========================================================= */

.mte-marketing-card p {

    margin: 0;

    color: #aeb5c6 !important;

    font-size: 14.5px;

    line-height: 1.7;

}


/* =========================================================
   FLUJO DE MARKETING
   ========================================================= */

.mte-flow {

    margin-top: 55px;

    padding: 32px 25px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(108,99,255,.13),
            rgba(0,200,255,.055)
        );

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

}


/* TITULO DEL FLUJO */

.mte-flow-title {

    text-align: center;

    margin-bottom: 25px;

    color: #ffffff !important;

    font-size: 17px;

    font-weight: 800;

}


/* ELEMENTOS DEL FLUJO */

.mte-flow-items {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

}


/* CADA ELEMENTO */

.mte-flow-item {

    padding: 11px 17px;

    border-radius: 50px;

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

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

    color: #ffffff !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .5px;

}


/* FLECHAS */

.mte-arrow {

    color: #7b73ff !important;

    font-size: 20px;

    font-weight: bold;

}


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

.mte-marketing-cta {

    position: relative;

    margin-top: 55px;

    padding: 60px 30px;

    text-align: center;

    border-radius: 30px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(108,99,255,.25),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(0,200,255,.16),
            transparent 35%
        ),

        rgba(255,255,255,.045);

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

}


/* BRILLO DEL CTA */

.mte-marketing-cta::before {

    content: "";

    position: absolute;

    top: -100px;

    left: 50%;

    width: 300px;

    height: 200px;

    transform:
        translateX(-50%);

    background: #6c63ff;

    opacity: .10;

    filter: blur(70px);

    pointer-events: none;

}


/* TEXTO PEQUEÑO */

.mte-cta-label {

    position: relative;

    margin-bottom: 15px;

    color: #8e88ff !important;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


/* TITULO CTA */

.mte-marketing-cta h3 {

    position: relative;

    margin: 0 0 18px;

    color: #ffffff !important;

    font-size:
        clamp(28px, 4vw, 42px);

    line-height: 1.15;

    font-weight: 850;

}


/* PARTE DEGRADADA DEL CTA */

.mte-marketing-cta h3 span {

    background:
        linear-gradient(
            90deg,
            #6c63ff,
            #00c6ff
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}


/* TEXTO CTA */

.mte-marketing-cta p {

    position: relative;

    max-width: 680px;

    margin: 0 auto 30px;

    color: #aeb5c6 !important;

    font-size: 16px;

    line-height: 1.7;

}


/* =========================================================
   BOTON
   ========================================================= */

.mte-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 16px 28px;

    border-radius: 13px;

    background:
        linear-gradient(
            90deg,
            #6c63ff,
            #00bfff
        );

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 13px;

    font-weight: 850;

    letter-spacing: .4px;

    box-shadow:
        0 14px 35px
        rgba(108,99,255,.25);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


/* FLECHA DEL BOTON */

.mte-btn span {

    font-size: 19px;

    line-height: 1;

}


/* HOVER BOTON */

.mte-btn:hover {

    transform:
        translateY(-4px);

    color: #ffffff !important;

    box-shadow:
        0 20px 45px
        rgba(108,99,255,.35);

}


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

@media (max-width: 1050px) {

    .mte-marketing-grid {

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

    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .mte-marketing {

        padding:
            55px 17px;

    }


    .mte-marketing-header {

        margin-bottom: 40px;

    }


    .mte-marketing-header h2 {

        font-size: 39px;

        letter-spacing: -1.5px;

    }


    .mte-marketing-header p {

        font-size: 16px;

        line-height: 1.6;

    }


    .mte-marketing-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .mte-marketing-card {

        min-height: auto;

        padding: 27px 23px;

    }


    .mte-marketing-card h3 {

        font-size: 20px;

    }


    .mte-marketing-card p {

        font-size: 14px;

    }


    /* FLUJO EN MOVIL */

    .mte-flow {

        padding:
            28px 15px;

    }


    .mte-flow-items {

        flex-direction: column;

        gap: 9px;

    }


    .mte-arrow {

        transform:
            rotate(90deg);

        font-size: 17px;

    }


    /* CTA MOVIL */

    .mte-marketing-cta {

        padding:
            45px 22px;

        border-radius: 25px;

    }


    .mte-marketing-cta h3 {

        font-size: 29px;

    }


    .mte-marketing-cta p {

        font-size: 15px;

    }


    /* BOTON MOVIL */

    .mte-btn {

        width: 100%;

        box-sizing: border-box;

    }

}


/* =========================================================
   COMPATIBILIDAD CON ELEMENTOR
   ========================================================= */

.elementor-widget-html .mte-marketing {

    width: 100%;

}


.elementor-widget-html .mte-marketing * {

    box-sizing: border-box;

}


/* =========================================================
   ASEGURAR COLORES DE MTE
   ========================================================= */

.mte-marketing h2,
.mte-marketing h3 {

    color: #ffffff !important;

}


.mte-marketing p {

    color: #aeb5c6 !important;

}


/* MANTENER DEGRADADOS */

.mte-marketing-header h2 span,
.mte-marketing-cta h3 span {

    -webkit-text-fill-color: transparent !important;

}/* End custom CSS */