/**
 * COMPONENTS / SERVICE CARD
 * -----------------------------------------------------------------------------
 * Tarjeta de servicio: icono + título + descripción + enlace.
 * Se usa en la portada (3 destacados) y en el archivo de servicios (todos).
 *
 *   <article class="service-card">
 *       <div class="icon-box">SVG</div>
 *       <h3 class="service-card__title">Ingeniería eléctrica</h3>
 *       <p class="service-card__text">…</p>
 *       <a class="btn-link">Ver más <span class="btn-arrow">→</span></a>
 *   </article>
 */

.service-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    transition: var(--transition);
}

.service-card:hover {
    transform: var(--lift-lg);
    border-color: var(--border-blue);
    box-shadow: var(--shadow-md);
}

.service-card__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-h4);
    color: var(--heading);
    margin-bottom: var(--space-sm);
}

.service-card__text {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    margin-bottom: var(--space-md);
}

/* El enlace queda siempre pegado abajo aunque los textos midan distinto */
.service-card .btn-link {
    margin-top: auto;
    align-self: flex-start;
}

/* --- Variante sobre fondo alterno -------------------------------------- */

.section--white .service-card {
    background: var(--bg-alt);
    border-color: var(--border-soft);
}

.section--white .service-card:hover {
    background: var(--white);
}

/* --- Variante en lista larga (archivo de servicios) -------------------- */

.service-card--wide {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: var(--space-md);
    align-items: start;
}

.service-card--wide .icon-box {
    margin-bottom: 0;
}

.service-card--wide .btn-link {
    grid-column: 2;
}

@media (max-width: 700px) {

    .service-card {
        padding: 26px 22px;
    }
}