/* ======================================================
   TARJETAS GENERALES
====================================================== */

aside{
margin-bottom:20px;
}

.card{
border:none;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
transition:0.3s;
height:100%;
border-radius:10px;
overflow:hidden;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,0.15);
}

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

.servicios-section{
padding:40px 0;
background:#f4f6f9;
}

/* HEADER MODERNO */

.servicios-header{
display:flex;
align-items:center;
justify-content:center;
gap:15px;
cursor:pointer;
margin-bottom:40px;

border:none;
background:white;

padding:12px 25px;
border-radius:50px;

width:max-content;
margin-left:auto;
margin-right:auto;

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

transition:all .3s ease;
}

.servicios-header:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

.icon-servicios{
width:40px;
height:auto;
object-fit:contain;
}

.servicios-header h2{
font-weight:bold;
margin:0;
font-size:32px;
}

.flecha-servicios{
font-size:20px;
color:#cc0000;
transition:.3s;
}

.servicios-header[aria-expanded="true"] .flecha-servicios{
transform:rotate(180deg);
}

/* GRID */

.servicios-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

/* COLUMNAS */

.servicio-col{
flex:0 0 23%;
max-width:23%;
margin:10px;
}

/* TARJETAS */

.servicio-card{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
transition:all .35s ease;
height:100%;
}

.servicio-card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 12px 30px rgba(0,0,0,0.18);
}

.servicio-img{
width:100%;
height:200px;
object-fit:cover;
transition:transform .5s ease;
}

.servicio-card:hover .servicio-img{
transform:scale(1.08);
}

.servicio-body{
padding:20px;
text-align:center;
}

.servicio-icon{
font-size:28px;
margin-bottom:10px;
}

.servicio-body h4{
font-weight:bold;
margin-bottom:10px;
}

.servicio-body p{
font-size:15px;
color:#555;
}

.servicio-link{
text-decoration:none;
color:inherit;
}


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

@media (max-width:992px){

.servicio-col{
flex:0 0 45%;
max-width:45%;
}

}

@media (max-width:576px){

.servicio-col{
flex:0 0 100%;
max-width:100%;
}

.servicio-img{
height:160px;
}

}

/* ======================================================
   PARTNERS
====================================================== */

.partners-section{
padding:40px 0;
background:#f4f6f9;
text-align:center;
}

/* HEADER MODERNO */

.partners-header{
display:flex;
align-items:center;
justify-content:center;
gap:15px;
cursor:pointer;
margin-bottom:40px;

border:none;
background:white;

padding:12px 25px;
border-radius:50px;

width:max-content;
margin-left:auto;
margin-right:auto;

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

transition:all .3s ease;
}

.partners-header:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

.partners-header h2{
font-weight:bold;
margin:0;
font-size:32px;
}

/* ICONO */

.icon-partners{
width:40px;
height:auto;
object-fit:contain;
}

/* FLECHA */

.flecha-partners{
font-size:20px;
color:#cc0000;
transition:0.3s;
}

.partners-header[aria-expanded="true"] .flecha-partners{
transform:rotate(180deg);
}

/* GRID LOGOS */

.partners-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:35px;
}

/* LINKS (contenedor del logo) */

.partners-row a{
display:flex;
align-items:center;
justify-content:center;
width:200px;
height:120px;
}

/* LOGOS */

.partners-row img{
max-width:200px;
max-height:120px;
object-fit:contain;

filter:grayscale(100%);
opacity:0.75;

transition:all .3s ease;
}

/* HOVER COLOR */

.partners-row img:hover{
filter:grayscale(0%);
opacity:1;
transform:scale(1.08);
}

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

@media (max-width:768px){

.partners-row{
gap:20px;
}

/* contenedor */

.partners-row a{
flex:0 0 45%;
max-width:45%;
height:90px;
display:flex;
align-items:center;
justify-content:center;
}

/* logo */

.partners-row img{
max-width:130px;
max-height:80px;
object-fit:contain;
}

}

/* ======================================================
   FIX MOBILE HEADERS
====================================================== */

@media (max-width:576px){

.servicios-header,
.partners-header{

width:100%;
max-width:100%;

flex-wrap:wrap;

padding:12px 15px;
}

.servicios-header h2,
.partners-header h2{
font-size:21px;
}

.icon-servicios,
.icon-partners{
width:32px;
}

}