/* ============================================
   Wazo — plan.css
   ============================================ */

.wazo-plan__title { font-size: clamp(var(--wazo-fs-32), 5vw, var(--wazo-fs-70)); line-height: var(--wazo-lh-display); max-width: 22ch; }
.wazo-plan__subtitle { margin-top: var(--wazo-space-4); color: var(--wazo-color-text-muted); font-size: var(--wazo-fs-16); max-width: 60ch; }

.wazo-plan__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wazo-space-4);
    margin-block: var(--wazo-space-8);
    padding-top: var(--wazo-space-6);
    border-top: 1px solid var(--wazo-color-ui-border);
}
.wazo-plan__stat-num {
    display: block;
    font-size: var(--wazo-fs-32);
    font-weight: var(--wazo-font-weight-medium);
    line-height: var(--wazo-lh-none);
}
.wazo-plan__stat-lbl {
    display: block;
    margin-top: var(--wazo-sp-phone-xs);
    font-size: var(--wazo-fs-12);
    text-transform: uppercase;
    letter-spacing: -0.05em;
    color: var(--wazo-color-text-muted);
}
@media (max-width: 1200px) {
    .wazo-plan__stats { grid-template-columns: repeat(2, 1fr); }
}

/* Destacado azul gradiente */
.wazo-plan__destacado-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wazo-space-8);
    align-items: center;
    padding: var(--wazo-space-10);
    background: var(--wazo-gradient-primary);
    border-radius: var(--wazo-radius-xl);
}
@media (max-width: 1200px) { .wazo-plan__destacado-inner { grid-template-columns: 1fr; padding: var(--wazo-space-6); } }
.wazo-plan__destacado-content h2 { font-size: var(--wazo-fs-32); margin-bottom: var(--wazo-space-3); }
.wazo-plan__destacado-content p { color: rgba(255,255,255,0.85); max-width: 50ch; }
.wazo-plan__destacado-img { width: 100%; border-radius: var(--wazo-radius-lg); }

/* Programa */
.wazo-plan__programa h2 { font-size: var(--wazo-fs-32); margin-bottom: var(--wazo-space-4); }
.wazo-plan__programa-desc { color: var(--wazo-color-text-muted); max-width: 70ch; line-height: var(--wazo-lh-body); }

/* Pasos */
.wazo-plan__pasos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--wazo-space-4);
    counter-reset: paso;
}
.wazo-plan__paso {
    padding: var(--wazo-space-6);
    background: var(--wazo-color-surface);
    border: 1px solid var(--wazo-color-ui-border);
    border-radius: var(--wazo-radius-md);
}
.wazo-plan__paso-num {
    font-size: var(--wazo-font-size-3xl);
    color: var(--wazo-color-accent);
    line-height: var(--wazo-lh-none);
    margin-bottom: var(--wazo-space-4);
    font-variant-numeric: tabular-nums;
}
.wazo-plan__paso-title { font-size: var(--wazo-fs-16); margin-bottom: var(--wazo-space-2); }
.wazo-plan__paso-desc  { color: var(--wazo-color-text-muted); font-size: var(--wazo-font-size-sm); }

/* Adaptación */
.wazo-plan__adaptacion h2 { font-size: var(--wazo-fs-32); margin-bottom: var(--wazo-space-6); max-width: 30ch; }
.wazo-plan__adaptacion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--wazo-space-4);
}
.wazo-plan__adaptacion-card {
    padding: var(--wazo-space-6);
    background: var(--wazo-color-surface);
    border: 1px solid var(--wazo-color-ui-border);
    border-radius: var(--wazo-radius-md);
}
.wazo-plan__adaptacion-card h3 { font-size: var(--wazo-fs-16); margin-bottom: var(--wazo-space-2); }
.wazo-plan__adaptacion-card p  { color: var(--wazo-color-text-muted); font-size: var(--wazo-font-size-sm); }

/* Ritmo móvil — phone (≤639px) */
@media (max-width: 639px) {
    /* Stats: gap intra-grid, separación de bloque y respiro superior */
    .wazo-plan__stats {
        gap: var(--wazo-sp-phone-sm);            /* 16px */
        margin-block: var(--wazo-sp-phone-lg);   /* 40px */
        padding-top: var(--wazo-sp-phone-md);    /* 24px */
    }

    /* Destacado: padding y gap internos a ritmo phone */
    .wazo-plan__destacado-inner {
        padding: var(--wazo-sp-phone-md);        /* 24px */
        gap: var(--wazo-sp-phone-md);            /* 24px */
    }

    /* Cards (pasos y adaptación): padding interno a 24px */
    .wazo-plan__paso,
    .wazo-plan__adaptacion-card {
        padding: var(--wazo-sp-phone-md);        /* 24px */
    }

    /* Card-to-card: gap de las rejillas a 16px */
    .wazo-plan__pasos-grid,
    .wazo-plan__adaptacion-grid {
        gap: var(--wazo-sp-phone-sm);            /* 16px */
    }
}