/* dna*/

#dna-container{
    position: absolute;
    left: 50%;
    /* top: 104px; */
    /* bottom: 50px; */
    width: 2.5em;
    margin-left: -100px;
    font-size: 30px;
    margin-bottom: 61px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.dna{
    position:absolute;
    height:.5em;
    width:.5em;
    background:#ed1568;
    border-radius:50%;
    animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;
    -webkit-animation-duration:1.75s;-moz-animation-duration:1.75s;-o-animation-duration:1.75s;-ms-animation-duration:1.75s;animation-duration:1.75s;
}
/*Animation Names*/
#dna1{-webkit-animation-name:dna1; 	 -moz-animation-name:dna1;  -o-animation-name:dna1;  animation-name:dna1;}
#dna2{-webkit-animation-name:dna2; 	 -moz-animation-name:dna2;  -o-animation-name:dna2;  animation-name:dna2;}  /*Delays*/
#dna3{-webkit-animation-name:dna3; 	 -moz-animation-name:dna3;  -o-animation-name:dna3;  animation-name:dna3;	 -webkit-animation-delay:.2s; animation-delay:.2s;}
#dna4{-webkit-animation-name:dna4; 	 -moz-animation-name:dna4;  -o-animation-name:dna4;  animation-name:dna4;	 -webkit-animation-delay:.2s; animation-delay:.2s;}
#dna5{-webkit-animation-name:dna5; 	 -moz-animation-name:dna5;  -o-animation-name:dna5;  animation-name:dna5;	 -webkit-animation-delay:.4s; animation-delay:.4s;}
#dna6{-webkit-animation-name:dna6; 	 -moz-animation-name:dna6;  -o-animation-name:dna6;  animation-name:dna6;	 -webkit-animation-delay:.4s; animation-delay:.4s;}
#dna7{-webkit-animation-name:dna7; 	 -moz-animation-name:dna7;  -o-animation-name:dna7;  animation-name:dna7;	 -webkit-animation-delay:.6s; animation-delay:.6s;}
#dna8{-webkit-animation-name:dna8; 	 -moz-animation-name:dna8;  -o-animation-name:dna8;  animation-name:dna8;  -webkit-animation-delay:.6s; animation-delay:.6s;}    
#dna9{-webkit-animation-name:dna9; 	 -moz-animation-name:dna9;  -o-animation-name:dna9;  animation-name:dna9;	 -webkit-animation-delay:.8s; animation-delay:.8s;}
#dna10{-webkit-animation-name:dna10; -moz-animation-name:dna10; -o-animation-name:dna10; animation-name:dna10; -webkit-animation-delay:.8s; animation-delay:.8s;}
#dna11{-webkit-animation-name:dna11; -moz-animation-name:dna11; -o-animation-name:dna11; animation-name:dna11; -webkit-animation-delay:1s;  animation-delay:1s;}
#dna12{-webkit-animation-name:dna12; -moz-animation-name:dna12; -o-animation-name:dna12; animation-name:dna12; -webkit-animation-delay:1s;  animation-delay:1s;}

/*Key Frames*/
@keyframes dna1{0%{left:  0em;}    			  25%{height:.75em;width:.75em;}	50%{left: 2em;} 	75%{height:.25em;width:.25em;}	100%{left: 0em;}} 
@keyframes dna2{0%{right: 0em;}    			  25%{height:.25em;width:.25em;}	50%{right:2em;}  	75%{height:.75em;width:.75em;}	100%{right:0em;}} 
@keyframes dna3{0%{left:  0em; top:1em;} 	25%{height:.75em;width:.75em;}	50%{left: 2em;}  	75%{height:.25em;width:.25em;}	100%{left: 0em; top:1em;}} 
@keyframes dna4{0%{right: 0em; top:1em;}	25%{height:.25em;width:.25em;}	50%{right:2em;}  	75%{height:.75em;width:.75em;} 	100%{right:0em; top:1em;}} 
@keyframes dna5{0%{left:  0em; top:2em;} 	25%{height:.75em;width:.75em;}	50%{left: 2em;}  	75%{height:.25em;width:.25em;} 	100%{left: 0em; top:2em;}} 
@keyframes dna6{0%{right: 0em; top:2em;}	25%{height:.25em;width:.25em;}	50%{right:2em;}  	75%{height:.75em;width:.75em;} 	100%{right:0em; top:2em;}} 
@keyframes dna7{0%{left:  0em; top:3em;}  25%{height:.75em;width:.75em;}	50%{left: 2em;}  	75%{height:.25em;width:.25em;} 	100%{left: 0em; top:3em;}} 
@keyframes dna8{0%{right: 0em; top:3em;}  25%{height:.25em;width:.25em;}	50%{right:2em;}  	75%{height:.75em;width:.75em;} 	100%{right:0em; top:3em;}} 
@keyframes dna9{0%{left:  0em; top:4em;} 	25%{height:.75em;width:.75em;}	50%{left: 2em;}  	75%{height:.25em;width:.25em;} 	100%{left: 0em; top:4em;}} 
@keyframes dna10{0%{right:0em; top:4em;}	25%{height:.25em;width:.25em;}	50%{right:2em;}  	75%{height:.75em;width:.75em;} 	100%{right:0em; top:4em;}} 
@keyframes dna11{0%{left: 0em; top:5em;} 	25%{height:.75em;width:.75em;}	50%{left: 2em;}  	75%{height:.25em;width:.25em;} 	100%{left: 0em; top:5em;}} 
@keyframes dna12{0%{right:0em; top:5em;}	25%{height:.25em;width:.25em;}	50%{right:2em;}  	75%{height:.75em;width:.75em;} 	100%{right:0em; top:5em;}}


/*fin dna*/

.diagnostico{
    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/crm-ia.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    padding: clamp(90px, 10vw, 150px) 0;
    width: 100%;
    height: auto;
    min-height: 600px;
}



.bi::before, [class*=" bi-"]::before, [class^=bi-]::before {

    font-size: 23px;
}


.form-card-subtitle_footer {
    font-size: 0.78rem;
    color: #ffffff;
    margin-bottom: 1.8rem;
    font-size: 16px;
    line-height: 15px;
}

.form-card-title_footer {
    font-size: 23px;
    line-height: 21px;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #ffffff;
}


.texto_footer {
    color: #ffffff;
    font-size: 20px;
}

.header_metodologia {
    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_metodologia.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 0;
}


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

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

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

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



.quienes_icon_01 {
    position: relative;
    width: 100%;
    height: 111px;
    background-image: url("../images/quienes_icon_01.png");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-bottom: 30px;
}

.quienes_icon_01:hover{
    background-image: url("../images/quienes_icon_01_on.png");
}


.margen_5rem{
    padding: 5rem;
}
.quienes_icon_02 {
    position: relative;
    width: 100%;
    height: 111px;
    background-image: url("../images/quienes_icon_02.png");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-bottom: 30px;
}

.quienes_icon_02:hover{
    background-image: url("../images/quienes_icon_02_on.png");
}

.quienes_icon_03 {
    position: relative;
    width: 100%;
    height: 111px;
    background-image: url("../images/quienes_icon_03.png");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-bottom: 30px;
}

.f_casos {
    position: relative;
    width: 100%;
    height: 700px;
    background-image: url("../images/casos_exito.png");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    margin-top: 15px;
    margin-bottom: 15px;
}

.slogan_contacto {
    font-size: 35px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 25px;
}

.relativo{
    position: relative !important;
    float: left !important;

}

.redes_blanco{
    color: #ffffff !important;
    margin-right: 10px;
}

.redes_blanco:hover{
    color: #9f9d9d !important;
}

.subtitulo_contacto {
    color: #ffffff;
    font-size: 14px;
    text-align: left;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Inter_bold';
    line-height: 1;
}

.margenbottom_100{
    margin-bottom: 100px;
}

.padding_30{
    padding-left: 30px;
}

.ppadding_20{
    padding-left: 15px;
}

.absoluto{
    position: absolute;

}



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


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

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

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

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


.fondo_casos_exito{
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    background-image: url(../images/fondo_casos.jpg);
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 800px;
    overflow: hidden;
}

.bullet_innovacion{
    position: relative;
    width: 86px;
    height: 65px;
    margin-right: 5px;
    background-image: url(../images/bullet_innovacion.png);
    background-size: auto;
    background-repeat: no-repeat;
    margin-top: 5px;
    margin-right: 15px;
}

.texto_blanco{
    color: #ffffff;
}
.circle_casos{
    background-color: #072586;
    width: 50px;
    height: 50px;
    padding: 5px;
    opacity: .4;
    border-radius: 36px;
    color: #ffffff;
    font-family: 'Inter_bold';
    text-align: center;
    font-size: 26px;
}


.circle_casos:hover{
    opacity: .9;
}


/*contacto*/

.form-control {
    background-color:#3f3f3f !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: #cccccc!important;
    font-size: 16px !important;
    padding: 0.75rem 1rem !important;
    transition: border-color 0.2s !important;
}

.form-control::placeholder { color: var(--muted) !important; }
.form-control:focus {
    border-color: #555 !important;
    box-shadow: none !important;
    outline: none !important;
}

textarea.form-control { resize: none; }


/* ── FOOTER ── */

.form-card {
    background: #2a2a2a;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.5rem 2rem;
}
.form-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #ffffff;
}
.form-card-subtitle {
    font-size: 0.78rem;
    color: #ffffff;
    margin-bottom: 1.8rem;
}



/* ── BUTTON ── */
.btn-send {
    background: transparent;
    color: #ffffff;
    /* color: var(--bg); */
    border-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    /* border: none; */
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.7rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.btn-send:hover {
    background: #ffffff;
    color: #000000;
}
.btn-send .bi { font-size: 1rem; }





.contact-meta-value {
    font-size: 0.85rem;
    color: #ffffff;
}
.site-footer {
    /* border-top: 1px solid var(--border); */
    padding: .5rem 0;
    font-size: 0.7rem;
    color: #535353;
    font-family: 'Inter_bold';
}
/* */




.texto_innovacion{
    color: #9d9c9c;
    font-size: 15px;
}

.texto_general{
    color: #9d9c9c      ;
    font-size: 18px;
}

.texto_bold{
    font-family: 'Inter_medium';
    color:#e0dede;
}

.subtitulo_innovacion{
    color: #ffffff;
    font-size: 18px;
    text-align: left;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Inter_bold';
    line-height: 1;
}

.subtitulo{
    color: #ffffff;
    font-size: 24px;
    text-align: left;
    margin-bottom: 50px;
    margin-top: 10px;
    font-family: 'Inter_bold';
    line-height: 1;
}

.margentop_50{
    margin-top: 50px;
}
.margentop_100{
    margin-top: 100px;
}

.margentop_150{
    margin-top: 150px;
}

.fondo_innovacion{
    background-color: #000000;
    padding: 20px;
}

.quienes_icon_03:hover{
    background-image: url("../images/quienes_icon_03_on.png");
}

.f_innovacion {
    position: relative;
    width: 100%;
    height: 600px;
    background-image: url("../images/f_innovacion.webp");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}

.quienes_icon_04 {
    position: relative;
    width: 100%;
    height: 111px;
    background-image: url("../images/quienes_icon_04.png");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-bottom: 30px;
}

.quienes_icon_04:hover{
    background-image: url("../images/quienes_icon_04_on.png");
}

.back_negro_quienes{
    background-color: #000000;
    padding: 10px;
    width: 100%;
    min-height: 100px;
    height: auto;
    overflow: hidden;
}
/* ── STAT CARD ── */
.stat-card {
    position: relative;
    background: #000000;
    padding: 42px 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: background 0.35s ease;
    /* Corner brackets via pseudo + box-shadow trick */
}

/* Corner bracket lines using box-shadow on pseudo-elements */
.stat-card::before,
.stat-card::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    transition: border-color 0.35s ease, width 0.35s ease, height 0.35s ease;
}

/* Top-left bracket */
.stat-card::before {
    top: 8px;
    left: 8px;
    border-top: 1.5px solid rgba(255,255,255,0.30);
    border-left: 1.5px solid rgba(255,255,255,0.30);
}

/* Bottom-right bracket */
.stat-card::after {
    bottom: 8px;
    right: 8px;
    border-bottom: 1.5px solid rgba(255,255,255,0.30);
    border-right: 1.5px solid rgba(255,255,255,0.30);
}

/* Top-right and bottom-left brackets via inner spans */
.stat-card .bracket-tr,
.stat-card .bracket-bl {
    position: absolute;
    width: 18px;
    height: 18px;
    transition: border-color 0.35s ease, width 0.35s ease, height 0.35s ease;
}

.stat-card .bracket-tr {
    top: 8px; right: 8px;
    border-top: 1.5px solid rgba(255,255,255,0.30);
    border-right: 1.5px solid rgba(255,255,255,0.30);
}

.stat-card .bracket-bl {
    bottom: 8px; left: 8px;
    border-bottom: 1.5px solid rgba(255,255,255,0.30);
    border-left: 1.5px solid rgba(255,255,255,0.30);
}

/* ── NUMBER – outline style (stroke text) ── */
.stat-number {
    font-family: 'Inter', sans-serif;
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 14px;
    letter-spacing: -0.02em;

    /* Outline text effect */
    color: transparent;
    -webkit-text-stroke: 1.8px rgba(255,255,255,0.40);
    text-stroke: 1.8px rgba(255,255,255,0.40);

    transition:
        color 0.35s ease,
        -webkit-text-stroke 0.35s ease,
        text-shadow 0.35s ease;
}

/* ── LABEL ── */
.stat-label {
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
    text-align: center;
    transition: color 0.35s ease;
}

/* ══════════════════════════
   HOVER STATE
══════════════════════════ */
.stat-card:hover {
    background: #010b22;
}

/* Brackets glow gold on hover */
.stat-card:hover::before,
.stat-card:hover::after {
    border-color: rgba(253, 2, 108,0.70);
    width: 22px;
    height: 22px;
}
.stat-card:hover .bracket-tr,
.stat-card:hover .bracket-bl {
    border-color: rgba(253, 2, 108,0.70);
    width: 22px;
    height: 22px;
}

/* Number: filled gold + glow */
.stat-card:hover .stat-number {
    color: #fd006b;
    -webkit-text-stroke: 0px transparent;
    text-stroke: 0px transparent;
    text-shadow: 0 0 20px rgb(201 76 150 / 55%), 0 0 50px rgba(201, 168, 76, 0.30), 0 0 80px rgba(201, 168, 76, 0.15);
}

/* Label brightens */
.stat-card:hover .stat-label {
    color: ffffff;
}

/* ── ACTIVE/GOLD VARIANT (last card in the image) ── */
.stat-card.active-gold .stat-number {
    color: #fd006b;
    -webkit-text-stroke: 0px transparent;
    text-stroke: 0px transparent;
    text-shadow:
        0 0 18px rgba(201,168,76,0.60),
        0 0 45px rgba(201,168,76,0.35),
        0 0 70px rgba(201,168,76,0.18);
}

.stat-card.active-gold::before,
.stat-card.active-gold::after,
.stat-card.active-gold .bracket-tr,
.stat-card.active-gold .bracket-bl {
    border-color: rgba(201,168,76,0.55);
}

.stat-card.active-gold .stat-label {
    color: rgba(255,255,255,0.65);
}

/* Subtle top gold line accent for active */
.stat-card.active-gold {
    background: #0f0e08;
}

/* Vertical separators between cards */
.stat-col + .stat-col {
    border-left: 1px solid rgba(255,255,255,0.05);
}


@media (max-width: 1200px) {
    .margen_5rem {
        padding: 1rem;
    }

    .fondo_casos_exito {

        background-image: url(../images/fondo_casos_oscuro.jpg);

    }

}

@media (max-width: 992px) {
    .header_metodologia {
        background-size: cover;
        opacity: 0.3;
    }
}

@media (max-width: 765px) {
    
    .f_innovacion {
        height: 300px;

}
    
     .margentop_50{
        -30px;
    }
   
    
    .quienes_icon_01 {
        background-position: center;
    }
    .quienes_icon_02 {
        background-position: center;
    }

    .quienes_icon_03 {
        background-position: center;
    }

    .quienes_icon_04 {
        background-position: center;
    }

    .subtitulo {
        text-align: center;

    }




}

@media (max-width: 575px) {
    .f_innovacion {
        height: 400px;
    }

}



@media (max-width: 575px) {
    .stat-col + .stat-col { border-left: none; border-top: 1px solid rgba(255,255,255,0.05); }
    .stat-card { padding: 32px 20px 24px; }
}