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

.whatsapp{

position:fixed;

right:25px;
bottom:25px;

width:60px;
height:60px;

background:#25D366;

border-radius:50%;

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

font-size:28px;
color:white;

z-index:9999;

box-shadow:0 10px 25px rgba(0,0,0,.4);

transition:.3s;

}

/* animación suave */

.whatsapp{
animation:whatsappPulse 2s infinite;
}

@keyframes whatsappPulse{

0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}
70%{box-shadow:0 0 0 12px rgba(37,211,102,0);}
100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}

}

.whatsapp:hover{

transform:scale(1.1);

background:#20b858;

}

/* ========================================
BOTONES
======================================== */

.hero-buttons{

display:flex;
align-items:center;
gap:18px;
margin-top:25px;
flex-wrap:wrap;

}

/* BOTON PRINCIPAL */

.btn-principal{

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

padding:14px 28px;

background:linear-gradient(
135deg,
var(--color-principal),
var(--color-secundario)
);

color:#fff;

border-radius:8px;

font-weight:600;

letter-spacing:.3px;

transition:.3s;

}

.btn-principal:hover{

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(25,181,176,.35);

}

/* BOTON WHATSAPP */

.btn-secundario{

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

gap:8px;

padding:14px 26px;

border:1px solid rgba(25,181,176,.6);

color:var(--color-principal);

border-radius:8px;

font-size:14px;

font-weight:500;

transition:.3s;

}

.btn-secundario:hover{

background:var(--color-principal);

color:white;

transform:translateY(-3px);

box-shadow:0 8px 20px rgba(25,181,176,.35);

}

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

.card-servicio{

background:linear-gradient(
145deg,
#0b1620,
#111f2d
);

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

border-radius:14px;

padding:40px 30px;

text-align:center;

position:relative;

overflow:hidden;

transition:.35s;

}

/* glow */

.card-servicio::after{

content:"";

position:absolute;

inset:0;

background:radial-gradient(
circle at top,
rgba(25,181,176,.18),
transparent 60%
);

opacity:0;

transition:.4s;

pointer-events:none;

}

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

.card-servicio:hover{

transform:translateY(-10px);

border-color:rgba(25,181,176,.4);

box-shadow:0 20px 50px rgba(0,0,0,.5);

}

/* iconos */

.card-servicio i{

width:70px;
height:70px;

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

margin:auto;
margin-bottom:18px;

border-radius:50%;

background:linear-gradient(
135deg,
var(--color-principal),
var(--color-secundario)
);

font-size:26px;

color:white;

box-shadow:0 10px 25px rgba(0,0,0,.35);

transition:.35s;

}

.card-servicio:hover i{

transform:scale(1.15);

box-shadow:0 12px 35px rgba(25,181,176,.45);

}

.card-servicio h3{

font-size:20px;

font-weight:600;

margin-bottom:10px;

}

.card-servicio p{

font-size:14px;

opacity:.8;

line-height:1.6;

margin-bottom:18px;

}

/* ========================================
HOVER IMÁGENES
======================================== */

.img-hover{

overflow:hidden;

border-radius:var(--border-radius);

}

.img-hover img{

transition:.5s;

}

.img-hover:hover img{

transform:scale(1.1);

}

/* ========================================
CARDS IOS
======================================== */

.card-ios{

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

border-radius:18px;

padding:30px;

backdrop-filter:blur(10px);

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

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

transition:.3s;

}

.card-ios:hover{
transform:translateY(-5px);
}

/* ========================================
ICON CIRCLE
======================================== */

.icon-circle{

width:70px;
height:70px;

border-radius:50%;

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

background:linear-gradient(
135deg,
var(--color-principal),
var(--color-secundario)
);

margin:auto;
margin-bottom:20px;

font-size:26px;

}

/* ========================================
DIVIDERS
======================================== */

.divider{

width:60px;
height:4px;

background:var(--color-principal);

margin:20px auto;

border-radius:4px;

}

.section-divider{

height:1px;

width:120px;

margin:70px auto;

background:linear-gradient(
90deg,
transparent,
var(--color-principal),
transparent
);

opacity:.4;

}

/* ========================================
STATS
======================================== */

.stats{

background:#020617;

padding:80px 0;

text-align:center;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:40px;

}

.stat h3{

font-size:48px;

color:var(--color-principal);

margin-bottom:10px;

}

.stat p{
opacity:.8;
}



/* ========================================
FORMULARIO
======================================== */

.form-cotizacion{

max-width:900px;

margin:auto;

}

.form-cotizacion label{

display:block;

margin-bottom:6px;

font-size:14px;

color:#cfcfcf;

}

.form-cotizacion input,
.form-cotizacion select,
.form-cotizacion textarea{

width:100%;

padding:12px 14px;

border-radius:6px;

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

background:#0f1b24;

color:#fff;

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

margin-bottom:20px;

}

.form-cotizacion input:focus,
.form-cotizacion textarea:focus,
.form-cotizacion select:focus{

outline:none;

border-color:#18c5c2;

}

.form-cotizacion textarea{
resize:none;
}

/* ========================================
FORM PREMIUM
======================================== */

.form-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.input-group{
position:relative;
}

.input-group i{

position:absolute;

left:12px;

top:50%;

transform:translateY(-50%);

color:#18c5c2;

font-size:14px;

}

.input-group input,
.input-group select{

width:100%;

padding:12px 12px 12px 40px;

border-radius:6px;

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

background:#0f1b24;

color:white;

}

.input-group textarea{

width:100%;

padding:12px 12px 12px 40px;

border-radius:6px;

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

background:#0f1b24;

color:white;

}

.full{
grid-column:1 / -1;
}

/* ========================================
LOGOS CLIENTES
======================================== */

.clientes-logos{

padding:90px 0;

background:#020617;

text-align:center;

}

.logos-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(150px,1fr));

gap:40px;

align-items:center;

margin-top:40px;

}

.logos-grid img{

max-width:140px;

margin:auto;

opacity:.7;

filter:grayscale(100%);

transition:.3s;

}

.logos-grid img:hover{

opacity:1;

filter:grayscale(0%);

transform:scale(1.05);

}

/* MODAL EXITO */

.modal-exito{

position:fixed;
inset:0;

background:rgba(0,0,0,.6);

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

z-index:2000;

}

.modal-box{

background:#0f1720;

padding:40px;

border-radius:12px;

text-align:center;

max-width:420px;

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

}

.modal-box i{

font-size:48px;

color:#18c5c2;

margin-bottom:15px;

}

.modal-box h3{

margin-bottom:10px;

}

.modal-box button{

margin-top:20px;

padding:10px 20px;

border:none;

background:#18c5c2;

color:white;

border-radius:6px;

cursor:pointer;

}

/* ================================
HONEY POT ANTI BOT
================================ */

.campo-oculto{
display:none;
}

/* ================================
MODAL EXITO
================================ */

.modal-exito{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.75);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.modal-box{
background:#0b1620;
padding:40px;
border-radius:12px;
text-align:center;
max-width:400px;
width:90%;
}

.modal-box i{
font-size:50px;
color:#18c5c2;
margin-bottom:15px;
}

.modal-box h3{
margin-bottom:10px;
}

.modal-box button{
margin-top:20px;
padding:10px 20px;
background:#18c5c2;
border:none;
border-radius:6px;
color:white;
cursor:pointer;
}

/* GALERIA REFACCIONES */

.galeria-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:40px;
}

.galeria-item{
position:relative;
overflow:hidden;
border-radius:10px;
}

.galeria-item img{
width:100%;
height:250px;
object-fit:cover;
transition:transform .4s;
}

.galeria-item:hover img{
transform:scale(1.08);
}

.galeria-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:.3s;
}

.galeria-item:hover .galeria-overlay{
opacity:1;
}

.btn-galeria{
background:#25D366;
color:white;
padding:10px 20px;
border-radius:30px;
text-decoration:none;
font-weight:600;
}

.videos-industriales{
padding:100px 0;
}

.videos-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
margin-top:50px;
}

.videos-grid video{
width:100%;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}