/* =============================================================================
   servicios.css · sección de servicio con columna fija
   ============================================================================= */

.servicio {
    padding: 120px 0;
    border-bottom: 1px solid var(--line);
}

.servicio:last-child {
    border-bottom: 0;
}

.servicio .shell {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 72px;
    align-items: start;
}

/* La columna izquierda se queda fija mientras el detalle avanza. */
.servicio-aside {
    position: sticky;
    top: 130px;
}

.servicio-numeral {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(4rem, 9vw, 7rem);
    line-height: 0.9;
    color: var(--gold);
    opacity: 0.9;
}

.servicio-aside .tag {
    margin-top: 22px;
}

.servicio-main h2 {
    font-size: clamp(2rem, 4vw, 2.9rem);
}

.servicio-resumen {
    margin-top: 22px;
    max-width: 56ch;
    color: var(--fg-2);
    font-size: 1.02rem;
}

/* Tabla de hechos: cada punto en su fila, con guion em como viñeta. */
.servicio-hechos {
    margin-top: 44px;
    border-top: 1px solid var(--line);
}

.servicio-hechos > li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
    color: var(--fg);
    font-size: 0.98rem;
}

.servicio-hechos .guion {
    flex: 0 0 auto;
    color: var(--gold);
}