/* ============================================================
   SERVICIOS — franjas editoriales, NO cards
   ============================================================ */

.services {
    background: var(--paper);
}

.services-header {
    max-width: 640px;
    margin-bottom: 64px;
}

.services-header .eyebrow { margin-bottom: 16px; }

.service-row {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 48px;
    padding-block: 52px;
    border-top: 1px solid var(--border-on-paper);
    transition: background var(--transition);
}

.service-row:last-child { border-bottom: 1px solid var(--border-on-paper); }

@media (max-width: 860px) {
    .service-row {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-block: 36px;
    }
    .service-row-name {
        gap: 12px;
    }
    .service-row-copy {
        gap: 14px;
    }
}

.service-row:hover { background: rgba(198, 106, 46, 0.035); }

.service-row-name {
    display: flex;
    align-items: baseline;
    gap: 18px;
}

.service-row-name .num {
    font-size: 0.95rem;
    color: var(--text-on-paper-dim);
}

.service-row-name h3 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 400;
    color: var(--text-on-paper);
}

.service-row-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.service-row-copy p {
    font-size: 0.98rem;
    margin: 0;
}

.service-row-price {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--copper);
}

/* Micro-diagrama lineal por servicio (SVG inline, distinto cada uno) */
.service-diagram {
    width: 100%;
    max-width: 220px;
    height: 56px;
    opacity: 0.85;
}

@media (max-width: 860px) {
    .service-row {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-block: 36px;
    }
    .service-diagram { max-width: 160px; }
}

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.detail-card { background: var(--paper-raised); border: 1px solid var(--border-on-paper); border-radius: var(--radius-lg); padding: 32px; }
.detail-card h4 { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper); margin-bottom: 16px; }
.detail-card ul { padding-left: 18px; }
.detail-card li { font-size: 0.92rem; margin-bottom: 9px; }
.build-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 32px 36px; background: var(--ink); color: var(--text-on-ink); border-radius: var(--radius-lg); flex-wrap: wrap; }
.build-cta p { color: var(--text-on-ink-muted); margin: 0; max-width: 480px; }

@media (max-width: 760px) { .detail-grid { grid-template-columns: 1fr; } }

.promo--services { padding-block: 72px; }