/* ==========================================================================
   SERVICIOS — Estilos exclusivos de la página
   --------------------------------------------------------------------------
   El héroe, la franja de la arquitecta y la llamada a la acción son
   componentes compartidos y viven en `global.css`.
   ========================================================================== */

/* ==========================================================
   1. SERVICIOS EN DETALLE — #services_list
   ========================================================== */

#services_list {
    padding-block: clamp(3rem, 6vw, calc(var(--section-padding-y) * 0.5));
}

#services_list .services-list__container {
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

#services_list .services-list__item {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: clamp(var(--space-6), 5vw, var(--space-8));
    align-items: start;
    padding-block: var(--space-8);
    border-top: 1px solid var(--border-color);
    /* La cabecera pegajosa taparía el título al saltar desde el pie o desde el
       bloque de servicios de la portada. */
    scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

#services_list .services-list__media {
    background-color: var(--alt-color);
}

#services_list .services-list__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

#services_list .services-list__title {
    font-size: clamp(1.5rem, 3vw, 2.125rem);
}

#services_list .services-list__tasks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3) var(--space-5);
}

#services_list .services-list__task {
    display: flex;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
    font-size: 0.9375rem;
    color: var(--muted-color);
}

#services_list .services-list__task::before {
    content: "—";
    color: var(--text-color);
}

@media (max-width: 1024px) {
    #services_list .services-list__item {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    #services_list .services-list__media {
        max-width: 320px;
    }
}