/* =========================
RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
background:#F7F9FB;
color:#1C2B39;
line-height:1.6;
}


/* =========================
LAYOUT
========================= */

.container{
width:90%;
max-width:1200px;
margin:0 auto;
}

.section{
padding:100px 0;
}

.section-title{
font-size:36px;
font-weight:600;
margin-bottom:20px;
}

.section-subtitle{
color:#6B7C8C;
max-width:600px;
}


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

.site-header{
background:white;
border-bottom:1px solid #E6ECF2;
position:sticky;
top:0;
z-index:1000;
transition:box-shadow .3s ease;
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:70px;
}

.logo{
font-weight:600;
font-size:20px;
}

.main-nav a{
margin:0 15px;
text-decoration:none;
color:#1C2B39;
font-weight:500;
}

.main-nav a:hover{
color:#2C6BED;
}


/* =========================
BUTTONS
========================= */

.btn-primary{
background:#2C6BED;
color:white;
padding:12px 20px;
border-radius:6px;
text-decoration:none;
font-weight:500;
transition:all .25s ease;
}

.btn-primary:hover{
background:#1f4ed8;
}

.btn-secondary{
border:1px solid #D8E1EA;
padding:12px 20px;
border-radius:6px;
text-decoration:none;
color:#1C2B39;
font-weight:500;
transition:all .25s ease;
}

.btn-secondary:hover{
background:#F1F5F9;
}


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

.hero-section{

position:relative;
overflow:hidden;

min-height:80vh;

display:flex;
align-items:center;

background:linear-gradient(
180deg,
#F7F9FB 0%,
#FFFFFF 100%
);

}


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

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:60px;
position:relative;
z-index:3;
}

.hero-title{
font-size:60px;
font-weight:600;
line-height:1.15;
letter-spacing:-0.02em;
margin-bottom:28px;
}

.hero-subtitle{
font-size:18px;
color:#6B7C8C;
margin-bottom:35px;
max-width:580px;
}

.hero-actions{
display:flex;
gap:20px;
}


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

.hero-image img{

width:100%;

border-radius:12px;

object-fit:cover;

box-shadow:0 20px 40px rgba(0,0,0,0.08);

transition:transform .4s ease;

}


/* =========================
GLOW EFFECT
========================= */

.hero-glow{

position:absolute;

width:700px;
height:700px;

background:radial-gradient(
circle,
rgba(44,107,237,0.18) 0%,
rgba(44,107,237,0.08) 40%,
transparent 70%
);

top:-150px;
right:-120px;

filter:blur(80px);

pointer-events:none;

animation:glowFloat 16s ease-in-out infinite;

z-index:0;

}

@keyframes glowFloat{

0%{transform:translate(0,0);}
50%{transform:translate(-60px,40px);}
100%{transform:translate(0,0);}

}


/* =========================
TECH GRID
========================= */

.hero-tech-grid{

position:absolute;
inset:0;

background-image:
linear-gradient(rgba(44,107,237,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(44,107,237,0.06) 1px, transparent 1px);

background-size:60px 60px;

mask-image:radial-gradient(circle at center, black 30%, transparent 75%);

pointer-events:none;

opacity:0.5;

animation:gridMove 40s linear infinite;

z-index:0;

}

@keyframes gridMove{

0%{transform:translateY(0);}
100%{transform:translateY(60px);}

}


/* =========================
NETWORK CONNECTIONS
========================= */

.hero-connections{

position:absolute;

inset:0;

pointer-events:none;

opacity:0.22;

z-index:1;

}

.connections-svg{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

}

/* lines */

.conn-line{

stroke:#2C6BED;

stroke-width:1;

stroke-dasharray:6 6;

animation:lineFlow 10s linear infinite;

opacity:0.4;

}

@keyframes lineFlow{

0%{stroke-dashoffset:0;}
100%{stroke-dashoffset:-24;}

}

/* nodes */

.conn-node{

fill:#2C6BED;

opacity:0;

animation:
nodePulse 4s ease-in-out infinite,
nodeReveal 1s ease forwards;

}

@keyframes nodePulse{

0%{transform:scale(1);opacity:.6;}
50%{transform:scale(1.4);opacity:1;}
100%{transform:scale(1);opacity:.6;}

}

@keyframes nodeReveal{

to{opacity:.8;}

}


/* =========================
SCROLL REVEAL
========================= */

.reveal{

opacity:0;

transform:translateY(40px) scale(.96);

transition:
opacity .8s ease,
transform .8s cubic-bezier(.16,1,.3,1);

}

.reveal.visible{

opacity:1;

transform:translateY(0) scale(1);

}


/* =========================
CTA SECTION
========================= */

.cta-section{

background:#2C6BED;
color:white;

padding:100px 0;

text-align:center;

}


/* =========================
FOOTER
========================= */

.site-footer{

background:#ffffff;

border-top:1px solid #E6ECF2;

padding:40px 0;

}

.footer-inner{

display:flex;

justify-content:space-between;

align-items:center;

}

.footer-copy{

color:#6B7C8C;

font-size:14px;

}


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

@media (max-width:900px){

.hero-grid{
grid-template-columns:1fr;
}

.hero-title{
font-size:38px;
}

.hero-image{
margin-top:40px;
}

}

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

.servicios-section{
background:#ffffff;
}

.servicios-header{
max-width:700px;
margin-bottom:60px;
}

/* grid */

.servicios-grid{

display:grid;

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

gap:30px;

}


/* cards */

.servicio-card{

background:#ffffff;

border:1px solid #E6ECF2;

border-radius:12px;

padding:32px;

transition:all .35s ease;

position:relative;

overflow:hidden;

}

/* hover */

.servicio-card:hover{

transform:translateY(-8px);

box-shadow:
0 10px 25px rgba(0,0,0,0.05),
0 25px 50px rgba(0,0,0,0.06);

}

/* icon */

.servicio-icon{

width:48px;
height:48px;

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

border-radius:10px;

background:rgba(44,107,237,0.08);

font-size:22px;

margin-bottom:20px;

transition:all .35s ease;

}

.servicio-card:hover .servicio-icon{

background:rgba(44,107,237,0.15);

transform:scale(1.1);

box-shadow:
0 0 12px rgba(44,107,237,0.25);

}


/* title */

.servicio-card h3{

font-size:20px;

font-weight:600;

margin-bottom:12px;

}


/* text */

.servicio-card p{

font-size:15px;

color:#6B7C8C;

line-height:1.6;

}

@media (max-width:900px){

.servicios-grid{

grid-template-columns:1fr;

}

}

/* glow interactivo */

.servicio-card::before{

content:"";

position:absolute;

inset:-1px;

border-radius:12px;

background:linear-gradient(
120deg,
transparent,
rgba(44,107,237,0.25),
transparent
);

opacity:0;

transition:opacity .4s ease;

}

.servicio-card:hover::before{
opacity:1;
}

.servicios-grid{

position:relative;

display:grid;

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

gap:30px;

}

/* tech line */

.servicios-grid::after{

content:"";

position:absolute;

top:50%;

left:0;

width:100%;

height:1px;

background:linear-gradient(
90deg,
transparent,
rgba(44,107,237,0.25),
transparent
);

opacity:.4;

}

.servicio-card:hover{

transform:translateY(-8px);

background:linear-gradient(
145deg,
#ffffff,
#f4f7fc
);

box-shadow:
0 10px 25px rgba(0,0,0,0.05),
0 25px 50px rgba(0,0,0,0.06);

}

.servicios-grid::after{

content:"";

position:absolute;

top:50%;
left:0;

width:100%;
height:1px;

background:linear-gradient(
90deg,
transparent,
rgba(44,107,237,0.25),
transparent
);

opacity:.5;

animation:techLine 8s linear infinite;

}

@keyframes techLine{

0%{background-position:-400px;}
100%{background-position:400px;}

}

/* =========================
PROCESO SECTION
========================= */

.proceso-section{
background:#F7F9FB;
}

.proceso-header{
max-width:700px;
margin-bottom:70px;
}


/* grid */

.proceso-grid{

display:grid;

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

gap:40px;

position:relative;

align-items:start;

}


/* timeline line */

.proceso-grid::before{

content:"";

position:absolute;

top:25px; /* centro exacto del círculo */

left:0;

width:100%;

height:2px;

background:linear-gradient(
90deg,
transparent,
rgba(44,107,237,0.35),
rgba(44,107,237,0.6),
rgba(44,107,237,0.35),
transparent
);

background-size:200% 100%;

animation:processLine 6s linear infinite;

z-index:0;

}

@keyframes processLine{

0%{
background-position:-200% 0;
}

100%{
background-position:200% 0;
}

}


/* step */

.proceso-step{

position:relative;

padding-top:40px;

z-index:1;

transition:transform .3s ease;

}

.proceso-step:hover{

transform:translateY(-4px);

}


/* number circle */

.step-number{

width:50px;
height:50px;

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

border-radius:50%;

background:#ffffff;

border:2px solid rgba(44,107,237,0.25);

color:#2C6BED;

font-weight:600;

margin-bottom:20px;

box-shadow:
0 4px 12px rgba(44,107,237,0.15);

transition:all .3s ease;

position:relative;

z-index:2;

}

.proceso-step:hover .step-number{

transform:scale(1.08);

box-shadow:
0 8px 20px rgba(44,107,237,0.25);

}


/* titles */

.proceso-step h3{

font-size:18px;

font-weight:600;

margin-bottom:10px;

letter-spacing:-0.01em;

}


/* text */

.proceso-step p{

font-size:15px;

color:#6B7C8C;

line-height:1.6;

}


/* responsive */

@media (max-width:900px){

.proceso-grid{

grid-template-columns:1fr;

gap:50px;

}

.proceso-grid::before{
display:none;
}

}

/* =========================
EQUIPO SECTION
========================= */

.equipo-section{
background:#ffffff;
}

.equipo-header{
max-width:700px;
margin-bottom:70px;
}


/* grid */

.equipo-grid{

display:grid;

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

gap:40px;

}


/* card */

.equipo-card{

background:#ffffff;

border:1px solid #E6ECF2;

border-radius:14px;

overflow:hidden;

transition:all .35s ease;

}

.equipo-card:hover{

transform:translateY(-6px);

box-shadow:
0 15px 35px rgba(0,0,0,0.06),
0 25px 60px rgba(0,0,0,0.05);

}


/* image */

.equipo-image{

height:300px;

overflow:hidden;

position:relative;

}

.equipo-image img{

width:100%;
height:100%;

object-fit:cover;

object-position:center top;

transition:transform .6s ease;

}

.equipo-card:hover .equipo-image img{

transform:scale(1.06);

}


/* info */

.equipo-info{

padding:28px;

}

.equipo-info h3{

font-size:20px;

font-weight:600;

margin-bottom:6px;

}

.equipo-role{

display:block;

font-size:14px;

color:#2C6BED;

font-weight:500;

margin-bottom:12px;

}

.equipo-info p{

font-size:15px;

color:#6B7C8C;

line-height:1.6;

}

@media (max-width:900px){

.equipo-grid{

grid-template-columns:1fr;

gap:30px;

}

}

.equipo-image::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
180deg,
transparent 40%,
rgba(0,0,0,0.25)
);

opacity:0;

transition:opacity .35s ease;

}

.equipo-card:hover .equipo-image::after{

opacity:1;

}

.equipo-credencial{

display:block;

font-size:13px;

color:#6B7C8C;

margin-bottom:10px;

}

.equipo-card:hover{

transform:translateY(-8px);

box-shadow:
0 20px 40px rgba(0,0,0,0.06),
0 30px 60px rgba(0,0,0,0.05);

}

.equipo-info h3{

font-size:20px;

font-weight:600;

letter-spacing:-0.01em;

margin-bottom:6px;

}

/* =========================
INSTALACIONES SECTION
========================= */

.instalaciones-section{
background:#ffffff;
padding-bottom:0;
}

.instalaciones-header{
max-width:700px;
margin-bottom:70px;
}


/* grid */

.instalaciones-grid{

display:grid;

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

gap:20px;

padding:0 5% 100px;

}


/* images */

.instalacion-item{

overflow:hidden;

border-radius:12px;

position:relative;

cursor:pointer;

}

.instalacion-item img{

width:100%;
height:260px;

object-fit:cover;

transition:
transform .8s ease,
filter .4s ease;

}


/* hover */

.instalacion-item:hover img{

transform:scale(1.08);

filter:brightness(.95);

}


/* subtle overlay */

.instalacion-item::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
180deg,
transparent,
rgba(0,0,0,0.15)
);

opacity:0;

transition:opacity .35s ease;

}

.instalacion-item:hover::after{

opacity:1;

}

@media (max-width:900px){

.instalaciones-grid{

grid-template-columns:1fr;

padding:0 5% 80px;

}

.instalacion-item img{

height:220px;

}

}

/* =========================
CONFIANZA SECTION
========================= */

.confianza-section{
background:#F7F9FB;
}

.confianza-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}


/* stats */

.confianza-stats{

display:flex;

gap:60px;

}

.stat{

display:flex;

flex-direction:column;

}

.stat-number{

font-size:40px;

font-weight:600;

color:#2C6BED;

margin-bottom:5px;

}

.stat-label{

font-size:14px;

color:#6B7C8C;

}


/* testimonial */

.confianza-testimonial{

background:#ffffff;

padding:40px;

border-radius:12px;

border:1px solid #E6ECF2;

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

}

.testimonial-text{

font-size:18px;

line-height:1.6;

margin-bottom:20px;

color:#1C2B39;

}

.testimonial-author{

font-size:14px;

color:#6B7C8C;

}

@media (max-width:900px){

.confianza-grid{

grid-template-columns:1fr;

}

.confianza-stats{

justify-content:space-between;

}

}

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

.cta-final-section{

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

padding:120px 0;

text-align:center;

position:relative;

overflow:hidden;

}

.cta-final-content{

max-width:700px;

margin:0 auto;

}

.cta-final-title{

font-size:42px;

font-weight:600;

letter-spacing:-0.02em;

margin-bottom:20px;

}

.cta-final-text{

font-size:18px;

color:#6B7C8C;

line-height:1.6;

margin-bottom:40px;

}

.cta-final-actions{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.cta-final-section::before{

content:"";

position:absolute;

width:600px;
height:600px;

background:radial-gradient(
circle,
rgba(44,107,237,0.15),
transparent 70%
);

top:-200px;
left:50%;

transform:translateX(-50%);

filter:blur(80px);

}

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

.contacto-section{
background:#F7F9FB;
}

.contacto-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:start;

}


/* info */

.contacto-info{

max-width:450px;

}

.contacto-item{

margin-top:25px;

display:flex;

flex-direction:column;

gap:4px;

}

.contacto-item strong{

font-size:14px;

color:#1C2B39;

}

.contacto-item span{

font-size:15px;

color:#6B7C8C;

line-height:1.5;

}


/* form */

.contacto-form{

background:white;

padding:40px;

border-radius:12px;

border:1px solid #E6ECF2;

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

}

.form-group{

display:flex;

flex-direction:column;

margin-bottom:20px;

}

.form-group label{

font-size:14px;

margin-bottom:6px;

color:#1C2B39;

}

.form-group input,
.form-group textarea{

padding:12px;

border-radius:6px;

border:1px solid #D8E1EA;

font-family:inherit;

font-size:14px;

}

.form-group input:focus,
.form-group textarea:focus{

outline:none;

border-color:#2C6BED;

}

@media (max-width:900px){

.contacto-grid{

grid-template-columns:1fr;

gap:50px;

}

}

/* =========================
FOOTER
========================= */

.site-footer{

background:#ffffff;

border-top:1px solid #E6ECF2;

padding:80px 0 40px 0;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

margin-bottom:40px;

}


/* brand */

.footer-logo{

font-size:20px;

font-weight:600;

margin-bottom:12px;

}

.footer-description{

font-size:14px;

color:#6B7C8C;

line-height:1.6;

max-width:320px;

}


/* links */

.footer-links h4,
.footer-contact h4{

font-size:15px;

margin-bottom:15px;

}

.footer-links a{

display:block;

margin-bottom:8px;

font-size:14px;

color:#6B7C8C;

text-decoration:none;

}

.footer-links a:hover{

color:#2C6BED;

}


/* contact */

.footer-contact span{

display:block;

font-size:14px;

color:#6B7C8C;

margin-bottom:8px;

}


/* bottom */

.footer-bottom{

border-top:1px solid #E6ECF2;

padding-top:20px;

font-size:13px;

color:#6B7C8C;

text-align:center;

}

@media (max-width:900px){

.footer-grid{

grid-template-columns:1fr;

gap:40px;

}

.footer-bottom{

text-align:left;

}

}

/* overlay instalaciones */

.instalacion-overlay{

position:absolute;
bottom:20px;
left:20px;

background:rgba(255,255,255,0.9);

padding:8px 14px;

font-size:14px;
font-weight:500;

border-radius:6px;

opacity:0;
transform:translateY(10px);

transition:all .35s ease;

backdrop-filter:blur(4px);

}

.instalacion-item:hover .instalacion-overlay{

opacity:1;
transform:translateY(0);

}

/* =========================
SITE LOADER
========================= */

.site-loader{

position:fixed;
inset:0;

background:white;

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

z-index:9999;

transition:opacity .6s ease, visibility .6s ease;

}

.loader-dot{

width:14px;
height:14px;

background:#2C6BED;

border-radius:50%;

animation:loaderPulse 1s infinite ease-in-out;

}

@keyframes loaderPulse{

0%{transform:scale(.8);opacity:.5;}
50%{transform:scale(1.4);opacity:1;}
100%{transform:scale(.8);opacity:.5;}

}

.site-loader.hidden{

opacity:0;
visibility:hidden;

}