/*=========================================
FUENTES Y VARIABLES
=========================================*/

:root{

--lp-blue:#0b2f6b;
--lp-green:#18b65b;
--lp-light:#f6f8fb;
--lp-text:#344054;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;
background:var(--lp-light);
color:var(--lp-text);
padding-top:90px;

}

h1,h2,h3,h4,h5{

font-family:'Poppins',sans-serif;

}

.section-space{

padding:35px 0;

}


/*=========================================
NAVBAR
=========================================*/

.lp-navbar{

background:#fff;
padding:15px 0;

box-shadow:
0 2px 20px rgba(0,0,0,.05);

transition:.4s;

}

.logo-lp{

font-size:36px;
font-weight:700;

}

.logo-l{

color:var(--lp-blue);

}

.logo-p{

color:var(--lp-green);

}

.logo-company{

font-size:12px;
color:#777;

}


/****************** **/
/*=========================================
LINK ACTIVO NAVBAR
=========================================*/

.nav-link{

    margin-left:15px;
    font-weight:500;
    color:#444 !important;
    
    position:relative;
    transition:.3s;
    
    }
    
    /* Hover */
    .nav-link:hover{
    
    color:var(--lp-blue)!important;
    
    }
    
    /* Línea inferior */
    .nav-link::after{
    
    content:"";
    position:absolute;
    
    left:0;
    bottom:-6px;
    
    width:0%;
    height:3px;
    
    background:var(--lp-blue);
    
    border-radius:10px;
    
    transition:.3s;
    
    }
    
    /* Hover muestra línea */
    .nav-link:hover::after{
    
    width:100%;
    
    }
    
    /* Link ACTIVO */
    .nav-link.active{
    
    color:var(--lp-blue)!important;
    font-weight:600;
    
    }
    
    /* Línea activa */
    .nav-link.active::after{
    
    width:100%;
    
    }


.nav-link{

margin-left:15px;
font-weight:500;
color:#444 !important;

position:relative;

}

.nav-link:hover{

color:var(--lp-blue)!important;

}

.btn-lp{

background:var(--lp-blue);
color:white;

padding:12px 24px;

border-radius:12px;
font-weight:600;

}

.btn-lp:hover{

background:#082252;
color:white;

}


/*=========================================
HERO
=========================================*/

.hero-section{

padding:40px 0 80px;
background:linear-gradient(
180deg,
#f7f9fc,
#ffffff
);

overflow:hidden;

}


.hero-badge span
{
    color:#18b65b;
} 


.hero-title{

font-size:40px;
font-weight:800;
line-height:1.08;

margin-bottom:30px;

color:#09142d;

max-width:650px;

}

    
    .hero-title span{
    color:#18b65b;
    }


   



.hero-description{

font-size:22px;

line-height:1.8;

color:#667085;

max-width:650px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;
gap:15px;

margin-bottom:50px;

}

.hero-image-container{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.hero-image{

width:115%;

max-width:none;

height:auto;

position:relative;

z-index:2;

filter:drop-shadow(
0 40px 60px rgba(0,0,0,.18)
);

transition:.4s;

}

.hero-image:hover{

transform:translateY(-8px);

}

.hero-stats{

display:flex;

gap:20px;

}

.hero-mini-card{

background:white;

padding:20px 30px;

border-radius:25px;

box-shadow:
0 10px 30px rgba(0,0,0,.05);

}

.hero-mini-card h4{

font-size:26px;

font-weight:700;

color:var(--lp-blue);

}

.hero-mini-card span{

font-size:18px;

}

@media(max-width:991px){

.hero-title{

font-size:45px;

}

.hero-description{

font-size:18px;

}

.hero-image{

width:100%;

margin-top:40px;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

flex-wrap:wrap;

}

}

/*=========================================
TITULOS
=========================================*/

.section-title{

text-align:center;
margin-bottom:70px;

}

.section-title span{

font-size:13px;

font-weight:700;

letter-spacing:2px;

color:var(--lp-green);

}

.section-title h2{

margin-top:15px;

font-size:40px;

font-weight:700;

}

.section-title p{

max-width:700px;
margin:auto;

color:#667085;

}


/*=========================================
SERVICIOS
=========================================*/

.service-card{

background:white;

padding:35px;

border-radius:25px;

height:100%;

box-shadow:
0 15px 35px rgba(0,0,0,.05);

transition:.3s;

}

.service-card:hover{

transform:translateY(-8px);

}

.service-icon{

width:70px;
height:70px;

display:flex;
align-items:center;
justify-content:center;

border-radius:18px;

font-size:28px;

margin-bottom:25px;

background:#eef7ff;

color:var(--lp-blue);

}



/*=========================================
PORTAFOLIO
=========================================*/

.portfolio-card{

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:
0 15px 35px rgba(0,0,0,.05);

transition:.4s;

height:100%;

}

.portfolio-card:hover{

transform:translateY(-8px);

}

.portfolio-img{

width:100%;
height:220px;

object-fit:cover;

}

.portfolio-body{

padding:30px;

}

.portfolio-icon{

width:60px;
height:60px;

display:flex;

align-items:center;
justify-content:center;

background:var(--lp-blue);

color:white;

border-radius:15px;

margin-bottom:20px;

}


/*=========================================
ESTADISTICAS
=========================================*/

.stats-section{

padding:100px 0;

background:
linear-gradient(
135deg,
var(--lp-blue),
#123f86
);

color:white;

}

.stat-card{

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

padding:30px;

border-radius:25px;

text-align:center;

}

.stat-card h3{

font-size:42px;
font-weight:700;

}


/*=========================================
**********CONTACTO *****
=========================================*/

/*=========================================
CONTACTO MODERNO
=========================================*/

.contact-form{

    background: linear-gradient(145deg, #ffffff, #f8f9ff);
    backdrop-filter: blur(10px);
    
    padding:45px;
    
    border-radius:25px;
    
    box-shadow: 0 20px 60px rgba(0,0,0,.08);
    
    border:1px solid rgba(0,0,0,.05);
    
    transition:.3s;
    
    }
    
    /* hover suave del form */
    
    .contact-form:hover{
    
    transform: translateY(-3px);
    
    box-shadow: 0 25px 70px rgba(0,0,0,.12);
    
    }
    
    /* inputs modernos */
    
    .lp-input{
    
    padding:14px 16px;
    
    border-radius:12px;
    
    border:1px solid #e6e6e6;
    
    background:#fff;
    
    transition:.3s;
    
    font-size:15px;
    
    }

    
    
    /* focus pro */
    
    .lp-input:focus{
    
    border-color:var(--lp-blue);
    
    box-shadow: 0 0 0 4px rgba(0, 90, 255, .08);
    
    outline:none;
    
    }


    
    .lp-input::placeholder{
        color:#aaa;
        }
    /* labels opcional si los usas */
    
    .form-label{
    font-weight:600;
    font-size:14px;
    color:#333;
    margin-bottom:6px;
    }
    
    /* botón submit (si tienes uno) */
    
    .btn-contact{
    
    background:var(--lp-blue);
    color:white;
    
    padding:14px 25px;
    
    border-radius:12px;
    
    font-weight:600;
    
    border:none;
    
    transition:.3s;
    
    width:100%;
    
    }
    
    .btn-contact:hover{
    
    background:#082252;
    transform: translateY(-2px);
    
    }


    .contact-form{

        animation: fadeInUp .6s ease;
        
        }
        
        @keyframes fadeInUp{
        
        from{
        opacity:0;
        transform:translateY(20px);
        }
        
        to{
        opacity:1;
        transform:translateY(0);
        }
        
        }
/*=========================================
FOOTER
=========================================*/

.footer-section{

background:#071c40;

color:white;

padding:70px 0 25px;

}

.footer-section a{

display:block;

text-decoration:none;

margin-bottom:10px;

color:#dbe7ff;

}

.footer-section a:hover{

color:var(--lp-green);

}

.footer-bottom{

margin-top:35px;
padding-top:20px;

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

text-align:center;

}


/*=========================================
WHATSAPP
=========================================*/

.whatsapp-float{

position:fixed;

right:25px;
bottom:25px;

width:60px;
height:60px;

border-radius:50%;

display:flex;

align-items:center;
justify-content:center;

font-size:30px;

background:#25d366;

color:white;

z-index:999;

box-shadow:
0 10px 30px rgba(0,0,0,.2);

}


/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px){

.hero-title{

font-size:40px;

}

.hero-buttons{

flex-direction:column;

}

}


.hero-image-container{

position:relative;

padding:15px;

}

.hero-image{

width:100%;
height:auto;

transition:.4s;

}

.hero-image:hover{

transform:translateY(-8px);

}

.hero-section{

background:
linear-gradient(
180deg,
#f7f9fc,
#ffffff
);

overflow:hidden;

}


/* BOTONES DE HERO */

.hero-section .btn-green,
.hero-section .btn-outline-lp{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:210px;
height:56px;
font-size:16px;
text-decoration:none;
}

.hero-image{
width:130%;
margin-left:-80px;
}

.hero-section{
min-height:680px;
display:flex;
align-items:center;
}


/* PRUEBA HERO */
.hero-image{
width:130% !important;
max-width:none !important;
margin-left:-80px !important;
}

.hero-section .btn-green,
.hero-section .btn-outline-lp{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:210px !important;
height:56px !important;
font-size:16px !important;
text-decoration:none !important;
}

.hero-buttons a{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
height:56px !important;
min-width:210px !important;
border-radius:12px !important;
font-weight:700 !important;
text-decoration:none !important;
}

.hero-buttons a:first-child{
background:#18b65b !important;
color:white !important;
border:2px solid #18b65b !important;
}

.hero-buttons a:last-child{
background:white !important;
color:#0b2f6b !important;
border:2px solid #0b2f6b !important;
}

.hero-section{
padding-top:69px !important;
padding-bottom:45px !important;
min-height:auto !important;
}


/* FIX FINAL SOLUCIONES */
#soluciones .solution-demo-card{
background:#fff !important;
border:1px solid #e9edf4 !important;
border-radius:18px !important;
padding:10px !important;
height:100% !important;
display:flex !important;
gap:22px !important;
align-items:flex-start !important;
box-shadow:0 8px 24px rgba(15,23,42,.08) !important;
}

#soluciones .solution-demo-icon{
width:58px !important;
min-width:58px !important;
height:58px !important;
border-radius:14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:30px !important;
background:#eef6ff !important;
}

#soluciones .row{
row-gap:24px !important;
}


/*===================================
ANCHO GLOBAL DEL SITIO
===================================*/

.container{

max-width:1400px !important;

padding-left:40px !important;
padding-right:40px !important;

}


/* pantallas muy grandes */

@media(min-width:1500px){

.container{

max-width:1400px !important;

}

}


/* móvil */

@media(max-width:768px){

.container{

padding-left:20px !important;
padding-right:20px !important;

}

}


.solution-demo-card{

min-height:220px !important;

}

.solution-demo-content p{

font-size:15px !important;
line-height:1.7 !important;

}

.portfolio-img-box{

height:280px !important;

}


/*===================================
ICONOS SOLUCIONES ESTILO DEMO
===================================*/

#soluciones .solution-demo-icon{

background:transparent !important;
width:auto !important;
height:auto !important;
min-width:auto !important;
padding:0 !important;

}

#soluciones .solution-demo-icon i{

font-size:42px !important;
transition:.3s;

}


/* Facturación */
#soluciones .fa-file-invoice{
color:#4ea1ff !important;
}

/* Sistemas empresariales */
#soluciones .fa-desktop{
color:#3ac056 !important;
}

/* Sistemas médicos */
#soluciones .fa-stethoscope{
color:#8f67db !important;
}

/* Apps móviles */
#soluciones .fa-mobile-screen-button{
color:#f4a024 !important;
}

/* Redes */
#soluciones .fa-globe{
color:#4ea1ff !important;
}

/* Seguridad */
#soluciones .fa-shield-halved{
color:#4a89ff !important;
}

/* Base datos */
#soluciones .fa-database{
color:#8f67db !important;
}

/* Capacitación */
#soluciones .fa-graduation-cap{
color:#3ac056 !important;
}


/* efecto suave */

#soluciones .solution-demo-card:hover i{

transform:scale(1.10);

}