/* ############################################ */
/* ################### WI-FI ################## */
/* ############################################ */

/* ================== Global ================== */
body{
    font-family: Arial, sans-serif;
    margin:0;
    background:#f4f6f9;
    color:#333;
}

/* ================== Hero ================== */
.hero{
    background-color: #1f5d98; /* color de respaldo */
    background-image: 
        linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), /* overlay blanco semitransparente */
        url('../imagenes/background/WI-FI.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: black;
    text-align: center;
    padding: 80px 20px;
}

.hero h1{
    font-size:40px;
    margin-bottom:10px;
}

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

/* ================== Contenedor ================== */
.contenedor{
    max-width:1100px;
    margin:auto;
    padding:40px 20px;
}

h2{
    color:#1f5d98;
    margin-bottom:20px;
}

/* ================== Grid / Cards ================== */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    margin-top:30px;
}

.card{
    background:white;
    padding:25px;
    border-radius:8px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card h3{
    color:#1f5d98;
    margin-bottom:10px;
}

.card p{
    font-size:14px;
    line-height:1.6;
}

/* Card hover effect */
.card:hover{
    transform: translateY(-5px);
    box-shadow:0 8px 15px rgba(0,0,0,0.15);
}

/* ================== Beneficios ================== */
.beneficios ul{
    list-style:square;
    padding-left:20px;
    line-height:1.8;
}

/* ================== CTA ================== */
.cta{
    background:#f69449;
    text-align:center;
    padding:50px 20px;
    color:white;
}

.cta a{
    background:white;
    color:#f69449;
    padding:12px 25px;
    text-decoration:none;
    border-radius:5px;
    font-weight:bold;
    transition: background 0.3s;
}

.cta a:hover{
    background:#eee;
}

/* ################################################ */
/* ################### Fin WI-FI ################## */
/* ################################################ */

/* ######################################################## */
/* ################### structured-cabling ################# */
/* ######################################################## */

/* HERO */

.hero-servicio{
    /* Se combinan todos los fondos aquí */
    background:
        linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), /* overlay */
        url('../imagenes/background/cableado-estructurado.jpg') center/cover no-repeat;
    color: black;
    padding: 80px 20px;
    text-align: center;
}

.hero-servicio h1{
font-size:42px;
margin-bottom:20px;
}

.hero-servicio p{
font-size:18px;
max-width:700px;
margin:auto;
}


/* CONTENIDO */

.contenido-servicio{
max-width:1000px;
margin:auto;
padding:60px 20px;
}

.contenido-servicio h2{
margin-bottom:20px;
font-size:28px;
}

.contenido-servicio p{
line-height:1.7;
margin-bottom:20px;
}

.contenido-servicio ul{
padding-left:20px;
line-height:1.8;
}


/* GRID SERVICIOS */

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


/* CARDS */

.card-servicio{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.1);
transition:0.3s;
}

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

.card-servicio h3{
margin-bottom:10px;
}


/* CTA */

.cta-servicio{
background:#0f2027;
color:white;
text-align:center;
padding:60px 20px;
}

.btn-servicio{
display:inline-block;
margin-top:20px;
padding:12px 30px;
background:#00aaff;
color:white;
text-decoration:none;
border-radius:6px;
}

.btn-servicio:hover{
background:#008ecc;
}

/* ######################################################## */
/* ############### Fin structured-cabling ################# */
/* ######################################################## */


/* ########################################### */
/* ################### CCTV ################## */
/* ########################################### */

/* HERO CCTV */

.hero-cctv {
    background: 
        linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), /* overlay semitransparente */
        url('../imagenes/background/cctv.png') center/cover no-repeat; /* imagen de fondo */
    color: black;
    text-align: center;
    padding: 80px 20px;
}

.hero-cctv h1{
font-size:42px;
margin-bottom:15px;
}

.hero-cctv p{
font-size:18px;
max-width:700px;
margin:auto;
}


/* CONTENIDO CCTV */

.contenido-cctv{
max-width:1100px;
margin:auto;
padding:60px 20px;
}

.contenido-cctv h2{
font-size:28px;
margin-bottom:20px;
color:#243b55;
}

.contenido-cctv h3{
margin-top:20px;
margin-bottom:10px;
color:#141e30;
}

.contenido-cctv p{
margin-bottom:15px;
line-height:1.7;
}

.contenido-cctv ul{
padding-left:20px;
line-height:1.8;
}


/* GRID CCTV */

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


/* CARDS CCTV */

.card-cctv{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
transition:0.3s;
}

.card-cctv:hover{
transform:translateY(-6px);
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

.card-cctv h3{
margin-bottom:10px;
font-size:20px;
color:#243b55;
}


/* TABLA CCTV */

.tabla-cctv{
width:100%;
border-collapse:collapse;
margin-top:30px;
background:white;
}

.tabla-cctv th{
background:#243b55;
color:white;
padding:12px;
text-align:left;
}

.tabla-cctv td{
padding:10px;
border-bottom:1px solid #ddd;
}

.tabla-cctv tr:hover{
background:#f0f4f8;
}


/* CTA CCTV */

.cta-cctv{
background:#243b55;
color:white;
text-align:center;
padding:70px 20px;
}

.cta-cctv h2{
font-size:32px;
margin-bottom:15px;
}

.cta-cctv p{
font-size:18px;
margin-bottom:25px;
}

.btn-cctv{
display:inline-block;
padding:14px 35px;
background:#ff6b00;
color:white;
text-decoration:none;
font-weight:bold;
border-radius:6px;
transition:0.3s;
}

.btn-cctv:hover{
background:#e55d00;
transform:scale(1.05);
}

/* ############################################### */
/* ################### Fin CCTV ################## */
/* ############################################### */



/* ############################################ */
/* ################### SMOKE DETECTOR ######### */
/* ############################################ */

/* HERO SMOKE */
.hero-smoke{
background:linear-gradient(120deg,#42275a,#734b6d);
background-image: 
        linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), /* overlay blanco semitransparente */
        url('../imagenes/background/deteccion-incendio.jpg'); 
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: black;
text-align:center;
padding:80px 20px;
}

.hero-smoke h1{
font-size:42px;
margin-bottom:15px;
}

.hero-smoke p{
font-size:18px;
max-width:700px;
margin:auto;
}

/* CONTENIDO SMOKE */
.contenido-smoke{
max-width:1100px;
margin:auto;
padding:60px 20px;
}

.contenido-smoke h2{
font-size:28px;
margin-bottom:20px;
color:#734b6d;
}

.contenido-smoke h3{
margin-top:20px;
margin-bottom:10px;
color:#42275a;
}

.contenido-smoke p{
margin-bottom:15px;
line-height:1.7;
}

.contenido-smoke ul{
padding-left:20px;
line-height:1.8;
}

/* GRID SMOKE */
.grid-smoke{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:30px;
}

/* CARDS SMOKE */
.card-smoke{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
transition:0.3s;
}

.card-smoke:hover{
transform:translateY(-6px);
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

.card-smoke h3{
margin-bottom:10px;
font-size:20px;
color:#42275a;
}

/* CTA SMOKE */
.cta-smoke{
background:#734b6d;
color:white;
text-align:center;
padding:70px 20px;
}

.cta-smoke h2{
font-size:32px;
margin-bottom:15px;
}

.cta-smoke p{
font-size:18px;
margin-bottom:25px;
}

.btn-smoke{
display:inline-block;
padding:14px 35px;
background:#ff4b00;
color:white;
text-decoration:none;
font-weight:bold;
border-radius:6px;
transition:0.3s;
}

.btn-smoke:hover{
background:#e43a00;
transform:scale(1.05);
}

/* ######################################## */
/* ########### Fin SMOKE DETECTOR ######### */
/* ######################################## */

/* ################################### */
/* ########## ACCESS CONTROL ######### */
/* ################################### */

/* HERO ACCESS */
.hero-access{
background: linear-gradient(120deg,#1f4037,#99f2c8);
background-image: 
        linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), /* overlay blanco semitransparente */
        url('../imagenes/background/control-accesos.jpg'); 
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: black;
text-align:center;
padding:80px 20px;
}

.hero-access h1{
font-size:42px;
margin-bottom:15px;
}

.hero-access p{
font-size:18px;
max-width:700px;
margin:auto;
}

/* CONTENIDO ACCESS */
.contenido-access{
max-width:1100px;
margin:auto;
padding:60px 20px;
}

.contenido-access h2{
font-size:28px;
margin-bottom:20px;
color:#1f4037;
}

.contenido-access h3{
margin-top:20px;
margin-bottom:10px;
color:#133d32;
}

.contenido-access p{
margin-bottom:15px;
line-height:1.7;
}

.contenido-access ul{
padding-left:20px;
line-height:1.8;
}

/* GRID ACCESS */
.grid-access{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:30px;
}

/* CARDS ACCESS */
.card-access{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
transition:0.3s;
}

.card-access:hover{
transform:translateY(-6px);
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

.card-access h3{
margin-bottom:10px;
font-size:20px;
color:#133d32;
}

/* CTA ACCESS */
.cta-access{
background:#1f4037;
color:white;
text-align:center;
padding:70px 20px;
}

.cta-access h2{
font-size:32px;
margin-bottom:15px;
}

.cta-access p{
font-size:18px;
margin-bottom:25px;
}

.btn-access{
display:inline-block;
padding:14px 35px;
background:#00ff99;
color:#1f4037;
text-decoration:none;
font-weight:bold;
border-radius:6px;
transition:0.3s;
}

.btn-access:hover{
background:#00cc77;
transform:scale(1.05);
}


/* ####################################### */
/* ########## FIN ACCESS CONTROL ######### */
/* ####################################### */



/* ################################# */
/* ########### ANTI INTRUSO ######## */
/* ################################# */

/* HERO ANTI */
.hero-anti{
background: linear-gradient(120deg,#8B0000,#FF4500,#FFA07A);
background-image: 
        linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), /* overlay blanco semitransparente */
        url('../imagenes/background/sistema-contra-intruso.jpeg'); 
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: black;
text-align:center;
padding:80px 20px;
}

.hero-anti h1{
font-size:42px;
margin-bottom:15px;
}

.hero-anti p{
font-size:18px;
max-width:700px;
margin:auto;
}

/* CONTENIDO ANTI */
.contenido-anti{
max-width:1100px;
margin:auto;
padding:60px 20px;
}

.contenido-anti h2{
font-size:28px;
margin-bottom:20px;
color:#8B0000;
}

.contenido-anti h3{
margin-top:20px;
margin-bottom:10px;
color:#4B0000;
}

.contenido-anti p{
margin-bottom:15px;
line-height:1.7;
}

.contenido-anti ul{
padding-left:20px;
line-height:1.8;
}

/* GRID ANTI */
.grid-anti{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:30px;
}

/* CARDS ANTI */
.card-anti{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
transition:0.3s;
}

.card-anti:hover{
transform:translateY(-6px);
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

.card-anti h3{
margin-bottom:10px;
font-size:20px;
color:#4B0000;
}

/* CTA ANTI */
.cta-anti{
background:#8B0000;
color:white;
text-align:center;
padding:70px 20px;
}

.cta-anti h2{
font-size:32px;
margin-bottom:15px;
}

.cta-anti p{
font-size:18px;
margin-bottom:25px;
}

.btn-anti{
display:inline-block;
padding:14px 35px;
background:#FF4500;
color:white;
text-decoration:none;
font-weight:bold;
border-radius:6px;
transition:0.3s;
}

.btn-anti:hover{
background:#FF6347;
transform:scale(1.05);
}

/* ##################################### */
/*########### FIN ANTI INTRUSO ######### */
/* ##################################### */


/*############################## */
/*############# RACK ########### */
/*############################## */

/* ########################################### */
/* ################### RACK ################## */
/* ########################################### */


/* HERO */

.hero-rack{
background:linear-gradient(120deg,#0f2027,#2c5364,#4e73df);
background-color: linear-gradient(120deg,#0f2027,#203a43,#2c5364);
background-image: 
        linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), /* overlay blanco semitransparente */
        url('../imagenes/background/rack.jpg'); 
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: black;
text-align:center;
padding:80px 20px;
}

.hero-rack h1{
font-size:42px;
margin-bottom:15px;
}

.hero-rack p{
font-size:18px;
max-width:700px;
margin:auto;
}


/* CONTENIDO */

.contenido-rack{
max-width:1100px;
margin:auto;
padding:60px 20px;
}

.contenido-rack h2{
font-size:28px;
margin-bottom:20px;
color:#2c5364;
}

.contenido-rack h3{
margin-bottom:10px;
color:#0f2027;
}

.contenido-rack p{
margin-bottom:15px;
line-height:1.7;
}

.contenido-rack ul{
padding-left:20px;
line-height:1.8;
}



/* GRID */

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



/* CARDS */

.card-rack{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
transition:0.3s;
}

.card-rack:hover{
transform:translateY(-6px);
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}



/* CTA */

.cta-rack{
background:#2c5364;
color:white;
text-align:center;
padding:70px 20px;
}

.cta-rack h2{
font-size:32px;
margin-bottom:15px;
}

.cta-rack p{
font-size:18px;
margin-bottom:25px;
}



.btn-rack{
display:inline-block;
padding:14px 35px;
background:#4e73df;
color:white;
text-decoration:none;
font-weight:bold;
border-radius:6px;
transition:0.3s;
}

.btn-rack:hover{
background:#3756c5;
transform:scale(1.05);
}

/*##############################*/
/*########### FIN RACK #########*/
/*##############################*/


/*##############################*/
/*########### Soporte IT #######*/
/*##############################*/

/* HERO */

.hero-it{

background:linear-gradient(120deg,#141e30,#243b55);
background-image: 
        linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), /* overlay blanco semitransparente */
        url('../imagenes/background/soporteit.jpg'); 
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: black;
text-align:center;
padding:80px 20px;

}

.hero-it h1{

font-size:42px;

margin-bottom:15px;

}

.hero-it p{

font-size:18px;

max-width:700px;

margin:auto;

}



/* CONTENIDO */

.contenido-it{

max-width:1100px;

margin:auto;

padding:60px 20px;

}

.contenido-it h2{

font-size:28px;

margin-bottom:20px;

color:#243b55;

}

.contenido-it h3{

margin-bottom:10px;

color:#141e30;

}

.contenido-it p{

margin-bottom:15px;

line-height:1.7;

}

.contenido-it ul{

padding-left:20px;

line-height:1.8;

}



/* GRID */

.grid-it{

display:grid;

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

gap:30px;

margin-top:30px;

}



/* CARDS */

.card-it{

background:white;

padding:25px;

border-radius:10px;

box-shadow:0 4px 15px rgba(0,0,0,0.08);

transition:0.3s;

}

.card-it:hover{

transform:translateY(-6px);

box-shadow:0 8px 25px rgba(0,0,0,0.15);

}



/* CTA */

.cta-it{

background:#243b55;

color:white;

text-align:center;

padding:70px 20px;

}

.cta-it h2{

font-size:32px;

margin-bottom:15px;

}

.cta-it p{

font-size:18px;

margin-bottom:25px;

}



.btn-it{

display:inline-block;

padding:14px 35px;

background:#00aaff;

color:white;

text-decoration:none;

font-weight:bold;

border-radius:6px;

transition:0.3s;

}

.btn-it:hover{

background:#008ecc;

transform:scale(1.05);

}

/*####################################*/
/*########### FIN Soporte IT #########*/
/*####################################*/