.container { 
    max-width:1200px; 
    margin:129px auto; 
    padding: 24px 18px; 
    box-sizing:border-box; 
    font-family: "Open Sans", Arial, sans-serif; 
    color:#222; 
}


.services-main-title {
font-size: clamp(28px, 3.2vw, 42px);
color: #ec008c;
margin: 0 0 22px;
font-weight: 700;
}

/* ---- grid de servicios: 2 columnas en desktop, 1 en móvil ---- */
.services-grid {
display: grid;
gap: 26px;
grid-template-columns: 1fr 1fr;
}

/* cada tarjeta interna con imagen + cuerpo */
.service-card {
display: flex;
gap: 18px;
align-items: flex-start;
background: #fff;
border-radius: 10px;
padding: 16px;
box-shadow: 0 8px 22px rgba(0,0,0,0.06);
transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.09); }

.service-media {
flex: 0 0 48%;
max-width:48%;
border-radius: 8px;
overflow: hidden;
background:#f6f6f6;
}
.service-media img { 
    width:100%; 
    height:100%; 
    display:block; 
    object-fit:cover; 
    object-position:center; 
}

.service-body { flex:1; min-width:0; }

.service-title {
margin: 0 0 6px;
font-size: clamp(20px, 1.8vw, 26px);
color: #212121;
font-weight: 800;
}

/* separador pequeño de color */
.sep { width: 36px; height: 4px; margin: 8px 0 12px; border-radius:2px; }
.sep-cyan { background: #00aeef; }
.sep-pink { background: #ec008c; }
.sep-yellow { background: #fff200; }
.sep-dark { background: #0a0000; }

.service-text { margin:0 0 12px; color:#444; line-height:1.5; font-size:15px; }

/* columnas internas: lista + icono */
.two-cols {
    display:flex;
    gap:12px;
    align-items:center;
}

.service-list {
list-style: none;
padding: 0;
margin: 0;
color:#333;
font-size:14px;
line-height:1.5;
}
.service-list li { margin-bottom:6px; padding-left:12px; position:relative; }
.service-list li::before { content: "•"; position:absolute; left:0; color:#00aeef; font-weight:700; }

.service-icon { 
    width:72px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    padding-left:6px; 
}

/* accesibilidad: focus visible para usuarios con teclado */
.service-card a, .service-card button { outline: none; }
.service-card:focus-within { box-shadow: 0 0 0 3px rgba(0,174,239,0.12); }

/* responsive: apilar en móvil y ajustar tamaños */
@media (max-width: 900px) {
.services-grid { grid-template-columns: 1fr; }
.service-card { flex-direction: column; gap: 12px; padding:14px; }
.service-media { width:100%; max-width:100%; height:220px; }
.two-cols { align-items:flex-start; }
.service-icon { width:auto; padding-left:0; }
}

@media (max-width: 480px) {
.container { padding: 16px; }
.service-media { height:180px; }
.service-title { font-size:18px; }
.service-text { font-size:14px; }
}