/* 
    Created on : 19 mar. 2026, 09:07:48
    Author     : Eric Palacios Portilla
*/
/** {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}*/
html, body {
    /* Evita el overshoot y lag de resorte nativo en Chrome */
    overscroll-behavior: none;
    /* Asegura que el hilo compositor gestione el scroll sin esperar al layout */
    touch-action: manipulation;
}

/* Si utilizas Lenis, es crucial sincronizar el contenedor */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

/* =========================
   START WEB MARKETING
========================= */
.header_marketing {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 50%, rgba(0, 0, 0, 0.3), transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.3), transparent 60%),
        url("../images/header_marketing.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
}
.fondo_web_01{
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    background-image: url(../images/web-01.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 90px;
    padding-bottom: 80px;
    min-height: 600px;
    overflow: hidden;
}

/* =========================
   END WEB MARKETING
========================= */

/* =========================
    WEB MARKETING ACCORDEON
========================= */

/* Estado Activo: El contenedor se adapta de forma natural */
.service-item-web:has(.accordion-collapse.show) {
    background:
        radial-gradient(62.56% 62.56% at 28.14% 10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(0deg, #000000, #000000);
    color: #fff;
    /* Eliminamos min-height fijo de aquí */
}

/* Estado Base de la tarjeta */
.service-item-web {
    position: relative;
    padding: 30px 40px; /* Reducimos sutilmente el padding vertical superior para un look más compacto cerrado */
    border-radius: 20px;
    overflow: hidden;

    /* ALTURA DINÁMICA: No declaramos ni height ni min-height. El alto lo define el h4 + el padding */

    /* Suavizado de la transición cuando el contenedor cambia de tamaño interno */
    transition:
        background .45s ease,
        color .45s ease,
        padding .45s ease;
    margin-bottom: 20px;
    background:
        radial-gradient(62.56% 62.56% at 71.86% 89.58%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(0deg, #AFAFAF, #FFFFFF);
    box-shadow: inset 0px -4px 6px rgba(0, 0, 0, 0.06),
        inset 0px -1px 2px rgba(0, 0, 0, 0.1);
}

/* El párrafo oculto */
.service-item-web p {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0; /* Evita saltos bruscos de margen durante la animación */
    transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease;
}

/* El párrafo visible (Cuando Bootstrap añade la clase .show) */
.service-item-web .accordion-collapse.show p {
    opacity: 1;
    max-height: 300px; /* Un valor estimado superior al texto más largo para permitir la animación física */
    margin-top: 15px;  /* El espacio dinámico que empujará la tarjeta hacia abajo de forma suave */
}

.num {
    position: absolute;
    top: 35px;
    right: 35px;
    opacity: .65;
}

/* ====================================
   LIST-TAGS DENTRO DEL ACORDEÓN 
==================================== */

/* Contenedor de las etiquetas */
.list-tags {
    display: flex;
    flex-wrap: wrap; /* Si no caben en una línea, bajan de forma ordenada */
    gap: 10px;       /* Separación uniforme entre píldoras */
    margin-top: 15px; /* Separación con respecto al párrafo superior */

    /* Control de animación idéntico al párrafo */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s ease, opacity .35s ease;
}

/* Estado de las etiquetas cuando la tarjeta está ABIERTA */
.service-item-web .accordion-collapse.show .list-tags {
    opacity: 1;
    max-height: 200px; /* Alto máximo estimado para que se despliegue fluidamente */
}

/* Diseño de cada píldora/tag individual */
.tags-item {
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;

    /* Estilo por defecto (Tarjeta abierta con fondo #111) */
    background: rgba(255, 255, 255, 0.08); /* Fondo semi-transparente muy sutil */
    color: rgba(255, 255, 255, 0.8);       /* Texto blanco suavizado */
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Efecto Hover en las píldoras */
.tags-item:hover {
    background: #fff;
    color: #111; /* Invierte los colores al pasar el cursor */
    border-color: #fff;
}

/* =========================
   END WEB MARKETING ACCORDEON
========================= */


/* ====================================
   SECCIÓN CON FONDO DE IA (DARK)
==================================== */

.seccion-contacto .fondo_innovacion {
    position: relative;
    padding: 60px 0;
    /* Reemplaza la ruta por tu imagen generada con IA */
    background-image: url('../images/contact-image-bg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 2;
}

/* Overlay para asegurar el contraste de los textos e imagen */
.seccion-contacto .fondo_innovacion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Velo oscuro graduable */
    z-index: -1;
}

/* ====================================
   FORMULARIO ESTILO AIGOCY (GLASSMORPHISM)
==================================== */

#formulario .form-card {
    /* Fondo translúcido que permite ver el arte de IA de fondo */
    background: rgba(0, 0, 0, 0.88);
    /*    backdrop-filter: blur(10px);*/
    -webkit-backdrop-filter: blur(10px);
    /* Borde brillante sutil */
    border: 1px solid rgba(0, 0, 0, 1);
    border-radius: 50px;
    padding: 3.5rem 3rem;
    /* Sombra de profundidad */
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.5),
        inset 0px 1px 0px rgba(255, 255, 255, 0.1);
}

/* Títulos de la cabecera del formulario */
#formulario .form-card-title_footer {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

#formulario .form-card-subtitle_footer {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2.5rem;
}

/* Etiquetas de Bootstrap 5 (.form-label) */
#formulario .form-label {
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    opacity: 0.9;
    letter-spacing: 0.3px;
}

/* Inputs de Bootstrap 5 con integración de fondo */
#formulario .form-control {
    background: rgba(0, 0, 0, 0.3); /* Un poco más oscuro para que contraste dentro del card */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    padding: 14px 18px;
    font-size: 15px;
    outline: none;
    box-shadow: none;
    transition: all 0.3s ease;
}

/* Estilo del Placeholder */
#formulario .form-control::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Estado Focus (Al hacer clic para escribir) */
#formulario .form-control:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    box-shadow: 0px 0px 12px rgba(255, 255, 255, 0.05);
}

/* Textarea */
#formulario textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

/* Botón de Envío */
#formulario .btn-send {
    background: #ffffff;
    color: #111111;
    border: 1px solid #ffffff;
    padding: 14px 30px;
    border-radius: 30px;
    font-size: 15px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

#formulario .btn-send:hover {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
}

#formulario .btn-send i {
    transition: transform 0.3s ease;
}

#formulario .btn-send:hover i {
    transform: translateX(4px);
}


/* ====================================
   FIN SECCIÓN CON FONDO DE IA (DARK)
==================================== */




/* =========================
   BASE CSS STARTER
========================= */

.fondo_contacto{
    background-color: #000000;
    padding-top: 80px;
    padding-bottom: 0px;
    position: relative;
    min-height: 600px;
    height: auto;
    overflow: hidden;
    width: 100%;
}

.section-contact {
    position: relative;
    padding: 48px;
}



.section-contact .contact-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
}

.section-contact .form-contact {
    margin-left: 8px;
    margin-right: -8px;
}

.section-contact .contact-image {
    position: absolute;
    inset: 0 16px;
    border-radius: 40px;
}

.form-contact {
    padding: 56px;
    border-radius: 40px;
    background-color: var(--neutral-100);
    box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}

.tf-btn:hover {
    box-shadow: 0px -3px 0px 0px rgb(8, 8, 8) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.12), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.13), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.14), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.14), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.15), 0px 100px 80px 0px rgba(0, 0, 0, 0.15), 0px 3px 3px 0px rgba(0, 0, 0, 0.14), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.12);
    background: radial-gradient(62.56% 62.56% at 50% -13%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #272727, #272727);
}


.form-contact .heading {
    margin-bottom: 35px;
}

.flat-spacing {
    padding-top: 120px;
    padding-bottom: 120px;
}

.container_contact {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 12px;
    padding-left: 12px;
    width: 1320px;
    max-width: 100%;
}

.form-contact {
    padding: 56px;
    border-radius: 40px;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.88);
    /*    backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);*/
}

form {
    position: relative;
    z-index: 30;
}
#formulario h4, #formulario .text-body-3{
    color: #ffffff;

}


.heading-section.mb-48 {
    margin-bottom: 48px;
}

.heading-section .heading-sub {
    display: flex;
    position: relative;
    width: max-content;
    border-radius: 8px;
    color: var(--brand);
    padding: 6px 16px 6px 30px;
    background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #F5F5F5, #F5F5F5);
    box-shadow: 0px -3px 0px 0px #E9E9E9 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6980392157) inset, 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
    margin-bottom: 32px;
}

.heading-section .heading-title {
    font-weight: 600;
    font-size: 70px;
    line-height: 70px;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.text-body-3 {
    font-size: 14px;
    line-height: 20px;
}

.fw-semibold {
    font-weight: 600 !important;

}

.heading-section .heading-sub::before {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 99px;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background-color: red;
}

.section-contact .col-left {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 72px 0;
}


.section-contact .contact-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    font-size: 28px;
    border-radius: 16px;
    background: linear-gradient(0deg, #F5F5F5, #F5F5F5), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0px -3px 0px 0px #161616 inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.6980392157) inset, 0px 2.77px 2.21px 0px rgba(255, 255, 255, 0.1215686275), 0px 3px 3px 0px rgba(255, 255, 255, 0.1411764706);
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.contact-item .bi::before, [class*=" bi-"]::before, [class^="bi-"]::before {
    vertical-align: center;

}
.heading-section .heading-sub {
    display: flex;
    position: relative;
    width: max-content;
    border-radius: 8px;
    color: var(--brand);
    padding: 6px 16px 6px 30px;
    background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #F5F5F5, #F5F5F5);
    box-shadow: 0px -3px 0px 0px #E9E9E9 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6980392157) inset, 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
    margin-bottom: 32px;
}

.section-contact .contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mb-20 {
    margin-bottom: 20px;
}

.tf-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ffffff;
    border-radius: 99px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    padding: 14px 24px;
    background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #272727, #272727);
    box-shadow: 0px -3px 0px 0px #000 inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.1294117647), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 100px 80px 0px rgba(0, 0, 0, 0.1490196078), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275);
    overflow: hidden;
}

form textarea,
form input[type=text],
form input[type=password],
form input[type=datetime],
form input[type=datetime-local],
form input[type=date],
form input[type=month],
form input[type=time],
form input[type=week],
form input[type=number],
form input[type=email],
form input[type=url],
form input[type=search],
form input[type=tel],
form input[type=color] {
    outline: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    padding: 0 0 11px 0px;
    border: 0;
    border-bottom: 1px solid #2b2b27;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.2);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
/* Cuando el input NO está vacío (el placeholder se oculta), cambia el texto a blanco */
form textarea:not(:placeholder-shown),
form input[type="text"]:not(:placeholder-shown),
form input[type="password"]:not(:placeholder-shown),
form input[type="datetime"]:not(:placeholder-shown),
form input[type="datetime-local"]:not(:placeholder-shown),
form input[type="date"]:not(:placeholder-shown),
form input[type="month"]:not(:placeholder-shown),
form input[type="time"]:not(:placeholder-shown),
form input[type="week"]:not(:placeholder-shown),
form input[type="number"]:not(:placeholder-shown),
form input[type="email"]:not(:placeholder-shown),
form input[type="url"]:not(:placeholder-shown),
form input[type="search"]:not(:placeholder-shown),
form input[type="tel"]:not(:placeholder-shown),
form input[type="color"]:not(:placeholder-shown) {
    color: #ffffff;
}

/* Opcional: Si también quieres que cambie a blanco MIENTRAS escriben (foco activo) */
form textarea:focus,
form input:focus {
    color: #ffffff;
    border-color: rgba(255,255,255,0.78);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 16px 34px rgba(0,0,0,0.22);
}
form input.is-valid,
form textarea.is-valid {
    color: #ffffff;
}
/* 1. Al hacer clic (focus) -> cambia el placeholder a blanco */
form textarea:focus::placeholder,
form input:focus::placeholder {
    color: #ffffff !important;
    opacity: 1; /* Asegura que no se vea translúcido en algunos navegadores */
}

/* 2. Durante la validación de Bootstrap -> cambia el placeholder a blanco */
form .form-control.is-valid::placeholder,
form .form-control.is-invalid::placeholder,
form .was-validated .form-control:valid::placeholder,
form .was-validated .form-control:invalid::placeholder {
    color: #ffffff !important;
    opacity: 1;
}


button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.mb-18 {
    margin-bottom: 18px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.form-contact .attachment {
    padding: 16px 0;
    margin-bottom: 38px;
}

.gap-8 {
    gap: 8px;
}

[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.form-contact textarea {
    height: 114px;
    border-radius: 0;
}

form textarea {
    height: 150px;
    border-radius: 32px;
    resize: none;
}

.container_contact a {
    color: #a1a1aa;
    text-decoration: none;
}


/* footer */


.fondo_crm {
    position: relative;
    overflow: hidden;
    background-image: url(../images/fondo_crmmm.webp);
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    padding: clamp(90px, 10vw, 150px) 0;
    /* animation: bgDrift 10s ease-in-out infinite alternate;*/
}


.fondo_softwareeintegraciones {
    position: relative;
    overflow: hidden;
    background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.82) 28%, rgba(0, 0, 0, 0.45) 45%, transparent 62%), url(../images/back_software.webp);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    padding: clamp(90px, 10vw, 150px) 0;
    /* animation: bgDrift 10s ease-in-out infinite alternate;*/
}



.header_ia {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(0, 0, 0, 0.3), transparent 60%), radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.3), transparent 60%), url(../images/header_ia.webp);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
}

.header_software {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%,  transparent 60%), radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.3), transparent 60%), url(../images/header_software.webp);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
}



.fondo_ia_01 {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    background-image: url(../images/fondo_ia_01.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 20px;
    padding-bottom: 80px;
    min-height: 600px;
    overflow: hidden;
}




.header_marketing {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(0, 0, 0, 0.3), transparent 60%), radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.3), transparent 60%), url(../images/header_marketing.webp);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
}



.fondo_web_01 {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    background-image: url(../images/web-01.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 90px;
    padding-bottom: 80px;
    min-height: 600px;
    overflow: hidden;
}


.fondo_casos {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 10vw, 140px) 0;
}
.icon_analisis_www  {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/world-wide-web-1.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_doc  {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/document.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_chat{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/document.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_whats{
    position: relative;
    width: 65px;
    height: 65px;
    background-image: url(../images/whatsapp-logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_insta{
    position: relative;
    width: 65px;
    height: 65px;
    background-image: url(../images/instagram-logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_face{
    position: relative;
    width: 65px;
    height: 65px;
    background-image: url(../images/facebook.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_startup{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/startup.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_memo{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/memo.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_chat_ui{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/chat-ui-web.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_information{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/business-information.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_cpu{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/cpu.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_outcomes{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/outcomes.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_money{
    position: relative;
    width: 60px;
    height: 60px;
    background-image: url(../images/money.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_gear{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/gear.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_bar  {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon_analisis_bar.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_data_base {
    position: relative;
    width: 65px;
    height: 65px;
    background-image: url(../images/data-center-table.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_package {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/package.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_system_management {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/system_management.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_analisis_configure{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/configure.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.icon_crm_pipeline {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/crm_pipeline.svg);
    background-repeat: no-repeat;
}

.icon_crm_reporte {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/crm_reporte.svg);
    background-repeat: no-repeat;
}

.icon_crm_multicanal {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/crm_multicanal.svg);
    background-repeat: no-repeat;
}
.icon_crm_ia {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/crm_ia.svg);
    background-repeat: no-repeat;
}

.icon_crm_segumimiento {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/crm_seguimiento.svg);
    background-repeat: no-repeat;
}

.icon_crm_historial {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/crm_historial.svg);
    background-repeat: no-repeat;
}


.icon_soft_software {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/soft_software.svg);
    background-repeat: no-repeat;
}


.icon_soft_api{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/soft_api.svg);
    background-repeat: no-repeat;
}

.icon_soft_automatizacion{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon_automatizacion.svg);
    background-repeat: no-repeat;
}


.icon_soft_portal{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/soft_portal.svg);
    background-repeat: no-repeat;
}

.icon_soft_dashboard{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/soft_dashboard.svg);
    background-repeat: no-repeat;
}




.icon_01 {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon-01.svg);
    background-repeat: no-repeat;
}

.icon_02 {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon-02.svg);
    background-repeat: no-repeat;
}

.icon_03 {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon-03.svg);
    background-repeat: no-repeat;
}

.icon_04 {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon-04.svg);
    background-repeat: no-repeat;
}

.icon_05 {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon-05.svg);
    background-repeat: no-repeat;
}

.icon_06 {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon-06.svg);
    background-repeat: no-repeat;
}


.icon_serv_web {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon_serv_web.svg);
    background-repeat: no-repeat;
}

.icon_serv_software {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon_serv_software.svg);
    background-repeat: no-repeat;
}

.icon_serv_crm {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon_serv_crm.svg);
    background-repeat: no-repeat;
}

.icon_serv_ia {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon_serv_ia.svg);
    background-repeat: no-repeat;
}

.icon_serv_crmventas {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon_serv_crmventas.svg);
    background-repeat: no-repeat;
}

.icon_serv_cobranza {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon_serv_cobranza.svg);
    background-repeat: no-repeat;
}

.icon_serv_dashboard {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon_serv_dashboard.svg);
    background-repeat: no-repeat;
}





ul.lista-imagen {
    list-style-image: url('../images/bullet_innovacion.png');
}

.magen_10px{
    margin-right: 10px;
}

.color_rojo{
    color: #ff4d4d !important;
}

.cierre {
    font-size: 31px;
    font-weight: 700;
    line-height: 1.2;
    color: white;
    margin-bottom: 30px;
}


.conversion-imageright {
    height: 100%;
    overflow: hidden;
    border-top-left-radius: clamp(80px, 20vw, 330px);
    border-bottom-left-radius: clamp(60px, 12vw, 160px);
}

.fondo_negro{
    background-color: #000000;
    height: auto;
    min-height: 80px;
    overflow: hidden;
    width: 100%;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Document */

html {
    height: 100%;
    scroll-behavior: auto;
}
body {
    height: 100%;
    margin: 0;
    font-family: 'Inter 28pt';
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
}
:root {

    --color-primary: #0d6efd;
    --color-dark: #000000;
    --color-light: #ffffff;
}
/* =========================
   BASE CSS END
========================= */
/* =========================
   HERO REVEAL PANELS
========================= */


/*.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: .5rem;
}*/

.reveal-wrapper {
    position: fixed;
    inset: 0;
    display: flex;
    z-index: 9999;
    pointer-events: none;
}

.reveal-panel {
    flex: 1;
    background: #ffffff;
    transform: translateY(0);
    /*    border-right: 1px solid #000;*/
}

.reveal-panel:last-child {
    border-right: none;

}
.bg-slider {
    position: relative;
    background-color: #000;
    transition: padding 0.1s ease;
    isolation: isolate;
}

#carouselExampleCaptions {
    overflow: hidden;
    will-change: auto;
}
.bg-slider .carousel-item {
    height: 100vh; /* Ahora queremos que llene el contenedor expandido */
    min-height: 600px;
}
/* =========================
   HERO REVEAL PANELS END
========================= */


/* =========================
   NAV LINK BASE 
========================= */

.navbar-collapse{
    position: relative;
    z-index: 1001;

}
.navbar-toggler{
    position: relative;
    z-index: 1100;
}
.nav-pill {
    position: relative;
    padding: 6px 9px !important; /* Más aire lateral para la cápsula */
    z-index: 2;
    display: inline-block;
    transition: color 0.3s ease;
}
/* BORDE OVALADO */
.nav-pill::after {
    content: "";
    position: absolute;
    /* Centramos la cápsula perfectamente */
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    /* El truco: Empezar pequeño en ambos ejes y con escala */
    transform: translate(-50%, -50%) scale(0.75);
    /*    border: 1px solid rgba(255, 255, 255, 0.5);*/
    border-radius: 12px; /* Forzamos forma de cápsula */
    opacity: 0;
    /* Transición suave y elástica (Cubic-bezier de alto nivel) */
    transition:
        transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.4s ease;
    z-index: -1;
    pointer-events: none;

}
/* HOVER Y ACTIVE */
.nav-pill:hover::after,
.nav-pill.active::after {
    opacity: 1;
    /* Regresa a su tamaño real mientras se expande */
    transform: translate(-50%, -50%) scale(1);
}

/* Efecto opcional: Brillo sutil al texto al hacer hover */
.nav-pill:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);

}
.nav-pill:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    border-color: rgba(255, 255, 255, 0.6); /* El color del texto pero con transparencia */
    background-color: rgba(255, 255, 255, 0.5);
}
.navbar-scroll.scrolled .nav-pill::after {
    border-color: rgba(255,255,255,0.35);
}
.navbar-nav .nav-link {
    color: white;
    margin: 0 6px;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: #f5deb3;
}
.top-position-navbar{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
}
.logo-navbar {
    width: 270px;
}
.nav-link{
    font-family: 'Inter 28pt';
    font-size: 16px;
    color: #ffffff;
    font-weight: normal;
    line-height: 18px;
    font-style: normal;
}
.nav-link.menu-int {
    color: #ffffff;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #f5deb3;
}
.nav-seccion-interior .navbar-nav .nav-link.active, .nav-seccion-interior .navbar-nav .nav-link.show{
    color: #ab0ee7;
}

.nav-seccion-interior .nav-link:focus, .nav-seccion-interior .nav-link:hover {
    color: #ab0ee7;
}
.navbar-toggler {
    color: rgba(255,255,255,1);
    border-color: rgba(255,255,255,1);
}
.nav-seccion-interior .navbar-toggler {
    color: rgba(170,14,230,1);
    border-color: rgba(170,14,230,1);
}
.navbar-toggler:focus {
    box-shadow:  rgb(255, 255, 255) 0px 0px 0px 2px;
}
.nav-seccion-interior .navbar-toggler:focus {
    box-shadow:  rgb(170, 14, 230) 0px 0px 0px 2px;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    z-index: 3;
    position: relative;
}
.nav-seccion-interior .navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    z-index: 3;
    position: relative;
}
.navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}
.navbar-scroll.scrolled {
    background: rgba(0,0,0,0.9);
    /*    backdrop-filter: blur(6px);*/
    transition: 0.3s ease;
    padding: 10px 0;
}
.navbar-scroll {
    transition: all 0.3s ease;
    padding: 20px 35px;
}
.navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 20px;
    padding-left: 20px;
}
/* =========================
   NAV LINK BASE END
========================= */


.bg-slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.5) 60%,
        rgba(0,0,0,0) 100%
        );
    z-index: 1;
    pointer-events: none;
}

.bg-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.12), transparent 24%),
        radial-gradient(circle at 82% 76%, rgba(237, 21, 104, 0.18), transparent 30%),
        linear-gradient(90deg, rgba(0,0,0,0.66), rgba(0,0,0,0.12) 62%, rgba(0,0,0,0.48));
    mix-blend-mode: screen;
    opacity: 0.42;
}

.bg-slider .carousel-item {
    height: 90vh;
    min-height: 900px;
}
.bg-slider .carousel-item img {
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 12s ease, filter 900ms ease;
    will-change: transform;
}
.bg-slider .carousel-item.active img {
    animation: heroImageDrift 18s ease-in-out both;
}

@keyframes heroImageDrift {
    0% {
        transform: scale(1.01) translate3d(0, 0, 0);
    }
    100% {
        transform: scale(1.045) translate3d(-1.2%, -0.8%, 0);
    }
}

.hero-media-plane {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform-origin: 70% 50%;
}

.scroll-depth-active .hero-media-plane {
    will-change: transform;
}

.hero-video-slide {
    overflow: hidden;
}

.bg-slider .hero-video-slide .hero-video-poster,
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-slider .hero-video-slide .hero-video-poster {
    animation: none;
    transform: none;
    transition: none;
    will-change: auto;
}

.hero-video {
    opacity: 0;
    pointer-events: none;
    transition: opacity 450ms ease;
}

.hero-video-slide.has-playing-video .hero-video {
    opacity: 1;
}

.hero-video-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.18) 55%, transparent 80%);
    pointer-events: none;
}

.hero-video-control {
    position: absolute;
    right: 28px;
    bottom: 28px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 22px;
    line-height: 1;
}

.hero-video-control[hidden] {
    display: none;
}

.hero-video-control:hover {
    background: rgba(0, 0, 0, 0.9);
}

.hero-video-control:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

@media (max-width: 768px) {
    .bg-slider .hero-video-slide .hero-video-poster {
        object-position: 72% center;
    }

    .bg-slider .hero-video-slide .custom-caption {
        left: 0;
        right: 0;
        padding: 24px;
    }

    .hero-video-slide::after {
        background: rgba(0, 0, 0, 0.28);
    }
}

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .hero-video,
    .hero-video-control {
        display: none;
    }
}

.border-nav{
    border-radius: 50px;
    border: solid 1px white;
    margin-left: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
.border-nav:hover{
    border: solid 1px #006cff;
}
.custom-caption {
    text-align: left;
    left: 11%;
    right: auto;
    bottom: 20%;
    max-width: 800px;
    padding: 0;
    z-index: 3;
}
.custom-caption h1 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.05;
}
.custom-caption p {
    font-size: clamp(1.1rem, 1.4vw, 2.15rem);
    line-height: 1.2;
    margin-top: 20px;
    color: #ffffff;
}
.btn-slide-bg-full{
    background-color: #072586;
    border-color: #072586;
    color: #ffffff;
    z-index: 3;
    font-size: clamp(14px, 3vw, 20px);
    transition: background-color 420ms ease, border-color 420ms ease, color 420ms ease, box-shadow 420ms ease, transform 420ms ease;
}
.btn-slide-bg-full:hover{
    border-color: #0f3ccd;
    background-color: #051d69;
    box-shadow: 0 18px 42px rgba(7, 37, 134, 0.32);
    transform: translateY(-2px);
}
.btn-slide-outline{
    border-color: #ffffff;
    background-color: transparent;
    color: #ffffff;
    z-index: 3;
    font-size: clamp(14px, 3vw, 20px);
    transition: background-color 420ms ease, border-color 420ms ease, color 420ms ease, box-shadow 420ms ease, transform 420ms ease;
}
.btn-slide-outline:hover{
    background-color: #ffffff;
    border-color: #ffffff;
    color: #000000;
    box-shadow: 0 18px 42px rgba(255,255,255,0.24);
    transform: translateY(-2px);
}
.section-logos {
    background: #000000;
    padding: clamp(60px, 8vw, 120px) 0 0 0;
}
.logos-title {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 700;
    color: white;
    line-height: 1.2;
}
.logos-subtitle {
    font-size: clamp(1rem, 1.5vw, 2rem);
    color: rgba(255,255,255,0.9);
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 1.2;
}
.logos-grid img {
    max-width: 170px;
    margin: 30px auto;
    opacity: 0.6;
    transition: 0.3s ease;
}
.logos-grid img:hover {
    opacity: 1;
    transform: scale(1.05);
}
.logos-grid > div {
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo-brand {
    filter: brightness(0) saturate(100%) invert(50%);
}
.logos-grid img {
    filter: brightness(0) invert(0.5);
    opacity: 0.5;
    transition: filter 420ms ease, opacity 420ms ease, transform 420ms ease;
}
.logos-grid img:hover {
    filter: brightness(0) invert(1);
    opacity: 1;
    transform: translateY(-3px) scale(1.04);
}
.services-intro{
    padding-right: clamp(30px, 5vw, 140px);
    padding-left: 35px;
}
/* Columna izquierda */
.services-title {
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}
.services-text {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: rgba(255,255,255,0.75);
    margin-bottom: 30px;
}
.services-btn {
    font-family: 'Inter 28pt';
    font-weight: bold;
    padding: 14px 35px;
    border-radius: 12px;
    margin-top: 20px;
    font-size: 18px;
    background-color: #072586;
    color: #ffffff;
    border-color: #0f3ccd;
}
.services-btn:hover{
    background-color: #051d69;
    border-color: #0f3ccd;
    color: #ffffff;
}
/* Servicios */
.service-item {
    max-width: 360px;
}
/* Icono */
.service-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*    background: rgba(255,255,255,0.08);*/
    border-radius: 10px;
    margin-bottom: 30px;
}
.service-icon div {
    filter: brightness(0) invert(0.6);
    transition: filter 480ms ease, transform 480ms ease;
}
.service-item:hover .service-icon div {
    filter: invert(44%) sepia(98%) saturate(1500%) hue-rotate(196deg) brightness(103%) contrast(101%);
    transform: scale(1.04);
}
.service-icon i {
    font-size: 22px;
    color: white;
}
/* Título servicio */
.service-heading {
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    transition: 0.3s ease;
    margin-bottom: 12px;
}
/* Descripción */
.service-description {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.55);
    transition: 0.3s ease;
    margin-bottom: 0;
}
.service-item:hover .service-heading {
    color: white;
}
.service-item:hover .service-description {
    color: rgba(255,255,255,0.85);
}
.service-item {
    padding: 25px;
    border-radius: 16px;
    background: transparent;
    position: relative;
    overflow: hidden;
    transition:
        background 520ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 520ms ease,
        border-color 520ms ease;
    margin-bottom: 20px;
    border-color: transparent;
    border-width: 1px;
    border-style: solid;
}
.service-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 0%, rgba(255,255,255,0.11), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.06), transparent 48%);
    opacity: 0;
    transition: opacity 520ms ease;
    pointer-events: none;
}
.service-item:hover {
    background: #010a20;
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(0,0,0,0.38), 0 0 0 1px rgba(27,77,138,0.18);
    cursor: default;
    border-color: #1b4d8a;
    border-width: 1px;
    border-style: solid;

}
.service-item:hover::before {
    opacity: 1;
}

[data-service-motion] .service-item {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 260ms ease, border-color 260ms ease, box-shadow 380ms ease;
}

[data-service-motion] .service-item::before {
    opacity: 0;
}

[data-service-motion] .service-item .service-heading {
    color: rgba(255, 255, 255, 0.85);
}

[data-service-motion] .service-item .service-icon div {
    filter: brightness(0) invert(0.6);
    transform: none;
}

[data-service-motion] .service-item.is-service-hovered,
[data-service-motion] .service-item.is-service-tapped,
[data-service-motion] .service-item:focus-within {
    background: #010a20;
    border-color: #1b4d8a;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

[data-service-motion] .service-item.is-service-hovered::before,
[data-service-motion] .service-item.is-service-tapped::before,
[data-service-motion] .service-item:focus-within::before {
    opacity: 1;
}

[data-service-motion] .service-item.is-service-hovered .service-heading,
[data-service-motion] .service-item.is-service-tapped .service-heading,
[data-service-motion] .service-item:focus-within .service-heading {
    color: #fff;
}

[data-service-motion] .service-item.is-service-hovered .service-icon div,
[data-service-motion] .service-item.is-service-tapped .service-icon div {
    filter: invert(44%) sepia(98%) saturate(1500%) hue-rotate(196deg) brightness(103%) contrast(101%);
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    [data-service-motion] .service-item.is-service-hovered {
        transform: perspective(900px) translate3d(0, -6px, 0)
            rotateX(var(--service-rotate-x, 0deg)) rotateY(var(--service-rotate-y, 0deg));
        transition-duration: 80ms, 260ms, 260ms, 380ms;
        will-change: transform;
    }

    [data-service-motion] .service-item.is-service-hovered .service-icon div {
        transform: translateY(-3px) scale(1.04);
    }
}

@media (prefers-reduced-motion: no-preference) {
    [data-service-motion] .service-item.is-service-tapped {
        transform: scale(0.99);
        transition-duration: 130ms;
    }
}

.icon_diagnostico2{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url("../images/icon_diagnostico.svg");
    background-repeat: no-repeat;
}

.icon_diagnostico3{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url("../images/icon_report.svg");
    background-repeat: no-repeat;
}

.icon_diferencia{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url("../images/icon_node.svg");
    background-repeat: no-repeat;
}


.icon-dash{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url("../images/icon-users.svg");
    background-repeat: no-repeat;
}
.icon-diagram{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url("../images/icon-users.svg");
    background-repeat: no-repeat;
}
.icon-robot{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url(../images/icon_robot.svg);
    background-repeat: no-repeat;
}

.icon-bullseye{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url("../images/icon-bullseye.svg");
    background-repeat: no-repeat;
}
.icon-gear{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url("../images/icon-gear.svg");
    background-repeat: no-repeat;
}
.icon-chart{
    position: relative;
    width: 70px;
    height: 70px;
    background-image: url("../images/icon-chart.svg");
    background-repeat: no-repeat;
}

.section-services {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 10vw, 140px) 0;
    isolation: isolate;

}
.section-services::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 20%, rgba(255,255,255,0.08), transparent 26%),
        rgba(0, 0, 0, 0.28);
    z-index: 2;
}
.section-services .container-fluid {
    position: relative;
    z-index: 3;
}

.bg-layer_casos{
    position: absolute;
    inset: 0;
    background-image: url("../images/fondo-plataforma.webp");
    background-size: cover;
    background-position: right center;
    opacity: 1;
    z-index: -2;
    /*animation: bgDrift 10s ease-in-out infinite alternate;*/
}


.bg-layer {
    position: absolute;
    inset: 0;
    background-image: url("../images/bg-lineas.jpg");
    background-size: cover;
    background-position: right top;
    opacity: 1;
    z-index: 0;
    animation: none;
}

@keyframes bgDrift {
    0% {
        transform: scale(1) translateX(0);
    }
    100% {
        transform: scale(1.08) translateX(-60px);
    }
}
/* Video fondo */
.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
    opacity: 0.78;
    filter: saturate(0.94) contrast(1.05);
}
@media (max-width: 1290px) {
    .custom-caption h1 {

        text-align: center;
    }
    .custom-caption {
        text-align: center;
        left: auto;
        right: auto;
        max-width: 100%;
        padding: 100px;
    }
}
.section-conversion {
    background: #000;
    padding: clamp(80px, 10vw, 90px) 0 0 0;
}

/* Imagen */
.conversion-image {
    height: 100%;
    overflow: hidden;
    border-top-right-radius: clamp(80px, 20vw, 330px);
    border-bottom-right-radius: clamp(60px, 12vw, 160px);

}
.conversion-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 620ms ease, filter 620ms ease;
}
.conversion-image:hover img {
    transform: scale(1.035);

}


/* =================================
   DIAGONAL LIGHT EFFECT
================================= */

.conversion-image, .conversion-imageright {
    position: relative;
    overflow: hidden;
}

/* Imagen */
.conversion-imageright img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 620ms ease, filter 620ms ease;
}

.conversion-image:hover img, .conversion-imageright:hover img {
    transform: scale(1.035);
    filter: saturate(1.04) contrast(1.02);
}


/* =================================
   RESPLANDOR DIAGONAL
================================= */

.conversion-image::after, .conversion-imageright::after {
    content: "";

    position: absolute;

    top: -50%;
    left: 50%;

    width: 0;
    height: 200%;

    background: #fff;

    transform:
        translateX(-50%)
        rotate(25deg);

    opacity: 0;

    pointer-events: none;
    z-index: 2;
}


/* =================================
   ANIMACIÓN
================================= */

.conversion-image:hover::after, .conversion-imageright:hover::after {
    animation: aigocyLight 0.9s ease-out forwards;
}

@keyframes aigocyLight {

    0% {
        width: 0;
        opacity: 0;
    }

    10% {
        width: 4%;
        opacity: 0.20;
    }

    100% {
        width: 140%;
        opacity: 0;
    }
}
/* =========================
   ZONA DE MECÁNICA
========================= */

.benefit-list {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

/* 1. Contenedor Base de Beneficios */
.benefit-list .benefit-card,
.benefit-list .conversion-metedologia { /* Mantiene compatibilidad con tu HTML */
    align-items: flex-start;
    background: #131313;
    border: 1px solid #383838;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    padding: 15px 14px;

    position: relative;     /* Necesario para posicionar la cortina dentro */
    overflow: hidden;        /* Oculta la cortina mientras está abajo */
    z-index: 1;              /* Contexto de apilamiento */

    /* Transición fluida para borde y resplandor */
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

/* 2. Cortina Magenta/Roja (Sube desde abajo) */
.benefit-list .conversion-metedologia::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(7, 37, 134, 0.8 ); /* Tu tono magenta/rojo */

    z-index: -1;                /* Queda detrás del texto e íconos */
    transform: scaleY(0);       /* Colapsado en vertical */
    transform-origin: bottom;   /* Fija el origen abajo */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;     /* Optimización de hardware */
}

/* 3. Mantener texto e íconos visibles por encima */
.benefit-list .conversion-metedologia * {
    position: relative;
    z-index: 2;
}

/* 4. Estado :hover de la tarjeta */
.benefit-list .conversion-metedologia:hover {
    border-color: #072586;
    box-shadow: 0 8px 25px rgba(7, 37, 134, 0.35); /* Glow unificado */
}

.benefit-list .conversion-metedologia:hover::before {
    transform: scaleY(1);       /* Se despliega cubriendo la tarjeta */
}

/* 5. Preparar el ícono para rotación 3D suave */
.benefit-list .conversion-metedologia i {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    backface-visibility: hidden; /* Evita parpadeos en renderizado */
    will-change: transform;
}

/* 6. Giro 360° en eje Y */
.benefit-list .conversion-metedologia:hover i {
    transform: rotateY(360deg);
}
/* 1. Contenedor Base de Beneficios */
.benefit-list .benefit-card,
.benefit-list .conversion-metedologia {
    align-items: flex-start;
    background: #131313;
    border: 1px solid #383838;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    padding: 15px 14px;

    position: relative;
    overflow: hidden;
    z-index: 1;

    cursor: pointer; /* Mano interactiva */

    transition: border-color 450ms ease, box-shadow 450ms ease, transform 450ms ease;
}

/* 2. Transición del texto base */
.benefit-list .conversion-metedologia p {
    transition: color 0.3s ease;
}

.benefit-list .conversion-metedologia:hover::before {
    transform: scaleY(1);
}

/* 4. Cambiar párrafo a blanco al hacer hover */
.benefit-list .conversion-metedologia:hover p {
    color: #ffffff;
}

#metodologia [data-method-timeline] {
    gap: 32px;
    padding: 0;
    margin-bottom: 0;
    list-style: none;
}

#metodologia [data-method-timeline] .conversion-metedologia {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
    overflow: visible;
    isolation: isolate;
    transform: none;
}

#metodologia [data-method-timeline] .conversion-metedologia::before,
#metodologia [data-method-timeline] .conversion-metedologia::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 23px;
    width: 2px;
    height: calc(100% + 32px);
    background: #303039;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

#metodologia [data-method-timeline] .conversion-metedologia::before {
    background: #638aff;
    z-index: 1;
    transform: scaleY(0);
    transform-origin: top;
}

#metodologia [data-method-timeline].method-motion-ready .conversion-metedologia::before {
    transform: scaleY(var(--method-segment, 0));
}

#metodologia [data-method-timeline] .conversion-metedologia:last-child::before,
#metodologia [data-method-timeline] .conversion-metedologia:last-child::after {
    display: none;
}

#metodologia .method-number {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #62626c;
    border-radius: 50%;
    background: #000;
    color: #c9c9d0;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: color 300ms ease, border-color 300ms ease, background-color 300ms ease;
}

#metodologia .method-copy {
    min-width: 0;
    padding: 6px 0 24px;
    border-bottom: 1px solid #242429;
}

#metodologia .method-copy .service-heading {
    display: block;
    margin-bottom: 10px;
    color: #f2f2f5;
}

#metodologia .method-copy p {
    margin: 0;
    color: #c1c1ca;
}

#metodologia .is-method-reached .method-number {
    border-color: #638aff;
    background: #162448;
    color: #fff;
}

#metodologia .is-method-current .method-number {
    border-color: #ed1568;
    background: #ed1568;
    color: #fff;
}

#metodologia .app-preview {
    display: block;
    margin-inline: auto;
}

@media (min-width: 992px) {
    #metodologia .method-visual {
        position: sticky;
        top: 100px;
    }

    #metodologia .app-preview {
        max-height: calc(100svh - 140px);
        width: auto;
        object-fit: contain;
    }
}

@media (max-width: 991px) {
    #metodologia .app-preview {
        max-height: 420px;
        width: auto;
        object-fit: contain;
    }
}

@media (max-width: 575px) {
    #metodologia [data-method-timeline] .conversion-metedologia {
        gap: 16px;
    }

    #metodologia .method-copy .service-heading {
        font-size: 20px;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    #metodologia .method-number {
        transition: none;
    }
}

/* =========================
   SECCIÓN DE IMAGEN Y SECCIÓN PRINCIPAL
========================= */

.section-conversion {
    background: #000;
    padding: clamp(80px, 10vw, 90px) 0 0 0;
}

/* Imagen Principal (Evita conflicto con la lista) */
.section-conversion > .container .conversion-metedologia,
.conversion-media-wrapper {
    height: 100%;
    overflow: hidden;
    border-top-right-radius: clamp(80px, 20vw, 330px);
    border-bottom-right-radius: clamp(60px, 12vw, 160px);
}

.conversion-image img,
.conversion-imageright img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.conversion-image:hover img,
.conversion-imageright:hover img {
    transform: scale(1.05);
}

.section-conversion[data-photo-reveal] .photo-reveal-active img {
    transition: none;
    will-change: transform;
}

.section-conversion[data-photo-reveal] .photo-reveal-active {
    will-change: clip-path;
}

.section-conversion[data-photo-reveal] .photo-reveal-active::after {
    animation: none;
    opacity: 0;
}

.section-conversion[data-photo-reveal] .conversion-image:hover img,
.section-conversion[data-photo-reveal] .conversion-imageright:hover img {
    transform: scale(1.035);
}

/* Contenido */
.conversion-content {
    padding: clamp(40px, 6vw, 100px);
}

/* Título */
.conversion-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 30px;
    max-width: 520px;
}

/* Lista estándar */
.conversion-list {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.conversion-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.8);
}

/* Bullet rosa/dorado */
.conversion-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #ff2d8f;
    border-radius: 50%;
    box-shadow: 0 0 0 11px rgba(26, 26, 26, 1);
}

/* Botón CTA */
.conversion-btn {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 10px;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 420ms ease, border-color 420ms ease, color 420ms ease, box-shadow 420ms ease, transform 420ms ease;
    font-weight: 600;
    will-change: transform;
}

.conversion-btn:hover {
    background: #ffffff;
    color: #000000;
    box-shadow: 0 18px 42px rgba(255,255,255,0.18);
    transform: translateY(-2px);
}

/* =========================
   RESPONSIVE (Ajustes de visibilidad)
========================= */
@media (max-width: 992px) {

    /* Solo oculta la imagen grande de la sección en móviles, NO las tarjetas de beneficios */
    .section-conversion .conversion-media-wrapper {
        display: none;
    }

    .conversion-content {
        padding: 40px 20px;
        text-align: center;
    }

    .conversion-title {
        margin-left: auto;
        margin-right: auto;
    }

    .conversion-list li {
        padding-left: 0;
    }

    .conversion-list li::before {
        content: "";
        position: relative;
        float: left;
        left: 0;
        top: 8px;
        width: 9px;
        height: 8px;
        background: #ff2d8f;
        border-radius: 50%;
        box-shadow: 0 0 0 11px rgba(26, 26, 26, 1);
        margin-right: 10px !important;
    }
}
/* =========================
   END ZONA DE MECÁNICA
========================= */



/* =========================
  HEADER
========================= */

.header-inner {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000;
}

.header-diagnostico {
    position: absolute;
    inset: 0;
    background-image:
        url("../images/header_diagnostico.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
}

.header-crm {
    position: absolute;
    inset: 0;
    background-image:
        url("../images/header_crm.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
}

.header-nosotros {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 50%, rgba(0, 102, 255, 0.4), transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(255, 0, 128, 0.3), transparent 60%),
        url("../images/header_nosotros.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
}

.header-casos {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 50%, rgba(0, 102, 255, 0.4), transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(255, 0, 128, 0.3), transparent 60%),
        url("../images/header_casos.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
}

.header-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 50%, rgba(0, 102, 255, 0.4), transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(255, 0, 128, 0.3), transparent 60%),
        url("../images/header-tech.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
}
.header-inner .container {
    position: relative;
    z-index: 2;
}
.header-eyebrow {
    display: block;
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 15px;
}

.header-title {
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin-bottom: 20px;
}

.header-text {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: rgba(255,255,255,0.75);
    max-width: 480px;
}

@media (max-width: 992px) {
    .header-inner {
        min-height: auto;
        padding: 120px 0 80px;
    }
    .header-bg {
        background-size: cover;
        opacity: 0.3;
    }
    .header-content {
        text-align: center;
    }
}

/* =========================
  HEADER
========================= */

/* =========================
  SECCION SOLUCIONES
========================= */

.section-solutions {
    background: #000  url("../images/soluciones-bg.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
    padding: clamp(80px, 10vw, 140px) 0;

}
.solutions-eyebrow {
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,1);
    display: block;
    margin-bottom: 10px;
}
.solutions-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: white;
}
.solutions-subtext {
    color: rgba(255,255,255,1);
    font-size: 1.3rem;
}
.solution-card {
    position: relative;
    height: 100%;
    padding: 40px 30px;
    border-radius: 14px;
    background: rgba(2,14,51,0.8);
    border: 1px solid rgba(0, 153, 255, 0.4);
    transition: 0.3s ease;
    overflow: hidden;
}
.solution-card:hover {
    transform: translateY(-6px);
    border-color: #00aaff;
    box-shadow:
        0 0 20px rgba(0,153,255,0.3);
    background: rgba(2,14,51,1);
}
.solution-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    background: linear-gradient(120deg, #00aaff, #ff2d8f);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: 0.3s;
}
.solution-card:hover::before {
    opacity: 1;
}
.solution-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    opacity: 0.6;
    transition: 0.3s ease;
}

.solution-card:hover .solution-icon {
    opacity: 1;
    transform: scale(1.05);
}
.solution-heading {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 10px;
}
.solution-desc {
    color: rgba(255,255,255,0.6);
}
.solution-arrow {
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: #ff2d8f;
    font-size: 1.5rem;
    opacity: 0;
    transform: translateY(10px);
    transition: 0.3s ease;
}
.solution-card:hover .solution-arrow {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 992px) {
    .solutions-subtext {
        text-align: left;
        margin-top: 10px;
    }
}

/* =========================
  END SECCION SOLUCIONES
========================= */

/* =========================
   SATATEMENT BLOCK
========================= */

.section-statement {
    position: relative;
    overflow: hidden;
    padding: clamp(120px, 12vw, 220px) 0;
    background-image: url("../images/banner-soluciones.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: none;
}
@keyframes statementZoom {
    0% {
        background-size: 100%;
    }
    100% {
        background-size: 108%;
    }
}
.statement-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
        90deg,
        rgba(190, 19, 42, 0.88) 0%,
        rgba(190, 19, 42, 0.88) 25%,
        rgba(0, 0, 0, 0.35) 55%,
        rgba(0, 0, 0, 0.2) 100%
        );
    z-index: 1;
    backdrop-filter: none;
}
.statement-content {
    position: relative;
    z-index: 2;
}
.statement-title {
    color: white;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 600;
    line-height: 1.05;
    margin: 0;
    max-width: 700px;
}

@media (max-width: 992px) {
    .section-statement {
        padding: 100px 0;
        background-position: 65% center;
    }

    .statement-overlay {
        background:
            linear-gradient(
            180deg,
            rgba(190, 19, 42, 0.88) 0%,
            rgba(0, 0, 0, 0.7) 100%
            );
    }
    .statement-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }

}



.section-pad {
    padding: 92px 0;
}
.steps-section {
    background: linear-gradient(180deg, #fff0f2, #fff);
}

.icon_beneficios_01 {
    align-items: center;
    background-image: url(../images/icon_diagnostico.svg);
    width: 60px;
    height: 58px;
    position: relative;
    float: left;
    background-position: top;
    /* background-position: center top; */
    background-repeat: no-repeat;
    background-size: contain;
    /* margin-top: 15px; */
    /* margin-bottom: 25px; */
    filter: brightness(8) ;

}
.icon_beneficios_02 {
    align-items: center;
    background-image: url(../images/icon_arquitectura.svg);
    width: 60px;
    height: 58px;
    position: relative;
    float: left;
    background-position: top;
    /* background-position: center top; */
    background-repeat: no-repeat;
    background-size: contain;
    /* margin-top: 15px; */
    /* margin-bottom: 25px; */
}
.icon_beneficios_03 {
    align-items: center;
    background-image: url(../images/icon_implementacion.svg);
    width: 60px;
    height: 58px;
    position: relative;
    float: left;
    background-position: top;
    /* background-position: center top; */
    background-repeat: no-repeat;
    background-size: contain;
    /* margin-top: 15px; */
    /* margin-bottom: 25px; */
}

.icon_beneficios_04 {
    align-items: center;
    background-image: url(../images/icon_automatizacion.svg);
    width: 60px;
    height: 58px;
    position: relative;
    float: left;
    background-position: top;
    /* background-position: center top; */
    background-repeat: no-repeat;
    background-size: contain;
    /* margin-top: 15px; */
    /* margin-bottom: 25px; */
}

.icon_beneficios_05 {
    align-items: center;
    background-image: url(../images/icon_medicion.svg);
    width: 60px;
    height: 58px;
    position: relative;
    float: left;
    background-position: top;
    /* background-position: center top; */
    background-repeat: no-repeat;
    background-size: contain;
    /* margin-top: 15px; */
    /* margin-bottom: 25px; */
}

.icon_beneficios_06 {
    align-items: center;
    background-image: url(../images/icon_optimizacion.svg);
    width: 60px;
    height: 58px;
    position: relative;
    float: left;
    background-position: top;
    /* background-position: center top; */
    background-repeat: no-repeat;
    background-size: contain;
    /* margin-top: 15px; */
    /* margin-bottom: 25px; */
}





.benefit-list i, .customers-section i {
    color: var(--xp-red);
}

.app-preview {
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(24, 60, 90, .16);
    /* max-height: 520px; */
    object-fit: cover;
}

/* =========================
   END SATATEMENT BLOCK
========================= */

/* =========================
   ENGINE BLOCK
========================= */

.section-flujos{
    position: relative;
    overflow: hidden;
    /*background:
        linear-gradient(
        90deg,
        #000 0%,
        rgba(0,0,0,0.82) 28%,
        rgba(0,0,0,0.45) 45%,
        transparent 62%
        ),*/

    background-image: url("../images/fondos_flujos.webp");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    padding: clamp(90px, 10vw, 150px) 0;
}

.section-canales::after,
.section-flujos::after,
.section_diagnostico::after,
.section-desarrollo::after,
.section-IA::after,
.seccion-casos::after,
.seccion-contacto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.07), transparent 28%),
        linear-gradient(90deg, rgba(0,0,0,0.76), rgba(0,0,0,0.2) 54%, rgba(0,0,0,0.62));
    opacity: 0.82;
}

.section-flujos::after,
.section-IA::after {
    background:
        radial-gradient(circle at 82% 22%, rgba(237,21,104,0.12), transparent 28%),
        linear-gradient(270deg, rgba(0,0,0,0.76), rgba(0,0,0,0.18) 54%, rgba(0,0,0,0.68));
}

.section-canales > .container,
.section-canales > .container-fluid,
.section-flujos > .container,
.section-flujos > .container-fluid,
.section_diagnostico > .container,
.section_diagnostico > .container-fluid,
.section-desarrollo > .container,
.section-desarrollo > .container-fluid,
.section-IA > .container,
.section-IA > .container-fluid,
.seccion-casos > .container,
.seccion-casos > .container-fluid,
.seccion-contacto > .container,
.seccion-contacto > .container-fluid {
    position: relative;
    z-index: 2;
}



.section_diagnostico{
    position: relative;
    overflow: hidden;
    /*background:
        linear-gradient(
        90deg,
        #000 0%,
        rgba(0,0,0,0.82) 28%,
        rgba(0,0,0,0.45) 45%,
        transparent 62%
        ),*/
    background-image: url("../images/diagnostico.webp");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    padding: 30px;
    min-height: 700px;
    height: auto;
}

.section-desarrollo{
    position: relative;
    overflow: hidden;
    /*background:
        linear-gradient(
        90deg,
        #000 0%,
        rgba(0,0,0,0.82) 28%,
        rgba(0,0,0,0.45) 45%,
        transparent 62%
        ),*/

    background-image: url("../images/fondo_software.webp");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    padding: clamp(90px, 10vw, 150px) 0;
}


.section-IA {
    position: relative;
    overflow: hidden;
    background-image: url(../images/fondo_ia.webp);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    padding: clamp(90px, 6vw, 90px) 0;
}


.section-canales {
    position: relative;
    overflow: hidden;
    background-color: #000000;
    padding: clamp(90px, 10vw, 50px) 0;
    /* Eliminamos el background directo de la sección */
}

/* Capa de Imagen de Fondo con margen para Parallax */
.canales-bg {
    position: absolute;
    top: -35%;
    left: 0;
    width: 100%;
    height: 160%; /* Altura extra para el desplazamiento de GSAP */
    background-image: url("../images/growth-engine.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
    will-change: transform;
}

/* Gradiente para mantener el texto legible */
.canales-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        #000 0%,
        rgba(0,0,0,0.82) 28%,
        rgba(0,0,0,0.45) 45%,
        transparent 62%
        );
    z-index: 1;
    pointer-events: none;
}

/* Mantener el contenido encima del fondo y overlay */
.section-canales .engine-glow,
.section-canales .container {
    position: relative;
    z-index: 2;
}


.section-engine{
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
        90deg,
        #000 0%,
        rgba(0,0,0,0.82) 28%,
        rgba(0,0,0,0.45) 45%,
        transparent 62%
        ),
        url("../images/growth-engine.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    padding: clamp(90px, 10vw, 150px) 0;
}

.titulos_secciones {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
    line-height: 1.1;
}

.subtitulos {
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    transition: 0.3s ease;
    margin-bottom: 12px;
}

.engine-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.engine-content{
    position: relative;
    z-index: 2;
    /* max-width: 540px;*/
    padding-left: clamp(10px, 2vw, 40px);
}
.engine-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 30px;
    opacity: 0.65;
}
.engine-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    color: white;
    margin-bottom: 30px;
}
.engine-text {
    color: rgba(255,255,255,0.72);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
}
.engine-components h3 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.8rem;
}
.engine-components ul {
    padding-left: 20px;
    margin-bottom: 50px;
}
.engine-components li {
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
    font-size: 1.1rem;
}
.engine-cta {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: 10px;
    background: #ffffff;
    color: black;
    font-weight: 600;
    font-size: 1rem;
    box-shadow:
        0 0 20px rgba(0, 51, 255, 0.35);

}
@media (max-width: 991px){

    .section-engine{
        background:
            linear-gradient(
            180deg,
            rgba(0,0,0,0.65) 0%,
            rgba(0,0,0,0.9) 100%
            ),
            url("../images/growth-engine.webp");
        background-position: center;
    }
    .engine-content{
        max-width: 100%;
    }
    .engine-title{
        margin: 24px 0;
    }
    .engine-highlight{
        width: 100%;
    }

}
/* =========================
   END ENGINE BLOCK
========================= */
.section-tech{
    position: relative;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
        90deg,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.55) 35%,
        rgba(0,0,0,0.15) 65%,
        rgba(0,0,0,0.5) 100%
        ),
        url("../images/tech-bg.webp");
    background-size: cover;
    background-position: center;
    animation: none;
}

@media (max-width: 991px){
    .section-tech{
        min-height: auto;
        padding: 120px 0;
        background-position: center;
    }


}
/* =========================
   END TECH OVERLAY
========================= */

/* =========================
   PLATFORM BLOCK
========================= */
.section-platform{
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
        /*270deg,*/
        #000 0%,
        rgba(0,0,0,0.82) 28%,
        rgba(0,0,0,0.45) 45%,
        transparent 62%
        );
    /*        url("../images/plataforma-cobro.webp");*/
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    padding: clamp(90px, 10vw, 150px) 0;
}

.platform-money {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.money-content{
    position: relative;
    z-index: 2;
    max-width: 540px;
    padding-left: clamp(10px, 2vw, 40px);
}
.money-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 23px;
    opacity: 0.65;
}
.money-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    color: white;
    margin-bottom: 30px;
}
.money-text {
    color: rgba(255,255,255,0.72);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
}
.money-components h3 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.8rem;
}
.money-components ul {
    padding-left: 20px;
    margin-bottom: 50px;
}
.money-components li {
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
    font-size: 1.1rem;
}
.money-cta {
    display: inline-flex;
    align-items: center;
    padding: 22px 34px;
    border-radius: 16px;
    background: #0033cc;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    box-shadow:
        0 0 20px rgba(0, 51, 255, 0.35);

}
@media (max-width: 991px){

    .section-platform{
        padding: 110px 0;
        background:
            linear-gradient(
            180deg,
            rgba(0,0,0,0.78) 0%,
            rgba(0,0,0,0.88) 45%,
            rgba(0,0,0,0.96) 100%
            ),
            url("../images/crm-ia.webp");
        background-position: center center;
        background-size: cover;
    }
    .money-content{
        max-width: 100%;
    }
    .money-title{
        margin: 24px 0;
    }
    .money-highlight{
        width: 100%;
    }

}
/* =========================
   END PLATFORM BLOCK
========================= */
/* =========================
   CRM BLOCK
========================= */


.section-crm{
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
        90deg,
        #000 0%,
        rgba(0,0,0,0.82) 28%,
        rgba(0,0,0,0.45) 45%,
        transparent 62%
        ),
        url("../images/crm-ia.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    padding: clamp(90px, 10vw, 150px) 0;
}
@media (max-width: 991px){

    .section-crm{
        background:
            linear-gradient(
            180deg,
            rgba(0,0,0,0.65) 0%,
            rgba(0,0,0,0.9) 100%
            ),
            url("../images/crm-ia.webp");
        background-position: center;
    }
}

/* =========================
   END CRM BLOCK
========================= */

/* =========================
   AUTOMOTION BLOCK
========================= */
.section-automotion{
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
        270deg,
        #000 0%,
        rgba(0,0,0,0.82) 28%,
        rgba(0,0,0,0.45) 45%,
        transparent 62%
        ),
        url("../images/auntomation.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    padding: clamp(90px, 10vw, 150px) 0;
}


@media (max-width: 991px){

    .section-automotion{
        padding: 110px 0;
        background:
            linear-gradient(
            180deg,
            rgba(0,0,0,0.78) 0%,
            rgba(0,0,0,0.88) 45%,
            rgba(0,0,0,0.96) 100%
            ),
            url("../images/auntomation.webp");
        background-position: center center;
        background-size: cover;
    }

}

/* =========================
   END AUTOMOTION BLOCK
========================= */
/* =========================
   INNOVACION BLOCK
========================= */


.bg-inovvacion {
    width: 100%;
    min-height: 100vh;
    background:

        /* glow derecho */
        radial-gradient(
        circle at right center,
        rgba(0, 50, 140, 0.28) 0%,
        rgba(0, 40, 120, 0.14) 12%,
        transparent 30%
        ),
        /* degradado principal */
        linear-gradient(
        90deg,
        #000b2a 0%,
        #020311 35%,
        #000000 100%
        );

    overflow: hidden;
    position: relative;
}

.bg-inovvacion-1::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
        circle at 15% 50%,
        rgba(0, 40, 120, 0.18),
        transparent 35%
        ),
        radial-gradient(
        circle at 85% 50%,
        rgba(0, 40, 120, 0.15),
        transparent 20%
        );

    filter: none;
    opacity: 0.75;
    pointer-events: none;
}


/* =========================================================
   PARALLAX BACKGROUND
========================================================= */

/* Seccion contenedora con mascara */
.has-parallax {
    position: relative;
    overflow: hidden;
    background-color: #000000; /* Previene parches blancos */
}

/* Capa de fondo animada generica */
.parallax-bg {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 140%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
    will-change: transform;
}

.scroll-depth-active[data-scroll-depth] > .parallax-bg {
    top: calc(var(--scroll-depth) / -2 - 4px);
    height: calc(100% + var(--scroll-depth) + 8px);
}

/* Overlay opcional para legibilidad */
.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Asegura que el contenido quede arriba */
.has-parallax > .container,
.has-parallax > div:not(.parallax-bg):not(.parallax-overlay) {
    position: relative;
    z-index: 2;
}

/* Máscara contenedora genérica */
.parallax-media-wrapper {
    position: relative;
    width: 100%;
    height: 600px; /* Puedes sobreescribir esta altura en cada elemento si cambia */
    overflow: hidden;
}

/* Elemento interno con la imagen */
.parallax-media-target {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; /* O 'cover', según la necesidad del diseño */
    will-change: transform;
}
/* Remueve fondos heredados para transparentar hasta la capa Parallax */
.seccion-contacto .fondo_contacto,
.seccion-contacto .section-contact {
    background: transparent !important;
    background-image: none !important;
}

/* Asegura el orden jerárquico de las capas */
.seccion-contacto #contact {
    position: relative;
    z-index: 2;
}
/* Separamos los gradientes a su propia capa */
.header-gradients {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(0, 102, 255, 0.4), transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(255, 0, 128, 0.3), transparent 60%);
    z-index: 1; /* Queda por encima de la imagen animada */
    pointer-events: none;
}

/* Ajustes para la capa animada */
.header-inner .parallax-bg {
    background-position: right center;
    z-index: 0;
}

/* Contenedor fluido y totalmente responsivo */
.bg-decorative-spinner{
    background-color: black;
}

:root {
    --spinner-color: #ed1568; /* Color único personalizable (ej. Azul cyan / blanco / acento) */
    --bg-color: #000000;       /* Fondo oscuro para destacar el elemento */
    --spinner-glow: rgba(96, 165, 250, 0.35); /* Glow sutil del mismo color */
}

.decorative-spinner {
    width: min(60vw, 60vh, 200px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.spinner-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

@keyframes rotateClockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateCounterClockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.ring {
    transform-origin: center;
    stroke: var(--spinner-color);
    stroke-linecap: round;
    filter: drop-shadow(0px 0px 5px var(--spinner-glow));
}

/* Animaciones individuales alternadas a distintas velocidades para dinamismo */
.ring-1 {
    animation: rotateClockwise 14s linear infinite;
    opacity: 0.95;
}
.ring-2 {
    animation: rotateCounterClockwise 11s linear infinite;
    opacity: 0.85;
}
.ring-3 {
    animation: rotateClockwise 8.5s linear infinite;
    opacity: 0.90;
}
.ring-4 {
    animation: rotateCounterClockwise 6.5s linear infinite;
    opacity: 0.80;
}
.ring-5 {
    animation: rotateClockwise 5s linear infinite;
    opacity: 0.85;
}
.ring-6 {
    animation: rotateCounterClockwise 3.8s linear infinite;
    opacity: 0.75;
}
.ring-7 {
    animation: rotateClockwise 2.8s linear infinite;
    opacity: 0.90;
}
.ring-8 {
    animation: rotateCounterClockwise 1.8s linear infinite;
    opacity: 1;
}

.motion-paused .ring,
.motion-paused .dna {
    animation-play-state: paused !important;
}




@media (max-width: 992px){
    .navbar-expand-lg .navbar-nav .nav-link {
        text-align: center;
    }
}
@media (max-width: 1200px) {

    .logo-navbar {
        width: 200px;
    }

}
@media (max-width: 1290px) {

    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: 10px;
        padding-left: 10px;
    }

    .navbar-collapse{
        background: rgba(0,0,0,0.92);
        /*        backdrop-filter: blur(10px);*/
        padding: 20px;
        margin-top: 15px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.08);
        transition: all .3s ease;
    }
    .nav-item{
        text-align: center;
    }
}

@media (max-width: 768px) {

    .fondo_web_01 {
        background-position-x: -804px;

    }

    .fondo_crm {
        background-position: left center;

    }


    .header_marketing {
        background-position: left center;

    }


    .header_software {
        background-position: left center;

    }

    .fondo_contacto {
        padding-top: 20px;

    }

    .margen_top_boton {
        margin-top: -5px;
    }

    .fondo_softwareeintegraciones {

        padding: clamp(20px, 10vw, 20px) 0;

    }


    .header-casos {
        background-position: center center;
    }


    .section_diagnostico {
        min-height: 440px;
    }


    .section-platform {
        padding: 0px 0;
    }



    .circle_casos {
        width: 100%;
    }

    .service-item {
        max-width: 100%;
    }


    .conversion-btn {
        width: 100%;
    }

    .logo-navbar {
        width: 160px;
    }
    .bg-layer{
        background-position: center top;
    }

    .section-IA {
        background-position: center;

    }

    .f_innovacion {

        height: 400px;

    }

    .section-conversion {
        padding: clamp(20px, 10vw, 20px) 0 0 0;
    }

    .conversion-title {
        max-width: 100%;
    }

    .section-logos {
        padding: clamp(20px, 8vw, 20px) 0;
    }

    .section-canales {

        padding: clamp(20px, 10vw, 20px) 0;
    }

    .section-flujos {
        padding: clamp(20px, 10vw, 20px) 0;
    }

    .section-desarrollo {
        padding: clamp(20px, 10vw, 20px) 0;
    }

    .section-IA {
        padding: clamp(20px, 6vw, 20px) 0;
    }

    .bg-video {
        display: none;
    }

}

/* =========================================================
   HOME: RESPONSIVE QA
========================================================= */
@media (max-width: 991px) {
    .home-page .site-footer .footer-image {top: 0; margin: 0 auto 32px;}
    .home-page .site-footer .footer-menu {margin-bottom: 32px;}
}
@media (min-width: 768px) and (max-width: 991px) {
    .home-page #servicios .col-md-3,
    .home-page #abugaber .col-md-3 {flex: 0 0 auto; width: 50%;}
}
@media (max-width: 768px) {
    .home-page .navbar-scroll {padding: 16px 12px;}
    .home-page .bg-slider .carousel-item {height: calc(100svh - 24px); min-height: 660px;}
    .home-page .bg-slider .custom-caption {left: 0; right: 0; bottom: 84px; max-width: none; padding: 24px; text-align: center;}
    .home-page .bg-slider .custom-caption .btn {display: inline-flex; align-items: center; justify-content: center; min-height: 44px;}
    .home-page .bg-slider .carousel-control-prev,
    .home-page .bg-slider .carousel-control-next {top: auto; bottom: 24px; width: 44px; height: 44px; z-index: 4;}
    .home-page .bg-slider .carousel-control-prev {left: 16px;}
    .home-page .bg-slider .carousel-control-next {right: 16px;}
    .home-page .section-conversion .conversion-content > .conversion-btn + .conversion-btn {margin-top: 12px;}
    .home-page #contacto .section-contact {padding: 32px 12px;}
    .home-page #contacto .form-contact {margin: 32px 0 0; padding: 28px 24px; border-radius: 8px;}
    .home-page #contacto .heading-title {font-size: 36px; line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere;}
    .home-page #contacto .contact-item .icon {flex-shrink: 0;}
    .home-page #contacto .contact-item .content {min-width: 0; overflow-wrap: anywhere;}
    .home-page #contacto input,
    .home-page #contacto textarea {font-size: 16px;}
    .home-page #contacto .tf-btn {white-space: normal; line-height: 1.35; min-height: 48px;}
    .home-page .site-footer .footer-copyright {white-space: normal; min-width: 0; max-width: 100%; overflow-wrap: anywhere; line-height: 1.5;}
}
@media (max-width: 575px) {
    .home-page .bg-slider .custom-caption h1 {font-size: 32px; line-height: 1.1; overflow-wrap: anywhere;}
}

/* =========================================================
   HOME: VERTICAL PROSPECT AUTOMATION
========================================================= */
.lead-flow-layout {row-gap: 48px;}
.section-flujos[data-lead-flow] .money-title {font-size: 44px; line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere;}
.lead-vertical {position: relative; max-width: 480px; padding: 24px 28px 24px 0;}
.lead-vertical h3 {margin: 0 0 28px; font-size: 28px; line-height: 1.2; letter-spacing: 0; color: #fff;}
.lead-v-steps {position: relative; list-style: none; padding: 0; margin: 0;}
.lead-v-steps::before,
.lead-v-steps::after {content: ""; position: absolute; left: 23px; top: 24px; height: var(--lead-v-distance, calc(100% - 90px)); width: 2px; pointer-events: none;}
.lead-v-steps::before {background: #68616a;}
.lead-v-steps::after {background: #ed1568; transform: scaleY(var(--lead-v-progress, 1)); transform-origin: top;}
.lead-v-step {position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; min-height: 140px; padding-bottom: 24px; color: #fff;}
.lead-v-step:last-child {min-height: 90px; padding-bottom: 0;}
.lead-v-icon {position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; background: #151116; border: 1px solid #a58d9b; border-radius: 50%; color: #eed7e3; font-size: 23px; line-height: 1;}
.lead-v-step > div {min-width: 0; align-self: start; padding: 10px 14px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.76);}
.lead-v-number {display: block; margin-bottom: 6px; font-size: 11px; line-height: 1; color: #c0afba; font-variant-numeric: tabular-nums;}
.lead-v-step h4 {margin: 0 0 6px; font-size: 17px; line-height: 1.3; letter-spacing: 0; color: #fff;}
.lead-v-step p {margin: 0; font-size: 14px; line-height: 1.45; color: #d0c8ce;}
.lead-v-actions {display: grid; gap: 8px; list-style: none; padding: 4px 0 0; margin: 0; font-size: 13px; line-height: 1.35; color: #d0c8ce;}
.lead-v-actions li {display: flex; align-items: flex-start; gap: 8px;}
.lead-v-actions i {color: #9db7ff; flex-shrink: 0;}
.lead-v-step.is-active .lead-v-icon {border-color: #ed1568; background: #411029; color: #fff; box-shadow: 0 0 0 5px rgba(237, 21, 104, 0.13);}
.lead-v-step.is-complete .lead-v-icon {border-color: #638aff; color: #acc1ff;}
.lead-v-step:last-child.is-active .lead-v-icon,
.lead-v-step:last-child.is-complete .lead-v-icon,
.lead-vertical:not(.lead-v-ready) .lead-v-step:last-child .lead-v-icon {border-color: #66d7ae; color: #66d7ae;}
.lead-vertical:not(.lead-v-ready) .lead-v-steps::after {background: #638aff;}
@media (max-width: 991px) {
    .section-flujos[data-lead-flow] > .parallax-bg {background-position: left center;}
    .lead-vertical {max-width: 540px; padding: 0; margin: 0 auto;}
    .section-flujos[data-lead-flow] .money-content {margin: 0 auto;}
}
@media (max-width: 575px) {
    .section-flujos[data-lead-flow] .money-title {font-size: 32px;}
    .lead-vertical h3 {font-size: 24px;}
    .lead-v-step {grid-template-columns: 44px minmax(0, 1fr); gap: 12px; min-height: 148px;}
    .lead-v-step:last-child {min-height: 100px;}
    .lead-v-icon {width: 44px; height: 44px; font-size: 21px;}
    .lead-v-steps::before, .lead-v-steps::after {left: 21px; top: 22px; height: var(--lead-v-distance, calc(100% - 100px));}
    .lead-v-step > div {padding: 9px 10px 12px;}
    .lead-v-step h4 {font-size: 16px;}
    .lead-v-step p {font-size: 13px;}
    .lead-v-actions {font-size: 12px;}
}

/* =========================================================
   HOME: BEFORE / AFTER COMPARISON
========================================================= */
.comparison-band {
    padding: 80px 0;
    background: #000;
    color: #f5f5f7;
}

.comparison-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.comparison-header h2 {
    margin: 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
}

.comparison-phase {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 224px;
    height: 24px;
    flex-shrink: 0;
    color: #a8a8b4;
    font-size: 14px;
    line-height: 1;
}

.comparison-phase[hidden] {
    display: none;
}

.comparison-phase-track {
    height: 2px;
    flex: 1;
    background: #3e3e48;
}

.comparison-phase-track span {
    display: block;
    width: 100%;
    height: 100%;
    background: #ed1568;
    transform: scaleX(var(--comparison-progress, 0));
    transform-origin: left;
}

.comparison-phase-before {
    color: #fff;
    font-weight: 600;
}

[data-comparison][data-state="after"] .comparison-phase-before {
    color: #a8a8b4;
    font-weight: 400;
}

[data-comparison][data-state="after"] .comparison-phase-after {
    color: #ff639e;
    font-weight: 600;
}

.comparison-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 20px;
    max-width: 760px;
}

.comparison-summary p {
    margin: 0;
    color: #c5c5cd;
    font-size: 18px;
    line-height: 1.6;
}

.comparison-ready .comparison-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.comparison-ready .comparison-summary p {
    grid-area: 1 / 1;
}

.comparison-ready .comparison-summary .is-inactive {
    visibility: hidden;
}

.comparison-scene {
    position: relative;
    isolation: isolate;
    height: 500px;
    margin-top: 32px;
}

.comparison-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
}

.comparison-links-mobile {
    display: none;
}

.comparison-links path {
    fill: none;
    stroke: #638aff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.comparison-node {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 156px;
    height: 100px;
    padding: 10px 8px;
    border: 1px solid #44444c;
    border-radius: 8px;
    background: #151518;
    color: #f5f5f7;
    transform: translate(-50%, -50%) rotate(var(--comparison-angle, 0deg));
    text-align: center;
    pointer-events: none;
}

.comparison-node i {
    font-size: 26px;
    line-height: 1;
}

.comparison-node span {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.comparison-web {left: 15%; top: 28%; --comparison-angle: -7deg;}
.comparison-whatsapp {left: 40%; top: 63%; --comparison-angle: 5deg;}
.comparison-social {left: 64%; top: 30%; --comparison-angle: -5deg;}
.comparison-excel {left: 85%; top: 70%; --comparison-angle: 7deg;}
.comparison-web i {color: #90aeff;}
.comparison-whatsapp i {color: #66d7ae;}
.comparison-social i {color: #ed729e;}
.comparison-excel i {color: #a5d5ba;}

.comparison-system {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.88);
    border-color: #46547d;
    background: #10151f;
}

.comparison-crm {left: 50%; top: 50%; border-color: #ed1568; background: #251019;}
.comparison-crm i {color: #ff639e;}
.comparison-ia {left: 82%; top: 20%;}
.comparison-automation {left: 82%; top: 50%;}
.comparison-dashboard {left: 82%; top: 80%;}
.comparison-system:not(.comparison-crm) i {color: #90aeff;}

[data-comparison][data-state="after"] .comparison-web {left: 18%; top: 12%;}
[data-comparison][data-state="after"] .comparison-whatsapp {left: 18%; top: 37%;}
[data-comparison][data-state="after"] .comparison-social {left: 18%; top: 63%;}
[data-comparison][data-state="after"] .comparison-excel {left: 18%; top: 88%;}

[data-comparison][data-state="after"] .comparison-node {
    transform: translate(-50%, -50%);
}

[data-comparison][data-state="after"] .comparison-system {
    opacity: 1;
    visibility: visible;
}

[data-comparison][data-state="after"] .comparison-links {
    opacity: 1;
    clip-path: inset(0);
}

@media (max-width: 767px) {
    .comparison-band {padding: 56px 0;}
    .comparison-header {align-items: flex-start; flex-direction: column; gap: 20px;}
    .comparison-header h2 {font-size: 32px;}
    .comparison-summary {grid-template-columns: minmax(0, 1fr);}
    .comparison-summary p {font-size: 16px;}
    .comparison-scene {height: 620px; margin-top: 24px;}
    .comparison-links-desktop {display: none;}
    .comparison-links-mobile {display: block; clip-path: inset(0 0 100% 0);}
    .comparison-node {width: 40%; max-width: 156px; height: 84px; gap: 8px;}
    .comparison-node span {font-size: 14px;}
    .comparison-node i {font-size: 24px;}
    .comparison-web {left: 25%; top: 19%;}
    .comparison-whatsapp {left: 75%; top: 38%;}
    .comparison-social {left: 25%; top: 61%;}
    .comparison-excel {left: 75%; top: 82%;}
    [data-comparison][data-state="after"] .comparison-web {left: 25%; top: 14%;}
    [data-comparison][data-state="after"] .comparison-whatsapp {left: 75%; top: 14%;}
    [data-comparison][data-state="after"] .comparison-social {left: 25%; top: 32%;}
    [data-comparison][data-state="after"] .comparison-excel {left: 75%; top: 32%;}
    .comparison-crm {left: 50%; top: 53%;}
    .comparison-ia {left: 25%; top: 75%;}
    .comparison-automation {left: 75%; top: 75%;}
    .comparison-dashboard {left: 50%; top: 92%;}
}

.comparison-scroll {
    padding: 0;
}

.comparison-scroll .comparison-stage {
    padding-top: 32px;
    padding-bottom: 32px;
}

.comparison-scroll .comparison-scene {
    height: clamp(420px, calc(100svh - 220px), 500px);
}

@media (min-width: 768px) and (max-height: 759px) {
    .comparison-scroll .comparison-stage {padding-top: 16px; padding-bottom: 16px;}
    .comparison-scroll .comparison-header h2 {font-size: 36px;}
    .comparison-scroll .comparison-summary {margin-top: 12px;}
    .comparison-scroll .comparison-summary p {font-size: 16px; line-height: 1.5;}
    .comparison-scroll .comparison-scene {margin-top: 16px;}
}

@media (max-width: 767px) {
    .comparison-scroll .comparison-stage {padding-top: 24px; padding-bottom: 24px;}
    .comparison-scroll .comparison-header {gap: 12px;}
    .comparison-scroll .comparison-summary {margin-top: 16px;}
    .comparison-scroll .comparison-scene {height: clamp(440px, calc(100svh - 300px), 560px); margin-top: 16px;}
    .comparison-scroll .comparison-node {height: 68px; gap: 6px; padding: 8px;}
    .comparison-scroll .comparison-node i {font-size: 20px;}
}

/* =========================================================
   PERFORMANCE — GPU COMPOSITING
========================================================= */

/* Elementos que GSAP mueve */
.parallax-bg,
.parallax-media-target,
.canales-bg {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* El contenido de las secciones con parallax permanece
   independiente de la capa animada */



/* Evita animaciones/transiciones innecesarias durante
   el movimiento del scroll */
.has-parallax,
[data-parallax-div] {
    isolation: isolate;
}

/* =========================================================
   PERFORMANCE SAFEGUARD
   Non-essential CSS motion is disabled for users who request
   reduced motion at the OS/browser level.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .bg-video {
        display: none;
    }

    .parallax-bg,
    .parallax-media-target,
    .bg-slider .carousel-item img {
        transform: none !important;
    }
}