/* HERO */

.hero{

background-image:
linear-gradient(
to right,
rgba(0,0,0,0.85) 0%,
rgba(0,0,0,0.65) 35%,
rgba(0,0,0,0.2) 60%,
rgba(0,0,0,0) 80%
),
url("../assets/img/hero-cpp.jpg");

background-size:cover;
background-position:center right;

padding:80px 20px 120px;

display:flex;
align-items:center;

}

.hero-content{

max-width:520px;

}

.hero h1{

font-size:32px;
margin-bottom:15px;

}

.hero p{

font-size:15px;
line-height:1.5;
margin-bottom:25px;
color:#ddd;

}

.hero-buttons{
display:flex;
flex-direction:column;
gap:12px;
align-items:flex-start;
}

/* RESPONSIVE */

@media (max-width:768px){

.hero{

padding:90px 20px 120px;

background-position:82% center;

}

.hero h1{

font-size:28px;

}

.hero p{

font-size:14px;

}

}

@media (min-width:768px){

.hero{

padding:120px 40px 160px;

}

.hero h1{

font-size:clamp(32px,4vw,56px);

}

.hero p{

font-size:20px;
max-width:600px;

}

.hero-buttons{

flex-direction:row;
gap:20px;

}

.btn-primary,
.btn-secondary{

width:auto;

}

}

@media (max-width:420px){

.hero h1{
font-size:24px;
}

.hero p{
font-size:13px;
}

}


/* ======================
   SECCIONES+/====================== */



/* BOTONES HERO */

.btn-primary{

background:#39ff14;
color:black;
padding:12px 25px;
text-decoration:none;
border-radius:6px;
font-weight:bold;

}

.btn-secondary{

border:2px solid #39ff14;
color:#39ff14;
padding:12px 25px;
text-decoration:none;
border-radius:6px;

}

.btn-primary,
.btn-secondary{
display:inline-block;
width:auto;
}

/* BENEFICIOS */

.beneficios{

padding:60px 20px;

background:#0f0f0f;

max-width:1200px;

margin:auto;

}

.beneficios-container{

display:grid;

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

gap:20px;

}

.beneficio{

background:#141414;

padding:22px;

border-radius:10px;

border:1px solid rgba(57,255,20,0.35);

text-align:left;

transition:all .25s ease;

display:flex;

flex-direction:column;

gap:6px;

}

.beneficio:hover{

transform:translateY(-4px);

border-color:#39ff14;

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

}

.beneficio h3{

font-size:15px;

color:#39ff14;

font-weight:600;

}

.beneficio p{

color:#bdbdbd;

font-size:13px;

line-height:1.4;

}
/*RESPONSIVE BENEFICIOS */
@media (max-width:768px){

.beneficios-container{

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

gap:12px;

}

.beneficio{

padding:14px;

}

.beneficio h3{

font-size:12px;

}

.beneficio p{

font-size:10px;

}

}

/* PRODUCTOS DESTACADOS */

.destacados{
padding:80px 8%;
text-align:center;

background:#eef1f4;
}
.destacados h2{

font-size:32px;
margin-bottom:10px;

color:#222;

}

.destacados > p{

color:#666;

}

.destacados-container{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;

}

.ver-catalogo{

margin-top:40px;

display:flex;

justify-content:center;

}


.product-card{

background:#ffffff;

border-radius:12px;

padding:18px;

border:1px solid #e6e6e6;

box-shadow:0 4px 12px rgba(0,0,0,0.06);

transition:all 0.25s ease;

display:flex;
flex-direction:column;
align-items:center;

}

.product-card:hover{

transform:translateY(-6px);

box-shadow:0 12px 28px rgba(0,0,0,0.12);

}
.product-card img{

width:100%;
height:120px;

object-fit:contain;

margin-bottom:10px;

}

.product-card h3{

font-size:14px;
color:#333;

line-height:1.3;

margin:8px 0;

}

.product-card p{

color:#2ecc71;

font-weight:700;

margin-bottom:10px;

}
.product-card a{

background:#39ff14;

color:#000;

padding:7px 14px;

border-radius:6px;

font-size:12px;

font-weight:600;

text-decoration:none;

margin-top:auto;

}

/*RESPONSIVE DESTACADOS */

@media (max-width:768px){

.destacados-container{

grid-template-columns:repeat(2,1fr);
gap:16px;

}



/* RESPONSIVE CARDS DESTACADOS */
.product-card{

padding:15px;

}

.product-card img{

height:90px;

}

.product-card h3{

font-size:13px;

}

.product-card .price{

font-size:13px;

}
}

/* SERVICIO TECNICO */

.servicio-tecnico{

padding:80px 8%;
background:#0f0f0f;

}

.servicio-container{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;

}

.servicio-texto h2{

font-size:32px;
margin-bottom:20px;

}

.servicio-texto p{

margin-bottom:20px;
color:#ccc;

}

.servicio-texto ul{

margin-bottom:30px;

}

.servicio-texto li{

margin-bottom:10px;
color:#ddd;

}

.servicio-imagen img{

width:100%;
border-radius:10px;

}

@media(max-width:768px){

.servicio-container{

grid-template-columns:1fr;

}

}


/* BOTON WHATSAPP */

.whatsapp-float{

position:fixed;

bottom:25px;
right:25px;

width:60px;
height:60px;

background:#25D366;

border-radius:50%;

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

box-shadow:0 6px 20px rgba(0,0,0,0.4);

cursor:pointer;

z-index:9999;

transition:0.3s;

}

.whatsapp-float:hover{

transform:scale(1.1);

}

@keyframes whatsapp-pulse {

0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(37,211,102,0.6);
}

70%{
transform:scale(1.05);
box-shadow:0 0 0 15px rgba(37,211,102,0);
}

100%{
transform:scale(1);
}

}

.whatsapp-float{
animation:whatsapp-pulse 10s infinite;
}

/* TESTIMONIOS */

.testimonios{

padding:80px 8%;
text-align:center;
background:#111;

}

.testimonios h2{

font-size:32px;
margin-bottom:50px;

}

.testimonios-container{

display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
gap:30px;

}

.testimonio{

background:#161616;
padding:30px;
border-radius:10px;

border:1px solid #222;

transition:0.3s;

}

.testimonio:hover{

transform:translateY(-5px);
border-color:#39ff14;

}

.testimonio p{

color:#ccc;
margin-bottom:15px;

}

.testimonio span{

color:#39ff14;
font-weight:bold;

}

/* OFERTAS */

.ofertas{

padding:80px 8%;
text-align:center;

}

.ofertas h2{

font-size:32px;
margin-bottom:40px;

}

.ofertas-container{

display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
gap:30px;

}

.oferta{

background:#161616;
padding:30px;
border-radius:10px;

border:1px solid #222;

transition:0.3s;

}

.oferta:hover{

transform:translateY(-5px);
border-color:#39ff14;

}

.precio-oferta{

font-size:24px;
color:#39ff14;
margin:15px 0;

}

/* FOOTER */

.footer{

background:#0a0a0a;
padding:60px 8% 20px;

}

.footer-container{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;

margin-bottom:40px;

}

.footer-col h3{

margin-bottom:15px;
color:#39ff14;

}

.footer-col p{

color:#ccc;

}

.footer-col ul{

list-style:none;

}

.footer-col li{

margin-bottom:10px;

}

.footer-col a{

color:#ccc;
text-decoration:none;

}

.footer-col a:hover{

color:#39ff14;

}

.footer-bottom{

text-align:center;
border-top:1px solid #222;
padding-top:20px;

color:#777;

}