/* =============================================================================
   NOSOTROS — /nosotros/ · S219 (GUION_NOSOTROS rev. 3)
   Page-scoped bajo .nos. Consume el catalogo publico (.areas-hero__*, .areas-section,
   .areas-prose, .areas-feature-card--door, .areas-service-feature, .areas-figure,
   .areas-note, .areas-cta). Aqui SOLO lo propio de esta pantalla: los tres bloques
   tipograficos de "Como miramos un problema" (disposicion + muestra subordinada, SIN
   iconos) y la legibilidad del rastro en movil. Token-only (guard por glob areas-*.css).
   ============================================================================= */

/* --- §5 disposicion / muestra --- */
.nos-method {
    display: flex; flex-direction: column;
    height: 100%;
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}
.nos-method__letter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    font-family: var(--font-mono);
    font-weight: var(--font-bold);
    color: var(--brand-cyan-dark);
    background: color-mix(in srgb, var(--brand-cyan) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-cyan) 35%, transparent);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
.nos-method__disposition {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--brand-navy);
    line-height: 1.25;
    margin-bottom: var(--space-3);
}
.nos-method__body { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-4); }
.nos-method__sample {
    margin-top: auto;
    border-left: 3px solid var(--brand-cyan);
    background: var(--bg-subtle);
    padding: var(--space-3) var(--space-4);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}
.nos-method__sample strong { color: var(--text-primary); }

/* --- §4 rastro: 8px mono en viewBox 920 no se lee a 390px; en movil se desplaza,
   no se encoge (el guion admite version tipografica; esto conserva el diagrama) --- */
.nos-rastro { overflow-x: auto; }
.nos-rastro svg { min-width: 680px; }

/* --- §4 sub-bloques del cruce --- */
.nos-cruce__sub { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.nos-cruce__title { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--brand-navy); margin-bottom: var(--space-3); }