/* ================================
BLOQUES GRANDES SERVICIOS
================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

.bloques-servicios{

width:100%;
display:flex; /* fila */
flex-direction:row;
font-family:'Plus Jakarta Sans', sans-serif;
background:#0d1117;
    
}

.bloque {
  display: block;
  text-decoration: none;
  color: white;
  position: relative;
}

.bloque{

width:33.33%; /* cada card ocupa 1/3 */
height:700px;

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

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

position:relative;

}

.bloque::before{

content:"";
position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.65);

}

.bloque-contenido{

position:relative;
text-align:center;
color:white;
max-width:300px;
padding:20px;

}

.bloque-contenido h2{

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

}

.bloque-contenido p{

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

}

.bloque-contenido a{

display:inline-block;
padding:10px 22px;
background:#232b4b;   /* azul moderno */
border-radius:5px;
color:white;
text-decoration:none;

transition:0.3s;

}

.bloque-contenido a:hover{

background:white;
color:black;

}

/* ================================
ANIMACION CARDS SCROLL
================================ */

.bloque{

opacity:0;
transform:translateX(-80px);
transition:all 0.8s ease;

}

.bloque.mostrar{

opacity:1;
transform:translateX(0);

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

@media (max-width: 900px){

.bloques-servicios{

flex-direction:column;

}

.bloque{

width:100%;
height:420px;

}

.bloque-contenido{

max-width:80%;

}

}

@media (max-width: 600px){

.bloque{

height:380px;

}

.bloque-contenido h2{

font-size:26px;

}

.bloque-contenido p{

font-size:14px;

}

}